Solving Common Client Requets with jQuery Presentation (v2)

8,694 views

Published on

Given at the jQuery Summit November 2010.

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,694
On SlideShare
0
From Embeds
0
Number of Embeds
3,178
Actions
Shares
0
Downloads
177
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Solving Common Client Requets with jQuery Presentation (v2)

  1. 1. 1
  2. 2. The ROYAL “WE” wufoo.com Online Form Builder css-tricks.com Web Design Community digwp.com Book and Blog about WordPress 2
  3. 3. The BACKSTORY • Small design company • Many clients • Sole web designer/developer 3
  4. 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. 5. My strategies for INSTANT PRODUCTIVITY All websites used jQuery for the JavaScript library Use the tools that you know 5
  6. 6. The SUPER BASICS The Working Environment 1) Load jQuery 2) Load dependent scripts (e.g. plugins) 3) Your code 6
  7. 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. 8
  9. 9. 9
  10. 10. The SUPER BASICS Find something... Do something... 10
  11. 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. 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. 13. foxycart.com 13
  14. 14. 14
  15. 15. getfirebug.com 15
  16. 16. Change Text Display Change Text Display 16
  17. 17. 17
  18. 18. And now it’s EXAMPLE TIME! Smashing Network Widget jsbin.com/jqs-2/edit Code you get: 18
  19. 19. Smashing Network Widget (Cont.) Resulting HTML: 19
  20. 20. Smashing Network Widget (Cont.) What it looks like: 20
  21. 21. Smashing Network Widget (Cont.) The jQuery Swaperoo 21
  22. 22. jsbin.com/egosu3/edit Smashing Network Widget (Cont.) Result 22
  23. 23. 23
  24. 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. 25. #2 LOADING CONTENT Hey Chris, Can we add this huge block of text to the checkout page? Now with more easy! 25
  26. 26. Hyper Simplified Checkout Form 26
  27. 27. Friday at 4:52pm 27
  28. 28. Monday at 9:08am 28
  29. 29. Monday at 1:20pm 29
  30. 30. 30
  31. 31. 31
  32. 32. Check if element exists 32
  33. 33. Element Creation Get Content (AJAX... Boom) 33
  34. 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. 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. 36
  37. 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. 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. 39. jsbin.com/jqs-4/edit 39
  40. 40. jsbin.com/jqs-5/edit 40
  41. 41. jsbin.com/jqs-6/edit 41
  42. 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. 43. jsbin.com/jqs-7/edit 43
  44. 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. 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. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. And now... HOT PLUGIN ACTION urlInteralAddress http://cl.ly/3B9j http://cl.ly/3BFZ 50
  51. 51. http://cl.ly/3B1F 51
  52. 52. 52
  53. 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. 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. 55. http://cl.ly/3Eyb 55
  56. 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. 57. Thanks! 57

×