![]() |
|
![]() |
| Agreeing strongly, but I'd just like to point out that a probably more significant problem on mobile is that a scrollbar which you're likely to unintentionally hit with your fingers as you're clumsily and very imprecisely interacting with your device, or as Steve Jobs so famously declared, are "holding it wrong", absolutely is a valid reason to deprecate classic indicator-and-control scrollbars on mobile devices.
That is, a classic desktop scrollbar, dating back to Xaw widgets, the original Apple desktop, and even earlier[1] not only shows where you are within a text or display, but allows you to control where you are typically by clicking on elements of that scrollbar: the cursor, the bar itself, and the endpoint arrows. Several of these had interesting / quirky / annoying variants on interaction (those familiar with early X11 Xaw widgets can likely think of several). There's an interesting static image comparison at Reddit: <https://www.reddit.com/media?url=https%3A%2F%2Fi.redd.it%2Fe...> And a much more informative interactive demonstration by Sébastien Matos from 2019: <https://scrollbars.matoseb.com/> Discussed on HN a year ago: <https://news.ycombinator.com/item?id=36307341> And subject of quite a good review by The Verge: <https://www.theverge.com/2019/11/1/20943552/scroll-bar-visua...> Another point on swiping: my mobile device for the past three years has been an e-ink tablet. And I've learnt that swiping absolutely sucks. E-ink displays are much faster than people seem to believe, but there's still lag that an emissive display lacks, and it's far better to page through a long text or display than to scroll through it. I've all but entirely adopted an e-ink optimised browser that mostly does this, EinkBro (based on FOSS Browser), and I am constantly trying to page through other apps by tapping where EinkBro's forward/back touch zones are. People who've used other ebook readers will be familiar with the general concept as most have similar features. Having to imprecisely scroll through a document or app is exceedingly painful. Scrollbars partially solve this problem as for most, tapping above or below the cursor will advance the display by about a page of text (some feature a few percent overlap). On desktop systems, there's an even better option: the space bar. For a whole slew of apps and tools, dating back to Unix's pg, more, less, most, etc., you can page through a long text one screen at a time by tapping the space bar, which is the largest damned key (and hence the easiest-to-hit target) on the keyboard (Fitts's Law[2]). By contrast, scrolling on mobile: - Is highly subject to the tap-vs-drag confusion: the GUI cannot consistently distinguish a tap action (interacting with the application) with a drag (changing the viewpoint). - Is imprecise both by contact point (that is where you're interacting with the display) and displacement amount (how far you're moving through a text or app). You might scroll by more or less than a page, and it takes considerable time for the eye to recapture the reading point. - Obscures what it is you're interacting with. Your finger is covering the display you're trying to manipulate. A desktop mouse cursor by contrast covers little or none of the text or app. - Is subject to further confusion based on dynamic characteristics of the document or app you're dealing with (e.g., a Web page with progressively-loaded or rendered elements, or on Mozilla Pocket, inconsistent placement and textblock wrapping around image elements). I come to desperately hate scroll-based interfaces these days. ________________________________ Notes: 1. I wanted to claim provenance to the Mother of All Demos in ninteen-and-motherfucking-sixty-eight, but can't definitively show that Englebart included scrollbars. Wikipedia does give a 1974 implementation in Bravo: <https://en.wikipedia.org/wiki/Scrollbar#History_and_progress...>, citing <http://bitsavers.trailing-edge.com/pdf/xerox/alto/Alto_Users...> (PDF). 2. Which dates to 1954!!! <https://en.wikipedia.org/wiki/Fitts%27s_law> See also <https://doi.org/10.1037%2Fh0045689> (Fitts, 1964) and an extensive bibliography: <https://www.yorku.ca/mack/RN-Fitts_bib.htm>. |
![]() |
| As much as I hate what browser devs have done to scrollbars, I tend to agree with you. The one thing worse that fucked defaults is everyone throwing their own fucked personal preferences at you. Which is why sane defaults matter so damned much.
There are browser configuration tweaks which can be done in at least some cases. On Firefox Mobile / Fennec, for example, there's a configuration hack which can be done. I'm having trouble tracking that down but I think this might be it: In about:config:
From: https://old.reddit.com/r/firefox/comments/ujo1xy/how_to_incr...> |
![]() |
| > 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. |
![]() |
| Funny, I quite like progress bars! I agree that they can be too bold at times, but it's nice to have a visual indicator since scroll bars have disappeared (especially on mobile). |
![]() |
| One micro feature I implement on my blog that I would like to see everywhere: a single-page index of all the posts, like at https://blog.zorinaq.com
Don't paginate this. I want to see at a glance the titles of all the posts the author wrote. I want to be able to ctrl-f to search these titles. Heck, even if you had 100k titles they could still easily be shown on one page, as it would compress to 1 or 2MB transmitted on the wire which is still more lightweight than the average web page size. |
![]() |
| 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 …
…and now DDG just does it for me. Zero cost, zero hassle. |
![]() |
| 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 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... |
![]() |
| It's comforting to see blogging as a topic on HN front page, along with plenty of constructive comments. I'll take some of the ideas on board.
I've been working on a blogging service myself (here's my blog on it https://lmno.lol/alvaro), focusing on minimalism, hopefully enabling the content to shine on any kind of device (you can read from your favorite terminal too). You drag and drop your entire blog from a markdown file https://indieweb.social/@xenodium/112265481282475542 (feels more like keeping notes, which you happen to export as a blog). Service hasn't officially launched. You can play with https://lmno.lol (ephemeral posts) without signing up. Reach out if you'd like to register a blog (invite at lmno.lol). ps. ASCII art is not displaying properly on Android (known issue). So far, I can only fix by including a monospace font. I'd love to know if this is still possible to fix using system fonts. |
![]() |
| Nice list! I like many of these "microfeatures" too. Some I have on my site (https://evalapply.org), some I don't because I don't want to require Javascript for blog functionality. I think I have a few others not in that list.
This is my set of "microfeatures", which are all available in the post I linked below [1]. - All posts must have title, summary, dates (published, updated), one tag at least, and hot link to top of post (it's always #main) - Open graph metadata for all pages (title + summary) - All first-party content must be accessible as plain HTML - Typography and separator elements to establish structure and distinguish functionally different areas of content - In-page navigation (especially jump links to and from footnotes) - Table of contents when needed, in a disclosure element - Custom navigation to group a series of posts - Markers for external links - Captions for images and embeds - Disclosure elements for extra context - Footnotes (with links back to the referring text) - Index pages with summaries (the main blog index, and each tag's index) - RSS feed (global) So far I'm reasonably happy with things as they are. At some point I'd like to participate in a webring. [1] https://www.evalapply.org/posts/emerging-from-dotemacs-bankr... (edit: typo, and a point I forgot) |
![]() |
| 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. |
![]() |
| Most major websites continue to offer RSS. Considering that some people apparently believed that HN itself did not have RSS, I suspect that some people just don't know where to look for feed URLs. |
![]() |
| > 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.
As a web developer, I often look at the HTML and CSS of interesting websites… I gotta say, I've never seen anything quite like https://gwern.net. It's an impressive looking site IMHO; but pretty much everything he's done is very user hostile and wasteful of the user's resources, like downloading 14 fonts. He's doing everything you're not supposed to do if you care about your users or performance in general. Every page is pretty much like this. From cssstats.com: Rules: 1,484 Selectors: 1,757 Declarations: 3,914 Properties: 243 Total Selectors by Type Selectors are the part of a CSS ruleset that describes what elements in a document the rule will match. ID: 534 Class: 1,516 Pseudo Class: 296 Pseudo Element: 382 It just goes on and on like this. |
![]() |
| 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. |
![]() |
| Yeah, it used to be fast, but then you add features and have pages with a ridiculous amount of stuff in them compared to most pages (every DOM element costs you), and, well...
We plan to go back and optimize stuff once one last feature is in. (It's a novel feature I came up with I've never seen anywhere else: I call it the 'browsing history' feature. Every link you pop up will also be transcluded into a section at the end, so you can create your own bibliography as you go. This means you don't have to have FOMO about reading every popup or tab as you go, and you can rebrowse what might be interesting at the end, or even snapshot the page with a particular set of links having been browsed.) Achmiz meant to get around to it a while ago but among other things, he got nerdsniped by studying high-dimensional geometry for modeling an extradimensional invasion in his current D&D campaign: https://blog.obormot.net/Extreme-D-D-DIY-adventures-in-hyper... |
![]() |
| A ToC might be more distracting with a style that benefits less from a clear structure, like a personal essay. It can be important in a more technical-procedural style of writing, though. |
![]() |
| 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/#re... |
![]() |
| One site I like a lot is https://mriquestions.com/index.html
It has a really interesting navigation where there's an article, links to related articles, and references etc. Part of what I really like about it is the format of having the main text and then an "Advanced Discussion" accordion at the bottom that can be folded out for more detail. It's not uniformly used across all pages but I do like the format a lot. It's sort of an alternative to sidenotes but less disjoint where it treats the first part of a page as the intro and then expands in detail directions. It lets the intro be a higher-level and then "corrected" below. Example (just one I found, there are better ones but not all pages have them): https://mriquestions.com/how-to-reduce-sar.html Anyway just chiming in that it's a microfeature that I like vs say wikipedia which can just be... massively overwhelming on some pages. I don't necessarily think this feature is fully realized at mriquestions, but the MRI field suffers from multiple audiences (radiologists, technologists, engineers, etc) and its really difficult to pull content together that foster communication between these groups. mriquestions is by a radiologist so its a bit lacking on the engineering details side but its still pretty good but higher-level technologists use it well to get beyond the lies we tell them. It doesn't really get too far into the lies we tell radiologists though but sometimes it gets close (by lies I mean oversimplifications) and usually the references are good for the technical details. |
![]() |
| > Links to Other Sites
I used openring-rs for my Astro [1] site, but eventually replaced it with a TypeScript-native solution [0]. You can see it on my blog, e.g. at the bottom of this link [2]. If you're looking for an easy way to pull RSS feeds from TypeScript and show the N most recent posts, take a look at my library. PS: I'm currently unemployed, so if you have any feature requests I will quickly oblige :) PPS: if you haven't heard of Astro [1], do yourself a favor and check it out. You write JSX syntax and get static HTML/CSS out, with the option for JS only as needed. [0]: https://github.com/shepherdjerred/webring [1]: https://astro.build/ |
![]() |
| 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. |
![]() |
| 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/ * 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 |
![]() |
| 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. |
![]() |
| 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 [1]: Looks like this has already been mentioned: https://news.ycombinator.com/item?id=40778888 |
![]() |
| 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)? |
![]() |
| What if there were a standard |
![]() |
| 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.) |
![]() |
| - 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. |
![]() |
| My most important microfeature is center-aligned pages. Whenever I read something on a large screen and the content is left-aligned, leaving a large gap on the right, it really turns me off.
I try to make [mine](https://rednafi.com) center aligned on all clients. |
![]() |
| I hadn't heard of patio11's points against it. So I looked it up.
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/ >>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. |
![]() |
| 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. |
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.