CDS takeaways… its all about performance
Last week it was Chrome Dev Summit — the web-highlight of the year. It’s the yearly event where the worlds most popular browser, takes the scene to talk about the today and tomorrow of the web. Tons of great content, exciting announcements and time to talk to friends (new and old) and Google engineers. In this blogpost I’ll walk through the highlights as seen from my (slightly commerce-focused) perspective.
Visbug is a new Chrome-extension for fiddling with layout-stuff on the web. Its a point-and-click experience where you can easily edit any text or its style, see how thing align and even get feedback on the accessibility of your work. I think this could enable non-coder-designers to better understand and play around with the markup as the visual components come to life.
The Sqoosh app
Sqoosh.app is a new web app that lets you visually compare different image compression types and their settings. The tool itself is interesting enough, but the way it is built, is the most interesting part. It a progressive web app, and all the individual compression engines are run on separate threads — using web assembly.
You can check out the app at https://sqoosh.app/ but before that, I would recommend watching this video that explains all the clever technology that makes up the app: https://www.youtube.com/watch?v=ipNW6lJHVEs
Happiness, Engagement, Adoption, Retention, Task success or HEART
A new year, a new acronym. HEART is for talking about the quality of UX. I think it makes sense, and it might be more memorable than other acronyms we’ve seen (What the I in RAIL again?)
When Chrome first came out, it outperformed all the other browsers by 20x, so with chrome, it’s always about performance. WebAssembly, already blazingly fast, now has (experimental, I think) thread-support. The browser can now natively lazy load images to speed up the initial render, and save on network and memory. And the next generation video-codecs, AV1, compresses video at a comparable quality with only half the bytes of h.264. And the browser now has even more performance-specific API’s for better measuring timing. And pagespeed now has a json-api, so you can run it from a build-chain or any other tool. And the performance related thing I’m the most excited about is probably the virtual-scroller. It is a native implementation of the popular pattern that many libraries have implemented already, but solving some of the current problems like anchoring, find-in-page and indexing. The overall idea is to let the browser do its thing, instead of trying to do it yourself. Make sure your animations are compositable, use css scroll-snap, run work off the main thread. And you can now actually use feature policies (using http-headers) to warn (or even disallow) bad practices (like oversizing or nor compressing images) so you can make sure they are caught in development, before they hit production.
You should check out all the talks really, but I found especially the virtual-scroller one very interesting — https://www.youtube.com/watch?v=UtD41bn6kJ0 and if you are into layout and animation, you should absolutely watch Surma’s talk about the future of CSS with Houdini https://www.youtube.com/watch?v=lK3OiJvwgSc
WebComponents are the future of the web
For years we have talked about how WebComponents will one day save the web. But that day is finally here. WebComponents are broadly supported and with libraries like LitElement we have a close-to-native alternative to the major framework. With great developer experience along side great performance. And the tools are coming along. Check out Justin Fagnanis talk where he shows of LazyLitElement and other new and shiny features in LitElement. https://www.youtube.com/watch?v=ypPRdtjGooc
So much more — in just 10 years
This year Chrome celebrates its 10 year birthday. The team made a video about baking that cake, and you should definitely watch it — it funny and has a lot of history in it. Try to see if you can catch all the puns… https://www.youtube.com/watch?v=CbU9GzgS0HY