Code Quality Challenge - Week 4

Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.
Search for a command to run...

Senior Full-Stack Developer with over 20 years of experience building web applications for startups, government, and higher education.
No comments yet. Be the first to comment.
Journal of my [Code quality challenge](https://justinramel.com/im-taking-the-code-quality-challenge)
I thought the challenge ended last week but it seems we're getting a couple of bonus days, lets get to it. Day 29 - Extract Method Today’s task is all about improving readability. Investigate your larger methods, especially ones longer than 10 lines...
Writing this up so I have somewhere to quickly grab basic Jest setup. This information is copied from the Jest Documentation Site compressed into just the parts I'm interested in. Create folders mkdir -p <project>/src cd <project> Install and init n...

In this blog post, we'll explore the process of setting up and configuring a Postgres database using Docker and seeding it with test data. This approach can be used for a variety of apps and can be easily adapted for your own needs. We'll cover all t...

Continuing from last time, we will explore the concepts behind Create and Update functionality and provide a step-by-step guide on how to implement it in your SvelteKit application. Let's get started! Server & Client Code In SvelteKit, the server-sid...

Introduction In this post, I will explore how to create a REST API using Spring Boot and Kotlin. We will dive into the fundamentals of Spring Boot and Kotlin, explain how to set up the project, and guide you through the process of building the API st...

Introduction Welcome to the latest post in my series of Koan Battles using Kotlin and TypeScript. In this series, we'll complete a Koan in both languages and then discuss the differences between the two solutions. My goal is to help you gain a deeper...

Final week of the CQC lets see what it was in store for us...
I can do full stack development and know the ins and outs of DB schemas but that's not something I deal with day to day with on this codebase.
The closest thing I have to a schema on the front end is the mapping of the backend data models to the frontend models. I like to check the 'shape' of the data coming from the backend to make sure there is nothing unexpected.
If you catch errors at the edge of the system they are much easier to identify than in some random component thats getting the wrong data.
To define these models I use the Codec module of the Purify library, well worth a look if you're interested in validating the the structure and format of your api data.
I spent my 20 minutes today verifying these models are up to date with the backend.
Today's challenge: spend 20 minutes reading the docs for something you'd like to know a little better.
Like most developers I have an unexplainable dislike to "Reading The F*ing Manual". I'm not a fan of reading a manual but love keeping up to date on via blog posts. I keep a backlog of interesting posts to read using Pinboard.
I chose to read Complete Guide to React Rendering Behavior an epic post by Mark Erikson
(This challenge was created by guest contributor Giovanni Lodi. I recommend checking out his blog.)
Today, please spend ~20 minutes looking into the churn your project has experienced.
Perhaps a file changes often because it is unclear and therefore buggy. Perhaps it’s doing too many things.
Giovanni Lodi gives a git command we can use to find high churn files:
git log --all -M -C --name-only --format='format:' "$@" \ | sort \ | grep -v '^$' \ | uniq -c \ | sort -n \ | awk 'BEGIN {print "count\tfile"} {print $1 "\t" $2}'
Unfortunately this didn't work for me but a quick search found git-churn a script that did the same job.
Our top 10 high churn files where a mix of config files, css and a few components.
I dug deeper into the components and found a large component that was ripe to be broken down into smaller components.
This is a great way to find potential hot spots in the code base, I'll definitely be using the script again.
(This challenge was again created by guest contributor Giovanni Lodi.)
Today’s challenge: spend 20 minutes getting snippets support configured in your editor.
I'm a little skeptical on this one, I've spent time before creating snippets and found I've not used them. Let's see how it goes this time.
I'm using Webstorm as my day to day editor, it has excellent support for snippets or live templates as they call them.
I think my previous issue with snippets is creating lots of snippets up front and then forgetting about them. To avoid that this time I'm only going to add a single snippet at a time until its committed to memory before adding another.
My first snippet?
test('$NAME$', () => {
$END$
});
I'm doing a lot of testing at the moment 😀
Do you recall thinking something like "I really should know more about X"?
Today's your chance to do something about it. Back to the Pinboard I talked about earlier in the week.
I spent 20 minutes reading a post by Dan Abramov about the use of React's useMemo hook.
It actually shows how you don't always need to use useMemo, well worth a read if you have a spare 20 minutes.
My favourite task this week turned out to be Day 25 - Create/update your snippets. I mentioned I was skeptical about creating snippets as its something I've tried before and I never really took to it.
This time I've been building the snippets up slowly, one or two a day and really using them. This slow burn technique is going to become part of my development flow, a very worthwhile challenge!
I thought today would be the end of the challenges but no mention in Ben Orenstein's email today, lets see what the weekend or maybe Monday brings.