helth.app 0.3.0 📅 – closingtags </>
Categories
helth.app Javascript Programming TypeScript

helth.app 0.3.0 📅

New feature release for helth.app!

#health #calories #macros

Table of Contents

New Feature

One major pain point that I had been meaning to address with helth.app was the ability to edit the nutrient counts for previous days. Typically, my breakfast and lunch are simple and easy to enter, especially since I have most of the meals for both saved saved locally.

Supper time can be a little more complicated though. Because I have the additional responsibilities that come along with parenting, entering my meal isn’t always my priority. Sometimes I forget to enter all the food and other times, I haven’t created the meal as a recipe within the app yet so entry is a little more involved. Instead, I simply say I’ll come back to it later. But it’s not uncommon for “later” to be “the next morning”.

Previously, helth.app only allowed entry for “today” which ended up being whatever the date was in your current timezone. I realized the next feature I needed was allowing the entry of counts for days in the past. With the release of helth.app 0.3.0, I’m happy to say that it is now possible to edit data in the past! 🎉

Development

I spent more time than I care to admit fighting with the JS Date object, timezone offsets, UTC timestamps, and daylight savings time. I came away from all of this realizing several things:

  1. Daylight Savings Time is evil and should be abolished.
  2. The TC39 Temporal proposal will likely solve a lot of the pain points I experienced.
  3. Until Temporal is accepted, developers should probably use https://date-fns.org/.

One particularly troubling issue that I resolved adjusted UTC timestamps according to the local user’s timezone. The problem revolved around the fact that helth.app stores a record of nutrients for each day using a timestamp with all hours, minutes, seconds, and milliseconds “zeroed out.”

This creates a problem when pulling those timestamps back into the application as that timestamp is likely not midnight on the same date in a different timezone. To counter this, I created the following TypeScript function to add the timezone offset to each timestamp. This way, the application will treat each timestamp as midnight on the given date.

export const addTimezoneOffset = (timestamp: number): number => {
    const checkDate = new Date(timestamp);

    // current timezone diff in min to ms
    let toAdd = checkDate.getTimezoneOffset() * 60000;

    return timestamp + toAdd;
};

The above code will take a given timestamp, create a new Date object based on it, add the current timezone offset to the timestamp, and return the corresponding timestamp for the given date but at midnight. This is used by helth.app to ensure that the date you’re trying to access is in fact, that date.

In the future, I may release a post outlining some of the difficulties I encountered and the solutions I came up with but for now, let’s all take a minute to appreciate the fact that we can edit data in the past with helth.app!

Next Steps

What’s next for helth.app? I’d love to collect feedback from users to determine which features are most important to them. If you like, you can follow along with the development at https://github.com/Dilden/helth where all of the source code is freely available. If you’ve encountered a problem, feel free to file an issue under https://github.com/Dilden/helth/issues. If you don’t have an account on GitHub, I can always be reached with the comments under this post, on this very site via the contact form, or on the Fediverse!

If you or someone you know likes to count calories or macro-nutrients, tell them about helth.app!

By Dylan Hildenbrand

Author and full stack web developer experienced with #PHP, #SvelteKit, #JS, #NodeJS, #Linux, #WordPress, and #Ansible. Check out my book at sveltekitbook.dev!

Do you like these posts? Consider sponsoring me on GitHub!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.