Prestandatips #3: HttpCombiner

När man utvecklar en webbplats används ofta många javascriptfiler och css-filer. Det är enklare att jobba med webbplatsen om man delar upp stilmallar och skriptfiler i logiska delar. Dock påverkar det prestandan på webbplatsen när alla dessa filer ska läsas in. För att komma åt detta kan man använda sig av exempelvis HttpCombiner en httphandler i C# som i runtime sätter ihop alla definierade javascript och css-filer till en enda.

Problem kan dock uppstå med konstiga tecken, så kallade BOM marks, som smyger sig in i den resulterande koden. Problemet diskuteras på stackoverflow och en lösning finns i sista posten

jQuerytips #2: Encosia

Encosia är en bra blogg med mycket bra information om jQuery och asp.net

jQuerytips #1:jQuerify bookmarklet

jQuerify är ett snyggt sätt att infoga jQuery i Firebug på en sida som inte har det integrerat. Detta gör att man sedan kan påverka sidans upplägg eller funktion eller helt enkelt testa och utveckla jQuery utan att behöva jobba i ett rent utvecklingsgränssnitt. Tillsammans med Selectorgadget bookmarklet blir det ännu enklare.

Kolla även in denna film som visar hur man jobbar bättre med jQuery direkt i Firebug

Guidetips #1: Riktigt snygg meny

NetTuts har en riktigt bra guide till en snygg meny gjord med CSS3. Guiden hittar du här

HTML/HTML5 tips

Ramverk

HTML 5 Bilerplate

HTML5 Boilerplate ger dig den perfekta grunden att skapa en webbplats baserad på HTML5.

Tips

Favicon/Apple icon

 

CSStips #1: less.js

LESS är ett ”ramverk” för enklare hantering av CSS genom vilket man får tillgång till kraftfulla funktioner som förenklar skapandet av stilmallar. Less var för skrivet i Ruby och tidigare har det kommit en portning till .NET. Nu kommer även en portning till JavaScript som sägs vara 40 gånger snabbare en Ruby versionen kallad less.js.

Nettuts+ har en bra artikel som ger en introduktion till less.js

Prestandatips #2: Sprite Maps

Sprite maps är ett sätt att effektivisera hanteringen av grafik. Principen går ut på att man samlar alla grafiska objekt som gör upp designen på en webbplats i en enda bild. För att sedan visa de rätta grafiska objekten på sin plats använder css och ställer background-position tillsammans med höjd och bredd beroende på var i bilden det grafiska objektet finns.

Fördelen med denna teknik är att man minskar när de http-anrop som en webbläsare när den laddar in en sida och således snabbas inläsningen upp.

Det kan vara lite bökigt att sitta och mäta ut i en bild var de olika grafisk elementen hamnar. Turligt nog finns det bra verktyg för att skapa både bilderna och den css-kod som behövs. Website Performance har ett sådant verktyg.

Prestandatips #1: YSlow

YSlow är ett utmärkt tillägg till Firefox som hjälper dig i arbetet att göra din hemsida snabbare. Den analyserar webbplats och ger dig tips på vad som skulle kunna åtgärdas för att göra laddningen snabbare. Den visar även statistik över de objekt som laddas vid hämtningen av sidan.

Yslow

YSlow behöver tillägget Firebug.

Ladda ner YSlow