Schedule: 17 July

Tuesday, 16 July

08:00 - 09:00
Registration and Breakfast
Registration starts at 8:00
09:00 - 13:00

Every case-study, every report, and every bit of feedback always tells us the same thing: speed matters. It’s good for users, it’s good for accessibility, and it’s good for business. But why are modern browsing experiences so slow? If technology is getting better, why are websites getting worse?This workshop is targeted at intermediate to advanced front-end developers, web designers, and software engineers, or anybody who writes code. There will be resources and case studies for you to take back to non-technical stakeholders to help convince them of the power of performance. 100% of previous attendees would recommend the workshop to colleagues!

Wednesday, 17 July

10:00 - 10:10
Welcome CSScamp 2021

10:10 - 10:40
HD CSS Colors

Learn how CSS can reach into the high definition colors of your user's latest display, arguably the best colors of their display, by using LCH, LAB, color(), and more. Create more vibrant gradients, richer shadows, and poppin UI colors that stand out. We'll explore what we can use today and how to prepare for the future. Digital color is not done evolving on the web, let's dig in.

10:50 - 11:20
CSS Animation Today. 2021 edition

We still use JS animations, gifs, image sequences, and other techniques, although we can do this in pure, native, lovely CSS. Let's talk about modern methods of drawing and animation, general approaches, and new features. We'll even talk about 3D CSS.

11:20 - 11:40
Break
11:40 - 12:10
Designing for the colourblind, a catalyst for great design

Colourblindness is more common than you would expect, can we afford to continue to ignore a user base that has the opportunity to draw in a wider range of accessibility inclusively for customers across digital platforms?

What you will learn:

  • Barriers experienced by colourblind users
  • Business case for the inclusion of colourblind users
  • Practical ways to ensure inclusivity of colourblind users in your design

Accessibility inclusion is an opportunity. The design principles required to include colourblind users is just simple, great design.

In the infallible words of Maya Angelou, "Do the best you can until you know better. Then when you know better, do better."

12:20 - 12:50
How to Create Pure CSS Games

In this time of the coronavirus epidemic, a lot of our plans have been canceled. From every bad situation, we need to try to see the good thing in it. Elad Shechter took his free time at home to create a pure CSS game. He will explain to you lots of tips and tricks on "how to create pure CSS games".

12:50 - 13:50
Lunch break
13:50 - 14:20
How Studying History Of Arts Helped Me Become A Better Frontend Designer

You may think, art history and frontend development do not have much in common. Well, you may be surprised. Some of the problems we have to deal with today were discussed in art history long before the invention of the Internet. Also, the skills needed to analyze a piece of art correctly show significant similarity to the capabilities required to implement modern layouts with CSS. This talk will show you how to analyze a static layout by looking beyond pixels. Instead, you will understand why a given design works the way it does and translate this to modern CSS.

14:30 - 15:00
Scroll-Linked Animations with CSS @scroll-timeline

A new and upcoming addition to CSS are "Scroll-linked Animations" which allows you to link animations to the scroll offset of a scroll container using only CSS — no JavaScript needed! In this demo-heavy presentation we'll dig into the what this spec has to offer and what we can build with it.

15:10 - 15:40
Accessibility, Design Systems, and You!

Crafting a high quality website at scale is incredibly difficult if you don't set up a shared design system to reuse CSS and components. This talk will showcase how to set up both designers and developers with a "pit of success" for making sure page experiences are accessible and consistent.

That will include both technical strategies -aXe and ESLint validations, type-safe CSS values with TypeScript, Storybook- and procedural -desk checks, user feedback, knowledge sharing-. Each of these strategies will help your organization reduce deuplicate code efforts and increase end-user product quality.

15:40 - 15:50
Closing Remarks

Don't want to miss out?

Subscribe to our newsletter and we’ll keep you updated