We Can Rebuild It: Part 1

I’m wicked long-winded, so this is the first half of a two-parter

I’m super new to being a developer, and while I’d like to be able to blog about all kinds of cool tips and tricks, most of what I could write about regarding code would be either really basic, partially incorrect, or actually just a tasty pasta recipe (.sauce {tomatoes: 100%; garlic: 5em; meatballs: url(“beef-pork-veal.png”) repeat center center;} ). That said, I’d like to talk about something I actually have a handle on:

I feel like it’s really important to keep your code well organized. I’m saying “I feel like” here to start this thing politely; in reality I’m 100% sure that it’s important, and shut up. Organized code is wicked, even if you’re not someone like me, with an absurdly obvious case of undiagnosed obsessive-compulsive disorder (between writing each paragraph of this, I have to pet my cat twice OR MY LIFE WILL FALL APART).

When talking about well-organized code, it’s important to be clear that I’m not talking about something like ‘clean’ code or deliberately stripped-down, simple code. Don’t over-complicate things for no reason, sure, but if you want to toss a CSS-prettyfiable SVG into your HTML, it’s going to be messy and that’s totally OK. Don’t leave things out just to have a nicer looking index file. Who are you trying to impress, anyways? The other kids should like your sites for their functionality and stability, not for how thin and svelte your markup looks.
Well-organized code is important because your sheets will so often be long and complex. What I’m really talking about doing are these three main kinds of codganizing: Indent things properly, extensively comment your code and put your stuff in a rational order. Also, yes, I’ll try to come up with a better port-manteau than “codganizing” because that is terrible and sounds like grassroots fish activism. (“Organode”? No, that sounds like an app for finding church music recitals.)

In this entry, I’ll explain why this is important stuff to do, but don’t worry, you’re not out there alone - In the next post, I’m also going to run over how to do organization awesome.

Why Bother?

There are a pile of big benefits to codenizing (nope, still no good — that one just sounds like you can’t remember the proper inflected verb form of “code”). It’s good for you while writing code, good for you later-on, and good for other people who will look at your work.

It’s good for you while writing code, because you’ll actually have any clue what’s going on and where everything is. Having your code beatifully laid-out, well labeled and rationally arranged will help your brain worry less about stuff like “WHAT THE HELL IS HAPPENING WHERE AM I” and focus more on the things that matter, like kick-ass design and amazing web dev.
Also, significantly, you’ll be a faster coder. Arranging things well takes a bit more time up-front, but you’ll get all that time back 10-fold when you can easily know where to jump between parts of your CSS to work on various aspects of your site’s style. Think of it like covering yourself in lubricant before walking down a crowded sidewalk; you’ll need to be patient at first while getting ready, but once you’re off you’ll FLY through the people. In other news, I’m not great at metaphors.

It’s good for you later on. While you’re writing your HTML and CSS, you might be sure you've got it all straight in your head and don’t need any help finding your way around. That’s pretty great, but that won’t hold up a month later when the guy who hired you asks for his nineteenth “one last small revision”. You don’t remember how the code is set up anymore. You’ve started working on the site for your friend’s glasses-shop/juice bar, Yuppster Town, and now the only thing you remember is how the code for that looks.
If you properly organize your code, future-you will be happy to be able to quickly and easily return to anything past-you has done, and future-you won’t try to build a time machine to go back and yell at past-you. Making yourself faster and happier while updating sites AND avoiding the risk of creating a universe-ending time paradox is a pretty sweet combination.

The other people that you’ll be helping with good orcodeizing (BAM! Nailed it, amirite?) are anyone else who might need to look at your code. You want your sites to be accessible to anyone editing or providing support for them after you’re done working on them yourself. Other developers will see your fantastic, well laid-out, easy to understand markup and immediately like you for it. That means that cordganizing (BOOM! That’s 2! I’m KILLIN’ IT on those now) gets your code to go out and make friends for you, with people you’ve never even met. It’s like your code is your own charming personality doing well at dinner parties, only you never had to go to all the trouble of taking a shower, leaving your bed, and being forced to eat off of non-disposable plates.

Alright, so now you’re thinking that organization is a great idea, but you have no clue how to go about doing it. No worries! I’ll put up another post soon enough where I’ll speak in a similarly flippant, vaguely rude tone about how to do exactly that. In the meantime, flail around desperately trying to figure stuff out for yourself, or just sit here refreshing for a week until I post the next part! I won’t judge how you spend your time.