SlideShare a Scribd company logo
1 of 69
Download to read offline
From cruft to CRAFT
@nickdenardis #psuweb
@nickdenardis #psuweb
Nick DeNardis
Minimalist. UX crafter. Speaker. Realist. 

Computer scientist. Library scientist.
Wayne State University

Director of Digital Communications
TEDxDetroit, HighEdWeb MI, 

Laravel Detroit & Refresh Detroit

Organizer
Amateur hardwood floor refinisher
@nickdenardis #psuweb
Housekeeping
Slides online

speakerdeck.com/nickdenardis
Music online

8tracks.com/nickdenardis/psuweb-woodwork
Extra resources are available on the slides
This is being streamed/recorded
Show of hands…
@nickdenardis #psuweb
How did we produce all this
cruft in the first place?
@nickdenardis #psuweb
Simple
☐ Creating software is hard

☐ Lots of unknowns

☐ Client changes over time

☐ Changing technology

☐ Growing expectations

☐ Time constraints

☐ Money constraints

☐ Turnover/student workers

☐ Team moral

☐ Development environment

☐ Training
Developer
A developer executes. Their
talents often focused to a single
area. Without need for the “big
picture”.
Engineer
An engineer designs and plans.
Always aware of the “big
picture”. With talents in many
areas. An engineer can assume
the developer role. But an
engineer’s core focus lies with
architecture.
@nickdenardis #psuweb
Project management
contributed to this cruft…
@nickdenardis #psuweb
Resources
• https://www.getharvest.com/
@nickdenardis #psuweb
Turnover
produced all this cruft…
@nickdenardis #psuweb
Documentation
@nickdenardis #psuweb
Team knowledge
created all this cruft..
@nickdenardis #psuweb
Reading code
levels up everyone on the team
@nickdenardis #psuweb
Code reading 101
Pick a function/library/file < 50 lines of code. Set aside 2-3 minutes per line
Try to build and run it.
Don't focus on the details early.
Make sure you understand all the constructs.
Now that you've got a good idea about most of the constructs, it is time to
do a couple of random deep-dives.
There were undoubtedly things in the previous step you were confused
about, so this is the perfect time to go and read some tests.
No tests you say, sounds like the perfect time to write some.
@nickdenardis #psuweb
Our turn
@nickdenardis #psuweb
Resources
• http://devchat.tv/ruby-rogues/031-rr-code-reading
• http://www.codenewbie.org/podcast/ep-2-coding-like-a-boss-w-brian-douglas
• Reading code talk - https://www.youtube.com/watch?v=mW_xKGUKLpk
• http://bloggytoons.com/code-club
• http://www.slideshare.net/saronyitbarek/reading-code-good
• http://www.codewars.com/
• http://www.skorks.com/2010/05/why-i-love-reading-other-peoples-code-and-
you-should-too/
• http://www.readingcodegood.com/
@nickdenardis #psuweb
Code reviews
facilitate discussion around solutions
@nickdenardis #psuweb
Code Review
1. Knowledge transfer
2. Increased team awareness
3. Finding alternative solutions to problems
@nickdenardis #psuweb
What to review in a PR?
• Everyone brings something to the table
• Single responsibility principle
• Naming
• Tests should cover QA, it’s not a reviewer’s
responsibility
• “Leave a place better than you found it” ~ Girl Scouts
@nickdenardis #psuweb
Authoring a pull request
• Small atomic changes
• Should take at least 10 minutes
• Provide two paragraphs of context
• Only link to `Fixes #1337` as a command
@nickdenardis #psuweb
Reviewing a pull request
• Ask, don’t tell
• Negativity bias in written communication
• Foster a technical discussion
• Never use the word “just”
• Be positive
@nickdenardis #psuweb
Resources
• http://research.microsoft.com/pubs/180283/ICSE
%202013-codereview.pdf
• http://blog.codeclimate.com/blog/2013/10/09/
unexpected-outcomes-of-code-reviews/
• Does it need a +1? 

http://harvesthq.github.io/fias/
• Harvest code reviews

https://techtime.getharvest.com/blog/code-reviews-at-
harvest
@nickdenardis #psuweb
Refactoring
@nickdenardis #psuweb
SOLID Principles
Single Responsibility

a class should have only a single responsibility
Open/closed principle

should be open for extension, but closed for modification
Liskov substitution principle

objects in a program should be replaceable with instances of their subtypes
Interface segregation principle

many client-specific interfaces are better than one general-purpose interface.
Dependency inversion principle

Depend upon Abstractions. Do not depend upon concretions.
@nickdenardis #psuweb
One pass at a time
@nickdenardis #psuweb
Sandi Metz
• Your class can be no longer than 100 lines of code.
• Your methods can be no longer than five lines of code.
• You can pass no more than four parameters and you
can’t just make it one big hash.
• When a call comes into your (Rails) controller, you can
only instantiate one object to do whatever it is that
needs to be done. And your view can only know about
one instance variable.
@nickdenardis #psuweb
Resources
• Sandi Metz - Refactoring

https://www.youtube.com/watch?v=8bZh5LMaSmE
• Eye tracking original

https://www.youtube.com/watch?v=VtuO9un2Vyg
• Eye tracking refactor

https://www.youtube.com/watch?v=Jc8M9-LoEuo
• How big should a function be?

http://cleancoders.com/episode/clean-code-episode-3/show
• Rules for good software development - http://gist.io/4567190
@nickdenardis #psuweb
Style guides
because you don’t have to think about a default
@nickdenardis #psuweb
PSR-2 Standards Highlights
• Code MUST use 4 spaces for indenting, not tabs.
• Opening braces for classes MUST go on the next line, and
closing braces MUST go on the next line after the body.
• Opening braces for methods MUST go on the next line,
and closing braces MUST go on the next line after the
body.
• Opening parentheses for control structures MUST NOT
have a space after them, and closing parentheses for
control structures MUST NOT have a space before.
@nickdenardis #psuweb
Resources
• http://www.php-fig.org/psr/psr-2/
• https://en.wiktionary.org/wiki/bikeshedding
• http://www.nngroup.com/articles/the-power-of-defaults/
• http://blog.codinghorror.com/the-power-of-defaults/
• https://github.com/waynestate/web-guides
• https://github.com/bbatsov/ruby-style-guide
• https://www.drupal.org/coding-standards
• http://isobar-idev.github.io/code-standards/
@nickdenardis #psuweb
Your process
created all this cruft…
@nickdenardis #psuweb
Resources
• http://danielkummer.github.io/git-flow-cheatsheet/
• https://github.com/blog/2019-how-to-undo-almost-
anything-with-git
@nickdenardis #psuweb
Retrospectives
allow you to improve each week
@nickdenardis #psuweb
Weekly maintenance
is everyone’s job
@nickdenardis #psuweb
Automation
because ain’t no body got time to do it by hand
@nickdenardis #psuweb
Generators
@nickdenardis #psuweb
Resources
• http://vagrantup.com
• http://yeoman.io
• http://gulpjs.com
@nickdenardis #psuweb
Code formatting
@nickdenardis #psuweb
Editorconfig
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[makefile]
indent_style = tab
composer global require fabpot/php-cs-fixer @stable
php-cs-fixer fix src/ --level="psr2" --dry-run -v --diff
PHP CS Fixer
Run it against your code
@nickdenardis #psuweb
Resources
• https://houndci.com/
• http://editorconfig.org/
• https://codeclimate.com/
• https://github.com/FriendsOfPHP/PHP-CS-Fixer
@nickdenardis #psuweb
GIT hooks
# pre-commit.sh
git stash -q --keep-index
./run_tests.sh
RESULT=$?
git stash pop -q
[ $RESULT -ne 0 ] && exit 1
exit 0
ln -s ../../pre-commit.sh .git/hooks/pre-commit
Symlink in your hooks
Stash before running
# ~/.bash_aliases
alias gc='git commit'
alias gcv='git commit --no-verify'
How to skip the hook
@nickdenardis #psuweb
Resources
• https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
• http://githooks.com/
• https://www.digitalocean.com/community/tutorials/how-to-
use-git-hooks-to-automate-development-and-deployment-
tasks
• http://codeinthehole.com/writing/tips-for-using-a-git-pre-
commit-hook/
• https://github.com/codegram/pelusa
@nickdenardis #psuweb
Measuring results
in the real world
@nickdenardis #psuweb
Before…
@nickdenardis #psuweb
Growing pains.
@nickdenardis #psuweb
Now that’s about right
@nickdenardis #psuweb
Tiny habits
will bring your cruft to craft
@nickdenardis #psuweb
Kaizen
• Good processes bring good results
• Go see for yourself to grasp the current situation
• Speak with data, manage by facts
• Take action to contain and correct root causes of
problems
• Work as a team
• Kaizen is everybody’s business
@nickdenardis #psuweb
Resources
• http://www.kaizen.com/about-us/definition-of-
kaizen.html
@nickdenardis #psuweb
Thank you
@nickdenardis

More Related Content

Similar to What is quality code? From cruft to craft

Devops kc meetup_5_20_2013
Devops kc meetup_5_20_2013Devops kc meetup_5_20_2013
Devops kc meetup_5_20_2013
Aaron Blythe
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterprise
Taylor Lovett
 
Rowdy Rabouw - Unleash your web skills on native
Rowdy Rabouw - Unleash your web skills on nativeRowdy Rabouw - Unleash your web skills on native
Rowdy Rabouw - Unleash your web skills on native
OdessaJS Conf
 

Similar to What is quality code? From cruft to craft (20)

Achieving Technical Excellence in Your Software Teams - from Devternity
Achieving Technical Excellence in Your Software Teams - from Devternity Achieving Technical Excellence in Your Software Teams - from Devternity
Achieving Technical Excellence in Your Software Teams - from Devternity
 
Technical Excellence Doesn't Just Happen--Igniting a Craftsmanship Culture
Technical Excellence Doesn't Just Happen--Igniting a Craftsmanship CultureTechnical Excellence Doesn't Just Happen--Igniting a Craftsmanship Culture
Technical Excellence Doesn't Just Happen--Igniting a Craftsmanship Culture
 
Devops kc meetup_5_20_2013
Devops kc meetup_5_20_2013Devops kc meetup_5_20_2013
Devops kc meetup_5_20_2013
 
DevOps Columbus Meetup Kickoff - Infrastructure as Code
DevOps Columbus Meetup Kickoff - Infrastructure as CodeDevOps Columbus Meetup Kickoff - Infrastructure as Code
DevOps Columbus Meetup Kickoff - Infrastructure as Code
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
Rails in the Large - Neal Ford
Rails in the Large - Neal FordRails in the Large - Neal Ford
Rails in the Large - Neal Ford
 
Qcon beijing 2010
Qcon beijing 2010Qcon beijing 2010
Qcon beijing 2010
 
Magento 2 Performance: Every Second Counts
Magento 2 Performance: Every Second CountsMagento 2 Performance: Every Second Counts
Magento 2 Performance: Every Second Counts
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
 
Simple Ruby DSL Techniques: Big Project Impact!
Simple Ruby DSL Techniques: Big Project Impact!Simple Ruby DSL Techniques: Big Project Impact!
Simple Ruby DSL Techniques: Big Project Impact!
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
ES3-2020-P2 Bowling Game Kata
ES3-2020-P2 Bowling Game KataES3-2020-P2 Bowling Game Kata
ES3-2020-P2 Bowling Game Kata
 
Best Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseBest Practices for WordPress in Enterprise
Best Practices for WordPress in Enterprise
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterprise
 
Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
Front end Tips Tricks & Tools
Front end Tips Tricks & ToolsFront end Tips Tricks & Tools
Front end Tips Tricks & Tools
 
Let's unRiddle jsFiddle
Let's unRiddle jsFiddleLet's unRiddle jsFiddle
Let's unRiddle jsFiddle
 
Introduction to Contribution
Introduction to ContributionIntroduction to Contribution
Introduction to Contribution
 
The Seven Wastes of Software Development
The Seven Wastes of Software DevelopmentThe Seven Wastes of Software Development
The Seven Wastes of Software Development
 
Rowdy Rabouw - Unleash your web skills on native
Rowdy Rabouw - Unleash your web skills on nativeRowdy Rabouw - Unleash your web skills on native
Rowdy Rabouw - Unleash your web skills on native
 

More from Nick DeNardis

CASE IV - Making that first impression online
CASE IV - Making that first impression onlineCASE IV - Making that first impression online
CASE IV - Making that first impression online
Nick DeNardis
 
Iterative Website Redesign - Micro Goals in Action
 Iterative Website Redesign - Micro Goals in Action Iterative Website Redesign - Micro Goals in Action
Iterative Website Redesign - Micro Goals in Action
Nick DeNardis
 
LIS7470 - Information Architecture
LIS7470 - Information ArchitectureLIS7470 - Information Architecture
LIS7470 - Information Architecture
Nick DeNardis
 
Starting a Web Office From Scratch: Trials and Tales
Starting a Web Office From Scratch: Trials and TalesStarting a Web Office From Scratch: Trials and Tales
Starting a Web Office From Scratch: Trials and Tales
Nick DeNardis
 

More from Nick DeNardis (20)

How to be better at getting things done in 2022
How to be better at getting things done in 2022How to be better at getting things done in 2022
How to be better at getting things done in 2022
 
Why #littlebigdetails Matter and What You Should Do About Them
Why #littlebigdetails Matter and What You Should Do About ThemWhy #littlebigdetails Matter and What You Should Do About Them
Why #littlebigdetails Matter and What You Should Do About Them
 
CASE IV - Making that first impression online
CASE IV - Making that first impression onlineCASE IV - Making that first impression online
CASE IV - Making that first impression online
 
Personal and Professional Social Media
Personal and Professional Social MediaPersonal and Professional Social Media
Personal and Professional Social Media
 
Designing for next steps: A forward moving Web experience
Designing for next steps: A forward moving Web experienceDesigning for next steps: A forward moving Web experience
Designing for next steps: A forward moving Web experience
 
Designing for next steps - A forward moving Web experience
Designing for next steps - A forward moving Web experienceDesigning for next steps - A forward moving Web experience
Designing for next steps - A forward moving Web experience
 
API Reliability Guide
API Reliability GuideAPI Reliability Guide
API Reliability Guide
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
Iterative Website Redesign - Micro Goals in Action
 Iterative Website Redesign - Micro Goals in Action Iterative Website Redesign - Micro Goals in Action
Iterative Website Redesign - Micro Goals in Action
 
Give Your Content Legs and Run With It - PSUWEB11
Give Your Content Legs and Run With It - PSUWEB11Give Your Content Legs and Run With It - PSUWEB11
Give Your Content Legs and Run With It - PSUWEB11
 
Social Media Tools for Startups
Social Media Tools for StartupsSocial Media Tools for Startups
Social Media Tools for Startups
 
LIS7470 - Information Architecture
LIS7470 - Information ArchitectureLIS7470 - Information Architecture
LIS7470 - Information Architecture
 
Flexible Web Branding, the Case Against Single Web Templates - CASEV 2010
Flexible Web Branding, the Case Against Single Web Templates - CASEV 2010Flexible Web Branding, the Case Against Single Web Templates - CASEV 2010
Flexible Web Branding, the Case Against Single Web Templates - CASEV 2010
 
Better Design Through Analytics - #eduiconf 2010
Better Design Through Analytics - #eduiconf 2010Better Design Through Analytics - #eduiconf 2010
Better Design Through Analytics - #eduiconf 2010
 
Web Metrics: An Overview - #eduiconf 2010
Web Metrics: An Overview - #eduiconf 2010Web Metrics: An Overview - #eduiconf 2010
Web Metrics: An Overview - #eduiconf 2010
 
Analyzing Real-time User Visitor Searches
Analyzing Real-time User Visitor SearchesAnalyzing Real-time User Visitor Searches
Analyzing Real-time User Visitor Searches
 
Realigning your Web Redesign Process
Realigning your Web Redesign ProcessRealigning your Web Redesign Process
Realigning your Web Redesign Process
 
State of the Wayne State Web Site
State of the Wayne State Web SiteState of the Wayne State Web Site
State of the Wayne State Web Site
 
Starting a Web Office From Scratch: Trials and Tales
Starting a Web Office From Scratch: Trials and TalesStarting a Web Office From Scratch: Trials and Tales
Starting a Web Office From Scratch: Trials and Tales
 
MIUPA - Focus on Your Users
MIUPA - Focus on Your UsersMIUPA - Focus on Your Users
MIUPA - Focus on Your Users
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 

What is quality code? From cruft to craft