This week’s Front‑End roundup covers a visual page‑builder design, Canvas‑based image filters, a Vue vs React comparison, a 2019 technology review, Airbnb’s large‑scale GraphQL migration, and the latest ES2020 JavaScript features, each with concise insights and illustrative images.
This tutorial explains how to implement common image filters such as red, grayscale, and inverse effects using the Canvas API, then introduces convolution fundamentals to achieve advanced effects like edge detection and sharpening, complete with code samples and visual results.
This article explains how to create a Babel plugin that removes console calls in production builds while extending console methods with styled output and source location information in development, covering installation, configuration, AST manipulation, option validation, and comprehensive testing using TypeScript, ts‑mocha, and chai.
This guide presents a high‑level knowledge map for Vue developers, covering essential JavaScript basics, core Vue concepts, component architecture, SPA routing, state management, real‑world tooling, testing, performance optimization, related ecosystems, and advanced frameworks like Nuxt and Vuetify.
This tutorial walks through creating a lightweight web Gomoku game using JavaScript, detailing both a plain‑DOM renderer and a Canvas renderer, their interchangeable architecture, and core features like move handling, undo/redo, win detection, and board resetting.
This article explains the motivations behind Taro 2.0’s CLI overhaul, details how the custom build system was replaced by Webpack, provides step‑by‑step migration instructions, showcases new hooks, loader and plugin configurations, and outlines future plans for the framework.
This article provides a detailed walkthrough of Vue.js’s core initialization process, examining how the framework’s global API, asset registration, and various utility functions are set up through multiple layers of source code, with extensive code examples and explanations of each step.
This article explains how the spread operator combined with logical && can conditionally add properties to an object, detailing the underlying ECMAScript specification, the CopyDataProperties abstract operation, and edge cases with null, undefined, and primitive values.
This article explains why WeChat Mini Programs need a custom cookie solution, details the browser cookie model, and provides a step‑by‑step implementation using the Mini Program Storage and Network APIs, including code samples, performance tips, testing, and security considerations.
This guide explains how Laravel automatically generates CSRF tokens, how to embed them in Blade forms, configure the VerifyCsrfToken middleware, whitelist routes, and integrate token handling with JavaScript libraries such as Axios and jQuery for robust request protection.
This article chronicles a developer's transition from plain JavaScript to TypeScript, illustrating how static typing improves code robustness, debugging, and documentation while also discussing migration steps, common pitfalls, and practical examples across frontend projects.
This article walks through creating a JSON parser in JavaScript, covering the JSON grammar, railroad and BNF diagrams, step‑by‑step implementation of object, array and value parsing, robust error handling, and suggestions for meaningful error messages.
The 2019 frontend landscape saw React retain dominance, TypeScript surge, WebAssembly become a fourth web language, Vue prepare for version 3, Angular introduce Ivy, static sites and JAMstack rise, PWA adoption grow, and a wave of new tools, standards, and predictions for 2020, reflecting rapid evolution across frameworks, languages, and tooling.
This tutorial explains how to bring TypeScript‑style type checking and autocomplete into regular JavaScript files using VSCode, JSDoc comments, and declaration files, allowing developers to enjoy static‑type benefits without converting the whole project to .ts files.
Tencent’s open‑source Hippy framework, now used by 18 internal services with over a hundred million daily page views, offers a front‑end‑friendly, W3C‑compliant cross‑platform solution that supports React and Vue, reduces learning barriers, and improves performance through a C++‑based engine‑direct architecture.
This article details NetEase Yanxuan's enterprise micro‑frontend solution, covering its architectural design, isolation techniques, communication mechanisms, configuration center, and the concrete business benefits such as breaking down giant monoliths, improving module reuse, and streamlining multi‑team collaboration.
This article introduces ESLint, explains why JavaScript linting is essential, walks through installation, demonstrates sample code with common errors, shows how to configure rules via .eslintrc.js, and outlines IDE integration to improve frontend development efficiency.
This article surveys the evolution of JavaScript from ES5 through ES10, explains which features are native in modern browsers, outlines the stage‑process for proposals, showcases code examples for classes, modules, generators, async/await, optional chaining, and discusses whether Babel is still needed.
This article dissects the inner workings of React's useEffect hook by tracing its implementation through the React Fiber architecture, from mountEffect and updateEffect functions to the commit phase, revealing how side‑effects are scheduled, created, and cleaned up in modern React applications.
This article explains how to reverse a clockwise‑rotating Firefox logo animation by understanding the APNG file format, identifying frame chunks, and rewriting the binary data with JavaScript to play the frames in reverse order.
This article presents a curated list of 26 powerful Visual Studio Code extensions—including Project Snippets, Better Comments, Bracket Pair Colorizer, Material Theme, ESLint, Stylelint, REST Client, and many more—that enhance productivity, code quality, and workflow for JavaScript and TypeScript developers.
This article provides a detailed technical analysis of FLV.js and HLS.js architectures, explains their common media pipeline, and describes step‑by‑step how to combine them into a single JavaScript player that supports both live FLV streams and HLS replay on a PC web site.
This article examines why third‑party JavaScript often slows sites, explains the hidden costs of convenience, and provides a step‑by‑step mitigation plan—including responsibility assignment, self‑hosting, connection pre‑connect, and lazy‑loading techniques—to help developers improve web performance.
This article traces JavaScript’s evolution, covering the enrichment of prototype methods, standardization of classes and modules, the rise of asynchronous patterns like callbacks, promises, generators, async/await, and modern syntax features such as block scope, symbols, BigInt, reflection, and useful syntactic sugar.
This article explains why a newly rebuilt site can suffer a “JavaScript hangover,” then walks through concrete front‑end performance techniques—including tree shaking, code splitting, externalizing third‑party scripts, smaller library choices, differential serving, and reducing Babel‑generated bloat—to restore speed and improve user experience.
This article explains the concept, types, lifecycle, and security considerations of HTTP cookies, illustrates how browsers store and send cookies, describes the cookie‑jar model, domain handling, and related CORS mechanisms, and provides practical JavaScript examples.
The guide shows how to modify a Webpack‑4 JavaScript SDK—adding Babel symbol handling, using transform‑runtime, employing Flash for IE9 cross‑domain requests, converting ES5 to ES3 with es3ify‑loader, configuring UglifyJs for IE8, polyfilling missing APIs, building a tiny selector engine, and testing on virtual IE7‑IE9 machines.
The article describes how to enforce architectural rules and assess change impact in a modularized JavaScript application by extracting import statements via AST, building a file‑map, constructing a cycle‑aware dependency graph with indexed nodes, and traversing it with a visited‑stack to support forward and reverse analysis across business and public bundles.
JavaScript’s growing size threatens web performance and accessibility, so developers must evaluate when to use frameworks, adopt progressive enhancement, reduce unnecessary code, and leverage native browser features like prefetch and service workers to build faster, more sustainable, and inclusive web experiences.
This article introduces Sketchify, a JavaScript tool built on RoughJS that transforms any SVG‑based chart into a hand‑drawn sketch style, explains its underlying algorithm, provides sample code, demonstrates its application to popular libraries such as ECharts, AntV G2, Highcharts, amCharts and xCharts, and discusses its limitations and resource considerations.
Vue 3 replaces Vue 2’s Object.defineProperty reactivity with a Proxy‑based system, using the Composition API (e.g., a reusable usePosition hook) to create reactive state, cache proxies via WeakMaps, differentiate array additions from length changes, and track dependencies through effect stacks for efficient updates.
This comprehensive guide explores the Intersection Observer API, explaining its core concepts, detailed code examples, performance comparisons with scroll events, advanced usage like sticky positioning, visibility tracking, and browser compatibility, providing developers with practical insights to efficiently implement and optimize intersection-based interactions.
This tutorial walks through creating a web‑based server monitoring tool that tracks CPU load and disk usage, using Vue.js with Element UI and Echarts for the frontend and a Python Flask backend with SQLite for data storage and API delivery.
This article thoroughly dissects JavaScript Promise execution, revealing how microtasks are registered and run across multiple code snippets, compares Promise/A+ with WebKit implementations, and provides detailed code analyses and output predictions to help developers master Promise behavior.
This guide walks you through Sketch plugin architecture, manifest configuration, command definitions, Actions and JavaScript APIs, CocoaScript bridging, UI panel creation with AppKit, sidebar navigation, debugging techniques, logging methods, and using SketchTool for automation, providing practical code examples for each step.
This article explains how Google's V8 engine parses JavaScript, distinguishes eager and lazy parsing, inlines functions, manages object hidden classes, and offers practical optimization tips to improve runtime performance in Chrome, Node.js, and Edge.
This article explains how Vue 3.0 rewrites its reactivity system using Proxy and Reflet, introduces the reactive, effect, and computed APIs, compares them with MobX, and details the resulting changes for arrays, collections, lazy observation, and IE compatibility.
This tutorial walks through constructing a JavaScript arithmetic parser using a finite‑state lexer, a stack‑based parser that builds an abstract syntax tree (AST), and an evaluator that supports numbers, operators, parentheses, vectors, and custom symbols like @rot and @dot, complete with visual demos.
This guide explains how the mongoose-modified-at plugin automatically records publication timestamps for MongoDB documents, covering installation, schema configuration, API options, simplified usage, async support, compatibility with Mongoose 4.x, and test‑coverage details.
This article explains how to emulate Vue's computed properties in React by extracting calculations from the render method, using class getters, applying memoization with memoize-one, and leveraging the useMemo hook to achieve dependency‑based caching and cleaner component code.
The weekly roundup presents concise, actionable articles on font fundamentals, building an AST for arithmetic expressions, cyclomatic complexity metrics, the evolution from HTTP/2 to HTTP/3, native image lazy‑loading, and an overview of CSS Level‑4 selectors, all aimed at front‑end engineers.
This article explains how to implement a lexical analyzer in JavaScript that tokenizes simple arithmetic expressions by using a finite state machine, covering the conversion from infix notation to an abstract syntax tree, token definitions, state transitions, and complete source code examples.
This article explains how to use localStorage, sessionStorage, and the storage event to achieve reliable, side‑effect‑free data synchronization between same‑origin web pages, providing a practical implementation with JavaScript code and detailed design considerations.
WebAssembly enables high‑performance, ahead‑of‑time compiled code to run in browsers, and iQIYI leverages it by writing a C‑based FLV‑to‑MP4 transcoder compiled to Wasm, executed in a Web Worker, which boosts live‑stream conversion speed, reduces CPU usage, and opens doors for further web‑based media processing.
This article explains how to transform raw HTML strings into a structured abstract syntax tree (AST) using JavaScript regular expressions and a step‑by‑step parsing algorithm, covering tag, attribute, and text node handling, with a complete example implementation of a lightweight AST parser.
This article introduces IndexedDB as a client‑side non‑relational database, explains its core concepts and API objects, and provides a step‑by‑step code example for creating, reading, updating, and deleting records, while also recommending helper libraries to simplify development.
This article analyzes the open‑source portfolios of Alibaba, Baidu and Tencent, showing how many projects each company has, the proportion that have been abandoned, language distribution, and the top‑10 abandoned projects by stars, contributors and commits, based on GitHub data up to March 2019.
This article describes how Ctrip's marketing team built the Legao platform—a visual, component‑based front‑end system that enables rapid configuration of thousands of activity pages through reusable business, web, and activity‑level components, detailing its architecture, technology stack, SDK, and dynamic form system.
This article explains how to use Puppeteer to automate interactions with non‑DOM canvas objects in KuJiaLe's web‑based design tools, detailing the underlying API, the automation framework setup, and a step‑by‑step demo of moving a bedroom bed.
This comprehensive guide explains why TypeScript has surpassed JavaScript in popularity, introduces its core concepts, basic and advanced types, generics, interfaces, classes, and modules, and provides step‑by‑step instructions for integrating TypeScript into both frontend and Node.js projects.
This article walks through creating a lightweight Mocha‑like testing framework in JavaScript, covering BDD‑style APIs, directory layout, suite and test class design, hook handling, asynchronous support, a runner that traverses the suite‑test tree, and a reporter that outputs test results.
Webpack transforms entry files into modules through four stages—create, add, build, and processDep—where it generates a module instance via factory hooks, registers it in the compilation, runs loaders and parses the source into an AST, groups and resolves dependencies, and finally prepares the modules for bundling.
This article introduces Puppeteer, a Node library for controlling Chrome, and demonstrates its use in automating web performance analysis and scraping tasks.
The article explains how React Node Desktop (RND) combines React JS, Node.js, and a native UI engine to enable lightweight, cross‑platform desktop apps, then details React Fiber’s architecture—its tagging, workloop, update and commit phases—and describes RND’s JS‑native messaging, bundle splitting, animation support, and future relevance for JavaScript‑driven desktop UI.
This article explains how Webpack's Hot Module Replacement works, covering its benefits, the build and watch processes, the role of webpack-dev-middleware and webpack-hot-middleware, and provides detailed code examples to illustrate the communication between the server and the browser.
This tutorial shows how to convert a traditional class‑based Redux component into a modern functional component using React hooks, covering refactoring to a function component, reading state with useSelector, dispatching actions with useDispatch, and providing complete code examples.
This tutorial explains six different approaches—using z-index, opacity, borders, box‑shadow, element cloning, and canvas—to create a guide overlay (mask layer) that highlights specific page areas without relying on image assets, complete with code examples and visual demos.
This article explains how to create a high‑stability image magnifier in Vue by calculating mask positions based on mouse events, moving the background image accordingly, and optimizing performance with initialization checks and scroll handling, providing full source code and usage instructions.
This article explains the three-stage execution process of JavaScript in V8, compares interpreter and compiler approaches, describes how the JIT combines their strengths, and provides practical tips for writing JavaScript that maximizes performance by leveraging V8’s optimization mechanisms.
This article compares five JavaScript diagramming libraries—DHTMLX, JointJS, Rappid, yFiles for HTML, Google Charts, and GetOrgChart—by examining their features, documentation, and user experience to help developers choose the right tool for creating online organizational charts.
This article explains the main factors that drain battery power on mobile and laptop browsers and provides practical front‑end techniques—such as minimizing timers, using CSS animations, leveraging visibility APIs, and optimizing network requests—to keep web pages energy‑efficient and extend user device battery life.
Although both browsers receive identical data, Chrome and Firefox display sorted results differently due to their distinct underlying sorting algorithms—Firefox uses merge sort while Chrome employs a hybrid of insertion and quick sort—this article explains the issue, demonstrates implementations, and compares performance and optimization techniques.
This article provides an extensive, categorized catalog of JavaScript libraries and tools for front‑end development, covering package managers, loaders, bundlers, testing frameworks, UI components, data visualization, storage, internationalization, security, and many other functional areas of modern web programming.
This article explains the inner workings of Babel, the JavaScript compiler, outlines what syntax it transpiles versus what requires polyfills, describes its three compilation stages, demonstrates AST generation and tokenization, and provides step‑by‑step examples of creating simple Babel plugins for code transformation.
This article explains how modern browsers now support native ES2015 modules, why earlier performance concerns were based on outdated tests, and provides detailed guidance on using Rollup, code‑splitting, dynamic imports, modulepreload, and polyfills to achieve faster, smaller, and future‑proof web applications.
This article introduces the concept of React Hooks, explains the built‑in hooks such as useState, useEffect, useCallback, useMemo, useRef, and useContext, demonstrates their usage with complete code examples, and guides readers on creating their own custom hooks for reusable logic in functional components.
This article explains how to use AST in JavaScript by introducing three essential components—a parser, a traverser, and a code generator—showcasing practical examples with esprima and Babel to parse, modify, and regenerate code, and exploring advanced use cases such as removing console statements, variable obfuscation, arrow‑function conversion, tree‑shaking, and generating SVG flowcharts, while also highlighting AST applications in other languages.
Understanding JavaScript's Abstract Syntax Tree (AST) is crucial for modern code analysis, enabling tools like Babel, ESLint, and Webpack to parse, transform, and generate code beyond regex, with a clear process from lexical analysis to syntax analysis and standardized specifications such as ESTree.
This article introduces the Kangax ES compatibility table, showing how to view new ECMAScript features, their support across browsers and Node.js, and explains the table’s layout, version selectors, and color‑coded compatibility indicators for developers seeking up‑to‑date feature information.
This article explains how to use simple shapes like circles and rectangles for fast 2D collision detection, reviews vector mathematics, provides a reusable Vector2d class with operations such as addition, subtraction, length, dot product and rotation, and shows concrete JavaScript code for circle‑circle, circle‑rectangle (both axis‑aligned and rotated) and rectangle‑rectangle collisions using AABB and OBB techniques.
The article details Webpack’s loader execution pipeline, showing how a shared loaderContext is built for each module, how the loader‑runner pitches loaders in order, then processes the resource and runs each loader’s normal method from right to left, handling synchronous, Promise‑based, and async callbacks via runSyncOrAsync.
This article explains how modern Web Components—custom elements, Shadow DOM, slots, and native element extensions—provide a framework‑free way to build reusable UI, offering better performance, true CSS scoping, and progressive enhancement while discussing when abandoning traditional frameworks makes sense.
This article provides a comprehensive guide to JavaScript functions, covering their various forms, execution contexts, scope chains, arguments handling, return values, the dynamic this keyword, and advanced functional programming techniques such as currying, decoration, and function composition.
This article provides a comprehensive guide to JavaScript’s object model, covering object literals, constructor functions, prototype inheritance, prototype chains, and practical coding patterns, illustrating how to create, extend, and manage objects efficiently in modern frontend development.
This article explains JavaScript’s object model, contrasting class‑based and prototype‑based paradigms, and shows how to create objects with literals, constructor functions, and prototypes, covering property access, method sharing, inheritance, the prototype chain, __proto__, and Object.create for clean, maintainable code.
This article describes the design and architecture of a front‑end monitoring platform, detailing its JS SDK, data analyzer, web UI, reference log‑collection architectures, use of Kafka, MySQL, Hive and HBase, scaling considerations, storage conventions, and operational best practices.
The article explains Webpack loader configuration by detailing rule definitions, inline loader syntax, the symbols that control loader inclusion, the internal parsing and matching process that groups pre, normal, and post loaders, and practical tips for ordering and debugging complex builds.
RND (React Node Desktop) is a lightweight cross‑platform desktop framework that merges a React‑based JavaScript layer, an embedded V8‑powered Node runtime, and a native UI engine (Lyra with Yoga layout), employing a dual‑thread model, shared V8 isolate, asynchronous bridge, modular resource handling with hot‑update, and integrated Chrome/VSCode/Electron debugging.
This article explains how JavaScript engines hoist function and variable declarations, compares the behavior of var, let, and const during creation, initialization, and assignment, and demonstrates the resulting runtime errors and output through clear code examples.
This article explains why and how to use various JavaScript design patterns—such as module, revealing module, ES6 modules, singleton, factory, and decorator—by describing their purpose, benefits, and providing clear code examples while warning against over‑use.
This article explains JavaScript Promises, covering their purpose in avoiding callback hell, the core API (constructor, then, catch, static methods), practical code examples, chaining behavior, comparison with callbacks and async/await, and even a custom implementation, providing a comprehensive guide for frontend developers.
Electron 6.0, the newest stable release, brings Chromium 76, Node.js 12.4, V8 7.6, enhanced Promise support, async dialog APIs, new shell.showItemInFolder, and numerous API improvements such as excludedFromShownWindowsMenu, all_frames support, Linux preview, Touch ID, and more, all installable via npm.
Webpack resolves every import by mapping the request string to an exact file path through a configurable chain of resolver plugins for normal modules, node_modules packages, and loaders, and developers can speed up builds by using aliases, limiting module directories, and keeping extensions short.
The article presents a scalable ESLint‑based framework for large front‑end teams that combines a layered, unified rule configuration, CI/CD and pre‑commit lint checks, a one‑click onboarding CLI, and automated metrics collection with dashboards, enabling consistent code standards across diverse projects while reducing maintenance overhead.
This article reveals eight lesser‑known DOM and Web API features—such as addEventListener options, smooth scrollTo, optional timer arguments, defaultChecked, normalize/wholeText, insertAdjacent methods, event.detail, and scrollHeight/scrollWidth—explaining their purpose, browser support, and providing practical code examples.
This article explains how to calculate object positions using a parabolic formula, generate multiple translucent shadows to simulate motion blur, and implement the entire effect with JavaScript, covering parameter selection, acceleration calculations, and practical code examples for smooth front‑end animations.
This article explains the inner workings of Tapable—the hook library behind Webpack—by detailing its synchronous and asynchronous hook types, registration and invocation methods, the lazy‑compilation code‑generation process, and how these mechanisms give Webpack a performance edge over naïve event loops.
This article explains the evolution of Google V8's Promise implementation, details the JavaScript single‑threaded event loop with macro‑ and micro‑tasks, describes various programming models, and walks through the internal V8 code that realizes Promise construction, chaining, and utility methods such as Promise.all and Promise.race.
This article explains how the V8 JavaScript engine generates machine code for floating‑point addition on Intel x64, covering V8’s architecture, the IEEE‑754 representation that causes precision loss, and a step‑by‑step analysis of the relevant C++ source and the resulting addsd instruction.
This article reviews the evolution of front‑end programming languages, discusses why extreme attitudes toward language choice hinder productive discussion, explains how platform constraints shape language selection, examines the strengths and weaknesses of JavaScript, Java, and Objective‑C, and predicts increasing convergence and cross‑platform trends among modern front‑end languages.
The article dissects Webpack’s internals, showing how every asset becomes a module processed by loaders, how the bootstrap creates a __webpack_require__ function to link modules, how dynamic import() generates separate chunks loaded via script tags, and outlines the full compilation pipeline from configuration parsing to final asset emission.
This article walks through the background, monetization considerations, and detailed implementation steps—including canvas creation, enemy and player sprites, movement, collision detection, and touch handling—required to develop a basic WeChat mini‑game, with full code snippets and resource links.
This article introduces MXFlutter, a JavaScript‑based dynamic framework that enables full‑runtime UI updates for Flutter apps on iOS, explains its architecture, code implementation, performance advantages over Dart VM, and discusses rendering optimizations, memory management, threading, and developer ergonomics.
Front‑end monitoring must capture JavaScript runtime errors, resource loading failures, unhandled promise rejections, and asynchronous request issues using window.onerror, error event listeners, unhandledrejection handlers, and fetch/XHR wrappers, while also handling framework‑specific hooks and cross‑origin script restrictions through CORS or manual try‑catch reporting.
This article explains JavaScript’s event mechanism, distinguishes macro‑ and micro‑tasks, and provides a comprehensive guide to using Promises—including their states, API methods like then, catch, finally, and utilities such as all, race, with practical code examples and common pitfalls.
This article explains the Template Method design pattern, illustrates it with real-world soup recipes, provides JavaScript code simulations for both abstract and concrete classes, compares the processes, and discusses abstract class limitations in JavaScript, offering a clear guide to implementing the pattern.
Understanding how JavaScript engines work—covering scopes, closures, and the event queue—empowers developers to debug more effectively and write more efficient code, and this guide offers a clear, beginner‑friendly overview that bridges theory and practical application.
This tutorial explores why the .reduce() method feels intimidating, demonstrates its basic usage with addition and multiplication, and then showcases five unconventional applications—including converting arrays to objects, flattening nested arrays, performing dual calculations in a single pass, merging map and filter, and sequencing asynchronous calls—while providing clear code examples and performance considerations.
Mpx 2.0 is an enhanced mini‑program framework that provides full cross‑platform support for WeChat, Alipay, Baidu, Toutiao and QQ, enabling developers to compile existing WeChat projects and native components to other platforms while offering sub‑package optimization, conditional compilation, setData efficiency and near‑zero migration effort.
Discover how a playful setTimeout‑based sorting trick leverages JavaScript’s event loop to produce correct ordering, while explaining the core concepts of synchronous vs asynchronous tasks, the execution stack, task queue, and why this method isn’t practical for large datasets.
