BestHub
Sign in
Tagged articles

frontend

3211 articles · Page 31 of 33
Qudian (formerly Qufenqi) Technology Team
Qudian (formerly Qufenqi) Technology Team
Jan 17, 2017 · Frontend Development

Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive

An in‑depth investigation compares requestAnimationFrame and setTimeout for web animations, revealing how the former syncs with browser repaint cycles, why it outperforms setTimeout, the limits of manually adjusting frame rates, compatibility issues across browsers and platforms, and practical fallback implementations.

Webanimationfrontend
0 likes · 9 min read
Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive
Qunar Tech Salon
Qunar Tech Salon
Jan 17, 2017 · Frontend Development

Evolution of Hybrid Routing Architecture: From Hy 1.0 to Hy 2.0 with React, Webpack Code Splitting, and Performance Optimizations

This article traces the development of Qunar's internal hybrid routing solution from the SPA‑based Hy 1.0 to the React‑driven Hy 2.0, detailing the shift to webpack code‑splitting, async loading with react‑router, and the performance and packaging challenges solved along the way.

Hybrid AppRoutingcode-splitting
0 likes · 11 min read
Evolution of Hybrid Routing Architecture: From Hy 1.0 to Hy 2.0 with React, Webpack Code Splitting, and Performance Optimizations
JavaScript
JavaScript
Jan 16, 2017 · Frontend Development

How to Stop Mobile Layout Shifts Caused by Lazy‑Loaded Images

This article explains why images that load after the DOM cause noticeable layout jumps on mobile pages and presents four CSS‑based solutions—media queries with pixels, rem units, viewport‑based vm units, and percentage padding—along with a complete example that eliminates the shift.

CSSfrontendimage placeholder
0 likes · 4 min read
How to Stop Mobile Layout Shifts Caused by Lazy‑Loaded Images
JavaScript
JavaScript
Jan 15, 2017 · Frontend Development

How to Implement Efficient Image Lazy Loading with Vanilla JavaScript

This guide explains the concept of image lazy loading, how to detect when an image enters the viewport, and provides a complete vanilla‑JavaScript implementation with throttled scroll handling to improve page performance and reduce bandwidth usage.

JavaScriptPerformancefrontend
0 likes · 4 min read
How to Implement Efficient Image Lazy Loading with Vanilla JavaScript
JavaScript
JavaScript
Jan 14, 2017 · Frontend Development

Master HTML Meta Tags: Attributes, Usage, and Mobile Optimization

This guide explains the three optional attributes (http-equiv, name, scheme) and the required content attribute of the HTML meta element, provides detailed tables of possible values, and shows practical code snippets for page metadata, HTTP header control, and mobile viewport settings.

HTMLMeta TagsMobile Optimization
0 likes · 6 min read
Master HTML Meta Tags: Attributes, Usage, and Mobile Optimization
Qunar Tech Salon
Qunar Tech Salon
Jan 13, 2017 · Frontend Development

Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques

This article explains what FPS and 60 fps mean, walks through the browser's rendering pipeline from HTML/CSS to the render tree and layers, and provides practical techniques such as avoiding forced synchronous layout, using transform/opacity, GPU acceleration, requestAnimationFrame, and proper event handling to achieve fluid animations.

BrowserRenderinganimation
0 likes · 24 min read
Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques
CSS Magic
CSS Magic
Jan 10, 2017 · Frontend Development

Why Use a CSS Preprocessor? Key Benefits and Core Features Explained

The article explains how CSS preprocessors like Stylus give developers file splitting, modular architecture, selector nesting, variables, calculations, functions, mixins, and build‑time optimizations, showing concrete code examples that illustrate each feature and why they make complex web styling more maintainable and scalable.

CSSMixinModular CSS
0 likes · 11 min read
Why Use a CSS Preprocessor? Key Benefits and Core Features Explained
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Jan 7, 2017 · Frontend Development

How to Build Scalable Web Modules: Architecture, Packaging, and Dependency Management

This article explains how to achieve module scalability in web interactive systems by defining modules, encapsulating their style, structure, and logic, managing dependencies with Uniform Module Identifiers, flattening hierarchical relationships, and applying scheduling strategies for display, refresh, and messaging.

Dependency Managementfrontendmodule architecture
0 likes · 12 min read
How to Build Scalable Web Modules: Architecture, Packaging, and Dependency Management
Qunar Tech Salon
Qunar Tech Salon
Jan 6, 2017 · Frontend Development

Introduction to three.js: Concepts, Capabilities, and Basic Usage

This article introduces three.js, explains its relationship to WebGL, outlines what it can achieve, describes core concepts such as coordinate system, camera, scene, renderer, lights, materials, geometry, and particle systems, and provides a step‑by‑step example for building an interactive 3D panorama with camera controls and user interaction.

3DGraphicsThree.js
0 likes · 12 min read
Introduction to three.js: Concepts, Capabilities, and Basic Usage
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Jan 6, 2017 · Frontend Development

How to Build Scalable Web Platforms Using AOP‑Based Adaptation

This article explains the concept of scalability in web interactive systems, distinguishes platform and module scalability, classifies browser and hybrid platforms, and demonstrates how Aspect‑Oriented Programming can cleanly separate standard business logic from platform‑specific adaptations with practical code examples.

AOPfrontendplatform adaptation
0 likes · 10 min read
How to Build Scalable Web Platforms Using AOP‑Based Adaptation
Meituan Technology Team
Meituan Technology Team
Jan 5, 2017 · Frontend Development

Frontend Engineering Practices: Meituan's App-Proto Framework

Meituan’s Xiamen frontend team created the app‑proto framework— a convention‑over‑configuration, self‑contained system that separates a Node data‑proxy/routing layer, a pure web interaction layer, and operational tooling—enabling mock‑first development, incremental technology adoption, modular replaceability, and automated CI/CD with Docker for fast, reliable merchant‑facing single‑page tools.

DataSourcesapp-protoarchitecture
0 likes · 16 min read
Frontend Engineering Practices: Meituan's App-Proto Framework
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Jan 3, 2017 · Frontend Development

14 Proven Principles to Supercharge Your Website Performance

This article distills the 14 core principles from the book "High Performance Web Sites", offering practical front‑end optimization techniques such as reducing HTTP requests, leveraging CDNs, enabling caching, using Gzip, and avoiding redirects to dramatically speed up web pages.

CDNHTTP optimizationWeb Performance
0 likes · 9 min read
14 Proven Principles to Supercharge Your Website Performance
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Dec 31, 2016 · Frontend Development

10 Essential Front‑End Optimization Techniques Every Developer Should Master

This article presents a comprehensive guide to front‑end performance optimization, covering ten practical techniques such as reducing HTTP requests, mastering repaint/reflow, minimizing DOM operations, using JSON, streamlining HTML/CSS, leveraging CDNs, externalizing assets, compressing resources, and managing cookies to improve page load speed and user experience.

CSSOptimizationPerformance
0 likes · 12 min read
10 Essential Front‑End Optimization Techniques Every Developer Should Master
Aotu Lab
Aotu Lab
Dec 30, 2016 · Frontend Development

Build a Vue 2.0 + Vuex Timer App: Step‑by‑Step Guide

This tutorial walks you through creating a simple timer application with Vue 2.0, Vue‑Router, Vuex and Webpack, highlighting the differences from Vue 1.0, showing project setup, file structure, core code snippets, and best practices for state management.

JavaScriptVue.jsVuex
0 likes · 18 min read
Build a Vue 2.0 + Vuex Timer App: Step‑by‑Step Guide
CSS Magic
CSS Magic
Dec 19, 2016 · Frontend Development

Quick Q&A #5: CSS Backgrounds, Animation Compatibility, and Front‑End Career Tips

In this fifth Quick Q&A episode, the author answers several front‑end questions covering how to make a background image adapt to a container, CSS animation compatibility across browsers, clearfix techniques, learning resources for JavaScript, choosing a Vue.js framework, and practical career advice for aspiring developers.

CSSJavaScriptVue.js
0 likes · 8 min read
Quick Q&A #5: CSS Backgrounds, Animation Compatibility, and Front‑End Career Tips
Hulu Beijing
Hulu Beijing
Dec 8, 2016 · Frontend Development

Why React & Redux Are Transforming Hulu’s Frontend Development

This article explains the fundamentals of React and Redux, compares them to traditional tools like jQuery, highlights their combined benefits for clean state management, and describes Hulu’s ongoing migration to this modern frontend stack.

ReActReduxState Management
0 likes · 5 min read
Why React & Redux Are Transforming Hulu’s Frontend Development
Aotu Lab
Aotu Lab
Dec 6, 2016 · Frontend Development

Getting Started with WeUI‑WXSS for WeChat Mini Programs

WeUI‑WXSS is the official WeChat design team's UI library that brings native‑look components like button, cell, dialog, and toast to mini programs, offering a unified visual experience and simple integration via provided WXSS files.

MiniProgramOpenSourceWXSS
0 likes · 3 min read
Getting Started with WeUI‑WXSS for WeChat Mini Programs
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 1, 2016 · Frontend Development

How Alibaba’s Frontend Team Tackled Double‑11’s Extreme Performance Challenges

The talk by Alibaba senior tech expert Shuwen Li reveals how the 2016 Double‑11 front‑end team achieved 100% service capability, second‑level instant experience, VR/3D interaction, visual monitoring, and accessibility through innovations like Wormhole SSR, Weex, HTTP/2, HTTPDNS, and automated pre‑loading, delivering sub‑second page loads and high reliability.

Mobile WebWeexaccessibility
0 likes · 8 min read
How Alibaba’s Frontend Team Tackled Double‑11’s Extreme Performance Challenges
CSS Magic
CSS Magic
Nov 25, 2016 · Frontend Development

2013 Frontend Interview Quiz: Full Questions and Answers

This article presents a 20‑question front‑end interview test compiled in 2013, covering HTML, CSS, JavaScript, HTTP and related topics, with scoring guidelines, answer intentions, solution outlines and reference answers to help assess candidates quickly.

CSSHTMLJavaScript
0 likes · 14 min read
2013 Frontend Interview Quiz: Full Questions and Answers
Architecture Digest
Architecture Digest
Nov 5, 2016 · Frontend Development

Webpack2 React‑Redux Boilerplate: Architecture, Features, Configuration and Best Practices

This article introduces a Webpack2‑based React‑Redux boilerplate, detailing its architecture, core features, configuration options, development workflow, server‑side rendering support, and best‑practice recommendations, while providing code examples and guidance for both beginners and experienced frontend developers.

ReActReduxSSR
0 likes · 18 min read
Webpack2 React‑Redux Boilerplate: Architecture, Features, Configuration and Best Practices
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Nov 1, 2016 · Frontend Development

How JD.com Scales Its Homepage: Frontend Architecture, Static Rendering, and Engineering Practices

This article details JD.com senior frontend architect Liu Wei's presentation on the challenges of a high‑traffic e‑commerce homepage and explains the static page generation pipeline, overall JS/CSS architecture, floor‑by‑floor loading strategy, disaster‑recovery measures, performance optimizations, and the JDF engineering toolchain that supports modular development and rapid deployment.

EngineeringE‑commerceStatic Rendering
0 likes · 19 min read
How JD.com Scales Its Homepage: Frontend Architecture, Static Rendering, and Engineering Practices
Qunar Tech Salon
Qunar Tech Salon
Nov 1, 2016 · Frontend Development

QReport vs Beacon: A Frontend‑Centric Real‑Time Data Reporting Solution

The article introduces QReport, a front‑end‑focused real‑time data reporting system developed to overcome the limitations of the Beacon log‑analysis platform, detailing its architecture, page‑identification method, flow analysis, real‑time capabilities, richer metrics, and overall advantages for web analytics.

Data AnalyticsQReportbeacon
0 likes · 8 min read
QReport vs Beacon: A Frontend‑Centric Real‑Time Data Reporting Solution
Aotu Lab
Aotu Lab
Oct 28, 2016 · Frontend Development

Mastering JavaScript Decorators: From Python Concepts to ES6 Implementation

This article explains how decorators—originally popularized in Python—can be applied in JavaScript ES6, covering their syntax, class and property use cases, underlying mechanics with Object.defineProperty, and practical Babel transpilation steps.

JavaScriptPythondecorators
0 likes · 10 min read
Mastering JavaScript Decorators: From Python Concepts to ES6 Implementation
Qunar Tech Salon
Qunar Tech Salon
Oct 27, 2016 · Frontend Development

Understanding Web Componentization: History, Principles, and Design Practices

This article explores the evolution of web componentization from the early template era to modern SPA frameworks, explains why component-based development is essential, and presents practical design ideas such as treating components as finite state machines with atomicization and event‑driven interactions.

SPAatomic designfrontend
0 likes · 7 min read
Understanding Web Componentization: History, Principles, and Design Practices
Aotu Lab
Aotu Lab
Oct 19, 2016 · Frontend Development

Explore VR History and Build WebVR Scenes with A-Frame

This article traces the origins of virtual reality from early concepts and devices to modern headsets, then introduces the A-Frame web framework and provides a step‑by‑step tutorial with code examples for creating VR scenes, animations, and interactions in the browser.

3DA-FrameJavaScript
0 likes · 15 min read
Explore VR History and Build WebVR Scenes with A-Frame
CSS Magic
CSS Magic
Oct 13, 2016 · Frontend Development

Yarn Explained: Facebook’s Faster, Safer JavaScript Package Manager

The article details how Facebook built Yarn to overcome npm’s consistency, security, and speed limitations, describing the evolution of their package‑management workflow, Yarn’s lockfile architecture, parallel installation process, additional features, production adoption, and simple commands to get started.

JavaScriptYARNfrontend
0 likes · 13 min read
Yarn Explained: Facebook’s Faster, Safer JavaScript Package Manager
Aotu Lab
Aotu Lab
Oct 10, 2016 · Frontend Development

Master HTTP Caching: Practical Rules for Static and Dynamic Resources

This guide explains why HTTP caching can be tricky, then provides concise, actionable rules for static assets and dynamic content, covering Cache‑Control, Expires, ETag, Last‑Modified, Vary headers, and how browsers handle refreshes to improve web performance.

Cache-ControlETagWeb Performance
0 likes · 9 min read
Master HTTP Caching: Practical Rules for Static and Dynamic Resources
Aotu Lab
Aotu Lab
Oct 10, 2016 · Frontend Development

How to Implement 3D Touch Interactions in Safari 10 with JavaScript

This guide explains the evolution of Apple’s Force Touch to 3D Touch, lists supported iPhone models, describes Quick Actions and Peek‑and‑Pop interactions, and provides step‑by‑step code for detecting touch pressure in Safari 10 using Touch.force and the touchforcechange event.

3D TouchJavaScriptSafari
0 likes · 9 min read
How to Implement 3D Touch Interactions in Safari 10 with JavaScript
JavaScript
JavaScript
Oct 5, 2016 · Frontend Development

Mastering JavaScript Timers: setTimeout, setInterval, and Their Pitfalls

Learn how JavaScript’s setTimeout and setInterval functions work, see practical code examples, understand their timing inaccuracies and common pitfalls, and discover how recursive setTimeout can provide more reliable scheduling by avoiding overlapping executions.

AsynchronousJavaScriptTimers
0 likes · 4 min read
Mastering JavaScript Timers: setTimeout, setInterval, and Their Pitfalls
Architecture Digest
Architecture Digest
Sep 27, 2016 · Frontend Development

Understanding CSS Design Patterns: Principles, Practices, and Common Methodologies

This article explains what design patterns are, why they matter for CSS, and provides practical guidance on structuring, naming, and organizing styles—including recommendations on nesting, selector usage, file ordering, and an overview of popular patterns such as OOCSS, SMACSS, Meta CSS, and BEM—to help front‑end developers write maintainable, scalable code.

BEMCSSDesign Patterns
0 likes · 17 min read
Understanding CSS Design Patterns: Principles, Practices, and Common Methodologies
Node Underground
Node Underground
Sep 26, 2016 · Frontend Development

What’s New in TypeScript 2.0? Key Features You Need to Know

Microsoft released TypeScript 2.0 on the 22nd of this month, introducing non‑nullable types, control‑flow based type analysis, simpler module declarations, and read‑only properties, while also integrating ES2015 features, modules, decorators, and tighter Angular collaboration, and can be installed via npm.

JavaScriptTypeScriptfrontend
0 likes · 2 min read
What’s New in TypeScript 2.0? Key Features You Need to Know
CSS Magic
CSS Magic
Sep 25, 2016 · Frontend Development

Front‑End Q&A: Class Naming, Checkbox Labels, Build Tools, Learning Resources

This article answers common front‑end questions, covering clear class‑naming practices, how to associate labels with form controls, why Gulp and Webpack are preferred over FIS, recommended JavaScript and mobile‑web books, CSS framework trade‑offs, and career advice for beginners.

Build ToolsCSSHTML
0 likes · 9 min read
Front‑End Q&A: Class Naming, Checkbox Labels, Build Tools, Learning Resources
Aotu Lab
Aotu Lab
Aug 25, 2016 · Frontend Development

Create Interactive CSS3 3D Panorama Effects for the Web

This article explains how to use CSS3 transform properties such as perspective, transform-style, and backface-visibility, along with geometry calculations, to build interactive 360° panorama scenes that work on modern browsers without Flash.

3D Transformfrontend
0 likes · 12 min read
Create Interactive CSS3 3D Panorama Effects for the Web
Hujiang Technology
Hujiang Technology
Aug 22, 2016 · Frontend Development

Thinking in Front-End Development: A Modern Overview

This article provides a comprehensive overview of modern front‑end development, covering the evolution of development workflows, emerging languages and tools, the impact of React and Flux/Redux architectures, asynchronous handling with promises and saga, and practical best‑practice recommendations for building robust web applications.

frontendwebpack
0 likes · 16 min read
Thinking in Front-End Development: A Modern Overview
360 Quality & Efficiency
360 Quality & Efficiency
Aug 18, 2016 · Frontend Development

Comprehensive Front-End UI Component Testing Checklist

This article provides a detailed checklist of test cases for common web front‑end UI components such as tree controls, various chart types, maps, file upload/download, image handling, URL validation, and IP input fields, helping testers ensure functional correctness, data integrity, and user experience.

UI testingcomponent checklistfrontend
0 likes · 10 min read
Comprehensive Front-End UI Component Testing Checklist
Nightwalker Tech
Nightwalker Tech
Jul 28, 2016 · Frontend Development

Best Practices for Image Compression and Delivery in Mobile and Web Applications

This article compiles practical techniques for reducing image size, selecting optimal formats like WebP, leveraging compression libraries, employing CDN and HTTP caching strategies, and handling server‑side processing to improve bandwidth usage and user experience on both mobile and desktop platforms.

cachingfrontendimage compression
0 likes · 6 min read
Best Practices for Image Compression and Delivery in Mobile and Web Applications
Java High-Performance Architecture
Java High-Performance Architecture
Jul 17, 2016 · Frontend Development

How eBay Optimized JS/CSS Bundling to Boost Browser Caching and Performance

eBay reduced HTTP requests and improved caching by splitting its monolithic JS/CSS bundles into shared core libraries, domain‑specific common resources, and page‑specific assets, creating a three‑tier packaging strategy that balances load, consistency, and manageability across its multi‑domain site.

Web Performancecachingfrontend
0 likes · 5 min read
How eBay Optimized JS/CSS Bundling to Boost Browser Caching and Performance
Aotu Lab
Aotu Lab
Jul 15, 2016 · Frontend Development

Boost Mobile Icon Clarity with Fast SVG Export and Symbol Techniques

This guide explains why retina screens blur icons, compares SVG with other icon solutions, shows four practical SVG usage methods, and provides step‑by‑step instructions for exporting SVGs, automating symbol generation with gulp, and using a lightweight SVG‑symbol visual tool.

IconSpriteSymbol
0 likes · 12 min read
Boost Mobile Icon Clarity with Fast SVG Export and Symbol Techniques
ITPUB
ITPUB
Jul 8, 2016 · Frontend Development

Spice Up Your Report Pages with a Live Weather Widget in Three Simple Steps

This short tutorial explains how to enhance boring report pages by embedding a free weather forecast widget using an iframe and JavaScript, covering provider selection, code insertion, and integration with FineReport, plus tips for sizing and transparency.

FineReportJavaScriptfrontend
0 likes · 3 min read
Spice Up Your Report Pages with a Live Weather Widget in Three Simple Steps
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
Jul 8, 2016 · Frontend Development

How I Guided My Non‑Tech Girlfriend from Zero to Junior Front‑End Developer in 6 Months

This article outlines a step‑by‑step learning roadmap—including HTML/CSS/JavaScript, computer‑science fundamentals, algorithms, tooling, backend basics, and project work—that helped a complete beginner become a capable junior front‑end developer within just over half a year.

Learning PathWeb Developmentfrontend
0 likes · 9 min read
How I Guided My Non‑Tech Girlfriend from Zero to Junior Front‑End Developer in 6 Months
Tencent TDS Service
Tencent TDS Service
Jun 30, 2016 · Frontend Development

How to Decouple Hybrid H5 for True Cross‑Platform Compatibility

This article explains the concepts of Hybrid H5, its inherent coupling with native apps, and provides a step‑by‑step guide on decoupling through jsapi layers to restore cross‑platform functionality across multiple apps and platforms, illustrated with code examples and diagrams.

Hybrid H5JSAPIfrontend
0 likes · 14 min read
How to Decouple Hybrid H5 for True Cross‑Platform Compatibility
CSS Magic
CSS Magic
Jun 21, 2016 · Frontend Development

The Definitive Gulp 4 Beginner’s Guide (Translation)

This comprehensive guide introduces Gulp 4, compares it with Grunt, explains its Node.js requirements, walks through installing the development version, details the core API and common plugins, and provides complete example gulpfile scripts for tasks such as building, watching, live‑reloading, and serving static files.

Build ToolsJavaScriptNode.js
0 likes · 28 min read
The Definitive Gulp 4 Beginner’s Guide (Translation)
Architecture Digest
Architecture Digest
Jun 20, 2016 · Frontend Development

Evolution and Architecture of Taobao Home Page: From PHP to Node, Platform Migration, Performance and Stability

The article details the evolution of Taobao's home page over the past year and a half, covering its background, the shift from a PHP‑based rendering system to a Node‑based platform, module construction, dynamic data integration, performance optimizations, stability measures, monitoring, and agile operational practices.

Taobaoarchitecturebackend
0 likes · 17 min read
Evolution and Architecture of Taobao Home Page: From PHP to Node, Platform Migration, Performance and Stability
21CTO
21CTO
Jun 18, 2016 · Fundamentals

How to Become a Full‑Stack Engineer: Lessons from 15 Years of Coding

This article shares a veteran developer’s journey from early web pages to modern full‑stack engineering, offering practical advice on mastering front‑end, back‑end, and mobile technologies, the importance of broad skills, and a realistic roadmap to becoming a versatile software professional.

Full-StackWeb Developmentbackend
0 likes · 7 min read
How to Become a Full‑Stack Engineer: Lessons from 15 Years of Coding
21CTO
21CTO
Jun 17, 2016 · Fundamentals

2016 Programmer Salary Survey: Who Earns the Most and Emerging Tech Trends

The 2016 programmer salary report reveals that front‑end, back‑end and mobile developers dominate the workforce, big‑data engineers command the highest pay, senior engineers see sharp salary jumps, and emerging technologies like Swift, WeChat, and Python shape future career choices.

Big DataCareer Trendsbackend
0 likes · 8 min read
2016 Programmer Salary Survey: Who Earns the Most and Emerging Tech Trends
Aotu Lab
Aotu Lab
Jun 17, 2016 · Frontend Development

Why Upgrade to HTTP/2 Now? Real‑World Performance Gains and Best Practices

This article examines how widespread HTTP/2 adoption changes front‑end architecture, demonstrates concrete speed improvements through multiplexing, priority, and server‑push with real‑world demos and HAR analysis, and explains which legacy optimizations become obsolete.

HTTP/2MultiplexingServer Push
0 likes · 12 min read
Why Upgrade to HTTP/2 Now? Real‑World Performance Gains and Best Practices
Aotu Lab
Aotu Lab
Jun 14, 2016 · Frontend Development

Safari 10.0: Full‑Stack Web API and Front‑End Feature Guide

Safari 10.0 brings comprehensive support for IndexedDB, Shadow DOM, ES6, WebGL, advanced CSS properties, media autoplay, picture‑in‑picture, WebDriver, and native Apple Pay integration, enabling developers to build richer offline‑capable, secure, and high‑performance web applications on macOS and iOS.

IndexedDBSafariShadow DOM
0 likes · 12 min read
Safari 10.0: Full‑Stack Web API and Front‑End Feature Guide
21CTO
21CTO
Jun 14, 2016 · Frontend Development

How Taobao’s Home Page Evolved: From PHP to Node and Scaling to Billions of Views

This article chronicles the evolution of Taobao’s home page—from its early PHP implementation to a modern Node‑based platform—detailing architecture, module building, performance optimizations, stability safeguards, and agile practices that enable it to serve billions of daily page views.

PHPPerformanceTaobao
0 likes · 18 min read
How Taobao’s Home Page Evolved: From PHP to Node and Scaling to Billions of Views
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 13, 2016 · Frontend Development

Master CSS: Pseudo‑Elements, Fonts, Images, SVG, Animations & Performance

This guide covers essential front‑end techniques—from using ::before and ::after pseudo‑elements and optimizing fonts, images, and SVGs, to mastering CSS3 animations, responsive breakpoints, reflow/repaint performance, and effective class‑naming conventions—providing practical resources and best‑practice tips for modern web development.

CSSPerformanceSVG
0 likes · 6 min read
Master CSS: Pseudo‑Elements, Fonts, Images, SVG, Animations & Performance
ITFLY8 Architecture Home
ITFLY8 Architecture Home
Jun 9, 2016 · Frontend Development

Inside Taobao’s Home Page: From PHP to Node, Architecture & Performance Secrets

The article recounts a year‑and‑a‑half of evolving Taobao’s massive home page, detailing its shift from a PHP‑based rendering system to a Node‑powered architecture, the modular building platform, dynamic data integration, performance optimizations, stability measures, and agile deployment practices that keep billions of daily visits smooth.

Performancearchitecturefrontend
0 likes · 20 min read
Inside Taobao’s Home Page: From PHP to Node, Architecture & Performance Secrets
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 7, 2016 · Frontend Development

How to Achieve Proportional Image and Video Scaling with CSS

This article explains how to maintain correct aspect ratios for images and videos in responsive layouts by setting only one dimension for images and using an intrinsic‑ratio container with padding‑bottom for videos, complete with practical CSS code examples.

CSSImage ScalingVideo Aspect Ratio
0 likes · 3 min read
How to Achieve Proportional Image and Video Scaling with CSS
CSS Magic
CSS Magic
May 31, 2016 · Interview Experience

Interview with CSS Magic: Front‑End Career, Tools, and Team Building

In this interview, front‑end architect “CSS Magic” shares his career path, the challenges of rapid front‑end evolution, the books and people that shaped him, his approach to adopting new tools like Flexbox and Gulp, advice for beginners, and the hardware and software he relies on daily.

careerfrontendinterview
0 likes · 17 min read
Interview with CSS Magic: Front‑End Career, Tools, and Team Building
Aotu Lab
Aotu Lab
May 27, 2016 · Frontend Development

Exploring Adobe Spark: A Hands‑On Review of Its Multi‑Device Web Tools

This article reviews Adobe Spark, detailing its multi‑device web and iOS apps, core features like Post, Page, and Video, the user‑focused design choices, and the front‑end technologies such as Material Design, Webpack, Typekit, and SVG that power the service.

Adobe SparkHTML5Product Review
0 likes · 8 min read
Exploring Adobe Spark: A Hands‑On Review of Its Multi‑Device Web Tools
ITPUB
ITPUB
May 26, 2016 · Fundamentals

Avoid Common Mistakes When Teaching Yourself Web Development: A Beginner’s Roadmap

A recent graduate shares how he overcame the pitfalls of self‑teaching programming by narrowing his tech stack to essential web tools, focusing on hands‑on projects, and avoiding endless theory, offering a concise roadmap for beginners eager to build functional prototypes quickly.

DjangoWeb Developmentbackend
0 likes · 4 min read
Avoid Common Mistakes When Teaching Yourself Web Development: A Beginner’s Roadmap
Aotu Lab
Aotu Lab
May 20, 2016 · Frontend Development

Master CSS3 3D Transforms: Flip Cards, Book‑Turning & Pop‑Up Effects

Learn how to create stunning CSS3 3D effects—from basic flip‑card animations to full‑page book‑turning and pop‑up book designs—by mastering perspective, transform‑style, and proper 3D hierarchy, while understanding browser support limits and performance considerations.

3D Transformsfrontendperspective
0 likes · 8 min read
Master CSS3 3D Transforms: Flip Cards, Book‑Turning & Pop‑Up Effects
21CTO
21CTO
May 12, 2016 · Frontend Development

Migrating Baidu Tieba Frontend to React: From fis3 to Modern Build Tools

This article details the challenges of evolving a large legacy frontend codebase, the transition from jQuery and fis3 to React with TypeScript, the integration of webpack-like features, server‑side rendering techniques, and the use of yog2, Fit, and related tooling to streamline modern web development.

SSRTypeScriptfis3
0 likes · 21 min read
Migrating Baidu Tieba Frontend to React: From fis3 to Modern Build Tools
21CTO
21CTO
May 7, 2016 · Frontend Development

Choosing the Right Front-End Framework: Trends, Comparisons & Future Outlook

This article reviews recent advances in front‑end development, compares popular frameworks such as AngularJS, EmberJS, ReactJS and VueJS, examines their evolution, discusses user and developer needs, and offers guidance on which technologies to invest in for the coming years.

AngularFrameworksJavaScript
0 likes · 12 min read
Choosing the Right Front-End Framework: Trends, Comparisons & Future Outlook
21CTO
21CTO
Apr 28, 2016 · Frontend Development

Mastering Browser Storage: Cookies, Web Storage, IndexedDB & WebSQL

An in‑depth guide to the evolution of browser storage—covering cookies, Web Storage (localStorage/sessionStorage), IndexedDB, WebSQL, and related APIs—explains their concepts, usage, compatibility, and provides practical code examples for reading, writing, and managing data across modern browsers.

IndexedDBWebSQLbrowser storage
0 likes · 15 min read
Mastering Browser Storage: Cookies, Web Storage, IndexedDB & WebSQL
Qunar Tech Salon
Qunar Tech Salon
Apr 20, 2016 · Frontend Development

A Day in the Life of a Developer: Debugging IE7 JavaScript Issues

This article chronicles a developer’s detailed workday, documenting the discovery, analysis, and resolution of numerous JavaScript bugs in IE7, the communication with teammates, and the systematic debugging process that ultimately led to fixing a critical comma‑induced error in the code.

DebuggingIE7JavaScript
0 likes · 11 min read
A Day in the Life of a Developer: Debugging IE7 JavaScript Issues
Architecture Digest
Architecture Digest
Apr 16, 2016 · Frontend Development

Front‑End Development Guidelines: HTML5 Doctype, Semantic Markup, Accessibility, and JavaScript Best Practices

This article provides comprehensive front‑end development guidelines covering the proper HTML5 DOCTYPE, semantic markup, alt text, table usage, microformats, jQuery UI, consistent JavaScript style, performance optimizations, unique ID generation, feature detection, and readable code conventions.

HTMLJavaScriptaccessibility
0 likes · 19 min read
Front‑End Development Guidelines: HTML5 Doctype, Semantic Markup, Accessibility, and JavaScript Best Practices
21CTO
21CTO
Apr 14, 2016 · Frontend Development

How Taobao Optimizes Its Homepage Performance: Key Frontend Strategies

This article examines the performance challenges of Taobao's personalized homepage and presents a series of frontend optimization techniques—including module prioritization, lazy loading, image compression, caching, and smooth rendering—to achieve faster first‑screen loads and smoother scrolling experiences.

OptimizationPerformancecaching
0 likes · 12 min read
How Taobao Optimizes Its Homepage Performance: Key Frontend Strategies
dbaplus Community
dbaplus Community
Apr 14, 2016 · Frontend Development

How Taobao Optimized Its Homepage Performance: Key Front‑End Strategies

The article examines the performance challenges of Taobao's personalized homepage—multiple data sources, numerous modules, and heavy image loads—and outlines concrete front‑end techniques such as critical‑module prioritization, lazy loading, lazy execution, image compression, caching, and easing animations to achieve faster first paint and smoother scrolling.

Taobaocachingfrontend
0 likes · 12 min read
How Taobao Optimized Its Homepage Performance: Key Front‑End Strategies
21CTO
21CTO
Apr 8, 2016 · Frontend Development

How to Auto-Update Static Assets with MD5 Fingerprinting in Frontend Projects

This article explains the challenges of caching static resources in frontend development, especially in environments like WeChat, and presents a solution using MD5 fingerprinting, Gulp preprocessing, manifest generation, and RequireJS mapping to automatically update only changed files while preserving cache efficiency.

MD5PerformanceRequireJS
0 likes · 6 min read
How to Auto-Update Static Assets with MD5 Fingerprinting in Frontend Projects
ITPUB
ITPUB
Apr 8, 2016 · Frontend Development

Turn Your Browser into a Live HTML Editor with a Simple Data URI Trick

This article explains how entering a specially crafted data:text/html URI in the browser address bar creates a temporary, editable HTML page, and shows multiple community extensions that add syntax highlighting, theming, and custom behaviors using Ace editor and other tricks.

Ace editorBrowsercontenteditable
0 likes · 6 min read
Turn Your Browser into a Live HTML Editor with a Simple Data URI Trick
21CTO
21CTO
Apr 2, 2016 · Frontend Development

How JD.com Scales Its E‑Commerce Homepage with Front‑End Engineering

This article details JD.com's front‑end engineering practices for its 2015 PC homepage, covering challenges, static page generation, overall architecture, modular widget system, build tools, performance optimizations, disaster‑recovery strategies, and a Q&A session that reveals practical implementation insights.

EngineeringE‑commercePerformance
0 likes · 22 min read
How JD.com Scales Its E‑Commerce Homepage with Front‑End Engineering
21CTO
21CTO
Mar 28, 2016 · Frontend Development

How Dangdang Boosted Page Speed: Componentization, Lazy Loading, and Nginx Caching

This article details Dangdang Marketplace's comprehensive performance optimization—including component-based design, proactive data generation, asynchronous loading, lazy rendering, multi‑domain and CDN strategies, GZIP compression, and Nginx fastcgi/proxy caching—showing how these measures reduced first‑screen time to under three seconds and dramatically lowered CPU and load during high‑traffic events.

PHPPerformancecaching
0 likes · 17 min read
How Dangdang Boosted Page Speed: Componentization, Lazy Loading, and Nginx Caching
21CTO
21CTO
Mar 25, 2016 · Frontend Development

How to Master Front-End Growth: Building Skills and a Personal Knowledge System

This article explores practical ways for front‑end engineers to accelerate their career by balancing ability and knowledge, establishing a personal knowledge system, and adopting systematic training to become more competent and adaptable in a rapidly evolving field.

Learning Strategiescareer-developmentfrontend
0 likes · 13 min read
How to Master Front-End Growth: Building Skills and a Personal Knowledge System
Java High-Performance Architecture
Java High-Performance Architecture
Mar 21, 2016 · Frontend Development

Why WebAssembly Is Revolutionizing Front‑End Development

WebAssembly, now standardized by the four major browsers, lets developers write web apps in multiple languages with near‑native performance, overcoming JavaScript’s speed limits, and offers a compact binary format, sandboxed security, and a readable text format for debugging and learning.

JavaScriptPerformanceWebAssembly
0 likes · 4 min read
Why WebAssembly Is Revolutionizing Front‑End Development
ITPUB
ITPUB
Mar 12, 2016 · Frontend Development

Should You Ditch Front‑End Frameworks? A Pragmatic Look at Principles Over Packages

The author, a veteran web developer, argues that while front‑end frameworks like Angular, Backbone, and Knockout offer shortcuts, they violate core software principles, increase maintenance burden, and often hinder true architectural understanding, urging developers to favor solid design patterns instead of heavyweight frameworks.

Design PatternsFrameworksSoftware Architecture
0 likes · 9 min read
Should You Ditch Front‑End Frameworks? A Pragmatic Look at Principles Over Packages
Architecture Digest
Architecture Digest
Mar 8, 2016 · Frontend Development

Understanding Browser Caching: Strong and Negotiated Cache Mechanisms

This article explains the fundamentals of browser caching, covering strong and negotiated cache principles, HTTP header configurations such as Expires and Cache‑Control, practical code examples for managing cache in Java, and common development techniques to control or bypass caching for optimal web performance.

Strong CacheWeb Performancebrowser caching
0 likes · 16 min read
Understanding Browser Caching: Strong and Negotiated Cache Mechanisms
21CTO
21CTO
Mar 4, 2016 · Frontend Development

How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering

This article explains why web pages become sluggish, breaks down the browser's rendering pipeline, details how reflow and repaint affect performance, and provides nine practical techniques—including batching DOM operations, using requestAnimationFrame and requestIdleCallback—to dramatically improve page speed and achieve smooth 60 FPS animations.

BrowserRenderingfrontend
0 likes · 14 min read
How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering