cheap frontend tricks
DESCRIPTION
Things that seem difficult to do that are really quite easy.TRANSCRIPT
![Page 1: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/1.jpg)
Rico Sta. Cruz
![Page 2: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/2.jpg)
Rico Sta. CruzCofounder, Sinefunc, Inc.
![Page 4: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/4.jpg)
We &heart; Ruby.
![Page 5: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/5.jpg)
We &heart; Sinatra.
![Page 6: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/6.jpg)
We &heart; makingpeople's lives easier through
good web apps.
![Page 7: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/7.jpg)
Rico Sta. Cruzgithub.com/rstacruz
![Page 8: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/8.jpg)
Things that web apps do that seem really difficult
to do but really isdirt easy.
![Page 9: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/9.jpg)
aka:
Cheap tricks!
![Page 10: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/10.jpg)
Aura CMSauraisawesome.wordpress.com
![Page 11: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/11.jpg)
Challenge:
![Page 12: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/12.jpg)
In-place AJAX reloading.
![Page 13: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/13.jpg)
“You know,
like Twitter, or Gmail.”
![Page 14: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/14.jpg)
![Page 15: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/15.jpg)
![Page 16: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/16.jpg)
![Page 17: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/17.jpg)
![Page 18: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/18.jpg)
You may thinkit's difficult.
![Page 19: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/19.jpg)
FUCK NO
![Page 20: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/20.jpg)
LOLIt's dirt easy!
![Page 21: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/21.jpg)
Like this:
![Page 22: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/22.jpg)
$('a').live('click', function () {
![Page 23: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/23.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
![Page 24: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/24.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
$('#loading').show();
![Page 25: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/25.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
$('#loading').show();
$.get(href, function (html) {
![Page 26: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/26.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
$('#loading').show();
$.get(href, function (html) {
$('body').html(html);
![Page 27: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/27.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
$('#loading').show();
$.get(href, function (html) {
$('body').html(html);
$('#loading').hide();
});
});
![Page 28: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/28.jpg)
Voila!
![Page 29: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/29.jpg)
!“But it just loads everything.
That's cheating!”
![Page 30: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/30.jpg)
Optimization
![Page 31: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/31.jpg)
<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>
![Page 32: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/32.jpg)
<% 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>
![Page 33: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/33.jpg)
<% 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>
“Hey, don't render this cruft when the page is loaded via AJAX.”
![Page 34: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/34.jpg)
Meanwhile,in JavaScript land...
![Page 35: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/35.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
$('#loading').show();
$.get(href, function (html) {
$('body').html(html);
$('#loading').hide();
});
});
![Page 36: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/36.jpg)
$('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();
});
});
![Page 37: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/37.jpg)
Awesome.
![Page 38: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/38.jpg)
!“What about
the back button?”
![Page 39: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/39.jpg)
Hash
![Page 40: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/40.jpg)
jQuery.hashlistengithub.com/sinefunc/jquery.hashlisten
2kb of simplicity
![Page 41: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/41.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
window.location.hash = '#!' + href;
return false;
});
![Page 42: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/42.jpg)
$('a').live('click', function () {
var href = $(this).attr('href');
window.location.hash = '#!' + href;
return false;
});
$.hashListen('!(.*)', function (href) {
![Page 43: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/43.jpg)
$('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.
![Page 44: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/44.jpg)
$('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();
});
});
![Page 45: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/45.jpg)
Sweet!
![Page 46: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/46.jpg)
Next challenge:
![Page 47: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/47.jpg)
IE compatibility.
![Page 48: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/48.jpg)
“Oh. √£÷¡*.”
![Page 49: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/49.jpg)
Attempt 1: The Paul Irish method
![Page 50: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/50.jpg)
?“Can that even be done in HAML?”
![Page 51: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/51.jpg)
Kinda—
![Page 52: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/52.jpg)
!Not in a straight-forward way.
...unless you make a helper!
![Page 53: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/53.jpg)
%html
%head
%title= 'My site'
%body
...stuff
![Page 54: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/54.jpg)
!= cc_html do
%head
%title= 'My site'
%body
...stuff
![Page 55: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/55.jpg)
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
![Page 56: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/56.jpg)
Good!
![Page 57: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/57.jpg)
Better way
![Page 58: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/58.jpg)
AgentSniffgithub.com/sinefunc/agentstiff
~3kb
![Page 59: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/59.jpg)
browser.ie6? #=> false
browser.webkit? #=> true
browser.android? #=> true
# Helper
def browser
UserAgent.new(env['HTTP_USER_AGENT'])
end
![Page 60: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/60.jpg)
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
![Page 61: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/61.jpg)
browser.body_class
#=> 'webkit safari mac'
#=> 'ie ie6 windows'
#=> 'webkit android'
![Page 62: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/62.jpg)
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
![Page 63: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/63.jpg)
%html
%head
%title= 'My site'
%body
...stuff
![Page 64: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/64.jpg)
%html{class: browser.body_class}
%head
%title= 'My site'
%body
...stuff
![Page 65: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/65.jpg)
%html{class: browser.body_class}
%head
%title= 'My site'
%body
- if browser.ie6?
%p Please upgrade your prehistoric browser!
...stuff
![Page 66: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/66.jpg)
Effect:
![Page 67: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/67.jpg)
<html class='mac webkit chrome'>
/* CSS: Fix chrome's button padding bug */
button { padding: 3px; }
.chrome button { padding: 1px 2px; }
![Page 68: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/68.jpg)
<html class='windows ie ie6'>
/* CSS: Fix the double margin bug */
#posts { margin-left: 10px; }
.ie6 #posts { margin-left: 5px; }
![Page 69: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/69.jpg)
Even betterwith SASS!
![Page 70: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/70.jpg)
<html class='windows ie ie6'>
/* CSS: Fix the double margin bug */
#posts {
margin-left: 10px;
.ie6 & { margin-left: 5px; }
}
![Page 71: Cheap frontend tricks](https://reader033.vdocuments.mx/reader033/viewer/2022051209/5486b6e15806b59f588b49fb/html5/thumbnails/71.jpg)
twitter.com/rstacruzgithub.com/rstacruz
sinefunc.com