SpareType Code - index.php, style.css, production.min.js, code view, syntax highlighting

The Redesign: Part Two

Welcome to the second post about my recent redesign of SpareType. Part one covered the visuals, while this post will dive into how I changed my thinking and process. I’ll share a few key code snippets powering the new design in part three coming soon. For now, let’s talk about process.

Holy shit. I’ve been doing this all wrong.

Have you ever had that thought? It’s a tough real­iza­tion. I had that moment a few months ago. I was feel­ing like an old dog in my web design game. I knew of these things called Github, Grunt, and Sass but wasn’t tak­ing advan­tage of them. I hadn’t updated my skills or my process. My mindset also needed a reboot.

My first breakthrough moment was forgetting about a finished product. Coming from the print side of graphic design, I was still holding on to that idea of getting everything right before hitting the print button. I kept paralyzing myself with the list of things to do before I could release the redesign. But that’s not true for a website. If I don’t like the way comments show up today, I can update a file and they can look better tomorrow. A website can – and should be – in a constant state of improvement.

Make it more better.

The idea of constant improvement notched perfectly with the idea of version control. If I want to always be trying new things, I need a safety net to CMD-Z the things that don’t work out. I threw all my coding pride out the window and started with the Git basics. “I’m smart enough to figure it out,” had to take a seat while I dusted off the instruction manual and read the baby steps. I’m still not completely using Git correctly for branching and merging, but I have the confidence to break things in my code and undo them.

Github Screenshot of SpareType 2014 Project, version control, redesign

At the same time I was starting to crawl with Git, I was lucky to stumble across Codio. Before, I bounced around edit­ing code in Dreamweaver or the built-in theme edi­tor in Word­Press. Some­times I just used the file browser pro­vided by what­ever host­ing com­pany the project was on. I didn’t have an integrated development environment (IDE) and settling on one place to code and work has been a huge organizing force in my process.

Codio is web based and fully integrated with Git and Github. It’s liberating to no longer be shack­led to a local pro­gram or files. I’m just moving stuff from one spot on the Internet to another. This also has the benefit of forcing me to learn the dark arts of com­mit, push, pull, and branch. Codio’s other integrations with the software I was interested in learning – Sass and Grunt – made it easier to start learning about them. Of course I screwed up at first – fourteen commits before Grunt was producing the right output. And it could still get better.

Codio Screenshot - Homepage, World's Most Powerful IDE, integrated development environment

The Biggest Game Changer

As cliché as it sounds, if you feel like you need to do something, just do it. If you need to use [insert tool, programming language, new-fangled boondoggle here], start using it. Screw it up, read more documentation, copy some code, screw up again, get one tiny thing to work, screw up again, rinse, repeat. Along the way those tiny things that work start to stick and that’s called learning.

I’ve learned a lot the last few months both technically in my code and in my approach to thinking about what I do. It’s also made me appreciate others sharing their learning on the Internet. Hopefully, I can contribute a small piece and inspire others to make things more better. I leave you with a few of the key articles that helped teach me the last few months and bring about my process changes.

Leave a Reply

Your email address will not be published. Required fields are marked *