Making it easy to follow best practices

What's the point?

What's the point of "best practices"?

What do we all want?

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent
  • Engaged

Developers need to feel...

  • Attract more talent
  • Simpler maintenance
  • Faster development
  • Fewer bugs
  • More learning
  • Higher retention
  • Competent
  • Engaged
  • Valued

Developer happiness

Best practices?

Best practices?

Chosen conventions

Convention adoption stages

  • Choosing
  • Implementing
  • Maintaining

Choosing conventions

Define the problems

Define technical problems in terms specific, personal, and emotional

Objectivity and absolutes don't exist in human systems

Avoid bikeshedding

Use 3 month discussion freezes

Time-constrained voting

Convention guidelines

Enable dumb devs to write great code

Conventions should be easy to refactor/abandon

Create "utils" folders for

still-evolving problems

Implementing conventions

Automate everything

  • Linters (eslint, stylelint, markdownlint)
  • Formatters (prettier)
  • Image optimization (image-min)
  • Generators (hygen/plop)

  • Code snippets
    (                                                        )

.vscode/*.code-snippets

Even in your app!

if (process.env.NODE_ENV !== 'production') { 
  // Check for insecure URL in href.
  if (!this.allowInsecure && !/^(https|mailto|tel):/.test(this.href)) {
    return console.error(
      `Insecure <BaseLink href="${this.href}">. When linking to` +
      `external sites, always prefer https URLs. If this site` +
      `does not offer SSL, explicitly add the allow-insecure` + 
      `attribute to <BaseLink>.`
    )
  }
}
<ExternalLink href="http://example.com/" />

Make console.error fail tests

// Make console.error throw, so that Jest tests fail
const error = console.error
console.error = function(message) {
  error.apply(console, arguments)
  // NOTE: You can whitelist some `console.error` messages here
  //       by returning if the `message` value is acceptable.
  throw message instanceof Error ? message : new Error(message)
}

Test everything

Test everything

Useful tests are...

Visible

Everyone knows when

tests are failing

Reliable

Tests don't fail intermittently

Fast

Tests run quickly

Debuggable

When a test fails,

it's easy to learn why

End-to-end testing libraries

The 2 essential end-to-end tests

  • Can users log in?
  • Can users give us money?

Unit testing libraries

  • Jest? 😅
  • Whatever 🤷‍♂️

The 2 essential unit tests

  • Do files export the rightish thing?
  • Does all the regex work?

Put unit tests next to files they test 

Multi-level continuous integration

  1. Pre-commit
  2. Pull/merge requests
  3. Dev branch

Pre-commit CI with husky and lint-staged

/** @file lint-staged.config.js */

module.exports = {
  '*.js': [
    'eslint --fix',
    'prettier --write',
    'git add',
    'jest --bail --findRelatedTests'
  ],
  '*.scss': ['stylelint --fix', 'prettier --write', 'git add'],
  '*.md': ['markdownlint', 'prettier --write', 'git add'],
  '*.{png,jpeg,jpg,gif,svg}': ['imagemin-lint-staged', 'git add']
}

Pull/merge request CI

Everything from pre-commit

Essential end-to-end tests

Related end-to-end tests

Dev branch CI

Everything from pull/merge requests

All other end-to-end and unit tests

Maintaining conventions

Foster emotional awareness

Don't blame individuals

Find systems solutions

If you have power, protect your devs

Take care of yourselves

That's all!

Special thanks to my Vuesionary sponsors!

  • Vuetify
  • Vue School
  • Vue Mastery
  • Ben Hong

patreon.com/chrisvuefritz

Thank YOU!

@chrisvfritz

slides.com/chrisvfritz/ easy-best-practices-2019-10

Making it easy to follow best practices

By Chris Fritz

Made with Slides.com

Making it easy to follow best practices

The MIT License (MIT) Copyright (c) 2019-present Chris Fritz Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • 1,194

More from Chris Fritz