cheap frontend tricks

71
Rico Sta. Cruz

Upload: ambiescent

Post on 07-Dec-2014

1.751 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Cheap frontend tricks

Rico Sta. Cruz

Page 2: Cheap frontend tricks

Rico Sta. CruzCofounder, Sinefunc, Inc.

Page 3: Cheap frontend tricks

www.sinefunc.comgithub.com/sinefunc

Page 4: Cheap frontend tricks

We &heart; Ruby.

Page 5: Cheap frontend tricks

We &heart; Sinatra.

Page 6: Cheap frontend tricks

We &heart; makingpeople's lives easier through

good web apps.

Page 7: Cheap frontend tricks

Rico Sta. Cruzgithub.com/rstacruz

Page 8: Cheap frontend tricks

Things that web apps do that seem really difficult

to do but really isdirt easy.

Page 9: Cheap frontend tricks

aka:

Cheap tricks!

Page 10: Cheap frontend tricks

Aura CMSauraisawesome.wordpress.com

Page 11: Cheap frontend tricks

Challenge:

Page 12: Cheap frontend tricks

In-place AJAX reloading.

Page 13: Cheap frontend tricks

“You know,

like Twitter, or Gmail.”

Page 14: Cheap frontend tricks
Page 15: Cheap frontend tricks
Page 16: Cheap frontend tricks
Page 17: Cheap frontend tricks
Page 18: Cheap frontend tricks

You may thinkit's difficult.

Page 19: Cheap frontend tricks

FUCK NO

Page 20: Cheap frontend tricks

LOLIt's dirt easy!

Page 21: Cheap frontend tricks

Like this:

Page 22: Cheap frontend tricks

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

Page 23: Cheap frontend tricks

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

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

Page 24: Cheap frontend tricks

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

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

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

Page 25: Cheap frontend tricks

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

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

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

$.get(href, function (html) {

Page 26: Cheap frontend tricks

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

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

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

$.get(href, function (html) {

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

Page 27: Cheap frontend tricks

$('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

Voila!

Page 29: Cheap frontend tricks

!“But it just loads everything.

That's cheating!”

Page 30: Cheap frontend tricks

Optimization

Page 31: Cheap frontend tricks

<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

<% 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

<% 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

Meanwhile,in JavaScript land...

Page 35: Cheap frontend tricks

$('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

$('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

Awesome.

Page 38: Cheap frontend tricks

!“What about

the back button?”

Page 39: Cheap frontend tricks

Hash

Page 40: Cheap frontend tricks

jQuery.hashlistengithub.com/sinefunc/jquery.hashlisten

2kb of simplicity

Page 41: Cheap frontend tricks

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

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

window.location.hash = '#!' + href;

return false;

});

Page 42: Cheap frontend tricks

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

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

window.location.hash = '#!' + href;

return false;

});

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

Page 43: Cheap frontend tricks

$('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

$('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

Sweet!

Page 46: Cheap frontend tricks

Next challenge:

Page 47: Cheap frontend tricks

IE compatibility.

Page 48: Cheap frontend tricks

“Oh. √£÷¡*.”

Page 49: Cheap frontend tricks

Attempt 1: The Paul Irish method

Page 50: Cheap frontend tricks

?“Can that even be done in HAML?”

Page 51: Cheap frontend tricks

Kinda—

Page 52: Cheap frontend tricks

!Not in a straight-forward way.

...unless you make a helper!

Page 53: Cheap frontend tricks

%html

%head

%title= 'My site'

%body

...stuff

Page 54: Cheap frontend tricks

!= cc_html do

%head

%title= 'My site'

%body

...stuff

Page 55: Cheap frontend tricks

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

Good!

Page 57: Cheap frontend tricks

Better way

Page 58: Cheap frontend tricks

AgentSniffgithub.com/sinefunc/agentstiff

~3kb

Page 59: Cheap frontend tricks

browser.ie6? #=> false

browser.webkit? #=> true

browser.android? #=> true

# Helper

def browser

UserAgent.new(env['HTTP_USER_AGENT'])

end

Page 60: Cheap frontend tricks

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

browser.body_class

#=> 'webkit safari mac'

#=> 'ie ie6 windows'

#=> 'webkit android'

Page 62: Cheap frontend tricks

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

%html

%head

%title= 'My site'

%body

...stuff

Page 64: Cheap frontend tricks

%html{class: browser.body_class}

%head

%title= 'My site'

%body

...stuff

Page 65: Cheap frontend tricks

%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

Effect:

Page 67: Cheap frontend tricks

<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

<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

Even betterwith SASS!

Page 70: Cheap frontend tricks

<html class='windows ie ie6'>

/* CSS: Fix the double margin bug */

#posts {

margin-left: 10px;

.ie6 & { margin-left: 5px; }

}

Page 71: Cheap frontend tricks

twitter.com/rstacruzgithub.com/rstacruz

sinefunc.com