Go Struct Tag and reflect
When interacting with MongoDB, I encountered unfamiliar syntax in Struct fields. This article explores why Go Struct Tags exist and the problems they solve.
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.
If you browse through Shadcn's component set, you'll find extensive use of a helper function cn, which uses twMerge(clsx(inputs)).
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`.
Minecraft is one of the world's most famous sandbox games. This article explores the use of different technologies (AWS EC2, Docker) to set up a MC server.
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.
Search engines rely on the `<a>` tags in HTML documents to understand the relationships between pages and to score them accordingly.
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.
I was asked about a SPA I created and its poor image loading experience. I shared all my thoughts, but lacked confidence in my answers.
Due to HTTP being stateless, users need to re-validate on each login action. A solution is for the server to create a session upon request.
Few tutorials cover how to build a complete project. This is how I would build a Vue project from scratch in 2025!
The previous series discussed creating a simple CRUD App with Express.js using MVC. This time, connect the backend to a local MySQL.
When using packages, one often wonders about the general process of managing package development. So I write the process of publish a TS package
Express provides elegant APIs for handling requests, but having all code in one app.js is not ideal. Utilizing MVC architecture for better maintainability.
Express.js is the closest framework to frontend, ideal for full-stack engineers to quickly engage with both fields. Let's build a simple in-memory todo backend
TypeScript `Object.keys` returning `string[]` for object. Let's explores the reasons and provides solutions for different scenarios.
"How to write a GitHub profile" is like "How developers create their business cards." Profile is the first impression.
Let's build a cinema seats layout! It's an interesting Frontend problem that required a comprehensive understanding to solve.
Real-world web pages rarely require CSS Grid for special visuals. This article helps deepen understanding of CSS Grid through real-world cases.
CORS (Cross-Origin Resource Sharing) is a mechanism that determines whether a web page can access resources from other origins.
This time, I describe how to solve the problem by breaking down the FizzBuzz. It covers everything from basic solutions to advance you might need to aware.
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.
I previously wrote an article about the built-in data structure in ES6 JavaScript: Map. This time, let's discuss WeakMap and how it differs from Map.
Browsers began to introduce Web Components related APIs and standards, but I never had the chance to use this technology in practice.
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?
There is a data structure in JavaScript ES6 similar to objects that I have never fully understood. — Map. Let's compare objects with Map.
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.
To keep page content within reasonable limits, a fixed-size container is often needed. Unique layouts have emerged using CSS Grid for more flexibility.
"the cost of adding dark mode" inevitably increases costs more than expected, but using the right approach from the start can avoid many issues.
While managing this blog, I gradually developed the habit of "pushing new progress no matter how busy I am," forcing myself to refine my thoughts.
How to effectively conduct code reviews? This article aims to explore how to perform code reviews and improve overall code quality.
In the development field, much of the work involves structuring information, so I find it fitting to call myself a "🌵 Software Gardener."
Browser engine prefixes were used to allow developers to implement new CSS features before support. But the need for prefixes has decreased.
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.
I first heard the term CSS Container Queries a year or two ago. As web evolves, this technology will be a key piece for future RWD web development.
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've encountered very user-unfriendly Tailwind projects. Some anti-patterns can be easily avoided early on, but become huge issues as the project scales.
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?
Manual testing has issues like unstable results and is time-consuming. Let’s try using Lighthouse CI for automated performance checks!
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?
Zod is a schema declaration and validation library led by TypeScript. The purpose of Zod is to easily write runtime data validation.
Recently reading about Goals, Problem, Solutions in Stay SasSy made me realize this is how I break down problems at work!
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.
Recently faced with many issues of maintaining legacy code, documenting the dilemmas and solutions in rewriting legacy systems.
Developers' "failures" transferring knowledge are not due to laziness. Instead, [pressures] create a complex tension between performance and learning goals.
As the complexity of development increases, the term Monorepo frequently appears, To clarify my understanding of Monorepo, I wrote this post.
For those with no prior knowledge of web pages, introducing the concept of "UI componentization." Is a piece of a puzzle, a building block, a gear...
Design tokens are a way to manage design properties and values for building UI components. It is essential for anyone involved with design systems.
Meetings are an art and a vital soft skill for team. Poorly structured meetings can impact individual and team productivity, especially in remote work.
Recently, the company purchased design-related courses to improve collaboration efficiency through design research. I plan to document my notes and thoughts.
I wrote nearly a hundred E2E tests and aim to solidify my knowledge while helping my team quickly adapt to the E2E Cypress testing project.
Developers have mixed opinions about CSS; some find it simple, others find it hard to master. This article summarizes why CSS is both loved and hated.
The nature of developers' work puts us on the front lines alongside AI, and GitHub Copilot has significantly boosted my productivity and learning efficiency.
The longer the wait, the more likely users will drop off. Optimistic UI emphasizes immediate, optimistic feedback.
How many sizes of web pages do I need to create? Share why you should use fewer breakpoints to create a responsive web page.
By giving web elements relative relationships instead of absolute values. Using CSS Variables for relative `z-index` values, which is an elegant method!
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.
Revisiting military life after two years may not bring about significant changes in life, it has allowed me to appreciate the value of freedom.
HTML natively supports data submission via HTML forms. Let’s explore how to create accessible and semantic input forms.
Errors in programs are inevitable, and JavaScript's try...catch syntax can handle error situations, making errors easier to understand and manage.
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.
Control flow is one of the essential concepts in programming languages. Besides using if and else, JavaScript offers the conditional (ternary) operator.
In JavaScript, functions can use any number of parameters and arguments. If a parameter has no corresponding argument, it becomes undefined.
Utilizing ES6's enhanced object literals in JavaScript can simplify code snippets and even dynamically compute properties within objects!
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.
For decorative purposes, images are needed to display headings. I wondered if "putting images inside headings" is compliant with HTML.
A summary of three key insights gained from a year as an online teaching assistant at Hexschool, along with advice for students and teachers.
Images are essential elements that enrich web content. Understanding how to improve them is the most cost-effective choice for website performance.
"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
Content in responsive web pages flows like water, adapting to the browser's size. The solution is to "find the elements exceeding the browser width.
Metrics are values designed to measure website experience. This article challenges to explain all Google’s web experience metrics
Understanding the box model is essential for learning more web layout techniques. This article breaks down the CSS box model
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.
Explains the difference between "expressions" and "statements". Expressions produce a value, while statements perform actions.
If you're familiar with writing native CSS, learning Tailwind will be a breeze for you. Tailwind is the most popular and widely used CSS framework.
Destructuring allows quick access to array or object data, making it a common syntax sugar. It simplifies code and renames extracted data for clarity.
By learning the Spread and Rest operators introduced, you can write the same code more elegantly. Let's explore their uses through animations and real examples.
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!
The concepts of pass by value and pass by reference. This tutorial uses JavaScript with diagrams to help you understand their differences.
functions that cause changes affecting the rest of the program, leading to unnecessary side effects that make the code unpredictable and hard to understand.
JavaScript arrow functions are a new syntax introduced in ES6. In this article, we will learn how to use arrow functions.
Records some potential issues I’ve noticed while reviewing code... There are no absolute rules, but there are common considerations to be aware of.
Most of the time, you won’t want to use "loose equality"; try using "strict equality" to write your code more rigorously and accurately
If you need more than 3 levels of nesting, you've messed up and should consider refactoring your code. Learn how to use guard clauses for better readability.
To optimize the loading order of scripts, Explains why to use the built-in HTML `defer` and `async` attributes.
Creating a search box from scratch, allowing input and matching existing data to display relevant content, practical exercise for JavaScript beginners.
A counter is a basic exercise commonly seen in various frameworks, showcasing minimal functionality of any app. Let's recreate it using native JavaScript.
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.
Todo lists are common exercises that simulate various scenarios and problems encountered when manipulating data.
setTimeout or setInterval are often used to simulate asynchronous execution in practice. This article will detail their underlying principles and usage.
HTML elements can have their own attributes. Data attributes are a formal way to store data in HTML elements, allowing JavaScript and CSS to access the data.
Manipulate web pages requires understanding the DOM. This article quickly teaches you how to programmatically modify, access, edit, and listen to the DOM.
Learn the optional chaining syntax to safely access nested object properties without causing errors, even if those properties do not exist.
Mobile devices account for over half of modern internet traffic. The demand for websites that adapt to various devices has surged, leading to RWD.
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!
Good documentation is easy to write, maintain. Article covers four types of documentation and tips for organizing ideas, inspired by Daniele Procida's talk.
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.