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
Web Bites
Search
Matthew Buchanan
November 13, 2008
Technology
2
130
Web Bites
Presented to the Auckland Web Meetup (20x20 format), November 2008.
Matthew Buchanan
November 13, 2008
Tweet
Share
More Decks by Matthew Buchanan
See All by Matthew Buchanan
Better Letters
matthewbuchanan
2
140
Pragmatic Approaches to the Mobile Web
matthewbuchanan
0
100
Zero to Hero, a jQuery Primer
matthewbuchanan
8
400
Map Local and other works of Staggering Genius
matthewbuchanan
1
130
The State of Web Type
matthewbuchanan
5
290
Tumblr 20x20
matthewbuchanan
3
170
Web Typography
matthewbuchanan
5
340
Other Decks in Technology
See All in Technology
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
550
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
200
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
440
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
370
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
240
KotlinConf 2025_イベントレポート
sony
1
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Done Done
chrislema
185
16k
Building Applications with DynamoDB
mza
96
6.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Transcript
Matthew Buchanan Transmit + Docksend www.panic.com/transmit/
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan Transmit + Docksend
Matthew Buchanan jQuery www.jquery.com
jQuery JavaScript library by John Resig et al • Interoperable
• Compact filesize • Concise notation • Uses CSS selectors • Extensible • Popular Matthew Buchanan jQuery
Hosted by Google <head> … <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.2.6/jquery.min.js"></script> …
</head> Matthew Buchanan jQuery
jQuery function jQuery("#wrap p") jQuery("p") jQuery("p:last") Shorthand $("#wrap p") Matthew
Buchanan jQuery
Collections $("#wrap p") returns a collection of every <p> inside
element #wrap Methods $("#wrap p").addClass("intro") $("#wrap div").each(function(div) { … }) Matthew Buchanan jQuery
Event Handlers $("a").click(function(ev) { $(this).css({ font-size: 200% }); ev.preventDefault(); });
Causes every anchor to double in size when clicked Matthew Buchanan jQuery
Page load $(document).ready(function() { … }); Or, for the really
concise: $(function() { … }); Matthew Buchanan jQuery
Chaining $("a").addClass("hidden").hide().html("Gone.") Ajax $("#intro").load("path/to/file.html") Matthew Buchanan jQuery
Example by Karl Swedberg $(function() { var txt = "";
$("h2 a").each(function() { txt = $(this).text() .replace(/ (\w+)$/," $1"); $(this).html(txt); }); }); Matthew Buchanan jQuery
Example $(function() { $("#nav a.search").click(function() { $("#searchbar").slideToggle("fast"); }); }); Matthew
Buchanan jQuery
Matthew Buchanan Typophile Forums www.typophile.com/forum/
Matthew Buchanan Typophile Forums “Logo is custom, but GOOD uses
Vista Sans and Trade Gothic No. 20 Condensed Bold [in]each issue.” —Stephen Coles “The logo was hand-drawn by Arnaud Mercier. … We use Vista, Benton, Trade Gothic Bold Condensed, Sabon, and Doric Bold … for bold ledes.” —Scott Stowell
Matthew Buchanan Fin matthewbuchanan.name