Workshop. New adventures in frontend, 2021 edition (part 2)

We all are still trying to figure out just the right strategy for building websites and apps efficiently. We want to use all of these technologies and smart processes, but how can we use them efficiently, and how do we achieve that within a reasonable amount of time?

We'll explore a resilient, actionable strategy for building fast, scalable experiences. We'll look into accessibility, text compression, image optimization, web font delivery, critical CSS, CSS layouts, JavaScript delivery, and improving Core Web Vitals along with performance bottlenecks. We will also explore tooling, how to make sense of DevTools network waterfalls and performance flame charts, WebPageTest, and a few little utilities along the way.

In this workshop, we'll explore:

• component-based workflow and tooling, with helpful tools and resources to boost dev environment;
• deep dive into DevTools and WebPageTest, making sense of performance flame charts, networking panel and WebPagetest waterfalls to identify performance bottlenecks;
• text compression with Brotli, localization/i18n techniques and practical tips;
• image and video optimization (AVIF, AV1, formats, delivery techniques and tooling;
• web font loading strategies and recipes;
• organizing CSS and Critical CSS to optimize delivery and minimize reflows;
• CSS Custom Properties, and how to use and build with them;
• advanced CSS layout techniques, such as CSS Grid + CSS Custom Properties + Subgrid;
• HTML email in 2020, how to deal with Gmail, Apple Mail, Outlook, other email clients, with templates and tooling;
• common frontend challenges and solutions and important new challenges and opportunities to keep in mind.