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!

HTML5 begynner nå

html5rocks.com er en webside som enkelt viser deg hva vi kan forvente av HTML5, og hva vi kan begynne med øyeblikkelig. For øyeblikket tror jeg denne siden gir den beste introduksjonen til HTML5, særlig vil jeg gi denne presentasjonen en varm anbefaling.

html5 er lik html + css + js api

html5 ~= html + css + js api, slik forklarer Google standarden.

html5rocks.com er laget av Google, men da html5 er en standard under w3c er dette noe vi kan forvente at alle nettlesere støtter innen rimelig tid, mange gjør det allerede.

Webben kommer til å få et realt løft de neste årene, og jeg gleder meg til å se hva som skjer nå utviklerne får smake på dette. Og ja, jeg gleder meg til å få jobbe med dette i et prosjekt i nær framtid.

Mysteriet med CSS spesifisitet. Et spørsmål om avstand.

Jørgen skriver teknisk om CSS, jeg prøver formulere meg på en litt anderledes måte.

Denne posten er egentlig en kommentar til Mysteriet med CSS spesifisitet. Hvordan fungerer det?, men da en del av kommentaren inneholdt (html-)kode ble dette fjernet. Denne posten inneholder også det som ikke kom med i kommentaren på Jørgens side.

En lettere (på vondt og godt) forklaring er som følger:

Nærhet er alt. Nærmest er sterkest. Men det er ikke styrke, det er allsidighet du ønsker.

Elementer som ligger i HTML-dokumentet, i html-elementene (f.eks. < et element style="css:her;" />) går foran elementer som ligger i < header >. Regler som ligger i header går foran eksterne egne css-filer.

Reglene leses ovenifra, så regler som ligger i toppen av et css dokument likker «lengre vekk» enn regler som ligger i bunnen av dokumentet, da css-filen leses før html’n.

id (#) går foran klasser (.) som går foran generelle typer (h1).
IDer skal være unike (max 1 pr html-side), klasser kan brukes mange ganger, «typer» er bare et ord jeg putta inn her for html-elementer. Du treger mange av disse også :).

Det er ikke styrke men allsidighet du ønsker.

Du vil ikke ha «sterke» regler, du vil ha gjenbrukbare allsidige regler. Når du legger til mer informasjon på siden, så skal dette ikke trenge spesiell tilpassing i css.

Regler av typen #MedId div.MedKlasse h1.MedKlasse vil bare gjelde et ytterst spesielt utvalg elementer (h1-elementer av klassen .MedKlasse som ligger inne en div med klassen .MedKlasse som ligger inni et element med id=»MedId». Vi kan si at lange statments (#div #div .klasse element {/*ting:her;*/}) nøster seg nærmere elementet. Og nærmere er sterkere.

Hvis #MedId div.MedKlasse h1.MedKlasse {/**/} nøster seg nærmere det h1-elementet vi er på jakt etter enn andre stiler som ligger nærmere (f.eks. i < style >-tagg i headeren), så vinner den sterkeste reglen, den som som har nørstet seg nærmest. På denne måten kan stiler som ligger «langt unna» nøste seg nærmere ved å skrives som en sterkere (nøstet nærmere) regel.

Bare h1 {/*ting:sak;*/} vil gjelde alle h1-elementer så lenge det ikke finnes noen sterkere (nærmere) regler.

PS: !important betyr «drit i ting som kommer etter dette, dette er viktig(st)». Du kunne med andre ord bare lagt den viktigste stilen nærmer html-elementet du vil style. !important kan sees på som en magnet som trekker stilen nærmere (og forbi) andre stiler som krangler om å komme nærmest. Brukes så lite som mulig.

Som samfunnsviter og ikke naturviter, fungerer dette bilde bedre for meg. Avstand er lettere enn tall?

CSS-avluserens beste venn:

Som tidligere sakt: «bille under barken» – go get firebug.com!