How Jamstack Solves the Problems
To understand what problems the Jamstack architecture solves, we need to review the history of web evolution, emphasizing pre-generated static pages.
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.
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.
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 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.
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.
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.