Scriptorama.nl

Header image showing a keyboard, mouse, laptop and books on design patterns

Toepassing van Prototype: een foto album

Sinds kort is Prototype 1.5 RC2 beschikbaar. Een nieuwe feature in deze versie is de mogelijkheid om door HTML nodes te bladeren via up, down, next en previous. Om de mogelijkheden van deze functies te laten zien, zal ik met behulp van Prototype een simpel foto album maken.

Uiteraard doen we dit helemaal xHTML valid en zorgen we voor Unobtrusive JavaScript. Gebruikers zonder JavaScript moeten dus zonder problemen de foto's kunnen bekijken.

(more...)

What-you-see-is-what-you-mean

Iedereen die ooit een weblog of CMS geschreven of gebruikt heeft, zal daar ongetwijfeld een WYSIWYG editor in tegen zijn gekomen. Het mooie van een WYSIWYG editor is dat leken html kunnen produceren via een interface vergelijkbaar met Word. Dat werkt allemaal prima, zolang je geen eisen stelt aan valide en semantische html.

De meeste WYSIWYG editors kijken namelijk niet zo nauw op die punten, terwijl dit wel steeds belangrijker wordt in de webwereld. Een onderzoek van Peter Kranz laat zien dat maar weinig WYSIWYG editors in de buurt komen van het ideale. Markup talen als Textile en Markdown kunnen veel beter semantische html vormen, maar voor veel eindgebruikers blijft de stap echter te groot om zo'n taal te gebruiken zonder visuele steun.

Een opvolger van WYSIWYG zal WYSIWYM zijn. Met What You See Is What You Mean krijg je duidelijk te zien wat de semantische opmaak van je tekst is. Jean-François Hovinne laat zien hoe dit kan door middel van de WYMeditor:

WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

Hoewel de editor nog wat tekortkomingen heeft, ziet het er veelbelovend uit. Eindelijk een editor die werkt zoals de moderne webdeveloper dat ook doet: met semantische html en stylesheets!

Meer informatie is te vinden op:

jQuery 1.0.4 beschikbaar

John Resig en de rest van 't jQuery-team hebben een verse release voor ons JavaScript-gemak: jQuery 1.0.4. De nadruk ligt vooral op Ajax-functionaliteit. De nieuwe $.ajax()-uitbreidingen geven je o.a. rechtstreeks toegang tot 't gebruikte XMLHttpRequest object. Hiermee kun je bijvoorbeeld headers inpluggen of requests afbreken. Daarnaast zijn event.pageX en event.pageY nu in alle browsers beschikbaar, ook in Internet Explorer.
Nog niet bekend met jQuery? Eerder gaven we een korte inleiding. Voor prima voorbeelden kun je terecht op learningjquery.com.

Rails versie 1.2

Afgelopen week heeft David Heinemeier Hansson de release candidate 1 van de nieuwe versie van Rails bekend gemaakt. Versie 1.2 van het geweldige framework bevat een groot aantal updates.

(more...)

Firefox 3.0 alpha beschikbaar

Minder dan twee maanden na Firefox 2.0-final is nu Firefox 3.0 alpha beschikbaar, codenaam 'Gran Paradiso'. Deze release is een voorproefje voor webontwikkelaars en testers. Het is o.a. de bedoeling dat een aantal grafische standaarden beter ondersteund gaan worden, waaronder Canvas (ondersteund sinds Firefox 1.5) en Scalable Vector Graphics. Voorlopig ligt de nadruk vooral op Gecko 1.9, de nieuwste versie van Mozilla's layout engine. Gecko 1.9 alpha 1 kun je dan ook testen met Firefox 3.0 alpha. Deze versie gebruikt de Cairo library voor alle grafische weergave.
Op mozilla.org vind je het masterplan en meer informatie over nieuwe features. Wil je je huidige extensies proberen te testen in deze versie, dan heb je de Nightly Tester Tools nodig.

Update

In Firefox 3.0 alpha Minefield (nightly build) wordt de Acid2-test correct gerenderd. Een belangrijke prestatie voor de Mozilla-ontwikkelaars, aangezien daaruit ondersteuning voor de belangrijkste webstandaarden blijkt. Meer informatie op Ars Technica.

Firebug 1.0 beta beschikbaar

Firebug: ongetwijfeld een van de meest populaire Firefox-extensies voor webontwikkelaars, en met recht. Mathieu meldde eerder het voorproefje al. maar nu is 'ie er dan: de 1.0 beta. Übercoole nieuwe features:

  • HTML: live wijzigen van de complete structuur. Voorheen waren alleen attributes te wijzigen.
  • CSS rules: live wijzigen en weergeven van alle rules, inclusief inherited
  • CSS layout: box model visualisatie. Metrische eigenschappen van alle elementen kunnen worden weergegeven en gemeten
  • HTTP-verkeer: inzicht in requests en responses. Gooi Tamper Data overigens niet weg, want daarmee kun je POST data en headers wijzigen.
  • JavaScript profiling: timing van functies om bottlenecks op te sporen
  • eigen venster: je kunt Firebug 'ontkoppelen' naar een venster (Control/Command F12). Erg handig als je met meerdere monitoren of virtual desktops werkt.

Minstens net zo belangrijk is de filosofie van de auteur: Joe Hewitt houdt 't gratis en open source. Erg sympathiek. Donaties zijn uiteraard welkom.
Ook aan andere browsers heeft 'ie gedacht: plug Firebug Lite als JavaScript library in en je hebt een vereenvoudigde Firebug console.

Internet Explorer 6 en 7 naast elkaar met Virtual PC

Het Microsoft IE team geeft je een manier om IE6 op XP SP2 virtueel te draaien. Het gaat om de release van een Virtual PC image. Daarmee antwoordt het team op de veelgehoorde klacht van webontwikkelaars: het legaal virtueel draaien van meerdere IE-versies verplicht je om meerdere Windows-licenties aan te schaffen.

Zowel Virtual PC als dit image zijn kostenloos te gebruiken. Catch: het image is te gebruiken tot 1 april volgend jaar. Sta-voor-stap instructies vind je op About:Webdesign.
In mijn ervaring lijkt dit voorlopig een stabielere oplossing dan verschillende standalone IE-versies op één Windows-installatie te draaien. Op mijn twee XP SP2-installaties crashen de IE5, 5.5 en 6 standalones bijna net zo vaak als dat ik ze opstart. Een paar weken terug kreeg ik session cookies niet meer aan de praat in IE6 standalone. Niet echt een stabiele testomgeving dus.
Een installer voor IE3 t/m 6 standalones vind je hier. Deze fixt meteen Microsoft's conditional comments met deze hacks.

Update

Alex Russell (Dojo Toolkit) legt behoorlijk overtuigend uit waarom virtueel testen beter is dan de standalone hacks te gebruiken. In het kort: standalones kunnen vrijwel nooit draaien als 'native' IE-installaties. IE is per definitie afhankelijk is van systeemcomponenten als Winsock en Windows Scripting Host, ook de standalones. Draai je dus niet dezelfde Windows-versie en patch-level als je test-doelgroep dan kun je verschillen in gedrag verwachten.