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.
This article recounts how Ivan Kutskir spent seven years creating Photopea, a fully client‑side, web‑based Photoshop clone built entirely with JavaScript, detailing his background, development challenges, technical architecture, user growth, monetization strategies, and lessons for aspiring developers.
This article examines typical frontend development pitfalls—including numeric type quirks, precision loss, function length, object ordering, asynchronous timer inaccuracies, race conditions, CSS positioning, stacking contexts, performance bottlenecks, and compatibility concerns—providing explanations, code examples, and practical mitigation strategies for developers.
This tutorial explains how to develop a Chrome extension that assists developers in locating web page elements and generating XPath expressions by outlining the plugin's structure, providing complete configuration files, JavaScript code, HTML/CSS UI, and step‑by‑step instructions for loading and testing the extension.
This guide explains how to integrate WeChat Mini Program voice capabilities by importing the recorder and audio APIs, recording audio, uploading for speech recognition, and playing back the result, with example code snippets for each step.
This guide explains how to implement audio recording and playback in WeChat Mini Programs using the wx.getRecorderManager and wx.createInnerAudioContext APIs, and demonstrates storing the recorded files on a PHP server via wx.uploadFile and standard PHP file handling.
This article provides a step‑by‑step guide to creating a Google Chrome extension using Python and Flask that validates JSON data on the current page, covering prerequisite setup, project structure, manifest configuration, content and background scripts, backend server implementation, and testing procedures.
This article provides a step-by-step guide to creating a Google Chrome extension that captures full-page screenshots, detailing the required project structure, manifest configuration, JavaScript background and content scripts, and a Python Selenium script for automated screenshot capture and saving.
This article explains Vue.js 3's Teleport feature, covering its core concepts and providing step‑by‑step code examples for creating modals and notification components that render outside their original component hierarchy.
This article explains how to use a custom Babel plugin to automatically inject standardized logging statements into JavaScript code, addressing common debugging challenges such as sparse logs, inconsistent log formats, and missing error handling in async/await constructs.
This tutorial explains how to create a web‑based tool that generates batch mock data of various types—including names, ages, genders, ID numbers, phone numbers, emails, and bank cards—by implementing a Flask backend API and a Vue.js frontend interface, complete with setup, code examples, and deployment steps.
During a workflow form update, adding a new JSON attribute caused front‑end errors; the article investigates how JavaScript and Java (fastjson) handle control characters differently, presents experiments, code snippets, and offers practical recommendations to avoid similar JSON parsing issues.
This tutorial walks through creating a web-based timestamp conversion utility that transforms second‑ and millisecond‑level timestamps to dates and vice versa, using a Flask backend API and a Vue.js frontend with styled HTML and CSS.
This article demonstrates how to convert Chinese characters into SVG paths using Batik, then creates a D3.js animation that morphs one character into another, addressing path length mismatches with a FIFO‑style point‑by‑point transition and adding a swing effect via setInterval.
This article explains what web page memory leaks are, identifies common sources such as timers, event listeners, closures, and DOM references, and demonstrates step‑by‑step how to locate and resolve them using Chrome DevTools' Performance and Memory panels.
This article explains the principles of modular programming, examines JavaScript and asm.js module systems, and details how WebAssembly extends these concepts with import/export sections and dynamic linking mechanisms, while also reviewing current proposals and future trends for module linking and component models.
This guide explains why large JavaScript codebases are moved to TypeScript, compares mixed and full migration strategies, and provides a step‑by‑step tutorial on using Airbnb's ts‑migrate tool, its plugins, and related commands to automate the conversion.
This article introduces Vue.js 3’s Teleport feature, explains its core concepts such as source, target and props, and provides complete code examples for creating modals and notification panels that are rendered outside the component hierarchy, highlighting the flexibility it brings to frontend development.
This article explains Redux middleware concepts, including its role in intercepting actions, implementation via applyMiddleware and compose, usage patterns, and how to create custom middleware, with code examples illustrating core principles in JavaScript applications.
This article explains PageSpy’s design and implementation for a remote web debugging console that mirrors Chrome DevTools, detailing how it handles complex objects, serialization challenges, getters, self‑references, and prototype‑chain inspection using a custom Atom data model.
This article provides a comprehensive overview of WebRTC’s MediaStream and RTCPeerConnection APIs, covering concepts such as sources, sinks, tracks, device enumeration, media constraints, resolution and bitrate settings, compatibility issues, screen sharing, content hints, and step‑by‑step connection establishment for real‑time communication in browsers.
This tutorial demonstrates how to combine Swoole's high‑performance PHP WebSocket server with WebRTC's browser‑based real‑time audio/video capabilities, covering server setup, client media capture, video segmentation with FFmpeg, and complete code examples to build a functional live‑streaming application.
This roundup highlights cutting‑edge topics ranging from why AI models are named after alpacas and how to converse with PDFs, to practical front‑end performance gains, an in‑depth webpack resolve walkthrough, ten powerful reduce techniques, and five obscure JavaScript native APIs, plus a brief intro to a leading front‑end team.
This article explains the principles of modular programming, examines JavaScript and asm.js module systems, details how WebAssembly implements import/export and dynamic linking, and reviews current proposals such as ES Module integration, Module Linking, and Component Model that shape the future of WebAssembly modularity.
The ECMAScript 2023 specification introduces four new non‑mutating Array methods—toSorted, toReversed, toSpliced, and with—that let developers work on copies of arrays, improving predictability, easing React state updates, and providing consistent behavior across browsers and runtimes.
This guide demonstrates how to set up a Flask backend service providing message APIs, install and configure Vue.js for the frontend, create components for displaying and submitting messages, and run both servers to produce a functional online message board.
This release note details the latest Layui updates, introducing new global form attributes, numerous bug fixes for checkboxes, tables, and tree tables, as well as performance optimizations across components like layer, laydate, upload, and code, with code snippets illustrating the changes.
This article explains how to implement a one‑click copy feature in web pages using the modern Clipboard API for text and images, provides compatibility notes, and offers fallback code with document.execCommand('copy') for older browsers and WebViews.
This tutorial explains how to create a live audio/video streaming application by combining WebRTC for browser‑based media capture with a high‑performance Swoole WebSocket server, including code examples, video segmentation with FFmpeg, and a reference to a detailed course.
This article introduces functional programming fundamentals, showcases common JavaScript scenarios like map/filter/reduce, explains key concepts such as first‑class functions, laziness, pure functions, currying, pipe, and compose, and demonstrates their practical application in a real‑world AgileBI report‑cell configuration system.
This article presents ChatGPT’s side‑by‑side analysis of React, Vue, and Angular, detailing each framework’s strengths—such as React’s component model, Vue’s low learning curve, and Angular’s full‑stack features—and weaknesses, then advises choosing based on project scale, complexity, and developer experience.
The article introduces Deno KV, a globally replicated, strongly consistent key‑value database that runs locally with SQLite or in Deno Deploy with FoundationDB, highlights its simple yet powerful JavaScript‑centric API, atomic transactions, consistency models, and provides practical code examples for developers.
This guide explains multiple practical methods—including CSS tricks, saving the page, using the print view, and disabling JavaScript—to overcome copy‑and‑paste restrictions on web pages, complete with code examples and step‑by‑step instructions.
This guide walks you through preparing an OpenAI account, obtaining an API key, using the Completion endpoint with example JSON, calling the API from plain JavaScript/HTML, and integrating the same service into a Spring Boot application with Maven dependencies and Java code.
