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
460
JavaScript Tools and Frameworks Faves
Anna Filina
August 14, 2012
Tweet
Share
More Decks by Anna Filina
See All by Anna Filina
Better Code Design in PHP
afilina
0
210
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
120
Better Code Design in PHP
afilina
0
320
Better Code Design in PHP
afilina
0
500
Adding Tests to Untestable Legacy Code
afilina
0
330
Upgrading Legacy to the Latest PHP Version
afilina
0
340
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
230
Better Code Design in PHP
afilina
1
700
Effortless Software Development
afilina
1
300
Other Decks in Programming
See All in Programming
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
490
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
170
生産性アップのためのAI個人活用
kunoyasu
0
470
Compose Navigation実装の見通しを良くする
hiroaki404
0
170
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
3.4k
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
770
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
990
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.6k
AI Agentを利用したAndroid開発について
yuchan2215
0
200
Going Structural with Named Tuples
bishabosha
0
150
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
110
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
220
Featured
See All Featured
Making Projects Easy
brettharned
116
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
A Tale of Four Properties
chriscoyier
158
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
15
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
4 Signs Your Business is Dying
shpigford
183
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Designing for humans not robots
tammielis
250
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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