A Lifetime of Nerdery

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Hi! This is my life story as it relates to my career in tech. I got to give it at ThatConference in August 2017. It was a 90-minute romp through events that, in looking back, had a meaningful impact on my life today.

Update: the video has been posted now!

These days, the web is a major part of my life. I’ve managed to make the web both a hobby and a career, and it’s stayed fun the entire time.

I get to write about it, help other people learn it, build tools for them to play with it, and talk about it in a variety of contexts.

I’m the co-founder and spend most of my time working on CodePen.
I also run CSS-Tricks, which is 10 years old this year.

I podcast about the web with my friend Dave Rupert at ShopTalk Show.

This isn’t a presentation specifically about white male privilege, but of course that is there. My life is full of privilege. I often think of how people rarely question what I do and how doors fling open for me. I’ve never had a co-worker write a manifesto questioning my ability to work in tech.

The rest of this is just a story of my life and I won’t be dwelling on this, I just wanted to touch on it as an overarching factor.

I was born at St. Mary’s hospital in Madison, Wisconsin.
I’m an only child. Fairly introverted. Amateur philosopher.
My step dad bought me my first computer ever: a Commodore 64. I’m sure lot of people around my age remember this beauty.
This was almost our exact setup. I don’t think I had awesome joysticks though.

The command LOAD "*",8,1 is permanently ingrained in my mind. All I knew about it is that it’s what you type into the command line after inserting a floppy disk to load whatever was on that disk. Of course, there is a great StackOverflow answer for it now.

We definitely had a disk case like that to hold our huge pile of 5 1/4″ floppies! Most of them were games. Turns out my step-dad Johhny answered a newspaper ad of some fella in Janesville, WI who would make copies of games for you for a few bucks. We went down there and hung out in his basement (as the story goes) to get all the games we got.

They were great games! Or at least had me hooked as a kid. Games like Choplifter, where you’d have to drop little bombs (tiny white squares) onto tanks that were trying to kill you while trying to land and rescue people.
Commando was super intense. Not only because it was hard, but because there was a lot going on all the time and the music was quite frantic.
My favorite was the Winter Olympics because there was so many sub-games, it wasn’t so intense, and you could slowly get better with patience and practice.
I consider the Commodore 64 such a big deal in my life not only for the obvious (early computer access) but because of this upgrade: the Commodore 128. My parents saw how into computers I was and got me a better one when it was possible. That was setting an early and positive precedent.
Come elementary school, we had these Apple ][‘s. It wasn’t a regular part of the curriculum (or so I remember) and probably would have been something I ignored, but because of my home experience with computers, I took to it right away. I like being the kid that knows stuff. You know, like a nerd.
Gaming was a big deal on the Apple too, with games like Odell Lake which was all about decision making.
I think there are people that “remember” this game (Oregon Trail) that never even played it.
We had LEGO LOGO in that class, which was a way to control motorized legos through code. That would be extremely cool even now. Take that, nodebots.
That’s my mom and stepdad. His name is Johnny Beyler.
He and his two brothers own a screen printing business in Madison, Wisconsin called Advertising Creations, as passed down from their father.
John has a son also named John (my stepbrother), who worked at the shop.
(Little) John was friends with a guy named Steve Raffel who also worked at the shop. This is Steve much later in life.
They lived together for a while, in a little white house on the East side of Madison.
I have one memory of going there as a kid, and seeing Steve’s computer screen, where he was working on some really amazing looking computer graphics. A 3D world you could move in and open and close castle gates.
Setting the time stage a bit, this was about the same time as DOOM was hitting shelves and having a massive impact on computer gaming.
Steve (and his brother Brian) went on to form Raven Software.
The produced little games like HERETIC. (!!)
And HEXEN. (!!)
They were ultimately purchased by Activision, but still work there and operate under the name Raven Software.
Looks like they still pay respect to those days.
These days they work on little games like Call of Duty. (!!)
And hire for roles like “Weapons Artist”. I’ll leave it up to you to decide if you want to finish reading this presentation or quit everything and apply for that job.
My next computer was a Macintosh Performa 636CD.
It was a serious machine to essentially buy for a kid. I’m sure they called it a family computer but they knew it would essentially be mine.
It had a video on it called “mold growing on bread” that I watched over and over. It’s weird to think games like DOOM existed, but it was still fascinating to be able to watch videos on a computer.
I was just headed into Verona Area High School.
Ultimately I got one of these bad boys for the computer, hitching it up to the information age.
One of the first things I did was call up “bulletin boards”, which were essentially phone numbers you could call with your modem and it would transmit a basic UI you could interact with.
You could play dumb little games with other people. Again, weird to think games like DOOM existed, but this was ALSO cutting edge in its own way.
Bulletin boards were definitely pre-world-wide-web, and so were services like GEnie that you dialed into and hooked you into a network. Imagine PAYING BY THE HOUR these days for a service.
It wasn’t long before AOL started covering the entire planet with AOL CD’s. I was in.
AOL was incentivized to keep you online a lot, as they also charged hourly after your monthly quota. They had online games! I immediately got into one called Gemstone III (now IV) that was an early MMORPG.
Gemstone was entirely a command line interface. A pretty sophisticated one, really, that accepted complex commands to do all kinds of things.
I couldn’t have possibly been more into it. It was roleplaying adventure at it’s finest.
I played somewhat actively for 10 years, and still pop in once in a while. Imagine that, a text-based MMORPG still actively running and maintained. That’s the power of charging monthly for something!
In high school, I took an elective programming class with Mr. Scott. Turbo Pascal was the flavor of the day.
Beyond the basics, one of the first projects I undertook was Conway’s Game of Life.
You have a grid. Cells in the grid are either on or off. Cycles (time) passes in the game and the cells live or die (on or off) based on a simple set of rules.
To this day, I collect interesting examples of the Game of Life on CodePen.
We didn’t have “the internet” in the computer labs. It wasn’t even really a thing yet. But all the computers were networked via AppleTalk. That allowed us to do stuff like print to a shared printer, but also opened some fun programming doors.
My next project was a version of Battleship. Hey, I was already comfortable working in grids! But this time, it was a turn-based game playable over AppleTalk. Playing over a network was incredible.
Another huge aspect of high school was getting into ceramic art.
Verona Area High School has an amazing ceramics program. Better than most colleges.
This is an obvious time to mention privilege. It’s very clear to me, looking back, how many opportunities were just laying around for me.
I basically followed my friend Jeff Campana into ceramics, who was engrossed by it from day one.
He was great at it back then, and of course is much better now (he’s made an entire life from being a professional artist).
Another good friend of mine is Jeff Penman. Jeff originally moved to town when his dad became an early partner at Raven Software!
Jeff’s dad Victor ultimately formed his own company, Evermore Entertainment.
Evermore had the unbelievable job of building the first-ever computer program for Dungeons & Dragons players: Core Rules. For us kids, it meant cool things like getting to go to GenCon with staff badges.
Evermore also meant we had an office for LAN parties. (Like a real office, not a garage.)
Games over a network, of course! Games like WarCraft.
And StarCraft. I watch competitive StarCraft videos to this day.
My least favorite kind of game is me vs. you.
Us vs. them is more fun. At least we can talk and strategize together then.
Everyone working together against a huge “problem” is my favorite type of “game”.
Even bar games like “find the difference” are more fun when everyone is huddled around the machine than it is competing against each other.
I’d rather work with you to build the tallest tower we can with Scrabble tiles than actually play Scrabble against you.
I went to the same college most of my friends went to. Because friends. I couldn’t get into a really good school anyway, as I’ve never been a good-grades type. I chose “Management Computer Systems” at the University of Wisconsin-Whitewater.

I joined the Green Party in college. They seemed like the closest match to how I was feeling at the time.
I founded Whitewater United for Peace. My main political feeling at the time was related to the absurdity of war, so I wanted to be mad about that, officially.
Jam bands and hippies were the official music and culture around what I was doing, and I was all into it. Interestingly enough, that world is super compatible with being a nerd. For example, trading and collecting live shows.
I started bartending in college, at, of course, the bar that was most aligned with being a hippie bar. All the peace-loving, music-loving, and as it turns out, art-loving people all hung out at The Brass Rail. I became the manager eventually.
Thinking back on that time, it was mostly very positive. I do remember the feeling establishing itself that I felt a bit broken though, not like everyone else. I didn’t want to go to barhopping or to the afterparty. It felt good, many years later, to understand all my introverted traits.
My way in was through bluegrass jams. By this time I had bought some instruments and was enamored with bluegrass. I’d go to bluegrass jams all around the area. They were always very welcoming, educational, and fun.
I decided to start throwing my own bluegrass jam at the Brass Rail.
People came to watch!
People came to play, too, and the regulars that clicked the best, including me, formed a little band. Here’s us, the Missing String Band.
We’d play anywhere, anytime, for anything.
For years we played a weekly gig at a brewery in Mt. Horeb called The Grumpy Troll.
Every year we’d round up as many friends as we good and head down to Graves Mountain in Virginia for camping and jamming good times.

The actual software training we got was pretty focused on Illustrator, Photoshop, and InDesign. I’m pretty grateful for that. Also, I appreciate that higher education is more concerned about concepts and learning how to learn and all that, and consider specific software training more of a trade school thing. But still, it was somewhat disappointing to not learn anything web related.

The closest we got was Director (Macromedia at the time).
All that keyframes stuff in Director was the interface for Flash as well, and Flash actually was for the web, so I was into Flash for that reason.
I was back in the land of Macs! All those formative years with Macs, all that high school time with Macs… it made having to switch to PCs for those Management Computer Systems major years rather painful. Coming back to graphic design classes, I was back in comfortable territory.

I wanted a web job, but I didn’t have the skill. My exposure and experience in the print industry lead me that direction after college. I worked for a electronics/furniture/appliances place as my first job out of college doing design and prepress work.
They had a website too lol. Whenever I asked to work on that, I was denied.
The main work was the production of a weekly flyer like this. It was a surprising amount of work every week to produce something so awful looking.
Thus began my first career in prepress. The only creativity involved was finding creative solutions to technical problems with design documents. It’s quite a nerdy job in it’s own way, and there were parts of it that I really enjoyed.
Design documents come to print shops in pretty rough shape. Even very good (and print-aware) designers send documents that need quite a bit of work before they actually hit a big press.
There are more than passing similarities between a prepress tech and being a CSS developer. I was converting designs into a final product, solving many problems along the way.
How are the edges handled? Are the colors defined correctly? How do the pages back up to each other? How is the image resolution? Spacing? Alignment?
The end of the line for prepress, in an offset lithography shop, is metal plates. One for each color or varnish or whatever.
Prepress was, in a way, rapidfire problem solving. Add that to already a lifetime of computer nerdy and computer problem solving as a hobby, and my confidence level at solving computer problems was starting to be pretty dang high.
I bounced around prepress jobs, but all the while I knew I wanted a web job. I was making websites on the side, for fun and to learn. Ultimately, my mom heard of a job opening at a small design shop in Madison. By some miracle (and their desperation), I got the job.
My first major job there was a website for a magician who really needed to sell tickets online. I was in no way qualified for that, but we got it done!
We had lots of clients though, and a lot of them were wanting to move to the web. This was very much in the heat of the “we need to get on the web!” period for companies.
We helped every single one of our clients. Even if we had no idea what we were doing at first.
I’ve always been attracted to the idea of side and passive income. I mowed the lawns at my apartment building for ten dollars a week. Of course, I would have rather been extracting money from the internet.
CSS-Tricks was born at this time. I was learning a lot of the web, and I learned even more by writing it down, as awful as that writing was in the early days.
I had been working at Chatman Design for a while, I was 27 years old, and I’d never lived outside of a 60 mile radius of Madison, Wisconsin. I didn’t love that. It was too comfortable.
My work hardly ever required direct client meetings. I needed to communicate with my boss and clients, but that all happened over chat and emails, so I forced the issue of working remotely.
I moved out to Portland, Oregon with just what would fit in my Saturn L200.
I really liked Portland, but I didn’t exactly carve out a life there. I remember trying to go to meetups for web and blogging stuff, and being so nervous I wouldn’t talk to anybody and just leave. The remote work part was easy though. I got plenty of work done.
After a bit less than 2 years, I had another friend in Chicago who needed a roommate, and I figured I’d try that.
I also wasn’t able to carve out a life in Chicago, despite at least some minor effort. It’s still a pet peeve of mind when people announce hate for an entire city. Cities are too complicated for that. One experience at one point in time in one part of a city can be bad (as was mine), but that doesn’t make the entire city bad.
I’d been working for years now professionally as a web designer, so my confidence in building for the web had grown.
That was a result of doing tons of work literally at work, but also maintaining doing web work as a hobby, so taking any chance I could to build a site for someone.
It’s very worth noting how empowing WordPress was for me this entire time. It was the only tool I used, but it was for about 90% of the work I did both personally and professionally. Especially if the site required functionality beyond what I knew I could write myself.
I even co-authored a book about WordPress, with Jeff Starr. There were a number of interesting things we did with it (lays flat! free updates forever!) but perhaps the most relevant is that we knew the power of writing. So before we released the book, we released a blog of the same name. That gave us the most powerful marketing tool we could have for the ultimate sale of the book.
I designed the cover it. Looking back now it looks like I was trying to channel Tim Chatman, my boss at Chatman Design.

I was living in Chicago, writing Digging into WordPress, working at Chatman Design, and building CSS-Tricks at this time.

Dan Denney invited speak at the first-ever Front End Design Conference, which was a wonderful honor and helped get the career ball rolling for me even more.

At Front End Design Conference, I met Kevin Hale (a fellow speaker) and also ended up meeting the rest of Team Wufoo at the afterparty.

They wanted to meet me, as I was already a very public superfan of Wufoo. I would write about it and praise how useful it was, particularly as a lone developer at a small agency with loads of sites.

Not long after meeting them, they offered me a job and I couldn’t get out of Chicago fast enough.

While Wufoo was a “remote” team, everyone lived in Tampa / St. Petersburg, and we got together once a week for a meeting.

Wufoo leveled up my abilities as designer and developer in big ways. This wasn’t just hacking things together until they worked and the client was happy. This was working with extremely talented web workers using modern tools and modern workflows.
Not only did I get to work on Wufoo the app itself, but I got to do industry research, marketing, blogging, and more public speaking.
Less than 2 years after starting at Wufoo, the founders decided to sell to SurveyMonkey. SurveyMonkey was based in Palo Alto, California, and they wanted us to all move out there, which we all did.
Palo Alto was a very different place! All the things you think about are probably true. Every restaurant and coffeeshop is full of nerds talking about VC. Electric cars everywhere. Perfect weather. Expensive.

SurveyMonkey is a great place. An app with a clear value proposition that really helps people. They take care of their employees well, have a gorgeous office, and a pretty good culture.

Still, it just wasn’t for me. I didn’t like be obliged to go into an office. I didn’t love my exact position and who I had to report to. I didn’t feel like I could enact any useful change there.

And so CodePen began! It began as a bit of a weekend project where I asked for help from Tim Sabat and Alex Vazquez, who I worked with both at Wufoo and Survey Monkey and who I had become good friends with.

The idea and scope behind CodePen quickly grew up. We had weekly meetings at The Old Pro. They had good wings.
After I left SurveyMonkey, there was a little panic that I wouldn’t have nearly as much money coming in. A problem, particularly in a city like Palo Alto, and during a time when we hadn’t even thought about ways for CodePen to make money. My solution was to double down on CSS-Tricks, trying to form it into more of a legit business. That meant revamping the website, and what better thing to record and talk about for a website about websites! Backers to the Kickstarter could watch that whole process. In the end, it wasn’t much of a money maker, but it literally did “kickstart” the business.
My system for showing demos on CSS-Tricks was pretty rudimentary. Essentially toss a .php file up on a server showing off the complete demo. PHP just so I could include a header and footer. You know, branding.
An early mockup of CodePen, before it was called CodePen. This kind of layout was pioneered by JSFiddle, and is clearly the nicest way to look at some code, particularly front end code that produces a visual demo.
As much as CodePen has grown up, the heart of it is still this same idea.
Although the homepage of it has much for focus on community. What is awesome on CodePen today? Just look at the homepage. That community aspect is everything to me.
People have profiles on CodePen that are, in sometimes a very literal sense, their portfolio.
Maybe a year into Working on CodePen, the three of us co-founders decided to take a real run at making CodePen a real business. We’re still at it! We’re definitely a real business, but we have a long way to go.

It’s not just us. All of these people made CodePen what it is.

Perhaps this is a bit weird, but it feels a bit like playing a game. One of those games that really drew me in. One that you’re playing with lots of other people, and all toward a common goal.

This is the community I was born to build.

Let’s wrap this up with some big fancy lessons.

Be a lifelong learner
Please try to foster community. They all need your help and protection.
There are no secrets to productivity.

It's amazing how much you can do in a day if you sit and do it.
The sercret to success is persistence.
Thing long term, it allows you to build trust.
It doesn't matter where you live.
It's probably good to be a bit uncomfortable. That means you care.
You're an artist. You're working on the most important medium there is today.

ok bye bye.