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

Web Bites

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

Web Bites

Presented to the Auckland Web Meetup (20x20 format), November 2008.

Avatar for Matthew Buchanan

Matthew Buchanan

November 13, 2008

More Decks by Matthew Buchanan

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

Other Decks in Technology

See All in Technology
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
7.6k
PostgreSQL 19 新機能概要 OSC Hokkaido 2026
Avatar for Noriyoshi Shinoda nori_shinoda
0
250
フィジカル版Github Onshapeの紹介
Avatar for shiba_8ro shiba_8ro
0
330
From Prompt Engineering to Loop Engineering
Avatar for shibuiwilliam shibuiwilliam
1
240
#エンジニアBooks 30分でわかる
「技術記事を書く技術」 / engineer-books 2026-06-30
Avatar for Junichi Ito jnchito
1
100
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
210
iOS アプリの「これって不具合ですか？」を AI に調べてもらう
Avatar for Yuki Miida miichan
0
140
起点・思考・出力で分解する 〜PM業務の自動化設計〜
Avatar for kazu_kichi_67 kazu_kichi_67
2
1.1k
時期が悪い！それでもRaspberry Piを買って遊んで活用するには / 20260627-osc26do-rpi-jikigawarui
Avatar for Akira Ouchi akkiesoft
1
840
[AWS Summit Japan 2026]迷っているあなたへ_小さな一歩が、やがて自分を助けてくれる
Avatar for sh_fk2 sh_fk2
2
420
AIチャット検索改善の3週間
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
180
AIが自律的に回る開発ループを設計してチーム開発に組み込む
Avatar for Mitsuhiro Komuro (nekorush14) nekorush14
0
130

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
310
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
980
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
340
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
470
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
250
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k

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