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
74
Better Code Design in PHP
afilina
PRO
1
490
Effortless Software Development
afilina
PRO
1
210
Writing Testable Symfony Apps
afilina
PRO
0
260
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
260
Avoid Costly Framework Upgrades
afilina
PRO
2
1.5k
Fantastic Bugs and How to Avoid Them
afilina
PRO
1
970
Adding Tests to Untestable Legacy Code
afilina
PRO
4
1k
You Don't Need More Developers
afilina
PRO
5
1.4k
Other Decks in Programming
See All in Programming
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
SIMD Parallel Programming with the Vector API
josepaumard
0
160
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
150
Ruby GitHub Packages
bkuhlmann
0
630
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
930
Rethinking UI building strategies @ SFI 2024
letelete
0
270
新宿ダンジョンを可視化してみた
satoshi7190
2
250
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
320
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
330
Featured
See All Featured
A Philosophy of Restraint
colly
197
16k
GraphQLとの向き合い方2022年版
quramy
32
12k
Building Applications with DynamoDB
mza
88
5.6k
Unsuck your backbone
ammeep
663
57k
How STYLIGHT went responsive
nonsquared
92
4.8k
RailsConf 2023
tenderlove
4
540
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Building Your Own Lightsaber
phodgson
99
5.7k
Being A Developer After 40
akosma
57
580k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.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