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ツールを導入しても生産性はあがらない？ カオナビが直面した 3つの壁と乗り越え方。/ Overcoming 3 Barriers to AI-Driven Productivity at kaonavi
Avatar for 株式会社カオナビ kaonavi
0
200
生成 AI 時代にいま一度「問い合わせ」について考えてみる
Avatar for kazzpapa3 kazzpapa3
1
130
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
74k
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
0
130
“それは自分の仕事じゃない"を 越えて行け
Avatar for yuukiyo yuukiyo
1
520
Multicaで30個のミニプロジェクトをAIエージェント運用して見えてきたこと
Avatar for eiei114 eiei114
1
630
なぜ、あなたのエージェントは言うことを聞かないのか
Avatar for segavvy segavvy
1
380
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
500
VPCセキュリティ対応の最新事情
Avatar for nagisa_53 nagisa53
1
290
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
2
480
2年前に削除したPHPクラスが、 ある日突然決済をエラーにした
Avatar for ykagano ykagano
1
790
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
Avatar for Makky12 smt7174
1
490

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
270
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
52k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
550
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
400
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.3k

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