Jennifer Fu’s Web Development Publications
Development series for React, JavaScript, TypeScript, CSS, node/npm, web frameworks, micro frontends, artificial intelligence, machine learning, and interview guides.
7 min readJan 3, 2020
Frontend Architect
NodeJS / NPM
- An In-Depth Explanation of package.json’s Dependencies
- How to Upgrade Dependencies in package.json
- Write and Debug JavaScript With NodeJS
- How To Use NVM To Manage Node.js 22 and NPM 10
- 5 Major Features of Node.js 22
- 7 Major Features of Node.js 21
- 5 Features in npm 10
- Exploring New Features in npm 9
Node Alternatives
- 3 Ways To Use Bun With Create React App
- The Comprehensive Guide to Deno — An Alternative to Node
- Is Deno Ready for Primetime ? — Evaluation of Deno modules
- How To Use SQLite in Bun, Deno, and Node
Micro Frontends
- 5 Steps to Turn a Random React Application Into a Micro Front-End
- 3 Steps to Turn a Random React Application Into a Micro-Frontend Container
- Build Your Own Micro-Frontend Ecosystem
- You Don’t Have to Lose Optimization for Micro-Frontends
- 10 Decision Points for a Micro-Frontend Approach
- 6 Steps to Create a Multi-Version React Application
- Micro Frontends Using Webpack 5 Module Federation
React Tips
- React Best Practices 2022
- Experts Share The Most Common Mistakes That Developers Make and How to Avoid Them
- Preventing Race Conditions With React’s useEffect Hook
React Core
- 3.5 New Hooks and the ‘use’ API in React 19
- The Complete Guide to React 18
- 5 New Hooks in React 18
- Exploring React Frameworks in the Post-Create React App Era
- 10 Fun Facts about Create React App
- An In-Depth Guide for Create React App 5 (CRA 5)
- To Be or Not to Be — Choosing between controlled and uncontrolled components in React
- What’s the Difference Between Synthetic React Events and JavaScript Events?
- Dynamic Import, Code Splitting, Lazy Loading, and Error Boundaries
- Complete Guide on React Error Boundary
- Everything You Want to Know About React Refs
- Everyone Can Build a Custom Hook
- How to Convert JavaScript Classes to React’s useReducer Hook
- Lodash: Create React App’s Built-in Library for Debounce and Throttle With Hooks
- Headless UI Components: A Journey With High Order Components, Render Props, and Custom Hooks
React Libraries
- Building an Interactive Commenting System with React Mentions
- Mastering React Markdown: An In-Depth Guide With Practical Examples
- Mastering React Idle Timer: A Comprehensive Guide
- A Step-by-Step Guide on React Router 6
- Speeding Up React App Development with Chakra UI
- React Flow Builds Interactive Node-Based Graphs
- Recoil: A New State Management Library Moving Beyond Redux and the Context API
- Understanding the Ant Design System — a UI Design for Enterprises
- How To Use Ant Forms in Your Web App
- An Introduction to Ant Tables for JavaScript Developers
- Building a TreeTable Using Ant Design System
- Customizing DatePicker To Display Dates, Time, and Text in Locale-Specific Formats
- An Introduction to React-Table
- Performance Recipes: React-Window, React-Virtualized, and React-Virtuoso
- 5 Ways To Improve Table Performance
- React-Select Makes Creating Selectable Menus Easy
- The Power and Convenience of useAsync
- Exploring React-Colorful: The Most Popular React Color Picker
- A First Look at React-Color: The Most Complete React Color Pickers
Web Frameworks
- 4 Major Features in Next.js 14
- Introducing Vite — Next Generation Frontend Tooling With Speed and Simplicity
- A Complete Guide To Gatsby + React
- A Look at Remix React Framework: The Full Stack Developer’s Guide
- The Comprehensive Guide on Fresh — A New Web Framework by Deno
- Introducing Qwik — The JavaScript Framework With O(1) Load Time
- Working With Astro — The Super Fast Web Framework
- Exploring the Play Web Framework With Twirl Templates
Web Technologies
- A Complete Guide for Utilizing Font Awesome in React
- 10 Email Protocols You Should Know
- What’s New in HTTP/3?
- 6 Autofill Features for Web Developers
- 10 Steps to Building Web Applications With Accessibility (a11y)
- How To Fill In Voluntary Product Accessibility Template (VPAT®)
- What’s New in WCAG 2.1 & WCAG 2.2
- Exploring Socket.IO in a React Working Environment
- Managing and Analyzing WebSockets
- Embedding Google Forms in React Apps
- Migrating From Moment.js to Day.js in Vite Applications
- Mastering Day.js: The Ultimate Cheat Sheet
- Mixpanel — An Effective Product Analytics Tool
- How To Display, Download, and Create PDF Files in React
- Exploring Leaflet for Interactive Map in React Apps
- Exploring React Leaflet for Interactive Map
- Embedding a Monaco Editor Inside React App
- How To Embed a Prism Syntax Highlighter in React Apps
- Evaluating Guess.js in Angular Applications
Storybook / Chromatic
- Problems and Solutions Upgrading to Storybook 7
- When Storybook Meets Fetch Mock
- 6 Ways To Configure Global Styles for Storybook
- An In-Depth Look at Storybook 6
- Meet Chromatic — A Cloud-Based Toolchain for Storybook
- Build React Tabs Using Recoil, Styled Components, and Storybook.js
- Build Advanced React Input Fields Using Styled Components and Storybook.js
Data Visualization
- Create React App and SVGs
- 7 Examples To Master Highcharts in React
- More Highcharts Examples in React: Bubble, Packed Bubble, Stream Graph, and Cylinder
- More Highcharts Examples in React: Sankey Diagram, Arc Diagram, Dependency Wheel, and Network Graph
- Exploring Parallel Coordinates Highcharts in React
- Exploring Highcharts Drawing Capabilities
- Easier D3.js — Render C3 Charts With React Functional Components
- 5 Steps To Render D3.js With React Functional Components
- Constructing D3 Charts in React
- How to Use the Plotly Charting Library in React App
JavaScript
- Shallow Cloning, Deep Cloning, and the Builtin structuredClone Function
- The Complete Guide to Mastering File Uploads
- 7 New JavaScript Features in ES2024
- Everything About JavaScript Promise
- A Handy Guide to Export and Import Modules for JavaScript and TypeScript
- Understand and Configure Absolute Import Paths in JavaScript
- ES2022: A Complete Guide on Private Class Fields, Methods, and Static Initialization Blocks
- The 4 Newest JavaScript Operations: An Introduction
- Manipulating JavaScript Strings Using Template Literals
- An Introduction to JavaScript Compile-Time Processing
- Is Virtual DOM Derived From Document Fragments?
- What Are CJS, AMD, UMD, ESM, System, and IIFE?
- Bundle Up a JavaScript Project Using Rollup
- Bundle Up a JavaScript Project Using Esbuild
- Setting Up Mocks for React Development, Storybook, and Testing
TypeScript
- The Rise, the Fall, and the Future of TypeScript
- A Complete Guide to Enums in TypeScript
- Introduction to Client Side and Server Side Pagination in TypeScript
- TypeScript: Anonymous Types, Type Aliases, and Interface Declarations
- How To Use Lowercase Types for Primitives and Objects in TypeScript
- Detect, Prevent, and Fix: Circular Dependencies In JavaScript and TypeScript
Testing
- 6 Ways to Run Jest Test Cases Silently
- Test and Mock Asynchronous Calls With the Jest Testing Framework
- Testing Your Components in React
- Test Cases and Test Coverage for High Order Components
- Test Custom Hooks Using React Hooks Testing Library
- How To Achieve 100% Test Coverage for React Functional Components
- Exploring SonarQube With Create React App
- Unveiling the Secrets of Mocking Day.js
- Setting Up Jest for a TypeScript Vite Application
CSS / Theme
- Styled Components: A CSS-in-JS Approach
- 7 Ways to Inherit Styles Using Styled Components
- 12 Coding Examples of Ampersand Usages in Styled Components
- How to Control Class Names in Styled Components
- Implement Dark Mode Using JavaScript, CSS, and Third-Party Libraries
- Building Dark Mode for Storybook and Web Applications
- Ant Design System Dark Mode and Other Theme Customization
- Typography: Font Styling, System Fonts, and Web Fonts
Production / Server
- A hands-on guide for creating a production-ready React app
- A Hands-on Guide for a Server-Side Rendering React 18 App
- Set Up and Use MySQL in Create React App Environment
Coding Interviews
- How To Excel at Coding Interviews in 2021
- The Technical Interview Guide to String Manipulation
- The Technical Interview Guide to Dynamic Programming
- JavaScript Interview Question: Convert Roman Numerals To Numbers
- The Technical Interview Guide to Backtracking
- The Technical Interview Guide to Array Transformations
- Interview Prep: Build Web Application Using HTML, CSS, and JavaScript
JSON / YAML / Swagger
- Exploring JSON, JSON5, and Circular References
- Is YAML Ready For JavaScript?
- How To Get Started With Swagger as a UI Developer
- Exploring Swagger Codegen and Swagger Plugins
- Swagger Codegen: From Server to Client
Visual Studio Code
Chrome DevTools
- Use Chrome Extension To Develop Frontend Applications — Vite App and Create React App
- Analyzing JavaScript UI Performance Using Network Panel and HAR Files
- Lighthouse: A Performance and Optimization Tool for Webpages
- Scanning Multiple Pages of a Private Website with Authentication, Crawling, and Lighthouse Execution
- How to Use Chrome DevTools to Debug Unit Test Cases
Git Version Control System / Monorepo
- How to Recover From a Git Merge Mess
- Git Merge, Squash, Rebase, or Pull — What To Choose?
- GitHub’s Magic Tools — GitHub CLI, API, and JavaScript
- Nx — The Most Popular Monorepo Tooling With Caching and Dependency Management
Three.js
- React Round Up Podcast: 3D Modeling in React with Jennifer Fu — RRU 186
- Working With Three.js: The Popular 3D JavaScript Library
- Working With 3D Models in Three.js
- Working With Texture In Three.js
- 10 JavaScript Code Techniques To Manipulate Textures In Three.js
- Travel in and Out of 3D Objects Using React-Three-Fiber
Metaverse / BlockChain
- Understanding Metaverse From a Developer’s Perspective
- How to Use Web3.js to Interact With the Ethereum Virtual Machine in Remix
- Use Ethers.js to Interact With the Ethereum Virtual Machine in Remix
Cloud
Artificial Intelligence / Machine Learning
- Building a React Application with GitHub Copilot
- Podcast: Humans of AI with Jennifer Fu (Domino Data Lab)
- Pika Art: Advancement in AI-Driven Text-to-Video Generation
- MLflow Empowering AI Training
- Build an AI Chatbot Using LangChain🦜🔗
- 🦜🔗 LangSmith Is for Production- Grade AI Applications
- 7 Thoughts on How AI Would Impact the Art World and Our Daily Life
- Exploring OpenAI GPT-3 With Next.js
- JavaScript Overview — An Interview With ChatGPT
- Exploring OpenAI DALL·E APIs With Next.js
- Exploring OpenAI Point·E With Jupyter Notebook, VSCode, and Colab
- Exploring OpenAI Whisper on Hugging Face
- Learning Stable Diffusion With Hugging Face in 5 Minutes
- How AI Is Fueling NVIDIA GTC
- AI Landscape in 2023
- AI Landscape in 2024
- Reading the Tea Leaf From the First Ever MLOps Conference
- Natural Language Processing With Node.js
- Perform Speech Recognition in Your Javascript Applications
- Perform Speech Synthesis in Your JavaScript Applications
- Exploring the AI Programming Language: R
- Supervised Learning: Regression Analysis
- Logistic Regression in Machine Learning
- Supervised Learning: Neural Networks
- Supervised Learning: Support Vector Machine
- Supervised Learning for Multiclass Classification
- Unsupervised Learning: K-Means Clustering
