Anders, september 2018.

Anders är en webbutvecklare och hårdrockare som gillar brädspel, kaffe och öl.

Tuffa saker i senaste iterationen av madr.se

Här går det att infoga valfri fyndighet om skomakarens barn. Istället tänker jag dock ägna ett inlägg åt att kommentera på häftiga saker jag gjorde sist jag ändrade mallarna för den här hemsidan. Det är främst CSS-relaterat.

Källkoden finns tillgänglig utan minifiering om man vill se helheten genom att läsa i min CSS-fil.

Startläget

madr.se är min egen hemsida. Jag vill med den här hemsidans utformning ge en bild av mina värderingar som webbutvecklare och skribent på Internet. Jag har därför några färgstarka ställningstaganden med den här webbplatsen.

Microdata på evenemang

Jag har introducerat Mikrodata igen, i det som jag känner har mest värde av det: mina kommande evenemang.

Mikrodata är ett sätt för att få sökmotorer och andra parsers att visa mer berikade och relevanta sökresultat.

Genom att kika på Googles testverktyg för strukturerad data går det att se vad mina sidor innehåller för evenemang. Det är också ett bra verktyg för att validera saker, ska sägas.

Adaptiv layout

Baserat på vilket operativsystem besökaren har, så kommer operativsystemets system-teckensnitt att användas. Detta för att texten ska vara så adaptiv som möjligt.

html {
  font: normal medium/1.4 apple-system, system-ui, BlinkMacSystemFont, Segoe UI,
    Roboto, Helvetica Neue, Arial, sans-serif;
}

I samband med att Dark Mode börjar bli en grej som allt fler använder i Windows, MacOS och linuxdistar, så anpassar sig färgerna beroende på vald preferens. Detta görs med media queries.

@media (prefers-color-scheme: light) {
  /* css för att ändra färger. */
}

CSS Grid areas

CSS grids är något som funnits ett tag och som har acceptabelt webbläsarstöd. En del jag verkligen gillar i sammanhanget är grid areas.

body {
  display: grid;
  grid-template-areas:
    "header main"
    "aside main"
    "footer footer";
}

footer {
  grid-area: footer; /* istället för grid-row: 3 / 5; grid-column: 1 / 4 */
}

main {
  grid-area: main; /* istället för grid-row: 1 / 3; grid-column: 2 / 4 */
}

Det är riktigt trevligt att arbeta med, då grid-area känns mer intuitivt än att använda grid-row och grid-column.

Variabler i CSS

Variabler är en av de starkaste argumenten för att introducera precompilers för CSS, då det gör underhåll av CSS-kod över tid så ofantligt mycket enklare. I mitt fall använder jag dem för att spara och därmed snabbt ändra färger (beroende på Dark Mode).

:root {
  --text-color: #ddd;
  --background-color: #222;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: #444;
    --background-color: #fff;
  }
}

CSS Variabler har funnits ett tag i specen, men få använder dem då de är begränsade i jämförelse med deras motsvarigheter i precompilers.

En av deras främsta styrkor är dock att de kan nås från JavaScript, vilket har gjort projekt där animationer och transitions tas på stort allvar har börjat pusha för CSS-variabler.

Denna lista kommer troligtvis att fyllas på.