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

Web Bites

Matthew Buchanan
November 13, 2008
Technology
2
120

Web Bites

Presented to the Auckland Web Meetup (20x20 format), November 2008.

Matthew Buchanan

November 13, 2008
Tweet

More Decks by Matthew Buchanan

See All by Matthew Buchanan
Better Letters
matthewbuchanan
2
130
Pragmatic Approaches to the Mobile Web
matthewbuchanan
0
96
Zero to Hero, a jQuery Primer
matthewbuchanan
8
390
Map Local and other works of Staggering Genius
matthewbuchanan
1
120
The State of Web Type
matthewbuchanan
5
290
Tumblr 20x20
matthewbuchanan
3
160
Web Typography
matthewbuchanan
5
330

Other Decks in Technology

See All in Technology
第23回Ques_タイミーにおけるQAチームの在り方 / QA Team in Timee
takeyaqa
0
190
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
390
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
470
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
130
What to do after `laravel new`
mattstauffer
0
140
2024年グライダー曲技世界選手権参加報告/2024 WGAC report
jscseminar
0
200
Valuable Lessons Learned on Kaggle’s ARC AGI LLM challenge
ianozsvald
0
100
いざ、BSC討伐の旅
nikinusu
2
600
サイバーセキュリティと認知バイアス：対策の隙を埋める心理学的アプローチ
shumei_ito
0
170
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
Microsoft Fabric OneLake の実体について
ryomaru0825
0
190
プロポーザルのつくり方
〜個人技編〜 / How to come up with proposals
ohbarye
4
310

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Designing for Performance
lara
604
68k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Music & Morning Musume
bryan
46
6.2k
Optimizing for Happiness
mojombo
376
69k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
560
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700

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