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 2023, 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, We Will Explore:

• Front-end accessibility 2023, with common techniques, strategies and tooling, especially for single-page-applications,
• State of CSS in 2023 (CSS Grid + Cascade Layers + Custom Properties + Subgrid),
• State of JavaScript 2023, ES modules, progressive/partial (re)hydration, bundlers, tooling and how to manage performance bottlenecks for single-page-applications,
• State of Web Performance 2023, with a roadmap for dealing with CSS, JavaScript, media, fonts, 3rd-party scripts, and critical CSS/JS.
• Image and video optimization, techniques, tooling and formats (AVIF, AV1),
• Bulletproof web font loading, with strategies and techniques, self-hosting and CDNs,
• 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,
• CSS Custom Properties cascade, how to use and build with it,
• How to manage critical CSS/JS to optimize delivery to minimize reflows,
• Localization and internationalization,
• SSR + CSR, and how to navigate the space, with resumability, Qwik and 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,
• Refactoring and debugging strategies,
• State of HTML email, with new strategies for building cross-email client emails,
• GDPR and privacy legislation, with implications for web developers,
• Maintenance issues and dealing with legacy browsers,
• Component-based workflow and tooling,
• Common front-end challenges and solutions and important new challenges and opportunities to keep in mind.

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.

Who Is This Workshop For?

This workshop is intended for front-end developers and UI engineers, and everybody else who is dealing with front-end issues. You should be familiar with CSS and JavaScript, and be enthusiastic to deep dive into technical intricacies and browser internals.

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 helping companies solve UX issues or running front-end/UX workshops. He loves solving complex UX, front-end and performance problems.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

• Wed, February 8, 09:00 – 11:30 AM PT
• Thu, February 9, 09:00 – 11:30 AM PT
• Wed, January 15, 09:00 – 11:30 AM PT
• Thu, January 16, 09:00 – 11:30 AM PT
• Wed, January 22, 09:00 – 11:30 AM PT

You can always re-watch the sessions at a more convenient time and follow the workshop at your own pace.

Day 1: Complex Navigation

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Complex mega-drop-down navigation, carousels, breadcrumbs, sideways navigation, modals and overlays, focus traps, top task analysis. Advanced configurators, wizards and customizers.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 2: Complex Tables and Dashboards

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Enterprise-grade tables, with inline editing, filtering, tagging, sorting, search, dashboard and spreadsheets UX.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 3: Complex Forms

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Form design metrics, user behavior with forms, layout, microcopy and interaction design, one-column vs. multi-column layout, one-page vs. multi-page design, routing, conditional reveal, error recovery, inline validation, disabled buttons, input buffering, task list pattern.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 4: Complex Interaction

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
Error recovery, password recovery, filtering and sorting intervals, auto-apply vs. manual apply, authentication, accessibility, privacy UX. Mortgage and loan calculators.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

What hardware/software do you need?

To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.

You’ll need a lot of sleep reserves since it’s going to be a couple of packed sessions! Bring a lot of attention to detail and non-standard thinking to this one! ;-)