Look back on these three months: I release an app and write an article every week
Tags: webdev, typescript, challenge
Published: 2021-08-16 05:16:45

Hey guys,

I've been challenging myself #tryAtleast1Article1week to release an app and write an article in both English and Japanese per week since the latter half of May.

I'm planning to continue this challenge for a little while longer, but anyway, I've completed this challenge for three months, so I would like to look back!

## Week 1: React + TypeScript: Face detection with Tensorflow

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jtm443pisq3ut9obmxs.gif)

There were not many examples of using TensorFlow.js with React and TypeScript, so I got stuck at first.
But now I know how to run it with TypeScript, so actually this was good choice for me to use TensorFlow.js with TypeScript.

https://dev.to/yuikoito/face-detection-by-using-tensorflow-react-typescript-3dn5

This was the first time I wrote an article in English, and I was happy to see that it became the 4th most trending article.

https://dormoshe.io/newsletters/ag/typescript/42?utm_source=twitter&utm_campaign=twitter

## Week 2: UI Components website Released!

[![Image from Gyazo](https://i.gyazo.com/f26cc3a67cc5374cb9bcbc471640ccfc.gif)](https://gyazo.com/f26cc3a67cc5374cb9bcbc471640ccfc)

https://dev.to/yuikoito/ui-components-website-released-2g8e

I'm not very good at animations, so I've been keeping all the animations I used in a notepad so I can copy and paste them, but I thought it was getting a bit hard to see, so I decided to put them together.

Pretty convenient, isn't it?

## Week 3: I made 18 UI components for all developers

I added 18 components on UI Components, which I release last week.

[![Image from Gyazo](https://i.gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f.gif)](https://gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f)

[![Image from Gyazo](https://i.gyazo.com/53f15ba54cc914618781d5dae62b0173.gif)](https://gyazo.com/53f15ba54cc914618781d5dae62b0173)

[![Image from Gyazo](https://i.gyazo.com/df7822f488a5029efdea84c633729b05.gif)](https://gyazo.com/df7822f488a5029efdea84c633729b05)

## Week 4: Image Transformation: Convert pictures to add styles from famous paintings

I made this app because I was interested in image processing.

[![Image from Gyazo](https://i.gyazo.com/190f53a9bbdef934a251581b42e07b68.gif)](https://gyazo.com/190f53a9bbdef934a251581b42e07b68)

I was happy to see that someone wrote an article about it.

https://momosiri.nagoya/33835

## Week 5: Developed an app to transcribe and translate from images

I developed this app because there are only a few applications to translate from pictures.

[![Image from Gyazo](https://i.gyazo.com/eec97dbffb7364afd24f2e9a2e0372b8.gif)](https://gyazo.com/eec97dbffb7364afd24f2e9a2e0372b8)

https://dev.to/yuikoito/developed-an-app-to-transcribe-and-translate-from-images-32gp

There are many apps to translate but for almost all of apps, we have to choose which language we want to translate.
So, I thought it was good to translate automatically to user language.

I think it's more useful.

## Week 6: Generate Open Graph images with Next.js and TypeScript on Vercel

Actually this is even not an app, but I wanted to try open graph images with Next.js and TypeScript.

https://dev.to/yuikoito/generate-open-graph-images-with-next-js-and-typescript-on-vercel-110j

## Week 7: OpenCV in Lambda: Created an API to convert images to Pokémon ASCII art style using AWS and OpenCV

I was looking at Pokémon images, and I thought it would be fun to use this to convert images. Then I developed.

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/677c7bea-2923-2a9d-a9b3-1e5dce6029c5.jpeg)

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/1f3cf240-af77-089d-5184-ef18d1cc6f3e.jpeg)

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/a33fee59-6f44-1f4a-c98f-227c7bc1ed92.jpeg)

https://dev.to/yuikoito/opencv-in-lambda-created-an-api-to-convert-images-to-pokemon-ascii-art-style-using-aws-and-opencv-287l

Using OpenCV in Lambda is the part that I struggled with.

## Week 8: Developed a web app to convert images to Pokémon ASCII art style

I made a web app using the API I made last week.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc0qhmr31a0x2idhpgxs.png) 

https://dev.to/yuikoito/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style-mb7

## Week 9: Using OpenCV: Developed a web app to convert images to manga style

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knnj4kdn6q4afpy7r80q.png)

![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n0izk8nrf5cdpmal426.png)

https://dev.to/yuikoito/using-opencv-developed-a-web-app-to-convert-images-to-manga-style-23p0

I think it's pretty fun, so please play with it if you like.

If you want to replace the background, you need to use an image without anything in the background, because it does not extract people.

I'm almost new to image processing, but I'm getting used to it.

## Week 10: TensorFlow + Next.js + TypeScript: Remove background and add virtual background image with web camera

[![Image from Gyazo](https://i.gyazo.com/d38a9a41d834d767588917846bce4d7a.gif)](https://gyazo.com/d38a9a41d834d767588917846bce4d7a)

I just changed the background, but to my surprise, it became the first place for trending! Yey.

https://dormoshe.io/newsletters/ag/typescript/50?utm_source=twitter&utm_campaign=twitter

Also, this article triggered three inquiries.

I struggled quite a bit when I ran TensorFlow.js with React+TypeScript in the first week, but this time I didn't struggle that much and was able to do it easily, so I was happy to feel my growth a little bit.

## Week 11: Use Pose detection of TensorFlow with Next.js and TypeScript: Let's become pictograms with Pose detection #Tokyo2020

For this challenge, my friend, [Tommy](https://twitter.com/tommy19970714) contacted me and we decided to develop a pictogram application together.

[![Image from Gyazo](https://i.gyazo.com/f663cfd8cb13b0415650fa357fb2df81.gif)](https://gyazo.com/f663cfd8cb13b0415650fa357fb2df81)

https://dev.to/yuikoito/tensorflow-next-js-typescript-let-s-become-pictograms-with-pose-detection-tokyo2020-17ia

We developed for two days from morning to midnight, connected to Discord all the time.

It was much fun and I would love to do again.

## Week 12: Recognize facial expressions and change face to Emoji using face-api.js with Next.js+TypeScript

I've been having a lot of online meetings lately, and it's a pain to have to put on makeup every time.
But it's also a pain to not be able to see my facial expressions, so I created an app that solves that problem.

[![Image from Gyazo](https://i.gyazo.com/c20f064084a23c5e5a11cb2068623d6f.gif)](https://gyazo.com/c20f064084a23c5e5a11cb2068623d6f)

https://dev.to/yuikoito/recognize-facial-expressions-and-change-face-to-emoji-using-face-api-js-with-next-js-typescript-21n9

If there was a demand for it, I was going to make it a Chrome extension so that I could use it in actual meetings.
What do you think? :D

## That's it!

It was really hard for me to release and write an article every week. lol

Many times I wondered **why am I doing this painstaking work**, but sometimes it makes me happy to get a response, so I plan to continue for a little while longer.

It was my first challenge to write an article in English, but I'm happy to see that I'm getting some inquiries.

Thank you for reading. See you next week!

## Contact

Please send me a message if you want to offer a job or ask me something.

yuiko.dev@gmail.com
https://twitter.com/yui_active