Using React Three Fiber, I brought my real room into the browser—turning physical objects into an interactive table of contents, and using spatial memory to tell the story of my life and work over the past few years.
Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.
You should only focus on pixel perfection when it truly matters; otherwise, it often results in a lose-lose situation.
In web development, while traditional HEX and RGB color notations are widely used, they suffer from poor readability and a lack of intuition, and their expressiveness is limited in wide-gamut color spaces like P3. HSL (Hue, Saturation, Lightness) offers a more intuitive way to define colors, making it much easier for developers to understand and tweak them. By describing colors across three dimensions—hue, saturation, and lightness—HSL makes color adjustments far more human-friendly. This is especially true in design systems, where HSL does a much better job representing brightness variations across a color palette.
This article explores why setting line-height to 1 is discouraged in web design, along with the linguistic challenges encountered when using text ellipsis.
I'd like to share a few experiments I'm planning to try next. I'm about to enter my tenth year in software development and frontend. Having lived through the chaotic "Warring States" period of frontend frameworks has been invaluable for understanding subsequent shifts and trends. Although I've shared many articles on my blog, there's still a lot I haven't written about yet.
This article is part of the 2023 iT Ironman series: 3 Programming-Related Games (1) – A=B.
As front-end engineers, while we don't need to memorize every single HTML tag by heart, we still need a solid understanding of common tags and their use cases. But what is the actual purpose of using semantic tags? I've noticed many articles only scratch the surface—debating which tag belongs where. As a result, web pages might look rich with various tags, yet the user experience sees no corresponding improvement.
An exploration of the requirements for building a newsletter website and why I ultimately chose Astro. This article compares Astro with other static site generators and shares the reasons behind my final decision.
It suddenly occurred to me that I should document the challenges I found interesting, especially those that can be visualized. If I have extra energy, I'll write notes for each day's puzzle. In any case, I found the Advent of Code Day 10 problem quite fun, so I'm writing it down first.
Back in 2017, I read an article that shared various layout techniques achievable using only HTML/CSS. At the time, I resonated strongly with it and learned many techniques I wasn't familiar with yet. It's a great read. While JavaScript can solve almost any problem, solving things with CSS is definitely better from the perspectives of accessibility, performance, and bundle size. However, avoiding JS as much as possible doesn't mean never using it at all; there is a difference. In this article, I revisit the aforementioned post and point out some areas that I think could be improved.
When laying out web pages with CSS, we apply corresponding styles as needed, sometimes even turning to JavaScript to get the job done. However, CSS actually offers many pseudo-classes that, when used well, can simplify your CSS and eliminate unnecessary JavaScript implementations—and unlike in the past, they are no longer supported by only a handful of browsers.
Documenting the process and reflections on migrating my blog from Gatsby to Next.js, including the tech stack used, implementation details, and more.
While many people might think, "Oh no, not another framework," Remix definitely has its unique strengths. If you've browsed through the documentation and followed its progress, the most obvious is...
Working with files via the fs module is a very common task in Node.js. However, in high-throughput scenarios, you should be extremely careful with any I/O operations.
Many websites nowadays implement workflows to measure Web Vitals to identify areas for improvement through quantified metrics. However, what fewer people know is that Sentry previously also launched a Web Vitals feature...
From a UI perspective, frontend and mobile development face similar challenges. Although the languages and development approaches may differ, we both need to build intuitive user interfaces. Naturally, both worlds encounter analogous problems—component-driven development, state management, data flow, handling side effects (API calls or I/O), and so on. To me, this makes it a great space for cross-pollination and learning from each other.
WebGL does not support lines with a lineWidth greater than 1, and even Three.js lacks built-in support for adjustable line widths. This led to building a custom line implementation from scratch.
When browsing the web, we often distinguish services by subdomain. However, telling whether a site is a subdomain or whether two sites are SameSite is not as simple as it seems.
shiki is a syntax highlighting package that is relatively newer and less well-known compared to alternatives like highlightjs and prismjs. Because it supports more languages, is easier to configure, and comes with plenty of built-in themes, I went ahead and replaced my existing prismjs setup with it.
In frontend applications, we often encounter scenarios where a value displayed on the screen is computed from other values, or undergoes some calculation before being rendered. Typically, this kind of processing can be simplified using useMemo.
This article merely expresses my personal viewpoints and reflections, with no intention of criticizing fellow industry professionals. I believe the current frontend domain (referring specifically to web development here) is gradually maturing. With frontend frameworks adopting the core philosophy of componentization and reactive mechanisms, paired with framework-specific syntax, development methodologies, and philosophies, they can handle the vast majority of use cases.
Google Chrome 89 introduced the Web Serial API, allowing external devices—including USB devices and Bluetooth devices with a Serial interface—to interact directly via browser APIs. This allows browsers to communicate directly with hardware.
This article introduces how browsers handle the form tag under the hood and how to use FormData in JavaScript to simplify form operations.
Forms are a ubiquitous part of the web, capable not only of transmitting plain text but also enabling file uploads. However, because form behavior differs somewhat from other data transfer methods, it often causes confusion and misunderstandings. By diving into the specifications to trace the full context, this article explores what happens behind the scenes of forms, how Form Data differs from other transport mechanisms, and what the HTML form tag actually does under the hood.
Svelte's core philosophy is to extract as much necessary information as possible during the compilation process to minimize runtime overhead. The previous article explained how Svelte works from compilation to code generation; today, we'll examine how the code generated by Svelte actually works.
To generate the final code, Svelte must compile components once to gather the necessary information. Svelte's process from compilation to code generation mainly passes through several stages, which will be introduced one by one in this article.
Interest in Svelte has been climbing year after year. This article summarizes several reasons why Svelte is worth learning in 2022, while also discussing some of its drawbacks.
This series of articles focuses on exploring the inner workings and implementation of Svelte, aiming to give readers a deeper understanding of Svelte's compilation mechanism and code generation. Since Svelte's compilation process involves parsing code, this article will primarily discuss what an Abstract Syntax Tree (AST) is and elaborate on its role and importance.
Turbolinks is a JavaScript package typically paired with Ruby on Rails (though it can also be used as a standalone library). It primarily fetches HTML and swaps it in directly to avoid the overhead of full page reloads and re-requesting CSS. Saying "no JavaScript is required" isn't entirely accurate—JavaScript is still there under the hood, but handled by the library so you don't have to write it yourself during development.
linaria is a CSS-in-JS library that emphasizes zero runtime. It lets you use syntax similar to styled-components while generating CSS at compile time, thereby reducing the overhead of dynamically updating styles.
When web crawlers scrape a webpage, they crawl the HTML content to generate search results, caching a copy in their database that is periodically updated. This means that without SSR, the HTML file itself is completely blank, and the actual page cannot be seen until the JavaScript is parsed and executed.
I decided to work on this project after seeing related news and noticing the data was relatively complete. Thinking it was also a great opportunity to promote Svelte, I designed and built it along the way.
Vue creator Evan You recently proposed an RFC suggesting that ref declarations could be further simplified using JavaScript's labeled statements. This syntax is virtually identical to Svelte's. Here, I record my thoughts on it.
Svelte is one of my favorite frontend frameworks. I really love its simple syntax, flexibility, the creator's philosophy, and how animations and transitions are handled. I've previously written several posts sharing my thoughts on Svelte. Svelte Summit was held on October 18, 2020. Due to the pandemic, it was streamed entirely online, spanning 7 hours and 17 talks. Here, I'm documenting a few talks I found particularly interesting along with my own takeaways.
In certain versions of iOS, mousedown handlers do not work properly, although on other devices (like Android, etc.), mousedown continues to function as expected.
When displaying currency, there is often a need to format raw numbers into a more human-readable form. In front-end development, we can achieve this in several ways, such as using Intl.NumberFormat or regular expressions.
Reflections on Cookies and CORS following the release of the SameSite policy. Are Cookies really foolproof? Let's examine a few cases.
The release of React 17 doesn't bring major updates or any new features, but the execution timing of the useEffect cleanup function has quietly changed. This article won't cover every single update, but will instead highlight the more noteworthy changes from the announcement.
As browsers become capable of doing more and more, the scope of front-end development has also expanded significantly. The term "front-end" alone can branch into multiple specialized areas.
When researching a new library, I also research the person behind it (not all of them, of course, or a single npm install would take a lifetime to inspect). That's because the creators of technology, libraries, and frameworks are human beings—flesh and blood, with real feelings.
In Part 1, we covered how to write a JSON parser and implemented string parsing. Next, we'll fill in the rest of the functions. (In fact, once you understand the core principles, implementing the remaining functions is just following the recipe.)
Today, starting with JSON parsing, we will explain how to build a JSON parser from scratch. Since JSON has a simple structure, it makes for great practice.
Just as I was happily implementing smooth scroll in Svelte, I discovered that it can actually be done with a single line of CSS.
Today I browsed through Svelte's source code to get familiar with its architecture, and decided to see if there were any simple issues I could pick up for practice.
It feels like Rollup's mechanisms aren't quite as comprehensive as Webpack's yet
However, the path Svelte has chosen is bound to run into certain issues—the most prominent being that Svelte can't do much for you at runtime.
When I first saw Svelte, I thought to myself, "Hmm... yet another front-end framework?", and didn't pay much attention. It wasn't until I started seeing more and more blog posts introducing it and many websites adopting it that my curiosity was piqued.
Starting from Chrome 80+, the default value of the `samesite` attribute for Cookies is set to `lax`. Starting from the definition of `samesite`, its purpose, and reflections on Cookies themselves, we will explore my thoughts on the whole matter.
I had always wanted to document my thoughts and knowledge on frontend development, but never got around to doing it until the iT Home Ironman Contest, where I finally organized everything in one go. This series is divided into several sections, and I plan to continue writing if opportunities arise. JavaScript Fundamentals: A Brief Overview of JavaScript and ECMAScript…
Here are a few key points when upgrading react-transition-group from v1 to v4: the CSSTransitionGroup component was removed, leave became exit, transitionName became classNames, transitionEnterTimeout...
Rather than introducing every React Hooks API one by one, this article explores the design philosophy behind them. It covers the differences between Function Components and Class Components, how to reuse logic across components, and an overview of higher-order components, render props, and mixins.
This article is a write-up based on reading "Implementing a pin-to-bottom scrolling element with only CSS," along with an introduction to doing it using JavaScript. It is increasingly common on modern websites to automatically scroll to the bottom whenever new content is added, such as in Twitch...
One day while developing a page, I opened DevTools to check whether the request header fields were correct and noticed a few suspicious extra headers. Did you notice anything unusual? Taking a closer look, why are there three headers starting with Sec-Fetch…
Many web pages have various scripts that need to be executed, and naturally they come with different priorities. More important tasks—such as rendering UI, registering interactive event listeners, and calling APIs to fetch data—are high-priority. Less important tasks include analytics scripts, lazy loading, and initializing non-essential events. But what exactly counts as idle...
In front-end development, there are mainly two ways to send requests: XHR and Fetch. XHR is an API that has been around since, well... a very long time ago. However, because configuring it is quite cumbersome, it was often wrapped into higher-level APIs like jQuery's getJSON, axios, RxJS's AjaxObservable...
CORS and cookies are crucial topics in front-end development. However, during development, the front end and back end often share the same domain, so we rarely pay much attention to these issues. Or we simply ask the backend developers to set Access-Control-Allow-Origin…
A Brief Analysis of Array.sort — This article is not about common native JavaScript sort pitfalls, such as the default string conversion and char code ordering causing unexpected results. Today, we're diving into the underlying implementation behind JavaScript's sort.
Recognize one fact: tables are meant for reading, not for flashy visuals. Recently, I've had frequent needs to use tables in admin dashboards. Designing a user-friendly table is a challenge, especially when dealing with large datasets and many columns...
React v16 is finally officially released! The official blog already provides a fairly comprehensive (and visually pleasing) introduction. This post serves as notes and a summary, condensing some of the details. 1. componentDidPatch(error, info) The standout feature of React 16 is the addition of Error Boundary functionality to ensure that errors during lifecycle...
I finally found time to write up my recent interview experiences. To summarize a few observations first: Most companies only test your familiarity with JavaScript, mostly around algorithms or explaining prototype chains, and rarely test DOM or event manipulation. They almost never test CSS, or at most just basic questions like class/ID specificity. No interview tested HTML…
Ramda is an exceptionally useful library. If you've heard of Lodash or Underscore, you can think of Ramda as the functional programming counterpart to Lodash. While their APIs share many similarities, the difference is that Ramda is inherently built for FP. If you omit arguments from any API, Ramda automatically...
Today marks the final day of the Ironman challenge. I feel like the ending was a bit rushed, and due to time constraints, quite a few topics weren't covered as thoroughly as I would have liked.
In front-end web development, we often encounter the need for equal-height layouts. The most intuitive approach is to set all elements within a container to float or inline-block. float and inline-block When using float for layouts, not only do you have to clear floats to expand the parent container (clearfix), but you also have to configure margins for child elements...
Previously, I wrote a post about my thoughts on CSS variables. Initially, I didn't have high expectations for this feature—being used to SASS variables, CSS variables felt like a clumsy system in comparison. But if you feel the same way, you might want to check out this article.
From Sass to PostCSS. About a year ago, PostCSS started gaining popularity across the front-end ecosystem, driven by its preprocessor capabilities, highly customizable plugins, early access to cssnext features, and seamless integration with build tools (Gulp, Webpack…
Semantics, class naming, and event propagation