Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cutting off the browser fat from your app

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Hector Bustillos Hector Bustillos
October 10, 2013
Technology
320
1

Cutting off the browser fat from your app

Avatar for Hector Bustillos

Hector Bustillos

October 10, 2013

More Decks by Hector Bustillos

See All by Hector Bustillos
Saving your Rails applications.
Avatar for Hector Bustillos hecbuma
1
100

Other Decks in Technology

See All in Technology
中期計画、2回作ってみた　～業務委託と正社員、両方の視点から～
Avatar for 株式会社出前館 demaecan
1
620
protovalidate-es を導入してみた
Avatar for 弁護士ドットコム bengo4com
0
160
地球に⽣きるAI —GeoAIと「中間領域」— / AI Living on Earth — GeoAI and the “Intermediate Layer” —
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
190
10倍の生産性を実現するAI駆動並列エージェントのすべて
Avatar for 熊井悠 kumaiu
4
1.3k
Amazon Bedrock AgentCore ワークショップ JAWS UG TOHOKU / amazon-bedrock-agentcore-workshop-jawsug-tohoku-2026
Avatar for geeawa gawa
9
590
AI Engineering Summit Tokyo 2026 AIの前に、やることがある 〜医療データ企業の4フェーズ〜
Avatar for Daisuke Taniwaki dtaniwaki
0
2.5k
ポケモンの型をTypeScriptの型システムで表現してみた
Avatar for subroh_0508 subroh0508
0
360
スキルと MCP ツール、責務をどう分けるか？ AI が迷わないインターフェース設計の戦略
Avatar for CData Software Japan cdataj
1
890
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
18
6.2k
フロンティアAIのゲート化と地政学リスク
Avatar for 長津孝輔 nagatsu
0
110
Bucharest Tech Week 2026 - Reinventing testing practices in the AI era
Avatar for Eric Deandrea edeandrea
PRO
1
130
Agentic Web
Avatar for dynamis dynamis
1
200

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
720
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.6M
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
400
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
HDC tutorial
Avatar for Michiel Stock michielstock
2
700
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
400
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
230

Transcript

  1. Thursday, October 10, 13

  2. Hector @hecbuma Thursday, October 10, 13

  3. Add time Thursday, October 10, 13

  4. Thursday, October 10, 13

  5. Thursday, October 10, 13

  6. Thursday, October 10, 13

  7. 15 beach houses Thursday, October 10, 13

  8. Thursday, October 10, 13

  9. Thursday, October 10, 13

  10. Thursday, October 10, 13

  11. Thursday, October 10, 13

  12. Thursday, October 10, 13

  13. Thursday, October 10, 13

  14. Thursday, October 10, 13

  15. CFP opens in november Thursday, October 10, 13

  16. Thursday, October 10, 13

  17. magmaconf.com Thursday, October 10, 13

  18. Photos by Thursday, October 10, 13

  19. Thursday, October 10, 13

  20. Cutting off the browser fat from your app Thursday, October

    10, 13

  21. browser fat? Thursday, October 10, 13

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

  23. Thursday, October 10, 13

  24. Thursday, October 10, 13

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

  26. Thursday, October 10, 13

  27. “I’m not a front-end guy, why should I care?” Thursday,

    October 10, 13

  28. Time = Money Thursday, October 10, 13

  29. 1 Mississippi Thursday, October 10, 13

  30. http://bitchinfilmreviews.com/wp-content/uploads/2012/06/Happy-Feet.jpg Thursday, October 10, 13

  31. 2 Mississippi Thursday, October 10, 13

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

  33. 3 Mississippi Thursday, October 10, 13

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

  35. 4 Mississippi Thursday, October 10, 13

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

  37. The most important thing Thursday, October 10, 13

  38. Thursday, October 10, 13

  39. CSS Thursday, October 10, 13

  40. Right - to - Left Thursday, October 10, 13

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

  42. a li #active Thursday, October 10, 13

  43. Thursday, October 10, 13

  44. Thursday, October 10, 13

  45. Thursday, October 10, 13

  46. Thursday, October 10, 13

  47. Qualified Selectors ul#active {...} Thursday, October 10, 13

  48. Qualified Selectors #active {...} Thursday, October 10, 13

  49. Descendant Selectors body header div{ color: blue; } body header

    p{ color: red; } Thursday, October 10, 13

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

    10, 13

  51. Unqualified Selectors a[data-go^=”page-”]{ display: block; } Thursday, October 10, 13

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

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

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

    Thursday, October 10, 13

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

    13

  56. Sass Thursday, October 10, 13

  57. Thursday, October 10, 13

  58. Nesting too deep Thursday, October 10, 13

  59. Thursday, October 10, 13

  60. Mixins Thursday, October 10, 13

  61. Thursday, October 10, 13

  62. @extend Thursday, October 10, 13

  63. Thursday, October 10, 13

  64. LEARN CSS Thursday, October 10, 13

  65. Thursday, October 10, 13

  66. css-tricks.com/ all-about-floats/ Thursday, October 10, 13

  67. smacss.com Thursday, October 10, 13

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

  69. JS Thursday, October 10, 13

  70. MOVE IT DOWN! Thursday, October 10, 13

  71. Thursday, October 10, 13

  72. Thursday, October 10, 13

  73. Thursday, October 10, 13

  74. ASYNC & DEFER javascript_tag "alert('All is good')", :defer => 'defer'

    javascript_include_tag "application", :async => true Thursday, October 10, 13

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

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

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

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

  79. IMG Thursday, October 10, 13

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

  81. 6 to 8 parallel connections Thursday, October 10, 13

  82. Thursday, October 10, 13

  83. Thursday, October 10, 13

  84. Thursday, October 10, 13

  85. File Types Thursday, October 10, 13

  86. JPEG Thursday, October 10, 13

  87. Thursday, October 10, 13

  88. PNG Thursday, October 10, 13

  89. Thursday, October 10, 13

  90. GIF Thursday, October 10, 13

  91. Thursday, October 10, 13

  92. Thursday, October 10, 13

  93. Thursday, October 10, 13

  94. DO NOT RESIZE! Thursday, October 10, 13

  95. Thursday, October 10, 13

  96. Set height and width! Thursday, October 10, 13

  97. Thursday, October 10, 13

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

  99. Serve GZIP Thursday, October 10, 13

  100. Thursday, October 10, 13

  101. Thursday, October 10, 13

  102. gem ‘heroku_rails_deflate’ Thursday, October 10, 13

  103. Rack::Deflater Thursday, October 10, 13

  104. Thursday, October 10, 13

  105. HTML Thursday, October 10, 13

  106. Thursday, October 10, 13

  107. TOOLS Thursday, October 10, 13

  108. kraken.io Thursday, October 10, 13

  109. Thursday, October 10, 13

  110. # 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

  111. Chrome Developer tools Thursday, October 10, 13

  112. Thursday, October 10, 13

  113. Thursday, October 10, 13

  114. Retrospectus.com Thursday, October 10, 13

  115. ~30sec Thursday, October 10, 13

  116. ~6sec Thursday, October 10, 13

  117. Thursday, October 10, 13

  118. ` @hecbuma Thanks! Thursday, October 10, 13