Everyone’s computing journey had to start somewhere. And depending on when you set up your first device, things have probably changed a lot. The latest hardware and software innovations may leave those early systems in the dust. But the ugly memories do not fade.
Therefore, it’s no surprise that web developers continue to pay homage to the past. Retro computers have played a role in who we are. Some of us learned to code on them, while others experimented with early image editing apps (hello, Microsoft Paint). Oh, and the games were a lot of fun too.
We’ve rounded up eight CSS and JavaScript hacks that celebrate retro computers. Not only can you admire the designs of the day, but you can even interact with some of them. Whether you want to reminisce about an ex or find out what it was like, this collection is for you.
Vintage TANDY Monochrome CRT Monitor by Kevin Falencik
If you grew up using a CRT monitor, you no doubt appreciate today’s slim and light flat panel offerings. CRTs were heavy and could take up a lot of your desk. This interactive Tandy recreation is also monochrome, with an authentic glare applied thanks to an CSS gradient.
Check out the Old CRT Pen Monitor – TANDY VM.4 monochrome monochrome by Kevin Falencik
The Commodore 64 scrolling on TV by The Brutal Tooth
Didn’t you have a clunky monitor? You could hook up your Commodore 64 to a TV – how convenient! Note the amazing glitch effects on the start screen. Now they are considered stylish, but back then, they were just the price of using modern technology.
Watch the C64 Pen Scroller on TV with The Brutal Tooth
Windows 9x in javascript by Danielle Smith
Take a trip back to the 90s with this JavaScript rendering of Windows 95. Click the “Start” button, open new windows and drag them around the desktop. While the OS may seem dated, it laid the foundation for every version of Windows Microsoft has released since.
Check out the Windows9x Pen by Danielle Smith
CSS Desktop Macintosh by Alexander Shoup
We can’t forget that the Mac was way ahead of Windows when it came to UI. Even on a black-and-white screen, the OS was slick and easy to use. This snippet looks familiar with some interactive bits.
See the Pen CSS Macintosh Desktop by Alexander Shoup
Happy/Sad Son (CSS Morph) by Jon Kantner
Apple has always been at the forefront of design. The company made smart use of it when reporting the health of your machine. Expecting the “Happy Mac” was going to be a productive day. But the “Sad Mac” meant that some troubleshooting was in order. This morphing animation gives you a taste of both. They were emoticons before emoticons, weren’t they?
See the Happy/Sad Mac Pen (CSS Morph) by Jon Kantner
The Amiga Kickstart Disk Animation by Piotr “Hitori” Bosak
Physical storage media has changed a lot over the years. But there was a time when floppy disks were used to install apps and save personal files. Here, the Commodore Amiga system politely asks you to insert your disk. I hope you have one lying around somewhere!
Watch the Pen Amiga kickstart disk animation by Piotr “Hitori” Bosak
MS-DOS Disk Defragmenter Tool (MSDOS) with Manz
Without getting too far into the weeds, let’s just say that hardware problems were common. Hard drives required routine maintenance to prevent problems. This fragment faithfully recreates the experience of using the MS-DOS disk defragmenter tool. In fact, there were many waiting around back then…
View the Microsoft Defrag Pen (MSDOS) – Now on your browser! with Manz
Carmen Sandiego Typewriter with ReactJS by Julien Verkest
Inspired by the “Where in the World is Carmen Sandiego?” video game, this old-school printer throws in helpful hints. But it’s also a reflection of the type of printing that existed before fancy laser and inkjet models hit the market. Dot matrix machines were not only slow, but also extremely loud. What makes this even more fun is that React is used to create this retro look.
Look at the Carmen Sandiego Pen Typewriter. ReactJS by Julien Verkest
Apps and Devices That Left a Lasting Impression
After taking this trip back in time, it’s amazing to think about how the computing experience has evolved. It seems like we went from clunky command lines to very polished GUIs in no time. And the same can also be said for how refined hardware design is done. The old beige box no longer has a place in the modern office.
However, it is important to remember where we came from. These apps and devices helped shape us – even before the World Wide Web existed.
Feeling nostalgic for more computing bits from her? Use your pointing device of choice and visit our CodePen collection.
