Ein paar interessante und nützliche Dinge für Webentwickler # 27

    Guten Tag, liebe Khabravchians. Vor kurzem habe ich einige interessante und nützliche Tools / Bibliotheken / Veranstaltungen gesehen, die ich mit Habr teilen möchte.

    Highcharts.js



    In letzter Zeit habe ich häufig mit Bibliotheken gearbeitet, die zum Erstellen von Grafiken und Diagrammen entwickelt wurden. Bei GitHub mit über 2500 Sternen kann man sich jedoch nicht gegen Trends wehren, und wenn Sie eine große Auswahl haben, ist das immer gut. Highcharts.js ist ein leistungsstarkes Tool, das auf SVG- und VML-Rendering mit vielen Plugins basiert. Der Nachteil dieses Projekts ist die Lizenz, mit der das Skript nur für nichtkommerzielle Zwecke verwendet werden darf. Ich möchte Sie auch darauf aufmerksam machen, dass dieses Projekt von Unternehmen wie Yandex, Facebook, Twitter, Yahoo, AT & A, Nokia usw. ausgewählt wurde.


    Chartart.js



    Und noch eine ähnliche Bibliothek mit reaktionsschnellen Diagrammen. Einfache Syntax, CSS-Animationen, Jasmin-Tests und detaillierte Dokumentation dank 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



    Ein wunderbares Skript zum Erstellen blitzschneller, einseitiger Websites. Es ist wichtig zu betonen, dass die Entwickler dem Routing viel Aufmerksamkeit schenkten und typische Probleme für typische Bibliotheken in Bezug auf SEO, Linkübertragung, Verlauf und Cache im Browser lösten. Senna.js wiegt nur 8 KB und bietet eine einfache und verständliche API, die in drei Kategorien unterteilt ist: Routen, Bildschirme und Datenattribute.

    Arbeitszeittabelle



    Mit diesem wunderbaren Tool können Sie Informationen auf einer Zeitachse anzeigen.
    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 Eine Sprache für Rapid Prototyping, die für Webdesigner erstellt wurde: Klicken auf ".try-it" schaltet die Klasse "hidden" auf ".info-box" um




    Westliche Gedanken oder was es wert wäre, in Habré übersetzt zu werden:




    Sagt und zeigt Habr:




    Endlich:




                                                             Vorherige Sammlung (Ausgabe 26)

    Für Tippfehler bitte ich um Entschuldigung. Wenn Sie ein Problem bemerken - schreiben Sie bitte eine persönliche.

    Vielen Dank für Ihre Aufmerksamkeit.

    Nur registrierte Benutzer können an der Umfrage teilnehmen. Bitte komm rein .

    Gefällt dir die auswahl

    • 90,3% Ja 450
    • 9,6% Nr. 48

    Jetzt auch beliebt: