xxytime Blog

website·Indexed 30 days ago

https://blog.xxytime.top

A technical blog featuring tutorials and insights on frontend development (Vue 3, React, JavaScript, Vite, Tailwind CSS), backend technologies (Node.js, Serverless), Web3 (Solidity), and AI tools. Content includes deep dives into Vue 3.5, Redux internals, webpack implementation, and curated lists of productivity tools for video compression and conversion.

Tokens: 26.8K
Snippets: 117
Records: 180
Agent score: 50%

What's inside xxytime

Overview of Rolldown and Vite 8 Architecture
Vite 8 introduces Rolldown, a Rust-based bundler designed to unify the development and production build pipelines. Previously, Vite used a 'dual-system' approach: esbuild for development and Rollup for production builds. Rolldown replaces both, providing performance comparable to esbuild (10-30x faster than Rollup) while maintaining compatibility with the Rollup plugin ecosystem. It leverages the Oxc compiler for TypeScript, JSX, and syntax downleveling.
https://blog.xxytime.top/fe/%E5%89%8D%E7%AB%AF/%F0%9F%94%A5%20%E9%80%9F%E6%8A%A5%EF%BC%9ARolldown%201.0%20RC%20%E5%8F%91%E5%B8%83%EF%BC%8C%E6%80%A7%E8%83%BD%E7%A2%BE%E5%8E%8B%20Rollup.html
Overview of Vue Native ecosystem options (2026)
As of 2026, Vue developers have two primary paths for native cross-platform development: the original Vue Native (based on React Native) for stability and legacy support, and Vue Lynx (based on the Lynx engine) for high-performance, modern commercial applications. Both differ from WebView-based solutions by compiling to platform-native controls.
https://blog.xxytime.top/fe/%E5%89%8D%E7%AB%AF/Vue%20Native%E5%A4%9A%E5%88%86%E6%94%AF%E8%BF%AD%E4%BB%A3%EF%BC%8CVue%E8%B7%A8%E7%AB%AF%E5%8E%9F%E7%94%9F%E7%94%9F%E6%80%81%E8%BF%8E%E6%9D%A5%E9%9D%A9%E6%96%B0.html
Overview of Deno Deploy edge deployment
Deno Deploy is an official edge deployment platform for JavaScript and TypeScript applications. It allows developers to deploy apps to global edge nodes for low-latency access without relying on Node.js, natively supporting ES modules and URL imports. Key features include zero-config deployment via Deno CLI (especially with the Fresh framework) and native TypeScript support without additional configuration.
https://blog.xxytime.top/fe/%E5%89%8D%E7%AB%AF/Deno%20Deploy%E6%AD%A3%E5%BC%8F%E5%8F%91%E5%B8%83%EF%BC%9A%E8%BE%B9%E7%BC%98%E9%83%A8%E7%BD%B2%E6%96%B0%E6%97%B6%E4%BB%A3%E7%9A%84%E5%88%B0%E6%9D%A5.html
Overview of Vue 3.0 Core Changes
Vue 3.0 introduced significant changes in design philosophy and architecture compared to Vue 2.0. The most critical updates include:
- Diff Algorithm: Optimized DOM rendering for maximum efficiency.
- Static Hoisting: Improved performance by reducing unnecessary DOM rendering of static variables.
- Caching Mechanisms: Optimized listener caching to eliminate redundant data flow operations.
- Composition API: Reduced code coupling.
- Reactivity System: Replaced Object.defineProperty() with Proxy for data binding.
https://blog.xxytime.top/fe/Vue3/vue3.0%E4%B8%AD%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E9%92%A9%E5%AD%90%E6%98%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%9A%84.html
Overview of anime.js
anime.js is a powerful JavaScript animation library that works with CSS3 properties, SVG, DOM elements, and JavaScript objects. It is designed to create high-performance, smooth transition animations for complex UI requirements that go beyond the capabilities of simple CSS animation libraries.
https://blog.xxytime.top/fe/JavaScript/%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%AB%98%E7%BA%A7%E7%9A%84%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C.html
Overview of Tailwind CSS
Tailwind CSS is a highly customizable utility-first CSS framework. Unlike traditional frameworks, it provides low-level building blocks that allow developers to build custom designs directly in their markup without needing to override built-in styles. It is particularly useful for handling responsive layouts, cross-browser compatibility, and rapid UI prototyping.
https://blog.xxytime.top/fe/React/TailWind%20css%20%E4%B8%8E%20React%E6%A1%86%E6%9E%B6%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8.html
Overview of FileCodeBox
FileCodeBox (文件快递柜) is a lightweight tool for sharing text and files via anonymous passwords. It allows users to transfer information across devices without registration or login, avoiding the limitations of traditional cloud drives or messaging apps that may throttle speeds or modify file extensions.
Key features include:
- Tech stack: FastAPI, Sqlite3, Vue2, and ElementUI.
- Upload methods: Copy-paste and drag-and-drop.
- Security: Error count limits to prevent brute-forcing and IP limits to prevent upload abuse.
- Sharing: Random passwords with customizable expiration dates and access counts.
- Management: Admin panel to view and delete files.
- Storage: Supports local file streams and Alibaba Cloud OSS.
https://blog.xxytime.top/source/%E6%96%87%E4%BB%B6%E5%BF%AB%E9%80%92%E6%9F%9C-%E5%85%8D%E8%B4%B9%E5%BC%80%E6%BA%90-FileCodeBox.html
Overview of Vue Bits animation library
Vue Bits is an open-source animation component library specifically designed for Vue 3. It is a port of the React Bits library, offering 60+ (and growing) out-of-the-box animation components. The library is built with Vue 3, TypeScript, and Tailwind CSS, and is released under the MIT license. It supports switching between standard CSS and Tailwind.
https://blog.xxytime.top/fe/Vue3/%E5%A4%AA%E7%82%AB%E4%BA%86%E9%A6%96%E4%B8%AA%E4%B8%93%E5%B1%9E%E4%BA%8EVue3%E7%9A%84%E5%BC%80%E6%BA%90%E5%8A%A8%E6%95%88%E7%A5%9E%E5%99%A8.html
Overview of Vue integration with Lynx.js
Lynx.js is a high-performance, dual-thread native rendering framework developed by ByteDance. A prototype has been developed that connects Vue 3's reactivity system with the Lynx engine, allowing developers to use standard Vue 3 syntax (Composition API, SFCs, ref) to drive native iOS and Android controls instead of relying on WebViews. This approach aims to achieve performance comparable to Flutter by utilizing a UI thread (via PrimJS and Rspack) for millisecond first-frame rendering and a separate background thread for business logic and network requests.
https://blog.xxytime.top/fe/%E5%89%8D%E7%AB%AF/Vue%20%E5%8E%9F%E7%94%9F%E6%B8%B2%E6%9F%93%E7%9C%9F%E8%A6%81%E6%9D%A5%E4%BA%86%EF%BC%9FLynx%E5%BC%95%E6%93%8E%E9%A6%96%E6%AC%A1%E8%B7%91%E9%80%9AVue.html
Overview of Vercel Serverless capabilities
Vercel is a Serverless platform that provides CI/CD deployment by syncing with GitHub or GitLab repositories. It supports:
- Frontend Frameworks: Vue.js, React.js, Svelte.js, Angular, Nuxt.js, and Next.js.
- Backend Runtimes (FaaS): Node.js, Go, Python, and Ruby.
- Web Frameworks: Support for Node.js frameworks like Express, Koa, and Egg.js.
https://blog.xxytime.top/fe/JavaScript/%E5%89%8D%E7%AB%AF%E7%A6%8F%E9%9F%B3-Serverless%E6%97%A0%E6%9C%8D%E5%8A%A1%E5%93%8D%E5%BA%94%EF%BC%8C%E6%97%A0%E8%84%91%E6%90%AD%E5%BB%BA%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E6%9C%8D%E5%8A%A1.html
Overview of skills.sh AI skill ecosystem
skills.sh is a global open-source AI skill ecosystem that provides thousands of high-quality AI skills contributed by developers. These skills cover diverse domains including frontend/backend development, marketing, UI/UX design, and office productivity tools. The platform is open-source, free, and features community-vetted skills ranked by usage data.
https://blog.xxytime.top/ai/%E6%8F%AD%E7%A7%98AI%E6%8A%80%E8%83%BD%E5%AE%9D%E5%BA%93%EF%BC%9Askills.sh%E8%AE%A9%E4%BD%A0%E7%9A%84AI%E8%83%BD%E5%8A%9B%E7%9E%AC%E9%97%B4%E6%8B%89%E6%BB%A1.html
Create a Serverless API Proxy using Vercel Functions
Vercel supports a Serverless (FaaS) architecture where files placed in an api directory are treated as individual functions. You can implement an API proxy by exporting a function that uses http-proxy-middleware to forward requests to a target backend.
```
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (req, res) => {
  let target = ''

  // Define target address if the request starts with /api
  if (req.url.startsWith('/api')) {
    target = 'https://api.music.xxytime.top'
  }

  // Create proxy object and forward the request
  createProxyMiddleware({
    target,
    changeOrigin: true,
    pathRewrite: {
      '^/api/': '/'
    }
  })(req, res)
}
```
https://blog.xxytime.top/fe/JavaScript/%E5%89%8D%E7%AB%AF%E7%A6%8F%E9%9F%B3-Serverless%E6%97%A0%E6%9C%8D%E5%8A%A1%E5%93%8D%E5%BA%94%EF%BC%8C%E6%97%A0%E8%84%91%E6%90%AD%E5%BB%BA%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%89%8D%E5%90%8E%E7%AB%AF%E6%9C%8D%E5%8A%A1.html