Firebug bundle for TextMate

Debugging av javascript i firebug gjør avlusing til en langt mer oversiktlig og ryddig affære. Å benytte en liten leksehjelp som denne bundlen hjelper deg videre fra alert() og console.log(), som fort blir tungvindt i lengden.
Få alle console-funksjonene rett i handa med Firebug bundle for TextMate

Få alle console-funksjonene rett i handa med Firebug bundle for TextMate.

Last ned .dmg-filen, åpne og dobbeltklikk. Ferdig arbeid.

Last ned .dmg-filen, åpne og dobbeltklikk. Ferdig arbeid..

Åpne menyen i TextMate med cmd + D

Via doctyper.com.

zotero og informaworld

Hente referanser fra informaworld.com til zotero feiler, her ser du hvordan du kommer rundt problemet uten å skrive referansene manuelt.

Ok, dette er feilen. Jeg klikker på det lille dokument-ikonet i URL-feltet i Firefox, og får denne tilbakemeldingen. Dang.

Informaworld Zotero Error

Informaworld Zotero Error.

Klikk på «Download Citation» og du får se noe som dette:

I hvilket format vil du laste referansen ned i?

I hvilket format vil du laste referansen ned i?

Velg som på dette bildet:
Procite direct Export og download file

Velg «Procite direct Export» og «download file«.

Klikk go, og referansen lastes ned i zotero. Litt klønete, men ikke så klønete som å skrive dette ned selv.

Bille under barken

Jobber du med html/CSS/javascript eller med noen av disse i kombinasjon med et serverside scriptspråk? Da er det en genial plugin du MÅ ha til firefox. En plugin som gjør firefox til den nettleseren som blir uunværlig i ditt arbeid; firebug.

Go getfirebug.com

GetFireBug.com

Hva gjør den?

Med firebug kan du debugge (eller ”avsluse”, som det så pent heter på universitets geek lingo) din kode, for å få enda bedre oversikt over hva som skjer når nettleseren tygger koden din. Vi begynner med det som synes best; CSS.

Flotters.

1. overskriften rendret i normal visning, 2 html-koden for samme overskrift, 3 css-kode som styrer utseende for slike html-elementer

Først klikket jeg på ”inspekt” i firebug-vinduet (1), så på overskriften ”Latin på Upihl” fra forrige post. I vinduet nede til venstre får jeg da opp html’n for denne siden (2) i et tre-utsnitt, med fokus på noden overskriften består av, en <a inni en <h2> inni en div, osv. I vinudet nede til høyre ser vi CSS koden som styrer utseende for denne typen overskrifter (3), rangert etter styrke. Stiler over er skrevet over (svakere stiler) vises med gjennomstreket tekst.

Du kan traversere alle nodene i html-koden, fra <html> og ned til minste barn av barn av barn…, og dermed finne alle noder du har skrevet CSSkode for. Om så noe CSS ikke skulle fungere som forventet; kan du alltids se om stilen blir overskrevet, eller ikke prares pga skrivefeil eller likende.
Det finnes også et layout-view, som viser hvor mye plass de ulike elementene tar, med hele boks-modellen visuallisert. TRouBLe med (top, right, bottom, left) rekke følgen på margin, padding, border, osv er ikke lenger en mare.

inspect med firbugg, nice

Om bare denne modellen hadde vært implementert likt i alle nettlesere..

Et par ting til; lastetid & javascript

En gang i blant begynner kanskje siden din å laste litt treigt, og som vi lærte av Jakob Nielsen for mange år siden; det er ikke bra. Da kan ”net”-tabben være noe å se på. Den viser deg, on-the-fly, hva som lastes i hvilken rekkefølge, hvor lang tid det tar, og hvor mange bytes. Nice.

Lastetid i firebug

Lastetid visuellisert. 1 NET-tabben, 2 antall KB, 3 total lastetid.

Hvordan vet du hvilke variabler og verdier som som sendes asynkront i nye fancy javascriptbaserte webapplikasjoner? Som bruker er jo ikke dette interresant, men når du utvikler er dette veldig nyttig, særlig når hodebunnen begynner å bli sår og tynnslitt.

POSTvariabler i firebug

POST[«manPat»] er alltid tidlig ute.

Console’n forteller meg her at verdien (value) ”Dette er kule saker” og id’n 60 blir sendt til et php-script under stavelin.com/hemmelig/script.php som POST. Det er veldig greit å få presentert i klartekst når det begynner å bli lenge siden forrige kaffekopp.

Du kan gjøre mye mer med firebug, så last ned og finn ut hva som passer din arbeidsmåte best. For meg har firebug gjort at firefox ikke blir byttet ut med noen andre nettlesere som førstevalg med det første. Det finnes konkurrenter til andre nettlesere, men ingen som er så slicke som firebug. Go get.

Flickr for mine øyne

Webben ble nettopp et hakke bedre for meg, og kanskje for deg også? – med PicLens strykes skillet mellom browsing av bilder lokalt på datamaskinen og på internett. Konklusjonen min foreløpig er at; ”nu går alt så meget bedre”.

Piclens - skjermbilde
Skjermbilde av piclens, i en av flere visningsmoduser

Jeg har tidligere blogget om SpaceTime, en nettleser for 3D visualisering av bildesøk, PicLens gjør dette som en plugin i firefox, og det føles så mye mye bedre. Browsing (ikke søking) er også en prisverdig feature.

Så hva er så fett?
Opplevelsen, den gode opplevelsen av at bilder på nett er lette å nå fram til, raske å navigere i og, ikke minst; store. Fullskjerm, hvis DU vil.

Klient vs webserver
Alle som har tatt bilder og lastet dem over på maskinen har sannsynligvis browset seg gjennom disse lokalt. Med Microsoft Picture and Fax Viewer, Preview, picasa, irfanview, filutforskere som explorer eller finder, eller mer proffe verktøy som adobe brigde, lightroom eller apperture osv. Opplevelsen av denne typen utforsking av bilder vil vanligvis oppleves som rimelig kjapp og grei. Jeg kan ikke si det samme om å browse bilder på nett. Flickr, photolog, foto.no, div webfotoalbum, osv bærer stort sett preg av at et bilde lastes med et klikk, som innebærer en nye webside (html-dokment & url). Dette er treig, og lite oversiktlig. Store mengder bilder tar lang tid.
Med PicLens kan du browse bilder på flickr, deviantart, google/yahoo-søk (+ noen til) som om bildene lå på din egen maskin. Med en lekker liten 3D-tilt/pan effekt fyker bildene over skjermen, lekrere enn hva de fleste lokale klienter gjør.

Jepp, browsing av bilder på flickr blir utvilsomt et mer trivelig affære framover.