The Front-End Spectrum

Modern front-end web development is a busy place. The industry shuffle is exponentially rapid, and when you’re heads down working on a project, it can be easy to lose focus on the big picture.

This graphic represents the technology I’ve encountered in the past few years. It’s by no means comprehensive. Others have summarized their front-end tech experiences, and I’ve noted that each time it’s (naturally) from their particular perspective. It’s simply not possible (or at least easily achievable) for a single individual to have a “complete” view of the current landscape.

I’ve included tech from three categories:

  1. Tech I work with on a daily basis.

Here’s my take on the front-end spectrum. It’s decidedly Rails-skewed, which is simply a result of my employment at Rails shops for the past few years:

The sausage can be made in oh so many ways.

I’ve written about the details before, so check out those posts for more detail. For now, I’ll simply list what each piece is (in case it’s not apparent from the logo):


  • HTML (HTML5)

Text Editors

  • Atom

UI Frameworks

  • Bootstrap

Responsible Web Design

  • Responsive Web Design


  • Handlebars

Browser Refreshing

  • LiveReload

CSS Preprocessors

  • Sass

OOCSS & Style Guides


Version Control

  • Git

Package Mangers

  • npm

Front-End Performance

  • WebPagetest

JS Frameworks

  • jQuery

JS Preprocessors

  • CoffeeScript

Process Automation

  • Grunt

Code Quality

  • JSCS

Build Tools

  • RequireJS


  • Jasmine


  • NodeJS

This is a very high-level view of the modern front-end landscape. I’ve left a lot out, notably mobile tools I use like Cordova, Rails gems like Spree that are heavily integrated into projects I’ve worked on, or other tech I’ve worked with like Electron and native iOS app development. I think they (and many others), don’t quite fit into the front-end spectrum.

You may also notice a few items you consider odd. Theories like “responsive web design” and back end tools like Rails appear in the spectrum. The responsible web design category is included because it’s a category that often gets overlooked, but I feel is incredibly important for modern front-end developers to have minimally an awareness of. Back-end stuff is included because while technically not front-end, these are items front-end devs must have some familiarity with and will most definitely encounter.

This graphic was part of a process I’ve gone through to do what I believe is required of any modern front-end developer: determine what you’re passionate about, determine where your strengths lie, and then focus on the crossover areas. Hopefully it helps you get a lay of the land, and maybe figure out where you want to focus as well.



Design Technologist, Design Systems @billcom. Author of Mobile App Manual. Slowly cleaning up the world, one component at a time.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeff Pelletier

Design Technologist, Design Systems @billcom. Author of Mobile App Manual. Slowly cleaning up the world, one component at a time.