Six Easy Pieces for the New Front-end Development by @JohnAlbin now in 271 #DrupalCon
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.
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.
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
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:
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
This is a regression testing that developers have to do at their end.
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