Frontend
Make Your Hyperlink Underlines Look Better: text-underline-offset
By default, underlines sit very close to the text, and some designers dislike this style. Personally, I don’t think it looks very good either.
Frontend
2026
2025
Frontend
Why Web Design Shouldn’t Chase Pixel Perfect
Only pay attention to Pixel Perfect when it really matters; otherwise, it often leads to a lose-lose situation.
Frontend
Let’s Write Colors with CSS HSL! (And a Better Way)
In web development, the traditional HEX and RGB color notations are widely used, but they are not very readable or intuitive, and their capabilities are limited in wider color spaces such as P3. HSL (Hue, Saturation, Lightness) provides a more intuitive way to define colors, making it easier for developers to understand and adjust them. By describing colors through the three dimensions of hue, saturation, and lightness, HSL makes color adjustment more human-friendly. In design systems in particular, HSL can better represent lightness variations in a color palette.
2024
Frontend
The reasons to avoid setting line-height to 1 and using ellipsis whenever possible
This article discusses why it's not advisable to set the line-height to 1 in web design, as well as the linguistic issues encountered when using ellipsis.
Frontend
Recent Updates
I’d like to share some experiments I plan to undertake as I approach nearly a decade in software development and front-end engineering. Having navigated through the vibrant and diverse era of front-end development, my experiences have significantly shaped my understanding of the ongoing changes in the field. Although I've already shared numerous articles on my blog, there are still many insights and ideas I wish to convey that remain unwritten.
2023
Frontend
與程式有關的遊戲三選 (1) – A=B
本篇為 IT 2023 鐵人賽文章：與程式有關的遊戲三選 (1) – A=B
Frontend
More than Semantic HTML
身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。
Frontend
Writing Newsletter Websites with Astro
Discussing the requirements for building a newsletter website, Astro was ultimately chosen to create the website. This article will explore the comparison with other static site generators and the reasons for choosing Astro.
2022
Frontend
2022 Advent Of Code: Cathode-Ray Tube
Suddenly, I thought about recording interesting topics, especially those that can be visualized. If I have extra energy, I will write notes for each day's topic. Anyway, I find the Advent Of Code Day10 problem quite interesting, so I'll record it first.
Frontend
HTML and CSS can solve many problems, but JavaScript is also very important.
In 2017, I read an article that mainly shared various typesetting techniques achievable with HTML/CSS. Upon first reading, I resonated deeply with it and learned many techniques that I was not familiar with at the time. I highly recommend everyone to take a look. Although JavaScript can solve almost all problems, from the perspective of accessibility design, performance, and bundle size, it is better to use CSS if possible. However, "try not to use JS" does not mean completely avoiding JS, as there are still some differences between the two. In this article, I will reread the aforementioned article and point out some areas that I believe can be improved.
Frontend
Pseudo-classes used for styling
When using CSS for layout, we process it with corresponding CSS based on styles. Sometimes, we even need to use JavaScript to accomplish it. However, in CSS, there are actually many pseudo-classes that can simplify CSS if used properly. This can also reduce unnecessary JavaScript implementations and is no longer limited to only a few supported browsers as it used to be.
Frontend
Rewrite the entire blog using Next.js
Recorded the process and thoughts of migrating the blog from Gatsby to Next.js. Includes the technologies used and implementation details, etc.
Frontend
Exploring the form and data retrieval mechanism of remix
Although some people may think, "Oh no, another framework," Remix does have its unique features. If you have gone through the documentation and followed the most obvious,
Frontend
Some tricks about reading files in node.js.
In node.js, it is common to use the fs module to manipulate files. However, when dealing with high throughput scenarios, any IO-related operations should be handled with caution.
Frontend
Integrate Sentry's Web Vitals into Slack.
Many websites now incorporate the process of measuring Web Vitals to identify areas for improvement through quantifiable metrics. However, what fewer people know is that Sentry actually introduced statistical functionality for Web Vitals earlier, which allows developers to track various indicators such as LCP, FP, and CLS. This enables developers to view relevant charts in the backend, and even includes average values, which is quite thoughtful.
Frontend
From a Frontend Perspective: SwiftUI
From a UI perspective, the challenges faced in frontend and mobile development are similar, despite the differences in languages or development approaches used. We all need to create a user-friendly interface. As such, we will encounter similar problems such as component-based development, state management, data flow, and managing side effects (API or IO), which I find to be a great area for mutual learning.
2021
Frontend
Drawing lines with WebGL is even more difficult than I imagined.
WebGL does not support lines with a lineWidth greater than 1. Even Three.js does not have support for adjustable line widths. Therefore, I started working on my own implementation for lines.
Frontend
How to determine if the owners of two domains are the same?
When browsing the web, we often use subdomains to differentiate the content of services. However, determining whether a website is a subdomain or if two websites are SameSite is not as straightforward as it may seem.
Frontend
Change from prismjs to shiki
shiki is a package that provides syntax highlighting for code. It is relatively newer and less well-known compared to other packages like highlightjs and prismjs. The main reason is that it supports a wider range of languages and is easier to configure. It also comes with a good variety of built-in themes, making it convenient to replace prismjs.
Frontend
Several use cases of useMemo
In frontend applications, it is common to encounter a situation where the displayed value is calculated by combining other values or undergoes some calculation before being inserted into the UI. Usually, this type of processing can be simplified using `useMemo` to reduce code complexity.
Frontend
Frontend Anxiety Disorder
This article is only intended to express personal opinions and thoughts and has no intention of criticizing industry peers. I believe that the frontend field (referring to web development) is gradually maturing, with frontend frameworks adopting a component-based approach and responsive mechanisms, combined with framework-specific syntax, development practices, and philosophies, which can handle most usage scenarios.
Frontend
Reading Temperature and Humidity with Arduino via Web Serial API
Google Chrome 89 introduces the Web Serial API, which allows external devices to interact directly through browser APIs, including USB devices or Bluetooth devices with a serial interface. This enables the browser to communicate directly with hardware.
Frontend
Application of form tag with formData
This article introduces how form tags are handled behind browsers, and how formData can be used in JavaScript to simplify form manipulation
Frontend
HTML together to understand which form-data
Forms are a common application in web pages, not only can you transfer plain text, but also upload files. However, because the behavior of form is different from other methods of transmission, there are sometimes doubts and misunderstandings. This article tries to understand the ins and outs of the specification, to understand what the form does in the end, and how forms differ from other transport methods, and finally mention what the HTML does behind the form tag.
Frontend
Deep Understanding of Svelte (2) — Analyzing Svelte Generating Code
From the core concept of Svelte, Svelte wants to get as much information as possible from the compilation process and reduce overhead in dynamic. In the previous article, we explained how Svelte works from compiling to generating code. Today, look at how the code generated by Svelte works.
Frontend
In-depth understanding of Svelte (1) — Svelte Compilation Process
In order to generate the final code, Svelte has to compile the components once to obtain the necessary information. The compilation process from Svelte to the build code will go through several stages, and in this article, we will cover them one by one
Frontend
4 Reasons to Learn Svelte in 2022
Svelte's attention climbed year by year. This article highlights a few reasons to learn about Svelte in 2022, and will also talk about the shortcomings of Svelte use.
Frontend
An in-depth understanding of Svelte (0) — What is an Abstract Syntax Tree?
This series of articles explores the implementation of Svelte principles, hoping to give readers a deeper understanding of Svelte's compilation mechanism and code generation. Because the Svelte compilation process involves code parsing, this article discusses what an abstract syntax tree is, and further describes the role and importance of an abstract syntax tree.
2020
Frontend
Hotwire and Turbolinks
Turbolinks is a JavaScript package that is usually used with Ruby on Rails (it can be used as a library alone), mainly by fetching HTML to avoid the cost of re-sending the request and CSS. In fact, “no need to use JavaScript” is not entirely correct, JavaScript is still there, but it's done for you in the library, so you can develop it without writing JavaScript.
Frontend
linaria - CSS-in-JS solution that doesn't require runtime
linaria is a library that emphasizes css-in-js without runtime. It can use a syntax similar to styled-components, but generates CSS at compile time, thereby reducing overhead for dynamically modifying styles
Frontend
Thinking and Using Scenarios for SSR
When the browser crawls a web page, the crawler crawls the HTML content of the page to generate the content, and it will also cache it in the database and update it regularly. That is, if SSR is not implemented, the html file itself is blank, and the actual page will not be visible until JavaScript is parsed and executed
Frontend
Data Visualization — Taiwan Sexual Assault Statistics
This time I wanted to implement this topic because I saw a relatively aligned relationship with the news and the data, just to say that Svelte itself can also be promoted, and he was implemented while conceived.
Frontend
Vue ref syntax sugar with Svelte
Vue author Youyu Creek recently proposed an RFC, which is about the syntax of ref declarations that can be further simplified with JavaScript label statement. This syntax is like Svelte, record your own ideas here.
Frontend
Svelte Summit 2020 notes and experience
Svelte is one of my favorite front-end frameworks, the simple syntax and flexibility, the author's philosophy, as well as the use of various animations, cutscenes have made me quite like, and I have written a few articles about their views on Svelte before. The Svelte Summit was held on October 18, 2020, as the pandemic was broadcast live online, with a total of 7 hours and 17 speeches. Here we record some interesting speeches and my own experience.
Frontend
iOS mousedown event triggering issue
iOS does not work correctly with some versions of mousedown, but mousedown will still work correctly on other devices (like Android, etc.).
Frontend
Explanation of regular expression to add a number to comma
In general, there is usually a need to display the currency, is to convert the original number into a human-friendly format, in the front end we can achieve it in several ways, such as Intl.numberFormat or regular expressions.
Frontend
Rethinking About Cookies and CORS
Talking about the release of the Samesite policy, I think again about cookies and CORS. Are cookies really dripping? Let's take a look at some of the scenarios.
Frontend
React 17 update focus - useEffect's clean up function timing changes
React 17 released with no major updates or new features, but useEffect's clean up timing has changed quietly. This article does not explain each update one by one, but rather a note of what is worth keeping track of in the article.
Frontend
Should frontend learn CS?
As the browser can do more and more, the scope of front-end can be covered more and wider, just the term front-end, you may have multiple branches
Frontend
Technology always comes from humanity (Svelte Society: Questions Questions Notes)
When I'm working on the new library, I also study the person (not all of it, or an npm install will take a lifetime to look at). Because the creator of technology is human, the creator of the library is human, the creator of the framework is human, and everyone is flesh and blood.
Frontend
Write a JSON parser from scratch (2)
In part1, we mentioned how to write a JSON parser and implement the function of parsing strings. Next, we add other functions. (In fact, as long as you know the fundamentals, the rest of the function implementations are just as follows)
Frontend
Write a JSON parser from scratch (1)
Today we'll start with parsing JSON and explain how to build a JSON parser from scratch. Due to the simple architecture of JSON, it is a good practice.
Frontend
How to do smooth scroll with one line of CSS
Just after I was happy to implement smooth-scroll with svelte, I realized that I could actually achieve it with one line of CSS
Frontend
Svelte Notes (2): Compiler is more clever than you mess
Run to see the Svelte source code today，Familiar with the architecture while taking a look at any simple issue can be used to practice。
Frontend
Rollup error encountered with Svelte with apollo-boost
The mechanism of the feeling rollup itself is not so complete webpack
Frontend
Svelte Notes (1) - No Silver Bullet
But the way Svelte is also destinated to encounter some problems，The main thing is that Svelte can not help you do too many things in the runtime。
Frontend
Svelte — What made me meet you like this
The first time I saw Svelte, I thought, “Well... is it a new front-end framework yet?” , holding such a mood did not care too much. It began to arouge my curiosity after seeing more and more blog posts and a lot of websites being used later.
Frontend
Chrome Cookie Policy Adjustments and Reflections
Starting with Chrome 80+, samesite in cookies is set to lax by default. We'll start with the definition of samesite and what it's useful for, and reflections on cookies, what I think about the whole thing.
2019
Frontend
Deep Front-End Development
Before hoping to be able to put some things on the front-end development record, but has not been started to do it, taking advantage of the Ironman race all sorted out in one breath. The series is divided into several parts, and there is a chance to continue to write about it in the future. Introduction of JavaScript Basics JavaScript with ECMAScript...
Frontend
migrate react-transition-group
react-transition-group upgrade from v1 to v4 is more important: after the upgrade CSstransitionGroup component was removed leave becomes exit transitionName becomes classenterTimeout...
Frontend
class component to hooks
Instead of introducing the API for react-hooks, this article tries to explore the reasons behind the design from a design perspective. It is divided into sections: The Difference between Function Component and Class Component How to Reuse Similar Logic in Components for High-order Components...
Frontend
Implementing the pin to bottom component via overflow-anchor
This article is done by looking at Implementing a pin-to-bottom scrolling element with only CSS, and explains how to use JavaScript. Now the more often the page appears, the scroll is positioned to the bottom each time new content is added. Like Twitch...
Frontend
Safer Request Headers - Fetch Metadata Request Headers
One day while developing a page, to check that the header fields are correct, open the development tools and see a few more suspicious headers in the request: network. Have you noticed something suspicious? A closer look to find out how there are three to Sec-Fetch...
Frontend
RequestidLecallBack - Make good use of free time
Many web pages have a variety of scripts to be executed, of course, there will be priority, such as the more important: rendering the UI, registering relevant interactive events, calling the API to fetch data, etc., are high-priority tasks, such as relatively unimportant tasks: Analytic script, lazy loading, initialization comparison Unimportant events. How to count Idle...
Frontend
New way to cancel requests - AbortController
In the front-end, we can mainly send requests in two ways: XHR and Fetch. XHR is from, um... That had an API a long time ago. However, because it is troublesome to set up, it is often wrapped into higher-level APIs, such as Jquery getJSON, axios, RxJS ajaxObservable...
Frontend
Dealings with cookies with CORS
CORS and cookies on the front end is a very important problem, but most of the time in development, because the domain of the front and back end is often the same, so rarely to care for these problems. Or just ask the backend to be Access-Control-Allow-Origin...
2018
2017
Frontend
Analysis of Array.sort
Array.sort analysis This article is not talking about things to note in Javascript's native sort. For example, the default sort method will convert the value to String and sort according to the char code, so the above result will appear. Today we're going to explore the implementation behind Javascript sort
Frontend
How to design user friendly table
Recognize the fact that table is not used as a brilliant visual, recently there is a need to use tables frequently in the background, how to design a good table for users is a challenge, especially in the case of a large number of data pens and many fields, users are easily attracted to additional elements. Actually for rendering data on, table...
Frontend
React16 Highlights
react finally released v16，In fact, the introduction of the official blog is quite complete (and pleasing to the eye)。 This article serves as notes and consolidation, streamlining some of the details. ComponentDidPatch (error, info) react16's brightest part, adding errorBoundary functionality to ensure that the life cycle...
Frontend
Front-end interview experience
Finally, time to organize the recent interview process. Summarize some of the things that we see: Usually, company interviews only test Javascript familiarity, mostly about algorithms or interpreting prototype chains, etc., rarely examines DOM or Event operations. Almost without CSS, even if there is simply a basic question such as class and ID priority. No interview exam HTML...
Frontend
Talking about several APIs in ramda
ramda is a very useful library. If you have heard of lodash or underscore, you can think of ramda as functional programming lodash. Their API has many similarities, except that ramda has FP functions, any API...
Frontend
IT iron man to help finish the game experience
Today is the last day of the Ironman race, I feel that the last part of the end of my harvest is not very good, and there are many parts that are not fully introduced because of the relationship between time.
Frontend
Highly identical typesetting solution
In front-end pages, we often come across layouts that require the same height. The most intuitive way to do this is to set all elements of the container to float or inline-block. float and inline-block If you use float typesetting，Not only to stretch the parent element container (clearfix)，But also for child elements set margin...
2016
Frontend
CSS Variable vs SASS Variable
Before writing an article about their own idea of css variable，Originally not held much expectations for this attribute，Own used to SASS variables also feel like this CSS variable but like an awkward system，But if you think so people，You can refer to this article
Frontend
Expecting PostCSS
From SASS to PostCSS about a year ago, PostCSS began to fling in the front-end ecosystem, nothing more than the so-called preprocessor features, highly customized their own plugin, the first to use cssnext function, but also with a variety of construction tools (gulp, webpack...
Frontend
Thought on
Semantics, Class Naming, Event Propagation