This article explains how to create a long‑press button in a Vue application by using native JavaScript events, timers, and a custom Vue directive, covering variable setup, start and cancel functions, event listeners for mouse and touch, and error handling for non‑function bindings.
During the COVID‑19 pandemic, Tencent Classroom’s front‑end team faced unprecedented traffic spikes, forcing rapid decisions on domain stability, video streaming, data platforms, messaging, monitoring, and deployment pipelines, while sharing lessons on scaling, resilience, and collaborative development under extreme pressure.
The article introduces SpriteJS's new 3D extension built on the lightweight OGL library, compares it with popular 3D engines, explains its DOM‑friendly API, and provides extensive code examples for creating cubes, meshes, lighting, shadows, video textures, panoramic scenes, and advanced effects such as render targets and GPGPU, demonstrating high performance and ease of use for front‑end developers.
Postwoman is a lightweight, open‑source, browser‑run alternative to Postman that supports multiple HTTP methods, request validation, real‑time responses, and a rich set of features such as PWA support, WebSocket testing, customizable scripts, and Docker deployment, with step‑by‑step installation instructions and handy keyboard shortcuts.
The article explores how frontend development will evolve over the next decade, covering the rise of TypeScript, the shift toward language‑agnostic WebAssembly, bundless builds, micro‑UI architectures, AI‑driven interfaces, and the move to serverless end‑to‑end development.
This article explains why jQuery is unnecessary when using Vue.js with Bootstrap, shows how to replace Bootstrap's jQuery plugins with vue-strap or custom Vue components, and provides complete code examples for tabs and modal dialogs.
This article explores the upcoming ten‑year evolution of front‑end development, covering TypeScript's role, the shift toward language‑agnostic WebAssembly, emerging micro‑UI concepts, AI‑driven interfaces, serverless end‑to‑end workflows, and how browser and cloud advances will reshape building and delivering web experiences.
The article explains front‑end development as browser‑side code that renders HTML skeleton, CSS styling, and JavaScript interactivity, traces the full request‑to‑display lifecycle, recounts JavaScript’s history from 1995 to ES6, and surveys evolving paradigms such as Ajax, MVC, MVVM, SPA, SSR, and full‑stack Node.
This article details how Zhenkun's frontend team responded to fast business growth by unifying their tech stack—introducing a private npm registry, a custom CLI scaffolding tool, Node.js backend, mock services, standardized webpack builds, DevOps automation, static resource delivery, monitoring, visual editors, UI component libraries, and automated testing—to boost development efficiency and maintainability across multiple locations.
This article explores how AI-driven front‑end code generation—from design‑to‑code pipelines, product analyses, technical challenges, and layered recognition models—to improve developer efficiency, detailing the D2C system, its real‑world deployment during 2019 Double‑11, and future roadmap.
The article presents the RxAsync Angular directive, which uses ObservableInput and RxJS to simplify asynchronous UI patterns by automatically managing loading, reload, and retry states, providing a clear, reactive alternative to complex imperative code.
This article explains how the front‑end team built an internal visual dashboard framework called “Big” to replace manual coding and costly third‑party services, detailing its architecture, component design, editing workflow, code snippets, challenges, and future improvements.
The article explains the challenges of growing codebases in frontend projects and presents componentization as a systematic approach to achieve modular, reusable, and low‑coupled code, improving development efficiency, collaboration, and maintainability for long‑term, multi‑team applications.
The document outlines AutoBI, a company‑wide one‑stop data visualization platform, detailing its background, overall architecture, key technical components such as real‑time/offline data switching and query processing, integration capabilities, and practical case studies, highlighting efficiency gains and future development plans.
This article chronicles the author’s journey from early web development in university to senior frontend engineering at Alibaba, highlighting pivotal experiences, mindset shifts, productization of expertise, and practical insights on building scalable frontend solutions and fostering cross‑team collaboration.
This article chronicles Ziqian’s journey from university web projects to senior front‑end engineering at Alibaba, highlighting how passion, breaking conventions, productizing expertise, and proactive teamwork transformed personal experience into organizational capability and high‑impact front‑end solutions.
This article explains how the evolution of frontend technologies led to engineering challenges and presents a comprehensive, layered solution—including goal definition, architecture design, CLI tooling, schematics, and CI integration—that streamlines project initialization, development, resource reuse, and upgrades while improving productivity and maintainability.
This article explains how Alibaba's ticketing platform redesigned its seat‑drawing system to handle venues with up to 100,000 seats by replacing Flash with a Canvas‑based SVG solution, optimizing data loading, implementing bezier‑curve seat deformation, efficient printing order calculation, and adding advanced editing features.
This article introduces the design and implementation of a web data‑tracking and analysis platform, covering its four‑module architecture, code‑based and visual tracking methods, collected event and user fields, visualization dashboards, and a practical e‑commerce search‑flow case study.
This article surveys the ten most promising Chinese front‑end frameworks of 2019‑2020, such as Ramda, WeUI, ColorUI, Omi, Taro, Flutter, SpriteJS, NestJS, DoKit and imgcook, highlighting their origins, key features, ecosystem support and GitHub popularity to illustrate the rapid evolution of front‑end technology.
This article explains how Rax's Server‑Side Rendering delivers six‑times the performance of React, outlines the challenges of SSR development, and shows how Serverless integration can simplify deployment while maintaining superior rendering speed, especially on weak networks.
The article traces the historical evolution from tightly coupled JSP/Servlet MVC architectures through semi‑separated Ajax/SPA patterns to fully decoupled front‑end/back‑end separation, highlighting the advantages of introducing Node.js as a middle‑layer to improve adaptability, performance, and development efficiency.
This article details the challenges and solutions encountered while implementing inline video playback, audio handling, canvas snow effects, progressive animations, and performance optimizations for a Christmas-themed year‑end activity page, providing practical code snippets and best‑practice recommendations for front‑end developers.
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 article presents a complete tutorial on setting up and using Jest, Enzyme, and react‑hooks‑testing‑library for unit testing React and React Native applications, covering environment configuration, simple function tests, lifecycle hooks, mocking, snapshot testing, asynchronous tests, Redux and Hook testing, as well as coverage reporting and CI integration.
This article outlines practical strategies—including parallel execution, cloud‑based testing, staged testing, robust test scripts, compatibility matrices, browser‑difference awareness, crowdsourced resources, market‑share analysis, automated screenshot capture, and early localization checks—to overcome the challenges of cross‑browser testing for web applications.
This article shares practical insights and a structured framework for frontend team leaders on recruiting, cultivating talent, managing performance, building culture, and leveraging data to scale a mid‑size frontend group from a few members to over fifty engineers while aligning with business goals.
Discover seven free online tools that let designers quickly generate stunning poster backgrounds, royalty‑free AI‑generated portraits, high‑quality GIFs, glitch effects, TikTok‑style fonts, polygonal shaders, and symmetrical silk‑like graphics, all with simple parameter tweaks.
This article explains how JD’s self‑built Mart Page Maker (MPM) enables large‑scale e‑commerce teams to create complex marketplace pages instantly without coding, by leveraging rich component templates, a three‑layer configuration model, unified data sources, and a high‑performance Node rendering layer.
This article explains how improper cache‑control settings cause stale styles on repeat visits and provides a step‑by‑step guide to using ETag, Last‑Modified, and Cache‑Control directives—plus build‑tool tricks—to keep every user’s browser always serving the latest version of your website.
The article outlines ZheZhe's live streaming system for e‑commerce, describing its recording‑encoding‑transmission‑decoding‑playback architecture, key testing areas such as stream quality, messaging and business functions, and the automated solutions—including a message‑simulation service and Python‑Puppeteer checks—implemented to improve reliability and efficiency.
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 explains the legal landscape of font copyright in China, outlines which uses require permission, clarifies common misconceptions about popular fonts like Microsoft Yahei, and provides a curated list of free or freely licensed fonts for safe commercial use in web projects.
This article explains how to use Webpack's tree‑shaking and compile‑time environment injection to remove unnecessary platform‑specific code, refactor components, and run parallel builds, dramatically reducing bundle size and build time for multi‑platform web applications.
This article explores how subtle UI design choices—such as streamlined handling of disabled cellular network permissions and context‑aware modal dialogs—can break the homogeneity of mobile apps and significantly improve overall user experience.
This article explains how Alibaba's Frontend Intelligent Project automatically generated 79.34% of the Double‑11 page code by recognizing business modules from visual drafts using data‑augmented samples, traditional multi‑class machine‑learning models, and a pipeline of preprocessing, model training, deployment, and OOD handling.
This guide explains why UI design specifications are essential for product consistency, outlines the benefits for designers, developers, and newcomers, and provides a step‑by‑step process—from defining design principles and base guidelines to creating component libraries and iterating the system over time.
Nohost, built on the open‑source Whistle proxy, offers a centralized, multi‑user, multi‑environment configuration and packet‑capture solution that lets developers, testers, and product teams instantly switch and share environments, automate CI integration, and streamline debugging across PC, H5, and mini‑program platforms.
The Serverless Technology Salon in Shanghai on December 28, 2023 will showcase how serverless architecture combined with 5G, the Serverless Framework, SSR and frontend tools can accelerate development, reduce costs, and include hands‑on tutorials, expert talks, and exclusive giveaways for participants.
This article analyzes the rapid evolution of front‑end development, examines emerging IDE trends and industry players, and proposes a unified, cloud‑native IDE strategy that integrates business and technical perspectives to boost development efficiency across diverse front‑end scenarios.
This article describes how the author reduced a multi‑project frontend application's webpack build time by over 60% through dynamic entry configuration, environment‑variable driven builds, and caching of expensive loaders, providing code examples and performance results.
This article explains how to scrape all of your Zhihu saved collections using a Python crawler, store the data in JSON files, and then serve it through a Flask backend API and a Vue.js single‑page front‑end, complete with screenshots and full source code.
The article describes a server‑driven, H5‑based dynamic layout architecture for Huajiao's multi‑party voice chat, detailing its design principles, benefits such as reduced client development, flexible layout switching, and the interaction mechanisms among server, H5 front‑end, and client.
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.
The article analyzes worldwide web‑browser market share, highlights the most important browsers by continent and device, and offers practical guidance for prioritizing cross‑browser testing to ensure consistent user experiences across diverse platforms.
The article explains Huajiao's server‑and‑H5 driven dynamic layout architecture for multi‑user voice rooms, detailing its design principles, benefits, three core concepts, synchronization mechanisms, interaction flow, and how it drastically reduces client development effort while supporting flexible, real‑time UI changes.
This article explores the evolution of frontend build tools, examines the opportunities and challenges of moving to a browser‑based, bundless workflow, and presents the Gravity architecture—including its plugin system, compilation chain, in‑browser file system, and service‑oriented package management—as a vision for the future of lightweight, cloud‑ready development.
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.
By combining server‑side rendering, critical‑render‑path tuning, resource minification, image format upgrades, and RAIL‑based multi‑dimensional monitoring, JD dramatically reduced its WeChat shopping homepage’s first‑screen load time, offering a practical roadmap for front‑end performance optimization.
This article explores the impact of cloud computing on front‑end development, explains why serverless Node.js is essential today, provides step‑by‑step instructions for setting up Fission on Kubernetes, and discusses cloud‑native IDEs and future trends for front‑end engineers.
This article explores practical code‑formatting guidelines for Angular projects, arguing that a 100‑character line width balances readability and compactness, and offering concrete recommendations for template layout, attribute ordering, and function formatting using VS Code and Prettier.
This article chronicles an Alibaba front‑end specialist’s eleven‑year progression from a fresh graduate to a P9 senior engineer, detailing technical challenges, project leadership, system redesigns, and personal insights on growth, teamwork, and career development within a large tech organization.
Taro is a React‑based framework that lets developers write a single codebase to create mini‑programs for multiple platforms—including WeChat, Alipay, Baidu, and more—as well as H5 and native apps, dramatically reducing development effort and increasing efficiency.
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 explains how Alibaba's Frontend Intelligent project uses design‑to‑code techniques, component recognition with YOLO, and a full pipeline of sample creation, model training, evaluation, and prediction refinement to automatically generate a large portion of the Double‑11 event code.
Continuity editing rules, originally devised for early 20th‑century cinema, guide smooth transitions between shots, and this article explores how those principles—content, motion, position, and time continuity—inform and improve UI design, from global navigation to animation guidelines in iOS and Material Design.
This article explains Alibaba's front‑end intelligent project that automatically generated 79.34% of the Double‑11 UI code, detailing why images are used as input, the layered image‑processing pipeline, background and foreground analysis, traditional versus deep‑learning methods, fusion techniques, evaluation results, and real‑world deployments.
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.
After the 2022 Double‑11 event, JD’s JinxI platform faced fragmented H5, mini‑program, and RN codebases, prompting a comprehensive redesign that standardized the tech stack with Taro, streamlined multi‑platform development, integrated custom build pipelines, and applied performance optimizations such as image handling, API aggregation, and caching.
The article explains how Taro's fast‑evolving 1.x series led to a disruptive redesign of its CLI, replacing the custom build system with webpack in version 2.0, and outlines the resulting maintenance, stability, and extensibility benefits along with upgrade guidance.
The article introduces Rax PWA, a solution built on Rax 1.x that enables lightweight configuration of Progressive Web Apps, detailing SPA routing, code splitting, App Shell, skeleton screens, snapshot rendering, service‑worker caching, SSR support, and manifest generation to dramatically improve mobile web performance and user experience.
This article explains the need for front‑back separation, outlines the challenges of SPA architecture, provides a step‑by‑step implementation guide, and details a version‑1.0 API specification—including request/response formats, special data handling, and future front‑end trends—helping teams reduce integration effort and improve code maintainability.
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.
This article details Alibaba’s front‑end intelligent project that automatically transforms Sketch design files into production‑ready HTML/CSS/JS code, covering the design‑to‑code workflow, layer processing, mask handling, text calibration, layer merging, unused‑layer detection, testing, visual‑restoration metrics, and future enhancements.
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.
The team created a reusable front‑end animation library by researching common effects, packaging them into an npm module, building a Vue‑based management backend, and integrating the library into business pages, which boosted user stay time by ~30%, performance by ~10% and cut bounce rates by ~60%, as demonstrated in the Douluo Dalu and Dark Angel case studies.
This article explains the fundamentals of browser HTTP caching, detailing request and response structures, the processes of forced and negotiated caching, cache-control directives like Expires and Cache-Control, and how browsers store and retrieve resources from memory and disk caches.
This weekly roundup from WecTeam highlights essential frontend topics—including practical Nginx tips for developers, CSS rendering fundamentals, strategies for building visual editors, declarative UI on mini‑program platforms, and engineering practices for React and TypeScript—offering concise overviews and links to the full articles.
This article explains why centering elements—both inline and block—can be tricky, reviews common pitfalls, and presents four reliable CSS techniques (text‑align, margin‑auto, absolute positioning with translate, and flexbox) with complete code examples and real‑world modal use cases.
This article explores the rise of front‑end intelligence, analyzing background trends, competitive solutions, problem decomposition, and technical approaches for automatically converting design drafts into HTML, CSS, and JavaScript, while discussing challenges, model accuracy, data quality, and future roadmap for the D2C (Design‑to‑Code) system.
This guide introduces Nginx fundamentals, shows how to spin up a basic Nginx service with Docker‑Compose, explains HTTP, server and location contexts, and demonstrates practical front‑end‑friendly techniques such as forward proxy, load balancing, SSI, GZIP compression, anti‑hotlinking, HTTPS and caching.
The article explains how traditional Java web projects that rely on JSP tightly couple front‑end and back‑end, causing performance and scalability issues, and argues that modern large‑scale applications should adopt a decoupled architecture with static front‑end resources served by nginx and APIs delivered by backend services.
This weekly roundup highlights advanced frontend topics, including an in‑depth analysis of Promise micro‑tasks, a translation on Intersection Observer usage, an overview of browser fingerprinting techniques, the current state and future of modern web development, V8’s JavaScript execution pipeline, and Node.js applications at WeDoctor.
After the Double‑Eleven sales surge, Xianyu transformed its transaction link from a fragmented, frontend‑decoupled design into a unified cloud‑native stack using Dart, Flutter, and FaaS, enabling cross‑platform UI, server‑side glue code, and reducing development effort from three engineers to one while boosting stability and scalability.
This article explains the complete workflow for publishing a high‑quality NPM package, covering component‑oriented thinking, directory and configuration conventions, package.json standards, development processes, commit and changelog practices, quality assurance with linting, testing and type systems, as well as documentation and demo requirements.
This article provides a comprehensive guide to Vue’s slot mechanism, covering default slots, named slots, and scoped slots, explains the new v-slot syntax introduced in Vue 2.6, demonstrates practical component implementations with code examples, and highlights important considerations and advanced extensions.
This article describes how the M page’s user‑perceived performance was dramatically improved by applying techniques such as SSR, skeleton screens, image compression, and a video‑frame analysis testing method that delivers millisecond‑level response‑time measurements, enabling sub‑second load times and eliminating white‑screen delays.
The article explains how serverless cloud functions can replace traditional SSR servers by running isomorphic React/Vue rendering within a FaaS environment, detailing the architecture, packaging, debugging, NGW gateway integration, performance bottlenecks like cold starts, and optimization strategies that cut deployment and operation effort by over 80%.
This article systematically explains web image optimization, covering image formats, request and volume reduction techniques such as HTTP/2, lazy loading, caching, sprites, Base64, multi‑resolution handling, and accessibility considerations, providing practical code examples and tool recommendations for front‑end developers.
This article provides a comprehensive tutorial on building a full‑stack application by setting up front‑end tools like Node.js and Vue.js, creating Vue projects with CLI, using Vue directives, routing and Axios for API calls, and integrating a Spring Boot backend with RESTful services, Dubbo RPC, and Spring Cloud components for microservice architecture.
The article shares Winter's presentation on building a high‑quality, efficient frontend team, covering demand models, toolchains, continuous integration, reusable architecture, business value, data‑driven thinking, and the Weex innovation case, while also providing recruitment information for the ZooTeam.
This article explains how the CSS display property controls both the external formatting of an element and the internal formatting context of its children, introduces the newer two‑value syntax (e.g., display: inline‑flow‑root), and discusses current browser support and practical usage.
This article explains how to leverage the hash fragment of an H5 URL to enable seamless, non‑refreshing data exchange between a Mini Program and H5 pages, covering the problem, solution, implementation details, code examples, pitfalls, and best‑practice tips.
The Xianyu Fishpond mini‑program was optimized by keeping its instance alive, pre‑rendering first‑screen data, reducing costly setData calls, using $spliceData for long lists, staging tab‑switch updates, and integrating native video with cover‑view, which together cut loading time, eliminated scroll jank, and slashed tab‑switch latency, delivering markedly improved performance.
Vue 3 introduces substantial performance gains, a smaller bundle size, tree‑shakable global APIs, a proxy‑based reactivity system, and experimental time‑slicing features, all of which make modern, mobile‑first web development faster and more efficient.
This article explains TypeScript’s type checking and type guard mechanisms, covering type inference, assertions, compatibility rules for primitives, interfaces, functions, enums, classes, generics, and demonstrates various type guard techniques such as type assertions, instanceof, in, typeof, and custom guard functions with illustrative code examples.
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 the design and implementation of a car‑sales e‑commerce storefront editor, covering its three‑area layout, drag‑and‑drop module handling, TypeScript‑based backend processing, and Gulp build pipeline, while also discussing configuration, tasks, and future VR extensions.
This article explains essential font knowledge for developers, covering serif and sans-serif classifications, CSS font-family groups, fallback mechanisms, font-weight behavior across platforms, and licensing considerations, helping teams make informed typography decisions.
This article explores how subtle divider lines—full‑width, single‑edge, and floating—organize complex mobile app layouts, improve visual hierarchy, and enhance browsing efficiency, offering practical examples and guidelines for designers and developers.
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.
This article explains how a simple 1px rectangular icon can be evolved through six different styling techniques—adjusting strokes, corners, colors, and backgrounds—to suit various UI contexts such as finance apps, system tools, and mobile interfaces.
This article compiles and translates the latest Chrome DevTools enhancements from versions 74 to 78, detailing new UI highlights, debugging shortcuts, performance metrics, service‑worker insights, and other practical tools that front‑end developers can immediately apply to improve their workflow.
This article explores the challenges of CSS class naming, reviews the evolution from chaotic early practices through atomic and modular approaches, explains BEM conventions, and provides practical rules and code examples for creating clear, maintainable class structures in modern front‑end development.
The Cloud+ Community Tech Salon workshop demonstrated how to build a serverless WeChat Mini Program for Social CRM, explaining its business value, architecture, data models, UI design with WeUI, cloud functions, front‑end integration, and practical coding tips, with the full 31‑page source now on GitHub.
This article reviews five common dashboard chart types—bar, bar‑horizontal, pie, line, and area—explaining their ideal use cases, key characteristics, and design tips to help B‑end designers choose the most effective visualization for their data.
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 explains the concept, advantages, proper techniques, typical use cases, characteristics, and drawbacks of card‑based UI design, illustrating how it adds visual hierarchy and flexibility while also noting when list‑style interfaces may be more appropriate.
The project implements a front‑end integration test coverage tool that instruments client code with a Babel plugin and server code with istanbul‑middleware, collects real‑time line/branch data via a Chrome extension and timed uploads, stores versioned results on a coverage server, and visualizes incremental coverage dashboards, providing an objective quality gate and achieving over 80 % incremental line coverage in production.
