Photo credit: Dmitry Baranovskiy
Learning to code is no joke. There’s so much to learn over and above any one programming language alone. Unit testing, version control, various frameworks and libraries, HTTP, regular expressions, various APIs, data structure (XML, JSON, etc.), and more. Though, I’m happy to admit that, after roughly one year of intense learning, it’s all finally clicking.
Those of you who had read my previous posts on learning to code know how this journey has seen its fair share of ups and downs. I’ve had to rewrite shitty code over and over as I improved, and I’ve spent dozens of hours googling things that should’ve been dead simple to do (i.e. using capturing groups in regular expressions).
The second half of this journey has seen an outburst of productivity – three completed apps. Two for my job (used internally), and one that I’ve open-sourced on GitHub.
While I’m far from the perfect web developer, I figured I’d share my journey from complete n00b to experienced enough to put together a functioning app. Those of you who are thinking of taking the plunge (or have already started learning) might find my journey as a helpful guide. So here we go, step by step:
1) Learning the Fundamentals
Like many, I started my journey on Codecademy. I’ve found it to be the easiest interface to learn on, and it’s significantly more interactive than coding books, or even videos. Here are the four courses I went through:
- Web Fundamentals
- JavaScript
- jQuery
- Python
Once I completed those four courses, I took Lynda.com’s JavaScript Essential Training course. I did this mostly because I had a Lynda.com account already and was in need of a solid refresher on everything I had learned about JavaScript. It was a great idea, and really helped solidify the concepts in my mind – especially as I started writing my first scripts.
After completing the Codecademy and Lynda courses, I understood enough about HTML, CSS, and JavaScript to start writing some code. However, I knew little to nothing about server-side code, which was still a huge barrier to me making something useful. I wondered, was there a way to write and launch apps without requiring a server-side backend? My hunt for a framework began…
2) Learning a Framework
Because of the limitations in my coding ability, I gravitated towards the Chrome extension framework, which allows you to build Chrome extensions in the browser, using, you guessed it: HTML, CSS, and JavaScript.
Given that I wanted to build an app that scrapes data from a particular website, Chrome extensions made perfect sense, as they allow you to grab and manipulate information from those pages once they’re loaded in your browser.
Learning a framework is quite a different experience from learning a programming language. The language itself has tons of documentation, books, videos, and lectures that all remain consistent because the language itself is fairly consistent (in most cases). However, frameworks can change rapidly, oftentimes with lackluster documentation. This can result in a huge struggle to do even the simplest things inside that framework when you’re a newbie.
For example, the Chrome extension framework relies very heavily on callback functions, which I had a hard time wrapping my head around as a beginner. The difficulty in grasping tricky concepts paired with difficult-to-comprehend documentation, and I quickly found myself frustrated. My app simply wouldn’t work the way I wanted it to. I was at a standstill.
Thankfully, this is where the next part of my journey came to the rescue…
3) Learning to use StackOverflow
How in the world did people develop apps before the existence of StackOverflow?
StackOverflow is a wonderful Q&A site where developers can ask almost any sort of coding question that comes to mind. The answers are community-driven and usually top notch.
The challenge in this phase is figuring out how to put your problem into words, so that you can search for it on Google (and find the appropriate StackOverflow page, of course).
If a button in your app isn’t submitting a form on the page, you can’t just ask ‘OMG WHY ISN’T MY BUTTON SUBMITTING???’ You’d need to properly phrase your question – making sure to use the correct terms – or else you likely wouldn’t find the correct answer to your specific problem.
Using the example of the button that won’t submit the form, you’d search for something along the lines of ‘jQuery submit() function will not submit my form.’ This was a real issue I faced a few months ago. In my case, after searching through StackOverflow, it turns out that a weird DOM issue was preventing the submit() function from working based on the ID of the button. I changed the ID and problem solved. Thanks, StackOverflow!
For many tougher coding challenges, reading through StackOverflow allowed me to hack together some code that actually worked. Though, more often than not, I still didn’t understand why my code broke in the first place (unless the StackOverflow answer explained it thoroughly), and my code was still sloppy.
Once I was comfortable using StackOverflow to help solve my coding challenges, I felt it was time to learn more about the standard workflows developers use to make the coding process go much smoother in the first place…
4) Learning to Debug and Control Versions
Without using a debugger like Firebug or the Chrome developer tools, I felt helpless when my code broke. I’d write dozens of unneeded console.logs to find problems instead of setting breakpoints, for example, in a debugger.
CodeSchool.com has a fantastic (and free) Chrome developer tools course which was helpful for finally understanding what the heck all of those tabs in the debugging area are for. To be fair, I only held on to the essentials of debugging, and haven’t quite grasped things like debugging memory leaks. But it was still a giant step forward in speeding up my debugging process.
I also didn’t feel comfortable making bold changes to my code, because once I’d save the JavaScript file and exit the code editor, there was typically no going back. So I took Lynda.com’s Git Essential Training course to learn how to use Git, one of the most popular version control systems for coding. This was great for building the confidence to make bold changes to my code, since it would be easy to roll back if it caused problems.
At this point, while my code was still sloppy, my debugging skills were stronger, and I had more confidence to attempt bold changes, since I had Git’s version control working with me. All of this improved the speed at which I could build new features.
However, I still wasn’t happy with the quality of my code. It was time to truly understand what was going on underneath the hood of the hacked-together code samples I found on StackOverflow…
5) Intermediate JavaScript and Additional Frameworks
I felt that it was time to improve my knowledge of JavaScript, and explore its current landscape of options for libraries and frameworks (up until now I had only used the jQuery library).
I bought some books (Secrets of the JavaScript Ninja, JavaScript Design Patterns, JavaScript: The Good Parts, etc.) and started learning AngularJS, an MV* framework that had been receiving a lot of buzz.
I’m glad I waited until my knowledge of JavaScript was much stronger before moving into new libraries and frameworks. Similar to my difficulties learning the Chrome extension framework, AngularJS had poor documentation (at the time I was learning – it’s a bit better now), which made it very difficult to learn. Thankfully, third-party tutorials (Egghead.io being the best) saved the day and kept me moving forward.
With my newfound understanding of JavaScript and a firm grasp on AngularJS, I decided to completely re-write my code from scratch, moving away from heavy use of DOM manipulation via jQuery, and replacing it with Angular’s Model-View-Controller structure.
I was quite happy with the progress I had been making (this step allowed me to bust through a plateau regarding my code quality), so I decided to tackle another area I had previously shied away from…
6) Learning to Use the Command Line
The command line is so powerful, and I had only learned the bare basics of it to use tools like Git and Yo. I found that my inability to understand basic shell commands was impeding my progress. For example, DigitalOcean, an amazingly cost effective way to get an app up and running on the web, requires a decent knowledge of the command line to quickly deploy apps.
Luckily, AppEngine (my preferred way to deploy apps) has a great tool with a GUI that helps you fire up local servers and deploy code. While it was great, I didn’t want to be at the mercy of GUIs for the rest of my life. And once part of my web development workflow moved onto a remote Ubuntu machine, I knew it was time to learn how to use the command line properly.
I’d highly recommend Lynda’s Unix Essential Training course. It gave me enough knowledge to understand much of what I was typing into the command line in bash, and set up aliases to make my life a lot easier when requiring complicated commands.
As a result, I’m now much more comfortable with using various scripts, utility tools, and GitHub projects that work via command line to assist me with my coding efforts.
7) Learning to Code on the Server Side
I actually started experimenting with server-side stuff shortly after learning to use Git. I had a basic knowledge of Python, which I used to get the hang of deploying simple apps on AppEngine. Despite this basic knowledge, I had little to no confidence in my ability to write strong server-side code.
With most of my bases covered with front-end development, I felt ready to invest more time learning basic server-side scripting.
So I started slogging my way through Learning Python (a massive book…), read through much of the AppEngine documentation, and got comfortable using OAuth 2.0 for accessing various Google APIs.
This is the phase I’m currently in. By the end of this phase, I’m hoping to have the skills to properly create a RESTful API endpoint for a few JavaScript-heavy apps I’m working on that rely on AJAX calls.
What’s next?
It’s been a little over a year, and I’ve accumulated enough knowledge to comfortably work on web development projects, both at work and in my personal time. I’ve open-sourced one project, and have written a two apps to assist my team at Google.
Moving forward, I’m going to continue learning as much as possible. I definitely need to brush up on web security (for example, learning about the existence of cross site request forgery attacks blew my mind…) and continue improving the quality of the code that I’ve written.
I also realize I need to get much better at testing my code (unit tests, end-to-end tests, etc.).
Perhaps these skills will allow me to pivot to a more technical career. Perhaps it will always remain a fun hobby. Or maybe it will fall somewhere in between. Who knows. For now, though, I’m hoping that this journey inspires those who have considered – or have already started – teaching themselves this wonderful skill.
Have any questions? Leave them in the comments below!
