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
なぜ、あなたのエージェントは言うことを聞かないのか
Avatar for segavvy segavvy
1
550
事業成長とAI活用を止めないデータ基盤アーキテクチャの設計思想
Avatar for Noriaki Hiraki hiracky16
0
750
AI時代におけるテストの基礎の再定義 / Rethinking the Fundamentals of Testing in the AI Era
Avatar for Matsu mineo_matsuya
15
5.9k
QA・ソフトウェアテスト研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
3
1.4k
データと地図で読む 大井町の「かわるもの、かわらないもの」
Avatar for じゅんじゅん yoshiyama_hana
0
500
AIツールを導入しても生産性はあがらない？ カオナビが直面した 3つの壁と乗り越え方。/ Overcoming 3 Barriers to AI-Driven Productivity at kaonavi
Avatar for 株式会社カオナビ kaonavi
0
370
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
11
2.9k
新たなDBアーキテクチャ「LTAP」にDeep Dive!!
Avatar for Takeru Ino inoutk
0
110
「休む」重要さ
Avatar for Makky12 smt7174
7
1.8k
CloudWatchから始めるAWS監視
Avatar for butadora butadora
0
260
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
Avatar for bash0C7 bash0c7
4
900
書籍セキュアAPIについて
Avatar for RiiiM(りむ) riiimparm
0
360

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
190
Done Done
Avatar for chrislema chrislema
186
16k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
730
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
57k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.4k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
760

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