solving common client requets with jquery presentation (v2)
DESCRIPTION
Given at the jQuery Summit November 2010.TRANSCRIPT
1
The
ROYAL “WE”
wufoo.com
OnlineForm Builder
css-tricks.com
Web DesignCommunity
digwp.com
Book and Blogabout WordPress
2
The
BACKSTORY• Small design company
• Many clients• Sole web designer/developer
3
My strategies for
INSTANT PRODUCTIVITYAll 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
My strategies for
INSTANT PRODUCTIVITY
All websites used jQuery for the JavaScript library
Use the tools that you know
5
The
SUPER BASICSThe Working Environment
1) Load jQuery
2) Load dependent scripts (e.g. plugins)
3) Your code
6
The
SUPER BASICSThe Working Environment
1) Load jQuery
2) Load dependent scripts (e.g. plugins)
3) Your code
<script>s in your HTML
7
8
9
The
SUPER BASICSFind something... Do something...
10
#1
CHANGING CONTENT
Hey Chris,Can you change “xxx” to “yyy”?
... that it turns out you don’t haveany control over ...
11
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
foxycart.com
13
14
getfirebug.com
15
Change Text
Display
Change Text
Display
16
17
And now it’s
EXAMPLE TIME!Smashing Network Widget
jsbin.com/jqs-2/edit
Code you get:
18
Smashing Network Widget (Cont.)
Resulting HTML:
19
Smashing Network Widget (Cont.)
What it looks like:
20
Smashing Network Widget (Cont.)
The jQuery Swaperoo
21
jsbin.com/egosu3/edit
Smashing Network Widget (Cont.)
Result
22
23
• Don’t have markup controlbut 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
#2
LOADING CONTENT
Hey Chris,Can we add this huge block oftext to the checkout page?
Now with more easy!
25
Hyper SimplifiedCheckout Form
26
Friday at 4:52pm27
Monday at 9:08am28
Monday at 1:20pm29
30
31
Check ifelement exists
32
Element Creation
Get Content(AJAX... Boom)
33
• 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
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
#3
LET’S GO WEB 2.0
Hey Chris,We’d like to show our latest tweeton our homepage!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Social media!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
37
All the hip services hand out JSONTwitter docs: http://dev.twitter.com/doc/get/statuses/user_timelineExample URL: http://twitter.com/statuses/user_timeline/chriscoyier.json
38
• 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
#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
• 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, animateLarge site = AJAX load other pages
OK...
HERE’S THE RUB
45
46
47
48
49
And now...
HOT PLUGIN ACTIONurlInteralAddress
http://cl.ly/3B9j http://cl.ly/3BFZ
50
52
• The music never stops ifthe 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
#5
SLIP SLIDING AWAY
Hey Chris,When you click links that go down the page, can the page slide down instead of jump?
54
• 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
Thanks!
57