Notes on software development and lessons learned.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Connect Telegram to an n8n pipeline to send processed data to a smartphone. Learn about BotFather tokens, webhooks, Markdown templates, and handling rate limits.
Schedule a recurring job with Schedule Trigger, collect data from RSS feeds, and practice scraping sites without feeds using HTTP Request and HTML extraction nodes.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Review Parts 1–14, see how TDD changed the code, and explore where to go next with end-to-end and visual regression testing.
Explore the costs and benefits of introducing TDD to a production project, strategies for adopting it as a team, and how CI/CD makes testing sustainable.
This article has not been translated yet.
This article has not been translated yet.
Recognize hard-to-test components and improve testability through UI/logic separation and provider-aware test setup.
This article has not been translated yet.
Introduce Mock Service Worker to intercept network requests, manage mock responses, and test success and server-error cases without a real server.
This article has not been translated yet.
Extract business logic into a custom hook and test it independently with renderHook and act.
This article has not been translated yet.
This article has not been translated yet.
Implement the minimum component code to turn failing tests green, then use useState to complete its interactive behavior.
This article has not been translated yet.
This article has not been translated yet.
Learn why frontend testing matters, what TDD offers React projects, and which behaviors to cover with tests.
Review the previous 14 installments, see how TDD helps with maintenance, and explore what to learn next. Includes the complete example code repository.
Explore the costs, schedule pressures, and team buy-in involved in adopting TDD at work, and learn how to choose what to test.
This article has not been translated yet.
Learn why Class Data Sharing can trigger a JVM warning during tests and how to suppress it with -Xshare:off.
Learn how to extend an existing project with a new discount policy using TDD while keeping its existing behavior safe.
Learn what makes code difficult to test, including hidden dependencies on time or randomness, and use dependency injection to make it testable.
Explore View Transitions, stronger Server Actions security, useOptimistic, useEffectEvent, and Activity in Next.js 16 and React 19.
A step-by-step guide to upgrading a Next.js 15 project to version 16, covering codemods, asynchronous APIs, image security settings, and other required changes.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Create custom directives such as v-focus for DOM behavior and composables such as useMouse to reuse stateful Vue logic.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Use Axios in Vue to communicate with servers, load data in onMounted, and manage loading and error states.
Install Pinia, define stores with state, getters, and actions, share state between Vue components, and compare React alternatives.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Create a Vue 3 project with Vite and learn the structure of a .vue single-file component.
Install Ubuntu 22.04 LTS with Windows Subsystem for Linux, create a Linux user, verify the installation, and access Windows files from Ubuntu.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Connect Cursor or VS Code to Figma with cursor-talk-to-figma-mcp to automate repetitive design work and move more easily between code and design.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Explore micro frontend architecture, its benefits and costs, and implementation options including single-spa and Webpack Module Federation.
This article has not been translated yet.
This article has not been translated yet.
Learn React Router v6 through the History API, URL matching, nested routes and Outlet, Link, navigation hooks, and code splitting.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Use react-native-qrcode-svg to turn a URL, including a deep link, into a QR code and display it in an Expo app.
Configure deep links in Expo Router, navigate to specific screens, and pass and read data through URL query parameters.
This article has not been translated yet.
Build infinite scrolling with Expo, FlatList, Axios, and JSONPlaceholder while managing pages, loading, and remaining data.
This article has not been translated yet.
Add push notifications to an Expo app step by step, from installing expo-notifications and getting a push token to sending, receiving, and configuring FCM and APNs.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
This article has not been translated yet.
Create API keys and retrieve EOA wallet balances across chains using Etherscan V2, React, and TypeScript.
Request camera, media library, notification, microphone, and location permissions in Expo with TypeScript examples.
Abstract React Query into reusable custom hooks for pages and components, with practical JSONPlaceholder examples.
Learn TanStack Query in React Native (Expo), from installation and focus management to writing queries, with JSONPlaceholder API examples.
Install TanStack Query in React and learn to fetch, cache, and refetch API data, with examples of query keys, Suspense, SSR, and error handling.
This article has not been translated yet.
Integrate Google AdMob rewarded interstitial ads into a Flutter app and manage ad-button state, rewards, and lifecycle events.
Install and configure React Native Picker, then compare it with react-native-element-dropdown for a consistent selection control on iOS and Android.
This article has not been translated yet.
Upgrade Tailwind CSS 3 to 4 and review browser support, the new configuration structure, breaking changes, and before-and-after examples.
This article has not been translated yet.
This article has not been translated yet.
A step-by-step guide to configuring and using Model Context Protocol servers in Visual Studio Code, based on the official documentation.
This article has not been translated yet.
A detailed, step-by-step guide to building an MCP server with the Model Context Protocol TypeScript SDK.
Understand the OpenAI Agents SDK, MCP integration, and example code for building agent-based AI applications.
Learn why context matters to language models, how it relates to MCP, and how an application can organize context for a code review assistant.
Learn how the IndexNow protocol works, verify a key, and notify Naver or Bing when your website's URLs change.
Use expo-image and expo-asset to optimize remote and bundled image loading, handle asset state, and show BlurHash placeholders.
Compare Next.js data-fetching approaches and choose strategies for static content, authenticated dashboards, interactions, and frequently changing data.
Customize fetch headers and cookies, invalidate tagged caches, and build backend communication with Next.js route handlers.
Handle multiple requests with parallel, sequential, and conditional fetch patterns, and fetch data in client components using useEffect and SWR.
Understand fetch caching, no-store, revalidation, ISR, and cache-key generation in Next.js.
Understand data fetching in the Next.js App Router and server-component-centered data flow.
Practical performance improvements in a Next.js blog, including removing duplicate fetches, simplifying Suspense, and formatting dates on the client.
Walk through an upgrade from Next.js 14 to 15, including dependencies, request APIs, codemods, and troubleshooting.
Display static HTML files inside Next.js App Router pages with public assets and iframes.
Open external links inside Expo apps with WebBrowser and understand how it differs from WebView.
Downgrade Xcode from 16.3 to 16.2 to resolve React Native and Expo build errors involving std::char_traits<unsigned char>.
Read the device locale, organize translations into language packs, and remember the user's language choice in an Expo app.
This article has not been translated yet.
Set up @gorhom/bottom-sheet and create a reusable React Native bottom sheet with configurable content, snap points, and a backdrop.
Set up a development build in Expo so you can modify and run native code.
Install and use Expo Vector Icons and configure icon buttons with Icon.Button.
This article has not been translated yet.
This article has not been translated yet.
Learn how to add digital wallet functionality to a React Native (Expo) app using Reown WalletKit.
This article has not been translated yet.
This article has not been translated yet.
Set up Expo SecureStore, store and retrieve encrypted values, and add biometric authentication in a React Native app.
This article has not been translated yet.
How to change a Flutter app's launcher icon and its Android and iOS display names.
Render SVGs in an Expo app, configure react-native-svg-transformer, and pass SVG attributes as React props.
Define Expo pages, shared layouts, route groups, dynamic segments, and platform-specific routing using file-based routes.
Use JSDoc syntax and tags to document functions, improve IDE assistance, and make JavaScript and TypeScript code easier to share and maintain.
This article has not been translated yet.
Set up Expo on macOS, create and link a project, and run the app in an emulator, a simulator, or Expo Go.
Show loading feedback in React Native with ActivityIndicator and react-native-skeleton-placeholder.
Use React keys to refresh selected child components or an entire component subtree in React Native.
Implement pull-to-refresh with React Native RefreshControl and customize platform-specific indicator properties.
Configure Firebase Cloud Messaging for iOS and Android, retrieve an FCM token in Flutter, and send a test push notification.
Customize native splash screens in Flutter with flutter_native_splash, including Android 12 configuration.
Install, configure, display, and customize toast notifications in Expo and React Native CLI projects.
Configure Firebase phone authentication for a Flutter app, handle verification callbacks, and troubleshoot Android and iOS setup.
Create a Firebase project and manually register the Android and iOS versions of your Flutter app.
Register a Flutter project with Firebase using FlutterFire CLI and initialize Firebase in the app.
Set up a typed Axios client with interceptors and shared request and response types in Next.js, with patterns you can adapt to React, React Native, or Node.js.
This article has not been translated yet.
Create and configure language packs in Flutter, use translated strings and plurals, and let users switch languages in the app.
How to connect and manage multiple Git remotes from a single project directory.
This article has not been translated yet.
Configure Flutter widgets to switch bottom-navigation tabs, including moving from the notification screen to the search screen.
Keep Flutter's bottom navigation bar visible on nested pages and return to a tab's root when it is selected again.
Configure a four-tab bottom navigation bar in Flutter, shown on every page after login.
Store Flutter login state with FlutterSecureStorage and navigate between login and main pages with GetX.
Set navigation requirements for login, bottom tabs, nested stacks, and cross-tab navigation, then configure FlutterSecureStorage and Get.
Call APIs in Flutter with Dio and Retrofit, define response models, generate code, and configure request parameters, headers, and bodies.
Image placeholder APIs for random photos, dogs, avatars, and other frontend development needs.
Customize Tailwind themes, reusable CSS sets, global styles, and fonts with configuration files and plugins.
Configure formatting, linting, CSS-in-JS styling, and global state in an Expo project.
Set up an Expo project on Windows, run it in an Android emulator or Expo Go, and troubleshoot PowerShell execution policy errors.
Set up React Native on Windows and run the project in the Android Studio emulator.
Learn basic file-system routing, dynamic routes, and API route handlers with Next.js App Router.
Set up a Next.js project and configure Tailwind CSS, Shadcn/ui, and the typography plugin.
The technology stack and libraries used to build this blog, their roles, and why I chose them.
Goals for the blog as a publishing platform and as a software project.
Why I decided to build and run my own blog.
Automatically deploy static files from a GitHub repository to an S3 bucket using GitHub Actions.
Serve blog images through Amazon S3 and CloudFront, test the distribution, and connect an optional custom domain.
This article has not been translated yet.
How to use the mirror option to copy a repository in full.