The Alien World of PostCSS, Gulp, NPM

The Alien World of PostCSS, Gulp, npm

Getting started with modern frontend development

I’ve never been much of a frontend developer. In fact, I’m sad to report that I’ve totally neglected to keep up on frontend development much at all. Oh sure, I’ve heard of React and I know that there is a rich ecosystem of frontend tools with weird names, but that’s about all. Being mostly a backend developer, I had never subjected myself to the alien world of PostCSS, Gulp, NPM, and all the other strange-sounding tools available.

Until recently that is.

Finding a good resource

While I can slap together a decent looking layout, I decided that I needed to understand modern frontend development. I needed to understand the tooling, the organization, and the methodologies. I didn’t know where to start, however, so I began looking around for tutorials, courses, etc., in all the usual places. Nothing jumped out at me.

I needed a tutorial that held my hand through the new concepts but didn’t treat me like I knew nothing or that tried to tack on too much. Finding a really good frontend development course proved difficult. Finally, I decided to take Brad Schiff’s Udemy course, “Git a Web Developer Job: Mastering the Modern Workflow“. Yeah, that name. Oof. It was exactly the course I needed though.

What are the relevant topics the course teaches

The main topics that interested me were BEM and PostCSS for CSS and using Gulp and Webpack for organization and automation. I had no prior knowledge of either topic other than hearing them mentioned from time-to-time. Below you’ll find my inpressions on the topics, and how I feel they’ve changed my development workflow and given my a renewed appreciation and respect for frontend development.

so many frontend tools

B.E.M.

What is BEM?
BEM is a methodology that helps you reap the benefits of more structured CSS and UI. BEM strictly enforces Block, Element, and Modifier (hence, BEM) naming rules.

A Block is a standalone entity that is meaningful on its own. Examples include: header, container, menu, checkbox, input

An Element is a part of a block that has no standalone meaning and is semantically tied to its block. Examples include: menu item, list item, checkbox caption, header title

A Modifier is a flag on a block or element. Use them to change appearance or behavior. Examples include: disabled, highlighted, checked, fixed, size big, color yellow

Why was I interested in BEM?
My CSS is normally a shitty mess of spaghetti code that is layered upon other layers of older spaghetti code. I wanted to take advantage of the structure and modularity of BEM. I will admit that sometimes I find myself thinking “Really? 9 modifiers for this element!” – but I fought through because it really does make sense to me. I just need to get better at it.

What do I think of BEM now?
I love it. I’m sold. Partnered with PostCSS I’ve found a methodology that I understand, helps me write much code, and stay more organized.

PostCSS

What is PostCSS?
The PostCSS site says PostCSS is “A tool for transforming CSS with JavaScript”. That sounds so underwhelming, but it is technically true. What PostCSS allows you to is amazing. You can use variables, neatly nested CSS, and take advantage of a simple grid system. The real power with PostCSS lies in its many plugins that offer up any functionality you could imagine. I suggest you take a look.

Why was I interested in PostCSS?
Specifically I wanted to be able to utilize CSS variables, auto vendor-prefixing, and mixins. I found that PostCSS offers so much more.

What do I think of PostCSS now?
I can’t imagine writing CSS any other way. While I’m sure huge advances will take place in the future, for right now I am enjoying the PostCSS magic!

Gulp

What is Gulp?
The Gulp website says gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something

Why was I interested in Gulp?
Well, I WASN’T interested in Gulp per say, but Gulp is a necessary part of using the other tools I wanted to use in an efficient way. Gulp takes my PostCSS and turns it into CSS that any browser can read – and it does it on the fly. Gulp refreshes my browser and injects CSS changes in real time so that I don’t have to keep constantly refreshing it myself. I learned how to write a Gulp task that takes my separate SVG files and turns them into one sprite sheet.

The list goes on and on. To get an idea of all the things that Gulp can do, take a look at its list of plugins. Unreal.

What do I think of Gulp now?
Gulp is really amazing. The time it saves and the convenience it offers cannot be overstated. Gulp is a tool that makes frontend development a much more pleasant experience, and that is the best thing that you can say about any development tool.

npm

npm (the way I’m currently using it) is a package manager for the JavaScript programming language. It is the default package manager for Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages called the npm registry. npm is the way you install plugins for PostCSS, Gulp, etc.

My current thoughts about frontend development

How in the hell did I ever build websites before exploring all this stuff? I have no idea. I do know that I am enjoying frontend development again, my code is MUCH cleaner and easier to support, and I’m not embarrassed to show it to other developers or designers. That’s huge!

The next step in the process is taking this workflow and implementing it into my existing WordPress workflow. The increased productivity and organization that will result are exciting to me. Keep an eye out on a post about my new WordPress workflow soon.

Regards,

Adam