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.
This article explains the fundamentals of Chrome extension development using Manifest V3, covering concepts such as the manifest file, service workers, content scripts, UI pages, and provides step‑by‑step code examples to build a color‑extraction extension.
Explore how long polling and Server‑Sent Events enable real‑time data exchange in front‑end development, comparing their principles, advantages, drawbacks, and providing practical JavaScript examples to help you choose the optimal technique for your application.
JavaScript Generators, introduced in ES6, allow functions to pause and resume execution, yielding multiple values; this article explains their syntax, basic usage, advanced features like yield* and data exchange, and demonstrates practical scenarios such as asynchronous flow control, memory-efficient data processing, and state machine implementation.
This article demonstrates how to combine Swoole's high‑performance WebSocket server with WebRTC to create a real‑time audio/video live streaming application, covering server setup, client media capture, video segmenting with FFmpeg, and providing complete code examples for each step.
This article presents nine practical JavaScript techniques—including dynamic script loading, a lightweight template engine, array grouping with reduce, default parameters, single‑execution wrappers, currying, the singleton pattern, a simple CommonJS implementation, and recursive property access—each illustrated with clear code examples for front‑end developers.
This article explains how to evaluate the puzzling JavaScript expression console.log(([][[]] + [])[+!![]]+([]+{})[+!![]+ + !![]]), detailing the required knowledge of type coercion, unary operators, and implicit conversions to reveal why the output is “nb”.
rrweb is an open-source library that records web page DOM changes as JSON arrays instead of video streams, enabling precise replay of user interactions without compression artifacts or storage overhead.
This article explains how to build a full‑featured Gantt chart in Vue 3, covering the UI layout with left‑hand tree panels and right‑hand timeline, synchronization of scrolling and state, draggable and resizable task bars, date‑generation utilities for various time scales, and performance considerations for large data sets.
This article provides a comprehensive introduction to WebGL, covering its relationship with OpenGL ES, differences from Canvas and SVG, performance comparisons, step‑by‑step code examples for drawing points, squares and shaders, and explains the complete rendering pipeline for front‑end developers.
This article explains the fundamentals of character sets and encodings—including ASCII, GB2312, GBK, Unicode, UTF‑8, UTF‑16, and UCS‑2—shows how they affect JavaScript string length, emoji handling, and common pitfalls such as combining characters, endianness, and BOM issues.
This article details the background, problems, and comprehensive refactoring plan for the xGis web‑based 3D map library, covering event classification, API design, layer interaction proxy, CPU/GPU picking implementations, performance trade‑offs, and future optimization directions.
This article explains what front‑end UI frameworks are, why they are useful, and presents a detailed list of the ten most popular domestic UI frameworks in 2023—including Element Plus, Ant Design, Naive UI, View UI Plus, Vant, LayUI, Bootstrap, and WeUI—while advising developers on how to choose the right one for their projects.
This guide explains how to register a custom URL protocol in Windows, create the necessary registry entries, and use HTML links or clipboard communication to securely launch a desktop application from a web page, including handling success, failure, and fallback download flows.
Discover the ten most frequent JavaScript mistakes—from implicit type coercion and var scoping issues to DOM inefficiencies, prototype modifications, global variables, missing semicolons, improper loops, NaN comparisons, eval usage, ignored error handling, and this binding pitfalls—and learn best practices to write safer, more maintainable code.
This article chronicles ten years of frontend development, covering the rise of HTML5, CSS3, JavaScript frameworks, build tools, PWA performance, web components, security challenges, essential developer skills, and the emerging fusion of AI with modern web technologies.
This article curates recent front‑end topics—including HTTP Range resumable downloads, H5 app invocation, automation testing adoption, new JavaScript/TypeScript features, Chrome 112 updates, the history of Signals, and industry viewpoints—providing concise insights for developers seeking to stay current.
PerformanceObserver, part of the W3C Performance Timeline API, enables developers to efficiently monitor key web performance metrics such as FP, FCP, LCP, CLS, and FID without polling, and the article explains its background, usage, methods, code examples, related PerformanceEntry types, and browser compatibility.
The article describes how the author leveraged GPT‑4 to generate JavaScript bookmarklet code, troubleshoot errors, and ultimately build a Chrome extension named “image‑alt‑copier” that extracts and copies alt text from Midjourney images, illustrating low‑bar entry into web development.
This guide provides clear, practical recommendations for packaging JavaScript libraries—including outputting ESM, CJS and UMD formats, handling multi‑file builds, code compression, sourcemaps, TypeScript typings, external frameworks, modern browser support, and essential package.json fields—so developers can create robust, tree‑shakable, and well‑documented npm packages.
This article explains the purpose and format of JavaScript SourceMaps, details the VLQ‑based encoding of the mappings field, and walks through how tools like webpack and Babel generate SourceMaps to map transformed code back to the original source for effective debugging.
This guide walks you through creating a personal ChatGPT chatbot by first setting up an OpenAI account and API key, then demonstrating how to call the completions endpoint using plain JavaScript and HTML, followed by integrating the same API into a Spring Boot application with the official Java client library, including all necessary code snippets and configuration steps.
This article explains how async functions, await expressions, and Promise objects interact with JavaScript's event loop, illustrating the differences in micro‑task scheduling through numerous code examples and detailing how return values affect the number of queued tasks.
This article explains URL query string fundamentals, covering structure, percent-encoding, space handling, and compares JavaScript libraries qs, query-string, and URLSearchParams for parsing and stringifying query data in web and Node.js projects today.
Understanding JavaScript memory management, this guide explains the fundamentals of memory allocation, usage, and garbage collection, outlines common leak scenarios such as global variables, timers, event listeners, and data structures, and provides practical techniques and tools for detecting, diagnosing, and fixing memory leaks in web applications.
This article reviews eight popular JavaScript notification libraries, comparing their features, popularity, and installation methods, to help developers choose the most suitable solution for enhancing user experience with timely in‑app messages.
This article explains how the this keyword is bound in JavaScript, covering default, implicit, explicit, new, and arrow‑function bindings, and demonstrates the concepts with practical debounce examples and code snippets to show how the calling context determines the value of this.
The article humorously lists twenty counterproductive coding “tips” – from using single‑letter variables and omitting comments to writing one‑line code, ignoring errors, creating unused variables, deep nesting, and skipping tests – claiming these practices boost productivity despite harming readability and reliability.
TypeScript 5.0 arrives with over 50 new features—including decorators, enhanced ESM support, and expanded JSDoc—while optimizing memory, performance, and bundle size, making the language smaller, simpler, and faster for most developers.
This article explains the new React "use" hook proposal, covering its background, how to integrate it with Suspense, minimal examples, promise caching, control‑flow usage, design motivations, implementation details, limitations, and the surrounding community debate.
This article curates key front‑end and emerging tech topics—including Inversion of Control in JavaScript, the overload of JS frameworks, Facebook's iOS codebase evolution, GPT‑4's launch, prompt‑engineering automation, and nuanced UI control design—offering concise insights for modern developers.
This article explains the core implementation of React Hooks introduced in React 16.8, covering the internal Hook manager, the built‑in Hook functions such as useState, useEffect, useReducer, and provides simplified code examples to illustrate how state and side‑effects are managed within function components.
This guide explains the characteristics of Base64 strings, Blob objects, and File objects in web development, shows how to detect each type in JavaScript, and provides conversion functions to transform between Base64, Blob, and File formats.
The 2022 State of CSS and State of JS surveys, which collected 14,310 CSS and 39,472 JavaScript responses, reveal demographic details, highlight rapidly adopted CSS features like flex gap, aspect‑ratio, and :has, showcase popular JavaScript language enhancements such as nullish coalescing and top‑level await, and expose developers' satisfaction, usage, and pain points across frameworks, tools, and browsers.
The article explains plugin systems by likening them to interchangeable vacuum‑cleaner heads, outlines their benefits, defines core‑and‑plugin architecture, describes four plugin styles with code examples, and demonstrates building a minimal front‑end calculator plugin framework that emphasizes a stable core and extensible modules.
This article reviews seven up‑and‑coming JavaScript frameworks—Remix, Blitz, Qwik, RedwoodJS, Svelte, SolidJS, and Vue 3—explaining their key features, performance benefits, and suitability for building faster, more automated web applications in 2023.
This guide explains why error handling is crucial in React, compares try/catch and Error Boundary approaches, highlights their limitations, and presents Dan Abramov's clever technique for catching asynchronous errors, providing practical code examples and best‑practice recommendations.
This article curates key frontend topics—including how CommonJS and ES modules handle circular dependencies, why Proxy must be paired with Reflect, practical bug‑recording and source‑code navigation, building guide pages without third‑party libraries, plus a look at clustering algorithms and a powerful CRUD code generator—offering concise insights for modern web developers.
This guide walks you through registering for an OpenAI account, creating an API key, understanding the completion endpoint parameters, and implementing a ChatGPT‑driven chatbot using plain JavaScript/HTML as well as a Spring Boot backend, complete with code samples and configuration steps.
This guide walks you through registering an OpenAI account, obtaining an API key, understanding the completions endpoint parameters, and implementing a ChatGPT chatbot with both a plain JavaScript/HTML front‑end and a Spring Boot back‑end, including full code samples.
This roundup highlights recent front‑end developments, including Chrome’s new CSS viewport units, the rise of modern JavaScript frameworks, using MutationObserver for dynamic DOM handling, a simple three‑line tweak that slashes build times by 80%, Vue 3 composition‑API insights, and tips for junior developers.
This article introduces the browser‑native CSS Custom Highlight API, explains its pseudo‑element ::highlight, shows how to create ranges and Highlight objects with JavaScript, and demonstrates practical examples such as custom text styling, rainbow text, live search highlighting, performance comparisons, and a lightweight code‑highlight editor.
This article details how to recreate the Flash programming game 'Manufactoria' as a web-based puzzle by implementing its UI with HTML and CSS and its logic with JavaScript, covering component definitions, grid layout, robot movement, state handling, level loading, and local storage persistence.
The 2023 tech landscape shows JavaScript retaining its top spot, AI tools like Copilot and ChatGPT reshaping development productivity, and Web3 technologies maintaining strong growth, while frontend frameworks such as React, Vue, and Svelte compete for market demand and developer satisfaction.
This article explores the evolution of JavaScript decorators, the major changes introduced in TypeScript 5.0 beta—including the shift from stage 1 to stage 3 syntax—provides detailed comparisons of class, method, and property decorators, and offers practical code examples for migrating existing code.
This article provides a detailed overview of Babel, covering its definition, history, installation, configuration, core compilation phases, plugin and preset mechanisms, polyfill handling, and a step‑by‑step example of creating a custom try‑catch plugin for JavaScript code transformation.
This article explains the fundamentals of ESLint, including its purpose, configuration files, AST-based analysis, the SourceCode abstraction, rule template creation, key functions, and the overall linting and fixing workflow, enabling developers to build custom linting plugins for consistent code style.
The article introduces the TC39 Async Context proposal, explains why asynchronous context is needed, shows a library implementation using run and log functions, describes the AsyncContext API with run, get, and wrap methods, and explores use cases such as trace propagation, task‑priority handling, and comparisons with thread‑local storage and Node.js AsyncLocalStorage.
The MicroApp V1.0.0‑rc release introduces a component‑based micro‑frontend solution with a custom WebComponent‑like architecture, a virtual routing system, a high‑performance sandbox that leverages caching and decoupling, extensive performance benchmarks, new configuration options, lifecycle listeners, and a practical JD marketing‑center case study.
The article explains the obscure JavaScript 'with' keyword, demonstrating its syntax and behavior, detailing how it manipulates the scope chain, and outlining the numerous drawbacks—including strict‑mode prohibition, variable shadowing, security risks, performance penalties, and poor maintainability—that make its use inadvisable.
The study compares JavaScript (via the JVM engine), Lua, and pure Java for secure, lightweight dynamic scripting in Java projects, finding that native Java is orders of magnitude faster, JavaScript outperforms Lua in complex loops when the engine is reused, while Lua remains suitable for simple scripts but all scripting options are significantly slower than compiled Java.
This article compiles twelve practical JavaScript functions—from generating random colors and shuffling arrays to detecting dark mode, scrolling, clipboard copying, device detection, element visibility, URL parameters, deep cloning, and async waiting—each explained with concise code examples for everyday front‑end development.
Tencent’s cloud load‑testing platform simulates massive Chinese‑New‑Year traffic by offering concurrency and RPS modes, multi‑language test authoring, realistic data generation, and unified OpenTelemetry reporting, enabling early bottleneck detection, proactive scaling, and successful high‑load drills such as Mobile QQ and video services.
This article explains the newly supported scrollend event, how it replaces unreliable timer‑based scroll‑stop detection, shows practical code examples, lists the conditions under which it fires, discusses browser support, and provides a polyfill for broader compatibility.
JetBrains’ 2022 State of Developer Ecosystem survey of over 38,000 developers shows JavaScript remains the most popular language, TypeScript’s usage has tripled, Rust tops the list of promising languages, and shifts in preferred OS, remote work, and developer satisfaction highlight evolving industry trends.
Based on analysis of over 12 million developer job postings from October 2021 to November 2022, DevJobsScanner identified the eight programming languages with the highest demand in 2022, highlighting JavaScript/TypeScript’s dominance, the rise of Python and Java, and emerging trends for Go, C#, PHP, C/C++, and Ruby.
This tutorial walks you through building a full‑screen fireworks effect in the browser by structuring the HTML, styling the text and canvas with CSS, and implementing the animation logic using JavaScript's Canvas API, utility functions, and object‑oriented firework and spark classes.
Discover 13 practical JavaScript shortcuts—from using array includes in conditionals to leveraging the spread operator and object shorthand—that dramatically simplify code, improve readability, and boost performance for modern web development.
This article explains how using console.log in frontend JavaScript can create memory leaks by retaining object references, demonstrates the issue with Chrome Performance and Memory tools, compares it with code without console.log, and offers alternative debugging techniques such as debugger, logpoints, and breakpoints.
This article provides a thorough introduction to JavaScript regular expressions, covering their definition, syntax, flags, meta‑characters, assertions, RegExp object properties and methods, capturing and non‑capturing groups, named groups, greedy vs. lazy matching, back‑references, and common pitfalls, all illustrated with clear code examples.
This article explains the limitations of using History API for SPA route guards, compares two common workarounds, and introduces the new Navigation API as a more centralized and native solution for handling navigation events, transitions, and abortable fetches in modern front‑end development.
This article provides a comprehensive guide to JavaScript regular expressions, covering definition methods, flags, metacharacters, assertions, RegExp object properties and methods, capturing and non‑capturing groups, greedy vs lazy matching, backreferences, and common pitfalls, all illustrated with clear code examples and diagrams.
The article reviews Vue’s 2022 milestones—including the shift to Vue 3, ecosystem growth, and tooling improvements—outlines the 2023 roadmap with smaller, frequent releases, experimental Vapor mode, and also advertises an upcoming PHP online live course with enrollment details.
This article examines why native JavaScript Date falls short for time handling, explains time measurement standards and time zones, and compares four major date libraries—MomentJS, DayJS, date-fns, and native Date—highlighting their advantages, drawbacks, and appropriate usage scenarios.
A curated collection of recent frontend articles covering a code‑submission script, the Remesh DDD framework, CSRF security basics, GraphQL BFF implementation for cloud music, build‑time reduction tricks, and the Intl.Enumeration proposal reaching Stage 4, offering valuable insights for web developers.
This technical guide explores practical methods for measuring network performance in web applications, covering key metrics like ping, jitter, and throughput, while demonstrating how to implement real-time speed testing using browser APIs and JavaScript within a React environment.
The guide explains how to implement Server‑Side Rendering in a Rax‑based e‑commerce car platform, replacing client‑side rendering to fix white‑screen and performance issues by simulating the browser environment with jsdom, handling data requests, null API fields, and auto‑closing tag discrepancies, while outlining architecture, middleware, and future CSR‑SSR integration.
The article traces JavaScript promises from their 1988 origins and early libraries through the Promise/A+ spec and ES6 implementation, explains core rules, demonstrates practical rewrites using chaining, async/await, error handling, cancellation patterns, and parallel execution with Promise.all, offering guidance for robust asynchronous code.
