Cheap frontend tricks

Rico Sta. Cruz
Cofounder, Sinefunc, Inc.

www.sinefunc.com
github.com/sinefunc

We &heart; making
people's lives easier through
good web apps.

Rico Sta. Cruz
github.com/rstacruz

Things that web apps do
that seem really difficult
to do but really is
dirt easy.

Aura CMS
auraisawesome.wordpress.com

“You know,
like Twitter, or Gmail.”

You may think
it's difficult.

$('a').live('click', function () {

var href = $(this).attr('href');

$('#loading').show();


$.get(href, function (html) {


$('body').html(html);


$('body').html(html);
$('#loading').hide();
});
});

!
“But it just loads everything.
That's cheating!”

<% unless request.xhr? %>
<head>
</head>
<% end %>
<body>

<% end %>

<%= yield %>

</body>

<head>
</head>
<% end %>
<body>

<% end %>

<%= yield %>
“Hey, don't render this cruft when the
</body> page is loaded via AJAX.”

Meanwhile,
in JavaScript land...


var $new = $('<div>').html(html);
$('#content').html($new.find('#content'));
$('#sidebar').html($new.find('#sidebar'));
});
});

!
“What about
the back button?”

jQuery.hashlisten
github.com/sinefunc/jquery.hashlisten

2kb of simplicity

window.location.hash = '#!' + href;
return false;
});

return false;
});

$.hashListen('!(.*)', function (href) {

return false;
});


Every time the hash changes to this, do this.

return false;
});


var $new = $('<div>').html(html);
$('#content').html($new.find('#content'));
$('#sidebar').html($new.find('#sidebar'));
});
});

Attempt 1: The Paul Irish method

?
“Can that even be
done in HAML?”

!
Not in a straight-forward way.
...unless you make a helper!

%html
%head
%title= 'My site'

%body
...stuff

!= cc_html do
%head
%title= 'My site'

%body
...stuff

def cc_html(options={}, &blk)
attrs = options.map { |(k, v)| " #{h k}='#{h v}'" }.join('')

[ "",
"",
" <html#{attrs}> ",
capture_haml(&blk).strip,
"</html>"
].join("n")
end

AgentSniff
github.com/sinefunc/agentstiff

~3kb

browser.ie6? #=> false
browser.webkit? #=> true
browser.android? #=> true

# Helper
def browser
UserAgent.new(env['HTTP_USER_AGENT'])
end

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

browser.body_class
#=> 'webkit safari mac'
#=> 'ie ie6 windows'
#=> 'webkit android'

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

%html
%head
%title= 'My site'

%body

...stuff

%html{class: browser.body_class}
%head
%title= 'My site'

%body

...stuff

%html{class: browser.body_class}
%head
%title= 'My site'

%body
- if browser.ie6?
%p Please upgrade your prehistoric browser!

...stuff

<html class='mac webkit chrome'>

/* CSS: Fix chrome's button padding bug */
button { padding: 3px; }
.chrome button { padding: 1px 2px; }

<html class='windows ie ie6'>

/* CSS: Fix the double margin bug */
#posts { margin-left: 10px; }
.ie6 #posts { margin-left: 5px; }

<html class='windows ie ie6'>

/* CSS: Fix the double margin bug */
#posts {
margin-left: 10px;
.ie6 & { margin-left: 5px; }
}

twitter.com/rstacruz
github.com/rstacruz

sinefunc.com

Cheap frontend tricks

More Related Content

What's hot

Similar to Cheap frontend tricks

Recently uploaded

Cheap frontend tricks