## Introduction
The [POPCAT.CLICK](https://popcat.click/ "POPCAT.CLICK") is a popular competitive clicker web at this moment. A user can click on the screen or using keyboard key to increase the click number of mine and country stat. There is a leaderboard which is descending ordered by country.

> Please see the official document here https://freddyheppell.com/work/popcat

## What I can see

The below detail is written based on the current version on Aug 17th, 2021. Since the __sourcemap__ is not removed on production build. So, the source code can be checked directly on Chrome browser.

![Source map detected in Chrome](//images.contentful.com/i9iomxqywtyn/639eLJWHodkkhtmA9YfR2y/751fe0a451ec12158d56a3101dcc76c8/Screen_Shot_2021-08-17_at_1.05.25.png)

> the actual src will not be added here since I just need to learn how they handle this game

- We can see that the website has been implemented by [vuejs](https://vuejs.org/ "vuejs")
- The current location is checked by API on [created](https://v3.vuejs.org/api/options-lifecycle-hooks.html#created "created lifecycle hook") lifecycle hook and saved to Browser Cookie after first successfully stat updated. If I access to the web within 12hr (0.5 day), the exisiting value will be used.
- The event listeners have been added to the [window.document](https://developer.mozilla.org/en-US/docs/Web/API/Window/document "window.document"), That mean we can click anywhere on the site to increase the number.
- The sound is random on click *and that makes it not boring!*
- We cannot hold down a keyboard key to increase the number since the [event.repeat](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat "repeat document") is being checked
- The [reCAPTCHA](https://developers.google.com/recaptcha/docs/v3) token is being used as an auth and maybe also checked the score of request whether it is spam or not (?). By doing this, to call an endpoint to update number directly with POSTMAN might not that easy
- The stat is not updated on click but it will be counted locally and updated after 30 seconds from first click. After that the count will be sent to API every 30 seconds if I have click more within each cycle.
- If the local count is more than 800, only 800 will be sent to stat API *(It might hurt an autoclicker xD)*
- If I am trying to click more than 800 clicks 11+ times within 30 seconds, I will be marked as a __BOT__ and the bot is not allowed to update any click count for 12hr. In addition, the cat will be ANGRY
- Number of my click will be stored in Browser Cookie for a year~
- The leaderboard will be refetched in 5 seconds after the current request is finished

## Remark
- Remove the source map on production build might be better. Even we cannot avoid other ppl to check the source code but it will be a bit harder than not removing it.
- Since all data are stored in Browser Cookie... I think you know what I mean ;)
- When using [vuejs](https://vuejs.org/ "vuejs"), we can update some local data directly on dev console
- Moreover, I am also interested how they handle massive request from ppl around the world on the backend side. Can't wait to read their [official document](https://freddyheppell.com/work/popcat "popcat official document")!
- IMO, maybe using debounce to send stat after X seconds from last click might help reduce a request from client (in case that user keeps clicking the cat)
- I LOVE THIS CAT. 

![popcat.click site](//images.contentful.com/i9iomxqywtyn/3Yef4EjbBfqhu4il7Q5wC5/b2ae4d7147d7b90877e87664c7e7a8bd/Screen_Shot_2021-08-17_at_2.49.07.png)


A memo that I noted down what I can see from POPCAT.CLICK

Memo: What I can see from POPCAT.CLICK as a Frontend engineer

I have watched the <a href="https://www.youtube.com/watch?v=b-osLoWii2M" class="embedly-card" data-card-width="100%" data-card-controls="0">https://www.youtube.com/watch?v=b-osLoWii2M</a> and here is the interesting information I've got from this video~

**Q: How do we make our local development env fast? I am constantly loading and reloading 80MBs of un-tree-shaken js**

- __*Loadable component*__
  - lazy loading technique, in case that we are using on prod, it will be benefit on develop too
- __*Http caching*__
  - If we set up a good caching, that mean if there is no change, we dont need to pull that file from a development server on every reload
  - Using etag based on node_module version / hash / last modifiled time for caching. So, the browser can also help caching this and we can potentially skip the parsing javascript process. (Also, download time can be reduced)
- __*Make development as similar to production as possible*__
  - Sometimes, there is a build process that take too long time on development build but we can also find the bottleneck and fix it.
  - we can have more confident that it will run the same way on prod
- __*Typescript incremental mode*__
  - make it faster on repeat run
- __*Esbuild (build tool)*__
  - plugins are not ready yet but it's very fast

**Q: Do you optimize as you are developing the website / web-app, or do  you wait until the end, profile, and then do rounds of optimizations?**

- Profile as they go, but often go with **make it work, make it right, make it fast** because sometimes, we just lose time optimizing something that in the end, we have to thrown out bcause it does not fit in their program in the end
- Prefer to keep an eye on performance but dont waste the time on opitimizing a minor thing (e.g. For loop) if it does not break the frame or being a bottleneck
- Waiting for a while to see how did that payoff 
- Did not do the profiling but test it on low-end phone (So, we can know how it performs)

__Approaches:__

- using experience to make a decision on what we should do or we should not do
- selecting technologies that have a good affect and able to predict the long term for performance 
- using static render

> See full video: <a href="https://www.youtube.com/watch?v=b-osLoWii2M" class="embedly-card" data-card-width="100%" data-card-controls="0">https://www.youtube.com/watch?v=b-osLoWii2M</a>

A memo that I noted down about what I got from Web performance runtime Q&A topic

Memo: Web performance runtime Q&A

Calculate px to rem calculator to have a better responsive website. Any changes will be SAVED locally.

CSS: PX to REM Calculator

## Issue
Sometimes, we might have to update a variable or a function name that is being used widely in your large project. And unluckily that the existing name is very common and being used for other stuff as well. 

Using a common feature like __Find all and replace__ to search the actual text might not be effective because you might update the wrong one. So, we have to check it one by one whether we can update it or not.

Which way is easiest for this case?

## Fix
The VSCode provides us a very useful feature to solve this kind of issue. It is a __Find All References__ feature.

## How to use "Find All References"
Let's say, we need to update this type name from __Article__ to __ArticleItem__

![example type to update the name](//images.contentful.com/i9iomxqywtyn/1qX7yqKEpuZzU1h5iQShfr/6a44082912b28badb293409e0b236f46/Screen_Shot_2021-08-16_at_3.08.21.png)

Then, we have to select the type name and right click > __Find All References__

![selecting a feature to find all references](//images.contentful.com/i9iomxqywtyn/2It1lFKXH5gEnFkaD9gsUZ/5a35ab13e4927b2a9430c13a62f05b5c/Screen_Shot_2021-08-16_at_3.10.52.png)

After that, we will see all current references of __Article__ type and we can update it easily

![list of references of expected type](//images.contentful.com/i9iomxqywtyn/7dmQ2TBn2IIBDc0lTqAJIm/163869e429f4594b84abb0274a0a3b04/Screen_Shot_2021-08-16_at_3.12.41.png)

By doing this, we can make sure that we are updating the correct items

## Remarks
This feature works best against modern JS that uses import/export

A VSCode tip that helps you to find all references of specific variable in workspace