Web Bites

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

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