Keep It Simple, Staffan

Mycket med det mesta nu. Några deadlines som närmar sig med oroväckande hastighet, och det jag tänker mest på är den föreläsning jag ska hålla på specialkursen Experimentell immaterialrätt om en vecka. Temat för kursen är ”Immaterialrätten på internet”, och rubriken på min föreläsning är ”Tekniken på Internet”. Det blir lite paragrafer och mycket trebokstäversförkortningar.

Jag satt halva söndagen och försökte strukturera upp vad jag ville säga. Jag vill på något sätt förmedla en insikt i vad digital information och öppna nätverk innebär, den där outtryckbara kärnan från vilken man kan härleda allt annat. Den solida grund som gör att man kan titta på ny teknisk kunskap och förstå hur den ska sorteras in och relateras till allt annat, vilka liknelser som funkar och vilka som är missvisande, problem den löser och problem den skapar, hur den borde regleras (eller inte), och så vidare. Så jag satt i några timmar och försökte formulera en mening om digitalisering som skulle kunna förklara allt det där.

Men allvarligt, det är få förunnat att kunna förmedla kunskap på det sättet. Efter att ha snärjt in mig i högtravande formuleringar om informationens sanna innersta väsen försökte jag sätta mig in i hur det skulle uppfattas av en åhörare. ”Osubstansiellt flummande” blev omdömet.

Så jag raderade texten och började om med inriktning på handfasta kunskaper. 10 minuter om hur man digitaliserar text, ljud, och bild, 10 minuter om komprimering, 10 minuter om grundläggande internet, 10 minuter om tillämpningar som web och fildelningsprotokoll, 5 minuter om DNS… Mindre ambitiöst, men ger förmodligen mycket mer behållning.

I övrigt är jag sjukt sugen på att koda lite. Det blev inte så mycket av det i sommar, och jag har abstinens. Någon gång i slutet av september kan jag förhoppningsvis få tid över till lite mysprogrammering. Utvecklingsversionen av Django har äntligen fått unicodestöd, och jQuery verkar vara ett smutt javascriptramverk nu när mochikit verkar ha ramlat i glömska. Vi får se vad som händer.

Javascript-understödd layout

Taggningsmöjligheternalagen.nu är första steget i en process genom vilken det ska bli möjligt att koppla information (som etiketter, kommentarer eller bara understrykningar) till lagtext. Ett problem har varit hur man ska fixa det rent layoutmässigt.

Det övergripande resultatet jag är ute efter är följande:

De turkosa områdena är alltså lagtext, medans de gula är redaktionella kommentarer.

Det klassiska sättet att göra detta hade varit med en enkel tabellayout.De röda linjerna är tabellceller:

Men sånt är ju fel och fult. Det är inte semantiskt meningfullt, utan ett missbruk av dokumentstruktur för att åstadkomma en layouteffekt. Det är inte table-free design.

Det nya sättet att göra det med är CSS. För att få ett block att ligga bredvid ett annat block använder man float="left|right" och märker upp blocken med div-taggar. För att inte kommentarerna till stycke 1 ska flyta ihop med kommentarerna till stycke 2, utan ligga i linje med det stycke de kommenterar, måste varje lagtext-kommentarspar kapslas in i ytterligare en div (de röda linjerna är yttre div:ar, de gröna inre):

… och exakt hur skulle detta vara bättre, egentligen?

Vad vi har gjort är att återuppfinna tables för layout, fast med ett annat ord. Det semantiskt rätta vore att en stycke lagtext följs, på samma nivå i dokumentträdet, av kommentaren till denna text. Men det ska alltså presenteras sida-vid-sida. Hur göra detta?

Såhär!

Här är HTML-koden enkel, utan nästlade div:ar. Magin består i att kommentarsboxarna till en början är dolda (display=none i CSS-instruktionerna). När sidan är laddad och vi vet vilken position som varje lagtextbox har hamnat på, så kan vi använda absolute positioning och flytta kommentarsboxarna till sin rätta plats bredvid lagtexten:

             pe = FindPreviousBox(ps[i].previousSibling)
             ps[i].style.top = pe.offsetTop + "px"
             ps[i].style.display = "block";

(FindPreviousBox är en enkel rekursiv funktion som hittar rätt lagtextelement.) Vi hade inte kunnat göra det här statiskt, eftersom vi inte hade någon aning om var varje lagtextbox skulle komma att hamna på sidan i absoluta termer, eftersom detta beror på ffa läsarens fontstorlek. Men när sidan väl är laddad och layoutad är det en enkel operation att hitta rätt information i DOM:en.

Är det här en perfekt lösning? Nej, jag är inte ens säker på att den är bra. Framförallt funkar den riktigt dåligt om användaren har CSS men inte javascript, eftersom kommentarsboxarna då är gömda. Däremot funkar det bra med google och lynx.

Det kanske finns något semantiskt meningsfullt sätt att organisera informationen som låter mig uttrycka källtext med kommentarer på ett sånt sätt att det dessutom går att layouta fint. Men om inte annat är det kanske ett uppslag till hur man kan augumentera sin layout med lite javascript.

Imorgon ska jag prata om vikten av vettig lagstiftningsteknik ur ett demokratiskt perspektiv. Det blir mindre högtravande än det låter.

Standardbaserad DHTML-programmering

När man vill etikettera en lag på lagen.nu och klickar på ”Ändra” så skickas man inte till ett inmatningsformulär på en annan sida1; istället görs den beiga rutan med existerande etiketter om till ett inmatningsformulär, med tangentbordsfokus satt i textrutan. Man behöver inte ens klicka på ”Ändra”, det räcker med <acceleratorknapp>2+Ä. Det där är lite DHTML-magi av enklaste sorten, men just nu är det den roligaste programmeringen jag vet.

Vilket jag inte hade trott för fem år sedan. Jag hade lekt med Javascript sedan Netscape 2.0-tiden (då man i princip bara kunde ändra text i inmatningsfält) och det har alltid känts härkigt. Javascript var ett fult språk och ”API”:et var dåligt, ostandardiserat och hade sjukt många olika egenheter på olika webläsar/operativsystemplattformar. Debugmöjligheter var begränsade till ”debug by printfalert()”. När allting eskalerade i en inkompatibilitetens kapprustning nånstans runt 4.0-versionerna av IE och NS fick jag nog.

Men idag ser världen annorlunda ut. API:et (DOM) är rätt smutt. Webläsarna stödjer det överlag ganska bra, och kompatibilitetsproblemen är överlag kända och runtarbetade. Och den fula ankungen till språk som var javascript har plötsligt blivit, om än inte en svan, så åtminstone ett ganska snyggt dynamiskt typat språk med objektorientering, högre ordningens funktioner och closures och grejjer. Och som kronan på verket har den nya häftiga buzzakronymen AJAX kommit att nästan ersätta det gamla skamfilade ”DHTML”.

För ett tag sedan såg jag en recension på slashdot av boken ”DHTML Utopia: Modern Web Design Using JavaScript & DOM”, och, eftersom jag redan lurade på lite fräcka summer of 2005-funktioner beställde jag den. Det är en jättebra bok. Inte för tjock, inte en referensbok, utan bara en koncis guide till vad man egenligen kan göra med javascript nuförtiden. Boken håller sig till stora delar borta från flashiga effekter och förklarar ganska grundligt exakt hur de mer grundläggande sakerna i språket verkligen funkar.

Det stora aha-ögonblicket kom när jag läste kapitlet om eventhantering (som, tillsammans med några andra kapitel, går att ladda ner här). Jag, som alltid gjort javascriptande med diverse onClick="doSomething()"-kod, insåg att precis som jag kan binda utseende till element med CSS utan att röra HTML-koden, så kan jag binda beteende till element med javascript (addEventListener/attachEvent) utan att röra HTML-koden. När man har en sajt med 16632 statiska HTML-sidor är det en big win.

Och, som extra bonus kan man nu debugga sin javascriptkod på ett vettigt sätt. Mozillas kombination av javascriptdebuggern och DOM-inspectorn gör att det är galet lätt att få sin kod att funka i Mozilla-baserade browsers. Därifrån är det ibland problem att få saker att funka i Opera, Safari/Konqueror och IE, men ”DHTML Utopia” hjälper en bra bit på vägen med en pragmatisk inställning till browserbugworkarounds.

Så, ja, om tiden tillåter blir det mer DHTML-festival på lagen.nu? Gillar du det inte? Ladda ner lagarna i XML-format och transformera dem till hur tråkig HTML du vill!

Nu har det varit mycket tekniksnack flera dagar i rad här. Imorgon blir det en passionerad rant om lagstiftningsteknik.

1: Det stämmer faktiskt inte riktigt, om man har javascript avslaget skickas man till ett vanligt amish-formulär. Graceful degradation IN DA HOUSE!

2: ”Alt” på Windows/Firefox, ”Ctrl” på Mac/Safari, och på Opera funkar det inte alls ety den verkar inte kunna binda svenska tecken till acceleratorer på det viset.