The History of Nooshu.com

Context

To be clear, most (if not everyone but me) may find this post completely pointless and uninteresting. As I'm trying to get back into blogging a lot more, and also consciously understand how this blog evolved. As it certainly wasn't planned at all, as I describe my "decision-making" process (or lack of, to be honest). You will see that a lot of the time it was just me wanting to learn something new and experiment with the latest shiny new technology in the Frontend world. If you think you'd find that interesting, then please do read on! I'm hoping that future blog posts will be more useful to readers as they will likely be more technical in nature, rather than the ramblings about the past 16 years!

The beginning

This website first popped into existence on the internet on the 30th March 2009 as a WordPress 2.7.1 website. I wish I could tell you where the "Nooshu" name actually came from, but it's been years, so I have no idea! I think I may have used a random domain name generator, and it was one of the options that it suggested. The actual domain name was registered on Saturday 17th of January 2009, that's almost 16 years ago! God, I'm old!

The web in 2009

To put those 16-years into perspective in Web terms, let's examine what the web was like in 2009:

• IE6 was still the most popular browser on the internet. Although IE7 was becoming more popular since it supported tabs, RSS feeds and better support for the ACID2 test.
• Firefox was only on version 3.0. Firebug was king, (the precursor to all browser DevTools).
• Chrome was on Version 3.0 and only available on Windows. Chrome is considered the first silently auto-updating browser with stable, beta, and dev "channels", once installed, the user doesn't have to prompt it to update in the future. Genius! Thus setting the course for the future of browser updates (apart from Safari). Nothing has changed there then, thanks Apple!
• Mobile started to really take hold, Apple launched the App Store in 2008, and the first Android phones were released.
• Most people were still on dial-up internet connections. Imagine having to wait minutes for a single YouTube video to load!
• Twitter started to become popular, as celebrities joined the platform and the "trending topics" functionality was added.
• Facebook overtook MySpace in global popularity.
• jQuery was the saviour for every Frontend developer on the web, abstracting away most of the pain of cross-browser CSS & JavaScript issues! Before it, you had frameworks like Moo.fx, base2, Prototype and Script.aculo.us.
• Responsive Web Design didn't exist. It wasn't until May 2010 that Ethan Marcotte published his truly monumental Responsive Web Design article on A List Apart. That article changed the web platform forever!
• Frontend frameworks like Bootstrap and Zurb Foundation were yet to be released publicly, that only happened in 2011.
• Everything was "Web 2.0". This term referred to the increasing interactivity and user-generated content on the web, with social media and blogs playing a central role.

I could go on, but I think you get the point I'm trying to make, a lot has changed in 16-years! So what about this website, how has it changed? Here's a brief timeline of key events in its history.

2010: WordPress + DreamHost

The last point in the list above, "Web 2.0" was most likely the catalyst for me buying the domain and setting up my own self-hosted WordPress blog on DreamHost.

In fact, looking back through my post history, the domain was purchased in 2009, but I didn't post anything at all in the first year. It wasn't until January 2010 that I posted my first blog post. And what a post it was, huh! You certainly set the web on fire with that one past-Matt, well done me!

2010 was an important time for HTML, as the HTML5 Specification was becoming a lot more mainstream. With the expiration of the XHTML 2.0 Working Group's charter, it was clear that HTML5 was the future of HTML.

And It certainly promised a lot, but the key features were: Cleaner code for developers with new semantic elements (<header>, <footer>, <nav>, <article> etc.)

• Better cross-browser compatibility.
• Improved performance
• Easier development
• Enhanced Search Engine Optimisation (SEO)
• Of course, with any major addition to the web platform, older browsers that don't support new features need consideration too!

The primary rule on the web platform above all else is, remember:

don't break the web!

There are an estimated 50 billion pages on the web, most of which are very likely never going to be touched or updated ever again! So whatever you do, make sure they work with both past and future browsers.

As a side note: In my humble opinion, the web browser is up there as one of the greatest pieces of software ever created. Just think of all the errors and edge-cases it has to deal with, and it still manages to render readable pages, literally decades after they were first written and published! And in terms of human years of development effort, cooperation across continents, countries, and organisations, I'd be interested to see if anything else comes close (apart from the invention of the World Wide Web itself!).

Now, since HTML5 was a big change that introduced new elements to the platform, older browsers wouldn't recognise them. So that's when Remy Sharp created the initial JavaScript solution to this problem. He used the document.createElement(elementName) to let the CSS engine know that an element with that name exists. This advancement has a rich history that I won't go into here, but if you are interested, Paul Irish wrote an excellent blog post back in 2011 all about it!

Long story short, I also jumped on the HTML5 bandwagon and implemented the new semantic elements into my WordPress theme and also included the incredibly short DOCTYPE that I could finally remember! No more copy / pasting from a previous page templates, just look how short and simple it is!

<!DOCTYPE html>.

2013: Zurb Foundation + Responsive Design

Now, I fully admit I've always been terrible at design! I like to think that I can recognise good design when I see it. But as for creating a design from scratch, not a chance! I clearly remember looking at the CSS Zen Garden by Dave Shea in awe as to what people could create using an identical HTML structure and a single modified CSS file! Looking through the designs today, it still blows my mind at the creativity and imagination of others. There really were some groundbreaking designs in there.

And remember, CSS 2.0 was still new and far from being feature-complete. Furthermore, due to the first browser wars, browser vendors were racing to implement new features without any agreement on cross-browser specifications!

So when frameworks came out that promised to abstract away the actual design process for me, I jumped at the chance to use one! Simply modify your template to match the HTML specified in the framework, include the CSS and JavaScript, and you are done! A fully responsive website that was well tested and didn't look like the poster child for GeoCities. I'm not sure why I chose Zurb Foundation over Bootstrap. I think it was because Zurb was less popular and considered the "underdog" against the vast resources of Twitter (makers of Bootstrap).

2016: PWAs & AMP

It turned out that 2016 would be the year to experiment with new technologies. After all, that's what a personal website is for, isn't it??

Service Workers

In July, I decided to experiment with the shiny new Service Worker API. This allowed me to turn my humble little blog into a Progressive Web Application (PWA), complete with features like: Push Notifications. Native device access (Camera, GPS, etc). Offline Access. Installable to a user's device "home screen". Greater reliability over unreliable network connections. Improved performance via fine control over asset caching. Essentially, PWAs provide a native app-like experience with features like home screen installation and access to more powerful device features.

In hindsight, the functionality is all pretty overkill for a small blog with barely any readers in my own little corner of the internet. But any excuse to dabble with new technology, I guess!

Accelerated Mobile Pages (AMP)

Another technology I implemented was Accelerated Mobile Pages, or AMP for short.

For readers who've not heard of them, Accelerated Mobile Pages are stripped-down versions of web pages that load rapidly on mobile devices.

As with the Service worker API, there was no real reason to implement AMP on this site apart from for general experimentation with the technology. In the end, AMP turned into (yet another) walled garden on the internet, this time it helped keep users (and their content) within the Google domain. In fact, the web community were so concerned with AMP that hundreds of developers signed an online petition to persuade Google to make the technology more viable for the whole of the web platform (not just Google!)

2017: Bye, bye WordPress, Hello Jekyll

Having been with DreamHost and WordPress for 7-years, the web platform had gone through a huge amount of change. With the invention of the Jamstack web development architecture, it was now possible to create simple static websites using only a few build tools and host them on free services. Rather than having to use a CMS, a Database, and a Server-side language (like PHP, Ruby, .Net etc). And since I was already paying for GitHub for repository storage, why not use that for hosting my static website too? That ultimately lead me down the Jekyll route, since it's what is used by GitHub to render static HTML via their Pages functionality.

Annoyingly, I didn't write a blog post at the time about this dramatic architecture change to the site, so I'm struggling to recall all the details. But I do remember that, not being a ruby developer, I found it quite a steep learning curve at first. Especially when it came to the asset pipeline. Furthermore, I don't think I ever got used to all the dependency hell you needed to jump through if you wanted to make a small change. When GitHub had updated the version of Jekyll, they used to render the pages e.g. etc.

But once the site was set up and all working, it was a breeze to update and deploy new blog posts! And, bonus! No monthly costs for separate hosting or updating WordPress to the latest version because of zero-day security issues!

The main downside I found with Jekyll and GitHub Pages was the limitation that you could only use "GitHub approved" plugins. If you wanted to use another, less common plugin that GitHub didn't support, you're out of luck! There was probably a solution to that, but I never took the time to investigate further.

All in all, I was pleased with the setup for many years, but the dependency on Ruby in the background never sat well with me. It's an incredibly powerful language, but always seemed very overkill for generating simple static HTML files!

2018: Bye, bye AMP

Considering the uproar about AMP in 2016, I'm not sure why it took me so long for to rip it out of the site!

It was most likely that having 2 young children, a mortgage, and a job that required 4-hours commute each day! Being a fully-fledged adult basically left me with no time to do it! But, thankfully, I did manage to write a post all about my reasons for removing AMP here.

2021: Bye, bye GitHub Pages, Hello Netlify, and Cloudflare

So, 2021 turned out to be an incredibly character building year for me personally and a truly horrible time for my immediate family and friends. As our late Queen Liz said in 1992 & 2019, it was our Annus horribilis (disastrous year).

But if there is a silver lining to being diagnosed with Stage 3 brain cancer, it's that it really motivates you to do things you've been putting off for years! Looking back now, I was using work as a kind of "safety net". Since it was something I had at least a little control over in my life. I'd thrown myself well and truly into my work at Government Digital Service (GDS) and was getting more involved in the wonderful Web Performance community.

In doing so, I decided I needed much more control over the blog than what GitHub Pages could offer. The natural progression at that time was to migrate to Netlify. The company had a free tier that came with all the features I required and also supported Jekyll. So migration would be simple. Once the migration was completed, my "digital legacy" would be running on 100% free services. I even placed the site behind Cloudflare's free tier services, so I could take advantage of all the lovely web performance goodies that they have to offer! Once completed, I could then focus on my immediate future (family, operation, radiotherapy, chemotherapy, recovery etc).

2024: Bye, bye Netlify and Jekyll, Hello 11ty, and Cloudflare Pages

I've now had "stable" MRI scans for the past 3-years, which is remarkable! So it's time to look to the future and do something new with the site. Which brings us up to the present day. And this is the very blog post I've written, and you (presumably) just read, that has been published using 11ty and Cloudflare Pages. And I must admit, it feels fantastic to finally clean up years and years of technical debt and give the site a new lick of paint, I even managed to complete most of the design myself!

But I'll leave the details about the full migration from Netlify and Jekyll, to 11ty and Cloudflare Pages for another blog post.

The future

In summary, a lot can change in 16-years, both on the web and in life. Or if you prefer a cheesy one-liner: "Embrace the past, and use it to shape the future."

On that cheesy note, I'll leave you with one of my favourite quotes from C.S. Lewis:

Isn't it funny how day by day nothing changes, but when you look back everything is different?

As always, thanks for reading. And if you have any comments or feedback, either use the comment section below, or use one of the links on the contact page.

Post changelog:

• 02/11/24: Initial post published.