Learn Javascript, deeply. – Matt Mullenweg
Even if you haven’t watched the 2015 State of the Word address, there’s one takeaway that everyone is talking about:
The future of WordPress and the web are API-powered JavaScript applications.
The new WordPress.com user interface Calypso was already a sign of things to come.
Not only is it utilizing the WP REST API but build with Node.js and React powering the whole thing, it is also completely based on JavaScript which will be a key part of the WordPress technology stack in years to come.
So, it’s clear that it’s time to learn JavaScript for WordPress. However, not everyone is comfortable with or ready for that. After all, for the longest time, PHP was the bread and butter of WordPress professionals.
Therefore, it’s easy to feel either afraid of falling behind or overwhelmed at the prospect of branching out to another programming language.
Even the Automattic team, who have been at the forefront of this development, stated to have found the shift challenging.
However, that’s no reason to stick your head in the sand. Instead, we will face this thing head on and get up to speed on JavaScript.
So, in this article, we will not only take a quick overview over JavaScript but also run through a ton of high-quality resources for those who want to learn JavaScript for WordPress.
Sounds good? Cool, then let’s hear the homework assignment once more before we dive into it.
What Is Javascript, Exactly?
For those who don’t know, JavaScript is a client-side programming language. That means it is run and interpreted by the user’s browser as opposed to the server.
Compare this to PHP, where for every operation your site will send requests to the server, which then spits out new information.
Created in 1995 by a Netscape engineer (remember Netscape?), JavaScript is by now a well-established programming language that is continually growing.
In fact, today it helps power many high-profile sites like Facebook, Google, YouTube, Amazon, LinkedIn, Pinterest and more.
It is, therefore, no wonder that JavaScript is the most popular language on Github.
Traditionally the JavaScript has been used to create website animations and effects, for example for sliders or social sharing buttons. However, you can also build entire sites with it.
One of the advantages is that, as a front-end language, JavaScript makes websites potentially faster than those with server-side programming.
Plus, with the development of Node.js (more on that below), it is now possible to run the language on a server, allowing developers to build scalable JavaScript applications.
As you can see, as a web professional there were many good reasons to get into this area, even before WordPress shifted towards its direction.
However, the platform and the programming language aren’t exactly strangers to begin with.
WordPress Already Uses A Lot Of JavaScript
The WordPress platform runs tons of Javascript on a daily basis, particularly from libraries like jQuery, Backbone and Masonry. Just have a look into the /js folders inside wp-admin and wp-includes.
Particularly in the theme customizer, but also whenever you drag and drop widgets into a widgetized area, the language has a role to play.
Plus, JavaScript can also be found as part of the technology stack in plenty of plugins and themes these days.
So, the recent development is not a complete overhaul or restart, but just an intensification of things that are already happening.
Are you ready to dive deeper into JavaScript? Then let’s do this!
Javascript Online Learning Resources
The following learning resources offer a structured approach for anyone interested in having a go at the programming language.
Most of them are aimed at beginners and therefore allow you to ease into JavaScript and learn it from the ground up.
JavaScript For Cats
Yes, you read the name right. No, it’s not talking about people who love coding and also play jazz but of animals of the feline variety. Well, at least it pretends to.
If you can get over the weird premise of reading a programming resource for pets, JavaScript for Cats is quite a good beginner resource.
It starts off with familiarizing learners with browser tools and then moves on to the most basic concepts of JavaScript.
Everything is explained with concrete examples in animated form that — naturally — are all cat related. However, that facts makes them oddly memorable.
Overall, it’s a really good starter resource that you can easily consume in two to three hours.
Eloquent JavaScript
Eloquent is a word that is definitely underused. Behind the excellent title hides a just as excellent JavaScript learning resource.
Freely available online, it can also be downloaded as a PDF or epub file and even purchased from Amazon in both in electronic and paper form.
By following along in your browser, you also get access to live code and example projects.
Eloquent JavaScript is split into three parts:
Introduction to the language
Understanding how it works within the browser
An introduction to Node.js
The material is easily accessible and aimed at people who have almost no prior knowledge of any programming language. Therefore, it makes for an excellent first step into the world of Javascript.
Superhero.js
Superhero.js is not so much a resource itself, but a collection of other excellent learning material run by five experienced developers.
The site is continuously updated and covers everything from the very basics to code organization, testing, tools, performance, safety, and more.
Also, everything is presented in an awesome pop art design which in itself is worth a visit.
How To Learn JavaScript Properly
Behind the name How to Learn JavaScript Properly hide two study guides put together by the good folks of JavaScript is Sexy (is it really, guys?).
The guides offer two different learning paths, one for beginners and one for experienced developers. Both take six to eight weeks to finish.
Again, the guides are not a self-contained learning resource but rather a collection of existing offers on the net including video courses and coding websites.
However, having it put together by experts will save you tons of research and allow you to get started right away.
JavaScript The Right Way
JavaScript the Right Way is very similar to Superhero.js. It collects articles and guides on all things JavaScript in one place and sorts them into different categories.
These include code style, patterns, useful tools, news, reading material, podcasts, who to follow in the community and other resources.
Overall, the website offers tons and tons of info yet is relatively technical. Therefore, it might be more suitable for experienced coders making the leap to Javascript than the average layman.
CodeAcademy
The approach of CodeAcademy is quite different than that of the other items on this list.
Instead of having you read and understand JavaScript on a more intellectual level, it throws you right into writing code.
You learn through typing out simple examples functions and seeing their effects in real time. The lessons are followed by quizzes that reinforce the learned material.
While there are Pro features available, the basic course is free and with a length of 10 hours offers a lot of value. Definitely worth checking out.
W3Schools
W3Schools is a well-known name in the web development sphere. I myself often land on their pages when looking for CSS solutions.
The website offers a JavaScript tutorial that is more practical minded and works with plenty of examples and little text.
While you can always look at the code behind the scenes, it is not quite suitable for those starting from absolute zero. The tutorial is clearly aimed at people with some amount of background knowledge.
Mozilla Developer Network
Mozilla’s Developer Network also offers a lot of resources on the topic of JavaScript for different levels of proficiency.
Overall, it is quite technical and aimed at people who can deal with more jargon. Yet, that doesn’t mean beginners won’t find their way around.
Just pick your level and follow along, you will learn a lot.
Books on JavaScript
Though we are talking about a programming language for web development, that doesn’t mean everything about it has to be online.
Friends of offline learning and paper aficionados can go with many of the available books on JavaScript.
While there are more out there, I am only mentioning two here because they are the ones I saw recommended over and over again.
JavaScript – The Good Parts
JavaScript – The Good Parts was published by O’Reilly who have long been market leader in books for programmers.
Author Douglas Crockford takes an 80/20 approach to JavaScript by attempting to sort the good from the bad and leave you with only what is truly valuable and elegant about the programming language.
For a condensed approach to JS, this is the way to go.
JavaScript – The Definitive Guide
Coming from the same publishing house, David Flanagan’s JavaScript – The Definitive Guide is a real tome.
In over 1000 pages it dives deep into pretty much every aspect of the programming language.
While the guide is written like a tutorial, it is not so much meant to be read from front to back than used as a reference guide and should be on every programmer’s book shelf.
JSbooks
If you are looking for additional reading material, this collection is going to be your best friend.
It houses a large number of free JavaScript resources, mostly in book or online course form that can be filtered for beginner, intermediate and advanced knowledge.
Should this blog post prove to not have enough material for you, this is where you will find your next read.
Online Video Courses on JavaScript
While reading is all good and proper, some people actually have to see someone else do something in order to proberly learn it.
If that sounds like you, we’ve got you covered. In the following you will find at a number of learning resources in video form.
Be aware, however, that many of them aren’t free, yet there’s a lot of good quality here.
Treehouse
Treehouse is a premium provider of video training for developers.
Their offers include a six-hour course on JavaScript basics and their library is filled with loads of additional material on the programming language.
Plus, the video quality is really good, so much so that I’m actually thinking about signing up to their service.
While they have some free videos, most of them are only available for paid memberships that start at $25/month.
Frontend Masters
I have seen the Frontend Masters courses recommended several times by people in the WordPress community.
They offer on-demand video lessons not only on JavaScript but also HTML5, CSS3 and more — basically everything front end developers need.
Their seminars can be filtered for beginners, intermediate and advanced users, by popular courses and most intriguingly — “designers learning code.”
While there are free previews, access to the entire content is $30/month.
YouTube
The popular streaming service also has several offerings on Javascript. That includes entire series.
Just look for “JavaScript tutorial” or “JavaScript tutorial for beginners” to find some high-quality, extensive and free results.
Below is an especially noteworthy example which is a beginner JavaScript tutorial by Bucky Roberts.
In 40 bite-sized lessons of 10min or less he covers the basics of JavaScript for anyone wanting to foray into the language with no or little preconceived knowledge.
DevFreeCasts
As the name suggests, the site offers free screencasts for developers wanting to improve their skills. While it has a pure JavaScript section, you can also find videos on React, AngularJS, Backbone and more.
The website has lots of free material, however, unfortunately it is not very structured. Therefore, DevFreeCasts can rather take a supplementary role than function as a complete resource.
Environments, Frameworks, Libraries And Other Advanced Stuff
The above resources should be enough to get you started on the JavaScript track. However, it’s only a matter of time before you run into more advanced areas.
We will quickly go over some of the frameworks, environments and more that you will most likely encounter and then list a bunch of starter resources for each of them.
Node.js – Node is runtime environment that allows you to house JavaScript applications on local or remote servers. It is largely responsible for the growing popularity of the programming language and has been used for Calypso and by other big names online.
Backbone.js – The name of the oldest JS framework. It has been part of WordPress Core for a while and is also being used by a number of themes out there.
AngularJS – Another JavaScript framework for developing single-page apps, maintained by Google. Angular is open source and people already try to make it play nice with the new API.
React – React is a JavaScript library in the hands of Facebook. Automattic used it for Calypso and other players like Netflix, Airbnb and Imgur do too.
Learn Code Academy – Node Tutorials
LearnCode.academy produces YouTube tutorials on all things code and front end. They offer a wide range of introductory and very advanced videos including this series on Node.js:
Backbone.js
On the topic of Backbone.js and WordPress, we also have a handful of excellent resources:
Evolving Your JavaScript With Backbone.js – A presentation from WordCamp Providence 2013 turned into a JavaScript page. Talks about where the language is already present within WordPress, its advantages and capabilities.
Using Backbone Within the WordPress Admin: The Back End – A TutsPlus tutorial that explains how to employ Backbone.js inside a WordPress plugin.
Building a Front-end WordPress Theme – Trevan Hetzel’s forage into building a WordPress theme with Backbone.
AngularJS
It seems a lot of folks have been giving Angular and the WP REST API a whirl. Here are just a few examples:
Building Themes with AngularJS and WP REST API
Use AngularJS as WordPress Frontend
Experiences Building a Website with AngularJS + WP-API (WordPress API)
LevelUpTuts – React for Everyone
On React, we have React for Everyone by LevelUpTuts. It’s a tutorial series available for free on YouTube. The quality is excellent, as you can see from the video below.
However, they only started uploading the tutorials last November so it’s still a work in progress, yet with high potential.
Bonus: Codewars
I have to say, this one is probably my favorite thing on the entire list.
Once you have progressed in your skill far enough, Codewars is waiting to become you own private coding dojo.
The idea is to help you master your JavaScript skills by solving ever more challenging problems.
Gamification elements allow you to earn ranks and titles to keep motivation high and you can learn from other people’s solutions.
Yet, be aware that in order to enter the website at all you first need to solve a challenge in your chosen language, so it’s not suitable for beginners.
Staying On Top of All Things JavaScript
Finally, with a language developing as quickly as WordPress, it’s important to keep up with the latest and greatest if you want to enter the JavaScript game seriously. The channels below will help you do so.
JavaScript Jabber
JavaScript Jabber is the most well-known and long-running podcast on the topic. With almost 200 episodes, you have a large backlog of knowledge at your disposal.
The channel features many different guests and covers a wide range of topics including business skills for developers.
JavaScript Air
Another podcast, however, this one is relatively new. So far only 13 episodes are available.
The show is run by Eggheads instructor Kent C. Dodds who talks with a panel of community members about JavaScript tools and tricks as well as share experiences from their work.
They also occasional broadcast live from conventions and run a similar channel for AngularJS.
JavaScript Weekly
JavaScript Weekly is a curated email newsletter with the best of JavaScript news and articles published every Friday.
Check the archives (dating all the way back to 2010) for past editions and to get an impression on what it has to offer.
NodeUp
As the name suggests, here we have a podcast specifically for Node.js and front end developers. Besides online, you can find its almost 100 episodes also on iTunes and via RSS.
Each edition is between 30 and 60 minutes long and concentrates on one topic such as the Node Package Manager, Node 5.0, modules and more.
Are You Read to Learn JavaScript?
The writing’s on the wall: Anyone working professionally with WordPress will almost definitely have to develop at least some understanding of JavaScript.
Especially front end designers would do well to jump on the bandwagon early and dive deep into the material.
The good news is, now is the right time. The gradual shift towards the JavaScript programming language has just begun and that means you can still hit the ground running.
If you are one of the many people who have included getting to grips with JavaScript in their New Year’s resolutions, you are in luck.
Loads of resources, many of them free, are just waiting to give you a leg up, including standalone courses, books, video seminars, podcasts and more.
If you still haven’t had enough, look into our other articles on the topic. See you in class.
How are you preparing for the WordPress shift towards JavaScript? Do you have resources you can recommend? Let us know in the comment section!
Nick Schäferhoff
Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.
The post 28 High-Quality Resources To Learn JavaScript For WordPress appeared first on Torque.