6 ms·
Cool that you open-source a book - it looks like it contains a solid amount of information. Well done! What I'm missing (couldn't find it on the first glance)
by hknd 8y ago
Cool that you open-source a book - it looks like it contains a solid amount of information. Well done!
What I'm missing (couldn't find it on the first glance) is a topic about the performance implications of animations.
Most devs don't consider which css properties trigger a layout->paint->composite re-render, which has massive influence on browser performance.
There are soooo many shitty animations/transitions in the web, just because people don't know that animations can slow down a whole site.
Imho people should read something like the web dev one pager on animation performance (1), which explains (more or less) how to build high-performance animations.
There is also this free udacity course (2) which explains everything a web developer needs to know. It's not hard nor magic, and you just have to hear it once to remember it for whenever it becomes necessary.
1: https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance https://developers.google.com/web/fundamentals/design-and-ux...
2: https://eu.udacity.com/course/browser-rendering-optimization--ud860 https://eu.udacity.com/course/browser-rendering-optimization...
- the_duke 8y agoIt's especially bad with the CSS frameworks that people slap on their sites. Various Material UI implementations are notorious here because they have fancy animations everywhere.
- hknd 8y ago^ this! I've seen so many jquery libraries used on sites to get a quick fancy animation, but then it used something like: setTimeout(() => { element.height += 2; }, 50) Which literally brings a 60+fps page to <5fps on a high-end machine.
- donovanh 8y agoYes, I totally agree! Performance is something I will consider touching on. I wanted to keep it fairly intro-level but the topic would sit well alongside accessibility. Thanks for the feedback!
- Teichopsia 8y agoThis resource is pretty decent https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 https://medium.com/outsystems-experts/how-to-achieve-60-fps-...