September 7, 2014 at 23:55

A few interesting and useful things for web developer # 27

    Good day, dear Khabravchians. Recently, I saw several interesting and useful tools / libraries / events that I want to share with Habr.

    Highcharts.js



    Recently, I have been frequenting with libraries designed to build graphs and charts. But you can’t argue against trends on GitHub with 2500+ stars, and when there is plenty to choose from, it’s always good. Highcharts.js is a powerful tool based on SVG and VML rendering with many plugins. The disadvantage of this project is the license, which allows the script to be used only for non-commercial purposes. I would also like to draw your attention to the fact that such a project was chosen by such companies as Yandex, Facebook, Twitter, Yahoo, AT&A, Nokia, etc.


    Chartart.js



    And another similar library with responsive charts. Simple syntax, CSS animations, Jasmine tests and detailed documentation thanks to JSDoc.
    /* Добавляем набор данных */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
    series: [
    {
      data: [1, 2, 3, 5, 8, 13]
    }
  ]
};
/* Указываем базовые опции  */
var options = {
  axisX: {
    labelInterpolationFnc: function(value) {
      return 'Calendar Week ' + value;
    }
  }
};
/* Корректируем отображения в зависимости от разрешения экрана    */
var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];
/* Инициализируем */
Chartist.Line('#my-chart', data, options, responsiveOptions);


    Senna



    A wonderful script for creating lightning-fast single-page sites. It is important to emphasize that the developers paid a lot of attention to routing and solved typical problems for typical libraries related to SEO, link transfer, history and browser cache. Senna.js weighs only 8kb and provides a simple and understandable API divided into three categories: Routes, Screens and Data attributes.

    Timesheet



    This wonderful tool allows you to display information on a timeline. 
    new Timesheet('timesheet', 2002, 2013, [
  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
  ['2003', 'Had very bad luck'],
  ['10/2003', '2006', 'At least had fun', 'dolor'],
  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
  ['07/2005', '09/2005', 'Bad luck again', 'default'],
  ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
  ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
  ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
  ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
  ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);


    UIlang A rapid prototyping language created for web designers: clicking on ".try-it" toggles class "hidden" on ".info-box"




    Western thoughts or what it would be worth translating into Habré:




    Says and shows Habr:




    Finally:




                                                             Previous Collection (Issue 26)

    I apologize for any typos. If you notice a problem - please write in a personal.

    Thank you all for your attention.

    Only registered users can participate in the survey. Please come in.

    Do you like the selection?

    • 90.3% Yes 450
    • 9.6% No 48
    498 users voted. 88 users abstained.
    Tags:

    Also popular now: