Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-)onderwerpen. Ik ben lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij ook volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

31januari

Tool voor .NET-developers: CSS Agent

css_agentEen goede webdesigner zorgt uiteraard voor een correcte scheiding van structuur (HTML), opmaak (CSS) en gedrag (JavaScript). Het opstellen en onderhouden van stylesheets is er in de loop der jaren echter niet eenvoudiger op geworden. Niet alleen is het aantal mogelijke CSS-eigenschappen met de aanstaande komst van CSS3 flink uitgebreid, alle browsers ondersteunen deze eigenschappen ook nog eens met een iets andere notatie. Browsers gebruiken hiervoor specifieke voorvoegsels als –moz-, –webkit- en –o-, voor respectievelijk Mozilla Firefox, Chrome en Opera. De standaardnotaties zoals door W3C zijn voorgesteld, worden door geen enkele browser ondersteund (op een enkele uitzondering na in de betaversie van IE9).

Problemen

Deze wildgroei aan CSS-eigenschappen zorgt voor een aantal problemen:

  • CSS-bestanden worden groot.
  • CSS-bestanden worden onoverzichtelijk en daardoor moeilijker – en dus duurder – om te onderhouden.

Vooral bij mobiele apparaten, die bijna per definitie met een beperkte bandbreedte te maken hebben, is dit van belang. Het scheelt het nogal of je een stylesheet van 120KB of van 40KB moet downloaden over een 3G-verbinding.

Oplossing

Vandaag bespreken we een tool die een oplossing kan bieden voor deze problemen: CSS Agent. CSS Agent is een ASP.NET Handler die stylesheets automatisch bewerkt voordat ze naar de browser worden verzonden. Simpel gezegd doet CSS Agent twee dingen:

  • CSS Agent zorgt voor automatische browserspecfieke voorvoegsels.
  • CSS Agent zorgt voor automatische minification (compressie) van CSS-bestanden.

Als extraatje introduceert CSS Agent bovendien de mogelijkheid CSS constanten te gebruiken. Je definieert dan bijvoorbeeld bovenin je bestand eenmalig een kleur in een $variable en verderop in je stylesheet gebruik je de variabelenaam in plaats van de letterlijke kleurwaarde. Dit kan niet alleen voor kleuren, maar ook voor achtergrondafbeeldingen, margin, padding en veelgebruikte andere CSS-eigenschappen. Jazeker, ook met CSS Agent moet je nog steeds zelf de basiscode schrijven, maar de rest wordt een stuk makkelijker gemaakt.

Je hoeft bijvoorbeeld niet meer precies te weten wat de Firefox-notatie voor afgeronde hoeken is, of welke verschillende notatiewijzen voor linear-gradient gebruikt worden voor Opera, Chrome en IE. CSS Agent ondersteunt 25 CSS3-eigenschappen, variërend van background-size tot transition-timing-function. Je vind ze allemaal op de site van maker Keith Clark.

Stappenplan

Het uitgangspunt is een ASP.NET-website die draait op Internet Information Server 7 of IIS Express. Eerdere versies van IIS of de Web Development Server van Visual Studio (Cassini) worden ook ondersteund, maar blijven in dit artikel buiten beschouwing. Zie eventueel de website van de maker voor meer informatie. Ik ga er van uit dat je de site maakt en onderhoud in Visual Studio 2010 of Visual Studio Express (gratis).

  • Download het zip-bestand vanaf http://www.keithclark.co.uk/labs/cssagent/. Op het moment van schrijven van dit artikel was v1.0.0 (alpha) de meest recente versie.
  • Het zip-bestand bevat twee bestanden: CSSAgent.dll (12 kb) en een changelog.txt-bestand.
  • Kopieer de DLL rechtstreeks naar de /bin-directory van je website. Een andere manier is hem in een map op je vaste schijf te plaatsen en daarna via Add Reference een verwijzing naar de DLL op te nemen. Het voordeel hiervan is dat je in de toekomst maar op één plek de DLL hoeft te kopiëren als er een nieuwe versie verschijnt. Projecten met een referentie worden dan automatisch bijgewerkt (auto-refresh).

css_agent_BinFolder

  • Schrijf een handler in web.config. Deze sluist de .css-bestanden door naar CSS Agent om te bewerken. De handler komt in de sectie <system.webServer> van web.config.

De code voor de handler ziet er als volgt uit:

<system.webServer>
<
validation validateIntegratedModeConfiguration="false"
/>
<handlers>
<add name="CSS Agent" path="*.css" verb="GET" type="KeithClark.Web.CSSAgent" />
</
handlers
>
</
system.webServer
>

Voorbeeld

Deze twee stappen (DLL kopieren en handler toevoegen aan web.config) zijn alles wat je hoeft te doen. Schrijf nu in je CSS-bestand de code die je graag zou willen gebruiken. Stel bijvoorbeeld dat je een koptekst met afgeronde hoeken en een verlooptint als achtergrond wilt gebruiken:

h1 {
   
color: #FFFFFF
;
   
border-radius: 10px
;
   
border: 1px solid #333
;
   
background: linear-gradient(top, black, grey)
;
   
height:40px
;
   
text-align:center
;
   
padding:10px;
}

En de HTML is als volgt:

<h1>Koptekst met CSS3-eigenschappen</h1>

Je ziet dat alleen de standaard W3C-notaties voor border-radius en background worden gebruikt, zonder verdere toevoegingen. Toch ziet het voorbeeld er in Firefox uit zoals verwacht:

cssAgent_heading

Analyse in Firebug laat zien dat de browserspecifieke eigenschappen zijn toegevoegd door CSS Agent:

cssAgent_heading2

Het zal duidelijk zijn dat dit je enorm veel typewerk zal schelen. Je hoeft nu alleen nog maar de ‘echte’ W3C-schrijfwijze te onthouden, en CSS Agent zorgt voor optimalisatie van deze, en nog 23 andere eigenschappen voor de verschillende browsers.

CSS minification

Door aan de verwijzing naar je .css-bestand de optie –min toe te voegen, zorgt CSS Agent voor automatische compressie (minification) van je stylesheet. De spectaculaire ruimtewinst die dit met zich meebrengt laat zich het best illustreren door een stylesheet uit een live site (in mijn voorbeeld: www.yindo.nl) te gebruiken:

In de pagina (of Master Page van de site) staat bijvoorbeeld de volgende code:

<link href="css/yindo.css" type="text/css" rel="stylesheet" />

Maak hiervan

<link href="css/yindo-min.css" type="text/css" rel="stylesheet" />

Analyse

Als je de pagina laadt, zul je geen verschil merken in vormgeving. Maar als je de resultaten op de achtergrond analyseert, zie je dat er veel veranderd is. Met de HTTP Debugging tool Fiddler is dit goed te zien.

cssAgent_fiddler1

Als de ‘gewone’ stylesheet wordt geladen, is de omvang ruim 15,3 KB (zie voorgaande afbeelding, klik eventueel voor een vergroting). De inhoud van de stylesheet is plain text en ziet er op deze manier uit:

cssAgent_fiddler2

Als in de Master Page de verwijzing wordt aangepast in yindo-min.css, wordt het beeld heel anders:

cssAgent_fiddler3

Het stijlenbestand is nu nog maar 2,9 KB in omvang. Een besparing van meer dan 75%! De code is sterk gecomprimeerd, zoals de tekstweergave laat zien.

cssAgent_fiddler4

Voor het menselijk oog is dit niet meer leesbaar, maar computers weten hier prima raad mee. Het bestand  yindo-min.css wordt door CSS Agent gecached op de server en alleen opnieuw gegenereerd als het originele .css bronbestand wordt gewijzigd. Je hoeft er dus niet bang voor te zijn dat de stylesheet elke keer wordt gecomprimeerd en zo voor extra belasting op de server zorgt. De foutmelding die Visual Studio toont (‘kan yindo-min.css niet vinden’), mag je rustig negeren.

Wat mij betreft is de keuze snel gemaakt. Vanaf dit moment gebruik ik CSS Agent voor elk nieuw project!

Aandachtspunten

Er zijn enkele aandachtspunten bij het gebruik van CSS Agent

  • CSS Agent werkt niet met inline CSS. Een <style>…</style> blok in een pagina wordt dus niet geparsed. Je zult moeten werken met gekoppelde CSS-bestanden, via <link href=”…” />. Alleen dan wordt het stylesheet door de handler goed opgepikt.
  • Het is een typische .NET-tool en bedoeld voor ASP.NET/IIS-websites. CSS Agent is daarmee niet geschikt voor PHP/MySQL/Apache-websites.
  • Het werken met Cassini (de ingebouwde Development Web Server van Visual Studio) kan problemen geven. Ik – en enkele andere developers - kregen hem in elk geval niet aan de praat, ondanks aanwijzingen van Keith Clark (zelf had hij er geen problemen mee, en kon de bug niet reproduceren). Maar het is sowieso ondertussen een goed idee om over te stappen op het nieuwere IIS Express.
  • CSS Agent is (nog?) niet beschikbaar via de NuGet Gallery. Je zult dus zelf het bestand moeten downloaden en installeren/referencen. Clark gaf aan dat hij de mogelijkheden hiervoor in de toekomst zou bestuderen, maar dat het voorlopig geen hoge prioriteit had.

Conclusie

CSS Agent is absoluut een tool die de moeite waard is. Het maakt je leven als developer een stuk eenvoudiger, in elk geval totdat de browsers overeenstemming hebben bereikt over de voorvoegsels. Daarna blijft CSS Agent nog nuttig om stylesheets automatisch te comprimeren en het werken met CSS contstants mogelijk te maken (niet besproken in dit artikel).

Tip: als je deze tool ook gaat gebruiken, overweeg dan een donatie aan de maker: Keith Clark vraagt een bescheiden bijdrage van GBP 5,- om de verdere ontwikkeling van deze tool mogelijk te maken.

Peter Kassenaar
-- 31 januari 2011

24januari

WebCamps 2011 – deelnemerservaring

webcampbadge100Om de ontwikkelingen op mijn vakgebied bij te houden, moet ik uiteraard regelmatig bijscholen. Dit doe ik onder meer door doorlopend door Twitter en LinkedIn-groepen bij te houden, (ontwikkel-)blogs te lezen en natuurlijk de maandelijkse tijdschriften te lezen. Maar ook door een à twee keer per jaar een conferentie te bezoeken. Vorig jaar was wat dat betreft een hoogtepunt, toen ik in april 2010 bij de Launch-conferentie van Silverlight 4 en Visual Studio 2010 in Las Vegas aanwezig was (zie mijn aparte blog hierover).

Maar dat is al weer bijna een jaar geleden. En in een jaar verandert er veel op internetgebied. Afgelopen week bezocht ik daarom samen met collega-auteur en –programmeur Michiel de Rond het puur op ontwikkelaars gerichte Microsoft WebCamp in Utrecht.

WebCamps

De Microsoft WebCamps zijn tweedaagse, gratis conferenties waarin in hoog tempo de laatste ontwikkelingen worden besproken. Uiteraard is de inhoud voornamelijk gericht op Microsoft-technologieen. Maar er is ook steeds meer aandacht voor de open standaarden, zoals HTML5, jQuery en meer. Sterker nog, zoals hoofdspreker Scott Hanselman het verwoorde, ‘ ja, we praten deze dagen bijna alleen maar over Microsoft-technologie. Maar tegelijkertijd is ruim 90% open source. Van alles wat we deze dagen bespreken, van jQuery tot MVC3, tot NuGet, kun je de broncode downloaden, inzien, verbeteren teruggeven aan de community. Micrsoft nowadays is not nearly as evil as you guys think we are. Or maybe even, as we used to be’. Dat was nog eens een hand in eigen boezem om de dagen mee te beginnen. En het schiep hooggespannen verwachtingen (ter vergelijk: lees nog eens mijn verslag van de Apple iPhone Tech Talk uit november 2008. Naar aanleiding van dit blog werd mij door Apple met juridische stappen gedreigd en ik heb niet de indruk dat dit beleid sindsdien is aangepast).

Alle presentaties, codevoorbeelden, labs en begeleidende papers van deze twee dagen is voor iedereen downloaden vanaf www.webcamps.ms/.

IMG_1560
Drew Robbins (li.) en Scott Hanselman voor de start van de eerste dag in De Fabrique, Utrecht.

Scott Hanselman

Met Scott Hanselman heeft Microsoft er voor gekozen een van zijn top-sprekers af te vaardigen. Een ijzersterke zet, wat mij betreft. Na vice president Scott Guthrie (ja, bij Microsoft is het kennelijk een pre als je Scott heet, om hogerop te komen in de hierarchie :) is Hanselman waarschijnlijk degene die het meest weet van alle technologieën die door Microsoft worden bedacht, uitgevoerd en in hoog tempo op de wereld worden losgelaten. En dat zijn er nogal wat. Alleen al het lijstje met nieuwe onderdelen en componenten op de eerste dag werd behandeld, zag er als volgt uit:

  • WebMatrix – een nieuwe ontwikkeltool met een lage instapdrempel. Geschikt voor iedereen die ‘ echt’ wil programmeren, maar niet direct bij het topproduct Visual Studio wil instappen.
  • MVC3 – de volgende versie van het steeds meer aan belang winnende Model-View-Controller framework. De basics werden besproken, daarna ook de meer complexe nieuwe onderdelen als dependency injection, Custom validation en Custom Action filters.
  • NuGet – een nieuwe manier om snel open source libraries uit de community(inclusief dependencies) aan je project toe te voegen.
  • HTML Helpers – voor MVC-projecten.
  • Razor – een nieuwe View Engine met eenvoudig(er) syntaxis voor MVC-projecten.
  • Entity Framework 4 – een nieuwe manier om data te modellen in classes (een ORM-tool), die in veel opzichten beschouwd kan worden als de opvolger van DBML/Linq-to-SQL. Drie benaderingen werden besproken: Model First, Code First en Database First
  • Unobtrusive AJAX en client validation  – voor jQuery en MVC-projecten.

Hanselman werd vergezeld door Technical Evangelist Drew Robbins, specialist op het gebied van PHP, Ruby, IIS en ASP.NET. Met zijn tweeen voerden ze een perfecte show op, waarbij Robbins - geheel volgens afspraak- met verve de rol van second banana (aangever in Amerikaanse talkshows) speelde.

IMG_1569
Robbins en Hanselman bespreken iPhone 4 vs. Windows Phone 7-opties tijdens de lunch

Hoewel, het woord ‘show’ is hierbij misschien een beetje misplaatst. Jazeker, er werd –zeker in het eerste uur- veel en uitbundig gelachen, maar ondertussen loog het tempo van de demo’s en de slides er niet om. In hoog tempo passeerden tal van onderwerpen de revue. Hanselman is een van die weinige geeks die tegelijk ook een perfect, onderhoudend, enthousiasmerend en toch kraakhelder betoog kan neerzetten en rap van de tongriem gesneden is (over een van de slides vol overbekende brochureplaatjes met tal van lachende mensen rond een pc  ‘I don’t know what this is, probably marketing bullshit. Just look at those clip art girls. Next.’).

Tijdens de presentaties kon je via Twitter vragen stellen, die dan direct beantwoord werden. Or you can just raise your hands, I guess. It’s a bit analogue, but I suppose it will do, aldus Hanselman, met een vette grijns.

Dag 2 – Hands on labs

Dag 2 van de webcamps was geheel ingeruimd voor hands on labs. Voor alle behandelde onderwerpen (en meer) waren voorbeeldwebsites en stap-voor-stap oefeningen aanwezig die je zelfstandig kon uitvoeren op je eigen laptop. Daarvoor was een zaal ingericht met stroompunten en draadloos internet. Een apart gezicht. Het leek inderdaad wel een LAN Party, maar dan voor programmeurs, zoals een van de aanwezigen twitterde. Er liepen veel medewerkers van Microsoft Nederland rond, en uiteraard waren ook Hanselman en Robbins weer van de partij. Zij hielpen je als je vragen had en beantwoorden ook vragen over projecten waar je zelf aan werkte op dat moment. Een hele dag helpdesk op het hoogste niveau.

IMG_1572
Hands on Labs op sfeervolle locatie – dag 2 – koffie & cola onder handbereik

IMG_1563

Ikzelf heb me deze dag met name gericht op MVC3 – het was mijn eerste kennismaking met dit type programmeermodel en het vergt een heel andere manier van denken over het ophalen en presenteren van data. Modellen maken, deze met een Controller bewerken en het resultaat in een View tonen in je website. Een hele omschakeling als je –zoals ik- al bijna 10 jaar gewend bent te werken met ASP.NET WebForms (naast uiteraard kale HTML, jQuery en CSS). Ook heb ik meer geleerd over Entity Framework en NuGet. Items die me in mijn dagelijks werk voor Yindo en andere projecten goed van pas zullen komen.

Links

Tot slot een paar handige links. Zoals was veel inhoud als open source beschikbaar. Dat gold ook voor de presentaties, voorbeeldcode, labs, tools en andere assets die deze dagen werden gebruikt. Hier zijn enkele adressen.

Peter Kassenaar
-- 22 januari 2011

P.S: waarom over deze bijeenkomst een blogartikel geschreven? Wel, deels opnieuw vanwege een wijsheid van Hanselman: ‘If you’ve got something to share or to remember, don’t e-mail it, don’t stuff it in a folder on your harddrive, but blog it. It might be to interest of others, and best of all, you can always Google yourself.

Waarvan akte.

webcampbadge400