Yep, same here.<\/p>\n
<\/p>\n
I\u2019ve served in a variety of roles in the tech industry for close to a decade. I\u2019ve written a bunch of articles on design, coding, HTML, and CSS. Hell, I\u2019ve even written a few books<\/a> and spoken at conferences around the world. But there\u2019s still that voice that keeps telling me I need to tackle programming; that I\u2019ll never be fulfilled until I learn how to develop my own ideas and projects from scratch. Being a web guy, the obvious language to learn: JavaScript<\/strong>.<\/p>\n Like a lot of people, though, I\u2019m intimidated by the current JavaScript landscape. With the constant influx of new tools, techniques, and frameworks, it\u2019s hard to figure out where and what to start learning. Still, I need to start somewhere. So I thought a review of learning resources and tools would be a good first step.<\/p>\n How about this, does this sound familiar, too?<\/p>\n You\u2019ve attempted to learn programming before with a few different languages. You\u2019ve read books, you\u2019ve subscribed to online courses, and you have a bunch of folders littering Dropbox with half-completed code and copied exercises.<\/p>\n Samesies.<\/p>\n I\u2019ve gotten halfway through The Rails Tutorial<\/a> and Learn Python The Hard Way<\/a>. My bookshelf is full of massive tomes on everything from ActionScript to Processing. But nothing ever seems to stick.<\/p>\n I can figure out what a PHP file does and understand a bit of jQuery, but if you asked me to sit down and write the most basic of programs, I\u2019d be hard-pressed to do it. After so many failures, I think I\u2019ve figured out the problem.<\/p>\n Any time I start learning something new, I immerse myself as fully as possible in that topic. I buy books, I watch videos, and I listen to podcasts. It\u2019s the same tactic that a lot of companies push as the best way to learn a new topic, whether it\u2019s programming, cooking, or picking up Mandarin in a weekend. Immersion is a key part of learning, apparently.<\/p>\n But the problem is that people (or at least me) have a threshold for how much information they can process before feeling overwhelmed. I call it the “burden of information.” Information is wonderful, but too much of it weighs down the mind, leaving you burnt out and hopeless, and leading you to give up and feel like a failure.<\/p>\n I don\u2019t want this attempt to be like all the others. I know that I need to immerse myself in JavaScript but I don\u2019t want sink into the quicksand of the JS world only to suffocate myself. So I decided to review the JavaScript learning landscape and pick out a few resources—but not too many—that I can use to finally scratch the programming itch.<\/p>\n I broke resources out into four categories, based around the different ways that I like to learn (and I suspect others like to learn, too). Those categories are: reading, watching, listening, and, most importantly, doing.<\/p>\n Here\u2019s what I found.<\/p>\n My favorite way to learn new things is by reading about them. While that mostly means books, I also love filling up my RSS feed with good blogs and my inbox with great newsletters.<\/p>\n Fortunately for me, there are a ton of acclaimed books about JavaScript. Here are some of the most recommended:<\/p>\n When I was attempting to learn Python, my favorite resource was Zed Shaw\u2019s Learn Python The Hard Way<\/em><\/a>. It was a no-BS approach to learning by actually coding. While he has a similar book about JavaScript in the works, it\u2019s not available yet.<\/p>\n The closest I could come to it was Eloquent JavaScript<\/em> by Marijn Haverbeke. From what I\u2019ve heard, it\u2019s a wonderful introduction to JavaScript and, looking at the contents, it appears to follow a similar approach as Zed\u2019s Hard Way books: starting off with the nuts and bolts of the language and progressively getting more challenging as more advanced concepts and projects are introduced.<\/p>\n All of the other books in my list look excellent but most seem a bit too advanced for where I am right now. The two exceptions are Jon Duckett\u2019s JavaScript and jQuery<\/em> and Mat Marguis\u2019 JavaScript for Web Designers<\/em>. I loved Jon\u2019s book on HTML and CSS but don\u2019t feel like the visual approach used in his books will work for more complex topics (at least for me). And Mat\u2019s book looks like it addresses my use case perfectly but seems like it won\u2019t be in-depth enough for longer term learning. Still, as I have most of the other A Book Apart books, I\u2019ll probably supplement Eloquent JavaScript<\/em> with JavaScript for Web Designers<\/em>.<\/p>\n I\u2019m sure there are a ton of other fantastic books on JavaScript out there, but those will have to wait until after I finish my chosen book. Remember, I want good information, but not too much<\/em> of it right away.<\/p>\n Holy crap, there are a ton of blogs out there on JavaScript. It actually makes figuring out which ones are good kind of tricky. I\u2019m open to any suggestions you might have (leave them in the comments!) about who I should follow, but my initial take is that these are a good place to start:<\/p>\n There are a bunch more that I came across but most seem too complex at this point in my learning. Or others belong to individuals that talk mostly about their own projects and less about the basics or the process of learning. I\u2019ve bookmarked all of them, though, to dig into once I\u2019m more up-to-speed.<\/p>\n I\u2019m an unabashed lover of HTML newsletters, as evidenced by my previous writing on the subject<\/a>. So, naturally, I hunted down a couple to subscribe to:<\/p>\n But I get the sense that there are more out there that I just couldn\u2019t find. I mean, there\u2019s a newsletter for damned near any topic. With JavaScript being so popular, there have to be more than the two newsletters I found above. If you have any tips, send them my way via the comments below.<\/p>\n Another good way to learn is by watching others do the thing you want to do. But this is almost always secondary to me reading to learn. Still, when I get stuck on a topic or want to dig deeper into certain aspects of coding, watching videos will be a good way to do it.<\/p>\n For the most part, there are two categories of videos online: courses and standalone videos (mostly on YouTube). There are a ton of options for both, but these are the best from what I can tell:<\/p>\n I\u2019ve heard amazing things about Wes Bos\u2019 courses, so I\u2019m going to dig into those at some point. The same goes for both The Coding Train and Fun Fun Function. But again, I don\u2019t want to be overwhelmed, so I\u2019m planning on setting all of those aside for after I work my way through *Eloquent JavaScript*.<\/p>\n Podcasts are an excellent way to learn about concepts and immerse yourself in a particular culture without needing to be actively tied to a screen. Basically a good way to keep learning while I get the dishes done or pick up after my kids.<\/p>\n But, like with email newsletters, I found it difficult to track down good JavaScript podcasts. Looking around, it seems like there are a ton out there but most are inactive and outdated. I came up with the list below but I\u2019m hoping that y\u2019all can point out a few more to add to my podcasts feed.<\/p>\n The last, and arguably most important, part of learning JavaScript is the actual doing part: writing code, getting it to work, and repeating.<\/p>\n Like I mentioned at the beginning, I\u2019ve been writing HTML and CSS (and playing around with other technologies) for years, so I\u2019m a bit biased on some of my tools. I mostly work with Sublime Text<\/a> on my Mac, so I plan on sticking to that for writing code locally. But, as I\u2019ve been working more on my iPad Pro lately, I\u2019d like to augment Sublime Text with a few additional tools for writing and testing code while I\u2019m learning.<\/p>\n The main one will be CodePen. I\u2019ve been a Pro<\/a> subscriber for a while and find that it\u2019s tremendously useful for writing code no matter what platform I\u2019m using. Since it works in the browser, it\u2019s easy to pop open a pen on my iPad while I\u2019m hanging out at the coffee shop and have a full-fledged JS development environment ready to go. It also has a few features that I\u2019m sure will come in handy at some point: private pens and collections for when I want to keep embarrassing code secret, projects for when I want to work on more substantial stuff and have it hosted somewhere without any pain, and collaboration mode for if I ever need to tap some friends to help me out with some tricky code in realtime.<\/p>\n I looked at other tools like JSFiddle and JSBin, but I\u2019m comfortable in CodePen and their features are killer, so I\u2019m sticking with it.<\/p>\n One other online tool that I plan on using at some point is Glitch<\/a>. It’s a relatively new tool for writing code and sharing it online and has a wonderfully eclectic community that\u2019s built up around it. While I think most of my coding will be done in CodePen or locally in Sublime Text, I think Glitch will be vital when it comes time to learn about more complex things like interacting with APIs, making weird bots, and testing out some of those scary frameworks.<\/p>\n So, taking into account all of the resources above, here\u2019s what I\u2019m planning on doing to learn the basics of JavaScript over the next few months:<\/p>\n One of the most important aspects of learning, though, is getting feedback on what you\u2019re actually doing. For that, I\u2019m going to be calling on a few friends and anyone reading this who wants to pitch in.<\/p>\n I\u2019ve set up a new collection on CodePen<\/a> to house my JavaScript projects throughout the learning process. I\u2019ll keep that collection public so that anyone can see what I\u2019m doing, fork examples, and school me on the best way to do things. If that sounds like your bag, then follow along on CodePen<\/a>.<\/p>\nThe Burden of Information<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/js-mindmap.jpg?ssl=1\")
<\/figure>\nReading<\/h3>\n
Books<\/h4>\n
\n
Blogs<\/h4>\n
\n
Newsletters<\/h4>\n
\n
Watching<\/h4>\n
\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/js-30-video.jpg?ssl=1\")
<\/figure>\nListening<\/h4>\n
\n
Doing<\/h4>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/js-codepen.png?ssl=1\")
<\/figure>\nMy Learning Plan<\/h3>\n
\n