$30 off During Our Annual Pro Sale. View Details »

Building Obama, Part 2

Avatar for Manik Rathee Manik Rathee
October 22, 2013
Programming
2
390

Building Obama, Part 2

Presentation from CSS Dev Conf 2013

Avatar for Manik Rathee

Manik Rathee

October 22, 2013
Tweet

More Decks by Manik Rathee

See All by Manik Rathee
Building Obama
Avatar for Manik Rathee manikrathee
2
2.7k

Other Decks in Programming

See All in Programming
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
550
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
Avatar for Suhyeon Kim wisemuji
0
160
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.3k
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
260
ViewファーストなRailsアプリ開発のたのしさ
Avatar for sugiwe sugiwe
0
500
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
140
AIコーディングエージェント（skywork）
Avatar for kondai kondai24
0
180
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
200
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
130
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
Avatar for Tomofumi Kondo tomokon
0
140
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
Avatar for Yuya Matsumura yuya4
6
3.8k
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
200

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
38
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
400
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
20
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
110
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
0
930
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
1
140
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
170

Transcript

  1. Sunday, October 20, 13

  2. THE INTERNET Sunday, October 20, 13

  3. Sunday, October 20, 13

  4. Sunday, October 20, 13

  5. November 6, 2012 Sunday, October 20, 13

  6. Sunday, October 20, 13

  7. Sunday, October 20, 13

  8. Sunday, October 20, 13

  9. Sunday, October 20, 13

  10. VETERANS Sunday, October 20, 13

  11. LOWER & MIDDLE CLASS Sunday, October 20, 13

  12. LGBT Sunday, October 20, 13

  13. WOMEN Sunday, October 20, 13

  14. EQUALITY Sunday, October 20, 13

  15. EQUALITY HOPE Sunday, October 20, 13

  16. Sunday, October 20, 13

  17. Sunday, October 20, 13

  18. Sunday, October 20, 13

  19. OBAMA BUILDING Sunday, October 20, 13

  20. OBAMA BUILDING Sunday, October 20, 13

  21. @ RATHEE MANIK Sunday, October 20, 13

  22. @ RATHEE MANIK  Sunday, October 20, 13

  23. @ RATHEE MANIK   Sunday, October 20, 13

  24. @ RATHEE MANIK    Sunday, October 20, 13

  25. @ RATHEE MANIK     Sunday, October 20,

    13

  26. @ RATHEE MANIK      Sunday, October

    20, 13

  27. Sunday, October 20, 13

  28. Sunday, October 20, 13

  29. PART 1 Sunday, October 20, 13

  30. bit.ly/buildingobama Sunday, October 20, 13

  31. Sunday, October 20, 13

  32. Sunday, October 20, 13

  33. bit.ly/ofa-articles Sunday, October 20, 13

  34. Sunday, October 20, 13

  35. OBAMA FOR AMERICA HQ Sunday, October 20, 13

  36. OBAMA FOR AMERICA HQ Sunday, October 20, 13

  37. by FRONT-END THE NUMBERS Sunday, October 20, 13

  38. OBAMA FOR AMERICA HQ 900,078 LINES OF CSS & JAVASCRIPT

    by FRONT-END THE NUMBERS Sunday, October 20, 13

  39. OBAMA FOR AMERICA 94,245 WRITTEN BY YOURS TRULY by FRONT-END

    THE NUMBERS Sunday, October 20, 13

  40. HQ Thursdays at 4am OUR LAZIEST TIME OF DAY by

    FRONT-END THE NUMBERS Sunday, October 20, 13

  41. RESPONSIVE PRESIDENTIAL SITE IN HISTORY First Sunday, October 20, 13

  42. RESPONSIVE PRESIDENTIAL SITE IN HISTORY First + IE 7 Sunday,

    October 20, 13

  43. MOBILE FIRST Sunday, October 20, 13

  44. MOBILE FIRST PROGRESSIVELY ENHANCED Sunday, October 20, 13

  45. MOBILE FIRST PROGRESSIVELY ENHANCED PERFORMANCE FOCUSED Sunday, October 20, 13

  46. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  47. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  48. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  49. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  50. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  51. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  52. DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS

    CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  53. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  54. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  55. CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS CHART

    DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  56. CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS CHART

    DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  57. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13

  58. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13

  59. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  60. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  61. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  62. BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13

  63. BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13

  64. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  65. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  66. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  67. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  68. BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL

    JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  69. DONATE.BARACKOBAMA.COM Sunday, October 20, 13

  70. FUNDRAISING Sunday, October 20, 13

  71. $700 Sunday, October 20, 13

  72. $700,000 Sunday, October 20, 13

  73. $700,000,000 Sunday, October 20, 13

  74. START WITH A PROBLEM Sunday, October 20, 13

  75. $ Sunday, October 20, 13

  76. $ FUNDED BY DONATIONS Sunday, October 20, 13

  77. DONATE.BARACKOBAMA.COM DONATION PLATFORM (1.0) Sunday, October 20, 13

  78. DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: Sunday, October 20, 13

  79. DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ Sunday, October

    20, 13

  80. DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ HTML5 INEFFICIENT

    MARKUP  Sunday, October 20, 13

  81. DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ HTML5 INEFFICIENT

    MARKUP  JS DOM MANIPULATION ⇆ Sunday, October 20, 13

  82. KYLE RUSH DEPUTY DIRECTOR OF DEVELOPMENT @KYLERUSH Sunday, October 20,

    13

  83. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October

    20, 13

  84. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October

    20, 13

  85. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October

    20, 13

  86. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October

    20, 13

  87. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October

    20, 13

  88. JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API CONTRIBUTE.BARACKOBAMA.COM (2.0)

    Sunday, October 20, 13

  89. We made the new platform 60% faster and this resulted

    in a 14% increase in donation conversions “ Sunday, October 20, 13

  90. We made the new platform 60% faster and this resulted

    in a 14% increase in donation conversions “ Sunday, October 20, 13

  91. (SPEED MATTERS) Sunday, October 20, 13

  92. QUICK DONATE Sunday, October 20, 13

  93. IF YOU ASK A USER TO COMPLETE ANY TASK You

    should make it as easy and frictionless as possible. Sunday, October 20, 13

  94. Sunday, October 20, 13

  95. Sunday, October 20, 13

  96. Sunday, October 20, 13

  97. #qd-chiclet { } Sunday, October 20, 13

  98. DONATE PAGES Sunday, October 20, 13

  99. Sunday, October 20, 13

  100. Sunday, October 20, 13

  101. A/B TESTS OPTIMIZATION & Sunday, October 20, 13

  102. OPTIMIZELY Sunday, October 20, 13

  103. DATA RELIABILITY Sunday, October 20, 13

  104. DATA RELIABILITY BASED ON 2 FACTORS 8,000 user sample size

    Sunday, October 20, 13

  105. DATA RELIABILITY BASED ON 2 FACTORS 95%+ confidence 8,000 user

    sample size Sunday, October 20, 13

  106. A/B TESTS OPTIMIZATION & Sunday, October 20, 13

  107. Sunday, October 20, 13

  108. Sunday, October 20, 13

  109. Sunday, October 20, 13

  110. Sunday, October 20, 13

  111. Sunday, October 20, 13

  112. Sunday, October 20, 13

  113. Sunday, October 20, 13

  114. .module data-step=“n” Sunday, October 20, 13

  115. position: absolute left: 0 Sunday, October 20, 13

  116. transition: left 0.2s ease-in-out Sunday, October 20, 13

  117. transition: left 0.2s ease-in-out Sunday, October 20, 13

  118. transition: left 0.2s ease-in-out Sunday, October 20, 13

  119. Sunday, October 20, 13

  120. Sunday, October 20, 13

  121. Sunday, October 20, 13

  122. form id="donate-form" class="" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13

  123. form id="donate-form" class="sequential" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13

  124. form id="donate-form" class="sequential" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13

  125. CSS is the reason I ran for office. - President

    Obama, probably. Sunday, October 20, 13

  126. AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October

    20, 13

  127. AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October

    20, 13

  128. AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October 20, 13

  129. AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October 20, 13

  130. AMOUNT LABEL AMOUNT LABEL NEXT Sunday, October 20, 13

  131. AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13

  132. AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13

  133. AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13

  134. AMOUNT LABEL AMOUNT LABEL NEXT ▻ $5 $10 $25 $50

    $75 $100 Sunday, October 20, 13

  135. AMOUNT LABEL AMOUNT LABEL NEXT ▻ $5 $10 $25 $50

    $75 $100 Sunday, October 20, 13

  136. AMOUNT LABEL Sunday, October 20, 13

  137. t LABEL PLACEHOLDER Sunday, October 20, 13

  138. t LABEL PLACEHOLDER Sunday, October 20, 13

  139. t LABEL PLACEHOLDER Sunday, October 20, 13

  140. t LABEL + PLACEHOLDER Sunday, October 20, 13

  141. t PLACEHOLDER LABEL Sunday, October 20, 13

  142. PLACEHOLDER LABEL Sunday, October 20, 13

  143. t LABEL PLACEHOLDER Sunday, October 20, 13

  144. t LABEL PLACEHOLDER ALTERNATE STATES DETAILED ERROR MESSAGE Sunday, October

    20, 13

  145. t LABEL PLACEHOLDER DETAILED ERROR MESSAGE form id="donate-form" class="sequential error"

    Sunday, October 20, 13

  146. SEQUENTIAL DONATE MODULE Sunday, October 20, 13

  147. Sunday, October 20, 13

  148. Sunday, October 20, 13

  149. Sunday, October 20, 13

  150. Sunday, October 20, 13

  151. Sunday, October 20, 13

  152. form id="donate-form" class="sequential step-one" Sunday, October 20, 13

  153. form id="donate-form" class="sequential step-one" .step-one left: 0 } .step-two, .step-three,

    .step-four { left: -100%; } Sunday, October 20, 13

  154. Sunday, October 20, 13

  155. WELCOME BACK, HUMAN. Sunday, October 20, 13

  156. WELCOME BACK, YOU Sunday, October 20, 13

  157. Sunday, October 20, 13

  158. Sunday, October 20, 13

  159. Sunday, October 20, 13

  160. Sunday, October 20, 13

  161. $5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER

    Sunday, October 20, 13

  162. $5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER

    Sunday, October 20, 13

  163. $5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER

    Sunday, October 20, 13

  164. Sunday, October 20, 13

  165. @media screen and (min-width: 768px) { } Sunday, October 20,

    13

  166. @media screen and (min-width: 768px) { } Sunday, October 20,

    13

  167. Sunday, October 20, 13

  168. INCREASED DONATIONS +5.5% Sunday, October 20, 13

  169. SAVED PAYMENT CONVERSIONS +14.4% Sunday, October 20, 13

  170. REDUCED SERVER ERRORS -70% Sunday, October 20, 13

  171. Turns out you can get more users to the top

    of the mountain if you show them a gradual incline instead of a steep slope. “ - KYLE RUSH Sunday, October 20, 13

  172. Sunday, October 20, 13

  173. Sunday, October 20, 13

  174. Sunday, October 20, 13

  175. Sunday, October 20, 13

  176. Sunday, October 20, 13

  177. THANK YOU Sunday, October 20, 13

  178. THANK YOU MANIK RATHEE @ .COM Sunday, October 20, 13

  179. Sunday, October 20, 13

  180. Sunday, October 20, 13

  181. Sunday, October 20, 13

  182. Sunday, October 20, 13

  183. Sunday, October 20, 13

  184. Sunday, October 20, 13

  185. THANK YOU ASCII ART BY MATTHEW GIPP @number61 Sunday, October

    20, 13