Top picks — 2016 August

David Wells - CSS in React

A great talk by David Wells on ReactJS San Francisco Bay Area meet-up. All that you need to know about styling React components. Pros and cons of each popular method with strong recommendation of CSS modules powered by PostCSS. I don’t entirely agree with some parts of David’s approach but it is really interesting overview of available strategies.


CSS Function Syntaxes (color and otherwise)

http://www.xanthir.com/b4iW0

Tab Atkins explains the reason behind new syntax for CSS rgb color notation. If it’s too long too read the only thing you need to remember is rgba(0, 255, 0, 50%) notation will be replaced with rgb(0 255 0 / 50%). The reason behind makes super sense.


Staggering Animations

https://css-tricks.com/staggering-animations/

David DeSandro — author of Masonry, Isotope, Flickity, Packery and many more very good plugins drives us through considerations of implementing new type of animation in third version of Isotope. I love this kind of posts that apart from final result author reveals a development process in details.


Force Selection of Text Block

https://css-tricks.com/force-selection-text-block/

Next one from CSS Tricks this month. Chris Coyier presents a neat trick to select a whole block on click without heavy JavaScript of Flash based add-ons. Very handy trick especially when we need to make sure that whole bit of code is copied (like a code snippet or telephone number).


Yes, You Should Learn Vanilla JavaScript Before Fancy JS Frameworks

https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks

I can’t agree enough with this article. I’m sick of people who call themselves “Angular Developer” or “React Developer”. I can’t imagine how can you be a good framework developer without knowing core principles of language. I follow teaching style promoted by great Kyle Simpson who is a strong believer in deep understanding before moving forward. Francois-Xavier P. Darveau shares the same school. Great read!


Front End Center

https://frontend.center/

Glen Maddern just started a new project called Front End Center. He released just one video so far but this single tutorial was totally enough to convince me to follow and share it. The best explanation of Webpack that you can find. I’m looking forward to following screen casts by Glen.


How To Use WebPageTest and its API

https://css-tricks.com/use-webpagetest-api/

Eduardo Bouças published very helpful article on CSS-Tricks. All that you need to know to master WebPageTest and it’s API. Even if you are not interested in using very advanced features that API comes with, first few chapters are amazing introduction to grasp a concept of this fantastic tool.


Using WebP Images

https://css-tricks.com/using-webp-images/

Great primer for using WebP on your projects. All about file saving, conversion, placing WebP graphics in HTML markup and CSS. With support around 70% it is a perfect timing to let it boost the performance of our projects. Thanks Jeremy for write up.


How to design words

https://medium.com/@jsaito/how-to-design-words-63d6965051e9#.y3zxn18hu

John Saito from Dropbox explains in few simple steps how to write better messages. Can’t agree enough with all of them. Read it, print in and pin above your desk and read it after writing a sentence of body copy for your brand new project.