Solving Common Client Requets with jQuery Presentation (v2)

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

jsbin.com/jqs-4/edit

39

jsbin.com/jqs-5/edit

40

jsbin.com/jqs-6/edit

41

• 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

jsbin.com/jqs-7/edit

43

#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

http://cl.ly/3B1F

51

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

http://cl.ly/3Eyb

55

• 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