Tenk mobilt

Å lage en webside for datamaskiner og så enda versjon av samme siden for mobile enheter var en stund måten å gjøre det på. Slik er det definitiv ikke lenger. Prøver noen å selge den en nettside som kun virker i noen nettlesere på noen plattformer, så vil jeg påstå at du holder på å bli lurt. Jeg sier ikke at vi kan gjøre spesielle tilpasninger for mobile enheter, det finnes gode grunner til dette (f.eks. å framheve funksjoner mer nyttig til folk i farta, benytte geo-lokasjon eller andre funksjoner for en smartere web), men den vanlge websiden skal funke i mobile enheter. Å få dette til omtales noen ganger med begrep som «graceful degradation». I et spennende slideshow forklarer Bryan Rieger hvorfor vi heller bør snu dette på hodet og skalere oppover.

Fullskjerm & noen ledige minutter anbefales:

Via webmonkey.

IndentationErrors i django med TextMate

Jeg har begynt å snuse på django, og snubla raskt over «IndentationErrors». Koden jeg jobber med er fra «komme-i-gang-totorialene» på prosjektets websider, og var ofte «feilfri». Med det mener jeg at koden ser helt lik ut som i eksemplene.

Feilmeldingene på testserveren (http://localhost:8000, etter python manage.py runserver) sier:

...
unexpected indent (admin.py, line 16)
Exception Type: IndentationError
Exception Value: unexpected indent (admin.py, line 16)
...

Problemet er at innrykkene (indent, som lages ved å trykke på tab-tasten, ⇥ på mactastaturet, ↹ på standard tastatur) som kommer med ved å kopiere koden fra tutorialen ikke er «det samme» som det innrykket et trykk på tab-tasten gir. Så lenge alle innrykker laget på samme måte, så skal det visstnok gå bra, men det løser ikke problemet.

Slik får du TextMate til å lage «myke innrykk».

Løsningen er å la redigeringsverktøyet lage mye innrykk (soft tabs). Jeg benytter textmate, så her er framgangsmåten for det.

soft tabs i django

«Soft tabs» gjør at koden ser pen ut, men uten å lage «IndentationErrors».

Som du kan se av bildet har jeg Python Django bundlen installert (dette er nok ikke nødvendig, dog). Til høyre for dette valget vises «Tab Size», som jeg satt til 4. Dette avstanden i et trykk på tab-tasten, målt i mellomrom, tror jeg. Underst i denne dropdown-menyen finnes «Soft Tabs (Spaces)» som gjør at når tab-knappen trykkes inn, så skrives ikke et normal innrykk, men nå 4 mellomrom.

Og så forsvant alle tilfellene av IndentationError etter denne endingen.

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.