Blog | Melin's Blog

2026

Cleverly Using CSS `var()` Variables to Implement Arbitrary Custom CSS Syntax

CSS custom properties are usually introduced as reusable values: But they are more powerful than that. A custom property can store almost any token sequence, including syntax th...
ES6 Template Strings in HTML Template Rendering

ES6 template strings, also called template literals, are one of those JavaScript features that feel small at first, then quietly remove a lot of friction from everyday UI work....
On a Sunday afternoon, while sitting in my study, I suddenly wondered: if an element, such as a `<label>` element, could respond to the state changes of a radio button or checkbox no matter where it is on the page, wouldn’t that make it possible to handle almost every click interaction on the page in one shot? That would be seriously awesome!

But is it actually that awesome? Let’s take a closer look. The Starting Point: Most Click Interactions Are State Toggles If we strip many common click interactions down to their...
Trying JavaScript `IntersectionObserver` to Link Headings and Navigation

Long documentation pages often need a table of contents that follows the reader. As the user scrolls, the navigation item for the current section should become active. The tradi...
It Turns Out the DOM Has a JavaScript API Called `toggleAttribute()`

For years, when I needed to work with DOM attributes, I reached for the familiar set: These APIs are everywhere. They are old, stable, and easy to remember. So I assumed that wa...
Several Subtle Differences Between Common DOM APIs With Overlapping Functionality

JavaScript’s DOM APIs often look interchangeable. In many cases, two methods can produce the same visible result, which makes it tempting to treat them as stylistic alternatives...
Screen.isExtended, getScreenDetails, and Multi-Display Development

Modern web apps are increasingly used in workspaces with more than one display: dashboards, trading terminals, presentation tools, support consoles, payment flows, and monitorin...
Why `keyCode` Is No Longer Recommended: Understanding `event.key` and `event.code`

By Zhang Xinxu. Adapted from the original article at zhangxinxu.com. Keyboard events look simple until you try to handle real-world input. For years, many JavaScript examples us...
Cleverly Using DOM APIs to Escape and Unescape HTML Characters

Escaping and unescaping HTML is one of those tasks that looks simple until you start thinking about every character, browser behavior, and execution environment. Most developers...
Three Ways to Import External CSS in Web Components

Shadow DOM gives Web Components one of their most useful superpowers: style isolation. A component can define its own markup and CSS without leaking styles into the page or bein...
How Can JavaScript Detect Whether the User Has Zoomed the Page?

Page zoom sounds simple until you try to detect it reliably. On desktop, users usually zoom with Ctrl + , Ctrl - , or the browser menu. On mobile, users pinch to zoom. Those two...
A Practical Guide to Converting HTML Strings into DOM Nodes

Converting an HTML string into real DOM nodes sounds simple, but the browser gives us several APIs with different tradeoffs. Some are fast, some are safer, some require a valid...
Using ffmpeg.wasm to Implement Multi-Audio and Video Compositing Entirely on the Front End

Front-end video generation sounds simple until audio enters the picture. If all you need is visual recording, the browser already gives you several options. canvas.captureStream...
Using `navigator.connection.downlink` to Measure Network Speed on the Front End

For feed-style products like Weibo, image lists are everywhere. On mobile, those images are often served as 2x or even 3x assets to preserve visual quality on high-density scree...
First Impressions of Vap, Tencent’s Open-Source Solution for Playing Cool Animations

A colleague recently mentioned Vap in our group chat. The description was simple: it can play flashy animation effects, and more importantly, it supports transparent animation b...
JS Video Decoding: An Out-of-the-Box Review of JSMpeg and Broadway

Last week, I tried Vap , a player that can use WebGL to decode and play videos, and wrote an article documenting the experience. Someone commented under that article: if all I w...
Safari Does Not Support Built-In Custom Elements: A Practical Compatibility Strategy

Based on Zhang Xinxu’s discussion of Safari’s Web Components limitations, with practical implementation examples from the demo code. Safari supports autonomous custom elements ,...
Understanding `Promise.all()`, `Promise.race()`, and `Promise.any()`

JavaScript gives us several ways to coordinate multiple asynchronous operations. Three of the most useful are Promise.all() , Promise.race() , and Promise.any() . They all accep...
Triggering a JavaScript `change` Event When Assigning `input.value`

In the browser, user interaction and JavaScript assignment are not treated the same way. When a user types, pastes, or drops text into an , the browser fires an input event. Whe...
Front-End News: `setHTML()` and `Element.startViewTransition()` Are Now Supported

Two DOM APIs quietly became much more interesting recently: Element.setHTML() and Element.startViewTransition() . The first gives the browser a native way to insert HTML while a...
Use the CSS `revert` Global Keyword to Restore an Element’s `display`

Small CSS details often cause the most confusing UI bugs. Here is a common front-end requirement: show only the first three list items by default, then reveal the remaining item...
Proxy Is for Proxies. What Is `Reflect` For?

JavaScript’s Proxy feels immediately useful: it lets you intercept property reads, writes, function calls, construction, and more. Reflect , at first glance, feels less dramatic...
Using Deprecated HTML `rel="import"` to Build Static Page Includes

HTML Imports are dead. No modern browser supports them as an official platform feature anymore, and that sounds like bad news. But for static HTML demos, documentation pages, an...
ogv.js: Making WebM Play on iPhone with JavaScript Decoding

Web video compatibility is usually simple until it is not. Most of the time, you reach for the native element, encode an MP4, and move on. But some real-world mobile browsers co...
When Should JavaScript `WeakMap` Be Used?

Most JavaScript applications can run perfectly well without WeakMap . That is part of what makes WeakMap easy to ignore. It is not a daily-use feature like Array.map() , Promise...
File Uploads Can Be Triggered Without Using an `input type="file"`

For a long time, file uploads on the web have meant one thing: an element with type="file" . It is simple, reliable, and still very capable. You can use accept to limit selectab...
Minimal JavaScript Clipboard Copying: From `execCommand()` to the Clipboard API

Copying text to the clipboard looks like a tiny feature until you need it to work reliably across browsers, old enterprise environments, local demos, and modern HTTPS applicatio...
Broaden Your Horizons: Web Development API Properties That Start With `current`

In web development, we often use familiar properties like target , src , style , or value . But scattered across browser APIs are several less obvious properties that start with...
Starting From `visibilitychange` Not Working in Safari

The visibilitychange event has been around for a long time. I first wrote about it back in 2012 in an article introducing the Page Visibility API. At the time, it felt like a cl...
Browsers Now Natively Support JSON Module Imports for Development

Original article by zhangxinxu. Source: https://www.zhangxinxu.com/wordpress/?p=12241. This adaptation preserves the original author, source, and links. For years, importing JSO...
Deep Dive Into JavaScript Randomness: `Math.random()` vs `crypto.getRandomValues()`

Random numbers show up everywhere in JavaScript: temporary IDs, animations, randomized UI effects, shuffling lists, lottery-style selection, tokens, UUIDs, encryption keys, and...
When Should JavaScript Tagged Templates Be Used?

JavaScript template strings are familiar to most developers: They make string interpolation readable and convenient. But JavaScript also has a more advanced form: tagged templat...
An Audio Player Component Built with howler.js

Originally published by zhangxinxu on March 15, 2022, under “JS Examples.” Source: Xin Space - Xin Life. Audio playback looks simple until you need a real player: playlist navig...
Detecting Font Loading Failure or Completion with the JavaScript FontFace API

Custom fonts can make an interface feel polished, but they also introduce a timing problem: the browser may render text before the font file has finished loading. When that happ...
A Deep Dive into JavaScript’s `new Function` Syntax

Most JavaScript developers rarely need new Function . In day-to-day frontend or Node.js work, a regular function or arrow function is usually clearer, safer, and easier to maint...
JS and Barcode Generation: A Practical Guide for the Web

Barcodes feel old compared with QR codes, but they still solve a useful problem: turning short pieces of structured text into simple, machine-readable graphics. With JavaScript,...
How to Prevent a Page From Restoring Its Previous Scroll Position After Refresh

Browsers try to be helpful. When a user refreshes a page normally, such as by clicking the refresh button or pressing F5 , the browser often restores the page to the same scroll...
How to Inherit Custom Elements and Extend Methods Across JavaScript Files

Web Components give us a native way to build reusable UI primitives. But once you start building more than one custom element, a practical question appears quickly: What should...
JS `replaceAll` and `matchAll` Usage Guide, Not a Misguide

String processing in JavaScript looks simple until user input, repeated matches, regular expressions, and captured groups enter the room. Two modern APIs help a lot here: - Stri...
Building a Feishu-Style `@` Mention Input Box with Plain JavaScript

A Feishu-style OKR input box looks simple from the outside: type @ , choose a person, insert a clean mention token, hover it for details, and press Enter to submit. Under the ho...

2025

Don’t get it mixed up, it’s not text; it’s the CSS font-size-adjust property

Learn how to use the CSS font-size-adjust property to improve font legibility across different fonts. This blog explains its benefits for responsive design and accessibility, with practical tips and examples.
Are you familiar with the purpose of the new with method in JavaScript Arrays?

Explore the new with method in JavaScript Arrays! Learn how this feature improves array manipulation, boosts code readability, and enhances performance with practical examples.
Introduction to the Broadcast Channel API: Enabling Broadcast Communication Across Web Page

Discover how the Broadcast Channel API enables seamless communication between browser tabs, windows, and iframes. Learn how to implement it for real-time data sharing in modern web applications. A must-read for frontend developers!
Introducing CSS @scope—it’s finally here!

Learn how the CSS @scope rule helps you limit the scope of styles to specific elements, improving maintainability and reducing conflicts in large projects. This guide is perfect for frontend developers looking to master scoped styling in modern web development.
Say goodbye to pointer-events: none and effectively disable with the HTML inert attribute

Learn how the HTML inert attribute disables interactions with elements, improving accessibility and user experience in modals and UI components. A must-read for frontend developers focused on optimizing web apps.

2024

Times have changed, and now it’s time to use the native popover attribute to create dropdowns

Discover how to create lightweight, accessible dropdowns using the native HTML popover attribute. This guide covers implementation, best practices, and tips for responsive, interactive menus without external libraries.
A New CSS Relative Color Syntax – Using from and calc()

Explore the new CSS relative color syntax using from and calc() to create dynamic and responsive color schemes. This guide explains how to leverage these features for flexible, context-aware designs that adapt to different screen sizes and user interactions.
Powerful JavaScript — How to Use JS to Access System Information such as Memory, CPU/GPU, Battery, and More

Learn how to use JavaScript to access critical system information like memory, CPU/GPU usage, battery status, and more. This guide provides practical examples and tips for frontend developers to monitor and optimize web performance based on real-time system data.
How to Display Slogans More Effectively - A Quick Guide to Understanding the text-wrap: balance CSS Property

Explore the text-wrap: balance property in CSS to create balanced and aesthetically pleasing text layouts. This guide explains how to use this property to improve readability and design consistency across your web pages.
Filling in the Gaps: The HTML nonce and popover attributes you might not know about

Understand the functionality of the HTML nonce and popover attributes and how they enhance security and user experience. This guide provides an in-depth look at how to use these attributes effectively in your web projects to prevent XSS attacks and create interactive UI elements.
The Good One For Performance Observer-elementtiming Attribute in HTML

Learn how to use the elementtiming attribute in HTML to measure key content loading performance. This guide explains its functionality and provides examples to help frontend developers optimize web page rendering and improve user experience.
Boost Page Loading Speed - Resource Loading Priorities in Web Pages

Optimize your web performance by understanding resource loading priorities in web pages. This guide covers how browsers prioritize loading scripts, styles, and images, offering tips for frontend developers to enhance site speed and user experience.
That’s right, Web pages can also keep the screen from turning off.

Discover the new Screen Wake Lock API that prevents screens from turning off while using web pages. Learn how to implement this feature to enhance user experience in web apps requiring continuous screen visibility.
Become an Image Processing Pro With SVG-4: Achieve text thinning or thickening effects using SVG instead of CSS

Master image processing with SVG by learning advanced techniques like filters, masks, and clipping paths. This guide offers practical examples and tips for frontend developers to create stunning visuals and dynamic web graphics.
Become an Image Processing Pro With SVG-3: Use the feMerge filter to replicate the visual effects of any DOM element’s style.

Master image processing with SVG by learning advanced techniques like filters, masks, and clipping paths. This guide offers practical examples and tips for frontend developers to create stunning visuals and dynamic web graphics.
Become an Image Processing Pro With SVG-2: Understanding the <feGaussianBlur> and <feDropShadow>

Master image processing with SVG by learning advanced techniques like filters, masks, and clipping paths. This guide offers practical examples and tips for frontend developers to create stunning visuals and dynamic web graphics.
Become an Image Processing Pro With SVG-1: Understanding the <feBlend> Element

Master image processing with SVG by learning advanced techniques like filters, masks, and clipping paths. This guide offers practical examples and tips for frontend developers to create stunning visuals and dynamic web graphics.
An Initial Experience with the Page-Level Visual Animations of the View Transitions API

Explore the View Transitions API for creating seamless page-level visual animations. This guide explains how to use this cutting-edge API to enhance user experience with smooth transitions, offering practical tips and examples for frontend developers.
A Simpler Way to Create Page Scroll Animations: Unlocking New CSS Scroll Animations

Discover a simpler approach to creating page scroll animations with the latest CSS scroll animation features. This guide explores how to implement smooth, engaging animations effortlessly, offering tips and examples for frontend developers to elevate web design.
Understanding Mathematical Functions in CSS: Creating animations using the round() function

Learn how to leverage mathematical functions in CSS, like calc(), min(), max(), and clamp(), to create dynamic and responsive designs. This guide offers practical examples and tips for frontend developers to enhance layout flexibility and efficiency.
Exploring the selectionchange Event in JavaScript: Notes from Practice

Explore the selectionchange event in JavaScript to detect and respond to text selection changes on a webpage. This guide provides examples and use cases for frontend developers to enhance interactivity and user experience.
Beyond the Grid: Exploring Use Cases for Subgrid in CSS Grid Layout

Discover the power of Subgrid in CSS Grid Layout to create more precise and nested designs. This guide explains how Subgrid works, its practical use cases, and tips for leveraging it to build flexible, responsive layouts.
Aligning Content in CSS: Introduction to Grid - Part 7

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Aligning Content in CSS: Introduction to Grid - Part 6

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Aligning Content in CSS: Introduction to Grid - Part 5

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Aligning Content in CSS: Introduction to Grid - Part 4

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Modern CSS: Create a modal popup without javascript

Learn how to create a fully functional modal using only CSS—no JavaScript required. This guide provides step-by-step instructions and best practices for frontend developers to build lightweight and accessible modals for modern web designs
Unlocking Dynamic Layouts and Smooth Animations in CSS:Introducing calc-size and interpolate-size

Explore the power of CSS properties calc-size and interpolate-size to create dynamic and responsive layouts. This guide explains their functionality with practical examples, helping frontend developers enhance design flexibility.
Aligning Content in CSS: Introduction to Grid - Part 3

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Aligning Content in CSS: Introduction to Grid - Part 2

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
Aligning Content in CSS: Introduction to Grid - Part 1

Master the fundamentals of CSS Grid with this comprehensive guide. Learn how to create flexible, responsive layouts using grid properties, practical examples, and best practices tailored for frontend developers.
How to Easily Create a Mosaic Effect on Images with Simple Web Methods

Learn how to create a stunning mosaic effect on images using CSS and JavaScript. This guide provides practical examples and tips for frontend developers to enhance their web design projects.
Exploring the Risks and Applications of the Top Layer Feature

Discover the applications and risks of the Top Layer feature in web development, including best practices for modals, pop-ups, and overlays.
Be a master--the CSS Text Custom Highlight API

Discover how to style text selections like never before with the CSS Text Custom Highlight API. This guide explains how to create custom highlights for search results, grammar corrections, and more, providing practical examples and tips for frontend developers to enhance user experience.
Using CSS transitions and animations, you can create animation effects even with display: none.

Learn how to create smooth animations with CSS transition-behavior. This guide covers its functionality, use cases, and best practices, helping frontend developers enhance user interactions effortlessly.
Differences Between Object.is and ===, Array .at() and Direct Indexing with [ ], and substring and slice

Uncover the subtle differences between JavaScript methods like Object.is vs. == and substring vs. slice in this comprehensive guide. Designed for frontend developers, this article explores how these methods compare values and manipulate strings, highlighting practical use cases and performance considerations. Perfect for anyone looking to deepen their JavaScript knowledge, this guide demystifies common comparisons to help you write cleaner, more effective code.
Understanding the Different Types of Light Source Filters in SVG

Learn how to bring depth and visual effects to your graphics with SVG light source filters. This guide explores the different types of light sources available in SVG—such as feDistantLight, fePointLight, and feSpotLight—and how they impact your designs. Perfect for frontend developers and designers, this tutorial breaks down each filter type with examples, making it easy to add realistic lighting effects to your SVG elements.
Aligning Content in CSS: How to Use the align-content Property Effectively

Discover how to create visually balanced layouts using the CSS align-content property. This guide explains how align-content works in flexbox and grid layouts, covering its practical applications for aligning rows within containers. Ideal for frontend developers looking to enhance their CSS layout skills, this tutorial provides examples and best practices to help you master this essential property.
Mastering Scroll Events: An Introduction to scrollend in JavaScript

Learn how to enhance user experience with the JavaScript scrollend event in this beginner-friendly guide. We’ll dive into how scrollend works, explore its practical applications, and cover essential tips to detect the end of scrolling accurately. Perfect for frontend developers looking to optimize web interactions, this tutorial provides hands-on examples to make your web content more dynamic and engaging.
Unlocking Image Effects: Transformations in Pixi.js

Learn how to create dynamic and interactive image transformations using Pixi.js! This beginner-friendly guide covers essential tips, step-by-step instructions, and examples to help you enhance images with effects like scaling, rotation, and filters. Perfect for web developers looking to bring their visuals to life using Pixi.js.
Everything about Lassa fever

Lassa fever, Epidemiology, Clinical Features, Transmission, Prevention Strategies

© 2026 • Melin

Press Esc or click anywhere to close