[ONLINE] New Adventures In Front-End, 2021 Edition

5 days × 2.5h + Q&A • April 1 – 9 • Language: English

Vitaly Friedman

Vitaly Friedman

Vitaly is the author, co-author and editor of all Smashing books, and a curator of all Smashing Conferences. He currently works as creative lead of Smashing Magazine and front-end/UX consultant in Europe and abroad, working with European Parliament, Haufe-Lexware, Axel-Springer and a few other companies.

He 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. Vitaly loves solving complex UX, front-end and performance problems.

OVERVIEW:

With HTTP/3 + QUIC, Service Workers, Micro Front-Ends, JAM Stack, PWA, TypeScript, Web Assembly, AVIF, Variable Fonts, CSS Custom Properties and clamp(), Client Hints and Resource Hints, CSS Subgrid and SVG2, 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 will be looking into the state of front-end in 2021, 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!

TARGET AUDIENCE:

This workshop is intended for professional front-end developers, designers 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.

100% of previous attendees would recommend the workshop to colleagues!

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! ;-)

TIME & SCHEDULE:

This remote workshop is split over five days. The workshop will be running from 10:00 AM (EET) to 12:30 PM (EET) on Wednesday, Thursdays and Fridays between April 1 - April 9.

  • Thu, Apr 1, 10:00 - 12:30

  • Fri, Apr 2, 10:00 - 12:30

  • Wed, Apr 7, 10:00 - 12:30

  • Thu, Apr 8, 10:00 - 12:30

  • Fri, Apr 9, 10:00 - 12:30


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,
  • Accessibility with common solutions, patterns and strategies,
  • 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,
  • Variable Fonts and how to get started with them,
  • 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,
  • CSS Houdini and Shadow DOM, what it means and useful practical techniques,
  • JavaScript architecture, and how to make sense of SSR, CSR, JAMStack, rehydration strategies, prerendering and caching — for React, Vue or any other framework,
  • 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,
  • 3rd-party scripts, how to deal with them using IntersectionObserver,
  • WebAssembly for runtime performance optimization, how and when to use it,
  • 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), and how to improve Core Web Vitals,
  • 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.

PRICE

ONLINE TRAINING
250
  •  
  •  
  • Training ticket
  • April 1 - April 9, 2021
  •