CSS CAMP conference for
Web Designers and Web Developers
DISCLAIMER
Resources are from the speakers at the conference
Tatiana Mac
Building Socially-Inclusive Design Systems
Tiny Face app
Tatiana Mac
Building Socially-Inclusive Design Systems
Male
Female
Truth
False
=
=
Non-binary
=
Non-existent
Tatiana Mac
Building Socially-Inclusive Design Systems
Component-Based
Reducing design elements to the smallest replicable unit
We make mistakes and we should:
-Give no excuses (It's not about us)
-Apologize properly
-Make a plan to fix it
-Remember for next time
Tatiana Mac
Building Socially-Inclusive Design Systems
Dropdown
Form pattern
Product registration
Atom
Molecule
Organism
Products
Industry
Beings
Ecosystem
Intent
does not
erase
Impact
Intent does not
erase Impact
Designer
User
Tatiana Mac
Building Socially-Inclusive Design Systems
Positive feedback loop
Design
Feedback
Research
Research, proactive
, reactive
REALITY - THEORY
IMPACT - INTENT
Tatiana Mac
Building Socially-Inclusive Design Systems
Comprehensive
All elements are present,
all users are present
INCLUSION
Cooperative
Adaptable
Tatiana Mac
Building Socially-Inclusive Design Systems
The rest of us
Minorities
Component -based
Comprehensive
Cooperative
Accesible
Inclusive
Adaptable
Innovative
Creative
Interdiscipliary
JasonPamental
Dynamic Typographic Systems with Variable Fonts
Type is the voice of our words
It's how 'we' hear what we read
- Dynamic typography
- Custom properties
- Calculation
Jason Pamental
Variable Font
Is a single font file that behaves like multiple fonts
Dynamic Typographic Systems with Variable Fonts
-John Hudson
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
Jason Pamental
Dynamic Typographic Systems with Variable Fonts
Jason Pamental
Dynamic Typographic Systems with Variable Fonts
Scale font-size & line-height
Viewport is not recommended because it becomes zoomable for the user as soon as you scale it by 1px
Note
font stretch
Jason Pamental
Dynamic Typographic Systems with Variable Fonts
calc( [size-min]em + ( [size-max] - [size-min] ) * ((100vw - [start]em ) / ( [stop] - [start] )));
Jason Pamental
Dynamic Typographic Systems with Variable Fonts
Please scale from 2.25em on small screens up to 5em on largest ones, starting at viewport width of 25em and stopping at 75emor larger
Jason Pamental
Dynamic Typographic Systems with Variable Fonts
Dyslexics suffer from "crowding"
More word spacing and letter spacing increases readability at 50%
--text-GRAD : add more contrast without changing or adding more space to the text block
Cassie Evans
Interactive Web Animations with SVG
is not only images but a markup language
has a DOM
SVG
Illustrations that you can manipulate with code!
Cassie Evans
Interactive Web Animations with SVG
This pen by Julia Muzafarova
Cassie Evans
Interactive Web Animations with SVG
People learn in different ways!!
Cassie Evans
Interactive Web Animations with SVG
Cassie Evans
Interactive Web Animations with SVG
Tools
Cassie Evans
Interactive Web Animations with SVG
Tools
Cassie Evans
Interactive Web Animations with SVG
Cassie Evans
Interactive Web Animations with SVG
transform-origin
Cassie Evans
Interactive Web Animations with SVG
Compatibility!
JS animations libraries
Cassie Evans
Interactive Web Animations with SVG
Greensock plugins
Cassie Evans
Interactive Web Animations with SVG
Tweening
Cassie Evans
Interactive Web Animations with SVG
Cassie Evans
Interactive Web Animations with SVG
const findFace = async () => {
const myWebcamFeed = document.querySelector('.player');
const faceDetector = new FaceDetector();
try {
const faces = await faceDetector.detect(myWebcamFeed);
console.log(faces);
} catch (error) {
console.log("oops, something went wrong with face detection")
};
}Oliver Turner
When Houdini met Goldblum
Houdini is a toolbox that future-proof styling
Lower-level API's
worklets
PaintAPI
Animation
Layout
{
Oliver Turner
When Houdini met Goldblum
.app__header {
background-image: linear-gradient(#e66465, #9198e5);
}:root {
--gradientStart: #e66465;
--gradientEnd: #9198e5;
}
.app__header {
background-image: linear-gradient(
var(--gradientStart),
var(--gradientEnd)
);
}Oliver Turner
When Houdini met Goldblum
Oliver Turner
When Houdini met Goldblum
Oliver Turner
When Houdini met Goldblum
Oliver Turner
When Houdini met Goldblum
CSS is a type language: it's declarative like ReactJS
It's great for performance
CSS vs JS
Stéphanie Walter
Mind over Matter: Optimize Performance Without Code
Stéphanie Walter
Optimize Performance Without Code
Speed perception impacts user satisfaction
0-300ms
Instant UI Visual Response
Stéphanie Walter
Optimize Performance Without Code
300ms - 1sec
Torelable
2sec - 5sec
It's fine! The system is working!
And while they wait...
Stéphanie Walter
Optimize Performance Without Code
+5sec
Just explain why!
Stéphanie Walter
Optimize Performance Without Code
lt looks fast!
Opacity + transform
Stéphanie Walter
Optimize Performance Without Code
Optimistic UIs!
Stéphanie Walter
Optimize Performance Without Code
Smart User distractions
Stéphanie Walter
Optimize Performance Without Code
Mental Model
Adam Argyle
Apps too fast: how to change the pace for better UX
Pace over speed => reduce anxiety
Speed standard?
Adam Argyle
How to change the pace for better UX
Snappy | Instant | Elastic
Plush | FLuid | Soft
Adam Argyle
How to change the pace for better UX
Ease
- 50-200ms for short distances
- 200-350ms for longer distances
Adam Argyle
How to change the pace for better UX
Strategies
- Passive vs active waiting time
Designs need white space / UX needs time
Adam Argyle
How to change the pace for better UX
Strategies
- Time is value
Designs need white space / UX needs time
WRONG | CHEAP | UNREAL
Adam Argyle
How to change the pace for better UX
Strategies
- Time is value
Designs need white space / UX needs time
BUY TIME
Distraction
Validation
Feedback
Adam Argyle
How to change the pace for better UX
Strategies
- Time based feedback
Designs need to guide / UX needs to follow
Microseconds adding value
Adam Argyle
How to change the pace for better UX
Strategies
- Interruptible
Designs need to guide / UX needs to follow
Adam Argyle
How to change the pace for better UX
Strategies
You must register
before you can vote"
Designs need to speak / UX needs to listen
Register to vote"
Adam Argyle
How to change the pace for better UX
Strategies
Designs need to report / UX needs to respond
Feedback to actions
Respond
Animate
Idle
Load
Adam Argyle
How to change the pace for better UX
Strategies
Designs need to report / UX needs to respond
Feedback to actions
Respond
Animate
Idle
Load
Sergei Kriger
Time control in Web Accesibility
aria-live="polite | assertive | off"
POLITE
ASSERTIVE
Sergei Kriger
Time control in Web Accesibility
<div role="status" aria-live="polite"></div><div role="alert" aria-live="assertive"></div>Compatibility
Sergei Kriger
Time control in Web Accesibility
el.focus();User Action
Asynchronous options
<div tabindex="0 | 1 | 2 | ...">
Sergei Kriger
Time control in Web Accesibility
Harry Roberts
More than you ever wanted to know about Resource Hints
RESOURCE HINTS
Single lines of HTML that will dramatically improve the performace of the website
"[Walmart] every 100ms improvement
also resulted in up to 1% increase in revenue"
Harry Roberts
Resource Hints
"Every trip to a new origin carries overhead (DNS, TCP, TLS)
Deal with this ahead of time for known third-party origins
Analytics services, font providers, ad networks, etc..."
Harry Roberts
Resource Hints
Harry Roberts
Resource Hints
DNS prefetch
Pre-connect when you know the IP but not the URL
Prefetch
Download a file needed for subsequent navigation.
Storage it in the HTTP cache
It will never interfere with the current page.
Doesn't work in IE9
<link rel="dns-prefetch" href="//example.com"><link rel="prefetch" href="//example.com/next-page.html" as="document">
<link rel="prefetch" href="/library.js" as="script">Harry Roberts
Resource Hints
Pre connect
When you know the domain but not the URL
<link rel="preconnect" href="//example.com">
Harry Roberts
Resource Hints
pre-connect with DNS fallback
<link rel="preconnect dns-prefetch" href="//example.com"><link rel="preconnect" href="//example.com">
<link rel="dns-prefetch" href="//example.com">
Harry Roberts
Resource Hints
Preload
It's no longer a hint, it's a mandatory fetch
Harry Roberts
Resource Hints
Harry Roberts
Resource Hints
Prerender
Download and build entire websites in the background
Add impressions & page visits go up
Harry Roberts
Resource Hints
AS attribute
Helps priotization
<link rel="preload" href="fonts.com" as="font" type="font" crossorigin />
Lara Schenck
Writing CSS Algorithms
Is CSS a programming language?
Lara Schenck
Writing CSS Algorithms
Lara Schenck
Writing CSS Algorithms
Test the design
More CSS
Lara Schenck
Writing CSS Algorithms
Lara Schenck
Writing CSS Algorithms
HOW TO WRITE A CSS ALGORITHM
- Plan
- Brute force solution
- Walkthrough
- Optimize solution
Lara Schenck
Writing CSS Algorithms
Write CSS
Test it
Refactor
Lara Schenck
Writing CSS Algorithms
Unit test in CSS
Integration test in CSS
Lara Schenck
Writing CSS Algorithms
THANK YOU!
