With nearly 80 posts on this blog now, the contents of my _posts folder in VS Code is longer than the full height of my screen! Out of curiosity, I checked to see if there was an easy way to introduce better structure. I quickly found a blog post that confirmed that directory structure can be added to _posts without disturbing permalinks. This quick fix makes my project directly look much nicer!

It looks like _includes, which holds functions and chunks of code that get reused around the site, is more picky about specific paths, which makes sense but does make things a bit unwieldy. It does look like I could use {% include_relative folder/filename %} to include additional files for specific individual blogs, so I’ll have to keep that in mind for in the future. Learning Log is due for a large tune-up sometime soon, so I’m hoping to clean up tiny things along the way.

Having so much success with Hook Clock last night was a great motivation boost, even if I did stay up far too late! 😪☕ I think I’d like to continue with it today and add things like prop types, more documentation, and hopefully a little more testing. Having one fairly polished project under my belt would be quite nice.

The only two things on the front-end that need fixing (at least, to my awareness) are:

  • The “Hour Offset” field currently does not validate input
  • Clock cards do not always have the same height within a row

I had looked into Text Field validation a little before but wasn’t sure how to implement, so diving into the difficult one first. I quickly found a post discussing how to invalidate a Text Field in MUI. Similar to the clock themselves, I created a new object offsetControls to manage the validation state of the Offset field.

I’m already handling things with onChange by setting the state of offset. With the Text Field type set to “number” I get <empty string> from the event for any NaN values, which makes validation a bit easier!

const onOffsetChange = (event) => {
  if ( {
    setOffsetControls({ error:false, helperText: "" });
  } else {
    setOffsetControls({ error:true, helperText: "Offset must be a number" });

This allows you to type whatever you want into the field, and the error text seems to work great. When creating a new Clock, I perform a similar check and before creating the object and force any errors to a zero offset, resetting the fields after creation. My theme colors definitely needed to change, too.

For the cards, I found a great CodeSandbox demonstrating how to make MUI Grid elements have the same height. I changed my wrapper component from a Card to a Grid and implemented the changes, and it worked very nicely! However, it turned out that I didn’t like the text justified to the bottom of the card, so I changed it to have the gap at the bottom of the cards, instead. Either way, it will be simple to adjust going forward.

With everything looking and working the way that I want, next up is polish! Starting with the Clock component, I looked into adding Prop Types and adding to my documentation. JSDocs is really neat, but there are a lot of options and elements that I’m not super familiar with just yet, so I took a look at a basic overview of what documentation I should be adding and a few further tips.

Once everything was fairly documented, I pushed the code and deployed live. I had asked Neal earlier if he would be willing to review my code and identify areas to improve, so I sent everything out and then sleepily shuffled off to bed to catch up on sleep.