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
150
The State of Web Type
Avatar for Matthew Buchanan matthewbuchanan
5
320
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
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.2k
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
Avatar for Masaru Ogura masaruogura
0
230
【試作】IoT x AIエージェント
Avatar for コロッケそば happysamurai294
0
120
JAWS-UG初心者支部#88わいわい初心塾(夏休みの宿題やったかGit編)
Avatar for おーつき otsuki
0
120
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
250
bet_ai_day_2026_session02
Avatar for 株式会社AgenticSec agenticsec
1
970
[RSJ26] AnoleVLA: Lightweight Vision-Language-Action Model with Deep State Space Models for Mobile Manipulation
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
120
[RSJ26] NarrativeFlow: Flow-Based Vision-Language-Action Model Using Robot Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
150
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
Avatar for Databricks Japan databricksjapan
PRO
0
320
PfEingのアプローチで働こう
Avatar for rin（林晃 / Akira Hayashi） rindrics
0
170
Beyond the Hype: Practical AI for Your Oracle Database with MCP
Avatar for thatjeffsmith thatjeffsmith
1
250
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
3
2.1k

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
490
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
290
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
510
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k

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