SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
N O G A I N
N O PA I N
Stacy Kvernmo
@funstacy
A W K WA R D
Picture: “I should have known better….” patries71, Flickr
# N o P a i n | M Y S T O RY
D E S I G N C R I T I Q U E S
# N o P a i n
provides design feedback
EVERYONE
B A C K - E N D D E V E L O P E R S
# N o P a i n
Picture: Genesis Theme for WordPress
D I S C O V E R B U G S
Picture: Hasan Baglar/Sony World Photography Awards 2014
# N o P a i n | B E N E F I T S
I N C R E A S E FA M I L I A R I T Y
# N o P a i n | B E N E F I T S
Picture: Screenshot from The Simpsons, Matt Groening
UNDERSTAND
it well enough.
you don't
S I M P LY
If you can't explain it,
# N o P a i n | B E N E F I T S
E D U C AT I O N
F O R M A L P R O C E S S
# N o P a i n | W H E N
Picture: “President Obama does the Hour of Code” CODE.org, YouTube
P R E - C O M M I T
Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr
# N o P a i n | W H E N
P O S T- C O M M I T
# N o P a i n | W H E N
S E L F R E V I E W
# N o P a i n | W H E N
Picture: “I totally gave up!” Jay, Flickr
C O D E R E T R E AT
Picture: @CSSDevConf, Twitter
G R O W Y O U R N E T W O R KG R O W Y O U R N E T W O R K
# N o P a i n | R E S O U R C E S
O P E N S O U R C E
# N o P a i n | R E S O U R C E S
P R E PA R AT I O N T I M E
# N o P a i n | R E V I E W E R T I P S
Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr
S TAY P O S I T I V E
“THIS IS
# N o P a i n | R E V I E W E R T I P S
💩
AV O I D A B S O L U T E S
MUST
ALWAYS
NEVER
# N o P a i n | R E V I E W E R T I P S
J U S T
Why didn’t you
JUST
do X,
# N o P a i n | R E V I E W E R T I P S
J U S T
Why didn’t you
JUST
do X,
IDIOT
# N o P a i n | R E V I E W E R T I P S
?
A S K Q U E S T I O N S
???
?
# N o P a i n | R E V I E W E R T I P S
D O C U M E N T I S S U E S
# N o P a i n | R E V I E W E R T I P S
D O C U M E N TAT I O N
# N o P a i n | A U T H O R T I P S
P R O V I D E C O N T E X T
# N o P a i n | A U T H O R T I P S
P R O V I D E C O N T E X T
# N o P a i n | A U T H O R T I P S
CODEPEN.IO/STACY
B E P R E PA R E D
Discuss what
you wrote &
# N o P a i n | A U T H O R T I P S
B E O P E N
# N o P a i n | A U T H O R T I P S
It’s not you
…
IT’S YOUR CODE
F O L L O W S TA N D A R D S
# N o P a i n | W H AT T O R E V I E W
F O R M AT T I N G
# N o P a i n | W H AT T O R E V I E W
E A S Y T O U N D E R S TA N D
# N o P a i n | W H AT T O R E V I E W
.page {
…
…
.header {
…
…
.container {
…
…
.nav {
…
…
ul {
…
…
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W
…
…
.container {
…
…
.nav {
…
…
ul {
…
…
&.dropdown {
…
…
li.nav-item {
a {
color: white;
}
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W
I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
I N C E P T I O N R U L E
.page .header .container .nav ul.
color: white;
}
C O M P I L E S T O :
# N o P a i n | W H AT T O R E V I E W
body .page .header .container .na
color: violet !important;
}
.nav {
li {
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
a {
color: orange;
&:hover {
color: salmon;
}
}
}
I N C E P T I O N R U L E
# N o P a i n | W H AT T O R E V I E W
%base {
color: violet;
}
.foo {
@extend %base;
color: orange;
}
.bar {
color: yellow;
@extend %base;
}
.foo,
.bar {
color: violet;
}
.foo {
color: orange;
}
.bar {
color: yellow;
}
C O M P I L E S T O :
@ E X T E N D
# N o P a i n | W H AT T O R E V I E W
U N N E C E S S A RY A B S T R A C T I O N
# N o P a i n | W H AT T O R E V I E W
F I X E D VA L U E S
.element {
font-size: 27px;
height: 37px;
line-height: 44px;
margin-top: 19px;
width: 264px;
}
# N o P a i n | W H AT T O R E V I E W
A C C E S S I B I L I T Y
*:focus {
outline: none;
}
# N o P a i n | W H AT T O R E V I E W
.element {
@include span-columns(12);
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
.element {
float: left;
display: left;
margin-right: 2.35765%;
width: 100%;
}
.element:last-child {
margin-right: 0;
}
C O M P I L E S T O :
.element {
@include fill-parent;
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
.element {
width: 100%;
}
B L O AT E D O U T P U T
# N o P a i n | W H AT T O R E V I E W
.element {
width: 100%;
}
B L O AT E D O U T P U T
.element {
float: left;
display: left;
margin-right: 2.35765%;
width: 100%;
}
.element:last-child {
margin-right: 0;
}
VS.
# N o P a i n | W H AT T O R E V I E W
V E N D O R P R E F I X E S
.example {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
# N o P a i n | W H AT T O R E V I E W
U N U S E D C O D E
.example {
/* Unnecessary vendor prefixes
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box; */
box-sizing: border-box;
}
# N o P a i n | W H AT T O R E V I E W
U N U S E D C O D E
A D D U n C S S T O Y O U R B U I L D P R O C E S S
# N o P a i n | W H AT T O R E V I E W
S C A L A B I L I T Y
OOCSS
BEM
SMACSS
# N o P a i n | W H AT T O R E V I E W
R E V I E W Y O U R O W N C O D E
# N o P a i n | T O O L S
Any Text Editor
… and so many more
W O R K F L O W
# N o P a i n | T O O L S
C O D E R E V I E W
Gerrit Code Review
Upsource
Review BoardRietveld
# N o P a i n | T O O L S
C O D E R E V I E W, F T W !
# N o P a i n | K N O W L E D G E I S P O W E R
Time
After
0
25
50
75
100
Before
Quality
N O G A I N
N O PA I N
Stacy Kvernmo
@funstacy

Contenu connexe

Tendances

Consequences of an Insightful Algorithm
Consequences of an Insightful AlgorithmConsequences of an Insightful Algorithm
Consequences of an Insightful AlgorithmCarina C. Zona
 
The Evolution and Future of Content Publishing
The Evolution and Future of Content PublishingThe Evolution and Future of Content Publishing
The Evolution and Future of Content PublishingFITC
 
Promo Games for Movies and TV Shows
Promo Games for Movies and TV ShowsPromo Games for Movies and TV Shows
Promo Games for Movies and TV ShowsBen Chong
 
Jack D. Ryger: Best Colorado Ski Resorts
Jack D. Ryger: Best Colorado Ski ResortsJack D. Ryger: Best Colorado Ski Resorts
Jack D. Ryger: Best Colorado Ski ResortsJack D. Ryger
 
Suggerimenti per i selezionatori
Suggerimenti per i selezionatoriSuggerimenti per i selezionatori
Suggerimenti per i selezionatoriChiara Parazzini
 
Designing Agentive Technology with Christopher Noessel
Designing Agentive Technology with Christopher NoesselDesigning Agentive Technology with Christopher Noessel
Designing Agentive Technology with Christopher NoesselInformation Development World
 
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...Jordy van Gent
 
Holistic SEO - WordCamp NL 2015
Holistic SEO - WordCamp NL 2015Holistic SEO - WordCamp NL 2015
Holistic SEO - WordCamp NL 2015Joost de Valk
 
HRM KVK en social media
HRM KVK en social mediaHRM KVK en social media
HRM KVK en social mediaMirror Wise
 
Top 10 Places To Visit In London
Top 10 Places To Visit In LondonTop 10 Places To Visit In London
Top 10 Places To Visit In LondonBrett Cotham
 
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOU
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOUHOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOU
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOULipsa Dash
 
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...Dan Schneider
 
Apresentação TERDesign
Apresentação TERDesignApresentação TERDesign
Apresentação TERDesignHugo Cristo
 
How to make money using social media
How to make money using social mediaHow to make money using social media
How to make money using social mediaMynuBeginning
 
On the shoulders of Giants: Stop looking up, and Start Looking Down
On the shoulders of Giants: Stop looking up, and Start Looking DownOn the shoulders of Giants: Stop looking up, and Start Looking Down
On the shoulders of Giants: Stop looking up, and Start Looking DownEliza Brock
 
Énmárka a gyakorlatban
Énmárka a gyakorlatbanÉnmárka a gyakorlatban
Énmárka a gyakorlatbanVida Ágnes
 
Jack D. Ryger: Tips To Become A Better Skier
Jack D. Ryger: Tips To Become A Better SkierJack D. Ryger: Tips To Become A Better Skier
Jack D. Ryger: Tips To Become A Better SkierJack D. Ryger
 

Tendances (20)

Consequences of an Insightful Algorithm
Consequences of an Insightful AlgorithmConsequences of an Insightful Algorithm
Consequences of an Insightful Algorithm
 
The Evolution and Future of Content Publishing
The Evolution and Future of Content PublishingThe Evolution and Future of Content Publishing
The Evolution and Future of Content Publishing
 
Promo Games for Movies and TV Shows
Promo Games for Movies and TV ShowsPromo Games for Movies and TV Shows
Promo Games for Movies and TV Shows
 
Food is the new Fashion
Food is the new FashionFood is the new Fashion
Food is the new Fashion
 
Jack D. Ryger: Best Colorado Ski Resorts
Jack D. Ryger: Best Colorado Ski ResortsJack D. Ryger: Best Colorado Ski Resorts
Jack D. Ryger: Best Colorado Ski Resorts
 
Suggerimenti per i selezionatori
Suggerimenti per i selezionatoriSuggerimenti per i selezionatori
Suggerimenti per i selezionatori
 
Designing Agentive Technology with Christopher Noessel
Designing Agentive Technology with Christopher NoesselDesigning Agentive Technology with Christopher Noessel
Designing Agentive Technology with Christopher Noessel
 
Bits of video
Bits of videoBits of video
Bits of video
 
Wine Guide for Beginners
Wine Guide for BeginnersWine Guide for Beginners
Wine Guide for Beginners
 
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...
Content Marketing & Social Media voor Online Recruitment door Alina Sosnina (...
 
Holistic SEO - WordCamp NL 2015
Holistic SEO - WordCamp NL 2015Holistic SEO - WordCamp NL 2015
Holistic SEO - WordCamp NL 2015
 
HRM KVK en social media
HRM KVK en social mediaHRM KVK en social media
HRM KVK en social media
 
Top 10 Places To Visit In London
Top 10 Places To Visit In LondonTop 10 Places To Visit In London
Top 10 Places To Visit In London
 
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOU
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOUHOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOU
HOW PARTICIPATING IN CANNABIS INVESTING FORUM WEBINAR CAN BENEFIT YOU
 
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...
Dan Schneider: Quiz! “Sam & Cat”, Episode - Motorcycle Mystery by Schneider's...
 
Apresentação TERDesign
Apresentação TERDesignApresentação TERDesign
Apresentação TERDesign
 
How to make money using social media
How to make money using social mediaHow to make money using social media
How to make money using social media
 
On the shoulders of Giants: Stop looking up, and Start Looking Down
On the shoulders of Giants: Stop looking up, and Start Looking DownOn the shoulders of Giants: Stop looking up, and Start Looking Down
On the shoulders of Giants: Stop looking up, and Start Looking Down
 
Énmárka a gyakorlatban
Énmárka a gyakorlatbanÉnmárka a gyakorlatban
Énmárka a gyakorlatban
 
Jack D. Ryger: Tips To Become A Better Skier
Jack D. Ryger: Tips To Become A Better SkierJack D. Ryger: Tips To Become A Better Skier
Jack D. Ryger: Tips To Become A Better Skier
 

En vedette

Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of TwigBrandon Kelly
 
Google Maps Guiding Your Classroom
Google Maps  Guiding Your ClassroomGoogle Maps  Guiding Your Classroom
Google Maps Guiding Your ClassroomChris Scott
 
Software Quality for Programmers
Software Quality for ProgrammersSoftware Quality for Programmers
Software Quality for ProgrammersPawel Klimczyk
 
Google Products & Google Maps
Google Products & Google MapsGoogle Products & Google Maps
Google Products & Google MapsPamela Fox
 
12 Values and Skills Gained Through Contemplative Practices in Higher Education
12 Values and Skills Gained Through Contemplative Practices in Higher Education12 Values and Skills Gained Through Contemplative Practices in Higher Education
12 Values and Skills Gained Through Contemplative Practices in Higher EducationWiley
 
Let's Go: Introduction to Google's Go Programming Language
Let's Go: Introduction to Google's Go Programming LanguageLet's Go: Introduction to Google's Go Programming Language
Let's Go: Introduction to Google's Go Programming LanguageGanesh Samarthyam
 
Challenge Your Students, Don't Trick Them
Challenge Your Students, Don't Trick ThemChallenge Your Students, Don't Trick Them
Challenge Your Students, Don't Trick ThemWiley
 
Google maps street view power point presentation
Google maps street view power point presentationGoogle maps street view power point presentation
Google maps street view power point presentationmireya921
 
Google Maps Presentation
Google Maps PresentationGoogle Maps Presentation
Google Maps PresentationDavid Kamerer
 
How to Implement Hybrid Cloud Solutions Successfully
How to Implement Hybrid Cloud Solutions SuccessfullyHow to Implement Hybrid Cloud Solutions Successfully
How to Implement Hybrid Cloud Solutions SuccessfullySoftServe
 
Bangalore Container Conference 2017 - Poster
Bangalore Container Conference 2017 - PosterBangalore Container Conference 2017 - Poster
Bangalore Container Conference 2017 - PosterGanesh Samarthyam
 
1099 Problems: Self-Employment and the Future of Financial Services
1099 Problems: Self-Employment and the Future of Financial Services1099 Problems: Self-Employment and the Future of Financial Services
1099 Problems: Self-Employment and the Future of Financial ServicesCore Innovation Capital
 
Startup Technology: Cheatsheet for Non-Techies
Startup Technology: Cheatsheet for Non-TechiesStartup Technology: Cheatsheet for Non-Techies
Startup Technology: Cheatsheet for Non-TechiesFreedactics
 
Five Tips To Help You Tackle Programming
Five Tips To Help You Tackle ProgrammingFive Tips To Help You Tackle Programming
Five Tips To Help You Tackle ProgrammingWiley
 
10 books that every developer must read
10 books that every developer must read10 books that every developer must read
10 books that every developer must readGanesh Samarthyam
 
How to Make Great Software Estimates
How to Make Great Software EstimatesHow to Make Great Software Estimates
How to Make Great Software EstimatesGreg Thomas
 
10 key marketing_trends_for_2016
10 key marketing_trends_for_201610 key marketing_trends_for_2016
10 key marketing_trends_for_2016Carmen Ruiz
 
10 Tips to Improve your Daily Stand up
10 Tips to Improve your Daily Stand up10 Tips to Improve your Daily Stand up
10 Tips to Improve your Daily Stand upNimesh Soni
 

En vedette (20)

Making Sense of Twig
Making Sense of TwigMaking Sense of Twig
Making Sense of Twig
 
Scalable CSS Architecture
Scalable CSS ArchitectureScalable CSS Architecture
Scalable CSS Architecture
 
Google Maps Guiding Your Classroom
Google Maps  Guiding Your ClassroomGoogle Maps  Guiding Your Classroom
Google Maps Guiding Your Classroom
 
Software Quality for Programmers
Software Quality for ProgrammersSoftware Quality for Programmers
Software Quality for Programmers
 
12 Cool Google Maps Mashups
12 Cool Google Maps Mashups12 Cool Google Maps Mashups
12 Cool Google Maps Mashups
 
Google Products & Google Maps
Google Products & Google MapsGoogle Products & Google Maps
Google Products & Google Maps
 
12 Values and Skills Gained Through Contemplative Practices in Higher Education
12 Values and Skills Gained Through Contemplative Practices in Higher Education12 Values and Skills Gained Through Contemplative Practices in Higher Education
12 Values and Skills Gained Through Contemplative Practices in Higher Education
 
Let's Go: Introduction to Google's Go Programming Language
Let's Go: Introduction to Google's Go Programming LanguageLet's Go: Introduction to Google's Go Programming Language
Let's Go: Introduction to Google's Go Programming Language
 
Challenge Your Students, Don't Trick Them
Challenge Your Students, Don't Trick ThemChallenge Your Students, Don't Trick Them
Challenge Your Students, Don't Trick Them
 
Google maps street view power point presentation
Google maps street view power point presentationGoogle maps street view power point presentation
Google maps street view power point presentation
 
Google Maps Presentation
Google Maps PresentationGoogle Maps Presentation
Google Maps Presentation
 
How to Implement Hybrid Cloud Solutions Successfully
How to Implement Hybrid Cloud Solutions SuccessfullyHow to Implement Hybrid Cloud Solutions Successfully
How to Implement Hybrid Cloud Solutions Successfully
 
Bangalore Container Conference 2017 - Poster
Bangalore Container Conference 2017 - PosterBangalore Container Conference 2017 - Poster
Bangalore Container Conference 2017 - Poster
 
1099 Problems: Self-Employment and the Future of Financial Services
1099 Problems: Self-Employment and the Future of Financial Services1099 Problems: Self-Employment and the Future of Financial Services
1099 Problems: Self-Employment and the Future of Financial Services
 
Startup Technology: Cheatsheet for Non-Techies
Startup Technology: Cheatsheet for Non-TechiesStartup Technology: Cheatsheet for Non-Techies
Startup Technology: Cheatsheet for Non-Techies
 
Five Tips To Help You Tackle Programming
Five Tips To Help You Tackle ProgrammingFive Tips To Help You Tackle Programming
Five Tips To Help You Tackle Programming
 
10 books that every developer must read
10 books that every developer must read10 books that every developer must read
10 books that every developer must read
 
How to Make Great Software Estimates
How to Make Great Software EstimatesHow to Make Great Software Estimates
How to Make Great Software Estimates
 
10 key marketing_trends_for_2016
10 key marketing_trends_for_201610 key marketing_trends_for_2016
10 key marketing_trends_for_2016
 
10 Tips to Improve your Daily Stand up
10 Tips to Improve your Daily Stand up10 Tips to Improve your Daily Stand up
10 Tips to Improve your Daily Stand up
 

Similaire à No pain, no gain. CSS Code Reviews FTW.

Learning online 030215
Learning online 030215Learning online 030215
Learning online 030215Sanna Brauer
 
ChatBots and conversational marketing | Six & Flow
ChatBots and conversational marketing | Six & FlowChatBots and conversational marketing | Six & Flow
ChatBots and conversational marketing | Six & FlowRichard Wood
 
Design for your audience
Design for your audienceDesign for your audience
Design for your audienceWalter Breakell
 
Thinking Outside the Book KPR
Thinking Outside the Book KPRThinking Outside the Book KPR
Thinking Outside the Book KPRlrougeux
 
multimediainfomediac17-180302055121.pdf
multimediainfomediac17-180302055121.pdfmultimediainfomediac17-180302055121.pdf
multimediainfomediac17-180302055121.pdfClaesTrinio
 
Almost Everything I've Learned From 5 Years of Lean UX
Almost Everything I've Learned From 5 Years of Lean UXAlmost Everything I've Learned From 5 Years of Lean UX
Almost Everything I've Learned From 5 Years of Lean UXJeff Gothelf
 
Multimedia information and Media
Multimedia information and MediaMultimedia information and Media
Multimedia information and MediaJalen Rebolledo
 
Curriculum Night Owen 2016 17
Curriculum Night Owen 2016 17Curriculum Night Owen 2016 17
Curriculum Night Owen 2016 17annmafnasowen
 
How to Write a Book in Four Easy Steps
How to Write a Book in Four Easy StepsHow to Write a Book in Four Easy Steps
How to Write a Book in Four Easy StepsStan Phelps
 
TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkGoulven Champenois
 
APItheDocs: How Can API Documentation Be Agile?
APItheDocs: How Can API Documentation Be Agile?APItheDocs: How Can API Documentation Be Agile?
APItheDocs: How Can API Documentation Be Agile?eBranding Ninja
 
Mobile UX - Things to consider
Mobile UX - Things to considerMobile UX - Things to consider
Mobile UX - Things to considerRichard Hewitt
 
#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm
#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm
#Winning at Instagram, or How to Learn to Stop Worrying and Love the AlgorithmKate O'Neill
 
Frontend architecture on big and small sites
Frontend architecture on big and small sitesFrontend architecture on big and small sites
Frontend architecture on big and small sitesToni Pinel
 
Lesson from 5 years of Lean UX
Lesson from 5 years of Lean UXLesson from 5 years of Lean UX
Lesson from 5 years of Lean UXInVision App
 
PPT-in-Creative-Writing-Q1.pptx
PPT-in-Creative-Writing-Q1.pptxPPT-in-Creative-Writing-Q1.pptx
PPT-in-Creative-Writing-Q1.pptxkokeykokey
 
Guia de informatica nro° 2!
Guia de informatica nro° 2!Guia de informatica nro° 2!
Guia de informatica nro° 2!Lucia Aparicio
 

Similaire à No pain, no gain. CSS Code Reviews FTW. (20)

Learning online 030215
Learning online 030215Learning online 030215
Learning online 030215
 
ChatBots and conversational marketing | Six & Flow
ChatBots and conversational marketing | Six & FlowChatBots and conversational marketing | Six & Flow
ChatBots and conversational marketing | Six & Flow
 
Design for your audience
Design for your audienceDesign for your audience
Design for your audience
 
Thinking Outside the Book KPR
Thinking Outside the Book KPRThinking Outside the Book KPR
Thinking Outside the Book KPR
 
multimediainfomediac17-180302055121.pdf
multimediainfomediac17-180302055121.pdfmultimediainfomediac17-180302055121.pdf
multimediainfomediac17-180302055121.pdf
 
Almost Everything I've Learned From 5 Years of Lean UX
Almost Everything I've Learned From 5 Years of Lean UXAlmost Everything I've Learned From 5 Years of Lean UX
Almost Everything I've Learned From 5 Years of Lean UX
 
Multimedia information and Media
Multimedia information and MediaMultimedia information and Media
Multimedia information and Media
 
Curriculum Night Owen 2016 17
Curriculum Night Owen 2016 17Curriculum Night Owen 2016 17
Curriculum Night Owen 2016 17
 
How to Write a Book in Four Easy Steps
How to Write a Book in Four Easy StepsHow to Write a Book in Four Easy Steps
How to Write a Book in Four Easy Steps
 
TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Midterm Rehab
Midterm RehabMidterm Rehab
Midterm Rehab
 
What is Student Centered Coaching?
What is Student Centered Coaching?What is Student Centered Coaching?
What is Student Centered Coaching?
 
APItheDocs: How Can API Documentation Be Agile?
APItheDocs: How Can API Documentation Be Agile?APItheDocs: How Can API Documentation Be Agile?
APItheDocs: How Can API Documentation Be Agile?
 
Mobile UX - Things to consider
Mobile UX - Things to considerMobile UX - Things to consider
Mobile UX - Things to consider
 
#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm
#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm
#Winning at Instagram, or How to Learn to Stop Worrying and Love the Algorithm
 
DPU SUMMER LAB PROPOSAL GROUP A
DPU SUMMER LAB PROPOSAL GROUP ADPU SUMMER LAB PROPOSAL GROUP A
DPU SUMMER LAB PROPOSAL GROUP A
 
Frontend architecture on big and small sites
Frontend architecture on big and small sitesFrontend architecture on big and small sites
Frontend architecture on big and small sites
 
Lesson from 5 years of Lean UX
Lesson from 5 years of Lean UXLesson from 5 years of Lean UX
Lesson from 5 years of Lean UX
 
PPT-in-Creative-Writing-Q1.pptx
PPT-in-Creative-Writing-Q1.pptxPPT-in-Creative-Writing-Q1.pptx
PPT-in-Creative-Writing-Q1.pptx
 
Guia de informatica nro° 2!
Guia de informatica nro° 2!Guia de informatica nro° 2!
Guia de informatica nro° 2!
 

Plus de Stacy Kvernmo

The Great State of Design 2018
The Great State of Design 2018The Great State of Design 2018
The Great State of Design 2018Stacy Kvernmo
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 
From Scratch to Launch #2 - Design phase
From Scratch to Launch #2 - Design phaseFrom Scratch to Launch #2 - Design phase
From Scratch to Launch #2 - Design phaseStacy Kvernmo
 
From Scratch to Launch Series - Part 1 - Planning Phase
From Scratch to Launch Series - Part 1 - Planning PhaseFrom Scratch to Launch Series - Part 1 - Planning Phase
From Scratch to Launch Series - Part 1 - Planning PhaseStacy Kvernmo
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 
Curing Design Complacency
Curing Design ComplacencyCuring Design Complacency
Curing Design ComplacencyStacy Kvernmo
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design ProcessStacy Kvernmo
 
Exploring the design process #wcchi
Exploring the design process #wcchiExploring the design process #wcchi
Exploring the design process #wcchiStacy Kvernmo
 

Plus de Stacy Kvernmo (8)

The Great State of Design 2018
The Great State of Design 2018The Great State of Design 2018
The Great State of Design 2018
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 
From Scratch to Launch #2 - Design phase
From Scratch to Launch #2 - Design phaseFrom Scratch to Launch #2 - Design phase
From Scratch to Launch #2 - Design phase
 
From Scratch to Launch Series - Part 1 - Planning Phase
From Scratch to Launch Series - Part 1 - Planning PhaseFrom Scratch to Launch Series - Part 1 - Planning Phase
From Scratch to Launch Series - Part 1 - Planning Phase
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 
Curing Design Complacency
Curing Design ComplacencyCuring Design Complacency
Curing Design Complacency
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design Process
 
Exploring the design process #wcchi
Exploring the design process #wcchiExploring the design process #wcchi
Exploring the design process #wcchi
 

Dernier

React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentBOSC Tech Labs
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App DevelopmentMobulous Technologies
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
How to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareHow to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareNYGGS Automation Suite
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024ThousandEyes
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 

Dernier (20)

Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App Development
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
How to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareHow to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS Software
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 

No pain, no gain. CSS Code Reviews FTW.

  • 1. N O G A I N N O PA I N Stacy Kvernmo @funstacy
  • 2. A W K WA R D Picture: “I should have known better….” patries71, Flickr # N o P a i n | M Y S T O RY
  • 3. D E S I G N C R I T I Q U E S # N o P a i n provides design feedback EVERYONE
  • 4. B A C K - E N D D E V E L O P E R S # N o P a i n Picture: Genesis Theme for WordPress
  • 5. D I S C O V E R B U G S Picture: Hasan Baglar/Sony World Photography Awards 2014 # N o P a i n | B E N E F I T S
  • 6. I N C R E A S E FA M I L I A R I T Y # N o P a i n | B E N E F I T S Picture: Screenshot from The Simpsons, Matt Groening
  • 7. UNDERSTAND it well enough. you don't S I M P LY If you can't explain it, # N o P a i n | B E N E F I T S E D U C AT I O N
  • 8. F O R M A L P R O C E S S # N o P a i n | W H E N Picture: “President Obama does the Hour of Code” CODE.org, YouTube
  • 9. P R E - C O M M I T Picture: “LEGO Collectible Minifigures Series 7 : Computer Programmer” wiredforlego, Flickr # N o P a i n | W H E N
  • 10. P O S T- C O M M I T # N o P a i n | W H E N
  • 11. S E L F R E V I E W # N o P a i n | W H E N Picture: “I totally gave up!” Jay, Flickr
  • 12. C O D E R E T R E AT Picture: @CSSDevConf, Twitter G R O W Y O U R N E T W O R KG R O W Y O U R N E T W O R K # N o P a i n | R E S O U R C E S
  • 13. O P E N S O U R C E # N o P a i n | R E S O U R C E S
  • 14. P R E PA R AT I O N T I M E # N o P a i n | R E V I E W E R T I P S Picture: ‘The Passage of Time’, Toni Verdú Carbó, Flickr
  • 15. S TAY P O S I T I V E “THIS IS # N o P a i n | R E V I E W E R T I P S 💩
  • 16. AV O I D A B S O L U T E S MUST ALWAYS NEVER # N o P a i n | R E V I E W E R T I P S
  • 17. J U S T Why didn’t you JUST do X, # N o P a i n | R E V I E W E R T I P S
  • 18. J U S T Why didn’t you JUST do X, IDIOT # N o P a i n | R E V I E W E R T I P S
  • 19. ? A S K Q U E S T I O N S ??? ? # N o P a i n | R E V I E W E R T I P S
  • 20. D O C U M E N T I S S U E S # N o P a i n | R E V I E W E R T I P S
  • 21. D O C U M E N TAT I O N # N o P a i n | A U T H O R T I P S
  • 22. P R O V I D E C O N T E X T # N o P a i n | A U T H O R T I P S
  • 23. P R O V I D E C O N T E X T # N o P a i n | A U T H O R T I P S CODEPEN.IO/STACY
  • 24. B E P R E PA R E D Discuss what you wrote & # N o P a i n | A U T H O R T I P S
  • 25. B E O P E N # N o P a i n | A U T H O R T I P S It’s not you … IT’S YOUR CODE
  • 26. F O L L O W S TA N D A R D S # N o P a i n | W H AT T O R E V I E W
  • 27. F O R M AT T I N G # N o P a i n | W H AT T O R E V I E W
  • 28. E A S Y T O U N D E R S TA N D # N o P a i n | W H AT T O R E V I E W
  • 29. .page { … … .header { … … .container { … … .nav { … … ul { … … I N C E P T I O N R U L E # N o P a i n | W H AT T O R E V I E W
  • 30. … … .container { … … .nav { … … ul { … … &.dropdown { … … li.nav-item { a { color: white; } } } } I N C E P T I O N R U L E # N o P a i n | W H AT T O R E V I E W
  • 31. I N C E P T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W
  • 32. I N C E P T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W
  • 33. I N C E P T I O N R U L E .page .header .container .nav ul. color: white; } C O M P I L E S T O : # N o P a i n | W H AT T O R E V I E W body .page .header .container .na color: violet !important; }
  • 34. .nav { li { margin-right: 1rem; &:last-child { margin-right: 0; } } a { color: orange; &:hover { color: salmon; } } } I N C E P T I O N R U L E # N o P a i n | W H AT T O R E V I E W
  • 35. %base { color: violet; } .foo { @extend %base; color: orange; } .bar { color: yellow; @extend %base; } .foo, .bar { color: violet; } .foo { color: orange; } .bar { color: yellow; } C O M P I L E S T O : @ E X T E N D # N o P a i n | W H AT T O R E V I E W
  • 36. U N N E C E S S A RY A B S T R A C T I O N # N o P a i n | W H AT T O R E V I E W
  • 37. F I X E D VA L U E S .element { font-size: 27px; height: 37px; line-height: 44px; margin-top: 19px; width: 264px; } # N o P a i n | W H AT T O R E V I E W
  • 38. A C C E S S I B I L I T Y *:focus { outline: none; } # N o P a i n | W H AT T O R E V I E W
  • 39. .element { @include span-columns(12); } B L O AT E D O U T P U T # N o P a i n | W H AT T O R E V I E W
  • 40. B L O AT E D O U T P U T # N o P a i n | W H AT T O R E V I E W .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } C O M P I L E S T O :
  • 41. .element { @include fill-parent; } B L O AT E D O U T P U T # N o P a i n | W H AT T O R E V I E W
  • 42. .element { width: 100%; } B L O AT E D O U T P U T # N o P a i n | W H AT T O R E V I E W
  • 43. .element { width: 100%; } B L O AT E D O U T P U T .element { float: left; display: left; margin-right: 2.35765%; width: 100%; } .element:last-child { margin-right: 0; } VS. # N o P a i n | W H AT T O R E V I E W
  • 44. V E N D O R P R E F I X E S .example { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } # N o P a i n | W H AT T O R E V I E W
  • 45. U N U S E D C O D E .example { /* Unnecessary vendor prefixes -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; */ box-sizing: border-box; } # N o P a i n | W H AT T O R E V I E W
  • 46. U N U S E D C O D E A D D U n C S S T O Y O U R B U I L D P R O C E S S # N o P a i n | W H AT T O R E V I E W
  • 47. S C A L A B I L I T Y OOCSS BEM SMACSS # N o P a i n | W H AT T O R E V I E W
  • 48. R E V I E W Y O U R O W N C O D E # N o P a i n | T O O L S Any Text Editor … and so many more
  • 49. W O R K F L O W # N o P a i n | T O O L S
  • 50. C O D E R E V I E W Gerrit Code Review Upsource Review BoardRietveld # N o P a i n | T O O L S
  • 51. C O D E R E V I E W, F T W ! # N o P a i n | K N O W L E D G E I S P O W E R Time After 0 25 50 75 100 Before Quality
  • 52. N O G A I N N O PA I N Stacy Kvernmo @funstacy