Skip to main content

New Front-End Adventures, 2019 Edition

Vitaly Friedman
Your instructor
Vitaly Friedman
Tickets
Get a ticket ↓

Workshop includes:

  • Snacks and drinks
  • Tea and Coffee
  • Lunch
  • Paper and pen/pencil

Full-day workshop • Thursday, June 27
With HTTP/2, Service Workers, Progressive Web Apps, Variable Fonts, CSS Custom Properties, 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?

Most techniques are borrowed from mid-size and large-scale real-life projects, such as large eCommerce projects, online magazines and web applications. We won’t cover the basics, but rather advanced and innovative examples of RWD in action.

In this workshop, Vitaly Friedman, co-founder of Smashing Magazine and front-end/UX consultant, 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!

In this workshop, you’ll learn:

  • 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.

This workshop is intended for professional front-end designers, developers and everybody else who is dealing with responsive design regularly or wants to better understand responsive design in general. You should at least be familiar with some basics of responsive design, CSS and JavaScript.

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 be hosted at the Ivey Tangerine Leadership Centre and will take place the day after SmashingConf. The workshop will be running from 9:30am to 5:00pm on Thursday, June 27.

Schedule for Thursday, June 27

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:00 PM – The End

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