JS Plugin - Speaker Deck

Slide 1

Slide 1 text

LeoNguyen.com

Slide 2

Slide 2 text

Outline - References (javascript.leonguyen. com/references.html) - Repositories (javascript.leonguyen. com/repositories.html) - Library - Framework - Input - Display - Display Data List - Display Drawing - Display Chart - Display Schedule - Display Photo Slideshow - Display Content Slideshow - Display Media - Layout - Text - Animation & Effect - Media

Slide 3

Slide 3 text

Library

Slide 4

Slide 4 text

Underscore.js - underscorejs.org

Slide 5

Slide 5 text

Library (Cont) - Vanilla.js (vanilla-js.com) - PHPJs (http://phpjs.org) - Functions.js (bit.ly/1bKJDjw) - Rye (ryejs.com) - Templating: + Knockout (http://knockoutjs.com) + Backgrid.js (http://wyuenho.github.com/backgrid/#examples)

Slide 6

Slide 6 text

Library (Cont) - Server: Shell.js (bit.ly/115PCZ8) - Process Images: Responsive Img (responsiveimg.com) - Conpress: JSZip (bit.ly/1b10QEK) - RequireJs (requirejs.org) - Hello.js (adodson.com/hello.js) - Crossroads.js (bit.ly/15Y1IrR) - PhantomJS (phantomjs.org) - Basket.js (bit.ly/1krNt5a) - Collaboration: TogetherJs (togetherjs.com)

Slide 7

Slide 7 text

Framework

Slide 8

Slide 8 text

Backbone.js - backbonejs.org

Slide 9

Slide 9 text

AngularJS - angularjs.org

Slide 10

Slide 10 text

Others - Modernizr (http://modernizr.com) - Ember.js (emberjs.com) - AdminJS (adminjs.com)

Slide 11

Slide 11 text

Input

Slide 12

Slide 12 text

Input - Touch: QuoJS (bit.ly/GOBBbA) - Label Better (bit.ly/I4irib) - iOS 7 style switches (bit.ly/1l3Lxjy) - jquery-autotab (bit.ly/K8Bppb) - InstantClick (instantclick.io) - Powerful Tree Editor (jaredly.github.io/treed/)

Slide 13

Slide 13 text

Input - Keyboard - Keypress (dmauro.github.io/Keypress) - Mousetrap (bit.ly/1eios3H) - Cheet.js (bit.ly/1dTL9jT)

Slide 14

Slide 14 text

Input - Button - Ladda (bit.ly/LWyqjZ)

Slide 15

Slide 15 text

Input - Date - Flatmin responsive calendar (bit.ly/1bX579o) - Pikaday (bit.ly/1a5SID9)

Slide 16

Slide 16 text

Input - Select - Pikaday (bit.ly/1a5SID9) - Select.js (bit.ly/1dcRGA8)

Slide 17

Slide 17 text

Input - Search - Fuse.js (bit.ly/1b12ztG)

Slide 18

Slide 18 text

Input - Upload - Dropzone.js (www.dropzonejs.com) - FileAPI (mailru.github.io/FileAPI)

Slide 19

Slide 19 text

Input - Editor - CKEditor (ckeditor.com) - Tinymce (www.tinymce.com)

Slide 20

Slide 20 text

Input - Drag / Drop - Dragdealer (bit.ly/115QtsB) - Drag and Drop table (bit.ly/197SyGb) - Sortable (bit.ly/1jGNIsz) - Interact.js (interactjs.io)

Slide 21

Slide 21 text

HTML5

Slide 22

Slide 22 text

Input - Upload - Resumable.js (resumablejs.com) - html5sql (html5sql.com)

Slide 23

Slide 23 text

Input Form

Slide 24

Slide 24 text

Simple Cart JS - simplecartjs.org

Slide 25

Slide 25 text

Display

Slide 26

Slide 26 text

Display - Favicon: Favico.js (bit.ly/1hGqdK4) - Screenfull.js (bit.ly/1c7R8e2) - Slip.js (bit.ly/1cUFZ50) - Magnifier.js (bit.ly/KeKhZM) - Bootstrap Tour (bootstraptour.com) - Perimeter.js (bit.ly/1bAnKSX) - Headroom.js (bit.ly/1970x96) - Swipe.js (swipejs.com) - Wow.js (bit.ly/1fN3L1P)

Slide 27

Slide 27 text

Display - Menu - Responsive Navigation (bit.ly/14st7jZ) - Box Accordion Menu (bit.ly/14sthI0) - jQuery pop menu (bit.ly/1aoOZRk)

Slide 28

Slide 28 text

Display Data List

Slide 29

Slide 29 text

Display Data List - List: + List.js (listjs.com) - Data table: + Recline (reclinejs.com) + Dgrid (bit.ly/13tTPGJ) + tablesort (bit.ly/1c7egfI) - jQuery Feeds (bit.ly/1f7V8kf)

Slide 30

Slide 30 text

Display Drawing

Slide 31

Slide 31 text

Display Drawing - Raphaël (raphaeljs.com) - Fabric (fabricjs.com) - Timeline (timeline.verite.co) - Snap.svg (snapsvg.io) - Svg.js (svgjs.com) - Sigma.js (sigmajs.org)

Slide 32

Slide 32 text

Display Chart

Slide 33

Slide 33 text

Display Chart - NVD3 (nvd3.org) - CHAP Links Library (bit.ly/127ZUuo) - Springy (getspringy.com) - Chart.js (chartjs.org) - D3.js (d3js.org) - C3.js (c3js.org)

Slide 34

Slide 34 text

HTML5

Slide 35

Slide 35 text

Display Chart - Kinetic.js (kineticjs.com) - EasyStar.js (easystarjs.com) - Envision.js (bit.ly/1fe20KA) - Chart.js (chartjs.org) - Aristochart (bit.ly/1jMuAss) - Canvas Query (canvasquery.com) - Gauge.js (bit.ly/1d9uOl2) - Heatmap.js (bit.ly/1fe3fJS) - Joint.js (jointjs.com) - deck.js (bit.ly/LrnZoK) - Cus.js (cutjs.org)

Slide 36

Slide 36 text

Text

Slide 37

Slide 37 text

Format - Formatter.js (bit.ly/1mJUj3v) - Surgar.js (sugarjs.com) - Accounting.js (bit.ly/18qEM1P) + Formatting Numbers With Accounting.Js (bit.ly/1iahZxl) - Numberal.js (numeraljs.com) - Moment.js (momentjs.com) - xDate (arshaw.com/xdate/) - Date.js (datejs.com) - Later.js (bunkat.github.io/later/)

Slide 38

Slide 38 text

String - String.js (stringjs.com) - Complete.ly (complete-ly.appspot.com) - Chance.js (chancejs.com) - Microtext.js (bit.ly/1iKQNDO)

Slide 39

Slide 39 text

Other - Math.js (mathjs.org) - zxcvbn.js (bit.ly/1ga9Abk) - Highlight.js (bit.ly/158a7VD) - Countable (bit.ly/13MJdPa)

Slide 40

Slide 40 text

Media

Slide 41

Slide 41 text

Media - Music Portfolio (bit.ly/17ujgrT) - Web-Audio (bit.ly/1aAMG9z) - MediaElement.js (mediaelementjs.com)

Slide 42

Slide 42 text

HTML5

Slide 43

Slide 43 text

Media - Audio - Audio5Js (bit.ly/17ujgrT) - Buzz (bit.ly/1eibDKm)

Slide 44

Slide 44 text

Animation & Effect

Slide 45

Slide 45 text

GSAP - Green Sock Animation Platform - www.greensock.com

Slide 46

Slide 46 text

Animation & Effect - Effect: + PaintbrushJS (bit.ly/1283ZPa) + Filter (bit.ly/158atM8)

Slide 47

Slide 47 text

Animation & Effect (cont) - Animation: + Animatable (bit.ly/15xYqGP) + Animate.css (daneden.me/animate) + Moto (darsa.in/motio) + Liffect (ademilter.com/lab/liffect) + CreateJs (www.createjs.com) + Interactive SVG (bit.ly/18vEv16)