Year: 2024

Fordism with a Toyota badge

est.

The Assembly Line of Agile Development

This is more of an observation rather than an attempt to reach any definitive conclusion. It’s just something I’ve noticed over the past decade or so in the web development landscape.

The Agile Manifesto consists of values and principles agreed upon by a group of 17 software practitioners in 2001.

First, let’s revisit the core values:

  • Individuals and interactions over processes and tools
  • Working software over comprehensive documentation
  • Customer collaboration over contract negotiation
  • Responding to change over following a plan

In many ways, much of the modern development landscape seems to align with these core values. Good job, team—end of post….

…..Wait, let’s take a quick look at the Twelve Principles of Agile Software, listed on page 2:

  • Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.
  • Welcome changing requirements, even late in development. Agile processes harness change for the customer’s competitive advantage.
  • Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.
  • Business people and developers must work together daily throughout the project.
  • Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.
  • The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.
  • Working software is the primary measure of progress.
  • Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.
  • Continuous attention to technical excellence and good design enhances agility.
  • Simplicity–the art of maximizing the amount of work not done–is essential.
  • The best architectures, requirements, and designs emerge from self-organizing teams.
  • At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

I would say this is where we start to see some cracks developing. One takeaway I have from this is that the entire ‘working together’ aspect seems to have gone AWOL.

Business people and developers
Development team…face-to-face conversation
Emerge from self-organizing teams

Over the years, while working on many projects for a variety of clients, I’ve seen how many of the core principles from the Agile Manifesto have been gradually put through their own production line, resulting in something more akin to Homer’s car—somewhat un-agile.

Homer's car from The Simpsons episode 'The Car Built for Homer'

Back in the late ’00s, I was regularly part of multi-disciplinary teams delivering software—designers, developers, consultants, project managers. Often, these roles blended together, such as in the case of responsive design, which was often delivered by developers rather than designers. I would even run workshops directly with users. I really wanted to deliver the software for users as I knew directly what they were trying to achieve. It seemed to work well.

However, something seemed to change in the early to mid-2010s: Agile at Scale. Suddenly, Kanban boards were being gamified, with points, velocity, fixed sprints, quality assurance, and go-live schedules. And then there was…Jira (shudder). On some projects, QA was only concerned with how closely the web page matched the visuals (with Figma and Sketch trying their damnedest to drag us back to Photoshop slicing). I would regularly spend hours explaining why the line breaks were different on a phone than on the 1920px layout. I thought we had moved on, I was wrong.

Increasingly, I was no longer involved in any discussions about core user goals, or even exposed to them. It was all about delivering layouts based on designs. I might get a glimpse of a KPI, but only if it involved applying a Google Tag Manager trigger. My job became moving a ticket along a board from the Sprint 𝑥 column to the QA column. Further, because development wasn’t involved in the early discussions, accessibility and performance were often dropped entirely (or moved to Sprint 𝑥-1). So much for continuous attention to technical excellence and good design enhancing agility.

Now, there is certainly some cyclicism (and quite possibly cynicism) here. Some members of the design community did not like losing control over the final look, and I get that. Project managers were pushed and pushed on delivery, and I understand that. Clients wanted a clearer idea of cost and fixed deliverables, and I get that too. There was always likely to be some pushback, but it is disheartening nonetheless.

I also have a feeling that the rise of the Front-end Engineer, React, and Developer Experience (DX) played both a role in and a response to the development and re-siloing of software development. More powerful design tools, such as Figma and Sketch, allowed for seemingly production-ready pages to be presented directly to clients, bypassing the hot mess that is working software. Covid probably had quite an impact as well.

It’s important to caveat this by saying that not every project followed this trend. Many of the best (and successful) projects I worked on included developers in the entire process or at least bringing us along for the journey, allowing us to contribute to the project as a whole and even contribute to solutions that enabled users to achieve their goals. But this became increasingly rare.

Obviously, as the years go by, these values and principles should evolve. Face-to-face conversation, for example, is something that can and should now be done digitally. The same applies to how we engage with users.

Many of the dragons we fought early on resulted in better, cheaper, more robust, faster, responsive and more accessible software. It feels like we are unlearning important lessons.

Taps the sign:

  • Jira is not Kanban
  • Figma is not the web
  • DX isn’t UX
  • Client sign-off is not the finished product

In an age where AI is barreling towards us, it is important to revisit these core values and principles, as they can help us navigate the rapid changes ahead. Rather than transforming the production line into a fully automated one, we should remember that individuals and interactions, continuous improvement, and responding to change remain valuable guiding principles—even as we approach 25 years since they were first manifested.

Silver Jubilee 

est.

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.

A Dada of Web Design

est.

I’ve seen things you people wouldn’t believe. Tailwinds off of a million bootstrapped hero sections. I’ve watched oversized type fade into hero sections. All those moments will be lost in time, like tears in rain. Time to die.

The Wrecking Crew

As with many art movements, Dada was a response to contemporary thought and practice. Many Dadaists believed that the reason, logic, and aestheticism of bourgeois capitalist society had led people into war. They therefore embarked on a form of anti-art, elevating everyday objects, like urinals, as works of art. They repurposed existing works and spearheaded new mediums such as collage and photomontage. Live performances were used to create unique, one-off art pieces that existed only in time and space. They employed a range of mediums and everyday objects, transforming concepts of how art should be made.

In doing so, they created a new form of art—one that critiqued the system and ridiculed itself. And the art world embraced it, even though it was mocking the art world.

We need more Dadaism.

Enter the Dragon AI

Obviously, there are many concerns about AI generative art in general, particularly regarding the consumption of art and creative works without permission or remuneration, and using that training data on existing works to enable people to create new ones for free, leaving the original artist with precisely £0.00.

One artist quoted in The Octrane Render:

“I don’t have a problem using AI in art. The problem is, everyone who’s trying to make money on AI at the moment is a horrible tech bro who has no respect for anyone”.1

The ethics of all this is out of scope for this post, however whatever one’s thoughts, AI is here. It’s eaten all the web and it’s regurgitating back out content in increasing volumes.

Web Design is also something that stands to suffer at the hands of AI (Does AI have hands? Do androids dream of electric sheep?). And let’s be frank, we are partly to blame, given its ability to easily create web designs. Web Design, in my humble opinion, has become predictable, and as such, is ripe for the imitation machine to imitate. Bootstrap and Tailwind, to name a couple of the biggest UI trends of the last decade or so, have created a kind of “house style” for Web Design. We can almost recite it in our sleep:

Navigation: Home, Who We Are, Contact, Blog —— Call to Action (CTA)

Layout: Header | Hero section 70% height with background image and 60% semi-opaque layer and chunky mission statement | Text block with right-aligned (or left!) image | Pricing table | Text block with left-aligned (or right!) image | Logos grid | Testimonial | Mega footer

Rinse, repeat, clone.

In fact whilst proof reading this post, I decided to see what ChatGPT would output for a fictional website called Dogwonder’s Blooms — a marketing site for a florist. I also got Dall-E to provide a few images as well (had to prompt it a little to get the right vibe I was looking for). Here is what it came up with:

AI generated website called Dogwonder's Blooms
The full transcript is here (PDF), and the hallucinated website in full is here.

These patterns are so ubiquitous we barely think of it as unusual, but it is. Why does a website need to be like this? In the early days, we had a Cambrian explosion of design styles—Geocities, Flash sites, CSS Zen Garden. What happened? (cough…Taylorism of tech production…cough.) Now, don’t get me wrong, there are many thousands of lovely websites, but where is the weird, the different, the unusual (or more to the point why is there not more)?

Yes, there is a side argument that the UX innovations of the late 2000s and early 2010s created some excellent design patterns and usability flows. And user recognition for important tasks, such as filling out a government form, should not be underappreciated (thank you, Gov.uk). Furthermore, many accessibility improvements have also created a set of patterns and best practices for websites to follow. However, this does not have to come at the expense of experimentation. Consider an audio-only site with a text alternative, catering for 36 million blind people worldwide.

Beyond the ridicule, Dada was also playful. In Duchamp’s 1942 exhibition First Papers of Surrealism, visitors were faced with a ‘mile of string’ installation and the presence of a group of children who, at Duchamp’s instigation, bounced balls and played hopscotch among the viewers 2. Now, this was more towards the Surrealist stage of Art History, but it was pure Dada to insert live performance into exhibitions.

There is a potential universe of websites that can and could be more experimental, delightful, playful, even irreverent.

Given the predictability of many modern Web Design techniques, is it any wonder that AI can spit this stuff out so easily? Why pay an agency a ton of cash to come up with something that’s been done a million times? Sure, we didn’t give it permission to do so, but that appears somewhat like the horse has bolted and is now puking up rainbows.

Fist of Unicorn

How to fight, predictability — be unpredictable. Float like a butterfly, sting like a bee.

Embracing the themes that Dadaism eschewed, could Web Design do likewise? What would that even look like? First of all, what inspired me to write this blog post is that I recently resurrected one of my favourite sites: the Donnie Darko movie website from 2001. What struck me about that site is just how different it is and wonderfully so. Sure, being built with Flash lent it a more game-like interface, but given the very powerful tools we have at our disposal in CSS and HTML today, we can do a hell of a lot more than we could in 2001.

The navigation on the Donnie Darko website is something the user has to explore, much like gallery visitors did for one Dadaist exhibition 3 , where they were handed flashlights to explore the works. The user is not led; they lead. They discover—and it’s delightful.

We have the tools, the talent, and the opportunity to be truly innovative in how we design and build websites.

Be unpredictable, favour chance, spontaneity, and irreverence.

The journey begins by letting go of control, and becoming flexible.4

  1. Art Fights Back ↩︎
  2. Duchamp, Childhood, Work and Play ↩︎
  3. Exposition internationale du surréalisme of 1938 ↩︎
  4. A Dao of Web Design ↩︎
Marcel Duchamp, Fountain, 1917.
Reciting the Sound Poem "Karawane"
“Construction for Noble Ladies” (1919) by Kurt Schwitters
Detail of L.H.O.O.Q. (conceived in 1919) by Marcel Duchamp
Cut with a Kitchen Knife Dada through the Last Weimar Beer Belly Cultural Epoch of Germany
Duchamp's 'Mile of string’ installation

Update

Great long read over at the Guardian (Hidden traces of humanity: what AI images reveal about our world) that details the history of generative AI art. Something I did not deal with directly in this piece, artists will and are using AI as part of their process and humans are already deeply embedded in the process and outputs. As the Dadaists used photography, itself originally criticised in earlier art circles, many modern artists will use AI likewise. As the article ends:

“Each prompter sets off a huge chain of networked collaboration with artists and academics, clickworkers and random internet users, across time and space, engaging in one massive, multicentury, ongoing game of Eat Poop You Cat. Like it or not, all of us – whether pre-algorithmic image makers or self-described AI artists – will have to learn to play“

Update – Part Deux

Another great post on AI, LLMs and mundanity: https://www.programmablemutter.com/p/after-software-eats-the-world-what

“On average, they (LMS) create representations that tug in the direction of the dense masses at the center of culture, rather than towards the sparse fringe of weirdness and surprise scattered around the periphery.”

“This reflects a general problem with large models. They are much better at representing patterns that are common than patterns that are rare.”

“…a cluster of cultural strong attractors that increase conformity, and makes it much harder to find new directions and get them to stick”

Although I guess my argument is not just the output is centered but the input as well, but I digress. 

Solar Powered Raspberry Pi Web Server

est.

As one of my ever ballooning side projects I decided to make a Solar Powered Raspberry Pi to drive my Twitter archive (note this is not the solar powered one, the solar powered one is mostly down). Thought there was something slightly poetic about the idea of hosting a website on a finite/un predictable power supply somewhat like Twitter itself under its new management.

A solar powered web server

These are the components for the project

After a couple of failed attempts at soldering (I am so so bad at this) and a fried Raspberry Pi (electronics dont’ have an undo button). I managed to get the various connections working. At the time of writing I can charge a battery from the Solar power but not quite keep the PI running for more than a few hours. I’ll likely upgrade the battery to something that’s a little more chonky than 350mAH which according to ChatGPT1 would probably only power the Pi for 1.85 hours which is not ideal. Further it doesn’t seem to be able to power the Pi and charge the battery at the same time so again not quite what we want, but this is all fun and games so proof of concept is all I wanted right now.

I found this excellent post about how someone set up something similar to what I wanted and tl;dr it involves setting up Docker on top of Raspberry Pi OS Lite. 

#Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo usermod -aG docker ${USER}
groups ${USER}

#Docker compose
sudo apt-get install libffi-dev libssl-dev
sudo apt install python3-dev
sudo apt-get install -y python3 python3-pip
sudo pip3 install docker-compose 

#Enable 
sudo systemctl enable docker

#Run
sudo docker run hello-world

#Compose 
touch docker-compose.yaml 
docker compose -f docker-compose.yaml up -d
docker compose up -d

And this is the yaml file

version: "3.3"

services:
  web:
    image: joseluisq/static-web-server:latest
    container_name: web
    env_file: ./.settings.env
    ports:
      - 8080:80
    volumes:
      - ./web:/public:ro
    restart: unless-stopped
    command: -g info

  watchtower:
    image: containrrr/watchtower:latest
    container_name: watchtower
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    restart: unless-stopped

  cloudflared:
    image: cloudflare/cloudflared:latest
    container_name: cloudflared
    restart: unless-stopped
    network_mode: host
    command: tunnel --no-autoupdate run --token ${CF_WEB_TOKEN}
    depends_on:
      - web

So far so good. Once the static web server was setup I could just pull down my static files of my twitter archive, pop them in the server root (e.g. /public) as defined in `.settings.env`. We were now live on http://10.0.0.0:8080/ (or whatever your local IP is)

But then the magic, via the cloudflared container we are able to set up a Cloudflare tunnel to the device’s IP and connected to a domain on Cloudflare. Pop in ${CF_WEB_TOKEN} to your docker-compose.yaml file and we are away. A fully working server on a Pi Zero. Amazing.

As I said, this is not properly working as a Solar powered Pi, but it’s a relatively mobile web server and that’s pretty awesome.

  1. Your milage and hallucinations may vary ↩︎

Reviving a Legend: Rebuilding the Donnie Darko Website from 2001

est.
The Tangent Universe collapsed 8857 days, 23 hours, 23 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.

Screengrab from game
Screengrab from game
Screengrab from game
Screengrab from game

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.

Announcing the Super Sunday Sutton Service

est.

A few years ago was on a Train into Surrey and this amazing train driver was doing the announcements. And well they were just superb. Read or listen – your choice, but please enjoy.

Train line showing all the stops these audio tracks cover

Bal-ham

Bal-ham, the gateway to the south. Please change in Bal-ham if you require the tube or stations via Crystal Palace or stations down via Norbury. If you are leaving the train, please do so from the right-hand side as the platform is on the right-hand side here at Bal-ham, the gateway to the south.

Mitcham Eastfields

Okay, ladies and gentlemen, shortly be arriving into magical Mitcham Eastfields, not to be compared with Westfield, which is a shopping centre. This is a train station, a very popular train station. If you are leaving the train here, don’t forget to take yourself with you when you leave the train. Eastfields, of Mitcham.


Mitcham Junction

Okay, ladies and gentlemen, the next station stop is the rather magnificent Mitcham Junction, with the junction that’s not here anymore. Please change here at Mitcham Junction if you require those half bus, half train things called trams that go to all local places like Wimbledon and Western Croydon. If you are leaving the train here, please note you need to be in the front seven coaches otherwise, you are not going to be able to get out of the train, you are just going to be looking at a brick wall or some grass. Please do make sure you are in the correct part of the train, the front seven coaches only here at Mitcham Junction. Why not leave the train here and play golf? It’s a marvellous hobby.


Hackbridge

Okay. Ladies and gentlemen, boys and girls, next station stop is for the heroes of Hackbridge. If you’re leaving the train here, once again, you need to be in the front seven coaches only. Otherwise, again, you’re not going to be able to get off the train. Just grass if you look out here and a road cone. If you are leaving the train here, please do mind the incredibly huge gap and step down from the train to the platform, especially if you are right at the front of the train. It’s big. Do not break your ankles. Watch your footings here at Hackbridge, front seven coaches only.


Carshalton

Okay, ladies and gentlemen, the next station stop is the more caring side of Carshalton, the one without the beaches. If you’re leaving the train here, make sure you have a jolly good afternoon.


Sutton

Okay. Ladies and gents, boys and girls, we will shortly be arriving into Sutton, with two T’s and an O, a Shopper’s Paradise. Change here at Sutton, with two T’s and an O, cross to Platform 4 if you want to go around towards Wallington, West Croydon, Norbury, and Crystal Palace. Remain on Platform 2 if you want to go around to the other side of Sutton for stations towards St. Helier and Wimbledon. If you are leaving the train here, please make sure you have everything with you, mind the gap, and the step down from the train to the platform. This is your super Sunday Sutton service to Deep East, Dorking.


Cheam

If you’ve done rather well and you’re living the dream, you probably live here. It’s charming, Cheam.


Ewell

All right, ladies and gentlemen, boys and girls, the next station on today’s service is the more executive side of Ewell, the Ewell in the East.

If you are leaving the train here, please make sure you are in the front eight coaches of the train, otherwise, you are going to be looking precariously over the road bridge down at the cars below. Scary stuff. Please make sure you are in the front eight coaches only, if you wish to alight here at Ewell East.

Keys to the Ferrari on standby.


Epsom

Boys and girls, mums and dads, friends, relatives, aunts and uncles, the next station on today’s service is exciting Epsom. If you are leaving the train here and you’re right at the very back, please do mind the gap and the step between the train and the platform. Please change here, cross the platform at number four, if you want to go around towards Worcester Park and Wimbledon. If you’re like myself, you are leaving the train here, please do make sure you have everything with you, and do have jolly good afternoon. Somebody else is going to drive you on now, down to deepest Dorking on your Super Sunday Sutton Service. This is exciting Epsom.

20 years!

est.

…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

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