Developer

TypeScript makes JavaScript even stronger with a strongly-typed system, which is a merit for developers. TypeScript checks our static code before running it. That is so called type safety. However, runtime safety is checking our code at runtime with real data. In runtime, TypeScript files are already compiled to JavaScript. So static type check is not available. It means: type safe does not mean runtime safe The post is divided into two parts....

The post is divided into two parts. If you want to read part 1 first, please go to here. As part 1 is about runtime validation. Part 2 will focus on use cases. I will use Nuxt3 as example. Here I have 3 use cases: page, route guard (Vue route) and API. Prerequisite Basic knowledge: JavaScript, TypeScript, Nuxt3, Vue3, zod Case 1: Page Validation Suppose we have a post list page with route: /posts?...

Prerequisite Basic knowledge: NPM, Hugo, JavaScript, shell script Pre-installed: VS Code, NPM CLI, Hugo CLI Intro Create a post using hugo CLI is a tedious work for me. Because I always create a post using archetype and placing it in nested folder. For example, when creating this post, I should type the command below in the terminal: hugo new --kind develop posts/_developer/create-hugo-post-with-npm-script The problem here is, I always forget how many kind of archetypes I already have, and what my folder structure looks like right now....

Basic knowledge: Hugo、shell、npm、git Preface I deployed my blog on GitHub Page formerly, a platform for static site providing by GitHub. But GitHub Page has some limitation when we are using free account, like we should keep our repository public. However, I want to set my blog repository as private. Since I have some draft post on it. Another reason is I do not want to expose all my blog content to public like an open source....

Basic Knowledge: CSS, HTML, JS, React Preface Tailwind provide dark mode to set dark theme style individually by adding keyword dark: in front of any CSS class: <div class="text-black dark:text-white"> <!-- ... --> </div> If we want to make a theme switcher, it seems feasible by using dark:. But it will be restricted to only TWO themes. Another disadvantage is, since we use dark: syntax in CSS class on HTML...

Prefix Here’s a little side note from Chapter 6 - Multithreaded Patterns in this book: Multithreaded JavaScript. In this chapter, introducing some multi-threaded patterns: Thread Pool Mutex Ring Buffers Actor Model Thread Pool The thread pool is a very popular pattern that is used in most multithreaded applications in some form or another. A thread pool is a collection of homogeneous worker threads that are each capable of carrying out...

I’ve upgraded my blog theme recently. In my best practice in development process, I prefer using gitflow to manage the code. It is one of popular version control workflow on the planet. And the FLOW looks like this: In almost one year, I am always git push my posts on main branch. But before I start upgraded my theme, I git checkout to develop branch. According to the chart above,...

One day, we got a mockup from designer. Then we start crafting the page. At first, we might work on making UI and UX of components. That’s the main part. E2E testing is not a concern at the moment. When developing, if we were luckily get the test case from QAs (or whoever wrote it), should we consider it when crafting our components? (And yeah only if we have enough...