Min idé var att göra ett lajvflöde av Flickr-bilder och Twitter-postningar baserat på ett givet sökord eller tag.

JSONP

Både Flickr och Twitter har rika APIer i JSON-format som gör det lätt att åstadkomma det jag vill. Då dessa av naturliga skäl inte ligger på samma domän som min labb, kan jag inte göra ett vanligt XHR-anrop eftersom webbläsaren av säkerhetsskäl kastar ett same domain-policy-fel. Räddningen stavas JSONP, som helt enkelt wrappar hela JSON-svaret i ett metodanrop. Detta går vi inte in närmare på denna gång, utan konstaterar istället glatt att jQuery har stöd för detta och löser detta under ytan.

jQuerys effektköer

Planen är alltså att långsamt smyga in en bild, visa den ett tag, sedan dimma ner den och till sist ta bort den helt.

Sedan jQuery 1.4 finns det en toppenmetod för att hantera pauser i den allmänna effektkön, fx. Metoden heter delay() och låter mig åstadkomma önskat beteende på ett oerhört kompakt och tydligt vis.

$(img).fadeIn('slow').
    delay(1000).
    fadeTo('slow', 0.3).
    delay(2000).
    fadeOut('fast', function() { $(this).remove(); });

Det är ju nästan som att prata svenska (engelska)! Vi repeterar:

• Smyg långsamt in bilden
• Vänta en sekund
• Dimma ner den litet
• Vänta två sekunder
• Smyg snabbt bort bilden och ta bort den

Koden

Vill du se hur det ser ut, kan du titta här eller ladda ner hela koden och labba vidare själv.

Nedan följer en rad tips, som alla syftar till att hjälpa dig bli en mer produktiv programmerare, oavsett om du använder emacs, notepad eller Eclipse.

Urklippshanteraren (eller clipboard)

Varför, varför finns det bara plats för ett urklipp i taget i dagens moderna operativsystem (*nix-dialekter undantagna)?

Det är ju helt tokigt att inte kunna gå tillbaka och ta fram något man kopierade eller klippte ut för bara några minuter sedan, bara för att man råkat svara på ett mail, mitt i ett enhetstest eller liknande. Lösningen finns i form av några hjälpprogram:

• Jumpcut (Mac)
• clcl (Windows)

Lär dig kortkommandon

Tiden det tar att lära sig även det mest obskyra kortkommando är väl investerad tid. Varje gång dina fingrar måste lämna tangentbord slösar du med tid. Hitta en bra partner att parprogrammera med och be honom/henne raljera över hur långsam du är varje gång du använder musen.

Scripta dina vanligast kommandon/texter

Om du märker att du ofta skriver samma sak, skriver samma fel eller skriver samma sekvens av kommandon i en terminal, finns det hjälp. Textexpander är ett litet makroverktyg som verkligen sparar tid. Du kan använda det till allt från epostsignaturer till kod-”snippets”.

Tyvärr kostar det pengar och finns det bara för Mac, men jag är övertygad om att det finns ett Windowsalternativ.

”Locus of Attention”

Att kunna fokusera och komma in i flytet (”the Flow” eller ”the Zone”) är lika viktigt som verktygen du använder. Om du programmerar vill du att platsen för din uppmärksamhet (fritt översatt) ska vara din IDE. Inte din klienter för IM, Twitter eller email, etc. Med den mängd information vi utsätts för varje minut är detta svårare och svårare.

• Stäng av dina klienter för epost, twitter och IM och uppdatera dig då och då när du tar en paus från programmerandet
• Använd hörlurar för att visa att du inte vill bli störd
• Inför tysta timmar på kontoret, exempelvis mellan 14 och 16 varje dag då du verkligen kan fokusera

Neal menar exempelvis att Windows är som en treåring som konstant stör dig med påpekanden som ”Du har oanvända ikoner på ditt skrivbord”, ”Ditt virtuella minne håller på att ta slut” eller ”Det finns säkerhetsuppdateringar till din dator”. För att ytterligare hjälpa dig att minska störande moment finns det verktyg, skärm-dimmers, som sakta släcker ner allt förutom ditt akiva fönster:

• Doodim (Mac)
• Jedi Concentrate (Windows)

Sök

En sökning slår alltid navigation med mus eller till och med tangentbord. Se till att du har en bra lokal sökmotor för din dator, som Google Desktop (Mac/Windows) eller QuickSilver (Mac). Neal menar att navigera i en trädstruktur i utforskaren eller i din IDE är som att berätta för datorn att du vet hur du använder musen. Om du vet vad filen heter – sök!

Automatisera

Ett spiffigt användningsområde för Selenium är faktiskt att automatisera ditt iterativa testande. Du kanske felsöker en funktion som kräver att du klickar dig igenom en sekvens, fyller i litet testdata och till slut når fram till funktionen du felsöker. Denna process kan bli ganska trist att upprepa om och om igen. Med Seleniums IDE, som du installerar som ett plugin till Firefox, kan du enkelt spela in sekvensen en gång och sedan spela upp den varje gång du vill testa. Eller som Neal uttrycker det; ”You should never manually interact with the thing you are building unless you want to”.

Han avslutar med tänkvärda ”Solving problems by hand, makes you dumber”. Word!

Visst, man kan hävda att Googles iPhone-anpassade Safari-applikationer är bra nog och ibland bättre, men den här guiden visar hur du får epost, kalendrar och kontakter till de nativa motsvarigheterna i din iPhone.

Viktigt att tänka på innan du börjar är att Google endast tillåter ett konto av detta slag (jag har exempelvis lagt till min privata gmail via vanlig IMAP).

Aktivera Google Sync för Google Apps

För att synkroniseringen ska fungera fullt ut behöver du eller din Google Apps-administratör aktivera Google Sync. Detta görs genom att kryssa för ”Aktivera Google Sync” under ”Inställningar för mobilen” när du befinner dig på Tjänstinställningar för Google Apps som administratör.

Välj kalendrar

Om du inte aktivt väljer vilka kalendrar du vill synkronisera, kommer du bara få din standardkalender. Detta kanske räcker för en del, men jag har flera olika kalendrar som jag vill få synkroniserade. Att få detta att fungera var inte helt problemfritt. Google kommer säkert förbättra detta, men när detta skrivs behöver du göra enligt nedan.

Svenska stöds inte

Nu visas Sync-ikonen

Din iPhone

Se till att du är inloggad med ditt Google Apps-konto och att m.google.com är konfigurerad till din domän. Tyvärr såg jag ingen Sync-ikon, efter detta. Det visade sig att jag var tvungen att ändra språk långst ner på sidan. Efter jag ändrat till ”English (US)” och även land till ”USA”, visades ikonen som den skulle.

Nästa steg är att välja din iPhone och sedan vilka kalendrar du vill synkronisera.

Välj kalendrar

Sätt upp ett Exchange-konto

Detta gör du genom att välja Inställningar -> E-post, kontakter, kalendrar -> Lägg till konto… De inställningar du behöver hittar du här.

Om du har befintliga kalendrar får du välja om du vill ersätta dem. I mitt fall ville jag det eftersom de kalendrar som redan fanns i min iPhone var samma Google-kalendrar, synkroniserade via iTunes.

Radera eller spara befintliga kalendrar?

Så var det klart, alltid samma data i din iPhone som på Google Apps och med Push!

Fördjupning

Mer information hittar du hos Google:

• Om begränsningar
• Översikt

Dell Hell

Det låter litet klyschigt, men vi lever i en fantastisk tid. Jag inspirerades av ett blogginlägg från en bloggare med ett namn man inte glömmer, Willis Wee, som skriver mycket bra och tänkvärt om bl a sociala medier ur ett företagsperspektiv. I blogginlägget beskriver han hur Dell gått från förlorare till vinnare de senaste åren. Dells första reaktion var att stänga användarforum och inte bemöta den kritik som östes över dem i sociala medier. Idag satsar Dell stora resurser på bloggande, twittrande och kundmedverkan. Dell har exempelvis gjort ca 25 miljoner i vinst enbart via @Delloutlet. Det fantastiska med vår tid är vad sociala medier kan göra för oss, inte bara privat, utan även för företaget.

Företag som fortfarande tror att närvaro på nätet handlar om envägskommunikation, kommer få svårt att konkurrera med öppna, transparenta och medvetna företag som tar sina kunder på allvar.

Presentationen

Det bubblar av exempel på och demonstrationer av vad som är möjligt med webbläsare som har stöd för HTML5. I skrivandets stund kan man slarvigt säga att det är de flesta större alternativen till Internet Explorer som visar framfötterna. Firefox, Safari och Opera är alla långt framme vad gäller stöd för HTML5. Microsoft är inte riktigt med i matchen ännu. men jobbar på det, i alla fall enligt egen utsago. Tyvärr är det ju så att IE måste med, för att vi ska kunna börja använda oss av HTML5-specifika funktioner på riktigt.

Den populära spegeleffekten

Vi ska titta på hur man kan skapa en spegeleffekt av exempelvis en bild med hjälp av canvas-taggen. Jag har använt två canvas-taggar, en för huvudbilden och en för den reflekterande ytan. Huvudbilden hade kunnat visas med en vanlig img-tagg, men jag ville ha möjligheten att ”rita” och animera bilden också. Bilden föreställer min yngsta son, Carl.

Principen är enkel; skapa en canvas-tagg med vanlig markup, rita i den med JavaScript.

1. Skapa canvas-taggar

Börja med att definiera två canvas att rita i.

<canvas id="myCanvas" width="164" height="258">
  <p>Din webbläsare har inte stöd för canvas-taggen</p>
</canvas><br/>
<canvas id="mirrorCanvas" width="164" height="258"></canvas>

Innehållet i canvas-taggen är valfritt, men är tänkt att visas för äldre webbläsare eller webbläsare som helt enkelt inte har stöd för canvas-taggen (Varning: tidiga versioner av Safari visade dock detta innehåll). För att enkelt komma åt canvasytorna ger vi dem varsitt ID och en definierad storlek.

2. Ladda huvudbilden

var mainCanvas = document.getElementById('myCanvas');
var mainCtx = mainCanvas.getContext('2d');
 
var img = new Image();
img.src = 'carl.jpg';
img.onload = function() {
  mainCtx.drawImage(img, 0, 0);
};

För att komma åt pixlarna i canvas-ytan, hämtas ett 2d-kontext, som sedan används av drawImage för att rita bilden.

3. Skapa spegeleffekten

var mirrorCanvas = document.getElementById('mirrorCanvas');
var mirrorCtx = mirrorCanvas.getContext('2d');
 
var mainData = mainCtx.getImageData(0, 0, mainCanvas.width, mainCanvas.height);
var mirrorData = mirrorCtx.getImageData(0, 0, mirrorCanvas.width, mirrorCanvas.height);
 
var gradientStep = 70 / mainData.height;
for (var x = 0; x < mainData.width; x++) {
	var currentAlpha = 0;
	for (var y = 0; y < mainData.height ; y++) {
		var mainIdx = (x + y * mainData.width) * 4;
		var mirrorIdx = (x + (mainData.height - 1 - y) * mainData.width) * 4;
		for (p=0; p<3; p++) {
			mirrorData.data[mirrorIdx+p] = mainData.data[mainIdx+p];
		}
		mirrorData.data[mirrorIdx + 3] = currentAlpha;
 
		currentAlpha += gradientStep;
	}
}
 
mirrorCtx.putImageData(mirrorData, 0, 0);

Vi börjar med att hämta pixelarrayer för både huvudbilden och den spegelvända bilden. Detta görs med funktionen getImageData. Den returnerar en platt array med fyra poster för varje pixel. Dessa är i turordning värden för pixelns röda-, gröna-, blåa- och alphavärden.

Huvudbildens pixlar stegas sedan igenom kolumnvis, så att vi kan skapa en reflektion genom att gradvis öka värdet på alphakanalen från 0 till 70 (255 är max). Jag läser uppifrån och ner i huvudbilden, men ritar nerifrån och upp i spegelbilden och får på så sätt bilden spegelvänd.

Till sist uppdaterar vi spegelytan med den modifierade pixelarrayen genom att anropa putImageData.

4. Ett fungerande exempel

Här finns ett fungerade exempel. För att visa att spegelytan är levande, har jag lagt till en animering som startas och stoppas genom att klicka i bilden. Tänk på att du behöver en hyfsat uppdaterad webbläsare som inte är Internet Explorer.

HTML och JavaScript:

• canvas_mirror.html
• canvas_mirror.js

Avslutningsvis, några imponerande canvas-exempel

Realtidsrendrering av 3D-modell av en iPod Touch

Ett fullt fungerade Asteroids implementerat endast med Canvas och JavaScript

Ett canvas tillsammans med bland annat video-taggen för att analysera var de två iPhone-telfonerna är och i realtid uppdatera innehållet mellan dem med exempelvis innehållet från en annan video-tagg.

Läs mer

• Mozilla Developer Tutorial
• Bloggat om canvas på hacks.mozilla.org
• Canvas Cheat Sheet

Responstid före och efter jag bytt ut ancerstorview-taggen

Vad är ancestorView?

ancestorView används för att skapa en hierarkisk vy av sektioner utgående från den sektion du anger. Inget speciellt avancerat eller konstigt. Det borde inte heller vara jobbigt för systemet att skapa vyn, tyvärr sker något under ytan som ställer till det. Berätta gärna vad i kommentarerna.

Hur det kan se ut (före)

Ett vanligt sätt att använda sig av ancestorView är för att exempelvis bygga en sökväg till en navigering:

<section:ancestorView id="sectionView" section="${article.homeSection}" includeRoot="true"/>
<menu:use id="navigation" treeName="myMenuName">
	<c:set var="count" value="1"/>
	<view:iterate id="item" name="sectionView">
		<menu:item id="current" sectionId="${item.id}"/>
		<c:choose>
			<c:when test="${count eq 1}">
				<c:set var="sectionPath" value="${current.text}"/>
			</c:when>
			<c:otherwise>
				<c:set var="sectionPath" value="${sectionPath}/${current.text}"/>
			</c:otherwise>
		</c:choose>
		<c:set var="count" value="${count+1}"/>
	</view:iterate>
</menu:use>

Skapa en lättviktig ersättning till ancestorView

En enkel väg till ett liv utan ancestorView-taggar är att skapa en mycket enkel custom tag. Nedanstående implementation har inte stöd för precis allt du kan göra med Escenics variant, men den gör jobbet för de flesta användningsfallen. Jag döpte den till ancestors.tag och la den i /WEB-INF/lib/tags/section.

<%@tag body-content="empty"%>
<%@tag import="neo.xredsys.api.Section, java.util.ArrayList"%>
<%@attribute name="id" required="true" rtexprvalue="false"%>
<%@attribute name="section" type="neo.xredsys.api.Section" required="true"%>
<%@attribute name="includeRoot" type="java.lang.String" required="false"%>
<%@variable name-from-attribute="id" alias="sectionPath" scope="AT_END"%>
<%
	final ArrayList sections = new ArrayList();
	if (section != null) {
		do {
			sections.add(0, section);
			section = section.getParent();
		} while (section != null && ("true".equals(includeRoot) || section.getParent() != null));
	}
	jspContext.setAttribute("sectionPath", sections);
%>

Det enda som egentligen sker här är att jag bygger upp en lista med föräldrasektioner i omvänd ordning genom att anropa Escenics API. Detta går av någon anledning massor med gånger snabbare.

Hur det kan se ut utan ancestorView

<%@ taglib prefix="sec" tagdir="/WEB-INF/tags/section" %>
<sec:ancestors id="sectionView" section="${article.homeSection}"/>
<menu:use id="navigation" treeName="myMenuName">
	<c:forEach var="item" items="${sectionView}" varStatus="itemStat">
		<menu:item id="current" sectionId="${item.id}"/>
		<c:choose>
			<c:when test="${itemStat.first}">
				<c:set var="sectionPath" value="${current.text}"/>
			</c:when>
			<c:otherwise>
				<c:set var="sectionPath" value="${sectionPath}/${current.text}"/>
			</c:otherwise>
		</c:choose>
	</c:forEach>
</menu:use>

Eftersom jag inte längre arbetar med en vy av sektioner, kan jag iterera över listan med föräldrasektioner med en vanlig c:foreach med fördelar som varStatus, mm.

Slutsats

Om du använder Escenic i någon 4.x-version och om du får några träffar när du söker på ancestorView i din kodbas, finns all anledning att se över ett byte!

Upplägg, lastad sajt

I korthet innebär det att den största delen av trafiken hanteras av enkla webbcachear som leverar sidor till slutanvändarna. Med ett visst intervall efterfrågar cachearna frontarna efter nytt innehåll. Frontarna kan exempelvis köra en eller flera Tomcat-instanser som genererar innehållet. På detta sätt kan även riktigt stora siter klara sig på ett tiotal maskiner.

För alla JSP-sidor som Tomcat-frontarna genererar åt cachearna skapas nu en session, precis som Servlet-standarden föreskriver. Det är helt i sin ordning, fast helt onödigt i det här fallet. Det genererade innehållet levereras inte direkt till slutanvändaren, utan till cachen. Kan man få servlet-motorn att inte skapa sessioner i onödan och på så sätt spara sina dyra resurser?

Ja, ett sätt är att överst i sin JSP-sida helt enkelt utbrista:

<%@page session="false"%>

Dock är det kanske inte att föredra i ett litet större projekt med hundratals JSP-sidor. Det man letar efter är ett sätt att slå av det centralt för alla JSP-sidor. Min första instikt var att konfiguerar Jasper, som kompilerar JSP-sidorna att inte skapa sessioner om man inte explicit bad om det. Någon sådan parameter hittade jag tyvärr inte. Personer som har liknande frågor på nätet får istället frågan; ”Varför vill du slå av sessioner? De är ju en del av standarden!”

Mitt nästa spår var att automatiskt försöka inkludera ovanstående direktiv för varje genererad sida. Från och med JSP 2.0 (som inte direkt kom ut igår) går det att få till ganska enkelt med något som kallas för implicit includes.

Börja med att lägga till ett jsp-config-direktiv i din web.xml:

<!-- Disable the use of sessions -->
<jsp-config>
  <jsp-property-group>
    <url-pattern>*.jsp</url-pattern>
    <include-prelude>/WEB-INF/jspf/disableSession.jspf</include-prelude>
  </jsp-property-group>
</jsp-config>

Detta matchar alla JSP-filer (med filändelsen .jsp) och inkluderar innehållet av filen disableSession.jspf precis som om du skulle ha skrivit

<%@include file="/WEB-INF/jspf/disableSession.jspf"%>

högst upp i varenda JSP-fil.

Notera att filen som inkluderas är av typen .jspf, ett JSP-fragment. Detta är nödvändigt och säkerställer bland annat att du inte råkar in i några oändliga inkluderingsloopar. Att filen ligger i mappen /WEB-INF/jspf är rekommenderat och förhindrar även direkt access för en slutanvändare.

Testa! Tomcat kommer att kasta fel i loggarna så fort du försöker skapa en session, men om du har det som jag är det precis så du vill ha det!