Étiqueté : js RSS Activer/désactiver les fils de commentaires | Raccourcis clavier

  • light_viz

    light_viz 10:18 le 20/03/2014 Permaliens
    Étiquettes : , canvas, , , , divs, html, , js, render, ,   

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

    What’s the perf now (2014 updated 2015 updated 2016 updated 2017) between SVG, Canvas and simple DOM modification?

    demo_svg_canvas_html

    Go to check http://devsigner.org/benchmark.html

     

    And a quick comparaison:

     

    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.

     
  • light_js

    light_js 03:21 le 25/01/2013 Permaliens
    Étiquettes : axis, component, , , , js, , , 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: [cc lang= »javascript »]d3.svg.axis = function() {
    function axis() { console.log(‘I draw an axis!’) }
    }[/cc]

    Then, you inject your private variables and private methods.

    [cc lang= »javascript »]
    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
    }
    [/cc]

    Now, come the « public methods » which can be accessor to your private variables.

    And return the object.

    [cc lang= »javascript »]
    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;
    }
    [/cc]

    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!

     
  • light_js

    light_js 01:39 le 25/01/2013 Permaliens
    Étiquettes : average, developper, focus, future, , , js, 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

     

     
  • light_js

    light_js 22:18 le 07/10/2012 Permaliens
    Étiquettes : , , , demo, , flash, , icons, , js, 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.

     

     
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