Skip to Content
Cover Lisa Park

Lisa Park

California, USA ๐Ÿ‡บ๐Ÿ‡ธ

LA-based audio expert and tech reviewer. 6+ years testing headphones & speakers. Former sound engineer for films. Audiophile helping you find perfect sound.

12 posts

Posts by Lisa Park

React 19 Performance Optimizations You Need to Know Video Post

Comprehensive guide to React 19's new performance features including automatic batching improvements, concurrent rendering enhancements, and the new use() hook for better data fetching

React 19 Performance Optimizations You Need to Know
0:00
/0:16

Video by Pachon in Motion / Pexels

React 19 introduces significant performance improvements that can make your applications faster without changing a single line of code. However, understanding these optimizations helps you write better React applications and leverage the new features effectively.

Automatic Batching Everywhere

React 19 extends automatic batching to all scenarios, not just event handlers:

React 18 Behavior

// Only batched in event handlers
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // โœ… Batched - single re-render
}

// Not batched in promises/timeouts
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f)
React 19 Performance Optimizations You Need to Know Read more

Creating Interactive Prototypes in Figma with Smart Animate Video Post

Step-by-step guide to building smooth, realistic prototypes using Figma's Smart Animate feature for micro-interactions and component state changes

Creating Interactive Prototypes in Figma with Smart Animate
Video by Google DeepMind / Pexels
0:00
/0:14

Video by Google DeepMind / Pexels

Smart Animate in Figma transforms static designs into polished, interactive prototypes that feel like real applications. Here's how to create compelling animations that showcase your design vision.

Setting Up Smart Animate

Basic Requirements

  • Matching layer names across frames
  • Similar layer structure and hierarchy
  • Connected prototype flows between frames

Creating Your First Animation

  1. Duplicate your frame (Cmd/Ctrl + D)
  2. Modify the duplicate - change positions, sizes, or properties
  3. Connect frames with prototype arrows
  4. Set interaction to "Smart Animate"
  5. Choose easing and duration

Common Animation Patterns

Button Hover States

Frame 1:
Creating Interactive Prototypes in Figma with Smart Animate Read more

Building AI-Powered React Components with Vercel AI SDK Featured Post Video Post

Complete guide to integrating AI capabilities into React applications using Vercel's AI SDK. Build chatbots, content generators, and smart UI components with streaming responses

Building AI-Powered React Components with Vercel AI SDK
0:00
/0:08

Video by Distill / Pexels

The Vercel AI SDK makes it incredibly easy to add AI capabilities to React applications. In this tutorial, we'll build several AI-powered components from scratch, including a streaming chatbot and intelligent content generator.

Getting Started

First, install the necessary packages:

npm install ai @ai-sdk/openai @ai-sdk/anthropic
npm install @types/react @types/node # if using TypeScript

Set up your environment variables:

# .env.local
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key

Basic Chat Component

Let's start with a simple chat interface that streams responses:

// components/ChatBot.jsx
Building AI-Powered React Components with Vercel AI SDK Read more

Figma Introduces AI-Powered Design System Generator

Figma's new AI feature can automatically generate comprehensive design systems from existing designs, including components, tokens, and documentation in minutes instead of weeks.

Figma Introduces AI-Powered Design System Generator

Figma has launched Design System AI, a revolutionary feature that analyzes existing designs and automatically generates comprehensive design systems complete with components, design tokens, and documentation.

How It Works

The AI analyzes your design files and identifies patterns across:

Visual Elements

  • Color palettes and semantic usage
  • Typography scales and hierarchies
  • Spacing and layout patterns
  • Border radius and shadow styles

Component Patterns

  • Button variations and states
  • Form input types and styles
  • Card layouts and content structures
  • Navigation and menu patterns

The Generation Process

Step 1: Analysis

Upload your design files or select existing Figma projects. The AI scans for:

Analyzing 47
Figma Introduces AI-Powered Design System Generator Read more

The Rise of Local-First Software Development Pro Developer and Tech Insider tiers

Why developers are moving away from cloud-dependent applications toward local-first architectures that work offline and sync when connected

The Rise of Local-First Software Development
The Rise of Local-First Software Development Read more

Building Responsive Layouts with CSS Container Queries Featured Post Paid Post

Learn how to create truly responsive components using CSS Container Queries, the modern alternative to media queries for component-based design systems

Building Responsive Layouts with CSS Container Queries
Building Responsive Layouts with CSS Container Queries Read more