This roundup presents recent frontend news and curated articles covering PNG‑based XSS attacks, V8 engine optimizations, React component nesting pitfalls, engineering habits, brand‑centric design, and useful resources for developers seeking practical insights.
This tutorial walks you through creating a full‑featured image annotation tool using HTML5 Canvas, covering image rendering, mouse‑wheel zoom, viewport panning, rectangle drawing, selection, drag‑move, size adjustment, and rotation with detailed JavaScript code examples.
This article provides a comprehensive technical overview of JavaScript language standards, the architecture and optimization techniques of major JavaScript engines such as V8 and TurboFan, introduces the lightweight QuickJS engine with its features, file layout and memory management, and demonstrates how to embed QuickJS with libuv for asynchronous I/O using detailed C code examples.
This article explains the fundamentals of VChart tooltips, demonstrates how to enable enterable tooltips with Amazon‑style safety triangles, shows flexible content and style patterns, and provides methods for custom DOM manipulation and fully custom tooltip handlers to meet diverse frontend data‑visualisation needs.
This article provides an in‑depth overview of WebSocket, covering its definition, advantages and disadvantages, protocol details, connection lifecycle, message format, JavaScript and Java APIs, Spring Boot integration, performance considerations, and future development directions.
This article surveys current front‑end innovations, covering Chrome extension development, using Husky for Git‑hook scripts, the clever architecture of Vite, new JavaScript operators (?., ??, ??=), the upcoming HTTP/3 protocol, 2024 front‑end technology trends, and an invitation to join a leading front‑end team.
This article presents practical frontend solutions, including automatic route generation in Vite projects using unplugin-vue-router, a detailed source analysis of the await‑to‑js error‑handling wrapper, methods for extracting URL parameters, techniques to terminate or replace forEach loops, and patterns for avoiding duplicate component requests.
Node.js extends JavaScript to the server, offering a lightweight, event‑driven runtime that front‑end developers use for APIs, tooling, and SSR, while version‑management tools like NVM, N, and Volta simplify installing and switching multiple Node versions, each with distinct strengths in maturity, speed, and project‑level automation.
This article explores five highly anticipated JavaScript proposals—including the Temporal API, Pipe Operator, Record & Tuple, RegExp v flag, and Decorators—detailing their motivations, core syntax, and example code as they move toward inclusion in the upcoming ECMAScript release.
This article introduces Vue as a progressive JavaScript framework, explains its core features such as reactive data binding, component‑based development, and virtual DOM, and walks through installation methods, a simple counter example, and a brief comparison with React and Angular.
This article explains why protecting client‑side JavaScript is essential, describes interface signing, outlines common compression, obfuscation and encryption methods—including variable, string, property and control‑flow tricks—introduces Emscripten/WebAssembly protection, reviews practical tools, and details debugging, anti‑debugging and counter‑measures for front‑end security.
This guide explains the HTTP chunked transfer encoding mechanism, details its format, and provides a complete PHP Workerman server and JavaScript client implementation to stream data chunk‑by‑chunk, including installation steps, code examples, and expected output.
This short TypeScript course provides a structured syllabus covering fundamental concepts, development environment setup, data types, classes, generics, and module organization, enabling learners to progressively master both core and advanced features of the language.
This tutorial demonstrates how to build a taxi trajectory visualization by creating a MySQL table for track data, writing a PHP script to retrieve the data as JSON, and using Baidu Maps JavaScript API in an HTML page to render the moving paths with interactive features.
In 2024, a survey of popular websites shows that uncompressed JavaScript bundle sizes vary widely—from as small as 0.2 MB for Wikipedia to over 12 MB for sites like YouTube and Booking.com—highlighting the importance of performance awareness in modern frontend development.
The project implements a cross‑platform driver authentication video capture module by using WebRTC to access rear‑facing cameras, RecordRTC to record a five‑second clip with custom constraints, and uploading the resulting Blob to Alibaba Cloud OSS for OCR, ensuring consistent functionality across native apps, mini‑programs, and external H5 pages.
This article examines the seemingly impossible condition "if(a == 1 && a == 12)" and demonstrates clever JavaScript and Java techniques that allow a single variable to satisfy multiple equality checks, turning a puzzling interview question into a fun exploration of language quirks.
This roundup curates the latest frontend resources—including web performance snippets, Deno’s new JSR registry, Vercel’s AI SDK, VSCode source navigation tricks, architecture design lessons, a Canvas rendering engine guide, React nested component pitfalls, Bilibili analytics platform case study, and product design simplification tips—providing practical knowledge for developers and product teams.
This guide explains JavaScript design patterns—creational, structural, and behavioral—detailing common examples such as Singleton, Factory, Module, Decorator, Observer, Strategy, and more, and shows how applying these proven solutions can make code clearer, more flexible, maintainable, and scalable.
PageSpy, now with over 3000 GitHub stars, introduces multi‑platform mini‑program debugging for WeChat, Alipay and UniApp, plus a session‑replay feature that records network requests and console logs, enabling developers to export, share, and replay logs for efficient bug investigation.
This article provides a concise five‑minute overview of JavaScript, covering its origins, dynamic typing, prototype‑based OOP, browser compatibility, essential syntax such as variables, conditionals, loops, functions, and practical use cases like dynamic content, interactivity, game development, and SPA creation, plus learning resources.
This article explores the design and implementation of a portable, high‑performance JavaScript engine, covering ECMAScript basics, V8 TurboFan optimization, the QuickJS engine architecture, memory management, building and extending QuickJS, and integrating it with libuv for asynchronous I/O.
This article explains the challenges of uploading large files over 100 MB, compares them with regular uploads, details the core principles and common problems, and presents complete front‑end chunking and back‑end merging implementations with resumable and instant upload techniques, plus mature solution recommendations.
2024 brings rapid AI advances and evolving front‑end technologies, urging developers to adopt TypeScript, master micro‑frontend architectures, embrace server‑side rendering with Next.js, reconsider low‑code and Flutter, and explore full‑stack frameworks, while providing curated resources and insights for staying competitive.
A 2024 survey of uncompressed JavaScript bundle sizes across various popular websites reveals that many sites far exceed the expected 1‑5 MB range, with static sites like Wikipedia at just 0.2 MB and multimedia giants like YouTube reaching 12 MB, highlighting the wide performance spectrum in modern web development.
This tutorial explains how to install required components, create a web page that previews the webcam using getUserMedia, send captured frames to a PHP backend, and apply real‑time filter effects with the PHP‑GD library.
This article details the design, three major benefits, optimization steps, and extensive benchmark results of the limu immutable data library, demonstrating how meta handling, prototype manipulation, and Map‑based storage dramatically improve performance compared to other libraries such as immer, mutative, and structura.
This article benchmarks Vue3's Proxy-based reactivity against the traditional Object.defineProperty approach across initialization, read, write, multiple object creation, and nested‑object scenarios, revealing where each technique excels and why Vue3 ultimately prefers Proxy despite nuanced performance trade‑offs.
This article compares Electron and the newer Tauri framework, highlighting Electron's large binary size and Tauri's Rust‑backed, lightweight approach that lets web developers build native desktop applications with familiar JavaScript, HTML, and CSS.
The jQuery 4.0.0 beta release introduces performance boosts, drops legacy IE support, removes dozens of deprecated APIs, updates event ordering, adds native FormData handling, eliminates automatic JSONP upgrades, and migrates the source to ES modules, with an upgrade guide and migration plugin available.
This article explains what React custom hooks are, how to define and use them, outlines design principles, discusses performance optimizations, and provides practical examples such as form validation and component communication, all aimed at improving code reuse and maintainability.
jQuery’s latest 4.0 beta removes support for IE 10 and older browsers, introduces ES module builds with Rollup, updates FormData handling, and changes event order, while the team signals a full IE drop in the upcoming 5.0, sparking debate over jQuery’s future relevance.
This tutorial demonstrates how to create a visually striking card component with light‑following and 3D parallax effects using React, Tailwind CSS, and custom hooks, covering setup of three boxes, mouse event handling, CSS transforms, and reusable hook encapsulation.
This guide walks you through creating a simple, secure file sharing web application using PHP and JavaScript, covering environment setup, user authentication, file upload handling, display of uploaded files, deletion, and UI styling with CSS and dynamic enhancements via JavaScript.
This article documents a step‑by‑step exploration of four native HTML/CSS/JS approaches to create an animated circular dashboard gauge on an H5 page, discusses the challenges encountered, and presents a final SVG‑based solution with code examples.
Advanced interception techniques—such as overriding browser APIs, using ServiceWorkers, employing MutationObservers, creating Proxy‑based sandboxes, and configuring server‑side gateways—provide a flexible middle layer for error reporting, request monitoring, micro‑frontend isolation, and remote debugging, while demanding careful adherence to security policies.
V8 creates JavaScript closures by lazily parsing functions, using a pre‑parser to detect and record outer‑variable references, copying captured values to the heap, then generating bytecode that builds a function context and closure, ensuring efficient execution while avoiding memory‑leak pitfalls.
This article introduces several relatively obscure yet practical ES6 features—including Object.entries/Object.fromEntries, Symbol, WeakMap/WeakSet, Promise.allSettled, BigInt, Array.of/Array.from, and the .at and flat methods—explaining their purpose and providing code examples for each.
This article explains why a SQL query tool is essential for on‑premise systems, describes the challenges of remote access and data safety, and provides a step‑by‑step implementation covering frontend encryption, backend whitelist checks, decryption, and query execution with code examples.
This article introduces Playwright, a powerful cross‑browser automation tool, outlines its key features and advantages, provides step‑by‑step installation instructions for Python, explains core concepts, demonstrates locating invisible elements, and offers practical code examples for common web operations and testing best practices.
Oracle announced preview support for JavaScript‑based stored procedures in MySQL, showing how to write, call, and debug them using GraalVM, while industry reactions highlight both excitement and concerns about mixing languages in database logic.
This article explains how to use the Lottie library to replace hand‑written CSS/JS or GIF animations with vector‑based, cross‑platform switch animations, covering installation, configuration options, direction control, playback speed, JSON modification, and a helper function for updating values.
This guide explains AJAX as an asynchronous JavaScript and XML technique that enables seamless client‑server communication with PHP, providing step‑by‑step examples and key concepts for building dynamic, responsive web applications.
The article reviews five React component design patterns—Compound, Controlled, Custom Hooks, Props Getters, and State Reducer—explaining how each improves reusability, API simplicity, and state management while weighing their advantages, disadvantages, and ideal use‑cases for scalable, maintainable UI development.
The Layui 2.9.4 release (January 18, 2024) adds a new table.updateRow method, fixes scroll‑position and Chrome DevTools crashes, improves the laydate picker on iOS Safari and Android Firefox, and introduces a slider tipsAlways option, all while preserving its lightweight, native‑HTML approach.
This article reviews the major developments in front‑end technology during 2023, covering the rise of large‑model AI applications, updates to JavaScript, TypeScript, CSS, the evolution of major frameworks like React, Vue, Svelte and Angular, the emergence of new tools such as Qwik, Htmx, Bun, Rust‑based build tools, low‑code engines, cross‑platform advances with HarmonyOS, and provides outlooks for 2024.
Oracle’s MySQL 8.2 preview introduces JavaScript stored procedures powered by GraalVM, allowing developers to write JavaScript or Java code inside the database, but the feature remains a technical preview with performance benefits, debugging support, and cautions about production use and global variable behavior.
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.
