Projekt2 min läsning
Nilssons.nu - Vidareutveckling
En handbyggd familjesajt i PHP som fick en rejäl genomgång: 100 poäng i PageSpeed på både mobil och dator, tvåfaktorsinloggning och automatiska tester.
Den här sajten är byggd från grunden i PHP och MySQL, utan färdigt publiceringsverktyg. Vi ville att den skulle vara snabb, trygg och trevlig att använda, både för er som läser och för oss som uppdaterar den. Så vi gjorde en genomgång av allt, steg för steg.
Resultatet
100 av 100 i PageSpeed för prestanda, tillgänglighet, bästa metoder och sökbarhet, på både mobil och dator.
Startsidan laddar ca 70 % mindre data på mobil än tidigare.
Tvåfaktorsinloggning i adminpanelen.
Fungerar bättre för alla, även med tangentbord och skärmläsare.
Ca 400 automatiska kontroller som körs innan något ändras på riktigt.
Snabbare
Bilderna sparas nu i flera storlekar, så mobilen hämtar en liten bild i stället för originalet. Den stora bakgrundsbilden gick från 414 till ca 89 kB. Typsnittet ligger på vår egen server, så ingen information om ditt besök skickas till Google, och stilmallen ligger direkt i sidan. På mobil visas sidan på ca 1,7 sekunder, på dator på 0,4.
Tryggare
Adminpanelen kräver nu en kod från en app utöver lösenordet, med reservkoder om telefonen försvinner. Länkar i texter granskas, bilder rensas på inbäddad platsinformation vid uppladdning, och känsliga inställningar ligger utanför den publika delen av sajten. Det finns också en security.txt för den som hittar en brist och vill höra av sig.
Enklare att använda
Större knappar på mobil, bättre kontrast i mörkt läge, tydlig markering vid tangentbordsnavigering och länkar till föregående/nästa inlägg. När ni delar en länk visas nu rätt bild i rätt format.
Det bästa av allt: testerna
Vi mätte i stället för att gissa, och det lönade sig. Testerna avslöjade två egna misstag: en fokusmarkering som slutat synas i toppbilden, och en logotyp som blinkade till vid sidbyte. Båda är rättade. I dag publiceras ändringar automatiskt så fort de sparas i vårt kodarkiv, så inget glöms bort och inget behöver laddas upp för hand.
Sedan dess
Listan med nästa steg är avbockad: adminpanelen har fått en inloggningslogg, och bloggen har taggar och sök. Dessutom kan ni få en notis eller ett mejl när något nytt publiceras, och sajten byter skrud efter säsong med ett jultema och ett halloweentema (mer om det i byggdagboken). Testerna har vuxit till närmare 1 000 automatiska kontroller.
Nästa steg
Framför allt mer innehåll: fler projekt, fler inlägg och fler bilder från vardagen. Och så klart att tända det första adventsljuset på startsidan den 29 november.
Byggdagbok
Sajten publiceras
Säkerhetsgenomgång och tvåfaktorsinloggning
Snabbare sajt: 100 poäng i PageSpeed
Mobil, tillgänglighet och delningsbilder
Automatiska tester och uppladdningsverktyg
Säsongsteman: jul och halloween
Sajten byter nu skrud efter säsong, helt av sig själv. Från första advent till trettondagen visas ett jultema, och veckan före Halloween ett halloweentema. Resten av året ser allt ut som vanligt, och då laddas inte en enda extra byte.
Jultemat har snöfall, en ljusslinga under menyn, granris med julkulor och en adventsljusstake på startsidan som tänder ett nytt ljus varje adventssöndag. Ljusen som tändes först har brunnit ner mest, precis som i verkligheten. Några dagar får egen utsmyckning: ljuskrona och lussekatt på lucia, en tomte som tittar fram på julafton och raketer, raketbatteri och champagne på nyår.
Halloweentemat har fullmåne, fladdermöss, en kyrkogård i siluett, spindelnät med en dinglande spindel, lysande pumpor och dimma. På själva Halloween blixtrar det och ett spöke stiger ur dimman. Höstlöven faller bara på startsidan, så att artiklarna går lätt att läsa.
Det finns också några påskägg: klicka på julkulorna, pumporna, spindeln eller spöket och se vad som händer. Ljuden skapas direkt i webbläsaren, utan ljudfiler.
Allt är byggt med egen kod och egna bilder, utan externa bibliotek. Temana går att slå av och på och texterna går att ändra i adminpanelen, snö och löv kan stängas av med en knapp, och för den som har valt minskad rörelse i sin telefon eller dator står allt stilla. Även delningsbilden, ikonen i webbläsarfliken och färgen på adressfältet i mobilen följer säsongen. Drygt 150 automatiska tester kontrollerar att rätt tema visas rätt dag.
Fler bilder
0 kommentarer
Inga kommentarer ännu – bli först att skriva något!