Anton Warnhag

Så blir det enklare att börja koda som designer

Tidigare i veckans skrev vår CTO Stefan Pettersson om hur du ska tänka när du lär dig programmera. I dag delar vår designer Sandra Hindskog och vår utvecklare Anton Warnhag med sig av sina erfarenheter av hur det är att börja koda för en designer.

Att koda ur en designers perspektiv

Det här är Sandra Hindskogs berättelse

Som designer tycker jag att det finns många anledningar att lära sig programmera. Jag har länge känt att det är tråkigt att inte få vara med och skapa de gränssnitt som jag har lagt ner mycket tid och kraft att tänka ut – att lämna över själva utförandet till en annan person. Jag ville vara mer delaktig i utförandeprocessen, men visste inte hur.

Om man är en nybörjare på programmering kan det lätt kännas som en övermäktig uppgift. En enkel googling på programming for beginners ger miljontals träffar. Att hitta kunskapen om HUR man gör är inte problemet. Det är snarare att hitta motivationen och pressen att faktiskt ta steget att börja.

En bra metod att lära sig nya saker är att göra det på arbetstid. Du får pressen på dig att leverera något av kvalitet på en utsatt tid, men du har samtidigt kollegor att fråga om hjälp och du får betalt under tiden! Så det var så jag gjorde.

I två månader har jag nu stått för själva stylingen i de projekt jag jobbat i, fokuserat enbart på html och css. Det här har jag lärt mig:

  • Det är inte svårt – du måste bara ta dig förbi fasen att sätta upp allt. Det svåraste med att börja programmera, enligt min erfarenhet, är inte den faktiska koden utan de hundra saker du måste göra för att få koden att faktiskt fungera i ditt projekt. Det är Gulp-filer, terminalkommandon och installationer av olika slag. Men låt inte det avskräcka dig! Du behöver faktiskt inte förstå allt – be din utvecklarkollega om hjälp. Så fort det är avklarat kan du fokusera på det som är roligt, själva koden.
  • Det kräver ett nära samarbete mellan designer och utvecklare. Eftersom det är lätt att fastna i saker som nybörjare är det oerhört värdefullt att ha någon att bolla tankar och problemlösningar med.
  • Du får full kontroll över utförandet. Det bästa med att programmera! Att inte längre behöva be någon annan ändra en viss storlek, lägga till en ny modul eller vad det nu kan vara. Man kan göra det själv.
  • Det är värdefullt att kunna designa riktigt innehåll. Det finns något oerhört värdefullt med att kunna sitta med faktiskt innehåll och testa designlösningar live på olika skärmstorlekar.

Att hjälpa en designer börja koda

Det här är Anton Warnhags berättelse

Sandra ville testa att utföra designarbetet för våra projekt direkt i kod. Det är ett tillvägagångssätt som jag stödjer helhjärtat, bland annat eftersom jag tror att man som designer får en bättre bild av hur saker blir live om man har byggt det hela vägen själv. Jag ska inte heller hymla med att det är skönt att slippa pixel pushing och i stället fokusera på funktionalitet. För att inte prata om att det är effektivare än när varje liten designändring ska skickas fram och tillbaka mellan oss.

Som ”lead dev” tänkte jag skriva kort om vad vi gjorde i lite mer tekniska termer för att få det att fungera, för att hon inte skulle tappa lusten inför allt som skulle läras in. Samtidigt som vi skulle prestera saker i en viss hastighet – vi har deadlines att möta.

Därför utgick vi från vad hon redan kunde – HTML och Sass – och fixade en teknisk setup som tillät henne att bygga utifrån det.

Jag besparar er de exakta detaljerna för hela miljön. Det är en ohelig blandning av Gulp och Webpack med plugins upp till öronen. Fokusera på de här båda poängerna i stället:

1. Ge maximal kontroll över markup och stylesheets

Jag tvivlar på att någon bryr sig mer om semantisk HTML än jag, men det är något som är relativt lätt att städa till efteråt. Se i stället till att det inte finns några hinder för att designern ska kunna ändra fritt i er markup. Många saker man vill göra kommer att kräva den friheten, oavsett hur grym man är på CSS, så försök inte äga den över designern.

Se också helst till att ha ett avskalat, lättläst template-språk för markup. Handlebars, Twig eller liknande. Vårt första försök var att Sandra skulle börja fixa smått i ett redan existerande projekt för en Wordpress-sida, och PHP var ett enormt hinder eftersom det stör läsligheten och tar för mycket tid att ens fatta hur man får ut ett värde (vilket du vill – undvik lorem ipsum).

Med det sagt så är man absolut inte låst till enkla hemsidor för att en designer ska kunna koda. Vi har på bara tre veckor gått från det jag skrev ovan och över till React för flera delar. Det går utmärkt så länge man separerar ut markup-delarna vettigt!

2. CSS Modules gör allt säkrare

En 7 folders-1 file-setup i all ära men det går att ta strukturen av CSS ännu längre. Under förra året lades grunden för local scope inom CSS tack vare framfarten av CSS Modules. Andra har skrivit bättre om hur det hjälper en att hantera en allt expanderande kodbas och allt fler kockar, men en del av detta är hur det tillåter experimenterande inom design – utan att behöva oroa sig över krockar med övrig styling.
För någon som är ny så är det skönt att veta att man inte riskerar någon annan del av sidan med sin kod när man sitter och behöver lösa att en knapp har tre olika dimensioner av states (CSS-klasser som .active, och därtill hörande komplikationer).

Genom att också se till att dessa moduler sköter sina beroenden själv, i stället för att samla importer i en enorm main.css, så är det väldigt lätt för mig att städa kod som skrivits, eftersom man undvikit skapandet av osäkra förväntningar på att andra filer är närvarande.

Sammanfattningsvis

Den viktigaste poängen för att din designer ska börja (och fortsätta) koda är:

  • Att denna ska kunna iterera över alternativa utseende så snabbt som möjligt, och göra det utan att behöva tänka på det övriga projektet.