HN Explorer

Hacker News stylized as a retro 90s macOS desktop (hackertosh.org)

282 points by anthonyhn ↗ HN
Hello HN, this is a small side project I worked on that restyles HackerNews to look like the desktop of an older version of MacOS from the 90s.

Internally, this is just a proxy to news.ycombinator.com that injects a custom `news.css` style sheet on some routes (login routes redirect back to HN). If you want to use the style sheet on the client side, there are browser extensions and a custom style sheet available at the github repo [0].

[0] https://github.com/anthmn/hackertosh.css

edit: try https://hackertosh.org/news if the page is blank

54 comments

[ 2.9 ms ] story [ 110 ms ] thread
[deleted]
(comment deleted)
adamddev1
I love this. I've seen the Windows 95 retro CSS but this retro Mac thing looks great!
ranger_danger
https://github.com/andersevenrud/retro-css-shell-demo

https://github.com/arturbien/React95

https://github.com/botoxparty/XP.css

https://github.com/Gioni06/terminal.css

https://github.com/jdan/98.css

https://github.com/jianzhongli/csswin10

https://github.com/khang-nd/7.css

https://github.com/kristopolous/BOOTSTRA.386

https://github.com/lachsfilet/Renkbench

https://github.com/lolstring/window98-html-css-js

https://github.com/micah5/PSone.css

https://github.com/nostalgic-css/NES.css

https://github.com/npjg/classic.css

https://github.com/robbiebyrd/platinum

https://github.com/bryanbraun/after-dark-css

https://github.com/npjg/new-dawn

https://github.com/ritenv/retro-desktop

https://github.com/RoelN/c64css3

https://github.com/sakofchit/system.css

https://github.com/vinibiavatti1/TuiCss

https://code.divshot.com/geo-bootstrap/

twic
Fun!

One small immersion break for me was that the triangles next to comments are upvote buttons; I expected them to toggle the threads open and closed (even though they're pointing upwards - a toggle would point to the right in the open state). I'm not sure what an idiomatic upvote button would look like. A checkbox?

cmrdporcupine
Ok you just made me go dig into the classic official Macintosh Human Interfaces Guidelines: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf

(A classic wonderful document that even us Atari ST users used to consult when developing apps!)

See page 216 (240 in the PDF), "Controls Not Supported by the Macintosh Toolbox".

"Little Arrows The control that is two arrows pointing in opposite directions is commonly called little arrows. It is used to increase or decrease values in a series. Figure 7-16 shows one example of the little arrows control.'

So two small vertically stacked arrows as you'll see in their screenshot.

And you're right, those arrows to the left of the article title should be for expand/contract. (See 7-18, page 242 "Outline triangle control" in the same PDF)

crazygringo
Fun indeed. And you're right -- because those triangles were used to expand folder contents.

Upvoting, hmm... well together with downvoting, you could appropriate the number spinner/stepper widget [1], the tiny little up and down buttons attached to the right side of a number field? I'm not sure that was ever native to the Platinum design language [2], but IIRC Microsoft Office at least used it at the time.

[1] https://en.wikipedia.org/wiki/Spinner_(computing)

[2] https://en.wikipedia.org/wiki/Appearance_Manager

EDIT: whoops, cmrdporcupine's sibling comment basically says the same thing. Leaving this comment here in case anyone's interested in the additional links.

kgwxd
I think my boot floppy is broken, I just see a white screen.
sbarre
Yeah, hug of death I think
givemeethekeys
The opaque icon text background - I made sure that my desktop stayed clutter free and my wallpaper always matched the background color to hide the ugliness of the opaque icon text background.
sidpatil
"Sorry, we're not able to serve your requests this quickly."
throwoutway
Same. Ideally this "proxy" should just cache the front-page for 1-2 minutes and serve the cache.
krapp
Ideally, it should be using the API, which isn't rate limited.
metadat
Needs caching or consumption via algolia on the backend to avoid the ban hammer.
kleene_op
That"s understandable. HN was launched in 2007 :o)
pGuitar
That happens all the time on HN if you click "too quickly".
reaperducer
Or if your account is restricted in the number of posts you're allowed to write each day.
krapp
No then you get "you're posting too fast."
karmakaze
Would be great to show only enough items per page so that the browser page doesn't need to scroll and only use the 'More' link.
ourmandave
Hackertosh should be the name for the type of apple the Queen used on Snow White.
SeanLuke
If we're going for MacOS 8.5, it would have been cuter if this had been restyled as a Sherlock plugin.
illuminerdy
This brings back memories of my old iBook G3 and PowerBook G4.

I miss that weird smiley face logo-thingy.

dfc
What do the different colors for the domain links at the end of stories mean?
anthonyhn
The colors are just for style and a bit of usability. The color is determined by the first letter of the domain, for example here is the CSS for domains starting with 'w':

  .comhead>a[href^="from?site=w"] {
    color: #0098ce !important;
  }
There is also a extra rule for Apple domains (domains ending with 'apple.com') that adds an apple icon to the left of the domain:

  .comhead>a[href$="apple.com"]:before {
    content: "---";
    color: #ffffff00;
    background: var(--mac-apple-icon) 0px;
  }
monkpit
I was a little sad that the clock doesn’t work :(
auraham
I was about to say that :/
victorgama
Beautifully executed! Really liked the concept, just bookmarked it! ♥
m348e912
I wish I could apply the current HN format to websites with dumpster fire UIs. Zerohedge comes to mind, and perhaps even Reddit (which isn't as bad)
tsujp
You can still use the old Reddit UI by the way. If you use an account configure it in your account settings otherwise make sure you visit `old.reddit.com` e.g. `old.reddit.com/r/news`.

The day `old.reddit.com` stops working (and the API prevents a remake) is the day I stop using Reddit.

m348e912
old.reddit.com is my go to. I still prefer HN's UI. It's slightly better. And I'm with you, when old.reddit.com goes away, so will I.
yreg
Both are pretty bad on a touch device.
anthk
Often I prefer gopher://gopherddit.com and gopher://hngopher.com under Lynx, as it doubles as a Gopher and a Web browser.

Web links are just opened inside.

[deleted]
(comment deleted)
simonebrunozzi
Gorgeous! Really like it. Thanks for working on this side project. Don't worry too much if it might seem almost useless.
Thorentis
Amazingly this is almost more readable than some parts of HN. I hate how text posts use a very low contrast text color on vanilla HN.
leonewton253
This looks way better! Setting it as my default.
obert
yeah the usability is pretty much the same, with small links and icons impossible to click
alxlaz
As in, excellent information density so there's more actual content than empty space, high-contrast text that you can actually read, and colourful, stylish icons that you can tell apart from each other even if they're not 128x128px? Sign me up...
usrme
Love this to bits! One minor improvement is to add spacing between the user name and the "logout" text. Based on my own user name "usrme": https://imgur.com/M8PHS6g
qwerty456127
Nice! Retro Mac is the prettiest OS GUI I can name (I've seen some even cooler but can't name them).
yitchelle
Great work! Not sure if it is only on my setup (Chrome and Win10), but it feels a bit snappier with a faster response time.