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

Cutting off the browser fat from your app

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
Invisible to AI? Making TYPO3 Sites Quotable by AI Search Systems
Avatar for Wolfgang Wagner wolfgangwagner
0
220
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
3
980
TypeScript入門 2026
Avatar for Recruit recruitengineers
PRO
3
680
LLM Internals: 언어 모델의 계보와 알고리즘 진화 (2023~2026)
Avatar for Jeongkyu Shin inureyes
PRO
0
590
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
260
少人数チームで実現する、大規模AWSサーバーレス基盤における"揺らがない"信頼性運用
Avatar for maimyyym maimyyym
1
110
Agent 時代の Kaggle 展望 / kaggle-in-the-agentic-era
Avatar for Shotaro Ishihara upura
1
800
ソフトウェアサプライチェーンの構造的リスクとコンテナ環境の保護
Avatar for Kyohei Mizumoto kyohmizu
4
390
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.6k
MulticaとPi Coding Agentで、小規模OSSを30本同時運用した流れ
Avatar for eiei114 eiei114
0
130
Genie Codeハンズオン基礎編
Avatar for Takaaki Yayoi taka_aki
1
130
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
Avatar for SansanTech sansantech
PRO
1
320

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.4k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
290
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.5k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
840
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
520
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.3k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
210

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