/en/archive/
Archive
Recent technical essays, project notes, and learning maps.
2026
3 posts2026 Half-Year Review2026 Half Year Review Introduction Half of 2026 is already behind us. This is a short record of what changed...Notes on the Blog RedesignNotes on the Blog Redesign Introduction I suddenly felt like changing the style of this blog, so I went ahea...My 2025 Year-End ReviewMy 2025 Year End Review Introduction Before I knew it, it was already 2026. I still wanted to write a year e...
2025
2 posts2024
40 postsMy 2024 Year-End ReviewMy 2024 Year End Review Hi, I am Terence (Xu Xu). Here is a look back at 2024. Introduction Ten days left un...Turning 30: Six Years as a Frontend EngineerTurning 30: Six Years as a Frontend Engineer Hi, I am Terence (Xu Xu)—a frontend engineer who also loves pho...Code Standards in the Frontend Engineering WorkflowCode Standards in the Frontend Engineering Workflow Hi, I'm Terence. Today let's talk about code standards i...Development in the Frontend Engineering WorkflowDevelopment in the Frontend Engineering Workflow Hi, I'm Terence. Today let's look at one of the most import...From Architecture to APIs, Do You Really Understand Electron?From Architecture to APIs, Do You Really Understand Electron? Hi, I'm Terence. This article is a broader tec...After Ten Years of Cross-Platform Development, Why Does Electron Still Matter?After Ten Years of Cross Platform Development, Why Does Electron Still Matter? Hi, I'm Terence. This article...The Rendering Foundation: DOM Tree and CSSOMThe Rendering Foundation: DOM Tree and CSSOM Hi, I'm Terence. Today let's look at one of the foundations of...Scaffolding in the Frontend Engineering WorkflowScaffolding in the Frontend Engineering Workflow Hi, I'm Terence. Today let's talk about scaffolding in fron...Package Managers in the Frontend Engineering WorkflowPackage Managers in the Frontend Engineering Workflow Hi, I'm Terence. Today let's talk about package manage...AI Magic in Chrome — `window.ai` for Local On-Device AIAI Magic in Chrome — window.ai for Local On Device AI Introduction On device AI in the browser is already ar...Build an AI App Step by Step with Julep and ChatUIBuild an AI App Step by Step with Julep and ChatUI Introduction Building an AI application from scratch can...Building a Black Myth: Wukong Wallpaper App with TauriBuilding a Black Myth: Wukong Wallpaper App with Tauri Hi, I'm Terence. This article shares how I built a de...Building Logging in a Tauri AppBuilding Logging in a Tauri App Introduction Logging is a critical part of any application. It helps with de...CI/CD for Building and Releasing Tauri Desktop AppsCI/CD for Building and Releasing Tauri Desktop Apps Hi, I'm Terence. This article looks at how to use CI/CD...Custom Multilingual Menus in TauriCustom Multilingual Menus in Tauri Introduction In desktop application development, custom menus are an impo...HTTP Requests in TauriHTTP Requests in Tauri Hi, I'm Terence. This article looks at how to make HTTP requests in a Tauri applicati...Theme and Language Settings in TauriTheme and Language Settings in Tauri Introduction Theme support and multilingual support are both important...Thoughts After One or Two Years of Building Electron Desktop AppsThoughts After One or Two Years of Building Electron Desktop Apps Hi, I'm Terence. In this article, I want t...Integrating a Local Database in TauriIntegrating a Local Database in Tauri Introduction Tauri is a cross platform desktop framework that uses web...Native Capabilities in TauriNative Capabilities in Tauri Introduction to native capabilities Tauri is a framework for building secure, s...Setting Up a Tauri ProjectSetting Up a Tauri Project Note: the example environment used in this article is macOS. Terminal prerequisit...Understanding Tauri ConfigurationUnderstanding Tauri Configuration This article focuses on the three main configuration files in a Tauri proj...What Is Tauri Like?What Is Tauri Like? What Tauri is Tauri is a framework for building small, fast binaries for all major deskt...React Component Communication PatternsReact Component Communication Patterns Props Props are the most direct mechanism for passing data from a par...A Brief Analysis of JSBridgeA Brief Analysis of JSBridge Why JSBridge exists On mobile devices, native apps and web apps each have stron...Frontend-Only Image Slicing with One-Click ExportFrontend Only Image Slicing with One Click Export Introduction In web development, we often run into scenari...Get the Current Wi-Fi Interface NameGet the Current Wi Fi Interface Name Enter root modeList the Currently Available Wireless Network Interfaces on WindowsList the Currently Available Wireless Network Interfaces on WindowsBuild a Floating Desktop Window in ElectronBuild a Floating Desktop Window in Electron Feature description After the desktop application launches, a fl...Using SQLite in ElectronUsing SQLite in Electron Preparation 1. Install SQLiteStudio: 2. Install sqlite3: Encapsulate database metho...Building Image Sharing with Canvas and TaroBuilding Image Sharing with Canvas and Taro This note records a simple idea: using Canvas together with Taro...Implementing a Simple Task Queue in JavaScriptImplementing a Simple Task Queue in JavaScript Functional requirements register tasks execute tasks check wh...Installing Mac and Windows Applications with Node.jsInstalling Mac and Windows Applications with Node.js This article introduces how to use Node.js to install a...Internationalization with react-i18nextInternationalization with react i18next Documentation https://react.i18next.com/ Implementation Install depe...Running a WebView Under macOS Root Mode with Tauri and ElectronRunning a WebView Under macOS Root Mode with Tauri and Electron Background On macOS, if an application runs...AboutCurated notes from real Markdown documents.ArchiveCurated notes from real Markdown documents.CategoriesCurated notes from real Markdown documents.TagsCurated notes from real Markdown documents.Terence XuCurated notes from real Markdown documents.
2023
24 postsA Detailed Guide to Vue keep-alive and Its Caching MechanismA Detailed Guide to Vue keep alive and Its Caching Mechanism Introduction In Vue projects, some components o...Application PackagingApplication Packaging Introduction In Electron development, packaging and delivery are a major part of the w...Application UpdatesApplication Updates Introduction The update flow is another important part of Electron application developme...Calling and Building Native ModulesCalling and Building Native Modules Introduction In real world Electron development, there are always capabi...Cross-Process Communication in ElectronCross Process Communication in Electron Introduction Inter process communication, or IPC, is one of the most...Encapsulating Network RequestsEncapsulating Network Requests Introduction By the time the earlier setup work is finished, you usually alre...Environment Setup and Project ScaffoldingEnvironment Setup and Project Scaffolding Why Vite The official explanation is already very clear: So I will...Technology Choices in the Electron EcosystemTechnology Choices in the Electron Ecosystem Scaffold selection There are quite a few scaffold choices for E...Asynchronous Programming Patterns in Frontend DevelopmentAsynchronous Programming Patterns in Frontend Development Why asynchronous programming exists JavaScript is...Comparing `apply`, `call`, and `bind`Comparing apply, call, and bind apply Concept The apply() method calls a function with a given this value an...Cross-Origin SolutionsCross Origin Solutions What cross origin means Cross origin access refers to a situation where JavaScript ru...HTTP vs HTTPSHTTP vs HTTPS Concepts HTTP (HyperText Transfer Protocol) is the foundational application layer protocol use...JavaScript Garbage CollectionJavaScript Garbage Collection Concept GC In JavaScript, GC stands for Garbage Collection. It is an automatic...JavaScript Module SystemsJavaScript Module Systems Evolution of JavaScript modules No module system CommonJS AMD CMD ES6 Modules Comm...Real DOM and Virtual DOMReal DOM and Virtual DOM Concepts Real DOM The Document Object Model (DOM) is a programming interface for re...Shallow Copy and Deep CopyShallow Copy and Deep Copy To explain shallow copy and deep copy clearly, it helps to first understand JavaS...Storage Options in Web ApplicationsStorage Options in Web Applications Cookie Cookies are small text files stored in the browser. They are used...Vue 2 vs Vue 3Vue 2 vs Vue 3 Reactivity internals The biggest difference between Vue 2 and Vue 3 is in the reactivity syst...Vue and ReactVue and React Origins The origin of Vue Vue.js was created by Evan You. While working at Google, he was expo...Styling Solutions in ReactStyling Solutions in React Inline styles React supports inline styles by passing a style object directly to...TCP vs UDPTCP vs UDP Core concepts TCP TCP, or Transmission Control Protocol, is a connection oriented and reliable tr...What Happens After You Press Enter on a URLWhat Happens After You Press Enter on a URL 1. Check the cache When you enter a URL, the browser first check...Vue Component Communication PatternsVue Component Communication Patterns props / $emit props are used for parent to child communication. $emit i...Why Choose ElectronWhy Choose Electron The birth of Electron Electron, originally called Atom Shell, is an open source framewor...