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.


    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.


    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);


    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.


    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:


                                                             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

    Also popular now: