My Frontend Toolbox review of 2015
2015 was a busy year, worked on a lot of nice projects, discovered a lot of cool and use full tools to use in my daily job as Frontend Developer. Besides that I learned a lot of new things, so scroll down and read it! I love to share this with you. I hope you like it! And hope it gives you inspiration!
CSS (CSS pre-processor)
BEM (CSS Methodology)
In 2015 the BEM Methodology (Block, Element, Modifier) was the best thing to use, to structure the CSS classes in my projects. I Helped out a lot of Frontend Developers with (re)structuring their CSS/Sass with the help of BEM. For now, BEM gives my CSS classes more meaning than the did before. It’s better readable, so easier to maintain for other Developers.
The only thing with BEM, CSS classes will grow larger and larger the project continues, that’s to the only thing I don’t like. So for 2016, I want to search for guidelines/solutions that help to make the classes shorter, but still readable.
My main CSS pre-processor Sass in 2015. Sass helped me this year to implement the BEM Methodology on a lot easier way than I did before. Sass stayed for me what it was. But in 2015, I played a lot with @extend, Placeholder classes.
A nice layout engine for Sass is Susy. Not a big ass CSS framework like Twitter Bootstrap, what is full of (handy) things, but, in the end, your only using the grid layout. No, Susy don’t waste the bytes of your CSS file! Susy helps you to build complex layouts (still with floats). It is doing a lot of math for you, it is worth it to take a look. And it doesn’t give you an overload off CSS styles.
Flexbox is in my eyes still a really new/complex feature. And I’m not using it for building the whole layout. But for some design challenges, it is very very useful. It is super flexible. The browser support for Flexbox is growing bigger and bigger, and that is a good thing!
Microsoft dropped the support for old Internet Explorers browsers, so that is a nice thing for all the Frontend Developers! If you want to try out Flexbox, CSS-tricks.com has written a big article/summary for Flexbox. It’s worth reading!
One of my biggest conclusions of the CSS Selectors was, I’VE WRITTEN MY SELECTORS WRONG ALL THESE YEARS! Yeah really! Browsers render the CSS selectors not from left-to-right but from right-to-left. In short it means that if you have the selector like: “nav ul li a”, it’s going trough all your <a> tags on the page. Then it is filtering it to all the <a> tags inside <li> tags and so on. Do you want to know more about this? Check out my article:http://www.raymonschouwenaar.nl/css-performance-we-write-css-selectors-wrong/
On one of my biggest projects in 2015 was building a huge platform for a big company, with a big team of Developers. There was a big codebase full of CSS. When I started to make changes on it, it seemed it was in a really bad shape. A lot of !important where inside it, or selectors like div#thisId ul li a .tab .readmore-link. Really in bad shape! So every time I had to change something, I had to overrule it. I even end up with writing selectors with the same length, !important and ID’s. So that was really frustrated me.
I found CSSLint, man that is a really helpful tool! I started to use CSSLint in the browser, but that was not really productive. Until I found out that Grunt and Gulp also had a plugin for it. So with the GulpJS plugin for CSSLint, I found out that we needed a whole lot more time to fix it all! Thanks CSSlint
The biggest issue with a load time of a website is mostly images. So I integrated bLazy.js a lot in new project’s for better loading of images. Lazyloading boosts the performance up for most website’s to 50% of the speed. (this is not a solid percentage, but an average in my projects). bLazy.js also helped to create a sort of “responsive images idea” for loading smaller images for smaller screens. So definitely worth checking out.
Gulp is also a fantastic tool to do Performance testing and auto-generating performance reports. I combined GulpJS, Google’s PSI and Handlebars to do a performance test and after that generated an HTML performance report. In the near future I want to write an article about this, and set that on Github, so you can use it too!
Yeah, GulpJS is my primary task runner in all my projects. I started with GruntJS (what does the same thing, but different), but after seeing GulpJS does it faster, I switched. I used GulpJS with a lot of plugins like:
- Gulp JShint
- Gulp Sass
- Gulp CSSLint
- Gulp Autoprefixer
- PSI (PageSpeedInsight by Google)
- Gulp BrowserSync
- Gulp Uglify
- Gulp File Include
- Gulp SVGmin
- Gulp Raster
- Gulp Concat
If you have also some new cool and useful tools, that I should use? Please add them in the comments!
This post is already published on http://www.raymonschouwenaar.nl/my-frontend-toolbox-review-of-2015/