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.
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.
What is PostCSS?
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!
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.
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.