New Front-End Adventures, 2020 Edition

Your instructor: Vitaly Friedman

Full-day workshop • Thursday, October 22nd
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 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 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.

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 2020, 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!

In this workshop, you’ll learn:

Component-based workflow and tooling,
Techniques for localization and internationalization,
Image and video optimization techniques and tooling,
Web font loading strategies and techniques,
Variable Fonts, and how to get started with them,
How to organize CSS and critical CSS to optimize delivery to minimize reflows,
How to use and build with CSS Custom Properties,
Advanced CSS layout techniques (Flexbox, CSS Grid + Custom Properties),
CSS Houdini, what it means and techniques for front-end designers and developers,
Deferring and lazy-loading JavaScript with Webpack,
How to use predictive prefetching of data and JavaScript chunks to improve perceived performance,
Refactoring and debugging strategies,
How to deal with 3rd-party scripts using IntersectionObserver,
How and when to use WebAssembly for runtime performance optimization,
How and when static site generators fit into play, with the JAM Stack,
How to use Network Information API and Memory Device API to improve performance,
Utilizing Service Workers for caching and better performance,
Performance optimization strategy (best practices + HTTP/2 + HTTP/3), including transition from HTTP to HTTPS in legacy projects,
The implication of GDPR and privacy legislation 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.

This workshop is intended for professional front-end designers, developers and everybody else who is dealing with CSS and/or JavaScript regularly.

What hardware/software do you need?

To get the most out of the workshop, you’ll need to bring a laptop with your preferred text editor.

About Vitaly Friedman

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

Time & Location

This full-day workshop will take place the day after SmashingConf at a location to be decided. The workshop will be running from 9:30 AM to 5:30 PM on Thursday, October 22nd.

Schedule for Thursday, October 22nd

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:30 PM – The End

Save 100 USD when signing up for the conference and a workshop!