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
400
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
180
Web Typography
Avatar for Matthew Buchanan matthewbuchanan
5
340

Other Decks in Technology

See All in Technology
AI時代のインシデント対応 〜時代を切り抜ける、組織アーキテクチャ〜
Avatar for Kazuto Kusama jacopen
4
150
pmconf 2025 大阪「生成AI時代に未来を切り開くためのプロダクト戦略：圧倒的生産性を実現するためのプロダクトサイクロン」 / The Product Cyclone for Outstanding Productivity
Avatar for yama@muteki yamamuteki
3
2.8k
AWS Media Services 最新サービスアップデート 2025
Avatar for Eiji KOMINAMI / 小南英司 eijikominami
0
120
持続可能なアクセシビリティ開発
Avatar for azukiazusa azukiazusa1
6
340
Android Studio Otter の最新 Gemini 機能 / Latest Gemini features in Android Studio Otter
Avatar for Yuki Anzai yanzm
0
420
不確実性に備える ABEMA の信頼性設計とオブザーバビリティ基盤
Avatar for Katsutoshi Nagaoka nagapad
4
8.3k
経営から紐解くデータマネジメント
Avatar for Jun Ernesto Okumura pacocat
4
950
Excelデータ分析で学ぶディメンショナルモデリング ～アジャイルデータモデリングへ向けて～ by @Kazaneya_PR / 20251126
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
3
270
変わるもの、変わらないもの ：OSSアーキテクチャで実現する持続可能なシステム
Avatar for gree_tech gree_tech
PRO
0
950
AS59105におけるFreeBSD EtherIPの運用と課題
Avatar for t-umeda x86taka
0
280
Datadog LLM Observabilityで実現するLLMOps実践事例 / practical-llm-observability-with-datadog
Avatar for 逆井（さかさい） k6s4i53rx
0
180
メッセージ駆動が可能にする結合の最適化
Avatar for かとじゅん j5ik2o
9
1.6k

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
420
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
11
940
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k

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