ASCII, Unicode, UTF-8? How do computers process text?
I realized that I don't fully understand how strings work in Go. Explored documentation to understand the history and evolution of text encoding.
I realized that I don't fully understand how strings work in Go. Explored documentation to understand the history and evolution of text encoding.
When interacting with MongoDB, I encountered unfamiliar syntax in Struct fields. This article explores why Go Struct Tags exist and the problems they solve.
Symmetric encryption uses the same key for encryption and decryption by both parties, posing risks such as key sharing and interception
In Go, there are two common data structures for "sequence data": Array and Slice. They are similar in syntax, but the differences in behavior.
My recent work involves migrating GitLab to GitHub, Fortunately, GitLab has had a feature called Mirroring for a long time.
I've always had a fear of TypeScript generics with all the <T>, <U>, extends. It seems daunting, but generics are essential for specific problems.
The ever-changing complexity of frontend UI leads to various challenges in testing tools and methods. The difficulties along the way.
Understand the Iterator Protocol and Generator, and arrays benefit from the new iterator helper for lazy evaluation.
Have you wondered why arrays can be iterated (for...of) but objects cannot? Iterables rely on the Iterator Protocol to implement iterable data structures.
A coding style that emphasizes composing functions rather than handling specific data, defining functions without explicit parameters.
I'm not a mathematician and I'm not very interested in category theory, but it profoundly relates to advanced concepts of Functional Programming.
Pursuing shorter wait times and faster feedback is crucial. However, rushing to present information may not be optimal.
Understanding "Polymorphism" is like "doing something, but the way it is done varies" For example, various "shapes" can "calculate area,"
The first time you see a Go Receiver function, you might wonder what this strange syntax is, with parameters accepted before the function name?
Go's design has all values passed by value; to achieve passing by reference effect, Pointer must be used explicitly.
TanStack Table is a awesome library that at first glance may seem overly complex but actually saves countless hours of time.
Using TypeScript to ensure type safety in large frontend projects is common, but API communication can introduce vulnerabilities that compromise type safety.
By integrating Figma MCP and Shadcn MCP Server, maybe we can precisely build frontend interfaces through chat with AI.
Rendering is performance bottleneck in web, especially in dashboard or large data lists. It skips the performance burden by "only rendering visible items."
AI solves clear contextual problems like LeetCode with remarkable efficiency and accuracy. But in real situations, AI struggles. MCP would help.
We discussed issues and solutions related to fetching external data. Explore building a better frontend data fetching experience through TanStack Query.
TypeScript type definition files are often created as a global type.ts file, but this can cause confusion as projects grow.
"Writing code is like building a church; once it's done, we start praying." and feature flags are a great technique to manage the risks.
When there's a change of only 10 lines, one can carefully check the comments; with 1000 lines, everything is LGTM (Looks Good to Me)!
If you are considering building a Tailwind-based component library, this article is worth a read. It examines the current frontend environment and challenges.
E2E testing often mentions two options: Cypress and Playwright, both of which I've tried. While I prefer Playwright overall, there are more factors to consider.
Recently reviewing some testing concepts, I encountered the testing pyramid from Mike Cohn’s book “Succeeding with Agile: Software Development Using Scrum.”
Recently, whether using AI Vibe Coding or switching functions at work, using git stash feels inconvenient. Let's learn how to use Git Worktree effectively.
You may know that Vue components communicate through props down and events up or Scoped Slots to pass info. Another approach is defineExpose.
JWT stands for JSON Web Token, a standard based on RFC 751 that is used to transmit JSON objects between two entities.
Authentication and Authorization are two concepts in access control, representing the questions: Who are you? What are you allowed to do?
To understand what problems the Jamstack architecture solves, we need to review the history of web evolution, emphasizing pre-generated static pages.
I found the my online resume a bit off, resulting in a lack of indication to scroll down. To achieve a fade-in style using CSS pseudo elements.
Initially inspired by the Glitch website's draggable features, I created a DOM API-based solution instead of using additional packages.
Communicate with databases via SQL can lead to development efficiency and security issues. Usually we choose a suitable ORM for better development experience.
When I first in backend development, I struggled to effectively reproduce services for other developers until I found Docker.
Interacting with RDB through SQL, SQL Builder, and ORM. Understanding their differences helps us make better choices for project needs.
Recently, I frequently use Taiwan's most famous job platform: 104 Job Bank, where the personal data menu experience has potential issues worth exploring.
Here's a guide on "Disagree and Commit". Encourage discussion, Set decision deadlines, Avoid criticism after decisions are made.
To clarify my feelings of Gaming impotence, I recalled a book recommendation, "Finite and Infinite Games," which discusses two game concepts.
When creating multilingual websites, many focus on translation accuracy or switching locale experience, often overlooking the crucial SEO setting: `hreflang`.
Self-hosting Lighthouse allows for long-term tracking of best practices. As it enhances the team's awareness regarding code quality over time.
Maintenance becomes challenging. How to ensure your servers are working properly? Uptime Kuma is a free monitoring tool that can help.
There are several browser storage solutions you must know, with key differences in capacity, expiration settings, interaction with the server, and more.
While discussing test questions in interviews with friends, I encountered the view that it’s better to leave blanks than to guess.
As the number of blog posts increases, the pressure on static generation rises, specifically about 10 minutes spent generating images for previews.
Recently, while trying out n8n, I encountered quite a few troubles. However, after resolving the issues, I felt that they were small problems.
The website's content are recorded in Git. This decision has its pros and cons, As the project matures, I've decided to separate the two.
Restarting the entire AI process can be very time-consuming and costly. We can add human feedback, modifying prompts repeatedly until we are satisfied.
n8n is a low-code / no-code solution that helps anyone quickly implement automation. This tutorial demonstrates through a simple integration.
I explored using Mermaid to generate diagrams. It's a tool that supports various types of diagrams, allowing us to focus on content rather than chart creation.
Recently, I researched using Slidev for presentations, a web-based tool integrating various packages to create presentations easily, built on Vite + Vue3.
The HTML `<details>` and `<summary>` syntax helps achieve accordion quickly, along with interpolate-size and transition-behavior for smooth animations.
Few tutorials cover how to build a complete project. This is how I would build a Vue project from scratch in 2025!
TypeScript `Object.keys` returning `string[]` for object. Let's explores the reasons and provides solutions for different scenarios.
CORS (Cross-Origin Resource Sharing) is a mechanism that determines whether a web page can access resources from other origins.
Regardless, one should never easily trust user requests to prevent CSRF. I've recently found my knowledge in this area lacking, so I'm catching up.
The summary is to never easily trust user input to prevent XSS to the greatest extent. Recently, I found my knowledge in this area lacking.
I found many common functions scattered throughout the project. So, I took the opportunity to organize a unified structural rule for the team to use.
Vite does not perform Tree Shake during development, leading to a lot of unused code being bundled, severely affecting the development experience.
Recently, I've set higher expectations for my programming, and testing has become a crucial area. But does a working program mean testing is unnecessary?
I often just see problems and try to solve them. But if a project is on fire and the manager sets an unrealistic timeline, how do you explain it?
Recent projects have involved a complete visual design overhaul, leading to facing the challenge of how to synchronize the management of product visuals.
"the cost of adding dark mode" inevitably increases costs more than expected, but using the right approach from the start can avoid many issues.
Git allows us to track changes to any file and easily revert to any version, but it struggles with large files. Git LFS is an extension to solve this issue.
Git and GitHub have become mainstream in the industry. This article explores built-in features on GitHub that can enhance code review efficiency.
Recently, I added an automatic package update feature to the new Nx Monorepo project via GitHub Action, hoping for a more automated way to update dependencies.
Recently, a project I maintain planning to introduce Dark Mode, but I believe it's not a cost-effective choice. This article discusses why I think so.
While refactoring a project, I encountered type issues that I initially ignored using `@ts-ignore` or `@ts-expect-error`.
In maintaining projects of varying scales, to Understand the pros and cons of different Git branching strategies to select suitable ones for development.
I only replace items when they are worn out. It wasn't until my frequently used membrane keyboard broke that I started looking for a new keyboard.
To avoid hard-coded values and ensure clarity, I document some findings. The conclusion is to use as const for data management.
Why do most websites look similar today, even in experience? Guides readers through web development history to conclude that "boring UI is good UX."
As a front-end engineer, my recent work experience has shown me that many development issues still revolve around the appearance.
AI will not leave our lives; it will only become more common, impacting our lives. What can humans do that AI cannot? What will future jobs look like?
Give your site a custom search powered by WebAssembly. With the release of Pagefind 1.0, I replaced my custom fuse.js search with Pagefind.
Recently, I used Shadcn for Vue to build web UI. It's a customizable component library based on Tailwind, allowing quick creation of web interfaces.
JavaScript has try...catch syntax for capturing errors. How can we ensure the type of errors thrown in TypeScript?
TDD Test-Driven Development is a development methodology where tests are written before the implementation code.
Patience, communication, and thinking outside the box are the virtues I believe a software engineer should have. Do you agree with this idea?
JSON-LD is a way to embed additional data to describe web content. This article shares my experience and how to verify JSON-LD is interpreted correctly.
Design tokens are a way to manage design properties and values for building UI components. It is essential for anyone involved with design systems.
Recently, the company purchased design-related courses to improve collaboration efficiency through design research. I plan to document my notes and thoughts.
Fetching and displaying data is routine for front-end developers, but as more states arise, projects can become chaotic.
This article describes recent experiences in maintaining legacy code, where various validation methods need to be unified, avoiding more legacy code.
This series will continuously update for 30 days, helping you get started with it! Today, we understand the difference between dynamic and static websites.
Through this series of articles, I will continuously update for 30 days to help you get started! Learning Astro will be a new trend in front-end development.
HTML natively supports data submission via HTML forms. Let’s explore how to create accessible and semantic input forms.
NPM is a package manager that is essential in JS development environment. NPM is like a platform where you can find many ready-made actors.
JavaScript's null and undefined have similar meanings of "nothing," but they fundamentally differ. This article clarifies their relationship.
It's often taught that using multiple h1 tags is wrong, but is that really the case? I delve into various perspectives and findings.
useEffect is a fundamental Hook in React. To truly learn it, you need a basic understanding of how React works.
I enjoy using automation tools for error checking and formatting in projects. This article guides you on setting up ESLint and Prettier in Astro.
Since I am a frontend developer, why not create a portfolio website myself? Creating my own portfolio is an essential experience and a very interesting journey.
Astro, as a SSG, is very suitable for building static web pages. I will use my own portfolio as a case study to teach you to create a real website.
A summary of three key insights gained from a year as an online teaching assistant at Hexschool, along with advice for students and teachers.
"What is Ajax and Why Not Ajaj?" This question has in my mind for a long time. After some research, I wrote this article about the history of Ajax
Why do I want to manage a website? It's essential to think this through before creating one. Building and managing a website are entirely different skills.
Hoppscotch is an online tool that allows you to quickly test APIs. Familiarizing yourself with tools can help avoid common issues.
React Hook is a feature added in React 16.8 that allows you to use React features without writing a class. Explains the differences between Hooks and methods.
Currying transforms functions with multiple parameters into a series of functions that take a single parameter, enhancing reusability and debuggability.
OBS stands for Open Broadcaster Software, a popular open-source recording software. This guide helps you set up OBS quickly from installation to recording.
A summary of common issues encountered while reviewing assignments and how to address them. This article gathers key points to help you write better HTML.
CodePen is an online platform where you can build web, see results instantly, and share easily. It's very beginner-friendly.
This article summarizes the common issues faced when reviewing assignments and how to address them, helping you avoid common pitfalls!
functions that cause changes affecting the rest of the program, leading to unnecessary side effects that make the code unpredictable and hard to understand.
Records some potential issues I’ve noticed while reviewing code... There are no absolute rules, but there are common considerations to be aware of.
Debounce and throttle are essential patterns in frontend performance, helping to improve user experience and reduce resource wastage for developers.
Understand how single-threaded JavaScript works behind the scenes, the nuances of concurrent event handling, and demystify complex terminology.
setTimeout or setInterval are often used to simulate asynchronous execution in practice. This article will detail their underlying principles and usage.
Manipulate web pages requires understanding the DOM. This article quickly teaches you how to programmatically modify, access, edit, and listen to the DOM.
In the field of front-end development, some commonly heard preprocessors, such as Sass, Less, and Stylus, what are they? Why do they exist?
BEM is a convention for CSS. BEM CSS is simple, effective, and has battletested, making it suitable as a beginner's first CSS management method.
Here are some small tools and websites that front-end developers may not have thought of, gathered to enhance the website development experience!
We Creating a chaotic mess that needs organizing. This article shares how our team established a system for file management and backup.
Fonts are the soul of the layout; good fonts can better express the emotions and contexts between words! Collects practical and reliable font websites.