BestHub
Sign in
Tagged articles

frontend

3211 articles · Page 1 of 33
CodeNotes
CodeNotes
Aug 18, 2026 · Frontend Development

Mastering OAuth2 Login in the Frontend: Full Flowchart and Common Pitfalls

This article walks through the complete OAuth2 Authorization Code flow with PKCE for front‑end applications, explains each step with code examples, highlights six frequent pitfalls such as redirect_uri mismatches, missing state validation, PKCE requirements, one‑time code usage, URL leakage, and insecure token storage, and provides a ready‑to‑use implementation template.

Authorization CodeOAuth FlowOAuth2
0 likes · 11 min read
Mastering OAuth2 Login in the Frontend: Full Flowchart and Common Pitfalls
AI Architecture Path
AI Architecture Path
Aug 17, 2026 · Backend Development

Over 461K Stars: The Ultimate Open‑Source Catalog of 1,400+ Free APIs Covering Most Development Scenarios

The article presents the public‑apis GitHub repository—a community‑maintained, 461K‑star catalog of more than 1,400 free public APIs organized into 45 categories, explains its key metadata (Auth, HTTPS, CORS), showcases a visual search site, provides concrete usage examples, outlines limitations such as rate limits and stability, and offers role‑specific recommendations for front‑end, back‑end, student, and indie developers.

API catalogbackenddeveloper resources
0 likes · 11 min read
Over 461K Stars: The Ultimate Open‑Source Catalog of 1,400+ Free APIs Covering Most Development Scenarios
21CTO
21CTO
Aug 13, 2026 · Frontend Development

Evan You Launches New Company While Unveiling Pinia 4 – Key Updates and Impact

Evan You announced the formation of a new company and the official release of Pinia 4, highlighting a shift to pure ESM modules, a 77% bundle‑size reduction, a modern nostics‑based error‑diagnostics system, the adoption of ES2022 Object.hasOwn, and the debut of Pinia Colada 1.0 with deep Vue‑Router integration, while also outlining the strategic governance behind Vue’s sustainable development.

ESMError DiagnosticsJavaScript
0 likes · 8 min read
Evan You Launches New Company While Unveiling Pinia 4 – Key Updates and Impact
samdeepthink
samdeepthink
Aug 7, 2026 · Frontend Development

Why Backend Engineers Mistake Frontend for Simple—and What That Reveals

The article explains that backend engineers often view frontend work as easy because it changes rapidly with user preferences, while backend deals with stable, long‑standing challenges like data consistency, making each side complex in fundamentally different ways.

ComplexitySystem Designbackend
0 likes · 4 min read
Why Backend Engineers Mistake Frontend for Simple—and What That Reveals
Java Architect Handbook
Java Architect Handbook
Aug 4, 2026 · Frontend Development

Why Alibaba’s Open‑Source Kiwi Solves the Full‑Cycle i18n Pain Points

Kiwi, Alibaba’s open‑source i18n framework, offers an end‑to‑end workflow—from one‑click Chinese string extraction and linting to translation export, auto‑translation, and seamless import—addressing the searchability, missing‑string, and UI‑adjustment challenges that existing i18n libraries leave unresolved.

AlibabaKiwiTypeScript
0 likes · 6 min read
Why Alibaba’s Open‑Source Kiwi Solves the Full‑Cycle i18n Pain Points
BirdNest Tech Talk
BirdNest Tech Talk
Aug 2, 2026 · Artificial Intelligence

Which LLM Builds the Best Web Gomoku Game? A Comparative Test of the Latest Models

The author prompts six recent large language models to create a web‑based Gomoku game and compares the results across four dimensions—AI opponent, execution method, visual design, and engineering rigor—revealing that Opus 5 and gpt‑5.6‑sol deliver the most complete solutions while deepseek‑v4‑pro and glm‑5.2 excel at quick, single‑file prototypes, and MiniMax‑M3, despite its polished UI, fails at human‑vs‑AI play.

AI comparisonGomokuLLM
0 likes · 13 min read
Which LLM Builds the Best Web Gomoku Game? A Comparative Test of the Latest Models
Node.js Tech Stack
Node.js Tech Stack
Jul 31, 2026 · Frontend Development

How Rust Is Displacing JavaScript in Front‑End Toolchains: Insights from Rspack, Turbopack, and Bun

The article examines Lee Robinson's five‑year prediction that Rust would dominate JavaScript toolchains, showing how Rspack, Turbopack, and Bun have replaced CPU‑intensive build steps with native Rust cores while preserving JavaScript APIs, and discusses the trade‑offs and practical implications for front‑end developers.

Build ToolsJavaScriptRust
0 likes · 9 min read
How Rust Is Displacing JavaScript in Front‑End Toolchains: Insights from Rspack, Turbopack, and Bun
IoT Full-Stack Technology
IoT Full-Stack Technology
Jul 29, 2026 · Frontend Development

Comprehensive Guide to Docx, PPTX, XLSX, and PDF Preview Solutions

This article analyzes various file preview options for docx, pptx, xlsx, and pdf formats, comparing commercial services, open‑source front‑end libraries, and server‑side converters, providing code examples, performance notes, and practical recommendations for developers seeking reliable document preview implementations.

docxfile previewfrontend
0 likes · 19 min read
Comprehensive Guide to Docx, PPTX, XLSX, and PDF Preview Solutions
Old Zhang's AI Learning
Old Zhang's AI Learning
Jul 29, 2026 · Frontend Development

Turn Scientific Visualizations into Reusable Skills: 10 Open‑Source Interactive Experiments

The article presents z‑sci‑viz‑lab, a reusable Skill that transforms scientific concepts into single‑page interactive demos, outlines an eight‑step workflow, shows two usage patterns, details the Vite + Three.js + Canvas stack, and demonstrates nine concrete experiments ranging from eclipses to plate tectonics.

Three.jsViteWebGL
0 likes · 13 min read
Turn Scientific Visualizations into Reusable Skills: 10 Open‑Source Interactive Experiments
Java Tech Enthusiast
Java Tech Enthusiast
Jul 26, 2026 · Industry Insights

Is Web Development Still a Viable Career Path in 2026?

The article argues that while web development remains a valuable and accessible career in 2026, the role has fundamentally changed: AI tools automate routine coding, employers now expect full‑stack problem‑solving abilities, and junior developers must broaden their skill set beyond basic HTML/CSS/React to stay competitive.

2026AI toolsCareer Trends
0 likes · 10 min read
Is Web Development Still a Viable Career Path in 2026?
Architect's Tech Stack
Architect's Tech Stack
Jul 20, 2026 · Frontend Development

Recreating Apple‑Style UI with the Open‑Source Skill Library (18.3K Stars)

The article introduces Emil Kowalski’s Apple‑design Skill, explains how it decomposes the hardest parts of the Apple Human Interface Guidelines into actionable rules, shows a quick npx installation, demonstrates responsive UI components, and highlights the library’s focus on precise feedback, physics‑based animation, and material depth.

Apple UIGitHubUI animation
0 likes · 4 min read
Recreating Apple‑Style UI with the Open‑Source Skill Library (18.3K Stars)
SpringMeng
SpringMeng
Jul 17, 2026 · Frontend Development

How to Customize Codex Themes for Free Using Codex Dream Skin

This guide shows how to register multiple Codex accounts, install the open‑source Codex‑Dream‑Skin project, run its default theme, and then create personalized themes such as forest or star, providing a free alternative to paid Codex theme services.

CodexGitHubTheme customization
0 likes · 3 min read
How to Customize Codex Themes for Free Using Codex Dream Skin
IoT Full-Stack Technology
IoT Full-Stack Technology
Jul 14, 2026 · Frontend Development

Why Do Major Tech Companies Build Their Own Front‑End Scaffolding?

The article examines how large front‑end teams create internal scaffolding tools, detailing each stage—from pre‑development setup and template generation to build, commit‑hook checks and CI‑driven releases—and explains how these tools simplify configuration, enforce standards, manage versions, and streamline development workflows.

Build ToolsCILinting
0 likes · 11 min read
Why Do Major Tech Companies Build Their Own Front‑End Scaffolding?
Huajiao Technology
Huajiao Technology
Jul 10, 2026 · Backend Development

Six Real‑World Skill Templates Unveiled: Full Code, Structure, and Design Rationale

The article publishes six de‑identified Skill examples—covering Go server standards, a shared ranking service, Archery‑compliant DDL, interface‑contract generation, test/review workflows, and a frontend D2C standard—showing their directory layouts, complete SKILL.md files, and the concrete design decisions that keep AI‑generated code aligned with project rules.

AIGoInterface Contract
0 likes · 25 min read
Six Real‑World Skill Templates Unveiled: Full Code, Structure, and Design Rationale
SpringMeng
SpringMeng
Jul 10, 2026 · Frontend Development

Exploring TDesign: A Complete Guide to the New Open‑Source UI Library

This article walks through Tencent's open‑source TDesign library, covering its cross‑framework component suite, starter‑kit CLI initialization, AI‑friendly MCP server, and step‑by‑step creation of an AI chat page with practical code snippets and screenshots.

AI integrationCLIMCP
0 likes · 8 min read
Exploring TDesign: A Complete Guide to the New Open‑Source UI Library
Alipay Experience Technology
Alipay Experience Technology
Jul 7, 2026 · Frontend Development

High‑Performance Streaming Markdown Renderer for Multi‑Platform Mini‑Programs (x‑markdown‑mini)

The article analyzes the shortcomings of existing mini‑program Markdown renderers—conversion overhead, streaming performance, and extensibility—then presents three strategies employed by @ant-design/x‑markdown‑mini to eliminate the HTML middle layer, cache stable blocks with incremental patching, and provide isolated, plug‑in‑based syntax and component extensions, achieving up to 4.4× faster conversion on long texts.

Mini ProgramStreamingant-design
0 likes · 12 min read
High‑Performance Streaming Markdown Renderer for Multi‑Platform Mini‑Programs (x‑markdown‑mini)
Ubiquitous Tech
Ubiquitous Tech
Jul 5, 2026 · Frontend Development

Create a Cyberpunk Terminal‑Style Web PPT with AI‑Generated Skills

The article demonstrates how to use an AI Agent skill to generate a single‑file HTML presentation styled as a cyberpunk terminal console, eliminating the need for PowerPoint or design tools, and outlines suitable use cases, interactive features, example output, and the command‑line steps to install the skill.

AI Skillcyberpunkfrontend
0 likes · 4 min read
Create a Cyberpunk Terminal‑Style Web PPT with AI‑Generated Skills
Advanced AI Application Practice
Advanced AI Application Practice
Jul 5, 2026 · Frontend Development

Generate Lightweight Lottie Animations with a Single Prompt – Even from SVGs

This guide shows how to use the open‑source Text‑to‑Lottie tool powered by Codex to create lightweight Lottie animations—such as text effects, logo reveals, and SVG‑based icon motions—by describing them in plain language, previewing instantly in the browser, and exporting the resulting JSON for integration.

AI animationLottieSVG
0 likes · 7 min read
Generate Lightweight Lottie Animations with a Single Prompt – Even from SVGs
Amap Tech
Amap Tech
Jul 2, 2026 · Frontend Development

How Gaode’s Search Frontend Refactor Used Harness to Drive Complex Engineering Evolution

The article details Gaode’s front‑end overhaul of the AJX search result page, describing how a project‑level Harness workflow with coordinated agents, a five‑stage pipeline, code‑map generation, controlled code emission, style‑codex locking, accounting assets, and runtime quality loops enabled systematic, auditable, and reusable AI‑assisted refactoring of a massive codebase.

AI RefactoringAJXGaode
0 likes · 18 min read
How Gaode’s Search Frontend Refactor Used Harness to Drive Complex Engineering Evolution
DaTaobao Tech
DaTaobao Tech
Jun 29, 2026 · Frontend Development

AI-Powered Animation Pipeline: From After Effects to Ready-to-Run Front‑End Code

The article analyzes the pain points of traditional front‑end animation hand‑off and presents a full‑link solution that uses an After Effects plugin, AI‑driven code generation, and smart integration to turn designer animations into runnable code, cutting development time from hours to minutes while achieving over 95% visual fidelity.

AIAfter Effectsanimation
0 likes · 15 min read
AI-Powered Animation Pipeline: From After Effects to Ready-to-Run Front‑End Code
IT Services Circle
IT Services Circle
Jun 26, 2026 · Artificial Intelligence

10 Must‑Have Claude Code Skills to Supercharge Your Development Workflow

The article presents a curated list of ten Claude Code plugins—ranging from project planning and UI/UX enhancement to code review, token optimization, and custom skill creation—explaining their purpose, installation commands, concrete usage examples, and a recommended order to integrate them for a more efficient AI‑assisted development process.

AI pluginsClaude CodeMCP Builder
0 likes · 11 min read
10 Must‑Have Claude Code Skills to Supercharge Your Development Workflow
Hacker Afternoon Tea
Hacker Afternoon Tea
Jun 22, 2026 · Frontend Development

How Multica Shares a Single Codebase Across Web, Desktop, and Mobile

The article explains Multica's three‑layer contract architecture—core, ui, and views—and how enforcing a downward‑only dependency flow lets web, Electron desktop, and React Native mobile apps share a single codebase while avoiding duplication, version drift, and runtime mismatches.

MonorepoMulticaReAct
0 likes · 11 min read
How Multica Shares a Single Codebase Across Web, Desktop, and Mobile
21CTO
21CTO
Jun 17, 2026 · Frontend Development

ArrowJS 1.0: The First UI Framework Built for AI Agents

ArrowJS 1.0, a sub‑5KB reactive UI library that requires no JSX or build step, adds an optional WebAssembly sandbox, async components, SSR and hydration, and has sparked lively community debate over its minimalist design, agent‑oriented goals, and differences from React and Vue.

Agent-orientedArrowJSReactive JavaScript
0 likes · 6 min read
ArrowJS 1.0: The First UI Framework Built for AI Agents
IT Services Circle
IT Services Circle
Jun 14, 2026 · Frontend Development

How GSAP + AI Generates Advanced Vue & React Animations in One Line

The GSAP team released the gsap‑skills AI knowledge base, enabling tools like Cursor, Claude Code and Copilot to automatically generate full‑featured GSAP timelines, ScrollTrigger setups and performance‑optimized animation code for Vue and React projects, turning complex web animations from guesswork into reliable production code.

AIGSAPReAct
0 likes · 8 min read
How GSAP + AI Generates Advanced Vue & React Animations in One Line
AI Engineering
AI Engineering
Jun 14, 2026 · Artificial Intelligence

Can a Plugin Stop AI Code Generators from Over‑Engineering? Meet Ponytail

The Ponytail open‑source plugin guides AI coding assistants through a six‑step checklist that eliminates unnecessary libraries, redundant wrappers, and excess code, cutting generated code size by 80‑94%, reducing call costs by up to 77%, and speeding execution 3‑6× across common tasks.

AI codingPonytailbenchmark
0 likes · 6 min read
Can a Plugin Stop AI Code Generators from Over‑Engineering? Meet Ponytail
LuTiao Programming
LuTiao Programming
Jun 13, 2026 · Frontend Development

When AI Redesign Breaks Your Site: Why Git Branches Aren’t Enough

Using AI to redesign a front‑end page can quickly overwrite code and static assets, exposing the limits of simple Git branches; by creating a separate Git worktree, isolating the working directory, and organizing new resources in dedicated folders, developers keep the main branch stable while safely experimenting.

AIGitfrontend
0 likes · 18 min read
When AI Redesign Breaks Your Site: Why Git Branches Aren’t Enough
Architecture and Beyond
Architecture and Beyond
Jun 13, 2026 · R&D Management

Building an AI‑Native Software Development Organization: Redefining the Team Contract

The article analyzes how AI‑generated code reshapes software teams, urging a new organizational contract that defines ownership, realistic productivity expectations, role re‑definition, reinforced quality gates, and end‑to‑end process changes—from demand concretization to release monitoring—to sustain high‑quality delivery.

AIDevOpsbackend
0 likes · 23 min read
Building an AI‑Native Software Development Organization: Redefining the Team Contract
Java Architect Handbook
Java Architect Handbook
Jun 12, 2026 · Frontend Development

Is WebSocket Still the Best Choice for Real-Time Push? Compare with SSE and Polling

This article examines three server‑to‑client push methods—polling, WebSocket, and Server‑Sent Events (SSE)—detailing their mechanisms, browser compatibility, pros and cons, suitable scenarios, and provides step‑by‑step demos with Node.js/Express and plain HTML to help developers choose the most efficient solution for real‑time messaging.

ExpressNode.jsPolling
0 likes · 16 min read
Is WebSocket Still the Best Choice for Real-Time Push? Compare with SSE and Polling
CodeNotes
CodeNotes
Jun 10, 2026 · Frontend Development

16 Practical CSS Tricks Using :has() to Replace JavaScript

The new CSS :has() selector finally lets parents be selected based on child states, eliminating dozens of lines of JavaScript; this article demonstrates sixteen real‑world use cases, explains compatibility across major browsers, and offers performance tips for safe adoption.

:has()CSSCSS tricks
0 likes · 9 min read
16 Practical CSS Tricks Using :has() to Replace JavaScript
Architect's Guide
Architect's Guide
Jun 9, 2026 · Frontend Development

Complete Frontend Guide to Previewing DOCX, PPTX, XLSX, and PDF Files

The article surveys commercial file‑preview services and open‑source front‑end and back‑end solutions for DOCX, PPTX, XLSX, and PDF, compares their capabilities, limitations, and costs, and provides concrete code examples and a reusable Web Component for developers.

backenddocxfile preview
0 likes · 19 min read
Complete Frontend Guide to Previewing DOCX, PPTX, XLSX, and PDF Files
LuTiao Programming
LuTiao Programming
Jun 8, 2026 · Artificial Intelligence

Why Codex Skills Aren’t Plugins – Common Misuses Explained

The article clarifies that Codex Skills differ from plugins—plugins connect external resources while skills define how to act—and shows why many developers see no effect because they invoke skills incorrectly, use vague prompts, ignore context, or choose the wrong trigger mode.

AI SkillCodexPlugin
0 likes · 15 min read
Why Codex Skills Aren’t Plugins – Common Misuses Explained
Tech Ocean
Tech Ocean
Jun 8, 2026 · Frontend Development

Claude Design in Action: Prompt UI, One‑Click Handoff to Claude Code

This article walks through using Claude Design to generate a high‑fidelity WeChat bookkeeping mini‑program via conversational prompts, automatically apply a design system, iterate with Tweaks and inline comments, then hand off the resulting React‑style JSX bundle to Claude Code for uni‑app implementation, while highlighting token costs and common pitfalls.

AI designClaude CodeClaude Design
0 likes · 17 min read
Claude Design in Action: Prompt UI, One‑Click Handoff to Claude Code
CodeNotes
CodeNotes
Jun 6, 2026 · Frontend Development

9 Practical JSX Tips to Write Cleaner React Code

This article presents nine concise JSX techniques—such as using clsx for class concatenation, proper short‑circuit rendering, extracting deep ternaries, forwarding props with ...rest, leveraging children, memoizing style objects, correct comment syntax, fragment shorthand, and minimal boolean attributes—to boost code readability and component flexibility in React development.

Code styleJSXProps
0 likes · 7 min read
9 Practical JSX Tips to Write Cleaner React Code
Old Zhang's AI Learning
Old Zhang's AI Learning
Jun 5, 2026 · Frontend Development

Open-Source Browser‑Based Word Editor: Introducing docx‑editor

The article reviews the newly released docx‑editor, a client‑side WYSIWYG .docx editor built on ProseMirror with React and Vue adapters, detailing its architecture, installation, usage examples, real‑time collaboration via Yjs, AI Agent SDK integration, and practical pros and cons based on hands‑on testing.

AI AgentReActVue
0 likes · 15 min read
Open-Source Browser‑Based Word Editor: Introducing docx‑editor
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Jun 5, 2026 · Frontend Development

Is Next.js on the Way Out? Meet the New React Powerhouse: TanStack Start

As AI startups abandon Next.js for TanStack’s emerging ecosystem, the article examines TanStack Start’s full‑stack React capabilities, the explicit‑over‑magic philosophy, and why the growing AI community sees TanStack as the next foundational infrastructure, suggesting Next.js will remain important but no longer the sole standard.

AINext.jsReAct
0 likes · 7 min read
Is Next.js on the Way Out? Meet the New React Powerhouse: TanStack Start
CodeNotes
CodeNotes
Jun 4, 2026 · Frontend Development

N CSS Centering Techniques Every Front‑End Engineer Should Know

This article classifies centering scenarios, explains horizontal and vertical methods for inline and block elements, and walks through practical CSS solutions—from text‑align and margin auto to Flex, Grid, and absolute positioning—while highlighting pitfalls and a quick reference table.

CSSFlexboxGrid
0 likes · 8 min read
N CSS Centering Techniques Every Front‑End Engineer Should Know
Java Companion
Java Companion
Jun 4, 2026 · Artificial Intelligence

12 Must-Have Agent Skills for Full‑Stack Development (Frontend, Backend & DevOps)

This article lists and evaluates twelve practical Agent Skills—ranging from Next.js best practices and React component rules to Spring Boot scaffolding, PostgreSQL optimization, and CI/CD automation—providing installation commands, real‑world examples, and safety tips for integrating AI agents into full‑stack development workflows.

AI automationAgent SkillsDevOps
0 likes · 15 min read
12 Must-Have Agent Skills for Full‑Stack Development (Frontend, Backend & DevOps)
大转转FE
大转转FE
Jun 4, 2026 · Artificial Intelligence

Captcha Recognition in Practice: Front‑End Engineers Skip UI to Train Models

This article details how front‑end developers used a low‑code DDDD trainer and AI‑generated PyTorch CNN code to build high‑accuracy captcha recognizers, achieving up to 99% sequence accuracy while illustrating a workflow that lets developers shift from UI coding to model training with AI assistance.

AICAPTCHACNN
0 likes · 15 min read
Captcha Recognition in Practice: Front‑End Engineers Skip UI to Train Models
vivo Internet Technology
vivo Internet Technology
Jun 3, 2026 · Frontend Development

How to Build a Stable @Document Mention Input with ProseMirror

This article walks through implementing an @document mention feature for a knowledge‑base Q&A input box, comparing a naïve contenteditable approach with a ProseMirror‑based solution, detailing schema design, plugin and suggestion handling, and the stability challenges of cursor, IME, and undo/redo.

PluginProseMirrordecoration
0 likes · 12 min read
How to Build a Stable @Document Mention Input with ProseMirror
CodeNotes
CodeNotes
Jun 2, 2026 · Frontend Development

Why Your CSS Rules Aren’t Applying: A 1‑Minute Guide to Selector Specificity

Every CSS developer has faced a rule that refuses to work, tried adding !important, and still seen no change; this article explains the four‑digit specificity weight, inheritance, the dangers of !important, and how @layer can cleanly manage priority, ending with practical debugging steps and best‑practice tips.

@layerCSSfrontend
0 likes · 13 min read
Why Your CSS Rules Aren’t Applying: A 1‑Minute Guide to Selector Specificity
liandk
liandk
Jun 2, 2026 · Frontend Development

Beginner’s Guide: Named Export vs Default Export for getToken in JS/TS

The article explains why having both a named export and a default export for getToken in a JavaScript/TypeScript module is not a conflict, detailing their distinct syntax, import styles, appropriate use cases, and providing complete code examples for each approach.

JavaScriptTypeScriptdefault export
0 likes · 5 min read
Beginner’s Guide: Named Export vs Default Export for getToken in JS/TS
CodeNotes
CodeNotes
May 27, 2026 · Frontend Development

Mastering CSS Preprocessors: Practical Less and SCSS Guide (Part 4)

This article explains why CSS preprocessors are essential for large projects, demonstrates core features of Less and SCSS—including variables, nesting, mixins, inheritance, functions, and modularization—with real code examples, compares the two syntaxes, and offers recommendations and project‑structure guidelines for modern front‑end development.

CSSModularizationcss-preprocessor
0 likes · 20 min read
Mastering CSS Preprocessors: Practical Less and SCSS Guide (Part 4)
AI Insight Log
AI Insight Log
May 26, 2026 · Frontend Development

How Taste Skill Gives AI‑Generated Front‑Ends Real Design Sense

Taste Skill, a 21.5k‑star GitHub project, adds a set of design rules that AI coding agents can follow, turning generic, “slop” front‑end pages into more aesthetically pleasing layouts by banning common pitfalls and offering adjustable parameters for variance, motion, and visual density.

AIDesignGitHub
0 likes · 10 min read
How Taste Skill Gives AI‑Generated Front‑Ends Real Design Sense
Full-Stack Cultivation Path
Full-Stack Cultivation Path
May 25, 2026 · Frontend Development

Why Anime.js, the 68K‑Star Front‑End Animation Powerhouse, Is a Must‑Try

Anime.js v4, a lightweight high‑performance JavaScript animation library with over 68 000 GitHub stars, introduces a modular ES‑module API, 60 fps performance, refined timeline control, and new features like CSS‑variable, SVG path, scroll‑linked and additive animations, plus seamless Vue integration.

Anime.jsJavaScript animationVue
0 likes · 6 min read
Why Anime.js, the 68K‑Star Front‑End Animation Powerhouse, Is a Must‑Try
CodeNotes
CodeNotes
May 22, 2026 · Frontend Development

Mastering ahooks: Practical Tips and Full Guide for React Developers

This article provides a comprehensive, step‑by‑step guide to using Alibaba's ahooks library with React 18, covering installation, core hooks like useRequest, usePagination, state management hooks, side‑effect utilities, performance optimizations, real‑world examples, common pitfalls and best‑practice recommendations.

React HooksState ManagementTypeScript
0 likes · 23 min read
Mastering ahooks: Practical Tips and Full Guide for React Developers
Java Companion
Java Companion
May 22, 2026 · Frontend Development

How an 80k‑Star UI Skill Elevates AI‑Generated Front‑End Design

The ui‑ux‑pro‑max skill adds a design‑system inference engine to Claude Code, replacing generic AI‑generated pages with industry‑specific styles, color palettes, typography, and UX rules, while offering installation options, usage tips, and a discussion of token costs and skill conflicts.

AI UIClaude CodeSkill Plugin
0 likes · 10 min read
How an 80k‑Star UI Skill Elevates AI‑Generated Front‑End Design
AI Engineering
AI Engineering
May 21, 2026 · Frontend Development

Hallmark: Turning Ugly AI‑Generated Pages into Polished Designs

The article introduces Hallmark, an open‑source skill that equips AI coding tools with anti‑template design rules, enabling the generation of aesthetically pleasing, varied web pages by addressing common AI‑produced layout flaws such as purple gradients, single‑font usage, and overly centered content.

AIdesign automationfrontend
0 likes · 4 min read
Hallmark: Turning Ugly AI‑Generated Pages into Polished Designs
CodeNotes
CodeNotes
May 20, 2026 · Frontend Development

Master CSS Basics: Write Your First Stylesheet (Part 1)

This tutorial walks beginners through CSS fundamentals, covering what CSS is, how to include styles, basic syntax, selector types, cascade and specificity, the box model, units, background, borders, display, positioning, overflow, and a complete card component example, with practical tips for each topic.

Box ModelCSSLayout
0 likes · 23 min read
Master CSS Basics: Write Your First Stylesheet (Part 1)
Geek Labs
Geek Labs
May 20, 2026 · Frontend Development

Two Open‑Source AI Tools to Auto‑Generate HTML Slides and Hand‑Drawn Technical Diagrams

This article introduces two open‑source projects—beautiful‑html‑templates, which lets an AI generate complete HTML slide decks from plain instructions, and ian‑handdrawn‑ppt, which converts articles or outlines into a series of Chinese hand‑drawn style technical illustration images—detailing their features, usage steps, target users, and limitations.

AIHTML slidesfrontend
0 likes · 9 min read
Two Open‑Source AI Tools to Auto‑Generate HTML Slides and Hand‑Drawn Technical Diagrams
Su San Talks Tech
Su San Talks Tech
May 18, 2026 · Frontend Development

A Game-Changing AI‑Powered PPT Skill You Must Try

The article reviews html-ppt-skill, an AI‑driven tool that generates fully styled HTML presentations instead of PPTX files, detailing its theme, layout, and animation assets, presenter‑mode implementation, cross‑platform skill integration, practical advantages, limitations, and how it exemplifies the emerging AI skill ecosystem.

AI AgentsSkill Ecosystemdesign system
0 likes · 13 min read
A Game-Changing AI‑Powered PPT Skill You Must Try
CodeNotes
CodeNotes
May 17, 2026 · Frontend Development

Modern CSS Development Techniques: Ditch JS, Embrace Pure CSS Possibilities

This article provides a comprehensive guide to modern CSS techniques—including custom properties, native nesting, logical properties, container queries, the :has() selector, dark‑mode theming, pure‑CSS accordions, dialogs, tabs, tooltips, scroll‑driven animations, parallax, sticky elements, advanced Grid layouts, Subgrid, @layer, @scope, color‑mix, math functions, carousels, lazy‑load placeholders, form validation, theme toggles, and performance optimizations—showing how to replace JavaScript‑heavy interactions with pure CSS solutions.

CSSDark Modecontainer-queries
0 likes · 34 min read
Modern CSS Development Techniques: Ditch JS, Embrace Pure CSS Possibilities
Shuge Unlimited
Shuge Unlimited
May 16, 2026 · User Experience Design

Dress Before You Go: UI/UX Redesign of the OpenSpec Project

This article walks through a complete UI/UX redesign of the OpenSpec project, detailing the exploratory audit of nine visual issues, design‑system decisions on colors, fonts and tokens, the Propose and Apply steps with concrete code changes, verification pitfalls, and lessons learned for future visual changes.

OpenSpecReActTailwind CSS
0 likes · 27 min read
Dress Before You Go: UI/UX Redesign of the OpenSpec Project
Bilibili Tech
Bilibili Tech
May 15, 2026 · Frontend Development

Building an AI‑Powered Frontend Development Workflow with Bili‑FE

This article details how the Bili‑FE team evolved prompt engineering into a Harness Engineering workflow, creating a structured .workflow knowledge base and a series of AI‑driven commands that automate the entire frontend development lifecycle from requirement preprocessing to testing and mock generation.

AIMCPWorkflow
0 likes · 20 min read
Building an AI‑Powered Frontend Development Workflow with Bili‑FE
Frontend AI Walk
Frontend AI Walk
May 15, 2026 · Artificial Intelligence

Efficient AI Coding with Claude Code: Essential ECC Tools and Minimal Install

This guide walks developers through selecting, installing, and using the six core ECC components—Rules, search‑first, Reviewer Agent, Quality‑Gate, Documentation‑Lookup, and minimal Hooks—to create a streamlined, conflict‑free AI‑assisted coding workflow for Claude Code, emphasizing a consult‑first, minimal‑install approach.

AI programmingClaude CodeECC
0 likes · 14 min read
Efficient AI Coding with Claude Code: Essential ECC Tools and Minimal Install
Eric Tech Circle
Eric Tech Circle
May 15, 2026 · Frontend Development

A Free Markdown Formatting Tool Tailored for WeChat Public Account Authors

The author rebuilt a WeChat public‑account markdown formatter using Codex App + GPT 5.5 and Kiro IDE + Claude Opus 4.7, offering real‑time preview, one‑click inline‑style copy, multiple themes, code highlighting and mobile preview to eliminate tedious manual styling while keeping the tool completely free.

Code HighlightingHTMLWeChat
0 likes · 6 min read
A Free Markdown Formatting Tool Tailored for WeChat Public Account Authors
Old Zhang's AI Learning
Old Zhang's AI Learning
May 13, 2026 · Frontend Development

32 Open-Source HTML Slide Templates to Stop AI from Generating Ugly PPTs

The article introduces a GitHub repository offering 32 ready‑to‑use HTML/CSS slide templates designed for AI agents, explains a six‑step workflow for selecting and customizing templates, evaluates the strengths and limitations of the approach, and argues that HTML is re‑emerging as a universal presentation format.

AI AgentsHTMLfrontend
0 likes · 9 min read
32 Open-Source HTML Slide Templates to Stop AI from Generating Ugly PPTs
Shuge Unlimited
Shuge Unlimited
May 12, 2026 · Frontend Development

Building a Project Skeleton from Scratch with OpenSpec: Full Workflow Walkthrough

This article documents a step‑by‑step OpenSpec workflow that starts with requirement exploration, generates proposal, design, specs, review and task artifacts, executes them to scaffold a React 19 + TypeScript + Vite + Tailwind project, handles GitHub integration, validates the build, and archives the change while sharing practical lessons and pitfalls.

OpenSpecReActTypeScript
0 likes · 24 min read
Building a Project Skeleton from Scratch with OpenSpec: Full Workflow Walkthrough
liandk
liandk
May 9, 2026 · Frontend Development

Master uni.request: Send GET/POST, Handle Data, Loading and Errors in 5 Minutes

This tutorial walks through Uniapp's uni.request API, explaining its purpose, showing the full syntax, and providing step‑by‑step GET and POST examples with loading indicators, error handling, mini‑program domain setup, and common troubleshooting tips for seamless front‑back communication.

GETMini ProgramPOST
0 likes · 6 min read
Master uni.request: Send GET/POST, Handle Data, Loading and Errors in 5 Minutes
liandk
liandk
May 9, 2026 · Frontend Development

Master Uniapp Flex Layout: Quick Multi‑Platform Styling Guide

This tutorial walks you through Uniapp's styling essentials—using rpx units, scoped CSS, and Flex layout—to build common page structures such as centered buttons, vertically centered elements, and evenly spaced navigation icons that automatically adapt across H5, mini‑programs, and other platforms.

Vuecross-platformflex layout
0 likes · 7 min read
Master Uniapp Flex Layout: Quick Multi‑Platform Styling Guide
liandk
liandk
May 9, 2026 · Frontend Development

Master Uniapp Vue Core Directives in 5 Minutes – Hands‑On Guide

This tutorial walks you through Uniapp's essential Vue syntax, covering data binding, event handling, conditional and list rendering, with a complete code example and common pitfalls to help you build a simple personal information page quickly.

UniAppVuedata-binding
0 likes · 5 min read
Master Uniapp Vue Core Directives in 5 Minutes – Hands‑On Guide
liandk
liandk
May 9, 2026 · Frontend Development

Quickly Configure Uniapp Page Routing and Static Assets in 3 Minutes

This guide walks through Uniapp's core project structure, shows how to add a new page, configure its route in pages.json, reference static images with two methods, provides ready‑to‑copy code snippets, and highlights common pitfalls.

ConfigurationUniAppfrontend
0 likes · 5 min read
Quickly Configure Uniapp Page Routing and Static Assets in 3 Minutes
vivo Internet Technology
vivo Internet Technology
May 6, 2026 · Frontend Development

Implementing AVIF at Vivo: Next‑Gen Image Format in Practice

The article details how Vivo’s front‑end team tackled performance bottlenecks by researching AVIF, designing a graceful degradation strategy with CDN edge caching and asynchronous server transcoding, implementing smart format detection, and validating a 20%+ size reduction over WebP that yielded 15‑25% LCP improvement, 30%+ first‑screen load gains and over 30% bandwidth savings.

AVIFCDNWebP
0 likes · 12 min read
Implementing AVIF at Vivo: Next‑Gen Image Format in Practice
Old Zhang's AI Learning
Old Zhang's AI Learning
May 6, 2026 · Frontend Development

Testing Open‑Slide: A React‑Based PPT Framework Built for AI Agents

Open‑slide is a React and Tailwind powered slide framework designed for AI coding agents such as Claude Code, allowing natural‑language prompts to generate 1920×1080 decks with agent‑native authoring, inspector comments, asset management, presenter mode, static deployment, and a hands‑on evaluation of its strengths and limitations.

AI AgentsClaude CodeReAct
0 likes · 11 min read
Testing Open‑Slide: A React‑Based PPT Framework Built for AI Agents
CodeNotes
CodeNotes
May 5, 2026 · Frontend Development

Common React Hook Anti‑Patterns That Trip Up 80% of Teams

The article examines why many React projects become unstable due to misuse of hooks, presenting seven frequent anti‑patterns with concrete bad and good code examples, explaining the underlying problems, and offering practical guidelines and a checklist to write reliable Hook‑based effects.

Anti-PatternHooksReAct
0 likes · 14 min read
Common React Hook Anti‑Patterns That Trip Up 80% of Teams
Geek Labs
Geek Labs
May 3, 2026 · Frontend Development

Edit Word Docs Directly in the Browser with This Open‑Source Engine

SuperDoc is an open‑source DOCX engine that parses and renders real .docx files in the browser with full format fidelity, offers one‑click integration for major front‑end frameworks, real‑time Yjs collaboration, and AI‑driven document automation.

AI automationBrowserdocx
0 likes · 5 min read
Edit Word Docs Directly in the Browser with This Open‑Source Engine
CodeNotes
CodeNotes
May 2, 2026 · Frontend Development

Mastering React useEffect: The Complete Guide to Avoid Common Pitfalls

This guide explains what useEffect does, its three core execution rules, how dependency arrays change its behavior, eight practical scenarios, six typical pitfalls with concrete code examples, and best‑practice recommendations for writing clean, leak‑free React functional components.

HooksJavaScriptReAct
0 likes · 10 min read
Mastering React useEffect: The Complete Guide to Avoid Common Pitfalls
Tech Minimalism
Tech Minimalism
Apr 25, 2026 · User Experience Design

8 Essential AI Agent Skills Every UI Designer Should Install

This guide lists eight AI‑powered agent skills for UI designers, explains why the installation order matters, provides concrete CLI commands and example workflows, and shows how these skills turn Claude Code from a code generator into a full‑featured design partner.

AI AgentsClaude CodeTailwind
0 likes · 22 min read
8 Essential AI Agent Skills Every UI Designer Should Install
MeowKitty Programming
MeowKitty Programming
Apr 20, 2026 · Frontend Development

Will Scaffolding Tools Survive the AI Era? How Their Role Is Shifting

The article argues that while AI can replace the code‑generation part of project scaffolds, scaffolding tools will not disappear; instead they will evolve from quick starters to enforceable, organization‑wide engineering standards that keep teams consistent and maintainable.

AI code generationfrontendproject templates
0 likes · 7 min read
Will Scaffolding Tools Survive the AI Era? How Their Role Is Shifting
DevOps Coach
DevOps Coach
Apr 19, 2026 · Frontend Development

Why Replacing React with HTMX Boosted Our Team’s Productivity

A senior engineer swapped a server‑rendered CRUD module from React to HTMX, measured build times, PR review speed, and bug rates, and found that simplifying UI interactions to HTTP requests dramatically reduced client‑side state complexity, improved predictability, and empowered junior developers.

HTMXProductivityReAct
0 likes · 12 min read
Why Replacing React with HTMX Boosted Our Team’s Productivity
Geek Labs
Geek Labs
Apr 19, 2026 · Frontend Development

Powerful Frontend Tools: AI‑Generated Animations and One‑Click Design Language Extraction

The article introduces two practical frontend utilities—AI_Animation, which offers 300+ AI prompts to instantly create stunning HTML animations, and design‑extract (designlang), an npm package that extracts a website's full design language with a single command, complete with usage steps and output details.

AI animationHTML animationdesign extraction
0 likes · 5 min read
Powerful Frontend Tools: AI‑Generated Animations and One‑Click Design Language Extraction
Geek Labs
Geek Labs
Apr 19, 2026 · Frontend Development

Why Vercel’s wterm Is a Game‑Changing Web Terminal for Embedding in Apps

Vercel Labs’ open‑source wterm provides a tiny (≈12 KB) WebAssembly‑based terminal emulator that renders via the DOM, offering native text selection, clipboard support, CSS styling, and simple React integration, making it ideal for AI assistants, online IDEs, and documentation sites.

ReActVercelWebAssembly
0 likes · 4 min read
Why Vercel’s wterm Is a Game‑Changing Web Terminal for Embedding in Apps
Frontend AI Walk
Frontend AI Walk
Apr 14, 2026 · User Experience Design

How Impeccable Turns AI‑Generated UI from Generic to Professional

This guide explains why AI‑generated interfaces often look generic, introduces the open‑source Impeccable agent skill that supplies design references and anti‑pattern checks, and walks through its core components, slash commands, installation, CLI detection, and real‑world use cases for creating polished, production‑ready UI.

AI designCLIImpeccable
0 likes · 16 min read
How Impeccable Turns AI‑Generated UI from Generic to Professional
James' Growth Diary
James' Growth Diary
Apr 13, 2026 · Frontend Development

Local Inference & Edge AI: Why Front‑End AI Is the Next Battlefield

Edge AI runs AI models directly in browsers or devices, offering zero latency, zero API cost, and full privacy, and the article explains the three technical breakthroughs that make it possible, compares WebLLM, Transformers.js and Ollama, and provides a hybrid architecture with concrete engineering challenges and solutions that can cut total AI costs by 40‑55% for typical front‑end applications.

Local InferenceOllamaTransformers.js
0 likes · 20 min read
Local Inference & Edge AI: Why Front‑End AI Is the Next Battlefield
Machine Learning Algorithms & Natural Language Processing
Machine Learning Algorithms & Natural Language Processing
Apr 12, 2026 · Frontend Development

HTML‑in‑Canvas Lets Browsers Render Games and Doom‑Style Effects

HTML‑in‑Canvas is an experimental Web API that captures HTML elements as images and draws them onto a canvas, giving developers pixel‑level control to create game‑like UI effects, dynamic layouts, and even embed live web content inside classic games like Doom, while the proposal advances through W3C.

AICanvasHTML-in-Canvas
0 likes · 9 min read
HTML‑in‑Canvas Lets Browsers Render Games and Doom‑Style Effects
Design Hub
Design Hub
Apr 12, 2026 · User Experience Design

10 Stunning 3D Interactive Globes That Redefine Data Visualization

The article showcases ten interactive 3D globe visualizations—ranging from a music‑driven world tour to real‑time earthquake maps—detailing their data sources, React‑based tech stacks, and design insights that help designers move beyond flat maps toward immersive, narrative‑driven data storytelling.

Interactive GlobeReActThree.js
0 likes · 8 min read
10 Stunning 3D Interactive Globes That Redefine Data Visualization
Code Mala Tang
Code Mala Tang
Apr 10, 2026 · Frontend Development

Mastering CSS ‘:nth-child of’ Selector for Elegant Date Range Pickers

This guide demonstrates how to use the CSS ‘:nth-child of’ selector syntax together with minimal JavaScript to build a fully functional date‑range picker, covering selector mechanics, HTML structure, CSS grid layout, range‑selection logic, and visual styling of the selected period.

CSSDate PickerJavaScript
0 likes · 8 min read
Mastering CSS ‘:nth-child of’ Selector for Elegant Date Range Pickers
Frontend AI Walk
Frontend AI Walk
Apr 8, 2026 · Frontend Development

Mastering Pretext: A Practical Frontend Guide for Precise Text Measurement

This article explains how the open‑source Pretext library enables fast, accurate multi‑line text measurement and layout in pure JavaScript/TypeScript, outlines the problems it solves, lists ideal front‑end scenarios, provides step‑by‑step API usage, and warns when the library should be avoided.

JavaScriptLayoutPretext
0 likes · 12 min read
Mastering Pretext: A Practical Frontend Guide for Precise Text Measurement
AI Architecture Path
AI Architecture Path
Apr 7, 2026 · Frontend Development

Boost AI‑Generated UI Consistency with the Awesome DESIGN.md Repository

The article introduces the open‑source VoltAgent/awesome-design‑md GitHub repository, explains how its DESIGN.md markdown design system enables AI‑friendly, zero‑cost reuse of major‑brand UI specifications, outlines its nine core modules, categorizes templates for various product types, and provides step‑by‑step guidance for quick integration into frontend projects.

AIGitHubUI components
0 likes · 10 min read
Boost AI‑Generated UI Consistency with the Awesome DESIGN.md Repository
Tech Minimalism
Tech Minimalism
Apr 2, 2026 · Artificial Intelligence

10 Proven AI Agent Skills Every Developer Should Use

This article curates ten validated AI Agent Skills—spanning frontend design, caching, full‑stack scaffolding, code review, testing, PR automation, formatting, documentation updates, and skill discovery—providing repository links and installation commands to help developers automate repetitive tasks and boost productivity across the software development lifecycle.

AI Agent Skillsautomationcode review
0 likes · 11 min read
10 Proven AI Agent Skills Every Developer Should Use
Node.js Tech Stack
Node.js Tech Stack
Apr 1, 2026 · Frontend Development

How a Former React Core Engineer’s Pretext Library Solves a 30‑Year‑Old Browser Text Layout Problem

Front‑end developers struggle to measure text height without rendering, causing performance issues in virtual scrolling, chat bubbles, and masonry layouts, but the TypeScript‑based Pretext library bypasses the DOM, uses Canvas measureText, and delivers order‑of‑magnitude speedups while offering line‑level layout APIs.

JavaScriptPretextTypeScript
0 likes · 10 min read
How a Former React Core Engineer’s Pretext Library Solves a 30‑Year‑Old Browser Text Layout Problem
Code Mala Tang
Code Mala Tang
Mar 30, 2026 · Frontend Development

Mastering New CSS Viewport Units: lv, sv, and dv for Mobile Layouts

This article explains why the traditional 100vh unit fails on mobile browsers, introduces the three new CSS viewport unit families (large, small, and dynamic), and provides practical code examples and guidance for choosing the right unit in responsive web designs.

CSSMobile WebViewport Units
0 likes · 10 min read
Mastering New CSS Viewport Units: lv, sv, and dv for Mobile Layouts
Machine Heart
Machine Heart
Mar 30, 2026 · Frontend Development

How Cheng Lou’s Pretext Library Powers the Viral Bad Apple Text‑Wrap Effect

The article introduces Pretext, a pure JavaScript/TypeScript text‑layout engine that measures and renders text without touching the DOM, claims speed hundreds of times faster than traditional methods, and showcases its use in the viral Bad Apple animation and several interactive demos, while highlighting its AI‑friendly API, tiny footprint, and open‑source impact.

JavaScriptPretextTypeScript
0 likes · 6 min read
How Cheng Lou’s Pretext Library Powers the Viral Bad Apple Text‑Wrap Effect