Sven Dahlstrand

iPaden är inte bara en grym webbsurf-sociala-medier-spel-maskin. Det går faktiskt att få en del arbete gjort också! Här är ett urval av de appar jag använder:

• Textastic, Koder: textredigerare med syntax highlightning, koppling mot Dropbox och SFTP med mera. Fungerar bra för kortare sessioner, de flesta kalenderinlägg på bloggen är skrivna i Textastic. Koppla med fördel ett tangentbord till iPaden så blir du riktigt snabb.
• Prompt: när du behöver kolla hur servern mår, patcha, eller deploya sker det ofta över SSH. Det finns flera SSH-klienter till iPad - Prompt är en av de vassaste.
• Ego: för att stilla din sifferhunger.
• Dropbox: helt klart det bästa “filsystemet” för iOS, många appar integrerar med Dropbox.

Vilka är dina favoritappar?

Det snackas mycket om responsiv design nu för tiden. I stället för att leverera flera olika versioner av en webbplats, beroende på om besökaren surfar från en dator eller mobil, handlar responsiv design om en webb. En webb som anpassar sig efter skärmstorlek och andra förutsättningar.

Om du får långtråkigt i julhelgen, passa på att förkovra dig i ämnet! Bra att börja med:

• Henrik Ekelöfs presentation är en bra introduktion.
• Responsive Web Design är en fantastiskt bok, rätt på sak och kortfattad.
• Mediaqueri.es samlar webbplatser med responsiv design.

Om du bygger mindre webbappar eller prototyper ska du helt klart kika på de microramverk som finns. Ett microwebbramverk ger dig precis det du behöver för att snabbt komma igång och bygga små till medelstora webbapplikationer. De hjälper dig med sessionshanteringen, att koppla URL:er till logik, templaterendering och annat skitgöra så att du kan koncentrera dig på att bygga en grym applikation.

Tänk dig en mycket enkel webbapplikation som visar besökarens IP-adress, det går tretton sådanna på dussinet. I Sinatra, ett microramverk för Ruby, kan det se ut så här:

1
2
3
4
5

require 'sinatra'

get '/' do
  "Din IP-adress: #{request.ip}"
end

Kan det bli mycket sexigare? Om du är nyfiken så tycker jag att du ska kika mer på Sinatra för Ruby, Slim för PHP, Spark för Java eller Flask för Python.

Jag är utvecklare först och främst men likt förbannat behöver jag värka fram designelement då och då. Ibland står huvudet still och jag har ingen aning om hur jag ska utforma den där knappen, inloggnings-rutan eller vad det nu kan tänkas vara. Det finns många sätt att hämta inspiration: man kan gå utanför dörren, bläddra i tidningar eller sova på saken. Ett av de bästa knepen är att lämna datorn.

Ibland behöver vi dock se vad andra har gjort och hur de har löst liknande problem. Jag har några favoritwebblatser som jag kan surfa på länge:

• Dribble: duktiga kreatörer visar upp sina senaste alster.
• Little Big Details: fokus på små detaljer i användargränssnitt.
• Subtle Patterns: fria bakgrundsbilder av hög kvalité.
• UI-Patterns: beprövade lösningar på vanliga problem.

Hur startar du om hjärnan när inspirationen tryter?

I och med att bredband blivit allt vanligare har vi webbutvecklare och webbdesigners slappnat av lite när det gäller att tänka på optimering av webbplatsers laddtider. Alla har ju ändå en snabb, fast lina - eller? En webbsida med resurser på ett par megabyte är inte ovanligt idag.

Men långt ifrån alla har bredband och mobila, uppkopplade, enheter blir fler och fler. Det är dags att återigen börja tänka på filstorlek och att hålla nere antalet förfrågningar till webbservern.

Det finns många enkla åtgärdet som tar dig en bra bit på vägen: se till att dra nytta av webbläsarens cache, slå ihop och komprimera stilmallar och Javascript och använd CSS Sprites.

Jag har samlat ett par artiklar och ett gäng verktyg som ger dig snabbare webbsidor och gladare besökare:

• Best Practices for Speeding Up Your Web Site
• Seven Mistakes That Make Websites Slow
• YSlow och Page Speed: analyserar webbsidor och kommer med tips för att snabba upp dem.
• Pingdom Tools: webbaserat verktyg som testar en sidas laddtid.
• Firebug, Safari och Chromes utvecklarverktyg.

PhoneGap låter dig utveckla plattformsoberoende mobilappar, redo att lanseras i App Store eller på Android market, med webbtekniker som du redan kan. Dessutom exponeras API:er för till exempel kamera, bildgalleri och ljuduppspelning. Allt detta kommer du åt genom att skriva vanlig HTML, CSS och JavaScript.

Det låter för bra för att vara sant, finns det någon hake? Det finns ett par grejer du ska vara medveten om när du väljer att använda PhoneGap eller liknande verktyg.

• JavaScript-koden du skriver tolkas under körning och kommer aldrig bli lika snabb som kompilerad Objective-C eller Java. Så länge du inte skriver jättekrävande appar, som 3D-spel, kommer dina användare förmodligen inte märka någon skillnad.
• Gränssnittet får du bygga själv med stilmallar, det går inte använda de nativekontroller som finns för respektive plattform. Det finns dock alternativ om du fortsätter läsa…

Fortfarande intresserad? Här kommer du igång:

• Kom igång-guide för PhoneGap.
• jQuery Mobile och Sencha Touch: två ramverk för att bygga gränssnitt.
• Titanium Mobile: alternativ till PhoneGap som låter dig bygga nativegränssnitt med JavaScript.
• Toura Mulberry: ett ramverk och en samling kommandoradsverktyg ovanpå PhoneGap (tipstack @Urre)

Nu återstår bara den svåra biten: att göra en användbar app som du kan ta betalt för. ;)

Du som producerar HTML och CSS till vardags har med största sannolikhet öppnat en webbplats i både en, två eller fyra versioner av Internet Explorer - bara för att upptäcka att en detalj inte ser likadan ut som i alla andra webbläsare.

Denna best som vi älskar att hata. Så många timmar vi lagt på att, svärandes, slita vårt hår över någon liten olikhet.

Även om det går mot ljusare tider, till och med Microsoft vill ta livet av IE 6, känns det som att det kommer dröja innan äldre versioner av webbläsaren är ett minne blott. Och eftersom vi ändå kommer få dras med aset ett tag till kan vi lika gärna göra det bästa av situationen. Här följer några tips som gör livet med Internet Explorer lite lättare:

• ievms: tar automatiskt hem och installerar virtuella maskiner med Windows och IE på. Smidigt för dig som sitter i OS X eller GNU/Linux.
• BrowserStack: kör IE i molnet med debuggverktyg.
• IETester: installera och byt lätt mellan flera versioner av IE.
• QuirksMode: mycket bra om webbläsarkompabilitet, inte bara för IE. Svarar på frågor som “vilka webbläsare stödjer :first-child selectorn?”.

Vilka är dina bästa tips för att göra livet med Internet Explorer drägligare?

Som webbutvecklare har du säkert suttit och tryck på F5 eller cmd + R i webbläsaren för att se resultatet av en CSS-justering. Förmodligen har du gjort det mer än en gång. Meningslös repetition är av ondo men det finns en lösning: LiveReload!

LiveReload övervakar filerna i ett projekt åt dig och uppdaterar webbläsaren när du ändrar i dem - automagiskt. Jag har spelat in en kort screencast där du kan se hur det fungerar, varje gång jag sparar ritas sidan om i bakgrunden. Du kan själv påverka vilka filer verktyget ska bevaka och det är även möjligt att kompilera CoffeeScript, SASS och annat smått och gott.

Säg hej då till det frenetiska uppdaterandet och ladda hem LiveReload.

En fortsättning på föregående avsnitt. Här bygger jag ut funktionaliteten så att en redaktör lätt kan lägga till en bildtext för bilderna i karusellen.

Sitter du i SiteVision 2.6.2_04 eller senare?

Om du läser det här i framtiden och sitter i SiteVision 2.6.2_04 eller senare är det nu ännu enklare att få bildtext till karusellen. Som Magnus skriver i kommentarerna finns det nu en metod på ImageRenderer så att den skriver ut title-attributet. Rulla ner och läs kommentaren och ta en titt på den uppdaterade källkoden. Tack Magnus!

Länkar

• Föregående avsitt
• ImageRenderer (SiteVision API)
• Nivo Slider - The Most Awesome jQuery Image Slider
• Källkoden för det här avsnittet

Gör dina redaktörer glada med intelligenta mallar. Lär dig hur du gör grymma karuseller (bildspel) med hjälp av fria JavaScript-bibliotek och metadata i SiteVision.

Erratum

Det har smugit sig in ett litet fel i detta avsnitt. I Velocity-mallen kollar jag om det finns en mapp vald och visar karusellen. Dock så hamnade diven och JavaScriptet utanför denna if-sats. Jag har uppdaterat filen så du kan se hur det ska vara. Om du gillar att läsa trasig kod kan du göra det också. :-)

Länkar

• Carousel design pattern
• Material från föredragen - SiteVision
• Nivo Slider - The Most Awesome jQuery Image Slider
• jQuery Infinite Carousel | jQuery for Designers
• Slides, A Slideshow Plugin for jQuery
• jSlider
• Orbit: jQuery Image Slider Plugin from ZURB
• AnythingSlider
• Källkoden för det här avsnittet

Lär dig hur du med hjälp av Skriptmodulen i SiteVision slumpar fram artiklar ur ett arkiv.

Länkar

• Reservoir Sampling - Taming Uncertainty - Site Home - MSDN Blogs
• Choosing Random Elements - Adventures in Learning
• Källkoden för det här avsnittet

I Ruby, liksom de flesta andra programmeringsspråk, finns det något som kallas abbreviated assignment (förkortad tilldelning). Det är operatorer som += och -= som låter oss lägga till respektive dra ifrån värdet på en redan existerande variabel.

Om man är ny i Ruby-världen finns det risk för förvirring när man stöter på ||= i andras källkod. Vad gör den och vad är den bra till? Jag tänkte förklara med ett exempel.

1
2
3
4
5
6

puts @count
#=> nil

@count ||= 0
puts @count
#=> 0

Okej, vad händer här egentligen? Vi börjar med en instansvariabel @count som är odefinierad (nil). Sedan använder vi ||=-operatorn och @count är nu 0. Har vi bara gjort en vanlig tilldelning?

1
2
3

@count ||= 32
puts @count
#=> 0

Det verkar inte så, efter en ny tilldelning är @count fortfarande 0. ||= är egentligen bara en förkortning och kan skrivas om:

1

@count = @count || 32

||-operatorn i Ruby fungerar så här: först undersöks operanden till vänster. Om den har ett värde som inte är nil eller false så returneras det värdet. Annars returneras värdet på operanden till höger.

Så om vi ska översätta den senaste raden kod till “ren svenska”: sätt variabeln @count till 32 om @count inte redan har något värde.

När har jag användning för detta?

Säg till exempel att du har har en metod i en webbapplikation som hämtar den inloggade användaren från databasen. För att undvika onödiga anrop till databasen väljer du att spara undan användaren i en instansvariabel. Koden för detta ser ut så här:

1
2
3
4

def current_user
  return @current_user unless @current_user.nil?
  @current_user = User.find(session[:user_id])
end

Det här är ett perfekt användningsområde för ||=-operatorn. Du kan spara en hel rad genom att i stället skriva så här:

1
2
3

def current_user
  @current_user ||= User.find(session[:user_id])
end

Uppdaterat 2011-11-24: Tack till Linh som fick mig att uppdatera med ett bättre exempel.

Idag använder jag webben på ett helt annat sätt än för 10 år sedan. De flesta av de applikationer jag använder har flyttat ut på Internet. E-post, kalender och att göra-listor är några exempel. Det finns dock några nackdelar med att köra dessa i webbläsaren. De tar upp plats med flera tabbar och man kan inte nyttja OS X Exposé-funktion för att få en översikt. Jag saknar också att ha en Dock-ikon med med statusinformation, som till exempel antalet olästa e-brev.

Platsspecifika webbläsare kallas lösningen på problemet och till Macen har vi Mozillas Prism och Todd Ditchendorfs Fluid att välja på. Dessa program hjälper dig att skapa en skrivbordsapplikation av valfri webbsida. Fluid och Prism är ganska likvärdiga i funktionalitet men bygger på olika renderingsmotorer - WebKit respektive Gecko.

Efter installationen går man till väga på mer eller mindre samma sätt för att skapa sina applikationer:

• Skriv in en URL
• Välj vart applikationen ska hamna
• Välj en ikon

Nu är det bara att dra programmet till Dockan och använda det som vilken annan skrivbordsapplikation som helst. Du kan till exempel få det att starta när du loggar in genom att dra det till Startobjekt under Systeminställningar > Konton eller dra nytta av Spaces-funktionen i Snow Leopard.

Om man googlar lite är det inte svårt att hitta läckra ikoner till sitt favoritprogram.

Jag spenderar mycket tid i Bash som råkar vara den kommandotolk som är förvald i Mac OS X:s Terminal.app. Det blir många kommandon på en dag och tyvärr är det mycket repetitivt arbete. Att skriva ett längre kommando mer än en gång känns dumt. Tab completion är en funktion som de flesta terminal-användare känner till; att Bash hjälper dig avsluta sökvägar eller kommandon när du trycker på tabb. Min favorit är history.

Om du bara kör programmet history presenteras en lång lista med dina senast körda kommandon. Ett lätt sätt att stega igenom dessa är med hjälp av pil upp och pil ner. När du hittar det kommando du vill köra är det bara att trycka retur. Om du behöver ändra i kommandot är det bra att känna till ctrl-a och ctrl-e som hoppar till början respektive slutet av raden.

Okej, inget nytt under solen än kanske? Men mindre känt är att det finns ett sökläge för historiken. Innan du börjar skriva något trycker du ctrl-r. Nu är det bara att börja söka på ett tidigare kommando, det räcker med ett fragment av det, och det du körde senast som matchar ditt sökord visas. Om du inte är nöjd trycker du ctrl-r igen för att visa nästa träff. När du hittat det du letade efter har du ett par valmöjligheter. Om du bara trycker retur körs kommandot direkt. ctrl-j eller Escape hämtar istället kommandot och låter dig redigera det innan det körs. Ångrar du dig är det bara att trycka ctrl-c för att komma tillbaks till prompten.

Sidecar hör till den skara klassiska cocktails som inte föddes i Amerika. Den ska enligt David A. Embury ha skapats, av en vän till honom, under andra världskriget på en bar i Paris. Embury påstår också att cocktailen har fått sitt namn efter en stamkund som blev körd till baren i just en sidovagn.

Tyvärr lär vi aldrig få veta säkert hur det gick till. Hur som helst har pappan till Sidecar antingen inspirerats av eller varit helt ovetandes om en Brandy Crusta.

Denna cocktail hittar vi så långt tillbaka som 1862 i Jerry Thomas The Bar-Tender’s Guide. En Brandy Crusta skakas ihop med sockerlag, Bokers bitter, brandy, Curaçao och citronjuice. Thomas beskriver också hur serveringen ska gå till: i ett cocktailglas med sockerkant och citronskal i. Inte helt olikt den drink du får när du beställer en Sidecar idag.

Foto: Sanna Lund

Recept

Att en Sidecar ska innehålla konjak, citronjuice och Cointreau kan nog de flesta hålla med om men när det kommer till proportionerna är det inte lika klart. Men faktiskt så är det så att det recept som är rätt är det som passar ditt val av konjak och din smak allra bäst. Därför presenterar jag här några varianter och rekommenderar dig att prova dig fram tills du hittar din favorit.

Gary Regan från The Joy of Mixology

• 4 1/2 cl konjak
• 3 cl Cointreau
• 1 1/2 cl citronjuice
• citrontwist, för garnering

Skaka och sila upp i ett kylt cocktailglas med sockerkant. Lägg till garneringen.

Dale Degroff från The Essential Cocktail

• 4 cl konjak
• 2 cl citronjuice
• 2 cl Cointreau
• socker
• apelsin

Förbered ett cocktailglas genom att doppa det i först apelsinjuice och sen socker, för att få en fin kant. Blanda sedan konjak, citronjuice och Cointreau i en shaker, fyll på med is och skaka väl. Sila upp i cocktailglaset och garnera med en bit apelsinskal.

Harry McElhone från Största cocktailboken

• 3 cl konjak
• 3 cl Cointreau
• 3 cl citronjuice

Skakas med is och silas i cocktailglas. Kan serveras med en bit citronskal om så önskas.

David A. Embury från The Fine Art of Mixing Drinks

• 4 cl konjak
• 1 cl citronjuice
• 1/2 cl Cointreau

Skaka ordentligt med mycket is och sila upp i ett kylt cocktailglas. Kan dekoreras med en citrontwist om så önskas.

Som webbutvecklare drar jag nytta av mycket fri mjukvara som till exempel git, imagemagick och wine. De flesta *nix-smaker har pakethanterare som underlättar installationen. BSD har ports, Debian har dpkg och många andra GNU/Linux-distributioner kör RPM till exempel. På OS X har det länge varit antingen Fink eller MacPorts som gäller.

Jag har inte riktigt varit förtjust i någon av dem. Jag har till exempel inte hittat alla paket jag behöver i Fink och MacPorts känns tungrott då det installerar paket som redan finns på din Mac från början. Jag har sedan ett tag tillbaka i stället använt Homebrew som min pakethanterare.

Varför ska jag köra Homebrew?

Det finns många fördelar med Homebrew:

• Det är lätt att installera. Lägg bara Homebrew i /usr/local, som redan finns i PATH, och du är igång.
• Du kan förresten lägga det vart du vill och Homebrew smutsar inte ner utanför sin katalog.
• Du behöver inte använda sudo om du inte gärna vill.
• Homebrew drar nytta av de paket som redan finns på din dator och därav går det snabbare att installera.
• Alla paket är optimerade för Intelbaserade Macar med Snow Leopard.

Hur kommer jag igång?

Det enda du behöver innan vi kör igång är Xcode. Om du har din installationsskiva för OS X kvar kan du installera Xcode därifrån. Homebrew kan, som jag nämnde tidigare, installeras vart som helst men jag föredrar /usr/local. Så här lätt installerar du från terminalen:

1
2
3
4
5
6
7
8
9

# Ladda hem och installera Homebrew från GitHub.
ruby -e "$(curl -fsS https://gist.github.com/raw/323731/install_homebrew.rb)"

# Så här söker du efter paket samt får mer information om det.
brew search git
brew info git

# När du hittat rätt paket är det bara att installera.
brew install git

Det är också lätt att bidra till Homebrew, jag har själv skickat in ett par patchar. Eftersom det är öppen källkod behöver man inte heller vänta på att någon annan ska uppdatera ens favoritpaket, det är bara att göra själv! Ta en titt på Homebrews wiki för mer information.

Jag väljer ofta Safari när jag surfar, bland annat för att den känns lite kvickare än Firefox. Det finns dock några grejer som irriterar mig och allra mest sättet Safari hanterar flikar på. Hur man än ställer inställningarna i webbläsaren finns det alltid några länkar som tycker det är roligt att öppnas i ett nytt fönster istället för i en ny flik.

Som tur är finns det en lätt lösning på problemet, det är bara att skriva in följande kommando i terminalen, men jag kan inte fatta varför det inte finns som en inställning istället. Det kanske är jag som letar dåligt?

1

defaults write com.apple.Safari TargetedClicksCreateTabs -bool true

Jag älskar rom och drinkar som är baserade på detta sockerrörsdestillat. Jag tycker så mycket om det att jag ibland byter ut basspriten i andra drinkar mot just rom. Ikväll blev det en variant på Caipirinha, Brasiliens nationalcocktail.

Caipirinhan föddes på den brasilianska landsbygden för många år sedan. Den ska blandas med cachaça som är en spritdryck gjord på sockerrör men som alltså inte är rom. I Brasilien finns det tusentals tillverkare av denna dryck men det är få som hittar till Sverige och Systembolaget.

Byter vi ut cachaçan mot ljus rom får vi en variant som är mins lika god - Caipirissima. Jag rekommenderar Havana Club Añejo 3 Años (nr 568). Följande recept har jag hämtat från Dale Degroffs bok The Essential Cocktail. Allra helst njuter man den en varm sommardag, men den är god en kall januarikväll också.

Recept

• En lime delad i fyra klyftor
• 2-3 teskedar socker (eller 3 cl sockerlag)
• 6 cl ljus rom

Lägg limeklyftorna i ett lågt glas och strö över socker. Muddla för att pressa ut juicen och oljan. Fyll på med krossad is och rom - rör om och servera.

Foto: Sanna Lund