Scriptorama.nl

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

JavaScript partners: jQuery en Ext GUI-componenten

jQuery's John Resig kondigde gisteren een interessante samenwerking aan met Ext.
Deze library, geschreven door Yahoo UI (YUI) evangelist Jack Slocum, biedt een set GUI-componenten om cross-browser interfaces te bouwen met HTML, CSS en JavaScript. Ext begon als YUI-extensie maar zal ook met jQuery worden geïntegreerd. Over planning is op dit moment niets bekend maar Resig belooft een officiële aankondiging op jQuery's blog.

Om je een idee te geven wat er met Ext mogelijk is geef Slocum een aantal gelikte voorbeelden:

Knap werk. Heb je ooit een cross-browser versie van Mozilla's XUL gewenst dan is dit waarschijnlijk bijzonder goed nieuws.

Nieuw in Prototype 1.5

Scott Raymond, auteur van 'Ajax on Rails', heeft voor je gemak alle nieuwe features en aanpassingen in Prototype 1.5 op een rij gezet. Thema's:

Aan de slag met Firebug

Firebug's auteur Joe Hewitt heeft een puike tutorial gepubliceerd, 'AJAX Debugging with Firebug'. Met prima voorbeelden hoe je o.a. console functies en breakpoint debugging toepast. Even snel zien waarom Firebug 'web developer tool of the year' wordt genoemd? Bekijk hier een screencast.

HTML en CSS in Outlook 2007

Internet Explorer 7 ging er qua standards compliance op vooruit. Datzelfde geldt helaas niet voor Outlook 2007. Maak je regelmatig een HTML e-mail voor massaverspreiding dan zul je waarschijnlijk niet blij worden van de HTML rendering in deze versie. Je zou verwachten dat de renderer gebaseerd zou zijn op IE7. Het werd echter Word 2007... Met op z'n zachtst gezegd beperkte ondersteuning voor HTML en CSS. Deze versie mist o.a. ondersteuning voor:

  • CSS positionering
  • CSS floats
  • HTML formulieren
  • HTML en CSS achtergrondafbeeldingen
  • plugins (waaronder Flash)
  • animated GIFs

Alstublieft. De schrik te boven? Probeer dan Microsoft's HTML en CSS Validator.

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.

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.

Naar Voren: aan de slag met .htaccess

In "Aan de slag met .htaccess" leert Lodewijk Schutte ons principes van de meest gebruikte .htaccess-toepassingen met Apache: controle over bezoekers, bestanden en URLs. (Bron: Naar Voren)

Update

WannaBrowser is handig om je .htaccess rules te testen. Deze online tool is vooral nuttig om de User-Agent en Referer request headers snel te wijzigen.
Wil je alle request headers beïnvloeden en ook kunnen knoeien met POST parameters, dan is de Firefox-extensie Tamper Data een uitkomst.
Hiermee kun je overigens een goed beeld krijgen van requests en responses. Erg handig om bottlenecks op te sporen. Een bijzonder aardige feature is een grafiek van laadtijden van requests. Je vindt 'm verstopt in het context-menu: Graph All.
Deze functionaliteit mogen we ook in Firebug 1.0 verwachten.

JavaScript en efficiency

Maak je heftig gebruik van JavaScript voor je webapplicaties, dan is er meestal wel het een en ander te optimaliseren qua prestaties. "Efficient JavaScript" op Dev.Opera biedt naast de nodige tips inzicht in de werking van JavaScript-engines.