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
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for heron31238 unitedflyhelp
0
310
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
27k
What’s new in Android development tools
Avatar for Yuki Anzai yanzm
0
310
AI時代の開発生産性を加速させるアーキテクチャ設計
Avatar for PLAID Tech plaidtech
PRO
3
160
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
Avatar for MNTSQ mntsq
1
130
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ＆タイパUP！ MovableType.net の便利機能とユーザー事例のご紹介
Avatar for hayase masakah
0
110
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
140
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.4k
AI専用のリンターを作る #yumemi_patch
Avatar for 弁護士ドットコム bengo4com
5
4.3k
敢えて生成AIを使わないマネジメント業務
Avatar for Kazuki Maeda kzkmaeda
2
450
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
140
データグループにおけるフロントエンド開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
100

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.4k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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