Six easy pieces of new frontend development

By Team Srijan Jun 2, 2016

I was interested to see the frontend talks at DrupalCon New Oreleans, and this session by John Albin Wilkins, Drupal Front-End Evangelist gave a lot of insights.

Nowadays, In frontend development our job is to implement HTML, CSS, and Javascript. But with a lot of projects running in parallel, it is difficult to find the new tools and techniques. And even after we learn a new tool, it feel like our skills will be soon out-dated.

John in his session 'six pieces we can use for the new frontend development' explained steps we can adopt to implement a successful frontend.

1. The Component

Components are an emerging standard on how to build web sites and apps. By thinking about full page designs as a collage of independent design components, we can build a leaner and more maintainable CSS.

2. The Twig, the Sass and the Fugly

As we are talking about components, it means we have a separate class for everything. But in Drupal sometimes it is difficult to put the class where we exactly want it. So in sass we are handling like this:

.header__title a {

&:link, &:visited {

@extend %header__title-link;


&:hover, &:focus {

@extend %header__title-link-is-hover;


On a lighter note, here is how John explained Fugly

While I was waiting for @mortendk to show up at the #DrupalCon front-end code sprint, I made a gif. You're welcome.



3. Noodling with JavaScript Tooling:

As I mentioned earlier that there are a lot of JS tools/packages available online, but how to manage them? The answer is NPM (Node.js Package Manager). It will help you manage the packages. You can check npm quick start guide to start with.

There are some useful packages that will help you in frontend are:

  • Grunt or Gulp
  • Eslint (SASS,JS)
  • Livereload


Style guide should be at the center. It means component library or some sort of tool that generate the style guide which uses the real html and real css. Since it uses the real html and real css, so it will always be up to date. KSS is the tool that is creating a style guide.

5. Testing for Success

This is a regression testing that developers have to do at their end.

6. Budgeting for Performance

There is a good tool to check the performance of site - It help us to figure out how much bytes a webpage is consuming, how much time it is taking to load, which files we have to aggregate to speed up the load time, etc.


I believe these six easy pieces are a perfect way to overcome the obstacles and develop an amazing frontend. For more information check the complete session

Shared Success

Seamless relocation achieved through a hassle-free mobile app
Unifying the brand identity of a global welfare organization with a versatile design system
Building a Consent Management Platform for Compliance and Protection of PII Data
How Launching a Dynamic eCommerce Platform Streamlined Procurement for the Dental Support Organizations

Let’s start our conversation

  • Business Inquiry
  • Career
  • Others

Business Inquiry