I vividly remember sitting in front of a work computer 49 days ago in a government building (by the way, I’m a web developer working in education, hi) when an idea struck me.

I’d been developing using a web framework called Bootstrap for a couple of months, and working with some of the bundled icons that come along with it in a web project. They look like this on the official site:

I was working on a truly awful Dell workstation, whose only redeeming quality was that it could connect to a governmental network.

Click. Wait. Click. Wait. Click.

It annoyed me, but it was one of those vague, undirected grrr moments that anyone who programs or develops knows well. I just wanted to work faster, dammit.

If I’m honest, this place is also kind of a bleak office, bedecked in governmental blandness. I wanted to put something cool on the wall that looked nice.

If it could also help me with my work, that’s a double-win.

I had a look around. I googled “bootstrap cheat sheet” and all I found was an ugly poster from an older version of Bootstrap. It wasn’t even of the icons. Bummer.

I looked at the official documentation’s Github site. I looked at other web developer forums, and saw people with the same gripe.

The date was December 15 — two weeks out from Christmas. I was about to go on holiday.

Fuck it, I’m making a prototype.

Two days later

This landed in my inbox:

I remembered that Squarespace (lovely occasional hosts of our podcast) have an e-commerce backend that, ’till now, was off-limits to Aussies because we couldn’t use Stripe.

I had access to Squarespace so I could fiddle around and see the features for myself.

At this point, a few squeaky cogs in my head finally clicked together.

I had Squarespace, and I had Stripe.

I have a subscription to Creative Cloud, so I have a way to make a poster.

All I needed was a poster printer.

My first thought: Holy crap, could I actually sell this?

I’m no suit-and-tie, but I think this is what’s known as a gap in the market. I thought to myself, “is it worth a few weeks of time & effort to find out?”

For me, the answer to that question was yes.

Week 1

Quickly, I realised that a poster wasn’t enough. What I wanted—what I really, truly wanted as a developer—was two things; a poster that’s pretty and useful at a glance, but a smarter digital version of that poster too.

The digital version would write the code for me. Have you ever used bitly the website? It copies a link directly into your clipboard, and I wanted the same thing for this cheat sheet. Then all I’d have to do is paste. Much time. So save.

I started looking around for a solution to this, and it didn’t take too long; GitHub were using one themselves. The open-source project is called ZeroClipboard, that allows you to do exactly what I wanted.

Jackpot.

So, I made my first commit to my own repository on Github on December 19.

Four days later, I worked out how Github actually works, and put the right code in the right repository.

Yeah, this was going to be a real learning process.

At the same time, I also made an A0-sized prototype of the poster in Illustrator CC, and got it printed at Officeworks for $8.95.

There were lots of things wrong with this version (names, sizing, the icons were blown up wrong) but I hung it on the wall and looked at it often enough that I thought, “yeah, there’s something in this.”

Running tally of costs: $8.95

Weeks 2-3

I did two things I remember distinctly during the holiday break. I watched Ashes cricket, and I wrote code.

Setting up the online store part was pretty simple. For me, that was the easy part. I bought a domain at Hover (bootstrapcheatsheets.com) for $14 and I pointed my Squarespace account there.

Then, I bought another domain (bootstrapcheatsheet.com) for another $14 because I mistyped the first one so often.

Note to self: never buy a domain that can mistakenly be pluralised

The hardest part of this process was writing a whole mess of HTML, CSS & Javascript, finding a fundamental problem with my approach, forcing me to tear it all up and start again. I did this almost daily.

Here’s a the #1 problem with dealing in an icon library of 200. Unless you make your approach very modular for EVERYTHING, every little mistake cascades into hours of work.

Need to re-align an icon? Nope, you need to re-align 200 icons.

Need to change a piece of code? Nope, you need to adjust 200 pieces of code.

There were so many instances like this during my first few weeks. I’d be up until 2AM, changing 200 data-icon tags. I had pages and pages of checklists, because after doing a repetitive action so many times I was bound to make a mistake. It was awful.

I’m sure many of you seasoned web-devs are shaking your heads at this, but for me it was all-new.

If I had my time over, I could’ve done things much more simply, but I guess you don’t know until you’ve had that experience.

But at the end of week 3, I had a single basic digital cheat sheet (hosted on Github Pages) and a simple poster.

Plus, we won most of the cricket matches.

Running tally of costs: $35

Week 4

So I set up the store, and I put a few placeholder photos in there. I linked the cheat sheet, and then stepped back and took a look.

It looked bare. Empty. Not what I thought it would be.

It was at this point that I figured that I’d need at least 2 posters to take to an online store. A store with a single poster in it is just a little bit like a store with only one product… weird.

So then, what’s the next-most popular icon-based font? Well, that’s easy. It’s Font Awesome.

This is where I ran into more trouble. Font Awesome is 369 icons in total. It’s twice the size of the Bootstrap Glyphicons library. Not only would I have to make a new poster, but also a new digital cheat sheet.

It would nearly triple the number of icons I was working with (200 to around 569).

Crap.

Week 5-7

So at this point, I’d been working on this project every night for a couple of hours, and every weekend during the day.

I finished off both posters, introduced a variant colour for the Glyphicons poster (purple & grey), and got a bunch of quotes from printers.

I also did a test run of the posters at Officeworks, which cost me $64. They looked great, so I was confident I could do a proper run of them at a printer.

I also introduced a whole raft of features to the digital cheat sheets, including search, a comprehensive set of tutorials and examples on how to use them, and multi-purpose copy. I’ve re-worked those digital cheat sheets more times than I care to remember.

The multi-purpose copy bit (being able to copy a HTML tag, unicode or CSS rule) is the bit I’m the most proud of, and it made the cheat sheets not only more useful for me, but far more useful for some of my beta testers. It’s now truly a power-user cheat sheet that saves time, which is what it was always meant to be.

Running tally of costs: $99

Marketing

Here’s the point at which I step completely into new territory. I’m in education tech; I don’t really market things. So a lot of this was all-new to me. Here’s how the plan looks so far.

I took a guy called Noah Kagan’s advice and made a quant-based marketing spreadsheet. This will help me contact places that I think might dig the poster. My goal is to reach out to people who are web developers or who work in tech startups. Lots of them use Bootstrap or other icon fonts, and I think it makes a handsome addition to a co-working space or design studio.

I used a Google Keywords Planner to work out a bunch of keywords that are related to my site, and I’ll run a small amount of Adwords.

I’m doing a two-week trial of Adroll, to see if retargeting works at all.

I’m writing this post.

I also made a bunch of these, which was fun:

I don’t know if any of these will work yet, but I’ll definitely update here to let you know how/if any of it works.

Conclusion

49 days. That’s how long it took me in total.

You know, pondering the notion, I think that’s why I love the internet so much. You can just be some jackass like me, sitting in your house and banging away on a keyboard, but if you have an idea, and if you can persevere with it, there’s really no limit to what you can do.

I think if I had one piece of advice to anyone considering their own side thing, it’s not to give up. Even if you can only do 1/2 an hour of work a night on a little side project, it’s worth it.

So I’m opening the store today. I’d very much appreciate it if you could go check it out here: Bootstrap Cheat Sheets.

And I’m kinda scared, but it feels good.