Silver Jubilee 

On November 16, 1999, I started working as a web developer—though the role wasn’t called that back then. I regularly worked with HTML and CSS, so that’s effectively what I was. And so here we are today, 2024, and I’m still at it, 25 years as a web developer. To celebrate, I thought it would be fun to reflect on a selection of websites I’ve built over the years, with one example from each year.

1999: Macmillan Reference

My first job. Sent my first-ever email on my first day which I was late for. I think I did some HTML/CSS on the second. I was hired by a reference publisher (Macmillan) as a Web Development and Marketing Assistant—a mix of IT help desk and corporate website updates. This was back in the last century, so the web felt pretty bare metal, straight to prod.

2000 Grove Dictionary of Art, Grove Dictionary of Music

Working at the reference publisher as we entered a new century, the large works that they worked on started to be published online, one example, The Grove Dictionary of Music website, launched in 2001 was a subscription-based website. I managed the marketing site, handled the access system (mostly IP address entries), and provided online support, directly interacting with customers—a useful and somewhat eye opening experience in peoples’ range of online skills.

Article reference: The Guardian on Grove’s Online Music Book

2001: In The Field

While working full-time, I occasionally took on side projects. This one was a companion site for a BBC World Service radio program. I collaborated on it with my girlfriend, Nell Greenhill (now wife), building and illustrating the website with actual scanned-in paintings. The site was 640px wide, 216 colors and used RealPlayer files! The site was online for the best part of 20 years, but eventually shuffled off to the big container in the sky (or a shipping container in San Francisco). Although I did archive off an instance of it.

2002: S&R Greenhill

This was a website for my future parents-in-law’s photo library. It’s still online at srgreenhill.co.uk, the earliest of my creations still accessible today. It exists mainly because I registered the domain. Given how many of my sites have disappeared it’s good to keep a few little remnants around.

2003: Palgrave.com

Since around 2001, I’d been managing Palgrave Macmillan’s academic publishing website. The Grove department separated and was eventually sold to Oxford University Press. Our office was in King’s Cross (before it was gentrified), sharing a sparse office with Lord Stockton and a small imprint below the Regent’s Canal waterline—a surreal time. I was still mostly hand-coding the site in HTML with some ASP for e-commerce and search functions.

2004: dogwonder.co.uk

I’d been increasingly interested in the self-publishing side of the web, blogs especially. I think I started with Blogger but found WordPress exciting, the idea of hosting your own instance, so I registered my domain name, uploaded some files via FTP, edited wp-config.php, and started blogging.

2005: Companion websites

We frequently bundled websites with textbooks, adding resources and downloads like a CD-ROM but more webby.

2006: B&N fabrications

Another private project, this one for a friend’s company. I maintained their website and email server for many years. Each year, the owner would send a cheque for hosting and email, until I received a handwritten note in 2022 saying they no longer needed the service as the boss was retiring—a reminder of my own longevity in this field.

2007: Palgrave.com V2 

I managed a design refresh of Palgrave Macmillan’s website, coordinating with the IT team in Bangalore, India. We had started to host Author blogs as well, I can’t remember how they worked, but I think it was email >> me >> website.

2008: MetroTwin

After eight years in publishing, with the same job title and as the only web-focused person in my division, I knew I needed a change to grow. After a somewhat frustrating job search and some frankly weird recruiters, one of which I had to block, a nice recruiter found my CV (on Monster.com?!) and reached out about a company called Headshift. I went in for an interview, loved the team, and they seemed to like me. I joined as a Front-end Developer in March 2008. On my first day, I was tasked with quickly learning Movable Type—a big step up from the more unhurried nature of publishing. Within a month, we were subcontracted to work onsite at an ad agency (BBH) for a major client, British Airways. The site was built on Ruby on Rails, with Agile project management, daily stand-ups, and kanban. I was a bit out of my depth but excited to take on new challenges and (had to) learn fast. I would spend the next 4 or so years working with some brilliant people.

2009: BBC Blogs

After building several Movable Type based sites, Headshift won the contract to rebuild the BBC’s blogs, also on Movable Type. This was my first experience using a full UX process, including user research and basic wireframes (rather than full comps). We used the BBC’s new design system, Barley, and worked to centralise global navigation components like the masthead and footer. I ended up rebuilding around 100 blogs across the organisation, including multilingual versions. Peston, Victoria Derbyshire, BBC Internet blog, BBC News and Sport blogs. Loads.

2010:  Frontline Club

Another Movable Type project—this time, a site for the Frontline Club, with about 20-30 blogs. The site also included a shop and a booking system, though my focus was mainly on the blog component.

2011:  CDKN

Headshift’s approach became more UX-driven, and responsive design became a standard. The front-end development team, seated in the Design department, collaborated closely with designers and developers to ensure we met user needs. I was involved in workshops to fully understand site goals, and sometimes we even co-designed sites alongside clients. We often delivered websites through an iterative process, incorporating feedback from users, the client, and our own teams. CDKN was one of those, built in WordPress as it became more of a fully featured CMS.

2012: Cavendish School

After more than four great years at Headshift (which was acquired by Dachis Group around 2010 and subsequently pivoted toward products, away from the services side of the business), I felt burned out and ready for a new direction. I wanted more control over my career, so I took a leap and went freelance, establishing Dogwonder Ltd. The nickname “dogwonder” came from my publishing days via a colleague and friend, inspired by the Hanna-Barbera character Dogwonder the Dyno-Mutt on account of my technical prowess. I used it for many years as my internet handle, back when people tended to be a little more obfuscate. Amazingly, the company name had been previously registered but dormant so I was able to secure it, and so Dogwonder Ltd was born. I left Headshift in September 2012—it was scary in hindsight, but necessary. My early projects were for small to medium-sized businesses, mostly WordPress-based brochure sites that clients could easily manage. Cavendish School, a school in Camden, was one of my first projects. I even ran workshops to gather requirements and understand user needs. For the next few years I would happily collaborate with an old friend and designer Rob Kester and a company called Make Happy both of whom I shared an office with (and still do) in London.

2013: HighQ.com

Thanks to my network, I began collaborating with other designers, developers, and project managers on projects. HighQ was a large, feature-rich website requiring a strong front-end with responsive design. I worked as the front-end developer alongside a back-end/devops ex-colleague. This was one of the more advanced sites I’d tackled, with extensive CSS, PHP, WordPress, and UX work—showcasing what was possible with web advancements.

2014:  ONE.org

With a friend former colleague Felix Cohen, I pitched for the ONE.org website rebuild for the global advocacy organisation founded by Bono. We won, marking the start of a 10-year collaboration with ONE’s brilliant digital team on countless campaigns and microsites. Built on WordPress, ONE.org allowed the team to create and manage feature rich pages via WordPress, with campaign support through ActionKit, a powerful tool for advocacy campaigns. Serving over a million users annually, this was a significant project for me.

2015:  Access Aspiration

Another WordPress project (a pattern develops) Access Aspiration connected disadvantaged young people with work experience opportunities. Working with a designer friend, I helped build a website for the organisation, even visiting 11 Downing Street with some of the young people involved in the project.

2016: Andiamo

I collaborated with Andiamo’s founders, Naveed Parvez and Lee Provoost, along with co-founder Samiya Parvez (the first two former colleagues from Headshift), on an innovative project revolutionising the orthotics industry. Andiamo leveraged cutting-edge technologies like 3D printing and scanning to transform healthcare processes. Their mission was to reduce pain, frustration, and inefficiencies in orthotic care, creating a more empathetic and patient-centered experience that ultimately delivered better outcomes for those in need.

2017:  Redmonk

I partnered with Redmonk, a well-known tech industry analyst firm, to build their website and support their writing and events, including Monkigras. 

2018:  Wikitribune

A unique opportunity to work with Jimmy Wales, founder of Wikipedia, on Wikitribune, a crowd-sourced news website where users and journalists collaborated. I used WordPress to quickly bring the platform to life. Working alongside Jimmy was inspiring; he’s a lovely, brilliant, committed advocate for a free web.

2019: Public Digital 

Founded by former GDS (Government Digital Services) people, Public Digital approached me to build an early iteration of their website, bringing the ethos of GDS digital principles to large businesses, governments and institutions.

2020:  RNID

Working with RNID (a national deaf and hearing loss charity), I collaborated with their content team to build a new website. COVID-19 forced us to accelerate the launch to provide critical information, especially for the deaf and people with hearing loss, who faced unique challenges. Using GOV.UK frontend components allowed us to prototype and release features quickly, in a truly agile process.

2021: Tropical Isles

A pro-bono project, I collaborated with my wife Nell Greenhill, who provided the designs, to build a site for Tropical Isles, a charity that supports children and young people through carnival arts.

2022: policefundingdatabase.org

Working with Durable Digital (founded by a one of my oldest friends Shane Marsden), I worked on a project for the Legal Defense Fund to create a really important site that provided a searchable database on police funding and equipment transfers across the U.S. Built on Umbraco, for once a shift away from WordPress.

2023: ONE.org

A career highlight, this was a major rebuild of the ONE.org core site, a project evolving from the original 2014 theme I rather stupidly named “one_2014.” With over a decade of WordPress experience, I created a site that was accessible, fast, SEO-optimised, and user and editor-friendly.

2024: Chancery Lane

Working with the Chancery Lane Project, an organisation dedicated to reducing emissions through legal reform, I collaborated with Felix Cohen to deliver a fast, accessible website rooted in solid UX principles. We relied on GOV.UK frontend components to build efficient forms and interfaces, creating a user-focused experience.

Yeah, I know it’s 26.

Reviving a Legend: Rebuilding the Donnie Darko Website from 2001

The Tangent Universe collapsed 8867 days, 20 hours, 40 minutes and 28 seconds ago .proceed .

I decided to rebuild a defunct 23 year old website. 2001’s Donniedarko.com.

Behold: donniedarkowebsite.com

It was utter madness. It was utter joy. I don’t know why.

Think this might be the first time I needed to include a Table of Contents on a post.

Table of Contents

  1. But seriously…why?
  2. Ruffle.rs and the Revival of the Game
  3. Resources and Assistance
  4. User Journey and Experience
  5. Missing parts and notes

But seriously…why?

I do know why, it’s a stone cold classic. I’ve always loved this website. Remember, this was built in 2001(!) when websites generally looked like this. We were just starting to use CSS and Semantic HTML to produce more interesting websites outside of the contraints of table based layouts and hacks. But truthfully, back then, if you wanted to build a unique experience for users, you would use Flash. Flash is obviously now very dead, after many security issues and Steve Jobs declaring it would never be allowed onto the iPhone in 2007.

At the time, this site was just so impressive and entered internet legend. Built by the agency Hi-ReS! and launched in October 2001, it totally eschewed the general approach to building websites. It was sprawling, narrative-driven, immersive and brilliant. There wasn’t really any formal navigation; you progressed through the site through exploration. It just felt so novel. And it really isn’t something we’ve seen since. User experience design, accessibility, formal ‘design’ methodologies, design thinking, development convention, and the sheer weight of user expectation have led (in many ways rightly) to something like this becoming impossible to imagine being built today. The original creator is an award winning Fine Artist & Creative Consultant – Alexandra Jugović, and I feel we don’t have enough of these sort of creatives in modern web development anymore, but that’s for another post.

Being a Flash site, it was semi-playable until recently via various archived versions of the site. The orignal agency that built it dissolved and their own archive (archive.hi-res.net) eventually disappeared from the web, the Internet Archive was the only place this site could be conceivable accessed. However with Flash becoming obsolete, it was not possible to access this piece of internet history. I always dreamed of maybe rebuilding (restoring?) it, either by reverse engineering it or attempting to try something in vanilla HTML/JS/CSS, which would have been a huge undertaking and probably nothing compared to the artistry of the original.

Step up Ruffle.rs, a Flash Player emulator built in the Rust programming language. Well, well, well. Maybe game on?

The Internet Archive has Ruffle.js enabled which is awesome, so in theory the game would be totally playable, but not all the pages were archived in the same snapshot and also not all the sections were totally archived….so game off. Or was it?

And thus the epic journey begins…


Ruffle.rs and the Revival of the Game

Playability Through the Internet Archive

  • Internet Archive: The game was playable again thanks to its availability on the Internet Archive having archived it in the first place and now Ruffle.rs.
  • Archival Inconsistencies: Unfortunately, the game often got stuck after the initial menu or just after the first section, where the next step didn’t existing within the same snapshot. This varied depending on the site version or the specific archive capture accessed.
  • Dispersed Archives: Many game pages were archived, but they were scattered across different parts of the archive, requiring direct access to certain pages to progress through the game. Meaning the game was effectively split across time periods, which was rather apt considering the subject matter and the site architecture.

Digital Archaeology

  • Archived List of Pages and Files: A pretty comprehensive list of all the pages and files that were archived can be found here and some from the original site.
  • Guide to the Site: An archived guide to the site was invaluable to piece together the various part of the game.
  • Creator’s Showcase: Alexandra Jugovic, the site’s creator, showcases the original site and much user journey on her website reel again invaluable in trying to solve this puzzle.
  • Building a Sitemap: Utilizing these resources, along with 404 errors indicated in the console and network tab, helped in constructing a sitemap of the original site.
  • Reddit Insights: Reddit discussions provided valuable insights and interpretations of the site’s text, contributing significantly to the reconstruction process.

Reconstruction and Archival Layers

  • Multi-Layered Archive: The current version is an archive of an archive of an archive, originating from donniedarko.com and later archive.hi-res.net.
  • Lost Elements: Unfortunately, some parts, particularly a few SWF files that I think might have been streamed in the original site and as such were not archived and so seemingly lost forever. These include files from Level 2 (street.swf, love.swf, fear.swf) and Level 3 (lamp.swf, phone.swf). These were the bits I had to reconstruct. It took some time.
  • Update – thanks to the wonder that is the internet – Martin, commented on this very blog and has got in contact and managed to get me the missing files!! I am working on Level 2 right now and Level three will follow!!

Resources and Assistance

Now, given the missing parts (update: this is mostly deprecated now the missing parts have been very kindly sent to me) I needed to basically reconstruct Flash scenes in HTML, CSS, JS 😅😅😅. I’ve been using GitHub CoPilot for about a year now, and honestly there were some parts of this I could not have achieved without it. So using a combination of Ruffle.rs, 11ty, Alpine.js, 98.css, SVG noise filters, Tailwind (I know), AI, Photoshop, Lossless Cut and vanilla HTML, CSS, and JavaScript I hunkered down and started work.

Additional weird things were required like recording audio out of my laptop speaker from parts of the original Flash files to reuse in the reconstruction effort. Hand-copying text from screen-grabs into HTML and so on. It was utterly mad, but enjoyable.


User Journey

This is bonkers and amazing. Kudos to the original developers, to use redirects and the url structure as part of the game is just very cool. They even apparently set up loads of satellite sites to enhance the online experience (I think sadly lost). Just awesome.

I also rebuilt the archived guide to the game as well, to help my own development as well as a guide to anyone that might get stuck in the game.

Here I’ve attempted to write up the user journey, behold.

Intro

  1. Intro:
    • Opens intro.html, which loads several swfs: intro.swf, clouds.swf, book.swf, and menu.swf
    • Option to skip to Level 1, else continue to full intro

Level 1

  1. Main Menu
  • Menu is displayed (loads menu.swf).
  • User clicks on Level 1 is active
  1. News article pop-up:

    • Pop-up is displayed – news/pop1.html, which in turn loads news/newspaper4.htm (loads top.swf & side.swf).
    • The section is closed the next part of the game is loaded.
  2. News article pop-up:

    • Pop-up is displayed – news/pop2.html, which in turn loads news/newspaper3.htm (loads top.swf & side.swf).
    • Similar to the previous step, once closed the next part of the game is loaded.
  3. The Tangent Universe Is Unstable (Part 1):

    • Opens the/tangent/index.html, which loads smurf.swf.
  4. The Tangent Universe Is Unstable (Part 2):

    • Opens the/tangent/ universe/is_unstable.html, which loads philosophy.swf.
    • A series of SWFs are loaded in this order: dad.swf, donnie.swf, straight.swf, gran-donnie.swf.
    • Followed by thebook.swf.

Level 2

  1. Main Menu:

    • User opens menu.html, loading menu.swf, clouds.swf, and book.swf.
    • User clicks on Level 2 is active
  2. Level 2 Pop-up:

    • Pop-up is displayed pop/pop_level2.html, which loads pass2.swf.
  3. Loads Level 2:

    • Loads pop/close.html.
  4. Are you sleep golfing?:

    • Redirects to are/you/ sleep/golfing/index.html.
    • This page loads multiple SWFs: golf.swf, birds.swf, draw.swf, street.swf, love.swf and fear.swf.
  5. News article pop-up:

    • The user goes to news/pop3.html and then to news/newspaper2.htm.
  6. Mini games and puzzles

    • Love/Fear blackboard game / Question pop-up
    • Bug where the game does not progress, need to click through to sparkle/motion/index.html
  7. Sparkle Motion:

    • Game progresses to sparkle/motion/index.html, which loads phase2_end.swf.

Level 3

  1. Main Menu:

    • User opens menu.html again, loading the same set of SWFs as before.
    • User clicks on Level 3 is active
  2. Level 3 Pop-up:

    • Pop-up is displayed pop/pop_level3.html, loading pass3.swf.
  3. Loads Level 3:

    • Visits pop/close.html.
  4. From the sky:

    • Redirects to from/the/sky/index.html, which loads trampolin.swf, phone.swf and lamp.swf.
  5. Pop-up warning:

    • Loads FAA disclaimer from from/the/sky/transcript.html
    • Pop-up is displayed news/pop6.html.
    • When dismissed a new one displays news/newspaper1.htm which also links through to news/newspaper6.htm.
  6. Transcript:

    • Loads FAA transcript from from/the/sky/phone.html
    • End of the game

Other notes

  • Desktop Recommended for Optimal Experience
  • Keyboard Input: This application is best experienced on a desktop due to its reliance on keyboard input. Although I have tried to implement a mobile keyboard for this some parts require direct keyboard access, although the flash files can’t seem to detect these.
  • Known issues:
  • Occasionally, new tabs may not function properly and the game can’t be progressed. If this occurs, it’s recommended to return to the main menu and restart the process. Or make sure only one tab is open. Or copy the current url in to a new window and try again.
  • Also you know this is Flash, In 2024. So there’s that.

Changelog

July 2024

Made git repo public: https://github.com/dogwonder/donniedarkowebsite.com.git

June 2024

Bug fixing

  • Thanks to some user testing from Martin we have manage to fix a few bugs (even a couple that we think were present on the original game!)
  • Specifically there was issue with new windows opening incorrectly and blocking the progression of the game on two parts of the game; /from/the/sky/ and /are/you/sleep/golfing/. These now replicate a similar function to linker.swf, which was a red cross on the original game, maybe to work around the same bug? Any way, these interstitial pages allow for a new tab to be opened which fixes the issue (although means more open tabs as the game progresses)
  • Additionally there was a weird cursor bug on the/tangent/universe/is_unstable whereby if the cursor was moved over a section of the screen, the Philosophy of Time book wouldn’t load (book.swf). I’ve done a bit of a messy hack which disables the cursor until this movie is fully loaded.
  • Added a few fake click events so if the game bugs out progression is okay
  • Fixed the SWF quality to high for all users
  • Microsite for Cunning Visions Inc. reconstructed with 404 page /CV/index.html and /CV/404.html
  • Various styling improvements

May 2024

Missing levels found!

  • After a comment on this blog I’ve been able to re-construct the original Level 2 with the missing files, street.swf, love.swf, fear.swf and license.swf, thanks Martin!
  • Added the missing SWF files for Levels 2 and 3 – via Martins archive
  • Level 2 with previously missing files reconstructed including full Love/Fear mini game – /are/you/sleep/golfing/ (street.swf, love.swf, fear.swf)
  • Level 3 with previously missing files reconstructed including full audio for the last section from/the/sky/(lamp.swf, phone.swf)
  • Previously reconstructed parts moved to an archive, as now these are deprecated in place of the originals (Level 2 and Level 3 ).
  • Reddit post about this redux from the r/donniedarko subreddit

April 2024

Content reconstruction updates:

  • Missing sections: Some sections have been reconstructed in HTML/CSS/JavaScript to replace missing SWF files. The application now redirects to alternative content when attempting to access these files.
  • For instance, when /are/you/sleep/golfing/love.swf is requested, it will now redirect to /are/you/sleep/golfing/missing/intro.html.

Specific level updates:

  • Level 2 – Missing section:
  • Problem: The original SWF files for this section were not retrievable.
  • Solution: A reconstructed version has been implemented.
  • Navigation: Upon completing this segment, the game should automatically progress to the new content. If it does not click here to continue.
  • Level 3 – Missing section:
  • Problem: The original SWF files for this section were also unavailable.
  • Solution: This segment has been similarly rebuilt.
  • Navigation: After finishing this part of the game click here to proceed.

20 years!

…since this blog was created.

I feel both quite happy and somewhat old about that. I’ve probably not always given it the attention it deserves, but it has been a nice constant throughout the last two decades—a place to call home.

I’ve likely done more redesigns than blog posts, but that’s one of the great things about having your own space: you can experiment with things, try new ideas out without having to answer to anyone but yourself. It’s really helped my professional development, being able to experiment.

This site started back in 2004 on WordPress version 1.0.1, and back then, it really was just blogging software. WordPress also recently celebrated its 20th birthday and has evolved significantly since then. Over the years, I have increasingly used WordPress in my professional career to build larger and larger sites, to the point where it is now the basis of my own business – Dogwonder Ltd.

In a rather self-aggrandising way, this blog started with a quote from a French philosopher (we do tend to think highly of ourselves in our 20s). So I figured I might as well include one here.

“The futility of everything that comes to us from the media is the inescapable consequence of the absolute inability of that particular stage to remain silent. Music, commercial breaks, news flashes, adverts, news broadcasts, movies, presenters—there is no alternative but to fill the screen; otherwise there would be an irremediable void. We are back in the Byzantine situation, where idolatry calls on a plethora of images to conceal from itself the fact that God no longer exists. That’s why the slightest technical hitch, the slightest slip on the part of a presenter becomes so exciting, for it reveals the depth of the emptiness squinting out at us through this little window.”

Jean Baudrillard

And some old designs of this blog going back through the years

Do you believe in time travel?

The Tangent Universe collapsed 8867 days, 20 hours, 40 minutes and 28 seconds ago .proceed .

2026 2025 2024 2023 2022 2021 2020 2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004