Coding Standards

What they are and why they're important

Jonathan Desrosiers - @Desrosj

Me

  • Developer
  • Work at Boston University
  • WordCamp and WordPress Boston Organizer
  • Using WordPress 10 years
  • Core Contributor
  • Multisite & Media contributor
  • Leads New Core Contributor meetings in #core

What We'll Cover

  • Educate
    • What are best practices?
    • Why should I use them?
    • How do they help me?
  • Demonstrate
    • What tools are available to help enforce standards?

Ninety-Ninety Rule

“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”

- Tim Cargill - Bell Labs

Translation

Estimating development is HARD!

What are Coding Standards?

Guidelines for a specific programming language that dictates:

 

  • style
  • practices
  • methods

What are Coding Standards?

  • File organization
  • Indentation
  • Comments
  • Whitespace
  • Naming conventions
  • etc.

Examples

Tabs should be used at the beginning of the line for indentation

Examples

Braces shall be used for all code blocks, even when they are not required.

if ( some condition ) {
    action1();
    action2();
} elseif ( another condition ) {
    action3();
    action4();
} else {
    default_action();
}

What are Best Practices?

A set of informal rules that the software development community has learned over time that can help improve the quality of software.

What are Best Practices?

A set of informal rules that the software development community has learned over time that can help improve the quality of software.

Examples

Don't query all posts at once.

$dangerous_post_query = new WP_Query(
    array(
        'post_type'      => 'post',
        'posts_per_page' => -1,
    )
);

Examples

$dangerous_post_query = new WP_Query(
    array(
        'post_type'      => 'post',
        'posts_per_page' => 100,
    )
);

Don't query all posts at once.

Coding Standards

+

Best Practices

=

Increased Software Quality

How do these help?

  • Readability
  • Compatibility
  • Maintainability
#wpadminbar,#wpadminbar *{font-size:13px;font-weight:400;line-height:32px}#wpadminbar *{height:
auto;width:auto;margin:0;padding:0;position:static;text-shadow:none;text-transform:none;letter-
spacing:normal;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,
Cantarell,"Helvetica Neue",sans-serif;border-radius:0;box-sizing:content-box;transition:none;-webkit
-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}.rtl #wpadminbar *{font-family:
Tahoma,sans-serif}html:lang(he-il) .rtl #wpadminbar *{font-family:Arial,sans-serif}#wpadminbar .ab-empty-
item{cursor:default;outline:0}#wpadminbar .ab-empty-item,#wpadminbar a.ab-item,#wpadminbar>#wp-toolbar
span.ab-label,#wpadminbar>#wp-toolbar span.noticon{color:#eee}#wpadminbar #wp-admin-bar-my-sites a.ab-
item,#wpadminbar #wp-admin-bar-site-name a.ab-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}#wpadminbar ul li:after,#wpadminbar ul li:before{content:normal}#wpadminbar a,#wpadminbar a img,#wpadminbar
a img:hover,#wpadminbar a:hover{outline:0;border:none;text-decoration:none;background:0 0}#wpadminbar a:active
,#wpadminbar a:focus,#wpadminbar div,#wpadminbar input[type=text],#wpadminbar input[type=password],#wpadminbar 
input[type=number],#wpadminbar input[type=search],#wpadminbar input[type=email],#wpadminbar input[type=url],
#wpadminbar select,#wpadminbar textarea{box-shadow:none;outline:0}#wpadminbar{direction:ltr;color:#ccc;font-
family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;height:32px;position:fixed;top:0;left:0;width:100%;min-width:600px;z-index:99999;background:#23282d}
#wpadminbar .ab-sub-wrapper,#wpadminbar ul,#wpadminbar ul li{background:0 0;clear:none;list-style:none;margin:0;padding:0;position:relative;text-indent:0;z-index:99999}#wpadminbar ul#wp-admin-
bar-root-default>li{margin-right:0}#wpadminbar .quicklinks ul{text-align:left}#wpadminbar li{float:left}#wpadminbar 
.quicklinks .ab-top-secondary>li{float:right}#wpadminbar .quicklinks .ab-empty-item,#wpadminbar .quicklinks a,
#wpadminbar .shortlink-input{height:32px;display:block;padding:0 10px;margin:0}#wpadminbar .quicklinks>ul>li>
a{padding:0 8px 0 7px}#wpadminbar .menupop .ab-sub-wrapper,#wpadminbar .shortlink-input{margin:0;padding:0;
box-shadow:0 3px 5px rgba(0,0,0,.2);background:#32373c;display:none;position:absolute;float:none}#wpadminbar
.selected .shortlink-input,#wpadminbar li.hover>.ab-sub-wrapper,#wpadminbar.nojs li:hover>.ab-sub-wrapper{display:
block}#wpadminbar.ie7 .menupop .ab-sub-wrapper,#wpadminbar.ie7 .shortlink-input{top:32px;left:0}#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper{min-width:100%}#wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper{right:0;left:auto}#wpadminbar .ab-submenu{padding:6px 0}#wpadminbar .quicklinks .menupop ul li{float:none}
#wpadminbar .quicklinks .menupop ul li a strong{font-weight:600}#wpadminbar .quicklinks .menupop ul li .ab-item,
#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li .ab-item,#wpadminbar
.shortlink-input,#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item{line-height:26px;height:26px;white-
space:nowrap;min-width:140px}#wpadminbar .shortlink-input{width:200px}#wpadminbar .menupop li.hover>.ab-sub-
wrapper,#wpadminbar .menupop li:hover>.ab-sub-wrapper{margin-left:100%;margin-top:-32px}#wpadminbar .ab-top-secondary
.menupop li.hover>.ab-sub-wrapper,#wpadminbar .ab-top-secondary .menupop li:hover>.ab-sub-wrapper{margin-left:0;
left:inherit;right:100%}#wpadminbar .ab-top-menu>li.hover>.ab-item,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-
item:focus,#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-
item:focus{background:#32373c;color:#00b9eb}#wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label,#wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label,#wpadminbar>#wp-toolbar li.hover span.ab-
label{color:#00b9eb}#wpadminbar .ab-icon,#wpadminbar .ab-item:before,#wpadminbar>#wp-toolbar>#wp-admin-bar-root-default
.ab-icon{position:relative;float:left;font:400 20px/1 dashicons;speak:none;padding:4px 0;-webkit-font-smoothing:antialiased
;-moz-osx-font-smoothing:grayscale;background-image:none!important;margin-right:6px}#wpadminbar #adminbarsearch
:before,#wpadminbar .ab-icon:before,#wpadminbar .ab-item:before{color:#a0a5aa;color:rgba(240,245,250,.6);position:relative;
transition:all .1s ease-in-out}#wpadminbar .ab-label{display:inline-block;height:32px}#wpadminbar .ab-submenu .ab-
item,#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks
 .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#b4b9be;color:rgba(240,245,250,.7)}
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a,#wpadminbar .quicklinks .menupop ul li a:focus,#wpadminbar
.quicklinks .menupop ul li a:focus strong,#wpadminbar .quicklinks .menupop ul li a:hover,#wpadminbar .quicklinks
.menupop ul li a:hover strong,#wpadminbar .quicklinks .menupop.hover ul li a:focus,#wpadminbar .quicklinks .menupop
.hover ul li a:hover,#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,#wpadminbar .quicklinks .menupop.
hover ul li div[tabindex]:hover,#wpadminbar li #adminbarsearch.adminbar-focused:before,#wpadminbar li .ab-item:focus .ab-icon:before,#wpadminbar li .ab-item:focus:before,#wpadminbar li a:focus .ab-icon:before,#wpadminbar li.hover .ab-icon:before,#wpadminbar li.hover .ab-item:before,#wpadminbar li:hover #adminbarsearch:before,#wpadminbar li:hover .ab-icon:before,#wpadminbar li:hover .ab-item:before,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover{color:#00b9eb}#wpadminbar.mobile .quicklinks .ab-icon:before,#wpadminbar.mobile .quicklinks .ab-item:before{color:#b4b9be}#wpadminbar.mobile .quicklinks .hover .ab-icon:before,#wpadminbar.mobile .quicklinks .hover .ab-item:before{color:#00b9eb}#wpadminbar .ab-top-secondary .menupop .menupop>.ab-item:before,#wpadminbar .menupop .menupop>.ab-item:before{position:absolute;font:400 17px/1 dashicons;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#wpadminbar .menupop .menupop>.ab-item{display:block;padding-right:2em}#wpadminbar .menupop .menupop>.ab-item:before{top:1px;right:4px;content:"\f139";color:inherit}#wpadminbar .ab-top-secondary .menupop .menupop>.ab-item{padding-left:2em;padding-right:1em}#wpadminbar .ab-top-secondary .menupop .menupop>.ab-item:before{top:1px;left:6px;content:"\f141"}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary{display:block;position:relative;right:auto;margin:0;box-shadow:none}#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu{background:#464b50}#wpadminbar .quicklinks .menupop .ab-sub-secondary>li .ab-item:focus a,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li>a:hover{color:#00b9eb}#wpadminbar .quicklinks a span#ab-updates{background:#eee;color:#32373c;display:inline;padding:2px 5px;font-size:10px;font-weight:600;border-radius:10px}#wpadminbar .quicklinks a:hover span#ab-updates{background:#fff;color:#000}#wpadminbar .ab-top-secondary{float:right}#wpadminbar ul li:last-child,#wpadminbar ul li:last-child .ab-item{box-shadow:none}#wp-admin-bar-my-account>ul{min-width:198px}#wp-admin-bar-my-account>.ab-item:before{content:"\f110";top:2px;float:right;margin-left:6px;margin-right:0}#wp-admin-bar-my-account.with-avatar>.ab-item:before{display:none;content:none}#wp-admin-bar-my-account.with-avatar>ul{min-width:270px}#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar .ab-item{white-space:nowrap}#wpadminbar #wp-admin-bar-user-actions>li{margin-left:16px;margin-right:16px}#wpadminbar #wp-admin-bar-user-actions.ab-submenu{padding:6px 0 12px}#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions>li{margin-left:88px}#wpadminbar #wp-admin-bar-user-info{margin-top:6px;margin-bottom:15px;height:auto;background:0 0}#wp-admin-bar-user-info .avatar{position:absolute;left:-72px;top:4px;width:64px;height:64px}#wpadminbar #wp-admin-bar-user-info a{background:0 0;height:auto}#wpadminbar #wp-admin-bar-user-info span{background:0 0;padding:0;height:18px}#wpadminbar #wp-admin-bar-user-info .display-name,#wpadminbar #wp-admin-bar-user-info .username{display:block}#wpadminbar #wp-admin-bar-user-info .username{color:#a0a5aa;font-size:11px}#wpadminbar #wp-admin-bar-my-account.with-avatar>.ab-empty-item img,#wpadminbar #wp-admin-bar-my-account.with-avatar>a img{width:auto;height:16px;padding:0;border:1px solid #82878c;background:#eee;line-height:24px;vertical-align:middle;margin:-4px 0 0 6px;float:none;display:inline}#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar>.ab-empty-item img,#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar>a img{width:auto}#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon{width:15px;height:20px;margin-right:0;padding:6px 0 5px}#wpadminbar #wp-admin-bar-wp-logo>.ab-item{padding:0 7px}#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before{content:"\f120";top:2px}#wpadminbar .quicklinks li .blavatar{float:left;font:400 16px/1 dashicons!important;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#eee}#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover>a .blavatar,#wpadminbar .quicklinks li a:focus .blavatar,#wpadminbar .quicklinks li a:hover .blavatar{color:#00b9eb}#wpadminbar .quicklinks li .blavatar:before{content:"\f120";height:16px;width:16px;display:inline-block;margin:6px 8px 0 -2px}#wpadminbar #wp-admin-bar-appearance{margin-top:-12px}#wpadminbar #wp-admin-bar-my-sites>.ab-item:before,#wpadminbar #wp-admin-bar-site-name>.ab-item:before{content:"\f541";top:2px}#wpadminbar #wp-admin-bar-customize>.ab-item:before{content:"\f540";top:2px}#wpadminbar #wp-admin-bar-edit>.ab-item:before{content:"\f464";top:2px}#wpadminbar #wp-admin-bar-site-name>.ab-item:before{content:"\f226"}.wp-admin #wpadminbar #wp-admin-bar-site-name>.ab-item:before{content:"\f102"}#wpadminbar #wp-admin-bar-comments .ab-icon{margin-right:6px}#wpadminbar #wp-admin-bar-comments .ab-icon:before{content:"\f101";top:3px}#wpadminbar #wp-admin-bar-comments .count-0{opacity:.5}#wpadminbar #wp-admin-bar-new-content .ab-icon:before{content:"\f132";top:4px}#wpadminbar #wp-admin-bar-updates .ab-icon:before{content:"\f463";top:2px}#wpadminbar.ie8 #wp-admin-bar-search{display:block;min-width:32px}#wpadminbar #wp-admin-bar-search .ab-item{padding:0;background:0 0}#wpadminbar #adminbarsearch{position:relative;height:32px;padding:0 2px;z-index:1}#wpadminbar #adminbarsearch:before{position:absolute;top:6px;left:5px;z-index:20;font:400 20px/1 dashicons!important;content:"\f179";speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

These become easier:

  • Code reviews
  • Debugging
  • Refactoring

These become easier (Business):

  • Onboarding new employees
  • Outsourcing work

These become easier:

  • Open sourcing projects becomes more enjoyable
  • Contributing to WordPress becomes less intimidating
  • Lower barrier of entry for automated tools

Questions?

But WordPress does not even follow the coding standards in Core. Why should I?

Tools

Try it out

<?php

function test() {
  $welcome_message_1='Hello there!';
  $welcome_message_2 = 'Welcome!';

if(in_array(date('w'), array(0,6)))
  echo $welcome_message_1;
else
  echo $welcome_message_2;
}
?>

Autofixing

<?php

function test() {
  $welcome_message_1 = 'Hello there!';
  $welcome_message_2 = 'Welcome!';

  if ( in_array( date( 'w' ), array( 0, 6 ) ) ) {
    echo $welcome_message_1;
  } else {
    echo $welcome_message_2;
  }
}

Re-check

Automate

Pre Commit Hook

Continuous Integration

Reporting Services

Thank You

Made with Slides.com