Poster taggade med ‘javascript’

Sida 1/3:123

Nu har alla KTH:are chansen att vinna en iPad i Cygnis programmeringstävling.

Det hela går ut på att vinna vår virtuella pokerturnering genom att programmera den bästa och smartaste pokerbot:en i JavaScript eller Java.

Komma igång

Instruktioner för hur du kommer igång finns på vår pokersajt

Grundkraven för att kunna programmera en pokerbot i Java är att Java SE och Maven finns installerade.

För att kunna programmera en pokerbot i JavaScript krävs att Node.js finns installerat.

Tävlingen

Själva pokerturneringen går av stapeln på vårt kontor vid Humlegården i Stockholm. Vi bjuder på öl, macka och mingel och du är självklart välkommen att kolla på tävlingen även om du inte programmerat någon bot. Den spelare som vinner turneringen vinner förutom äran också en iPad!

Var
Cygni, Sturegatan 34 (3 tr)

När
Torsdag den 15/11 kl. 18:00

Medtag
Laptop med nätverkskort och din pokerspelare

Övrigt

Om du har några frågor är det bara att ställa dem i vårt pokerforum.

I så fall bör du söka jobb på Cygni! Vi är ett konsultbolag med ambitionen att vara Stockholms bästa arbetsgivare för skickliga IT-konsulter.​ Bland våra kunder finns Sveriges Television, Aftonbladet, Eniro, Metro, Com Hem och många andra företag som är ledande inom sin bransch.​ Cygni består idag av drygt 40 killar och tjejer i åldrarna 25-58. Vi har några av Stockholms absolut vassaste frontendutvecklare men vill nu växa och bli fler.

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.

HTML5′s History API kom med pushState vilket kort och gott låter utvecklaren manipulera browser-historiken genom att manuellt peta in URL:ar på historikstacken. pushState är användbart för tillfällen då endast delar av webbsidan behöver laddas om, där det tidigare inte varit möjligt att samtidigt tala om för browsern att byta URL. Med pushState förändrar du URL:en på sidor med dynamiskt innehåll vilket lämnar användaren med en snabbare laddning och fungerande bakåt- och framåtknapp i browsern.

history.pushState(null, "dinosaurs", dinosaurs.html);

Här lägger vi till ett ny historik-post (dinosaurs.html) på stacken och passar samtidigt på att döpa om sidan till ”dinosaurs”.

pjax är ett jQuery-bibliotek som utnyttjar pushState och, som de själva säger, ökar browsingupplevelsen – nothing more.

pjax kan implementeras på ett flertal sätt, här följer ett:

<script type="text/javascript">
    "#nav change": function(el) {
        $.pjax({
            url: el.find(":selected").data("href"),
        	container: "#main"
        });
    }
</script>

<div id="main">
    Hello dinosaurs!
</div>

<select id="nav">
    <option data-href="/home">home</option>
    <option data-href="/dinosaurs" selected="selected">dinosaurs</option>
</select>

I koden anropas funktionen pjax() när användaren byter värde i en select-box. pjax-anropet fungerar i stort sätt som ett vanligt ajax-anrop där det svar vi får tillbaka skrivs ut i den main-container vi plockar ut med selektorn "#main".

Det som slutligen, implicit och per default, sker är ett anorp till pushState där vi lägger till URL:en på stacken. Anropet ser ut något i stil med:

history.pushState(null, $(data).filter('title').text(), '/dinosaurs')

Ett smidigt sätt att öka upplevelsen för användaren.

Vill du labba med pjax hittar du koden här och för ett hands-on-exempel kan du titta närmare på den här koden.

Att skapa interaktiva kartor är ett vanligt förekommande behov för webbsajter. Vill man dessutom undvika en flash-lösning och inte lägga ner arbete på en mer statisk lösning finns nu möjligheten att använda jQuery Vector Maps (JQVMap).

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.

Att skapa och kanske framförallt bibehålla en schyst, begriplig struktur när man kodar JavaScript kan vara en besvärlig uppgift. Stora, dynamiska webbprojekt innebär ofta en stor, JS-tung kodbas som – allteftersom funktionaliteten utökas – kan bli mer och mer svårhanterlig. Koden saknar många gånger organisation, sprids ut och kan i slutändan leda till onödigt invecklad kod som blir svår att underhålla och utöka.

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. Läs mer >>

Att konstruera och underhålla CSS-strukturer och instruktioner för större sajter kan vara nog så tidskrävande. CSS-dokumentationen i sig själv ger inget eget stöd för variabler. Detta leder ofta till att man måste ange samma CSS-värden upprepade gånger i ett CSS-dokument.

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.
Läs mer >>

JavaScript är ett av våra mest underskattade programmeringsspråk. Detta beror på flera saker; det har förmodligen skrivits fler fulhack i JavaScript än i något annat språk, möjligtvis med undantag för Perl. Dessutom har JavaScript några rejäla skönhetsfläckar. De flesta brukar uppröras av jämförelseoperatorerna som ibland gör oväntade typkonverteringar. Personligen tycker jag att avsaknaden av ett modulsystem är värre.

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.

I dagens utvecklingsklimat med smidiga, lättlärda ramverk för att bygga rika gränssnitt med JavaScript är det lätt att underskatta vikten av en förståelse för språket som t ex populära jQuery bygger på.

JavaScript är ett kraftfullt språk, och i nuläget ett av världens mest använda, och Douglas Crockford är den guru (eller mahatma som han själv titulerar sig) som axlat ansvaret att hjälpa världens webbutvecklare att bygga snabba, snygga webbapplikationer på rätt sätt.

I hans numera klassiker, ”Javascript – The Good Parts”, belyser han det bra jämte med det mindre bra i språket Mocha, som blev LiveScript, som blev JavaScript.

Exempelvis illustrerar han fall som t ex nedan där alla returnerar true:

'' == 0
0 == '0'
'' != '0'
NaN != NaN

Men också hur man strukturerar sin kod rätt, vad i språket som bör undvikas och mycket mer.

Utöver hans bok har mannen bakom b la JSON och JSLint givit ett flertal föreläsningar som alla är sevärda. Både bok och föreläsningar rekommenderas varmt för alla webbutvecklare, oavsett språk.

WebSockets är en av de intressanta nyheterna i HTML5. Tanken med WebSockets är att exponera en säker, klientinitierad tvåvägskanal mellan klient och server. Detta gör att man mycket enkelt kan sno i hop t.ex. ett webbaserat chat-program eftersom chat-texten kan skickas direkt till samtliga deltagare utan att behöva mellanlagras som vid t.ex. pollningsbaserade lösningar.

Läs mer >>

Protobuf är en kodningsteknik för att serialisera datastrukturer till ett binärt format som tar mindre plats än t.ex. XML eller JSON. På så sätt lämpar sig protobuf bättre för transport över kanaler där bandbredd är en avgörande resurs.

Protobuf är utvecklat av Google och används enligt uppgift mycket mellan deras interna tjänster. Ramverket tillhandahålls med stöd för C++, Java och Pyton, men en mängd andra språk stöds också genom tredjepartsprojekt: C, C#, JavaScript etc.

Protobuf använder sig av en s.k. schemabaserad kodning, vilket innebär att ett kodat meddelande inte kan avkodas (i alla fall inte fullständigt) utan en beskrivning (ett schema) av datastrukturen. Datastrukturerna definieras i ett speciellt språk.

Läs mer >>

Sida 1/3:123