Repository navigation
SmashingConf
Als een sticky/fixed element op je website hebt en je zoomt in dat blijven die vastzitten en gaan dan over je hele scherm staan.
Je kan het oplossen met:
- Innerwidth
- Innerheight
- Outerwidth
- Outerheight
Aria
- Aria-haspopup is voor menu niet voor nav
Menu
- Should manage focus
- Similar to a Menu on a desktop application
Je kan beter dit gebruiken
- Aria-expanded
- Popover
Popover met div
- role group
- form logica collection
Popover met dialog
- id is genoeg geen role
- Popover is goed voor tablet en screenreaders
- Expanded True zit er standaard in
Svg
- Als je svg er meteen in zet dat heeft die een role image
- Aria-hidden True zetten
- wel laten zien aria label met role of titel niet met role
- Titel en aria-labelledby kan wel
- Role presentation is content spreekt niet de semantiek uit
- Img kan je role presentation en aria label zetten maar is beter om een alt te gebruiken
- Als de heading in de button zet dan word het gewoon tekst maar als je de button in de heading zet dat is de heading een heading
Geolocation
- Styling ervan
- Lijkt op een button
- Word-spacing kan niet verder dan 16px
- Opacity werkt niet
- Background kleur veranderen werkt niet meer kan niet klikken
- font-size 48px is max anders werkt het niet meer
Scaling
- font-size 30
- mobile werk anders systeem is groot maar de website niet
- name = text-scale nu nog voor Chrome canari
tabs
- Je moet de pijltjes gebruiken om te navigeren js
- focusgroup tablet nomary is zonder js
- role tablist word automatische gezet
Sfnsp
- document.activeElement
- Is handig om te debuggen
- Anctorlink focus verdwijnt niet
- Werkt niet overal
Heading is belangrijk voor screenreader
Goed kijken naar design
Apca is niet officieel kijk ook naar andere is voor testen
Screenreader before content = content for heaven is beter om erbij /Menu te zetten
Ai is Powerful = usable
Ai en mensen
- Ai kan helpen met voorbeelden Writer kan besluiten en kiezen hoeveel er staat
Ai interfaces vs Writer context
- Writer weet meer wat ze nodig hebben op het moment Ai is het lastig om te weten wat je nu nodig heb
Ai personalized vs Writer personal
- Persoonlijk is betrouwbaarder
- Recommended is niet altijd helpful
- Ai is niet beter dat ze je al kennen het is fijn om ook iets nieuws te zien
Ai digitale world vs Writer real world
- Writer kijkt naar wat die ervaart en wat je er over voelt. Ai doet dat niet
Ai acting human vs Writer being human
- Is niet de tekst maar hoe het geschreven is
- Persoon is persoonlijker helpt meer
- Ai is makkelijk
Ai powerful vs Writer thoughtful
Ai
- Simple
- Clearing
- Concise
Human
- Honest
- True
- Kind
Human focus is belangrijk
Complexity is overal
Het wordt niet volledig begrepen en verandert voortdurend
Voorbeeld:
Aantal mensen → Aantal connecties
2 → 1
3 → 4
6 → 57
Word steeds ingewikkelder
Addition
- Bedrijf complex
- Ze doen de complexiteit niet weg
Emergence
- Zoeken short cuts
Kan gebeuren dat niemand het meer weet
Why
- Why? Is powerful
- Is eng
- Embrance stupiditeit
- Embrance Naivety
- Maar je leert van fouten
- Ask why a lot
- Waarom doe ik dit
MicrosoftTeams-video.mp4
Real world
- Complexy breaks down
- Is lastig om daar te komen
Feed your intuition
- Feel het
- Get to now People
- What if...?
Be bold
How simple
Ga zo ver als je kan
How kind it is
Be wrong
- Je moet fout zitten en wees niet bang om fouten te maken
Change your minds but also change there mind
When in doubt, try for beauty.
Vorm en functie is hetzelfde (spoon)
Je weet niet als je design of het goed is maar je kan intuïtie kan goed zijn
Build it
As soon, simple and supple as possible
Fast first, good later
Talk to isers (re)iterate
Instagram dina.a.amin
Making by breaking
Maakt stopmotion met kapotte spullen
- Er is altijd een idee
- Tools maak je niet Creatiever
- 30 kleine projecten is beter dan 1 grote
- Projects Onder Een theme is meer powerful
- Limitatief are essential
Handdoff is een beslissing modus
Origin of truth
- en wat is het morgen
Specs plugin heeft weaknesses
design.md
- Compact
- Intentional
- Empircal
- Complete
- Precies
Design system
Design tokens
- Good design system ship
- Better design system change
- Best design system flow change though an ecosystem that's predictable, performant and error-free
Specs
- Sepcs plugin -> UI for human to generate it in Figma
- Specs cli -> commands for humans, Ai and pipelines
- Specs From figma -> the engine to generate specs form Figma
- Speca Schema -> how component data is organized
Anova ai figma
ADR = assistent
Hoe het gemaakt word en welke keuzes gemaakt worden
Ik ben naar die van Dina Amin en Nadieh Bremer gegaan.
Ze lieten schetsen zien en hoe ze op een idee zijn gekomen.
Voorbeeld is gemaakt met html, css en js vooral js.
visualcinnamon.com
google trends om data dit vinden
data csv
Idee en maken
- schetsen
- uitproberen
- schetsen vrijheid mogelijk om alles te maken
- metaphors gebruiken
- Tayasui sketches om beter te schetsen
- screenshots is handig in het proces om terug te kijken of iets terug beter is
- d3 kan handle data later
- mouseover is hover <- mouseout
- understand d3
Meerdere items <canvas>
Soms blijf je ergens in zitten (rabbit hole)
Mobile met data en design is lastig
Nieuwe CSS
@container
- Je moet altijd container-type: inline-size gebruiken op een element die de container moet zijn anders werkt de container querie niet.
- het is slimmer dan media querie
- als je html met font-size gebruikt met rem moet je container gebruiken anders gaat je layout kapot.
- Je kan ook calc gebruiken = @container (width > calc(200px * 3+2rem)) {
Querie
- width > is hetzelfde als min-width
- width < is hetzelfde als max-width
@container Je kan ook calc gebruiken
- @container (width > calc(200px * 3+2rem)) {
@container-style
- heeft veel applications
- kan met variable
@container scroll-state()
- container-type: scroll-state
- Scrollable (inline)
- Snapped (inline)
- Stuck:top
@container root scroll-state (scrolled:bottom)
translate: 0 -100%
Header { position: fixed, top: 0, with: 100%}- container width vw
- vi met container kan je met classes gebruiken
- cqi met container (inline-size)
Overflowing leadership (overflowing.app)
Ga iets anders proberen (leer je van, nieuwe kennis)
- goals
- aspriations
- hoe je kan helpen
- plan Leadership
- insight
- Influence
- Intergrity
Leadership
- trust
- Power
- Knowlege
kijk wie een goede leider is en die jou helpt
