Sex iPadappar för webbnördar

    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?

    Förkovra dig i responsiv design

    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:

    Webbramverk på micronivå

    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.

    Inspiration

    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:

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

    Snabbare webbsidor ger gladare besökare

    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:

    Utveckla iPhone- och Android-appar med de kunskaper du redan har

    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:

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

    Fem tips som underlättar livet med Internet Explorer

    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?

    LiveReload – aldrig mer F5

    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.

    Karusell med bildtext i SiteVision

    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

    Karusell med intelligenta mallar i SiteVision

    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

    Slumpa fram artiklar i SiteVision

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

    Länkar