Stikkord: javascript

var partifarger = {} // krangle kan vi gjøre siden

Partier har farger, og det gjør det lettere for oss alle å skille dem fra hverandre. Det er lurt. Problemer finnes også, partiene henter seg nye farger og andre farger, bryter ut i nye partier og trenger flere farger. Så gir media partiene tydelige farger for å lage lekker grafikk med alle fargene, men som ikke er de helt samme som partiene selv valgte.
Så, det er rom for en krangle for de som vil. De som heller vil ha en hashtable i javascript for rask look-up for å fargelegge ting med partier i, her er en sånn:

var partifarger = {} // aka new Object()
partifarger['A'] = '#da383f'; //'#fd0000' fra logo
partifarger['ALP'] = '#f6f6f6'; // finnes ikke lenher
partifarger['B'] = '#008140'; // samme som Sp
partifarger['DNF'] = '#f6f6f6'; // finnes ikke lenger. Det Nye Folkepartiet het også det liberale forlepartiet og nye venste.
partifarger['FFF'] = '#f6f6f6'; // finnes ikke lenger
partifarger['FrP'] = '#393d87';
partifarger['H'] = '#0f658d';
partifarger['Kp'] = '#286d6d'; //'#f6f6f6' // finnes ikke lenger, stilte dog til valg i 2011 ...
partifarger['KrF'] = '#efae52';
partifarger['NKP'] = '#e40202'; // fra logo
partifarger['RV'] = '#a61e20';
partifarger['SF'] = '#f6f6f6'; // finnes ikke lenger
partifarger['Sp'] = '#008767'; //'#008140'
partifarger['SV'] = '#bb234a'; //'#cf0036'
partifarger['SVf'] = '#f6f6f6'; // finnes ikke lenger
partifarger['TF'] = '#f6f6f6'; // finnes ikke lenger
partifarger['Uav'] = '#f6f6f6'; // finnes ikke lenger
partifarger['V'] = '#81b45f'; //'#006c6e'
// de under her hadde NRK med i 2011-valget, selv om de ikke kom inn
partifarger['DEMN'] = '#003366'; // demokratene er ikke inne
partifarger['PP'] = '#000000'; // pensjonistpartiet er ikke inne
partifarger['MDG'] = '#3b7346'; // miljøpartiet de grønne er ikke inne
partifarger['R'] = '#7c2629'; // rødt er ikke inne

Stort sett basert på NRKs fargevalg fra lokalvalget 2011.

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.

Konamikoden i javascript

Den godeste tanketom kvitret i dag at konamikoden også fungerer på facebook. Jeg kan ikke si jeg ble veldig imponert over easteregget som ble avduket, men likevel: nerdete moro.

Facebook er jo ikke aleine om å bruke konamikoden på nett, så jeg antok at det er lett å finne ferdig javascriptkode for å få til dette på egen side, og det var det:

    if ( window.addEventListener ) {
            var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
            window.addEventListener("keydown", function(e){
                    kkeys.push( e.keyCode );
                    if ( kkeys.toString().indexOf( konami ) >= 0 )
                            window.location = "http://ejohn.org/apps/hero/";
            }, true);
    }

Denne snutten er btw fra jquerys webside. Har kun testet i Firefox.

Da jeg ikke vet helt enda hva jeg selv ville skule bak konamikoden på stavelin.com har jeg kun lagt den inn på startsiden stavelin.com slik som vist i eksemplet over.

Hva ville du ha brukt konamikoden til på din side?

Fancybox, en god løsning?

For drøye to år siden testa jeg en lightbox-løsning for bilder her på bloggen, pga manglende støtte på tvers av nettlesere kastet jeg den ut, på tross av at jeg selv synes det er en god ide. Nå prøver jeg meg på nytt, med fancybox.

Fancybox er en plugin til jquery. Tidligere har jeg brukt prototype.js som bibliotek, og utvidet med script.aculo.us for effekter/GUI. Jeg har ikke gått over måte grundig til verks på disse to alternativene (prototype vs jquery), men har brukt begge til et utvalg oppgaver. Jquery er min utvilsomme favoritt.

Hvorfor jeg mener fancybox er et godt valg.

Fancybox & Jquery krever ikke at xhtml’n er klargjort på noen måte. I den grad javascript ikke er skurdd på i nettleseren, så vil bildene vises som normalt, og lenkes til på en primitiv, men enkel måte. Koden vil se omtrent slik ut.

Så må fancybox aktiveres for disse, eller denne typen lenker.

$(document).ready(function() { 
	$("p#test1 a").fancybox();
});

Denne sier at a-er (lenker) inne i en p med id=test1 skal det aktiveres fancybox for.
For blogger kan det være lurt å skrive en mer generell regel, slik at framtidige bilde vill bli telt med.

	$("div.entry a[href*='.jpg']").fancybox({'overlayShow': true });

Her sier jeg ”alle lenker som går til .jpgbilder, som finnes inni diver med klassen entry”. Dvs alle bilder som havner inne bloggposter i wordpress.
Overlay er en av flere variasjoner denne pluginnen støtter, du kan se alle på fancy.klade.lv

Så til spørsålet; er dette brukervennlig? Overrasker vi brukere med slike løsninger? I den grad vi gjør det, er den en posivit eller negativ overraskelse?

Er det noen som har argumenter for at vi ikke bør bruke løsninger av lightbox/facybox typen?

Så en smaksprøve

Noen bilder fra en tur til London for noen år siden

Disse er ganske store fra før, men lat som om det er thumbnails vi ser her :)



Grupper

Noen ganger kan det være hensiktsmessig å gruppere bilder til sett, dette gjøres med ‘rel’ attributten på lenken. Under ser du jquerycoden for å gøre dette automatisk på alle, uten å faktisk skrive denne koden.
Nå vil alle lenker til bilder inni poster (alle poster på en pageload) bli samme galleriet

	$("div.entry a[href*='.jpg']").addClass("external").attr({ rel: "sammegruppe" });

(Her er det en innlysene svakhet i at bilder fra andre poster kommer med i gruppen, her er det tydelig at jeg må skrive om reglen som grupperer, men det kan vi ikke holde i mot selve pluginnen.
Plugin er btw et kipt ord på Norsk, jeg tror jeg fra nå skal bruke ‘innstikk’)

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.