jQuery

jQuery has gotten a bad rap lately, and that's largely because where in the past it solved a lot of problems with backwards compatibility, those issues have disappeared up to a point in modern browsers. However, it's so prevalent and already installed in most websites that you should be familiar with the framework, especially how the $ selector engine works, chaining and complex selectors. If jQuery is already installed on your site (and chances are, if you're using either WordPress or Bootstrap, it already is), then you're doing yourself a disservice by not knowing where it can save you time and add some backwards compatibility when you must support older browsers.

!jQuery

On the flipside, you need to learn when jQuery is unnecessary and if it's not preinstalled in the stack you're using, then you're doing a disservice to your site by adding it just because you need a simple AJAX call or want to add form validation or some other pre-built feature. You need to know things like the querySelector, how to clone or destroy nodes manually so that you don't end up loading a huge library, when a straightforward DOM selector already exists.

jQuery's features are like the dark side of the force, seductive and easier, but you'll be a stronger developer if you force yourself to learn how to work without them. It's up to you to figure out when it makes more sense to use jQuery, but be strong enough to know when you should stay away.

NodeJS & NPM

NodeJS has changed the way front end developers work, and sometimes in a rather subtle way. It drives workflow technologies like Gulp, Grunt, PostCSS, Webpack and others that can help you make your life easier, so you owe it to yourself to spend some time learning how to program with Node. Learning the node way of doing things will make you a better developer by making you learn best practices and think about modules,learn about routes and other techniques. Even if you don't end up developing a site so that it runs on a node server, you'll still benefit from the structure and process of creating node apps or modules.

At the very least, learn how to work with NPM, the Node Package Manager. It's crucial in understanding how to use workflow management apps. You also need to understand what a package.json file is and how to install, remove and manage node modules.

Workflows

Learning to code is great, but we all make mistakes and could use a little help, so creating workflows is how you get things done with a minimal amount of errors and with future or modern features that can compile to be compatible with older browsers.

Some editors IDE's like Visual Studio and Webstorm will help you with tasks like code completion, linting, transpiling and pre-processing, but only if you know how to use them. Spending some time mastering your editor is way more important than trying to find the perfect editor. Get better with what you know and if you're like me and want something more configurable, look for NodeJS based tools like Gulp, Grunt or Webpack that will help you work well in a shared environment and give you some of those same capabilities without the overhead. Within a team, you can develop coding standards and styles that can be shared so the team is on the same page.

Creating a Workflow is about building a set of processes that make your life easier. It's guaranteed to help you code faster, with added features and less errors. Who wouldn't want that?

Git & Github

Modern development would be nothing without Open Source tools. And Github is where most of those tools live. In order to master Github, though, you need to learn about Git, the version control system at Github's core. Git fundamentally changes the way you work with your code in the same way that things like copy and paste and unlimited undos changed the way you worked with documents. Learn to create repos, branches, commits. It takes some time to get used to Git, but that time will be well worth it the next time you roll back to a previous commit state. In the same way, Github changes the way you work with others, because it gives them the ability to comment, branch, star and even submit bug reports.

Pre-Processors & Transpilers

I'm a big believer in working smarter, and that means spending time on technologies that help me become more efficient. Therefore, I love things like Sass, Less PostCSS and others that give languages new capabilities. Once you've learned how to work with CSS variables, you'll never go back to plain CSS. In the same way, the ability to work with functions (mixins) and extends makes your code smarter by allowing you to create reusable bits of code. Today some of these libraries, like Sass have been ported over to JavaScript for blazing performance and without requiring a Ruby install.

PostCSS eliminates the need for prefixed code, has a large library of plugins with Sass-like features and can even help you use future CSS features today. Another hot new technology...transpilers like Babel let you use ES2015(ES6) in today's browsers or use languages like TypeScript that add interesting new features to your programming arsenal. If you aren't taking advantage of these workflow enhancements, then you're wasting time writing CSS/JavaScript and falling behind on what you can do with programming languages today.