Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Microfeatures I love in blogs and personal websites

danilafe.com

Post reply on HN
Print view View original

11–20 of 444 posts

Re: Microfeatures I love in blogs and personal websites

#11

Post by zoidb »

> 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.

Re: Microfeatures I love in blogs and personal websites

#12

Post by swasheck »

self_awareness wrote: post #7
anais9 wrote: post #5

Earlier quoted context omitted.

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 ex…

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).

something to hide comments altogether would be remarkable

Re: Microfeatures I love in blogs and personal websites

#13

Post by voidUpdate »

dcminter wrote: post #6
voidUpdate wrote: post #2

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 rel…

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.

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

Re: Microfeatures I love in blogs and personal websites

#14

Post by Arcanum-XIII »

zoidb wrote: post #11

> 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 styl…

Isn't that what anchor are for?

Re: Microfeatures I love in blogs and personal websites

#15

Post by kibwen »

zoidb wrote: post #11

> 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 styl…

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.

Re: Microfeatures I love in blogs and personal websites

#16

Post by g15jv2dp »

kibwen wrote: post #15
zoidb wrote: post #11

> 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 styl…

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.

What's the point of the icon if the heading is already a hyperlink?

Re: Microfeatures I love in blogs and personal websites

#17

Post by MarceColl »

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.

Re: Microfeatures I love in blogs and personal websites

#18

Post by self_awareness »

jagged-chisel wrote: post #9
self_awareness wrote: post #3

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?

The scrollbar is not reliable. On Apple platforms, they hide the scrollbar unless you’re scrolling. I think CSS lets us specify that it should be visible on our own pages, but I don’t know how that interacts through browsers to the native behavior.

Well, but it is visible when you scroll.

Progress meter is also at 0% when you're not scrolling, so unless you scroll, you don't know how much text there is to read.

(btw, just checked for Firefox and Safari, and the scrollbar is visible at all times, unless the website explicitly hides it)

Re: Microfeatures I love in blogs and personal websites

#19

Post by jsnell »

breck wrote: post #4

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"…

> - 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.

Re: Microfeatures I love in blogs and personal websites

#20

Post by jasoneckert »

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.

Post reply on HN