Why I Hated NodeJS, Gulp, And Sass, And What I’m Doing About It

It’s becoming increasingly difficult to tout yourself as a true “Pro” in the WordPress web development scene without some form of contact with these NodeJS powered package managers, task managers, and build tools. We’ve gone from debating our favorite code editors to arguing over which CSS pre-processor is king. Life was so much easier when all we had to deal with was a simple folder filled with CSS, PHP, and JS files. Or at least that’s what it feels like until you realize you’re being left behind, pining over the best practices of 2012.

But let’s face it, at first glance “Gulp” sounds like some kind of cyber soda. And Sass sounds like something your grandma would give you a dirty look for. And even once you do a little research, you’re left just feeling like the village idiot, knowing what these terms mean, but having no clue how to utilize them, let alone how to even setup a proper development environment.

This was me at one time, to be honest, in the not too distant past. I, like many, had been tucked safely away in my little WordPress bubble, rarely needing to leave my WP Dashboard. Plugins did what I needed, and when I had to code, it was in the more traditional way. But then I faced a fairly large and more modern web development project that required a NodeJS environment, with Webpack, Gulp, and Sass running the show. At first I was a little slow-going as I just didn’t have a ton of experience with these kinds of tools. But once I was able to wrap my brain around this symphony of code compiling and file re-arranging, I realized the true potential of it all.

So yes, that was the moment for me that the light bulb went on and I decided that it was time to not only get with the times when it comes to modern coding practices, but my goal is to provide helpful resources here in the WordPress community.

Frankly, if I can simply help a few of our members truly get how these modern DEV tools work I’d be happy. Even better would be to help them setup their own DEV environments and begin to enjoy the benefits that these tools bring. And if all else fails I can at least utilize my own resources for the projects that come my way. But starting a revolution works too. 😉

Two Major Updates Make All The Difference

I just pushed out Instant IDE 1.2.0 and Themer Pro 1.1.0 and I’m excited by the implications. The goal was to provide a rock solid one-two punch for both WordPress Child Theme development and full-on Node DEV environments, both local and live! These updates started out fairly conservative, but progressed quickly into some really exciting innovations.

First, with Themer Pro (which allows you to easily create custom Child Themes and then intuitively edit their code) I did two major things:

1. I integrated this SCSS PHP script as well as this LESS PHP script to make compiling both Sass and Less files a breeze.
2. I created multiple versions of the available Genesis Sample Theme and Freelancer Child Theme, including a Sass version and a Gulp-ready version.

Then comes Instant IDE. With this update I integrated those same Sass and Less PHP scripts and made some nice UI refinements, but the most notable “features” are the screencasts and support that are coming up (see below). With Instant IDE it’s not so much what any single setting or option can do for you that has the biggest impact on your DEV prowess, but it’s what the package as a whole offers, that’s so exciting. I recently published a blog post about the many amazing uses for Instant IDE and let’s just say that this update put those examples on steroids! Instant IDE went from a useful code editor for those quick tweaks that you need to make on the spot, to a potentially full blown modern DEV workhorse!

Themer Pro 1.1.0 Change Log

• Added SCSS PHP script to allow Themer Pro to compile .scss files without the need for tools like NodeJS and Gulp.
• Added LESS PHP script to allow Themer Pro to compile .less files without the need for tools like NodeJS and Gulp.
• Added a Sass version of the Genesis Sample Theme.
• Added a Gulp version of the Genesis Sample Theme.
• Added a Sass version of the Freelancer Child Theme.
• Added a Gulp version of the Freelancer Child Theme.
• Added TwentyNineteen Child Theme.
• Added .scss syntax highlighting support to Ace Editor.
• Added ability to open and edit .sh files.
• Added ability to view empty files.
• Refined the Child Theme creation functionality so that things like localization, function names, etc.. are reflected by user input.
• Updated the Themer Creator settings to accommodate different versions of the same Child Theme.
• Updated the Genesis Sample Child Theme from version 2.6.0 to 2.8.0.
• Updated Ace Editor script to latest version.
• Increased Ace Editor font size from 12px to 14px for better readability.
• Updated the hooks map to include several new OceanWP Hooks.
• Updated the OceanWP Child screenshot to the latest from the parent theme.
• Removed the Theme Creator “Theme Folder Name” field as it is unnecessary.

Instant IDE 1.2.0 Change Log

• Added SCSS PHP script to allow Instant IDE to compile .scss files without the need for tools like NodeJS and Gulp.
• Added LESS PHP script to allow Instant IDE to compile .less files without the need for tools like NodeJS and Gulp.
• Added build tool icons (e.g.. Gulp, SASS, LESS, etc..) to top of editor to indicate when ability to compile is currently enabled.
• Added Console Snippets feature to provide useful copy/paste examples when using the Console.
• Updated Ace Editor script to latest version.
• Increased Ace Editor font size from 12px to 14px for better readability.
• Updated Font Awesome icons to version 5.
• Fixed folder download zipping so that root directory remains intact.

See The Built-In SASS Functionality At Work

Learn How To Setup A Complete NodeJS And Gulp Powered DEV Site For Themer Pro And Instant IDE

Did I Mention We Have A New Forum?

Oh, that’s number three, right? Yes, I know, I’ve made a hobby out of creating new community forums and then letting them stagnate. Well, part of that is due to the fact that my non-development focus is more on our email support system, but that too is going to change. The fact is that I once ran a ridiculously active community/support forum years ago, back in the Catalyst Theme days. The reason for this was that all of my attention was focused on that forum as that was where our support was provided. That gave the forum consistency and forced me to make sure that the overall interactions in said forum were both positive and productive. This is what I want to reproduce in this new forum.

So why not do this on one of the other two forums, you ask? Well, for one, the first forum has been set to be fully deprecated in the near future. And the second forum never really received much activity in the first place, again because of my lack of consistent interaction there. So I’m shooting for a fresh start and a blank canvas. Also, I wanted to start with more modern forum technology that is not only much faster and more responsive, but allows me to go deeper with NodeJS. That’s why I chose to use NodeBB (to see their git repo, which is what I worked off of, go HERE).

Here Are A Few Points To Ponder Regarding This New Community Forum:

• This is where ALL of our support will take place (except those times when private info is shared) so that everyone else will be able to benefit from such interactions.
• Announcements will be made here. This will give our members a single point of contact for both giving and receiving information that has anything to do with CobaltApps.com. And of course we’ll still send out newsletters and what not, but this will be the primary focus for announcements.
• Members can make their own “Blog” forum posts when they want to share their own stuff. Whether solutions or information or simply what they’ve learned along the way, this will be an ideal place for members to give and receive information, again, in a centralized location.
• Anyone can register an account, not just members. I want to keep this forum setup as a place where information can be freely shared. There is a specific area for product support for active members, but even that is visible to all. We’ll see how this goes, but my hope is that if someone is utilizing our support and resources at this forum, then they will necessarily be using our tools and therefore have an active license for said tools. There’s always the potential for abuse here, but I believe in the it will all pan out for the better.

So be sure to checkout the new Cobalt Apps Community Forum and register and account so you can join the conversation (I know, it’s crickets right now…let’s change that.)