chore(deps): bump qs and express

content/about.md

@@ -2,7 +2,7 @@
 templateKey: AboutPage
 title: about
 jumbotron:
-  image: /img/about-jumbotron.jpg
+  image: /img/about-jumbotron.webp
   headline: |-
     Programming =
     Problem Solving
@@ -12,22 +12,22 @@ facts:
     description: |
       My favorite drink is coke.
       However it is not good for my health 😂️, so I drink malt beverage or diet coke now.
-    image: /img/drink.jpg
+    image: /img/drink.webp
   - title: Fruit
     description: |
       My favorite fruit is guava and durian. 
       Yes, I like tropical fruits.
-    image: /img/guava.jpg
+    image: /img/guava.webp
   - title: Old games
     description: |
       Some old games are quite impressive to me including 'Baldur's gate' and
       'Nox'.
-    image: /img/nox.jpg
+    image: /img/nox.webp
   - title: Substitution
     description: |
       I am quite good at substitution or empathizing. 
       The most frequent question I was thinking about as a student is that if I was the professor, what questions would I give at next exam.
-    image: /img/substitution.png
+    image: /img/substitution.webp
   - title: Gaming
     description: |
       I enjoy gaming very much. My favourite game catogory is strategy or card
@@ -38,16 +38,16 @@ facts:
       My another hobby is reading. 
       I train myself to read multiple lines at once because I am so thirsty for the new line when I read, espically if I found a good story, like the story of Sherlock Holmes. 
       I spent most of my teenage hanging around book mall. Of course, for the free air conditioning.
-    image: /img/bookmall.png
+    image: /img/bookmall.webp
   - title: Anime
     description: |
       I am also a big fan of anime. 
       My favourite one is called 'Code Geass'.
-    image: /img/code-geass.jpg
+    image: /img/code-geass.webp
   - title: Highschool
     description: |
       My graduated highschool is Rockridge Secondary School in west Vancouver.
-    image: /img/highschool.jpg
+    image: /img/highschool.webp
   - title: University
     description: |
       I graduated from University of Toronto in 2018 with a degree in computer engineering.
@@ -61,7 +61,7 @@ facts:
     description: |
       Free Loop by Daniel Powter is one of my favourite english songs.
       Flower Dance is the melody I frequently listen.
-    image: /img/freeloop.jpg
+    image: /img/freeloop.webp
   - title: Creation
     description: >
       Sometimes I enjoy drawing, just for the feeling of creation.
@@ -70,17 +70,17 @@ facts:
       Sometimes I do my haircut myself, and I like to challenge myself.
       However I am not able to handle my backside well, I need a photo to assist me.
       If you ever saw myself wearing a hat, that is probably another failure on my way becoming a legendary barber.
-    image: /img/hair-cutting.jpg
+    image: /img/hair-cutting.webp
   - title: Alias
     description: |
       My alias, especially when in game, is 'ewgdg'.
       I simply created this word by face-roll.
       If it has to have some meanings, it means 'creation'.
-    image: /img/ewgdg.png
+    image: /img/ewgdg.webp
   - title: Color
     description: |
       I like red. It stands for life, or HP(Hit Point) in games.
-    image: /img/hp.jpg
+    image: /img/hp.webp
   - title: Color Scheme
     description: |
       My current favorite color scheme is gruvbox-dark.
@@ -92,5 +92,5 @@ facts:
   - title: Number
     description: |
       Number 9 is my lucky number, because it takes 9 strokes to write my name.
-    image: /img/name.png
+    image: /img/name.webp
 ---

content/aboutTemplate.md

@@ -6,6 +6,6 @@ isTemplate: true
 facts:
   - title: template
     description: template fact
-    image: /img/hp.jpg
+    image: /img/hp.webp
     links: [about:blank]
 ---

content/blog.md

@@ -2,7 +2,7 @@
 templateKey: BlogPage
 title: blog
 jumbotron:
-  image: /img/blog-jumbotron.jpg
+  image: /img/blog-jumbotron.webp
   headline: |-
     Thoughts &
     Ideas

content/blog/hearthstone-conditional-probability-question.md

@@ -2,15 +2,15 @@
 templateKey: BlogPost
 title: An Interesting Hearthstone Conditional Probability Question
 date: 2020-04-17T13:00:00.000Z
-lastModified: 2025-07-27T08:54:45.000Z
+lastModified: 2026-05-23T08:25:05.380Z
 description: Reasonable assumptions make differences.
 featuredPost: false
 tags:
   - Gaming
   - HearthStone
   - Probability
 ---
-![](/img/An-Interesting-Hearthstone-Conditional-Probability-Question.png)
+![](/img/An-Interesting-Hearthstone-Conditional-Probability-Question.webp)
 
 There was a very interesting conditional probability problem last month
 as shown in the picture and it caused a debate over it. Some claimed

content/blog/hearthstone-legend-rank-achievement.md

@@ -2,7 +2,7 @@
 templateKey: BlogPost
 title: 'My HearthStone Gameplay Milestone: Legend Rank Achieved'
 date: 2019-12-26T03:48:19.785Z
-lastModified: 2025-07-27T08:54:45.000Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: Data and gaming.
 featuredPost: false
 tags:
@@ -11,7 +11,7 @@ tags:
 ---
 Gaming is always the best reward for me. After my completion of my personal page site project, I decided to take a short break and spend my time into playing HearthStone. Within 2 weeks in the new expansion of HS, I achieved my first legend rank for the game. I was very satisfied about it at the moment so I wrote this post to share my joy.
 
-![](/img/my-hearthstone-gameplay-milestone-legend-rank-achieved-1.jpg)
+![](/img/my-hearthstone-gameplay-milestone-legend-rank-achieved-1.webp)
 
 The key to this achievement is on data analysis. To be specific, there is a website collecting match-ups data from HS players named hsreplay.net. By analysing these data, I soon targeting a deck called face hunter to level up my rank tier from 25 to 1. Now rank tier 1 is one level away from the highest rank tier --- legend tier. However, the environment changed very quickly. Face hunter is less competitive in rank tier 1. As the hsreplay.net showed, the win ratio of face hunter in rank tier 1 is barely above 50%, 50.38% to be specific. Players need 5 net wins to achieve legend rank from rank tier 1. With 50.38% win ratio, I need to play n game plays in total in expectation, where 50.38%\*n-(100%-50.38%)\*n = 5 and n ~= 658. It was obviously not a smart choice to continue to play face hunter. Fortunately, there was a new patch arriving to nerf Shaman so that I knew that the environment would be changing soon. If I can find out a deck with high win ratio that is rare enough that nobody is trying to counter against it in the new environment, then I can quickly arrive to the legend rank. 
 

content/blog/how-to-pronounce-my-name.md

@@ -2,7 +2,7 @@
 templateKey: BlogPost
 title: How to Pronounce My Name
 date: 2019-10-23T02:12:00.771Z
-lastModified: 2026-05-08T07:05:41.350Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: ''
 featuredPost: true
 tags:
@@ -23,7 +23,7 @@ You might think this is the end of the story, but it is not. Since learning the
 
 The first option is to read it the English way, i.e. she-yen/see-yen/shen, whatever you like. Let us represent the action of calling a person’s name as a part of a two-way communication model. 
 
-![](/img/how-to-pronounce-my-name-image0.png)
+![](/img/how-to-pronounce-my-name-image0.webp)
 
 In this model, a sender broadcasts a message, the name, to the receiver, and the receiver then deciphers the message and responds to it by paying attention to the sender. The key is for both the sender and the receiver to have an agreement on the message. Pronouncing the exact sound is hard but recognizing the similar sound is relatively easy. As a result, all of those English version pronunciation like she-yen/see-yen/shen can be captured and recognized correctly by me as a receiver. The problem is solved. 
 
@@ -47,7 +47,7 @@ Johnny is not my real name, but it is a name I would use when ordering a coffee
 
 Johnny, like many other Chinese international students, was too hurried on having his first English name to really be able to figure the meaning out first. Or it could be the reason that his home stay family was so arrogant to give him this sarcastic English name. Anyway, the source of this name remains mysterious. On the other hand, Johnny is very satisfied with his English name. He likes it so much that he rarely tells his friends his original Chinese name. Obviously his intention failed and people came up with a nickname for him, ‘jie ni gui’(a Chinese name for Squirtle from Pokemon) for how ‘jie ni’ is similar to ‘Johnny’ in terms of pronunciation and how Johnny behaved like a turtle. 
 
-<div class='figureImage' style="width:15em;float: left;margin-right:1.2em;" > <img src="/img/highschool.jpg"/> </div>
+<div class='figureImage' style="width:15em;float: left;margin-right:1.2em;" > <img src="/img/highschool.webp"/> </div>
 
 Although many Chinese parents hold unrealistic expectations on foreign education to turn their naughty kids into elites magically, it turns out that it does not work, at least the public school is not that magical. Being an international student is very stressful and isolated. Gaming was the most relaxing moment for me. I met Johnny through gaming. Johnny is very impressive to me on his gaming skills. He seemed to be born for gaming, and he was very good at predicting opponent players’ move. There is a special term called game sense/awareness to describe this talent. 
 I played games with Johnny and many other friends among which Bill and Tony are another ones. Johnny, Bill, and Tony were the three giants on ‘Dota’ among the group, but Johnny was more capable of that. Johnny was a master on ‘Dota’, ‘League of Legends’, ‘World of Warcraft’, ‘Counter Strike: Global Offensive’, ‘Starcraft’, you name it. 

content/blog/my-first-blog-post.md

@@ -2,10 +2,10 @@
 templateKey: BlogPost
 title: My First Blog Post
 date: 2019-10-20T18:33:45.012Z
-lastModified: 2025-07-27T09:25:05.000Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: For testing purpose.
 featuredPost: false
-featuredImage: /img/hp.jpg
+featuredImage: /img/hp.webp
 tags:
   - testing
   - boring

content/blog/my-first-vue-web-app-part-1.md

@@ -2,11 +2,11 @@
 templateKey: BlogPost
 title: 'My First Vue Web App: Difficulties and Things I Wish I Knew, Part 1'
 date: 2019-11-06T21:59:10.643Z
-lastModified: 2026-05-08T07:05:41.351Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: My decision branch tree on dilemmas when developing my first Vue app.
 featuredPost: false
 featuredImage: >-
-  /img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-1-image1.png
+  /img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-1-image1.webp
 tags:
   - Vue
   - JavaScript
@@ -151,7 +151,7 @@ documentations.</span>
   large communities. Vue is becoming trendy but the community is
   smaller.</span>
 
-![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-1-image1.png)
+![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-1-image1.webp)
 
 <span dir="ltr">To conclude, Vue was slightly ahead on the evaluation
 and I eventually decided to use Nuxt.js which is framework of Vue.js for

content/blog/my-first-vue-web-app-part-2.md

@@ -2,7 +2,7 @@
 templateKey: BlogPost
 title: 'My First Vue Web App: Difficulties and Things I Wish I Knew, Part 2'
 date: 2019-11-08T02:06:51.406Z
-lastModified: 2025-07-31T05:33:41.000Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: Mistakes I made.
 featuredPost: false
 tags:
@@ -17,13 +17,13 @@ In this section, I want to talk about some mistakes I made for my first Vue app.
 
 Linter is actually the best tool I have ever used for JavaScript developers. A linter is a static code analysis tool that can help me to avoid style and syntax errors. It was especially useful for me when I was not familiar with JS syntax during my first Vue project. As a result, I strictly followed the linting tool I was using and became over reliant on it. The direct result was that my development speed was restricted. The linter is not as smart as a real person, and some rules are just of personal preference of the author. Some styles that can be useful are considered as unsafe such as the reuse of variable name in different scopes. But the reuse of name it is not necessarily dangerous because the constraint of scopes/namespaces. Strictly following the rules of linter, I wasted quite a lot of time on things that are less important, like thinking of unique name for the same kind of variables in different scopes. By reading the official documentation of Eslint, I realized that this was not the right way to use linter. The correct way is to configure and customize the linting rules for your project and preference. And indeed, there is actually a configuration file for the linter and you can even disable rules using inline comments. Linter is a tool to facilitate development, not to restrict.
 
-![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-2-image2.png)
+![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-2-image2.webp)
 
 **Mistake 2: Abuse of Vuex**
 
 My first vue app requires some heavy computations, and the whole app contains many states, some are internal states that are for calculations and some are external states used for UI rendering. To manage such a large number states and data flows, I used the centralized data management store called Vuex. All of the internal and external states were stored in Vuex store. Same for the computations. Vuex are very useful on debugging and tracking down state mutations. However, tracking large amounts of data made the debugging tool laggy and the frequent freezes gave me instincts that something went wrong. When I read the documentation of Vue, I eventually caught the mistake. It is all about the reactivity system of Vue. Vue implements an observer pattern that appends a watcher for every component instance including the store of Vuex.
 
-![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-2-image1.png)
+![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-2-image1.webp)
 
 All of the states/properties in the Vuex store will be modified by Vue to be able to notify the watcher because all of the states in the store will be ‘touched’ during the renderings and computations. If a large amount of states send the change-notifications, the app will be very slow. It is important to minify the number of notifications. That requires the separation of internal states and external states. To reach the goal, I extracted the computation logic into an OOP class, and read only external states that are necessary for rendering from the object instance instantiated by the class into Vuex store.  It turned out that only a small fraction of states were related UI display so they were read into Vuex store. The problem is solved. This mistake reminds me that Vue is a rendering framework and heavy data processing should be separated from it.
 

content/blog/my-first-vue-web-app-part-3.md

@@ -2,7 +2,7 @@
 templateKey: BlogPost
 title: 'My First Vue Web App: Difficulties and Things I Wish I Knew, Part 3'
 date: 2019-11-08T18:48:19.565Z
-lastModified: 2025-07-27T08:54:45.000Z
+lastModified: 2026-05-23T08:25:05.381Z
 description: Tackling difficulties.
 featuredPost: false
 tags:
@@ -58,7 +58,7 @@ I have to admit it is quite hacky here. But the intuition behind it is that the
 
 However, this is not the happy ending of the story. You might have guessed the problem as an experienced developer. The profiling tool from google chrome browser illustrates the problem. The below graph is a timeline recording result of the whole loading process. 7430 ms out of 8563 ms is used for idling.
 
-![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-3-image1.png)
+![](/img/my-first-vue-web-app-difficulties-and-things-i-wish-i-knew-part-3-image1.webp)
 
 Initially, I thought I misunderstood the word ‘idle’ as a non-native English speaker. After I checked the dictionary and confirmed the meaning of ‘idle’, I realized that something went wrong. Remember that I broke my loading process into \~200 steps and if each step takes \~30 ms break, then the idling time is roughly 6000 ms. That means ~90% of the loading time is wasted. I could compromise for better performance or for better animation, but there would be a trade-off anyway. To really overcome the issue, I have to use true parallelism, the Web Worker.
 

content/blog/nodejs-certification-challenge.md

@@ -2,10 +2,10 @@
 templateKey: BlogPost
 title: A Node.js certification challenge
 date: 2020-11-11T22:59:39.935Z
-lastModified: 2025-07-27T08:54:45.000Z
+lastModified: 2026-05-23T08:25:05.385Z
 description: To challenge myself.
 featuredPost: false
-featuredImage: /img/nodejs-challenge.png
+featuredImage: /img/nodejs-challenge.webp
 tags:
   - challenge
   - node.js
@@ -72,7 +72,7 @@ What is next? I plan to practice with my node.js knowledge to deliver a simple m
 
 The exam is a little bit different from my imagination but I passed the exam anyway. My certificate ID number is LF-mt7qrutu8t. My original expected time to complete this challenge is 21 days and I spent 18 days on this challenge. Achievement reached: node.js learner; look at my badge earned below, what a wonderful reward for this gameplay!
 
-![](/img/nodejs-challenge.png)
+![](/img/nodejs-challenge.webp)
 
 At this point, I decide to continue my node.js study together with mongo DB and express.js on coursera.com. 
 
@@ -82,4 +82,4 @@ At this point, I decide to continue my node.js study together with mongo DB and
 
 Completed my Coursera express.js backend course.
 
-![](/img/express-certificate.png)
+![](/img/express-certificate.webp)

content/blog/note-taking-app-2.md

@@ -2,10 +2,10 @@
 templateKey: BlogPost
 title: Note Taking App 2
 date: 2021-11-13T20:04:38.538Z
-lastModified: 2025-07-27T08:54:45.000Z
+lastModified: 2026-05-23T08:25:05.385Z
 description: It matters.
 featuredPost: false
-featuredImage: /img/note-taking-app-2-20211113135526.png
+featuredImage: /img/note-taking-app-2-20211113135526.webp
 tags: []
 ---
 ## Background
@@ -18,7 +18,7 @@ The most touching point of this app is that your note is future proof. Even if o
 
 Besides, Obsidian is more open to the world, it has a large community that can help and contribute to various community plugins. I even created my own plugin to support my style of zettelkasten system.
 
-![](/img/note-taking-app-2-20211113135526.png)
+![](/img/note-taking-app-2-20211113135526.webp)
 
 ## Notion
 
@@ -30,14 +30,14 @@ Another disadvantage is that Notion rarely listen to the community or they are n
 
 As a result, I mainly use Notion for task management, I have a task database where I can insert all todos into it and track their states.
 
-![](/img/note-taking-app-2-20211113145514.png)
+![](/img/note-taking-app-2-20211113145514.webp)
 
 ## Why it matters
 
 In short, for the dopamine rewards.
 
 A right note-taking app can help to reward you when doing note taking with dopamine factor. This reinforce learning model can then help me to solidify this note-taking behavior into a habit.
 
-![](/img/dopamine-factor.png)
+![](/img/dopamine-factor.webp)
 
 Another example is that with Notion's database, I am more motivated to take actions when I visualize how many todos and ideas I have.