Arbetsprocessen

Beskrivning av arbetsprocessen

Projektstart och val av verktyg

Jag började arbetet med att skapa ett nytt webbprojekt med hjälp av Node.js och Vite. Vite användes både som utvecklingsserver och för att bygga en färdig version av webbplatsen. Syftet var att få en smidig arbetsmiljö där jag kan arbeta lokalt, testa förändringar direkt och samtidigt kunna skapa en optimerad version för publicering.

Struktur och organisering av projektet

Fokus på struktur var viktigt redan från start. Arbetsfiler för HTML, CSS, JavaScript och bilder organiserades i tydliga mappar, medan publiceringsfiler hålls åtskilda och skapas automatiskt vid build. Det gjorde det lättare att hålla ordning och att förstå skillnaden mellan det jag jobbar med och det som faktiskt ska publiceras.

Versionshantering med Git och GitHub

Versionshantering sattes upp med Git och GitHub, och jag har arbetat med separata branches för utveckling och publicering. Under arbetets gång har jag gjort regelbundna commits för att visa hur webbplatsen vuxit fram steg för steg och för att dokumentera mina beslut längs vägen.

Uppbyggnad av webbplatsen

Webbplatsen består av flera sidor, bland annat en startsida, en sida som beskriver arbetsprocessen och en sida som fokuserar på bildoptimering. I Vite-konfigurationen angavs varje HTML-sida så att de korrekt hanteras vid build och inkluderas i den färdiga versionen av webbplatsen.

Automatiserad bildhantering

För bildhantering skapade jag ett eget Node-script med hjälp av biblioteket Sharp. Originalbilder placeras i en särskild arbetsmapp och scriptet används för att automatiskt skala ner och konvertera bilder till moderna format som WebP. På så sätt slipper jag optimera bilder manuellt och kan enkelt köra processen igen om nya bilder läggs till.

Interaktivitet med JavaScript

Jag har även använt JavaScript för att lägga till enklare interaktivitet, bland annat en funktion för att byta färgtema på webbplatsen. Valet sparas i localStorage, vilket gör att temat följer med mellan sidor och vid omladdning.

Sammanfattning av arbetssättet

Sammanfattningsvis har jag arbetat stegvis och strukturerat med fokus på automatisering, tydlig filstruktur och versionshantering. Målet har varit att skapa en arbetsprocess som är lätt att följa, enkel att återanvända och som visar hur moderna verktyg kan förenkla både utveckling och publicering av en webbplats.