Layui Vue is a Vue 3‑based desktop UI component library that continues the classic design of the original Layui, offering ready‑to‑use components, a brief history of its evolution, and a detailed update log highlighting new features and bug fixes as of January 2024.
React’s core fiber system traverses a depth‑first tree using performUnitOfWork, splits rendering into beginWork and completeWork, then commits in before‑mutation, mutation, and layout phases, while hooks like useState and useEffect are implemented via linked‑list queues that ensure deterministic updates and side‑effect handling.
This curated newsletter shares the latest frontend news and article recommendations, covering JavaScript rising stars, ESLint upgrades, upcoming jQuery 4.0, V8's Maglev compiler, canvas collision detection, CSS animation control, design‑to‑code workflows, distributed theory basics, version‑update popups, and anti‑mistake design principles.
This article introduces Vue 3 Hooks, explains their relationship to the Composition API, compares them with mixins and class‑based patterns, provides best‑practice guidelines, and offers multiple TypeScript code examples for creating, using, and managing custom hooks to improve code reuse and maintainability.
This article presents Pictode, a Konva.js‑driven graphics editor framework, explains its core features, demonstrates how to set up a canvas, use drawing tools, selector and history plugins, and provides step‑by‑step code examples for integration with Vue or other front‑end projects.
This guide explains how to restrict access to Pusher channels using private channels, covering authentication flow, required server‑side PHP setup, client‑side JavaScript integration, and step‑by‑step code examples for publishing and receiving secure real‑time messages.
This tutorial demonstrates how to install the exceljs package, read and traverse Excel workbooks in Node.js, generate styled Excel files, and perform the same operations in a browser environment, including triggering file downloads, providing a complete solution for Excel import/export in backend and frontend applications.
Learn what Pusher is, compare it with raw WebSocket, and follow a detailed walkthrough that shows how to set up a Pusher account, configure a channel, and implement both client‑side JavaScript and server‑side PHP code to publish and receive real‑time events.
This tutorial walks through creating a 3D map in a Vue project using ECharts, covering JSON map import, 2D to 3D conversion, region labeling, default and interactive highlighting, background gradients, realistic materials, 3D bar charts, and lighting effects with complete code examples.
This article reviews the most common conditional rendering approaches in React—including if‑else, ternary operators, logical AND, nullish coalescing, switch statements, strategy patterns, ErrorBoundary, higher‑order components, and render props—explaining their usage, advantages, code examples, and best‑practice cautions.
This article introduces Lottie for web, explains how to install the lottie-web package, demonstrates basic usage with JavaScript code, details the animation instance and Lottie API methods, covers event handling, and provides a reusable Vue component wrapper for seamless integration.
This article walks through setting up and debugging a CORS‑handling proxy in a React 18 project with create‑react‑app, using http‑proxy‑middleware to forward /api requests, configure logging, and verify the real request paths.
Vue 3.4 introduces a rewritten template compiler that doubles parsing speed, a refactored reactivity system with more precise effect triggering, stable defineModel macro, v‑bind shorthand, improved hydration error messages, and several deprecated features removed, while recommending dependency updates for a smooth upgrade.
This article explains how to handle sudden login redirects caused by expired JWT access tokens in a web platform by using Axios response interceptors to automatically refresh tokens, queue failed requests, and retry them without disrupting the user experience.
This article examines advanced JavaScript Promise techniques by presenting practical implementations for cancelling a pending promise and for notifying progress during asynchronous operations, complete with code examples, explanations of underlying concepts, and discussion of their relevance in interviews and real‑world development.
This article explains how to implement image lazy loading in PHP by extracting image URLs, generating placeholder tags with data-src attributes, monitoring scroll events via JavaScript, and applying CSS transitions, providing a step‑by‑step guide with complete code examples to improve page load performance.
Version 1.39 of Deno introduces experimental‑yet‑stable WebGPU via the –unstable-webgpu flag, adds a new coverage reporter with static HTML output, improves Node.js compatibility, and ships with TypeScript 5.3, while warning of upcoming breaking changes to decorator semantics in the next release.
This article compares npm, pnpm, and yarn—detailing their features, installation commands, speed, disk usage, concurrency, and stability—to help developers choose the most suitable JavaScript package manager for their projects.
This article explains how Progressive Web Apps use Service Workers to provide offline access, installability, push notifications, and responsive layouts, and it walks through registration, caching strategies, dynamic cache management, expiration handling, and practical code examples for robust offline experiences.
This article explains seven advanced JavaScript async/await patterns—including higher‑order functions, concurrency control, recursive processing, asynchronous class initialization, method chaining, event‑loop integration, and streamlined error handling—to help developers write clearer, more maintainable asynchronous code.
This article explains how JSDoc can provide TypeScript‑like type checking, documentation generation, and d.ts emission for plain JavaScript, demonstrates the required tsconfig settings and code examples, and reveals that Svelte adopted JSDoc mainly to simplify debugging without a compilation step.
This roundup highlights the latest frontend tools and deep‑dive articles, covering StyleX, Astro 4.0, Vitest 1.0, VS Code 1.85, lock mechanisms for single‑threaded concurrency, bizarre JavaScript behaviors, target="_blank" security flaws, plugin system designs, designer‑developer workflows, and canvas collision detection techniques.
This article explains why Vite is faster than bundlers like Webpack, introduces the concept of dependency pre‑bundling, walks through its implementation using esbuild plugins, and shows how to build a simplified custom Vite server that scans, resolves, and pre‑bundles third‑party modules.
This article provides a comprehensive overview of Web Components, covering their development timeline, core concepts such as Custom Elements, Shadow DOM, templates and slots, practical code examples, lifecycle callbacks, debugging tools, and real‑world usage scenarios for modern frontend development.
This article explains various web message‑push techniques—including short and long polling, iframe streaming, Server‑Sent Events, MQTT, and WebSocket—provides detailed Java and JavaScript code samples, compares their trade‑offs, and shows how to integrate them in a Spring Boot application.
This tutorial walks a front‑end developer through building a fully functional Rolex‑inspired GMT‑MASTER watch with HTML, CSS and JavaScript by dividing the watch into dial, bezel and hand modules, initializing three canvas elements, defining color variables, and implementing drawing functions for the bezel, dial, hour, GMT, minute and second hands.
This article introduces JavaScript’s origins, core characteristics, and versatile roles—from front‑end scripting in browsers to server‑side execution with Node.js—while explaining its event‑driven model, variable declarations, DOM interaction, and asynchronous programming features for beginners.
The article explains that JavaScript’s native btoa() and atob() functions only handle ASCII, so to correctly base64‑encode Unicode strings you must convert them with TextEncoder to UTF‑8 bytes, use Uint8Array, and decode with TextDecoder, while checking for malformed surrogate pairs via isWellFormed or encodeURIComponent to avoid silent data loss.
The article thoroughly explains JavaScript constructors, prototype chains, the this binding, and ES6 class syntax, showing how functions become constructors with new, how prototypes link objects, custom new/instanceof implementations, and various inheritance patterns—including parasitic combination inheritance realized by class extends and super.
This article demonstrates how to implement cross‑tab communication in browsers by converting screen and client coordinates and using the BroadcastChannel API to synchronize draggable elements across multiple windows, complete with full HTML/JavaScript code examples.
This article demonstrates how to create a multi‑window, real‑time interactive animation using pure JavaScript by drawing circles on a canvas, sharing each window's screen coordinates and colors through localStorage, and connecting them with lines across browsers.
This article explains how to recreate a complex particle animation using three.js by leveraging GPGPU techniques, custom shaders, and compute shaders to efficiently simulate and render hundreds of thousands of particles in real time.
This article provides backend developers with a concise Vue quick‑start guide, covering core features such as component‑based architecture, two‑way data binding, and virtual DOM, and demonstrates practical setup via CDN or Vue CLI, along with detailed examples of data handling, computed properties, watchers, methods, and common directives.
This article introduces TensorFlow.js, explains its origin and core features, and provides step‑by‑step instructions for using it in browsers, Node.js, and WeChat mini‑programs, including package installation, sample code, and practical tips for front‑end developers.
This article explains why browsers cancel pending requests during navigation, the risks of lost data, and demonstrates reliable solutions using JavaScript—first by awaiting fetch, then leveraging the fetch keepalive option—to guarantee logs reach the server without delaying page loads.
This article explains four different techniques—including pure JavaScript frame updates, setInterval with CSS transitions, CSS keyframe animation, and a text‑shadow trick—to achieve a continuously left‑scrolling text effect, compares their performance and complexity, and provides complete code samples for each method.
From jQuery’s imperative DOM hacks to React’s virtual‑DOM abstraction and now to compile‑time, no‑virtual‑DOM frameworks like Svelte and Solid, the front‑end has shifted toward declarative UI, fine‑grained reactivity, and performance‑focused optimizations, while virtual‑DOM remains widely used but increasingly challenged.
This article presents an extensive survey of file preview options—including commercial services, front‑end libraries, and server‑side converters—detailing their advantages, limitations, implementation steps, and code examples for handling DOCX, PPTX, XLSX, and PDF formats in web applications.
This article explains how to create a pure‑frontend “quantum entanglement” effect by synchronizing multiple browser windows using three.js, detailing the index.html setup, the main.js logic for scene and window management, and the WindowManager class that tracks window shapes via localStorage.
This article explains JavaScript’s single‑threaded nature, the event loop mechanism, and the distinction between microtasks and macrotasks, illustrating their execution order with detailed code examples and step‑by‑step analysis to help developers grasp asynchronous behavior in front‑end development.
This article provides a comprehensive overview of WebRTC's MediaStream and RTCPeerConnection APIs, explaining core concepts such as tracks, sources, sinks, device enumeration, media constraints, bitrate and resolution settings, compatibility considerations, screen sharing, content hints, and the step‑by‑step workflow for establishing a peer‑to‑peer connection in the browser.
This article introduces alova, a JavaScript library for frontend developers that streamlines request handling by providing ready-made hooks for basic requests, pagination, form submission, captcha, file upload, auto-retry, SSE, and cross-component communication, illustrated with Vue code examples.
This article explains how to protect confidential business documents by implementing page‑level watermarks using canvas and pseudo‑elements, and how to add robust watermarks to images via OSS parameters or client‑side canvas processing, while preventing removal through MutationObserver.
The new Transformers.js 2.7.0 release introduces text‑to‑speech capabilities, provides a simple browser demo, explains how to save audio with the wavefile NPM package, offers speaker selection from a large CMU Arctic dataset, and lists additional library updates.
Axios is a popular HTTP client for JavaScript that simplifies making HTTP requests, supports promise-based APIs, and offers features like request/response interceptors and automatic JSON data transformation.
This article explains the limitations of traditional web storage, introduces IndexedDB and the localForage library as a simplified, asynchronous, and high‑capacity solution for client‑side data persistence, and provides practical code examples and Vue Pinia integration.
This article curates recent frontend breakthroughs—including Electron memory tuning, printer integration, efficient file streaming, Chrome 117's SHA‑1 deprecation, native JavaScript array grouping, and continuous user‑experience improvement—offering practical insights for modern web developers.
This article examines why try‑catch is often overused for async/await errors, outlines common scenarios that cause request failures, and presents two cleaner alternatives—using Promise .catch with conditional logic and the lightweight await‑to‑js utility—to simplify error handling and reduce code redundancy.
This article provides a comprehensive guide to front‑end monitoring, covering performance metrics, exception alerts, daily inspections, instrumentation methods, data collection, log storage, and practical code examples for building a robust monitoring system that improves stability, user experience, and business insight.
This article investigates whether WebAssembly truly outperforms JavaScript by compiling Rust to wasm and comparing execution times of Fibonacci and convex‑hull algorithms, revealing that data copying and serialization overhead can make wasm slower in realistic front‑end scenarios.
This article shares practical JavaScript snippets for managing dictionaries with Map, deduplicating arrays using Set, constructing data with Array.from, applying destructuring patterns, merging API modules in Vue projects, and converting flat data into tree structures, providing clear examples and reusable code.
This article provides an in‑depth overview of JavaScript's Object methods—including defineProperty, defineProperties, assign, create, freeze, seal, preventExtensions, fromEntries, hasOwnProperty, hasOwn, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, setPrototypeOf, isPrototypeOf, getOwnPropertyDescriptor, getOwnPropertyDescriptors, propertyIsEnumerable, keys, values, entries, is, and groupBy—explaining their purpose, parameters, behavior, and offering practical code examples for each.
This article explains how to create a bottom navigation bar that jumps along a parabolic trajectory using a mathematical formula for the curve, CSS3 mask and radial‑gradient techniques, and a requestAnimationFrame‑driven JavaScript animation loop.
NueJS is a tiny open‑source JavaScript library (2.3 KB min‑zipped) that lets developers create web UIs using only HTML, CSS and basic JavaScript, offering a ten‑fold reduction in code compared with React and promising a broader ecosystem of lightweight tools.
The article traces ESLint’s evolution from a JSLint‑style checker to the dominant JavaScript linter, explains its long‑standing clash with the opinionated formatter Prettier over code‑style rules, and details the team’s decision in v8.53.0 to deprecate built‑in formatting rules in favor of external style plugins and market‑driven style guides.
This article explains the background, definition, calculation methods, measurement techniques, and practical optimization strategies for Cumulative Layout Shift (CLS), a key web‑performance metric, and provides JavaScript code examples for tracking and reporting CLS values.
WebAssembly (Wasm) is a fast, binary bytecode format that lets browsers execute near‑native code written in languages like C, C++ or Rust, offering superior performance for CPU‑intensive tasks such as games and data processing, and can be integrated into front‑end projects via fetch, instantiateStreaming, and toolchains like Emscripten or wasm‑pack.
The article examines why Java typically outperforms JavaScript in execution speed, exploring differences in compilation versus interpretation, runtime environments, type systems, and typical use cases, and explains why JavaScript remains indispensable despite its slower performance.
This guide explains how to add the experimental Vite bundler to a Remix project—installing Vite, creating a vite.config.ts with the Remix plugin, configuring TypeScript, path aliases, CSS imports, Tailwind, vanilla‑extract, MDX, and noting differences such as LiveReload placement, Fast Refresh constraints, and current feature support across environments.
This guide introduces VTable, an open‑source high‑performance table component built on VRender, covering installation via npm or CDN, basic usage, table types, cell rendering options, interaction features, theming, and performance characteristics for modern web applications.
This step‑by‑step guide shows how to create a Safari web extension that generates a QR code for the current page, covering project setup in Xcode, manifest configuration, UI design, JavaScript communication, and optional offline QR generation.
This article explains how to create a reusable Vue 3 directive that applies debounce and throttle to input events, addresses the extra triggers caused by Chinese IME composition, and provides complete TypeScript code examples and usage instructions.
This article explains how to build a responsive waterfall (masonry) layout in React, covering the underlying principle of absolute positioning, dynamic column calculation, item placement based on column heights, lazy image loading, and provides the complete TypeScript component and CSS code.
This article explains Vue's diff algorithm in detail, covering prerequisite concepts about VNode, left‑ and right‑side comparisons, handling arrays of different lengths, and the complete implementation with code examples to help developers grasp how Vue efficiently updates the DOM.
This guide explains what Server‑Sent Events (SSE) are, why they are needed for real‑time server‑to‑client communication, presents complete PHP and JavaScript examples, compares three implementation patterns, and contrasts SSE with WebSocket, highlighting strengths and limitations.
This article explains how to create a Vue directive for element resizing, covering basic right‑side resizing, handling trigger zones, enforcing minimum dimensions, adding left/right multi‑direction support, and providing complete JavaScript and TypeScript implementations with usage examples and future enhancements.
This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.
This article analyses the LeaferJS canvas rendering engine, covering its lightweight node creation, core architecture, rendering pipeline, partial‑render optimization, and event‑picking mechanism, while providing code examples and performance insights for front‑end developers.
This article demonstrates how to set up and use ECharts in a Vue 3 project with TypeScript, providing a reusable library, type definitions, a composable hook, and example components to render various chart types efficiently.
The article shows how to create a smooth FAQ expand‑collapse effect in Vue by storing each item’s visibility in a show flag, wrapping the answer in a transition component, and using JavaScript hooks to set explicit heights and overflow while rotating the arrow icon for visual feedback.
This article explains the concepts of File, Blob, ArrayBuffer, TypedArray, and DataView in JavaScript, covering their definitions, main usages, how to obtain files, common file operations such as slicing and previewing, and practical scenarios like large‑file uploads and video frame extraction.
This article explains how to off‑load SCSS‑to‑CSS compilation to a Web Worker in a React‑based frontend, providing code examples for the worker script, the main thread integration, and demonstrating the performance benefits of keeping the UI responsive during heavy processing.
This article demonstrates how to secure Spring Boot API data using RSA asymmetric encryption, covering the theory of RSA, step‑by‑step project setup, Maven dependencies, annotations for automatic encryption/decryption, Java and JavaScript client implementations, and practical testing of encrypted endpoints.
JavaScript’s single‑threaded model can freeze the UI during heavy calculations, but Web Workers—dedicated or shared—run code in independent threads, communicate via postMessage, offer configurable options, follow a clear initialization‑active‑termination lifecycle, and can be debugged through Chrome’s inspection tools, enabling responsive, asynchronous processing.
This article walks through recreating the Genshin Impact character switch UI using Vue, detailing the horizontal avatar carousel, background image scaling animations, and touch‑based swipe handling for mobile, complete with code snippets and edge‑case logic.
This article explains the concept of codemod, outlines typical migration scenarios, details a step‑by‑step AST‑based workflow, and compares popular JavaScript code‑mod libraries such as Recast, jscodeshift, gogocode, and ast‑grep, helping developers choose the right tool for automated code upgrades.
This article explains the Strategy design pattern, demonstrates its implementation in JavaScript through three code versions, discusses the drawbacks of naïve if‑else approaches, and outlines the pattern's advantages and disadvantages for creating flexible, maintainable code.
This article provides a comprehensive, beginner‑friendly guide to JavaScript regular expressions, covering core concepts, syntax, creation methods, modifiers, character classes, quantifiers, special characters, capture groups, look‑ahead/look‑behind assertions, common string methods, practical use cases such as validation, search‑replace, data extraction, cleaning, and a list of useful online regex tools.
This article introduces several popular open‑source Vue.js libraries—including vueuse, vue‑js‑modal, vue‑wait, good‑table, vue‑notification, tree‑select, and egjs‑infinite‑grid—detailing their features, star counts, usage examples, and GitHub links to help developers quickly enhance their Vue projects.
This tutorial explains how to use PHP to fetch JSON data and integrate Google Charts, providing step‑by‑step code examples for preparing the environment, retrieving data, generating a pie chart with JavaScript, and displaying it within an HTML page.
This article identifies nineteen common performance pitfalls in JavaScript and Node.js applications—ranging from improper variable scope and inefficient DOM manipulation to blocking I/O, unoptimized loops, and excessive dependencies—providing illustrative code examples and actionable solutions to improve speed and responsiveness.
This article walks through implementing React Server Components (RSC) from the ground up, covering basic file‑serving with PHP, migrating to Node.js with JSX, adding component, routing, async support, and client‑side state persistence, while contrasting RSC with traditional MVC approaches.
This article demonstrates how to split large files into 5 MB chunks, compute MD5 hashes, and accelerate processing with Web Workers by dynamically allocating threads based on the browser's hardware concurrency, achieving up to ten‑fold speed improvements.
This article describes the design and implementation of a Mid‑Autumn Festival themed HTML5 canvas game, detailing the gameplay requirements, JavaScript code for the ship, food objects, image management, and the Nginx configuration needed to deploy the game online.
The article explains why Ruby on Rails creator David Heinemeier Hansson removed TypeScript from Turbo 8, outlines community backlash, and discusses the broader implications for JavaScript‑centric front‑end development and the Hotwire ecosystem.
This article guides developers through building a Vue.js component that supports dynamically adding, removing, and submitting multiple form entries, complete with step-by-step explanations and full code examples for handling form data on the client side.
This article introduces five lesser‑known but powerful JavaScript browser APIs—getBoundingClientRect, IntersectionObserver, createNodeIterator, getComputedStyle, and requestAnimationFrame—explaining their properties, typical application scenarios such as drag‑and‑drop, lazy loading, DOM traversal, style inspection, and animation timing, and providing ready‑to‑use code examples.
The article argues that, despite some developers claiming TypeScript reduces productivity, its advantages—such as catching type errors early, preventing runtime ReferenceErrors, and easing maintenance—outweigh the drawbacks, and market trends show TS adoption will continue to grow in front‑end development.
The article explains modern pre‑rendering techniques—historical prefetched and prerendered links, Chrome’s new predictive full‑page rendering, and the Speculation Rules API that lets developers declaratively or dynamically specify prefetch and prerender JSON rules, while noting same‑origin limits, debugging tools, and performance benefits for Core Web Vitals.
This article explores the purpose and proper usage of React's useCallback hook, examines common pitfalls, and demonstrates how to build and enhance a reusable countdown custom hook, including handling callbacks, effect dependencies, and ref-based solutions for stable function references.
This article explains how to manage multiple asynchronous HTTP requests in modern web development by using Promise.all, Promise.race, async/await, manual counters, and third‑party libraries, providing complete code examples and best‑practice recommendations for limiting concurrency and improving application performance.
This article explains the fundamental differences between Vue 3's reactive and ref APIs, highlighting reactive's limitation to objects, the situations where it loses reactivity, and why using ref—along with techniques like Object.assign and toRefs—provides more reliable and flexible state management.
This article introduces LogicFlow, an open‑source JavaScript framework for building interactive flowcharts, ER diagrams, and BPMN processes, and provides a concise two‑step quick‑start guide—including CDN and npm installation and a complete example code—to help developers integrate flexible diagramming into their applications.
This article explains how to automatically extract a picture’s dominant theme colors in the browser using JavaScript, covering the problem background, analysis of common methods, advantages of client‑side processing, and step‑by‑step implementation of median‑cut and octree algorithms with code examples.
This article walks through creating a responsive bottom navigation bar using semantic HTML, CSS flexbox layouts, Alibaba Iconfont vector icons, custom active-state styles, blur effects, a moving background circle, and JavaScript event handling to achieve smooth animated transitions.
This article introduces JavaScript design patterns—covering creational, structural, and behavioral categories—and provides clear explanations and complete code examples for patterns such as Factory Method, Abstract Factory, Singleton, Builder, Prototype, Adapter, Decorator, Proxy, Facade, Bridge, Composite, Flyweight, Strategy, Template Method, Observer, Iterator, Chain of Responsibility, Command, Memento, State, Visitor, Mediator and Interpreter, helping developers write cleaner, more maintainable code.
This tutorial walks through creating a Chrome extension that uses the ChatGPT API to translate selected text, covering setup with OpenAI's quickstart, key code snippets for prompts, content‑script and background service worker, Vite plugin usage, deployment on Vercel, and runtime considerations.
Server‑driven UI, a technique that delivers UI structures via APIs from the server, enables faster iteration, dynamic personalization, and backend‑frontend collaboration, while presenting challenges like app‑store compliance and offline support; the article explains its principles, advantages, implementation steps, and showcases Instagram’s real‑world usage.
This article explains why developers forbid debugging in web pages, demonstrates how repeated debugger statements can hide API calls, and provides multiple counter‑measures—including breakpoint deactivation, script ignore lists, Function‑based rewrites, and advanced obfuscated code—to protect frontend JavaScript from inspection.
This article explains what enums are, why they are useful for UI display and data storage, and provides a reusable EnumFactory implementation with examples for gender, status, and alignment, showing how to integrate the enums into ElementUI components and Vue forms.
