Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Obama, Part 2
Search
Manik Rathee
October 22, 2013
Programming
2
370
Building Obama, Part 2
Presentation from CSS Dev Conf 2013
Manik Rathee
October 22, 2013
Tweet
Share
More Decks by Manik Rathee
See All by Manik Rathee
Building Obama
manikrathee
2
2.7k
Other Decks in Programming
See All in Programming
AIのメモリー
watany
11
1.1k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
670
リッチエディターを安全に開発・運用するために
unachang113
1
270
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
型で語るカタ
irof
1
850
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
35
6.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Why Our Code Smells
bkeepers
PRO
337
57k
Facilitating Awesome Meetings
lara
54
6.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Transcript
Sunday, October 20, 13
THE INTERNET Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
November 6, 2012 Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
VETERANS Sunday, October 20, 13
LOWER & MIDDLE CLASS Sunday, October 20, 13
LGBT Sunday, October 20, 13
WOMEN Sunday, October 20, 13
EQUALITY Sunday, October 20, 13
EQUALITY HOPE Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
OBAMA BUILDING Sunday, October 20, 13
OBAMA BUILDING Sunday, October 20, 13
@ RATHEE MANIK Sunday, October 20, 13
@ RATHEE MANIK Sunday, October 20, 13
@ RATHEE MANIK Sunday, October 20, 13
@ RATHEE MANIK Sunday, October 20, 13
@ RATHEE MANIK Sunday, October 20,
13
@ RATHEE MANIK Sunday, October
20, 13
Sunday, October 20, 13
Sunday, October 20, 13
PART 1 Sunday, October 20, 13
bit.ly/buildingobama Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
bit.ly/ofa-articles Sunday, October 20, 13
Sunday, October 20, 13
OBAMA FOR AMERICA HQ Sunday, October 20, 13
OBAMA FOR AMERICA HQ Sunday, October 20, 13
by FRONT-END THE NUMBERS Sunday, October 20, 13
OBAMA FOR AMERICA HQ 900,078 LINES OF CSS & JAVASCRIPT
by FRONT-END THE NUMBERS Sunday, October 20, 13
OBAMA FOR AMERICA 94,245 WRITTEN BY YOURS TRULY by FRONT-END
THE NUMBERS Sunday, October 20, 13
HQ Thursdays at 4am OUR LAZIEST TIME OF DAY by
FRONT-END THE NUMBERS Sunday, October 20, 13
RESPONSIVE PRESIDENTIAL SITE IN HISTORY First Sunday, October 20, 13
RESPONSIVE PRESIDENTIAL SITE IN HISTORY First + IE 7 Sunday,
October 20, 13
MOBILE FIRST Sunday, October 20, 13
MOBILE FIRST PROGRESSIVELY ENHANCED Sunday, October 20, 13
MOBILE FIRST PROGRESSIVELY ENHANCED PERFORMANCE FOCUSED Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS
CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS CHART
DONATE.BARACKOBAMA.COM Sunday, October 20, 13
CALL TOOL LIFE OF JULIA HEALTH CARE TOOL JOBS CHART
DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13
BARACKOBAMA.COM HEALTH CARE TOOL Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
BARACKOBAMA.COM DASHBOARD CALL TOOL LIFE OF JULIA HEALTH CARE TOOL
JOBS CHART DONATE.BARACKOBAMA.COM Sunday, October 20, 13
DONATE.BARACKOBAMA.COM Sunday, October 20, 13
FUNDRAISING Sunday, October 20, 13
$700 Sunday, October 20, 13
$700,000 Sunday, October 20, 13
$700,000,000 Sunday, October 20, 13
START WITH A PROBLEM Sunday, October 20, 13
$ Sunday, October 20, 13
$ FUNDED BY DONATIONS Sunday, October 20, 13
DONATE.BARACKOBAMA.COM DONATION PLATFORM (1.0) Sunday, October 20, 13
DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: Sunday, October 20, 13
DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ Sunday, October
20, 13
DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ HTML5 INEFFICIENT
MARKUP Sunday, October 20, 13
DONATE.BARACKOBAMA.COM PERFORMANCE ISSUES: 5-6s TIME TO PAINT ⏱ HTML5 INEFFICIENT
MARKUP JS DOM MANIPULATION ⇆ Sunday, October 20, 13
KYLE RUSH DEPUTY DIRECTOR OF DEVELOPMENT @KYLERUSH Sunday, October 20,
13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October
20, 13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October
20, 13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October
20, 13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October
20, 13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API Sunday, October
20, 13
JEKYLL AMAZON S3 AKAMAI AMAZON EC2 REST API CONTRIBUTE.BARACKOBAMA.COM (2.0)
Sunday, October 20, 13
We made the new platform 60% faster and this resulted
in a 14% increase in donation conversions “ Sunday, October 20, 13
We made the new platform 60% faster and this resulted
in a 14% increase in donation conversions “ Sunday, October 20, 13
(SPEED MATTERS) Sunday, October 20, 13
QUICK DONATE Sunday, October 20, 13
IF YOU ASK A USER TO COMPLETE ANY TASK You
should make it as easy and frictionless as possible. Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
#qd-chiclet { } Sunday, October 20, 13
DONATE PAGES Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
A/B TESTS OPTIMIZATION & Sunday, October 20, 13
OPTIMIZELY Sunday, October 20, 13
DATA RELIABILITY Sunday, October 20, 13
DATA RELIABILITY BASED ON 2 FACTORS 8,000 user sample size
Sunday, October 20, 13
DATA RELIABILITY BASED ON 2 FACTORS 95%+ confidence 8,000 user
sample size Sunday, October 20, 13
A/B TESTS OPTIMIZATION & Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
.module data-step=“n” Sunday, October 20, 13
position: absolute left: 0 Sunday, October 20, 13
transition: left 0.2s ease-in-out Sunday, October 20, 13
transition: left 0.2s ease-in-out Sunday, October 20, 13
transition: left 0.2s ease-in-out Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
form id="donate-form" class="" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13
form id="donate-form" class="sequential" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13
form id="donate-form" class="sequential" PROGRESSIVE ENHANCEMENT Sunday, October 20, 13
CSS is the reason I ran for office. - President
Obama, probably. Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October
20, 13
AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October
20, 13
AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL AMOUNT LABEL Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT ▻ Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT ▻ $5 $10 $25 $50
$75 $100 Sunday, October 20, 13
AMOUNT LABEL AMOUNT LABEL NEXT ▻ $5 $10 $25 $50
$75 $100 Sunday, October 20, 13
AMOUNT LABEL Sunday, October 20, 13
t LABEL PLACEHOLDER Sunday, October 20, 13
t LABEL PLACEHOLDER Sunday, October 20, 13
t LABEL PLACEHOLDER Sunday, October 20, 13
t LABEL + PLACEHOLDER Sunday, October 20, 13
t PLACEHOLDER LABEL Sunday, October 20, 13
PLACEHOLDER LABEL Sunday, October 20, 13
t LABEL PLACEHOLDER Sunday, October 20, 13
t LABEL PLACEHOLDER ALTERNATE STATES DETAILED ERROR MESSAGE Sunday, October
20, 13
t LABEL PLACEHOLDER DETAILED ERROR MESSAGE form id="donate-form" class="sequential error"
Sunday, October 20, 13
SEQUENTIAL DONATE MODULE Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
form id="donate-form" class="sequential step-one" Sunday, October 20, 13
form id="donate-form" class="sequential step-one" .step-one left: 0 } .step-two, .step-three,
.step-four { left: -100%; } Sunday, October 20, 13
Sunday, October 20, 13
WELCOME BACK, HUMAN. Sunday, October 20, 13
WELCOME BACK, YOU Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
$5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER
Sunday, October 20, 13
$5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER
Sunday, October 20, 13
$5 $10 $25 $50 $75 $100 LABEL PLACEHOLDER LABEL PLACEHOLDER
Sunday, October 20, 13
Sunday, October 20, 13
@media screen and (min-width: 768px) { } Sunday, October 20,
13
@media screen and (min-width: 768px) { } Sunday, October 20,
13
Sunday, October 20, 13
INCREASED DONATIONS +5.5% Sunday, October 20, 13
SAVED PAYMENT CONVERSIONS +14.4% Sunday, October 20, 13
REDUCED SERVER ERRORS -70% Sunday, October 20, 13
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
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
THANK YOU Sunday, October 20, 13
THANK YOU MANIK RATHEE @ .COM Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
Sunday, October 20, 13
THANK YOU ASCII ART BY MATTHEW GIPP @number61 Sunday, October
20, 13