This is a little Kata for practicing some simple principles of Clean Code. I created this Kata for a Clean Code Presentation which can be found here.
- Checkout this repository (or clone it if you want to commit your solution)
- Execute
npm install
oryarn
to install al dependencies. - Run the tests with
npm run test
oryarn test
; - Start refactoring in the refactor_code.js File (this is the file that gets tested)
The Goal of this Kata is to refactor the Code in src/refactor_code.js to something better readable.
Use the tests to not break anything! Execute them after every change!
You can just try it on your own. If you need tips or help, either have a look at the tips in the presentation (use down arrow to go to the next) or simply follow the principles and instructions below.
- Use better names: E.g. replace
$(this)
withconst $hoveredLink = $(this)
and use the new variable in all places. When extracting functions, take a moment to find a name that shows what it DOES and not HOW it does it. - Show Intent: E.g. put the first conditional statement into a function
buttonWasClicked()
- you can then remove the comment. - Remove duplicated calls: E.g: The three calls to
.animate
look pretty similar. Put them behind a parametrized function - Remove duplicated code: Both of the lower
if
-bodies actually do the same thing, just on different elements. Extract a parametrized function as well - Make it read like a book:: In the end if you managed to hide all functionality behind functions, compose those functions in the top of the call to make it read like a book - showing intent and WHAT it does instead of how.
- Remove the lying comment:: The Comment on top of the function actually says a lot that is not true. Read it again and realize what is it - then remove it. It's not needed!
If you have any questions, don't hesitate to contact me for help!