Microfeatures I Love in Blogs and Personal Websites

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • gwern.net

    Site infrastructure for gwern.net (CSS/JS/HS/images/icons). Custom Hakyll website with unique automatic link archiving, recursive tooltip popup UX, dark mode, and typography (sidenotes+dropcaps+admonitions+inflation-adjuster).

    > If you want to show progress while the reader is somewhere in the middle of a page, you could use a page progress bar.

    As best as I can tell, the standard name for these is 'scroll spy'. Gwern.nt mobile example: https://gwern.net/doc/design/2023-04-28-gwern-gwernnet-mobil...

    They are becoming increasingly common as web browsers/OSes kill scroll bars and you are forced to implement your own: https://artemis.sh/2023/10/12/scrollbars.html

    > I’ve seen this floating ToC done before, but could not find a site off the top of my head that implements the feature

    Gwern.net has it! It's just that because we use both margins already, there is usually not enough horizontal space. But if you have a wide enough screen, you should see it, like https://gwern.net/doc/design/2023-08-07-gwern-gwernnet-deskt... You can also see this on LessWrong.com and https://80000hours.org/podcast/ podcasts.

    > Relatively often I come across pages that have unique IDs for each header, but no clickable links! I end up having to use inspect element to find the anchor points.

    Chrome has a 'link to text fragment' feature for this which got standardized and which Firefox is supposed to support at some point. So not so necessary as it used to be. (The unique IDs are often not so unique anyway or unstable.)

    > I’ve found the link processing code on GitHub , and even the list of websites that get their own icons . I could not find a verbal description, though.

    Links.js hasn't been used in years on Gwern.net. You actually want https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07... https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07... and for the history/overview, https://gwern.net/design-graveyard#link-icon-css-regexps , and to see all of the link-icons, https://gwern.net/lorem-link#link-icons

    > Gwern’s website has no shortage of cool ideas. Among them showing link previews on hover. When hovering over a link, the site displays a popup window that contains a view into that page. I suspect that this view is also archived somehow, so that it retains a view into the page that matches it at the time of writing.

    The archiving is complicated. Most of what you are seeing there is the use of iframes for 'live' links. (I manually check that websites do not break in an iframe before whitelisting them for popups like that.) But we do make extensive use of archives: https://gwern.net/archiving#preemptive-local-archiving

    > Links to Other Sites

    Gwern.net has a blogroll, incidentally. But I've always found the traditional 'big list in the sidebar' to be clunky. More fun is the 'site of the day' approach. So we went with an 'X of the Day' approach: in the footer of every page, there is a quote, a website, and an annotation of the day. (It's not really 'daily', but every few days after a full site sync.)

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • tryscroll

    Try Scroll in your web browser

    > if you have comments or an otherwise large footer not associated with the content of the post

    I think the better solution in this case is to use the (relatively) new html tags:

    Comments

    Demo:

    https://try.scroll.pub/#scroll%0A%20%0A%20expander%20Comment...

  • treasurechest

    TechBlog ✍ https://blog.frost.kiwi - This is a collection of useful things I want to share with the world

    Doing a direct mapping from Markdown Headings to Table of contents+Anchors via Eleventy [1] is what I went with, simple setup, works perfectly.

    [1] https://github.com/FrostKiwi/treasurechest/blob/4d96694a912e...

  • du.nkel.dev

    This is the repository for comments to du.nkel.dev. Powered by giscus.app.

    I have actually three dates on my blog [1], (1) the date I started writing the post (hardcoded in the url/name), (2) the date it was first published (defined in the markdown frontmatter) and (3) the date a post was last modifed (based on git commits). I think all three are relevant.

    [1]: https://du.nkel.dev/

  • webscripts

    Scripts for manipulating my website

    I do this too, and I like it a lot: https://www.jefftk.com/p/mastodon-replies-as-comments

    > Using Mastodon to power our comments means that every time someone visits the blog post, the user’s browser makes a request to your Mastodon instance. ... I’d proxy these requests through my server, but it’s yaks all the way down.

    I do proxy these, and it's not too much work [1]. A major reason to proxy is so you can cache: if a blog post gets HN'd it could easily get more traffic than your Mastodon instance would like to receive.

    [1] https://github.com/jeffkaufman/webscripts/blob/master/commen...

  • aylett.co.uk

    My personal website

    There's nothing stopping a website that's written using NextJS from having an RSS feed. Like mine: https://github.com/andrewaylett/aylett.co.uk/blob/main/src/a... for example.

  • prism-remote

    A custom element/web component for highlighting remote code with Prism.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
  • jsonblog-cli

    The import/export reminds me of my own little blog generator project I've been working on over the years (super immature)

    Essentially, your whole blog is just one file called "resume.json" that describes where all your post/pages come from, they could be external or local resources linked -> https://github.com/jsonblog/jsonblog-cli/blob/master/blog.js...

    And then you have "generators" which are just functions, that can take your blog.json and output all the required html/assets to build it e.g. https://github.com/jsonblog/jsonblog-generator-boilerplate

    Love your setup so far, will follow along.

  • The import/export reminds me of my own little blog generator project I've been working on over the years (super immature)

    Essentially, your whole blog is just one file called "resume.json" that describes where all your post/pages come from, they could be external or local resources linked -> https://github.com/jsonblog/jsonblog-cli/blob/master/blog.js...

    And then you have "generators" which are just functions, that can take your blog.json and output all the required html/assets to build it e.g. https://github.com/jsonblog/jsonblog-generator-boilerplate

    Love your setup so far, will follow along.

  • webring

    Collect the latest RSS items from your favorite feeds (by shepherdjerred)

    > Links to Other Sites

    I used openring-rs for my Astro [1] site, but eventually replaced it with a TypeScript-native solution [0].

    If you're looking for an easy way to pull RSS feeds from TypeScript and show the N most recent posts, take a look at my library.

    PS: I'm currently unemployed, so if you have any feature requests I will quickly oblige :)

    PPS: if you haven't heard of Astro [1], do yourself a favor and check it out. You write JSX syntax and get static HTML/CSS out, with the option for JS only as needed.

    [0]: https://github.com/shepherdjerred/webring

    [1]: https://astro.build/

  • astro

    The web framework for content-driven websites. ⭐️ Star to support our work!

    > Links to Other Sites

    I used openring-rs for my Astro [1] site, but eventually replaced it with a TypeScript-native solution [0].

    If you're looking for an easy way to pull RSS feeds from TypeScript and show the N most recent posts, take a look at my library.

    PS: I'm currently unemployed, so if you have any feature requests I will quickly oblige :)

    PPS: if you haven't heard of Astro [1], do yourself a favor and check it out. You write JSX syntax and get static HTML/CSS out, with the option for JS only as needed.

    [0]: https://github.com/shepherdjerred/webring

    [1]: https://astro.build/

  • breckyunits.com

    Breck's Blog

    - https://github.com/breck7/breckyunits.com/blob/main/research...

  • rednafi.com

    Musings & rants on software

    My most important microfeature is center-aligned pages. Whenever I read something on a large screen and the content is left-aligned, leaving a large gap on the right, it really turns me off.

    I try to make [mine](https://rednafi.com) center aligned on all clients.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Exploring Astro DB

    2 projects | dev.to | 13 Mar 2024
  • How to build a blog with Astro

    4 projects | dev.to | 6 Mar 2024
  • Proposal the "as-ts" language server.

    2 projects | dev.to | 23 Oct 2022
  • How Astro DB reminded me what SSR really means

    2 projects | dev.to | 5 Jul 2024
  • Created My Portfolio

    2 projects | dev.to | 3 Jul 2024

Did you konow that JavaScript is
the 3rd most popular programming language
based on number of metions?