Cheap frontend tricks

1,826 views

Published on

Things that seem difficult to do that are really quite easy.

Published in: Technology

Cheap frontend tricks

  1. 1. Rico Sta. Cruz
  2. 2. Rico Sta. Cruz Cofounder, Sinefunc, Inc.
  3. 3. www.sinefunc.com github.com/sinefunc
  4. 4. We &heart; Ruby.
  5. 5. We &heart; Sinatra.
  6. 6. We &heart; making people's lives easier through good web apps.
  7. 7. Rico Sta. Cruz github.com/rstacruz
  8. 8. Things that web apps do that seem really difficult to do but really is dirt easy.
  9. 9. aka: Cheap tricks!
  10. 10. Aura CMS auraisawesome.wordpress.com
  11. 11. Challenge:
  12. 12. In-place AJAX reloading.
  13. 13. “You know, like Twitter, or Gmail.”
  14. 14. You may think it's difficult.
  15. 15. FUCK NO
  16. 16. LOL It's dirt easy!
  17. 17. Like this:
  18. 18. $('a').live('click', function () {
  19. 19. $('a').live('click', function () { var href = $(this).attr('href');
  20. 20. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show();
  21. 21. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) {
  22. 22. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html);
  23. 23. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html); $('#loading').hide(); }); });
  24. 24. Voila!
  25. 25. ! “But it just loads everything. That's cheating!”
  26. 26. Optimization
  27. 27. <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <body> <div id="top">Your site name and nav here</div> <%= yield %> </body>
  28. 28. <% unless request.xhr? %> <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <% end %> <body> <% unless request.xhr? %> <div id="top">Your site name and nav here</div> <% end %> <%= yield %> </body>
  29. 29. <% unless request.xhr? %> <head> <script src="/js/script.js"></script> <link rel="stylesheet" href="/css/style.css" /> </head> <% end %> <body> <% unless request.xhr? %> <div id="top">Your site name and nav here</div> <% end %> <%= yield %> “Hey, don't render this cruft when the </body> page is loaded via AJAX.”
  30. 30. Meanwhile, in JavaScript land...
  31. 31. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { $('body').html(html); $('#loading').hide(); }); });
  32. 32. $('a').live('click', function () { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { var $new = $('<div>').html(html); $('#content').html($new.find('#content')); $('#sidebar').html($new.find('#sidebar')); $('#loading').hide(); }); });
  33. 33. Awesome.
  34. 34. ! “What about the back button?”
  35. 35. Hash
  36. 36. jQuery.hashlisten github.com/sinefunc/jquery.hashlisten 2kb of simplicity
  37. 37. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; });
  38. 38. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) {
  39. 39. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) { Every time the hash changes to this, do this.
  40. 40. $('a').live('click', function () { var href = $(this).attr('href'); window.location.hash = '#!' + href; return false; }); $.hashListen('!(.*)', function (href) { var href = $(this).attr('href'); $('#loading').show(); $.get(href, function (html) { var $new = $('<div>').html(html); $('#content').html($new.find('#content')); $('#sidebar').html($new.find('#sidebar')); $('#loading').hide(); }); });
  41. 41. Sweet!
  42. 42. Next challenge:
  43. 43. IE compatibility.
  44. 44. “Oh. √£÷¡*.”
  45. 45. Attempt 1: The Paul Irish method
  46. 46. ? “Can that even be done in HAML?”
  47. 47. Kinda—
  48. 48. ! Not in a straight-forward way. ...unless you make a helper!
  49. 49. %html %head %title= 'My site' %body ...stuff
  50. 50. != cc_html do %head %title= 'My site' %body ...stuff
  51. 51. def cc_html(options={}, &blk) attrs = options.map { |(k, v)| " #{h k}='#{h v}'" }.join('') [ "<!--[if lt IE 7 ]> <html#{attrs} class='ie6'> <![endif]-->", "<!--[if IE 7 ]> <html#{attrs} class='ie7'> <![endif]-->", "<!--[if IE 8 ]> <html#{attrs} class='ie8'> <![endif]-->", "<!--[if IE 9 ]> <html#{attrs} class='ie9'> <![endif]-->", "<!--[if (gt IE 9)|!(IE)]><!--> <html#{attrs}> <!--<![endif]-->", capture_haml(&blk).strip, "</html>" ].join("n") end
  52. 52. Good!
  53. 53. Better way
  54. 54. AgentSniff github.com/sinefunc/agentstiff ~3kb
  55. 55. browser.ie6? #=> false browser.webkit? #=> true browser.android? #=> true # Helper def browser UserAgent.new(env['HTTP_USER_AGENT']) end
  56. 56. class UserAgent def initialize(ua_string) @ua = ua_string end def webkit?() product?('AppleWebKit'); end def chrome?() product?('Chrome'); end def ie6?() detail?(/^MSIE 6/, 'Mozilla'); end # ... def product?(spec); !! @ua.match(spec); end # ... End
  57. 57. browser.body_class #=> 'webkit safari mac' #=> 'ie ie6 windows' #=> 'webkit android'
  58. 58. class UserAgent # ... def body_class (%w(webkit chrome ios gecko opera ie linux) + %w(ipad windows mac ie6 ie7 ie8 ie9)).map do |aspect| aspect if self.send :"#{aspect}?" end.compact.join(' ') end end
  59. 59. %html %head %title= 'My site' %body ...stuff
  60. 60. %html{class: browser.body_class} %head %title= 'My site' %body ...stuff
  61. 61. %html{class: browser.body_class} %head %title= 'My site' %body - if browser.ie6? %p Please upgrade your prehistoric browser! ...stuff
  62. 62. Effect:
  63. 63. <html class='mac webkit chrome'> /* CSS: Fix chrome's button padding bug */ button { padding: 3px; } .chrome button { padding: 1px 2px; }
  64. 64. <html class='windows ie ie6'> /* CSS: Fix the double margin bug */ #posts { margin-left: 10px; } .ie6 #posts { margin-left: 5px; }
  65. 65. Even better with SASS!
  66. 66. <html class='windows ie ie6'> /* CSS: Fix the double margin bug */ #posts { margin-left: 10px; .ie6 & { margin-left: 5px; } }
  67. 67. twitter.com/rstacruz github.com/rstacruz sinefunc.com

×