Sedan jag började med webbutveckling har jag använt Firefox som min standard webbläsare. Den blev mitt val bland annat för att det är en webbläsare som följer W3C:s standarder, är anpassningsbar och har stöd för tillägg som underlättar webbutvecklingen. Just den senaste var en otroligt viktig aspekt i mitt val.

Jag har senaste tiden dock upplevt Firefox som lite slö och tar upp allt för mycket datorprestanda. Så efter ett flertal krascher på slutet valde jag att byta webbläsare till Google Chrome. Varför? Chrome är otroligt snabb, stilren och har på slutet också fått allt fler tillägg för webbutvecklare i sin arsenal som till slut vägde över. I den här artikeln tänkte jag gå igenom några tillägg eller ”extensions” som Google kallar det som underlättar i webbutvecklingen.

Web Inspector

Om du använder Firebug i Firefox så kommer du känna igen dig i Web Inspector. Web Inspector fungerar i princip på samma sätt och här kan du kolla och analysera dina html element och dess css värden. Du kan också kolla hur snabb laddningstid dina olika komponenter på din sajt tar. Web Inspector talar också om ifall det finns några fel på sajten. Som sagt har du använt Firebug så vet du hur Web Inspector fungerar.

Pendule

Pendule är väl motsvarigheten till Web Developer i Firefox kan man säga. Har inte dock alla funktioner som Web Developer men väl mycket nyttigt som tex validering, linjal och en color picker.

Chrome sniffer

Ifall du är nyfiken på vad andra sidor använder för ramverk eller tekniker så är Chrome sniffer ett bra tillägg. Det visar snabbt en ikon i adressfält för tex WordPress om sidan är byggd på det.

Resolution test

Kolla hur din sida ser ut i olika upplösningar, jag tycker den här fungerar bättre, snabbare och enklare än motsvarigheten som finns i Web Developer för Firefox.

Xmarks

Kanske inte är speciellt utmärkande för just webbutveckling men att kunna synka dina bokmärken mellan olika datorer och webbläsare är helt underbart.

Tilläggen för Google Chrome växer för var dag som går, har du några tillägg som du gillar? Nämn dom gärna i kommentarerna.

Det dyker upp fler och fler sajter som använder inslag av nya CSS3 standarden. Vad kan man egentligen göra med CSS3 och vilka funktioner finns? I den här artikeln går jag igenom en del av de nya funktioner som finns och vad man kan använda dom till.

Skuggor

En funktion som används flitigt redan idag och även här på bloggen är skuggor. Man kan använda skuggor på texter och på boxar, det är två olika definitioner och dom ser ut såhär:

Rundade hörn

En annan funktion som också används väldigt mycket är möjligheten att runda hörnen på blockelement. I dagsläget stödjer inte Internet Explorer eller Opera funktionen men det enda som händer i de webbläsarna är att hörnen blir fyrkantiga vilket inte ställer till det alltför mycket. Så här ser korthandsdefinitionen ut:

Notera att det krävs -moz och -webkit för att det ska renderas korrekt i webbläsarna. Den ursprungliga implementationen ska dock vara border-radius. I dagsläget är det ingen webbläsare som stödjer det, men det kommer i och med Opera 10.50 och troligtvis även i Internet Explorer 9. För att styra varje hörn individuellt skiljer det sig lite på Firefox och Webkit implementationen:

RGBA

RGBA är något som kan bli användbart då man kan styra opaciteten på ett element direkt i färgdefinitionen. Smidigt och enkelt blir det och så här definierar du det:

Övertoningar

För webkit baserade webbläsare (läs Safari och Google Chrome) kan man nu också göra övertoningar direkt i CSS. Definitionen ser ut såhär:

Multipla bakgrundsbilder

Det här är en funktion som jag själv har saknat väldigt mycket. Såhär ser det ut när man använder sig av flera bakgrundsbilder i samma element. Observera att detta för tillfället endast fungerar i webkit baserade webbläsare.

Det var en del av de nya funktioner som har kommit med CSS3 men det finns en hel uppsjö med fler smarta saker som i framtiden kommer att underlätta webbutvecklandet. Bland annat en massa nya smarta selektorer som gör det enklare att plocka ut de element man vill ha. Det har också tillkommit animationsteknik direkt i CSS:en. Finns det intresse så skriver jag givetvis ihop artiklar om dessa också.

Det dyker upp allt fler jQuery plugins för att underlätta webbutvecklingen på olika fronter. Här listar jag 5 plugins som underlättar när man arbetar med tabeller.

Flexigrid

Flexigrid är ett smart plugin med inställningar bland annat för hur många rader som ska visas, paginering, sökfunktion och zebraränder.

ColumnHover

ColumnHover låter dig markera hela kolumner eller rader när dom hovras.

Table Drag and Drop

Table Drag and Drop låter dig som namnet antyder dra runt och släppa tabellrader.

uiTableFilter

Ett plugin som låter dig filtrera tabellen i realtid.

Tablesorter

Pluginet gör om en vanlig tabell och låter användaren sortera den med hjälp utav thead och tbody taggarna.

HTML5 är den nya kommande standarden för att koda webbsajter. Det har tillkommit många nya spännade taggar för en mer semantisk struktur över koden. Idag används mesta dels div taggen för att strukturera upp innehållet vilket i grund och botten inte är så meningsfullt. Vi tar en titt på några av de nya taggarna.

Är en allmän sektion och används för att gruppera innehåll. Section taggar kan nästlas i varandra och kan innehålla vilken typ av taggar som helst.

Definierar en header sektion. Kan tex vara sidhuvudet på sajten men även huvudet inom en enskild artikel eller sektion.

Definierar en footer sektion och kan precis som <header> vara definierad för hela sajten eller enskild sektion eller artikel.

<nav> definierar ett navigationsområde, oftast en lista med länkar till andra sidor.

<article> taggen används för att strukturera upp en fristående artikel eller ett inlägg på en blogg / magazin.

Ifall man har extra information till en artikel som tex ett litet tips kan det definieras med <aside>. Det största användningsområdet kommer nog dock blir för sidebaren i bloggar.

Sammansatt kod för en HTML5 sida

<!DOCTYPE html>
<html>
  <head>
    <title>Min bloggtitel</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Bloggtitel</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">Sida 3</a></li>
        <li><a href="#">Sida 4</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h2><a href="#">Artikeltitel</a></h2>
        </header>
        <section>
          <p>Artikelinnehåll...</p>
        </section>
      </article>
      <aside>
        <h4>Länkar</h4>
        <nav>
	  <ul>
	    <li><a href="#">Länk 1</a></li>
	    <li><a href="#">Länk 1</a></li>
	  </ul>
        </nav>				
      </aside>
    </section>
    <footer>
      <p>Copyright © 2009</p>
    </footer>
  </body>
</html>

Hur du använder dessa taggar idag

Du kan börja använda dessa taggar redan nu även fast alla webbläsare inte stödjer dom med hjälp av några små knep. Doctype deklarationen i ett HTML5 dokument skrivs <!DOCTYPE html>, ja visst är den enkel? Den doctype deklarationen känner dock inte alla webbläsare till men webbläsarna är så pass flexibla att dom kan hantera de okända taggarna ändå. Problemet är att dom inte har några speciella CSS värden som default och därför renderas alla dessa taggar som inline element vilket är lite felaktigt. Så det du ska göra är att sätta taggarna som blockelement i din CSS vilket fixar renderingen.

Problem med IE

Ja som vanligt måste man göra några extrasteg för att få detta att fungera i IE. IE kan nämligen inte applicera CSS:en på de nya taggarna. Så vad gör vi då? Jo vi adderar taggarna med hjälp utav lite Javascript och plötsligt kan också IE lägga till CSS:en på rätt sätt.

<script type="text/javascript">
   document.createElement('header');
   document.createElement('footer');
   document.createElement('section');
   document.createElement('aside');
   document.createElement('nav');
   document.createElement('article');
</script>

Sammanfattning

Som du märker har stort fokus lagts på att ge bättre och mer meningsfull struktur åt koden. Efter att ha satt mig in i HTML5 en del så ser det riktigt intressant och smidigt ut. Det finns dock mer nyheter än bara nya taggar i HTML5. Tänkte gå igenom mer av dessa här framöver.

Det finns ett mycket smidigt tillägg till WordPress som hämtar data ifrån webbtjänsten Last.FM och visar de senaste albumen som du lyssnat mest på. Pluginet heter Last.FM Records och visar även omslaget på skivorna. Det går också att ställa in under vilken tidsperiod som du vill visa, tex från senaste veckan, 3 senaste månaderna eller under hela året.

Webbläsaren Firefox är bra på många punkter och en utav dom är möjligheten att utöka webbläsarens funktionalitet genom att installera såkallade tillägg. Tilläggen fungerar som små insticksprogram och hanterar det dom är avsedda för, det kan tex vara synkronisering av bokmärken mellan olika datorer. Det finns mängder av tillägg men jag tänkte nämna några som jag använt och har haft stor nytta utav.

1. Web Developer

Web Developer är ett fantastiskt verktyg för webbutvecklare, härifrån kan man bland annat rensa cache, se en webbsida i olika storlekar, få detaljerad information om bilder och CSS, visa genererad källkod med mera. Kort gott är detta tillägg en dröm för alla webbutvecklare.

Hämta Web developer

2. Firebug

Firebug är också det ett tillägg för webbutvecklare. Med hjälp utav Firebug kan man enkelt gå in och live redigera en webbsajts HTML, CSS och Javascript. Ifall något skulle vara fel i koden någonstans ger den ut bra informativa felmeddelanden så att man snabbt kan åtgärda. Firebug är liksom Web Developer ett måste för den gedigna webbutvecklaren.

Hämta Firebug

3. YSlow

YSlow är ett eget tillägg för Firebug släppt utav Yahoo som analyserar webbsidor och ger förslag på hur dom skulle kunna förbättras för att ge bättre prestanda och snabbare laddningstider.

Hämta YSlow

4. Xmarks

Xmarks (tidigare Foxmarks) är ett smidigt verktyg för att hålla dina bokmärken synkroniserade mellan olika datorer och även mellan olika webbläsare. Dina bokmärken laddas upp till en server och genom att ha Xmarks installerat i dina olika webbläsare på olika datorer så hämtas alltid dom senaste bokmärkena, och allt hålls ständigt synkroniserat. Smidigt.

Hämta Xmarks

5. Speed Dial

Speed Dial är en replika på den funktion som webbläsaren Opera introducerade. Vad den gör är att den som startsida visar ett antal tumnagelbilder på olika webbsajter som du valt ska ligga där, vilket gör att du får en snabb överblick över dina favoritsajter. Det finns också funktionalitet för att gruppera dina olika sajter.

Hämta Speed Dial

6. FireFTP

Fungerar som ett vanligt FTP-program men som körs direkt i webbläsaren, kan det bli smidigare?

Hämta FireFTP

Vilka är dina favorittillägg för Firefox?

Ibland kan det hända att man måste skriva över inline styles i ett html dokument ifrån sin huvudmall. Detta ifall man kanske har ett CMS som genererar automatiska inline styles som man kan ha svårt att påverka. Chris Coyier på CSS-tricks har skrivit ett tips på hur man fixar detta.

Ifall html-koden ser ut såhär:

<div style="font-weight: bold;">
    Innehållet i den här diven kommer att vara fetmarkerat.
</div>

Så kan man fixa detta genom att i sin CSS skriva såhär:

div[style] {
   font-weight: normal !important;
}

Var dock uppmärksam på att detta inte stöds av IE6.

WordPress är ett mycket kraftfullt bloggverktyg som många bloggar drivs av världen över varav denna är en av dom. Det finns massvis av plugins och tillämpningar du kan installera för att få ut så mycket som möjligt av din WordPress installation men här kommer tre otroligt enkla och smidiga tips för att göra själva användandet av ditt WordPress ännu smidigare.

1. Tidsinställa inlägg

En mycket smart funktion som gör att man inte behöver publicera sina inlägg direkt utan man kan välja vilken tidpunkt som man vill att inlägget ska publiceras. Detta utförs under ”Publicera” fönstret när man skapar ett nytt inlägg, där väljer man ”Redigera” på alternativet ”Publicera direkt” och där kan man ställa in dag och tidpunkt då inlägget ska publiceras.

2. Ändra dina permalänkar

Standardlänkarna i WordPress kan exempelvis se ut såhär: www.johannesholmberg.se/?p=123 vilket varken ser sexigt ut eller hjälper sökmotorerna på vägen till dina artiklar. Ändra istället dina permalänkar (länkarna till dina artiklar) till något som både du och sökmotorerna får ut någonting av. Detta gör du under Inställningar -> Permalänkar.

3. Använd snabbpress funktionen

När du loggat in i administrationsgränssnittet kan du direkt från din startpanel lägga till ett blogginlägg från fönstret som kallas ”SnabbPress”, detta är smidigt när man har korta inlägg som man snabbt vill lägga till utan att behöva ladda in en ny sida.

Har ni fler smidiga tips på WordPress, kommentera gärna.