Min vän Karin uttryckte sig klokt som så att många vill ha skrivit en bok - färre vill faktiskt skriva en. Så är det också att blogga: alla som bloggar vill ha läsare, men det faktiska arbetet är tradigt och de flesta ger upp. Jag hade själv ett flerårigt uppehåll med bloggen innan jag hittade en form jag var nöjd med.

Formen tilltalar min nördiga ådra genom att jag lägger ungefär lika mycket tid på tekniken som på faktiskt innehåll. En slags alibi för att peta på teknik jag egentligen inte behöver peta på genom jobbet men vill peta på privat för att det är roligt.

Tekniskfetishism för sakens skull leder inte alltid till pragmatiska lösningar, men ger en intressant resa. Letar du efter en post med djupa sanningar om teknik så är det här definitivt inte rätt ställe. Lyteskomik om vad en fix idé kan orsaka för merjobb, däremot…

Bloggplattform

Raljant kördes tidigare via WordPress - fet overkill för vad jag vill få gjort, medförde säkerhetsrisker (bloggen blev en gång bothackad genom en osäker WordPress-plugin) och allt jag ville göra utanför systemets ramar skulle då av nödvändighet behöva göras i PHP.

Att knacka kod i PHP är lite som att pilla på sår. Man kan göra det, men det blir ärr och man vet att det är en bättre idé att låta bli.

Nu kör jag i stället Jekyll, som i och för sig är skrivet i något jävla hipsterspråk - Ruby. Min uppskattning för Ruby som språk är marginellt bättre än min syn på PHP men Jekyll verkade vara ett smidigt system och jag kan blanda friskt mellan mallar i Liquid (usch), sidor/poster i kramdown (mindre usch) och rå HTML/CSS/JavaScript när jag känner för det (nödvändigt usch).

Uschen till trots har jag inte tröttnat på det ännu, mestandels på grund av att Jekyll är så pass moget att folk redan har stött på samma bekymmer som jag har och sedan skrivit plugins för att hantera de vanliga irritationsmomenten. De har jobbat så jag slipper. Konceptet tilltalar mig.

Systemet har dessutom den goda egenskapen att spotta ur sig statiska filer, vilket gör det fan så mycket smidigare att testa ändringar lokalt än vad det är i något databasdrivet system.

Internet

Bloggen servas från ett konto på Oderland - ren webhosting, vill inte behöva dras med att administera en Linuxburk privat. Att köra bloggen på en sådan webhost är overkill med tanke på att allt som skickas är statiska filer, men det ger en möjlighet till kontroll över detaljerna via .htaccess och CPanel.

Jag råkar gilla detaljer, så det blir lite headers och rewrites för att göra allt HSTS-vänligt (mer om det nedan).

<FilesMatch "\.html$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>
AddDefaultCharset UTF-8

# One week expiry minimum
ExpiresActive On
ExpiresDefault A1209600

RewriteCond "%{HTTP_HOST}"   "www\.raljant\.se" [NC]
RewriteRule "^/?(.*)"        "https://raljant.se/$1" [L,R,NE]

RewriteCond %{HTTP:CF-Visitor} '"scheme":"http"'
RewriteRule ^(.*)$ https://raljant.se/$1 [L]

Eftersom Jag Kan så körs bloggen även över CloudFlare, ett typ-CDN. Egentligen komplett onödigt för prestandans skull men de är gratis och löser IPv6, TLS och SPDY - och säkert HTTP/2 proper i sinom tid - åt mig. Kan inte begära så mycket mer än så.

CloudFlare har dessutom en TLS-lösning som gör att jag inte behöver ordna med några egna certifikat. Det är något av en deal med djävulen (eller i alla fall Comodo), men det är bekvämt och jag litar mer på att CloudFlare har koll på att skydda nycklar än att Oderland har det. Detta medför att anslutningen mellan CloudFlare och Oderland inte är krypterad, men det kan jag leva med.

Passade på att slå på HSTS - forcerad kryptering för anslutningen - när jag ändå höll på.
Viktigt för bloggen? Nej. Har jag något annat privat som servar HTTP mot omvärlden? Nej. Ville jag förstå hur standarden fungerar? Ja.

Typsnitt

Använde från början TypeKit då det var förhållandevis billigt och för att de har ett helt superbt utbud. Välj typsnitt, klicka knapp, klipp-och-klista in lite JavaScript i headern, färdigt. Väldigt smidigt. Tycker man gratis är godare så funkar även Google Fonts på samma vis.

Tyvärr är det ineffektivare än jag skulle vilja. Det blir en separat request till en separat domän och man får glatt välja mellan att texten är dold tills dess typsnittet laddats, eller se texten blinka till. Filerna serveras därtill med en pinsamt låg cache-timeout, och med besökartracking från Adobe/Google.

Några dollar på Fontspring gav mindre komplexitet, snabbare laddning och mer kontroll över innehållet. De har inte riktigt samma utbud, men med tanke på att ingen reagerat speciellt mycket de fyra gånger jag bytt brödtexttypsnitt så kändes det inte som ett stort problem.

Grafik

Vektorer, vektorer, vektorer. Raljant använder så gott som uteslutande skalbara bilder som kommer se lika skarpa ut oavsett vad man använder för att läsa bloggen. Kan i händelse av krig eller annan misär användas för att generera PNG-versioner i stället.

Det är den rationella förklaringen till hur jag tänkte kring grafiken. Den irrationella förklaringen är att jag ville se om det gick att hålla sig till SVG och hur mycket smärta det skulle medföra. Svaren, i ordning, är ja och nog för att ge lite utmaning.

Det blir lite som Rock Lee i Naruto - det finns ingen direkt poäng med att springa 500 varv runt fotbollsplanen - på händer - annat än för att se om man kan och för att en begränsning får en att tänka i nya banor.

Tekniken funkar mestandels, men med viss handpåläggning. Det finns en hemskans massa SVG där ute. Merparten av dem är inte speciellt optimerade - filerna är alltså inte fullt lika små som de skulle kunna vara, men det löses enkelt genom att köra filerna ett varv genom svgo som gör filerna mindre och förhoppningsvis fortfarande med ett utseende i närheten av originalets.

Förhoppningsvis. Inte alltid. Inte pålitligt. Mitt script för konverteringen innehåller på förekommen anledning en bit kod som:

• Konverterar originalbilden till PNG (svg2png).
• Kör svgo på originalbilden och sedan konverterar den optimerade bilden till PNG.
• Jämför de två bilderna med varandra med hjälp av resemble.
• Skriker högt om det diffar mer än 1% mellan originalet och den optimerade versionen.

Pragmatiskt så kan man hoppa över det steget och acceptera att filerna blir lite större, men hur roligt vore det? Just precis.

Webläsarna förstår SVG hjälpligt men gör inte alltid helt rätt när man väl börjar animera eländet - specifikt så fixar inte Firefox CSS-rotation för SVG - läser du den här sidan via Firefox så är kugghjulen högst upp på sidan inte animerade.

Det lurigare problemet är att det finns en massa material i SVG, men det är ganska begränsat med bra material som dessutom har en lämplig Creative Commons-licens. Gott om kommersiellt material men i princip ingen som tillåter att man publicerar bilderna just som vektorer.

Irriterande, men inte så konstigt. Högst troligen skulle ingen skjuta en om man bröt mot den licensen - Raljant är ingen speciellt stor sajt - men jag vill köra renhårigt. Det blir diverse CC-material, egenproducerat, egenmoddat och stundom någon bild från Vectorian som snällt nog lät mig sprida hans material som SVG som ett undantag från den vanliga licensen.

Det finns ett väldigt mycket bättre utbud av både CC- och köpematerial om man inte envisas med att köra allt vektoriserat.

En pragmatisk människa hade undvikit hela SVG-fetishen.

Eller att blogga.

Standarder

Att bygga webb är som att bygga hus - det finns en anledning till att byggnormen säger att man inte installerar ett eluttag under duschen eller att man vid behov har en trappa till ytterdörren i stället för en stege till ytterdörren. Standarder är bra.

Det är teorin. Just webb verkar väcka en utpräglad cowboymentalitet hos utvecklare, med folk som tycker de är nog duktiga för att inte göra fel (hah!) och att resultatet ändå fungerar i de webläsare de tänker stödja. Det är tråkigt, i och med att det finns en hel del bra verktyg som kan fånga slarvfel om man följer standard till att börja med.

Raljant är en väldigt okomplicerad sajt, med ett fåtal sidmallar och en ganska hanterbar mängd kod, men jag ville ändå se hur pass vältestat jag kunde få det. Anglifierat skulle man kunna kalla det going full retard.

Testerna som körs är

• csslint för sajtens CSS.
• JSHint för JavaScripten.
• v.Nu (W3C’s validator) för all HTML.
• xmllint för att det inte finns någon som helst poäng med att inte göra giltig XML när man ändå håller på.
• pa11y för WCAG2AAA, en tillgänglighetsstandard för webben.
• check-pages för att verifiera att alla sidor laddar innehållet som de ska och att inga interna länkar är trasiga.

Att skriva korrekt kod är ingen garanti för att det är bra kod. De här skyddar mot slarvfel och viss bristande kunskap, inte mer än så. Rent pragmatiskt så behöver man inte allt det här, men har man någon som helst stolthet i sitt värv är de svåra att undvara.

WCAG2AAA fick mig dessutom att tänka till kring användbarhet ett par extra varv. En väldigt gammal undersökning säger att en på 33 000 lider av Akromatopsi. Var drar man gränsen för att bry sig om läsare med obskyra bekymmer? Varför drar man gränsen just där man drar den?

Hypotetiskt. Har definitivt inte haft 33 000 läsare under bloggens livstid, men jag passade på att följa rekommendationerna från WCAG2AAA-testerna. Aldrig fel att lära sig något nytt, speciellt inte när det kommer till hur man tänker.

Är koden då efter allt detta testande i det bästa skick den skulle kunna vara i? Nej. Kommer den någonsin bli det? Troligtvis inte.

Hej, Sisyfos!

Privatliv

Började med att köra Google Analytics på bloggen av gammal vana. Den ger en massa statistik till Google, men även mig en insyn i vem som läser, när de läser, vad de läser och hur många de är.

Nyfikenheten i mig vill veta sånt, men när det kommer till kritan så är det inte jätteviktigt, speciellt inte när priset är att alla som besöker sajten då automatiskt säger till Google att de gör det. Det här är ett hobbyprojekt, inte mitt levebröd - jag behöver inte förstå hur clickpathsen ser ut och kan stilla min värsta nyfikenhet med serverloggarna.

Av ungefär samma anledningar så finns det ingen Like-knapp för Facebook heller. Tycker man något är bra och vill dela det så kan man gott klipp-och-klistra URL’en, så slipper Zuckerberg se vad du läser på min blogg bara genom att du läser det.

Handlar egentligen mindre om paranoia än om brist på bra anledning till att köra Analytics eller ha Like-knappar.

Kombinationen noll onlinebesökaranalys, sociala medier-knappar eller typsnitt i molnet gör att det inte finns någon som helst besökartracking på bloggen. För dig som tycker sånt är viktigt - var så god. För er andra - var så god, sidan laddar snabbare som extra bonus.

Summa summarum

• Den här sidan laddades via tre HTTP-requestar, varav två var typsnitt.
• Google’s Page Speed Insights säger 100/100 i alla kategorier, inklusive ren överkurs.
• GTmetrix säger 99/100 och 100/100.

Inget av det här säger att Raljant är en bra blogg, bara att den rent tekniskt sett är rätt optimerad och korrekt. Eftersom det var halva målet med övningen så får jag vara nöjd.

All respekt till de som lägger 100% av bloggtiden på vettigt innehåll i stället.