Scriptorama.nl

Een van de meest populaire artikelen op Scriptorama is, nog steeds, het artikel over het tonen van een progressbar bij het uploaden van een bestand. In dat artikel gaat dat met een aparte PHP extensie en moet het Javascript deel iedere zoveel tijd aan een PHP script vragen hoe ver z'n upload is. Niet het meest efficiente, zeker niet als je wat meer gebruikers hebt die wat uploaden.

De mensen bij het W3C zijn ook eindelijk een beetje wakker geworden wat betreft het uploaden van bestanden en hebben een nieuwe draft geschreven: Progress Events. Hiermee vuurt de browser bij bijvoorbeeld uploads, iedere zoveel tijd een event af met daarin gegevens over hoe ver de upload gevorderd is.

Op dit moment ondersteunt van de browsers alleen Firefox 3.1 alpha 2 "Shiretoko" een implementatie van Progress events. Maar, niet getreurd, er is ook nog de browser plugin Gears die in versie 0.4 Progress Events implementeert en die is beschikbaar voor alle recente browsers! Laten we de upload progress bar nog eens opnieuw knutselen, maar dan met Gears.

(more...)

Google heeft vandaag een nieuwe API aangekondigt: de Google AJAX Libraries API. Met deze nieuwe API wordt het mogelijk om verschillende populaire Javascript libraries te gebruiken direct vanaf de servers van Google!

We have worked with a subset of the most popular JavaScript frameworks to host their work on the Google infrastructure. The AJAX Libraries API then becomes a content distribution network and loading architecture for these libraries.

We realize that there are a huge number of useful libraries out there, but we wanted to start small with the program, which has us starting with:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

De voordelen zijn te vinden in dat het, bij veel gebruik, waarschijnlijker is dat een van deze libraries zich al in de cache van de gebruiker bevindt, de javascript libraries worden optimaal geserveerd en het gebruik van de javascript libraries levert geen bandbreedte verbruik op voor de applicatie.

Het grote 'nadeel' is natuurlijk dat je als webapplicatie afhankelijk bent van Google. Waarbij het bijvoorbeeld bij een nieuwe versie (bijv. vanwege security issues) niet duidelijk is hoe snel deze beschikbaar zal zijn bij Google. In dat geval kun je natuurlijk altijd nog even tijdelijk zelf de nieuwe versie hosten, dat wel.

Meer informatie vind je op de Google AJAX Search API blog. Pretty cool.

Ik linkte al eens eerder naar een editor die geimplementeerd was in Javascript, maar de mensen achter April-Child.com gaan nog even een stapje verder. Zij hebben in Javascript grote delen van de functionaliteit van de populaire TextMate editor voor MacOSX geimplementeerd: AMY Editor, compleet met bundles, project manager, snippets, enz.

De AMY editor is behoorlijk functioneel en performed ook behoorlijk goed. Het enige wat lijkt te ontbreken is een mogelijkheid je bestanden direct te downloaden naar je desktop.

Helaas lijkt het niet mogelijk te zijn om de AMY editor zelf (in z'n geheel) te downloaden voor toepassing binnen bijv. je eigen website, maar het is hoe dan ook een knap staaltje Javascripting dat laat zien waar Javascript nu al toe in staat is.

Probeer de AMY Editor zelf!

Een Javascript library lijkt niet meer compleet zonder, dus ook het populaire jQuery biedt sinds gister een heuze UI library aan. jQuery UI is een losse library die uiteraard gebouwd is op jQuery waarmee verschillende user interface elementen en effecten kunnen worden geimplementeerd.

Als voorbeeld van wat jQuery UI allemaal kan hebben de ontwikkelaars een mooie foto gallerij ontwikkeld die sterk doet denken aan de nieuw .Mac web gallery die Apple afgelopen maand uitbracht.

Voor degenen die zich zorgen maken over of al dit grafisch geweld niet enorm ten koste gaat van de laadtijd van een webpagina: jQuery 1.2 is een milde 14kB (packed & gzipped) en daarbij komt dan maximaal iets meer dan 100kB voor jQuery UI. Voor degenen die zich even verslikten in hun koffie, die 100kB is unpacked, unzipped en dan alleen als je alle componenten en themes van jQuery tegelijk zou gebruiken, welke allemaal gelukkig los te gebruiken zijn.

Meer informatie vind je op de jQuery UI website.

We hebben allerlei "maand van-" series gehad de afgelopen tijd: de maand van Apple bugs, de maand van PHP bugs, enzovoorts. Deze maand lijkt wel een beetje de maand van de browser problemen te zijn. 5 problemen met Firefox en Internet Explorer.

• Internet Explorer voert Javascript in plaatje met foutief mime-type uit
• Internet Explorer voert Javascript in EXIF data van PNG bestand uit
• Firefox laat na om resource:// URL juist te filteren
• Sommige Firefox extensies zijn kwetsbaar voor Man-in-the-Middle aanvallen
• Firefox voert Javascript in Refresh HTTP header uit

(more...)

Je kent GreaseMonkey vast wel, de firefox extensie die het mogelijk maakt om met behulp van Javascript het gedrag of de looks van een specifieke pagina (of alle pagina's) te wijzigen (en misschien wel te verbeteren). Nu had ik greasemonkey tot vandaag nog niet echt geprobeerd aangezien ik niet zo goed wist wat ik er van moest vinden.

Vandaag kwam ik op monlog.nl een posting tegen waarbij 'monchito' om een specifiek greasemonkey script vroeg. Uitgelezen kans om eens e.e.a te proberen en het resultaat is mijn eerst greasemonkey script: seo-info. Een simpel script dat op de huidige pagina:

• De Title tag laat zien
• Kijkt wat voor H1 tags op de pagina beschikbaar zijn
• Kijkt wat de meta tags 'description' en 'keywords' voor waarden hebben
• Telt hoeveel woorden de pagina bevat.

Download seo-info.user.js. Misschien dat iemand anders er ook iets aan heeft ;-). Na installatie kun je de informatie opvragen via Tools > Greasemonkey > User Script Commands > Show SEO information.

Zelf ook iets bouwen met GreaseMonkey? Check Dive Into Greasemonkey.

We hebben al eerder gelinkt naar artikelen die vertelden hoe je een file upload progressbar kon maken, maar deze vertelden dit op een enigzins hoog niveau zonder er bij te vertellen hoe alles nu precies in elkaar stak. Dus vandaag implementeren we op Scriptorama from-(bijna)-scratch een file upload progress bar met PHP, jQuery en een PHP extensie.

Update: Heb je niet de mogelijkheid om een nieuwe PHP module te installeren? Probeer het dan eens een file upload progress bar te maken met Google Gears!

(more...)

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:

• Image Chooser Component
• RSS Feed Viewer 2
• Inline Editing Grid
• Complex Layout
• Customized Grid
• Basic TabPanels

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

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:

• Ajax, API: Ajax
• String extensies, API: String
• Array en Enumerable extensies, API: Array, Enumerable
• DOM-toegang en -manipulatie, API: $$(), Element.Methods

Het is eindelijk zover! Ieder web developer's favoriete javascript library Prototype heeft nu eindelijk haar officiele documentatie en een nieuwe website. Tegerlijkertijd is Prototype 1.5 uitgegeven met enkele bug fixes en nieuwe features, te lezen in de changelog.