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.
This article explains what Web Components are, details their core features such as Custom Elements, Shadow DOM, and HTML templates, demonstrates practical usage with React, Vue, and micro‑frontend scenarios, compares them to traditional frameworks, and discusses advantages, limitations, and related tools like Lit and Omi.
An analysis of over 12 million developer job postings from October 2021 to November 2022 shows JavaScript/TypeScript leading the market with 31% of positions, followed by Python, Java, C#, C/C++, Ruby, PHP and Go, highlighting shifting trends and the growing importance of these languages for developers.
The 2022 DevJobsScanner analysis of over 12 million developer job postings reveals JavaScript/TypeScript as the most demanded language followed by Python, Java, C#, PHP, C/C++, Ruby and Go, and concludes with a promotional announcement for a new PHP online live class.
This article explains Webpack 4’s hot module replacement feature, covering the compilation process, dev‑server setup, entry configuration, websocket communication, the role of HotModuleReplacementPlugin, and the detailed steps of detecting changes, downloading updates via JSONP, and applying updated modules in the browser.
The team combats outdated documentation and costly front‑end maintenance by treating unit tests for the use‑case layer as living documentation, using BDD‑style Given‑When‑Then tests that assert only observable behavior, which improves code readability, eases onboarding, and provides a reliable safety net for future changes.
It introduces a series of front‑end engineering articles covering comprehensive monitoring architecture, CSS‑based click throttling, drag‑and‑drop implementation, 30 essential JavaScript concepts, and a simple responsive data‑dashboard solution, aiming to deepen developers’ skills and showcase resume‑worthy expertise.
Node.js is a server‑side JavaScript runtime built on V8 that replaces the browser environment with native libraries, uses libuv’s event loop and thread pool to provide non‑blocking asynchronous I/O, and organizes its architecture into application code, V8, bindings, and libuv layers for efficient backend development.
This article introduces HTML5 Canvas, explains its advantages over SVG, and provides comprehensive guidance on using the Canvas API—including context acquisition, drawing shapes, paths, arcs, gradients, pixel manipulation, state management, transformations, and a complete clock example—illustrated with code snippets and visual demos.
This newsletter presents a collection of technical articles covering the Vite 4 release, the dangers of over‑design, building Node.js automation workflows, React Native monorepo practices, Chrome's memory and energy saver modes, first‑principles thinking for engineers, WebRTC face‑recognition implementation, JavaScript best practices, and an overview of Web Workers.
This article explains frequent misuse patterns of React's useState hook—redundant, duplicate, contradictory, and over‑reliance on useEffect—showing why they hurt readability and maintenance, and provides concise refactor solutions using derived state, IDs, and useReducer.
This article explores the fundamentals of ESLint, explaining how it leverages abstract syntax trees (AST) to enforce code style, detect errors, and enable custom rule creation, while providing practical configuration examples, code snippets, and insights into the underlying processing pipeline.
This article demystifies JavaScript’s this keyword by covering its runtime binding rules in global, function, method, constructor, prototype, and arrow contexts, explaining strict‑mode differences, call/apply/bind usage, event‑handler behavior, and the underlying ECMAScript reference mechanics that determine its value.
This article explains why JavaScript, despite being single‑threaded, needs asynchronous mechanisms such as the event loop, details macro‑ and micro‑tasks, compares browser and Node.js implementations, and demonstrates common pitfalls and best practices using callbacks, Promise, generator, and async/await patterns.
At EmacsConf 2022, Richard Stallman explained GNU Emacs' origins, the GNU project's freedom goals, his criticism of JavaScript's misuse in browsers, and his vision for a more feature‑rich, freedom‑respecting Emacs integrating tools like LibreOffice and TeX.
CodinGame turns programming puzzles into games, letting you write code that instantly visualizes results, learn basic JavaScript logic like selecting the nearest enemy, and explore a variety of difficulty levels across multiple languages while enjoying a fun, gamified learning experience.
React 18 introduces Streaming SSR and Selective Hydration, enabling faster initial page rendering and more efficient hydration by only rendering necessary components.
This article explains the fundamentals of abstract syntax trees (AST) in frontend development, covering their generation, role in code transformation, and practical use of Babel plugins to instrument and modify JavaScript code, with detailed examples and code snippets.
This article presents a comprehensive investigation of Svelte, detailing its dramatic bundle size reduction, performance improvements, compilation-based architecture, core implementation, advantages, drawbacks, and practical usage guidelines, supported by real project data, npm and GitHub statistics, and code examples to help developers confidently adopt Svelte.
Explore a curated collection of frontend articles covering bundler tree‑shaking, code readability tricks, precision handling with big.js, hidden CSS features, Apple‑style scrolling effects, ready‑made visual dashboard demos, and performance insights like reducing jank and mastering LightHouse workflows.
This article outlines eight practical JavaScript habits—using let/const, writing meaningful comments, preferring == over ===, leveraging optional chaining, avoiding magic values, handling async errors, passing multiple parameters instead of a single object, and using concise conditionals—to produce more maintainable, readable, and robust code.
This tutorial demonstrates how to use a previously built Web Components dropdown inside a React app, covering the creation of an abstraction layer, proper prop handling, event registration, and a reusable custom Hook that formats data and manages listeners.
This article explains how to use Three.js to create a realistic 3D phone product page by loading and applying multimedia assets such as custom fonts, textures, audio sources, and video textures, and demonstrates interactive features like ray‑casting for material switching and first‑person controls.
This tutorial explains the differences between mapbox‑gl and maplibre‑gl, shows how to obtain and use Tianditu tile services, and provides step‑by‑step code for creating a tile‑style large‑screen map with 2.5D view, custom layers, and business data overlays.
This article provides an in‑depth tutorial on creating and customizing Cesium entities and primitives—including boxes, points, and various geometric shapes—explaining their properties, visual attributes, performance considerations, and offering complete JavaScript code examples for interactive 3D earth visualizations.
This article explores the fundamentals of Vue's compilation process, compares Vue 2 and Vue 3 compilers, demonstrates sandbox compilation with code examples, and discusses practical considerations such as handling templates, scripts, styles, and hot‑module reloading, providing developers with insights to effectively integrate Vue compilation in browser environments.
This tutorial explains how to create a simple virtual avatar system by combining convolutional neural networks, the face‑api.js library, and WebRTC, covering CNN fundamentals, face detection, landmark extraction, model selection, and rendering techniques with code examples.
This article explains how to create a Camera class in WebGL, compute view and rotation matrices using lookAt, apply them to render a cube from arbitrary positions, and discusses why parts of the cube may be clipped when the camera is placed at [0.5,0.5,0.5].
This article explains how to represent, combine, and invert 2D and 3D transformations with matrices, demonstrates rotation around arbitrary axes, scaling in any direction, and provides JavaScript code for generating rotation matrices in WebGL contexts.
This article explains the concepts of binary trees, complete binary trees, and binary heaps, shows how React implements a min‑heap for its task scheduler, and provides detailed JavaScript code examples for push, pop, siftUp, siftDown, and peek operations.
This article explains the CORS standard, how browsers enforce same‑origin policy, the definitions of simple and preflight requests, required HTTP headers, credential handling, and typical configuration mistakes that cause CORS errors, illustrated with code examples and tables.
This article provides a comprehensive overview of JavaScript Promises, covering their definition, states, basic usage, error handling, chaining, common APIs, best practices, advanced scenarios such as preloading and cancellation, as well as manual implementation techniques, to help front‑end developers deepen their asynchronous programming skills.
This article demonstrates how to use Three.js post‑processing techniques, including EffectComposer, RenderPass, BloomPass, and custom shaders, to build an animated 3D scene featuring a glowing portal and Rick and Morty model, covering shader setup, layer management, animation, and UI controls for fine‑tuning.
This article explains the requestIdleCallback web API, its syntax, execution timing, task‑queue handling, performance characteristics, compatibility issues, and practical integration with React and requestAnimationFrame to off‑load low‑priority work without blocking UI rendering.
