Web Bites - Speaker Deck

Slide 1

Slide 1 text

Matthew Buchanan Transmit + Docksend www.panic.com/transmit/

Slide 2

Slide 2 text

Matthew Buchanan Transmit + Docksend

Slide 3

Slide 3 text

Matthew Buchanan Transmit + Docksend

Slide 4

Slide 4 text

Matthew Buchanan Transmit + Docksend

Slide 5

Slide 5 text

Matthew Buchanan Transmit + Docksend

Slide 6

Slide 6 text

Matthew Buchanan Transmit + Docksend

Slide 7

Slide 7 text

Matthew Buchanan Transmit + Docksend

Slide 8

Slide 8 text

Matthew Buchanan Transmit + Docksend

Slide 9

Slide 9 text

Matthew Buchanan Transmit + Docksend

Slide 10

Slide 10 text

Matthew Buchanan Transmit + Docksend

Slide 11

Slide 11 text

Matthew Buchanan Transmit + Docksend

Slide 12

Slide 12 text

Matthew Buchanan Transmit + Docksend

Slide 13

Slide 13 text

Matthew Buchanan jQuery www.jquery.com

Slide 14

Slide 14 text

jQuery JavaScript library by John Resig et al ● Interoperable ● Compact filesize ● Concise notation ● Uses CSS selectors ● Extensible ● Popular Matthew Buchanan jQuery

Slide 15

Slide 15 text

Hosted by Google … … Matthew Buchanan jQuery

Slide 16

Slide 16 text

jQuery function jQuery("#wrap p") jQuery("p") jQuery("p:last") Shorthand $("#wrap p") Matthew Buchanan jQuery

Slide 17

Slide 17 text

Collections $("#wrap p") returns a collection of every

inside element #wrap Methods $("#wrap p").addClass("intro") $("#wrap div").each(function(div) { … }) Matthew Buchanan jQuery

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Page load $(document).ready(function() { … }); Or, for the really concise: $(function() { … }); Matthew Buchanan jQuery

Slide 20

Slide 20 text

Chaining $("a").addClass("hidden").hide().html("Gone.") Ajax $("#intro").load("path/to/file.html") Matthew Buchanan jQuery

Slide 21

Slide 21 text

Example by Karl Swedberg $(function() { var txt = ""; $("h2 a").each(function() { txt = $(this).text() .replace(/ (\w+)$/," $1"); $(this).html(txt); }); }); Matthew Buchanan jQuery

Slide 22

Slide 22 text

Example $(function() { $("#nav a.search").click(function() { $("#searchbar").slideToggle("fast"); }); }); Matthew Buchanan jQuery

Slide 23

Slide 23 text

Matthew Buchanan Typophile Forums www.typophile.com/forum/

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Matthew Buchanan Fin matthewbuchanan.name