New Adventures in Front-End, 2019 Edition w/ Vitaly Friedman

With HTTP/2, Service Workers, Progressive Web Apps, Responsive Images, 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 buildings responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time?

In this workshop, Vitaly Friedman, editor-in-chief of Smashing Magazine, will be looking into a strategy for crafting fast, resilient and flexible responsive design systems by utilizing 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 responsive websites 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!

WHAT WILL THE WORKSHOP COVER?

In this workshop, we’ll go hands-on into exploring:

• 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,
• Image optimization techniques,
• Web font loading strategy and options,
• Deferring and lazy-loading JavaScript,
• Dealing with 3rd-party content using IntersectionObserver,
• Setting performance thresholds and budgets,
• Performance optimization strategy (best practices + HTTP/2), including transition from HTTP to HTTPS,
• Utilizing Service Workers for caching and better performance,
• Maintenance issues and dealing with legacy browsers,
• Common front-end challenges and solutions.

WHAT HARDWARE/SOFTWARE DO YOU NEED?

You’ll need to bring a lot of creativity with your preferred coffee mug. We’ll be spending a lot of time drawing, sketching, designing and thinking. Laptop is preferred but not absolutely necessary. You’ll need a lot of sleep reserves since it’s going to be a packed day. Bring a lot of attention to detail and non-standard thinking to this one! 😉