Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Tools and Frameworks Faves
Search
Anna Filina
August 14, 2012
Programming
1
470
JavaScript Tools and Frameworks Faves
Anna Filina
August 14, 2012
Tweet
Share
More Decks by Anna Filina
See All by Anna Filina
Upgrading Legacy to the Latest PHP Version
afilina
1
120
Better Code Design in PHP
afilina
0
250
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
160
Better Code Design in PHP
afilina
1
420
Better Code Design in PHP
afilina
0
570
Adding Tests to Untestable Legacy Code
afilina
0
360
Upgrading Legacy to the Latest PHP Version
afilina
0
380
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
280
Better Code Design in PHP
afilina
1
740
Other Decks in Programming
See All in Programming
Swift Updates - Learn Languages 2025
koher
2
490
Ruby Parser progress report 2025
yui_knk
1
450
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
520
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Reading Rails 1.0 Source Code
okuramasafumi
0
240
楽して成果を出すためのセルフリソース管理
clipnote
0
160
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
rage against annotate_predecessor
junk0612
0
170
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
Designing for Performance
lara
610
69k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
309
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Producing Creativity
orderedlist
PRO
347
40k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Scaling GitHub
holman
463
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Become a Pro
speakerdeck
PRO
29
5.5k
Transcript
FooLab JavaScript Tools and Frameworks Faves JS Montreal - August
14, 2012 Anna Filina
FooLab Anna Filina 2 • PHP Quebec - user group
• ConFoo - non for profit Web conference • FooLab Inc. - IT consulting • I write code, coach programmers and solve problems.
FooLab Content • jQuery and jQuery UI • Image cycle,
popup and table sorter plugins • Benchmark.js • Highcharts • Plupload • 9 examples 3
FooLab jQuery Framework
FooLab Example: Votes 5 http://conference/js-faves/jquery-dom.html
FooLab <a class="btnVote" href="#">-1</a> <a class="btnVote" href="#">+1</a> <span class="minus"></span> <span
class="neutral"></span> <span class="plus"></span> 6
FooLab $(".btnVote").click(onVoteClick); function onVoteClick() { var votes = plus +
minus; var minusWidth = Math.floor(minus/votes*100); $(".minus").css("width", minusWidth + "%"); $(".votes").html(votes); ... } 7
FooLab var status = $('<span class="status">'+value+'</span>'); $("body").append(status); status.css({ "top": btn.offset().top,
"left": btn.offset().left }).animate({ "top": "-=30", "opacity": 0 }, 600, "linear", onStatusComplete); function onStatusComplete() { status.remove(); } 8 +1 +1
FooLab Why jQuery • Easy to learn and to use
• Fast and lightweight • Well documented • Complete and extensible • Big community 9
FooLab jQuery Plugins Easily add advanced functionality
FooLab Example: Image Cycle 11 http://conference/js-faves/jquery-cycle.html
FooLab Code: Image Cycle 12 <div id="cycle"> <img src="img/image1.jpg" />
<img src="img/image2.jpg" /> </div> <div id="cycle-navigation"></div> $("#cycle").cycle({ fx: "scrollLeft", speed: 500, timeout: 2000, pager: "#cycle-navigation" });
FooLab Example: Popup 13 http://conference/js-faves/jquery-popup.html
FooLab Code: Popup 14 <a href="jquery.html" class="popup"> What is jQuery?
</a> $("a.popup").nm();
FooLab Example: Table Sorter 15 http://conference/js-faves/jquery-tablesorter.html
FooLab Code: Table Sorter 16 <table class="sortable"> <thead> <tr> <th>Country
(airport)</th> <th>Speakers</th> <th>Fare</th> </tr> </thead> <tbody>...</tbody> </table> $("table.sortable").tablesorter();
FooLab Why jQuery Plugins • Most plugins are easy to
use • Over 5,000 plugins • Speed up your development • Download JS, include and call function 17
FooLab jQuery UI Common UI widgets and behaviors
FooLab Example: Tabs 19 http://conference/js-faves/jquery-tabs.html
FooLab Code: Tabs 20 <div id="tabs"> <ul> <li><a href="#tickets">Tickets</a></li> <li><a
href="#new">New</a></li> </ul> <div id="tickets">...</div> <div id="new">...</div> </div> $("#tabs").tabs();
FooLab Code: Tabs 21 <li><a href="page.html">My tickets</a></li> $tabs.tabs("add", "#tab-1", "Title");
$tabs.find(".ui-tabs-nav").sortable({ axis: "x" }); cookie: { expires: 7 }
FooLab Example: Date 22 http://conference/js-faves/jquery-datepicker.html
FooLab Code: Date 23 Date: <input type="text" class="date"> $("input.date").datepicker();
FooLab Features: Date 24 { dateFormat: "d M, y", minDate:
-20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide" }
FooLab Why jQuery UI • Better support than 3rd party
plugins • Complex widgets made easy • Well documented • Themes 25
FooLab Benchmark.js Performance testing
FooLab Example 27 http://conference/js-faves/benchmark.html
FooLab Code 28 var suite = new Benchmark.Suite; suite.add("tablesort#sort", function()
{ $("#tablesort thead th:first").click(); });
FooLab Code 29 suite.on("cycle", function(event, bench) { console.log(String(bench)); }); suite.run({
async: false, minSamples: 20, maxTime: 5 });
FooLab Highcharts Interactive charts
FooLab Example: Highcharts 31
FooLab Example: Highcharts 32 http://conference/js-faves/highcharts.html
FooLab Code: Highcharts 33 <div id="chart"></div> new Highcharts.Chart({ chart: {
renderTo: "chart" }, xAxis: { categories: data } });
FooLab Features: Highcharts 34 tooltip: formatter: function() { return "<b>"
+ this.point.name + "</b>"; }, plotOptions...select: { radius: 6, fillColor: "#da7700" }
FooLab Example: Highcharts 35 http://www.highcharts.com/demo/combo-dual-axes
FooLab Why Highcharts • Works with jQuery, MooTools or Prototype
framework • Well documented • Highly customizable • Can spice up any application with charts 36
FooLab Plupload Upload files
FooLab Example: Plupload 38 http://conference/js-faves/plupload.html
FooLab Code: Plupload 39 <div id="uploader"> You browser doesn't support
HTML5, Silverlight or Flash. </div> $("#uploader").plupload({ runtimes: "html5,silverlight,flash", url: "upload.php", rename: true, max_file_count: 20 }
FooLab Why Plupload • Customizable • HTML4 , HTML5, Silverlight,
Flash, Gears, BrowserPlus • Upload multiple files • Queue widget with upload progress • Optional integration with jQuery UI 40
FooLab Go and use! And donate to your favorite projects
FooLab @afilina • jQuery: http://jquery.com/ • jQuery Cycle: http://malsup.com/jquery/cycle/ •
NyroModal: http://nyromodal.nyrodev.com/ • tablesorter: http://tablesorter.com/docs/ • Benchmark.js: http://benchmarkjs.com/ • Highcharts: http://highcharts.com/ • Plupload: http://plupload.com/ • Code on GitHub: https://github.com/afilina/demo_jsfaves 42