Smashing Conference San Francisco 2019
Årets värdar var inga mindre än skaparen bakom CSS-TRICKS och medgrundare till Codepen - Chris Coyier och självaste Vitaly Friedman medgrundare till Smashing magazine. Eftersom konferensen höll på i 2 dagar och det här inlägget inte ska bli 5000 rader långt, har vi valt ut lite favoriter från de tal som hölls. Här kan ni se körschemat och mer information kring konferensen.
Lets build a Design system, Brad frost
Brad Frost är en webbdesigner och författare som bl.a skrivit boken *Atomic Design*, driver podden *Style Guides Podcast* och medverkat till att skapa flera verktyg för designers: *Pattern Lab, Styleguides.io, Style Guide Guide* och *This Is Responsiv*e.
Brad Frost gick igenom hur man kan använda Pattern Lab för att skapa ett komponentbaserat designsystem och hur man bygger ihop det till en webbsida. Man organiserar och delar in komponenterna från små till stora i form av atomer, molekyler, organismer och komponerar samman dessa i templates och sidor. Det här är ett effektivt och kraftfullt arbetssätt, genom att man återanvänder kod och man håller ihop designen.
Effortless Performance Debugging, Anna Migas
Anna Migas jobbar som frontend-utvecklare på Lunar Logic och pratade om hur man kan upptäcka vanliga brister och optimera sin webbsida genom att använda sig av audit och lighthouse i chrome devtools.
Här några av hennes tips:
1. Preloada fonter med meta-taggar.
2. Minska ner storlek och använd lazyload för bilder.
3. Undvik att stylea saker som påverkar DOM:en negativt så lagg uppstår. Oftast handlar det om “de olika lagren” DOM:en kan ha och hur de renderas. Det finns metoder för att se hur dessa ser ut och beter sig: *Audits fliken → rendering → paint flashing.* *Performance fliken → 6x slowdown.* Man kan även se över fliken *layers* för att se hur många lager man har.
4. Använd css attributet *will-change* för att optimera layers-hanteringen.
5. Undvik att använda parallax-effekter eftersom den ofta har många lager, om målgruppen användare kan tänkas ha mindre kraftfulla datorer.
Refactoring UI, Steve Schoger
Steve Schoger är designern som tillsammans med Adam Wathan startat upp projektet *Refactoring UI*, en bok som ska hjälpa utvecklare och designers att förbättra gränssnitt. Genom att använda sig av några enkla principer och små knep kan man lyfta en design som har potential, men som kan tyckas lite klumpig eller tråkig.
Steve Schogers Refactoring UI example on Dribbble
Några punkter han tog upp med just sitt exempel:
1. För att framhäva din rubrik kan du dra ner kontrasten på subtexter, men istället för att använda grått - matcha med bakgrunden / andra färger på sajten.
2. Skapa hierarki genom att överlappa objekt och skapa djup genom att använda olika skuggor.
3. Städa upp input-fält och gör de större. Lägg till ikoner för den visuella effekten men behåll labels för användarvänligheten. Balansera ikonernas vikt mot texten genom att sätta mjukare färg på ikonerna.
4. Använd varumärkets färger och känsla och skriv över webbstandarder på t.ex. radioknappar och dropdowns.
5. Tabeller - Se till att tabellhuvudet stödjer innehåller snarare än stjäl uppmärksamheten. Det är tabellraderna som är primära och tabellhuvudet sekundärt. Kan göras med t.ex. VERSALER + letter spacing. Färgsätt varannan tabellrad istället för att använda hårda linjer.
6. Labels - Labels är sekundära och ska endast stödja innehållet. Man kan till exempel göra labeln mindre, minska kontrasten och/eller använda en tunnare font.
Making a Difference with Differential Serving, Jeremy Wagner
Jeremy Wagner är en utvecklare som också passionerat sig för att öka prestanda i webbapplikationer. Han har skrivit e-boken *The webp-manual*, som avhandlar fördelarna med att använda webp bilder rent prestandamässigt bla. i jämförelse med exempelvis JPEG och PNG.
Hans pratade om hur man kan optimera sin webpack configuration för att minska ner storleken på javascriptfiler och varför det kan vara en fördel att skapa flera olika filer. Moderna webbläsare behöver inte alltid polyfills och är därför rent ut sagt onödiga. Vilket i sin tur gör så man inte får ut den snabbaste versionen av sin applikation som man kunde ha haft. Men det går att bryta isär och anpassa olika javascriptfiler för olika mobila enheter, moderna eller äldre webbläsare i exempelvis sin webpack config. Den här tekniken kallas för differential serving. Ni kan se videon hur han går igenom det här. Här är en länk till ett exempel hur man kan göra: https://github.com/malchata/diff-serving
Generellt borde vi granska paket och plugins vi drar in våra projekt oftare. Hur mycket av ett paket drar man faktiskt nytta av och kostar det mer än det smakar? Om man bara utnyttjar en särskild del, kanske man hade sparat in mer på prestandan av att skriva det själv?
Top 3 Utvalda Utställare/Sponsorer
Slutligen så tänkte vi även nämna ett par utställare vi också gillade:
1. Smartbear
Testverktyg. Används för browsertestning, automation tester med selenium. Konkurrent till Browserstack, som tycks vara något dyrare.
2. UXPin
Designverktyg och programvara, fast med riktiga interaktiva states och componenter i kod. De har även bra tillgänglighetsverktyg för att påvisa hur användare med tex färgblindhet upplever din app/prototyp. Man kan dessutom importera kod och designa om. Främsta konkurrenten är för närvarande Framer X, som fungerar på liknande sätt.
3. Abstract
Versionshantering för designers. Har bland annat integration med Sketch och underlättar för designers att samarbeta med varandra utan att skriva över varandras ändringar. Detta gör att välkända mappen “old” eller “file copy 23” numera slutar att existera.
