How we used code splitting, code inlining, and server-side rendering in PROXX. Sep 23, 2019• Updated May 19, 2021 At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability
A foundational overview of how to build an experience similar to Instagram Stories on the web. Nov 25, 2020 In this post I want to share thinking on building a Stories component for the web that is responsive, supports keyboard navigation, and works across browsers. Demo If you would prefer a hands-on demonstration of building
Show stakeholders how site speed improvements can increase revenue. Jun 13, 2019• Updated Jun 7, 2021 Appears in: Fast load times After a lot of hard work, you’ve done it. You’ve made your company’s site noticeably faster. Now it’s time for the fun part: showing stakeholders how much extra revenue your work has generated! In
Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions. Oct 14, 2020 With responsive design evolving and becoming increasingly nuanced, CSS itself is constantly evolving and providing authors increased control. The min(), max(), and clamp() functions, now supported in all modern browsers, are among the latest
Jun 11, 2019• Updated Jun 1, 2021 Appears in: Web Vitals|Metrics Jun 1, 2021: The implementation of CLS has changed. To learn more about the reasons behind the change, check out Evolving the CLS metric. Key Term: Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how
New logical property shorthands and new inset properties for Chromium. Oct 13, 2020 Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain control of their international layouts through logical, rather than physical, direction and dimension styles. In Chromium 87, shorthands and offsets have shipped to make these logical properties and
Nov 5, 2018• Updated Jun 4, 2021 Appears in: Fast load times Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a “one-size-fits-all” approach to images, serve different image sizes to different devices. Resize images # Two of the most popular image resizing tools are the sharp npm package
Improve initial load time by skipping the rendering of offscreen content. Aug 5, 2020• Updated Mar 9, 2021 The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element’s rendering work, including layout and painting,
Nov 5, 2018 Appears in: Fast load times Why should you care? # Fonts are often large files that take awhile to load. To deal with this, some browsers hide text until the font loads (the “flash of invisible text”). If you’re optimizing for performance, you’ll want to avoid the “flash of invisible text” and
The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet. Apr 8, 2020• Updated Jun 16, 2020 Background # The prefers-color-scheme user preference media feature # The prefers-color-scheme user preference media feature gives developers full control over their pages’ appearances.
English 
Indonesian