Det er egentlig ganske mange på internett som har hvertfall såvidt snust på hva programmering av internettsider er for noe, men for de store gutta så er det viktig å ha de riktige verktøyene klare for å kunne gjøre en god jobb.
Først vil jeg presentere NorskePlugins, en fantastisk blogg hvor du kan lese mye innen internett og markedsføring. Personlig kan jeg anbefale å lese “Kan alle tjene penger på å blogge?“.
Rydde opp i CSS-koden
OBS! Det er viktig at du tar en kopi før du skulle bruke noen av disse verktøyene ettersom det er ikke garantert at de fungerer 100% riktig!
1. Dust-Me Selectors er en utvidelse for Firefox brukere som har sitt mål å finne alle de ubrukte CSS variablene på siden du besøker for øyeblikket, som selvsagt kan være din egen hjemmeside eller blogg, og du vil da se om du har noe du kan gjøre bedre.
Meningen med dette er at du skal få et så ryddig som mulig stilskjema (CSS) for siden din og mindre i størrelsen slik at den vil bli lasted ned raskere av brukere.
I slutten vil du få en fin rapport over hva som ikke er brukt noen plass på siden din, og du kan derfor trygt fjerne disse i CSS-filen din.
2. CSS Redundancy Checker er for deg som eventuelt ikke bruker Firefox som nettleser, eller bare ønsker en internettjeste som kan gjøre samme jobben.
Igjen så er dette en tjeneste som blar gjennom hele stilskjemaet ditt for å finne ubrukte variabler og gir den en full oversikt over hvilken linje de er på og navnet på dem, selvsagt.
Optimalisering av CSS-koden
Når vi først har ryddet i stilskjemaet ditt så er det greit å få ryddet i det som ble igjen, og her kan du spare en del plass på stilskjemaet ditt, altså det blir raskere å laste inn og gir et bedre inntrykk til brukeren.
3. CSS Tidy er en åpen kildekode applikasjon som du kan laste ned lokalt på datamaskinen din i .EXE format eller som et PHP-script som fungere for alle plattformer.
Det CSS Tidy gjør er egentlig bare å fjerne kommentarer, unødvendige mellomrom, forkorter fargekoder (eks. #333333 blir til #333 osv) og forandrer noen variabler fra tekst til tall, som at font-weight: bold blir til font-wieght: 700.
4. Clean CSS er en internettjeneste som er basert på den tidligere nevnte CSS Tidy og gjør det enkelt for deg å laste opp stilskjemaet ditt, eller bare lime inn en bit av det du vil optimalisere.
Du kan velge mellom flere optimaliseringsmetoder, alt ettersom hvor mye du vil at den skal bli optimalisert. Stor optimalisering av stilskjemat vil ikke gjøre det så enkelt å lese, men dersom du kun er interessert i ytelse så betyr det ingenting.
5. Robson CSS Compressor er av samme familie som Clean CSS, men jeg har funnet ut at jeg får best resultater av å bruke denne optimaliseringsmetoden for stilskjemaer.
Du kan også få en full oversikt over hva alle valgene gjør når du kjører gjennom optimaliseringsbiten.
Validere CSS-koden
Når du først har klart å fjerne det som ikke lenger er nødvendig og optimalisert den gjenstående CSS-koden, så er det på tide å validere den og se om du har noen feil.
6. W3C CSS Validator gir deg muligheten til å henvise til stilskjemaet ditt og du vil få en full rapport over om du har feil og hvor mange du eventuelt har og hvor du kan finne dem.
Som dere ser på bildet under, har jeg noe jobb å gjøre – BRB!
*lyden av ehh… å fikse css-koden*
Sånn, tilbake – to the batmobile, nei, jeg mener.. neste punkt!
7. CSS Validator Firefox Add-On er en utvidelse for Firefox som gjør samme nytten som tjeneste nevnt i forige punkt, men her kan du enkelt bare ta et høyreklikk for å sjekke om du har feil i CSS-koden din.
Forandre og utføre tester av koden
Nå kjære lesere, det er nå dere må bli forelsket i Mozilla Firefox, for de 3 siste punktene er noen meget nyttige utvidelser til Firefox.
8. MeasureIt vil gjøre livet ditt enklere når du skal måle opp logoer, rammer eller en <div> for å vite den eksakte størrelsen, og i stedenfor å ta en printscreen og måle opp i Photoshop så er dette en mye enklerer metode.
9. ColorZilla er utrolig nyttig for deg som bygger opp design for internettsider, for denne gir deg nemlig et meget nyttig verktøy når det gjelder å finne ut hvilken farge akkurat den er.
Du vil få en ny musepeker når du aktiverer den manuelt, og du trenger bare å klikke på den fargen på skjermen din du vil ha fargekoden til – så kan du kopiere den enkelt videre.
10. Firebug er kongen over alle utvidelser når det gjelder programmering av internettsider, og jeg er rett og slett avhengig av den. Denne gir deg også muligheten til å finne ut hva koden er for akkurat den <div>en og du kan enkelt erstatte den koden, bare for å se hvordan det hadde vært.
Det er så utrolig mange funksjoner og bruksområder med dette verktøyet at det nesten er umulig å bekskrive det, og bare fortelle deg at du må prøve det selv.
