20 ms·

Microfeatures I love in blogs and personal websites

• deleted 2y ago
  [deleted]
• voidUpdate 2y ago
  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
  • dcminter 2y ago
    It takes a lot of skill on the part of the author - I don't think I'd risk it personally. But I like the way it's handled on fasterthanli.me enormously - the author there successfully anticipates a lot of my "wait, but..." thoughts and addresses them directly via this mechanism, or, conversely, makes me realise that I ought to have had an objection to the point they're making.
    • voidUpdate 2y ago
      I've just read a couple of their articles, and I think an aside works nicely, just a note about something, but a full on dialog is a bit much. I suppose a lot of my concern was with how Xe Iaso does it, where it just feels over the top and unnecessary, and IMO distracts from the actual content of the article, which is otherwise largely enjoyable
      • xena 2y ago
        It is a very hard thing to calibrate. I try to have my internal conflicts and the like get put onto the canvas. I imagine that part of the perceived distraction is because of the CSS being bad (I suck at CSS so much). I'll go dig through a few Tailwind examples and see if I can make the messages more compact.
        • voidUpdate 2y ago
          Well I didn't expect you to actually read this haha. I hope I didn't cause any offence, I just struggle to keep your wide character roster in my head with all their specialised roles. The only reason I mentioned you specifically was because I was familiar with you as an example and the source mentioned you, I'm sure others do this to an even larger extent
          • xena 2y ago
            Yeah, I try to compensate for this with a few rules that I undoubtedly fuck up: * Each character has very visually distinct designs (ideally each is as distinct as I can reasonably make them, to the point where I have different artists do each one) * The names have meaning (Aoi means blue, Aoi's hair is blue) * Each character has an archetype that corresponds to a facet of how I understand technology, and their interactions are intended to reflect those internal disagreements or touch on the intentionally placed "learning lies" (the simplifications of how things work intended to give people a starting point for understanding an abstract thing that can later be discarded when they dig into the details and realize that shit's actually complicated) I've been idly considering adding something to the message footer in faint text with a tl;dr like "(the student)" for Aoi, or "(the well-intentioned forum troll)" for Numa. Would that help? I originally was kinda hesitant to do this under the axiom that if you have to explain your art, you fucked it up. I'm willing to concede that it's probably a bad axiom for me to follow here.
            • voidUpdate 2y ago
              I was going to suggest having hover text for the characters that just summarises what you already have in the separate bios page, but I've just remembered that doesn't work on mobile haha. Adding faint text might help, though you have to keep accessibility contrast guidelines in mind :P Ultimately, this is just my viewpoint, and your website, so you should do what you feel is best haha
  • schnable 2y ago
    I prefer this in an FAQ format with an omniscient-like asker.
  • mtlynch 2y ago
    Agree. I'd always thought that inline dialogs with fictional characters were more for the author's entertainment than the reader's, so I was surprised OP and others in the thread like them. I have nothing against them if people like them; just a matter of taste.
  • WorldMaker 2y ago
    Dialogs are definitely an interesting form of writing, especially for technical writing. On the one hand, it's a deeply natural format with a long and complex history (the Socratic Method, especially, but certainly not alone). On the other hand, we've long disassociated it from "professional writing" which is to supposed to only have one proscribed argument and one direct viewpoint (likely, but not always, the author's). Somewhere in the middle, is decades of the "…for Dummies" technical manual formula and its stock dialog characters and the love affair many had (or still have) with "The Poignant Guide to Ruby". Dialogs can definitely be hard to read in the context of just reading a single blog post because you don't have a familiarity with that author's characters and most blog authors don't have a "shared universe" of characters. I wonder if there's an interesting world where for instance the Dummies characters were considered to be public domain at the right time or more blog writers felt confident with _why's unique voices to turn Poignant's characters into a modern "Punch & Judy" for technical writing. The Socratic Method worked because everyone had a shared intuition on the characters of the day (in part because many were famous Senators and/or Wrestlers): Plato, Socrates, Aristotle, etc. (Also, Plato was his wrestling name, these were absolutely characters.) Maybe if we want to use more Dialogs in blog posts easily we need better shared characters?
  • nayuki 2y ago
    3Blue1Brown makes some of his videos with a lightweight dialog format too.
  • layer8 2y ago
    Agreed. I can rarely identify with the character(s) I’m supposed to identify with, and it’s virtually always a tedious read. It’s also possible to use a question-answer style without having a dialog and characters. What would that look like? Well, similar to this very paragraph. Not that I would particularly recommend it either.
• self_awareness 2y ago
  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?
  • anais9 2y ago
    A progress meter may not be necessary, but as the article points out if you have comments or an otherwise large footer not associated with the content of the post, the scrollbar can be deceiving. I'm personally a huge fan of the progress meter (having once thought it was redundant as well) - one other easy addition I didn't see mentioned is an "estimated reading time." Having a ballpark range for how long I should expect to spend with a piece of content greatly increases my chance of engaging with it, and the progress meter creates a tangible representation of that time (and how much of it I have left to finish consuming the content).
    • self_awareness 2y ago
      I'm not sure how "estimated reading time" works for non-english speakers. As for "progress meter" being an optimization of websites with large footers or long lists of comments, I'd argue that a better optimization technique would be to remove the footer, or remove/hide by default list of comments (i.e. make it available with a mouse click somewhere).
      • swasheck 2y ago
        something to hide comments altogether would be remarkable
        • self_awareness 2y ago
          That's why I like blogs with Disqus -- I've cut all traffic to Disqus servers through uMatrix, so the comments won't even show up.
• breck 2y ago
  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 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 https://breckyunits.com/search.html. - CSV export. In addition to RSS, you can download my site as CSV (https://breckyunits.com/posts.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 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.
  • jsnell 2y ago
    > - Keyboard nav. Use the left/right arrow keys to navigate through pages on my site. Please don't, this is horrible and I've previously only seen it used by clickbait news sites. It provides no real value, the only use case of somebody wanting to browse through just the start of each of your articles is going to be incredibly rare. But what you're doing is hijacking a key that normally has no effect into having a destructive one. All it takes is a minor keyboard fumble while trying to scroll, and you've just lost all context and confusingly taken to some totally unrelated article.
    • breck 2y ago
• zoidb 2y ago
  > 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.
  • Arcanum-XIII 2y ago
    Isn't that what anchor are for?
  • kibwen 2y ago
    Have an icon appear on hover, and make every heading a hyperlink (even without styling), and have a table of contents with links to each heading (with styling). No need to dumb down your interface just for smartphone users.
    • g15jv2dp 2y ago
      What's the point of the icon if the heading is already a hyperlink?
      • codetrotter 2y ago
        The anchor symbol can have JavaScript that copies the link to clipboard on click. And the heading can be a plain old link to itself. Gives a nice visual and interaction for desktop while providing a way for mobile users to get the link too (long-press the heading and copy link).
      • account42 2y ago
        It serves as an indication that the link is an anchor for that heading and doesn't lead somewhere else.
  • ahmetsait 2y ago
    I don't think it looks that bad. My blog's anchors are hover-visible on desktop and always visible on mobile (with lower opacity). I used this query to check for hover event availability to decide whether they should be always-visible: `@media screen and (hover: none)`. I think it turned out pretty ok¹. [1]: https://ahmetsait.com/blog/en/Hello-World https://ahmetsait.com/blog/en/Hello-World
• MarceColl 2y ago
  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.
• jasoneckert 2y ago
  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.
  • breck 2y ago
    > 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. Ah. That resonates. Thank you for breaking it down like that. I've pondered adding ToC, but now realize it's only for a small subset of pages that it adds value, rather than distracts.
  • kqr 2y ago
    Tables of contents are tricky. My publishing logic is rather flexible in how I use them, so I used to put them into the margins of longer articles[1] and sometimes even shorter ones[2] although I wasn't great at always remembering to do it[3]. But the problem for me is that good headlines, that give a fair summary of the section they are for, make for really wide tables of contents which don't fit neatly into the margins[4], so sometimes the table of content has to occupy space in the main section[5] which seems to me like it distracts a bit from the actual content. [1]: https://two-wrongs.com/markov-chains-for-queueing-systems.html https://two-wrongs.com/markov-chains-for-queueing-systems.ht... [2]: https://two-wrongs.com/verifiable-software-development-estimations.html https://two-wrongs.com/verifiable-software-development-estim... [3]: https://two-wrongs.com/event-sourcing-and-microservices-unix-style.html https://two-wrongs.com/event-sourcing-and-microservices-unix... [4]: https://two-wrongs.com/word-embeddings-in-perl.html https://two-wrongs.com/word-embeddings-in-perl.html [5]: https://two-wrongs.com/what-is-probability.html https://two-wrongs.com/what-is-probability.html
  • FrostKiwi 2y ago
    Doing a direct mapping from Markdown Headings to Table of contents+Anchors via Eleventy [1] is what I went with for my blog [2], simple setup, works perfectly. [1] https://github.com/FrostKiwi/treasurechest/blob/4d96694a912ec89e632cd5fa64009fa7337e6c5d/.eleventy.js#L21 https://github.com/FrostKiwi/treasurechest/blob/4d96694a912e... [2] https://blog.frost.kiwi https://blog.frost.kiwi
• quectophoton 2y ago
  I'll add another one: Ensuring the page doesn't look weird in reader mode.
• nicolodev 2y ago
  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.
• klabb3 2y ago
  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.
• lloydatkinson 2y ago
  Ironic considering the entire page appears to be aligned to one quarter of the page on the left.
  • chuckadams 2y ago
    Centered for me at my usual browser width, then jumps to the left when widened to make room for the single side note example. A note that, boo hiss, doesn't show up at all at narrower widths. Not that it was an important note, but we're talking principle here. My mini-gripe is the typography: While I'm typically a dark mode guy, thin fonts are a lot harder to read in dark mode. But I've seen worse.
    • xigoi 2y ago
      I fucking hate when websites straight up hide information on smaller screens.
• squidbeak 2y ago
  RSS should be a core rather than a 'micro' feature.
  • fabianholzer 2y ago
    Should, but sadly I have lost count how many feeds in my reader became dysfunctional because they were rewritten to be using nextjs (or the likes).
    • afiori 2y ago
      What is a good guide on how to implement basic RSS functionality?
      • oopsallmagic 2y ago
        [dead]
      • fabianholzer 2y ago
        If you start from scratch, factor it in when deciding on a cms, platform or site generator. I think RSS/atom owes a lot to WordPress, which has it enabled by default since ages. When you want to add it retro-actively, the specifications are relatively straight forward and don't have many mandatory properties. RSS is a tad simple than Atom, but I'd probably rather go for Atom if I were to start over. https://www.rssboard.org/rss-specification https://www.rssboard.org/rss-specification https://validator.w3.org/feed/docs/atom.html https://validator.w3.org/feed/docs/atom.html In any case: add a link rel=feed to the header of every page to enable discovery (https://www.rssboard.org/rss-autodiscovery https://www.rssboard.org/rss-autodiscovery - but works regardless of the format)
        • WorldMaker 2y ago
          Also, JSON Feed [0] is still better than nothing, many of the major RSS readers quietly support it, and does have the small advantage that JSON is much easier to work with in more platforms than XML today. [0] https://www.jsonfeed.org/ https://www.jsonfeed.org/
• velcrovan 2y ago
  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.
  • drekipus 2y ago
    I don't have the time for editing. but i don't often have footnotes. I'll try and write the content in, and link where I must.
  • mhb 2y ago
    Nicholson Baker would like a word.
    • velcrovan 2y ago
      We were mutuals on Twitter, alas
    • 65 2y ago
      David Foster Wallace would also like a word.
  • vehemenz 2y ago
    My thoughts exactly. There is a time and place for footnotes, sidebars, and citations, but they take attention away from the body text and, when overused (gwern.net), the entire site can look cluttered and disorganized. Most people aren't going to read these things anyway, so you're better off focusing on concise, effective writing.
• eduardo_roboto 2y ago
  Thanks for the post! Now I will try to implement all of them, on my free time.
  • fabianholzer 2y ago
    I am so glad to be not the only one who is nerd-sniped by this list ;)
  • holowoodman 2y ago
    [dead]
• naitgacem 2y ago
  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.
  • reportgunner 2y ago
    If you don't want to outright block all JavaScript you can just block 3rd party scripts, it usually lets you see if the website uses some fuckery or not.
• Puts 2y ago
  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.
  • 83457 2y ago
    It is related to SEO.
    • zerkten 2y ago
      And so much of the SEO voodoo is then codified into templates which get reused over and over again.
  • Helmut10001 2y ago
    I have actually three dates on my blog [1], (1) the date I started writing a 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/ https://du.nkel.dev/
    • aranw 2y ago
      I like the second and third date but I think the first is perhaps a little confusing to me without this context. If I didn't know this is what it meant I'd of thought they'd be some bug in your blog or you forgot to update the url
      • Helmut10001 2y ago
        Yes, I know what you mean and agree. This date is currently mostly for myself. Maybe I should format it differently, or place it somewhere else.
  • keiferski 2y ago
    Google punishes websites that don’t have recent content, no matter how good it is.
• Xenoamorphous 2y ago
  > Bonus: Showing Page Progress I just look at the scroll bar.
  • Akronymus 2y ago
    Only really works if one article takes up most of the space. If there's tons of ads/coments below, the scrollbar would show less progress than actually is the case, and vice versa with wasted space above the article. But yes, the scrollbar ought to be enough.
    • reportgunner 2y ago
      That's a problem of ads/comments being even there.
      • johntash 2y ago
        I'm okay with comments being there, but I prefer the ones that hide them by default and have a link to load and expand the comment section.
• pglevy 2y ago
  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.
• hamasho 2y ago
  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.
  • zerkten 2y ago
    I think that is a good default. A small number of sites seem to execute sticky elements that help with long content, but only add it if you are going to test it.
  • thomastjeffery 2y ago
    I use the top of the page to track where I am reading. When a header is hidden on scrolldown, and shown on scrollup, that breaks a core feature that I was actively using. To make matters worse, scroll direction is incredibly finicky on mobile, so I can't even consistently decide whether your ridiculous header is shown or not.
  • deleted 2y ago
    [deleted]
• hypertexthero 2y ago
  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. (╯°□°)╯︵ ┻━┻ ┬─┬ノ( º _ ºノ)
  • netcraft 2y ago
    I totally agree. I think its because it lets my eyes get their bearings, like sensing the terrain.
    • noneeeed 2y ago
      This is absolutely it for me. It's also why I like paragraphs to have some level of spacing between them. I'm currently reading a book that has quite minimal indentation on the first line of a paragraph, no spacing between, small font, and justified text. Every page is just a wall of text. It makes it noticeably more tiring to read than others that I've read recently. It seems to be a trend in more serious historical tomes. The last one I read, the Beauty and the Terror, was similarly typeset. It's one of the reasons I like reading on my kindle.
    • hypertexthero 2y ago
      Yes! And lowercase letters are easier to read than ALL CAPITALIZED LETTERS IN A HORIZONTAL LINE OF TEXT. Justified text is the same thing, but vertically. Your eye reaches the end of the line, and the next one is likely slightly longer or shorter, so it is easier for your eyes to find the next line instead of reading the same line over again, and also easier to see the whole shape of a particular paragraph you want to refer to later. I do like well-hyphenated justified paragraphs in print, that also let you fit more words per page. But even there, I prefer the organic, non-uniform look of ragged text.
  • mbforbes 2y ago
    Agreed! I wrote a blog post about this a couple years back.[1] A few things I think are going on: - layout and hyphenation algorithms on the web are worse (or often disabled!) - the lines are often too long - the site's margins aren't as strong as with print design These factors combine to produce the mess you're describing. I've spent so much time reading justified text in print that I do like it in general. But I think until places like NYT or Medium adopt it on their websites, it's probably not up to snuff on the web. (edit: formatting) [1] https://maxwellforbes.com/posts/web-justified-text/ https://maxwellforbes.com/posts/web-justified-text/
• xd1936 2y ago
  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-mastodon/ https://cassidyjames.com/blog/fediverse-blog-comments-mastod...
  • jszymborski 2y ago
    Shameless plug, but I wrote a post on the pros/cons/implications of using Mastodon to power a comments section: https://jszym.com/blog/mastodon_blog_comments/ https://jszym.com/blog/mastodon_blog_comments/
    • jefftk 2y ago
      I do this too, and I like it a lot: https://www.jefftk.com/p/mastodon-replies-as-comments 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/comment_requester_wsgi.py#L414 https://github.com/jeffkaufman/webscripts/blob/master/commen...
      • aethertron 2y ago
        I would simply throttle those requests. Update comments once an hour. Or once a day. Not everything needs to be realtime.
        • xd1936 2y ago
          I think by "proxy the requests", they mean, these are usually on a static site and the browser is directly pulling in the Mastodon content client-side. They want to be good citizens and add a caching layer that they run.
• markx2 2y ago
  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/ 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.
  • vedranm 2y ago
    Do you mean blogroll?
    • markx2 2y ago
      Maybe, but I hated that term,.
  • Dalewyn 2y ago
    Way back in the feudal age when knights still roamed the lands, castle walls would have affiliate banners draped over them. I miss them. Now get off my lawn, I have wind mills to slay.
  • deleted 2y ago
    [deleted]
  • emilamlom 2y ago
    Back in the day (late 90's to early 2000's), sites would have something called a webring where sites would link to similar sites in a circular fashion. It was a good way to find similar sites and kinda a fun adventure.
• deleted 2y ago
  [deleted]
• gonzo41 2y ago
  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.
• efortis 2y ago
  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 https://blog.uirig.com/freebsd-jails-network-setup#-rcconf
  • meiraleal 2y ago
    - inlining css, js, and svgs so it can be saved as a single html file Or just use http2 and have a much better organized code without need to build/bundle them together.
• FBT 2y ago
  Asterisk magazine (https://asteriskmag.com/ 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.
• dsign 2y ago
  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.
• vedranm 2y ago
  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-navigation/ https://squidfunk.github.io/mkdocs-material/setup/setting-up...
  • gary_0 2y ago
    Just to be contrary, I find things on the page updating as I scroll to be distracting. I consider that kind of thing to be like a modern <blink> tag. On sites I read frequently, I nuke those elements with uBlock Origin. I guess I'm sort of a HTML fundamentalist, though.
• dangus 2y ago
  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.
• mbforbes 2y ago
  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.
  • rednafi 2y ago
    Ditto. I like Gwern's content but not much the presentation. The same goes for Simon Willison's site. I much prefer the brutalist look of Drew Devault, Fabien Sanglard, or Dan Luu's site.
    • gnicholas 2y ago
      I don't mind Drew or Fabien's layout, which have a reasonable column width. But Dan's site is unreadable for me (at least on desktop) without reader mode. What would be the reason for choosing to have full-width text on a blog?
      • elevatedastalt 2y ago
        Dan's website is a great example of the pendulum swinging in the other direction to malicious non-conformism. Yes, UXers have made modern web design hell, but presenting a raw unstyled html isn't respecting your user much either.
      • zelphirkalt 2y ago
        I think that is not so simple to solve. Limit it to some column width? Someone will complain that it only uses one third of their screen. Unlimited width? Someone will complain about whole width text. But the good thing is, that there is reader mode and evem if there wasn't, you could zoom in or resize the browser window or send to new window and resoze only that.
        • gnicholas 2y ago
• demondemidi 2y ago
  We’ve come full circle when an anchor is considered a service or an unimportant nice to have.
• rat_on_the_run 2y ago
  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.
  • ants_everywhere 2y ago
    This seems like evidence that there is a natural division and you're in the second camp, no?
    • rat_on_the_run 2y ago
      The thing is, I do like to see details and I'm curious. That's why I check them in the first place. But we can't know beforehand whether it's useful or not. This is true for both footnote and side note, but for footnotes I can give it a glance to see if I want to read it thoroughly after reading the whole page, whereas for side notes, they are so easy and tempting to be seen. I feel the point of notes is that they do not interrupt the main flow but side notes put them on almost equal footing in terms of attracting attention as the main content. Besides, footnote/side notes should be kept minimal, otherwise the note becomes the main content. I find articles with side notes often overuse them. Yeah, if they are kept minimal I guess both approaches are fine.
      • 082349872349872 2y ago
        > otherwise the note becomes the main content. There are some authors whose footnotes (even sometimes indices) I read before the main content, because in the past they've hidden all the best bits there.
      • ants_everywhere 2y ago
        It would be nice if it were configurable where the notes appear, either foot side or end.
• red_admiral 2y ago
  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).
• deleted 2y ago
  [deleted]
• ishankbg 2y ago
  Instead of sticky notes I love asides in between the content.
• jefftk 2y ago
  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 https://www.jefftk.com/p/preview-on-hover
  • m1chael_k 2y ago
    [dead]
  • k1ndl1 2y ago
    Nice! I also like link previews from Linkz.ai. Here is the demo (also see how it opens the YouTube hyperlink): https://advancemed.com.au/medical-internship-australia-2025-clinical-year-application-guide/#tip-2-other-things-you-will-likely-need-to-become-an-intern-in-australia https://advancemed.com.au/medical-internship-australia-2025-...
• fluidcruft 2y ago
  One site I like a lot is https://mriquestions.com/index.html 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 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.
• carimura 2y ago
  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.
  • reportgunner 2y ago
    Also 0 mentions of reader mode.
    • carimura 2y ago
      ah yes reader mode, undoing "loved" features since 2010!
    • emilamlom 2y ago
      The author's focus is on static-generated sites, so reader mode isn't super relevant since they don't have a bunch of junk to clean up in the first place.
    • BiteCode_dev 2y ago
      It's embedded in the browser now.
  • necrotic_comp 2y ago
    There's some of these that I think are overkill, sure, but I like the simplicity of some of them - sidenotes, progress bar, etc. Just little things that give you that much more information about what's going on. Gwern's page, to me, is too much. My personal favorite mixture of style and implementation of these features is jefftk.com - simple, fast, but gives a ton of information in an unobtrusive way.
  • deleted 2y ago
    [deleted]
  • JadeNB 2y ago
    > OK, table of contents, you're cool. I also vote for turning plausible link targets into links, or at least giving them IDs so that they can be linked without cruft; and, ever so much, especially for posts in a group that are not consecutive, for links to the previous and next post in the group. I've seen some blogs that do backlinks but not forward links, which is very frustrating when they say something like "I'll finish discussing this topic in a further post when I have a chance" in a 2013 post, and now there's 11 years of archives to go through to find out whether they ever did ….
• pacifika 2y ago
  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.
  • zzo38computer 2y ago
    I agree; the website should not need to be responsible for most of this stuff (and even when it is, the way it works is too messy). (In some cases the document author would still need to specify, e.g. the IDs of headings so that they can be referred to in URLs, but the browser should handle the rest; the author should not also need to add links in the headers.) The table of contents might even be suitable as a built-in feature. Having a progress indicator for only the article and not comments would be possible by using the standard <ARTICLE> command; a browser might choose to (subject to user settings) display a progress bar or scroll bar for the article only. The user can disable the features that they do not want (and/or change the features that they want differently). (Some people will use other file formats and protocols to try to improve this; and, if you like to do, you can even make available multiple protocols and file formats)
• eadmund 2y ago
  > 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.
• reportgunner 2y ago
  I knew the horrid progress bar is gonna be in the article, yikes.
  • jmbwell 2y ago
    Ah the push and pull. In the beginning, scroll bars were a feature. Then proportional scroll bars were a major development. Then scroll bars were dynamic, auto-hiding, optional, or removed altogether. So designers put progress bars across the top of individual pages--some sites have them, most don't, all different ad-hoc implementations. It's a new feature all over again, going through the cycle of learning what works and what doesn't. People hate it. People love it. All this has happened before. All this will happen again.
• adityaathalye 2y ago
  Nice list! I like many of these "microfeatures" too. Some I have on my site (https://evalapply.org 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-bankruptcy-ide-experience/index.html#main https://www.evalapply.org/posts/emerging-from-dotemacs-bankr... (edit: typo, and a point I forgot)
  • deleted 2y ago
    [deleted]
  • wonger_ 2y ago
    Do you prefer footnotes over sidenotes? And do you think each post/article should have footnotes?
    • input_sh 2y ago
      Sidenotes can't be on the side on a small screen. You have to put them in between paragraphs, at which point they stop being sidenotes and just become part of the text. Then, how do you handle them in your RSS feed? What happens if the reader clicks on the reader view button in their browser? Footnotes always remain footnotes, regardless of all of that.
    • adityaathalye 2y ago
• kaycebasques 2y ago
  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.
• wonder_er 2y ago
  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 https://josh.works/jaywalking or https://josh.works/full-copy-of-1922-atlanta-zone-plan https://josh.works/full-copy-of-1922-atlanta-zone-plan
• seanw444 2y ago
  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.
  • donatj 2y ago
    With modern Content Security Policy restrictions and such most sites now have, previews almost entirely have to be implemented server side to make them work anyway, so no real privacy fears.
  • k1ndl1 2y ago
    I've seen link preview solutions start to appear that I would assume are doing some basic moderation and logic to ensure consistency. I've recently seen on product hunt - Linkz.ai link previews SaaS .
  • justincormack 2y ago
    For some use cases (eg editing Wikipedia, so being able to see if something linked is a stub or not say) its useful, but not i think in general for external sites.
• swyx 2y ago
  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-modern-blogs https://www.swyx.io/the-surprisingly-high-table-stakes-of-mo... across reader experience, author experience, and developer experience (for self maintained blogging software)
  • xnx 2y ago
    This is a good list. Have you reviewed any blogging systems to see how many of these features they contain (in a comparison table for example)?
  • fabianholzer 2y ago
    It is a compilation of many great ideas. Thanks for putting it together. For my needs table stakes are lower, but as inspiration as well as aspiration certainly.
• wegfawefgawefg 2y ago
  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.
  • WolfeReader 2y ago
    Besides "Link Previews", which other features are affected by your bandwidth?
  • aklemm 2y ago
    Phone might have a power button which would help you meet your goal.
    • wegfawefgawefg 2y ago
      My phone mostly functions as a text machine with encyclopedia attached, which I greatly enjoy. When I see unusual construction or some curiosities I do not understand, I look them up. angle-of-repose, hill reinforcement techniques, average lifespan of whale shark, salps, concrete blocks underneath vending machines, stacked wires on electric trains, staged turbos on desiel trains, those circular dimples in japanese concrete blocks, etc. This is what I have always mostly used the internet for. After reading about something like this I enjoy just stewing on the info. This is the mode of existence I enjoy the most. Only in the past few years was there much temptation for forever scrolling. Turning off my phone is good but then I cant look up interesting stuff, which is the point of being alive for me.
  • paulddraper 2y ago
    You get less than a quarter the speed of dialup?
    • mey 2y ago
      Some potential reasons - Remote backhaul / Satellite / Offshore - Subsidized/cheap wireless plan - Going over data cap, some carriers fall into a "safety" mode instead of charging you extra. I pay for 8gb/mo and would get throttled to similar speeds - Preference
• ping00 2y ago
  https://gwern.net/ https://gwern.net/ is my standard for a great blog experience. Their design philosophy (https://gwern.net/about https://gwern.net/about) is right up my alley.
• SamPatt 2y ago
  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.
• deleted 2y ago
  [deleted]
• fanf2 2y ago
  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.
  • elric 2y ago
    I think progress bars are a logical consequence of the user-hostile shrinking of the scrollbar. Unusable, narrow things which are often hidden by default, and rarely have a visible elevator (or thumb) anymore. Of course, scrollbars are often entirely useless in pages which insist on loading content piecemeal -- another user hostile pattern.
    • gessha 2y ago
      To add to this, pages sometimes have comments or footers or other bells and whistles after the content that I’m interested in and it makes me think the post is longer than it is. This leads me to either leave the post for later or straight up close it because it’s too long.
      • mschuster91 2y ago
        > To add to this, pages sometimes have comments or footers or other bells and whistles after the content that I’m interested in Or, especially in news sites, Taboola and other bottom feeder trash.
        • dredmorbius 2y ago
          uBlock Origin's element blocker is ideal for removing those. You can define global rules for anything from Taboola, Outbrain, RevContent, etc., and never see them again. "Sharedaddy" is another element to nuke (social link litter crap).
• dspillett 2y ago
  > 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.
  • 082349872349872 2y ago
    > > 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. Indeed, in the salad days of HTML there was some way to put related page-links in the <HEAD/>, and Sir Tim's browser displayed UI that enabled navigation via them. Unfortunately that feature was already lost by the mid-1990s.
• xenodium 2y ago
  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 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 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 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.
  • thomasfromcdnjs 2y ago
    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.json 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 https://github.com/jsonblog/jsonblog-generator-boilerplate The main idea being that you only ever have to keep safe your blog.json, which you could put as a gist or anything. Love your setup so far, will follow along.
• pottekkat 2y ago
  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://navendu.me/about/#about-me
• WD-42 2y ago
  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-remote.js https://github.com/Fingel/prism-remote/blob/main/prism-remot..." start="1" end="10" lang="javascript" > </prism-remote> https://github.com/Fingel/prism-remote https://github.com/Fingel/prism-remote
  • danilafe 2y ago
    The idea is great, though I think I personally would prefer for this to happen on the server side (during rendering a static site, perhaps), not in the user's browsers. Particularly if the user doesn't enable JS, or has a slow connection.
  • account42 2y ago
    Your example makes the same mistake as the one in the article - linking to a (development) branch rather than a specific commit. Unless it is just example code written for the article (in which case why link to it) stuff is eventually going to move arount and your referenced line numbers will be stale.
• vittor1o 2y ago
  [dead]
• weinzierl 2y ago
  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.
  • wcarss 2y ago
    Here's a link (I think?) to patio11's thoughts, since I went looking for it out of curiosity because of your comment: https://training.kalzumeus.com/newsletters/archive/content-marketing-strategy https://training.kalzumeus.com/newsletters/archive/content-m... I also really like dates on things as a user of them.
  • andai 2y ago
    I hadn't heard of patio11's points against it. So I looked it up. https://training.kalzumeus.com/newsletters/archive/content-marketing-strategy https://training.kalzumeus.com/newsletters/archive/content-m... Is this the man responsible for the popularity of dateless blogs? (I tried to check the date on the post but... alas! ;) Just kidding, we still have the Internet Archive (for now) so I am able to get the same information ("2014") in a much less convenient way... (I suppose my willingness to do so removes me from the category "most readers?" Though that will depend on the blog!) The argument seems to be "people will disregard the information in an article if they think it's old." I can't speak for other people, but I actually find the opposite is true. The older a post, the more likely I am to find it interesting, and take it seriously. Same idea as this, really: https://xkcd.com/2634/ https://xkcd.com/2634/ >>What does the red line through HTTPS mean? >Oh, just that the site hasn't been updated since 2015 or so. >And since it's been around that long, it's probably legit.
    • patio11 2y ago
      A commanding percentage of all citations of me on e.g. Twitter will apologize to the user's own audience for the age of the piece, in a way which is obviously suboptimal. For examples, see this thread: https://x.com/patio11/status/1234141833661440001 https://x.com/patio11/status/1234141833661440001
• OldGuyInTheClub 2y ago
  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.
• v1ttor1o 2y ago
  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.
• wonger_ 2y ago
  I appreciate when blogs include a "start here" section, like https://tomcritchlow.com/start-here/ 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
• nmca 2y ago
  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!
  • gwern 2y ago
    That would also be Gwern.net. :) https://github.com/gwern/gwern.net/blob/master/build/Inflation.hs#L4 https://github.com/gwern/gwern.net/blob/master/build/Inflati...
  • nicbou 2y ago
    Brilliant! I have something like that, but for showing the amounts in different currencies. https://nicolasbouliane.com/blog/currency-tooltips https://nicolasbouliane.com/blog/currency-tooltips
• plq 2y ago
  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.
  • notatoad 2y ago
    that sounds like rss
  • zzo38computer 2y ago
    Yes, although HTML is rather messy. It is why some people use Gopher, had made up Gemini and Scorpion file formats too. (You can also serve multiple protocols and file formats if you want to do.)
• shepherdjerred 2y ago
  > 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 https://github.com/shepherdjerred/webring [1]: https://astro.build/ https://astro.build/ [2]: https://sjer.red/blog/til/2024-06-05/ https://sjer.red/blog/til/2024-06-05/
• DoubleDerper 2y ago
  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.
• 12_throw_away 2y ago
  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.
  • dayv1d 2y ago
    [dead]
  • k1ndl1 2y ago
    I do not get why people are sceptical about link previews. When done right (without iframes), e.g. in Obsidian or via Linkz.ai , they actually add value.
• rsync 2y ago
  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 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.”
  • amadeuspagel 2y ago
    What's a good example of an Iceberg Article?
    • rsync 2y ago
      That link is, itself, an I iceberg article. Click on the “body” link in the footer to see the full expansion… "Network Slug", which I sometimes discuss on HN, is also an iceberg article: https://www.kozubik.com/pub/NetworkSlug/tip.html https://www.kozubik.com/pub/NetworkSlug/tip.html
      • fabianholzer 2y ago
        It is an interesting format, but a bit hard to discover. If it would not have been for your comment, it would not have occurred to me, that there is a second level which enriches the overall topic. Is it essential to the format to open all secondary parts at once? Otherwise that would be a great use case for the details/summary tag, which also would come with affordances that indicate that there is more information available.
        • rsync 2y ago
          Thanks for that feedback - I will think about how to make the parts beyond the tip of the iceberg more obvious and discoverable. Philosophically, I want the "tip" to be as uncluttered as possible but ... we'll see what I can come up with. Theoretically, if enough people began writing in this form it would then become obvious by virtue of familiarity ...
• bookofjoe 2y ago
  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?
  • aworks 2y ago
    I still pay for my Typepad account but have only blogged sporadically for the last decade. I haven't particularly noticed any degredation of its capabilities but I haven't paid much attention to it either. I did revise the template and looking at it now, it seems rather ugly :-) https://rgable.typepad.com/aworks/ https://rgable.typepad.com/aworks/
    • bookofjoe 2y ago
      Seeing this: https://profile.typepad.com/rgable https://profile.typepad.com/rgable made my day. Thank you for chiming in!! So good to know there's at least one other Typepad user.
      • aworks 2y ago
        Here's another active blog on Typepad https://www.therestisnoise.com/ https://www.therestisnoise.com/
• docmars 2y ago
  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.
• rednafi 2y ago
  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 https://rednafi.com) center aligned on all clients.
  • hnlmorg 2y ago
    > 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’m curious, why do you find that an annoying? The alternative you’re advocating is ostensibly just shifting half that gap to the other side. If I were to be fussy about the gap then I’d be more interested if they were a layout that could make use of that space rather than alignment. The example in that article about side notes is a great example of utilising otherwise redundant space on larger screens.
    • rednafi 2y ago
      It’s mostly a personal quirk. I find text that are left aligned harder to read and immediately turn on the reader mode on the browser.
      • hnlmorg 2y ago
        Ahh that’s fair. I have a few of their quirks myself, like the font being too large or too small.
• contravariant 2y ago
  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.
• knorker 2y ago
  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.
  • meribold 2y ago
    I tried figuring out whether Firefox can be made to never open a new tab in response to a normal left click on a link. The advice I found is setting `browser.link.open_newwindow.restriction` to 0 and `browser.link.open_newwindow` to 1 in about:config [1]. But it works a little too well: clicking on a link outside of Firefox also no longer opens a new tab. [1]: https://superuser.com/questions/260129/open-link-in-the-same-tab-for-firefox https://superuser.com/questions/260129/open-link-in-the-same...
• moritz 2y ago
  Backlinks are cool
• digging 2y ago
  > 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.
  • lawn 2y ago
    What most do (and I've done as well) is to explain that in the paragraph before. Of course, having it directly in the code block is better.
• mrb 2y ago
  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 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.
  • j2kun 2y ago
    I added this on my blog (https://www.jeremykun.com/posts/ https://www.jeremykun.com/posts/) and I even find it useful as replacing 90% of the need for a search bar. I haven't yet re-added a search feature since I migrated off Wordpress to hugo
    • thesnide 2y ago
      So that. I mean, just make sure that your blog is easily consumed by any web search engine. And in addition to the full non-paginated index, I also have a full non-paginated tags page. Like categories, but with pages showing multiple times if they have multiple tags. https://blog.pwkf.org/tags.html https://blog.pwkf.org/tags.html My pet feature I'll try to add is sidenotes. It does annoys me to jump back and forth to read them. Even as a popup (wikipedia style), it is still intrusive...
      • j2kun 2y ago
        The hugo theme I use has this built in, and the sidenodes change to footnotes if the width is too small. https://github.com/capnfabs/paperesque https://github.com/capnfabs/paperesque
    • jen729w 2y ago
      I recently added a search feature to my site. I almost cracked open the Algolia docs … and then I just wrote a 4-line form … <form action="https://duckduckgo.com/" method="get"> <label>▷ <input type="search" id="search" name="q" /></label> <input type="hidden" name="sites" value="johnnydecimal.com" /> <input type="submit" value="Search" style="display: none;" /> </form> …and now DDG just does it for me. Zero cost, zero hassle.
• david2ndaccount 2y ago
  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.
  • crabmusket 2y ago
    It feels like browsers over the decades have moved away from catering to power users. Is something like Arc moving back? Without having used it (I plan to at some point), I've heard that at least its tab management seems catered towards "professional browser users". I like the way Cory Doctorow puts it in this piece: > A web browser that's a "user agent" is a comforting thought. An agent's job is to serve you and your interests. When you tell it to fetch a web-page, your agent should figure out how to get that page, make sense of the code that's embedded in it, and render the page in a way that represents its best guess of how you'd like the page seen. https://pluralistic.net/2024/05/07/treacherous-computing/#rewilding-the-internet https://pluralistic.net/2024/05/07/treacherous-computing/#re...
• mikevin 2y ago
  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.
  • thesnide 2y ago
    Yes, also having some "related" posts is nice. Here is my way for jekyll, which I copy-pasted-adapted. https://blog.pwkf.org/2022/08/13/adding-navigation-tags.html https://blog.pwkf.org/2022/08/13/adding-navigation-tags.html
• j2kun 2y ago
  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.
• j2kun 2y ago
  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/ https://www.jeremykun.com/shortform/2024-05-12-2028/
  • navanchauhan 2y ago
    I did something similar where I would be able to tweet the latest post if I wanted. It first breaks down the entire text into chunks and then uploads the relevant media as well. It also keeps track of the previous chunk that was posted and uses that ID to reply to it. I never committed the twitter version to my repository, but you can look into the Mastodon version: https://github.com/navanchauhan/navanchauhan.github.io/blob/vanilla-ssg/toot_me.py https://github.com/navanchauhan/navanchauhan.github.io/blob/... I don't actually use it though
    • j2kun 2y ago
      I currently have Twitter, Mastodon, and Bluesky working. Sadly, it seems Twitter downranks bot-generated threads.
• nicbou 2y ago
  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
• hoten 2y ago
  I found an enjoyable demo (can't find it now though...) of the animated table-of-contents feature mentioned here, and adapted for a website I maintain: https://zquestclassic.com/docs/2.55/ https://zquestclassic.com/docs/2.55/ I should add a check for `prefers-reduced-motion` https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
• misternugget 2y ago
  One mini-feature I really like: authors highlighting their own favorite or popular articles. I think I saw it first on Julia Evans' blog (https://jvns.ca/categories/favorite/ https://jvns.ca/categories/favorite/). I also added it to mine (https://thorstenball.com/blog/ https://thorstenball.com/blog/) and found the exercise of going through the posts and tagging them very enjoyable.
  • facundo_olano 2y ago
    I second this. I wrote a post around this idea of non chronological blog archiving https://olano.dev/blog/web-anthologists https://olano.dev/blog/web-anthologists
• jchook 2y ago
  RedSails.org has a lot of very nice micro-features: * Tastefully displays the most relevant citation at the bottom of the screen as you read, e.g. see https://redsails.org/really-existing-fascism/ https://redsails.org/really-existing-fascism/ * Uses system light/dark UI settings. * Literally every article (with descriptions, author info, post date, etc) displayed on the homepage in chronological order with no pagination, great for ctrl-f, etc. * Selected authors and category-based navigation available. * Entire site is very fast and lightweight, text-focused, no superfluous javascript or CSS, good typography, works well on mobile, etc. * First-class RSS feed support
  • xenodium 2y ago
    Commented earlier https://news.ycombinator.com/item?id=40776881 https://news.ycombinator.com/item?id=40776881, so this will be my last for the post… It’s just nice to see folks wanting minimalistic but functional features. I’m ticking quite a few of these on a service I’m working on. You can see my blog running on it https://lmno.lol/alvaro https://lmno.lol/alvaro Not yet officially launched. Happy to share invites to use now (for early adopters).
  • danilafe 2y ago
    > Tastefully displays the most relevant citation at the bottom of the screen as you read, e.g. see https://redsails.org/really-existing-fascism/ https://redsails.org/really-existing-fascism/ This is very nice; I think the same can be achieved with general footnotes (not just source links), though you'd have to be careful to keep them short lest you take up a lot of screen space.
• zzo38computer 2y ago
  Table of contents is the feature that, in my opinion, ought to be implemented as a part of the web browser instead of within the document (I was told that Dillo apparently did at one time (but no longer does, although I suggested to them to add it again), and it is commonly implemented in Gemini browsers, though). This would also be true of page progress, linkable headings (the document author would need to give it a ID, although the browser should then handle the rest), link preview, and markers for external links. This should also be true of fonts and colours, too; the document author should not need to specify them. Some of the other things they mention, are things that would be helpful for the document author to handle, though.
• iamwil 2y ago
  The microfeature I like is when posts have the full date. Blog authors want their content to be evergreen so they try to exclude it. Context is essential for me to interpret the perspective, especially for technical content. I end up having to go to the internet archive to see an estimate of when they wrote it anyway.
  • Aachen 2y ago
    What I find so weird is that this is omitted from scientific papers as well. It's like not giving it a title (you just have to read its contents to see if you are interested in it) or omitting the number of study participants (who cares about the N, you just have to reproduce it to see if it's still relevant)
  • darekkay 2y ago
    Yes please! I always show a "published" date, but also a "last updated" date for my evergreen posts.
• hnuserphsyics 2y ago
  [dead]
• DylanSp 2y ago
  One nice thing I've seen is separating out footnotes (additional comments) from references (citations/links to external contents). It's probably not applicable to all blogs, but I like it in Citation Needed, Molly White's blog/newsletter; see https://www.citationneeded.news/issue-60/ https://www.citationneeded.news/issue-60/ as an example.
• emehrkay 2y ago
  Look at this graph of related articles on this blog, beautiful work https://blog.plasticlabs.ai/blog/YouSim;-Explore-The-Multiverse-of-Identity https://blog.plasticlabs.ai/blog/YouSim;-Explore-The-Multive...
  • danilafe 2y ago
    My site (OP) actually has a content graph as well, though it has a dedicated page. I didn't want to force users to run arbitrary JavaScript on every page just for aesthetics. https://danilafe.com/graph/ https://danilafe.com/graph/
• neilv 2y ago
  One not in this list that I find helpful: highlighting in code blocks. For example, when you're showing a before and after, and want to highlight what changed. For example, I use it in the docs for: https://www.neilvandyke.org/racket/progedit/ https://www.neilvandyke.org/racket/progedit/ The is one of the many features supported by Racket's Scribble, which is used to generate the online and print books for the Racket ecosystem. https://docs.racket-lang.org/scribble/ https://docs.racket-lang.org/scribble/ (Which I also used for API docs embedded inline in the code of various Racket packages I wrote.)
• gwern 2y ago
  > 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-mobile-scrollspyheadertoc.png 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 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-desktop-floatingtoc.png https://gwern.net/doc/design/2023-08-07-gwern-gwernnet-deskt... You can also see this on LessWrong.com and https://80000hours.org/podcast/ 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/959ba9c50d327a960e07241b2c7f13630bf8b80c/build/LinkIcon.hs#L15 https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07... https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07241b2c7f13630bf8b80c/build/Config/LinkIcon.hs#L83 https://github.com/gwern/gwern.net/blob/959ba9c50d327a960e07... and for the history/overview, https://gwern.net/design-graveyard#link-icon-css-regexps https://gwern.net/design-graveyard#link-icon-css-regexps , and to see all of the link-icons, https://gwern.net/lorem-link#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 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.)
• BaculumMeumEst 2y ago
  I like a microfeature of Dan Luu's blog where the content is so good that you don't give a shit about the aesthetics or microfeatures on the page and just read it.
• burgerquizz 2y ago
  Anyone find a way to Group Series of Posts in Hugo? I would like to do this on my homepage instead of just having all posts without differentiation
  • danilafe 2y ago
    Taxonomies[0] are the way to go if you'd like to group content on your site by something like series (although you could "just" use tags, which Hugo enables out of the box). I use "series" as a taxonomy, for which an initial bit of code is here[1]. Given that, depending on how comfortable you are with Hugo templating, you could probably use `.Site.Taxonomies.series` to iterate over all the "series". [0] https://gohugo.io/content-management/taxonomies/ https://gohugo.io/content-management/taxonomies/ [1] https://dev.danilafe.com/Web-Projects/blog-static/src/commit/b3db25c4707a9fd2038bd4cefa3ba41aebb2df91/config.toml#L11-L13 https://dev.danilafe.com/Web-Projects/blog-static/src/commit...
• Jaauthor 2y ago
  By the way, thanks very much for the suggestions!
• aadhavans 2y ago
  While I heartily agree with nearly all of the suggestions here - particularly ToC and Code Blocks With Origin (which I really should implement on my own website) - FWIW, I disagree on the need for Progress Bars and Dialogues. Progress Bars seem like an eyesore to me, a distracting visual feature that's trying to goad me into finishing the article. As other commenters mentioned, the browser already has a scroll bar, which indicates the amount of content I have read. A progress bar just seems unnecessary. As for dialogues - while they can be cute and interesting if done well, it usually just gets in the way of the content I'm trying to read. The problem that it solves - "ask[ing] questions from a less-experienced point of view" - can often be accomplished with regular prose instead eg. "But you might be asking..." A feature that I'd like to see in more blogs is a 'Tech Stack' page[0]. I've often stumbled on websites that look very appealing, but have no description of how they were created. This page would describe the technologies and tools you use to write your website. Things like static site generators, CSS, JS framework (if any) could go in here. I'd also like to add 'Site Maps'[1] to this, which I've implemented as a list of all articles on my website. [0]: I have such a page at https://twomorecents.org/tech-stack.html https://twomorecents.org/tech-stack.html [1]: Looks like this has already been mentioned: https://news.ycombinator.com/item?id=40778888 https://news.ycombinator.com/item?id=40778888
• ddmf 2y ago
  There was a post on here recently to a blog that had a multi player cursor, so you could see other user's cursor positions and type wee notes - wish I'd taken note of it because there was a photography exhibition in the V&A where 12 hours of footage of London had been commented over in a similar way, and they were replaying it - "this guy will trip soon" and "she's texting the guy over there and he's said no"
• rldjbpin 2y ago
  interesting take from an academic practitioner who also runs a blog. i find it fascinating though in terms of how tech literate folks from outside this space is changing the way they consume written (web) content. from the llm-chat paradigm shift, most people are less likely to read the source material, if this was not already the case thanks to tiktok and google search summarization. while i might feel that most people outside of hn were not reading personal blogs anyways, how many would truly appreciate these quality-of-life features.
• brokenmachine 2y ago
  I hate it when an animated header scrolls as I'm scrolling the page. Not sure how to describe it but when I scroll down, the header disappears. But if I scroll back up even a tiny bit, the header comes down back into view. It's annoying to me because I'm usually reading near the top of the page, and the appearing header is both distracting and often obscures what I'm trying to read.