Spathon

Skapa vektor grafik (SVG) med Snap.svg eller Raphaël

Jag har nu lekt lite med Raphaël som är ett javascript bibliotek för att skapa och modifiera vektor grafik (svg) men även animera och göra interaktivt. När jag satt och testade hittade jag inte riktigt den funktion som jag ville ha nämligen “mask” då jag stötte på Snap.svg skapat av Dmitry Baranovskiy som även är skaparen av Raphaël.js.

Snap.svg är skapat för moderna webbläsare och stödjer där med endast IE9 och uppåt medan Raphaël har support ända ner till IE6. Snap.svg har flera funktioner som mask, gruppering, clipping, pattern m.m. som är riktigt smidigt i många fall. Eftersom Snap.svg är byggt av samma person och är i pincip en ombyggnation av Raphaël så är koden väldigt lik.
Exempel:

// Använd selektor till en svg-tagg eller sätt bredd, höjd för att skapa på plats
var svg = Snap('#id_av_svg'); // 100, 100

// Skapa en rektangel med måtten 60x60 som är 20 från topp & vänster
var rect = svg.rect(20, 20, 60, 60);

// Default är den svart men låt oss göra den röd med en svart kant
rect.attr({
  fill: '#C1353E',
  stroke: 'black',
  strokeWidth: 1
});

När ska du välja vad?

Vet du om att dom flesta har IE9+ eller att den del som du använder SVG till inte har någon större betydelse för upplevelsen eller funktionen på sidan kör på Snap.svg annars använd Raphaël.

Skapa webbappar enkelt med AngularJS

Jag har börjat förälska mig mer och mer i AngularJS som är ett javascript ramverk som utvidgar HTML. Just första stegen med AngularJS är väldigt simpla allt du behöver göra är att sätta attributet ng-app initiera vart AngularJs ska titta, i en “onepage-app” sätt i <html ng-app>.

AngularJS kan koppla ihop input och övrig html utan att behöva skriva någon kod t.ex.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Namn:</label>
      <input type="text" ng-model="dittNamn" placeholder="Fyll i ditt namn">
      <hr>
      <h1>Hej, {{dittNamn}}!</h1>
    </div>
  </body>
</html>

Vi kopplar samman text input med ng-model med namnet “dittNamn” vilket innebär att så fort vi ändrar i input-fältet så kommer modellen dittNamn att uppdateras och om dittNamn skulle ändras någon annanstans så uppdateras input-fältets värde. Längre ner i koden har vi {{dittNamn}} vilket är AngularJS’s sätt att skriva ut värden från modeller, eftersom dittNamn till en början inte har något värde kommer det bara stå “Hej, ” men direkt när du skriver något i textfältet uppdateras {{dittNamn}}. T.ex. om jag fyller i Patrik i textfältet kommer AngularJS direkt uppdatera till “Hej, Patrik” medan jag skriver. Detta exempel kan du testa på Angulars hemsida.

Du kan att stoppa in 2 textfält med ng-model=”dittNamn” och se vad som händer.

Detta är ett väldigt enkelt exempel av Angular, det blir klurigare sen när man börjar jobba med $scope, directives och services men det tar jag upp i senare blogginlägg.

Use nvm in on a production server

Today I was putting up a personal project on a VPS to let friends try it out and thought I would use nvm because the project is using the latest unstable version of node.js. I was also using PM2 to keep the node application alive but when i restarted the server node was not in use. After visiting google i found an article about how to make nvm start node on server restart. The code below copies the current node to a shared folder but it needs to run each time you change node version:

 n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; sudo cp -r $n/{bin,lib,share} /usr/local 

It worked well and as the project was using an unstable version of node I ran in to problem with PM2 but thanks to nvm i easily down graded node from 0.11.12 to 0.11.9.

Handle different versions of Node.js with nvm

When working with different projects for Node.js some of them might need different versions of node and thats when nvm (Node Version Manager) comes in really handy. I have been working on a project that uses Koa.js which requires at least node 0.11.9 and on some other projects I want to use the same version as the live server.

nvm makes it really easy to install, change and remove versions of node.js. After installation it’s as easy as enter nvm install 0.11.9 and nvm use 0.11.9 in the terminal. Visit the github page for instructions on how to install and more instructions how to use nvm

Github nvm

Sida 5 av 10« Första...34567...10...Sista »