2017 Personal Favoriter

0
26

Det har varit ett väldigt produktivt år för alla på webben, och som alla av oss här på CSS-Tricks strövade runt för konferenser, läsa inlägg och byggda projekt, det fanns några höjdpunkter av bidrag som verkligen stack ut till oss. Var och en av oss plockade 5 resurser som antingen är de mest användbara, de mest unika, eller är saker som du kanske har missat som vi tycker är värda att kolla in.

Saras Plockar

Mirakel av Generatorer

Jag gillar verkligen när någon tar ett djupt dyk på ett visst ämne och gör det bra. Jag hade äran av att se Bodil Stokke ge denna prata på Frontend Konferens i Zürich och det är så charmig och underhållande som det är lärorikt.

Designa med Grid

Jen Simmons täcker status av CSS Nätet, och hur man arbetar med det från design till utveckling. Jen är en mästare på nätet, och lab avsnitt av hennes webbplats visar förmåga av detta medium.

En uppdatering eftersom detta talar har kommit ut: Grid har även levereras i Microsoft Kanten.

Vue Apollo

Detta är mer som två saker som jag är intresserad av insvept i en enda sak. Guillaume Chau har gjort ett bra jobb med att skapa en Apollo/GraphQL integration för Vue, inklusive några stora demonstrationer för att utforska.

Kodning Tåg

Denna resurs har varit ute ett tag, men Dan nu har en så stor samling att det är ett bra tillfälle att nämna det.

Kodning Tåg är små, halv-timme bitar av tutorials – allt från att skapa en stjärna fält för att lära sig hur Neurala Nätverk fungerar. Dan är en otroligt engagerande och lovable instruktör och gör att du känner dig mycket välkommen när du utforska nya koncept.

Motion i Design System

Val Huvudet får till hjärtat av den roll när det gäller att integrera rörelse i en Design System eller en Komponent i Biblioteket.

Det kan vara tufft att kommunicera animation eftersom du nödvändigtvis måste samarbeta mellan design och teknik. Val ger dig verktyg att få denna process att fungera väl.

Robin Plockar

Design System

System för utformning av Alla Kholmatova var en av de bästa böcker jag läst i år 2017.

Det är en bok om hur man kan samarbeta med ett team som visar att koden kvalitet är bara en del av designing great-system på webben. Boken handlar inte så mycket om design så mycket som det handlar om att lära sig att kommunicera över stora grupper av människor och hur vi bättre kan kommunicera med alla i en organisation.

Webb-Typografi

En annan bra bok jag läst i år var Webb-Typografi av Richard Rutter, denna gång med fokus mycket mer på förhållandet mellan CSS och sättning.

Min favorit del i boken är dock där Richard beskriver att webb-typografi är fundamentalt annorlunda från andra former av sättning och kräver en rad nya kunskaper och färdigheter. Det är spännande läsning.

Lila.pm

För de flesta av detta året har jag fokuserat på att förbättra min UX och produkt design och jag måste säga att Lila var den mest användbara verktyg för att organisera stora mängder data och forskning. Jag använde det som ett arkiv som lagras varje handling jag gjort, varje Balsamiq wireframe och hi-fi Figma mockup jag skapade allt på ett ställe. Detta gjorde det så mycket lättare att kommunicera med andra lag och förklara mina tankar på ett projekt.

Figma

Detta år har jag bytt till att använda webbaserade verktyg för design av Figma full tid. Det har varit så mycket användbart eftersom mitt jobb kräver att samarbeta med massor av ingenjörer, produktchefer och andra designers — så att snabbt kunna dela en driva med dem och få feedback har exponentiellt förbättrat min design kotletter. Plus, det påminner mig om Fyrverkerier som förmodligen är ett av det bästa program som någonsin gjorts.

Inkwell

Detta år Hoefler & Co. släppt Inkwell, en ny familj av typsnitt som efterliknar en mängd olika handstil stilar och jag kan inte sluta tänka på dem. Ett bra exempel på deras användning på Chris’ blogg där alla dessa konstiga stilar bör inte arbeta alls, men på något sätt de gör bara.

Chris Plockar

En Design för Alla Amerikaner av Mina Markham

En masterclass i offentliga tal, om du frågar mig. Roligt, personligt och rätt för den typ av arbete som många av oss gör.

Begreppet

Tanken är förmodligen den mest signifikanta biten av nya program jag har bytt till detta år. Det är en anteckningsapp på det centrala och det är funktionsrika i detta avseende. En av mina favoriter är att varje ton är också en mapp, så att du kan få så kapslade som du vill med din organisation. Om du ger det en chans, jag slår vad om du kommer att kunna se hur det snabbt kan ersätta massor av andra appar.

Mest betydande för att en lista som denna, är att det är byggt för webben, men har också native applikationer på en mängd plattformar. Jag tror 2017 var väsentlig i och med att vi började verkligen känna en suddas ut mellan vad som är en webb-och vad som är plattform för infödda. Jag misstänker att det kommer att bli svårare och svårt att säga, och då med alla de fördelar som internet har i sig, det kommer att göra mindre och mindre meningsfullt att bygga någon annanstans.

CSS

CSS hade en banner år. CSS Nätet, naturligtvis, men vi fick också font-displayen börjar fartyg, vilket är underbart för prestanda. Vi fick landmärke selektorer som :fokus-inom att bevisa förälder väljare är inte omöjligt. Vektorgrafik har flyttat ut på det sättet i CSS-fil med en samling av egenskaper, bland annat animation och rörelse. Man kan säga att CSS har fått mer kapabla och lättare. Jag njöt av att skriva inlägg som den här om ett reglage som visar hur långt man kan komma i CSS dessa dagar.

RIP Firebug

Jag tycker det är skönt Firebug hemsida är en hyllning, adjö, och kort historia Firebug. Firebug lade grunden för vad bra DevTools skulle kunna vara. Jag är glad webbläsare har tagit dem i huset och förvandlade dem till de eldsjälar som vi använder nu, men det är allt tack vare Firebug.

Om jag var tvungen att plocka den mest betydande tre saker som har gjort webben utvecklingsplattform det är idag: 1) DevTooling, började med Firebug 2) avtalet från alla webbläsare som web standards är till nytta för alla och faktiskt vara disciplinerad om att tillämpa detta tänkande 3) Vintergröna webbläsare.

PWAs

Jag känner mig som Progressiva Web Apps är i huvudsak bra marknadsföring för en samling av bra idéer som gynnar någon hemsida. Det är precis så Jason Grigsby gör:

Det gör det enkelt att plocka för 2017. HTTPS! Service arbetstagare för offline-vänlighet! Prestanda fokuserad! Gör dessa saker, och belönas med fler funktioner som native apps njuta av, som en position på hem-skärmen på mobila enheter. Blur dem linjer, y ‘ all! Även om du inte gör allt på listan, det finns stora fördelar för varje steg längs vägen.

Geoff tips

CSS-Grid

Detta kommer inte som någon överraskning, men det är definitivt värt flera nämner. Nätet har verkligen föryngras min kärlek för CSS. Inte bara för att det tar en hel del av komplexitet ut layouter som används för att kräva ett kreativt användande av flottar, visar och positionering, men det har gett mig att klippa CSS-ramverk helt ur mitt arbetsflöde. Jag menar, det är att ramarna är dålig eller inte bör användas, men jag personligen lutade sig på dem en hel del för sina grid system. Det är inte längre fallet och resultatet är ett mindre beroende i min stack och det är fritt att skriva mer vanilj CSS.

Prototyping Verktyg

Robin redan nämnts Figma och som är helt i linje med vad jag syftar på. Det verkade vara en explosion av innovation i prototyper verktyg. Skiss, Figma, InVision och, ja, Adobe alla höjde sitt spel i år och webbdesigners var stödmottagarna. Dessa verktyg har öppnat upp har gjort det lättare att samarbeta med andra mönster, kritik arbete, få feedback från våra kunder, och i slutändan få in webbläsaren snabbare. Jag har aldrig tillbringat mindre tid i grafisk design mjukvara och det har varit awesome.

Här är ett smakprov på vad jag syftar på:

  • Att Införa InVision Studio
  • Att Införa Freehand
  • Privata Delar i Skiss Moln