Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Bites

Avatar for Matthew Buchanan Matthew Buchanan
November 13, 2008
Technology
2
130

Web Bites

Presented to the Auckland Web Meetup (20x20 format), November 2008.
Avatar for Matthew Buchanan

Matthew Buchanan

November 13, 2008
Tweet

More Decks by Matthew Buchanan

See All by Matthew Buchanan
Better Letters
Avatar for Matthew Buchanan matthewbuchanan
2
140
Pragmatic Approaches to the Mobile Web
Avatar for Matthew Buchanan matthewbuchanan
0
100
Zero to Hero, a jQuery Primer
Avatar for Matthew Buchanan matthewbuchanan
8
390
Map Local and other works of Staggering Genius
Avatar for Matthew Buchanan matthewbuchanan
1
130
The State of Web Type
Avatar for Matthew Buchanan matthewbuchanan
5
290
Tumblr 20x20
Avatar for Matthew Buchanan matthewbuchanan
3
170
Web Typography
Avatar for Matthew Buchanan matthewbuchanan
5
330

Other Decks in Technology

See All in Technology
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
Avatar for Yuki Horikoshi yukisnow1823
2
1.2k
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
300
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
240
NW運用の工夫と発明
Avatar for Akira Kanai / recuraki recuraki
1
800
What's Next in OpenShift Q2 CY2025
Avatar for Red Hat Livestreaming redhatlivestreaming
1
830
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
Avatar for Nayuta S. nayuts
1
220
LT:組込み屋さんのオシロが壊れた！
Avatar for windy windy_pon
0
480
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
Avatar for cohalz cohalz
1
490
面接を通過するためにやってて良かったこと3選
Avatar for SansanTech sansantech
PRO
0
140
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
Avatar for 高玉 広和 / TAKATAMA Hirokazu takatama
4
1.5k
技術書典18結果報告
Avatar for Mutz mutsumix
2
180
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.7k

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
BBQ
Avatar for Matthew Crist matthewcrist
88
9.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k

Transcript

  1. Matthew Buchanan Transmit + Docksend www.panic.com/transmit/

  2. Matthew Buchanan Transmit + Docksend

  3. Matthew Buchanan Transmit + Docksend

  4. Matthew Buchanan Transmit + Docksend

  5. Matthew Buchanan Transmit + Docksend

  6. Matthew Buchanan Transmit + Docksend

  7. Matthew Buchanan Transmit + Docksend

  8. Matthew Buchanan Transmit + Docksend

  9. Matthew Buchanan Transmit + Docksend

  10. Matthew Buchanan Transmit + Docksend

  11. Matthew Buchanan Transmit + Docksend

  12. Matthew Buchanan Transmit + Docksend

  13. Matthew Buchanan jQuery www.jquery.com

  14. jQuery JavaScript library by John Resig et al • Interoperable

    • Compact filesize • Concise notation • Uses CSS selectors • Extensible • Popular Matthew Buchanan jQuery

  15. 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

  16. jQuery function jQuery("#wrap p") jQuery("p") jQuery("p:last") Shorthand $("#wrap p") Matthew

    Buchanan jQuery

  17. 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

  18. 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

  19. Page load $(document).ready(function() { … }); Or, for the really

    concise: $(function() { … }); Matthew Buchanan jQuery

  20. Chaining $("a").addClass("hidden").hide().html("Gone.") Ajax $("#intro").load("path/to/file.html") Matthew Buchanan jQuery

  21. Example by Karl Swedberg $(function() { var txt = "";

    $("h2 a").each(function() { txt = $(this).text() .replace(/ (\w+)$/,"&nbsp;$1"); $(this).html(txt); }); }); Matthew Buchanan jQuery

  22. Example $(function() { $("#nav a.search").click(function() { $("#searchbar").slideToggle("fast"); }); }); Matthew

    Buchanan jQuery

  23. Matthew Buchanan Typophile Forums www.typophile.com/forum/

  24. 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

  25. Matthew Buchanan Fin matthewbuchanan.name