{"id":837,"date":"2025-06-25T15:28:10","date_gmt":"2025-06-25T15:28:10","guid":{"rendered":"https:\/\/echo.grabonic.com\/?p=837"},"modified":"2025-06-25T15:28:10","modified_gmt":"2025-06-25T15:28:10","slug":"my-25-year-career-in-web-design-through-the-eyes-of-the-wayback-machine-by-ka-wai-cheung-on-building-software-2","status":"publish","type":"post","link":"https:\/\/echo.grabonic.com\/?p=837","title":{"rendered":"My 25-Year Career in Web Design Through the Eyes of the Wayback Machine | by Ka Wai Cheung | On Building Software"},"content":{"rendered":"


\n<\/p>\n

\n

For more than 25 years, I\u2019ve designed in front of the screen. This idea \u2014 that you could move boulders with a few keystrokes, make tectonic shifts by the drag of a mouse, and exhibit your work to the rest of the awaiting world in an instant \u2014 was once a completely novel one.<\/p>\n

Weightlessness. <\/em>One of the miraculous properties of the web. A medium without the constraints of material cost, gravity, or the seasons. Experimentation encouraged, decisions impermanent.<\/p>\n

In the late 1990s, I was entering college in search of my future. My heart wanted to be an artist. My brain told me to grow up and be a scientist. And when this medium landed on the world like an alien spaceship, it seemed to come in peace and beckoned me to come inside.<\/p>\n

It could appease both of my inner voices\u2014and I wanted in.<\/p>\n

In high school, I designed with pencil, pens, paint, and paper. The first web designs I remember doing in college were also planned on paper \u2014 <\/em>sketches <\/em>on the left over sheets of quad-ruled notebooks I used for math courses, each square representing 20 pixels or so.<\/p>\n

Seems odd now, but at the time, it helped me envision how I would code up the big <\/p>\n that would hold the entire design like a jigsaw puzzle.<\/p>\n

A bit art. A bit science. The prefect elixir.<\/p>\n

I eventually found Photoshop. Discovered guides. Added layers to show rollover states. \u201cSliced up\u201d the design and transported the Lego-like pieces over to HTML. A little Javascript onmouseover<\/code> and onmouseout<\/code> and you had yourself something dynamic<\/em>.<\/p>\n

Then Flash entered the scene \u2014 the medium I and a small but vocal corner of the web design community fell in love with. The one that started the first real debate of the modern web: Flash or HTML?<\/em> Flash was electronic rave music to HTML\u2019s adult top-40s. And the more Jakob Nielsen vilified the Flash community (and, to be fair, any HTML designer not using a browser\u2019s default anchor link colors), the more we rebelled.<\/p>\n

Flash eventually lost out of course, but over time, I found a deep appreciation for HTML and CSS \u2014 especially as browsers could do so much more with it.<\/p>\n

There will always be a special place in my heart for web design \u2014 the old school kind<\/em>. Pre-responsive. When we were still figuring our way around the edges of the browser. The era that began with the waning days of Netscape and breathed a sigh of relief during the waning days of IE 6. When 1024 pixels was considered a long distance run across the screen. When opening up a new FLA or PSD marked the beginning of an infinite spectrum of possibilities.<\/p>\n

\n
\n
\n

I\u2019ve designed for the web for more than a quarter century and the web as I first remember it has changed \u2014 as it should. And as I<\/em> should, I can\u2019t help but get nostalgic.<\/p>\n

I can\u2019t help but occasionally long for the way it was \u2014 a simpler, more innocent, more playful period of the web when we admired what others were doing to push the medium well past the limits that the tools we were handed seemed to offer. I can\u2019t help but want to flip through the dusty albums of my own work.<\/p>\n

But what web designer keeps such digital artifacts? Not me.<\/p>\n

This brings me to one drawback of the web: its weightlessness. Ephemerality really. Creations on the web spawn and vanish. They can escape through the back entrances without anyone hearing the doors shut.<\/p>\n

So I went digging in the only place that might keep these artifacts intact, the Internet Archive\u2019s <\/strong>Wayback Machine<\/strong>, to see what can be salvaged.<\/p>\n

Maybe some of the good stuff is still there.<\/p>\n

Maybe I can dust it off and re-stage it.<\/p>\n

And maybe, I\u2019ll rediscover some things I\u2019d rather not have found.<\/p>\n

Here was my bounty.<\/p>\n

The very first time I saved a file accessible to the web was in my Introduction to C++<\/em> class as a freshman in college. We spent one class that quarter discussing HTML and how web pages worked.<\/p>\n

My first corner of the web is now a \u201csite that can\u2019t be reached\u201d: http:\/\/www.isp.nwu.edu\/~kawai.<\/p>\n

I remember saving an index.html<\/code> (or was it index.htm<\/code>) file to a directory on a computer at the north end of campus, rollerblading down the main road to the south end of campus, sitting at my dorm room desk, typing in the URL I had memorized, and seeing that very same page render on my laptop.<\/p>\n

Forget the World Wide Web \u2014 I was impressed the page made it across campus. It was nothing short of mind-blowing.<\/p>\n

I never did much with C++, but this one serendipitous moment hurdled me down the path of learning more about HTML, basic CSS, Photoshop, and even a little Javascript.<\/p>\n

In 1998, I had decided to use my college URL to create a \u201cforum for next generation web design\u201d called the Kiwi Site. I wanted to highlight sites that balanced design with content during a time when form typically got in the way of function.<\/p>\n

Like many of us did back then, I used \u201cwe\u201d in my copy to make the site seem like it was run by a team of professional designers<\/em>, not a college undergrad who still had his rollerblades on sitting in his dorm room.<\/p>\n

I even made a GIF award that I sent to random sites I admired at the time. And most folks actually added the GIF to their site. Because whenever you receive an award from a team of professional designers, <\/em>you better highlight that on your site, ya know?<\/p>\n<\/div>\n<\/div>\n

\n
\n
\n
\n
\n
\"\"<\/picture><\/div>\n<\/figure>\n
\n
\"\"<\/picture><\/div>\n<\/figure>\n
\n
\"\"<\/picture><\/div>
Screenshots from my very first \u201cdesigned\u201d web site including the coveted \u201cKiwi outta site! winner\u201d award.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

It was during this time that I also became a webmaster<\/em> for the website of the science program I was enrolled in at college. It was a work-study job. I think I made $10\/hour, which was a few dollars more than you could make swiping dorm cafeteria cards or reshelving books at the library.<\/p>\n

I spent more time being a webmaster than I did on my schoolwork, stumbling my way through Photoshop and reverse-engineering HTML through the magical \u201cView Source\u2026\u201d option on my browser.<\/p>\n

It reminded me of being a kid and leafing through BASIC code on the programs that came with the Apple IIc I grew up with. Or just taking apart any old toy.<\/p>\n

It was a digital kind of tinkering.<\/p>\n<\/div>\n<\/div>\n

\n
\n
\n
\n
\n
\"\"<\/picture><\/div>\n<\/figure>\n
\n
\"\"<\/picture><\/div>
A few iterations of the website for the Integrated Science Program. I was both a student of the program and its \u201cwebmaster\u201d<\/em>.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

It was also around 1999 when I found my first paid contract work. For some of my earliest clients, my deliverable was an emailed ZIP folder of files \u2014 HTML pages (with inline CSS) and images. Or, I\u2019d upload them for you if you had your FTP credentials on-hand. Sometimes I\u2019d redesign a logo too.<\/p>\n

My very first paid client was an engineering company named Geotrack<\/em>. I believe I found them through a pinned ad on a billboard at the lobby of my dorm hall. I emailed them, perhaps sent them a sample of what I was thinking, and they said yes.<\/p>\n

They paid me $20\/hour for my work. Double what I had been making as a webmaster and three times more than the standard work\/study pay for an odd job around campus. I was having fun and making money\u2014two things that I assumed were mutually exclusive when I was growing up.<\/p>\n

I managed to snag the homepage, still relatively intact.<\/p>\n

\n
\n
\"\"<\/picture><\/div>\n<\/div>
The nearly fully-intact homepage of my very first paid client, Geotrack.<\/figcaption><\/figure>\n

Some things I\u2019d like to forget:<\/p>\n

    \n
  • The curved border around the Geotrack logo \u2014 a staple of late \u201990s web design.<\/li>\n
  • The not-quite-right transition from the curve to the straight vertical border down the right side.<\/li>\n
  • The really poor fading technique I applied to the side images.<\/li>\n<\/ul>\n

    Then, through the grapevine of college connections (still years before The<\/em> Facebook<\/em> was created), I managed to land a gig designing the website for Student Solutions<\/em>, a college shipping and storage company started by a fraternity on campus.<\/p>\n

    You never forget the first time you get paid for doing something you love and in this case, it came in the form of a $700 handwritten check (which felt like $70,000) and a steak dinner.<\/p>\n

    What\u2019s left on the Wayback Machine is a skeleton of the original site.<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    I remember this site being very forest green with some tacky imagery around it.<\/figcaption><\/figure>\n

    A large number of sites that I launched to the world, particularly when I was freelancing between 1999 and 2006, look only partially the way I remember them looking.<\/p>\n

    But there\u2019s something poetic about seeing an old site you designed using the old table layout technique that\u2019s now littered with broken images, with backgrounds that aren\u2019t loading, with CSS hacks that don\u2019t quite do what they once did.<\/p>\n

    It has the feel of an abandoned house you once tended with love and care \u2014 now overcome with the affects of old age and neglect. The bones are still there.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n

    And while some Flash sites and cheeky Flash intros I designed still work with the help of the open source Flash player Ruffle, many aren\u2019t able to render at all.<\/p>\n

    I was pleasantly surprised to find that a few versions of my old portfolio site were largely intact.<\/p>\n

    The very first version is the most preserved and here\u2019s a link to it. Hopefully, it still works as you are reading this.<\/p>\n

    I forgot I had added sound effects to this puppy as well as some random audio clips of my 21-year-old-self talking about my creative process<\/em> and other self-absorbed stuff. Embarrassing little treasures!<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    I am 100% sure<\/strong> the \u201cClient Extranet\u201d form didn\u2019t submit anywhere \u2014 it was a facade to make me look like a professional web developer at the time.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    Collegeboxes<\/strong> (right) was one of my favorite interactive Flash projects, but unfortunately I couldn\u2019t find a workable version of it from the Internet Archive. A little screenshot within a screenshot will have to do.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    I was in downtown Chicago one evening in July 2001 taking pictures of city buildings with my brother\u2019s digital camera. I can\u2019t remember why I was there but I ended up using these pictures in the next version of my Flash-based portfolio.<\/p>\n

    Here\u2019s the link to V2. (Unfortunately, the dynamic content doesn\u2019t load and only the shell navigation remains).<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    Behold my magical design skills. I Photoshopped that \u201cPortfolio\u201d sign onto the side of the building. When you moused over the window panes, it would reveal more detail on a particular project. Cool\u2026.right?<\/figcaption><\/figure>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    Unfortunately, Wayback Machine did not cache the other SWF files that are supposed to be loaded when navigating to the \u201cAbout\u201d and \u201cContact\u201d pages.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    A sign of the times:<\/strong> Links to various charities shortly after the September 11th attacks<\/figcaption><\/figure>\n

    The next year, freshly laid off from my first (and only true) corporate programming job I\u2019ve ever had, I redesigned my portfolio once again, and once again in Flash. By then, even us Flash geeks were getting a little tired of the overly embellished 2Advanced Studios style of Flash sites.<\/p>\n

    Version 3 was more modular and restrained with subtler doses of Flash-iness. Maybe my way of saying I was ready to move on to building more functional, \u201cserious\u201d software.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    My final Flash portfolio circa 2002. Through it all, I really liked orange\u2026I guess.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    By the mid-2000s, I rekindled my love for pure HTML and CSS, and also had enough work to showcase where I didn\u2019t feel the need to overcompensate with the design of Project99 itself. My final two designs (2004 and 2006) focused more heavily on organizing text, line heights, paddings, and the like.<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    Post-Flash, grayscale phase, circa 2004. Maybe got sick of the orange?<\/figcaption><\/figure>\n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    Final design of my portfolio site, circa 2006<\/figcaption><\/figure>\n

    Around this time, I started to write on various web topics. I wanted to get my name out there so I emailed a few organizations and asked if I could write an article for them. Today, we\u2019d probably call this building your personal brand by writing guest posts with cross-links<\/em>.<\/p>\n

    A few of my earliest articles:<\/p>\n

    In 2006, I co-founded a web development business called We Are Mammoth<\/em>. During this time I found a love for the one-page website<\/strong>.<\/p>\n

    The first iteration of WAM\u2019s one pager was in Flash and involved some airbrushed tusks on us three partners. Embarrassing little treasures.<\/em><\/p>\n

    Unfortunately, what\u2019s left of the one-pager is just the top portion. The rest of the page was loaded through a few backend calls on a new Flash backend framework I developed called X2O but Wayback Machine wasn\u2019t able to cache those data calls. So, what we\u2019re left with is three lonely dudes and a very black screen.<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>\n<\/figure>\n

    My next iteration was a return to HTML. The vertical flag on the site mirroring the actual flag we had strung over our renovated warehouse turned home turned office in Chicago\u2019s Fulton Market.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    The home of We Are Mammoth, circa 2011<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    For the first five years, our company was a small and slowly evolving operation \u2014 we grew from about 2 to 7. But then our business grew significantly. By 2014, we grew to nearly 30 team members and built a design team.<\/p>\n

    My days of wearing the designer hat for the WAM website were over. I started focusing more on building and managing our development team, and building a new SaaS product called DoneDone. More on this in a bit.<\/p>\n

    I published my first book, The Developer\u2019s Code, for the Pragmatic Bookshelf in 2012. But it started with another one-page website of the entire original draft, complete with the ability to \u201cbookmark\u201d where you were at by clicking anywhere on the side margins of the page.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    A book, complete with a cover and table of contents, on one web page.<\/figcaption><\/figure>\n<\/div>\n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    Bookmarking by clicking on the margins. A page refresh would send you right back to where you left off.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    Here\u2019s the link to the original one-page web book:<\/p>\n

    https:\/\/web.archive.org\/web\/20110716072538\/http:\/\/www.thedeveloperscode.com:80\/<\/p>\n

    In 2012, after the book was reworked and published in print, I changed the website to a more traditional design with links to the publisher. I was a little sad to see my original web book go.<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    Redesigned site after The Developer\u2019s Code went to print<\/figcaption><\/figure>\n

    Years later, I wrote a book about naming things in programming which became another one-pager\u2014this one was done with chapter navigation that swaps the visibility of divs<\/code> and works well on mobile.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    Cover, flyout chapter menu, and page sample of \u201cNaming Things\u201d.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    DoneDone is a product I began building in 2008 and launched in April of 2009. It\u2019s been my proverbial \u201cbaby\u201d for 15 years.<\/p>\n

    I also designed and deployed its very first public website, and it\u2019s still fully intact!<\/p>\n

    My favorite part of this site is the copy. I spent a lot of time on it, noodling each word to get it to fit just right around the angled and cropped screenshots. It still reads well to me.<\/p>\n

    \n
    \n
    \"\"<\/picture><\/div>\n<\/div>
    Version 1 of DoneDone.com, launched in 2009.<\/figcaption><\/figure>\n

    DoneDone remained a side project for WAM for its first nine years. At no point did we employ more than three people on development (myself being one of them). But, our growing design team at WAM as well as a few wonderful freelancers, took over the design of the public site for its next several iterations.<\/p>\n

    Still DoneDone\u2019s been my labor of love and most of what I\u2019ve been contributing to the web since 2009.<\/p>\n

    Even after I went \u201cfull time\u201d on it in 2017, we kept DoneDone small. In fact, smaller. By 2020, our full-time staff became just two again. And in 2021, for the first time in over a decade, I got to redesign the public site myself again.<\/p>\n

    This time in Webflow using all the powers of modern responsive CSS.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    A few pages from the most recent version of my product, DoneDone.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    I don\u2019t design websites anymore. Not much anyways.<\/p>\n

    But every now and then I\u2019ll feel that itch to layout words on a screen. Noodle on line heights, letter spacing, padding, and margins. Pick a font. Feel that small thrill of throwing something up on the web.<\/p>\n

    My most recent itch produced my most recent iteration of my personal website. It\u2019s written as a memoir to my web career, because as a father of two and in my mid-forties, my energy for this stuff is only delivered in small spurts.<\/p>\n<\/div>\n<\/div>\n<\/div>\n

    \n
    \n
    \n

    Another thing I\u2019m experimenting with these days is to use what I\u2019ve learned from these raw programming materials to create art<\/em> on the web.<\/p>\n

    Recently, I\u2019ve recreated a couple of old baseball scoreboards with no images or scripts\u2014only raw HTML and CSS, bringing my career back full circle perhaps, to a time well before any of this existed. And also to a time where experimentation was the only way I knew how to get somewhere different.<\/p>\n<\/div>\n<\/div>\n

    \n
    \n
    \n
    \n
    \n
    \"\"<\/picture><\/div>\n<\/figure>\n
    \n
    \"\"<\/picture><\/div>
    How far can we go with what\u2019s available with raw HTML and CSS? I\u2019m trying to find out.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n

    I like the fact that the simple web is still here if you want it. You can still just<\/em> write a web page in a basic text editor, upload it somewhere, and have it be seen.<\/p>\n

    You can still make embarrassing little treasures whenever you please.<\/p>\n<\/div>\n<\/div>\n<\/div>\n