Dopplrs farge-algoritme

At literatur er fargerikt er gitt. At enhver tekst også kan få sin egen, ufravikelige, farge i web-vennlige heksadesimalfarger var derimot en utenkt tanke i mitt hode. Fram til for en tid tilbake, da jeg snublet over optional.is som tok opp materiale (som nå er offline, lenken til optional.is funker dog) som Dopplr’s farge-algoritme.

Tanken er like enkel som den er genial:
$hex_color = sub-string(md5($original_string), 0, 6)
Ta en rekke bokstaver («Oslo», «Roser er røde», ect), lag en md5-hash av denne strengen, spar på de første seks karakterene i denne hash’n og legg på et numbertegn først i den forkortede hash’n. Da har vi en heksadesimalfarge som alltid vil være den samme, med samme streng som input. På den måten vill fargen for «Oslo», «Bergen», «Risør» og «Eirik Stavelin» være ulik hverandre, men alltid den samme uansett hvem som beregner den.

Her er et skjermbilde av noen sitater kjørt gjennom algoritmen, med fargen brukt som bakgrunnsfarge:

dopplrs farge-algoritme i bruk på sitater
Sitater kjørt gjennom farge-algoritmer

For at tekst skal kunne stå samme med fargen sin trengs det kontrast, og også dette har optional.is tenkt ferdig for oss: maximum-color-contrast.
Blant løsningen foreslått fikk jeg best resultater med 50%-kontrast-løsningen, og har brukt den.

Her er snuttene i PHP:
// dopplr color algorithm from: http://optional.is/required/2010/12/13/hls-world-map/
function str2hex($string){
$hex_color = substr(md5($string), 0, 6);
return "#".$hex_color;
}

// Contrast function: http://optional.is/required/2011/01/12/maximum-color-contrast/
// 50% function
function getContrast50($hexcolor){
return (hexdec($hexcolor) > 0xffffff/2)?'black':'white';
}

I javascript ser ting omtrent helt likt ut:
function str2hex(string){
var hex_color = md5(string).substring(0,6);
return "#"+hex_color;
}

men fordrer da et en implementering av md5 er tilgjengelig. Jeg brukte denne etter stackoverflows brukeres anbefalinger.

CSS Diner på Norsk

CSS Diner er et lite spill som forsøker å lære deg CSS selektorer. Spillet gjør dette ved å bytte ut vanlige HTML-tagger (som <div>, <span>, <ul>, osv) med epler og appelsiner, og slik muligens senke terskelen noe for deg som er ukjent for CSS. Å kunne dette er spesielt nyttig fordi denne syntaksen brukes i flere teknologier enn bare CSS, som jQuery, BeautifulSoup og mange andre. Å kunne hente ut ulike deler av et dokument er rett og slett ganske nyttig.

CSS Diner er laget av Luke Pacholski aka @flukeout. Som et eksperiment har jeg oversatt spillet, og du finner en Norsk versjon på stavelin.com/css-diner/.

Screen Shot 2014-04-03 at 16.03.39

Klarer du alle 26 brettene? – Prøv selv!

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.

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.