This article shares a five‑year front‑end engineering journey divided into three phases—rapid early learning, broad mid‑career knowledge expansion, and senior‑level role decisions—offering practical advice on skill development, architecture, community involvement, and choosing between technical depth and management.
This article describes how to consolidate multiple WeChat mini‑programs into a single package by defining engineering standards, extracting common modules, and applying specialized packaging and compression tools to reduce the overall bundle size within the platform's strict limits.
This cheat sheet compiles twenty practical regular‑expression patterns—including date, password, email, ID, IP, URL, and HTML validation examples—along with JavaScript snippets, giving developers a quick reference to boost input‑checking efficiency across front‑end and back‑end projects.
The latest weekly roundup highlights key developments for front‑end engineers, including the release of Webpack 3.0, Expo SDK 18.0.0, ESLint 4.1.0, a survey naming Mark Zuckerberg the least cautious IT CEO, China Mobile’s tethered‑drone high‑altitude base station, Node.js’s ambition to surpass Java, a resurgence of ransomware attacks, Google’s Cloud Machine Learning Engine launch, and Red Hat’s acquisition of Codenvy.
This guide explains how CSS3’s box‑reflect property lets you add realistic reflection effects to images and other elements using simple syntax, covering direction, offset, mask options, step‑by‑step examples, gradient and image masks, and browser compatibility.
This article explains how to use CSS viewport units (vw, vh, vmin, vmax) to create truly fluid, device‑agnostic layouts, covering the theory of viewports, compatibility, practical Sass functions, and two implementation approaches—pure vw and a hybrid vw‑rem method.
This step‑by‑step guide shows how to combine SVG graphics and CSS animations to create a loading indicator shaped like a smiling shopping bag, covering viewport setup, path drawing, styling, keyframe animation, and motion along paths.
This article explains how to level up your CSS skills by using proper semantic markup, modular component structures, a unified naming system like BEM, and the single‑responsibility principle, providing practical code examples and visual illustrations for robust, maintainable front‑end styling.
This guide explains how to identify performance bottlenecks in WebGL applications by examining CPU and GPU workloads, using tools such as stats.js, Chrome DevTools, Web Tracing Framework, and offers concrete optimization strategies for shaders, draw calls, state changes, and resource management.
This article explains the differences between libraries and frameworks, outlines common front‑end solution categories such as DOM manipulation, communication, utilities, templating, components, routing and architecture, and provides practical recommendations of popular JavaScript tools for each area.
A comprehensive front‑end interview guide covering HTML/CSS fundamentals, HTML5 nuances, JavaScript core concepts, Ajax techniques, jQuery usage, and miscellaneous web topics, presented as concise questions and answers to help developers prepare for technical interviews.
This week’s front‑end roundup covers Tencent’s new “Intelligent Cloud” AI‑as‑a‑Service platform, Walmart’s ban on AWS, releases of React 15.6.0, Angular 4.2, ESLint 4.0.0, Firefox 54 and Chrome 60 Beta, plus updates on Apple Music licensing, Visual Studio 2017 preview and Owl Labs’ robotic conference camera.
This guide explains why front‑end error collection is essential, outlines effective methods such as using window.addEventListener('error', true), details the types of exceptions to monitor—including script errors, resource load failures, HTML hijacking, and CSS issues—and provides practical code snippets for reporting and handling them.
This article explains the difference between deep and shallow cloning in JavaScript, illustrates how reference types affect object copies, demonstrates practical implementations using loops, Array.concat, and jQuery.extend, and shows visual examples to help developers avoid common pitfalls when merging objects.
This tutorial walks through implementing a feature‑rich shopping cart in a WeChat Mini Program, covering data structures, UI binding, selection handling, total‑price calculation, quantity adjustment, and item deletion for a complete beginner‑friendly solution.
This article compiles ten common front‑end questions from Zhihu, offering practical advice on market demand, learning strategies, solidifying fundamentals, choosing between design and development, interview tactics, and the future outlook of web development, all backed by real‑world analogies and examples.
An in‑depth tutorial explains webpack’s core concepts, build workflow, and practical scenarios—from single‑page apps and code splitting to npm package and server‑side rendering builds—plus guidance on creating custom loaders and plugins, empowering developers to master and extend this essential front‑end bundler.
This article explains JavaScript identifiers and systematically breaks down every type of operator—from unary and boolean to relational, equality, conditional, assignment, comma, and bitwise—illustrating each with clear definitions, code examples, and visual diagrams for front‑end developers.
This article explains what favicons are, how to embed them using HTML link tags, compares common formats like .ico, .png, .svg and .gif, describes browser loading order, and shows how to create dynamic favicons with JavaScript libraries such as favico.js, Tinycon, and piecon.
This guide explains website accessibility, describes how people with visual, auditory, motor, and cognitive disabilities interact with the web, and provides actionable steps—semantic markup, color contrast, keyboard navigation, ARIA attributes, form and table best practices, and testing tools—to build inclusive, accessible sites.
This article explains website accessibility, describes how people with visual, auditory, motor, and cognitive disabilities access sites, and provides practical guidelines—including semantic structure, color contrast, ARIA roles, form and table markup, keyboard navigation, media handling, and testing tools—to help frontend developers build accessible web pages.
From Apple’s secret team turning iPhones into medical records to Safari 11’s new WebRTC and WebAssembly support, V8 6.0’s SharedArrayBuffer, Puppet Labs’ DevOps survey, WeChat’s open‑source WCDB, Tencent’s mobile analytics, StackOverflow’s HTTPS migration, and a new front‑end lifecycle model, this roundup covers the top front‑end developments of the week.
This article compiles ten common algorithmic challenges frequently asked in front‑end interviews, explains why mastering data structures matters for developers, and provides concise solutions and key insights for each problem, from palindrome checks to binary search tree implementation in JavaScript.
A global survey of 5,254 front‑end developers reveals experience levels, CSS knowledge, popular preprocessors, naming conventions, JavaScript frameworks, task runners, bundlers, testing tools, and offers practical recommendations for the tools to adopt in 2017.
This article reviews common web image formats—JPG, PNG, GIF, APNG, and WebP—detailing their compression methods, animation support, browser compatibility, and practical usage guidelines to help developers select the most efficient format for different scenarios.
This article presents a universal frontend event tracking (埋点) solution designed for Baidu Takeaway's sales CRM platform, detailing its background, comparison of tracking methods, a declarative approach using Vue directives and MutationObserver mixins, support for legacy jQuery, and practical usage and results.
The article explains how to design a data‑driven architecture for a visual H5 page editor, detailing the abstraction of pages, elements, and history into structured objects, and showing how front‑end developers can map complex UI interactions to clean, editable data models.
This article explains why proper JavaScript error handling is essential, compares syntax and runtime errors, demonstrates good and bad try‑catch patterns, shows how to use global onerror listeners, capture stack traces, and handle asynchronous exceptions to improve frontend code reliability.
This concise guide introduces seven frequently used ES6 features—including let, const, arrow functions, default parameters, destructuring, object shorthand, and template literals—explaining each concept so you can grasp them in roughly half an hour.
This article demonstrates several cross‑origin communication methods—including JSONP, window.name, document.domain, CORS, postMessage, and WebSocket—by providing step‑by‑step code examples, host file configuration, and instructions for testing each technique in a local environment development.
This guide walks beginners through installing Node, npm, a suitable terminal, and create‑react‑app, then demonstrates creating a project, exploring its structure, and using ES6 module syntax (import, export) to build and run a simple React‑ready environment.
This article explores how applying inheritance concepts to HTML structure can reduce duplicated code, simplify maintenance, and improve front‑end development efficiency by extracting common elements into a base template and using build‑time tools to generate page‑specific pages.
This article explains the fundamentals of the browser same‑origin policy, defines what constitutes an origin, describes the restrictions it imposes, and surveys practical cross‑origin solutions such as dynamic tags, JSONP, CORS, postMessage, document.domain, window.name, fetch, and WebSocket.
This guide explains how to use HTML5's drag‑and‑drop API, covering draggable elements, the full set of drag events, the dataTransfer object methods, a step‑by‑step sortable list implementation, and cross‑browser compatibility tips.
This article introduces the fundamentals of Shadow DOM, explains its core concepts, usage patterns, key features, and API, compares it with Virtual DOM, demonstrates practical code examples for creating and styling shadow roots, handling slots and events, and discusses browser support and related tooling.
This article reviews the evolution of frontend moduleization over the past decade, discusses the problems of early script inclusion, presents various solutions such as namespaces, closures, CommonJS, ES6 modules, and modern build tools, and illustrates each approach with concrete JavaScript code examples.
This article explains common performance bottlenecks in WeChat mini‑programs, demonstrates how WePY's preloading and prefetch mechanisms can eliminate redirect delays, and shows how reducing redundant setData calls with dirty‑checking dramatically improves rendering speed.
HTTP/2 introduced server push to let servers proactively send resources, but it suffers from issues such as cache invalidation after connection closure, difficulty identifying needed pages, lack of authentication reuse, and other pitfalls, so understanding its traps and best practices is essential for effective use.
This article examines the usability trade‑offs of pagination, "load more" buttons, and infinite scroll, referencing Baymard research to help designers choose the most effective data‑loading interaction for their product's context and improve overall user experience.
This article walks through the concept, setup, core modules, and various asynchronous techniques—callbacks, promises, generators, and async/await—used to create a live, animated resume that updates text and styles in real time on a web page.
This article explores how front‑end developers can break the cycle of endless revisions by adopting the right mindset, collaborating effectively with product and design teams, embracing component‑based thinking, and developing product‑centric skills that improve efficiency and quality throughout the development process.
This article provides a comprehensive overview of 56 data visualization tools ranging from simple spreadsheet options to advanced JavaScript libraries, mapping frameworks, and statistical packages, helping developers choose the right solution for creating interactive and insightful visual representations of their data.
This article compiles practical advice from two seasoned engineers—Rebecca Murphey and Philip Walton—covering essential front‑end tools, module usage, testing, build automation, Git strategies, server‑side rendering, Node.js mastery, deep code understanding, browser spec vigilance, code reviews, teamwork, and the value of documenting learning.
This article explores how the ordering of HTML and CSS attributes influences gzip compression ratios, demonstrates size differences with reordered code, and clarifies Chrome DevTools' Size vs. Content values, offering practical tips for better web performance and maintainable code.
This article outlines a comprehensive front‑end engineering workflow covering modularization, componentization, standardization, and automation, then details technology choices such as Vue, Koa, Sass, and webpack, and provides practical project configuration tips for CSS, webpack, Babel, and CI/CD.
This article shares a veteran front‑end engineer’s step‑by‑step methodology—covering the 3W framework, requirement clarification, timeline estimation, risk exposure, and post‑release monitoring—to help developers consistently deliver high‑quality features.
This article explores how jQuery constructs its $ objects by wrapping a simplified implementation, detailing prototype assignments, the init function, extension mechanisms, and best practices, while providing code snippets and diagrams to help developers deepen their understanding of JavaScript and frontend development.
Ele.me’s ‘big front‑end’ team, led by Lin Jianfeng, explains why the team was created, its evolving responsibilities spanning web, Node, and native apps, the culture of autonomous ‘scatter‑raised’ management, technology adoption strategies, and the pros and cons of this organizational model.
This article walks you through three approaches to implement drag-and-drop in JavaScript—plain code, a native object wrapper, and a jQuery extension—covering essential concepts like transform compatibility, event handling, position calculations, and object-oriented encapsulation, with detailed code examples and visual diagrams.
The 11th Suning Technology Exchange Day featured a front‑end forum where experts from leading companies shared insights on Node.js architecture, progressive web apps, large‑scale web development, and strategies for improving user experience and development efficiency.
This comprehensive tutorial explains what XSS is, describes the three main attack types, illustrates how malicious scripts are injected and executed, and provides practical strategies—including encoding, validation, and Content Security Policy—to defend web applications against cross‑site scripting vulnerabilities.
A weekly roundup covers the surge of ONION ransomware on Chinese campuses, Microsoft's addition of Linux distros to the Windows Store, major AI and AR investments, open‑source JavaScript optimization, IBM's API microgateway, shifting web‑server market shares, data's rising value, Google's Cloud Speech launch, and Android's Project Treble to curb fragmentation.
This article provides a comprehensive guide to JavaScript's console API, covering basic logging methods, object inspection, grouping, clearing, performance timing, profiling, tracing, assertions, and counting, with practical code examples and tips for effective debugging in development environments.
The author recounts his nine‑year journey at Alibaba, detailing four career stages, the evolution of front‑end architecture for B‑class e‑commerce, internationalization challenges, team‑management insights, and practical advice for front‑end engineers seeking growth and resilience.
This article explores every essential aspect of JavaScript functions—from declarations, expressions, anonymous callbacks, and self‑executing IIFEs to parameter passing, functional programming concepts, closures, and advanced module patterns—providing clear explanations, diagrams, and code examples to help developers build solid foundations.
This article traces the history of Alipay’s front‑end build ecosystem—from the early spm package manager through the all‑in‑one spm3 era, the rise of ant tool, and the shift toward modular presets—highlighting the challenges of centralisation, configuration complexity, and future directions.
This article introduces CSS Grid Layout, covering its core concepts, browser support, practical examples for creating columns, gutters, fractional units, alignment, legacy support, padding, rows, flexible sizing with minmax, and advanced techniques like auto‑fit and auto‑fill to build responsive, media‑query‑free layouts.
The author recounts attending Ele.me's front‑end technology conference, summarizing seven sessions covering PWA implementation, evolving front‑back collaboration, dependency health monitoring, Vue usage, Flow and type theory, design perspectives on Element, and the exploration of a visual document editor, while sharing personal impressions.
This article explores the architecture of a WebGL‑based map engine, detailing its core rendering pipeline, essential modules such as data handling, shader management, buffers, and event‑driven rendering loops, while highlighting performance considerations and best practices for efficient, on‑demand map visualization.
This article provides concise explanations for sixteen common front‑end interview topics, covering inline vs. block elements, clearing floats, box‑sizing, CSS imports, progressive enhancement vs. graceful degradation, margin collapse, preprocessors, positioning, display types, centering techniques, CSS specificity, new CSS3 selectors and features, Flexbox, browser compatibility hacks, and media queries.
This article explains the ES6 yield keyword, its role in generator functions, how the .next() method controls execution flow, how parameters affect yielded values, and provides practical examples to help JavaScript developers master asynchronous iteration.
This article explains why a seemingly nonsensical JavaScript expression evaluates to the two characters “sb” by dissecting its operator precedence, breaking it into sub‑expressions, and applying JavaScript’s type‑conversion rules step by step.
This tutorial walks through creating a Chrome extension that automates page clicks to repeatedly refresh and purchase a Huawei Honor V9, covering element inspection, simulated clicks with timers, JavaScript fundamentals, packaging the extension, and additional handy scripts.
This article chronicles the development of our hybrid mobile technology from its 2014 inception, detailing the architectural decisions, bridgeJS integration, multi‑platform "N‑in‑1" strategy, tooling choices, performance optimizations, and future directions for efficient cross‑platform mobile app delivery.
The seventh issue of Baidu Waimai's technical monthly presents a collection of practical engineering articles covering operations monitoring, big‑data platform incubation, BFT crawling algorithm, zombie‑process avoidance, Nginx+Lua overload protection, OLTP/OLAP integration, new‑user repurchase prediction, a generic frontend tracking solution, and the use of favicons to personalize websites.
This article explains how Web Workers can off‑load heavy data processing in WebGL‑based map engines, covering worker creation, data serialization, transferable objects, optimal worker count, and real‑world performance gains, all illustrated with code snippets and diagrams.
This tutorial walks beginners through creating a basic JavaScript calculator with addition, subtraction, multiplication, division, clear (AC), and delete (DEL) functions, explaining the HTML structure, CSS styling, and step‑by‑step JavaScript logic to implement the three core parts of the app.
This article demystifies JavaScript memory by explaining stack and heap concepts, variable objects, primitive and reference types, and the mark‑and‑sweep garbage‑collection algorithm, helping front‑end developers write more efficient code.
This article explains the sticky‑footer problem when page content is short, defines the sticky‑footer effect, and provides four CSS‑based solutions—absolute positioning, calc(), table layout, and Flexbox—detailing their code, advantages, and drawbacks for responsive web design.
This article explains how GPU acceleration can keep web pages within the 16 ms frame budget, details the browser rendering pipeline, shows how to use Chrome DevTools to inspect composited layers, and outlines practical steps and pitfalls for enabling GPU‑accelerated animations.
This article provides a concise overview of the ten most impactful ES6 features—including default parameters, template literals, multi‑line strings, destructuring, enhanced object literals, arrow functions, promises, block‑scoped let/const, classes, and modules—explaining their syntax, benefits, and practical usage for modern JavaScript development.
This article outlines practical guidelines for incorporating video into web and mobile interfaces, emphasizing the need for textual alternatives, automatic mute, concise content, strong first impressions, user control, accessibility, and clear calls to action after playback.
The article outlines five crucial steps for visual designers to collaborate effectively with front‑end engineers, covering environment familiarity, design system creation, proper asset slicing, clear annotation, and pixel‑perfect testing to ensure seamless implementation and reduce miscommunication.
This article explains how key ES6 features—arrow functions, array methods, destructuring, enhanced object literals, classes, and block‑scoped variables—can streamline WeChat Mini Program development, improve code readability, and increase development efficiency.
The article recaps the first Frontend Technology Salon, covering ES6 fundamentals, Webpack packaging, and practical ES6 asynchronous programming examples, offering detailed explanations and code demonstrations for frontend developers and highlights common pitfalls and browser compatibility issues.
This article presents a comprehensive guide to front‑end performance optimization, covering reduction of HTTP requests, proper handling of repaint/reflow, minimizing DOM operations, using JSON, efficient HTML/CSS, CDN acceleration, external resource loading, minification, image compression, and cookie management.
The article introduces the concept of isomorphic JavaScript, explains its types and hierarchical levels, outlines its practical benefits such as SEO and faster first‑load experience, and details the IMVC framework and the create‑app library that enable seamless server‑client code sharing with a clear controller‑model‑view separation.
Based on StackOverflow’s 2017 survey, this article visualizes major tech ecosystems—JavaScript‑centric web development, Microsoft‑based stacks, and cross‑platform Java/Android/iOS clusters—then breaks down detailed learning roadmaps for front‑end, back‑end, and operations engineers, helping developers choose their focus.
The article analyzes doT.js, a compact 6 KB, dependency‑free JavaScript template engine that builds rendering functions via regex‑based code generation, avoids the costly with statement, caches compiled templates, and delivers superior performance in benchmarks compared with jQuery‑tmpl and other minimal engines, while noting its less intuitive syntax for complex conditionals.
In a playful interview, React explains its origins at Facebook, the virtual DOM mechanism, component design principles, performance optimizations, and real‑world usage, while code examples illustrate how the library simplifies UI development for modern web applications.
This article quickly guides you through the evolution of JavaScript modularization, covering early patterns, major specifications like AMD, CommonJS, UMD, ES6 modules, as well as loaders and bundlers, so you can grasp core concepts and practical code examples in just ten minutes.
This article presents curated learning roadmaps for aspiring frontend developers, backend developers, and DevOps engineers, originally compiled by Kamran Ahmed on GitHub, and invites readers to explore the skill sets, preferred technologies, and visual guides to advance their careers.
This article defines overlay layers, compares dialog boxes, toasts, and snackbars, outlines their modal and non‑modal variants, usage scenarios, design tips, advantages, and drawbacks, helping designers choose the right temporary UI component for mobile and web applications.
This article explains how to automatically generate API documentation using apidoc, host the resulting static files on GitHub Pages, configure the repository settings to serve the docs folder, and obtain a public URL that front‑end developers can access without manual file transfers.
This article shares the architectural design insights and componentization strategy for a multimedia editing module, covering UI panel design, gesture engine decoupling, component–view interaction, and data handling while omitting proprietary code and confidential details.
This article explains why page‑load speed matters, shows how to measure ready and load times, and provides concrete front‑end strategies—including reducing render‑blocking scripts and CSS, using responsive and lazy‑loaded images, applying gzip compression, cache‑control, ETag headers, DNS prefetching, and code‑level tweaks—to dramatically improve user experience and reduce bandwidth usage.
The article recounts a recent team restructuring that shifted NodeJS from pure backend development to a broader "big wireless" strategy, introduced large‑scale React Native adoption, created a dedicated architecture group, and shares practical lessons on aligning technology choices with business value.
This article outlines the rapid growth of Baidu Takeaway's operations backend, analyzes the limitations of the FIS‑based modular approach, describes the transition to React‑Redux componentization, and presents a third‑generation, model‑driven component sharing platform designed to reduce repetitive development and improve developer happiness.
Taobao’s redesigned home page faces heavy personalization demands, multiple data sources, and numerous modules, prompting a series of front‑end performance techniques—including prioritized loading, lazy execution, image compression, caching, and request consolidation—to improve FPS, DOMContentLoaded, and overall user experience.
This article provides a comprehensive guide to JavaScript functions, covering basic definitions, anonymous functions, default parameters, the arguments object, IIFE, nested functions, constructor functions, and best practices for using the new keyword, all illustrated with clear code examples.
This article explains the evolution of JavaScript module patterns—including CommonJS, AMD, CMD, and ES6—by illustrating their syntax, loading behavior, and practical drawbacks, and shows how to simulate modularity with simple global objects and closures.
This article provides a comprehensive overview of WebSocket, covering its origins as a full‑duplex HTML5 protocol, core JavaScript API usage, sub‑protocol negotiation, framing rules, security considerations, performance comparisons with XHR and SSE, deployment challenges, and related extensions such as Socket.IO.
This article examines the limitations of plain Fetch API for caching and real‑time updates in complex web apps, then demonstrates how wrapping Fetch with RxJS creates lazy‑loaded caches, reactive update notifications, and extensible data streams, while outlining practical implementation details and best practices.
This article examines the strong job market for frontend engineers in Beijing, explains why their role commands high salaries, lists essential frontend skills, and offers a downloadable PDF resource for further learning, providing a comprehensive view for aspiring developers.
This article explains CSS timing functions, covering the theory behind transition‑timing‑function and animation‑timing‑function, the role of Bézier curves, how to craft custom cubic‑bezier() values—including out‑of‑range curves for bounce effects—and the use of steps() for discrete animations, with browser support tables and practical examples.
This article examines common misconceptions and pitfalls of front‑end/back‑end separation, explains why proper preparation and clear API design are essential, and outlines practical steps—from project planning to testing and deployment—to implement a successful separation strategy in modern web development.
This article provides a comprehensive guide to Snap.svg, explaining its purpose, API similarities with jQuery, core classes like Element and Paper, various animation techniques—including element and static animations, path and matrix transformations—along with compatibility tips, performance recommendations, and useful code examples.
This article provides an extensive overview of frontend optimization techniques, covering work efficiency, speed performance, stability, responsive design, cross-browser compatibility, SEO best practices, and accessibility measures, offering practical tools, workflows, and strategies to improve web development productivity and user experience.
Learn how the CSS position property controls element layout, covering static, relative, absolute, fixed, and the modern sticky positioning, their behaviors, usage rules, and browser support, so you can apply the right positioning technique for smooth scrolling effects across browsers.
This article presents a comprehensive guide to front‑end performance optimization, covering how to prioritize bottlenecks, use debounce/throttle, reduce DOM reflows, optimize rendering, leverage requestAnimationFrame and Web Workers, and apply efficient CSS and script loading strategies, all illustrated with practical code examples.
