9 ms·
Hacker News stylized as a retro 90s macOS desktop
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 https://github.com/anthmn/hackertosh.css
edit: try https://hackertosh.org/news https://hackertosh.org/news if the page is blank
- usrme 4y agoLove 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 https://imgur.com/M8PHS6g
- deleted 4y ago[deleted]
- adamddev1 4y agoI love this. I've seen the Windows 95 retro CSS but this retro Mac thing looks great!
- ranger_danger 4y agohttps://github.com/andersevenrud/retro-css-shell-demo https://github.com/andersevenrud/retro-css-shell-demo https://github.com/arturbien/React95 https://github.com/arturbien/React95 https://github.com/botoxparty/XP.css https://github.com/botoxparty/XP.css https://github.com/Gioni06/terminal.css https://github.com/Gioni06/terminal.css https://github.com/jdan/98.css https://github.com/jdan/98.css https://github.com/jianzhongli/csswin10 https://github.com/jianzhongli/csswin10 https://github.com/khang-nd/7.css https://github.com/khang-nd/7.css https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 https://github.com/lachsfilet/Renkbench https://github.com/lachsfilet/Renkbench https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css https://github.com/npjg/classic.css https://github.com/npjg/classic.css https://github.com/robbiebyrd/platinum https://github.com/robbiebyrd/platinum https://github.com/bryanbraun/after-dark-css https://github.com/bryanbraun/after-dark-css https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn https://github.com/ritenv/retro-desktop https://github.com/ritenv/retro-desktop https://github.com/RoelN/c64css3 https://github.com/RoelN/c64css3 https://github.com/sakofchit/system.css https://github.com/sakofchit/system.css https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/
- twic 4y agoFun! 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 4y agoOk you just made me go dig into the classic official Macintosh Human Interfaces Guidelines: http://interface.free.fr/Archives/Apple_HIGuidelines.pdf 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 4y agoFun 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) https://en.wikipedia.org/wiki/Spinner_(computing) [2] https://en.wikipedia.org/wiki/Appearance_Manager 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 4y agoI think my boot floppy is broken, I just see a white screen.
- j_leboulanger 4y agoI do too
- sbarre 4y agoYeah, hug of death I think
- pimeys 4y agoHas a small bug with Android Firefox: https://i.ibb.co/ZRsFNQW/Screenshot-20220918-204917.png https://i.ibb.co/ZRsFNQW/Screenshot-20220918-204917.png
- synu 4y agoActually the same on iOS for me.
- aardvark179 4y agoYeah. It works in landscape mode, but not portrait.
- rcarmo 4y agoNeat! Will go very nicely with one of my desktop environment containers, which is inspired on Platinum as well: https://taoofmac.com/space/blog/2022/04/12/2330 https://taoofmac.com/space/blog/2022/04/12/2330
- anthonyhn 4y agoNice blog! Do you have a link to that XFCE mac os theme in the screenshot? Would love to try it out
- victorgama 4y agoSo do I!
- rcarmo 4y agosee above
- rcarmo 4y agoBelated apologies: https://github.com/grassmunk/Platinum9 https://github.com/grassmunk/Platinum9
- givemeethekeys 4y agoThe 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 4y ago"Sorry, we're not able to serve your requests this quickly."
- throwoutway 4y agoSame. Ideally this "proxy" should just cache the front-page for 1-2 minutes and serve the cache.
- krapp 4y agoIdeally, it should be using the API, which isn't rate limited.
- metadat 4y agoNeeds caching or consumption via algolia on the backend to avoid the ban hammer.
- kleene_op 4y agoThat"s understandable. HN was launched in 2007 :o)
- pGuitar 4y agoThat happens all the time on HN if you click "too quickly".
- reaperducer 4y agoOr if your account is restricted in the number of posts you're allowed to write each day.
- karmakaze 4y agoWould 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 4y agoHackertosh should be the name for the type of apple the Queen used on Snow White.
- SeanLuke 4y agoIf we're going for MacOS 8.5, it would have been cuter if this had been restyled as a Sherlock plugin.
- illuminerdy 4y agoThis brings back memories of my old iBook G3 and PowerBook G4. I miss that weird smiley face logo-thingy.
- dfc 4y agoWhat do the different colors for the domain links at the end of stories mean?
- anthonyhn 4y agoThe 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; }
- saagarjha 4y ago*Mac OS :)
- monkpit 4y agoI was a little sad that the clock doesn’t work :(
- auraham 4y agoI was about to say that :/
- m348e912 4y agoI 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 4y agoYou 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 4y agoold.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.
- deleted 4y ago[deleted]
- victorgama 4y agoBeautifully executed! Really liked the concept, just bookmarked it! ♥
- simonebrunozzi 4y agoGorgeous! Really like it. Thanks for working on this side project. Don't worry too much if it might seem almost useless.
- Thorentis 4y agoAmazingly 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.
- nullbyte808 4y agoThis looks way better! Setting it as my default.
- obert 4y agoyeah the usability is pretty much the same, with small links and icons impossible to click
- alxlaz 4y agoAs 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...
- bloqs 4y agohttps://i.imgur.com/vhER5zX.jpg https://i.imgur.com/vhER5zX.jpg this happened on Samsung Android with the link preview browser
- brianjlogan 4y agoSame on Android with Chrome.
- qwerty456127 4y agoNice! Retro Mac is the prettiest OS GUI I can name (I've seen some even cooler but can't name them).
- yitchelle 4y agoGreat work! Not sure if it is only on my setup (Chrome and Win10), but it feels a bit snappier with a faster response time.
- Sin2x 4y agoThe font looks atrocious without enabling antialising (which I abhor). Compare the headlines text with the menu bar image at the top left of the page: https://i.imgur.com/0MDGYpn.png https://i.imgur.com/0MDGYpn.png Taken on Windows 7/Chrome