This article shows front‑end developers how to overcome missing back‑end services by using IndexedDB with Dexie.js to create a mock API, structuring a simple message‑board app, and leveraging Vuex for clean separation, enabling rapid development and easier later integration.
This article introduces Chrome extension fundamentals, outlines its core components and APIs, and provides a step‑by‑step guide—including server‑side WebSocket handling, content‑script communication, popup QR‑code generation, and installation methods—to create a flip‑pen remote‑control plugin.
This article explains how permission control is re‑designed for front‑end/back‑end separated applications, defining resources and permissions, outlining the distinct responsibilities of front‑end routing and component rendering versus back‑end API validation, and providing practical implementation examples in React and Java.
An interview with a front‑end engineer at Pornhub reveals how the site handles massive video content, performance monitoring, modern Web APIs, and its evolving tech stack, offering practical insights into large‑scale web development and the unique challenges of the adult‑industry platform.
This article details Fliggy's year‑long journey of designing, building, and iterating a unified Serverless (FaaS) platform that unified front‑end and back‑end workflows, reduced operational overhead, and now powers over a dozen business scenarios with millions of daily function calls.
This guide walks you through a step‑by‑step method to add and switch custom Grafana themes using the Boom Theme panel plugin and ready‑made theme packs from GitHub, enabling theme changes across dashboards without modifying Grafana's source code.
This guide explains how to use Vue Router and Vuex to implement dynamic menu permission control in a Vue-based admin project, covering router splitting, permission module creation, state management, and menu binding to achieve role-based navigation.
This article introduces the Quill rich‑text editor, explains its built‑in modules, details the toolbar module loading process, and walks through creating a custom counter module, providing code examples and configuration tips for extending Quill in frontend projects.
This step‑by‑step guide shows how beginners can create a personal blog on GitHub Pages using the Fast.ai template without writing code or using the command line, covering repository creation, homepage setup, Markdown editing, post management, image insertion, TOC generation, and math rendering.
This article recounts the half‑year journey of migrating the Wow Video short‑video shopping feature to a Serverless Node FaaS architecture, highlighting high‑traffic challenges, development pain points, the upgraded R&D model, migration steps, monitoring tools, and the strategic decisions that shaped the front‑end team's evolution.
This article recounts the six‑month journey of migrating the Waou Video short‑video shopping feature to a Serverless Node FaaS architecture, highlighting business characteristics, development pain points, the upgraded R&D model, migration steps, performance gains, and future considerations for front‑end engineers.
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 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.
The NetEase News client boosts H5 performance by packaging static pages into zip files for native offline storage, intercepting WebView requests, redesigning a symmetric JsBridge with unified message IDs and namespaces, and adding pre‑request and WebView pooling, cutting load time from ~943 ms to ~391 ms and improving first‑load speed by up to 75 %.
JD Central’s 2019 merchant‑center overhaul transformed a fragmented, hard‑to‑use backend into a unified, efficient platform through intensive cross‑team collaboration, rapid component‑based development, and focused user‑experience research, delivering two versions on schedule and earning strong merchant praise.
The article explains how V8 implements JavaScript arrays using two storage strategies—Fast Elements with contiguous memory that dynamically resizes, and Slow Elements backed by a hash table—detailing the heuristics for converting between them and contrasting this design with traditional fixed‑type, fixed‑size arrays.
The article describes a full‑stack performance monitoring system for WeChat Mini Programs presented by Niu Tifa, covering Mini Program architecture fundamentals, a monitoring system architecture using a JS SDK, Druid, Elasticsearch, and practical applications like load timing, error handling, fallback strategies, with dashboards and alerts, emphasizing low request volume and non‑intrusive monitoring.
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.
GCanvas is a lightweight, W3C‑compliant graphics engine that evolved from H5 acceleration to server‑side rendering, offering front‑end developers high‑performance canvas rendering, extensive platform support, and detailed optimization techniques such as JSBinding and Metal integration.
This article explains Vue’s provide/inject API, how it enables ancestor components to share data with any descendant, compares it to Vuex for global state, shows practical code examples, discusses limitations and best‑practice guidelines, and demonstrates its use in component libraries like Element UI.
This article recounts a four‑month journey of moving the high‑traffic "Wow Video" short‑video shopping service to a Node.js FaaS platform, detailing the business background, development workflow, pain points, migration strategy, and the technical and personal growth experienced along the way.
Tencent’s 2020 frontend forecast builds on 2019’s TypeScript‑driven framework maturity, booming mini‑programs, and cross‑platform shifts toward Flutter and SwiftUI, while predicting cloud‑based serverless architectures, 5G‑enabled SSR and WebAssembly, and continued performance‑focused innovations across mini‑programs and cross‑platform development.
This article explains the differences between responsive and adaptive web design, when to choose each approach, essential grid and media‑query techniques, and practical tips such as using icon fonts and setting breakpoints based on content rather than device sizes.
This article examines the evolution of CSS from its early specifications through CSS3 modules, compares native CSS capabilities such as custom properties, calc() and nesting with traditional preprocessors like Sass, Less and Stylus, and evaluates whether preprocessors will become merely transitional tools.
This article explores the challenges of adapting web interfaces for foldable smartphones, reviews current devices, explains why responsive design is the core solution, outlines nine fundamental principles, highlights common pitfalls, and envisions future interaction possibilities for developers.
Kbone is an open-source framework by WeChat enabling Vue apps to compile to both web and mini‑programs via a fake DOM adapter, allowing reuse of Vue code, custom components, and minimal changes, with performance acceptable for typical mini‑program pages.
This article explains why standardized component libraries are essential for large‑scale products, outlines design principles, color and layout guidelines, categorizes components, and demonstrates how FishDesign’s enterprise UI library improves consistency, efficiency, and collaboration across product, design, and development teams.
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.
This article explains how to build a Chrome extension that integrates with the Hunter distributed tracing system to automatically capture failing API calls during web testing, visualize request chains, and improve debugging efficiency, including manifest configuration, background and popup scripts, and implementation details.
Maoyan Entertainment created the “Tangtu” mini‑program operation tool with WeChat Cloud Development, letting operations and product managers visually design, edit and publish holiday activities via cloud storage, database and functions, cutting staff from three to one, slashing development time and cost while highlighting the need for explicit environment variables and careful migration from traditional MySQL services.
Learn how the Mt.Mograph Motion and Bodymovin plugins streamline creating and exporting After Effects animations, offering quick axis adjustments, curve editing, bounce effects, and seamless Lottie integration for web and mobile front‑end development.
This guide explains how to set up the development environment and debug WeChat mini‑programs using the official developer tools, covering native, WePY, Taro, and mpvue frameworks with step‑by‑step instructions, command examples, and visual screenshots.
This article introduces Puppeteer, a Node library for controlling Chrome, and demonstrates its use in automating web performance analysis and scraping tasks.
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 article outlines a comprehensive full‑stack developer skill roadmap, highlighting why expanding your skill set is essential, the common technologies all engineers should know, and a customizable list of core competencies ranging from backend frameworks to communication abilities.
The August 17 “Mini‑Program·Cloud Development” salon explained how Tencent Cloud’s server‑less BaaS/FaaS platform lets WeChat mini‑game developers replace traditional H5 back‑ends with lightweight cloud functions, databases and CDN storage, cutting development time from hours to minutes, while supporting real‑time sync, token management, and future SDK expansions.
This article reviews various Vue.js component communication techniques—including Props, $emit/$on, Vuex, $attrs/$listeners, Provider/Inject, and $parent/$children/$refs—providing explanations, usage scenarios, and code examples to help developers choose the appropriate method for parent-child, sibling, or cross-level data exchange.
The guide shows non‑game developers how to master WeChat mini‑game creation using the 2W1H framework, covering what mini games are, why they boost brand exposure, how to learn via CreateJS and Cocos Creator, and leveraging Mini Program Cloud for full‑stack backend support.
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 explains serverless concepts for front‑end developers, outlines its evolution, benefits, and architecture—including BFF layers and SSR—then demonstrates a complete vocabulary mini‑program built with cloud functions, storage, monitoring, debugging, testing, deployment, and operational best practices.
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 explains why 1 px borders appear thick on high‑resolution mobile devices, explores the role of devicePixelRatio, and presents five practical solutions—including iOS 0.5 px borders, border‑image, box‑shadow, pseudo‑elements, and viewport scaling—along with their pros, cons, and common pitfalls.
This article details how a team of web developers chose Electron to create a cross‑platform PC client for the teaching tool "Classroom Optimization Master", describing the technology stack, successive architectural evolutions, performance improvements, and lessons learned about modular design and hot updates.
This article explains how container technology, including Docker and Kubernetes, empowers modern frontend development by improving build isolation, accelerating testing, enabling rapid rollbacks, and providing stable, scalable deployment pipelines for web, mobile, and mini‑program applications.
This article provides a comprehensive, step‑by‑step exploration of modern browsers—covering Chrome’s multi‑process architecture, the navigation pipeline from URL entry to page load, the rendering stages (HTML parsing, style calculation, layout, painting, compositing), and how user interactions are processed and optimized.
The article chronicles San, Baidu’s MVVM framework, detailing how template parsing, hotspot pre‑heating, cloneNode element creation, property‑handler caching, traversal interruption, list‑rendering shortcuts like trackBy, and numerous micro‑optimizations such as avoiding call/apply and extra loops collectively boost view creation and update performance.
This article compares popular web technology stacks such as LAMP and MEAN, explains their components and derivatives, discusses other options like WISA, Ruby, Java‑Spring and Django, and provides practical guidance on how to select the most suitable stack for a project.
The ANNO platform unifies iQIYI’s AI data annotation by defining an abstract model—media records, HITs, partitions, and hitsets—driving a modular Vue.js front‑end that flexibly handles diverse media, annotation modes, and workflows, while AI‑assisted pre‑labeling cuts labeling time and supports scalable, secure, collaborative development.
This article explains the Inversion of Control (IoC) pattern and its Dependency Injection implementation, showing how a simple container can decouple modules, improve modularity, speed up development, and make unit testing easier for front‑end JavaScript/TypeScript projects.
This article explains why browser caching is essential for performance, outlines its benefits, common scenarios, and details various cache types—including data, storage, and HTTP header caches—while providing practical strategies for implementation and updates.
This comprehensive guide walks front‑end developers through installing Vim, mastering core editing commands, configuring a .vimrc file, and integrating a curated set of plugins for navigation, code completion, syntax highlighting, linting, Git, markdown preview, Emmet, and automatic formatting.
Developers must decide where rendering occurs—server-side, client-side, static generation, or rehydration—by understanding key terms, performance metrics like TTFB, FP, FCP, and TTI, and weighing trade‑offs such as speed, resource usage, SEO impact, and complexity across modern frameworks.
This guide introduces 18 essential Chrome extensions—from ad blockers and JSON viewers to Git history visualizers and script managers—that can dramatically improve a developer's workflow, streamline debugging, and enhance everyday browsing tasks.
The article shares personal stories of Chinese individuals whose everyday perception of sunsets and objects is muted by color‑weakness, explains that about 8 % of men and 0.5 % of women are affected, and highlights emerging aids such as EnChroma glasses, software tools, and large‑scale video‑streaming color‑weak modes that improve accessibility and underscore engineers’ role in creating inclusive visual experiences.
The article argues that true developer competence lies in deep architectural and design skills—covering physical storage, caching, data structures, and modular software design—rather than constantly chasing the latest languages or frameworks across backend, frontend, and mobile development.
This article introduces Babel as a popular JavaScript compiler, explains its origin, demonstrates basic installation and configuration, shows how arrow functions are transformed, and guides readers through creating a simple custom Babel plugin using visitors and AST manipulation.
This article explains the challenges of manual mock data creation in fast‑paced front‑end projects, compares existing solutions, and presents SMock—a Swagger‑driven tool that automatically generates mock data, starts a local service, aggregates API paths, validates requests, and boosts development efficiency.
This article explains how the Flutter team adapted Flutter's multi‑layer architecture to run on the Web, describing the three prototype approaches, the rendering, layout and painting strategies, CSS Paint API experiments, embedding considerations, portability limits, and the current implementation status.
The article argues that despite some programmers dismissing CSS as merely declarative, CSS selectors are powerful conditional tools that can express complex logic, and explains why methodologies like BEM and OOCSS intentionally limit their use to keep styles maintainable.
This article explains the background, requirements, core design, overall architecture, data structures, component model, property editing system, animation support, composite components, and template handling of the Maliang H5 online page‑creation platform, illustrating how it enables rapid, extensible marketing activity development for a large‑scale operation.
JDFlutter is a new cross-platform development framework introduced by the mobile development team at JD.com, designed to integrate with existing Android/iOS apps and provide a high-performance alternative to React Native.
Netflix improved the registration experience on its desktop site by replacing most React code with native JavaScript, reducing bundle size by over 200 KB and cutting interaction time by more than 50 %, while prefetching resources to further shrink time‑to‑interactive by 30 %.
This article explains the Virtual DOM concept, outlines a state‑driven rendering approach, implements a minimal Virtual DOM (VD) structure, creates a diff algorithm to generate patch objects, applies those patches to the real DOM, and compares its performance with full re‑rendering.
This tutorial walks developers through registering a WeChat Mini Program, setting up the Small Photo Album demo, configuring HTTPS domains and SSL, deploying a Node.js backend with Nginx, integrating Tencent Cloud COS for image storage, and testing the complete end‑to‑end photo‑album application.
This tutorial walks you through creating a fully functional progressive web app (PWA) game using Preact, covering functional requirements, UI design, routing, component implementation, game logic, offline support, and deployment in a clear, step‑by‑step manner.
This article introduces ten indispensable JavaScript array methods—including forEach, includes, filter, map, reduce, some, every, sort, Array.from, and Array.of—explaining their purpose, usage, and providing visual examples to help developers efficiently manipulate arrays in web development.
This article introduces the ANU mini‑program framework, explains why WeChat mini‑programs need transpilation tools, compares existing solutions, details ANU's features and limitations, and provides step‑by‑step instructions with code examples for building and running a React‑like mini‑program project.
This guide walks developers through creating a WeChat Mini Program using Tencent Cloud's Serverless Cloud Functions, covering IDE installation, project configuration, cloud environment setup, file upload, cloud‑function development, and invoking functions from the Mini Program, enabling a fully serverless backend without traditional servers.
This article explains why a unified Generic Sensor API is needed, lists the sensors it supports, and provides step‑by‑step JavaScript examples for creating, configuring, and using sensors such as gyroscope, accelerometer, ambient light, magnetometer, and composite orientation sensors, while also covering privacy considerations and future extensions.
This article walks through setting up a .NET Core project, initializing a Vue.js application with vue‑cli, configuring webpack to output to wwwroot, and automating front‑end builds within the .NET Core build process, enabling seamless front‑end and back‑end integration.
Xianyu introduced a lightweight data‑aggregation service and adopted Alibaba’s TQL GraphQL gateway, allowing front‑ends to fetch multiple domain data in a single request, which cut development costs by over 50%, reduced latency, and accelerated page composition across more than 30 pages.
Learn how to configure VSCode user snippets for React, reducing repetitive import statements and boilerplate by defining reusable code templates, with clear step‑by‑step instructions and practical tips for faster component creation.
This tutorial walks you through creating a configurable lottery wheel using Canvas in a WeChat Mini Program, covering the overall concept, required WXML layout, animation setup, interactive button handling, and how to display prize rules, with a complete code example.
This article introduces Python as a high‑level language and explains the concept of graphical user interfaces before reviewing thirteen popular Python GUI libraries, highlighting their main features, platforms, and typical use cases for developers.
The article contrasts push‑based reactive programming with imperative code, then walks through a simple EventEmitter with manual cleanup, examines Redux’s store subscriptions and middleware overhead, explores Mobx’s automatic dependency tracking via getters, setters and autorun, and compares the boilerplate, performance, and hidden‑dependency trade‑offs before previewing a future post on using Observables for asynchronous events.
Alibaba engineers created a two‑week “smile check‑in” system that uses facial recognition and Three.js to turn annual meeting entrances into an interactive 3D “smile planet,” displaying participants’ avatars, nicknames and smile scores in real time while optimizing performance for large‑screen displays.
In this interview, Hulu senior engineer Cheng Mo shares how the company transitioned from jQuery and Backbone to React, discusses the challenges of server‑side rendering, offers practical advice on framework selection, learning curves, React's future, and tips for front‑end developers preparing for interviews.
Nicolas C. Zakas, renowned JavaScript expert and creator of ESLint, offers his comprehensive, open‑source online version of the published book *Understanding ECMAScript 6*, which explains ES6 syntax, new features, and their rationale compared to ES5, making it essential reading for any JavaScript developer.
This article provides a step‑by‑step tutorial on building a simple ThinkJS + Vue2 project with separate user and admin pages, covering directory layout, proxy setup, multi‑page webpack configuration, server routing, API creation, adding new pages, and production build deployment.
The article details the design, features, and technical implementation of the Tencent Dajia WeChat mini‑program, explaining how it aggregates high‑quality Chinese internet content, supports multi‑device data sharing, author and column management, user login, collection, sharing, commenting, and analytics, while providing practical code snippets and development tips for front‑end engineers.
This article introduces the React‑Sketchapp tool for generating Sketch design assets from code, explains why code‑based design generation is beneficial, provides step‑by‑step setup commands, showcases example components and API usage, and reflects on its impact on design‑development workflows.
This article examines the rapid rise of WeChat mini programs and fast apps, their market impact, technical architecture, development workflow, key frameworks such as WePY and mpVue, code examples, and the opportunities and challenges they present for front‑end developers on mobile platforms.
This article introduces the Quick App platform, explains its front‑end‑based architecture, provides a step‑by‑step Windows setup and project initialization guide, showcases UI layout and JavaScript code examples, compares it with Mini‑Programs and JDReact, and offers resources for developers interested in rapid, install‑free mobile app development.
This guide introduces Quick Apps, explains their front‑end‑centric architecture, walks through environment setup, project initialization, UI layout, JavaScript logic, debugging, deep linking, and compares Quick Apps with WeChat Mini‑Programs and JDReact, providing practical code snippets and tips for Android developers.
JSSDK is a JavaScript SDK that enables H5 developers to quickly integrate JD app features such as sharing, deep linking, and native function calls across platforms, offering modular, version‑compatible, and type‑safe APIs to streamline mobile web development.
This article explains how to build lightweight, reusable custom components in WeChat Mini Programs, covering the evolution from basic template imports to full‑featured custom components, the differences between import and include methods, component configuration, event handling, and popular third‑party frameworks such as WePY and mpvue.
Discover a curated list of powerful Chrome extensions that can dramatically improve developers' productivity, from memory‑saving tab managers to ad blockers, code viewers, note‑taking tools, HTTP clients, translation aids, script managers, visual themes, and video downloaders.
This article explains what a Webpack loader is, how it works, how to configure single or multiple loaders in webpack.config.js, best‑practice guidelines, and provides a complete example of an html‑minify loader with both synchronous and asynchronous implementations.
This article walks through creating a React application without scaffolding tools, detailing project directory layout, chosen technology stack—including React, Redux, Immutable.js, react-router, redux-saga, and related debugging and persistence utilities—while explaining component design, middleware, enhancers, routing, and asynchronous task management.
This article reviews a series of JavaScript web‑framework comparisons, outlining why using a framework matters, summarizing the pros, cons, and future directions of Angular 2+, React + Redux, Vue.js, Dojo 2, Ember, and Aurelia to help developers and teams make informed choices.
This article explains how Electron lets web developers create cross‑platform desktop applications with familiar JavaScript and Node.js, compares it to NW.js, outlines learning stages, offers documentation tips, and provides guidance on selecting and extending useful demo projects.
This article explains the differences between WeChat Mini Programs and H5, details the custom runtime environment, demonstrates performance differences, shows how to wrap callback‑based APIs with Promises, introduces component‑based development, and integrates Redux for state management with code examples.
This guide walks you through the fundamentals of Chrome extension development, covering what extensions are, their architecture—including content scripts, popup, and background pages—message passing, sample manifest and code, and the steps to package and publish your extension to the Chrome Web Store.
Understanding JavaScript parsers—such as Esprima, Acorn, and Babylon—reveals how they generate ASTs, validate syntax, prioritize operators, and more, while distinguishing eager from lazy parsing modes in V8, enabling developers to optimize code performance through tools like optimize-js.
This guide explains how to create reusable custom input components in Vue.js, covering the fundamentals of v-model, implementing custom radio buttons and checkboxes, handling single and multiple selections, and providing complete code examples for building robust form controls.
Facebook announced it will relicense React, Jest, Flow, and Immutable.js to MIT, sparking backlash from the developer community and prompting companies like Apache, WordPress, and Baidu to reconsider their use of React, while the company explains its reasoning and future plans.
This article walks through using NetEase's NEJ framework to decompose a complex single‑page web application into hierarchical modules, create and format dependency trees, register external and layout modules, define module directories, implement module logic and messaging, and finally integrate and package the system for scalable deployment.
This article presents a comprehensive WeChat Mini Program tutorial, outlining the course curriculum from introductory to advanced chapters, and provides step‑by‑step instructions for installing and configuring the WeChat Web Developer Tool on macOS, including project creation, appID setup, and debugging workflow.
This article walks through the reverse‑engineering of a compact JavaScript one‑liner that draws a patterned image, refactors it into readable modules, explains each transformation—including variable renaming, loop conversion, ternary expansion, bitwise operations, and switch‑case replacement—while illustrating the underlying math with graphs and code snippets.
This article explains Angular’s component lifecycle, detailing each hook—from ngOnChanges and ngOnInit to ngAfterViewChecked and ngOnDestroy—their execution order, purposes, and how constructors differ, supplemented with diagrams and console output examples to help developers effectively manage component initialization, change detection, and cleanup.
