All posts by Chris Flink

Javascript functionaliteit delegeren

Delegeren is niet altijd even makkelijk, je moet er maar op vertrouwen dat het allemaal goed gaat en soms duurt het geven van de uitleg al langer dan “het zelf even doen”. Toch is delegeren soms noodzakelijk en kan het de prestaties bevorderen. Weinig nieuws tot nu toe, maar dat je dit ook in Javascript kan (en moet) doen was nog even nieuw voor mij. Gelukkig is daar met regelmaat de Sitepoint nieuwsbrief om mij op de hoogte te houden en deze keer stond daar een interessante blogpost van Andrew Tetlaw in.

Mede door de opkomst van Javascript frameworks als Prototype, JQuery and YUI heeft Javascript een tweede leven gekregen en wordt het steeds meer gebruikt op websites. Helaas wordt het toevoegen van Javascriptfunctionaliteit soms zó eenvoudig, dat er nauwelijks nagedacht hoeft te worden. Hierdoor laat de performance van websites soms te wensen over en wordt er veel meer geheugen gebruikt dan noodzakelijk.

Een oorzaak van deze matige performance, kan een overdaad aan Event-listeners zijn. Als alle cellen of rijen in een tabel naar een bepaald event moet luisteren, is je eerste ingeving waarschijnlijk om aan al deze elementen een eventlistener te hangen. Zeker met grote tabellen zorgt dit voor veel overload, dus dat moet beter kunnen. Zoals duidelijk uitgelegd wordt op PPK’s quirksmode, ‘bubbled’ een event omhoog door alle parent-nodes tot deze uitkomt bij de document node. Een alternatief voor het toekennen van eventlisteners aan de specifieke elementen, is het toekennen van een eventlistener aan een parent-element omdat het event uiteindelijk ook daar terecht komt. In de functie die het event ‘opvangt’ moet dan alleen het oorspronkelijke element achterhaald worden maar dat is eenvoudig op te lossen.

Ik zal hier geen code-voorbeelden plaatsen, die zijn al op verschillende sites te vinden. In het Sitepoint artikel staat een eenvoudig voorbeeld. Uitleg met voorbeelden (zonder library) staat op de Usable Type blog. Uiteraard zijn er ook voorbeelden voor de grote frameworks als jQuery, Prototype, en Yahoo! UI.

Ik weet in ieder geval één project waarop ik dit ga toepassen, ik ben benieuwd naar het verschil in performance!

Mooi ontwerp inspireert

Screenshot onwiredIn de Design View blog van Sitepoint werd de website Scrnshots besproken. Op deze site, met de tagline “share your inspiration”, kan iedereen screenshots van websites met een goed design plaatsen. Uiteraard is dit niet de eerste en enige website waar ontwerp inspiratie opgedaan kan worden, maar ik vind dit soort initiatieven altijd erg inspirerend.

Op deze pagina viel mij vooral het ontwerp van de website onwired.com op. Deze site gebruikt inmiddels veel gebruikte effecten zoals schaduwen en gradients, maar dan net wat subtieler. Zo loopt de schaduw vanuit het midden naar de zijkanten weg waardoor er een bolling in de pagina lijkt te zitten. Ook zit er een lichteffect op de achtergronden waardoor de site in het midden lichter is dan aan de zijkanten.

En dan de paperclip met details over één van de projecten, die maakt deze site helemaal af. Ook hier zit een schaduw achter, maar ook deze is interessant vervormt waardoor het lijkt alsof het puntje omhoog komt. Hoe je dit effect kan bereiken wordt ook uitgelegd op de website. Door dit element (dat overigens mooi gebruikt maakt van PNG’s alpha transparency) komt de website speelser over en is het minder ‘boxy’.

De website maakt ook gebruik van sIFR waarmee speciale lettertypen op de website gebruikt kunnen worden zonder gebruik te maken van plaatjes. Hierdoor blijft de website toegankelijk en goed indexeerbaar door de zoekmachines. Typografie krijgt óók op websites een steeds belangrijkere rol! Verder is de site leuk en uitdagend geschreven en staan er een aantal interessante artikelen op!

Het wordt tijd dat ik mijn site en de site van Smit & Flink Media ook een keer een update geef! -zucht-

Eindpresentatie Book-a-Flight

Book-a-FlightVoor het behalen van mijn Master Content and Knowledge Engineering ben ik al enige tijd bezig met mijn afstudeeronderzoek naar Information Overload en hoe mensen daarmee om kunnen gaan. De officiële titel van mijn scriptie is: “The Skill to Handle Information Overload – Construction and Evaluation of an Assessment Tool”. Voor deze scriptie heb ik dus een assessment tool ontwikkeld in Flash: Book-a-Flight. Uiteraard moet deze tool nog verder ontwikkeld worden, maar mijn werk is dusdanig goed ontvangen dat de ontwikkeling ook na mijn stage verder zal gaan!

Afgelopen donderdag heb ik mijn eindpresentatie gehad voor GITP Research. Ik ben mijn scriptie nog aan het afronden en ik moet deze nog officieel verdedigen voor de universiteit, maar om de input van mijn collega’s nog mee te kunnen nemen was dit het beste moment.

De presentatie verliep goed en de input was erg bruikbaar. Uiteraard werden er ook wat lastigere vragen gesteld maar die kan ik mooi meenemen in mijn discussie en aanbevelingen voor vervolgonderzoek. Om mijn presentatie wat mooier te maken (lees: een typisch geval van studie-ontwijkend-gedrag) heb ik voor de Book-a-Flight game een software box ontworpen (zie de afbeelding bij dit bericht). Erg leuk om te doen, niet eens zo gek moeilijk en het werd gewaardeerd! 🙂

De toekomst van Rich Internet Applications

Om nog wat laatste studiepunten te halen moest ik nog een keuzevak doen. Geïnspireerd door de presentaties op “Beyond Boundaries” heb ik ervoor gekozen om een paper te schrijven over de toekomst van Rich Internet Applications. Ik heb de huidig ontwikkelingen op een rijtje gezet en de mogelijkheden van Flex, Silverlight en JavaFX op een rijtje gezet en met elkaar vergeleken.

De paper is wat te lang geworden om als weblog post te plaatsen, maar de pdf is te downloaden via deze link!

Update (01-07): De paper is nagekeken en ik heb een 8! Ik ben er erg blij mee! Eindelijk weer eens studiepunten! 😉 De opmerking van mijn docent (Hans Voorbij) was ook erg motiverend:

Proficat, ik ga het vak Capita Selecta op masterniveau, 3,75 ECTS en uitslag 8, voor je registreren bij de studieadministratie. […] Ik kan alleen maar zeggen: wat jammer dat ik de afgelopen jaren niet meer werk van je onder ogen heb gehad. Houd je kwaliteitsnormen in de toekomst goed vast. En succes met je afstuderen!