Useful JavaScript Tools For WordPress Developers

Dear programming friends, web makers, code tamers, compulsive semicolons lovers, and WordPress Hackermans. Do you really still use <table> and suffer from severe <div> illness? Don’t worry, fortunately there is a solution for you all.

Leave the 90’s behind once and for all and become a hipster web programmer! As our beloved leader Matt Mullenweg said a few years ago: learn JavaScript, deeply!

The future is today. And it’s time to leave our comfort zone (a.k.a. PHPland) to take the leap and be prepared for everything that is about to reach the WordPress world, thanks to the introduction of Gutenberg in particular and JavaScript in general.

Today there are a lot of JavaScript tools that allow you to tune your code with little to no effort. In this post I’ll introduce you to some of these JavaScript magic. Maybe you heard about some of these tools, but do you really know what they’re for?

No more excuses! I’m sure that after you’ve finished reading all this, you’ll want to try some of these JavaScript tools. Your productivity and programming hypsterism will take an incredible leap forward in quality. Let’s go!

Prettier – Beautify Your Code Automatically

Let’s start with something simple. I’m sure that if you’ve been programming for some time and have worked on a team or had to share code with someone else, you’ve had this problem. Tabs or spaces? Parenthesis on the same line or the next? 80 characters per line or more? In short, the way in which you format or indent your code can lead to heated discussions…

Coding guidelines are often used to solve this type of problem. And WordPress is no different in this case. If you want to contribute to WordPress, your HTML, CSS, PHP and JavaScript code has to follow the defined guidelines.

What Prettier does is format the code according to the configuration you have chosen. This way, once you save your JavaScript file in your editor (there are several editors compatible with Prettier, including my beloved Atom), the code is transformed and standardized. Therefore, all the members of your team, independently of how they write the code, will end up generating files with the same unified style.

If you want to try it yourself, just use its Playground, which is directly accessible from the Prettier website. Write your JavaScript there and you will see how it looks after the transformation. On the other hand, if you want to install it on your computer, npm is your friend:

npm install -g prettier

and to test it you have the prettier command, which you can use as follows:

prettier ./my/file.js

This command will apply the transformation to the ./my/file.js file and display the result in the command line terminal.

WordPress considered integrating Prettier into Core, but it looks like it didn’t happen in the end (you can see the discussion here). But once Prettier adds PHP support (it’s in the making) it may find a place in WordPress Core.

ESLint – Improve The Quality of Your JavaScript

ESLint allows you to detect problems with your JavaScript code before running it in order to solve them before it’s too late. In addition, it’s also able to tell you about changes you should make in your JavaScript code to make it compatible with certain guidelines (including WordPress).

You can take a look at the online demo on their website to see the typical errors that ESLint can find in your JavaScript. On the other hand, if you want to test ESLint on your computer, just use the following npm command:

npm install -g eslint

Then, set up a configuration file (.eslintrc, which you can modify later):

eslint --init

And that’s it. Try it with a JavaScript file directly from the terminal:

eslint ./my/file.js

As a result you will see the problems that this file has (errors and warnings) as a result of applying the eslint command.

Nelio Forms

A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.

Wajari Velasquez

WordPress.org

Free Download

Premium Version

PostCSS – Transform Your CSS Styles

When it comes to web development, I must confess one of the parts I hate the most is dealing with CSS. It can be a nightmare to take everything into account so that your CSS works as expected in all browsers.

Lucky for me (and for the rest of web developers, of course), there are tools that help you work with CSS. The one we use the most in Nelio is PostCSS. Thanks to it, we can forget about browser compatibility prefixes (-webkit or -moz, for example). In addition to this it includes CSSNext, which allows you to use today the CSS syntax of the future.

To test it you can go directly to the Playground of their website. Or you can also try the CLI version from your terminal:

npm install -g postcss-cli
postcss-cli ./my/file.css

But most commonly you should include a PostCSS package compatible with your code editor (again, Atom ?) or configure it in Gulp or Webpack (or whatever you use to process your source files and generate your final code).

Babel – Use The Next Generation of JavaScript Today

Babel is a JavaScript transpiler that allows you to use future JavaScript syntax today, without waiting for browsers to support it. It works just like PostCSS for CSS, but in this case it’s for JavaScript. For example, with Babel you can use arrow functions in your JavaScript code. Here is an example of the original code and the code after passing through Babel:

Again, if you want to try Babel you can do it directly from its own website where you can write the JavaScript you want and see the JavaScript resulting from applying Babel. On the other hand, you can install the Babel package and test it on your own terminal:

npm install -g babel-cli
babel ./my/file.js

The result of the command is the JavaScript code transformed to be compatible with all current browsers. As with PostCSS, look at the instructions to install it in the way that best suits your project (Gulp, Grunt, Webpack…).

Webpack – Organize Your Code Better

I don’t want to miss another JavaScript tool that’s also included in Gutenberg. This is Webpack, a code packer that takes all the dependencies of your project, generates a dependency network, and is capable of creating packages to make it easier for you to work.

Webpack is a bit complicated to understand at first… So, here’s an example extracted directly from its website that should clarify how it works:

In the image above you can see that you have two JavaScript files: app.js and bar.js. The point is that app.js relies on bar.js (and this in turn could have many other dependencies). The whole issue of dependencies can be a torment, but with Webpack it’s much simpler.

You have to create a webpack.config.js file like the one shown in the image, and establish app.js as the initial entry point and bundle.js as the output file you want to generate, which will obviously include all the required dependencies. Once this is defined, simply execute the webpack command tow automatically create the bundle.js file. Add it in your HTML file and you’re done!

The idea is that you define bundles from initial entry points and then forget about them. Dependencies are managed by Webpack itself. This is very useful when we have projects with a lot of files and modules, such as Gutenberg.

Personal Opinion

Whether you want it or not, today the odds of your using one of these JavaScript tools are enormous. Many web projects, such as WordPress themes and plugins, include them. Even Gutenberg makes use of a lot of utilities of this kind.

You don’t have to learn them all at once, but it would be nice if you were to integrate some of them little by little into your developments. And remember, if you use any other outstanding tools, leave us a comment with your experience.

Featured image by Charles Deluvio ?? on Unsplash