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. pic.twitter.com/15ORVQZL19
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
4.
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.
In Frontendia, we replace CSS specificity with specific names. #Drupalcon #NOLA credit: @JohnAlbinpic.twitter.com/bOOg7f6hXC
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 - www.sitespeed.io. 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.
As usual, so much good stuff to learn from @JohnAlbin about style guide & theme generation #design#styleguides #drupalcon
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
