Monitor Website Performance by Self-Host Lighthouse Server
Self-hosting Lighthouse allows for long-term tracking of best practices. As it enhances the team's awareness regarding code quality over time.
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.
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.
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`.
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!
Revisiting military life after two years may not bring about significant changes in life, it has allowed me to appreciate the value of freedom.
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.
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!
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.
CodePen is an online platform where you can build web, see results instantly, and share easily. It's very beginner-friendly.
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.
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.