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
140
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
FPC(フレキシブル)基板にZephyr実装してみた。
Avatar for misoji engineer iotengineer22
0
170
MUSUBI 田中裕一『AIと共に行う「しごとのリデザイン」- スモールバックオフィス編』AI Ops Lab #4
Avatar for MUSUBI musubi
0
320
クレデンシャル流出 ― 攻撃 3 時間 vs 復旧 10 時間。この非対称性にどう備えるか
Avatar for kazzpapa3 kazzpapa3
3
570
元・セキュリティ学習経験0大学生による業務紹介 / An Introduction to the Job by a Former College Student with Zero Security Training Experience
Avatar for NTT docomo Business nttcom
0
270
LayerX コーポレートエンジニアリング室におけるサプライチェーンセキュリティへの取り組み / Supply Chain Security at LayerX Corporate Engineering
Avatar for Yuya Takeyama yuyatakeyama
3
840
AI時代のコスト管理を考えよう〜明日から使える実践AWSノウハウ～
Avatar for yoshimi0227 yoshimi0227
0
890
Microsoft のサポートとフィードバック総まとめ
Avatar for Murachi Akira murachiakira
PRO
0
110
現場のトークンマネジメント
Avatar for dak2 dak2
1
190
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
130
製造現場での生成AIの活用、およびエージェントAIの実装のあり方、AVEVAの取り組み
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
110
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
200
GitHub Copilot 最新アップデート – 「一歩先」の実践活用術
Avatar for zhang.william moulongzhang
5
1.9k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
610
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
800
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.3k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
660
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
450
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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