# I made a simple gym rest timer

Project: [https://brianreidy.com/GymTimer](/GymTimer)

Code:[https://github.com/brianreidy/brianreidy.com/pull/24](https://github.com/brianreidy/brianreidy.com/pull/24)

I created a simple gym rest timer inspired by the article ["Write More Useless Software"](https://ntietz.com/blog/write-more-useless-software/). The goal was to have some fun while also learning new things.

When weightlifting, I noticed that for the big lifts like bench press, squat, and deadlift, I needed about 5 minutes to recover in between sets. However, for smaller accessory lifts like close grip bench, bicep curls, and chin-ups, I only needed about 2 minutes to recover.

To address this, I developed a gym rest timer that automatically adjusts the rest time based on the type of exercise. It allows me to set different rest durations for the big lifts and the accessory lifts, ensuring that I optimize my workout efficiency.

This gym timer is pretty simple but i did learn a little bit about audio along the way. This uses a simple html audio element but while looking into it I learned about [https://howlerjs.com/](https://howlerjs.com/) and all of the features that I could use in the future.


I made a simple gym rest timer

# sunday drink tour

last sunday, i went on a drink tour with my friend arvin, my girlfriend audrey,
and my dog, lily. we started off our day with a visit to namaste in park slope,
where we indulged in some delicious lassi. although this wasn't my first time
trying lassi, i have been craving it lately, especially with the warmer weather.

after our refreshing drink, we took the q train to manhattan. it was lily's
first time on the train, and she managed i guess. our first stop was kopitiam,
where we got to try bek-kopi, a special type of white coffee with condensed
milk. the coffee wasn’t sweet which i liked but the condensed milk really hit
the spot. also the coffee in the bag was weird but was kinda nice because you
could hold it by the string or holes without actually warming the drink up or
having the drink sweat all over your hands. probably easier for them to ship
that as well but i digress.

as we continued our journey, we were all getting kinda hungry and audrey needed
something gluten-free to eat, so we made a quick stop at fong on for their sweet
tofu pudding. the pudding was light and there was almost no taste until we
realized the sugar syrup was very much needed haha. i thought it was pretty good
not sure i would reach for it over other food in chinatown. but if you like tofu
its for sure a must try.

our final stop was sugarcane daddy, where we got to enjoy freshly squeezed
sugarcane juice. the juice was sweet and refreshing, and a perfect ending to our
drink tour.

here are some pictures from our adventure:

_Namaste - Lassi_
<img
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  width: 50%;"
  src="/lassiFromNamaste.jpeg" 
  alt="lassi from namaste"
  />

_Kopitiam - Bek-Kopi_
<img
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  width: 50%;"
  src="/coffeeFromKopitiam.jpeg" 
  alt="Bek-Kopi from Kopitiam"
  />

_Fong On - Tofu Pudding_
<img
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  width: 50%;"
  src="/tofuPuddingFromFongOn.jpeg" 
  alt="Tofu pudding from Fong On"
  />

_Sugarcane Daddy - Sugarcane Juice_
<img
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  width: 50%;"
  src="/sugarcaneJuiceFromSugarcaneDaddy.jpeg" 
  alt="sugarcane juice from sugarcane daddy"
  />

overall, it was a fun. 10 out of 10 would do again.

### restaurants cited

[Namaste](https://goo.gl/maps/e2C71kLKQa5Dbk8x7)<br>
[Kopitiam](https://goo.gl/maps/nuKAj8toTcwPFTTw7)<br>
[Fong On](https://goo.gl/maps/XJHVucFtksgwatQq8)<br>
[Sugarcane Daddy](https://goo.gl/maps/GZQMY9AMQPtZg6kW6)<br>


sunday drink tour

# It’s okay to not release a product

As a society, we often prioritize productivity and success over everything else. We measure our worth by our accomplishments and the number of products we can bring to market. However, sometimes it's important to take a step back and realize that it's okay to not release a product.

This sentiment is especially true in the tech industry, where companies and individuals are often pressured to release products quickly and frequently. However, not every feature or product is worth releasing. Sometimes, it's better to hold off on releasing something until it's truly ready, or until it aligns with your long-term goals and strategies.

Take, for example, this [pull request](https://github.com/brianreidy/brianreidy.com/pull/19/files). The feature allows for an image to change from one photo to another photo when you hover over it. The idea being i would change from a photoshopped drawing of an image to an actual photo when hovering over the image.
<img
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top:10px;
  padding-bottom:10px;
  width: 90%;"
  src="/bikeImgComparison.jpeg" 
  alt="Comparison of the Original image of me on a bike and the watercolor"
  />
While this may seem like a small feature, it's a perfect example of when it's okay to not release a product.

While the pull request worked and i got it running locally. I didn't like the distraction it added to my website. Even with the css opacity transition this feature felt too distracting and weird for a user. It's not a crucial aspect of the website, and I felt it was better to wait until it's a part of a larger update or redesign makes more sense in the long run. For example if i had an album of drawings with a post focused on the different tools used to convert images into water color.

I also learned more about mui through experimenting with this feature. I learned about the shouldForwardProp and I also learned how to properly type a mui styled component such that the typescript compiler doesn’t error that theme is missing from the react element. Before and after can seen below.

```ts
const Foo = styled('div'})(({ theme, isToggled }: { theme: Theme; isToggled: boolean }) => ({
  backgroundColor: isToggled ? 'blue' : 'white',
}));
...
// This would error saying i need theme and give a warning that isToggled
// This would also give a warning saying React does not recognize the `isToggled`
// prop on a DOM element. If you intentionally want it to appear in the
// DOM as a custom attribute, spell it as lowercase `isToggled` instead.
// If you accidentally passed it from a parent component, remove it from the
// DOM element.
<Foo isToggled>
```

```ts
const Foo = styled('div', {
  shouldForwardProp: (prop) => prop !== 'isToggled',
})<{isToggled: boolen}>(({ theme, isToggled }) => ({
  backgroundColor: isToggled ? 'blue' : 'white',
}));

<Foo isToggled>

...
```

In conclusion, it's important to remember that not every feature or product needs to be released immediately. Taking the time to ensure that everything aligns with your goals and strategies, and that the product is truly ready, can lead to more success in the long run and you can also still learn along the way.


It’s okay to not release a product

# Component Composition

React's ideal component composition depends on the specific application needs. Generally speaking, React components should be small and focused on a specific behavior.

## Presentation Components

Starting at the leaves of a tree it's best practice to make components reusable and independent, as they should only perform the tasks they were designed for. These types of components are known as **presentational components** and they should be:

- free of business logic
- resuable
- mostly/usually stateless
- most of the code is in the render method / not a lot of js

examples:

- Call to action component that displays a specifc background color.
- Button
- Table
- Badge (Shown Below)

```ts
const BadgeWrapper = styled('div')(({ theme, color }) => ({
  backgroundColor: color ?? theme.palette.background.default,
  borderRadius: '10px',
  display: 'inline-block',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '0px 10px',
}));

const Badge = ({ children, color, darkMode: darkModeProp }: BadgeProps) => (
  <BadgeWrapper color={color}>
    <h3>{children}</h3>
  </BadgeWrapper>
);
```

These components are highly reusuable. The business logic is only to by propped in and never to be contained inside the component. Each **presentational component** should be given to the designer to use across the application/page.

## Container Components

**Container components** are where:

- most of the business logic happens
- not really resuable
- not a lot in the render method besides **presentational components**

Examples:

- Request for songs by X artist and feeding them into a list
- Request for author information and proping them into a badge (shown below)

```ts
export default function AuthorSection({ bookId }) {
  const [author, setAuthor] = useState(undefined);
  useEffect(() => {
    setAuthor(fetchAuthor(bookId));
  }, [bookId]);
  if (!author) return null;
  return (
    <AuthorInfo>
      <TextBadge color="green">{author.name}</TextBadge>
      <AuthorSummary color="gray">{author.summary}</AuthorSummary>
    </AuthorInfo>
  );
}
```

Finally, React components should be as modular as possible, and each should be composed of smaller components. It's good to have **presentational components** contain other **presentation components** if those components get used in multiple places. For example the Call To Action (a component that wraps its children and sets the background color to the business color) can render a Card Component that gets used in other places. The same rule applies for **container components**. Modular components are easier to troubleshoot and modify.


How to compose components in React

harmon disposable but not actually disposable film camera

brian reidy

about

posts

I made a simple gym rest timer

2023/10/19

sunday drink tour

2023/5/21

It’s okay to not release a product

2023/5/18

How to compose components in React

2023/3/31

summer film shoot

2022/9/8

spring film shoot

2022/6/8

games

square colors

2023/5/01

square simon

2023/11/15