Interesujące biblioteki JavaScript

javascript-html5-tutorial.pl

Interesujące biblioteki JavaScript – zbiór

3 listopada, 2014

Dominik-W

W dzisiejszym artykule zabraliśmy różne interesujące biblioteki JavaScript, z którymi mieliśmy styczność. Wiele z nich może uatrakcyjnić nasze projekty, inne to narzędzia typowo wspierające pracę z kodem.

Tinycon

Zarządzanie ikonką favicon z poziomu JavaScript. Dzięki tej bibliotece możemy manipulować ikoną wyświetlaną na pasku tytułowym zakładki. Możemy np. dodać animację lub dodać bardziej przydatne informacje pobrane via AJAX (np. liczba nowych zdarzeń), gdy użytkownik przegląda zawartość na innych kartach przeglądarki.

Projekt dostępny na GitHub:

https://github.com/tommoor/tinycon

Zmień swoją stronę w wirtualną książkę – Turn.js

Dzięki tej lekkiej bibliotece JavaScript, możemy w dość przyjemny sposób przekształcić treść naszej strony / prezentacji w wirtualną książkę. Podstrony będą wyświetlane jako kolejne strony „książki”. Całość animowana.

Przykład użycia:

HTML

<div id="flipbook">
  <div class="hard"> Turn.js </div>
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

JavaScript

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

Dodajemy okładkę i zawartość. Poniżej przykład działania.

Strona projektu:

http://www.turnjs.com/

Walidacja formularzy z JavaScript i HTML5 – biblioteka Parsley JS

Możliwości walidacji formularzy w HTML5 są interesujące. Dodajmy do tego jeszcze bibliotekę Parsley JS – potężne narzędzie do implementacji rozbudowanej walidacji formularzy. Umożliwia tworzenie custom validators.

Strona projektu:

http://parsleyjs.org/

CSS bez przejmowania się prefiksami przeglądarek

Kolejnym narzędziem jest „-prefix-free”, które wyciąga programistę z „piekła” prefiksów CSS dla różnych przeglądarek. Teraz możemy bardziej skupić się na efekcie końcowym.

Strona projektu:

http://leaverou.github.io/prefixfree/

jQuery Autosize i pole textarea adaptujące się do ilości tekstu

Mamy tutaj bardzo ładny plugin jQuery, dzięki któremu możemy uczynić pole textarea dynamicznym, zwiększającym swoją wysokość automatycznie w miarę wypisywania tekstu przez użytkownika. A animacją lub bez.

Strona projektu:

http://www.jacklmoore.com/autosize/

Timeline JS

Stwórzmy sobie własny Timeline w prosty sposób:

http://timeline.knightlab.com/

Gantt plugin

Planowanie projektu? A może wykres Gantt’a?

Mamy tutaj bardzo dobry plugin, umożliwiający tworzenie interaktywnych wykresów Gantta.

Strona projektu:

http://taitems.github.io/jQuery.Gantt/

Sly – jQuery Directional Scrolling Plugin

Ładne, animowane slajdy na naszą stronę. Dużo możliwości konfiguracyjnych.

Strona projektu:

http://darsa.in/sly/

OK, pora na coś extra.

jQuery Face Detection Plugin

Wykrywanie twarzy na zdjęciach z poziomu JavaScript? Żaden problem dzięki tej bibliotece. Skrypt zwraca współrzędne wykrytych twarzy.

Strona projektu:

http://facedetection.jaysalvat.com/

Templating – szablony w JavaScript

Jak widać to nie tylko domena PHP, również w JavaScript można pracować z szablonami stron lub ich fragmentów:

– Handlebars.js

Przykład:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

var context = {title: "My New Post", body: "Content..."}
var html    = template(context);

WWW:

http://handlebarsjs.com/

– Hogan.js – JavaScript templating from Twitter

WWW:

http://twitter.github.io/hogan.js/

http://www.javascriptoo.com/hogan-js

Podsumowanie

To wszystko w dzisiejszym zbiorze interesujących bibliotek JavaScript. Pracując dalej z HTML5, JS i frameworkami, z pewnością natkniemy się na kolejne, godne uwagi rozwiązania.

Dziękuję.