Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
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
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
150
.NET 10の概要
Avatar for tomokusaba tomokusaba
0
120
生成AI時代におけるグローバル戦略思考
Avatar for Takaaki Yayoi taka_aki
0
200
Python 3.14 Overview
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
120
エンジニアリングをやめたくないので問い続ける
Avatar for estie | エスティ estie
2
1.2k
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
150
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
130
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
Avatar for 74th(Atsushi Morimoto) 74th
3
3.4k
今年のデータ・ML系アップデートと気になるアプデのご紹介
Avatar for Nayuta S. nayuts
1
500
初めてのDatabricks AI/BI Genie
Avatar for Takaaki Yayoi taka_aki
0
200
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
Avatar for Bo-Yi Wu appleboy
0
360
[デモです] NotebookLM で作ったスライドの例
Avatar for Takaaki Tanaka kongmingstrap
0
160

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
110
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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