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
140

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
150
Pragmatic Approaches to the Mobile Web
Avatar for Matthew Buchanan matthewbuchanan
0
110
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
300
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
GoとWasmでつくる軽量ブラウザUI
Avatar for kyo keyl0ve
0
130
あすけん_Developers_Summit_2026_-_Vibe_Coding起点での新機能開発で__あすけん_が乗り越えた壁.pdf
Avatar for iwahiro iwahiro
0
790
LY Tableauでの Tableau x AIの実践 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
240
ソフトウェアアーキテクトのための意思決定術: Create Decision Readiness—The Real Skill Behind Architectural Decision
Avatar for Koji SHIMADA snoozer05
PRO
7
2k
NW構成図の自動描画は何が難しいのか?/netdevnight3
Avatar for m.hagiwara corestate55
2
440
Oracle Cloud Infrastructure データベース・クラウド：各バージョンのサポート期間
Avatar for oracle4engineer oracle4engineer
PRO
57
47k
『誰の責任？』で揉めるのをやめて、エラーバジェットで判断するようにした ～感情論をデータで終わらせる、PMとエンジニアの意思決定プロセス～
Avatar for coconala_engineer coconala_engineer
0
1.7k
器用貧乏が強みになるまで ～「なんでもやる」が導いたエンジニアとしての現在地～
Avatar for KAKEHASHI kakehashi
PRO
5
550
欲しいを叶える個人開発の進め方 / How to Run an Indie Project That Brings Your Ideas to Life
Avatar for Endo_Hizumi endohizumi
0
350
技術書を出版するまでの1161時間50分38秒
Avatar for Kakeami kakeami
0
160
AIで「ふとした疑問」を即座に検証する 〜定量で圧倒するN1理解〜
Avatar for KAKEHASHI kakehashi
PRO
3
740
使って学ぼう MCP (と GitHub Codespaces)
Avatar for Yuta Matsumura tsubakimoto_s
1
220

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
140
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4.9k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
140
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
120
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
140
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.7k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
200
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
180

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