2020 and 2021 have seen so many workers shifting their work style to the work-from-home style, and developers are no exception.

Some say it boosted their productivity, and others suffered from the transition.

I have to admit; I'm more inclined to the latter.

There are so many distractions and so much freedom in your house.

For instance, you can dance to music knowing it will delay the release of a new feature.

Or, you can start washing dishes knowing you have to respond to your boss.

You do all of those, right? You suddenly **stand up** and start doing your stuff as if you had discovered your calling. I won't judge you when you can't resist that urge because I've been there once (or thousands of times) too. However, we can not necessarily be happy that way. Sometimes you have to get things done instead of **standing up and starting to dance**.

That means you need a watcher that keeps you from standing up when you're not supposed to.

So, I created an **AI-powered app that will scold you in an anime voice when you stand up**.

## What I created
Here I introduce this app to you, "No Standing App."

You can see it running from this link.

[https://bunhojun.github.io/no-standing-app/](https://bunhojun.github.io/no-standing-app/)

### How to use
Recommended browser: Google Chrome
1. grant permission for webcam on the browser
2. wait until the webcam gets ready
3. stand up, and you will hear an anime voice saying "kora!" which means "hey!"

That's it.
I implemented minimum UI so I could make the code as simple as possible.

## Libraries / Machine learning model
These are the libraries and machine learning models I used to create this app.

### [ml5.js](https://ml5js.org/)

ml5.js is a JavaScript library for machine learning.
You can not only use machine learning models that have already been trained, but also you can train AI with images you have. What's fantastic about this library is that you can use it without any AI knowledge as long as you know how to code in JavaScript.

### [PoseNet](https://learn.ml5js.org/#/reference/posenet)

PoseNet is a machine learning model that allows for Real-time Human Pose Estimation.
It locates the coordinate at which your body (or part of your body) is by using images taken from the webcam.

### [p5.js](https://p5js.org/)

p5.js is a library that helps you render images or shapes with ease. In this app, I used it to implement a webcam. This library often comes up when dealing with ml5. You can benefit a lot from using this library if you use ml5.

### [p5.sound](https://p5js.org/reference/#/libraries/p5.sound)

p5.sound is a library that lets you load sound files on p5.js with ease.

### Sound source
You can use any sound, but I downloaded an anime voice from this website (Japanese only).

[https://soundeffect-lab.info/sound/voice/line-girl1.html](https://soundeffect-lab.info/sound/voice/line-girl1.html)

## How did I code it?
If you are interested, I'll show you how I created this app. It's actually easy.

### Basic algorithm
* judge if you are trying to stand up or not by the coordinate of your nose on the webcam
* if your nose gets to the top of the screen, it triggers the voice

### HTML

```html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Image classification using MobileNet and p5.js</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js"></script>
  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>

<body>
  <h1>立ち上がっちゃだめだよ(Don't stand up)</h1>
  <p id="message">loading</p>
  <script src="sketch.js"></script>
</body>

</html>
```
The p tag used above shows the loading state of PoseNete (a machine learning model). 

### JavaScript
```js
// sketch.js

// global variable to store instance that plays the "kora" sound.
let kora;

// p5.js/p5.sound-library-specific function that is called before loading the project. Lets you load a sound file.
function preload() {
  soundFormats('mp3');
  kora = loadSound('assets/kora');
}

// p5.js-specific function that is fired on project running
function setup() {
  // createCapture creates a video (webcam) element on dom tree. VIDEO is a global variable of p5.js
  const video = createCapture(VIDEO);
  // load PoseNet model of ml5 and create a posenet instance
  const poseNet = ml5.poseNet(video, modelLoaded);
  // eventListener that detects human movements or poses. it receives a callback as the 2nd argument.
  poseNet.on('pose', gotPoses);
}

// callback function fired when PoseNet (or other ml5's machine learning models) is loaded.
function modelLoaded() {
  const message = document.querySelector('#message');
  message.innerHTML = '準備OKだよ！(Ready!)';
}
```

Here are a few essential parts;

```js
const poseNet = ml5.poseNet(video, modelLoaded); 
```
The code above enables you to use the PoseNet model. ```ml5.poseNet()``` gets two arguments, which are a video element of HTML and a callback function fired when a machine learning model is loaded. In this case, I made the p tag I mentioned above show that the model and the app are ready.

And here is another important part

```js
poseNet.on('pose', gotPoses);
```

When PoseNet detects human poses (which happens a few times in a second), it fires a callback function. 
In this app, I call a function named ``gotPoses()`` as a callback (details below).

### When PoseNet detects a human pose
We have to take a look at one thing before explaining the ``gotPoses()``.
When PoseNet detects a human pose, the listener passes an argument to its callback function.
If you look at this argument, you will see that it is an array.

```
[
  {
    pose: {
      keypoints: [{position:{x,y}, score, part}, ...],
      leftAngle:{x, y, confidence},
      leftEar:{x, y, confidence},
      leftElbow:{x, y, confidence},
      // what is important is down here
      nose: {
        confidence: 0.9991235136985779
        x: 361.67679872030413
        y: 199.94389418961936
      }
      ...
    },
    // ignore this time
    skeleton: [...]
  }
]
```
This array has an object, which has two objects called "pose" and "skeleton." In this app, we will use the "**pose**" object.

This pose object lets you know the coordinate at which each part of your body is.

Since the algorithm is "if your nose gets to the top of the screen, it triggers the voice," we will extract the Y coordinate of your nose from the nose property in the pose object.
Let's define the Y coordinate of "the top of the screen" as 50 (by the way, the upper your nose goes, the smaller the Y coordinate gets).

OK, let's move on to the explanation of ``gotPoses()``.

```js
// callback function fired when PoseNet detects a human pose
function gotPoses(poses) {
  if (poses && poses[0]) {
    const pose = poses[0].pose;
    const noseY = pose.nose.y;
    if (noseY < 50) {
      onStandingUp();
    } else {
      onSitting();
    }
  }
}
```
As you can see from the code above, if the Y coordinate of your nose is smaller than 50, we call ``onStandingUp()`` or else, ``onSitting()``.

Let's look at those two functions
```js
// variable to store the state of if you are standing or not. necessary to avoid being scolded multiple times at one time.
let isStandingUp = false;

function onSitting() {
  if (isStandingUp) {
    isStandingUp = false;
  }
}

function onStandingUp() {
  if (!isStandingUp) {
    isStandingUp = true;
    // play "kora" sound. play() is a method provided by p5.sound
    kora.play();
  }
}
```

That's it!! If you want to see the final code, visit the [GitHub repo](https://github.com/bunhojun/no-standing-app/blob/master/sketch.js).

## Conclusion
Did you find the app helpful? You might find it a little bit goofy, but it does its job at least. What's important is I created this app even though I hadn't had much knowledge about AI or machine learning.

I used to think AI or machine learning technology was only for researchers and people who have degrees in the field. But it turns out the AI community is growing, and you can find many inclusive projects or teams, like ml5 or Tensorflow. As is always the case with the tech industry, this tradition always makes me hopeful about humanity.

I hope this article contributes to the tech industry too.

Thanks for reading.

Anime Voice Productivity Enhancer "No Standing App" Powered by ml5

I have a love-hate relationship with HTML and CSS as a front-end developer.
I've been one for almost 3 years, but sometimes I still have hard times wrapping my head around those languages.

Actually, today's problem and the solution are so simple that I doubt my ability and knowledge as a frontend, but that's what happens to every developer sometimes, so I'll write about it anyway.

Today's topic is this;
## CSS feature: flexbox's width is dependent on that of its parent
Let's say you have this HTML structure;
```html
<div class="wrapper">
  <div class="flexbox">
    <div>aaaa</div>
    <div>bbbb</div>
    <div>aaaa</div>
    <div>bbbb</div>
  </div>
</div>
```
and this CSS styling;
```css
.wrapper {
  width: 700px;
}

.flexbox {
  display: flex;
  background-color: aqua;
}

.flexbox div {
  width: 100px;
  text-align: center;
  background-color: yellow;
}
```
This will show you something like this;
![flexbox whose width depends on its parent](https://media.graphcms.com/C1udChnQGq2GioVs9TFA#image)

I added background colors to the flexbox and its children so that it's easier to see its width.
As you can see, the flexbox's width is dependent on its parent's width, which is 700px in this case.  Since it is one of the CSS features, this behavior is expected.

But what if you wish it weren't the case?

## I want flexbox's width to be dependent on its children!!
There comes a time when you want to resist the reality presented to you, and for me, it was this time.

I wanted the flexbox's width to be dependent on that of its children.

The image is something like this;
![flexbox whose width depends on its children](https://media.graphcms.com/oFu6y8G7QkrgRAtWY9QH#image)

So, how do I do that?

## Solution
This problem is simple to solve.

Just use ``inline-flex`` instead of ``flex``.

In this case, change ``.flexbox`` class into something like this;
```css
.flexbox {
  display: inline-flex;
  ...
}
```
That's it!! This is ridiculously simple, and I think most developers know the solution, but I'm not ashamed of writing this article anyway...

## Conclusion
No matter how much you have learned a specific thing, you sometimes have to doubt your knowledge about it, and for me, it was CSS this time. It actually took a few hours to find out this solution, so I decided to write about this anyway. I hope this article helps someone.
Thanks for reading.

How to Make a Flexbox Width Dependent on That of Its Children

If you are like me, chances are you are new to blogging with Next.js or manipulating markdown.

Especially, syntax highlighting was a whole new thing to me (and still is).

When I started creating this blog, I followed the official tutorial of Next.js about creating a blog using the framework. The document [encourages to use remark](https://nextjs.org/learn/basics/dynamic-routes/render-markdown) to convert markdown string into HTML string, and I'm still using the library. However, it didn't tell me how to make codes in markdown-based HTML look good, so I had to research.

Although there were many articles about adding syntax-highlighter to a Next.js-based static page application, they tend to show how to do it with React Markdown library instead of remark.

So I thought it would be great to share how to add syntax-highlighter to markdown-based HTML using remark specifically.

## What is remark, by the way?
According to the official website, [remark](https://remark.js.org/) is a Markdown processor powered by plugins part of the unified collective. In plain English, you can accomplish a specific task regarding Markdown with the library and a plugin tailored for the job. Say, you can convert Markdown files or strings into HTML strings with the plugin called remark-html. Like so, if you want to add syntax-highlighting, you might want to use a specific plugin. In this article, I will use [remark-prism](https://www.npmjs.com/package/remark-prism). 

Enough talking; let's get down to business.

## Prerequisites
1. you use TypeScript
2. you've already downloaded the ``remark`` and ``remark-html`` library
3. the function that converts Markdown into HTML looks like this;
```js
import remark from "remark";
import html from "remark-html";

export const processMarkDown = async (markdown: string) => {
  const processedContent = await remark()
    .use(html)
    .process(markdown)
    .catch(() => "there was an error, please try again");
  return processedContent.toString();
};
```

## First thing first
Let's download ``remark-prism`` by this command ;

```console
yarn add remark-prism
```

## Secondly
Edit the file that ``processMarkDown`` function is defined like below;

```js
import remark from "remark";
import html from "remark-html";
import prism from "remark-prism"; // <-import prism here

export const processMarkDown = async (markdown: string) => {
  const processedContent = await remark()
    .use(html)
    .use(prism) // <-use prism here
    .process(markdown)
    .catch(() => "there was an error, please try again");
  return processedContent.toString();
};
```
The first important line of code is this;

```js
import prism from "remark-prism";
```

The second thing to note here is that I added ``use(prism)`` in the method chain. This is where you add class names to HTML tags where necessary for syntax highlighting. **But** without the next procedure, you can't ornament codes.

## Last but not least
In the ``_app.tsx``, add one particular line to apply syntax-highlighting to the entire project.
```js
import type { AppProps } from "next/app";
// add this line
import "prismjs/themes/prism-tomorrow.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
```

By adding ``import "prismjs/themes/prism-tomorrow.css"``, you can finally apply syntax-highlighting to codes. But many tutorials and blog articles somehow miss this step, which kept me confused for a while.

Anyway, this should make your codes look pretty!

You can also tinker with the taste of styling by importing different CSS files made for ``prism``.
You can see the list from [this GitHub link](https://github.com/PrismJS/prism-themes).

## Conclusion
Since I've seen Markdown-based blog articles using syntax-highlighting a lot, I didn't expect actually finding a way to do it to be this confusing. It turns out each step is easy and simple, but I don't know why I couldn't find the solution easily. So I hope this article helps other newbies who started out writing their blogs.

Thanks for reading.

How to Add Syntax Highlighting to Next.js Project with Remark and Prism.js

If you are in the web development field, you might have used Axios to interact with a server.

With more than ten million downloads per week, the comprehensive browser coverage, yes, Axios is such a powerful library.  It significantly reduces the pain of the stringify method and JSON.parse when dealing with API. There are also so many other benefits of Axios over the built-in fetch method (If you want to learn more about it, see [here](https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/#:~:text=Axios%20has%20the%20ability%20to,does%20not%20support%20upload%20progress.)).

But today, I want to talk about a weird behavior I found when using the library and how to avoid it.

### What happened? Answer: It's called multiple times!!
I was developing a web app, where I had to use a different access token per API request. So I wanted to update the information inside the request header before each API call. To do so,  I had to use the ``axios.interceptors.request.use`` method to update the request configuration.

So here is how I did it at first. 
```typescript
const updateAuthHeader = async (): Promise<void> => {
  // get new access token
  const { status, data } = await requestAccessToken();
  const success = status === 201;
  if (success) {
    const { access_token } = data;
    // update header
    axios.interceptors.request.use((config) => {
      const c = config;
      if (access_token) {
        c.headers.Authorization = `Bearer ${access_token}`;
      }
      return c;
    }, (error) => Promise.reject(error));
  }
};
```
What is important is this;
```typescript
axios.interceptors.request.use((config) => {
  const c = config;
  if (access_token) {
    c.headers.Authorization = `Bearer ${access_token}`;
  }
  return c;
}, (error) => Promise.reject(error));
```
To update the information in the request header, you have to pass ``axios.interceptors.request.use`` a handler that updates the request header.

But when I added ``console.log()`` inside the handler, I noticed it is **fired multiple times** before each request, and as I call APIs, **the number of times the handler is called increases**. So if I make the third API header update, the method fires the handler three times.

This behavior was not ideal in my case because it makes unnecessary function calls.

### But why?
Every time the ``axios.interceptors.request.use`` method is called, it has to update the handler's context inside it (in the case above, ``access_token`` is different depending on the context). But it turns out that as it updates the handler's context, it stores the handler in an array. And with each update, it fires all the handlers inside the array (see [the source code](https://github.com/axios/axios/blob/a105872c1ee2ce3f71ff84a07d9fc27e161a37b0/lib/core/InterceptorManager.js#L18) for more details). 

I haven't found out the intention behind it, but there is a way to avoid this.

### The final code
```typescript
// store index of handler
let axiosInterceptor: number | null = null;

// clear remaining handlers
const clearInterceptor = (interceptor: number | null) => {
  if (interceptor || interceptor === 0) {
    axios.interceptors.request.eject(interceptor);
  }
};

const updateAuthHeader = async (): Promise<void> => {
  // clear remaining handlers
  clearInterceptor(axiosInterceptor);
  // update access token
  const { status, data } = await requestAccessToken();
  const success = status === 201;
  if (success) {
    const { access_token } = data;
    // store index of handler
    axiosInterceptor = axios.interceptors.request.use((config) => {
      const c = config;
      if (access_token) {
        c.headers.Authorization = `Bearer ${access_token}`;
      }
      return c;
    }, (error) => Promise.reject(error));
  }
};
```

Notice two important parts. 

The first one is ``axiosInterceptor``;
```typescript
// store the index of handler
let axiosInterceptor: number | null = null;

~~~

axiosInterceptor = axios.interceptors.request.use((config) => {
  handler code here
});
```

The ``axios.interceptors.request.use`` method returns a number value each time it is called. The number will be a handler's index in an array the handler will be stored in. ``axiosInterceptor`` stores the index of a new handler to remove it from the array later.

The second one is a function to remove previous handler;
```typescript
// clear remaining handlers
const clearInterceptor = (interceptor: number | null) => {
  if (interceptor || interceptor === 0) {
    axios.interceptors.request.eject(interceptor);
  }
};
```
Axios provides a method called [eject](https://axios-http.com/docs/interceptors) to remove one of the handlers stored in the array. Before we update the header, we call the method to remove the previous handler from the last time we made an API request. To remove the handler, you must pass its index inside the array to the ``clearInterceptor `` function. So when you want to remove the previous handler, you call the function passing the ``axiosInterceptor`` variable.

### Conclusion
This might not be a big deal for many developers, but I was not too fond that Axios makes unnecessary function calls. Also, I found someone who had the same issue, and the code above is fundamentally the same as [their solution](https://github.com/axios/axios/issues/1645#issuecomment-401779810). Unfortunately, however, there doesn't seem to be enough discussion about it, so I hope this will be helpful for someone who's facing a similar issue.



Handlers in Axios Interceptors Called Multiple Times and How to Avoid It

Today, I'm gonna be sharing how I kickstart my Next.js app.

Although I'm new to Next.js, I've been writing React code with Create React App, Typescript, ESlint, and Husky for a while and am pretty much used to those systems. When it comes to linting, Next.js and Create React App might have their own optimal settings for ESlint, but I guess the fundamental rules of coding are almost the same for both of them. So I think I'm eligible to share how I create my Next.js app with those tools even though I'm new to the framework!

### First off, create your Next.js project
To create a project, you have to run this command;
```console
npx create-next-app [your app name]
```
Then, run the command below to create the ``src`` directory and move ``pages`` and ``styles`` directories into it because you will end up adding lots of directories later, and it will be kinda messy otherwise. 
```console
cd [your app name]
mkdir src && mv pages styles src
```
Your ``src`` directory should look something like this;
```folder-structure
.
└─ src
    ├─ pages
    └─ styles
```

### Add TypeScript
TypeScript has already been the de facto standard for React development to build your app safely, and there is no doubt about it.

So, run this command to add TypeScript in your Next.js project;
```console
yarn add -D typescript @types/react @types/node
```
You have to add ``tsconfig.json`` in the root directory.
```console
touch tsconfig.json
```
Replace .js extension with .tsx or .ts, and run ``yarn dev`` if you want to make sure Typescript works.

Here's my ``tsconfig.json``; 
```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "./src/*"
      ],
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

```
The above is pretty much the same as the initial configuration that Next.js creates for you.

But there are some differences like I set ``"strict"`` to be ``true``.

And here is my favorite part;
```json
"compilerOptions": {
  ...,

  "baseUrl": "./",
  "paths": {
    "src/*": [
      "./src/*"
    ],
  }
}
```
This allows you to use absolute paths when importing your own components or functions in your tsx file (and you don't need to change the Webpack configuration). For those wondering why you should use absolute paths, read [this article](https://hackernoon.com/react-pro-tip-use-absolute-imports-for-better-readability-and-easy-refactoring-2ad5c7f2f957).

### Add ESlint (with prettier)
Nothing special, just run these commands;
```console
yarn add -D eslint prettier eslint-plugin-react
yarn add -D eslint-config-prettier eslint-plugin-prettier
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
And add ``.eslintrc.json`` to your root directory
```console
touch .eslintrc.json
```

And this is my favorite ESlint setting;
```json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "prettier/prettier": [
      "error", {
        "doubleQuote": true,
        "endOfLine": "auto"
      }
    ],
    "react/no-unescaped-entities": "off",
    "no-console": "warn"
  }
}
```

My favorite parts are
* ``"endOfLine": "auto"`` to make sure it won't throw an annoying "Delete `␍`" error
* ``"doubleQuote": true `` to set double quote as the standard quotation
* ``"no-console": "warn"`` to make sure I won't forget to delete console codes I used to check values

Let's move on!

### Add Husky (with lint-staged)
[Husky](https://typicode.github.io/husky/#/) enables you to run specific commands before committing your code. Combined with [lint-staged](https://www.npmjs.com/package/lint-staged), which checks lint errors in your staged files, you can check or fix your codes that are going to be committed.

Run this command to download **lint-staged** first;
```console
yarn add -D lint-staged
```
To configure how you check your files when committing, add this code to the bottom of your ``package.json``.
```json
 "lint-staged": {
    "*.{ts,tsx}": "eslint --max-warnings=0 --ext .tsx --ext .ts --fix"
 }
```
And your ``package.json`` should look like this;
;
```json
{
  ...,

  "dependencies": {
   ...,
  },
  "devDependencies": {
   ...,
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --max-warnings=0 --ext .tsx --ext .ts --fix"
  }
}
```
By the way, I accept no errors or warnings when committing by adding ``--max-warnings=0`` in the above code.

Next, you have to add and initialize husky by running this code;
```console
npx husky-init && yarn
```
This will create a directory called ``.husky`` in the root directory.

In ``.husky/pre-commit``, you have to add, ``yarn lint-staged``.

So, husky/pre-commit will look like this;
```sh
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

```

If you want to make sure husky and lint-staged you just added work, try committing erroneous codes. 
If it stops you from committing bad codes, that means it's working.

If you're done taking those steps, you're good to go!!

### Conclusion
That's it for today's post. I'm new to Next.js, and there might be some changes to this post in the future. But I hope this article helps some Next.js developers kick-start their projects with the necessary tools!

Of course, there is no perfect way to develop a web app (not just with Next.js but other frameworks as well) but trying to find **best** for you is really important. 

So, keep coding!


How to Kick-start a Next.js/TypeScript Project with ESlint, and Husky

Every masterpiece of literature begins with an epic line.

Say, The Stranger by Albert Camus (although I've only read the Japanese translation), or Snow Country by Yasunari Kawabata (I guarantee you, its opening is perfect in Japanese).

But I'm not here to write an epoch-making novel, so excuse me for starting this blog in a normal way.

By a normal way, I mean I'll start this blog with my self-introduction.

### Who am I?
I'm a frontend developer, currently 26.

I was born and raised in Japan, but actually, I'm Korean (it is a little bit complicated, but I don't speak Korean).

I've worked in the IT industry for almost 3 years as of April 2021.

My current goal is to work abroad because it just seems cool (although I think I should write tens of lines of why I want to, I feel too lazy for that).

### Why blogging?
Here I started this blog to share what I think is valuable because that's what everyone else does, and I've always wanted to start my blog using Next.js.

Also, I don't see many Japanese write their blogs in English, so I hope my thinking is something fresh for English-speaking developers.

### Conclusion
That's it!
I don't want this introduction to be too long now that our attention span is getting shorter because of all those new media, so that is it for the first post.

But before I leave, I hope this blog will be part of the solution to someone's problem.

Thanks for reading.

Peace.

Pon's Blog