Kunskapsbanken

Artiklar, guider, tips och trix tillsammans med exempelprogram inom webbprogrammering och webbutveckling. Inläggen är listade i den ordning som de senast uppdaterats.

Installera CircleCi CLI

Denna artikel visar hur du kommer igång och installerar CircleCi CLI.

Read more »

Category: devops, labbmiljö.

#Ikoner och fonter

I denna artikel jobbar vi vidare med SASS där vi ska se hur man kan ladda in fonter och ikoner. Vi väljer att arbeta med de två mest populära fontbiblioteken, Font Awesome och Google Font. Vi använder oss av SASS-moduler och npm för att kunna installera och hantera de fonter och ikoner vi vill använda.

Font Awesome

Font Awesome

Read more »

Category: npm, sass, design.

#Microblog med Docker containers

I denna artikeln ska vi jobba igenom kapitel 19 i Miguel’s guide. Vi skall titta på hur man kan bygga en container för Microblog applikationen och koppla upp den mot en separat databas container. Slutligen skall vi också publicera den på Docker-registret så att vi kan komma åt applikationen utan att behöva källkoden.

Read more »

Category: devops, docker.

Vad är Pico?

Pico är ett CMS, Content Management System, som tillåter användaren att hantera innehållet på en sida utan att behöva “koda” sidan själv. Det finns flera andra stora alternativ, så som WordPress, Drupal och Grav, men i denna kursen ville vi ha ett tunnare ramverk som låter oss fokusera på design-aspekten av webbutveckling. Pico är även ett “flat-file” CMS, vilket innebär att man jobbar emot filer istället för en databas, ungefär så som dbwebb är uppbyggt.

Read more »

Category: design, pico.

#Kom igång med followers - Microblog

I denna artikeln ska vi jobba igenom kapitel 8 i Miguel’s guide, så att vi kan följa andra användare och se deras inlägg på sin egna feed.

Read more »

Category: devops, flask, python, sql.

#Kom igång med SASS och npm

Vi har tidigare i kursen skrivit CSS kod för att styla våran webbsida. Även om CSS nu stödjer variabler så saknar den fortfarande funktionalitet som funktioner och matematiska operationer. Vi skall i denna övningen titta på hur man kan använda sig av pakethanteraren npm för att bland annat underlätta stylandet och förbättra webbplatsens laddningstid.

Read more »

Category: npm, sass, design.

CSS Grid Layout

I moderna webbläsare finns det ett nytt sätt för att skapa grid layouts, istället för sätten man har gjort tidigare med tabeller, floats, flexbox osv. Detta nya moderna och tyvärr inte riktigt supporterade sätt kallas CSS Grid Layout eller kort och gott CSS Grid. Webbplatsen Can I Use hjälper till att kolla om en viss konstruktion stöds i en viss webbläsare. Prova att sök på css-grid i Can i Use för att se hur bra stödet är i de olika webbläsarna.

Read more »

Category: design, css grid system.

Skapa en webbsida med HTML, CSS och PHP, steg 2

En me-sida i version 2.

En me-sida i version 2.

Att bygga en webbplats innebär att man behöver någorlunda kunskaper i HTML, CSS och PHP. Det blir flera tekniker att ha koll på och det kan vara lite svårt i början. Vi tar därför små steg framåt för att uppgradera vår me-sida till version 2.

Vi blandar lite HTML, lite CSS och lite PHP. Via små enkla trix så får vi vår me-sida att se lite bättre ut. I slutet så prövar vi till och med att göra sidan responsiv för mobila enheter, bara för skojs skull.

Read more »

Category: webbprogrammering, html, css, php, kurs htmlphp.

Villkor och loopar

Vi har nu bra koll på variabler och datatyper i python. Vi känner till stränger, heltal, flyttal och boolska värden (sant eller falskt). Vi ska i denna övning titta på hur data flödar igenom våra program. Vi kommer titta på villkors-satsen if och på två olika sätt, for och while, för att upprepa delar av koden.

Read more »

Category: python.

Att läsa filer som listor i Python

För att kunna spara data mellan två exekveringar av våra program kan filer användas.

Vi ska i denna övning läsa från filer och använda datan som finns i filen och övningen avslutas med att vi skriver till en fil.

Read more »

Category: python.