Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Plugin

LeoNguyen.com
November 17, 2013

JS Plugin

LeoNguyen.com

November 17, 2013
Tweet

More Decks by LeoNguyen.com

Other Decks in Programming

Transcript

  1. LeoNguyen.com

    View full-size slide

  2. 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

    View full-size slide

  3. Underscore.js
    - underscorejs.org

    View full-size slide

  4. 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)

    View full-size slide

  5. 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)

    View full-size slide

  6. Backbone.js
    - backbonejs.org

    View full-size slide

  7. AngularJS
    - angularjs.org

    View full-size slide

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

    View full-size slide

  9. 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/)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Simple Cart JS
    - simplecartjs.org

    View full-size slide

  20. 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)

    View full-size slide

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

    View full-size slide

  22. Display
    Data List

    View full-size slide

  23. 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)

    View full-size slide

  24. Display
    Drawing

    View full-size slide

  25. 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)

    View full-size slide

  26. Display
    Chart

    View full-size slide

  27. 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)

    View full-size slide

  28. 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)

    View full-size slide

  29. 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/)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Animation & Effect

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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)

    View full-size slide