Hacker News Reader

Comment by 0des | Hacker News Reader

OP, thanks for making this, I bet it was fun to build.

That being said, I want someone to do the opposite of what this does. Less chrome, less bytes over the wire, less predictive search, less "flatness?", less timely, more timeless.

View on HN

Oh dang, yeah. An extension that makes the whole web look and work like the default Mediawiki skin would be glorious. And _fast_.

I miss windows having borders. Just dug up a registry hack (obscene that such a thing was needed) to force win10 to have window borders again, because I keep ending up in situations where I honestly couldn't tell where one ends and the other begins.

They spent decades researching and building interfaces with visual cues, and we spent decades tuning our reflexes to them. Then some whim of fashion decided that hiding all those cues was "smoother", and I want to choke someone.

I just used win+ arrow keys, never missed the resizing.

Whoa, I had no clue about these key-combos. So handy! Thanks!!

For anyone curious, MS has a useful summary of how this works here: https://support.microsoft.com/en-us/windows/snap-your-window...

No problem, I did it by accident, and you can also drag the windows to the corners and overshoot to have them, top is full, left and right is half that side, the link you posted mentions that, I am actually surprised you never accidentally discovered either. I have that in KDE as well.

Also, double-clicking on a top or a bottom edge will v-maximize window, or resizing a window vertically and overshooting at the top or at the bottom of the screen.

Thanks for giving me a name for this that I can search for to turn it off. There’s nothing more annoying in my day than when I drag a window from one monitor to the other, then the windows cuts it in half and sticks it to the side of my screen.

I never knew what windows called it before, so there was no way to get rid of it in settings.

> I never knew what windows called it before, so there was no way to get rid of it in settings.

The settings pages aren't that big. You could read through it all in 5 minutes. Did you look? I mean sometimes things are annoying and you just can't be bothered to dig around to find the thing that turns it off, but at least in this case, it's easy:

Settings > System > Multitasking > Snap windows

You can't possibly be serious.

Out of curiosity, I just opened Windows 10 Settings. I see sixteen top level options. I opened the first one and it had 16 submenus, the first of which is two pages tall and has 8 additional settings links from it. Of course, Control Panel is also a place it could be hiding, and it's even bigger.

So, no. One does not simply click on every single thing in settings hoping to find the annoying thing that Windows is doing today that you don't have a name for.

Typing "Snap Window" into search narrows it down to three, which makes it possible to accomplish.

Thanks again to the GP for enabling that.

I am serious. counting pages won't change how long it takes to actually understand where things are.

you don't have to read every last word... you are just trying to get a vague feel for what is in there.

takes 5 minutes, max.

Why not use Reader Mode? I love it and use it as often as I can

I love reader mode! It's saved the internet for me

Reader mode is nice when it works, but since it’s hueristics-based I find it often either misses important content like images and code blocks that should be included with the article, or includes text that shouldn’t be there.

Even if it selects all the right elements, syntax highlighting doesn’t work which is an issue for me since a lot of the articles I read involve code.

These are issues with every reader mode I’ve tried – iOS Safari, iOS/desktop Firefox, desktop Chrome.

I wish there were a standard CSS media type that sites could implement, like `@media reader`, to help specify which elements should be included and to support things like syntax highlighting.

I recently worked on implementing readability in my Hacker News client app and here's the resources I found most useful. Basically, if once designs their site following the correct structure, then it works correctly for both reader mode as well as accessibility. These are "standards" which sites are supposed to follow but they don't unfortunately:

A very long read but this covers everything:

> How to Section Your HTML

https://css-tricks.com/how-to-section-your-html/

These are specifically important for accessibility users.

Another short read:

> HTML5 sectioning elements, headings, and document outlines

https://www.456bereastreet.com/archive/201103/html5_sectioni...

And you can use Markup Validation Service to validate and get tips:

https://validator.w3.org/#validate_by_input+with_options

Check out the excellent answer by Christian Kohlschütter on how readability works:

https://stackoverflow.com/questions/3652657/what-algorithm-d...

why does a different set of CSS make it _fast_?

It probably doesn't in this case, but there are cases where css can have significant performance implications. Different selectors take different amounts of time, various things can force re-laying out the page etc. Not to mention pointless animation.

The default MediaWiki theme is available, along with a handful of others, if you create an account.

The default mediawiki theme (vector) is also the default wikipedia theme (on desktop).

If you don't have an account you can add ?useskin=skinname to end of url to trigger different skins.

E.g. https://en.wikipedia.org/w/index.php?title=Main_Page&useskin... and https://en.wikipedia.org/w/index.php?title=Main_Page&useskin...

That, and the density. I like desktop UIs to be dense. They don't have to be sparse with ample padding like on mobile devices since you don't poke your fingers into your monitor. Yet somehow, people keep designing desktop UIs as if there's a touchscreen or something.

It's basic typographic design philosophy around whitespace - your eye needs somewhere to rest, and narrow columns of text are just easier to read. I personally like ample padding and whitespace, and don't want wall to wall content that just looks like a jumbled mess.

I agree with these typography principles when they are applied to things that should be read from top to bottom and the entirety of the content actually consumed as a whole. There's just many circumstances that it is not appropriate and I would say an encyclopedia entry is not one of them. I want to be able to scan a lot of content without having to change pages to find where I want to start reading from. That and people are really abusing the modern typography principle to get me to scroll more and 'engage' rather than just convey the information in a nice way (most news sites and recipe sites are egregious) that I'm starting to get turned off by the style for the web even though it's based in good reasoning. For print it's still fine because you are also limited and also it's often a two-column layout which is still pretty efficient for scanning for key words or phrases while being easy to read. 'Above the fold' used to mean something but in current web so much content wants to apply these principles but also wants me to scroll ten miles get to the actual point of the content and it feels really disrespectful to me as the reader.

What is typographic around buttons, toolbars and other panes?

your eye needs somewhere to rest

There is a big difference between newspaper columns and web whitespace. The former are more or less uniform and easily seen (I’ve also read newspapers with explicit delineation of separate articles, and it was even better experience). The latter is just chaotic blobs of whitespace, which doesn’t usually even delineate or makes your eyes rest, it makes them lost instead. You can’t see structure, because it is so blobby. Whitespace should only surround the elements which are much more dense and “thicker” than it. Otherwise it will blend into them dissolving any structure.

> people keep designing desktop UIs as if there's a touchscreen or something

I think that also has to do with "more white space = more scrolling = more ads".

Reddit is a perfect example of this. When they "updated" their UI to the current one, they added a ton of extra white space which forced people to scroll longer, thus spending more time on the site and viewing more ads. They also use a ton of other dark patterns.

> I think that also has to do with "more white space = more scrolling = more ads".

When applied to the web, maybe, yes. But then there are desktop apps, and entire operating systems, designed this way.

I think it has something to do with the phones after all. Everything is "mobile first" these days (to a ridiculous degree — there's a large grocery delivery service in my city that is ONLY available through a mobile app, so they lost me as a customer), so designers have much more experience with touchscreen UIs. Desktop anything feels like an afterthought oftentimes. It's just easier to take a mobile UI, blow it up to a computer screen, or put it into a window, optionally add a dual-pane layout, and call it a day.

That, and the fact how many designers regard the result of their work as a thing in itself, an art piece to be admired, instead of merely a coat of paint on a tool that just helps people get their f-ing stuff done more efficiently and then gets out of the way.

Along with a tiny body font, the effect is to more or less force you to maximize the window to make the site usable -- i.e. commandeer your desktop. Squarespace was an "innovator" in this technique.

>An extension

But... that's the opposite of what was asked for. Adding an extension adds more of the bad. A patch for Firefox reader mode would be better in my opinion since the web itself won't become better.

Any more details on that registry hack? I have been using RetroBar to have clear borders on taskbar and nostalgia. It doesn't have all actual features of windows 10 taskbar though.

Hear hear. I wish more sites were like HN - more text/information density, less CSS magic, less JS.

And HN's favorite: more RSS.

Got you, fam.

https://encyclopedia.marginalia.nu/wiki-start.html

(I built this mostly for myself, because I find it incredibly difficult to read text that has hyperlinks and images in the text)

You complete me <3

I should say it's a bit janky in some places, but for most articles it works reasonably well.

This is kind of incredible.

Have you considered images just take up full width?

Half of cutting the images is a space saving thing.

Wikipedia is a pretty big website, and (like the rest of my web presence) I'm hosting the mirror on a single small consumer hardware server. I'm keeping all the wikipedia pages as compressed HTML, and if you look at the sources you'll see it's very bare bones, most pages are like 50 Kb, yet the total is still 21 Gb. I don't think I have the space or bandwidth for selfhosting all of wikipedia's images.

Part of this experiment is to illustrate just how ridiculously large page loads on a lot of pages. Even text-heavy ones like Wikipedia.

If you compare the HTML payload alone of these two renditions of largely the same text, it's a 50x difference. The full Wikipedia page load exceeds 1 Mb, mine isn't even 10 Kb.

https://en.wikipedia.org/wiki/Scamander

https://encyclopedia.marginalia.nu/wiki/Scamander

That's kinda ridiculous.

Gotchya. All good then. Excellent work and insight :)

Have you attempted to convert them to plain text and serve those? Or is there no real savings there?

Would probably lose more than you'd gain doing that. The HTML right now is so clean you can read it without a browser, almost looks like it might be hand written, while still preserving things like formulas and tables (which do need a browser).

I'm with you on links being distracting, but it seems you... nuked them entirely, which maybe goes too far haha? I guess you can always go back to source if you want that.

I just moved them to the bottom of the article.

In part this is because I feel inline links on wikipedia often lets you overestimate how well you comprehend a subject. It's as though the fact that there is a link over a word makes you think you could go check what that is, and therefore that you probably understand the word.

Actually looking up some term mid sentence is also probably not particularly helpful for understanding the text either.

I concede that this is a somewhat unusual decision, but I designed the pages for the singular purpose of reading and comprehending the article. Everything else is secondary. It's a bit of a design experiment, but I think it's worked out pretty well. I don't fall into skim-reading these articles like I must admit I often do with regular Wikipedia articles.

I love what you've done with the links, and will use this, I think. Thank you for your excellent work!

Oh, ha, I didn't even notice that. Ok, I like that!

I was actually looking at the footnote links, and those do indeed seem to be missing entirely -- as well as the whole references section. Arguably that's more important than links to "definition" wiki pages, so it forms the basis for the knowledge (vs mostly just definitions).

Yeah, I removed those entirely, as I very rarely use those. More often than not the links are pay walled and the references are books that may or may not even be in print. Maybe it's useful if you have a university library at hand but I don't so I simply live with the fact that some of the things I've read may be wrong.

If you want to look up sources it's better to use the live wikipedia at any rate, since it will be more up to date than this snapshot.

Ehh, I would say it's useful to see the reference even if you don't follow the link, but I'm sure it also depends on the nature of the topic. Seems easy to just preserve that section, but, hey, it's your site. Maybe there's a cost aspect you're considering? On that note, I'm curious how much it costs to basically mirror all of Wikipedia, if you wouldn't mind sharing?

I do a lot of these design experiments. I have an idea such as "what if wikipedia was designed only with reading comprehension in mind" and then I see what taking it to the most ridiculous extreme does. Sometimes it pans out, like I'm fairly happy with this wikipedia mirror, sometimes it doesn't--like I have no logos or branding anywhere on my sites, that turned out to be a bit confusing.

My mirror clocks in at 21 Gb. I'm self hosting so there's no real money cost besides the one-time investment in hardware. A really chap person could probably host this off a raspberry pi attached to something like a Corsair Voyager and serve multiple requests per second.

There's some technical trickiness in actually storing the files in a file system, since most filesystems don't deal well with having millions of files in the same folder. So I've had to build a four-tier directory structure based on the hash of the file name to be able to store the files. They're stored in a structure like 31/444/781/225/foobar.gz.

I did some experiments storing them as BLOBs in a database, but I couldn't get it to work.

Interesting. What are the bandwidth considerations for this? I had the impression that many ISPs make self-hosting impractical on normal household plans, but then I've never looked into it seriously.

Dunno, I have unlimited uploads and downloads @ 100 mbit, and I host both this Wikipedia mirror as well as a search engine and some other stuff.

The bandwidth usage is pretty inconsequential since most of my pages clock in at just a few kilobytes.

Thanks, bestie!

That is very nice looking. But I want the hyperlinks because the information I want is often spread out over more than one page (often Wikipedia achieves more concision than a traditional encyclopedia by hyperlinking rather than defining the terms it uses). And I want references because otherwise the information is unreliable. And I often want images because they sometimes convey information better than any text ("an image is worth a thousand words").

Regular wikipedia is still there if those are your preferences. I don't know, I've never check a single reference in over a decade of using Wikipedia. I don't have access to those references. Maybe you do, if so that's cool.

> less timely, more timeless.

I'm not sure if this is a subtle reference,but one of the major competing skins for wikipedia is named timeless: https://en.wikipedia.org/wiki/Main_Page?useskin=timeless (its often quite popular among people using phones who find the official mobile website frustrating)

Nope, just coincidence.

If you create an account, you can change the appearance to look a lot like OP’s, but a lot lighter and without the plugin.

To be honest, while this looks pretty, it’s really just Wikiwand 2.0.

Isn't this solution exactly same number of bytes over the wire?

not totally obvious to me what you mean here? at first glance this seems to have less chrome than the standard ui, and to be more timeless in the specific sense that it has a closer resemblance to a paper encyclopedia layout versus mid-00s web styling.

https://wikiless.org/ is probably what you are looking for. There are also extensions that automatically redirect Wikipedia links

The only difference I notice between this and Wikipedia is that I can't hover over a link and get a pop-up description of the page. Is that all or is there more to it?

> https://wikiless.org - a free open source alternative Wikipedia front-end focused on privacy. No JavaScript or ads. All requests go through the backend, client never talks to Wikipedia. Prevents Wikipedia getting your IP address. Self-hostable. Anyone can setup a private or public instance.

From: https://codeberg.org/orenom/Wikiless

From the README [0] and code, I'd wager that the only thing happening is that JS has been filtered out, that the CSP rules are significantly stricter and that a dark mode has been added.

[0]: https://codeberg.org/orenom/wikiless

This. What's with the fixed floating headers? Like my screen real estate isn't scarce enough? And even if not, I don't like sites treating my desktop like a phone but blown up really big.

Normally I'd agree but in fairness to the author, they have fixed the table of contents.

I always found it weird and annoying how the table of contents in Wikipedia is a tiny thing jammed at the start. It's so darn awkward to use.

Reply on news.ycombinator.com