Solve your problem with Javascript

It’s the best way to learn 

Tutorials and screencasts are good for getting some cursory knowledge on Javascript. But the best way to learn is by building something.

Make a simple web app that solves a simple problem you care about. I did this recently and learned a lot.

My little app is called Oaxaqueando. “Eando” is a Spanish verb suffix, like ‘ing’ in English. So it’s like Oaxaca-ing. Oaxaca is a city/state in Mexico where I currently live.

Oaxaqueando is a very basic JS/HTML map app to help me find cool things in Oaxaca. I’d been wanting to learn how to make maps and I also wanted to find places for hiking, yoga, and volunteering in Oaxaca. This little app taught me some of the basics of Javascript and map making and will help me (and hopefully other expats) find cool things in Oaxaca.

Solving your own problem with code is interesting and motivating. You understand the problem and want to see it solved. This allows you to push through all the tough times. You’ll get stuck a lot and very frustrated. If you actually care about the outcome, you’ll be able to persevere much more easily. Contrast this to only going through tutorials/books where there doesn’t seem to be an ever increasing reward waiting for you (only more tedious work).

Solving your own problem has an inherent feedback loop. Every time I added a layer to the map or added a feature, it gave me a burst of excitement/joy/relief. I could feel myself getting closer to having something useful.

Solving your own problem answers the inherent question most students ask “But when am I going to use this?”. For example, I remember reading about the jQuery methods for appending or Javascript variable scope. It’s one thing to read about them, but it’s another to literally see the impact these things have on your app.

Solving your own problem is like learning a foreign language while being immersed in a country where they speak it. You study a little bit of syntax/grammar in a book and then you go apply it right there. While applying it, you reinforce what your book told you and you learn things in the field that complement your book work.

I recommend a mix of solving your problem whilst doing some bookwork. Do just enough bookwork (just-in-time learning) to get you going but then keep working on your project.

Solve something you care about and don’t stop trying new books/tutorials until you find the ones you like.

Resources I like:
Javascript
Professional JavaScript for Web Developers (Thorough)
Eloquent Javascript (Challenging but interactive)

jQuery
Tutsplus 30 days to jQuery (fun, light, easy to follow)
Head first jQuery (fun, light, easy to follow)

More specific things I recommend:

Reach out when truly stuck
Part of building my site was working with GeoJSON (it’s JSON data for maps). For some reason, GeoJSON uses longitude, latitude instead latitude, longitude (which pretty much every other thing uses). I beat my head against the desk for 2-3+ days wondering why my points were in Antarctica. Finally, I reached out on GIS.stackexchange and within 20 minutes someone told me what was wrong. That’s a lot of wasted time and stressing in hindsight.

Reach out, online or in person, when you’re really stuck. There is a difference between a good stuck where you’re wading through and learning, and bad stuck, where you’re not learning and destroying your morale.

The key to asking a question on something like Stackexchange is to show them that you’ve tried many other options. Boil your problem down to the exact part where you’re stuck vs. posting a wall of text that someone has to then go through.

Don’t make it for anyone but you.
Sure, there was and is a small part of me that would love to see people use my app. I’d like to get that sweet validation of someone saying “I discovered a new hike thanks to your map, Kyle.”

Be careful with these thoughts. They can delude you into trying and struggling to make something amazing that will get validation when what you really need to be doing is learning and building.

Just build it for you. Then you can validate yourself.

Switch tutorials if you need to
There are now dozens of ways to learn JS. Don’t hesitate to switch around.

I really like parts of Eloquent JS but at some points he goes too fast for me. It quickly became a struggle to complete the most basic exercises. Maybe some will say that this struggling is where you learn. I think some struggling and mental sweating is necessary but just getting stuck by yourself will kill morale quickly.

Momentum and morale are king
These matter a lot. You’ll be tempted to quit many times. Guard and maintain your morale.

See: Gumption Traps

Make sure you’re comfortable at the computer
Try to make sure your body is comfortable when working at the computer. Get a monitor, keyboard, mouse, or better desk if necessary. You shouldn’t be hurting while you’re trying to think through code. You should not be sore or numb at the end of the day.

Personally, I use two wrist braces when typing and my hands feel way better at the end of the day.

Don’t hang on too tightly to dream features
You want to crank our your app sooner than later. Remember, momentum is key. You’ll probably have all sorts of dream features for your app. If some of them are holding you up too much, let them go. Find a simpler way to implement things. Think: Minimum Viable Product (for me). Don’t hesitate to lower the bar. This won’t be your last app. You need to make the first.

I really wanted an interactive sidebar for my map. One where you hover over the list item and the map marker lights up and vice versa (like Yelp and Foursquare do). But I eventually had to let that go. I wasted dozens of hours trying to figure out the click events. I know there will be other projects in the future where I can figure that out. Maybe I’ll come back later and add it to Oaxaqueando. But I decided to let it go because getting something done was more important than constantly messing with something undone.

Use Jsfiddle and Github
Search within Jsfiddle (“site:jsfiddle.net” on google) and Github to find and use other people’s code. Jsfiddle, in particular, is a great way to see exactly how some part of JS/jQuery works. It boils it down to the essence. Search and use these liberally.

Hope these can help you, code learner.