Extreme Makeover: Code Edition
When I was in college, I took my first coding class. The class was specifically a creative coding for non-coders class. I learned HTML and CSS and then even forayed into classes on Processing (OO language for artsy people) and Arduino. I learned a little bit about a lot of things, but the thing I got really good at? Looking things up online. And you know what, my code may have been ugly, but it worked!
My personal portfolio website was originally built of components copy/pasted code directly from w3schools. Did I know what that onClick event would do? Yes, in theory. Did I know how to write a line myself? Nope.
- Looking at old code and being able to pull apart the sticky webs and find the source underneath it all is a really good skill
- I was embarrassed to have my old code out there, in the event someone did a little source code inspection (eep!)
- I’m a sucker for a good before/after. And that’s what we’ll be doing here
The purpose of this blog post is not to discourage you from writing ugly code. If anything, I want to encourage you to write lots of ugly code! And then, as you gain the skills, go back and continue to refactor it.
A Before and After (not quite as satisfying as a home DIY shot…)
How I refactored:
- Removed the iFrame. I structured my website with one “template” homepage, into which I would pass iFrame content to change the text content for each page. My iFrames didn’t pose a security risk, since I was controlling the content of the frame and nothing was being pulled in by an external domain; however, convention is really important in programming. It allows for universal standards so anyone can dive into any code and make sense of it. iFrames are conventionally used for things like ads, and by not sticking to convention, it made my code harder to read.
- Don’t be a slob! You know how they say engineers don’t care about how things look? They’re lying. Engineers care VERY much about your code spacing and indentation. Organize those lines!
At the end of the day, my biggest lesson from this before/after? Keep your code readable! I dreaded diving back into this code just because I knew how disorganized it was. Can you imagine if a total stranger had to do it??