Michael Schøler og jeg har netop frigivet version 1.1 af vores Yahoo! Widget til kontrol af Javascript filer: JSLint Multi. Vi er meget glade for at kunne meddele at JSLint Multi nu er den “officielle” JSLint widget, og der er sket kraftige forbedringer siden version 1.0, hvorfor vi anbefaler at alle opdaterer med det samme.

Siden vi frigav version 1.0 har Yahoo! godkendt og inkluderet JSLint Multi på deres widget site. Hvis du henter og installerer JSLint Multi derfra, får du automatisk tilbudt opdateringer for fremtiden. Hvis du bruger en af de få browsere Yahoo’s inpage installer understøtter kan du også anvende knappen til højre. Bemærk dog at Yahoo! til tider kan være …

Jeg arbejder en del med både JSON og Javascript, og oplever hyppigt at folk blander de to sammen. Oftest fordi de ikke rigtigt har forstået hvad JSON er. De ved at navnet kommer fra “JavaScript Object Notation” og konkluderer hurtigt (og lidt forhastet) at “JSON jo bare er Javascript objekter”. Og selvom det er helt forkert er det svært at bebrejde dem deres opfattelse. Populariseringen af JSON trak i høj grad på at “JSON er Javascript” og at enhver Javascript fortolker derfor umiddelbart kunne behandle JSON. Efter at JSON er blevet populært har det også smittet af den modsatte vej, hvor Javascript objekter nu ses omtalt som “JSON objekter”.

Men JSON er ikke Javascript.

JSON er data. Det er …

En klassisk mangel i browser-baserede applikationer er fornuftige tastatur-genveje. Dette skyldes til dels at alt hvad W3C’s “DOM Level 2″ specifikation (fra 2000, men stadig den nyeste der overhovedet nævner events) har at sige om emnet er:

The DOM Level 2 Event specification does not provide a key event module. An event module designed for use with keyboard input devices will be included in a later version of the DOM specification.

Som følge heraf håndteres keyboard events vidt forskelligt i forskellige browsere, med kaos til følge for den der måtte ønske at anvende dem.

Keyboard.js er mit bidrag til at forsøge at bringe orden i dét kaos, og gøre det lettere at implementere tastatur-genveje i browser-baserede applikationer. Keyboard.js er én Javascript-fil på …

I Visual DataFlex, når man offentliggør en funktion som en Web Service, har man muligheden for at supplere med en “beskrivelse” af funktionen:

{ Published = True  }
{ Description = "This is the web service description"  }
Function Foo Returns String
    Function_Return "Foo"
End_Function

Denne beskrivelse står i WSDL filen der genereres for web servicen, og vises på den side der fungerer som oversigt over servicen, når man tilgår denne i en browser. Umiddelbart giver det ikke mening at tilføje markup til beskrivelsen, for HTML tags vises bare som synlige tags i beskrivelsen. Skulle man ønske at tilføje markup til sine beskrivelser, f.eks. for at bruge disse som egentlig dokumentation, så kan det dog let bringes til at virke.

Siden …

I mit arbejde får jeg i stigende grad behov for at web services kommunikerer i JSON formatet, foruden eller i stedet for XML. Det har skabt et tilsvarende behov for at kunne dokumentere disse formater, både med henblik på at andre udviklere kunne få besvaret deres spørgsmål, og med henblik på mulig maskinel validering af kommunikationen.

I et forsøg på at opfylde dette behov har jeg kigget mig omkring. Det var et krav (fra mig) at tingene skulle kunne dokumenteres i JSON — primært for ikke at forvirre folk yderligere med endnu et nyt format. I første omgang faldt jeg over en løsning Thomas Messier har lavet til brug i ColdFusion. Strukturen var tillokkende, men desværre virker arbejdet noget …

Billeder i tabel-celler i HTML har længe været betragtet som “dårligt design”, men det er nemt at arbejde med, og det er meget anvendt, så måske er du stødt på dette problem selv.

Billeder, <img> tags altså, placeres som standard på “baseline”, dvs. den linie som bogstaverne i en eventuel tilstødende tekst “står på”. Eftersom visse bogstaver, f.eks. “g” går nedenunder denne linie, vil der i f.eks. en tabel-celle blive afsat vertikal plads under et billede, hvis cellen også indeholder tekst. Eksempel ses på billedet, hvor tabel-cellen er markeret med rødt.

Eller… sådan var det.

Hidtil har “problemet” nemlig kunnet løses ved at sørge for at cellen ikke indeholdt tekst eller whitespace. Nu lader det …

I forbindelse med endnu en opdatering til Behaviour tog jeg konsekvensen af at Ben Nolan stadig ikke ajourfører hans “officielle” version. Dermed har Behaviour nu fået sin helt egen side her på Kruse-Net, hvorfra jeg vil udgive mine rettelser og udvidelser.

Skulle nogen have ønsker til ændringer er I meget velkomne til at kontakte mig. Bemærk at Behaviour siden er på engelsk af respekt for Ben Nolan og Simon Willison.

Hvis du har prøvet at få disse til at spille pænt sammen, så ved du enten at der langt fra er tale om Den Hellige Treenighed, eller også er du bare heldigere end jeg har været.

For mig er tværsummen af ovenstående = 666.

Hvis man læser om hvordan man får Ruby on Rails op at køre på diverse web servere ser det meget let ud. Der er ingen ende på antallet af fine opskrifter der i udførlige detaljer beskriver hvert eneste skridt på vejen, og tilmed lovpriser resultatet. Efterhånden som man prøver opskrifterne ryger de dog alle i en af disse bunker:

• Mangler en eller flere stumper, som ikke længere er til at opdrive
• Virker ikke på Apache 2.2
• Virker ikke …

Til dem der måtte bruge Kruse-Net’s udgave af Ben Nolans “Behaviour” er der nu — forhåbentlig — godt nyt. Jeg kan nemlig præsentere ikke én men hele to nye udgaver af dette fikse system.

Den første udgave, jeg kalder den “p2″, fikser en fejl i Bens udgave som man kan støde ind i hvis man skriver kode som dette:

...
'my selector': function(element) {
  Behaviour.addEventObserver(some-other-element, 'event', function() { ... });
}
...

Det centrale værende at der registreres en event observer på et andet element end det der er udpeget af selectoren. Denne fejl er som sagt rettet i p2-udgaven.

Den anden udgave, som jeg meget lidt opfindsomt har navngivet “p3″, er magen til p2 …

En af de ting jeg har begået som jeg får flest forespørgsler på hjælp om er en lille stump kode der sender emails fra en Visual Dataflex Webapp via CDO (der findes på langt de fleste nuværende windows servere og workstations). Da forespørgslerne kommer fra udlandet er resten af artiklen — undtagelsesvis — på engelsk.

Som Sergio Pereira beskriver i sine Developer Notes for prototype.js kan man, når man bruger Prototype til at foretage AJAX kald, forholdsvis let tilføje en spinner eller lignende på siden som viser når der er AJAX aktivitet:

Ajax.Responders.register({
	onCreate: function(){
		Element.show('systemWorking');
	},

	onComplete: function() {
		if (Ajax.activeRequestCount == 0) {
			Element.hide('systemWorking');
		}
	}
});

Det har jeg selv brugt flittigt, og undrede mig i dag over en situation hvor denne spinner aldrig forsvandt igen. Nærmere undersøgelser viste at ikke bare blev onComplete funktionen ovenfor aldrig kaldt, Ajax.activeRequestCount blev heller ikke talt ned, på trods af at der tydeligvis kom svar på de pågældende requests.

En fiks måde asynkront at loade JSON data i en AJAX applikation på er:

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://enurl";
document.getElementsByTagName('head')[0].appendChild(script);

Hvis man også ønsker at vide hvornår script’et er loadet, og ens data dermed er klar, kan man blot tilføje følgende linie et sted i midten:

script.onload = function() { alert('data er klar!'); } // eller en anden funktion efter eget valg

Det virker fint i browsere der bare overholder standarderne nogenlunde. I Internet Explorer (testet på version 6) er der dog et par fælder man skal være opmærksom på!

1. Hvis IE før har loadet et script fra samme URI, så kontaktes serveren slet ikke. I nogle tilfælde er det fint (data fra sidst indlæses fra cachen), i andre tilfælde …

Tidligere på året udarbejdede jeg [en lille javascript widget][indtastning af datoer] til hjælp med indtastning af datoer i web applikationer. Den understøtter bl.a. at datoen kan ændres ved tryk på [pil op] og [pil ned] på tastaturet. Og det er en fin hjælp når man alligevel har fingrene på tastaturet. Men brug af denne widget har siden afsløret at der er en række situationer hvor det ville være fordelagtigt at kunne bladre datoer med musen. Og det er helt oplagt at det meget praktiske hjul som de fleste mus efterhånden er udstyret med kan bruges til dette.

Opgaven er ikke triviel. [W3's specifikationer][] rummer ingen events fra hjulet, så vi er nødt til at bevæge os ind i det pigtrådsklædte, minefyldte …

Dem der har prøvet at arbejde med [Prototype][] ved det formentlig allerede — nedarvning fungerer lidt klodset:

var Subklasse = Class.create();

Subklasse.prototype = Object.extend(Object.extend({}, Grundklasse.prototype), {
    
    initialize: function(value) {
        Grundklasse.prototype.initialize.call(this, value);
        ++this.value;
    }
    
});

Faktisk er det ikke bare klodset, syntaksen er også så indviklet at der er alle mulige chancer for at komme til at gøre det forkert. Det er heldigvis [faldet Justin Palmer for brystet][]. Og hvad bedre er, så har ingen mindre end Dean Edwards (som jeg først lærte at kende da han skrev et javascript bibliotek — IE7 — der rettede …

En rose lavet i SVG, er en rose lavet i SVG, er en…

Der er mange måder hvorpå man kan gøre den samme ting – men, desværre ikke altid én måde at gøre det samme på i henholdsvis IExplorer og Firefox. Det er ved at blive bedre, jo vist, men når man bevæger sig ud på gyngende grund, der hvor nye browserteknologier er ved at blive dannet og standardiserede, så ber’ man jo selv om problemer. “Nye” browserteknologier er af samme grund ofte længe undervejs, og det må formodes at SVG formattet ikke rigtigt har fået et fodfæste endnu, fordi der stadig er forskelle browserne imellem. Den første W3 recommended version af SVG undertegnede kunne finde frem til er dateret 2001. Lidt sørgeligt egentlig.

Nå, men jeg kunne jo ikke blive ved med at vente på at Adobe, Microsoft og Mozilla teamet bliver enige og tænkte at jeg derfor måtte tage skeen i egen hånd. Det er denne artikel så resultatet af. Det passer så ikke helt, jeg har ikke trasket rundt siden 2001 og bare ventet på en løsning, men et konkret behov i forbindelse med en programmeringsopgave gjorde, at NU skulle der altså ske noget.

Inline eller embedded

Den umiddelbare forskel man konfronteres med, er at Internet explorer har det bedst med embedded SVG, og at firefox stortrives med inline SVG.

Embedded SVG i Internet Explorer:

Filen “cirkel.svg” som bruges i embed tagget:

Inline SVG i firefox:

I skrivende stund har jeg ikke kigget på om inline SVG data kan bringes til at validere. Men det er klart, at <svg:svg ... > midt i et XHTML dokument ikke er helt efter valideringsreglerne. Jeg savner muligheden for helt at droppe <embed ... /> og inline <object ... /> mulighederne, og istedet have et standardiseret og cross-browser <svg src="..." /> tag tilrådighed.

Eksempel 1: Se et eksempel på embedded SVG her, og et eksempel på inline SVG her.

Med AJAX og udviklingen af deciderede web “applikationer” er en af de ting man kan risikere at støde på, behovet for at kunne tage applikationen med sig “på farten”. Internet Explorer og Firefox har begge en “Arbejd offline” tilstand som understøtter dette. Problemet i den forbindelse er at applikationens tilstand er meget skrøbelig. Lukkes browser vinduet, reloades siden, eller navigeres der væk fra siden, så er tilstanden tabt.

Her præsenteres en løsning hvor en signeret java applet bruges til at gemme applikationens tilstand lokalt. “Applikationen” er i dette tilfælde meget simpel. To lister, hvorimellem en stribe “muligheder” kan flyttes. Tilstanden af de to lister gemmes i en fil på din pc ved klik på “Save file” i java applet’en — der i øvrigt skal godkendes af brugeren først (tør du? — du giver den lov til at læse og skrive alle filer!).

Med Web 2.0 og de deraf følgende Javascript biblioteker af stigende størrelse er der specielt én mangel i Javascript der så småt begynder at blive kritisk: mangelen på en “include” eller “import” erklæring, eller med andre ord at man ikke umiddelbart i én script fil kan angive at en anden skal indlæses. Min forrige artikel, “Leg med AJAX”, illustrerer det kun alt for tydeligt. Der skal inkluderes ikke mindre end 8 forskellige biblioteker for at få stillet funktionaliteten i det sidste til rådighed. Den stakkels udvikler der skal bruge Google biblioteket skal …

Opdatering: Eksemplet nedenfor har stadig en vis relevans kode-mæssigt, men da Google har droppet deres SOAP API fungerer det ikke længere.

Dagens menu står på kald af SOAP-baserede web services via AJAX. Og hvis ikke du for nylig har forsynet dig med en kop kaffe, så var det måske en god idé at gøre det før du læser meget videre. For det er en hel del komponenter jeg hermed bringer i spil på samme tid. For de utålmodige starter jeg med resultatet — indlejrede Google søgninger:

10 første resultater (af ?):

Bemærk at Google kun tillader 1000 forespørgsler pr. dag pr. nøgle, så hvis der ikke kommer noget svar kan det være derfor.

AListApart har været igang igen. Og det er ved at være længe siden. Med artiklen “ Printing a Book with CSS: Boom!” dykker de ned i hvordan det med en god blanding af almindelig HTML, CSS2, CSS3 og en PDF generator ved navn Prince er muligt at fremstille bøger. Og selvom man ikke lige har interesse for bog-fremstilling kan jeg varmt anbefale artiklen. Den er proppet med flotte CSS tricks som kan få enhver webdesigner til (igen?) at bande over alle browsere der ikke understøtter de nyeste standarder.

Før Unicode kom til, anvendte computere i Thailand et 8-bit tegnsæt ved navn [TIS-620][]. Det indeholder de almindelige engelske tegn på samme pladser som i ASCII tabellen, samt de thailandske tegn på de pladser hvor vi f.eks. har placeret æøå og diverse tegn med accenter på. Hvis en fil kodet i TIS-620 flyttes til en dansk (eller engelsk) computer og læses der, vil den indeholde tekst der ser ud som det her: “ÍÂÒ¡ÃÙéÇèÒ”. Når man som jeg har det ene ben i Thailand er det noget man ser ret ofte. Men det er heldigvis til at råde bod på. Personligt får jeg ikke meget ud af at konvertere volapyk’en til thai, men så kan min kære hustru da i det …

En af de ting der ofte er problematisk i web applikationer er indtastning af datoer. Nogle applikationer tvinger brugeren til at gå gennem en kalender (der ofte skal snakke med serveren for at skifte måned), for at være sikker på at datoen bliver indtastet i et gyldigt format. Det er langsomt, og det tvinger ofte brugeren til at bruge musen, selvom mange hellere vil taste datoen direkte. Andre applikationer giver kun mulighed for direkte indtastning, og tvinger dermed brugeren til overholde et specifikt format, som endda nogle gange slet ikke er nævnt.

Men hvorfor skal det være så besværligt? Her præsenteres et almindeligt input felt beregnet til dato-indtastning. Bag feltet ligger lidt logik der sørger for at en stribe forskellige formater …

Som web-udvikler arbejder jeg med både Apache og IIS, og der er flere af de maskiner jeg anvender der har begge dele installeret. Da de ikke kan køre på samme port havner man i en situation hvor alle referencer til den ene af dem indeholder et grimt portnummer som i “www.example.com:8000″. Ikke blot ser det ikke pænt ud, men en browser som Internet Explorer får også sådan en adresse helt galt i halsen med mindre man sætter det endnu mindre pæne “http://” foran.

Jeg præsenterer her Apache, der via hele to forskellige moduler kan håndtere at tilgangen til begge servere sker gennem den traditionelle port 80. Intet avanceret, det er bare et simpelt trick der kan løse problemet i de fleste situationer.

Undertegnede har arbejdet en del med XML Schema i forbindelse med standardisering. Og da arbejdet i flere tilfælde er sket i offentligt regi har schemaerne ofte skullet udformes i overensstemmelse med “Offentligt Information Online’s” ( OIO) regler. Jeg har været med fra starten af på OIO’s InfoStrukturBase ( ISB), helt fra lanceringen d. 4. marts. 2003, og har arbejdet med XML Schema længere end det. Den erfaring jeg har gjort mig er at når målet for standardiseringen er en web service og formatet er XML Schema, så er det ikke helt uproblematisk — særligt ikke hvis midlet for standardiseringen er OIO.

I denne artikel vil jeg forsøge at beskrive hvilke problemer jeg har oplevet i forbindelse med standardisering af web services i XML Schema format på OIO, og hvilke alternativer man bør overveje i retning af specifikation og håndtering af udvekslingsformat for en web service. Jeg fremlægger fordele og ulemper som jeg ser dem. Artiklen drager ingen konklusion, men lægger op til indbyrdes afvejning af de muligheder der er til rådighed.

Sitemaps er et værktøj til at fortælle Google – og i fremtiden måske andre søgemaskiner, da det er baseret på en åben standard – noget om strukturen på et site, og måske om alle de sider som GoogleBot’en ikke selv finder.

Jeg har siddet og rodet lidt med sitet i dag, hvilket førte til en sjov opdagelse: Firefox viser hverken title eller alt attributter på billeder som tooltips.

De fleste seriøse webdesignere har på et eller andet tidspunkt beskæftiget sig med at få en del af et site til at se fornuftigt ud på print. CSS indeholder heldigvis funktioner til at differentiere design mellem skærm og printer – man skal bare huske at bruge dem.

A List Apart tog emnet op i sidste måned med artiklen ALA’s New Print Styles. Det er (som sædvanlig fra deres hånd) fascinerende læsning, og meget indsigtsfuldt – med et par CSS3 tricks smidt ind som man måske kan lære lidt af. Ikke mindst er det interessant at læse at de faktisk fik henvendelser i en kort periode hvor sitet kørte uden print styles.

God fornøjelse!

Enhver der helt eller delvist lever af at udvikle web sider eller applikationer har på et eller andet tidspunkt ønsket sig et mere avanceret værktøj til rådighed end alert(). Måske JavaScript Logging er løsningen? Det er da et forsøg værd!