Publicerad 10 november, 2009 av Christian Lizell
En av de bättre dragningarna på årets Øredev var Neal Ford’s ”The Productive Programmer: Mechanics”. Neal har skrivit en bok med samma namn, som jag hört litet blandad kritik om. Därför hade jag inga större förväntningar när jag klev in i rummet. Efter orden ”Graphical tools are med for novices” visste jag att detta var något för mig!
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:
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:
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!
Etiketter: clcl, Doodim, Google Desktop, Jedi Concentrate, Jumpcut, Locus of Attention, Neal Ford, QuickSilver, Selenium, Textexpander, The Productive Programmer, Øredev
Postat i Guider, Konferens, Produktivitet | 1 kommentar »
Publicerad 1 oktober, 2009 av Christian Lizell
För några månader sedan flyttade vi över epost, kalendrar, kontakter och en hel del annat till Google Apps. Det kan jag verkligen rekommendera, men det är inte det vi ska prata om idag. För några dagar sedan fick Athega äntligen leveransen av alla iPhone 3GS-telefoner. Detta aktualiserade hur vi skulle få just epost, kalendrar och kontakter att synkroniseras mellan mobil, dator och Google.
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:
Etiketter: Google, Google Apps, Google Sync, iPhone
Postat i Guider, Teknik och prylar | 1 kommentar »
Publicerad 28 augusti, 2009 av Christian Lizell
Igår höll jag en dragning/workshop om hur företag kan använda sociala medier för att komma närmre befintliga och framtida kunder, hantera medgångar och motgångar eller kanske attrahera rätt människor.
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
Postat i Sociala nätverk | 2 kommentarer »
Publicerad 8 juli, 2009 av Christian Lizell
Rita, animera och kontrollera pixlarna på webbsidan. Den nya <canvas>-taggen i HTML5 revolutionerar det som är möjligt att göra i en webbapplikation eller webbsida.
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:
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
Etiketter: canvas, HTML5
Postat i Kod, Webbutveckling | Inga kommentarer »
