Rune Körnefors

Ladda ner och installera senaste versionen av Firefox

Då du installerat programmet, bör du lägga det i "dockan" / "aktivitetsfältet" (se ruta i sidospalten).

Du rekommenderas göra följande inställningar i Firefox:

• Öppna länkar i flikar istället för fönster.
• När du öppnar en länk i en ny flik, växla till den direkt.
• Filhämtningar: Fråga alltid var jag vill spara filerna.

[bild]

Du bör också se till att Firefox är din standardwebbläsare. Det gör du på följande sätt:

MacOS

• MacOS 13 (och senare versioner)
  • Ta fram Systeminställningar och välj Skrivbord och Dock.
  • I menyn för Förvald webbläsare väljer du Firefox.
• Tidigare versioner av Mac OS
  • Ta fram Systeminställningar och välj Allmänt.
  • I menyn för Förvald webbläsare väljer du Firefox.

Windows

• Klicka på Start-menyn och välj Inställningar.
• Välj Appar och sedan Standardappar (Default apps).
• Om inte Firefox är vald under Web browser, klickar du på symbolen och väljer Firefox.

Ladda ner och installera Visual Studio Code för ditt operativsystem

Då du installerat programmet, bör du lägga det i "dockan" / "aktivitetsfältet" (se ruta i sidospalten).

Du rekommenderas att göra följande inställningar. Öppna Visual Studio Code och ta fram inställningarna (klicka på symbolen med "kugghjulet" längst ner till vänster och välj Settings). För att hitta nedanstående inställningar, kan du använda sökrutan i settings-filen.

• Sätt Files: Auto Save till afterDelay samt Files: Auto Save Delay till 1000.
  • Då kommer filer som du arbetar med sparas automatiskt varje sekund, då du ändrar i dem. Det är smidigt, då du skriver kod och samtidigt vill titta på resultatet i t.ex. Live Server, som tas upp nedan i avsnittet Tillägg.
• Andra inställningar som du kanske vill justera kan vara Editor: Font Size och Editor: Tab Size.
  • Välj de storlekar du vill ha.
• Du bör sätta Editor: Word Wrap till on, så kommer långa rader delas upp på flera rader. Då slipper du scrolla i sidled.
• I Hover: Delay bör du öka tiden till 2000 (eller vad du själv tycker är lämpligt).
  • I annat fall poppar hjälprutorna upp för snabbt, vilket dels kan vara irriterande, då du för musen över koden och dels är i vägen, då du ska klicka och markera en del av koden. Samtidigt är det bra att inte helt ta bort "hover-rutorna", eftersom dessa också inkluderar färgpaletten som behövs för att välja färger i CSS-koden.
• Kontrollera att HTML > Format: Enable, CSS > Format: Enable och JavaScript > Format: Enable är förbockade.
• I HTML > Format: Wrap Line Length skriver du 0.
• Under Extensions och Git ska Git: Enabled vara förbockad.

Gå till Extensions (klicka på symbolen med "fyrkanterna") och installera följande:

[bild]

• Live Server
  • Detta tillägg är användbart, då du vill testa och se resultatet i webbläsaren, samtidigt som du redigerar dokumenten i VSC.
  • Skriv Live Server i sökfältet och klicka sedan på det funna alternativet, så att du får fram sidan för Live Server.
  • Klicka på knappen Install.
  • Ta sedan fram Inställningar (Settings) igen och gå till Extensions > Live Server Config
    • I Settings: Custom Browser väljer du Firefox.

De filer som hör till din webbplats ska sparas i en mapp på din dator. Ska du redigera webbplatsen, så är det dess mapp som du ska öppna i VSC. Klickar du på den översta symbolen i fönstrets vänsterkant, får du fram "Explorer", där du ser mappens innehåll. Du kan där klicka på en fil för att öppna den i editorn. I Explorer kan du också skapa nya filer och mappar.

För att öppna en webbsida i Live Server, öppnar du först HTML-filen i VSC. Där kan du sedan antingen klicka på "Go Live" längst ner till höger i fönstrets statusrad, eller så kan du högerklicka i editorns fönster och i menyn välja "Open With Live Server". Om du gjort de inställningar som beskrevs tidigare, öppnas webbsidan i din förvalda webbläsare. Gör du ändringar i koden i VSC, uppdateras sidan i webbläsaren omedelbart.

Formatera koden genom att då och då trycka ner tangenterna shift alt F. Då indenteras koden, så att dess struktur framgår.

Ladda ner Git till din dator, genom att klicka på länken för ditt operativsystem och gå igenom nedanstående punkter. Git är ett program som körs i bakgrunden, så du ser ingen programsymbol för det på din dator.

MacOS

• Enklast är att använda installeraren under rubriken Binary installer. Klicka på länken efter texten "The latest version is" (2.33.0, då detta skrivs, men kanske ett annat nummer då du läser det).
• Ladda ner och kör git-osx-installer.
  • Då du kör igång installationsprogrammet får du troligen ett fönster som säger att programmet inte kan köras, eftersom det kommer från en oidentifierad utvecklare. Ta då fram Systeminställningar i MacOS, klicka på Integritet och säkerhet. Klicka där på knappen Öppna ändå. Kör sedan igenom installationsprogrammet.

Windows

• Klicka på länken Click here to download och kör sedan installationsprogrammet.
  • Svara Ja på frågan om att tillåta att appen får göra ändringar.

Då du installerat git ska du öppna en terminal och skriva in några kommandon. Öppna Visual Studio Code och välj New terminal i menyn Terminal:

• För att kontrollera att git installerats skriver du följande kommando och trycker på return-tangenten:
  git --version
  Det ska då skrivas ut vilken version du har av git.
• Då du sedan använder git och loggar ändringar, behöver systemet info om vem du är, så skriv in följande två kommandon:
  git config --global user.name "Förnamn Efternamn"
git config --global user.email "name@email.com"
  där du ersätter namn och e-postadress med dina egna uppgifter inom citattecken. E-postadressen måste vara densamma som du sedan använder på GitHub. Förslagsvis använder du den e-postadress du har för din studentmail.
  • Ditt namn och e-postadress måste skrivas inom citattecken i ovanstående kommandon.
• För att kontrollera att uppgifterna kommit in i konfigurationen skriver du följande kommando:
  git config --global --list

Skapa ett konto på GitHub. Fyll i din e-postadress (samma som du la in i git) och klicka på knappen Sign up for GitHub.

Gå till din profilsida och fyll i det du vill om dig själv. I fliken Emails lägger du till adressen för din studentmail, ifall du inte använde den, då du skapade kontot.

Gå till netlify och klicka på Sign up. Klicka där på att logga in med GitHub.

Du behöver inte göra några inställningar.

Denna metod rekommenderas, även om den är lite mer komplicerad än den andra. Fördelarna är att du kan koppla ihop din mapp i VSC med publiceringen på Netlify, så när du gör en ändring i VSC, behöver du endast ge ett kommando i VSC, för att ändringarna ska bli publicerade på Netlify. Detta kallas Continuous Deployment. Andra fördelar är att din repository på GitHub blir en backup av ditt projekt. Arbetar du på flera datorer kan du också enkelt låta båda använda samma repository på GitHub.

• Webbpublicering med git, GitHub och Netlify [pdf]
• Ta bort en webbplats och repositories [pdf]

Använder du denna metod behövs inte git och GitHub. Istället drar du upp mappen direkt från din dator till Netlify.

• Webbpublicering med Netlify [pdf]
• Ta bort en webbplats [pdf]