[16:19] Tijdens de late jaren ’90 was front-end development niet nieuw. “Business was booming” en iedereen werd pro & developer. Er waren geen opleidingen, tutorials of blogs. Crossbrowser hield in dat je programmeerde voor IE4 & NS4. Er werd weinig CSS gebruikt. Alles werd gedaan met TABLE’s en er werd al helemaal geen javascript gebruikt (buiten imagehovers dan). In de jaren 2002-2003 kreeg men meer inzicht in W3C. Tables werden al minder gebruikt en CSS werd steeds belangrijker. Crossbrowser programmeren werd al moeilijker door IE5.5, IE6 & het begin van Mozilla.

[16:25] Tegenwoordig stijgt de technische ondersteuning. CSS is standaard geworden, Javascript is het nieuwe CSS (steeds populairder), browser bieden meer technische ondersteuning. Crossbrowser betekend programmeren voor IE6, IE7, Firefox, Safari, Opera, etc. Ondanks dat we voor meer browsers aan het programmeren zijn is de tijd die het kost om code crossbrowser te maken minder dan 8 jaar geleden.

[16:28] Front-end developers worden langzamerhand front-end programmeurs. Dit zal uiteindelijk mocht hier niets aan gebeuren leiden tot een daling van de kwaliteit. Een belangrijk ding om in de gaten te houden is het opsplitsen van de content (MVC).

[16:31] Wat tevens belangrijk is, is maintanability. Gebruik vaste patronen en leg deze vast.

[16:34] Veiligheid is iets wat steeds meer zal gaan spelen. Cross-site scripting, Cross-site scripting attacks. Een voorbeeld: de myspace javscript worm. Binnen 20 uur beginnende met 1 infectie had de worm zich aangemeld bij 1.000.000 gebruikers van MySpace (1/35 van het totaal aantal gebruikers).

[16:40] Einde van de presentatie.

[16:45] John Resig houd een presentatie over jQuery

[16:46] 3 lagen. Widgets, libraries, javascript.

[16:47] Voorbeelden van libraries zijn: prototype, jQuery, Yahoo UI & Dojo. Dit zijn op het moment de meest populaire libraries.

[16:49] Prototype was de eerste library in 2005. Hun focus lag op het verbeteren van de usability van JavaScript. De kwaliteit van de code is fantasties. Animaties en dergelijke worden afgehandeld door een aparte library: scriptaculous

[16:50] jQuery legt haar focus op de interactie tussen JavaScript en HTML.

[16:51] YUI – 2006. Dit is een library die intern gefinancieerd is. Zij leggen hun focus op het standaardiseren van JavaScript

[16:52] DoJo – 2005. Zij hebben een sterke aanhang (IBM, AOL). Hun focus ligt op het bouwen van complete grote web applicaties. Verder hebben ze een enorme hoeveelheid functies.

[16:53] Wat heeft een library nodig heeft om zich een library te noemen.

- DOM
- Events
- AJAX
- Animations

Daarop bouwend moet het “User Interface Widgets” mogelijk maken.

[16:55] Tegenwoordig werken libraries bijna allemaal het zelfde: $();, $$();. Verder bieden alle libraries de ondersteuning voor events: observe();, click();, etc. AJAX en animaties.

[16:59] Widgets zijn componenten die je keer op keer opnieuw moet maken. Drag & Drop, Tree, Grid, etc. Al deze components worden door alle libraries ondersteund. Prototype heeft Scriptaculous, jQuery heeft jQuery UI en Dojo heeft Dijit. Yahoo heeft het ingebouwd.

[17:02] Daarnaast zijn er nog een heleboel components die door de meeste libraries ondersteund worden.

[17:05] De vormgeving van deze components is standaard geleverd door de verschillende libraries. jQuery en Yahoo UI bieden hierin een uitgebreide documentatie.

[17:06] De architectuur van de libraries is op de delen in tweeën. Prototype en jQuery zijn bottom-up, terwijl Dojo en Yahoo UI top-down zijn. De laatste twee zijn begonnen op het gebied van widgets, maar zijn langzaam uitgegroeid.

[17:07] Prototype & jQuery zijn MIT licensed, Yahoo UI & Dojo zijn BSD licensed.

[17:09] Alle libraries hebben een goede crossbrowser support.

[17:10] Het belangrijkste is misschien wel de bestands grootte. jQuery is hier de grote winnaar terwijl Yahoo UI de grote verliezer is. Desondanks is het verschil tussen de grootste en de kleinste slechts 20Kb.

[17:12] Alle werken ze met (part-time) betaald medewerkers die werken aan de verschillende libraries.

[17:14] De libraries van vandaag de dag, bepalen de standaarden voor javascript voor de browsers. Browsers passen zich langzaam maar zeker aan op het gebied van deze libraries.

[17:17] Tutorials zijn belangrijk voor een library. jQuery, Yahoo UI en Dojo bieden een makkelijke functie waarbij je video presentaties kunt bekijken van de functies die je wilt gebruiken.

[17:19] Alle libraries zijn goed aan elkaar gewaagd. Het is dan ook kijken welke je het fijnst vind om mee te werken. Aangezien ze allen ongeveer dezelfde functies ondersteunen.

[17:30] Einde van Kings of Code. Het was een lange dag, maar zeker een leerzame. Volgend jaar zijn wij er zeker weer bij.

Op naar phpconference.. Tot dan.

[14:16]in de laatste 2 jaar zijn webpagina’s gegroeid van 97k naar 312k. Dit is een grote groei waar oplossingen voor gevonden moeten worden.

[14:18] HTML is slechts 5% van de content van je website. De andere 95% heeft te maken met front-end objecten: afbeeldinge, scripts, css, etc. Op dit moment kijken veel developers nog naar het topje van de ijsberg. Het belangrijkste is echter wat onder het water zit.

[14:21] Om dit op te lossen kun je gebruik maken van cache of gebruik maken van meerdere domeinen bijv: images.freshheads.com, css.freshheads.com, etc. Dit is een oplossing die werkt voor kleine websites. Na een bepaald punt wordt de laad tijd echter langer wanneer er meerdere domeinen gebruiker worden.

[14:27] Make fewer HTTP request. Maak gebruik van Css sprites, combined / concatenated JS and CSS files, image maps en inline (data) images. Hierdoor kun je de laad tijd van je pagina enorm verkleinen. Denk hierbij aan al je menu afbeeldingen samengevoegd in één afbeelding, of het samenvoegen van css bestanden of javascript bestanden of Gzippen van je bestanden.

[14:30] Ga goed om met expires headers. Bijvoorbeed: Afbeeldingen, stijlesheets en scripts. Iets wat er belangrijk is, is de positie en de manier waarop css wordt ingeladen. Bovenaan de pagina is de beste plaats voor je css, aangezien het bestand dan geladen wordt voordat de afbeeldingen geladen worden, waardoor de layout van de pagina al vast gelegd is. Iets om op te letten is om geen @import te gebruiken. Hierdoor wordt namelijk het css bestand toch aan het einde van de pagina geladen.

[14:35] Javascript is echter een ander verhaal. Doormiddel van het plaatsen van je javascript bestanden aan het einde van je pagina laat je pagina sneller voor de bezoeker. De onderliggende code van javscript komt daarna.

[14:36] Reduce DNS-lookups. max. 2-4.

[14:40] Minify your Javscript. YUI Compressor is hoog aangeschreven. Als je op Google zoekt op CompressorRater kom je op een site waar je verschillende compressie parsers naast elkaar kunt leggen.

[14:42] Gebruik GET requests voor AJAX. Een GET request is één stap, waar een POST gequest 2 stappen moet doorlopen.

[14:43] Stuur het belangrijkste eerst YUI GET maakt on-the-fly JS & CSS makkelijk. Hierdoor kun je na het laden van de pagina, minder belangrijke dingen gaan laden.

[14:44] Google maakt hier ook gebruik van. Na het laden van de homepage (tekst en één afbeelding), laden ze op de achtergrond de code voor de vervolgpagina. Hierdoor kan de volgende pagina sneller geladen worden, aangezien deze op dat moment al in de cache staat.

[14:45] Minimize iFrames. Ik ben zelf al geen fan van iFrames en vind dit punt zeker de moeite waard. Mocht het niet nodig zijn, gebruik ze dan ook niet. Iedere iFrame vraagt namelijk weer een aantal extra requests op.

[14:47] Wacht niet altijd op het onLoad event. Maak bijvoorbeeld ook gebruik van onContentReady (als de content geladen is) of onDomReady (als de dom objecten geladen zijn, HTML)

[14:48] Een horizontale afbeelding voor sprites (CSS + images) is sneller dan een verticale afbeelding. Nate weet zelf niet waarom, maar het zij zo. Zelf kleuren die op elkaar lijken bij elkaar. Hierdoor wordt de grootte van het bestand na compressie een stuk kleiner.

[14:50] Biedt altijd een favicon.ico aan. Het niet aanbieden van een favicon lijdt toch een 404 voor dat bestand. Zorg ervoor dat je favicon.ico bestand ook onder de 1K blijft.

[14:51] Na deze wervelwind van tips is het nu tijd voor wat rust in de presentatie. Het volgende punt zijn tools die je kunt gebruiken.

- IBM Page Detailer
- LiveHTTPHeaders
- Firebug
- YSlow (extensie voor FireBug)

[15:00] Voor meer informatie naar aanleiding van zijn presentatie kun je kijken op zijn blog. Nu tijd voor de open-source projecten.

[15:05] Javeline platform. Creëer een user interface met javascript.

[15:10] Roomware project.
- A framework for interactive spaces.
- Bluetooth, SMS, RFID, Mobile client, etc. Dit alles gaat door het Roomware project en wordt uiteindelijk geparsed naar een XML formaat.
- Voor meer informatie kun je kijken naar de presentatie van het roomware project op slideshare.net.

[15:15] GIT Fast Version Control System

[15:20] oAuth
Simon de Haan geeft een presentatie over oAuth. Er zijn bepaalde dingen die je online persoonlijk wilt houden. Grote partijen als facebook, hyves, linkedin, myspace, etc. vragen je je e-mail gegevens in te vullen om aan de hand daarvan je contact personen toe te voegen. Maar is dit wel verstandig. oAuth biedt de mogelijkheid om je gegevens voor jezelf te houden. Doormiddel van het inloggen in de omgeving van je account kun je toegang verschaffen aan website die hier naar vragen zonder je wachtwoord gegevens door te sturen.

[15:30] Rails & Phusion Passengers. Easy and robust deployment of Ruby on Rails applications on Apache Webservers.

[15:45] pauze

[11:55] Onderwerp is RDFa. Doormiddel van attributes die toegevoegd kunnen aan objecten in je kan het web een stuk rijker gemaakt worden. Geo-tags aan afbeeldingen, het verbeteren van zoek resultaten, etc.

Voorbeeld: een zoek resultaat voor ‘chemist’. Doormiddel van DRFa in content kunnen door zoekmachines gemakkelijk blog artikelen, papers, afbeeldingen, etc. doorzocht worden en ge-indexeerd.

[12:13] De structuur van je website kan doormiddel van RDFa een stuk duidelijk worden om doorheen te lopen.

<ul role="navigation">
<li>Home</li>
<li>Customers</li>
</ul>

Doormiddel van het attribuut “role” kunnen we duidelijk maken dat dit een belangrijk element is voor zoekmachines.

[12:23] Doormiddel van RDFa kunnen meerdere stukken code direct ge-update worden als die slechts op één plaats verandert wordt.

Silverlight voorbeeld:
3 klokken die doormiddel van javascript ge-update worden kunnen in verschillende omgevingen gebruikt worden (mobiel, internet, desktop, etc.). Doormiddel van een laag hier boven op (dit keer silverlight) worden de tijden getoond in een flash achtige klok.

[12:35] Presentatie over CakePHP door Nate Abele begint met een verhaal over het wat en waarom van een PHP framework in het algemeen. Dit lijkt voor de meesten in de zaal niets nieuws.

Er volgt een vergelijking over hoe gestructureerd de verschillende PHP frameworks zijn. Opvallend genoeg komt symfony hier niet in voor. Op de eerste plaats noemt hij CakePHP met aan het andere eind Zend Framework. Dit lijkt me logisch, omdat ZF ‘component-based’ is.

[12:45] Ruby on Rails wordt min of meer afgekraakt. Sommigen zijn hier zichtbaar niet blij mee. Onder andere de scalability, waar wij eerder aandacht aan besteedden, wordt genoemd. PHP wordt beschouwd als de nr. 1 web language.

[12:50] Waarom CakePHP en niet een ander PHP framework?? Zend Framework kan gebruikt worden als aanvulling op CakePHP, maar zou nog geen volwaardig framework zijn. PHP on Trax wordt genoemd als slap aftreksel van Ruby on Rails. Waarom het beter zou zijn als symfony ontgaat me een beetje (vergelijking met Java). Het gebruik van PHP4 wordt door de presentator beschouwd als een voordeel, omdat ze ervoor zouden zorgen dat PHP4 gebruikers met CakePHP de voordelen van Objectgeorienteerd programmeren in PHP laten gebruiken? I disagree with this…

[13:00] Demonstratie van gebruik van REST in CakePHP. Dit ziet er goed uit, maar betekent uiteraard niet dat dit met andere frameworks (1 | 2) niet kan.

[13:10] De release van 1.2 zit er aan te komen. HIj geeft tevens aan dat op de lange termijn de 2.0 release volledig in PHP5 zal gaan zijn. Goed nieuws dus! Ze zijn ook bezig met een Plugins server, wat erg goed klinkt.

[13:15] Einde, tijd voor lunch!!

[09:31] Eerste spreker is Peter-Paul Koch a.k.a. PPK van Quirksmode.org. Na zijn lezing bij PFCongrez ben ik benieuwd waar hij dit keer weer mee komt. Na eerst de W3C event specificatie critisch aandacht te hebben gegeven gaat hij snel over op de Mouseover en zijn vriendjes. Aandachtig wordt het probleem met dropdown menu’s, en met name de mouseover & mouseout events die hierbij betrokken zijn, onder de loep genoemen.

[09:45] “Microsoft 99% waardeloos, 1% briljant. Echter is dat briljante dan ook meteen alleen voor microsoft en niet voor de concurrent.”

[10:11] Veel van zijn punten uit de presentatie van het PFCongrez komen terug, hij gaat er dit keer echter dieper op in. Het blijft boeiend om die man aan het woord te hebben. Zijn presentaties zijn goed, duidelijk en recht voor zijn raap.

[10:13] Een hoop van de problemen met apparaat onafhankelijkheid worden aan de kaart gebracht. Internet explorer & Safari (let wel 3.1) komen hierbij uit beste uit de test. Voornamelijk op het gebied van ‘keydown’ en ‘keypress’ events.

[10:17] Leuk om te zien hoe hij alle browsers naast het W3C model legt. Kennelijk luisteren ze geen één van alle naar elkaar. En dan vinden ze het raar dat programmeurs het moeilijk vinden om een website te programmeren voor alle browsers.

[10:20] Tijd voor vragen!

[10:21] De browser van PPK is op dit moment Firefox. Op DOM niveau zou zijn lijstje van boven naar beneden Firefox, Safari, Opera, IE zijn. Als je puur gaat kijken naar het handlen van Javascript dan kan IE wel een stapje omhoog.

[10:23] Hij gebruikt geen libraries maar schrijft zijn eigen liever, puur uit het oogpunt van gewoonte.

[10:24] Aflsuiting van de eerste presentatie (APPLAUS), opnieuw Robert Gaal aan het woord, hij kodigt Folke Lemaitre van Netlog.com aan.

[10:25] Folke aan het woord

[10:28] Wat is Netlog. Netlog is een sociaal netwerk waar je je eigen profiel aan kunt maken, direct kunt communiceren met vrienden en media kunt bekijken als foto’s, video’s, muziek, games, etc. Alles draait om de gebruiker zelf. Activiteiten van vrienden worden direct gecommuniceerd binnen Netlog. Zo ben je op de hoogte als een vriend een nieuwe foto upload of commentaar geeft op foto van een ander.

[10:31] Netlog ziet er overzichtelijker uit dan Hyves. Nu is dat natuurlijk niet het moeilijkste, maar het is wel een partij die de uitdaging aan gaat.

[10:35] statistieken van Netlog:
- 35.000.000 unieke bezoekers
- 4.000.000.000 pageviews/maand
- 19 talen
- 20 landen (Voornamelijk europa)
- top-100 Alexa ranking in België
- Website of the year 2007 awards in Spanje, Frankrijk, Engeland, Duitsland en Italië

[10:38] Hoe ga je om met die 19 talen.
- Templates
- Parsing en koppelen van Identifiers
- Translators
- Compiler
- Staging
- Live

Een erg indrukkendwekkende presentatie van hun template engine.

[11:00] Een lang verhaal, maar het is duidelijk dat Netlog een gedegen concurrent kan worden van Hyves in Nederland. Het is een professioneel opgezet scociaal netwerk, wat er ook nog eens een stuk beter uit ziet als Hyves.nl. Inmiddels ben ik zelf ook te volgend op netlog. Over een paar dagen hier waarschijnlijk meer over als ik het eens aandachtig onder de loep heb genomen.

[11:15] tijd voor een korte pauze

[12:30] De slides van Peter-Paul Koch staan inmiddels online

De conferentie is via Mobypicture op Dutchcowboys te volgen, inclusief onze vroege treinreis. Uiteraard zal ik hier op het spiksplinternieuwe Freshheads blog na afloop weer een uitgebreid verslag geven van ons (hopelijk leerzaam) ‘dagje uit’. Verwacht dit echter niet morgenavond, want na afloop van Kings of Code is er een borrel in het altijd hippe Club 11