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.
This article explains how to create a responsive full‑screen scrolling effect using Vue 3, detailing the concept, requirements, underlying principles, and providing complete HTML, JavaScript, and CSS code to handle mouse wheel, touch events, dynamic height calculation, and indicator navigation.
This article explains the design and step‑by‑step implementation of two JavaScript utility functions—createPromise for exposing a Promise’s resolve/reject handlers and createRetryPromise for adding configurable retry logic—complete with TypeScript typings, detailed code walkthroughs, and a practical network‑request example.
This article demonstrates how to replace classic Redux boilerplate with Redux Toolkit in a React Todo List app by creating a slice, configuring the store, providing it via Provider, and using useSelector and useDispatch, highlighting the simplified setup and clearer state management for both React and React Native.
This article describes how a team consolidated six PC and H5 projects by adopting a micro‑frontend architecture based on MonoRepo and Qiankun, evaluates popular micro‑frontend solutions, explains the chosen technology stack, outlines step‑by‑step implementation details, and shares the problems encountered and their resolutions.
This tutorial walks through building an interactive love‑envelope animation using Vite, Vue 3, CSS, and canvas, covering envelope rendering, opening animation, text fade‑in, confetti effects, and dialogue overlays with complete code examples.
This article examines typical Vue2 code‑smell patterns—such as chaotic project structures, confusing naming conventions, oversized components, complex expressions, repetitive markup, tangled conditional logic, hard‑coded values, overused mixins, missing component names, and lack of comments—and provides concrete refactoring strategies to improve maintainability and readability.
This tutorial walks through building a simple Naruto-inspired 3D scene using three.js, covering model acquisition, character creation, keyboard controls, rotation handling, animation state management, camera integration, octree-based collision detection, and troubleshooting common issues such as camera‑character alignment and jump physics.
This article introduces the fundamentals of Three.js, demonstrates how to encapsulate its core APIs into a Viewer class, and walks through building a Vue3-based 3D visualization project with scene, camera, lighting, model loading, skybox, mouse interaction, and helper utilities.
This short guide shows a regular‑expression rule for Fiddler that blocks common static resources such as CSS, JavaScript, images, icons and audio files, and provides a link to a Chinese‑language Fiddler localization package.
This article explains how to apply CSS ellipsis to truncate overflowing text, then use JavaScript—particularly the createRange API and temporary DOM measurements—to detect when truncation occurs and display a popper tooltip only on hover, comparing several practical implementation methods.
This article explains how React manages side‑effects with useEffect and useLayoutEffect, covering the underlying Effect data structure, the mount and update phases, the commit pipeline (before‑mutation, mutation, layout), and the differences in timing and execution between the two hooks.
This article examines how JSX can be used in Vue 3, compares it with Vue's native template syntax, provides step‑by‑step configuration instructions, and discusses the advantages, disadvantages, and suitable scenarios for adopting JSX in modern frontend development.
This tutorial walks through the fundamentals of Three.js—setting up a scene, camera, lights, and meshes—to build a rotating cylindrical tunnel with animated textures and color changes, culminating in a complete time‑machine visual that runs in a web browser.
This article reviews practical guidelines for building maintainable Ant Design forms in React, covering layout strategies, dynamic form techniques, component encapsulation, table and tab implementations, CSS styling conventions, architecture considerations, and custom hooks to improve code quality and developer productivity.
This tutorial walks you through creating a 100‑line Node.js CLI scaffolding tool that supports global and local installation, interactive project and template selection, command‑line arguments, loading animations, overwrite prompts, dynamic template fetching via GitHub API, and finally publishing the package to npm for frontend engineers.
This article explains what WebAssembly is, why it is needed for high‑performance web applications, how it works internally, which languages can target it, typical use cases, and provides practical examples of loading and using WebAssembly modules in browsers and Node.js.
This article explains the fundamentals of JSX, why JSX expressions must have a single root element, and provides a step‑by‑step guide with complete code to implement a minimal JSX parser that translates JSX syntax into plain JavaScript createElement calls.
This article explains how NativePHP integrates Laravel with Electron (and future Tauri) by providing a complete API, detailing installation, the boot process, core workflow involving Express and PHP servers, event handling, window management, and the benefits of using a unified backend‑centric approach.
This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.
This article provides a step‑by‑step tutorial on building a custom Promise implementation in JavaScript, covering basic functionality, handling of asynchronous logic, chaining, thenable objects, microtasks, error handling, static methods like resolve, reject, all, race, allSettled, any, and additional features such as catch and finally.
This article provides a comprehensive overview of browser localStorage and sessionStorage, covering their differences, compatibility, API usage, storage limits, performance tips, and practical applications such as habit tracking, first‑open prompts, and reducing redundant API calls.
This article explains the concepts, differences, browser compatibility, APIs, storage limits, performance considerations, and practical applications of localStorage and sessionStorage in web development, providing code examples and best‑practice guidelines for using browser storage effectively.
Based on analysis of over 14 million developer job postings from January 2022 to May 2023, DevJobsScanner identified JavaScript/TypeScript, Python, Java, C#, PHP, C/C++, Ruby, and Go as the eight programming languages with the highest demand, accounting for roughly 29% of all language‑specific positions.
This article explains the concept of sandbox security mechanisms, explores their use cases in iPaaS API orchestration and micro‑frontend applications, compares eval, Function, with + proxy techniques, presents JavaScript, iframe and Node vm sandbox implementations, and details practical deployments within the Kraken framework and a centralized approval service.
Bootstrap v5.3.1 has been released, introducing enhanced dark‑mode color contrast, updated component styles, new Sass variables, keyboard navigation improvements, and documentation upgrades such as homepage search and better responsive examples, along with various bug fixes.
This article examines the architecture, rendering pipeline, update mechanism, and event‑picking strategy of the LeaferJS canvas library, illustrating how its lightweight node creation, selective full‑ and partial‑rendering, and optimized hit‑testing achieve high performance compared with alternatives like Konva.
This article explores how WebAssembly can be used to optimize the performance of particle system calculations in a game engine, reducing CPU load and improving frame rates by offloading computations to WebAssembly modules.
This article walks through nine practical JavaScript patterns—including dynamic script loading, a lightweight template engine, data transformation with reduce, default parameters, one‑time execution, currying, singleton implementation, a simple CommonJS loader, and recursive property access—providing clear code examples for each.
This article explains what WebGL is, surveys popular 2D and 3D JavaScript frameworks, analyzes large‑scene performance bottlenecks, and presents concrete optimization techniques such as custom GeoJSON compression, fragment reduction, draw‑call batching, mesh merging, LOD, face culling, and Web Workers, concluding with a brief overview of the emerging WebGPU API.
This article provides a systematic, example‑driven guide to all 23 classic design patterns—covering creational, structural, and behavioral types—explaining their intent, real‑world analogies, benefits, and offering clear diagrams and runnable code snippets to illustrate each pattern in practice.
The 2023 web development landscape is shifting toward meta‑frameworks with server‑side rendering, edge‑computing and serverless functions, revived databases, modern JavaScript runtimes, monorepos, utility‑first CSS, end‑to‑end type safety, new build tools, and AI‑assisted coding, reshaping how developers build full‑stack applications.
This article curates a series of frontend engineering insights, covering request‑optimization strategies, an introduction to micro‑frontends with qiankun, building a custom animated chart as an alternative to ECharts, quick Pixi.js basics, the new JavaScript Import Maps feature, and a brief overview of the Cloud Academy frontend team.
The article walks through building an automatic cruise navigation effect on AMap with Three.js by acquiring route data, merging GeoJSON paths, loading a 3D vehicle model, animating its movement and camera follow using TWEEN, and blending the NPC layer with satellite and 3DTiles layers for a smooth autonomous navigation experience.
This article explains cyclomatic complexity, its calculation formulas, practical examples, and how to measure and improve code quality using tools like SonarQube, ESLint, and codeMetrics, while also presenting refactoring techniques such as single‑responsibility, open‑closed, polymorphism, early returns, and functional programming to reduce complexity.
This article provides a comprehensive introduction to IndexedDB, covering its concepts, key objects, versioning, transactions, and CRUD operations with detailed JavaScript examples, enabling developers to quickly build client‑side databases for modern web applications.
The July 2023 TIOBE Index reveals that C++ has almost caught up with C, while JavaScript climbs to a historic high of #6, several languages return to record positions, and the full Top 100 ranking—including a detailed list of languages ranked 51‑100—is presented with trend charts and methodological notes.
This article recounts the author's journey of creating a Figma plugin that transforms Markdown text into AutoLayout, detailing the challenges faced, iterative problem‑solving with AI assistance, code integration, and the final functional solution for seamless text conversion.
This roundup covers Chrome’s new Document Picture‑in‑Picture API, WhatsApp’s shift away from Electron, a deep‑dive into IndexedDB versus other web storage options, a real‑world performance analysis case, Vue’s dynamic image handling with require, and the latest ES7‑ES12 language features.
This article explains the differences between JavaScript's var, let, and const declarations, covering their scopes, hoisting behavior, and mutability, and provides clear code examples for each. It also highlights how const variables can still be modified when they hold objects or arrays, helping developers choose the right keyword for reliable code.
This article surveys several JavaScript audio‑recording libraries, compares their supported formats, evaluates their performance across browsers, and summarizes front‑end recording techniques—including MediaRecorder, WebRTC + AudioContext, and legacy Flash—while highlighting compatibility issues of major browser engines.
Mozilla discovered that Firefox crashes on Linux, especially older Debian‑based distributions, whenever users perform an image search on Google; the issue stems from a recent AI‑generated JavaScript function allocating excessive variables, exposing a Linux kernel stack‑limit bug that was fixed in kernel 4.20.
This article reviews the 2023 front‑end framework landscape, summarizing survey data, current trends such as hydration, SPA and JAMstack, and providing detailed descriptions of the eleven most popular frameworks—from React and Angular to Qwik—helping developers choose the right tool for their projects.
Quarkc, the HelloBike‑developed framework‑agnostic web component toolkit, builds native Web Components without hidden magic, letting developers write once and run anywhere across Vue, React, Svelte, Angular and plain HTML, while offering a tiny bundle size, high performance and simple npm‑based setup.
This article curates recent front‑end engineering insights, including a ChatGPT‑driven pair‑programming approach using the driver‑observer model, a rapid 200‑line Vue‑like framework built with AI assistance, practical JavaScript code‑cleanliness techniques, strategies for optimistic UI design, and a lightweight method for measuring user‑experience metrics.
This tutorial walks through creating a Chrome extension that captures images from web pages, sends them to a Python‑backed Tesseract OCR engine, and displays the recognized text, covering the plugin's file structure, manifest configuration, JavaScript code, HTML UI, CSS styling, and installation steps.
