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
PRO
August 14, 2012
Programming
1
430
JavaScript Tools and Frameworks Faves
Anna Filina
PRO
August 14, 2012
Tweet
Share
More Decks by Anna Filina
See All by Anna Filina
Semi-Automated Refactoring and Upgrades with Rector
afilina
PRO
0
66
Better Code Design in PHP
afilina
PRO
1
480
Effortless Software Development
afilina
PRO
1
200
Writing Testable Symfony Apps
afilina
PRO
0
240
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
240
Avoid Costly Framework Upgrades
afilina
PRO
2
1.5k
Fantastic Bugs and How to Avoid Them
afilina
PRO
1
960
Adding Tests to Untestable Legacy Code
afilina
PRO
4
1k
You Don't Need More Developers
afilina
PRO
5
1.3k
Other Decks in Programming
See All in Programming
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
270
マイ隙間家具OSSたちのご紹介
karupanerura
2
160
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
140
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
850
オブジェクトしこう
okuramasafumi
2
130
ONE WEDGE_Company_Information
1wedge
0
180
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Designing for Performance
lara
601
67k
Typedesign – Prime Four
hannesfritz
36
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Navigating Team Friction
lara
177
13k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Clear Off the Table
cherdarchuk
82
310k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Statistics for Hackers
jakevdp
789
220k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Debugging Ruby Performance
tmm1
68
11k
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