Button with long press


# Button with long press

It has been a while since I wrote some fun snippets. So here is one.

It is also a good chance for me to work on [Stackblitz](https://stackblitz.com). I find them to be very good, reminiscent of the early [Codesandbox](https://codesandbox.io) before they got bloated.

The button's concept is very simple. What you need is:
- A timer and a state, to track when the long press finishes,
- Event handlers for the mouse's `mousedown` and `mouseup` statuses,
- Some CSS to show the long press' progress.

*Hint: ignoring the `mouseclick` handling (and handle click events using `mousedown` and `mouseup` manually) makes things simpler.*

See the code on Stackblitz here: [Button with long press](https://stackblitz.com/edit/button-with-long-press?file=src%2FApp.css).

And a GIF showing the button in action below!

![button with long press gif](/post-images/button-with-long-press/button-with-long-press.gif)

That's that! Until next time.


2023 in Review


2023 has been a year of travel, of slow-burn progress, and of unexpected events.

I flew a lot. Amsterdam, Val Thorens, Vietnam. Many fun experiences were had.

Career-wise, it has been quite unremarkable. The year seems to have flown by in a slow-burn fashion. A lot more focus will be required to speed up the situation.

![2023 Github contributions](/post-images/2023-in-review/2023-github-contributions.png)

The December sickness certainly left a mark on me. What started out as an innocent family visit turned into a high fever and a sequence of unfortunate things. I am still recovering from the aftermath. There will be a lot of things I need to be do in 2024 to remedy the situation.

Home view 31/12/2023:

![Home view 31/12/2023](/post-images/2023-in-review/home-view.jpg)

My focus in 2024 will be:

- Health: running, swimming, and climbing. Also eating lots of fiber, as well as drinking water.
- Relationships: nurture existing and expand new horizons.
- Career: focus and find product-market fit
- Fun: drawing, writing, reading, and making music

The first few months will be spent recovering, but after that will be a time of focus and execution. I wish for a happy and prosperous 2024!


2022 in Review


Can't believe 2022 is going to be over in a bit! This has been a very influential year for me, one where I had a lot of reflections. It's one of those years when a *lot* of stuff happened.

Tower Bridge photo taken on 30/12/2022:

![Tower Bridge photo taken on 30/12/2022](/post-images/2022-in-review/tower-bridge.webp)

A few things I've done this year:

- The side hustle [Build to Rent](https://buildtorent.io) started having ad revenue, but it's not going to be the main contributor of income. It does help us towards achieving break even status though.
- I switched jobs from a small friendly and fun environment back to the large corporate world. Though I do miss my friends at the old place, I hope to learn as much as I can in this new environment.
- There were a few personal incidents that, though painful, are necessary for me to learn and grow. Ultimately, you are the stories you leave behind. I hope these experiences will help me write a great story at the end.
- I grew a lot closer to a few new friends, and maintained a good connection with my existing circles. I am always grateful for the people around me. I hope my connections will last for a lifetime.
- I managed to visit my family in June! It has been quite long since I visited Vietnam in the summer (it was so hot!). The next time should probably be in spring or winter.
- I did a lot more writings this year (though still not enough). They are unpublished for now, but I hope they will get to the right audience some time in the future.
- I bought more LEGO (my favourite has to be the [Tallneck](https://brickset.com/sets/76989-1/Horizon-Forbidden-West-Tallneck), which is sitting proudly on my desk) and a new [keyboard](https://www.duckychannel.com.tw/en/One3-RGB-TKL-PureWhite).
- Bouldering-wise, I did get to V4-V5 ish, but it's not consistent. I aim to continue climbing and improve. Really need to get my strength up.
- I didn't watch too movies or series this year, and due to some personal issues, didn't go to the theatre at all in the later half of the year. Hopefully the theatre vibe will come back to me.
- I Bought an iPad with the Apple pencil. I want to get back to my drawing hobby.

My GitHub contributions this year:

![2022 GitHub contributions](/post-images/2022-in-review/github-contributions.png)

A few things I aim to achieve next year:

- Continue working on [Build to Rent](https://buildtorent.io) as much as possible
- Learn to drive and get a license
- Write a lot more, especially self reflection stuff
- Go to therapy
- Draw! It's about time for me to get back to my drawing hobby. I want to churn out a few fun and cute comics, as well as a good art piece involving cat(s).
- Cook more adventurous stuff, like roasts
- Bouldering: get to V7
- Maintain exercises and running
- Keep making new friends and connections

And here we are, at the end of 2022. I am grateful for the experiences I have been through, the opportunities presented to me, and the people I have met in the past year. I am thankful that I am healthy, have a loving family, and have quite a few good friends who I like to talk to and hang out with, and who I know will support me in times of need.

I hope the stories I write about 2023 will be awesome. Let's do our best in the New Year 🎆!


2021 in Review


2021 will be over tomorrow! I learned and created a lot of new things this year. With the pandemic raging on across the globe, I consider myself very lucky to have been living in a place where I (and my surrounding populace) can get triple-vaxxed very quickly and feel safe from COVID-19.

Tower Bridge photo taken afternoon 31/12/2021:

![Tower Bridge photo taken afternoon 31/12/2021](/post-images/2021-in-review/tower-bridge.webp)

A few things I've done this year:

- Shipped lots of code for our side hustle [Build to Rent](https://buildtorent.io)
  - Additional core functions surrounding data analytics started to being built
  - New designs were implemented
  - Tenants started using the site mid-way through the year
  - Real, actual customers started to reach out
  - Personnel changes happened, but we've arrived at a good spot for the next year
- Left the workplace college that is PwC and shipped code at the new workplace (not-yet-public project)
- Maintained bouldering (started around September 2020). I'm around V3-ish, I think.
- Visited Cornwall
- Watched lots of IMAX (a few twice: Shang-Chi, Eternals, Spider-Man: No Way Home)
- Listened to many podcasts, especially the All-In podcast, Lex Fridman, and Nick Huberman.
- Started a few books (they are not finished yet)
- Watched England went (almost) all the way at the EURO.
- Made new friends and connections
- Had 3 doses of vaccines 💉

My GitHub contributions this year:

![2021 GitHub contributions](/post-images/2021-in-review/github-contributions.png)

A few things I missed out due to the worldwide pandemic:

- Visiting my family in Vietnam
- A few drinks here and there (but much better than 2020)

A few things I aim to achieve next year:

- Having income from the side hustle [Build to Rent](https://buildtorent.io) (and with that, corporate freedom)
- Visiting my family in Vietnam
- Bouldering: get to V5
- Maintaining exercises and running (during the summer)
- Keep watching lots of IMAX
- Keep making new friends and connections
- Driving license (low priority)

Ending this note, I watched [Don't Look Up](https://www.imdb.com/title/tt11286314/) (with Leonardo DiCaprio) near the end of the year. The movie has a good but scary message on climate change. What resonated with me, is at the end of the movie, Leo's character says to his family and friends: _"We really did have everything, didn't we"_.

A short, but simple message. You don't really appreciate the things you have until it's gone.

I'd like to keep that as a reminder, to keep working on important things, to not lose sight of my North Star, and to be thankful always of the things I have.

Here's to an awesome 2022 🎆!


The Killer Garage Door exercise


I had the chance to do the [Killer Garage Door](https://www.codewars.com/kata/58b1ae711fcffa34090000ea) exercise in an interview recently.

This seems like a classic state machine problem. You have a garage door that opens and closes in response to button presses and potential obstacles encountered during movement.

Example states the garage door can be in: opening, closing, fully opened, fully closed, etc.

The exercise is pretty fun and educational, so I definitely recommend you attempt it in your own free time. Submitting the exercise shows you some pretty cool answers too (my submission is [here](https://www.codewars.com/kata/reviews/58caaae1405751ce4c000e26/groups/6006d4d1ec21450001b85928) - definitely not as clever as some others - also ignore the no-op `parseEvent` function at the top, I forgot to remove it!).

After reviewing others' answers, I went and create a React app for the exercise. You can view the Codesandbox [here](https://codesandbox.io/s/killer-garage-door-gpx1s?file=/src/door.js). I'll update this sandbox to an actual web app and write up more details in due course.

In the meantime, enjoy this GIF of the web app in action:

![killer garage door React app gif](/post-images/the-killer-door-exercise/killer-garage-door.gif)


Perform network requests with vanilla React


_Disclaimer: using vanilla React is great for understanding React. However, when writing production code, you probably should consider external solutions like Tanner Linsley's [`react-query`](https://react-query.tanstack.com) or Next.js' [`swr`](https://github.com/vercel/swr), which provide caching, better controls, retries, etc. out of the box. Please also check out the React team's official documentation on data fetching [here](https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data)._

First things first, you can view the completed Codesandbox [here](https://codesandbox.io/s/vanilla-react-network-request-tjugq?file=/src/App.js). It's a React application that fetches random dog images from the [random dog images API](https://dog.ceo/dog-api). You can change how many images to fetch using an input.

With the above target application in mind, let's dive into this step by step!

#### 1. The API request

Let's create a function that fetches dog image URLs from the API. We can check the [API](https://dog.ceo/dog-api/documentation/random)'s documentation to see which URL to call, as well as what the response will be.

```js
/**
 * Fetch random dog images. API documentation: https://dog.ceo/dog-api/documentation/random
 *
 * @param {number} [howMany] - How many images to fetch. Leave empty to fetch just 1. Max = 50.
 *
 * @returns {Promise<string[] | Error>} - A Promise that resolves to an array of dog image URL(s), or an error
 */
const fetchDogImages = async (howMany) => {
  const url = `https://dog.ceo/api/breeds/image/random/${
    howMany && howMany > 0 ? howMany : ''
  }`;

  try {
    const res = await fetch(url);

    if (!res.ok) {
      const errMsg = await res.text();
      return new Error(errMsg);
    }

    const { message } = await res.json();

    // Parse and return the image URLs
    return Array.isArray(message) ? message : [message];
  } catch (err) {
    return err;
  }
};
```

Our asynchronous `fetchDogImages` function takes in a number that controls how many images should be fetched from the API. It then makes a network request using `fetch` which is a standard web API.

A `try/catch` block is used to handle network errors (in case the user is offline). In addition, if the `fetch` request fails for whatever reason (e.g. Bad Request), we catch these too via the `!res.ok` check.

If everything goes well, the function returns an array of dog image URLs.

#### 2. The React component - No API

Let's create the React component without any API stuff. We have:

- A number input to allow users to control how many images should be fetched
- A text block to display our fetches' loading status
- A text block to display fetch errors
- A section to display images of cute doggos 🐶!

```js
import * as React from 'react';
import './styles.css';

export default function App() {
  const [howMany, setHowMany] = React.useState(3);

  const [apiResponse, setApiResponse] = React.useState();
  const [apiIsLoading, setApiIsLoading] = React.useState(false);
  const [apiError, setApiError] = React.useState(null);

  // Just a standard event handler for React controlled components
  const handleChange = (e) => {
    setHowMany(e.target.value);
  };

  return (
    <div className="App">
      <h1>Doggos!</h1>

      <label>
        <span>How many images to fetch (max: 50): </span>
        <input
          type="number"
          min={1}
          max={100}
          value={howMany}
          onChange={handleChange}
        />
      </label>

      <p>{apiIsLoading ? '⌛⌛⌛' : '✅'}</p>
      <p>{apiError ? apiError.message : 'No error occurred'}</p>

      {apiResponse && (
        <div className="dog-img-ctn">
          {apiResponse.map((url) => (
            <img className="dog-img" src={url} alt="A cute doggo!" />
          ))}
        </div>
      )}
    </div>
  );
}
```

Here's the CSS file to style our doggo image section:

```css
.App {
  font-family: sans-serif;
  text-align: center;
}

.dog-img-ctn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 0.5rem;

  margin: 0 auto;
  max-width: 40rem;
  padding: 0.5rem;
  background-color: #eee;
  border-radius: 5px;
}

.dog-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
```

#### 3. The React component - With API

Network requests are **side effects**, thus they should be performed in `useEffect` hooks, which trigger after every render. This is now a good time to read about `useEffect` [here](https://reactjs.org/docs/hooks-effect.html) and [here](https://overreacted.io/a-complete-guide-to-useeffect/).

```js
// ...

export default function App() {
  // ...

  // Network requests are side effects. Put them in a useEffect().
  // The function within this useEffect() argument block will be called after
  // every render, provided at least one of the variables within the "dependency
  // array" (the second argument of useEffect()) has changed.
  React.useEffect(() => {
    // Defining an asynchronous "executor" function here allows us to use
    // async/await syntax within the useEffect(). The other alternative is using
    // .then().catch()
    const executor = async () => {
      // We start out by setting the loading state to true and clear
      // out any previous errors
      setApiIsLoading(true);
      setApiError(null);

      // Call the fetch function defined in part 1, passing information
      // on how many images it should fetch
      const res = await fetchDogImages(howMany);

      // The fetch function has finished now. The Promise returned from
      // it has been settled. We can set the loading state back to false.
      setApiIsLoading(false);

      // If an error occurred, we update the error state and terminate
      // this executor function (hence the 'return').
      if (res instanceof Error) {
        return setApiError(res);
      }

      // If no errors occurred, we update the API response state.
      setApiResponse(res);
    };

    // Execute the function defined above after every render.
    void executor();
  }, [howMany, setApiResponse]);

  // ...
}
```

#### 4. All together now

The completed React file (the completed `styles.css` file is already further above!):

```js
import * as React from 'react';
import './styles.css';

/**
 * Fetch random dog images. API documentation: https://dog.ceo/dog-api/documentation/random
 *
 * @param {number} [howMany] - How many images to fetch. Leave empty to fetch just 1. Max = 50.
 *
 * @returns {Promise<string[] | Error>} - A Promise that resolves to an array of dog image URL(s), or an error
 */
const fetchDogImages = async (howMany) => {
  const url = `https://dog.ceo/api/breeds/image/random/${
    howMany && howMany > 0 ? howMany : ''
  }`;

  try {
    const res = await fetch(url);

    if (!res.ok) {
      const errMsg = await res.text();
      return new Error(errMsg);
    }

    const { message } = await res.json();

    // Parse and return the image URLs
    return Array.isArray(message) ? message : [message];
  } catch (err) {
    return err;
  }
};

export default function App() {
  const [howMany, setHowMany] = React.useState(3);

  const [apiResponse, setApiResponse] = React.useState();
  const [apiIsLoading, setApiIsLoading] = React.useState(false);
  const [apiError, setApiError] = React.useState(null);

  // Network requests are side effects. Put them in a useEffect().
  // The function within this useEffect() argument block will be called after
  // every render, provided at least one of the variables within the "dependency
  // array" (the second argument of useEffect()) has changed.
  React.useEffect(() => {
    // Defining an asynchronous "executor" function here allows us to use
    // async/await syntax within the useEffect(). The other alternative is using
    // .then().catch()
    const executor = async () => {
      // We start out by setting the loading state to true and clear
      // out any previous errors
      setApiIsLoading(true);
      setApiError(null);

      // Call the fetch function defined in part 1, passing information
      // on how many images it should fetch
      const res = await fetchDogImages(howMany);

      // The fetch function has finished now. The Promise returned from
      // it has been settled. We can set the loading state back to false.
      setApiIsLoading(false);

      // If an error occurred, we update the error state and terminate
      // this executor function (hence the 'return').
      if (res instanceof Error) {
        return setApiError(res);
      }

      // If no errors occurred, we update the API response state.
      setApiResponse(res);
    };

    // Execute the function defined above after every render.
    void executor();
  }, [howMany, setApiResponse]);

  // Just a standard event handler for React controlled components
  const handleChange = (e) => {
    setHowMany(e.target.value);
  };

  return (
    <div className="App">
      <h1>Doggos!</h1>

      <label>
        <span>How many images to fetch (max: 50): </span>
        <input
          type="number"
          min={1}
          max={100}
          value={howMany}
          onChange={handleChange}
        />
      </label>

      <p>{apiIsLoading ? '⌛⌛⌛' : '✅'}</p>
      <p>{apiError ? apiError.message : 'No error occurred'}</p>

      {apiResponse && (
        <div className="dog-img-ctn">
          {apiResponse.map((url) => (
            <img className="dog-img" src={url} alt="A cute doggo!" />
          ))}
        </div>
      )}
    </div>
  );
}
```

And that's it! Now after every render (including the first one where the user loads the page), if React detects that the count of how many images should be fetched has changed, our application will automatically re-fetches a new list of dog images from GitHub's API.

The completed application: [Codesandbox link](https://codesandbox.io/s/vanilla-react-network-request-tjugq?file=/src/App.js)


2020 in Review


2020 will be over tomorrow! What a strange and wild trip it has been this year. It goes without saying that no matter how hard you prepare, life can always hit you with something unexpected.

A few things I've done this year:

- Shipped some code at work (non-public project)
- Shipped some code for our side hustle [Build to Rent](https://buildtorent.io)
- Started [my own place](https://restthisafternoon.com) on the Internet

A few things I missed out due to the worldwide pandemic:

- A ski trip in March
- Lots of pub drinks
- Annual family visit

A few things I aim to achieve next year:

- Ship more code for our side hustle [Build to Rent](https://buildtorent.io)
- Freedom

There is a saying, the days are long, but the years are short. It felt like just yesterday that I was home with the family at the beginning of the year, and now here we are, on the verge of the new year.

Stay true to yourself, be thankful for life, and let's go face 2021 🎆!


Measuring Node.js performance


# Using Node.js's performance hooks

Main documentation: [Performance Hooks](https://nodejs.org/api/perf_hooks.html)

Here's how you do it:

```js
import { PerformanceObserver, performance } from 'node:perf_hooks';

function longRunningProcess() {
  // Something that takes a long time... 
}

// Create a new PerformanceObserver instance.
const obs = new PerformanceObserver((performanceEntries) => {
  // Measurement results are available in each performanceEntry.
  console.log(performanceEntries.getEntries());
});

// Subscribe to new 'measure' type PerformanceEntry instances.
//
// Possible PerformanceEntry types are: 'node', 'mark', 'measure', 'gc',
// 'function', 'http2', and 'http'.
// https://nodejs.org/docs/latest-v18.x/api/perf_hooks.html#class-performanceentry
obs.observe({ entryTypes: ['measure'] });

// Start the thing we want to measure, with measurement marks.
performance.mark('1');
await longRunningProcess();
performance.mark('2');

// Measure the duration between mark "1" and mark "2".
// Since the PerformanceObserver 'obs' is subscribed to all 'measure' entries,
// it will be notified of this measurement.
performance.measure('My measure', '1', '2');
```

# Using Node.js's process.hrtime()

Here's how you do it:

```js
const startTime = process.hrtime(); // [seconds, nanoseconds]

// Do some stuff...

const elapsedTime = process.hrtime(startTime); // [seconds, nanoseconds]
```

The Node.js function [process.hrtime()](https://nodejs.org/api/process.html#process_process_hrtime_time), when called with no parameters, returns the current real time in a `[seconds, nanoseconds]` array.

When called with the result of a previous `process.hrtime()` call, the difference between the previous result and the current time is returned in a new `[seconds, nanoseconds]` array.


Back to Basics


Technology moves so fast these days, it feels impossible to stop and catch a breath sometimes.

So as you're swimming through the ocean of knowledge, remember to pause and reflect on the basic stuff from time to time. This will help reinforce your upcoming advanced learning.

Your fancy React components just compiles down to HTML tags. Jumping straight into React.js without basic HTML / CSS / JavaScript knowledge means setting yourself up for some painful time.

So slow down and take your time.


The Reminder


I created my GitHub Pages page [here](https://bnguyensn.github.io).

It is a basic HTML page. It doesn't do anything special but display text information.

The purpose of the page is a reminder for myself of the internet's core value: a bunch of information linked together.

A simple concept, yet incredibly powerful. The internet had a similar impact to the invention of writing in the sense that it "levelled up" humanity's learning rate. Information went from being unrecorded, to being recorded and passed down through generations, to being readily available and accessible to almost everyone. There was an exponential expansion of knowledge, and boy did humanity seize on that opportunity.

What will the next big jump be? How can learning rate be advanced even further? We can certainly consider the possibility of directly "beaming" information to a person's brain, cutting out all the current boring typings and searching processes. May there will be an AI that automatically reads our thoughts and instantly provides answers after querying its central knowledge net?

Whatever the future will be, I am excited for it.
