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!

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.

fra web/rss/xml/data til google spreadsheets

Aj-aj. Her er et google spreadsheet trick som hadde gått meg hus forbi. Dette er gull for alle som jobber med regneark, uansett hva det skulle være av arbeid. Før eller siden trenger du å importere data fra web/rss/xml eller liknende inn i ditt arbeide. Her er det som må være den enkleste måten å gjøre det på:

Tabell fra html

=importHtml(URL, element, index)
=ImportHtml("http://en.wikipedia.org/wiki/Demographics_of_India"; "table";5)

bruke xpath
=importXML("URL","XPath expression")
=importXML("http://www.google.com/search?q=live", "//a[@class='l']/@href")

flere

=importData("URL")
=GoogleReader(URL)
=GoogleReader ("http://graphics8.nytimes.com/services/xml/rss/nyt/HomePage.xml", "items title", "false", 1)
=GoogleFinance("symbol", "attribute")
=GoogleFinance("GOOG", "price")
=GoogleLookup("entity", "attribute")
=GoogleLookup("Italy", "population")

Gull!