Learning how to code can be a daunting task for anyone, whether you’re a complete beginner or an experienced professional. Just getting started is hard enough, but sometimes the best still get stuck.
If you’ve never coded before, Treehouse is a great way to get started. Once you have your footing and you know a language or two, it’s easy to understand code you’ve never seen by reverse engineering, or as I like to call it, “breaking stuff” to see how it works. This method rarely gets the emphasis it deserves (especially in formal educational environments), yet it’s amazing how useful it is for learning. In fact, being able to understand code without any instruction is an essential job skill, because it’s common for programmers to maintain code they didn’t write themselves.
Now before you take a proverbial hammer to your favorite website, you should know that you can’t just break anything with reckless abandon and expect to learn something. You have to take a methodical approach and break one thing at a time, then analyze the results of your changes. When breaking things, you should be looking for the relationship between parts to understand their function in the whole.
Learn to Break Stuff
Recently I was forced to do some reverse engineering in order to advance my own knowledge. I’ve become interested in 3D programming in the browser, which is a mixture of well explored territory and new frontiers. Three.js is an abstraction for a much more complex language called WebGL, and while three.js is useful enough to be worth using, it’s also poorly documented. How do you learn code without an instruction manual? Reverse engineering is the only way. The following is a code example that uses three.js to create a light:
var light = new THREE.PointLight(0xffffff); light.position.set(-100,200,100); scene.add(light);
If you have some programming experience, you might be able to read this and figure out most of what’s happening here. If there are any blanks or assumptions you’re unsure about, you can test them with the following techniques:
- Delete one line at a time to see if it’s necessary for your goals.
- Delete one line at a time to better understand its function. Even if you think you know what a line does, try deleting it anyway to test your assumptions.
- Change variables and function arguments to see if you can manipulate them in a way that matches your mental model.
- Swap the order of various lines to see if things can be done “out of order” or if there’s some significance to the sequence of operations.
As you test each line, you’ll start to build a mental model and make corrections to other assumptions you made previously. Soon, the whole picture will start to make sense. Using the techniques on this example, we might discover that we can change the position of the light by reseting the XYZ coordinates, and that each line is necessary in order for the whole thing to work. Another tip to get going more quickly is to use contextual clues, as many languages are quite similar. In the example, a hexadecimal value is used when creating the light. If you’ve ever coded in CSS, you’ll probably recognize this as a color value, even though the formatting is a bit different.
Reverse engineering isn’t the only way to learn and it should always be backed by more formal material whenever it’s available. In fact, I would argue that tutorials become more valuable once you have some of the context mapped for yourself. If you learn best by diving into problems head on, breaking stuff is one of the fastest paths to understanding.