This article introduces the Chrome DevTools Protocol API, provides practical coding tips for using the chrome-remote-interface library, and demonstrates complete Node.js examples for gathering performance metrics, automating Baidu searches, and extracting first‑page results with headless Chrome.
This article explains the fundamentals of memory management, illustrating why ArrayBuffer and SharedArrayBuffer were added to JavaScript, how automatic garbage collection works, and what manual memory handling with functions like malloc and free entails, especially when using WebAssembly and C.
This article walks through classic Node.js callback examples, demonstrates how event emitters can replace tangled callback nesting, and then shows how promises and async/await provide cleaner, more maintainable asynchronous code, encouraging developers to upgrade their Node version.
Redux is a JavaScript state container that enforces a single‑store, unidirectional data flow using actions, reducers and middleware, drawing on Flux, CQRS and event sourcing, and the article examines its core source files while offering best‑practice guidelines such as immutability, pure reducers, smart‑dumb component separation, and careful middleware use.
This article explores a variety of front‑end anti‑crawling techniques—from font‑face obfuscation and background‑image sprites to pseudo‑elements and iframe loading—illustrating how developers can make data extraction harder for bots while acknowledging that no method is foolproof.
Over the past two weeks I built a small backend management system using React, React‑Router, MobX, Webpack, Axios, ECharts and Ant Design, and share practical insights on component loading, routing upgrades, state management choices, bundling pitfalls, and UI library usage.
This guide explains how to create a lightweight motion‑detection effect in a web page using WebRTC to capture video, Canvas for pixel processing, and JavaScript algorithms that compare consecutive frames, apply brightness thresholds, and optionally track moving objects with bounding boxes.
LsLoader is a middleware that caches individual JavaScript modules in browser localStorage and combines updates via an online combo service, enabling build‑tool‑agnostic, fine‑grained loading that cuts page load times by up to 30 % and saves hundreds of gigabytes of bandwidth in production.
This cheat sheet compiles twenty practical regular‑expression patterns—including date, password, email, ID, IP, URL, and HTML validation examples—along with JavaScript snippets, giving developers a quick reference to boost input‑checking efficiency across front‑end and back‑end projects.
This tutorial walks you through the entire process of creating a basic commercial website front‑end—from gathering requirements and designing interactions to setting up a Vue‑webpack project, installing iView components, and launching the site—in roughly one hour of work.
This article explains the differences between JavaScript’s escape, encodeURI, and encodeURIComponent functions, detailing their encoding rules, percent‑encoding standards, reserved and unreserved characters, and how Unicode characters are transformed into UTF‑8 byte sequences, while also covering ASCII, Unicode, and UTF‑8 fundamentals.
This tutorial explains how to rotate, flip, and mirror images on an HTML5 canvas using coordinate system transforms, matrix operations, and pixel‑level manipulation, providing step‑by‑step code examples and visual diagrams for each technique.
This article explains the differences between libraries and frameworks, outlines common front‑end solution categories such as DOM manipulation, communication, utilities, templating, components, routing and architecture, and provides practical recommendations of popular JavaScript tools for each area.
This article translates Loren Stewart’s guide on using React refs for form handling, explaining both controlled components and ref‑based approaches, and provides detailed code examples for text, number, select, radio, and checkbox inputs, including techniques for parent‑child communication and value extraction.
This article compiles a wide range of interview questions and answers covering MySQL escaping, JavaScript memory leaks, PHP garbage collection, concurrency control, networking fundamentals, and system design, aiming to warn developers about knowledge gaps and encourage deeper technical learning.
This guide explains how ES6 Set creates collections of unique values, covering basic methods, handling of arrays, objects, and strings, iteration techniques like for…of, and the interchangeable keys and values methods with practical code examples.
This guide explains why front‑end error collection is essential, outlines effective methods such as using window.addEventListener('error', true), details the types of exceptions to monitor—including script errors, resource load failures, HTML hijacking, and CSS issues—and provides practical code snippets for reporting and handling them.
This article explores the often hidden and contentious world of web crawling and anti‑crawling, detailing industry motivations, the massive proportion of bot traffic, the technical arms race between scrapers and defenders, and the broader impact on developers, companies, and security practices.
This article compiles ten common front‑end questions from Zhihu, offering practical advice on market demand, learning strategies, solidifying fundamentals, choosing between design and development, interview tactics, and the future outlook of web development, all backed by real‑world analogies and examples.
This article explains what favicons are, how to embed them using HTML link tags, compares common formats like .ico, .png, .svg and .gif, describes browser loading order, and shows how to create dynamic favicons with JavaScript libraries such as favico.js, Tinycon, and piecon.
From Apple’s secret team turning iPhones into medical records to Safari 11’s new WebRTC and WebAssembly support, V8 6.0’s SharedArrayBuffer, Puppet Labs’ DevOps survey, WeChat’s open‑source WCDB, Tencent’s mobile analytics, StackOverflow’s HTTPS migration, and a new front‑end lifecycle model, this roundup covers the top front‑end developments of the week.
This article compiles ten common algorithmic challenges frequently asked in front‑end interviews, explains why mastering data structures matters for developers, and provides concise solutions and key insights for each problem, from palindrome checks to binary search tree implementation in JavaScript.
This article explores comprehensive Node.js error handling techniques, covering how to expose errors, differentiate operational and coding errors, choose between throw, callbacks, and EventEmitters, and implement robust error propagation and documentation for resilient backend applications.
Explore advanced JavaScript regular expression techniques—including lazy quantifiers, non‑capturing groups, backreferences, lookaround assertions, and subtle meta‑character rules—to write more efficient and readable patterns, illustrated with practical examples such as inserting commas into large numbers.
This concise guide introduces seven frequently used ES6 features—including let, const, arrow functions, default parameters, destructuring, object shorthand, and template literals—explaining each concept so you can grasp them in roughly half an hour.
This article introduces the fundamentals of Shadow DOM, explains its core concepts, usage patterns, key features, and API, compares it with Virtual DOM, demonstrates practical code examples for creating and styling shadow roots, handling slots and events, and discusses browser support and related tooling.
This article reviews the evolution of frontend moduleization over the past decade, discusses the problems of early script inclusion, presents various solutions such as namespaces, closures, CommonJS, ES6 modules, and modern build tools, and illustrates each approach with concrete JavaScript code examples.
This article examines React's Virtual DOM by dissecting the React source code, explaining the structure of the React object, ReactElement factory, the createElement implementation, and how these pieces combine to build a virtual DOM tree for rendering components.
The article explains why adding 0.1 and 0.2 in JavaScript, Python or C produces 0.30000000000000004 instead of 0.3, by detailing binary floating‑point representation, IEEE‑754 encoding, exponent alignment, rounding rules, and shows C code that reveals the exact stored bits.
This article walks through the concept, setup, core modules, and various asynchronous techniques—callbacks, promises, generators, and async/await—used to create a live, animated resume that updates text and styles in real time on a web page.
This article provides a comprehensive overview of 56 data visualization tools ranging from simple spreadsheet options to advanced JavaScript libraries, mapping frameworks, and statistical packages, helping developers choose the right solution for creating interactive and insightful visual representations of their data.
This article provides a comprehensive guide to JavaScript's console API, covering basic logging methods, object inspection, grouping, clearing, performance timing, profiling, tracing, assertions, and counting, with practical code examples and tips for effective debugging in development environments.
This article shares a practical self‑study roadmap for front‑end development, outlining four progressive steps with recommended books, timelines, key concepts, and useful online resources to help beginners become competent front‑end engineers.
This guide explains how to display a mobile web game exclusively in landscape orientation by rotating a container div with CSS transforms and JavaScript, avoiding intrusive prompts and handling devices with auto‑rotate enabled.
This article explains why a seemingly nonsensical JavaScript expression evaluates to the two characters “sb” by dissecting its operator precedence, breaking it into sub‑expressions, and applying JavaScript’s type‑conversion rules step by step.
James M. Snell explains the fundamental differences between CommonJS and ES6 modules in Node.js, why loading and execution timing matter, the challenges of supporting both systems, and the roadmap for native ES6 module support.
This article explains what a physics engine is, compares real‑time and high‑precision engines, shows how games like CS:GO use them, and provides a thorough tutorial on installing, configuring, and programming the JavaScript 2D physics library Matter.js with code examples and debugging tools.
This article explains how the new ES decorator syntax enables reusable, non‑intrusive enhancements such as logging, timing, deprecation warnings, and API consistency across large JavaScript codebases, while improving readability and supporting static analysis.
This tutorial walks through creating a Chrome extension that automates page clicks to repeatedly refresh and purchase a Huawei Honor V9, covering element inspection, simulated clicks with timers, JavaScript fundamentals, packaging the extension, and additional handy scripts.
Through a detailed source‑code walkthrough, the article explains how Vuex injects the store via a global mixin, builds a hierarchical module tree, binds and implements dispatch and commit methods, enforces strict‑mode mutation checks with a hidden Vue instance, and enables time‑travel debugging by recording mutations and replacing state.
This article explains the fundamentals of WebAR, introduces WebRTC and its APIs, discusses browser compatibility, and provides step‑by‑step instructions for creating a basic WebAR prototype that captures camera video and overlays interactive content using HTML, CSS, and JavaScript.
The article reviews how JavaScript has expanded from the browser into server‑side, mobile, and desktop ecosystems in 2017, highlighting Node.js growth, the shift from Cordova to PWAs and native frameworks, and emerging uses in VR, chatbots, and IoT.
This tutorial walks you through analyzing the page structure, designing start, game, and end screens, and implementing the bird, obstacles, scoring, and game‑over logic using HTML, CSS, and JavaScript, complete with code snippets and visual illustrations.
This article explains how to use native JavaScript, including getComputedStyle and custom utility functions, to accurately obtain the computed background-color of any DOM element while handling special cases such as display, opacity, and visibility without relying on libraries.
This article dissects the inner workings of jQuery’s Sizzle selector engine, explaining its tokenization, compilation, matcher generation, and performance optimizations, while offering practical tips for writing faster CSS selectors in modern web development.
This article walks through the core functionalities of the QQ Music mini‑program—including station launch, friend cards, guided login, playback controls, lyric scrolling, dynamic background colors, and error handling—while sharing implementation details, common bugs on Android and iOS, and practical fixes for developers building audio features in WeChat mini‑apps.
This article explains how Web Workers can off‑load heavy data processing in WebGL‑based map engines, covering worker creation, data serialization, transferable objects, optimal worker count, and real‑world performance gains, all illustrated with code snippets and diagrams.
This article explains how to recreate the native QQ image preview experience in H5 by leveraging AlloyFinger for gesture handling, transform.js for CSS3 transformations, and to.js for animation, covering page flipping, scaling, boundary detection, inertia, and bounce‑back techniques.
This article dissects the Sizzle.js source code, explaining its high performance, design choices such as native API usage, right‑to‑left parsing, tokenization, and modular analysis, while showing how studying its architecture can inform modern frontend framework development.
This tutorial walks beginners through creating a basic JavaScript calculator with addition, subtraction, multiplication, division, clear (AC), and delete (DEL) functions, explaining the HTML structure, CSS styling, and step‑by‑step JavaScript logic to implement the three core parts of the app.
This article demystifies JavaScript memory by explaining stack and heap concepts, variable objects, primitive and reference types, and the mark‑and‑sweep garbage‑collection algorithm, helping front‑end developers write more efficient code.
This guide explains how to create a basic augmented reality effect in a web page by capturing video with getUserMedia, detecting markers with jsaruco, and overlaying 2D or 3D objects using Canvas, Three.js or A‑Frame.
This article explores how to optimize Babel usage to reduce bundle size and improve performance by addressing helper duplication, third-party module handling, and import optimization through transform-runtime, include patterns, and import transformation plugins.
This article surveys the essential JavaScript full‑stack development ecosystem, detailing runtime environments, popular IDEs, build automation tools, testing frameworks, performance utilities, and debugging solutions, guiding developers in selecting the right tools for efficient front‑end and back‑end development.
This article provides a concise overview of the ten most impactful ES6 features—including default parameters, template literals, multi‑line strings, destructuring, enhanced object literals, arrow functions, promises, block‑scoped let/const, classes, and modules—explaining their syntax, benefits, and practical usage for modern JavaScript development.
This tutorial provides a comprehensive, step‑by‑step guide to Webpack, covering its purpose as a JavaScript module bundler, installation, command‑line usage, configuration files, Babel and Handlebars loaders, plugins such as html‑webpack‑plugin, lazy‑loading, vendor chunk creation, and best practices for modern front‑end development.
This article explains how to use pure JavaScript to retrieve an element’s final computed background‑color, covering inline and external styles, handling special cases like display, opacity, and visibility, and provides a recursive implementation with code examples and improvement suggestions.
This article explains how key ES6 features—arrow functions, array methods, destructuring, enhanced object literals, classes, and block‑scoped variables—can streamline WeChat Mini Program development, improve code readability, and increase development efficiency.
This comprehensive guide walks beginners through JavaScript basics, DOM interaction, debugging, experiments, advanced concepts, frameworks, design patterns, and resources, providing a clear roadmap to become a proficient front‑end developer.
Learn how to create, customize, and extend jQuery plugins—from basic concepts and simple color-changing examples to chainable calls, avoiding $ symbol conflicts, handling parameters, and using $.extend and $.fn.extend—while understanding the underlying prototype mechanism and best practices.
This tutorial explains how to create a left‑swipe delete effect in a WeChat Mini Program list view by layering items, using absolute positioning, and handling touchstart, touchmove, and touchend events to move items and reveal action buttons based on swipe distance.
An in‑depth look at a common interview puzzle that prints “0 1 2 3 3 3”, explaining how JavaScript’s asynchronous setTimeout, function scope, and closures interact, why the output occurs, and how to modify the code to achieve the expected 0‑1‑2 sequence.
The article recaps the first Frontend Technology Salon, covering ES6 fundamentals, Webpack packaging, and practical ES6 asynchronous programming examples, offering detailed explanations and code demonstrations for frontend developers and highlights common pitfalls and browser compatibility issues.
This article presents a comprehensive guide to front‑end performance optimization, covering reduction of HTTP requests, proper handling of repaint/reflow, minimizing DOM operations, using JSON, efficient HTML/CSS, CDN acceleration, external resource loading, minification, image compression, and cookie management.
The article explores why mathematically equal expressions like 5×3 and 5+5+5 are not necessarily equivalent, explains the distinction between equality and equivalence, illustrates with real‑world and programming examples such as JavaScript’s == versus === and matrix multiplication rules, and discusses teaching implications.
The article analyzes doT.js, a compact 6 KB, dependency‑free JavaScript template engine that builds rendering functions via regex‑based code generation, avoids the costly with statement, caches compiled templates, and delivers superior performance in benchmarks compared with jQuery‑tmpl and other minimal engines, while noting its less intuitive syntax for complex conditionals.
This article explains how Node.js initializes by combining Google’s V8 engine with the libuv asynchronous I/O library, details the main function flow, event loop, thread pools, environment creation, module binding, and demonstrates exposing a C++ object to JavaScript via a native addon.
The article walks through creating an HTML5 remake of the Chinese “Don’t Stop! 8‑Note Sauce” game, where microphone volume drives a doge‑block character to walk and jump over dynamically generated pits, detailing configuration, barrier management, collision detection, and WebAudio voice‑control implementation using getUserMedia, AudioContext, and analyser nodes.
This article explains how setTimeout works in JavaScript, covering its two parameters, the unique timer ID, the event‑queue execution after the call stack clears, and how closures can be used to preserve loop indices for correct output.
In a playful interview, React explains its origins at Facebook, the virtual DOM mechanism, component design principles, performance optimizations, and real‑world usage, while code examples illustrate how the library simplifies UI development for modern web applications.
This article quickly guides you through the evolution of JavaScript modularization, covering early patterns, major specifications like AMD, CommonJS, UMD, ES6 modules, as well as loaders and bundlers, so you can grasp core concepts and practical code examples in just ten minutes.
This article explains how to use the ajaxFileUpload jQuery plugin for asynchronous file uploads, detailing its syntax, configuration options, integration steps with HTML, JavaScript, and Java backend code, and provides practical notes on styling and compatibility.
This tutorial walks through setting up a Node.js WebSocket server, creating a PC client and a WeChat Mini Program client, and enabling bidirectional communication so the mini program can remotely control a projector screen.
This article introduces the WePY framework for WeChat mini‑programs, covering its purpose, demo projects, quick‑start commands, project structure, component architecture, data binding, event communication, plugin support, and advanced configuration, providing developers with a comprehensive reference for modern mini‑program development.
JavaScript functional programming, once a niche topic, has surged in popularity since ES6, and this article explores practical implementations—showcasing functional code versus traditional approaches, benefits like clearer semantics and reusability, common models such as closures, higher‑order functions, currying, and composition, plus optimization techniques.
This article provides a comprehensive guide to common JavaScript techniques for working with JSON, covering object and array structures, converting between JSON strings and objects, pretty‑printing with JSON.stringify, string replacement for log processing, and methods for iterating and recursively traversing JSON data.
This article introduces TypeScript as a Microsoft‑created superset of JavaScript that adds static typing, explains its type‑system fundamentals, compares it with lint tools, showcases practical code examples—including interfaces, implementations, and function overloads—and demonstrates how static analysis can catch bugs early and improve documentation for both front‑end and Node.js projects.
Lego is a component-based front-end page assembly platform at Meituan, enabling rapid low-code page building via drag‑drop components, with an Assembly Factory UI, developer SDKs, event‑based component communication, and a rendering engine that outputs HTML/FreeMarker, reducing development time and standardizing UI across projects.
This article examines how JavaScript parsing, compilation, and execution dominate web page startup time, presents data from V8 runtime statistics across desktop and mobile browsers, and offers practical techniques—such as code splitting, script streaming, and code caching—to dramatically reduce launch delays.
This article explains the evolution of JavaScript module patterns—including CommonJS, AMD, CMD, and ES6—by illustrating their syntax, loading behavior, and practical drawbacks, and shows how to simulate modularity with simple global objects and closures.
This article explains the inner workings of requestAnimationFrame, detailing why setTimeout/setInterval fall short, how Chrome's animation controller registers and fires callbacks, and the call stack that drives frame updates, complete with code excerpts and diagrams.
Learn how to create a simple, custom JavaScript error‑tracking system that logs client‑side exceptions to a server, stores them in a database, and notifies users, offering a low‑cost alternative to heavyweight services for small web projects.
This article explores JavaScript’s primitive and reference types, detailing their immutability, assignment behavior, memory storage, comparison methods, and the role of wrapper objects, supplemented with clear code examples and diagrams to illustrate how values and objects are handled in memory.
This article introduces Baidu's open‑source ECharts library, walks through installing the JavaScript package, embedding it in a web page, and demonstrates using the Python ECharts API to create interactive charts, while highlighting key setup notes and resources.
This article provides a comprehensive guide to Snap.svg, explaining its purpose, API similarities with jQuery, core classes like Element and Paper, various animation techniques—including element and static animations, path and matrix transformations—along with compatibility tips, performance recommendations, and useful code examples.
This article presents practical JavaScript guidelines for naming variables, structuring functions, and avoiding common pitfalls, illustrating each bad pattern with concise code examples and showing the improved, more readable alternatives to help developers write cleaner, maintainable code.
This tutorial explains how to create a WebVR page using the WebVR API and three.js, covering VR and naked‑eye modes, required plugins, HTML setup, scene construction, camera, renderer, a rotating cube, and integration of VR controls, effects, and manager for a complete immersive experience.
This comprehensive guide explores the fundamentals of API design for front‑end development, covering naming conventions, lexical correctness, parameter ordering, return values, versioning, and extensibility, and provides practical code examples to help developers create intuitive, maintainable, and future‑proof interfaces.
This article explains what JavaScript decorators are, how they work on classes and methods, how to configure Babel for ES7 support, and demonstrates real‑world uses such as mixins and simple AOP, providing clear code examples throughout.
This article explains how to transition from traditional MVC architecture to Redux when building a React‑Native mobile app, detailing the analogies between actions, reducers, stores, and components, and provides step‑by‑step code examples for implementing state management in JavaScript.
This article explains the concept of a stack as a LIFO data structure, shows how to implement a Stack class in JavaScript with essential methods like push, pop, size, empty, peek, and clear, and demonstrates practical usage through recursive and iterative factorial calculations.
This article presents a comprehensive guide to front‑end performance optimization, covering how to prioritize bottlenecks, use debounce/throttle, reduce DOM reflows, optimize rendering, leverage requestAnimationFrame and Web Workers, and apply efficient CSS and script loading strategies, all illustrated with practical code examples.
This article presents practical JavaScript clean‑code guidelines—including intention‑revealing naming, single‑purpose functions, pure functions, proper async handling, and linting standards—to help developers write more readable, maintainable, and error‑free code.
This guide explains the concept of image lazy loading, how to detect when an image enters the viewport, and provides a complete vanilla‑JavaScript implementation with throttled scroll handling to improve page performance and reduce bandwidth usage.
Learn how to ensure that a user list page instantly reflects edits made on a separate detail page in a WeChat Mini Program by using a lightweight broadcast utility, avoiding full page reloads and improving user experience.
This article offers a comprehensive guide for newcomers to web front‑end development, covering project engineering basics, emerging development directions, the current job market, essential frameworks and tools, and practical tips for overcoming common challenges.
This article explains three methods to provide visual touch feedback on mobile web pages—using the :active pseudo‑class with a touchstart handler, the non‑standard -webkit‑tap‑highlight‑color property, and custom touch event listeners that add and remove an active class, plus tips for handling the 300 ms delay.
This article, the third in a series on constructing high‑scalable web interactive systems, demonstrates how to use NetEase's NEJ framework to decompose complex SPA modules, define hierarchical and dependency trees, register external and layout modules, map functionalities, and configure the entire application for scalable development and maintenance.
This article introduces Socket.IO, explains its features and transport fallback mechanisms, showcases a real‑world example (tty.js Linux terminal), and provides a step‑by‑step guide to create a simple web page that displays the server’s current time using Node.js and client‑side JavaScript.
This article explains why readable code matters for developers, then offers practical guidelines on naming variables and functions, structuring conditional branches, keeping functions single‑purpose, handling errors, avoiding side‑effects, and organizing class methods to improve maintainability in modern JavaScript projects.
