UI Dev Newsletter #17

Issue:#17

2020-08-10

content-visibility: the new CSS property that boosts your rendering performance

https://web.dev/content-visibility/

Una Kravets shows how to improve initial load time by skipping the rendering of offscreen content.
Infinite Scroll without Layout Shifts

https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/

Addy Osmani describes how to avoid layout shifts with infinite scroll.
A Lightweight Masonry Solution

https://css-tricks.com/a-lightweight-masonry-solution/

Ana Tudor explains how to create masonry solution using only CSS and how to make a JS fallback.
Rehearsing the Future

https://design.google/library/rehearse-the-future/

Members of Google’s speculative design teams discuss how they are rehearsing for what is next
The Making of: Netlify’s Million Devs SVG Animation Site

https://css-tricks.com/the-making-of-netlifys-million-devs-svg-animation-site/

Sarah Drasner shows how latest Netlify SVG Animation is done with GSAP library.
State of Frontend 2020

https://tsh.io/state-of-frontend/

The Software House team shows results from the survey for everyday frontend development according to 4,500 experts.
Spotting a Trend

https://css-tricks.com/spotting-a-trend/

Geoff Graham shows the latest trend on web design — blobby shapes.
Layout Shift GIF Generator

https://defaced.dev/tools/layout-shift-gif-generator/

Chris Johnson creates a tool for visualizing the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

All issues