Forem: WT Shek

I quitted many times, until this...

WT Shek — Fri, 27 Jun 2025 20:13:53 +0000

I’ve been building software for years now. But I always build for work, for learning or for (unsuccessful) side projects.

Every side projects started the same way. I did market research, analyze competitors and convince myself that there is a gap or whatever reason it worths trying. Then I spend weeks building only to lose steam halfway.

It felt like shooting arrows in the dark.

This time I built something that I actually need and it changes everything.

The problem that I need to solve

Last month, my partner and I got frustrated with managing our expenses. We want to keep track of how much we spend our individual and collective expenses and also how to split.

There are solutions already for sure. But they are either too simple or too expensive and complex that includes tons of features that we don’t need.

Why paid for something we don’t need? I can build it in a day or two.

So I did.

The difference was night and day

This time, I know exactly what I want to build and all the decisions were made effortlessly.

Before that I would struggle with the UI design, the database and everything because I want to do it right, because I don’t know how it would change in the future. Because I don’t feel the problem.

This time, I just choose the UI that I want and because this problem has been bothering me, I want to ship it quick so I choose to build in the fastest way I can, not the best way.

The result? We solve the problem.

Clarity changes everything

That's the power of clarity. When you truly understand the problem you're solving—not from research, but from living it—motivation becomes automatic.

You keep going when you're stuck because you know exactly why what you're doing matters. Every line of code has purpose. Every feature solves a real frustration you experience.

The obstacles don't disappear, but your reason for overcoming them becomes unshakeable.

The Lesson

I'm not saying you should only build for yourself. But building something you genuinely need teaches you what clarity feels like. It shows you the difference between solving a real problem and building something you think might be useful.

Once you know that feeling, you can recognize it in other projects. You can dig deeper into user research, spend more time understanding the problem.

The goal isn't to be your own customer forever. It's to never again build something without truly understanding why it needs to exist.

When you have that clarity, everything else becomes easier.

SEO Optimization Checklist for Coding Your Website

WT Shek — Sat, 11 Jan 2025 21:58:51 +0000

SEO is important for a websites. To improve SEO, not only do we need excellent content, but also we need to provide good user experience and allow the search engine to understand our website easily. Here is the checklist for coding a SEO optimised website

TLDR:

Is your website structure simple and flat?
Have you included correct meta tag?
Did you create a XML sitemap?
Did you create a the robot.txt file?
Did you add hreflang and canonical information?
Did you create schema markup?
Did you code your image tag properly?
How is your core web vitals?

Is your website structure simple and flat?

When building your website, it is ideal to have a clear picture of how your website structures. Using a flat structure is beneficial to SEO and user experience in many folds.

It is easier to crawl by the search engines, provides stronger link equity and user can find the web pages faster because they are closer to the homepage.

Planning ahead can also avoid orphan page which is not linked by any other page.

Have you use the correct meta tag?

What is meta tag?
Meta tag is a piece of code place in the <head></head> that provide search engine informations about your web page

Some common meta tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Specifies the character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures responsive design on mobile -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Improves compatibility with Internet Explorer -->

    <!-- SEO Meta Tags -->
    <meta name="description" content="A detailed guide on the best travel destinations and tips."> <!-- Page description -->
    <meta name="keywords" content="travel, destinations, tips, blog"> <!-- Keywords for search engines (less relevant now) -->
    <meta name="author" content="Your Name"> <!-- Author of the webpage -->

    <!-- Social Media Meta Tags (Open Graph Protocol) -->
    <meta property="og:title" content="Best Travel Blog - Explore Destinations">
    <meta property="og:description" content="Discover the best travel tips and top destinations.">
    <meta property="og:image" content="https://example.com/image.jpg"> <!-- Thumbnail image for sharing -->
    <meta property="og:url" content="https://example.com/travel-blog">
    <meta property="og:type" content="website">
    <title>Best Travel Blog</title>
</head>
<body>
    <h1>Welcome to the Best Travel Blog</h1>
</body>
</html>

Did you create a XML sitemap?

Sitemap can be defferentiate into 2 types, one is in XML format which allows search engine to crawl your website more easily.

Example XML Sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://example.com/</loc>
        <lastmod>2025-01-10</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://example.com/about</loc>
        <lastmod>2025-01-08</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

Another is in human readable form that users can understand and navigate your website more fast and easy. Normally footer can serve the same function

Example:

Did you create a the robot.txt file?

Robots.txt is a plain text file that is placed on the root directory of your website. It provides instructions to the search engine on how to crawl your website.

It specifies which part of your website/ resources should or should not be crawled.

Example of robot.txt

# Block all crawlers from accessing the admin area
User-agent: *
Disallow: /admin/

# Allow Googlebot to access the entire site
User-agent: Googlebot
Disallow:

# Prevent all crawlers from accessing specific files
User-agent: *
Disallow: /private-info.html
Disallow: /temp/

# Provide a link to the sitemap
Sitemap: https://example.com/sitemap.xml

Did you add hreflang and canonical information ?

If your site is multilingual, it is best to add hreflang and canonical tags, so that search engine would know these pages with similar content are variants.

Example:

<link rel="canonical" href="https://example.com/" />
<link rel="alternate" hreflang="en-us" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-ca" href="https://example.com/ca/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Did you create schema markup?

Schema markup, also known as structured data, is a piece of code that you added to your HTML files to help search engine understand your content.

Remeber the recipes or product carousel on the top or right of Google search result you see when you’re searching? This is generated from the schema markup.

There are various type of markup, like product markup, article markup or orgnisation markup.

Here is an example of product markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Smartphone XYZ",
  "image": "https://example.com/product-image.jpg",
  "description": "A high-performance smartphone with 128GB storage.",
  "brand": {
    "@type": "Brand",
    "name": "TechBrand"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "499.99",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/smartphone-xyz/"
  }
}
</script>

Did you code your image tag properly?

When it comes to the image, there is a lot to talk about. We focus the performance aspect in the next section. Here we look at the tag itself.

Here is the most basic img tag should look like

# include alt, width and height
<img src="example.jpg" alt="An example image" width="600" height="400">

You should use proper rel attribute if necessary

rel values	usage
noopener	used when linking to external sites to improve security and privacy
noreferrer	sed when linking to external sites to improve security and privacy
nofollow	tell search engines not to follow the link for SEO purposes, preventing the passing of link equity
sponsored	indicates that a link is paid or sponsored

How is your core web vitals?

Website performance is one of the core metrics for ranking. Google search engine uses Core Web Vitals (CWV) to measure how fast and how good your website user experience are. It consists of 3 metrics LCP, INP and CLS

Here is the standard suggested by Google

To measure your Core Web Vitals score, you can use Lighthouse built in the Chrom Devtools and PageSpeed Insight provided by Google.

To improve your score, here are some techniques you can consider:

Minify CSS, Javascript
Rendering image with the correct size
Use webp format for image
Preloading critique assets
Lazyloading when possible
Use CDN, cache

Above are some of the things to consider when building a SEO optimised. If there is anything missed, comment down belows!

How to make sure that your code match the design?

WT Shek — Sun, 06 Mar 2022 02:10:34 +0000

Sometimes programmer loss track of the CSS properties, especially the margin and padding. Yet the UI designers are always too smart to spot the difference.

In my last week of work, I got my ticket (Jira ticket) sending back twice because my code didn’t match the design. For me, it looked the same. But somehow the designer caught the minor difference.

So I asked them, how or what software do you use to compare the difference? In turns out, they are using simply Figma and Photoshop to overlay the screenshot of the final product I made on top of the design.

But, as the developer, we don’t always has access to edit Figma, so I need to find other solution. Here is the Perfect Pixel Chrome plugin! It allows to overlay the a photo on top of the current website. The difference can be found instantly by the developer without sending the ticket back and forth and slowing down the development process.

To use the plugin, first you need to have a screenshot of your design. Figma has the export function to export the design directly.

First select the layer, scroll down to the bottom of the design bar and you will find the export button.

Then you add image to the plugin. Then it is done, you can now move around the image and experiment with it through the control panel.

By the laying on image on top of the website, the difference is easily spot. Just like this:

But make sure that the window size of your website is the same as your design. For example if the design is 1920 x 1080, then do make sure that your screen size is also 1920 x 1080. You can also use the inspector change the ration accordingly.

Thanks to Perfect Pixel, we as frontend developer could make less trouble for the UI and QA team!

Subscribe to the newsletter to receive the knowledge I have learnt in work each week!

How to enhance your web app performance? And More!

WT Shek — Sat, 26 Feb 2022 12:03:23 +0000

Hey guys. How does your week going? As usual, there are lots of problem we face in week. Problems make us grow and learn more. And I am here to share what I have learnt this during my work. Learn together bit by bit!

Why does my style does not applied even though it is correctly set?

It is one of the most irritating problem I guess because it is so small and trivial. Yet it literally spent me (and the other) 2 days and still not figuring it out.

Here is the answer. Code Splitting

The framework we use in the project is Preact and Preact Router and webkit browser. And here is what the doc says:

"Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an async loader, which returns a lightweight wrapper component that handles code splitting seamlessly.

Under investigation, we found that the style is applied after we turn off and on the style in the dev tool. So the style is there, but not correctly rendered.

To solve this we simply moved it out the routes folder and avoid the default code splitting done by Preact.

Here is another similar problem that may interest you:

https://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes

Why vscode isn’t suggesting the correct intellisense?

The problem occur when I am using CRS with typescript and cypress for testing, instead of jest, which ships together with CRS. Under the hood, cypress uses chai, but in the test file, eslint keep linting the jest syntax instead of syntax, which is annoying.

The fix is to have different tsconfig file.

// tsconfig.json
// exclude the test (unit test), spec (integration test)
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["cypress"]
  },
  "include": ["src", "node_modules/cypress"],
  "exclude": ["**/*.test.tsx"]
}


// tsconfig.cypress.json
// include only test related file
{
  "extends": "tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "noEmit": false,
    "baseUrl": "./node_modules"
  },
  "include": [
    "./node_modules/cypress",
    "src/**/*.spec.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx"
  ]
}

How to make a the your web app lightening fast?

Here are two great articles on this topic.

The Ultimate Guide to Fixing JavaScript Performance Problems in Browser DevTools

Apply instant loading with the PRPL pattern

In addition, I created a checklist on how to enhance the website's performance. Click here to find it!

If you want to know what real issues I faced in work. Subscribe to the newsletter here!