JS Plugin

JS Plugin
http://leonguyen.com

Transcript

1. LeoNguyen.com
   

   View 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 Slide

3. Library
   

   View Slide

4. Underscore.js
   - underscorejs.org
   

   View Slide

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

6. 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 Slide

7. Framework
   

   View Slide

8. Backbone.js
   - backbonejs.org
   

   View Slide

9. AngularJS
   - angularjs.org
   

   View Slide

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

    View Slide

11. Input
    

    View Slide

12. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. HTML5
    

    View Slide

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

    View Slide

23. Input Form
    

    View Slide

24. Simple Cart JS
    - simplecartjs.org
    

    View Slide

25. Display
    

    View Slide

26. 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 Slide

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

    View Slide

28. Display
    Data List
    

    View Slide

29. 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 Slide

30. Display
    Drawing
    

    View Slide

31. 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 Slide

32. Display
    Chart
    

    View Slide

33. 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 Slide

34. HTML5
    

    View Slide

35. 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 Slide

36. Text
    

    View Slide

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

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

    View Slide

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

    View Slide

40. Media
    

    View Slide

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

    View Slide

42. HTML5
    

    View Slide

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

    View Slide

44. Animation & Effect
    

    View Slide

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

    View Slide

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

    View Slide

47. 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 Slide