Idag satt jag i kanske tre timmar med en ruskigt irriterande IE-visningsbugg som jag trodde skulle driva mig till vansinne. MEN jag hittade till slut en fix, eller workaround i alla fall.

Felscenario: Om man har en UpdatePanel utan innehåll (eller med osynligt innehåll) så kommer den, när den uppdateras, att renderas som en div-tagg, förutsatt att dess RenderMode är satt till Block, vilket är default. Taggen kommer, vare sig man vill eller ej, att innehålla en massa whitespace – som i sin tur triggar en visningsbugg i Internet Explorer 6. En vettig webbläsare förstår att en div som bara innehåller whitespace inte har något innehåll och därför inte ska ta upp plats på sidan. Så är inte fallet för IE6 – där kommer nämligen div:en att få samma höjd som den aktuella fontstorleken.

Sjukt frustrerande! Om det hade varit en vanlig statisk div så hade man kunnat komma runt det hela genom att manuellt ta bort allt whitespace mellan taggarna, men det kan man inte på något enkelt sätt med en standardkontroll, om man inte vill skriva om hela renderingen för kontrollen. Det vill inte jag, i alla fall.

Fix: Efter mycket lidande kom jag på en lösning. Lägg helt enkelt till ett absolutpositionerat element inuti UpdatePanel:en, till exempel s¥här:

<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<div style="position: absolute; width: 0; height: 0;"></div>
</ContentTemplate>
</asp:UpdatePanel>

Problemet löst! Visst, jag tycker inte om att lägga in markup som inte gör något, men om det krävs för att lösa en bugg som annars får sidan att se helt muppig ut s¥ implementerar jag den utan att blinka.

När jag läste mina nyhetsflöden denna morgon hittade jag denna mycket läsvärda artikel som handlar om saker att tänka på när man designar en portfolio på webben. Där finns exempel på såväl dåliga som bra förebilder och jag måste säga att jag blev ruskigt sugen på att svänga ihop en ny portfolio åt mig själv – min nuvarande är ganska inaktuell och har helt fel fokus, plus att jag förstås skulle göra den annorlunda om jag gjorde den idag, rent formmässigt om inte annat.

Synd att det tar tid att göra sådana här grejer bara…

Det finns ruskigt mycket man kan göra för att förbättra prestanda och skalbarhet i en webbsajt/webbapplikation. De senaste dagarna har jag på jobbet suttit och tittat på hur vi kan få front-end-delen av en av våra webbapplikationer att ”gå snabbare” – med avseende på ”upplevd prestanda”, ungefär.

Idag hittade jag en utmärkt ”checklista” som utvecklare på Yahoo har tagit fram just i syfte att optimera front-end hos webbsajter. De kallar den ”Best Practices for Speeding Up Your Web Site” och jag rekommenderar den som läsning för alla som sysslar med webbutveckling på någon som helst seriös nivå.

Sedan länge använder jag Firefox-tillägget Firebug som ett verktyg när jag kodar webb. Lämpligt nog finns det ett plugin till Firebug som utvärderar godtycklig webbsida mot just de 14 riktlinjer som tas upp i nämnd artikel och föreslår vad man kan göra för att förbättra sin prestanda. Grymt bra! Pluginet heter YSlow.

De tips som jag tog till mig och implementerade i vår applikation var framför allt:

• Aktivera HTTP Compression i IIS (på serversidan alltså). Detta innebär att när en klient requestar en fil kommer servern komprimera den med GZIP eller deflate före överföringen om klienten stöder det. Detta minskar förstås storleken på det som verkligen skickas med väldigt mycket och kräver bara en gnutta extra CPU-tid på server (och klient). Instruktioner för hur det går till finns exempelvis här.
• Förbättra cachningsmöjligheterna genom att sätta en Expires-tidpunkt som ligger långt fram i tiden (typ ett år framåt) för statiskt innehåll (bilder, Javascript, CSS-filer).
• Minskat antalet HTTP-requests genom att lägga ihop bakgrundsbilder från knappar och liknande till en och samma bildfil och sedan använda CSS-propertyn background-position för att välja ut rätt område bilden. Principen är ingen nyhet, men den är praktisk. Den beskrivs i detta blogginlägg.

Resultatet? Storleken för överförda filer minskade typiskt med 40-45% då besökaren har tom cache och med 65-70% då cachen innehåller så många av sidans komponenter som möjligt. Rätt grymma grejer om man vill minska trafiken och öka den upplevda hastigheten faktiskt.

Jag jobbar mycket med att-göra-listor, både i mitt arbete och privat. På jobbet handlar det om att jag bryter ner de uppgifter jag har ansvar för i mindre delar, rangordnar dem och betar av dem en efter en (viktigast först). Hemma brukar jag skriva ner allt möjligt som jag vill hinna få gjort under en dag eller helg och sedan kryssa för aktiviteterna allt eftersom jag gör dem – det kan handla om allt från att fixa en matlåda till att skriva ett blogginlägg eller dammsuga trappan.

Personligen gillar jag verkligen denna typ av tidshantering – jag ser till att inte glömma något viktigt och får oftast det viktigaste gjort först. Och det kanske bästa av allt är att jag i slutet av dagen eller veckan har en fin lista över alla saker jag fått gjorda, vilket känns bra att titta på. På jobbet hjälper ”färdig-listan” mig att fylla i veckans statusrapport.

Jag brukar för det mesta använda Outlooks ”Tasks”-funktion när jag är på jobbet, och den är helt okej om än inte så kraftfull. Hemma kör jag med penna och papper, vilket funkar mycket bra för det mesta. Men ibland när jag sitter på jobbet kommer jag på saker jag ska göra hemma, och då är det mer oklart hur jag ska komma ihåg det. Ofta skriver jag en anteckning på mobiltelefonen eller använder en mycket simpel att-göra-lista på min iGoogle-sida, men det känns som att det finns ett glapp här. Och detta är förstås bakgrunden till ett hobbyprojekt jag just kom på: Jag vill göra världens bästa webbaserade att-göra-lista. Hur svårt kan det vara?

Några krav på den första versionen:

• Applikationen ska vara överskådlig.
• Det ska vara möjligt att se både kommande och genomförda aktiviteter.
• Det ska gå att tilldela en prioritet till varje uppgift.
• Alla listor ska vara utskriftsvänliga.
• Applikationen ska vara enkel att komma igång med.
• Uppgifter ska gå att bryta ned i mindre deluppgifter rekursivt.
• Man ska kunna skapa flera oberoende listor och ge varje lista en titel.

Synpunkter och förslag?

Wohoo! För ett par timmar sedan klev jag glad ut på trottoaren efter att ha klarat Microsoftprovet 70-528, som tillsammans med det tidigare genomförda 70-536 ger mig en certifiering av klassen ”Technology Specialist” inom webbaserad klientutveckling i .NET Framework 2.0 (fullständigt, fett namn: Microsoft Certified Technology Specialist: .NET Framework 2.0 Web Applications). Det är allt en början, va?

Hela bakgrunden till det här är, som jag säkert tidigare nämnt, att min arbetsgivare (Avanade) kräver att alla nyanställda under en viss nivå på företaget ska ta certifieringen MCPD: Enterprise Applications Developer inom två år från anställning. De prov jag tagit är två av totalt fem som jag måste beta av. Och för att plåga mig själv lite extra har jag satt upp ett personligt (och dessvärre dokumenterat) mål att klara av hela karusellen innan sommaren i år.

Kul vår, Anders!