New Adventures in Front-End, 2023

Presented by:
Vitaly Friedman

Workshop focus:

Development:
100%
Design:
60%
Marketing:
60%
Business:
60%

Workshop details:

Workshop summary

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.

What will the attendees learn?

Practical techniques for better front-end decisions in their work, including:

  • 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 the workshop for?

For seasoned front-end developers and UX engineers.

What are the attendee requirements?

Just be excited enough to work through the workshop!

Availability:

There are no public workshops scheduled, however, we can notify you when we have a schedule.

Are you an HR professional or team leader looking to host your own workshop in-house or hosted off-site?

      You can schedule a private workshop with one of the experts in our network, customised just for you. Just let us know a few details and we'll be in touch. 


      About your presenter:

      Vitaly Friedman profile image
      Vitaly Friedman
      Creative Lead and Co-founder

      Vitaly loves beautiful content and does not give up easily. Born in Minsk, Belarus, he studied computer science and mathematics in Germany. While writing algebra proofs and preparing for software engineering at nights in the kitchen, at the same time he discovered passion for typography, interface design and writing. After working as a freelance designer and developer for 6 years, he co-founded Smashing Magazine back in 2006, a leading online magazine for designers and developers. His curiosity drove him from interface design to front-end to performance optimization to accessibility and back to user experience over all the years.Vitaly is the author, co-author and editor of all Smashing books (https://www.smashingmagazine.com/books), and a curator of all Smashing Conferences (https://www.smashingconf.com). He currently works as creative lead of Smashing Magazine (www.smashingmagazine.com) and front-end/UX consultant in Europe and abroad, working with European Parliament, Haufe-Lexware, Axel-Springer and a few other companies.


      Start typing and press Enter to search

      Shopping Cart

      No products in the cart.

      Select currency
      CZK Czech Crown
      EUR Euro

      This Site Uses Cookies

      This site uses cookies to offer you a better browsing experience. For processing purposes, your consent is required, which you express by selecting "Allow all." You can change your cookies settings by selecting "Set own settings."