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

Web Bites

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Matthew Buchanan Matthew Buchanan
November 13, 2008
Technology
140
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
160
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
410
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
Platform Engineering as a Product: Criteria for Improvement and Multi-Tenant Design
Avatar for Kumo Ishikawa kumorn5s
0
490
形式手法特論：公平性制約の位相的特徴づけ #kernelvm / Kernel VM Study Kansai 12th
Avatar for y_taka_23 ytaka23
1
710
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
200
Diagnosing performance problems without the guesswork
Avatar for Elena Tanasoiu elenatanasoiu
0
160
AI Testing Talks: Challenges of Applying AI in Software Testing: From Hype to Practical Use
Avatar for Exactpro exactpro
PRO
1
110
プラットフォームエンジニア ワークショップ/ platform-workshop
Avatar for Databricks Japan databricksjapan
1
260
Unlocking the Apps
Avatar for Tim Perry pimterry
0
200
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
Avatar for Takanobu Nozawa takapy
0
110
生成 AI × MCP で切り拓く次世代 SRE！自律型運用への挑戦と開発者体験の進化
Avatar for _awache _awache
0
140
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
AI と創る新たな世界 / A New World Created with AI
Avatar for Kenji Saito ks91
PRO
0
110
oracle-to-databricks-migration-with-llm-and-dbt
Avatar for case-k-git casek
1
460

Featured

See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
720
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Done Done
Avatar for chrislema chrislema
186
16k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k

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