Understanding CSS Writing Methodologies

BEM’s site also lists how the block, element and modifier segregation can also be brought into the CSS file system. The blocks like “buttons” and “inputs” can have their own folders consisting the files (.css,.js) that are associated with those blocks, which makes things easier when we want to import those blocks in other projects.

A “block” is essentially the same as an “object”(from the example before), an “element” refers to the components of the block (image, title, preview text in the above preview-post- objects). A “modifier” can be used when the state of a block or element changes, for example when you add an active class to a menu item to highlight it, the active class acts as your modifier.

In OOCSS, the very first step that Nicole proposes we do is to identify objects in CSS.

Cons of BEM:
To keep the names sane-looking, BEM advises that we keep block to element nesting shallow.

CSS Methodology

Pros of BEM:
Easy to use class names and reduction in deep CSS selectors.

Nicole also suggests to not add styles based on location, for example, instead of targeting all the links inside a particular div to highlight, give those links a highlighter class with the appropriate CSS styles. This way when you need to highlight a link in some other part of the page, you can reuse the highlighter class.

Pros of ACSS:
Styling HTML without leaving HTML.

  1. OOCSS (Object Oriented CSS)
  2. BEM (Block, Element, Modifier)
  3. ACSS (Atomic CSS)
  4. SMACSS (Scalable and Modular Architecture for CSS)

We need to separate structure and skin (ie styles that create the objects’ appearance). The two types of objects have different structures, one is in a larger box even though they look similar, with images to the left and titles to the right.

1. OOCSS

We have here two types of objects, a bigger preview of titles which we will name post-preview-primary and a sidebar with titles which we will name post-preview-secondary.

oocss

The above CSS methodologies will give you a system to manage and optimize your CSS codes. They can be combined together, like OOCSS-SMACSS, or OOCSS-BEM, or BEM-SAMCSS to suit your needs.

Let’s give the images of both objects a class post-preview-image and add the code that puts the image on the left. This stops us from having to repeat the code of where to put the image inside objects in CSS. If there are other similar objects, we reuse post-preview-image for them.

OOCSS Objects

Once you’ve identified the components, name them accordingly. For example:

“SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. – Jonathan Snook”

Skin separation can also be done for simpler styles like borders or backgrounds. If you have multiple objects with the same blue border, creating a separate class for the blue border and adding it to objects will reduce the number of times the blue borders have to be coded in CSS.

Cons of SMACSS:
None I can think of.

A methodology is a system of methods. Think of a method as simply a way of doing something in a systematic manner, in a certain preset way of doing things to achieve the result we want.

The naming can be modified to what works for you. The idea is to be able to identify, blocks, elements and modifiers from the class names. Check out some of the naming system listed in the BEM site.

Our preferred methods have either been established on our own over time or influenced by others or required in our workplace or due to all of the above. But over time, CSS veterans have formulated methodologies to write CSS that are more flexible, defined, reusable, comprehensible and manageable.

2. BEM

Cons of OOCSS:
Without a fair amount of repeating visual patterns, separating structure and visual style codes seem unnecessary.

bem

SMACSS identifies 5 types of style rules namely base, layout, module, state, and theme.

Cons of ACSS:
Too many classes, not very neat and you might hate it.

  • a menu block will have the class menu
  • its items will have the class menu__item (block and element are separated by double underscore)
  • the modifier for the disabled state of the menu can have the class menu_disabled (modifier delimited by a single underscore)
  • modifier for the disabled state of a menu item can be menu__item_disabled.

For modifiers, we can also use key_value format for naming. For example, to distinguish any menu items that link to obsolete articles, we can give them the class menu__item_status_obsolete, and for styling any menu items that point to pending documents, the class name can be menu__item_status_pending.

Below is an example of classes based on ACSS and how they’re used in HTML.

To get better results, we improve our methods by planning them better, changing up the order, simplifying steps – whatever that works faster and is more efficient.

It’s hard to determine when ACSS (Atomic CSS) was first developed since the concept has been in use for a while now. Developers have been using classes like .clearfix{overflow: hidden} for a long time. The idea in ACSS is to have a class for pretty much every reusable non-content related property-value pair we’ll need in our site, and to add those classes when needed to the HTML elements.

In this post we’re going to see what CSS writing methodologies are, some well known methodologies, and how they can be useful to us in optimizing our CSS code. Let’s start with the simplest question to get the ball rolling. What is a methodology?

3. ACSS

Take for example this structure from this site. Here’s something that is a repeating visual pattern and has its own independent HTML and/or CSS:

acss

Made famous by Yahoo, somewhere near the end of the first decade of the 21st century, ACSS’s key concepts consists of creating classes for the most atomic level of styling i.e. a property-value pair, then using them in HTML as needed.

Note: None of the concepts mentioned below should be confused with any framework, library or tool that may have the same name and concept as these methodologies. This post is only about the methodologies to write CSS.

Now let’s talk about CSS methodology. Just like with just about everything in life, we’ve a method of writing CSS too: some write reset CSS first, some place layout styles last, some start with two to three classes for styling an element, some write all the CSS codes in a single file.

The different style rules can be identified using a prefix in the class name for example, l-header (for layout) or t-header (for theme). We can also organize these different types of rules by placing them in separate files and folders.

“Basically, a CSS "object" is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. – Nicole Sullivan, Github (OOCSS)“

4. SMACSS

Developed in 2011 by Jonathan Snook SMACSS (Scalable and Modular Architecture for CSS) works by identifying the 5 different types of style rules. Class names and filing system are created based on these.

There’s a free online book you can read about SMACSS, or you can buy its ebook version to study it more.

smacss

We’re going to look at those formulated methodologies, which will include:

  • Base styles are the default styles directed at the basic HTML tags like <p>, <a:link>.
  • Layout styles are styles used to define the layout of the page, like coding where the header, footer and side menus will go.
  • Module styles are specific to a module like gallery or slideshow.
  • State styles are for highlighting elements with changeable states like hidden or disabled.
  • Theme is used for changing the visual scheme of the page.

There are also frameworks and libraries if you want an automated system for executing CSS methodologies such as:

 .mr-8{margin-right: 8px;} .fl-r{float:right;} <div class='mr-8 fl-r'> </div>

As you can see, the number of classes will get high with this method and the HTML will be crowded by all those classes. This method isn’t 100% effective but can be made useful if wanted. Yahoo uses this after all.

Pros of SMACSS:
Better organized code.

Developed by developers at Yandex in 2009, the key concepts for BEM (Block, Element, Modifier) encompasses identifying block, element & modifier and naming them accordingly.

Conclusion

Developed by Nicole Sullivan in 2008, the key concepts of OOCSS (Object Oriented CSS) includes CSS object identification, separation of structure and visual styles, and avoiding location based styles.

Pros of OOCSS:
Reusable visual styling codes, location flexible codes, reduction in deep nested selectors.

  • OOCSS framework
  • BEM tools
  • Organic CSS framework (follows atomic concept).


10 Reasons Why You Need Code Optimization

Code maintenance usually gets little respect in developer circles, but it still can be a rewarding task if we follow best practices, such as using reliable version control, dependency management, staging and testing platforms, and properly take care of documentation.

Accomplishing complete consistency is hard, as ensuring backward compatibility can eventually get in the way of improvement, but paying attention to using coherent code guidelines, compatible APIs, and consistent standards can surely lessen the pain.

Although optimization problems are not the only one developers regularly deal with, for instance there are decision problems and searching problems as well, optimization is the task that encompasses the different stages of web development probably the most.

Keeping code consistency in mind is especially important when we need to deal with legacy code, or in cases of larger projects that involve many developers.

The benefits of code optimization grow in line with the growth of our project, and as even initially small projects can become large with time, acquiring solid code optimization skills almost always have measurable positive results.

Apart from the already discussed code optimization methods, feature development can also gain momentum if we keep up with modern project management methods, for example if we use iterative lifecycle models instead of the traditional waterfall model.

Code optimization can happen on different levels, depending on how close the optimization we carry out is to machine code. In web development we can only perform higher level optimizations, as Assembly- or runtime-level optimizations are not an option for us, but we still have many opportunities.

1. Cleaner Code Base

IMAGE: Freepik

This is the reason why big projects, such as WordPress, jQuery, and Mootools, have clear coding style guides every developer involved needs to follow.

2. Higher Consistency

It frequently occurs in web development that we inherit code from someone else, and quickly understand that it is far from being optimal, whether in terms of structure, performance, or maintainability. The same thing can happen with our own previous projects that we wrote when we had much less experience in programming.

In other cases the goals of an otherwise great project change over time, and we need to prioritize other things in the application than before.

3. Faster Sites

Consistency is like housework, when it’s properly taken care of no one notices it, but when it’s neglected the whole place looks messy, and we find ourselves in chaos.

IMAGE: Freepik

Agreed upon best practices and style guides can bridge the gap between people from different backgrounds, not to mention the usual communication hardships between design and development teams in most web projects.

In software maintenance, we are already at a stage where we can catch real performance and efficiency problems, and work with real users instead of hypothetical use cases.

4. Better Code Readability

Luckily we have many well-tested techniques on our hands that can make refactoring a smooth-running process.

IMAGE: Freepik

Debugging takes up a significant portion of the web development workflow, and it’s usually a tedious or even daunting task. It’s hard enough if we have to debug our own code, but it’s much worse when we need to find the bugs in someone else’s, especially if it’s something like neverending spaghetti code that uses nothing but functions.

  • using coherent naming conventions with meaningful names, such as BEM
  • consistent formatting with logical utilization of indentation, whitespace and vertical spacing
  • avoiding unnecessary noise, such as self-explanatory, obvious comments

It’s basically impossible to completely avoid technical debt, as even good decisions can be less desired consequences in the future, but if we diligently optimize our code, we will surely be burdened with a much smaller technical debt.

5. More Efficient Refactoring

Faster code entails shorter page load times as well, which is a big deal in both of the worlds of search engine optimization and conversion marketing. Research says that “nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds”, so speed is clearly not an area that we can safely ignore.

Smart design and architectural patterns, such as using objects and different modules, and clear coding guidelines can facilitate the debugging process, even if most likely it still won’t be our most beloved task.

Code optimization is also workflow optimization, as if team members speak a common language and share the same declared goals, they will also be able to work together without much less hassle.

Optimizing code is similar to buying a faster car. As a result, our code executes more rapidly, and our site or application consumes less memory than before. Although the optimization process may require additional time and money, the result is a better experience, not just for developers but also for end users.

6. More Straightforward Debugging

Whatever technique we choose to go along with, there’s a rule of thumb that every code optimization endeavour needs to follow: we always have to carry out the optimization in a way that doesn’t change the meaning of the code.

As a project matures, and more and more developers start to work on it, duplications and overlaps usually sooner or later appear, and suddenly we realize we hardly comprehend what’s going on.

7. Improved Workflow

We can protect ourselves from the pain of dealing with indecipherable code if we apply certain code optimization techniques, such as:

Constant innovation is the core of staying relevant in our field, as in if we haven’t show anything new to our users in a while we can quickly be left behind. Extending a project, and adding new features to it is usually much faster if we work with a well-optimized, clean code base.

Although building something from the ground up tend to be more fun than maintaining pre-existing code, sometimes we still need to perform ongoing code maintenance. Working with already existing systems can also give us new views on code optimization, as it’s a different experience than early optimizations in a new project.

8. Easier Code Maintenance

It’s not a coincidence that keeping the DRY (Don’t Repeat Yourself) principle in mind is one of the cornerstones of effective software development. A well-strutured, carefully optimized code base in which we are able to reuse the same elements multiple times is always sleeker and tidier, and therefore is much easier to understand and work with.

IMAGE: Freepik

These less-than-optimal decisions usually manifest themselves in the form of quick fixes, copy and paste programming, hard coding, cargo-cult programming, and other coding antipatterns and sloppy work habits.

We can optimize our code at the architectural level with smart design patterns, at the source code level by utilizing best coding practices and using appropriate tools, and we can also improve the performance of our team by introducing coding style guides into our workflow.

Readability is an important aspect of code maintainability. Untidy code with ad hoc formatting is hard to read, therefore hard to understand, especially for developers who are new to a project.

9. Quicker Feature Development

The term "technical debt" was coined by Ward Cunningham, the programmer who also developed the first wiki. It compares the consequences of our bad programming decisions that accummulate over time to financial debt in which people pay interest in the future in order to quickly get money in the present.

10. Smaller Technical Debt

We speak about refactoring when we change (clean up) existing code in order to optimize it without changing any of its functionalities. Refactoring needs to be performed with great care, as if it’s done in the wrong way, we can easily end up with a code base that’s even less optimal than the original was.

Many web development projects are run by distributed teams, such as open source communities or remote teams. One of the hardest things in managing such a workflow is to find a way that makes communication effective enough to enable team members to easily understand each other, and not to have to constantly discuss defaults.

While we write code, we continuously make decisions and choose between solutions that may seem equivalent at first. Later it usually turns out that some choices result in a more efficient program than others, so a quest for best coding practices and optimization techniques naturally arises, and we begin to see the whole development process as an optimization problem to solve.


Fresh Resources for Web Developers – March 2016

fresh resources for web developers

The New Web Typography is an in-depth, eye opening essay on typography. It discusses the styles from the early days of books to the current way we build and consume on the web. Well-researched with multiple illustrations, and fully referenced, it is a lengthy article by Robin Rendle, but definitely worth reading to gain a better understanding of typography.

JS Tips

Color Safe is a color generator palette for the web. Unlike tools that we have been previously mentioned in this series, ColorSafe will only generate color that comply with the WCAG standard for color accessibility.

JavaScript Tips Machine llustration

Vagrant Manager

Vagrant Manager OSX Control Bar

Bulma

In our last instalment we focused on the various Javascript and CSS libraries to help build better websites and web applications. This month, we have more libraries to recommend alongside a small focus on typography.

This library adds floating particle networks on your website, simply to make your website look cooler instantly. The particles will react to the cursor movement. The reactions as well as other elements like colors, distance, and shape can be configured through the options.

Bulma Logo

Gutenberg

OkayNav is a jQuery to build a responsive navigation, but not just yet another one. The plugin has a slightly different take on responsive design: as the viewport is resized down to smaller, each menu will be gradually merged in an icon to tolerate the limited viewport size. Sounds cool, doesn’t it?

A Gutenberg press replica at the Featherbed Alley Printshop Museum, in Bermuda

OkayNav

Bulma is a frontend framework. The package includes some common UI components of the web like navigation, dropdown, and (of course) the grid which is built entirely with Flexbox. The only feature missing (at least, for now) is the JavaScript components. Bulma components is much slimmer compare to Bootstrap, but it should sufficient to build a small but presentable website.

OkayNavigation Sliding Menu

New Web Typography

Named after Johannes Gutenberg, the mass press inventor. Gutenberg is a collection of style rules for proper typographic setting on the web. The style rules set the base line, font size and scaling, and line-height. A great style library to make your website content look a lot better.

Mo.js is a complete package of JavaScript animation library. It comes with a couple of presets so you can set and run the animation quickly. It is modular, allowing you to remove unnecessary functionality, as well as fluid and smooth. Being a fresh new library, unfortunately, the documentation is not yet ready (for now).

Typographic Illustrations

Color Safe

In this round of the series, you will be looking at a few JS libraries that you will find use for but also a collection of tips, a very long essay on typography, a color generator and lightweight frontend framework. Without further ado, let’s check them out.

Color Safe Website

Accessible Modal Dialog

Vagrant Manager is GUI application to control Vagrant. Similar MAMP, where you can stop or run Vagrant, and see which Vagrant is currently running. The app is available for OS X and for windows. If you are not sure what Vagrant is, check out our previous post on How to install WordPress locally with Vagrant.

A dialog modal with an input form

Mo.js

JS Tips is a collection of JavaScript tips, some of them revolving around syntax, some about code efficiency and performance, and some others are specific to a framework like AngularJS. New tips are added daily and there are currently 50 tips issued. It is essentially a must-bookmark site for every web developer.

Mo.js Website Preview

Particles

This is a tiny (only ~0.5kb) JavaScript library to build a modal dialog window. Being accessible, users are able to easily open, close, and navigate through the dialog with a keyboard and a mouse. The package is simply bare JavaScript, no stylings, so you can freely shape the dialog modal in any way you like.

Particle Demo


Fresh Resources for Web Developers – February 2016

Apple’s Force Touch basically measures finger pressure on the screen or trackpad, which can be used to add extra functionality. Developers can take advantage of this technology to add usability to their native OS X or iOS applications. PressureJS is a JavaScript library that hooks into the Force Touch APIs and allows you to apply it to your websites.

tools for designers developers

Many of the tools and apps for developers found on the Web evolve according to trends while some evolve to be a more pragmatic solution.In this month’s installment, I’ve decided to spend more time finding resources that may not appear to be as obviously useful, but still stand out in their respective categories.

OverPass Font

Wee is more than just another CSS framework. It is packed with lots of components to help with the building process including a built-in server, live reloading, sourcemap, minification, code validator, and static site generator. It also comes with its own JavaScript libraries with features to enhance your website’s frontend.

More resources on accessibility:

OverPassFont Cover

Pa11y

SplitJS is a lightweight JavaScript library that allows you to split the browser window viewport into several sections. You may have seen it commonly use in code-sharing webapps like CodePen.io, JSFiddle, or JSBin where the HTML, CSS, and JS working spaces are separated into their own sections.

Debugging in JavaScript could be very tricky. Your users may experience errors which you probably did not experience during development and deployment because you already have the perfect setup. The tricky here is that the error is only logged into the user’s browser. With OhCrash you can now put the log into your Github repositories, so you are more well informed about the error.

  • The Modern Web and Accessibility [Video]
  • Playlist: Accesibility by Thomas Bradly [Video]
  • A Look into ARIA Web Standards & HTML Apps Accessibility
Pa11y dashboard report

PressureJS

Pa11y is a tool to test your website accessibility with less of the hassle, through the beauty that is automation. You can use the command line interface or setup via the dashboard if you prefer a colorful, interactive interface. Pa11y will produce a report, showing the areas to fix if you want to improve your website accessibility for various disabilities.

App with pressure touch function

SplitJS

Grav is a flat-file-based Plugins, much like WordPress. For example, you can install to add Administrator Panel, Shortcodes, Comments, Forms, and Sitemap. It is overall a great CMS which may also be a great contender for a more established CMS.

Split Screen in FiddleJS

FlexibilityJS

We have a nice-looking font which may be your Helvetica Neue replacement, a JavaScript library to test touch pressure, and a handy tool for JavaScript error logging. Let’s check them out.

Example of Web App fully built with CSS Flexbox

LabellaJS

LabellaJS makes creating a labeled timeline so much easier. You have a number of options at your disposal to control the label position, direction, width, height, and the layout algorithm. It works with AMD loader such RequireJS, and can be nicely used along with Browserify and Node.js. No dependency required.

Timeline of Star Wars releases created with LabellaJS

Wee

PatternPack is a tool that allows you to build a system to build your website or application and share it across different projects all at once. Having a standard system is a general form of best practice: not only does it speed up your workflow, but it also makes the project more maintainable. Read the Start Guide to see how to use the tool.

Wee Framework Homepage

Grav

License: OFL (Open Font License)

Grav CMS Homepage

PatternPack

Flexbox makes arranging web layouts so much easier. Yet, since it does not work in Internet Explorer 9 and 8, web developers often have to revert to using the notoriously troublesome float property. FlexibilityJS is here so you can use Flexbox without leaving these old browsers behind.

Pattern Pack Homepage

OhCrash!

OverPass font is a free font inspired by Highway Gothic. Highway Gothic is a widely adopted typeface in many countries for road signs due to its legibility across distance and high speeds. The OverPass Font comes in four font weights (thin, normal, semi-bold, and bold), uppercase and lowercase letters, and also can be converted into a web font.

Image of OhCrash! Error Report Example.


Why All Developers Should Learn Command Line

This may seem annoying to non-shell users but it actually offers much more control. The NPM library contains over 200,000 packages with more added every week. It’s just easier to host these externally and let the user decide what to install.

No matter what language you’re using or trying to learn, the command line will prove to be a powerful tool in your arsenal. Even a very basic understanding of shell scripting can improve your confidence and workplace value in a market of talented web developers.

You Gain Greater Control over System Functions

Basic commands might involve changing permissions on a certain file or browsing to a directory that’s hidden from view. More complicated examples could involve server administration for a local server setup like Apache/MySQL.

command lines

Unfortunately Git is also difficult to learn if you don’t already understand how it operates. Now add the confusion of working inside the command line and it’s clear why Git scares off so many developers.

For a beginner the learning curve for Git can be steep. With regular practice it still might take a couple months to solidify the concepts. But Git is an indispensable tool for every developer and it’s one more good reason to learn the command line.

Keep in mind that some of these tools can be installed separately via their own binary installers. But NPM centralizes everything so you can pull all of your favorite tools with one friendly command: npm install.

You Can use NPM for Package Installs

Thankfully there are many free resources online to help you understand the basics.

Everything from PHP to Rails and Python requires some command line interaction. Installation tools like MAMP have made things easier, but there’s no substitution for the raw power of working in the command line.

But looking beyond system functions we have a slew of web developer tools which operate through the command line. Not everything can be downloaded & installed like an application, so an understanding of shell commands will save you the headache of learning how to install the latest new tools for developers.

npm

Programmers and developers alike should understand the power of version control. The ability to split/merge a project into separate versions is simply unparalleled.

With NPM you have instant access to a number of tools like:

  • Grunt
  • Gulp
  • Less
  • Jade
  • CoffeeScript
  • Express.js

So how necessary is the command line for modern development? I’d argue it’s imperative to success, working with either frontend or backend code. The command line has become a Swiss Army knife of features locked behind simple commands. If you take time to learn these commands you may be surprised how much power is available from that little black rectangle with the flashing white cursor.

ruby gems

With these tools becoming necessary to the development process it’s vital to understand even the basics of shell scripting and the command line.

You Can Utilize Git Version Control

One thing to note is that NPM does not have a GUI. There’s no way to click a little “install” button like you’d find on the Mac App Store. Every package must be installed manually via the npm command in a terminal window.

It’s worth at least exploring the possibilities of shell commands just to understand how they work. Ignoring a piece of technology just because it’s too confusing is rarely a good idea.

Try Git is a free learning tool on GitHub to help you toy around in Git without installing it locally. This is a guided tutorial for developers with absolutely no knowledge of version control.

The difficulty of Git is memorizing version control commands while simultaneously learning the command line. There are desktop apps that offer a GUI but they still expect you to understand the fundamentals of version control (cloning, branching, merging, etc).

try github tutorial

Another popular choice is to install Ruby gems alongside NPM packages. However Ruby gems are not exactly part of a package manager – though they can act in a similar fashion.

To get started just find something you want to learn and dive in. This could be compiling with Sass, installing Laravel, or configuring a local Node.js server. Naturally you’ll face challenges along the way but websites like Stack Overflow contain all the programming answers you need.

You Need It To Use Preprocessors & Task Runners

Related:

While PHP can be installed using software like MAMP, frameworks like Laravel require Composer which is a dependency manager. This installation process takes place almost entirely via the command line.

  • CSS Preprocessors compared: Sass vs. LESS
  • The battle of build scripts: Gulp vs. Grunt

Some developers cringe at the mere thought of opening a terminal window. For the uninitiated it can be daunting, stressful, and downright annoying. But devs who understand the command line would argue it’s one of the best tools at your disposal.

If you aren’t already aware, tools like Sass and Haml run directly through the command line. Both of those preprocessors are built on Ruby and require terminal commands for compiling code. Granted you could setup a Gulp task to automate preprocessing, but this also requires command line knowledge.

It’s For Local Backend Development

Perhaps the most obvious reason to learn the command line is for its original function: greater control. There are commands accessible only via shell that can control very complex operations on Unix/Linux and Windows machines.

mamp

With some comfort in shell scripting you’ll have more control over your machine to install packages, check for updates, restart a local server, and install modules for enhanced features.

The Django framework requires a similar CLI install process on top of pip, a free Python package manager. Also consider the process of setting up your own local server on Node.js. To do this you’ll want to first understand your computer’s environment(Unix or Windows). Then you’ll want to understand the basics of Node.js.

django

Frontend development has changed a lot in recent years. We have preprocessors like Sass/Less for CSS and Haml/Jade for HTML. We also have task runners like Gulp and Grunt for automating tasks via JavaScript. It’s almost a completely new landscape where these techniques are practically required to build modern websites.

Either way both techniques require an understanding of rudimentary CLI commands. You can be working with NPM in less than an hour if you make time to practice and really understand how it works.

Moving Forward

As more tools rise to popularity in the years to come you’ll be glad to have an understanding of command line syntax. The future of web development is not in IDEs, but in open source tools that optimize the way we code and build websites.

No matter what type of development you do, there’s value in understanding the command line. Even basic concepts like installing Ruby or Composer will prove immeasurably useful during your career as a web developer.

Node Package Manager is easily the most popular tool for modern developers. This is built on top of Node.js which behaves as a JavaScript framework for other scripts (like NPM).