Arbetsprocess
för detta moment.
Min arbetsprocess har kortfattat gått till enligt följande:
• Jag skapade en ny tom projektmapp för min webbplats på datorn
• Jag öppnade mappen i Visual Studio Code(VSC). I VSC skapade jag en ny index.html-fil. Jag skapade också en main.js som jag lade i en js-mapp och jag skapade en index.css som jag lade i en css-mapp. (Jag brukar inte kalla min huvud-css-fil för styles.css utan har för vana att kalla dem för det html-filerna heter ifall de hör till var sin webbsida, och om någon css-fil blir väldigt innehållsrik, som t ex för mina flippade bilder här på denna webbplats…ja då skapar jag en egen css-fil för detta och döper den till något tydligt)
• Jag skapade också en README.md eftersom alla repos bör ha det, men jag fyllde i den först lite senare
• Sedan skapade jag ett nytt NPM-projekt (Node Package Manager) genom att gå till terminalen och skriva npm init (jag gjorde detta ifrån min projektmapp i VSC-terminalen så den kopplade rätt). Detta möjliggörs naturligtvis av att jag redan hade Node.js installerat på min dator för att kunna exekvera JavaScript-kod utanför webbläsaren.
• Jag tryckte enter och lämnade alla inställningar default, förutom att skriva mitt namn som "author".
• Sedan forsatte jag och installerade Parcel, också via terminalen, genom att skriva kommandot install parcel --save-dev. Detta kommando installerar Parcel men som ett utvecklingsberoende, vilket gör att det inte påverkar mina produktionsfiler. Jag vill inte att mina originalfiler/källkodsfiler ska kompileras eller minifieras!
• Efter detta så tog jag bort lite inställningar i package-json-filen och lade till ett start-script och ett build-script för Parcel, genom att skriva "start": "parcel" och "build": "parcel build".
• Innan jag lämnade package-json-filen ändrade jag "source" till "src/index.html" och därefter flyttade jag in mina alla mina arbetsfiler för webbplatsen i en mapp i roten som jag döpte till src.
• Jag testade sedan att via terminalen och kommandot npm start, starta en live-server. Jag fick en adress och kopierade in den i mitt webbläsarfönster och där kunde jag nu se alla mina uppdateringar live.
• Sedan körde jag istället skriptet npm run build i terminalen vilket bygger min webbplats genom att generera alla publicerbara filer i en mapp som heter dist (distrubition). Dessa filer skulle jag kunna publicera som min webbplats om jag ville.
• Därefter var allt klart för en första versionshantering i Git och Github. Men först behövde jag skapa en .gitignore-fil och fylla i det jag INTE ville versionshantera. Detta steg misslyckades jag lite med några gånger vilket var smått frustrerande…
• När jag hade lyckats fylla i .gitignore-filen korrekt (jag ville inte versionshantera node_modules/, dist/, package-lock.json eller .parcel-cache) pushade jag upp till Github och skapade ett nytt repository. Förutom >Main-branchen skapade jag en Dev-branch för att ha till utveckling och testning. Dessa uppdateringar mergade jag sedan till Main-branchen när jag ville publicera det på min webbplats.
• Jag valde att jag ville bygga och publicera min webbplats med Netlify, så jag kopplade ihop mitt konto där med mitt Github-konto och valde att bygga en site av mitt nyskapade repo och då just Main-branchen. Build command ställde jag in till npm run build och de filer som skulle publiceras ska hämtas ifrån mappen dist. Denna mapp och dessa filer skapas nu ”per automatik” varje gång jag pushar en ny commit till min Main-branch på Github-repot (det var därför dessa filer inte behövdes versionshanteras eftersom de skapas på nytt varje gång Netlify bygger min webbplats med Parcel).
• Efter allt detta jobbade jag på som vanligt med min webbplats. Jag skapade en mapp för bilder och en för logotyper under arbetets gång. Jag lägger väldigt mycket tid på min CSS, som jag tycker är riktigt roligt och har svårt att slita mig ifrån, och tillsammans med JavaScript blev jag riktigt nöjd med min animerade hamburgermeny! Något annat nytt jag ville testa och som också blev bra var flip-funktionen på mina bilder där jag på baksidan berättar hur de blivit optimerade.
• Det som Parcel gjort för mig är alltså att optimera mina bilder till ett annat filformat och storlek, vilket komprimerar filstorleken avsevärt. Parcel har också minifierat mina js- och css-filer så onödiga tomrum tagits bort osv. Parcel har också konkatenerat (slagit ihop) mina css-filer och hade gjort likadant med mina js-filer om jag haft flera.
• Slutligen har jag lagt till ett eget kommando för transpilering. Detta är att omvandla min JavaScript-kod i det här fallet så att min kod ska bli bakåtkompatibel och stödjas i (så gott som) alla webbläsare. Det kommando jag skrivit är "browserlist": "> 0.5%, last 2 versions, not dead" och detta skrev jag i package.json-filen.
Mina slutsater av denna uppgift
Smidigt att ha ett automatiserat publiceringsflöde när man framöver inte har tillgång till skolans FTP för publicering. Också bra att komprimera filer och bilder för en snabbare webbplats. Jag hade lite strul tyvärr med error i Parcel beroende på lite synk-problem mellan Main och Dev när jag varit inne och flyttat sökvägar av logotyper i min mapp. Eventuellt verkar det som att jag även fick fel pga .svg-filer för problemet löstes efter jag sparat om dem till .png så Parcel kanske inte är 100% stabilt i alla lägen (live-servern kunde köras med svg-filerna dock ska tilläggas). Jag lyckades först inte heller att storleksanpassa mina bilder i picture-elementet så därför var mina stora bilder vanliga img-element länge...men till sist lyckades jag lösa detta. Har haft lite svårt att styra storleken på bilder ibland i tidigare projekt också så detta behöver jag lära mig bättre helt enkelt.
Annars har det fungerat hyfsat smidigt. Roligast har dock varit att lära mig nya trix i CSS och JavaScript! Jag kämpade länge och väl med min hamburgermeny, som skulle ändra färg på text, ram, streck och glow vid rätt klick och jag har säkert animerat och kodat den krångligare än nödvändigt...men stolt att jag lyckades! Det är trots allt det visuella som jag brinner för mest. Att det blev ett drink-tema på bilderna var bara slumpen. Många av mina designer växer fram ur de första bilderna jag, ofta rent slumpmässigt, väljer att ladda ner och så skapas ett tema därifrån. Kanske att jag tyckte att en full bar, att blanda och mixa drinkar och drink-recept hängde ihop med temat på uppgiften men mest var det nog bara läckra bilder.
Jag tycker att jag blir bättre och bättre på att göra mina webbplatser responsiva och det känns kul att man så tydligt märker att man nyttjar kunskaper från de tidigare kurserna! Jag har kommit in i att versionshantera alla mina projekt i Github men jag tycker det är lite läskigt med sync och när det görs en pull. Push känns säkrare då det inte kan påverka filerna i mappen på min dator (väl?). Behövs mer träning och förståelse även här.
Ju mer tid jag lägger på en webbplats desto mer flödar kreativiteten också, och det är en härlig känsla! Jag vill egentligen inte sluta och känner mig aldrig 100% nöjd, men nu var det dags att nöja sig. Jag har en eftersläpande rapport att skriva...varför kan inte det vara lika roligt? ;)