Kunskapsbanken

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

#Övervaka Gunicorn med Prometheus och Grafana

I denna artikel skall vi gå igenom hur man kan övervaka trafiken från en gunicorn server med hjälp av Prometheus och Grafana.

Read more »

Category: devops, monitoring.

#Övervaka nginx med Prometheus och Grafana

I denna artikel skall vi gå igenom hur man kan övervaka trafiken till våran nginx server med hjälp av Prometheus och Grafana.

Read more »

Category: devops, monitoring.

#Skapa en specifik layout i Pico

I denna artikel så ska vi först börja med att kolla på hur man kan skapa en specifik layout i Pico och sen hur vi kan använda CSS-Grid för att placera ut saker på vår sida.

Read more »

Category: pico, layout, grid, flex.

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.

#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 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.