First Website Build: A Retrospective

I've learned a few things from wrestling with this project, and figured I'd share my first impressions.

1. Developer Tools are your friends

I could have saved a lot of time figuring out which color codes go to which elements in CSS. Just open firefox, right-click on the thing you want to know about, select Inspect Element(Q). And it'll give you what you want to know without having to go through the painful process of looking it up with Vim and trying to match the element to the code by name. Also, I wouldn't need to go through trial and error changing each color to #F00 and seeing what turns red on the page. That was tedious, but instructive. I'm never doing it again.

2. Pick the pictures before you choose colors

If you pick the colors first, you have to go thorough a million pictures trying to find one that goes with your color scheme. Even then, it's unlikely you're going to find one that matches perfectly. But if you grab the pictures you want first, you can sample colors from the picture for the color scheme. Your picture and colors will compliment each other seemlessly and without the extra work of picking colors, finding an almost perfect picture hours later, then tweaking the colors to almost coordinate. Also, if you understand the hex numbers for color, it's fun and easy to create complimentary ones, cooler or warmer tones, inversions and many other fun activities.

3. There will be unknown complications

This project started simply: Get a website up and running that I can post about Software engineering and the 10,000 random other things I happen to know or have an opinion about. Make sure it has links to GitHub, e-mail, etc. Simple enough. I could have it up in two days.

There were complications.

I started this project building the HTML and doing some CSS from scratch. I had a plan for how it would look, but then a friend told me about Ghost. So I downloaded that, but when inspecting the code, I learned that it doesn't just use HTML, it uses Handlebars. Don't get me wrong Handlebars is both whimsically fun and useful, but it meant a detour to familiarize myself with it. Turns out for my purposes, I didn't really need to know it. So good for learning, bad for efficiency.

Using the command line, I downloaded NodeJS to make Ghost work. At some point I updated Node to an incompatible version, so I had to restore it to the recommended one. I was proud of myself for that. I'm so glad I spent time with the Raspberry Pi to learn the command line earlier. I couldn't have even done this project without knowing that.

Also knowing what to put into a search engine to get answers to my problems is an essential skill. I'm new to software development, so chances are very high any problem I face has already been encountered, solved, and someone's written a blog about it.

The CSS file was a beast. I wasn't expecting more than 1700 lines of code. I was expecting three or four colors for the scheme, but turns out it's more like 47. So I made a special file to keep track of all the colors and how I've changed them. That added time to invert those colors, tweak the colors, and make it all shiny and perfect. A lot of re-work there.

And pictures. I had to sort though a lot of personal pictures to find ones that would work. I also had to crop them so that they'd look the right way on the site. That took more time than I expected as well.

Finally, I won't even mention the kinds of things I slogged through on the road to registering a domain and actually deploying the thing.

Long story short, ALWAYS expect complications. Whatever you're trying to do, it will take longer than you think. Especially when this is your first build.