Jag tänkte tipsa om ett tillägg till WordPress som är riktigt bra när du vill presentera dina inlägg efter eget tycke och smart. Post Type Order låter dig genom enkel dra-och-släpp-teknik sortera poster i den ordning du själv vill ha. Varför är detta bra? Kan jag inte bara ordna efter datum som alla andra?

Tänk dig att du har en hemsida där du presenterar dina produkter. Lämpligtvis använder du WordPress funktionalitet för Custom Post Types, där dina produkter kan hanteras ungefär som vanliga inlägg. Kanske har du några saker som du vill visa upp framför de andra. Med Post Type Order läggs alternativet ”Re-Order” till under de poster (exempelvis dina inlägg eller Custom Post Types) du vill hantera.

När man väljer ”Re-Order” kan man på enklast möjliga sätt bestämma ordningen för hur posterna ska visas. Skärmdumpen är från vår egen sida där vi använder tillägget för att bestämma ordningen på casen på projektsidan.

Ett problem jag inte tidigare tänkt på är det faktum att man måste göra en refresh av webbläsaren varje gång man gör en uppdatering i sitens CSS eller annan kod. Jag har varit så van att uppdatera att jag inte tänkt på möjligheten att göra automatiska uppdateringar. Vid utvecklingsprocessen händer det ju att man ganska ofta måste uppdatera. Gör man som jag och kör med editorn och webbläsaren sida vid sida, vore det bättre om man direkt såg ändringen, utan att behöva växla fönster och uppdatera.

Här kommer Live.js in i bilden. Det är ett Javascript som bevakar ändringar i webbsidans resurser. När du ändrar en CSS-fil eller ett Javascript laddas resursen om, nästan omedelbart. Scriptet tillhandahålls inte bara som en fil du kan inkludera i sidan när du utvecklar, utan även som en bookmarklet. Fördelen med bookmarkleten är att du inte behöver oroa dig för att scriptet följer med till produktionsmiljön, d v s den skarpa sidan. Dock bevakas bara CSS-filerna när bookmarkleten används.

Det spelar alltså ingen roll vilken typ av ramverk eller språk man utvecklar i. Javascriptet körs i webbläsaren och används av klienten. Här är det plattformsoberoende ut i fingerspetsarna.

Som webbyrå älskar vi att bygga hemsidor som är lätta för kunden att använda. En idé vi har är att när kunden tagit över ansvaret för hemsidan ska man inte behöva höra av sig till oss igen. Så lättanvänt ska det vara.

Av alla publiceringssystem (Content Management Systems, CMS) som finns därute — och det finns ett gäng — är WordPress det vi verkligen fallit för. WordPress, som började som ett bloggverktyg men utvecklats enormt och växt till ett av världens största publiceringssystem, är det vi rekommenderar till de flesta av våra kunder. WordPress är även det som flest kunder efterfrågar av oss.

Vi är utvecklare – inte konfigurerare

Nyckeln till WordPress succé är just dess lättanvända administration. Inlärningskurvan är väldigt kort och många gånger har kunderna börjat fylla på med innehåll innan vi hunnit ha en genomgång eller överlämnat en manual.

Vi har hunnit prova på en del andra publiceringssystem, bland andra Drupal och Adobes Business Catalyst. Förespråkare för Drupal (ofta med en nästan sektlik beundran) brukar säga att dess styrka är hur avancerade sidor man kan utveckla utan att skriva en enda rad kod. Inte en enda kodsnutt.

Men att knacka kod, det gillar ju vi i Webbgaraget. Med WordPress kan vi med kod styra precis vilken markup som ska genereras och vilket innehåll som ska kunna hanteras. Vi använder systemet mer som ett ramverk än ett CMS, där vi bygger teman och plugins som är skräddarsydda för våra kunders behov. Friheten för oss utvecklare gör det möjligt att hitta enkla lösningar på relativt komplicerade behov, exempelvis finns det bra stöd för att bygga dynamiska lösningar med JavaScript/jQuery och AJAX-anrop.

One size fits all?

En annan stor fördel med WordPress är dess stora community. Förutom de mängder (mer eller mindre välskrivna) plugin som finns att hämta är det alltid lätt att hitta information om man någon gång kör fast i sitt utvecklande. Det finns hashtaggar att skicka en snabb fråga till på Twitter och ett otal forum att söka igenom. Dokumentationen på http://codex.wordpress.org ger oss ovärderlig information när det är någon funktion vi behöver kolla upp.

Slutligen vill vi slänga in en liten brasklapp: Det är givetvis så att det inte finns ”One system to rule them all”. WordPress är bättre och kraftfullare än många ”det-är-bara-ett-bloggverktyg”-tyckare tror och man kan komma väldigt långt med systemet. Dock finns det sidor med behov som går bortom det som WordPress kan klara av, och där tar andra CMS vid.

Om du vill se vad man kan åstadkomma kan du kika in några av våra klara projekt: Musikaliska, Sofiero Ölmusik, Låba (eller kika på vår lista över WordPress-projekt)

Eftersom det finns fler och fler aspekter i hur din hemsidas prestanda påverkas kan det vara svårt att hålla reda på vilka faktorer man själv kan styra över. Även om Google och Yahoo! har publicerat tydliga riktlinjer för att öka prestandan kan man lätt missa några faktorer. Man vill låta webbläsaren spara det mesta som laddas i sin cache, inte skicka med onödiga cookies, minifiera JavaScript och CSS, med mera, med mera. Dessutom vill man ju gärna mäta de här faktorerna, så man kan få ett riktvärde på vilket håll man är på väg åt, ”Laddas mina JavaScript snabbare?”, ”Publicerades den minifierade CSS:en på produktionsservern?”, ”Komprimeras alla mina filer med gzip vid överföring eller missas någon?”. Som tur är har inte Google och Yahoo! bara arbetat fram riktlinjer, utan har även gjort verktyg tillgängliga för dig att mäta hur väl din hemsida följer dessa riktlinjer.

Yahoo! YSlow

Yahoo! har tillägg YSlow för Chrome, Firefox, Opera och Safari, som låter dig mäta din hemsidas laddningstid. Sidan graderas efter en väldigt komplicerad matris, som baseras på de här riktlinjerna. Tillägget är väldigt smidigt att använda eftersom resultatet är flikbaserat och sorterar efter kategorierna content, cookies, css, images, javascript och server. Man får snabbt en överblick på de mest kritiska aspekterna att åtgärda. Varje aspekt betygsätts från A-F, där F är mest illavarslande.

Page Speed

Ett liknande verktyg som har växt fram hos Google är Page Speed. Det finns även det tillgängligt som tillägg till ovan nämnda webbläsare. Det fungerar på liknande sätt som YSlow, men använder istället riktlinjer från Google. Här graderas sidan efter ett schema, som jag inte lyckats hitta. Däremot är det bättre än tidigare verktyg på att påvisa vad som är mest viktigt att åtgärda. Varje aspekt betygsätts med röd, orange eller grön ikon. Allt rött är det som mest påverkar betyget om det åtgärdas.

Det intressanta med Page Speed är att det även finns som modul till apache2. Jag har inte testat det själv, men enligt Google ska det underlätta för utvecklaren att efterleva Googles riktlinjer, utan att behöva anstränga sig det minsta. Du som är intresserad och våghalsig kan läsa mer om det här.

Pingdom Full Page Test

Slutligen måste jag självklart måste jag slå ett slag för en svensk tjänst. Pingdom, vår kära systemövervakningstjänst, har det webbaserade verktyget Full Page Test tillgängligt för alla. Skriv in din hemsidas URL och låt Pingdom ladda din sida, innan du får ett utlåtande om poäng och vad som kan förbättras. Här har vi verktyget som är absolut bäst på att presentera resultatet snyggt, strukturerat och väldigt informativt. Det har blivit något av en vana för mig att använda Pingdom FPT eftersom det är tillgängligt via en lätt adress och inte kräver resurser av min dator, eftersom de laddar allt via sina egna system

I ett steg att minimera mängden data som laddas från sidan är ett steg i rätt riktning att du minifierar dina JavaScript. Här har både Google och Yahoo! gjort bra jobb med verktygen Closure Compiler respektive YUI Compressor (YUIC). I runda slängar reducerar de antalet blanka tecken (tabbar, mellanslag), förkortar namnen på lokala variabler och annat nyttigt som förkortar kodens storlek.

Använd byuic för kommandoraden

Det här inlägget kommer dock varken handla om Closure Compiler eller YUIC utan gå steget vidare till ett bash-script vi använder, som nyttjar YUI Compressor. Vad vi vill presentera är vår anpassade version av scriptet build yui compressor (byuic).

byuic är kommandoradsverkyget du vill använda när du manuellt vill minifiera dina JavaScript- och CSS-filer. Att det klarar CSS med beror helt enkelt på att YUIC gör det. Tyvärr Windows-utvecklare uteslutna, eftersom det är ett bash-script. Men det kanske gör att lösa med cygwin? Hursomhelst är teorin att man kör scriptet med flagga för hemsidans root. byuic letar då, rekursivt, upp alla filer med ändelse .js och .css och miniferar dem.

Webbgaragets version

Det vi på Webbgaraget har modifierat med byuic är dels att vi får statisk för minifieringen. När en typ av script (JS eller CSS) är färdigminifierad får man en output i terminalen med hur stor andel scripten har förminskats. Dessutom har vi lagt till en flagga som anger huruvida man vill skriva över de befintliga filerna eller skapa nya .min-filer.

Installera byuic genom att först ladda med YUIC här och sedan vår version av byuic som finns här. Placera både YUIC och byuic i /usr/local/sbin, så scriptet hittar behövda filer. Sen är det bara att köra: byuic -d.

Ett exempel på output i Terminalen kan se ut som följer:

Den egentliga vinningen med statisken är att vi är intresserade av att veta hur mycket vi tjänar på minifieringen. I runda slängar brukar det minifierade versionen utgöra 60-80% av den ursprunliga storleken. Ibland har vi faktiskt varit nere i nästan 40% (!).

Vad är det här bra för?

Du kanske undrar varför vi använder det här istället för ett plugin till WordPress eller något annat bibliotek som minifierar on-the-fly? Jo, fördelen här är att vi faktiskt bara minifierar koden när vi skickar upp en ny version till webbservern. Eftersom vi använder Capistrano för att rulla ut nya versioner har vi där kunnat lägga till en rutin som automatiskt minifierar. Webbservern behöver då inte minifiera för varje gång en besökare gör en request, utan scriptet är minifierat och klart.

Skönt att vara igång med Webbgaragets blogg. På jobbet ligger mitt fokus främst på design och utveckling i front-end vilket kommet att återspeglas i denna blogg. Som första inlägg tänkte jag presentera några bra resurser för bakgrundsbilder på webben.

Subtle Patterns

En bra sida för upprepande bakgrundsmönster som är lite mer anonyma. Dessa funkar väldigt bra på de flesta typer av sidor, exempelvis på bloggar. En snygg detalj är att när man väljer att förhandsgranska ett bakgrundsmönster så byts hela sidans bakgrund ut till det valda mönstret. http://subtlepatterns.com/

CG Textures

CG Textures tillhandahåller bilder med hög upplösning. Det måhända att målgruppen är mer riktat mot exempelvis 3D-modellerare, men databasen är såpass stor och av så hög kvalitét att det finns något för alla. http://www.cgtextures.com/

PNG Textures

PNG Textures är utvecklad av den talangfulle webutvecklaren Jonny Strömberg och låter användaren själv skapa sitt eget bakgrundsmönster. Genom att välja färg och mönster kan du själv få en textur, precis som du vill ha den. http://pngtextures.com/

Tänk på att vara nogrann med att läsa igenom vilka regler som gäller för bilderna. Att något är gratis betyder inte alltid att man kan använda det utan att ge nåt tillbaka.

Det här med att leva som man lär har vi hört ska vara bra. Vi kan nu med stolthet och glädje visa upp vårt nya hem Webbgaraget.se, som vi givetvis byggt i favoritsystemet WordPress.

Vår tidigare hemsida föll många i smaken och vi fick många goda kommentarer om den. Därför valde vi att behålla konceptet med huset och byggde vidare på det. Det som är nytt på startsidan är billboarden, med de projekt som vi är mest stolta över, samt bilderna på oss tre som utgör Webbgaraget.

Som ni ser har vi också en blogg på gång. Vår tanke med bloggen är att skriva om saker som vi kommer i kontakt med i vårt arbete. Därför lägger vi in en varning om att det kan bli en del tekniskt snack som kanske inte faller alla i smaken. Lämna gärna en kommentar om det är något ni finner intressant eller vill veta mer om.

Välkomna!