Given at the jQuery Summit November 2010.

1. 1

2. The
ROYAL “WE”
wufoo.com
Online
Form Builder
css-tricks.com
Web Design
Community
digwp.com
Book and Blog
about WordPress
2

3. The
BACKSTORY
• Small design company
• Many clients
• Sole web designer/developer
3

4. My strategies for
INSTANT PRODUCTIVITY
All websites...
... were on the same server
... registered at same domain registrant
... used same organizational structure
... used common naming conventions
... used standard code formatting
... all forms built with Wufoo
... used WordPress as the CMS
4

5. My strategies for
INSTANT PRODUCTIVITY
All websites used jQuery
for the JavaScript library
Use the tools that you know
5

6. The
SUPER BASICS
The Working Environment
1) Load jQuery
2) Load dependent scripts (e.g. plugins)
3) Your code
6

7. The
SUPER BASICS
The Working Environment
1) Load jQuery
2) Load dependent scripts (e.g. plugins)
3) Your code
<script>s in your HTML
7

8. 8

9. 9

10. The
SUPER BASICS
Find something... Do something...
10

11. #1
CHANGING CONTENT
Hey Chris,
Can you change “xxx” to “yyy”?
... that it turns out you don’t have
any control over ...
11

12. So...
Why no control?
• Content is third-party template you can’t change
• Too entrenched / Too much red tape
• Content is inserted from elsewhere
12

13. foxycart.com
13

14. 14

15. getfirebug.com
15

16. Change Text
Display
Change Text
Display
16

17. 17

18. And now it’s
EXAMPLE TIME!
Smashing Network Widget
jsbin.com/jqs-2/edit
Code you get:
18

19. Smashing Network Widget (Cont.)
Resulting HTML:
19

20. Smashing Network Widget (Cont.)
What it looks like:
20

21. Smashing Network Widget (Cont.)
The jQuery Swaperoo
21

22. jsbin.com/egosu3/edit
Smashing Network Widget (Cont.)
Result
22

23. 23

24. • Don’t have markup control
but can use jQuery
• Fairly rare... Third party services,
Huge applications - Separation between
designers and developers
• Find out a year later...
FoxyCart totally does allow you to
change language
Quick recap of...
CHANGING CONTENT
24

25. #2
LOADING CONTENT
Hey Chris,
Can we add this huge block of
text to the checkout page?
Now with more easy!
25

26. Hyper Simplified
Checkout Form
26

27. Friday at 4:52pm
27

28. Monday at 9:08am
28

29. Monday at 1:20pm
29

30. 30

31. 31

32. Check if
element exists
32

33. Element
Creation
Get Content
(AJAX... Boom)
33

34. • What are they really asking for?
vs. What do the users need?
• Enough content to warrant
a special page?
• jQuery: Pop-up box, .load() content
• Best of both worlds
Quick recap of...
CHANGING CONTENT
34

35. More on...
LIGHTBOXES
colorpowered.com/colorbox/
• Different kinds of content:
Photos / Video / Inline
Content / Ajax Content /
Slideshow
• Events:
Resizing / Transitions /
Callbacks
• Mo Betta Cross Browser
• Themes
35

36. 36

37. #3
LET’S GO WEB 2.0
Hey Chris,
We’d like to show our latest tweet
on our homepage!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Social media!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
37

38. All the hip services hand out JSON
Twitter docs: http://dev.twitter.com/doc/get/statuses/user_timeline
Example URL: http://twitter.com/statuses/user_timeline/chriscoyier.json
38

39. jsbin.com/jqs-4/edit
39

40. jsbin.com/jqs-5/edit
40

41. jsbin.com/jqs-6/edit
41

42. • Top priority: it doesn’t affect the normal page load time.
(You don’t want to rely on the Twitter API for your site to load)
• Only append upon success
• Only show non-replies
• “Tweetify” http://css-tricks.com/snippets/jquery/jquery-tweetify-text/
• @Anywhere http://dev.twitter.com/anywhere
Quick recap of...
TWITTERIZATION
42

43. jsbin.com/jqs-7/edit
43

44. #4
DON’T STOP THE MUSIC
Hey Chris,
We want the music player on our
site to continuously play while
people are on our website.
44

45. • Music will stop on a page load,
there is no way around it.
• Solution: do not reload the page
• Bad solutions: Frames, Flash,
Pop-up Windows
• Better solution: AJAX
• Small site = content on one page, animate
Large site = AJAX load other pages
OK...
HERE’S THE RUB
45

46. 46

47. 47

48. 48

49. 49

50. And now...
HOT PLUGIN ACTION
urlInteral
Address
http://cl.ly/3B9j http://cl.ly/3BFZ
50

51. http://cl.ly/3B1F
51

52. 52

53. • The music never stops if
the page never reloads
• Maintain user expectations
(Like their back button working)
• No JavaScript? Like nothing ever happened
• Enforcement of structure
(Deep link entrances)
Quick recap of...
AJAXIFICATION
53

54. #5
SLIP SLIDING AWAY
Hey Chris,
When you click links that go
down the page, can the page
slide down instead of jump?
54

55. http://cl.ly/3Eyb
55

56. • The journey: http://cl.ly/3FYq
• Plugin: http://cl.ly/3FFV
• Fancy plugin: http://cl.ly/3F2t
• Video tutorial / Fixed Navigation: http://cl.ly/3F67
• “Slider”: http://cl.ly/3Fab
Unfortunately that wasn’t...
THE WHOLE STORY
56

57. Thanks!
57