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
150
Better Code Design in PHP
afilina
1
420
Better Code Design in PHP
afilina
0
560
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
270
Better Code Design in PHP
afilina
1
740
Other Decks in Programming
See All in Programming
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
420
Kiroで始めるAI-DLC
kaonash
2
580
OSS開発者という働き方
andpad
5
1.7k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
670
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
A better future with KSS
kneath
239
17k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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