JQVMap är en jQuery-plugin som gör kartor med vektorbaserad grafik. Den använder Scalable Vector Graphics (SVG) för moderna webbläsare som Firefox, Safari, Chrome, Opera och Internet Explorer 9. Legacy-stöd för äldre versioner av Internet Explorer 6-8 tillhandahålls via VML.

Det medkommer ett antal kartor över världen, USA och Europa som är färdiga att använda. Det finns flera konfigurationsmöjligheter som färger, kantlinjer och opacities.

Kort och gott innebär detta att du, när du kör ett Mavenkommando, talar om för Maven att gå igenom ett antal faser och att exekvera de mål som hör till varje fas.

Illustration över Mavens olika nivåer

Maven har tre inbyggda livscykler:

• default (även kallad build) som hanterar deployment
• clean som sköter rensning av projekt
• site som hanterar projektdokumentering

Var och en av dessa cykler innehåller ett antal faser som representerar ett specifikt steg i cykeln. Exempelvis innehåller defaultcykeln fasen compile som ansvarar för kompilering av källkoden. Trots att varje fas har en specifik uppgift kan sättet den utför sin uppgift på variera då det är de mappade målen som i slutändan bestämmer vad som faktiskt sker. Vilka mål som knyts till vilken fas bestäms dels och framöverallt genom sättet artefakten paketerats men också genom de plugins som sugs in i projektet.

Som bilden ovan visar kan ett mål kan vara knutet till ett, flera eller inga faser precis som en fas kan innehålla noll eller flera mål. Ett fristående mål kan exekveras utanför livscykeln samtidigt som ett mål mappat mot flera faser körs en gång för varje mappning. Faser innehållandes multipla mål exekverar dessa i samma ordning som de deklarerats i POM:en. Däremot kommer en fas utan några mål aldrig att exekveras.

Defaultcyklen – för många användare den mest betydelsefulla cykeln då den fungerar som en generell modell för en applikations byggprocess – innehåller sammanlagt 23 faser. Nedan listar jag de mest framträdande av dessa:

Validate
Bekräftar att projektet är korrekt och att all information som behövs för att slutföra ett bygge finns tillgänligt.

Compilie
Komplilerar källkoden.

Test
Testar den kompilerade koden mot uppsatta tester.

Package
Paketerar den kompilerade koden till ett distribuerbart format (exempelvis .jar).

Integration-test
Om så är nödvändigt läggs den paketerade koden ut i en miljö anpassad för att köra integrationstester i.

Verify
Kör uppsatta kontroller för verifiering av paketets giltighet samt kontrollerar att paketet möter alla kvalitetskriterier.

Install
Installerar paketet i det lokala repot och kan nu användas som ett beroende i andra projekt lokalt.

Deploy
Kopierar det slutgiltiga paketet till ett remote repo för delning med andra projekt och utvecklare.

Utöver dessa faser tillkommer mellanfaser vilka bland annat hanterar förberedelser som att kopiera och flytta resurser till rätt kataloger samt post-process-steg som att städa upp efter körda tester. Här hittar ni den kompletta listan över faser.

JavaScriptMVC (JMVC) är ett open source-ramverk med motivationen att hjälpa dig som klientutvecklare att bygga strukturerade, skalbara JavaScript-applikationer av hög kvalitet. Byggt ovanpå jQuery erbjuder JMVC en samling best-practices och verktyg där man plockat ut det bästa från jQuery i avsikt att bringa ordning i röran: jQueryMX, StealJS, FuncUnit och DocumentJS.

jQueryMX

jQueryMX består av ett gäng jQuery-bibliotek vars syfte är att tillhandahålla den struktur och organisation man många gånger saknar i jQuery-tunga applikationer. jQueryMX kommer bland annat med specialevents som drag-and-drop, DOM extensions och language helpers som förenklar hantering av JavaScript-data.

Utöver detta inför jQueryMX även MVC-tänket i JavaScript med sina $.Model-, $.View- och $.Controller-plugins. Dessa olika delar kan användas tillsammans eller separat vilket innebär att du endast inkluderar de plugins du faktiskt kommer att ha användning för.

MVC-upplägget fungerar enligt förväntan:

• Modellen kapslar in service- och datalagret och kommunicerar via JSON-baserade REST-anrop.
• Vyn renderar modelldata som hämtats från servern.
• Controllern lyssnar på events och sköter kommunikation mellan modellen och vyn.

StealJS

StealJS är en samling verktyg som gör det enkelt att bygga, paketera och dela JavaScript-applikationer. Verktygen kommer med en mängd trevliga egenskaper:

• StealJS är bra på Dependency Management.
• StealJS hjälper dig bygga ihop dina JS- och CSS-filer till en enda komprimerad produktionsfil.
• StealJS kan användas för att generera projektstrukturer.
• StealJS kommer med stöd för SVN och GIT.
• StealJS möjliggör code cleaning och validering via JSLint.
• Och som en liten bonus kan StealJS göra din AJAX-app crawlable.

FuncUnit

FuncUnit är ett testramverk med ambitionen att göra enhetstestning och funktionell testning av webbapplikationer enklare och – som de själva säger – roligare! Med en jQuery-liknande syntax skriver, kör och debuggar du dina tester direkt i browsern (fungerar för IE 6+, FF 2+, Safari 4+, Opera 9+ och Chrome) och samma tester kan, via Selenium, också automatiseras. FuncUnit stödjer simulering av user actions såsom typing, clicking, dragging och scrolling.

Nedanstående kod, vilken testar att en AutoSuggest returnerar fem resultat, får fungera som exempel på ramverkets hyfsat okomplicerade syntax:

module("autosuggest",{
 setup: function() {
   S.open('autosuggest.html')
 }
});

test("JavaScript results",function(){
 S('input').click().type("JavaScript")

 // wait until we have some results
 S('.autocomplete_item').visible(function(){
   equal( S('.autocomplete_item').size(), 5, "there are 5 results")
 })
});

DocumentJS

DocumentJS tillhandahåller, precis som namnet avslöjar, verktyg för dokumentering av JavaScript-kod. DocumentJS hjälper dig generera, organisera, granska och underhålla din dokumentation och, precis som i alla andra delar av JavaScriptMVC, ligger fokus på användarvänlighet och enkelhet.

Men det finns hjälp att tillgå, låt oss ta en titt på det dynamiska CSS-språket {less} som genom förkompilering ger oss möjlighet att använda variables, mixins, operations och functions.

Ange variabler som du kan återanvända

// instruktion i less
@color: #4D926F;
#header {color: @color;}
h2 {color: @color;}

/*kompilerat CSS Resultat*/
#header {color: #4D926F;}
h2 {color: #4D926F;}

Mixins, inbäddning av css värden:

// instruktion i less
.rounded-corners (@radius: 5px) {
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

#header {.rounded-corners}
#footer {.rounded-corners(10px);}

/*kompilerat CSS Resultat*/
#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#footer {
     border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

Nästlade regler

// instruktion i less
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

/*kompilerat CSS Resultat*/
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}

Operations and functions

Att hantera relativa fontstorlekar i procent beräknat utifrån pixlar är ett vanligt case. Vi utgår från en basstorlek på 13px och skapar en funktion som returnerar ett procenttal utifrån önskad pixel- och basstorlek:

// instruktion i less
@basefontsize: 13;

.fontresizer(@fontsize: 13px)  {
    font-size: percentage(@fontsize/@basefontsize);
}
.classx { .fontresizer(); }

/*kompilerat CSS Resultat*/
.classx{ font-size: 100%;}

// instruktion i less
.classx{ .fontresizer(20px);}

/*kompilerat CSS Resultat*/
.classx{font-size: 153.846%;}

Ett annat vanligt förekommande behov är att reducera instruktioner för så kallade imagesprite-bakgrunder

// instruktion i less
.sprite(@offset-x: 0, @offset-y: 0) {
    background: url("../sprites/icons.png") scroll no-repeat @offset-x @offset-y;
}
.classx {.sprite(100%, -100px);
}

/*kompilerat CSS Resultat*/
.classx{ background: url("../sprites/icons.png") scroll no-repeat 100% -100px;}

Installera och använd {less}

Less kan användas såväl från klienten (Chrome, Safari och Firefox för lokal utveckling) som från servern med Node.js och Rhino. Använder du Maven rekommenderar jag denna plugin för kompilering av {less}-resurser till CSS-filer.

Som Mac-användare kan du även använda {less}-appen från CodeKit i din lokala utvecklingsmiljö

Cygni består idag av drygt 40 killar och tjejer i åldrarna 25-58. Vi har några av Stockholms absolut vassaste frontendutvecklare och satsar nu stenhårt på att utöka vår frontendavdelning med ytterligare frontendexperter.

För att trivas som frontendutvecklare på Cygni måste du vara grym på JavaScript och webstandards. Du ska ha stenkoll på begrepp såsom progressive enhancement och responsive design, vara väl insatt i nyheterna hos HTML5 och CSS3 och inte ha några problem med att skicka JSON över HTTP. Du är bekväm med Git och strävar ständigt efter att ligga i framkant när det gäller nya tekniker. Att jobba agilt är en självklarhet för dig och du brinner för att leverera kod av högsta kvalitet.

Absolut viktigast är dock att du är en relationsbyggare som trivs i konsultrollen!

Om du vill vara en del av ett ungt företag som har Stockholms bästa konsulter, fantastisk gemenskap, roliga kunder samt ett exceptionellt bra förmånspaket – skicka då ett mejl med din ansökan till rekrytering@cygni.se.

På Cygni kör vi utvecklingssamtal 1 gång per år och dessa är i full gång. Det är fantastiskt roligt att ringa till kunderna för få feedback – alla är lyriska över den nivå som Cygnikonsulterna håller och vi visar gång på gång att vi är Stockholms bästa IT-konsulter!

CommonJS är ett initiativ startat för tre år sedan under namnet ServerJS av Kevin Dangoor. Det syftar till att göra JavaScript till ett seriöst alternativ som serverplattform. CommonJS innehåller ett antal API-specifikationer, exempelvis för filsystemaccess, hantering av binärdata, kommandoradsargument och utmatning till konsol. Dessutom finns en specifikation för modulhantering: CommonJS Modules. Enligt denna specifikation publicerar man variabler och funktioner med exports och importerar dem med require. Så här kan en modul se ut:

movieFinder.js

var priv = [];

exports.add = function (item) {
    priv.push(item);
};

exports.findAll = function () {
    return priv;
};

Variabeln priv är inte tillgänglig utanför modulen. Det är däremot funktionerna add och findAll, eftersom de lagts till objektet exports. Om en modul behöver importera en annan görs det med require:

movieLister.js

var finder = require("./movieFinder");

exports.moviesDirectedBy = function (arg) {
    var hasDirector = function (movie) {
        return movie.getDirector() === arg;
    };

    return finder.findAll().filter(hasDirector);
};

Dessa två moduler kommer bara att finnas i ett exemplar vardera. Om man istället behöver en klass där man kan instansiera objekt tilldelar man en konstruktor till exports:

Movie.js

var constructor = function (title, director) {
    return {
        getTitle: function () {
            return title;
        },

        getDirector: function () {
            return director;
        },

        toString: function () {
            return title + " by " + director;
        }
    };
};

module.exports = constructor;

Notera att det här är ett av många sätt att skriva konstruktorer i JavaScript. Douglas Crockfords JavaScript: The Good Parts har ett helt kapitel om detta. Huvudmodulen kan sedan se ut så här:

main.js

var Movie = require("./Movie");
var movieFinder = require("./movieFinder");
var movieLister = require("./movieLister");

movieFinder.add(Movie("Terminator", "James Cameron"));
movieFinder.add(Movie("Blade Runner", "Ridley Scott"));
movieFinder.add(Movie("Titanic", "James Cameron"));

var movies = movieLister.moviesDirectedBy("James Cameron");

for (var i = 0; i < movies.length; i++) {
    console.log(movies[i].toString());
}

För att allt det här ska fungera behöver man naturligtvis en implementation av CommonJS Modules. På serversidan implementerar exempelvis Node.js specifikationen. Om man skriver kod som ska köras i browsern kan man bland annat välja på inject och require.js.

Detta avtal befäster Cygnis ställning som en ledande leverantör av konsulttjänster till företag vars webbtjänster har exceptionella krav på prestanda, säkerhet och användbarhet.

Det finns redan mängder med tutorials över hur man sätter upp Google-konton på sin iPhone men jag har upplevt det aningen problematiskt att synka multipla Google-kalendrar och tänker mig att detta inlägg får fungera som en steg för steg-guide över hur jag fick till synkningen. Jag har en iPhone 3GS med iOS 5 och använder mig av Google Sync för synkronisering.

Har du inte redan satt upp ett Google-konto på din iPhone följer du dessa steg:

1. Under inställningsmenyn på din iPhone väljer du E-post, kontakter, kalendrar
2. Lägg till konto
3. Välj att skapa ett Microsoft Exchange-konto (vilket är det protokoll Google Sync använder vid synkronisering till iPhone)

4. Under E-post fyller du i din fullständiga e-postadress
5. Lämna domänfältet tomt
6. Fyll i din fullständiga e-postadress under Användarnamn
7. Skriv in lösenordet för ditt Google-konto
8. Klicka på Nästa
9. När fältet Server poppar upp fyller du i m.google.com
10. Klicka på Nästa
11. Välj vad du vill synka (denna guide kräver att du åtminstone väljer att synka kalendrar)

Setup av synkroniseringen är nu klar och beroende på vad du i steg 11 valde att synka kommer det nu att pushas ut information till din iPhone.

Med Google Sync kan du synka upp till 25 kalendrar på din iPhone vilket man enkelt ska kunna sätta upp genom att surfa in på http://m.google.com/sync och logga in på sitt konto. Här stötte jag dock på problem. Sidan talade om för mig att Google Sync tyvärr inte kunde stödja min enhet eftersom jag var tvungen att ha iOS 3 eller senare – något som jag uppenbarligen hade då jag precis uppdaterat till iOS 5.

Efter en tids undersökning kunde jag konstatera att detta var en bugg fler användare upplevt och en konsekvens av att Google Sync befinner sig i ett beta-stadie. Sajten kräver att sidan presenteras på engelska och det du behöver göra för att komma runt problemet är att byta språk från svenska till just engelska enligt nedan steg:

12. Med din iPhone, surfa in på http://m.google.com/sync
13. För att ändra språk klickar du på länken Byt språk (jag valde English (UK))
14. Sidan laddas om och du har nu möjlighet att logga in. Gör detta genom att klicka på Sign in with your Google Account
15. Du möts nu av de enheter du har satt upp ditt Google-konto på och genom att klicka dig in på de olika enheterna kan du välja exakt vilka kalendrar du vill synka

16. Efter att ha valt vilka kalendrar du vill synka och klickat på Save är du klar

När du nu lägger till, editerar eller tar bort händelser i dina kalendrar kommer dessa speglas på alla enheter du synkat enligt ovan steg – detta gäller självfallet oberoende av om du gör förändringarna i kalendern på din iPhone eller i webbgränssnittet på din dator.

Cygni har de senaste åren framgångsrikt levererat konsulttjänster till majoriteten av de största svenska mediebolagen. Det nya avtalet med Svenska Dagbladet är ytterligare ett i raden av bevis för att Cygnis spetskompetens är efterfrågad i mediebranschen.