Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • avatar

    light_js 10:18 on 20/03/2014 Permalink
    Tags: , canvas, , , , divs, html, , , render, ,   

    SVG vs Canvas vs HTML, what’s the perf now, in 2014? 

    What’s the perf now (2013) between SVG, Canvas and simple DOM modification?

    Based on this awesome demonstration by Sujay Vennam, I wanted to compare perf “as it” without the calculation part.

    demo_svg_canvas_html

    Here is the result : http://devsigner.org/benchmark.html

     

    And a small comparaison (real graph soon) :

     

    Chrome

    chrome

     

     

    Safari

    safari

     

     

    Firefox

    firefox

     

     

    IE10

    ie10

     

     

    Conclusion, Chrome is 62% faster than Firefox, Safari 85% and IE10 67%.

    Firefox is still late, sadly.

     
  • avatar

    light_viz 10:10 on 12/03/2013 Permalink
    Tags: , , , départements, , , open, openfrance, opensource, regions   

    Welcome to Openfrance! 

    Anamorphic maps are very “stylish” visualization morphings

    light_js is opening his first opensourced project: Openfrance

    The goal is to cross datas from different origins about the old frenchy country.

     

    Openfrance

    Feel free to edit or fork the Github Project!

     

    Departments and regions are included.

     

    http://openfrance.lightjs.org

    https://github.com/lightviz/openfrance

     
  • avatar

    light_js 03:21 on 25/01/2013 Permalink
    Tags: axis, component, , , , , , , prototype, ,   

    Javascript part three: “very component oriented” 

    Find back articles from this serie...
    1/ Javascript part one: "very object oriented"
    2/ Javascript part two: "very package oriented"
    2/ Javascript part three: "very component oriented"

    It’s not easy to understand what we call component approach

     

    Component approach

    This is kind of “module pattern” but more limited.

    Even by googling component pattern javascript you won’t find anything yet.

    Some resources about object patterns in javascript: http://link.lightjs.org/modulepattern

    It’s the approach used by the famous D3.js library by Mike Bostock.

    Let’s understand how it’s working: if you are familiar with object pattern, you should know what is public / private variables and public / private methods.

    Components are the best tool to respect it!

     

    Axis D3 component example

    You begin by creating a scope with one function, the constructor:

    d3.svg.axis = function() {
        function axis() { console.log('I draw an axis!') }
    }

    Then, you inject your private variables and private methods.

    d3.svg.axis = function() {
        function axis() { console.log('I draw an axis!') }
        var scale = d3.anothercomponent; // not callable from outside
        function ping() { return 'pong' }; // not callable from outside
    }

    Now, come the “public methods” which can be accessor to your private variables.

    And return the object.

    d3.svg.axis = function() {
        // -- constructor
        function axis() { console.log('I draw an axis!') }

        // -- private section
        var scale = d3.anothercomponent;
        function ping() { return 'pong' };

        // -- public section
        axis.getscale = function() { return scale; }
        axis.constant = '42';

        // -- return the entire object
        return axis;
    }

    You get a component with all (private | public) && (variables | methods).

    This pseudo pattern is not my favorite because it enclosed too much the code into object and complicates interactions with other components. A better pattern should support privates entities but still make it accessible from outside.

    General willing is to well scope and get a clear separation between private and public but not hide or block anything. A softer approach could be an addition of “_” before the first character of private variables like axis._scale

     
    Just a mind, not a rule but I don’t like this pattern, it reduces javascript capabilities! Very adapted for D3.js, component approach match svg drawing loop and make structure very clear but don’t use it for bigger project!

     
  • avatar

    light_js 01:39 on 25/01/2013 Permalink
    Tags: average, developper, focus, future, , , , language, percent, statistic   

    Why should we focus javascript language? 

    I always wanted to know the percent of javascript developers…

     
    Github comparaison language

     
    From Github: https://github.com/languages

    21% of code over the world is made by javascript.

    Welcome to the future.js!

    A more complete article: http://link.lightjs.org/z from @n1k0

     

     
  • avatar

    light_js 22:18 on 07/10/2012 Permalink
    Tags: , , , demo, , flash, , icons, , , morphing, path, polygon   

    “Give lifes to icons!” – demonstration of D3js Javascript HTML5 animations 

    Small demonstration of what can be done with HTML5, javascript D3.js and… simple icons.

     

     
  • avatar

    light_js 23:27 on 06/10/2012 Permalink
    Tags: compile, , external, , library, lightutils, makefile, minified, nodejs, npm, organization, package, shell, structure, uglify, uglifyjs, utils   

    Javascript part two: “very package oriented” 

    Find back articles from this serie...
    1/ Javascript part one: "very object oriented"
    2/ Javascript part two: "very package oriented"
    2/ Javascript part three: "very component oriented"

    Organize your code is quiet complicated when you are on a javascript project. (not speaking about snippets)

     

    First thing to set up is the structure.

     

    This is the most used common organization:

    (file - folder)

    ./
    ./examples
    ./examples/css
    ./examples/images
    ./examples/js
    ./lib
    ./lib/class.js
    ./lib/d3.js
    ./lib/jquery.js
    ./mylib.js
    ./mylib-min.js
    ./src
    ./src/myobj1.js
    ./src/myobj2.js

     

    Second thing, you will quickly want to concat all the files (including external libraries) and to minify it! Let’s go, this is a working Makefile.

    To do it, create a file named ./Makefile in root’s directory of your project then execute shell command “make”.

    NODE_PATH ?= ./node_modules
    JS_COMPILER = $(NODE_PATH)/uglify-js/bin/uglifyjs
    JS_BEAUTIFIER = $(NODE_PATH)/uglify-js/bin/uglifyjs -b -i 2 -nm -ns

    all: \
        lib.js \
        lib.min.js

    lib.js: \
        lib/class.js \
        lib/d3.js \
        lib/jquery.js \
        src/myobj1.js \
        src/myobj2.js

    %.min.js: %.js Makefile
        @rm -f $@
        $(JS_COMPILER) < $< > $@

    lib.js: Makefile
        @rm -f $@
        cat $(filter %.js,$^) | $(JS_BEAUTIFIER) > $@
        @chmod a-w $@

    Translation…

    • it “uglifies” (= obfuscate) each class.js , d3.js, jquery.js, myobj1.js, myobj2.js…
    • it concats all the files together
    • it renders final version like lib.js and lib.min.js
    • (lib.js is the one you can debug from browser)

     

    In addition, to install uglifyjs with node packet manager (in your main project’s folder on Unix eg Ubuntu Fedora)

    aptitude install npm
    npm install uglifyjs

    Another way to test your code is to create examples based directly on source files (not lib.js but including all external files)

     

    You got now the possibility to publish your collection of snippet into a single minified library!

     
  • avatar

    light_js 19:36 on 16/09/2012 Permalink
    Tags: , , data, , , fr, , mbostock,   

    D3.js fun with France 

    Mike Bostock is the famous author of javascript’s library D3.js which manipulates data into browser’s DOM and more precisely into SVG.

    This guy has recently explored geographic side of data’s animation by targeting american area (for New York Time newspaper). For example, this final product, about drought over months : http://bost.ocks.org/mike/drought/

    I don’t want to be “chauvin” but he did geographical animations about USA like his great tool is only dedicated to american demonstrations with this new technologies.

    Based on his California’s example ( http://bl.ocks.org/3081153 ), I wanted to correct it… with a little bit of fun, that’s it!

    [Put you cursor on it]

     
  • avatar

    light_js 16:00 on 25/08/2012 Permalink
    Tags: class, code, , , mvc, , , programmation, ,   

    Javascript part one: “very object oriented” 

    Find back articles from this serie...
    1/ Javascript part one: "very object oriented"
    2/ Javascript part two: "very package oriented"
    2/ Javascript part three: "very component oriented"

    First thing I do when I start a javascript project is to set Classes.

     

    JS is a Class-less language by default, bad bad bad.

    You can still simulate a weird concept of Class with some tricks like this :

     

    // A car "class"
    function Car( model ) {
      this.model = model;
      this.color = "silver";
      this.year = "2012";
      this.getInfo = function () {
        return this.model + " " + this.year;
      };
    }

     

    But if you come from the object-oriented-languages world (Java, C++ or even PHP5) you will quickly feel frustrations. Troubles come from javascript and its way of merging function and variable by forgetting the simple thing that is ‘type’!

     

    And you will feel even more frustrated when you would like to do something you have always done… inheritance. There is no way to natively do it strictly.

     

    And that’s it! :(

     

    I think the most complicated thing to understand from javascript is the “no-rules” rule. You have to create your own pattern to manage your objects. This is linked to the concept of “Metadata Model” which create the model… okay, let’s simplify();

     

    I would like to present what I think is the best javascript oriented object pattern from John Resig which support the needed features for a object js model:

     

    // 1. You can do your mother class
    var Car = Class.extend({
      init: function(model) {
        this.model = model;
        this.color = "silver";
        this.year = "2012";
      },
      getInfo: function() {
        return this.model + " " + this.year;
      }
    });
    // and finally have a real constructor!

    // 2. You can do your inheritance
    var Peugeot = Car.extend({
      init: function() {
        this._super( "Peugeot" );
        this._origin = 'French';
      },
      getInfo: function() {
        return this._origin+this._super();
      },
      origin: function(_) {
        if( arguments ) return this._origin;
        this._origin = _;
        return this;
      }
    });
    // You can even call the mother's function :)

    // 3. You can test object's classes (the greatest thing)
    var car1 = new Peugeot();
    var car2 = new Car('Ferrari');

    if( typeof(car2) == 'Car' && car1 instanceof Peugeot
        && car1 instanceof Car && car1 instanceof Class ) {
      return 'what a good pattern';
    }
    // the thing which most of design patterns for javascript doesn't support..
    // ... just test the intermediate Class of objects

    // 4. And for attentive people we could notice another pattern..
    // - to set origin:
    car1.origin('Deutschland');
    // - to get origin:
    car1.origin();

     

    How is it possible ? It’s just a small file Class.js to ALWAYS INCLUDE in your javascript project. This is a high level definition of this javascript “very object oriented” pattern.

     

    No need to get all this code, just use it!

     

    /* Simple JavaScript Inheritance
    By John Resig http://ejohn.org/   MIT Licensed. */

    // Inspired by base2 and Prototype
    (function(){
      var initializing = false,
            fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
      // The base Class implementation (does nothing)
      this.Class = function(){};
     
      // Create a new Class that inherits from this class
      Class.extend = function(prop) {
        var _super = this.prototype;
       
        // Instantiate a base class (but only create the instance,
        // don't run the init constructor)
        initializing = true;
        var prototype = new this();
        initializing = false;
       
        // Copy the properties over onto the new prototype
        for (var name in prop) {
          // Check if we're overwriting an existing function
          prototype[name] = typeof prop[name] == "function" &&
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?
            (function(name, fn){
              return function() {
                var tmp = this._super;
               
                // Add a new ._super() method that is the same method
                // but on the super-class
                this._super = _super[name];
               
                // The method only need to be bound temporarily, so we
                // remove it when we're done executing
                var ret = fn.apply(this, arguments);        
                this._super = tmp;
               
                return ret;
              };
            })(name, prop[name]) :
            prop[name];
        }
       
        // The dummy class constructor
        function Class() {
          // All construction is actually done in the init method
          if ( !initializing && this.init )
            this.init.apply(this, arguments);
        }
       
        // Populate our constructed prototype object
        Class.prototype = prototype;
       
        // Enforce the constructor to be what we expect
        Class.prototype.constructor = Class;

        // And make this class extendable
        Class.extend = arguments.callee;
       
        return Class;
      };
    })();

    Powerfulness of javascript by a small piece of code which simplifies everything: file Class.js

     

    Let’s design fun UML for javascript now!

     
  • avatar

    light_js 23:54 on 20/08/2012 Permalink  

    Worldwide sharings (datavized) 

    Just one dataviz on ecological things, which makes us think.

     
  • avatar

    light_js 13:35 on 07/07/2012 Permalink
    Tags: , , mobile,   

    HTML5, the good dynamic of mobile / web (datavized) 

    Hard to find a answer to this question : Is HTML5 the next step of mobile apps?

    Nobody knows…

    • Past talks about iPhone and the mistake of “forgetting” native apps. (which has been fixed with Applestore)
    • Flash is still over used by website often because of his capacity to stream correctly video.
    • Microsoft is waiting on his side with metro js framework (which is already dead except if Surface is a success)

    A small dataviz to sum up (sources).

    Well.. we will see!

    Sometimes technologies goes faster than human people behind it.

    A new technology (like HTML5) needs time to be handle by experts and well integrated in companies. That costs time and money…

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel