Skip to main content

New Adventures In Front-End, 2022 Edition

Workshop, 5×2.5h + Q&A Thu & Fri, Feb 3–17 2022
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

With HTTP/3, ES Modules, Jamstack, PWA, TypeScript, WebAssembly, AVIF, JPEG-XL, Variable Fonts, CSS Custom Properties, Logical Properties and clamp(), Client Hints and Resource Hints, CSS Container Queries, 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, Vitaly Friedman, co-founder of Smashing Magazine and front-end/UX consultant, will be looking into the state of front-end in 2022, with new challenges and new opportunities, and how we can utilize all of those wonderful shiny web technologies we have available today.

We’ll also talk about dealing with legacy browsers and will cover a few dirty little techniques that might ensure that your websites and apps will stay relevant, flexible and accessible in the years to come. Beware: you won’t be able to unlearn the things that you’ll learn in the workshop!

$350 .00 $450.00 Register for this workshop → 5 × 2.5h live sessions + Q&A. Feb 3–17.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with Smashing Membership.


The workshop includes:

  • 1500+ workshop slides with practical examples and action points,
  • 100 checklist cards on everything from carousels to web forms,
  • Editable text file to adjust for your needs,
  • Access to the evergreen deck, updated regularly,
  • Live, interactive sessions,
  • Hands-on exercises and reviews,
  • All workshop recordings,
  • Dedicated Q&A time for all your questions,
  • A Smashing Certificate.

In this workshop, we’ll explore:

  • Component-based workflow and tooling, with helpful tools and resources to boost dev environment,
  • Front-end accessibility with common solutions, patterns and tooling,
  • Text compression with Brotli, and practical tips,
  • Localization and internationalization with techniques and tooling,
  • Image and video optimization (AVIF, AV1, JPEG-XL, formats, delivery techniques and tooling),
  • Bulletproof Web font loading strategies and recipes,
  • Variable Fonts and how to get started with them,
  • Organizing CSS and Critical CSS to optimize delivery and minimize reflows,
  • CSS Custom Properties cascade, and how to use and build with them,
  • Advanced CSS layout techniques, such as CSS Grid + CSS Custom Properties + CSS Container Queries,
  • CSS Houdini and Shadow DOM, what it means and useful practical techniques,
  • State of JavaScript 2022, ES modules, progressive hydration with React, bundlers, tooling and how to manage performance bottlenecks for single-page-applications,
  • Static site generators, how and when they fit into play with the JAM Stack.
  • Deferring and lazy-loading JavaScript to make best use of browser’s rendering routine,
  • Cache-Control, CORS and eTags, with a few gotchas, pain points and misconceptions,
  • Predictive prefetching of data and JavaScript chunks to improve perceived performance,
  • Refactoring and debugging strategies, tooling and workflow,
  • 3rd-party scripts, how to deal with them using IntersectionObserver,
  • Rendering performance, and how to use WebAssembly and Web Workers for runtime performance optimization,
  • Network Information API and Memory Device API, how to use them to improve performance,
  • Utilizing Service Workers for caching and better performance,
  • Performance optimization strategy (best practices, HTTP/2, HTTP/3 + Service Workers), including transition from HTTP to HTTPS in legacy projects,
  • HTTP/3 and Core Web Vitals, how to bundle and deliver assets,
  • HTML email in 2021, how to deal with Gmail, Apple Mail, Outlook, other email clients, with templates and tooling,
  • GDPR and privacy legislation, the implication of it for web developers,
  • Legacy browsers, the maintenance issues and dealing with it,
  • Common front-end challenges and solutions and important new challenges and opportunities to keep in mind.

Who is this workshop for?

This workshop is intended for professional front-end designers, developers and everybody else who is dealing with CSS and/or JavaScript regularly.

You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or mobile app.

About Vitaly Friedman

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems.

Time & Schedule

This remote workshop is split over five days. The schedule may change slightly based on how we are progressing through the material, giving time to answer questions as we go along.

  • Thu, February 3, 09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)
  • Fri, February 4, 09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)
  • Thu, February 10, 09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)
  • Fri, February 11, 09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)
  • Thu, February 17, 09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

You can always re-watch the sessions at a more convenient time and follow the webinar at your own pace.

$350 .00 $450.00 Register for this workshop → 5 × 2.5h live sessions + Q&A. Feb 3–17.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with Smashing Membership.


Day 1

8:45 AM ET
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
The state of the Web 2021. Modern front-end architecture, tooling, important metrics, bottlenecks and user expectations. Client-side rendering, server-side rendering and static site generators. Common front-end challenges. How can we boost our dev speed? Deep dive into refactoring, debugging, DevTools and WebPageTest to improve the development experience.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 2

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
We’ll start with text compression, localization and internationalization. We’ll then look into common techniques for image and video optimization, how to use AVIF, web font loading, skeleton screens, variable fonts and front-end accessibility.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 3

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
CSS! We’ll explore how to architecture CSS these days, common approches like BEM and Atomic CSS, how to deal with CSS Custom Properties, CSS Houdini, CSS Grid and Subgrid, clamp() and smart solutions for common CSS challenges. We’ll also explore how to deal and where to load critical CSS.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 4

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
JavaScript! We’ll look into what’s happening in JavaScript, the role of JAM Stack and micro-frontends. We’ll look into common patterns with service workers, how to structure and how to deliver JavaScript bundles, common SPA bottlenecks and strategies to fix them. Also, look into the WebAssembly, Web Workers and new Browser APIs, e.g. Network Information API and Memory Device API.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 5

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Web Performance! How do we make sense of all our assets? How do we organize them on the page? What rendering strategy do we choose: CSR, SSR, SSG? Do we utilize CDN for faster A/B tests? Where are we with HTTP/3 and how do we optimize for HTTP/2? We’ll also look into resource hints, priority hints, GDPR-related privacy issues for developers and how to deal with legacy browsers. Wrapping up.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

What hardware/software do you need?

To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.

You’ll need a lot of sleep reserves since it’s going to be a couple of packed sessions! Bring a lot of attention to detail and non-standard thinking to this one! ;-)

Register for this workshop →