Show HN: React95 – A React components library recreating the look of Windows 95

Show HN: React95 – A React components library recreating the look of Windows 95(github.com)

122 points by hatf0 2 years ago | 42 comments

rezmason 2 years ago |

Another great resource to create web experiences that look like old versions of Windows is 98.css by Jordan Scales: https://jdan.github.io/98.css/

With it, you don't need to use React to get decent results, see?

https://rezmason.github.io/excel_97_egg/about.html

swyx 2 years ago | |

I collect niche Operating System CSS!

- [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.

- [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)

- [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.

- [7.css](https://khang-nd.github.io/7.css/)

- [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI

- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)

- [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)

- DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme

- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library

more at https://github.com/swyxio/spark-joy/tree/master

kristopolous 2 years ago | |

That one is better. These fonts need work. They were true type without subpixel rendering, hinting, anti aliasing, etc, but at size 32, they weren't just bigger boxes. The thing I used on https://bootstra386.com/ is more faithful. In fact, it's written in the HTML of the time.

Also they weren't using off-black greys back then. EGA-16, web-216 or bust. Greys exist, but not those. https://www1.udel.edu/cookbook/web/webcolor/webcolors.html

rezmason 2 years ago | | |

I readily admit I'm taking some pixeliberties with it. :) The font's because of me, and the purple title bar, but I think I grabbed those grays from 98.css. I might change them to values in my own color lookup table.

...God DAMN dude, don't bury the lede! You made this? http://kristopolous.github.io/BOOTSTRA.386/demo.html This is gorgeous!

Waterluvian 2 years ago | |

React isn’t really for showing a static page of elements. It shines when you have a UI tree of many views and sub views and various menus and windows.

I don’t think you need React but this page isn’t demonstrating that you don’t need it.

creata 2 years ago | |

> https://jdan.github.io/98.css/

Subpixel antialiasing (I think) turns the text on that site green.

hatf0 2 years ago |

I used this library as part of a major redesign for my personal website (https://hat.fo), and thought that others might get a kick out of it. Fun little components library :-)

p1mrx 2 years ago |

https://react95.github.io/React95/

The uncanny valley comes to mind. It resembles Windows 95, but the fonts and spacing feel wrong.

eropple 2 years ago | |

I think it's pretty dang close. I wonder how much of where it's not quite there is modern font rendering.

111111IIIIIII 2 years ago | | |

It's literally the wrong front. The font here looks like Arial, but the Windows 95 font was something else. I'm pretty sure it was one of those fonts that starts with MS.

userbinator 2 years ago |

Not to be confused with ReactOS, the OS that not only recreates the look but also the functionality of Windows NT.

_fat_santa 2 years ago | |

I have to ask, does anyone actually use ReactOS outside of tinkering with it in a VM? That project was always fascinating to me because of how herculean the task was (basically reverse engineering Windows).

anthk 2 years ago | |

You can set the gradient to the same colors (that dark purple hue) of w95 from left to right in the title bar and choose the Classic theme and it's pretty close.

Uehreka 2 years ago |

Great stuff! Keep it up and perhaps you could build a whole operating system. You could call it… ReactOS ;)

adr1an 2 years ago |

There's another repo on GitHub that does the same. If the number of stars is of any significance, they have more. See: https://react95.io/ or https://github.com/react95-io/React95

TehShrike 2 years ago |

Does anyone have a link to the HIG for Windows 95? I learned a lot from reading the HIG for later versions of Windows, but I don't remember seeing anything for the older versions.

mike_hearn 2 years ago | |

Link here: https://news.ycombinator.com/item?id=22475521

marvin999 2 years ago |

This looks fun! Someone tells a serious use case please haha

samueltates 2 years ago |

This is sick - been thinking about adding 'themes' to a project and would love to offer this. Will have a play.

iRomain 2 years ago |

Crazy to think OP wasn’t even born when Win95 was used. Congrats on the job!

chungy 2 years ago |

For a moment I hoped this was about forking ReactOS to be more 95-ish.

mike_hearn 2 years ago |

That's really fun, but to be sufficiently poe-faced for HN, it does maybe highlight some of the issues that cause people to grouse about web apps vs native apps (not that many apps are truly native these days). The set of controls apps use has changed over time and some of the old "power user" controls just aren't there anymore. I think this is maybe part of what people get at when they express a preference for native UI. Classic desktop OS widget toolkits like ComCtl32, Cocoa, Swing, JavaFX, Qt etc were built up over very long periods of time and thus have a lot of very powerful controls and subtle behaviors that helped you be productive.

In contrast, HTML5 has an absolute poverty of UI controls. The web community ended up settling on React + "design systems" to try and patch their way out of this, but because theming and widget toolkits get blended together in this approach the widgets are constantly being reinvented and end up half baked compared to desktop UI frameworks, which separate theming from widget behavior and thus get way more investment in the core feature set.

This shows up in a lot of subtle ways, and a few not so subtle ways. For example there are some controls common in Win95 apps that are conspicuously missing here:

• Virtualized list view with resizable/movable headers. There doesn't seem to be a list view control at all, in fact. The control they call list is actually a menu!

• Yet there's no menu bar, and the menu ("list") doesn't seem to be a real context menu. Right click an item in the tree view and you get the browser context menu, which is useless.

• There's no tree table view.

• The range control doesn't have notches or the ability to see the value you're sliding.

etc. And of course you can forget about all the little features Win95 widgets had like proper keyboard support (try using the up/down arrows in the tree view, it doesn't work).

Now obviously this is just a fun hobby project. It's not meant to be an actual widget toolkit competitive with Windows 95, so the criticism above isn't "real" criticism, it's just a springboard for a bit of technical observation: it's 2023! Why does the web still not have a UI framework competitive with an OS that came out nearly 30 years ago? If you wanted to make a Win95 theme for Qt or JavaFX then it would be quite easy and you would actually be able make apps that were competitive with Win95 apps in terms of UI features. But the React+DOM approach can't manage that because the effort required to flesh out the widgets is split between a thousand design systems. That seems wrong and is part of why web UI feels kinda dumbed down compared to what we once had.