New Front-End Adventures, 2021 Edition (part 1)
Vitaly Friedman (Smashing Magazine)
With HTTP/3, Service Workers, Jamstack, PWA, TypeScript, Web Assembly, AVIF, Variable Fonts, CSS Container Queries 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 it within a reasonable amount of time? What’s the the best way to compress text, optimize images, deliver and contain third-party scripts, conduct A/B testing, manage web fonts, build layouts, streamline delivery of CSS/JS, serve static assets and architect a flexible and maintainable design system? And where would we even start refactoring and re-organizing our legacy code base, or move to ES Modules in production, or use Web workers or Webassembly? Oh my, in the workshop, we’ll cover it all. 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 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! This workshop will explore:
- Component-based workflow and tooling,
- Localization and internationalization,
- Image and video optimization, techniques, tooling and formats (AVIF),
- Bulletproof web font loading strategies and techniques, along with variable fonts and how to use them,
- How to organize, write and maintain CSS, incl. BEM, Tailwind, ITCSS, CUBE CSS, and how to deal with specificity wars, leaking styles and global scope,
- Front-end accessibility 2021, with common techniques, strategies and tooling, especially for single-page-applications,
- CSS Custom Properties cascade, how to use and build with it,
- CSS Layout techniques (CSS Grid + Custom Properties + Subgrid),
- CSS Houdini and Shadow DOM, what it means and techniques for front-end designers and developers,
- How to manage critical CSS to optimize delivery to minimize reflows,
- State of JavaScript 2021, ES modules, progressive/partial (re)hydration, bundlers, tooling and how to manage performance bottlenecks for single-page-applications,
- Managing 3rd-party scripts, how to identify and visualize performance bottlenecks, deal with tag managers,
- SSR + CSR, and how to navigate the space, with Jamstack, prerendering and static rendering, static site generators and where and how they fit,
- Service Workers, setting up a strategy for better caching and better performance,
- HTTP Caching, CORS, HTTP2/HTTP3, networking, mobile performance gap and things to keep in mind around providing faster experiences to mobile devices,
- Predictive prefetching of Webpack chunks, and how to use it to improve perceived performance,
- Refactoring and debugging strategies,
- WebAssembly for runtime performance optimization and how to use it,
- Network Information API and Memory Device API to improve performance,
- State of HTML email, with new strategies for building cross-email client emails,
- Performance optimization strategy, with a roadmap for dealing with CSS, JavaScript, media, fonts, 3rd-party scripts, and critical CSS/JS.
- GDPR and privacy legislation, with implications for web developers,
- Maintenance issues and dealing with legacy browsers,
- Common front-end challenges and solutions and important new challenges and opportunities to keep in mind.
