TIL: Web 1.0 Hackdays are pretty great

I just got home from the Web 1.0 Conference run by Amber Case and Kyle Drake, and I had a blast. I got to spend 8 uninterrupted hours coding webpages all day which is something I honestly haven’t done in 7 or 8 years. It was incredibly fun and now I want to show off my day’s work.

Project One

I knew this conference was coming up all week and I’d been thinking about what old technologies I could use to build something for it. A couple days before the event I started thinking obessively about those big old table borders. I kept dreaming of oddly shaded trapezoids and how someone might make something creative out of them. I’ve spent the last 16 years doing everything possible in CSS and eschewing tables, so it’d be fun to return to the good old reliable <TABLE> and try and make art.

I showed up to the hackday portion today intending to do some experiments to see what I could come up with. I started playing with table borders and cell borders. Instead of using version control, I just kept saving new versions of the same files with new filenames, like how we all used to.

Eventually I figured out that table borders were limited but cell backgrounds would be more reliable layout-wise, and the next obvious idea was making pixel-based art in the form of a font. I started thinking how hard letters like K and R would be in pixels though, but then realized pixel fonts are a solved problem. The best among them is Jason Kottke’s Silkscreen, created around 1998 and turns out to be based on a a 5x5 pixel grid. I quickly figured out I could re-create the font pixel by pixel in a table.

I set out building each letter, about one per minute until I had all 26 I could use as includes to make any word I want. Using simple CSS I could resize them at will as well.

My next order of business was how to build words with them. As block-level elements, they don’t sit next to each other and I didn’t want to programmatically have to build giant wide tables, so I did the next best (and much easier) thing: Nested tables. Each letter is a table, and I could just wrap a table around them all to spell any words I wanted.

I spent hours relearning tags like VALIGN and reading basics of form elements because I completely forgot how to do things like build option/select drop downs from scratch. Things like jquery and bootstrap are great but tend to put so many layers between you and the underlying code that it’s easy to forget the basics and have your knowledge of it simply fade away from disuse.

Converting words submitted to a form into a generated font meant I needed some scripting support. Being a Web 1.0 conference, I decided to skip using node.js or jquery and instead went to the first scripting language I ever used: ColdFusion (yes it still exists).

After about five hours of hacking, I finished the Silkscreen Font Generator page that spits out 5x5 grid fonts in little tables, all processed by ColdFusion:

http://dotwebsite.website/silkscreen/

Here you can see how letterforms are built when I turn the borders on.

(The logo at the top of the page is rendered in tables as well, taking hundreds of lines of code)

Project 2

My second idea came the night before at a social hour for the conference introduction. I was brainstorming with a few people and we settled on ideas of what we could do with Medium.com. I started thinking about how Medium and their staff are obsessed with good design, but what would the site look like if it was first created in 1995?

I set out to find any RSS files served from Medium I could convert into HTML objects I could tweak. In the end, I could only find minimal RSS files served from Medium (oh how I wish you could tack /rss on any story to get it in that format) but found scraping sites that could convert the rest of what I needed.

I tweaked CSS to look like the good old days and found a 3D text logo site that hasn’t been updated since 1999. I grabbed the new Medium logo colors and made a logo more fitting of the era with the tool, and now you can see Medium as it might have looked in 1995. Go ahead and put any Medium username into the search box, then click on one of their recent posts.

http://dotwebsite.website/index.cfm

Here’s one of Ev Williams’ pieces on the (real) recent redesign, seen through the eye of fake 1995.

Here’s my own recent post about a day on a long bike tour.

Conclusion: that was fun as fuck

About 50 of us toiled away on web pages for a day, and the demo time at the end was the highlight. We all sat around a giant screen projecting our sites and in that supportive space everyone shared tons of hilarious swirling, spinning, falling animated gifs, small sites about whatever their creators were into, and little mini-games built in an afternoon. It truly felt like the old days and I had a great time doing it.

Thanks to Amber and Kyle for throwing it and everyone for showing up and bringing out their best. Not only do I hope to see more of these events in the future, I would urge anyone at a big fancy startup to maybe set aside one of those last Fridays before winter vacation and throw a good old fashioned Web 1.0 hackday where anyone (of any level of experience) can kick out some classic web pages together and show off their work at the end of the day.