Refactoring

HTML All The Things - Web Development, Web Design, Small Business

In this solo episode, Mike discusses the code refactoring process and then deep dives on work/life balance.

Segment 1 - What is Refactoring

• Refactoring definition
  • Changing your code to improve its organization and structure without directly influencing it’s performance
• Explanation of terminology
  • Code Smells
    • Something you notice as your coding that you think will later require a restructure/reorganization
  • Extensibility
    • Ability to later down the road use your current code to extend the capabilities of your program without having to rewrite large portions of code
  • Maintainability
    • Make it easier to fix bugs and find issues in your code down the line when you’re not as familiar with it
  • Extraction/componentization
    • Taking functionality from a method and creating its own method so that it becomes reusable to other functions

Segment 2 - Tips

• Refactor often
• Create a refactor list
  • When you notice a code smell but need to focus on functionality, jot it down in a refactor to do list so you don’t forget to go back and correct
• Change obscure variable names to proper named variables (Maintainability)
  • Also use appropriate variable types. In JS we are limited but we still have the choice between let, const, var
• When you notice you’re using the same of similar functionality in multiple functions, externalize that functionality into its own function (extraction/componentization)
  • That could be a seperate function, or it can be a seperate file with a it’s own class and extensible functionalities
  • In vuejs currently you can used Mixins which allow the use of methods across components (in the future this will be handled with hooks)
• Remove old code that you previously commented out
• Clean up unused files, folders, functions and images
• Change code to be extensible to your needs (Extensibility)
  • During sprints with short deadlines sometimes you’ll write code to just get something working while realizing that certain functionality that needs to be implemented in the future won’t work with the current implementation
  • Example: Internationalization
• Remove unused libraries
  • We all add libraries as we code to try to meet deadlines faster, but sometimes they don’t work the way we want and we move on to the next one. It’s important to remove them when we realise they don’t fit
• Use tools like prettier and lint to help maintain code structure on a daily basis
  • Example making sure everything is in spaces instead of tabs
  • Arrow functions instead of expression functions
• Add comments to sections of code you think need explanation (maintainability)

Web News - Work/Life Balance

• One of the disadvantages of being a contractor/freelancer is not having that 9-5 work structure that you have to follow
• Depending on your situation though it might be an advantage, if your wife works from home also, you can sometimes spend the best parts of the day together.
• Instead of going shopping at peak times you can go earlier and just work when you get back
• Take advantage of off hours for traffic
• A structured day is great, but everyone has a different work rhythm and being able to structure your day based on that can greatly increase productivity.
  • If you work better in the mornings and early evenings you can make the middle of the day your time off for instance
• If your considering freelancing you have to be able to structure your own days, which seems simple but can really be a challenge.

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

Reddit