Like what you're reading? Want to get rid of ads? Donate some BTC and help me stop relying on AdSense. BTC Address: 1E4TGB9e4mwfUusg4XHnte1Szi1gDFWDd9

Simple Mistakes for Beginners and Experts

Simple, stupid mistakes. No one is immune from them. I spent the past 48 hours chasing down a bug in the blog you’re currently reading and in the end found out that the problem was an incredibly simple error that you’d only expect from a beginner. That got me thinking about simple mistakes. It seems to me that simple mistakes happen on two ends of the competency spectrum: at the beginner level and the expert level and I have my own theory as to why that seems to be.

Beginner’s (Un)Luck

As a beginner you know you’ll be making some mistakes. In programming, you most often see beginners making the simplest of simple mistakes. Things like leaving off a bracket or a semicolon somewhere can trip up a novice developer for days on end. Then they go over to StackOverflow and get laughed at for it unfortunately. When you’re just learning the ropes you have to pay very close attention to the details and go over a mental checklist of things that need to be complete before your code works. Because of a lack of experience and because a beginner does not yet have a firm grasp or memory of programming concepts and/or syntax yet these minor syntax errors often slip through. Other common problems tend to be simple like

  • not having the right software installed

  • not referencing dependencies or mistyping link to/referenced files or libraries

  • forgetting to refresh the page or save changes to a file (no joke, it happens)

  • not having the right server environment set up (this is the worst because then you’ve got correct code and you’re not even looking anywhere close to where the actual problem is)

Expert’s Hubris

Just as beginner’s make simple mistakes out of ignorance and lack of experience, experts make those same mistakes out of lack of vigilance born from hubris. As an expert, you’ve seen it all before, even the simple mistakes. You’ve got a mental checklist in your mind of everything that can go wrong. You know exactly which I’s to dot and T’s to cross and doing so is like second nature by now. Then one day your code doesn’t work. You go through all the usual suspects, your mental checklist, you check your environment, config files, and everything else that you know you should check plus you’ve Googled it a bunch of times and still no solution. Then you start to break it down and try to think like a total beginner. You go through your files one by one, line by line imagining what each line of code does and after a few days it hits you! You have:

  • a spelling error

  • a wrong file reference

  • or something else but the first two are very common for me.

My Simple Mistake

So while I was developing this blog’s theme I came across such a seriously simple and stupid mistake. As I’ve mentioned in the past this site is built with Octopress. Octopress (and Jekyll) use SASS for styling but I’m partial to LESS and use it whenever possible. That said, I do know SASS moderately well so porting my LESS code into SASS wasn’t a big problem. So I originally developed a static HTML version of the theme which I was using to help me quickly layout and style the theme before porting it to an Octopress theme. Everything was going well until I broke up the code into its respective files and directory structure for use as an Octopress theme. I did everything right and I did notice a few bugs in the HTML and such that were easily fixed and eventually went ahead and installed and generated my Octopress site using the new theme. It looked almost like what I had built in the static development version but certain areas of the page had the wrong font families and link colors. No big deal I thought. So I went back and made changes to the SASS files to see my changes on the fly. Nothing happened. None of the styling changed. I figured it’s probably just an inheritance issue or something so I rearranged some code and even added some !important declarations to force the styling. Then I regenerated and previewed my site and still nothing. It was as if the stylesheets weren’t being regenerated at all. I spent an entire day hunting down the problem within my SASS file and found nothing. So I put it away and figured I’d be able to fix it after a good night’s rest. The next day I tried again but this time I looked into possible errors in my SASS syntax, possible @import problems, and I even Googled for the solution. Still nothing.

After this disappointing second day I was getting frustrated. And pissed off. Before I went to sleep I thought about it some more and the idea that I’m referencing the wrong path for my stylesheets popped into my mind. I quickly dismissed this thought. There’s no way I could be referencing the wrong path because if I was then I wouldn’t be seeing any of my styles. This brings us to today. As you can see I fixed the problem because this blog is now published with the new Matvre theme. So what was the issue?

I was referencing the wrong CSS path after all! After messing with the sass-cache folder and some other overly technical things I circled back around to give my previous idea that I may have messed up the CSS reference some actual consideration. I was desperate. Well, there it was, staring me in the face the entire time. I was referencing ROOT_DIR/css/style.css in my theme head file but Octopress uses the /stylesheets directory by default in the Classic theme (I based my file structure off that theme but none of the code except for syntax hilighting and other plugins). But how did I end up with a CSS directory in the first place then? Well, when I first ported my theme from static to a set of files split up for Octopress, I pre-compiled the SASS files outside of any Octopress commands. So instead of doing a

Octopress theme installation commands
rake install['matvre']
rake generate
rake preview

like I should have, I did this instead:

Compiling individual SASS files
sass --watch theme-folder/sass/style.scss:theme-folder/source/css/style.css

See what happened? I precompiled the SASS so I could be sure my SASS was working properly and so I can port my LESS to SASS on the fly and get it in the proper structure for Octopress. I was trying to kill two birds with one stone. Instead of having the SASS gem put my compiled stylesheets into the correct folder, stylesheets/ I ordered it to put them into a folder called CSS. Why? Because in all of my projects and in my custom font-end framework that’s how I just do things. I’m used to it. So my “expertise” failed me. I made assumptions that held true most of the time but not this one. Because I’m an experienced developer and because so much of development has become like second nature to me I end up making assumptions based on routines and workflows that I’ve learned and adapted to after years. All it takes is just one minor detail to change and it can cause over 48 hours worth of frustration and completely useless bug fixing.

So what was the fix?

All I had to do was find the template file that held the <head> of my pages and change the stylesheet link to reference the /stylesheets/ folder instead of the css folder. All it took was changing a single piece of a string of text, not even a whole line of code, to fix a bug that drove me nuts for over two days. Was it worth it? Fuck yeah! I finally got my blog theme the way I like it!

Web development

« Fix Webfont Rendering Issues in Chrome for Windows The End of the Beginning »