New Front-End Adventures, 2019 Edition
Vitaly Friedman, Smashing Magazine
With HTTP/2, Service Workers, Progressive Web Apps, Variable Fonts, CSS Custom Properties, Client Hints and Resource Hints, Flexbox, CSS Grid Layout, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and building for the web 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 most optimized 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? Oh my, in the workshop, we'll cover it all. We'll explore how to utilize all of those wonderful shiny web technologies we have available today, and how to deal with legacy browsers along the way. We'll also cover a few techniques that might ensure that your websites and apps will stay 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!
When and where
- 9:30am - Doors and coffee
- 10:00am - Morning session
- 12:00pm - Lunch
- 1:15pm - Afternoon session
- 5:00pm - Workshop ends
This workshop will cover:
- Component-based workflow and tooling,
- Architecting and building pattern libraries and design systems,
- Designing with Logic Fold using Custom Properties,
- Layout techniques (Flexbox and CSS Grid),
- Variable Fonts, and how to get started with them,
- CSS Houdini, and what it means for designers and developers,
- Image optimization techniques,
- Dealing with 3rd-party scripts using IntersectionObserver,
- Web font loading strategy and options,
- Deferring and lazy-loading JavaScript,
- Utilizing Service Workers for caching and better performance,
- Performance optimization strategy (best practices + HTTP/2), including transition from HTTP to HTTPS,
- Maintenance issues and dealing with legacy browsers,
- Common front-end challenges and solutions.