Det svåraste inom kursen var nästan att sätta en applikationsidé, det brukar oftast vara så. Jag valde till slut att göra en kalender, det kändes från början som en ganska tuff uppgift då jag aldrig gjort en kalender tidigare och inte riktigt visste vart jag skulle börja. Som ramverk valde jag att använda jQuery UI och där lärde jag mig en hel del intressant.

Att sätta en struktursdesign tycker jag också oftast är ett knepigt område och det är först när man börjar utveckla en del som man ser vad som egentligen behövs, implementationen sedan tyckte jag gick väldigt bra och jag lärde mig mycket inom struktur för att skapa en jQuery UI Widget. Jag är nöjd med min kalender och själva grundfunktionaliteten överträffade faktiskt mina förväntningar, dock så var det mycket som jag skulle vilja implementera som jag inte riktigt hann med.

Personligen är det väl tiden som jag kämpat mot under hela kursens gång, eftersom jag har ett jobb som oftast är mer än ett heltidsjobb så har det blivit många sena kvällar och helger som fått ägnats åt kursen. Så skulle jag gjort om kursen så skulle jag ha sett till att jag haft mer tid avsatt för den.

Jag tar med mig många lärdomar från kursen, min relation till Javascript känns mycket mer gedigen nu och jag känner att jag kan behandla större Javascript applikationer. Jag har större koll på scope och känner mig säkrare på syntax (tack JSLint!). Jag fick även ordentlig koll på Web Storage och känner att jag vet ungefär till vad som det går bra att använda. Jag har fått prova på tjänster som jsFiddle som jag säkerligen kommer att använda mig av mer. Att även ha fått prova på att använda GIT tillsammans med GitHub är en stor erfarenhet som jag tar med mig.

Jag gillar verkligen den här kursen, det ges utrymme för att kolla på det man verkligen är intresserad av. Man är inte styrd så att alla ska arbeta med samma utvecklingsverktyg, ramverk och tekniker utan man serveras ett antal alternativ som man får välja mellan. Det tycker jag är kursens styrka. En annan sak som har varit kursens styrka är handledaren David Waller, otroligt kunnig inom området och står som stöd även under kvällstid och helger. Stort tack David!

Jag ser mig själv som frontendutvecklare och där ingår också Javascript så jag känner att den här kursen verkligen har gett mig ett större djup och jag är bättre förberedd på kommande utmaningar. Jag kan inte annat än att rekommendera den för framtida studenter.

P.S sedan tycker jag det är roligt att kalendern som jag utvecklat inom en snar framtid, efter lite vidareutveckling, kommer att köras på en relativt stor webbsajt.

Så varsågod här är genomgången om Web Storage där jag visar ett litet exempel som använder LocalStorage.

Inledning

Jag fokuserade rätt mycket på den visuella designen redan under planeringsstadie och implementation. Jag ville helt enkelt få det rätt från början.

Kognition

Jag lät en del användare testa min kalender för att se ifall den var intuitiv och jag har i stort sett bara fått positiva responser. När man redigerar ett event så har jag använt HTML5 attributet ”contenteditable” som gör att användaren direkt i texten kan redigera den utan att behöva klicka på några knappar eller nånting, den funktionen tyckte användarna väldigt mycket om. Vad de flesta saknar är funktionen för att bläddra mellan månader vilket jag även själv tycker är den största biten som saknas, tyvärr försvinner tiden snabbare än vad man vill och jag hann helt enkelt inte med att implementera det under steget.

Design

Jag ville ha en ganska stilren approach och har hämtat mycket inspiration från iCal. Färgschemat ville jag ha ganska subtilt och inte för utstickande, samtidigt skulle kalendern vara väldigt tydlig. Det är svårt att göra rätt eller fel inom design då alla tycker olika men jag är själv nöjd över stilen och har även här fått positiva kommentarer om den.

Dynamisk grafik

Jag har som jag nämnt tidigare använt jQuery för integrationen med kalendern och för att göra grafiken dynamisk (tex när man skapar ett event så markeras dagen på ett visst sätt) så sätts CSS klasser vid olika states.

jQuery UI CSS Framework

Det stora att kolla på i det här steget var dock template systemet som används av jQuery UI som kallas jQuery UI CSS Framework. Vad jQuery UI CSS Framework består av är helt enkelt en standard för att döpa css klasser som jQuery widgeten använder. Detta för att underlätta att skapa teman som går att använda till olika widgets. Så i det stora hela så vart det inga revolutionära ändringar som man ser utåt, istället ändrade jag vissa delar av min CSS för att följa reglerna som finns för jQuery UI CSS Framework.

Vad jag förstått det så ska man separera CSS:en över ett antal filer, det finns en CSS fil som tillhör widgeten och står för struktur som till exempel margin, padding, position mm. Sedan så finns det en CSS fil som ska vara utbytbar och som innehåller färger, typsnitt mm. Jag förstår tänket för att man ska kunna byta tema men jag tycker det blir väldigt omständigt ur redigeringssynpunkt. När jag började med CSS för en herrans massa år sedan så delade jag upp min CSS och hade filer för bland annat reset, typografi och positionering. Det här var något som jag sedan gick ifrån ganska fort då det blir ett rent ******* att göra ändringar i koden, då man inte vet var man ska börja leta. Därför gillar jag att ha en och endast en CSS fil för varje projekt.

Då jag också insåg att det skulle ta väldigt lång tid att göra om och anpassa efter de nya reglerna så valde jag att inte ändra om all min CSS kod till jQuery UI CSS Framework för den här applikationen. Jag valde istället att kolla på dokumentationen av ramverket och använda mig av klasser som det beskriver utan att behöva refaktorera för stora delar av koden, i övrigt kör jag på min egen anpassade approach. Jag tycker om när det sätts regler och struktur över hur något ska implementeras och om alla använder samma klasser som ramverket föreslår blir det enklare att förstå varandras kod och switcha mellan olika teman. Tyvärr hann jag inte ändra om all min CSS så det följer jQuery UI CSS Framework men åtminstone vissa delar, hade jag gjort om det här hade jag haft ramverket i åtanke under en tidigare process men då jag tidigare inte jobbat med jQuery UI Widgets så visste jag inte när det skulle in i processen. Jag tar med mig stora lärdomar av det här och nästa widget som jag bygger ska jag ha med ramverket i åtanke redan från steg ett.

Sammanfattning

Det här vart ett ganska teoretiskt steg för mig då jag redan satt det mesta av min design under föregående steg. Jag fick sätta mig in i jQuery UI CSS Framework vilket känns som en stor investering som jag kommer ha nytta av i framtiden. Nu får ni se framemot nästa steg då det kommer att dyka upp en liten fördjupning om LocalStorage i HTML5.

Dags att sätta igång

Utvecklingsmiljön var redan satt och koddesignen var delvis spikad men jag kände att jag fortfarande hade för lite erfarenhet av jQuery UI så jag läste på lite olika tutorials och guider för att komma igång ordentligt.

För att sedan kickstarta projektet så var det första jag gjorde att webba upp skelettet baserat utifrån mina skisser och gav element klasser och id för att sedan stila upp dom med CSS. När detta var gjort hade jag en mall och visste ungefär vad jag ville uppnå och det var dags att slänga sig på Javascriptet. Jag ville börja på den djupaste nivån och då blev det ganska självfallet att börja titta på Web Storage och hur det fungerar i HTML5.

Web Storage

Web Storage är samlingsnamnet för API:et i HTML5 som låter dig spara data direkt hos klienten. Ingen serversidekod inblandad alltså. Det finns två sätt som man kan spara data på med Web Storage. Det första är SessionStorage som sparar datat för sessionen, det innebär att datat finns kvar hos användaren så länge den har webbläsaren igång. Skulle användaren stänga och starta om webbläsaren är datat således borta. Det andra är LocalStorage som sparar datat hos klienten och är inte beroende av sessionen, användaren kan stänga sin webbläsare och öppna den igen och datat är fortfarande kvar. Därför föll valet självfallet på LocalStorage.

LocalStorage

Så hur fungerar LocalStorage? Jag fick läsa på lite då jag aldrig tidigare använt mig av LocalStorage, och under tiden tyckte jag det var så pass intressant att jag tänkte att jag gör min fördjupning just om LocalStorage i HTML5. Så ni får hålla till godo men en djupare redogörelse kommer snart i en ny bloggpost.

Javascript

När jag hade någorlunda koll på hur LocalStorage fungerade så började jag fundera på hur jag skulle rita upp kalendern. Jag hade absolut ingen erfaranhet av att göra kalendrar tidigare så det blev lite research i best practices till att börja med. När man skapar widgets med hjälp av jQuery UI så använder man något som kallas The widget factory. Det är denna factory som man anropar när man vill skapa en ny widget instans. När man skapar en ny instans finns några standard metoder som används:

• options – Här kan man definiera olika värden som användaren kan skicka in i widgeten.
• _create – Körs när widgeten skapas, en konstruktorfunktion med andra ord.
• destroy – Körs när widgeten plockas bort ur minnet.

Funktioner

Jag började tänka om lite kring mina objekt och skapade istället funktioner för att sätta upp kalendern. Jag skapade en initCalendar funktion som satte upp allt av värde som man behövde för att skapa själva kalendern. Den funktionen tar ett år och en månad som parametrar (dessa kan man skicka in när man skapar widgeten, annars plockas aktuellt år och månad ut). Den funktionen sätter upp labels för månader, veckodagar, kollar längden på aktuell månad medmera. Den returnerar sedan de värden som behövs för att rita ut kalendern.

För att rita ut kalenderna skapade jag en funktion vilken jag kallar generateCalendarHTML. Det är den funktionen som visuellt ritar ut kalendern. Den skapar en grundläggande HTML struktur med hjälp av jQuery, den skapar headern för kalendern (Månadsnamn och år). Sedan skriver den ut veckodagarna, so far inga konstigheter.

Det är sedan när man ska loopa ut månadens dagar som det hela börjar bli lite tricky. Här kör jag en loop och kollar vilken dag som månaden startar på och ifall loopen gått så långt börjas isåfall datumen ritas ut, till dess ritas bara tomma dagar upp. I den if satsen så anropar jag funktionen generateDayHTML som skriver ut datumets siffra och lägger till formulär för att lägga till ett event. Här körs också en koll ifall datumet har ett event, isåfall ska det märkas ut.

Interaktion

För att sedan separera själva interaktionen med kalendern så skapade jag funktionen setupInteraction som innehåller jQuery kod för när användaren navigerar och interagerar med widgeten. Den här funktionen är till exempel den som tar hand om vad som händer när användaren postar formuläret för ett nytt event och ikoner som dyker upp när man för musen över dagar medmera.

Events

För att hantera events så skapade jag helt enkelt CRUD funktioner, en funktion för att hämta event, en för att skapa event, en för att uppdatera event och slutligen en för att ta bort ett event. Dessa funktioner använder sig av LocalStorage för att hantera datat och är då så pass separerat att man kan byta ut dessa till valfri datakälla om man så skulle vilja.

Sammanfattning om implementeringen

Phew! Det har varit två ordentligt hektiska veckor med implementering och jag har lärt mig väldigt mycket nytt. Främst Javascript syntax, struktur och har fått ett bra helhetsgrepp runt Javascript. Mycket funktionalitet fick också strypas då tiden tickade iväg lite för snabbt. Bland annat en funktion för att bläddra mellan månader och funktionalitet för att lägga till flera event på samma dag var några av mina idéer som fick ta ett steg tillbaka och får vänta in framtiden för att kanske bli implementerade.

Nu när du läst allt det här om kalendern kanske du är sugen på att testa lite och se hur det blev. All koden ligger på Github och här finns ett exempel som du kan köra. Se dock till att du använder en webbläsare som kör webkit som renderingsmotor (Google Chrome eller Safari) för att få en fullständig upplevelse.

Då väntar en vecka med fokus på användargränssnitt och putsa lite grann på ytan på kalendern.

Det fanns två vägar att gå på tekniker som jag ville kika på inom jQuery. Det ena var jQuery Mobile. Det andra jQuery UI. Det blev det senare då jag vill utforska vad man kan göra och hur man kan skapa egna widgets med hjälp av verktyget. Jag tänkte att skapa en kalender är ett lagom stort projekt där man kan se vad verktyget går för. Så första steget var att forska lite kring jQuery UI och hur man gör widgets.

Nästa steg var att börja fundera över min applikation och hur det är tänkt att kalendern ska utformas och vad man ska kunna göra. Jag har tänkt mig att kalendern visuellt ska presenteras som en månadsvy och att man ska kunna mata in event, tillsammans med en beskrivning, plats och tid. Datat ska sparas med hjälp av Web Storage API:et som finns i HTML5 och är det API som varit implementerat längst tid bland webbläsarna.

Resurser

Resurserna blir således följande:

• jQuery
• jQuery UI
• Web Storage (localstorage)

Kalendern ska märka ut dagens datum och även visa en indikation på de dagar som har event knutna till sig. Jag funderade länge på att göra en enkel drag implementering där man skulle kunna dra ut nya event för varje dag men jag slopade den tanken då det krävs en hel del för att få det att fungera på ett tillfredställande sätt. Vid inmatning av event så finns det här även en tanke att det ska vara användarbaserat och att olika användare kan skapa olika event men det är för tidskrävande för den här kursen och således kommer datat som matas in komma från en och samma användare.

Jag har delat upp tiden för de olika projektdelarna på följande vis:

• 25% – Research om hur jQuery UI fungerar.
• 25% – Research kring hur Web Storage API:et i HTML 5 fungerar.
• 50% – Implementation.

Usecase

• Användaren startar applikationen och får fram kalendern med aktuell månad.
• Användaren kan bläddra mellan månader och datum.
• Man får en indikation av dagens datum.
• Användaren kan mata in ett nytt event genom att klicka på ett plus som dyker upp för varje dag.
• Datum som har ett event knytna till sig markeras på ett speciellt sätt.
• Användaren för musen över ett datum med ett event och får fram information kring eventet.
• Användaren kan ta bort ett event genom att klicka på en papperskorg knutet till eventet.
• Användaren kan uppdatera ett event genom att klicka på någon av texten och helt enkelt skriva in ny text.

Grafiska skisser

Jag insåg att det blir rätt svårt att sätta en struktursdesign innan man vet ungefär hur kalendern kommer te sig rent visuellt. Därför gjorde jag skisser på hur kalendern skulle se ut och hur den fungerar när man interagerar med den. Så skisserna skapades utifrån de usecases som jag definierade.

Objekt

Jag kommer att arbeta med två huvudsakliga objekt:

Calendar

Calendar objektet är det som kommer att visa själva kalendern, rita ut dagar och sköta navigeringen mellan månader. Det objektet kommer också ha funktioner för att skapa och hämta event. Calendar objektet innehåller följande privata variabler:

• id
• year
• month

Funktionerna för objektet är för närvarande dessa:

• showCalendar()
• getEvents()
• createEvent()
• deleteEvent(id)

Event

Event objektet kommer sedan ha funktioner för att visa och dölja meddelanden som är knytna till ett event som i sin tur är knytna till ett datum i kalendern. Event objektet kommer att ha följande privata variabler:

• id
• title
• place
• time

Event objektets funktioner som jag kan komma på nu (kan dyka upp fler under utveckling):

• ShowEvent(id)
• HideEvent(id)

Det finns nu också ett enkelt kodskelett uppsatt på GitHub för att sätta igång.

Nu kommer det att bli 2 intensiva veckor med massor av kodande, inlärning av nya tekniker, slita sig i håret när saker och ting inte går som man tänkt sig osv. Jag ser fram emot det.

Scope

Scope är något som är relativt enkelt att förstå men däremot svårare att förklara. Varje del av Javascript koden körs i en specifik kontext. Säg till exempel att vi skapar en funktion och definierar en variabel i den funktionen, då går det inte att komma åt den variabeln utanför funktionen. Den kan man bara komma åt inuti funktionen, dess kontext. Det är det scopet vi befinner oss i när vi exekverar kod i den funktionen.

This

För att reda ut vad this hänvisar till gäller det att ha koll på i vilket scope man befinner sig. Vi kan titta på det här exemplet:

var object = {
    number: 10,
    tellMeTheNumber: function() {
        document.write(this.number);
    }
};
object.tellMeTheNumber();

Exempel på jsFiddle

Eftersom funktionen är en del av objektet object så hänvisar this till objektet. Så det vi hämtar ut är objektets egenskap number.

Closures

Ska jag vara ärlig har jag aldrig riktigt förstått vad closures betytt i Javascript världen men efter lite läsning så börjar jag få insikt i det hela. Closures som jag har uppfattat det är en variant av scope och kan definieras som regional, den är mer än lokal men inte global. Till exempel om man definierar en funktion i en funktion så kan man ifrån den nästlade funktionen komma åt variablar definierade i förälderfunktionen. Vi tittar på följande kod som exempel:

function tree(){
    this.leaf = 'Ett löv';
    this.leaf2 = 'Ett annat löv';
    var myLeaf = this.leaf;
    this.branch = function() {
        growMethod = myLeaf;
        return growMethod;
    }
}
var instance = new tree();
document.write(instance.branch());

Exempel på jsFiddle

Som vi ser här så kommer den anonyma funktionen branch() åt värdet myLeaf i förälderfunktionen tree() när vi anropar den. Det här är den uppfattning som jag fått som definierar vad closures är.

Prototypal inheritance

Jag hade absolut ingen aning om vad Prototypal inheritance stod för men efter att ha läst en artikel av Douglas Crockford börjar jag få lite insikt. Prototypal inheritance står för objekt som kan ärva ifrån objekt. Man kan skapa en funktion som tar ett objekt som argument och skapa en ny instans av objektet ifrån funktionen. Skulle man inte sätta alla egenskaper på den nya instansen så ärvs dessa ifrån originalobjektet. Så här ser koden ut som Crockford beskrev:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

Exempel på jsFiddle

Partial application

Jag hade heller aldrig hört talas om partial application begreppet innan jag började läsa på. Som jag förstått definitionen av partial application så är det att skapa en funktion som returnerar en annan funktion där en del av argumenten är fördefinierade. Vi tar och kikar på ett exempel:

function multiplier(number) {
    return function(n) {
        return n * number;
    };
}
var multiply5 = multiplier(5);
var sum = multiply5(10);
document.write(sum);

Exempel på jsFiddle

Här har vi funktionen multiplier som returnerar en ny funktion. Lägg också märke till hur vi använder closure här för att få ut värdet av number i våran inneslutande funktion.

Recursion

Recursion eller rekursion som det heter på svenska står för funktioner som anropar sig själva. Jag har aldrig tidigare använt det i praktiken men ett exempel som man skulle kunna göra är att skapa en loop utan att behöva använda for eller foreach. Vi skulle kunna göra såhär:

function recursion(number) {
    number++;
    if (number <= 10) {
        document.write(number + '<br />');
        recursion(number);
    }
}
recursion(0);

Exempel på jsFiddle

Unlimited arguments

Ja det är alltså möjligt att skicka med argument till en funktion som inte tar några parametrar. Dessa kommer man sedan åt genom arguments variabeln.

function renderView() {
    return arguments[1];
}
var view = renderView(1, 2, 3);
document.write(view);

Exempel på jsFiddle

Här så skickar vi in några parametrar till funktionen renderView som sedan skickar tillbaka den andra parametern, detta till trots att renderView är definierad att inte ta några parametrar. Jag har svårt att se användningsområdet för detta men det är möjligt att jag kommer ställas inför situationer då jag finner funktionaliteten användbar.

Sammanfattning

Det här var ett riktigt intressant steg i kursen och det har blivit mycket läsning och forskning kring dessa begrepp, jag känner att jag lärt mig en hel del men samtidigt att det finns mycket kvar att lära. Jag har också provat på att använda jsFiddle för kodsnuttarna vilket jag tycker är ett riktigt gediget verktyg som jag kommer fortsätta använda under kursen.

Skrivmiljö

Eftersom jag ofta brukar hoppa lite mellan plattformar (Windows/Mac) så har jag lite olika editorer som jag är fäst vid. När jag kör Mac så är Coda helt oslagbar enligt mina ögon, den är väldigt enkel att använda, ser snygg och avskalad ut samtidigt som den är otroligt kraftfull och kan byggas på med plugins om man behöver mer funktionalitet. Jag har även hört mycket gott om TextMate men aldrig kommit över att pröva den då jag trivs så pass bra med Coda som den är.

Dreamweaver

När jag sitter på Windows har jag dock haft svårare att komma över en editor som jag trivs med. I tidiga dagar satt jag ofta med Dreamweaver men den försvann i mitt användande ganska snabbt, jag tycker att den är rätt krånglig och jag minns att det var massa onödigt jobb som behövde läggas bara för att lyckas utöka funktionaliteten med tillägg. Dessutom är den riktigt ful och känns seg att starta upp. Nej jag kommer inte att använda Dreamweaver.

Visual Studio

Sedan provade jag Visual Studio till stor del på grund av kurser inom .NET vilket gjorde användningen av nämnd editor obligatorisk. Jag fattade aldrig riktigt tycke för Visual Studio då jag tyckte installationen var rätt överväldigande och gränssnittet var alldeles för mycket Windows för min smak, inte så konstigt med tanke på att det är Microsofts programvara men ändå jag kommer inte att använda Visual Studio.

Notepad++

Jag har nu en tid kört Notepad++, främsta anledningen för att den är enkel och snabb. Jag saknar dock mycket funktioner som tex autocomplete mm som standard vilket gör att jag skulle vilja ha en mer gedigen editor men som ändå är snabb att sätta upp och enkel att använda.

Aptana Studio

Aptana är en editor som jag har hört mycket gott om för Windows miljö. Den är snabb att starta upp och det finns ordentligt med resurser för att installera tillägg och även det verkar vara en rätt enkel process. Med tanke på inbyggt stöd för JSLint och JsDoc så blir den mitt val när jag sitter på Windows miljö.

Kod i molnet

Jag har även testat Mozillas Bespin som är en kodeditor direkt i webbläsaren. En ganska häftig idé men det känns inte som att det håller för större projekt, användningsområdet känns mer för om man ska demonstrera något under en föreläsning eller liknande.

Coda

Som jag nämnt tidigare så är Coda min absoluta favoriteditor när jag sitter på Mac och man tänker inte ens på den när man utvecklar. Det är så en editor ska vara, så perfekt att man inte lägger märke till den. För att implementera JSLint så använder jag det här pluginet (tack Michelle Sanver!).

Testmiljö

Firefox är verkligen min ”top of the line” av webbläsarna vid utveckling. Resurserna som finns att tillgå är nästan oändliga tack vare dess mängd av gedigna tillägg som kan installeras. Google Chrome har dock seglat upp som en konkurrent på senaste tiden tack vare verktyg som Web Inspector och Pendule. Chrome slår dock Firefox rejält på fingrarna när det gäller snabbhet vilket gör att jag använder Chrome vid vanlig internetanvändning.

Givetvis testar jag också i Internet Explorer 7 och uppåt men det är inte direkt något primärt val vid utveckling. Safari testar jag väldigt sällan, det har blivit så eftersom både Chrome och Safari bygger på WebKit som renderingsmotor så de två fungerar oftast väldigt lika och behöver enligt min mening inte testas separat. Jag testade mycket i Opera tidigare men tack vare den dåliga globala användningen av webbläsaren har jag släppt den en hel del.

Så efter lite diskussion fram och tillbaka blir min testmiljöuppsättning således Firefox beväpnat med Firebug och Web Developer och Chrome med Web Inspector och Pendule som backup.

Var dock uppmärksam på att jag inte bestämt mig vilken typ av applikation jag vill göra än. Ifall det blir en desktopapplikation eller mobilapplikation så kommer givetvis testmiljön att ändras.

Versionshanteringsmiljö

Jag har hört mycket om Git och GitHub och hur bra det ska vara att använda, men jag har själv aldrig använt mig av det. Under kursen är det obligatoriskt att använda sig av dessa och det känns riktigt spännande faktiskt. Mitt GitHub konto hittar ni på johannesholmberg/RIA.

Filmiljö

För att hantera filer kommer jag att använda mig av molntjänsten Dropbox. Dropbox är helt fantastiskt och när det visade sig att det var en obligatorisk del i kursen så var det nästan så att man gjorde ett glädjeskutt bakom tangentbordet. Jag har tidigare skrivit inlägg om varför Dropbox är så bra att använda.

Munsbitsmiljö

Det här med att spara kodsnuttar tycker jag är en intressant aspekt och som kan spara mycket tid under utvecklingsfasen. Jag gillar Codas inbyggda funktion Clips för att lagra korta snuttar kod som jag återanvänder rätt ofta, nackdelen är att det sparas lokalt. Jag har även tittat på Mac programmet Snippets som är mer gediget men fortfarande saknar jag funktionen att spara i molnet.

I samband med den här kursen tänkte jag ta och titta på jsFiddle som verkar riktigt intressant, där kan man skapa ett konto, dela med sig och ta del av kodsnuttar från hela världen. Vi får se vad jag tycker om tjänsten efter lite användande.

Det är så att kursen är uppdelad i 8 steg och för varje slutfört steg ska ett blogginlägg skrivas. Stegen ser ut som följer:

• Steg 0 – Hello World – Presentation.
• Steg 1 – Utvecklingsmiljö – Sätt upp en fungerande utvecklingsmiljö.
• Steg 2 – Avancerad Javascript – Forska kring avancerade Javascriptbegrepp.
• Steg 3 – Applikationsidé och design – Börja skissa på en applikation.
• Steg 4 – Implementation – Utveckla applikationen och dess funktionalitet.
• Steg 5 – Användargränssnitt - Fokus på gränssnitt och design.
• Steg 6 – Fördjupning – Presentation av ett ämne man valt att fördjupa sig inom.
• Steg 7 – Postludium - Avslutande tankar och utvärdering.

För er som vill veta mer om mig kan ni läsa detta blogginlägg eller kika i sidfoten.

Min relation till Javascript

Jag har alltid varit fascinerad över vad man kan åstadkomma med Javascript och det är ett riktigt kraftfullt språk om man använder det korrekt. Oftast använder jag Javascript för att ”krydda” webbsajterna i form av tex validering av formulär, dropdown menyer, göra ajax requests mm. Till min hjälp använder jag oftast ramverket jQuery som underlättar otroligt när man vill påverka element i DOM strukturen.

Senaste tiden har jag ofta tänkt att jag kan alldeles för lite om Javascript och vill verkligen lära mig mer. Därför är jag riktigt taggad nu när den här kursen sätter igång och hoppas att jag får många nya fina färdigheter när den väl är avslutad.

Kort om Evernote

Evernote lanserades under 2008 och var då helt enkelt en webbtjänst för att skapa anteckningar. Idag har Evernote verkligen växt på sig och är en riktigt komplett tjänst som jag har svårt för att vara utan. I Evernote kan man skapa olika anteckningsböcker för olika situationer, tex kan man ha en anteckningsbok för sitt arbete och en för privatliv.

Det går även att tagga alla anteckningar så tex om man som jag har flertalet listor i min privata anteckningsbok så taggas dom med ”Listor” och smidigt och enkelt kommer jag åt allt ifrån shoppinglistor till nyårslöften.

I anteckningarna sparas också positionen dom skrevs ifrån vilket gör att man kan sortera anteckningar utifrån platser dom skrev från också. Ljud, bilder och hela webbsidor kan man också spara direkt i Evernote. Ibland när jag inte hinner skriva en anteckning är det väldigt smidigt att spela in en snabb röstmemo för att komma ihåg en viss tanke eller idé.

Evernote är till och med så smart att det läser av text i de bilder du lägger in. Om du behöver komma ihåg något som tex står på en skylt så kan du fota skylten och lägga in i Evernote. Du kan sedan söka efter texten som står på skylten och Evernote hittar igen anteckningen. Suveränt!

Det har även tillkommit funktionalitet för att dela anteckningar eller hela anteckningsböcker med andra Evernotekonton. Det innebär att man tex skulle kunna använda tjänsten i projekt där man är flera som ska kunna redigera samma texter.

Det digitala konceptet

Jag tycker det är beundransvärt det Evernote lyckats skapa, dom har verkligen gjort det fullständiga digitala konceptet – iPhone applikation, iPad applikation och Mac applikation. Och allt synkroniseras via molnet! Hur underbart är inte det?

Sammanfattning om Evernote

Evernote har idag ungefär 6 miljoner användare och är den anteckningstjänst som jag tror kommer växa än mer inom en kort framtid. Jag gillar Evernote!

Evernote

Evernote är en fantastisk tjänst som låter dig skapa anteckningar direkt i molnet. Jag använder deras iPhone applikation nästan dagligen för att skapa anteckningar och korta reminders när jag är ute och flänger.

TV.nu

Tv.nu är applikationen som jag haft i princip sedan jag skaffade min iPhone. Det finns inget bättre sätt att kolla vad som går på tv än att slänga fram telefonen och dra igång appen. På några sekunder har jag full koll över tv-tablån.

Spotify

Så fort Spotify kom som en iPhone app så blev jag premium användare hos tjänsten och det ångrar jag inte en sekund. Ni vet alla vad Spotify är och att kunna ha tillgång till all världens musik vart än du befinner dig är nästan för bra för att vara sant.

Cleartune

Så fort gitarren ska stämmas här hemma så kör jag igång Cleartune. Det är otroligt enkelt med en väldigt tydlig display och gitarren är stämd på ett par få sekunder.

Runkeeper PRO

Ja det blir roligare att motionera när man använder Runkeeper. Jag körde igång min löpträning under våren förra året och jag har Runkeeper att tacka för att jag än idag håller igång med min motion. Den är så enkel att använda, ett tryck i applikationen så är man igång. Runkeeper PRO kostar i vanliga fall 75 kr men under januari är den gratis (för att hjälpa människor infria sina nyårslöften säger Runkeeper själva).

Mina utgifter

Den här iPhone applikationen är väldigt bra för att hålla koll på hur du spenderar dina pengar. Jag kan säga att den har hjälpt mig att bland annat köpa mindre skräpmat eftersom jag svart på vitt kan se hur mycket jag lägger ut. Det ger en extra kick när man ser att det går åt rätt håll.

TargetWeight

Det här är knappast den snyggaste applikationen för att hålla reda på din vikt men den gör verkligen det den ska och den har sporrat och hjälpt mig att gå ner de kilon som jag ville under förra året.

Wikiamo

Så fort det är något ämne som jag funderar över och vill veta mer om så använder jag Wikiamos iPhone app för att söka på Wikipedia. Jag gillar den, den är bara så smidig att använda.

Swedbank

Swedbanks applikation kom som en räddare i nöden och har varit flitigt använd i min telefon. Det är så skönt att slippa fundera på ifall man har pengar på sitt betalkort innan man går hemifrån, jag kan föra över pengar medan jag är på väg till butiken istället.

Det här är de applikationer som jag använder i princip varje dag och som jag inte skulle klara mig utan. Har du några egna favoriter som är ett måste i din iOS enhet, dra en kommentar vetja!