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

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
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
170
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
5.8k
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
200
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.1k
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Claude Codeの「Compacting Conversation」を体感50%減！ CLAUDE.md + 8 Skills で挑むコンテキスト管理術
Avatar for Kazuki Murahama kmurahama
1
820
MUSUBIXとは
Avatar for Hisaho nahisaho
0
100
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
6k
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
410
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
150
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2k

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
99
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
600
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
49k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k

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