How to Gulp it Down

The intent of this article is to describe how to set up Gulp and explain the relationship between it, Node, and NPM at a non-detailed high level. I believe anything more than that may put you at risk, my dear reader, of confusion. That was certainly the case for me when I started learning this.

Let me begin with this analogy that I hope will explain why developers use it when working on a project. Using Gulp to streamline your workflow is like changing the vehicle you use to drive to your destination from a Ford Pinto to a Maserati Quattroporte.

Think of Gulp as Batman’s utility belt. Within it, there is a wide array of open source packages, or modules, or plugins that can do things like validate and compress your Javascript, remove unused CSS, enable an autoprefixer, transpile Javascript for older browsers, and compress images to name just a few. So how does one find this developers godsend?

It begins with an open source, cross-platform runtime environment called Node.js. Within this massive Javascript framework, there is a tooling library and one of its features is something called the Node Package Manager (NPM). It manages a vast repository of modules or packages that help you automate your workflow. One of them is called Gulp and associated with it are many plugins that perform time-saving tasks.

Please refer to the diagram and follow along with me to set this up on your system. For this, you will make use of your terminal and favourite text editor.

how to set up gulp

1. You will need to install both Node and Gulp on your system. Go to Node.js to get the latest version. After that, open your terminal to do the next few steps. Now install Gulp using this command, sudo npm install gulp -g. Your password will be required because this will install it globally.

2. It’s time to create the files and folders in your project directory that will work together to make Gulp work. Create a file called package.json with this command, npm init. This will take you through the steps of creating that file. You can type npm help json for the reference guide. As you may have guessed, this file will be in JSON format. Its purpose is to hold the plugins you will add to your project. More on that later.

3. Time to create another file. Type touch gulpfile.js. This is where the magic will happen. It will contain specific tasks that automate your workflow. The plugins will be imported to it from the package.json file.

4. Although Gulp is installed globally, you now need to install it into your project folder. Type npm install gulp --save-dev. You will now notice that there is a massive folder inside your project directory called node_modules. This contains all the files and dependencies that are required by any plugins you add. They will be linked to the tasks you write in gulpfile.js.

5. The bulk of the setup is complete and now we get to the heart of the matter. Since there are so many plugins, I will only use one as an example for the sake of keeping this post short. A popular one performs the task of merging multiple CSS files into one, aka SASS. All associated plugin dependencies will be downloaded into the node_modules folder and the plugins will be stored in package.json. Type npm install gulp-sass gulp-concat --save-dev. Verify this worked by looking at the new gulp plugins in your directory.

6. Finally, a task can now be written in gulpfile.js. Open this file in your text editor and create paths to the plugin’s dependencies in the node_modules folder by creating some variables.

"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const concat = require("gulp-concat");

Now to write the task,

gulp.task("styles", () => {
return gulp.src("./yourfolder/styles/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(concat("style.css"))
.pipe(gulp.dest("./anotherfolder/styles/")) });

To run this task, simply type gulp styles. However, to make this more convenient, a watch method can be created to make the styles task run every time a change is made to a .scss file, like so,

gulp.task("watch", () => {
gulp.watch("./yourfolder/styles/**/*.scss", ["styles"]); });
.

Phew! It may seem like a lot of setup for only one Gulp task, but the Gulp ecosystem is vast and depending on the nature of the project, each one can be tailored with its own specific set of plugins. For reference, here is a registry of close to 3000 of them. That’s a bit to swallow for an introduction to Gulp but its advantages are huge.

Give praise to all the coders who have written these helpful tools for our use.

Sorting out the sort() Method

Javascript sort() is one of four handy methods to loop through arrays. The others are map(), filter(), and reduce(), but we’ll stick to sort() for now. Of course, you can read up on it at developer.mozilla.org, but I find this doesn’t adequately give you a full understanding of how it works.

Within that article, “some ordering criterion” is mentioned. But what are they talking about? What “ordering criterion”? Sure it works, but I’ve never been satisfied with these black box explanations. If you happen to be one who is, then stop reading now.

Let’s consider a simple descending numerical array that we want to convert into an ascending one.

sort an ascending array

Pretty straightforward. But hang on. The sort() method also accepts an optional parameter in the form of a function. This can be quite useful in cases where, say, you want to alphabetically sort a list of songs but want to ignore any articles such as ‘The’ that the title may contain. A little more coding would be required, but I will stick to the simple numbered array example to illustrate further. The following code will do the exact same thing.

alternate sort method

What are a & b? Why does it return a 1 and -1? Where does it return them to? ?

All right, so as if by magic, our array is converted from descending to ascending, but how? What’s the algorithm? The fact is, every browser has its own methods for interpreting and displaying HTML on the screen. So it shouldn’t be surprising that they also have their own unique sorting algorithms. Hmm, so how does Javascript handle this?

In short, Javascript doesn’t care what algorithm each browser uses. The sort() method provides only enough information for whatever algorithm is being used. Let’s get back to my confused friend’s questions and then we will compare Chrome to Firefox.

The values a & b are any two elements within the array. I use the word ‘any’ intentionally because sort() will loop through the array and compare these two values. In doing so, there will only be 3 possible outcomes: 1. a > b, 2. a < b, and 3. a = b. Depending on the criteria you use, case 1 may return the value 1 and case 2 return the value -1. Case 3 will obviously do nothing.

The magnitude of the returned numbers is not important, only whether they are positive or negative. You can use ‘return +27’ and ‘return -14’ and it will still work. But return that value to where? It is delivered back to the sort() method because it needs that information to determine if the order of the two compared values are to be changed or not.

Let’s now have a look at how two different browsers handle their respective sorting algorithms. The numbers in red are the a & b values that the algorithm will compare. You will notice that in Chrome, the values simply switch their positions, whereas in Firefox, a single value is moved in front of the one it is being compared to.

chrome vs firefox

The Firefox algorithm seems more efficient as it is saving us 3 sorting steps in this example. But as already mentioned, the sort() method doesn’t care. It can go home happy knowing it’s sorted everything out.

Update ACF without Reloading through AJAX

I tried to shorten that title as much as I could, but basically this article will explain, at a high level, how to update an Advanced Custom Field (ACF) in your WordPress theme by submitting a form through an AJAX request.

Why an ACF? Well, it doesn’t have to be for that. It’s only an example I’m using to demonstrate how data or inputs can be moved from a user form to the back end. Once you obtain the data in this way, you can do whatever you want with it.

Why through AJAX? This is the best part – it all happens without the browser having to refresh the page. (It’s done asynchronously.) Take a look at the diagram below and follow along with me.

how to send inputs from a form on wordpress to a function through ajax without reloading the page

Continue reading

The Dreaded Update

By sheer quantity alone, yes, they’re annoying. Another new WordPress version arrives or one of the many plugins residing in your theme, and oh yes, a theme update too. There are the minor updates for fixing security bugs, like 4.1.1 to 4.1.2, and the major updates for new features, like 4.3 to 4.4. Along with the inevitable update, so too comes the same fear and confusion. What is the risk of using the latest version? Will a conflict arise? Will my site blow up? Fear and the unknown have always been good friends. For this case, allow me to try to break up that relationship by sharing some known stuff.

sirens

Using the latest version really is for your benefit. First, it’s best to understand why updates happen. There are a few good reasons, but number one is security.

Continue reading

By the Numbers

At the time of this writing, WordPress, the free and open-source content management system (CMS), is almost 13 years old. Since its first release in 2003, its growth and popularity is beyond questioning. This article attempts to define that popularity into numbers. These monitored numbers are only a small sampling of measurements taken from various sources.

wpNumbers

We are still in a time where the growth of WordPress is strong, so the more recent a source of WordPress information you find, the higher these numbers are. But regardless of their accuracy, you can still draw your own conclusions from them below.

Continue reading

A WordPress Site is Born

My inspiration for this topic comes from a common question asked of me from several people and clients. It goes something like, “What’s involved in the creation of a WordPress site and how does it work?”.

So,…this article is about a web development process – a process that creates a WordPress site. I also add, in brief, the underlying concept of how the pages of the site manifests itself on your browser. Let’s please stand back from all that scary code and look at the broader picture.

Continue reading

Page 1 of 212