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

Web Bites

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
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
410
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
350

Other Decks in Technology

See All in Technology
Sansanの認証基盤を支えるアーキテクチャとその振り返り
Avatar for SansanTech sansantech
PRO
1
150
AIエージェント時代に必要な オペレーションマネージャーのロールとは
Avatar for KentaroFujii kentarofujii
0
290
遊びで始めたNew Relic MCP、​気づいたらChatOpsな​オブザーバビリティボットができてました/From New Relic MCP to a ChatOps Observability Bot
Avatar for AEON aeonpeople
1
150
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
180
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
3
2.1k
MCPで決済に楽にする
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
170
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
12
7.3k
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
83k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.3k
Databricks Lakehouse Federationで 運用負荷ゼロのデータ連携
Avatar for Kenji Matsuda nek0128
0
110
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.3k
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
Avatar for コロッケそば happysamurai294
0
350

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
240
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Done Done
Avatar for chrislema chrislema
186
16k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
160
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.1k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
260
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
120
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
630
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
250
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.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