This article presents several front‑end approaches for implementing password‑strength validation—including jQuery plugins, a Vue component, and a CSS3 indicator—each accompanied by live demo links and brief usage explanations to improve user experience during registration.
This article explains the new React "use" hook proposal, covering its background, how to integrate it with Suspense, minimal examples, promise caching, control‑flow usage, design motivations, implementation details, limitations, and the surrounding community debate.
This article curates key front‑end and emerging tech topics—including Inversion of Control in JavaScript, the overload of JS frameworks, Facebook's iOS codebase evolution, GPT‑4's launch, prompt‑engineering automation, and nuanced UI control design—offering concise insights for modern developers.
This article explains how to adopt Vite in a Vue 2.x codebase, covering dependency installation, process and global polyfills, path‑alias handling, sass loader conflicts, template adjustments, and performance comparisons, while providing concrete configuration snippets for a smooth migration.
The 2022 State of CSS and State of JS surveys, which collected 14,310 CSS and 39,472 JavaScript responses, reveal demographic details, highlight rapidly adopted CSS features like flex gap, aspect‑ratio, and :has, showcase popular JavaScript language enhancements such as nullish coalescing and top‑level await, and expose developers' satisfaction, usage, and pain points across frameworks, tools, and browsers.
NetEase Cloud Music’s open‑source Dawn framework introduces a high‑performance virtual tree (VTree) to deliver a unified, low‑cost, and highly accurate cross‑platform event‑tracking solution, addressing common pain points such as development overhead, precision, model stability, link tracing, and quality control.
Over two years, NetEase Yanxuan built and open‑sourced OSSA, a Taro UI component library created to unify multi‑platform mini‑program development, detailing why Taro was chosen, the challenges of enterprise‑grade reliability and community building, and how automated CI/CD, documentation, MIT licensing, and contributor guides enable sustainable open‑source growth.
This article explains how adopting a MonoRepo strategy combined with pnpm's workspace feature can streamline front‑end project structures, reduce duplicate dependencies, improve version control, and eliminate ghost dependencies, ultimately speeding up development and release processes.
This article introduces Chrome DevTools' experimental Recorder feature, explains what Puppeteer is, provides a step‑by‑step guide to record, edit, import, and export automation scripts, and demonstrates how the generated Puppeteer code can streamline front‑end testing and reduce manual effort.
GitHub1s is a free web application that lets developers instantly browse, edit, and debug GitHub repositories directly in the browser, eliminating the need for cloning and local setup, and supporting VS Code features like file search, with optional OAuth for private repos.
The article reviews 2022 front‑end breakthroughs—React 18, Astro, SvelteKit, Qwik, SolidStart, TypeScript‑driven tooling, server‑side rendering, hydration challenges, fine‑grained reactivity, edge computing, and predicts how these trends will influence web development in 2023.
This article chronicles an eight‑year front‑end career at Taobao UED, detailing how the author progressed from a junior developer to a technical leader, embraced data‑driven practices, optimized performance, and built high‑impact teams while sharing personal insights and lessons learned.
This article explains how Taro implements dynamic node insertion on mini‑program platforms by leveraging @tarojs/react and @tarojs/runtime, mimicking web‑style DOM operations through a custom Document abstraction, detailing the underlying classes, update mechanisms, and code examples for creating and destroying toast notifications.
This article explains why front‑back separation is needed, describes the evolution from MVC to SPA, proposes a contract‑first approach, outlines development processes, and provides a detailed V1.0.0 API specification with request/response formats, pagination, and special content rules.
This article curates key frontend topics—including how CommonJS and ES modules handle circular dependencies, why Proxy must be paired with Reflect, practical bug‑recording and source‑code navigation, building guide pages without third‑party libraries, plus a look at clustering algorithms and a powerful CRUD code generator—offering concise insights for modern web developers.
Discover a curated list of seven essential GitHub repositories—including Awesome lists, freeCodeCamp, developer‑roadmap, Build Your Own X, Gitignore, System Design Primer, and Coding Interview University—that provide practical resources, learning roadmaps, and interview preparation for developers of all levels.
This tutorial explains how React compound components work, showing how to share implicit state across parent and child components using Context and Hooks, with practical code examples like a Toggle component and a Reach UI Menu, to create more intuitive and elegant APIs.
This article outlines how cultural preferences, reading directions, address formats, and visual conventions across more than 220 countries shape international B2B UI design, and provides concrete presentation, behavior, and business‑level strategies for creating inclusive, adaptable interfaces.
This article explains how to rewrite built‑in HTML and SVG tags in a uni‑app project by overriding Vue's internal tag‑resolution methods, providing step‑by‑step code examples for button and image components and discussing the underlying Vue and webpack mechanisms.
This article walks through why Vite dramatically speeds up development, explains its architecture, and provides a step‑by‑step guide—including configuration changes, dependency installation, and common pitfalls—to successfully migrate a Vue 2 project built with Vue‑CLI to Vite.
The article reviews 2022 frontend trends—including performance, runtime, bundle size, and Rust's emerging role—examines the rise of low‑code full‑stack solutions, analyzes the 2023 job market, and offers practical advice for developers navigating a maturing yet evolving frontend landscape.
This article chronicles Yǐngyǐng’s evolution from a curious student choosing computer science to a key contributor of AntV S2, highlighting her perseverance, open‑source breakthroughs, work‑life balance strategies, and the lessons she learned while shaping cross‑tab visualizations at Ant Group.
This article explains how a low‑code editor can provide true WYSIWYG editing by separating the canvas into an editing layer and a rendering layer, using an iframe for isolation, synchronizing layout information via DOM measurements, and addressing the challenges of component overlap, performance, and cross‑technology integration.
This article compares the three leading static site generators—Gatsby, Hugo, and Jekyll—detailing their advantages, disadvantages, and use‑case scenarios to help developers choose the most suitable tool for building fast, secure, and maintainable static websites.
This article provides a detailed introduction to uni‑app, a Vue‑based cross‑platform front‑end framework, covering its core concepts, advantages, environment installation with HBuilder X and vue‑cli, project creation, platform‑specific build commands, Flex layout basics, and background‑image handling for various targets.
This roundup highlights recent front‑end developments, including Chrome’s new CSS viewport units, the rise of modern JavaScript frameworks, using MutationObserver for dynamic DOM handling, a simple three‑line tweak that slashes build times by 80%, Vue 3 composition‑API insights, and tips for junior developers.
This guide explains how to design a fluid, responsive experience for the DingTalk PC client by defining screen‑size breakpoints, setting default and minimum window dimensions, choosing content‑area scaling rules, and handling fixed elements, card layouts, text and image scaling across devices.
The Tencent Docs SmartSheet view’s sluggish 20 FPS performance was resolved by a suite of optimizations—including incremental rendering of only visible widgets, disabling costly canvas hit‑testing, replacing node cloning with direct construction, caching text measurements, and employing offscreen canvas rendering—boosting frame rates to near 60 FPS.
This article details how to recreate the Flash programming game 'Manufactoria' as a web-based puzzle by implementing its UI with HTML and CSS and its logic with JavaScript, covering component definitions, grid layout, robot movement, state handling, level loading, and local storage persistence.
This article explains Chromium's Prerender2.0—its reintroduction in M94, the underlying MPArch multi‑page architecture, the Speculation Rules API usage, activation detection methods, detailed implementation flow in M97, and practical scenarios for safely applying prerender to improve web performance.
This article explains why front‑end component design matters and provides practical guidance on improving component usability, choosing between slots and props, writing standardized APIs, and achieving high extensibility through techniques like DOM hand‑off and headless UI patterns.
This article explores the evolution of front‑end component libraries from early jQuery plugins to modern low‑code‑driven production, detailing current challenges, visual material description protocols, component lifecycle implementation, versioning, and future directions for scalable, collaborative component engineering.
LowCodeEngine, an open‑source low‑code engine from Alibaba DingTalk, follows strict protocol specifications, supports major browsers, offers a rich ecosystem of components and plugins, and provides detailed usage examples, CDN options, and UI panels for rapid front‑end development.
This article compares Vue’s single‑file components with React’s class and functional components, explains the shift from two‑way binding to one‑way data flow, introduces JSX and React Hooks, discusses state‑management patterns like Vuex and Redux, and provides a practical TodoList implementation.
This article presents a curated list of ten popular, free, open‑source admin dashboard UI frameworks—ranging from Bootstrap‑based templates to Vue and Angular solutions—detailing their GitHub star counts, key features, and repository links for developers seeking ready‑made control panels.
This article compares three real‑time communication techniques—long/short polling, WebSockets, and Server‑Sent Events—by explaining their mechanisms, presenting client‑ and server‑side code examples, and discussing their advantages, drawbacks, and suitable use‑cases to help developers select the appropriate method for a dashboard application.
LowCodeEngine, an open‑source low‑code engine from Alibaba’s DingTalk team, follows Alibaba’s backend‑frontend standards, supports modern browsers, offers a minimal core with rich ecosystem elements, detailed protocol specifications, multiple CDN integration options, extensive UI panels, schema editing, and real‑world case studies, all illustrated with code snippets and screenshots.
This article explains the purpose of a component library, outlines how to plan, select a framework, set up Vant CLI, configure scripts, organize directories, add and test components, publish to an npm registry, and integrate the library into projects using various import methods.
This article recounts a former Ant Group front‑end engineer's year‑long journey building a low‑code platform for Ant Insurance, detailing challenges of high‑complexity insurance scenarios, platform design decisions, component‑based architecture, real‑world experiments, and lessons learned for future low‑code adoption.
This article walks through why a custom front‑end scaffolding tool is needed, analyzes Vue CLI’s architecture, explains how to locate global commands, examines required dependencies, and provides a step‑by‑step implementation—including project initialization, command design, create‑command logic, Node version checks, template features, CDN upload, commit linting, and a custom ESLint plugin—so readers can create a reusable CLI tailored to their business needs.
LowCodeEngine is an open‑source low‑code engine from Alibaba that follows enterprise front‑end standards, offering a minimal core, rich ecosystem, TypeScript typings, configurable CDN options, detailed UI panels, and extensible protocols for building front‑end applications.
FishUI is a cross‑platform React component library designed for Xianyu’s kun and web containers, offering unified APIs, automated environment detection, monorepo architecture with pnpm, lerna + nx versioning, custom build loaders, comprehensive testing, and documentation tooling to boost developer efficiency and maintainability.
NutUI 4.0 introduces a dynamic CSS‑variables theme, a dedicated icon library, automatic on‑demand component import, new components such as Tour and PullRefresh, extensive component refinements, significant bundle‑size reductions, upgraded build tools, and updated type declarations, providing a lighter, more flexible frontend solution.
This article explains the dual‑thread architecture of WeChat Mini Programs, analyzes the rendering WebView and its file structure, and details the fast rendering pipeline that transforms virtual DOM into real DOM for rapid page display.
This article explains why passing an object as a React Context Provider value can cause unnecessary re‑renders, introduces the community‑made use‑context‑selector library to mitigate the problem, analyzes its limitations, and presents a custom optimized implementation using useSyncExternalStore for precise component updates.
This article explains the concepts, design of JSON configuration structures, component container patterns, editing side form generation, remote component store integration, static publishing, version management, and inter‑component communication for constructing a data dashboard platform using modern frontend technologies.
The article shares practical insights from an Ant Group front‑end engineer on building strong business partnerships, understanding the big picture, honing domain expertise, and fostering teamwork to deliver results and advance product development.
This article compiles twelve practical JavaScript functions—from generating random colors and shuffling arrays to detecting dark mode, scrolling, clipboard copying, device detection, element visibility, URL parameters, deep cloning, and async waiting—each explained with concise code examples for everyday front‑end development.
This article explains how Alibaba combines frontend development with data intelligence—covering massive internet data, market demands, three integration modes, key technologies like WhaleM, DataCook and PipCook, practical workflows, a k‑means clustering case study, and future directions such as WebNN, WebGPU and WASM—to enhance user experience and drive business growth.
The article surveys the latest web development trends—rising meta‑frameworks like Next.js, the shift toward server‑side rendering and edge‑computing, the resurgence of databases with serverless, the evolution of JavaScript runtimes, monorepos, utility‑first CSS, end‑to‑end type safety, modern build tools, and AI‑driven coding—highlighting why 2023 feels like a renaissance for front‑end engineers.
LowCodeEngine is an open‑source low‑code engine released by Alibaba's DingTalk team that follows internal construction protocols, supports modern browsers, offers a minimal core with a rich ecosystem, provides TypeScript typings, and includes extensive UI panels, schema editing, and multiple CDN integration options for developers.
This article explains the fundamentals of HTTP caching, covering request/response structures, strong and validation cache rules, header directives like Expires and Cache-Control, and practical tips for implementing effective caching strategies in front‑end development.
This article explains the fundamentals of HTTP caching, covering request/response structures, the difference between strong and validation caching, key headers like Expires, Cache‑Control, Last‑Modified, ETag, and practical strategies for optimizing web performance through effective cache control.
Discover ten essential, free front‑end development tools—from gradient generators and responsive testing apps to API libraries, image sources, SVG illustration collections, documentation browsers, regex debuggers, template sites, code formatters, and icon repositories—that can streamline your workflow and enhance productivity.
In this comprehensive interview, ByteDance senior front‑end engineer Huang Jian shares the 2023 outlook for front‑end developers, covering cloud‑native integration, serverless adoption, micro‑frontends, AI influence, WebAssembly, career growth, and the evolving skill set required to stay competitive.
This article compares short polling, long polling, WebSocket, and Server‑Sent Events, explaining their mechanisms, advantages, drawbacks, and appropriate use cases, and provides practical code examples for implementing each method in modern frontend development.
The article explains how the Backend for Frontend (BFF) pattern creates dedicated, lightweight server‑side APIs for each UI type—desktop web, mobile, or third‑party—allowing teams to tailor functionality, reduce coupling, aggregate micro‑service calls, and improve autonomy while addressing performance, scaling, and organizational concerns.
The article explains how the Tongtian Tower platform’s automatic design‑to‑floor generation, leveraging Sketch parsing and RELAAAY asset management, reduces page‑building steps, cuts construction time by 40%, and enhances flexibility for designers, operators, and merchants.
This article explains how to build a lightweight React‑like library called Didact, covering its core concepts, step‑by‑step source‑code walkthrough, implementation of createElement, render, Fiber architecture, concurrent mode, and a useState hook for function components.
Evan You’s 2023 blog post reviews Vue.js’s 2022 milestones—including the shift to Vue 3, ecosystem growth, and Vue 2 migration—while outlining 2023 plans such as smaller releases, Vapor Mode, and upcoming conferences, offering a comprehensive outlook for developers.
This article examines why native JavaScript Date falls short for time handling, explains time measurement standards and time zones, and compares four major date libraries—MomentJS, DayJS, date-fns, and native Date—highlighting their advantages, drawbacks, and appropriate usage scenarios.
This article outlines the 2023 Taobao Web technology map, detailing the reorganization of the front‑end team, the layered engineering, R&D, and application domains, and introduces key products such as O2, JSTracker, Noslate, ICE, Midway, Tianma, VideoX, and ALive, highlighting their roles and capabilities.
This article reviews essential React design patterns—including container/presentational components, higher‑order components, render props, compound components, and custom hooks—explaining the underlying SOLID principles, providing clear code examples, and offering guidance on when to apply each pattern.
The article explains Vue’s virtual‑node diff algorithm, detailing depth‑first traversal, head‑tail pointer comparisons, an index‑map for moved nodes, post‑traversal addition/removal handling, and Vue 3’s static‑vnode optimization, showing how these techniques achieve efficient O(n) DOM updates.
A curated collection of recent frontend articles covering a code‑submission script, the Remesh DDD framework, CSRF security basics, GraphQL BFF implementation for cloud music, build‑time reduction tricks, and the Intl.Enumeration proposal reaching Stage 4, offering valuable insights for web developers.
Ant Cube’s ACT toolchain provides a comprehensive solution for mobile card development, covering design concepts, CLI vs IDE choices, framework architecture, core functions like compilation, preview, and debugging, and its evolution across versions to enhance reliability, efficiency, and developer experience.
By adopting the XState state‑machine library, the team transformed a complex, interactive page’s development from costly component‑wise coordination into a collaborative workflow where a small core group maintains a visual state graph while UI developers work on lightweight components, improving performance and reducing render overhead.
This roundup highlights key frontend engineering topics, including optimal Git workflows for monorepos, the importance of clean code communication, techniques for hybrid remote debugging on mobile devices, practical JWT token handling, and advanced CSS Painting API methods for creating irregular borders.
This article explains how the Wukong low‑code visual platform implements component drag‑and‑drop, covering material‑to‑canvas dragging, intra‑canvas movement, resizing via eight handles, alignment guide generation, performance optimizations using CSS transforms, and component encapsulation with Vue 3.
This article explores the fundamentals of form design, covering form types, element breakdown, layout options, label alignment, and validation techniques to create efficient, user‑centric interfaces that balance usability with business requirements.
The 2022 Meituan Technical Salon recap details six online sessions—testing, algorithm strategies, data development, foundational technology, system development, and frontend development—listing each talk’s title, speaker, date, and offering video and PPT links, serving as a comprehensive learning resource on Meituan’s engineering practices.
This article explains how designers can select appropriate chart types, analyze data relationships and features, enhance visual hierarchy, and apply responsive design techniques to create effective B‑end data visualizations that improve information transmission and user understanding.
This article explains the new CSS :has parent selector, showing how to conditionally apply styles to parent elements based on the presence of child elements such as images, links, or form inputs, and provides multiple practical examples and browser support details.
By shrinking HTML to under 14 KB, replacing large global packages with selective imports, introducing dynamic and lazy loading, externalizing stable libraries via CDN, and caching menu data, the SCM frontend’s common bundle dropped from 1.4 MB to below 200 KB, dramatically improving first‑paint rates and overall page‑load performance.
This article explains what Web Components are, details their core features such as Custom Elements, Shadow DOM, and HTML templates, demonstrates practical usage with React, Vue, and micro‑frontend scenarios, compares them to traditional frameworks, and discusses advantages, limitations, and related tools like Lit and Omi.
This article explains how ice.js 3 improves web performance by combining MPA and SPA loading strategies, parallelizing component and data fetching, leveraging SSG and SSR, and exploring cloud‑based prefetch and zero‑bundle concepts to deliver smoother user experiences.
This article details how the NutUI‑React component library was adapted to the Taro framework for WeChat mini‑programs, covering background, version upgrades, three development stages, key technical solutions, installation steps, and future community‑driven improvements.
The 17th D2 Terminal Technology Conference featured two days of live streams with 32 speakers covering 22 topics on frontend, cross‑platform, mobile, and cloud technologies, and offers downloadable PPTs, on‑demand recordings, and a rich set of technical presentations for developers.
The team combats outdated documentation and costly front‑end maintenance by treating unit tests for the use‑case layer as living documentation, using BDD‑style Given‑When‑Then tests that assert only observable behavior, which improves code readability, eases onboarding, and provides a reliable safety net for future changes.
It introduces a series of front‑end engineering articles covering comprehensive monitoring architecture, CSS‑based click throttling, drag‑and‑drop implementation, 30 essential JavaScript concepts, and a simple responsive data‑dashboard solution, aiming to deepen developers’ skills and showcase resume‑worthy expertise.
This article details Snowball's front‑end team's end‑to‑end cross‑platform architecture, covering high‑availability monitoring, performance measurement, bundle hot‑update and splitting strategies, Hermes engine migration, stability fixes, and a systematic migration plan for RN/H5 pages, while outlining future roadmap and lessons learned.
This article presents a comprehensive guide to building a front‑end monitoring system—including pain points, error‑reconstruction techniques, data collection methods, performance metrics, user‑behavior tracking, and a modular SDK architecture—illustrated with detailed code examples for Vue, React, XHR, fetch, and cross‑origin handling.
This article explains how to replicate Bilibili’s non‑overlapping subtitle effect using a simple HTML demo and the experimental CSS mask‑image property, detailing the implementation steps, code example, and visual results while noting its experimental status.
This newsletter presents a collection of technical articles covering the Vite 4 release, the dangers of over‑design, building Node.js automation workflows, React Native monorepo practices, Chrome's memory and energy saver modes, first‑principles thinking for engineers, WebRTC face‑recognition implementation, JavaScript best practices, and an overview of Web Workers.
This article explains how to create a rational, extensible, and harmonious color system for an enterprise mobile banking app, covering principles, a step‑by‑step workflow, brand color evolution, auxiliary palette generation, WCAG contrast validation, and implementation details for design and development teams.
jQuery 3.6.2, released four months after version 3.6.1, introduces compatibility fixes for Chrome’s newly added :has() selector, handling forgiving parsing and complex selector scenarios, while ensuring older versions may still be affected and directing users to the full changelog for additional changes.
This article analyzes the current challenges of front‑end delivery, outlines the bottlenecks in existing workflows, and presents a DevOps‑driven pipeline that automates build, test, and deployment to improve efficiency, quality, and collaboration across development teams.
Using AntV’s F2 4.0, the team revamped Alipay’s Fund Index section with a multi‑dimensional scatter‑plot tool that lets users explore returns vs volatility, featuring refined touch gestures, adaptive bubble sampling, lazy loading, and a layered M‑C‑V architecture for reusable components.
This article explores the fundamentals of ESLint, explaining how it leverages abstract syntax trees (AST) to enforce code style, detect errors, and enable custom rule creation, while providing practical configuration examples, code snippets, and insights into the underlying processing pipeline.
This comprehensive guide walks front‑end developers through the entire SEO workflow—from understanding search engine mechanics and optimizing site structure, URLs, and TDK, to performance tuning, sitemap and API submission, link building, structured data, and monitoring—offering practical tactics to increase organic traffic.
This article compares popular and niche technologies, explains why .NET remains relatively unknown in China's internet industry, and introduces its evolution, the Blazor web framework (both WebAssembly and Server models), and the capabilities of Flutter Web for cross‑platform development.
This article explains how modern browsers use multi‑process architectures, detailing the evolution from single‑process models, the roles of browser, renderer, GPU, network, and plugin processes, and walks through the navigation and rendering pipelines—including DOM construction, style calculation, layout, layering, painting, rasterization, compositing, and their impact on performance.
This article explains why JavaScript, despite being single‑threaded, needs asynchronous mechanisms such as the event loop, details macro‑ and micro‑tasks, compares browser and Node.js implementations, and demonstrates common pitfalls and best practices using callbacks, Promise, generator, and async/await patterns.
This article surveys modern front-end engineering topics, covering plugin-based design, AST-driven compilation, sandbox performance tricks, techniques to reduce complex if‑else structures, a single‑div CSS football field demo, and essential insights into automated testing for developers.
This article explains the motivation, architecture, technology stack, adaptive layout techniques, component development workflow, drag‑and‑drop enhancements, and real‑time state management used to build a low‑code, front‑end‑focused big‑screen data visualization platform.
Drip Table 2.0 introduces a revamped generator UI, a lightweight React‑based core, editable cells, nested sub‑tables, row‑dragging, fixed rows/columns, a new card layout, and enhanced component support, all built on a performance‑focused architecture and documented with live demos and GitHub references.
This article outlines the technical strategies and best practices for guaranteeing high‑quality user experiences during large‑scale mobile event rollouts, covering background, core guarantees, business characteristics, performance metrics, high‑concurrency handling, dynamic configuration, loading optimization, runtime safeguards, and monitoring.
This article explains how a front‑end team can localize static resources for intranet deployment by either intercepting DNS requests to redirect CDN domains to internal servers or by scanning and replacing CDN URLs during the build process, and provides step‑by‑step implementation details with code examples.
This article explains why applying a CSS grayscale filter is a low‑cost way to turn an entire website black‑and‑white for memorial occasions and provides three practical code snippets—including simple style rules, DOCTYPE adjustments, and Flash parameters—to achieve the effect across browsers.
This guide explains why and how to convert an entire website to black‑and‑white using CSS filter properties, provides two practical methods with code snippets, addresses browser compatibility, DOCTYPE requirements, and even Flash handling, and ends with a ready‑to‑use CSS block.
