8 CSS & JavaScript Snippets That Celebrate Retro Computing
- Read original article here
Everyone’s computing journey had to start somewhere. And depending on when you booted up your first device, things have likely changed quite a bit. The latest hardware and software innovations may leave those early systems in the dust. But the fond memories never fade.
Therefore, it’s no surprise that web developers would continue to pay homage to the past. Retro computers 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 pretty fun too.
We’ve rounded up eight CSS and JavaScript snippets 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 recall an old favorite or discover the way things used to be, this collection is for you.
If you grew up using a CRT monitor, you undoubtedly have an appreciation for the sleek, lightweight flat panel offerings of today. CRTs were heavy and could take up a sizeable portion of your desk. This interactive Tandy recreation is also monochrome, with an authentic glare in place thanks to a CSS gradient.
See the Pen Old CRT Monitor – TANDY monochrome monitor VM.4 by Kevin Falencik
Didn’t have a clunky monitor? You could hook your Commodore 64 to a television – how convenient! Note the wonderful glitch effects on the boot screen. Now they’re considered stylish, but back then, they were just the price of using a nascent technology.
See the Pen C64 Scroller on TV by The Brutal Tooth
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 look dated, it did lay the foundation for every version of Windows Microsoft has released since.
See the Pen Windows9x by Danielle Smith
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 features a familiar look and some interactive bits.
See the Pen CSS Macintosh Desktop by Alexander Shoup
Apple has always been at the forefront of design. The company made clever use of it when reporting the health of your machine. Booting up to the “Happy Mac” meant it was going to be a productive day. But the “Sad Mac” meant some troubleshooting was in order. This morphing animation lets you get a taste of both. They were emoticons before emoticons, no?
See the Pen Happy/Sad Mac (CSS Morph) by Jon Kantner
Physical storage media has changed dramatically over the years. But there was a time when floppy disks were used to install apps and save personal files. Here, a Commodore Amiga system is politely asking you to insert your disk. Hopefully, you have one lying around somewhere!
See the Pen Amiga kickstart diskette animation by Piotr “Hitori” Bosak
Without getting too far into the weeds, let’s just say that hardware problems were common. Hard drives especially required routine maintenance to prevent issues. This snippet faithfully recreates the experience of using the MS-DOS disk defragmenter tool. Indeed, there was a lot of waiting around back then…
See the Pen Microsoft Defrag (MSDOS) – Now on your browser! by Manz
Inspired by the “Where in the World is Carmen Sandiego?” video game, this old-school printer spits out helpful clues. But it’s also a representation of what printing was like before fancy laser and inkjet models hit the market. Dot matrix machines were not only slow, but they were also incredibly loud as well. What makes this even more fun is that React is used to create this retro scene.
See the Pen Typewriter Carmen Sandiego. ReactJS by Julien Verkest
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 highly-polished GUIs in no time. And the same can also be said for how refined hardware design has become. The old beige box no longer has a place in the modern office.
Still, it’s important to remember where we came from. These apps and devices helped shape us – even before there was a World Wide Web.
Feeling nostalgic for even more retro computing snippets? Use your pointing device of choice and visit our CodePen collection.
