• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Remkus de Vries

Curiously Questioning Everything

Menu
  • About
  • Updates
  • Blog
  • I read
  • Contact
  • Events
  • NL
  • Remkus de Vries
  • About
  • Updates
  • Blog
  • I read
  • Contact
  • Events
  • NL

Code

Learning JavaScript in WordPress, Deeply

Remkus wrote on 8 December, 2015

If you’ve followed the development of WordPress the last couple of years, you couldn’t help but notice that more and more parts of WordPress, such as the Customizer, are using primarily JavaScript instead of PHP. With WordPress 4.4, the latest version available currently, the amount of JavaScript used has increased once again.

During the State of the Word 2015, Matt Mullenweg made it very clear that this trend will continue to grow in the years to come and urged every single WordPress developer out there to start learning JavaScript. I’ve been thinking about learning JavaScript properly, deeply, for quite a few years now, but not knowing where to start made the first step so big that I actually never got around to it.

The purpose of this post

For a couple of months, I’ve been carefully preparing to dive into JavaScript and the purpose of this post is to outline the steps I’m going to take, which books I’m going to read and which sites I’m going to use to start learning Javascript.

With the REST API being scaffolded into WordPress in 4.4 and with live examples such as Calypso demonstrating how we can build applications on top of WordPress in new ways with JavaScript libraries such as React, we really have no other choice but to embrace what JavaScript can bring to the table.

Now, I’m going to be the first to admit that my JavaScript skills are really poor, but I think that will be the case for a lot of you out there. You may have come across a JavaScript script here and there in your projects, but if you’ve never really taken the step to actually build something from scratch with JavaScript (and WordPress), then you’re exactly where I am at this moment.

A lot of the recommendations you’ll see further down are gathered from various blog posts I’ve seen around the subject. So, even though I haven’t taken all the steps myself just yet, I do consider the recommendations outlined to be solid.

WordPress Already Uses a LOT of JavaScript

So, for starters, it’s good to know that WordPress right now already uses a ton of JavaScript. Particularly through libraries such as jQuery, Backbone or Masonry. But really, that’s just scratching the surface. Go ahead and open up a WordPress folder in your favorite IDE and look up the /js/ folder inside of /wp-admin/ and /wp-includes/. You’ll quickly find that WordPress is already using JavaScript a great deal, but particularly in the Customizer and themes.php for instance.

Navigating in JavaScript Land

They say learning JavaScript is actually not that hard, especially if you’re already familiar with another language, but that doesn’t mean it’s going to be that easy either. JJJ said it best when he tweeted the following during WordCamp US:

The tallest hurdle for WordPress developers wanting to learn JavaScript is the complexity of an unfamiliar stack. https://t.co/g6pSGdMUHJ

— John James Jacoby (@JJJ) December 6, 2015

One of the tallest hurdles is probably going to be more about familiarizing yourself with the complexity of an unfamiliar stack. This is because, if we take the React library as an example, for instance, you’re not just going to have to learn JavaScript first, React second, but you’re also going to have to know which React add-on/plugins – yes, they’ve got “plugins” as well – you should be using to build your project.

How NOT to learn JavaScript

One of the most important rules for learning JavaScript, or any other programming language for that matter, is to not try to learn JavaScript from bits of unrelated or related JavaScript tutorials online. All experts agree that this is the worst way to learn a programming language.

Trying to learn it in such a fashion is an incredibly inefficient process that lacks the proper hierarchical structure needed for learning JavaScript deeply. This, in turn, will most likely lead you to be stuck quite frequently and I suspect that to become very frustrating going forward.

Also, do not try to learn the language by just using online tools such as Treehouse or Codecademy. Even though those will help you to learn how to program bits of small JavaScript tasks, they are not suited for larger projects. It is critically important that you know (and keep practicing) how to code independently (without help from Codecademy) in your browser.

A 10 step program

JavaScript is Sexy is a site dedicated to helping you understand JavaScript. They have a program that I have adapted into a more condensed version here, but do feel free to go for the more complete version should you feel the urge. I’ve mostly removed the variations and extra text and brought it down to a more simple program.

Prerequisites

You don’t need a lot to get started, but you do need the following:

  1. Get yourself a copy of JavaScript: The Definitive Guide
  2. Get yourself an account on Codecademy

Weeks 1 and 2 (Introduction, Data Types, Expressions, and Operators

  1. If you do not already know HTML and CSS very well, complete the Web Fundamentals Track on Codecademy.
  2. Read the Preface and Chapters 1 and 2 of JavaScript: The Definitive Guide.
  3. Work through the Introduction to JavaScript section of the JavaScript Track on Codecademy.
  4. Read chapters 3 and 4 of JavaScript: The Definitive Guide.
  5. Read chapter 5 of JavaScript: The Definitive Guide.
  6. And work through sections 2 to 5 of the JavaScript Track on Codecademy.

Weeks 3 and 4 (Objects, Arrays, Functions, DOM, jQuery)

  1. Read JavaScript Objects in Detail and read chapter 6 of JavaScript: The Definitive Guide.
  2. Read chapters 7 and 8 of JavaScript: The Definitive Guide
  3. Right about now you should be spending a lot of time writing code in your browser’s console and testing if-else statements, for loops, Arrays, Functions, Objects, and more.
  4. Return to Codecademy and complete the JavaScript track by working through sections 6, 7, and 8 (Data Structures to Object 2).
  5. While you are on Codecademy, go ahead and build the 5 little Basic Projects on the Projects track. After this, you are done with Codecademy. The more you work on your own, the faster you will learn and the better prepared you will be to start programming on your own.
  6. Read chapters 13, 15, 16, and 19 of JavaScript: The Definitive Guide.
  7. Follow this free jQuery course: http://try.jquery.com/ And you can read chapter 19 of JavaScript: The Definitive Guide, if you have the book, for more on jQuery.
  8. Work through the entire jQuery course at http://try.jquery.com/

Weeks 5 and 6 (Regular Expressions, Window Object, Events, jQuery)

  1. Read chapters 10, 14, 17, and 20 of JavaScript: The Definitive Guide.
  2. Remember to keep typing out all the example codes in your browser’s console and tweak each piece of code to experiment with it to really understand how it works and what it does.

Weeks 7 and, if necessary 8 (Classes, Inheritance, more HTML5)

  1. Read chapters 9, 18, 21, and 22 of JavaScript the Definitive Guide and read OOP In JavaScript: What You NEED to Know.
  2. Learn Backbone.js Completely, It’s one of the JavaScript libraries WordPress already relies heavily on and you should really understand it if you want to take this WordPress & JavaScript thing seriously.
  3. Learn React.js. Check out how Calypso is built and see what you can improve or change. Maybe even turn it into a bespoke version for yourself?
  4. Next: Decide on a personal project to build, and start building your project promptly (while everything is fresh in your mind).

Back to WordPress

By now you should start to feel really comfortable with JavaScript. You’ve gotten to know Backbone, jQuery and React intimately and you should be ready to create some badass JavaScript projects. The next step will create a JavaScript-based solution to your WordPress project. The only thing left to do for you is to make sure you add your JavaScript to WordPress the right way.

Extra Resources

  • JavaScript: The Definitive Guide (you’ll need it for this program)
  • You Don’t Know JavaScript
  • Super Hero JavaScript
  • Eloquent Javascript
  • Write Better JavaScript

So, there you have it. An extensive 10-week program that will turn you from JavaScript n00b to JavaScript developer. I think it’s safe to say you can not NOT know JavaScript anymore if you still want to call yourself a WordPress specialist by the end of next year. So, I know what I’m going to be doing for the next three months. What about you?

Topic: Code JavaScript, Learning JavaScript

Fix for Git Warning: No merge candidate found because value of config option

Remkus wrote on 6 December, 2012 Leave a Comment

Found myself a dealing with a Git message that took me quite a bit of time to solve, so I figured I’d post it here real quick in case anyone else needs it as bad as I did:

The warning that I got was this one:

Warning: No merge candidate found because value of config option
         "branch.master.merge" does not match any remote branch fetched.

Basically this stopped me from doing a proper git pull on a server I was working on. The solution ended up being a few lines that needed to be added to the Git config file. Just add the following command in your terminal and that should do the trick:

$ git config branch.master.remote origin
$ git config branch.master.merge refs/heads/master

Hope this helps you as much as it did me 😉

Topic: Code Git

10 Things you did not know about WordPress

Remkus wrote on 21 November, 2011 23 Comments

One thing I love equally as much as WordPress is sharing (my) knowledge. If I’m asked to share my knowledge about WordPress then I’m most definitely winning. Big time. Recently I was asked to speak at WordCamp Sevilla in Spain, which I gladly did. WordCamp Sevilla was a two day event and I got to do a presentation on both days. Fun times for sure.

This post is about the first presentation I did which I dubbed: 10 Things you did not know about WordPress. I’m assuming a lot here, but just roll with me ;).

… Continue reading »

Topic: Code Presentation, WordCamp, WordPress

How to use GlotPress for your translations

Remkus wrote on 3 October, 2011 90 Comments

This tutorial is now quite dated. GlotPress is now available as WordPress plugin. This obviously makes installing GlotPress a walk in the park now.

From the first day I started using GlotPress for translating WordPress into Dutch and Frisian, I fell in love with how GlotPress facilitates the actual process of translating. Before GlotPress I relied on PoEdit, but I felt very little love for how PoEdit worked. GlotPress on the other hand, as a webtool, makes translating software as/with a team an actual possibility. For this very reason alone I installed my own installation about a year ago.

GlotPress is based on BackPress, but it is still in early stages of development. Stable enough to provide us with a platform for teams to translate, but it’s certainly not a finished product. As a translation expert / moderator on the StudioPress forums I installed a GlotPress installation for translating Genesis,  and when Joost de Valk from Yoast.com mentioned to me he was working on making his WordPress SEO Plugin fully translated,  I suggested to him he’d start using GlotPress as well. A few moments later I had installed Joost a GlotPress installation for Yoast.com.

So, on to the topic at hand. How to use GlotPress for your translations. Follow the following steps and you should be good to go.

… Continue reading »

Topic: Code GlotPress

When sharing WordPress related code snippets, I can haz standards please?

Remkus wrote on 22 September, 2011 49 Comments

I love WordPress. Just absolutely love it. One of the things I love especially is how you can alter the output by adding just a small snippet of code. Turns out I”m not the only one who loves doing that because when you”re googling any given WordPress related subject, the pure amount of hits on Google can be overwhelming. I love how you can easily copy any of those snippets of code and put “em to use on your site.

But, I believe there”s something missing with all those snippets, at least in most cases. Two things: proper WordPress coding standards and inline documentation. Of those two articles on the Codex there are a few things that you should know about – whitespace, indentation & DocBlocks.

Here’s why. Not only does it make sense to adhere to WordPress coding standards when you’re building code that’s supposed to work with WordPress, but it also makes your code look good. Using function-level DocBlocks makes so much more sense when you think about it. When sharing your snippet – be it long or short – with tags like @author and @link, for example, make a few things a bit more obvious. Specifically, who the author is of the code, copyright information and the url explaining the snippet a bit more (most likely the article you have just written for that snippet). Code standards help especially in these two regards:

… Continue reading »

Topic: Code code, standards

Free Antivirus For Your Windows Home Server

Remkus wrote on 28 June, 2010

Windows Home Server

I have been rocking a Windows Home Server since Microsoft released a beta back in 2008. A great solution for handling automated backups for the various PC’s and laptops in our house, plus it makes for a great torrentserver. One thing I still hadn’t installed, and which was long overdue, was a proper antivirus scanner. Mainly not on there yet, because I couldn’t find an affordable solution since pretty much any company creating those, assume you’re running a business server and don’t mind to pay a shit load of money for their antivirus scanner. I don’t mind paying, but all within reason.

Took quite a bit of Googling but I ended up finding a free antivirus solution that with the aid of a small add-on works perfectly with you Windows Home Server. ClamWin Free Antivirus works with pretty much any ol’ Microsoft OS of late, and our Windows Server 2003 bases Home Server is no exception.

ClamWin Free Antivirus features the following:

  • High detection rates for viruses and spyware;
  • Scanning Scheduler;
  • Automatic downloads of regularly updated Virus Database.
  • Standalone virus scanner and right-click menu integration to Microsoft Windows Explorer;
  • Addin to Microsoft Outlook to remove virus-infected attachments automatically.

Not too shabby for a free solution, eh? You can download it here.

WHSClamAV

The second piece of software you need to install is WHSClamAV. It’s a fee open source Add-In for Windows Home Server using ClamWin. It too comes with some nice features:

  • C# Coded
  • Window Home Server Console Add-In
  • Uses Open Source Based Anti Virus Scanning Engine
    • ClamWin v0.96.1 (Released 15-May-2010) from ClamAV
  • Now Supports International Installations on Windows Home Server
  • Supports Smaller Screen Console Layouts (i.e. netbooks)
  • Automatic Virus Database Updates
  • Windows Scanning and Virus Database Upate Services
  • Ability to scan backup drives

All you need to do is download WHSClamAV and install it like you would any other software and that’s it. Two solutions that together make for a perfect free Antivirus solution for you Windows Home Server.

Topic: Code Antivirus, WHS, Windows Home Server

Primary Sidebar

Be Social

Copyright © 2010 – 2021 Remkus de Vries
WordPress hosting by Servebolt