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

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
390
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
290
Tumblr 20x20
Avatar for Matthew Buchanan matthewbuchanan
3
170
Web Typography
Avatar for Matthew Buchanan matthewbuchanan
5
330

Other Decks in Technology

See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
3
1k
Microsoft Defender XDRで疲弊しないためのインシデント対応
Avatar for Kunii, Suguru sophiakunii
1
310
shake-upを科学する
Avatar for Jack rsakata
7
1k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
Avatar for hanayo04 hanayo04
1
400
Amazon SNSサブスクリプションの誤解除を防ぐ
Avatar for y_sakata y_sakata
3
190
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.3k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
Avatar for Takahiro Miyoshi sankichi92
1
1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
Avatar for goldfinch3710 flyaahelpguide
0
240
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会（#AI道場）
Avatar for you（@youtoy） you
PRO
0
1.3k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
Avatar for Anan Kikuchi anank
5
750
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
Avatar for Masaya Hayashi rinchsan
10
5.1k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
230

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Scaling GitHub
Avatar for Zach Holman holman
460
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
700
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k

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