But they all have issues (vegan, gluten intolerance, peanut allergy) So they all went to the bar -> examples of constraints : making people happy is the objective, you adapt to the constraints
Constraints makes us more creative : Mihaly Csikszentmihaly Nietzsche : "Dancing in chains" Haiku, sonnet
We tend to ignore the constraints that allow us to build better products
Actual constraints :
- Technology : infinite number of variables constraining the product as it is experienced
- Humanity : infinite number of variables constraining the product as it is experienced
We don't have disabled users
15% of the world population lives with a disability. Most of them you can't perceive -> 8% of people are colourblind Changes with age : hald the people over 65 have arthritis Not being disabled is temporary Lack of empathy makes life hell for disabled people : tech ignores it Accessibility is still treated as unit tests were a decade ago
Building on the assumption that everyone has a good device : the web industry is rich MOst people have crappy phones Embrace the constraints : performance engineering ? or resilience engineering? Building things that are tough Progressive enhancement : HTML/CSS first, working with the grain. Client-side JS is not resilient. Very useful BUT slow and broken The IKEA of web dev, frameworks commodified the web -> that's why native apps are pushed hard instead of mobile websites A simple site is a resilient site
Is your site important? Does an unimportant site need to be resilient? Importance of asking questions, heuristics, constantly define what's important :
- Will it endanger life if ot doesn't work?
- Will it cost a user money?
- Will they suffer legally?
- Will their job be impacted?
- Will they be time penalized?
Elegance of design, simplicity, universality. Fuck Facebook : enabling genocide
Seems rather straightforward ?
Low hanging fruit for web peformance. 60% of the web's page weight.
A lot of good practices, but why ?
Image makiing was analog for the longest time. Photography changed that by bringing light into it, but still a physical thing.
Digital age : light made electronic signals -> the pixel.
Picture Element = Pics El = Pix El
CRT tech commercially available in 1922 !
Drawing on a screen : raster scan / random scan (vector, for line drawing)
Digital inmage file formats. : also raster and vector !
Raster :
- color depth : 1 to 24 bits
- McPaint
- MS Paint => BMP
GIF : the first format made for transfer of data (compression algorithm Lempel-Zich-Welch)
JPEG : revolutionary compression -> convert RGB to YCBCR (downsampling, lossy). Very good for photo but bad for sharp contrast / black and white. Tips :
- HQ source
- alignmen on 8x8 pixel grid
- reduce contrast and saturation
- sepia image colored with CSS !
- slight blurring
JPEG encoders : libjpeg, mozJPEG, Guetzli
PNG : a history against the gif proprietary format. (Portable Network Graphics). Tips :
- lossless!
- reduce number of colours
- choose the right pixel format
- use indexed images
- optimise fully transparent pixels
How are images painted on the screen by browsers?
Lots of small tips about service workers. App shell, app shell with bottom bar, smooth animations
Design systems manager of Github. UI components to repeat visual systems and intereaction. Components API : props and modifiers and naming conventions Developer experience
Github has a high critical level. And has problems :
- hard to make changes
- slow feedback loop
- risk
Using the system should be mandatory, should be possible to only use the system :
- increasing coverage
- increasing single points of leverage
Constraining scope if the rules are followed :
- BEM-style OOCSS objects
- Utility classes
Very leaky and inconsistent. Very hard to maintain. Harm the user's experience when bugs happen.
GH is build on Ruby on Rails with Sass. No great way to create components.
Exploration and experimentation : React.
Everything is a component :
- elements : Button
- helpers: Box, Position, Text
- patterns: Alert, Avatar
Style encapsulated in component
Flexibility the devs want VS the constraints the boss wants
Constraints
Flex (lots of utility) :
- easier to customize
- quicker for small updates
- easier to experiment with layout
Is it a linear scale?
Flexibility WITH constraints : Tetris! Constraints with the shape of the objects and movements BUT free to build anything with it
Hello
Important to LIMIT the amount of props : border is antipattern with so many of them
How to contrain it! If too flexible, easy to introduce small variance in look
- How easy is it to ctrl z?
- Is it a footgun?
- What's the worst that could happen?
DUPLICATION IS FAR CHEAPER THAN THE WRONG ABSTRACTION (Sandi Metz)
Documentation : still important. Why and how the pieces fit together. What is the motivation for the abstraction. Designing UI for people that are not CSS or design experts. Design systems are for PEOPLE. But who ? Why? What are their needs? User > dev
More and more components More and more mistakes More and more learning
Moving logic from the server to the client, inspiration from frameworks like Ruby on Rails and Model/View/Controller Doesn't work for building UI. Complex, messy.
Encapsulating in components. A component tree. Easily isolation of logic, both computer logic and human logic. is a button both in human mind and computer code.
A black box of functionality.
- the whole point is to have components for elements that are dupliocated a lot
- but adding functionality to a component explodes the number of props (propspocalypse)
- creates actually a lot a confusion by having reused components that LOOK different for some reasons
Past me : makes decision with less data than I have now. Might be not the best. Present me : take inspiration from past me mistake
Trading maintainability VS configurability
How to allow this "slight variance" ? Explicit configuration over implicit variance with boolean flags Define variants for your components and encapsulate the behaviour, for comnponents that are "nearly the same".
Components are cheap but not free. Creating new comnponents, breaking big ones down is not always a net positive.
Is it too big :
- how many lines of codes ?
- how many HTML elements does it render ?
- how "hard" is it to unerstand?
- is it hard to name? Does it have "and" in the name?
Not all the components should be black box, or CAN be. An app is a network of connected components. Challenge : which should be connected, which should stay black box. Some approaches :
1 - fetching from an API : renders nothing or a spinner 2
70% websites use webfonts, for good reasons Two primary metrics for perf :
- first paint
- first meaningful paint
https://hello-world-fonts.netlify.com
So many fonts loading techniaues -> Zach Leatherman
You don't need a technique, you need a strategy : an automation tool
Guidelines:
- Tool adapts to your code
- Works with all pipelines
- No JS dependency
- No server component
Controlling rendering : font-display -> block / swap / fallback / optional (optional gets what is here)
- control on rendering
- no negative
Controlling latency : self-hosting (google-webfons-helper : downloaf the font and self host)
- no external css, no extra connection, faster loading, cache-control
- no CDN
- no subsetting
- no autoupdates
Controlling delay : preload (<link rel="preload" as="font" type="font/woff2" crossorigin="anomymous">)
- faster loading
- delay other assets
Controlling size : subsetting (create a new file with only the characters you need, google fonts already does it: unicode-range + superset fallback. Glyphhanger can get you a subset, fonttool can create it)
- less size
- external dependencies, complex workflows
- fallback flaws
Tool created : subfont
History with the web Some observation about documentation of browsers
If we pretend => is a λ
λx.x -> x => x
λx.λy.x+y -> x => y => x + y (lambda only take one input, so we need currying in JS)
(λx.λy.x+y) 5 1
(λy.5+y) 1
5 + 1
6
(x => y => x + y)(5)(1)
var zero = f => x => x
var one = f => x => f(x)
var two = f => x => f(f(x))
-> these are Church numerals. Creating counting with fn, not numbers.
How do we add fn calls? n+ m ? Call the fn n times, then m times
var add = n => m => f => x => m(n(f)(x))
add(one)(three)
How to we multiply? n * m
var mult = n => m => f => x => m(n(f))(x)
mult(two)(three)
bool ? then : else
var ifThenElse = bool => thendo => elsedo => bool(thendo)(elsedo)
var trueVar = thendo => elsedo => thendo
var falseVar = thendo => elsedo => elsedo
var tired = trueVar
var coffeesToday = ifThenElse(tired)(three)(one) -> three
var not = bool => thendo => elsedo => bool(elsedo)(thendo) -> reverse logic
not(tired(three)(one)) -> one
var or = boolA => boolB => boolA(boolA)(boolB)
or(trueVar)(falseVar) -> true
var and = boolA => boolB => boolA(boolB)(boolA)
and(trueVar)(trueVar) -> true
and(trueVar)(falseVar) -> false
Church encoding!
Data URI don't need to be base64 encoded
Only linebreak need to be escaped
We can see what an svg draws! We can edit the svg's CSS
Add a text tag in! (need y=1em as baseline, no great defaults)
Add a style element inside the svg document that is inside the css!
One file, several styles Double axis ! x and y!
Decovar : experimental font