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
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
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.5k
20260804_Q4AzureUpdateBite_FabricDataAgentの精度を高める設計.pdf
Avatar for matayuuu matayuuu
1
130
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
230
20分でわかるセキュアAPI
Avatar for nwiizo nwiizo
2
270
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
Avatar for kuroneko kuroneko13
0
120
【AG-UI × A2UI × MCP Apps】Generative UIをやさしく解説する
Avatar for NRI Netcom nrinetcom
PRO
1
120
SmartHR Engineering Team Deck
Avatar for SmartHR Recruit smarthr
1
2.1k
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
24k
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
Avatar for Etsuji Nakai enakai00
7
4.4k
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
170
MIRU 2026 チュートリアル
Avatar for Keisuke Fujii keisuke198619
0
910
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
3.8k

Featured

See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
520
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
180
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
630
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k

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