Prepp-uppgift: Git & utvecklingsmiljö

Denna uppgift är inte betygsgrundande

Denna uppgift ger inget betyg, och är därmed frivillig. Men du kommer att behöva resultatet av uppgiften i kursen (ett GitHub-konto, t.ex.) 😃

Tjoho, nu smygstartar vi med kursen! 🎉

I denna uppgift ska vi sätta upp vår utvecklingsmiljö och lära oss versionshantering, som gör att om det blir fel - så kan vi gå tillbaka i koden och se våra ändringar som ledde till felet.

Men vi börjar med att välja ett program, där vi ska skriva vår kod.

Vad är Git?

Börja med att titta på denna video som introducerar Git och GitHub. Den är c.a. 1,5 h (ledsen för längden, glöm ej att ta paus!).

❗ Du behöver inte förstå och kunna allt efter videon, eller ha memorerat alla kommandon, men du bör ha ett hum om vad som pågår - på ett översiktligt plan.

Installera utvecklingsprogram

Syntaxspråket HTML går alldeles utmärkt att skriva i t.ex. programmet Anteckningar på Windows, men det är oftast praktiskt att ha ett utvecklarprogram som hjälper till med att såväl skriva kod, som att identifiera eventuella fel.

Det verktyg som förmodligen används mest heter Visual Studio Code (inte att förväxla med Visual Studio) och du kan ladda ner och installera det här.

• Skulle du föredra något lite mer minimalistiskt rekommenderar jag Sublime Text.
• Själv använder jag PhpStorm eller WebStorm (men det är licensprogram) 😃

Installera Git (versionshantering)

För att kunna versionshantera vår kod så behöver vi ett program på datorn som heter Git.

Versionshantering what?

Versionshantering är ett ord för att hantera utvecklingen/processen av vår kod. Dvs. medan vi jobbar, så skapar vi nya versioner. Detta är för att bryta ner processen och utvecklingen i mindre delar. Det gör att vi kan spåra vad vi har gjort, när och - om vi jobbar i grupp - vem som har gjort det.

Ofta jobbar man fokuserat med en viss "funktion" (feature), som sedan "läggs in i" huvudversionen.

💡 Git är alltså ett program för versionshantering (läs mer på Wikipedia), och sedan finns det olika företag som tillhandahåller själva versionshanteringstjänsten/-plattformen. Här kan det bli förvirrat när det finns GitHub, GitLab, Bitbucket osv. Git är inte samma sak som GitHub, utan GitHub är ett företag (som ägs av Microsoft).

• Om du har en relativt ny Mac, bör du redan ha Git installerat. Du kan kontrollera det genom att öppna terminalen, och skriva git --version. Om det inte är installerat får du frågan om du vill installera git (gör det).

• För Windows hittar du installationsfiler för Git på deras officiella hemsida. Välj "Standalone installer" beroende på hur många bitar ditt operativsystem är. Här finns en guide för att ta reda på om du har 32- eller 64-bitarsversionen av Windows.

• Har du Linux som operativsystem tänker jag mig att du klarar installationen på egen hand 😉

Skapa konto på GitHub

Under utbildningen kommer vi att använda oss av GitHub för att versionshantera kod, men för att kunna använda GitHub behöver du ett konto där. Gå till GitHub och registrera dig.

💡 Tips! Välj gärna ett användarnamn som du kan tänka dig att ha även 10 år framåt i tiden, och dela med dig av till potentiella arbetsgivare/LIA-företag utan att skämmas. Sen om du vill vara någorlunda anonym/använda ett nick(name) så är det inga problem.

När du kommer till steget som frågar vilka verktyg du vill använda, så kan du välja Skip personalization längst ner.

(Eller så klickar du i t.ex. "Collaborative Coding", "Automation and CI/CD", "Project Management", men även om du hoppar över det kan funktionerna användas)

Skapa ett nytt repo

Skapa därefter ett nytt "Repo" (repository) - enklast är att surfa in på adressen https://github.com/new.

💡 Tips! Det kan vara bra att från början kategorisera sina "repos" via namn, så att den dagen du har 678 repon, så kan du enklet söka efter dessa via en namngivningsstandard. Själv brukar jag t.ex. följa detta namngivningsmönster: {namn-på-företaget}-{namn-på-kund}-{namn-på-projekt}.

• Namn på repot: I bilden nedan har jag t.ex. gett repot namnet mi-html-css-preppuppgift, där mi är en förkortning för Medieinstitutet (programmerare är lata och föredrar förkortningar). Så här följer jag konventionen {utbildningsinstitutet}-{kurs}-{uppgift/projekt}.

• Beskrivning/description är bra att fylla i, så kommer du själv ihåg vad repot handlar om, särskilt när du bläddrar i repo-översikten senare. Denna kommer att synas där.

• Välj Public på synlighet, så att du kan dela länken till repot med mig. Eftersom att detta inte är en betygsgrundande uppgift, kan du radera repot senare eller göra det privat via inställningarna.

• Skapa också en README, det är jättebra att ta för vana att ha med detta. (Se självstudiematerialet för terminologi)

• gitignore kan du strunta i just nu, liksom license. Låt båda vara på "none".

Klicka sedan på Create Repository.

Jobba med repot från din dator

Vi kan redigera koden direkt på GitHub, men det blir ganska snart opraktiskt. Här finns det tre vägar att gå (bland många andra).

Välj svett- och frustrationsgrad utifrån antal chilisar (själv fördrar jag 1 chili när det gäller kod, och två när det gäller mat).

De allra flesta kommer att jobba direkt via Visual Studio Code.

Skapa en mapp för kursen (och kanske hela utbildningen - det är bra att vara organiserad) där du sparar dina filer. Undvik att ha med åäö i filnamnet, liksom mellanslag och specialtecken utöver bindestreck - och understreck _.

👍 C:\Users\jenni\medieinstitutet\kurs-1-html-css\prepp-uppgift

👎 C:\Users\jenni\medie institutet\äh\HTML & CSS\prepp uppgift!

Checka in/committa din kod

Se till att du kan se och ändra filändelser i ditt operativsystem.

• Instruktioner för Mac t.ex. här

• Instruktioner för Windows 10 och 7 här

Gör sedan följande:

1. Om du inte redan har filen README.md i "roten" (huvudmappen) på ditt projekt, skapa den.
2. Skriv en kort mening om dig själv, som gör att jag kommer ihåg dig. Det kan vara vad du gjorde i somras, varför du sökte utbildningen, ditt bästa partytrick eller din bravur i köket. Kreativiteten behöver inte ha några gränser.
3. Committa uppdateringen och pusha det till GitHub.
4. Kopiera länken till ditt repo, och lämna in det på itslearning i inlämningsboxen.

Under resten av kursen kommer vi att jobba med inlämningarna i GitHub.

Skapa en profilpresentation (frivilligt)

Vill du presentera dig själv för omvärlden (och potentiella framtida arbetsgivare/LIA-företag), så kan du skapa ett särskilt repo som har exakt samma namn som ditt användarkonto - och i den skapa en README.md-fil.

Så t.ex. om ditt användarnamn är randomnickname123456789, så skapar du ett repo som heter randomnickname123456789 och i den en fil som heter README.md. Då kommer innehållet i README-filen att visas på din profil, när någon besöker den.

Instruktioner för hur du gör hittar du här.

Här kan du se kreativa lösningar på profiler, om du vill ha inspiration.

Vill du vara lite social kan du följa andra studenter på Medieinstitutet.

Du är klar när…

• Du har ett konto på GitHub
• Du har installerat ett utvecklingsverktyg på datorn (t.ex. Visual Studio Code)
• Du har kollat på introduktionsvideon till GitHub och har ett hum om vad commit och repo betyder