Why Code Quality Matters: Testing, Linting, Refactoring

Episode Sponsor - Wix Studio

We'd like to thank this episode's sponsor for their support!

Wix Studio: The Web Platform for Agencies and Enterprises

Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.

Check out Wix Studio today.

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Show Notes

Introduction

• A lot of new devs get to the point where they are writing functional code quickly and then just continue on that path
• This to a hiring manager can be a red flag because functional code that isn’t readable or maintainable can derail a larger dev team
• This is where writing better, cleaner and safer code comes in
• We’ll cover Testing, Prettier formatting, linting and refactoring to cover the basics of writing better code

Code Quality

• Code quality matters a ton when working with a larger dev team 
• When code is written in the same style, has the same rules and formatting it makes it easier for Team Member A to help and maintain Team Member Bs code
• Jumping into a legacy project in the past where code quality wasn’t emphasized caused me to lose days in figuring out how to fix problems

Testing

• Testing in web development isn’t always on the same level as in other disciplines but that doesn’t mean it’s not important
• Testing provides a first layer of defense for introducing bugs into production
• Types of tests
  • Unit
    • Test smaller critical functions with a sets of inputs that produce predictable outputs
  • End-to-End
    • Test app functionality with practical tests like user logs in and adds a task to their to-dos

Prettier Formatting

• Auto formatting code usually refers to visual consistencies that don’t affect the actual code or functionality. 
  • Tabs vs spaces
  • Semicolons
  • Trailing commas
• This helps define your code styles and marks it easy for everyone to conform with prettier handling the auto-formatting rather than everyone on your team checking every single line before they submit a PR
• With Prettier you shouldn’t really have nit code review requests, that ask you to add a comma or a semi-colon

Linting

• This is more of a code analyzer that not only checks for visual issues but also potential errors and bugs in your code
• Some of the linting is made redundant with TypeScript but it still plays an important role in ensuring a conformed code style is used
• Linting can be referred to as a set of rules for the codebase and can sometimes be a bit annoying if to limiting/strict
• Examples of rules:
  • No unused variables
  • No console logs
  • Only strict equality checks
• Start with a very basic config (Airbnb) and add/remove as you get more comfortable 

Refactoring

• Rewriting your code to be cleaner and more maintainable after it has first been written
  • Simplify functions
  • Reduce redundancy
  • Split up huge functions into smaller ones
  • Componentize a large page
  • etc
• Inevitably the first pass at writing any app is going to be the worst version of that app
• Accepting that from the start and allowing for refactoring to be part of the process
  • For example, have a refactoring sprint every quarter if you’re working on a team
  • Forcing yourself to refactor after each release of your own app, etc.

‍