Microfeatures I love in blogs and personal websites

A feature that seems to have disappeared from a lot of blogs these days is date when a post was published. Sometimes date is required to put things into context and I can't understand why so many blogs these days don't have it.

RSS should be a core rather than a 'micro' feature.

Good list, though here comes my Hacker News-style pesky comment:

Justified text on a screen is a feature that makes my eyes and brain hurt.

Ragged text is much easier to read. Uneven and beautiful, like a plant whose details you rest your eyes upon as you observe, rather than a uniform concrete structure where vision is lost.

(╯°□°)╯︵ ┻━┻

┬─┬ノ( º _ ºノ)

Printing CSS doesn't get enough love. The ability to easily create a PDF for later, or to simply print the blog post on a piece of paper to read it outdoors is something I value.

Also, I'm confused about some points. For example, is progress meter really necessary? I mean, isn't the scrollbar a good indicator for the progress?

Many of these suggestions are good. (I should make my subheds clickable!) But a couple of them, oh dear…

I really hate progress bars, they are incredibly distracting. One of the worst examples of front end programmers wasting their time reimplementing browser functions badly. I already have scroll bars! I do not need more scroll bars!

Also, link decoration: my browser already has a nice discreet indicator to tell me where a link goes, I don’t need or want mysterious dingbats in the running text. (It reminds me of websites that are so scared of hyperlinks that they send them via interstitial warning pages “YOU ARE LEAVING THE SITE!!!!1!1!”, or in a recent case via a $yber$ecurity box that broke the link completely.) And preview popups? Get in the sea, hostile obnoxious interruption.

I hate all of these features except the index. I get about 12kbps on mobile. There are very few sites I can view. Hackers news is one of them. The more I use the modern internet the more I want to be left alone with my thoughts. I need th website equivalent of a sensorial faraday cage.

Maybe it's just me, but I'm not so much of a fan of Dialogs as demonstrated here, especially when there are a lot of characters, each of which have a different role that is only communicated by going to a separate page to read about them. If I wanted to explain something in an article I was writing, I would just explain it in the same way I'd do everything else, with a separate paragraph, maybe with some links to relevant sources that I used to become familiar with the topic too

Oh this is a great list. Thank you. A few things on here that I'm now going to spend the day bringing to my site. I like how you explicitly called out a few things Gwern does. I love that site but hadn't examined closely _why_.

Here is a few additional things not on your list that I love and have implemented on my blog:

- Plain text versions of all posts. Change the file extension on any page on my site from ".html" to ".txt" to view it as plain text (https://breckyunits.com/intelligence.txt). Makes it easy to copy/paste a whole post into an email or Reddit submission

- View source links at the bottom of every page. Every post is 1 file tracked by git, and I put a "View source" link at the bottom of each page. Even the static pages are also one file, and also have a View Source link.

- Clientside full text search - https://breckyunits.com/search.html.

- CSV export. In addition to RSS, you can download my site as CSV (https://breckyunits.com/posts.csv).

- Keyboard nav. Use the left/right arrow keys to navigate through pages on my site.

- Helpful 404s. If you mistype a url, the 404 page compares it to working urls and shows you the closest match. All done using clientside JS (no web server needed). For example: https://breckyunits.com/pcr.html

- Download entire site and read offline. Everything is designed to work fine locally and you can download the whole thing as a zip. (The link is at the bottom of every page)

- Printable. Everything is designed to look decent printed. Nav elements are hidden via CSS when you go to print. I haven't added automatic generation of PDFS yet, but that is on my todo.

I came to the comments expecting more pushback but I'm surprised. What happened to the simplicity of reading articles without status indicators, link popups, notes, conversations, ...?

OK, table of contents, you're cool.

Easily Linkable Headings

I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be copied, similar to a hyperlink. I see a lot of sites do this with a [unicode chain symbol] which is present on hover, but that's not an option on mobile. Alternate option is to have it next to every heading (ugly), turn every heading into a hyperlink without styling, or make them look like regular hyperlinks which I think is confusing.

I don't like side notes. It tries to separate the readers to two groups---one who wants more details and the other who doesn't, but the problem is that there's no such natural division.

When I read articles with side notes, I often find myself constantly checking the side notes and then regret doing it because the info is unnecessary. I prefer the author to carefully think through and choose what info to present instead of just dumping info to the side notes.

I went pretty far in the direction of these features on my personal sites in the 2010s. They are fun coding and design challenges.

Nowadays I am going the other direction. For the most recent design on my personal site, I even have a “no footnotes” rule, on the theory that (for me at least) footnotes can be an indication of scattered thinking and/or insufficient editing.

These features are all sage advice for any blog in my opinion, and this blog is a good example of one that is easy to follow as a result.

Regarding the Table of Contents feature, however, I believe this makes a big difference in larger blogs, but for medium sized or smaller blogs, it can be a distractor. I use Hugo as well for compositing my site, and find that using ample first level headings (e.g., # Heading name) for major components alongside a solid flow that contains visual graphics placed shortly after the heading offers an attractive and easy-to-navigate browsing experience.

I like Cassidy James' idea of linking a blog post to a Mastodon post[1], and showing the corresponding social interactions as a comments section at the bottom of the post. All static site client-side!

1. https://cassidyjames.com/blog/fediverse-blog-comments-mastod...

I value links.

WordPress used to have a Links section in the sidebar by default. It was later criticised for the default links being to WP founders/devs. But it was there, and you could change it.

Links are the web for me. "If you like my site maybe you will like what I like".

Go look at https://diamondgeezer.blogspot.com/ - links!

Go look at other sites and if they are WP chances are no link list.

Am I blaming WP? Yes because I thought it was a terrible change. No because other site builders/SSG's appear to have followed.

Links make the web what it is.

We need more, not less.

Nice list! I like many of these "microfeatures" too. Some I have on my site (https://evalapply.org), some I don't because I don't want to require Javascript for blog functionality. I think I have a few others not in that list.

This is my set of "microfeatures", which are all available in the post I linked below [1].

- All posts must have title, summary, dates (published, updated), one tag at least, and hot link to top of post (it's always #main)

- Open graph metadata for all pages (title + summary)

- All first-party content must be accessible as plain HTML

- Typography and separator elements to establish structure and distinguish functionally different areas of content

- In-page navigation (especially jump links to and from footnotes)

- Table of contents when needed, in a disclosure element

- Custom navigation to group a series of posts

- Markers for external links

- Captions for images and embeds

- Disclosure elements for extra context

- Footnotes (with links back to the referring text)

- Index pages with summaries (the main blog index, and each tag's index)

- RSS feed (global)

So far I'm reasonably happy with things as they are. At some point I'd like to participate in a webring.

[1] https://www.evalapply.org/posts/emerging-from-dotemacs-bankr...

(edit: typo, and a point I forgot)

Bonus: Showing Page Progress

I just look at the scroll bar.

Hot take, but the microfeature I love in blogs and websites is a date at the very top. I know patio11's points against it, but from a user perspective it just adds so much context that for me it's a no-brainer.

for those who want related thinking i defined my list of table stakes features for blogs here https://www.swyx.io/the-surprisingly-high-table-stakes-of-mo...

across reader experience, author experience, and developer experience (for self maintained blogging software)

Almost all of these are pretty nice. I disagree with the preview-on-hover though. That sends off a request to a possibly unknown (possibly unwanted) destination. I often hover a link to look at what the URL popup says in the bottom corner, before following it. It's just not a very privacy-conscious feature, even if convenient.

One micro feature I implement on my blog that I would like to see everywhere: a single-page index of all the posts, like at https://blog.zorinaq.com

Don't paginate this. I want to see at a glance the titles of all the posts the author wrote. I want to be able to ctrl-f to search these titles. Heck, even if you had 100k titles they could still easily be shown on one page, as it would compress to 1 or 2MB transmitted on the wire which is still more lightweight than the average web page size.

It's not a feature, but I like websites without sticky headers or footers. I hate seeing it on mobile, but I don't like it even on desktop.

The worst is the sticky side button overlapping the main content. A few years ago, I sometimes saw "share on social media" buttons obscuring the article, and that was so annoying.

It's comforting to see blogging as a topic on HN front page, along with plenty of constructive comments. I'll take some of the ideas on board.

I've been working on a blogging service myself (here's my blog on it https://lmno.lol/alvaro), focusing on minimalism, hopefully enabling the content to shine on any kind of device (you can read from your favorite terminal too).

You drag and drop your entire blog from a markdown file https://indieweb.social/@xenodium/112265481282475542 (feels more like keeping notes, which you happen to export as a blog).

Service hasn't officially launched. You can play with https://lmno.lol (ephemeral posts) without signing up. Reach out if you'd like to register a blog (invite at lmno.lol).

ps. ASCII art is not displaying properly on Android (known issue). So far, I can only fix by including a monospace font. I'd love to know if this is still possible to fix using system fonts.

On the topic of showing page progress with table of contents, author's description matches exactly how it is implemented in Material for MkDocs [1]. I moved my blog from WordPress to it (for unrelated reasons) and I immediately liked how going through longer blog posts felt with highlighted entry in the table of contents moving together with the page.

[1] https://squidfunk.github.io/mkdocs-material/setup/setting-up...

I have developed an entirely different approach to these blog/site features - such as sidenotes and TOC - that I refer to as an “Iceberg Article”.

It is explained here:

https://john.kozubik.com/pub/IcebergArticle/tip.html

“An Iceberg Article is a single page of writing which links to a larger collection of supporting documents, resources and services.”

I knew the horrid progress bar is gonna be in the article, yikes.

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.

What if there were a standard <BlogEntry> object that everybody rendered to their taste? To some, these are nice features, to others it's just bloat that causes a 5mb download for 1kb of text.

Nowadays it's like every single blog and website will "popup" something everytime i select text. It annoys me to no end, because I select text as I read along and it's incredibly annoying.

Whether be it ChatGPT, medium articles, and recently even Google search!

UBlock Origin allows you to block JavaScript by default on all websites, and it's what I do. And Firefox has something called reader mode. Absolutely fantastic tools.

Since this article mention's Gwern's site several times:

While I admire Gwern's work a lot, I often find his website is trying to do so much that my browser will really struggle. Especially on mobile. It's bad enough I usually avoid reading there, which is a shame.

I'm not sure exactly what causes it, but it might be a combination of page length with many layers of nested, richly formatted and embedded content.

Ironic considering the entire page appears to be aligned to one quarter of the page on the left.

Lots of great features here!

On the link preview feature, both Wikipedia's and Gwern's implementations put the preview on top of the main content. I think this is much nicer to put to the side, where its less intrusive: https://www.jefftk.com/p/preview-on-hover

More nice features:

- flash/highlight the fragment when clicking a link to it. Also, adding some padding for making sure the header is not covering part of the fragment

- an alternative to sidenotes is to use an initially collapsed details/summary element.

- inlining css, js, and svgs so it can be saved as a single html file

This post has some examples of those features:

https://blog.uirig.com/freebsd-jails-network-setup#-rcconf

Thanks for the post! Now I will try to implement all of them, on my free time.

> One immediate thought is that this is completely superseded by the regular browser scroll bar that’s ever-present at the side of the page.

This is unfortunately too often not the case, as people see fit to hide the default scrollbar and have something of their own that doesn't always show or is barely obvious.

Though I agree with ToCs and showing progress that way, for pages long enough to make it useful rather than just extra visual noise, though this page itself doesn't actually do that with either of the techniques shown (an extra bar showing just progress through the actual content, or using the contents list as such a display), unless my content sanitisers have blocked some JS that would be doing such work (I see no evidence of such a problem).

> Easily Linkable Headings

Again, these are sometimes very useful, and when not are easy to ignore completely.

But again, the page doesn't make use of the feature it is extolling the virtues of!

> Grouping Series of Posts

Yes, though I might argue that such links, or a link to a ToC page for the group, belong in a more general list of related links.

> Dialogues

I can't say I agree there, but I think that sort of style point is very subjective so I'll agree to disagree :-)

> Code Blocks with Origin

Yep, can be very useful where relevant.

> Markers for External Links

Definitely, including local links that open in a new tab should also be visually indicated.

I'd stay away from an icon per target site/type though - that could quickly get confusing as you essentially have many icons for the same thing (an external link), and every site will use its own preferred set of icons, so the difference won't help generally identify things at a glance.

> Link Preview

For me, yes, though I'd be very careful where to use such things. It might confuse many non-technical users.

> Anything else

I'd like all articles to carry an obvious date of publishing and/or last update. That can be very useful in judging if the content is likely to be entirely relevant or should be verified where it may go stale.

Code blocks with origin

Honestly, I am baffled that anyone ever writes code blocks for multi-file projects without specifying the file name and path. Especially in a tutorial. I would just... never do that? If you have an actual repo to refer back to, fine, but saying "Write this code" without saying where to write it is just not good instruction.

This is a really great list (well, maybe not link previews, but everything else).

Sidenotes in particular are something I want to see basically everywhere, not just blogs. Modern screens have tons of horizontal space, text is most readable in pretty fairly narrow columns anyway, and scrolling to the bottom just to read a footnote (or, worse, having it pop up in some janky pop-over) is really unpleasant. Happy to see them catch on the blog world at least.

I appreciate when blogs include a "start here" section, like https://tomcritchlow.com/start-here/, or equivalent. Sometimes a bunch of content can overwhelm a new visitor, so entry points are appreciated. See also:

- random post button

- most popular posts

- author's favorite posts

oooh. It was after reading Gwern that I added footnotes and table-of-contents to all of my blog posts. And RSS.

All headings have anchor links. https://josh.works/jaywalking or https://josh.works/full-copy-of-1922-atlanta-zone-plan

Link previews have been widely discussed and sometimes criticized. Some notable implementations include Wikipedia, Google Docs, and Obsidian. IMHO, a link preview adds value when it provides enough information for me not to follow the link and open another tab.

I've created a Linkz.ai link preview script for blogs & websites - it adds fast (no iframes) summaries that appear on hover, and, optionally, on-click, it extracts linked articles, videos & embeds and shows them within the blog. When fewer people follow hyperlinks, it's a win-win situation; the website owner improves its retention and visitors are not overloaded with new tabs.

Links to Other Sites

I used openring-rs for my Astro [1] site, but eventually replaced it with a TypeScript-native solution [0]. You can see it on my blog, e.g. at the bottom of this link [2].

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/

[2]: https://sjer.red/blog/til/2024-06-05/

I like most of these, but I'm on the fence about Link Preview. I find it gets in the way as often as it helps me. I end up triggering it by accident quite a bit, and especially the wikipedia version where there's no X in the corner to dismiss the preview can become annoying. The footnote pop-up bubble on substack can have the same problem.

On a slow and unreliable connection, it's also one more thing that I wish had a toggle to turn off.

Related to this, something I consider an anti-feature: any form of messing with a link to a different page that results in Control+Click not opening a new tab. Bonus negative points if you've scripted it to redirect the page in the current tab and there's no very good reason for it to be a single-page application (draw.io has a reason, the average blog does not).

I'll add another one: Ensuring the page doesn't look weird in reader mode.

I love adding random stuff to my personal website. It might not matter to anyone else, but I love doing it for the sake of doing it. i.e., programming not as a means for an end.

Recently, I added a dynamic chart that shows how frequently and how much I work on my website, similar to the GitHub contribution chart. Not the kind of features the author was mentioning, but fun regardless: https://navendu.me/about/#about-me

https://gwern.net/ is my standard for a great blog experience. Their design philosophy (https://gwern.net/about) is right up my alley.

Great list of things to think about for a good reading experience. Linkable headings is my favorite. I will often grab the IDs from source when needed. Hard pass on the external link decoration though. Please just don't break the back button and everything will be fine.

Most of these ux enhancements should be browser addons, in my view. We have gone way beyond what a website should be responsible for versus what’s up to the reader experience to implement.

someone’s site (I forget whose) has a built in inflation adjuster so that they write dollars(x, year) and get a future-proof value. Very cute!

Neat, although some of them are actually helpful for specific articles. One thing that I actually seen as a pattern is over engineering the blog so much that features need maintenance.

Some features I implemented because I like them:

- A sidebar table of contents that highlights the current section

- Glossary links that open in a popup. It saves the trouble of redefining certain things

- Bottom line up front, or starting with the tl;dr

- Dark theme that follows system settings

- Content superseded by a calculator. Here's how you calculate your taxes, and here's a calculator widget that does it for you

- Larger, more readable font on desktop

- Narrower page margins on mobile to get longer lines

- Index pages without pagination, so that you can view all pages at once

- The /uses page where creators list the tools they use and the setup they have

- Non-chronological index pages for digital gardens. I love content that gradually improves, and best-of sections for the best bits

Backlinks are cool

I really like "archive" and "tag" overviews. I don't want to scroll through every post in full as a way of finding an entry that interests me. Not really a blog but Hackaday on mobile is really bad at this. It's kind of hard to filter for interesting stuff without having something specific to search for.

Forcing opening in a new tab can go die in a fire. I don't understand how browsers even support that. It's so abused.

If I wanted it in a new tab, I'll bloody well open it in a new tab myself. The feature is right there. Don't overrule the user. That should be illegal.

Now instead i click, have to go back, close the old tab, and history is wiped. Thanks for nothing.

I don’t know if it’s a feature, but a summary/tldr/abstract at the top is imo better even than TOC. Not only are to-the-point abstracts amazing for the reader, but also for the writer. Oftentimes when you can’t summarize properly, it’s because the article isn’t focused and needs rework.

I'm going to circulate this among the technical writing communities I frequent. Some of these microfeatures seem like great features to add to docs sites.

One thing I added to my blog, which is less "micro" but still quite important I feel, is syndicating articles on social media. I don't think static site generators have good support for this, so I had to roll my own: https://www.jeremykun.com/shortform/2024-05-12-2028/

I would like a more elegant way to share what other bloggers I'm reading on my blog. The linked article doesn't provide much in the way of a solution here.

Instead of sticky notes I love asides in between the content.

I like the side notes feature, but the hiding feature ins't great. IMO They should go with responsive design to inline the side notes if the screen is small.

One site I like a lot is https://mriquestions.com/index.html

It has a really interesting navigation where there's an article, links to related articles, and references etc.

Part of what I really like about it is the format of having the main text and then an "Advanced Discussion" accordion at the bottom that can be folded out for more detail. It's not uniformly used across all pages but I do like the format a lot. It's sort of an alternative to sidenotes but less disjoint where it treats the first part of a page as the intro and then expands in detail directions. It lets the intro be a higher-level and then "corrected" below.

Example (just one I found, there are better ones but not all pages have them):

https://mriquestions.com/how-to-reduce-sar.html

Anyway just chiming in that it's a microfeature that I like vs say wikipedia which can just be... massively overwhelming on some pages.

I don't necessarily think this feature is fully realized at mriquestions, but the MRI field suffers from multiple audiences (radiologists, technologists, engineers, etc) and its really difficult to pull content together that foster communication between these groups. mriquestions is by a radiologist so its a bit lacking on the engineering details side but its still pretty good but higher-level technologists use it well to get beyond the lies we tell them. It doesn't really get too far into the lies we tell radiologists though but sometimes it gets close (by lies I mean oversimplifications) and usually the references are good for the technical details.

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

There used to be a great feature available in every scrollable window which showed one’s position: the scrollbar. The bar itself was nice and wide, and there was an indicator right there which showed where one was in the document. They were useful, and they were consistent.

Then scrollbars got skinny, and then they disappeared. And so now each page which wants such a thing has to reinvent it. Also, it’s very difficult to actually scroll windows anymore.

Edit: yeah, he does mention that it’s nice to know position in the article versus in the comments. Point, and while separate windows/panes/frames/whatever would be one way to handle it, his suggestion is probably better.

A feature I love while reading web novels is...music. Nothing like reading that scene about the main character eating noodles inside her tiny Zurich apartment and reminiscing and have a theme named "Alone with my ghosts" start playing. Additional kudos if the author composed the music themselves.

Great compilation! Lots of great usability nuggets that could go beyond just blogs as well.

I especially love the progress-oriented table of contents/nav highlighting which section(s) you're currently viewing using the Intersection Observer API.

We’ve come full circle when an anchor is considered a service or an unimportant nice to have.

Feels like many of these features should just be built into the browser. Why can’t the browser assemble a table of contents based on header hierarchy? Isn’t that the point of the number in h1-h6? Why aren’t elements with ids easy to link to by default? Add a “copy-link-to” to the standard context menu in the browser. Etc.

I'm not a fan of sidenotes/footnotes. It's a writing style that's scatterbrained and quite irritating to me.

And on top of that, how is it going to work on mobile?

One who does a lot of writing should work on avoiding sidenotes and footnotes altogether. If there's something related to the article that is important or noteworthy, incorporate it into the main piece.

Perhaps this is something on my end, but if we're talking about small features I would love a darker font on this particular page.

I celebrate the 20th anniversary of my 365 days/year Typepad blog on August 20, 2024.

For a long, long time it's appeared to me that I'm the last person on Earth still using Typepad, which since it started being bought and sold a decade or so ago has had gradual serious decrements in speed and functionality.

It takes on average 10 seconds to upload a photo, and usually 2-3 attempts because of broken links.

Many times a past post which was intact now appears with broken image links.

And yet, I'm still able to post even though I probably know as little about code as anyone who visits HN.

My technical deficiencies are why my blog looks almost identical today to its appearance at inception.

At 76, I'm too old to do anything but continue in the same fashion.

A question: Is there anyone else here who uses Typepad?

For code blocks I created prism-remote. It’s a web component that highlights remote code snippets. Kinda like embedded gists but better, you can display snippets from any file in a repo:

<prism-remote src="https://github.com/Fingel/prism-remote/blob/main/prism-remot..." start="1" end="10" lang="javascript" > </prism-remote>

https://github.com/Fingel/prism-remote

A well-formatted table of contents nearly always ensures I won't be reading blog spam.

I use them for my annual book review posts. No idea if anyone ever uses them, but damn are they pretty to look at.

If you have a blogroll, update it regularly. I get that blogs are passe (that's why I started one a while ago). It is annoying to go to one of the few active blogs and find that most of the blogroll links go to sites not updated in a decade or expired altogether.

I've been experimenting with encouraging rabbit holes within my notes by opening any note you click on under the current open note. That way you can investigate, collapse and close related things to what you are reading without having to leave the page or juggle tabs.

It's all based a static site and it relies on HTMX for this feature. I've also made sure the page works without JS. For now it is a bit rough and sometimes it may not be clear that it opened underneath but I want to explore this a bit more.

Asterisk magazine (https://asteriskmag.com/) is the only site I know of that does the thing that the author couldn't find an example of with a progress bar that includes section headings (on hover) and thus shows your progress through the table of contents. On mobile, where there is less space, it falls back to just being an ordinary progress indicator.

This is an example where I'm skeptical that AI will be able to "appreciate" craft. Situationally aware enough to identify and articulate what makes these features notable. There's so much context baked into identifying these features.