Cutting off the browser fat from your app

Thursday, October 10, 13

Hector @hecbuma Thursday, October 10, 13

Add time Thursday, October 10, 13

15 beach houses Thursday, October 10, 13

CFP opens in november Thursday, October 10, 13

magmaconf.com Thursday, October 10, 13

Photos by Thursday, October 10, 13

Cutting off the browser fat from your app Thursday, October
10, 13

browser fat? Thursday, October 10, 13

http://static.rcgroups.net/forums/attachments/2/3/6/3/1/2/a3083784-42-Fat%2520Guy.jpg?d=1267091993 Thursday, October 10, 13

http://www.celebitchy.com/wp-content/uploads/2010/07/fp_5311598_spears_britney_fp1_070110.jpg Thursday, October 10, 13

“I’m not a front-end guy, why should I care?” Thursday,
October 10, 13

Time = Money Thursday, October 10, 13

1 Mississippi Thursday, October 10, 13

http://bitchinﬁlmreviews.com/wp-content/uploads/2012/06/Happy-Feet.jpg Thursday, October 10, 13

http://1.bp.blogspot.com/-RM9X-maQqks/ToCkP_ziwHI/ AAAAAAAABDE/ZtMyr67Ar-4/s1600/challenge+accepted+meme +blank.png Thursday, October 10, 13

http://marco-pivetta.com/doctrine-orm-zf2-tutorial/assets/img/waiting-meme.png Thursday, October 10, 13

http://www.thereplicapropforum.com/gallery/data/509/300-publicity-photo-26.jpg Thursday, October 10, 13

The most important thing Thursday, October 10, 13

CSS Thursday, October 10, 13

Right - to - Left Thursday, October 10, 13

#active li a {...} Thursday, October 10, 13

a li #active Thursday, October 10, 13

Qualiﬁed Selectors ul#active {...} Thursday, October 10, 13

Qualiﬁed Selectors #active {...} Thursday, October 10, 13

Descendant Selectors body header div{ color: blue; } body header
p{ color: red; } Thursday, October 10, 13

Descendant Selectors .blue-text {color: blue;} .red-text {color: red;} Thursday, October
10, 13

Unqualiﬁed Selectors a[data-go^=”page-”]{ display: block; } Thursday, October 10, 13

Chaining .big.blue.text {...} Thursday, October 10, 13

Chaining .big-blue-text {...} Thursday, October 10, 13

Remember Cascade #wrapper ul li a { font-family: 'Helvetica' }

Remember Cascade #wrapper { font-family: 'Helvetica' } Thursday, October 10,
13

Sass Thursday, October 10, 13

Nesting too deep Thursday, October 10, 13

Mixins Thursday, October 10, 13

@extend Thursday, October 10, 13

LEARN CSS Thursday, October 10, 13

css-tricks.com/ all-about-ﬂoats/ Thursday, October 10, 13

smacss.com Thursday, October 10, 13

OOCSS github.com/ stubbornella/oocss/wik Thursday, October 10, 13

JS Thursday, October 10, 13

MOVE IT DOWN! Thursday, October 10, 13

ASYNC & DEFER javascript_tag "alert('All is good')", :defer => 'defer'
javascript_include_tag "application", :async => true Thursday, October 10, 13

ID over Classes http://jsperf.com/web-test Thursday, October 10, 13

Use Context on jQuery http://jsperf.com/jquery-context Thursday, October 10, 13

Cached Objects http://jsperf.com/cache-objects Thursday, October 10, 13

Avoid $.each http://jsperf.com/string-join2 Thursday, October 10, 13

IMG Thursday, October 10, 13

It’s all about fewer HTTP requests Thursday, October 10, 13

6 to 8 parallel connections Thursday, October 10, 13

File Types Thursday, October 10, 13

JPEG Thursday, October 10, 13

PNG Thursday, October 10, 13

GIF Thursday, October 10, 13

DO NOT RESIZE! Thursday, October 10, 13

Set height and width! Thursday, October 10, 13

http://www.celebitchy.com/wp-content/uploads/2010/07/fp_5311598_spears_britney_fp1_070110.jpg Thursday, October 10, 13

Serve GZIP Thursday, October 10, 13

gem ‘heroku_rails_deflate’ Thursday, October 10, 13

Rack::Deﬂater Thursday, October 10, 13

HTML Thursday, October 10, 13

TOOLS Thursday, October 10, 13

kraken.io Thursday, October 10, 13

# NOTE: You will need `multipart-post` gem: # $ gem
install multipart-post require 'rubygems' require 'json' require 'net/https' require 'net/http/post/multipart' url = URI.parse("https://api.kraken.io/file") uploadfile = {:name =>'/Path/To/File.jpg'} auth = { "user" => "your-kraken-username", "pass" => "your-kraken-password", "apikey" => "your-kraken-api-key" }.to_json File.open(uploadfile[:name]) do |file| req = Net::HTTP::Post::Multipart.new url.path, "auth" => auth, "file" => UploadIO.new(file, 'logotyp.png') https = Net::HTTP.new(url.host, url.port) https.use_ssl = true res = https.start() {|conn| conn.request(req)} response = JSON.parse(res.body) if response['success'] puts 'Success. Optimized image URL: ' + response['krakedURL'] else puts 'Fail. Error message: ' + response['error'] end end Thursday, October 10, 13

Chrome Developer tools Thursday, October 10, 13

Retrospectus.com Thursday, October 10, 13

~30sec Thursday, October 10, 13

~6sec Thursday, October 10, 13

` @hecbuma Thanks! Thursday, October 10, 13

Cutting off the browser fat from your app

Cutting off the browser fat from your app

More Decks by Hector Bustillos

Other Decks in Technology

Featured

Transcript