The time of writing is 10:16 PM on July 22.

This is not the time I’d like to be working on this. My wife is in bed, and I’d very much like to be up there with her.

Today didn’t go as planned. And that’s going to happen.

The Past Few Days

I haven’t worked on the app in a few days. It has been a much needed Sabbath. My wife and I spent some much needed time together, going up to a baseball game with a dear friend and resting on Sunday.

It was all too good to sit down and plug away!

If you’re paying attention to the news, you know that just about every Windows device on the planet has gone down due to the CrowdStrike update, so work has also been busy, taking energy from my side project.

After making dinner, and going for a walk, I really didn’t want to sit down to work on the project. But, I knew that if I didn’t, it would fall to the side, like so many side projects do!

I promised myself that I would do something. And, it turns out, I did more than something.

The lesson?

The largest hurdle in motivation, is the very first one. It’s so much easier to steer a car that’s already in motion than one that is parked in the garage.

The Small Steps for Today

I did two things tonight. I implemented active styling on my buttons and I installed a timer!

Here’s a collection of tidbits that I learned doing it!

Flexible Active Styling

I wanted my buttons to get brighter when they are clicked, giving the user the feeling of actually pressing something. But, my buttons colors are dynamically rendered! So, to brighten the color, I used a filter! Something I hadn’t discovered in CSS before:

.Button:active {
    filter: brightness(110%);
}

Now, regardless of the color, my buttons add 10% brightness.

I was also a bit annoyed that all of my text was hightlighting inside the button when I clicked it. So, I added the following CSS:

.Button {
  -webkit-user-select: none; 
  -ms-user-select: none;
  user-select: none;
}

This keeps my text from being “highlightable” which I may apply to more rulesets throughout the application later.

Timer

Instead of coding my own timer, I figured someone had to have made a module for this already, and I was right. A very simple timer is available from npm called use-timer . I added a bit of code to my own timeString module, which formats a number of seconds into minutes-seconds. So, now, with a second argument, I can use the same module to get a different format!

import React from 'react'
import './Roaster';
import { useTimer } from 'use-timer';
import { useState, useEffect } from 'react';
import timeString from '../util/timeString'

function Timer() {
  const { time, start, pause, reset, status} = useTimer({
    autostart: true
  });

  return (
    <div className="Timer">
      <p>{timeString(time, "colon")}</p>
    </div>
  )
}

export default Timer

A refreshingly simple component.

But, when it rendered in, it was annoying me. The numbers were doing a little bounce in place..

This is not a big deal, but it makes the UI feel less clean. So, CSS came to the rescue again!

.Timer {
  font-variant-numeric: tabular-nums;
}

This one line, turned my bouncy numbers into this!

Ah, much better.

Get Started

The lesson for today, is whether you have 2 hours or 2 minutes, you have time to do something meaninful on your projects. This all took me about 30 minutes before bed. The shocking thing is that I went from having no motivation at all to work on the project, to essentially having to pull myself away to make sure that I’m rested for the continued CrowdStrike remediation tomorrow.

Don’t let motivation dictate your effort, it is fickle, and you are not!

Check Out the Repo

If you want to keep up with the changes, fork and run locally, or even suggest code changes, here’s a link to the GitHub repo!

https://github.com/nmiller15/roast