Today I feel like a lot of progress have been made, even part of the work was moving components from place to place.

I get distracted quite easily. Pomodoros help in that regard, so when I get distracted, I can come back to focus in less than 25 minutes. My objective is to have 16 pomodoros per day, so 8 hours of focused work.

In an office doing 8 hours is easy. You have meetings, people to talk, and you don't spend your time 100% focus the 8 hours per day. Working at home is becoming challenging as this constant focus is exhausting, and most days I can't reach that goal.

To help with that, I am using an app call Resultivity:

Resultivity

It has a good enough dashboard (I can't take a screenshot without cancelling the timer 😁) that shows me the progress of the day a week.

My target 16 pomodoros for 4 days a week. In case I miss, I recover on Friday.

But let's talk about Kalena.

Months

First I went for adding the months:

Months in Kalena

It was done fairly fast. If the number of years to display is less than 3, I display also the calendar months.

Animations

As I am doing manual layout and positioning elements by coordinates, I couldn't use the nice CSS transitions. Luckily, implementing a react hook that implements a numeric time transition was easy.

The react hook was implemented through composition:

  1. useTimer - giving a time duration, it will transition a value from 0 to 1. It uses requestAnimationFrame to ensure that it does only the needed updates.
  2. useAnimationFunction - This one use the previous one but applies an Easing Function (or Smoothstep)
  3. useAnimatedValue - This one accepts an initial value, and on start defines the target value. So it creates a nice transition.
  4. useAnimatedVector - This one is the same as before but allows vectors or arrays of values.
  5. useAnimatedDateVector - This one adds support for Dates, input and output date vectors.

You can check the code in Github but be careful, there is plenty of space for refactoring.

Kalena animations

Previous/Next Year

Once I have zoom and can go to the Year view, I needed an easy way to move through the years without going back to the main view. A back and forth icon made the trick.

previous and next year function working

This was implemented at the current state mostly for testing, but the result seems good enough.

Sections

The last part Today is Sections.

This sections will cover moments of your life areas: work, travel or personal relationships for example.

This was just a small flex layout, with some manual positioing inside:

Life area demo

And that's all for today, you can see and play in https://day7.kalena.dev/life

The more that I play with react hooks, the more I like it. Thinking now on classes feels wrong right now.

Thanks for reading. If you have any feedback regarding the content of this posts, let me know on twitter.