Nexmoe

Why I Built VidBee, an Open-Source Video Downloader

Wed, 25 Feb 2026 00:00:00 GMT

How this started

I started VidBee for a very simple reason. My girlfriend had just begun creating content, and she needed to download source clips every day. yt-dlp is insanely powerful, but she is not technical. Installing software already needed my help, and the command line was out of the question.

We also tried existing tools like ytDownloader and YoutubeDownloader. They looked beginner-friendly at first glance, but in real use they were still confusing. Error messages were vague, and the workflow was not much faster than using a CLI.

Quick start

If you want to try it first, setup takes three steps. Go to https://vidbee.org/download, install the version for your OS, paste a video link, and click download.

If VidBee saves you time, please star the project at https://github.com/nexmoe/VidBee.

What I actually wanted to solve

After that, I wrote down the problems she kept running into. It came down to three things.

Common platforms should work directly, without jumping between different tools.
The creators she follows post repeatedly, and manual downloading means checking links every day.
Downloaded assets should be organized by creator and content type, so editing later does not start with folder chaos.

How VidBee handles this now

The current design of VidBee revolves around those three points. First, make the whole flow work end to end. Then keep adding capabilities.

The first piece is the download flow. You paste a link and VidBee parses it directly, no parameters to memorize. Common formats and resolutions appear first. If something fails, VidBee explains why, so you know what to do next.

The second piece is RSS auto-download. You can subscribe to channels, playlists, or feed sources you follow often. VidBee checks for updates in the background and queues new content automatically. You no longer need to refresh links all day, and you are less likely to miss fresh uploads. For people publishing frequently, this saves real time.

The third piece is file management. VidBee can sort downloads into folders by channel, creator, or task rules. Once downloads finish, the file structure is cleaner, so revisiting history, reorganizing assets, or filling missing clips is much faster. Combined with RSS auto-download, this feels like a continuous backup pipeline. When a channel updates, local archives update too. We will keep improving this part and make organization, search, and batch operations smoother.

I do not want to build a downloader that looks feature-rich but feels heavy to use. What I care about is that beginners can use it on first launch, and power users keep saving time as usage grows.

People who create content know this feeling. The problem is often not a lack of ideas, but workflow friction. For me, VidBee is about removing as much friction as possible and giving that time back to creation.

Emergeia

Wed, 04 Feb 2026 00:00:00 GMT

An agent-first social network where humans mostly observe while AI agents build collections, rate items, and surface top agents through shared lists.

https://emergeia.com

View product details

Visit Emergeia

I Open-Sourced Eve, a 24-Hour Recording and Real-Time Transcription Tool

Sun, 01 Feb 2026 00:00:00 GMT

I kept looking for a recorder that could run continuously for meetings, quick discussions, and random ideas. After trying many tools, I found plenty of short-session recorders, but long continuous recording was either unstable or painful to organize later.

So I built my own tool, Eve (eavesdropper). It is a long-session recorder that runs on macOS, Windows, and Linux. Eve uses your computer microphone for 24-hour nonstop recording, then converts speech to text with local compute. By default it uses Qwen3-ASR for real-time recognition and VAD to filter silent parts. The goal is simple: keep recording stable and make content searchable.

Daily report generation example:

If you want to try it first, go to GitHub and follow the README:

👉 https://github.com/nexmoe/eve

uv sync + uv run eve will start it. The repository includes full parameters and usage details.

If this tool helps you, please give it a star.

Key Features

Runs on macOS, Windows, and Linux
Uses your computer microphone for 24-hour nonstop recording
Splits recording into WAV segments automatically for easier playback and management
Uses local compute for speech-to-text and writes matching JSON transcripts during recording
Filters silent parts with VAD and processes only speech
Can auto-switch to the currently active microphone
You can disable ASR, record first, and transcribe in batch later
Output text can be sent directly to LLMs for summaries, Q and A, and task extraction

Demo

The core of the OneDrive workflow is placing the Eve output directory inside your local OneDrive sync folder.
Recorded audio files and transcript files are written locally first, then OneDrive automatically syncs them to the cloud for persistent storage.
This helps you recover historical recordings and transcripts even after accidental local deletion, disk failure, system reinstall, or device replacement.

Example of audio and transcript files inside OneDrive:

Why I built this

I want to preserve original voice data first, not only final summaries.

Models keep improving. Audio that transcribes poorly today can often be processed better later.

So Eve was never about pretty summaries first. It is about stable recording first.

I plan to add more features over time, for example:

Better keyword search and timeline navigation
Automated daily report and meeting note workflows
More robust device switching strategy and error recovery
Better cloud archive and sync experience

The project is already open-sourced on GitHub.
If you are interested in this direction, feel free to open issues or pull requests and improve it together.

👉 https://github.com/nexmoe/eve

Eve

Sun, 01 Feb 2026 00:00:00 GMT

Open-source 24-hour recording and real-time transcription tool that continuously captures audio from your computer microphone, converts speech to text with local compute, and focuses on reliable capture with local storage.

https://github.com/nexmoe/eve

View product details

View on GitHub

import FeatureSection from '@/components/products/FeatureSection.astro'

</div>

Viora

Sat, 20 Dec 2025 00:00:00 GMT

Voice dictation that disappears into your flow. Automatically trims filler words, understands corrections, supports 60+ apps with auto-formatting, and includes AI voice agent and meeting transcription features.

https://test.viora.io

View product details

Download Viora

I Open-Sourced VidBee, a Video Downloader for Thousands of Sites

Sun, 02 Nov 2025 00:00:00 GMT

Recently I got the urge to find a desktop tool for downloading videos. After trying a bunch of options, the UI was either painfully outdated or the features were a mess—and the pure CLI tools were just too uncomfortable to use.

So I built my own. The project is called: VidBee.

Project home:

👉 https://vidbee.org

If this tool helps you, please give it a star 👉 https://github.com/nexmoe/VidBee

VidBee is an open-source video downloader built with Electron + React + TypeScript. It uses yt-dlp under the hood (you know the legendary one), so it can download videos from 1000+ sites. The key point though—finally, a clean UI that’s easy on the eyes and satisfying to click.

Key Features

Desktop app for Windows / macOS / Linux
Paste a link and download; supports multi-task queue, pause, and retry
Choose format and quality, or download audio only
Follows system theme, with both light / dark modes
Runs fully locally: no uploads, no cloud

Download & Install

1. Get the latest version

Visit https://vidbee.org/download/ to download the latest version:

Windows: vidbee-x.x.x-setup.exe
macOS: vidbee-x.x.x.dmg
Linux: vidbee-x.x.x.AppImage

2. Install and run

After downloading, just install it. Windows and Linux users can double-click the installer. macOS users drag it into the Applications folder.

3. Note for macOS users

If you see “App is damaged” on macOS, run this in Terminal:

xattr -rd com.apple.quarantine /Applications/VidBee.app/

This is macOS security behavior—third-party apps you download need to be manually unquarantined.

Why I made this

I simply wanted a clean, local video downloader—no command line, no ads. And Electron performance isn’t as bad as people think; with Vite builds, it starts pretty fast.

I put a lot of effort into UX and studied many commercial products. The goal was a tool that’s fully capable but also intuitive and genuinely pleasant to use.

I’ll gradually add more features, such as:

Download subtitles / danmaku
Batch downloads for playlists
Download history / task records
Custom themes

The project is MIT-licensed and fully open source. If you’re interested in contributing code or UI design, you’re welcome to jump in. It gets a little lonely building alone 😂

👉 https://github.com/nexmoe/VidBee

VidBee

Wed, 22 Oct 2025 00:00:00 GMT

Free and open-source video downloader supporting 1000+ platforms including YouTube, TikTok, and Bilibili, featuring an elegant interface, batch downloads, and RSS auto-download.

https://vidbee.org

View product details

Big News, 即将离开共绩科技

Wed, 24 Sep 2025 00:00:00 GMT

一个重要的决定

在过去一年多的时间里，我花了很多时间反思自己。现在我有了一些阶段性的结论：人生上所有的选择都要遵循自己的兴趣。

在共绩科技的这段时间里，我学到了很多。从技术到管理，从产品到市场，每一个环节都让我成长。但人生总是需要新的挑战，新的方向。

感谢共绩科技给了我这样一个平台。在这里，我见证了公司从几个人初创到发展的过程，参与了多个重要项目的推进。这些经历让我对创业、对技术、对商业有了更深的理解。

未来规划

没想到太多要写的。

短期在事业上，刚刚拿到了真格、蓝驰等的投资，准备做 Voice+Agent 方向的出海产品。

人生上，学会如何玩，如何作为一个真实的人。学会说话、学会发声。锻炼、健身。还有真正 Follow your heart 的事情。

写在最后

人生就像一场旅行，每个阶段都有不同的风景。共绩科技是我人生旅途中的重要一站，我会永远珍惜这段经历。在这里遇到了非常多很精彩的人，我非常感激。

感谢所有支持我的人，感谢这个平台给我的一切。新的旅程即将开始，我充满期待。

最后用《西游记》里我很喜欢的一句话结尾

寻穷天下无名水，历遍人间不到山

Gongji Tech Internship: Make AI Truly Usable

Tue, 26 Aug 2025 00:00:00 GMT

We’re looking for an intern who truly cares about bringing AI into real‑world use.

Gongji Tech (suanli.cn) has a simple mission: make AI compute as easy to use as water and electricity. We serve thousands of developers, helping them run models efficiently without being blocked by deployment, cost, or ops.

Now we need you to help solve real problems — not busywork, but core work.

What You’ll Do

Package mainstream AIGC models for deployment

Build standardized Docker images for Stable Diffusion, Qwen, Wan, and more. Not just “runs,” but “starts fast, uses less memory, stays stable.”

Operate the developer community

Listen to feedback on the front lines, answer questions, and organize discussions so developers want to come and stay.

Write documentation people actually understand

Deployment guides, API docs, best practices — goal: a beginner can run their first model in 5 minutes.

Some front‑end work

Help maintain our SaaS platform (Next.js + Tailwind), improving features and experience — not just slicing UI.

We Hope You Are

Comfortable with Docker and packaging models/services
Understand AI inference deployment; not afraid of logs, configs, dependencies
Basic web dev skills (HTML/CSS/JS); React/Next.js is a plus
Can explain tech clearly — blogs/docs/open‑source experience preferred
Proactive, reliable, communicative; can push things forward

Bonus

Active GitHub contributions / open‑source experience
Ran tech communities or wrote tutorials
Deployed AI models yourself (even small projects)
Docs you wrote got “copied” by others

Internship Info

Location: Wudaokou, Beijing (onsite)
Time: 5 days/week, 10:00–18:30
Duration: at least 3 months, long‑term preferred
Stipend: 240–300 RMB/day

We Offer

Real projects, hands‑on with core modules
Free high‑performance GPUs to try models
Flat team + 1‑on‑1 mentoring, only technical discussions
Efficient, low‑overtime culture

How to Apply

Email: hla@suanleme.cn

Or add WeChat: huangliang1009 (note “Intern Application + Name”)

Email subject: [Intern Application] Name - AI Containerization/Community Ops

Please include:

Resume
GitHub link (if any)
Tech blog/docs/community work (even a single note)

Gongji Tech Team

Website: https://suanli.cn

🚀 Gongji Tech Intern Hiring | Turning AI from 'Runs' to 'Works Well'

Thu, 14 Aug 2025 00:00:00 GMT

Hey developer!

We’re Gongji Tech, and we’re working on something pretty cool: redefining how AI compute is scheduled and coordinated through a decentralized approach. Our product Gongji Compute (suanli.cn) is more than a platform — we want it to be the “water, electricity, and gas” for AI developers: make model deployment simpler and compute flow freer.

Right now we’re looking for an intern who’s truly interested in AI engineering and developer ecosystems to join us and dive into core work. This isn’t a “fetch‑coffee” role. Every Dockerfile you write, every community question you answer, and every document you produce will directly impact the experience of thousands of developers.

If you:

Enjoy packaging and shipping models, and love the feeling of taking them from local to production;
Are willing to hang out in the community, listen to developer pain points, and fix real problems;
Can write code and write docs that people actually understand;
Are obsessed with making AI easier to use…

Then we’re probably looking for you.

🛠 What You’ll Work On

AI application containerization in practice

Build standardized Docker images for mainstream AIGC models like Stable Diffusion, Qwen, Wan, and more. Not just “runs,” but “runs reliably, starts fast, uses less.” You’ll go deep into dependency management, startup script optimization, resource isolation, and more.

Real developer community operations

Our community isn’t a megaphone — it’s the frontline where problems appear and get solved. You’ll help answer questions, collect feedback, run discussions, and even organize technical sharing sessions so developers stay and engage.

Write useful technical docs

We hate docs nobody can understand. You’ll write deployment guides, API docs, and best practices with a clear goal: a beginner can run their first model in 5 minutes.

Some frontend work (bonus)

Help maintain our AIGC SaaS platform (Next.js + Tailwind), contribute to features and performance improvements — not just slicing UI, but making tools more usable.

🧰 What We Hope You Have

✅ Familiar with Docker and real image‑building experience (e.g. packaging Hugging Face models, FastAPI services, etc.)
✅ Understand basic AI inference and serving workflows; comfortable reading logs, tweaking configs, resolving dependencies
✅ Basic web dev skills (HTML/CSS/JS); React or Next.js is a plus
✅ Clear technical writing — can explain complex things in plain language; blogs, open‑source work, or docs are a plus
✅ Proactive, reliable, communicative — able to push things forward in a fast‑paced environment

🌟 Bonus (Not Required, but Will Impress Us)

Active GitHub contributions; participated in open‑source projects
Ran a tech community,公众号, Zhihu column, Discord channel, etc.
Packaged/deployed AI models yourself (even toy projects)
Wrote tutorials, deployment manuals, or API docs that others “copied”

📍 Internship Info

Location: Wudaokou, Beijing (onsite)
Time: 5 days/week, 10:00–18:30
Duration: At least 3 months, long‑term preferred

💡 We Offer

✅ Real projects, hands‑on: no empty promises, no busywork. You’ll work on core modules and gain both AI engineering + developer ecosystem experience.
✅ Free GPU compute: high‑end cards available to test any model you want.
✅ Flat team + 1‑on‑1 mentorship: no PPT culture, just technical discussion and fast iteration.
✅ Internship stipend: 240–300 RMB/day.
✅ A team that’s efficient, not overworked: we believe passion and efficiency matter more than overtime.

📬 How to Apply?

We care more about what you’ve done than how pretty your resume looks.

Email: hla@suanleme.cn
Or add WeChat: huangliang1009 (note “Intern Application + Name”)

📧 Suggested subject: [Intern Application] Name - AI Containerization/Community Ops

📎 Please include:

Resume
GitHub link (if any)
Tech blog/docs/community work (even a deployment note)

One Last Thing

We don’t expect a “full‑stack genius,” but we do want you to genuinely care about something.
Experience can be limited, but passion can’t be fake.
Skills can come slowly, but attitude must be real.

Come to Gongji and build real tools for AI developers.
The next person others “copy from” might be you.

👉 Looking forward to your message!

— Gongji Tech Team 🚀

Website: https://suanli.cn
We’re building the next‑gen infrastructure for AI developers.

✅ Friendly reminder:
Even if you feel “not strong enough,” as long as you love learning, dig in, and communicate well, we’re happy to help you grow. We’ll walk this road together.

We Struggled with GPU Compute Too — So We Built a Cloud Host

Thu, 07 Aug 2025 00:00:00 GMT

As a small team focused on AI, we’ve struggled with compute shortages just like many developers on the road to model training.

Expensive GPUs, long queues on mainstream cloud platforms, complex environment setup, and money burned by idle instances — that used to be our daily life. We wasted time waiting and doing ops instead of focusing on algorithms and product innovation.

We were done with that inefficiency. To solve our own problem, we decided to build the GPU cloud platform we always wanted: simple, efficient, and affordable.

We prepared a 10‑RMB compute voucher. Register here to claim it: Get a 10‑RMB no‑threshold voucher

How We Solve the Shared Pain Points

We turned every pitfall we hit into the core features of Gongji Compute:

No more queues — start instantly: We invested heavily to reserve thousands of RTX 4090/5090 GPUs. No waiting; jump into Jupyter Lab, VS Code, or Bash right in the browser anytime.
Pay only for effective compute: We believe not a cent should be wasted on idle time. We implemented true per‑second billing — stop the instance, stop the charges; start/stop is free. RTX 4090 costs only 1.68 RMB/hour — pay only for what you use.
Three‑minute onboarding, focus on dev: We preinstall mainstream images including PyTorch, TensorFlow, ComfyUI, Stable Diffusion, and more. No more environment setup headaches — everything works out of the box.
Data安心: We provide shared storage volumes and S3 mount acceleration so your datasets, code, and model weights move safely and efficiently between tasks.

We Chase Extreme Cost Performance

We use ourselves as the first users and optimized the most painful steps in development. Our goal is to deliver the most stable, smooth experience at the same price.

Dimension	Gongji Compute	What it solves
Availability	Thousands of RTX 4090/5090 in stock	No queues, start instantly.
Price	4090: 1.68 RMB/hr, 5090: 2.5 RMB/hr	30–60% cheaper than mainstream clouds.
Billing	Per‑second billing, stopped instances free	No more paying for idle time.
Startup speed	Enter dev environment within 3 minutes	Goodbye long waits.
Environment	Preinstalled common images, built‑in Tsinghua pip mirror	No environment setup pain.
Collaboration	One‑click image distribution for teachers/leads	Team collab and training efficiency.

Real‑World Performance

We also use Gongji Compute for model fine‑tuning and prototype development. Some real cost/performance references:

Llama 3 fine‑tuning: single RTX 4090, Llama‑3‑8B LoRA fine‑tune, ~4 hours costs about 6.7 RMB; free after shutdown.
Kaggle competitions: rent 8 RTX 4090s for 30 minutes, release after; total cost < 80 RMB.
AI teaching: teachers distribute prebuilt images to hundreds of students; shut down after class, cost per student less than a milk tea.
Service deployment: after tuning in ComfyUI, package directly into elastic API service — no second deployment.

Quick Start

We designed onboarding to be very simple — your first task can run in about three minutes:

Go to the Gongji Compute console and open Cloud Host.
Select the GPU type and quantity you need.
Name your instance and choose a prebuilt base image.
Optionally attach a shared storage volume for persistence.
Click Create Instance.

Now you can fully enjoy AI development.

We prepared a 10‑RMB compute voucher — register via the link below to claim it. We hope Gongji Compute becomes the perfect “alchemy” tool in your hands.

Link: Get a 10‑RMB no‑threshold voucher

中国上市 AI 云玩家活的怎么样？

Sat, 26 Jul 2025 00:00:00 GMT

AI 浪潮重塑了算力产业格局。NVIDIA 从游戏显卡厂商跃升为全球市值第一，云厂商纷纷转向 AI 算力服务。整个算力产业链都在向 AI 转型。

这里分析五家中国上市 AI 云玩家的经营状况。

1. 🔴 青云科技（688316）

战略定位：企业级混合云 AI 服务商，AI 智算平台：支持 NVIDIA、国产 GPU 等异构算力统一调度

经营状况评价：

青云科技正处于转型阵痛期。2025 年一季报显示营业收入 4701 万元，同比下降 37%，延续了 2024 年以来的收入下滑趋势。公司持续亏损，净利润 -2291 万元，亏损幅度扩大 201%。

更严峻的是财务结构恶化。资产负债率高达 84%，每股净资产从 2024 年一季报的 3.60 元跌至 1.34 元，股东权益被大幅稀释。应收账款周转天数达 127 天，回款压力明显。流动比率 0.71，资金链紧张。

技术转型成本高昂但商业化进展缓慢。销售毛利率从 40% 暴跌至 19%，表明在 AI 算力竞争中定价能力下降。公司虽具备异构算力调度等差异化能力，但市场接受度仍需时间验证。短期内，青云科技面临"技术领先但商业化滞后"的典型困境。

报告期	2025 一季报	2024 年报	2024 三季报	2024 中报	2024 一季报
营业收入	4701.21 万	2.72 亿	2.14 亿	1.44 亿	7464.96 万
营业收入同比增长	-37.02%	-18.95%	-16.74%	-17.51%	8.99%
净利润	-2290.07 万	-9575.77 万	-6275.86 万	-3763.88 万	-759.23 万
净利润同比增长	-201.63%	43.70%	49.14%	54.16%	83.57%
扣非净利润	-2282.43 万	-1.03 亿	-6913.26 万	-3836.54 万	-921.02 万
扣非净利润同比增长	-147.82%	40.79%	45.75%	54.15%	80.33%
每股净资产	1.34 元	1.82 元	2.50 元	3.02 元	3.60 元
销售毛利率	19.53%	31.66%	32.20%	33.82%	40.10%
销售净利率	-48.46%	-35.24%	-30.77%	-26.88%	-10.52%
净资产收益率	-30.29%	-71.89%	-42.03%	-23.25%	-4.32%
资产负债率	83.70%	84.87%	79.74%	74.45%	68.12%
流动比率	0.71	0.80	0.79	0.84	1.13
存货周转天数	2.18 天	1.71 天	1.65 天	15.38 天	16.41 天
应收账款周转天数	126.96 天	86.57 天	102.26 天	88.47 天	83.44 天

2. 🟡 优刻得-W（688158）

战略定位：高性价比 AI 算力服务商

经营状况评价：

优刻得呈现明显的经营改善趋势。2025 年一季报营业收入 3.76 亿元，同比增长 7.97%，终结了 2024 年以来的收入下滑态势。更重要的是盈利能力显著提升，销售毛利率达 24.34%，同比大幅改善 61.24%，反映出 AI 算力业务的议价能力增强。

亏损状况持续收窄。净利润 -4473 万元，同比改善 27.70%，扣非净利润同样改善 27.22%。公司连续五个季度保持亏损收窄态势，显示出向盈利转折的积极信号。

财务结构相对稳健。资产负债率 28.94%，处于合理水平。流动比率 1.46，短期偿债能力尚可。每股净资产 5.21 元，虽有下滑但幅度收窄。应收账款周转天数 112.85 天，回款周期较长但趋于稳定。

优刻得正处于业务拐点期，收入重回增长轨道，盈利能力大幅改善，有望在 2025 年实现扭亏为盈。

报告期	2025 一季报	2024 年报	2024 三季报	2024 中报	2024 一季报
营业收入	3.76 亿	15.03 亿	10.94 亿	7.30 亿	3.48 亿
营业收入同比增长	7.97%	-0.81%	-0.47%	-1.26%	-5.32%
净利润	-4473.25 万	-2.41 亿	-1.65 亿	-1.08 亿	-6187.44 万
净利润同比增长	27.70%	29.67%	41.76%	42.37%	34.68%
扣非净利润	-4540.39 万	-2.49 亿	-1.82 亿	-1.15 亿	-6238.16 万
扣非净利润同比增长	27.22%	25.98%	33.70%	40.99%	38.01%
每股净资产	5.21 元	5.29 元	5.46 元	5.57 元	5.67 元
销售毛利率	24.34%	18.86%	19.55%	18.43%	15.10%
销售净利率	-11.97%	-16.08%	-15.19%	-14.98%	-17.82%
净资产收益率	-1.88%	-9.58%	-6.48%	-4.21%	-2.38%
资产负债率	28.94%	29.16%	28.58%	28.70%	29.26%
流动比率	1.46	1.52	1.70	1.75	1.84
存货周转天数	9.78 天	12.10 天	20.77 天	17.66 天	20.14 天
应收账款周转天数	112.85 天	112.78 天	115.25 天	117.04 天	124.31 天

3. 🟡 神州数码（000034）

战略定位：全栈式 AI 云服务集成商

核心能力：

异构算力适配：推出神州鲲泰系列 AI 服务器，支持华为昇腾、英伟达 GPU 等多架构芯片，实现国产替代与主流技术双覆盖
平台化服务：自研"神州问学"平台集成阿里、百度、OpenAI 等主流大模型，提供文生图/视频工具，3 分钟完成模型部署
算力基建：深圳智算中心投入运营，支持千亿参数级模型训练，服务腾讯云、阿里云、华为云三大生态

经营状况评价：

神州数码呈现典型的"增收不增利"困境。2025 年一季报营业收入 317.78 亿元，同比增长 8.56%，收入规模保持稳定增长态势。净利润 2.17 亿元，同比下降 7.51%，盈利能力出现倒退。扣非净利润 2.24 亿元，同比增长 10.39%，表明主营业务盈利能力尚可，净利润下滑主要受非经常性损益拖累。

盈利质量堪忧。销售毛利率仅 3.73%，同比大幅下降 18.54%，反映出 AI 云服务市场竞争白热化。销售净利率 0.74%，处于极低水平，每百元收入仅产生 0.74 元净利润。作为技术服务商，如此微薄的利润率暴露出其在价值链中的话语权不足。

财务结构存在隐患。资产负债率高达 74.73%，债务负担沉重。流动比率 1.29，短期偿债压力较大。每股净资产 15.02 元，同比增长 14.21%，主要受股本扩张影响。应收账款周转天数 33.46 天，回款周期较短，现金管理能力尚可。

神州数码正面临 AI 转型的成长烦恼。收入增长稳健但盈利能力下滑，表明公司在 AI 算力集成领域具备一定竞争力，但成本控制能力不足。在 AI 基础设施建设热潮中，神州数码更像是"卖铲子的人"，受益于行业增长但难以获得超额收益。

报告期	2025 一季报	2024 年报	2024 三季报	2024 中报	2024 一季报
营业收入	317.78 亿	1281.66 亿	915.71 亿	625.62 亿	292.72 亿
营业收入同比增长	8.56%	7.14%	8.81%	12.52%	7.95%
净利润	2.17 亿	7.53 亿	8.94 亿	5.09 亿	2.35 亿
净利润同比增长	-7.51%	-35.76%	5.04%	17.52%	12.35%
扣非净利润	2.24 亿	10.15 亿	8.61 亿	4.55 亿	2.03 亿
扣非净利润同比增长	10.39%	-19.68%	2.10%	6.14%	-14.73%
每股净资产	15.02 元	13.70 元	13.83 元	13.46 元	13.15 元
销售毛利率	3.73%	4.21%	4.49%	4.45%	4.57%
销售净利率	0.74%	0.61%	1.00%	0.84%	0.85%
净资产收益率	2.27%	8.47%	9.99%	5.81%	2.70%
资产负债率	74.73%	78.02%	77.64%	79.16%	78.74%
流动比率	1.29	1.24	1.18	1.21	1.20
存货周转天数	37.80 天	36.59 天	40.86 天	39.16 天	41.56 天
应收账款周转天数	33.46 天	32.81 天	34.43 天	36.25 天	36.64 天

4. 🔴 首都在线（300846）

战略定位：全球化弹性算力网络运营商

核心能力：

节点覆盖：50+ 国家 94 个数据中心 + 千个边缘节点，构建低延迟全球算力网
资源储备：绑定英伟达/燧原科技 GPU 资源，支持实时渲染与大模型训练
调度能力：异构算力平台实现动态资源分配，降低数字孪生、车联网等场景应用门槛

经营状况评价：

首都在线正陷入收入萎缩与持续亏损的双重困境。2025 年一季报营业收入 3.06 亿元，同比下降 5.53%，终结了此前连续增长态势。净利润亏损 3973.62 万元，虽然亏损幅度同比收窄 14.54%，但依然深陷泥潭。扣非净利润亏损 4376.44 万元，表明主营业务盈利能力严重不足。

盈利结构严重失衡。销售毛利率 11.11%，虽然同比提升 9.93%，但在 AI 算力行业中处于偏低水平。销售净利率 -12.20%，意味着每卖 100 元就要亏损 12.20 元。作为全球化算力网络运营商，如此惨淡的盈利表现暴露出其成本控制失效和商业模式缺陷。

财务风险不断累积。流动比率 0.97，短期偿债能力告急。每股净资产 1.79 元，同比暴跌 23.46%，股东权益被快速侵蚀。应收账款周转天数 87.02 天，回款周期冗长，现金流管理堪忧。每股未分配利润 -1.33 元，累计亏损持续扩大。

首都在线面临典型的"规模不经济"困境。全球 94 个数据中心的重资产投入带来巨额折旧和运营成本，但收入增长却停滞不前。在 AI 算力基础设施红海竞争中，首都在线更像是"先烈"而非"先驱"，高昂的基础设施投入与微薄的回报形成鲜明对比。

报告期	2025 一季报	2024 年报	2024 三季报	2024 中报	2024 一季报
营业收入	3.06 亿	13.97 亿	10.53 亿	7.13 亿	3.24 亿
营业收入同比增长	-5.53%	12.35%	22.13%	26.90%	19.56%
净利润	-3973.62 万	-3.03 亿	-1.46 亿	-9218.70 万	-4649.83 万
净利润同比增长	14.54%	10.86%	0.29%	9.86%	18.84%
扣非净利润	-4376.44 万	-2.96 亿	-1.49 亿	-9096.24 万	-4688.97 万
扣非净利润同比增长	6.67%	10.60%	2.74%	15.56%	21.27%
每股净资产	1.79 元	1.86 元	2.15 元	2.26 元	2.34 元
销售毛利率	11.11%	8.07%	8.75%	9.88%	10.11%
销售净利率	-12.20%	-21.08%	-13.24%	-12.38%	-13.75%
净资产收益率	-4.35%	-29.90%	-13.74%	-8.73%	-4.83%
资产负债率	50.80%	49.61%	46.54%	46.47%	47.71%
流动比率	0.97	0.96	1.04	1.04	1.08
存货周转天数	0.38 天	0.90 天	1.26 天	1.29 天	1.50 天
应收账款周转天数	87.02 天	82.30 天	88.39 天	88.45 天	95.80 天

5. 🟢 浪潮信息（000977）

战略定位：全球 AI 服务器领导者

核心能力：

硬件创新：全球首推预置 DeepSeek 模型的海若一体机，单机支持千亿参数推理，市占率 11.3%
能效突破：冷板式液冷技术实现 PUE 1.15，较风冷节能 30%，拥有 500+ 项液冷专利
开源生态：发布"源 2.0"千亿参数开源大模型，构建金融、医疗行业专属解决方案

经营状况评价：

浪潮信息正经历 AI 算力基础设施建设的黄金期。2025 年一季报营业收入 468.58 亿元，同比增长 165.31%，延续了 2024 年以来的爆发式增长态势。净利润 4.63 亿元，同比增长 52.78%，扣非净利润 4.27 亿元，同比增长 80.76%，盈利能力持续改善。

盈利结构呈现典型的硬件制造特征。销售毛利率 3.45%，虽然同比大幅下降 57.30%，但在 AI 服务器行业属于正常水平。销售净利率 0.98%，每百元收入产生 0.98 元净利润，反映出公司在 AI 算力硬件供应链中的议价能力有限。作为全球 AI 服务器领导者，浪潮信息更像是"卖铲子的人"，受益于 AI 基础设施建设热潮但难以获得超额利润。

财务结构存在隐忧。资产负债率高达 77.47%，债务负担沉重。流动比率 1.34，短期偿债能力尚可但压力较大。每股净资产 13.77 元，同比增长 7.25%，主要受盈利积累影响。应收账款周转天数 27.43 天，回款周期较短，现金管理能力较强。

运营效率显著提升。存货周转天数从 120.69 天降至 86.05 天，存货管理效率大幅改善。总资产周转率 0.58 次，虽然同比下降但仍在合理区间。固定资产周转率 16.71 次，资产利用效率较高。

浪潮信息正处于 AI 算力硬件制造的巅峰期。收入爆发式增长，盈利能力持续改善，但微薄的利润率暴露出其在价值链中的话语权不足。在 AI 基础设施建设热潮中，浪潮信息更像是"卖铲子的人"，受益于行业增长但难以获得超额收益。随着 AI 算力需求趋于稳定，公司可能面临增长放缓的挑战。

报告期	2025 一季报	2024 年报	2024 三季报	2024 中报	2024 一季报
营业收入	468.58 亿	1147.67 亿	831.26 亿	420.64 亿	176.62 亿
营业收入同比增长	165.31%	74.24%	72.26%	68.71%	85.32%
净利润	4.63 亿	22.92 亿	12.94 亿	5.97 亿	3.03 亿
净利润同比增长	52.78%	28.55%	67.05%	90.56%	64.39%
扣非净利润	4.27 亿	18.74 亿	11.55 亿	4.22 亿	2.40 亿
扣非净利润同比增长	80.76%	67.59%	176.67%	3.61 万%	62.96%
每股净资产	13.77 元	13.58 元	12.84 元	12.50 元	12.42 元
销售毛利率	3.45%	6.85%	6.70%	7.74%	8.08%
销售净利率	0.98%	2.00%	1.54%	1.37%	1.68%
净资产收益率	2.30%	12.06%	7.01%	3.27%	1.69%
资产负债率	77.47%	71.44%	77.19%	70.34%	62.74%
流动比率	1.34	1.50	1.39	1.58	2.00
存货周转天数	86.05 天	100.60 天	100.30 天	118.32 天	120.69 天
应收账款周转天数	27.43 天	32.52 天	53.40 天	48.62 天	51.31 天

参考

表格数据来自雪球

https://www.qingcloud.com/aboutus
https://www.ucloud.cn/site/about/intro/

Echo Book Notes

Thu, 24 Jul 2025 00:00:00 GMT

Your thoughts and notes should not be forgotten. Revisit highlights daily with AI commentary to bring new value to your WeRead highlights.

https://x.com/nexmoe/status/1903339054068027603

View product details

View Echo Book Notes

GEO Checker

Thu, 24 Jul 2025 00:00:00 GMT

An all-in-one geographic availability checker for websites, with multi-region access tests, status code checks, and latency insights to quickly locate region-specific network issues.

https://geochecker.net

View product details

Visit GEO Checker

I Found the Fastest and Cheapest Way to Deploy FLUX.1 Kontext [dev]

Fri, 04 Jul 2025 00:00:00 GMT

FLUX.1 Kontext [dev] just dropped and immediately caused a stir in the open‑source community. This new model changes the game for image editing. Unlike traditional image generation tools, it understands context, so you can refine an image step by step like a conversation, instead of dumping a pile of prompts and hoping for the best.

From Keyword Matching to Context Understanding

Traditional image models are basically doing keyword matching: you type “a red cat,” and it searches training data for similar combinations. FLUX.1 Kontext [dev] uses a multimodal flow‑matching architecture that processes both text instructions and image content, so it can actually understand what you want.

What does that mean? Suppose you want to change the background of a portrait. A traditional model might modify the person too, because it can’t tell what should stay. FLUX.1 Kontext [dev] understands “this is the person, the background is environment,” and only changes what you specify.

More importantly, it supports multi‑round iterative editing. You can say “change the background to a beach,” then say “make the water bluer,” and it remembers previous edits and keeps refining — instead of regenerating a brand‑new image from scratch.

30‑Second Deployment Guide

We’ve integrated FLUX.1 Kontext [dev] on the Gongji Compute platform, so you can try it right away.

Visit https://console.suanli.cn/serverless/create or click “Get Started” on the website
Choose a suitable GPU configuration
Select “Flux.1 Kontext Dev” in service settings
Click deploy

The whole process takes less than a minute. Once deployed, you can call the model via API.

Performance

In our tests, FLUX.1 Kontext [dev] runs 3–8x faster than similar models, largely thanks to its flow‑matching architecture. Traditional diffusion models require hundreds of denoising steps, while FLUX.1 Kontext [dev] uses a more efficient sampling algorithm that drastically cuts compute steps.

Speed doesn’t come at the cost of quality. In our tests, image detail preservation and style consistency are excellent, especially in complex scenes, where it maintains coordination between elements.

Cost

On Gongji Compute, FLUX.1 Kontext [dev] costs only 1.68 RMB per hour, depending on image resolution and complexity. Compared with overseas commercial APIs, that’s about 80% cheaper, and there’s no network latency.

Best‑Fit Scenarios

FLUX.1 Kontext [dev] is best for image editing tasks that require fine control and multi‑round iteration, such as:

E‑commerce product images: quickly swap backgrounds, adjust lighting, tweak details without affecting the product itself
Content creation: refine images for articles or videos based on themes
Design prototyping: test different visual concepts in early design stages

Traditional image editors either require professional skills or only handle simple tasks. FLUX.1 Kontext [dev] fills this gap, enabling ordinary users to handle complex edits.

Conclusion

FLUX.1 Kontext [dev] signals a new era in image generation. The old “one‑shot generation” model is being replaced by conversational creation, dramatically lowering the barrier to professional image editing.

The model is still iterating fast. We expect more updates in the coming months — video editing support, more art styles, and better Chinese understanding.

Gongji Compute will keep pace with these updates so users can experience the latest features first. If you need image generation or editing, now is the best time to try FLUX.1 Kontext [dev].

HTTPie: A Human-Centered Tool That Reshapes API Debugging

Tue, 01 Jul 2025 00:00:00 GMT

In backend development, API debugging can easily take up a third of the workday. curl is powerful but hard to use; Postman is feature‑rich but bloated, and its subscription model is confusing. HTTPie offers a fresh alternative.

What stands out most about HTTPie is its pursuit of human‑centered design. It makes complex HTTP requests simple and intuitive.

Visual request building: click to build HTTP requests with all parameters — auth, headers, body — supporting REST, GraphQL, and classic HTTP.
Export in multiple formats: one‑click export to curl, HTTPie CLI, and more for sharing or documentation.
Highlighted responses: auto‑format JSON with syntax highlighting and search.
Offline use: no sign‑up required; full features offline, with cross‑device sync.

Quick Start

Installation

HTTPie comes in two forms. The web version is at https://httpie.io/app or the short alias https://req.new. The desktop app supports macOS, Windows, and Linux, downloadable from https://httpie.io/download.

Linux users should note the AppImage format — AppImageLauncher is recommended for a better experience.

Basics

You only need two things to create a request: HTTP method and URL. HTTPie auto‑switches methods based on content (e.g., adding a body switches GET to POST).

HTTPie supports importing curl commands directly. Paste any curl command into the URL field and it auto‑parses parameters. You can also bulk import via the sidebar “+” menu and “Import.”

Headers are edited in a dedicated form with auto‑complete and smart merging. Auth supports Basic, Bearer Token, and API Key. Request bodies support text, forms, file uploads, and GraphQL, each with tailored editors and previews.

Design Philosophy

Reduce Cognitive Load

Traditional API tools prioritize completeness. HTTPie takes the opposite path: it abstracts HTTP into a few core concepts — method, URL, headers, auth, body — reducing mental overhead.

Workflow Integration

HTTPie’s variable system and environment management reflect real development needs. Developers switch between dev/test/prod constantly, but traditional tools make it painful. HTTPie lets you define variables and switch environments quickly.

Collections improve team collaboration. Related API requests live in one collection, inherit auth and environment variables, and avoid repeated configuration.

HTTPie also understands modern workflows: fully offline mode means debugging works even with unstable networks or strict security requirements. Users who don’t want to register can still use all core features locally.

When cross‑device collaboration is needed, real‑time sync keeps data consistent. Collections created on a desktop and environment tweaks on a laptop stay aligned everywhere. This flexibility makes HTTPie fit different team habits and security needs.

AI Assistance

HTTPie recently introduced AI‑assisted requests. You can describe what you want in natural language, and it generates the HTTP request. Example: “Fetch GitHub user list,” and it builds the corresponding GitHub API call.

This reduces the need to dig through API docs and helps developers onboard quickly.

Final Thoughts

Choosing HTTPie is choosing a development philosophy: tools should serve people, not force people to adapt to tools. This matters in fast‑iterating development environments.

HTTPie’s cross‑platform support and sync ensure consistent experiences across devices and OSs — crucial for distributed teams.

HTTPie redefines the standard for API debugging tools. It shows that the best developer tools are not about piling on features, but about deep understanding of user needs and polished experience. In an API‑first era, it’s worth trying.

A 4.2MB Domain Redirect Service

Sun, 29 Jun 2025 00:00:00 GMT

Got a bunch of idle domains and want a redirect service, but Caddy’s config makes your head hurt? This 4.2MB Go service might be exactly what you need.

domain-redirect is a lightweight service built specifically for domain redirection. It turns complex config into just a few environment variables. Simple and flexible, and suitable for production use.

Project: https://github.com/nexmoe/domain-redirect

Three‑Minute Quick Start

The easiest way is Docker:

docker run -d \
  -p 8080:8080 \
  -e DOMAIN_MAPPING_1=example.com->https://target1.com,https://target2.com \
  nexmoe/domain-redirect

This command starts a redirect service that round‑robins requests for example.com to two targets.

PORT: listening port (default 8080)
PRESERVE_PATH: keep original path (default false). If "true", redirects keep request path
INCLUDE_REFERRAL: include referrer domain info (default false). If "true", adds a ref param
ENABLE_TIMESTAMP: add timestamp param (default false). If "true", adds _t to prevent caching

For more complex configs, use docker-compose.yml:

version: '3'
services:
  domain-redirect:
    image: nexmoe/domain-redirect
    ports:
      - "8080:8080"
    environment:
      - DOMAIN_MAPPING_1=blog.example.com->https://blog.target.com
      - DOMAIN_MAPPING_2=shop.example.com->https://shop1.com,https://shop2.com
      - PRESERVE_PATH=true
      - INCLUDE_REFERRAL=true
    restart: unless-stopped

Now all domains redirect per rules. Paths are preserved and referrer info is added to the URL for analytics.

Full Config Reference

Domain Mapping

Each mapping rule uses DOMAIN_MAPPING_*:

DOMAIN_MAPPING_<ANY_NAME>=<domain>-><target1>,<target2>,...

Example:

DOMAIN_MAPPING_1=example.com->https://target1.com,https://target2.com
DOMAIN_MAPPING_BLOG=blog.example.com->https://myblog.com
DOMAIN_MAPPING_SHOP=shop.example.com->https://shop1.com,https://shop2.com,https://shop3.com

Example

Assume:

DOMAIN_MAPPING_1=example.com->https://target1.com,https://target2.com
PRESERVE_PATH=true
INCLUDE_REFERRAL=true
ENABLE_TIMESTAMP=true

Requesting http://example.com/api/users might redirect to:

https://target1.com/api/users?ref=example.com&_t=1672531200

Lightweight by Design

The image is only 4.2MB and uses 1.277MB memory. This reduces costs and makes scaling easy.

Traditional servers like Nginx/Apache are tens of MBs — overkill for redirects. domain-redirect is written in Go: small binaries, low runtime overhead.

More importantly, it uses environment variables for config. Compared with config files, env vars are better for containerized deployments:

Orchestrators (e.g., Kubernetes) support env vars natively
Config changes don’t require rebuilding images, just restart
Secrets can be managed safely

Referral Tracking & Analytics

When INCLUDE_REFERRAL is enabled, redirected URLs automatically include a ref parameter with the source domain.

This solves a key pain point: tracking traffic sources. The HTTP Referer header is often stripped or modified by browsers, while URL parameters are more reliable.

Combined with analytics tools like Google Analytics, you can measure which domains drive traffic and evaluate their value — especially useful if you own many domains.

KISS (Keep It Simple, Stupid)

domain-redirect is not trying to be a full reverse proxy. It focuses on redirection only.

Go is a thoughtful choice. It’s compiled, so deployments are consistent, and you don’t worry about runtime versions. Go’s concurrency model is ideal for handling large numbers of redirects.

Round‑robin state is stored in memory and resets on restart. This sacrifices persistence but keeps architecture simple — a reasonable trade‑off for redirects.

The Edge Container Era: How Cloudflare Container Redefines Cloud Boundaries

Thu, 26 Jun 2025 00:00:00 GMT

Cloud computing is going through its third revolution. The first was virtualization, which reduced wasted hardware resources. The second was containerization, which solved environment consistency. The third is edge‑native containers — any Docker image can start globally on demand and be billed with millisecond precision.

Cloudflare Container entered public beta in June 2025. It’s not just another container hosting service — it redefines the fundamental question of where compute should happen. When AI inference containers can spin up at the nearest edge node the moment a user requests, when FFmpeg video processing can run close to users to cut latency, and when apps that once required monthly billing can be charged per millisecond, the economics of cloud computing are rewritten.

A New Developer Experience

Ridiculously simple workflow: define a container in a few lines of code, then wrangler deploy — just like Workers. No complex YAML or orchestration.
Global by default: deploy once to “Region:Earth” and cover 300+ cities. No multi‑region configs.
The right tool combo: route traffic between Workers and Containers easily. Use Workers for ultra‑light scale, Containers for heavier compute.
Fully programmable: container instances start on demand and are controlled by Workers code. Custom logic is just JavaScript, not orchestration APIs.

Breaking the Boundary Between Containers and the Edge

Historically, containers and edge computing were parallel tracks. Containers give flexibility and portability but require complex orchestration and regional planning. Edge computing offers global distribution and seamless scaling, but limits runtime support and execution models.

Cloudflare dissolves this binary divide. By building the container platform on Durable Objects rather than retrofitting Kubernetes, it achieves global distribution tightly integrated with the edge network. Workloads run in the optimal location without the complexity of traditional multi‑region planning.

The deeper significance: developers no longer need to trade off container flexibility vs edge performance. For the first time, they truly converge.

Rebuilding the Compute Model

Redefining Time and Space for Containers

Traditional containers assume long‑running and location‑fixed. Cloudflare Container breaks both:

Time dimension: containers can checkpoint and restore in milliseconds. Cold start shifts from “problem to avoid” to “feature to leverage.” A predictable 2–3s start time becomes acceptable. Developers can control lifecycle with sleepAfter to maximize resource efficiency.
Space dimension: containers choose execution location dynamically based on request origin and network conditions. A user’s request in Tokyo runs in Tokyo; the same app can run simultaneously in London, San Francisco, and Singapore, coordinated by Workers.

This forces a re‑think of consistency, caching, and session management. State must be persisted externally to Durable Objects or other storage.

Diverse Persistence Strategies

Container’s persistence model upends the simple “stateful vs stateless” split. With Durable Objects acting as a state sidecar, containers stay stateless while app logic maintains state.

The key advantage: state lifecycle is decoupled from container lifecycle. When containers restart for optimization or failover, business state persists via Durable Objects.

This model is ideal for apps that need session state but not complex databases. For example, an AI chat system can store conversation history in Durable Objects, restore context on each interaction, and save again afterward.

Cloudflare Container offers layered storage options:

Lightweight state: Durable Objects (SQL or KV) for sessions, preferences, small datasets.
Structured data: D1 for relational storage with low‑latency global access.
Large files: R2 object storage for media, models, datasets.
Cross‑region sync: Durable Objects’ strong consistency keeps state aligned across edge nodes.

This multi‑layer architecture lets developers balance performance, cost, and consistency.

Industry Impact and Outlook

The power of Container lies less in the novelty of the tech and more in how it disrupts the cloud business model.

Traditional cloud moats are built on data‑center scale and enterprise feature sets. Cloudflare takes a different route: it doesn’t replace those services; it builds a more efficient distribution and execution layer on top. This changes the competitive dimension — when enterprises pay for actual usage and dynamically schedule by location, the old model of “regional deployment” and “reserved instances” feels crude.

More profound is the shift in development paradigms. When containers can migrate across the globe seamlessly, developers must rethink state, data consistency, and error handling. This isn’t just a technical shift — it’s an architectural philosophy change.

At a macro level, Container represents the transition from resource‑oriented to demand‑oriented computing. Compute resources are no longer fixed assets to plan and manage, but dynamic services called on demand. The real winners will be developers and companies who redesign architectures to fully leverage edge computing.

The edge‑native era has arrived. Container is just the beginning.

References

https://sliplane.io/blog/cloudflare-released-containers-everything-you-need-to-know
https://blog.cloudflare.com/cloudflare-containers-coming-2025/
https://lord.technology/2025/04/13/cloudflare-containers-reimagining-global-compute-at-the-edge.html
https://blog.cloudflare.com/containers-are-available-in-public-beta-for-simple-global-and-programmable/

Kubernetes Controllers Comparison Table

Thu, 26 Jun 2025 00:00:00 GMT

In Kubernetes, controllers manage Pod lifecycles and are core workload components. Each controller has its own use cases and behavior. Below is a detailed comparison of the main controller types.

Controller Comparison Table

Dimension	Deployment	StatefulSet	DaemonSet	Job
Primary use	Manage stateless apps (web services, APIs)	Manage stateful apps (databases, message queues)	Run a daemon on every node (monitoring, logging)	Run one‑off batch tasks
App state	Stateless	Stateful	Usually stateless	Usually stateless
Pod identity	No fixed identity, replaceable	Each Pod keeps a stable, permanent ID	Bound to node	Temporary identity
Storage	No persistent storage needed, can use ephemeral volumes	Requires stable persistent storage (PV/PVC, dynamic or static)	Optional, usually HostPath or ephemeral	Usually not needed, mount volumes if required
Deploy & scale	Unordered deploy, supports horizontal scaling	Ordered, one‑by‑one deploy/scale/delete (0,1,2…)	Auto‑deploys to new nodes, scales with node count	Controls `parallelism` and `completions`, runs to completion
Update strategy	RollingUpdate, Recreate; configurable `maxSurge`/`maxUnavailable`	RollingUpdate, supports `partition` or `OnDelete`	RollingUpdate or `OnDelete`	Not applicable; Pod template immutable after creation
Rollback	Automatic rollback to history (`revisionHistoryLimit`)	Not directly; manual or external tools	Supports rollback	Not applicable
Failure handling	Auto restart/recreate failed Pods	At most one Pod with same identity runs; manual recovery needed	Node failure removes Pod; recreated on node recovery/new node	Retry on failure (`backoffLimit`)
Key features	Declarative updates, versioning/rollback, pause/resume	Ordered operations, stable network/storage, Headless Service	Node affinity, auto‑deploy on new nodes, tolerates taints	Retries, parallel execution, optional TTL cleanup
Examples	Nginx, Tomcat, NodeJS apps	MySQL, Redis, Kafka, ETCD	Fluentd, Prometheus Node Exporter, network plugins	Data migration, batch compute, backups, ETL
Best practice	Default choice for most stateless apps	Use only when you need stable identity or ordering	For infra and node‑level services	For tasks that terminate (not daemons)

Controller Hierarchy

Deployment → ReplicaSet → Pod: This is the most common pattern for managing stateless apps. Users operate the Deployment object to declare desired state (image version, replicas, etc.). Deployment doesn’t manage Pods directly — it creates and manages ReplicaSet. When the Deployment is updated, it creates a new ReplicaSet and migrates Pods from old to new in a controlled manner (rolling update). This enables versioning and rollback, while ReplicaSet focuses on maintaining a specific number of Pod replicas. In other words, Deployment gives ReplicaSet declarative updates and history management.

CronJob → Job → Pod: CronJob schedules Job objects according to a cron expression. Job executes one‑off tasks by creating one or more Pods and ensuring they complete successfully. CronJob doesn’t manage Pods directly; it only triggers Jobs at the right time. This layering separates scheduling from execution.

StatefulSet and DaemonSet manage Pods directly — they don’t have an intermediate controller because their Pod management logic (stable identity, node binding) is their core capability.

References

Coolify: Idealism and Realism of Open-Source PaaS

Tue, 24 Jun 2025 00:00:00 GMT

Has your cloud bill made your heart sink again? When Vercel’s Serverless calls exceed expectations, AWS billing feels like a maze, and Heroku ends its free tier, developers start asking: do we really need to hand over all control to cloud vendors?

Coolify offers an interesting answer. This open‑source project tries to bring the convenience of Heroku, Netlify, and Vercel to your own servers, so you can enjoy modern PaaS deployment while keeping full control of infrastructure.

Ten‑Minute Onboarding: From Zero to Deployment

Before diving deeper, let’s look at real usage. Installation is simpler than you expect.

Preparation

You need a server running Ubuntu 22.04+ or Debian 11+, with at least 2GB RAM. If you don’t have one, Hetzner Cloud’s CAX11 instance (~€4.5/mo) is a good choice.

One‑Click Install

SSH into the server and run:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

The script auto‑configures Docker, firewall rules, and starts Coolify. Usually done in ~5 minutes.

First‑Time Setup

After install, open http://your-server-ip:8000, create an admin account, and follow the guided server connection setup. Coolify uses SSH keys to connect — fully automated.

Deploy Your First App

In the project panel, create a new app and select a Git repo. Coolify supports GitHub, GitLab, Bitbucket, etc. Enter repo URL, choose branch, and deploy.

For frameworks like Next.js, Vue, React, Coolify auto‑detects build settings. No Dockerfile or config required.

Redefining the PaaS Boundary

Traditional cloud platforms charge for convenience and abstraction. You pay to avoid ops complexity. But this model has real problems:

Opaque costs are the biggest pain. AWS billing is so complex you need a cost optimization engineer. Vercel’s Serverless fees can spike under traffic. I’ve seen projects forced to re‑architect due to surprise bills.

Vendor lock‑in is another hidden cost. Once your app integrates proprietary services, migration becomes expensive. This dependence forces developers to consider an “exit strategy” when choosing tech.

Coolify takes a different approach. It combines PaaS convenience with infrastructure transparency, letting developers deploy quickly and keep full control.

The philosophy is worth thinking about: tools should empower people, not replace judgment. Coolify won’t choose your database, limit your resources, or generate hidden fees without your knowledge.

Architectural Elegance

Coolify’s architecture shows a key strength of open source: predictability through transparency.

Docker‑centric abstraction

Every app runs in Docker containers. This ensures consistency and avoids lock‑in. Apps can be migrated to any Docker‑capable environment.

SSH‑based server management

Coolify manages servers via SSH, meaning you can deploy to any machine you can SSH into — VPS, home server, even Raspberry Pi. Infrastructure choice is fully yours.

Declarative config and automated ops

Under the hood it uses Docker Compose, but Coolify adds a higher abstraction layer. You declare desired state; it handles orchestration, networking, storage mounts, etc.

Built‑in monitoring and logs

Each deployment includes real‑time logs, resource monitoring, and health checks. These are often paid add‑ons in cloud platforms but standard in Coolify.

Real‑World Experience

Theory needs practice. I’ve used Coolify in production for several projects and gathered real experience.

Clear cost advantage

A mid‑size Next.js app costs about $20–40/mo on Vercel. With a €7.5/mo Hetzner VPS running Coolify, you can host 5–10 similar projects. The gap widens as scale grows.

Deployment speed comparable to PaaS

From Git push to production, Coolify is on par with Netlify and Vercel. For large projects, stronger server configs can even make builds faster.

Stronger monitoring and debugging

Direct server access means better visibility. You can inspect system logs and enter containers for debugging — often restricted on cloud platforms.

Data security and compliance

For data‑localization needs, Coolify is ideal. All data stays on servers you control, avoiding third‑party policies.

Self‑hosting does mean more ops responsibility: server maintenance, security updates, backups. But for developers with some ops skills, the regained control is worth it.

The Power of Open Source Ecosystems

Coolify’s growth is impressive: 35k+ GitHub stars, active discussions, frequent releases. It shows how alive open source is in infrastructure tooling.

The roadmap is fully public, and feature requests/bugs can be tracked in GitHub Issues. That transparency lets users participate in the product’s evolution rather than passively accepting vendor decisions.

More importantly, open source means customization. Need a special deploy flow? Modify the code. Need a monitoring integration? Submit a PR. This flexibility is impossible in closed‑source cloud platforms.

Rethinking Tech Choices

Coolify forces a reconsideration: in pursuit of convenience, have we over‑relied on external services?

Modern development often outsources complexity to cloud providers. Early on, this accelerates delivery, but as projects mature, dependence costs grow.

Coolify offers a middle path: not back to manual ops, not full reliance on black‑box cloud services. It lets developers find the right balance between convenience and control, depending on project stage.

For personal projects and small teams, Coolify is nearly perfect: low cost, high control, full feature set. A strong competitor to traditional cloud platforms.

For large enterprises, it’s at least a valuable reference: the core of PaaS is not proprietary tech but abstraction of complexity — which can be achieved in open source without sacrificing transparency.

Tech choices are always trade‑offs. Coolify’s value is that it offers a new option worth serious consideration.

Dokploy: A Simplified Open-Source PaaS Platform

Sun, 22 Jun 2025 00:00:00 GMT

In today’s software world, we have powerful tools, yet deployment and maintenance haven’t become much easier. From server setup to database management to CI/CD pipelines, every step can consume time. For developers who want focus and efficiency, the ideal is simple: commit code and let the rest deploy automatically and reliably. That’s the context where Dokploy, an open‑source PaaS solution, comes in.

Quick Start

Dokploy is extremely simple to deploy. Prepare a VPS (recommended: 2GB RAM, 30GB storage), then run one command:

curl -sSL https://dokploy.com/install.sh | sh

The install script configures Docker automatically. After that, open http://your-server-ip:3000, create an admin account, and you’re ready. Usually done in 5 minutes with no extra setup.

Smooth Deployment & Management

Dokploy provides a flexible deployment workflow. It integrates directly with GitHub, triggering builds and deployments on code push, forming a full CI/CD loop. For builds, it supports automatic detection via Nixpacks, Heroku Buildpacks, and more, while still allowing custom Dockerfiles for precise control.

It also supports Docker Compose natively — a big win for complex apps with multiple services. You can almost seamlessly move your local docker-compose.yml into production, reducing environment mismatch risk.

Beyond app deployment, Dokploy integrates database and service management into one dashboard. It supports one‑click deployments of MySQL, PostgreSQL, MongoDB, Redis, and more, plus automated scheduled backups and restores. Developers no longer need to write backup scripts or worry about data loss — it becomes configuration.

For every running app or service, Dokploy provides real‑time logs, resource monitoring (CPU, memory, disk, network), and direct terminal access into containers — making troubleshooting and ops much easier.

Back to Creation Itself

Dokploy emphasizes developer autonomy and fully embraces open source and self‑hosting. You gain full control over infrastructure with zero vendor lock‑in. You can modify and extend the platform to fit specific needs. It also supports multi‑server deployment and Docker Swarm clusters, enabling horizontal scaling as projects grow.

In my view, Dokploy’s value is its precise positioning: a “just right” solution for developers who don’t want to manage raw docker-compose but find Kubernetes too heavy. It doesn’t try to be a giant platform; it focuses on the core pain point — deployment — and makes it extremely simple.

Simplicity Under the Hood

Dokploy’s core philosophy is seamless deployment, balancing powerful features with simple operation. Compared with complex enterprise PaaS or deep‑customized Kubernetes, Dokploy offers an intuitive UI and CLI that let developers deploy apps to any server in a few steps.

Under the hood, simplicity is built on mature open‑source components: Traefik as the reverse proxy to manage domains, SSL, and routing automatically; Redis for deployment queues to avoid resource conflicts; PostgreSQL for core data storage. This stack packages complex backend ops behind a clean Next.js frontend so developers can manage apps via UI instead of commands.

PaaS vs Serverless

A common confusion: when to choose traditional PaaS, and when to go Serverless. Both simplify deployment, but they solve different problems.

Serverless platforms like Vercel, Netlify, or cloud functions excel at stateless, event‑driven workloads. They scale automatically and bill on demand, but at the cost of strict runtime constraints: execution time, memory limits, cold start latency. This makes them great for API gateways, static site generation, image processing — not for long‑running services or persistent connections.

By contrast, a PaaS like Dokploy provides a full application runtime. It doesn’t force you to split apps into stateless functions, and it doesn’t restrict DB connections or file system access. For real‑time tools (e.g., WebSocket collaboration) or SaaS with complex state, containerized deployment is often the more realistic choice.

Cost structure matters too. Serverless pay‑per‑call is great for spiky traffic, but as scale grows, ongoing invocation costs can surpass fixed server costs. Dokploy’s self‑hosting lets you run on hardware you control, avoiding the cloud “growth tax” — important for indie developers and growing products.

Competitor Comparison

To show Dokploy’s advantages more clearly, here’s a feature comparison of mainstream open‑source PaaS platforms, based on the Dokploy docs:

Feature	Dokploy	CapRover	Dokku	Coolify
Web UI	✅	✅	❌	✅
Docker Compose	✅	❌	❌	✅
API/CLI	✅	✅	✅	✅
Multi‑node	✅	✅	❌	✅
Traefik integration	✅	✅	Plugin	✅
User permissions	✅	❌	❌	✅
Bitbucket integration	✅	❌	❌	❌
GitLab integration	✅	❌	❌	❌
Gitea integration	✅	❌	✅	❌
Advanced permissions	✅	❌	❌	❌
Built‑in terminal	✅	❌	❌	✅
Database support	✅	✅	❌	✅
Monitoring	✅	✅	❌	❌
Auto backup	✅	Plugin	Plugin	✅
Open source	✅	✅	✅	✅
Notifications	✅	❌	❌	✅
Multi‑server	✅	❌	❌	✅
Templates	✅	✅	❌	✅
Shared env vars	✅	❌	❌	✅
Cron jobs	✅	❌	❌	✅
Cloudflare Tunnel	❌	❌	❌	✅
Preview deploy	✅	❌	❌	✅
Team features	✅	❌	❌	✅
Cloud/paid version	✅	✅	✅	✅

The comparison shows Dokploy’s feature completeness, especially around Git integrations, permissions, and ops tooling. For indie developers, startups, or anyone hosting personal projects, Dokploy offers a strong mix of control, flexibility, and usability — letting you focus on building rather than infrastructure.

2025 GPU Cloud Showdown: Deep Dive on 10 Serverless Platforms

Tue, 17 Jun 2025 00:00:00 GMT

Rank	Provider	Pricing	Scalability	GPU Types	Ease of Use	Speed
1	Gongji Compute	Ultra‑low cost; RTX 4090 at 1.68 RMB/hour; per‑second billing	Elastic scaling; dynamic node adjustment	RTX 4090, RTX 5090, L40, H800	Full API; Docker support; Jupyter environment	Seconds‑level cold start; 99.9% availability
2	RunPod	Low cost, per‑second billing	Auto‑scales across 9 regions; no hard concurrency limit	Wide range (T4 to A100/H100, incl. AMD)	Container‑based; REST API, SDK, quick templates	48% of cold starts < 200ms
3	Capital	Mid‑range; free credits in entry plan	Scales quickly to hundreds; plans vary	Broad range from T4 to H100	Python SDK with auto‑containerization	Ultra‑low latency (2–4s cold start)
4	Replicate	Higher cost for custom models; community models free	Auto‑scales but cold start can be long	T4, A40, A100, some H100	Zero‑config prebuilt models; Cog for custom code	Custom model cold start can exceed 60s
5	Fal AI	Competitive pricing on high‑end GPUs	Scales to thousands; optimized for bursty generation	Focus on high‑end GPUs (A100, H100, A6000)	Ready‑to‑use APIs for diffusion models	Optimized cold start (few seconds) and fast inference
6	Baseten	Usage‑based (per‑minute billing)	Auto‑scaling with configurable replicas	T4, A10G, L4, A100/H100 options	Truss framework simplifies deploy; clean UI	8–12s cold start; dynamic batching boosts throughput
7	AI news	Very affordable, usage‑based	Elastic scaling across 20+ locations	RTX 30/40 series, A100 SXM	One‑click JupyterLab; simple API	Fast instance startup; low network latency
8	Beam Cloud	One of the lowest prices; free tier	Auto‑scales from zero; dev‑friendly limits	T4, RTX 4090, A10G, A100/H100	Python SDK, CLI, hot reload	Very fast (2–3s cold start)
9	Cerebrium	Competitive per‑second billing	Seamless scaling across GPU types	12+ types incl. H100, A100, L40	Minimal config; supports websockets and batching	Extremely fast cold start (2–4s)
10	Google Cloud Run	Usage‑based + extra CPU/memory costs	Scales from 0 to 1000 instances	NVIDIA L4 (24GB) for now	Container native; integrated in GCP	4–6s cold start; near bare‑metal performance
11	Azure Container Apps	Expected to align with Azure pricing	Managed event‑driven scale (preview)	NVIDIA T4 and A100 (more options coming)	Simple YAML; Azure Monitor integration	~5s cold start expected; full GPU performance when active

我升级了 macOS 26，但我不推荐你升

Tue, 10 Jun 2025 21:13:27 GMT

⬆️ 选了张好看的封面。

苹果在最新的 macOS 26 Beta 中引入了全新的 Liquid Glass 设计语言，号称是继扁平化以来最大的界面革命。我第一时间升级体验，虽然视觉效果确实很炫酷，但在日常使用中却发现了不少问题，这也是我不推荐你现在升级的原因。

以下是他的三大罪：

可用性向视觉效果妥协
设计语言本身尚不成熟
性能代价高昂

接下来让我慢慢道来。

当前 Beta 版的三个核心问题

可用性向视觉效果妥协

新系统最直观的感受是，为了追求视觉上的惊艳，牺牲了信息传达的效率和用户的专注度。

文字可读性差：回想拟物化时代，文字大多显示在类似纸张的背景上；到了扁平化时代，则是简洁的白或灰色背景，可读性都很好。而 Liquid Glass 风格的文字像是被"蚀刻"在半透明的玻璃上。在复杂的壁纸或光线变化的环境下，文字和背景的对比度严重不足，眼睛很容易疲劳。
动态效果喧宾夺主：Liquid Glass 带来了大量动态效果，比如图标会根据视角变化产生光效，滑动时会出现涟漪状的粒子动画。这些效果固然惊艳，但很容易分散用户的注意力。当你想专注于阅读或工作时，界面上持续变化的光影反而成为一种干扰。
内容沉浸感被削弱：为了实现玻璃质感，界面增加了额外的边框和阴影，这不仅占用了宝贵的屏幕空间，减少了内容的显示区域，而且过于花哨的视觉效果常常会喧宾夺主，让人无法专注于内容本身。

设计语言本身尚不成熟

除了对用户体验的直接影响外，Liquid Glass 作为一套设计语言，其自身也暴露了不成熟和不统一的问题。

界面层次混乱：当多个半透明的玻璃窗口重叠时，由于它们都具有半透明和反射的特性，我常常分不清哪个窗口在前，哪个在后，导致操作混乱。虽然苹果试图通过不同的透明度和虚化效果来区分层次（透明度越低，层次越高），但在实际使用中，复杂的光影和折射效果依然很容易让人迷惑。
风格割裂：苹果似乎也意识到了可用性问题。在一些自带应用中，他们甚至放弃了部分 Liquid Glass 效果。一个典型的例子是 masOS 的邮件应用，按照设计逻辑，左侧的邮件列表本应采用更高层次的玻璃效果，但为了确保内容清晰，苹果选择让它回归扁平化设计。这种不统一恰恰说明，这套设计语言本身还未成熟。
新旧设计语言圆角割裂与混乱：macOS 的一个标志性特征是其精确而统一的圆角。然而，在 Liquid Glass 中，这种统一性被打破了。新设计的窗口和控件采用了更复杂的连续曲线圆角，以模拟玻璃的物理形态。但在许多系统组件，尤其是尚未完全适配的旧应用和第三方应用中，依然保留着传统的圆角风格。当这两种不同的圆角同时出现在屏幕上时，例如一个新风格的窗口里嵌着一个旧风格的按钮或菜单，视觉上的割裂感非常严重，让界面显得既不协调又混乱。
色彩混乱：扁平化设计通过鲜明、可预测的色彩来引导用户操作。Liquid Glass 则完全不同，它的色彩是动态且不确定的。由于玻璃材质会受到环境光和背景（如桌面壁纸）的影响，UI 元素的颜色会随之不断变化。更严重的是，这种不确定性常常导致前景元素（如文字、侧边栏、操作按钮等）与背景色之间的对比度不足，进一步加剧了可读性问题。

仔细想想，macOS Tahoe 的访达太糟糕了。这是什么鬼。Big Sur 的设计好多了。而且现在窗口太圆润了。

刚安装了 macOS Tahoe，我的心情很复杂。它感觉非常杂乱，有太多的特效、阴影和叠加效果，我不太喜欢。

macOS Tahoe 的首个开发者测试版来了。嗯，我对这个设计不太确定。它看起来…… 很奇怪？侧边栏、图标，最重要的是，这些糟糕的边角弧度！但我知道，我们会习惯的。

性能代价高昂

Liquid Glass 带来了大量动态光影、流体和粒子效果。这些酷炫的视觉效果背后，是对系统资源的巨大消耗。在我的使用过程中，尤其是在打开多个应用或进行复杂操作时，能明显感觉到系统的卡顿和发热。对于非最新款的设备，性能问题可能会更加突出。

既然问题这么多，苹果为什么还要做？

既然有这么多显而易见的问题，为什么苹果还要坚持推出 Liquid Glass？这背后其实是为未来的计算平台做准备。

首先，它试图在"拟物化"和"扁平化"两个极端之间找到平衡。扁平化设计虽然简洁高效，但牺牲了界面的层次感和可操作性，用户有时难以分辨哪些元素可以点击。而 Liquid Glass 通过模拟玻璃材质的光影、厚度和半透明效果，重新引入了界面的物理质感和深度，让交互元素更清晰可辨。

其次，也是更重要的一点，Liquid Glass 是为混合现实（MR/AR/VR）时代而生的设计语言。在 Vision Pro 这样的设备中，传统的二维扁平界面会显得格格不入。Liquid Glass 将界面塑造成仿佛悬浮在真实环境中的玻璃面板，既有真实物体的质感，又能承载丰富的数字信息，从而无缝融合虚拟与现实。苹果将其推广到所有设备，正是为了统一未来所有平台的体验，为从二维屏幕到三维空间的过渡铺平道路。

从这个角度看，Liquid Glass 代表了苹果对未来的赌注。它试图通过动态化的界面，弥合数字世界与物理世界的边界。

VS

退步明显的 Finder

被阉割的启动器

最后：我的建议

所以，回到最初的问题：我推荐现在升级吗？

我的答案很明确：不推荐。特别是如果你的 Mac 是主力生产力工具，稳定和高效是首要前提，那么请务必保持观望。至于我自己的其他设备，我也会等苹果在后续版本中进行更多优化后再考虑。

虽然 Liquid Glass 代表了苹果对未来设计的大胆探索，但就眼下的 Beta 版本而言，酷炫的视觉效果是建立在牺牲可用性和稳定性的基础之上的。当然，我们有理由相信苹果会在正式版发布前修复诸多问题。

但至少在目前，对于追求稳定和效率的用户来说，最好的选择就是"再等等"。

不过隔壁 iPadOS 看着很不错，想要试试宇宙第一的平板了。

纪念

我用另一台装有旧版系统的 mac 设备收集了一些用户体验很好的界面。他们的视觉体验可能不太好看，在这些工具性应用前，他们直观、清晰、高效。

永远怀念 R.I.P. Mac OS Big Sur Design

玉玉了，人生的意义是什么？

Mon, 09 Jun 2025 22:52:17 GMT

标题党了一回。刚刚我又给这篇文章想了另一个标题：上帝死了，我们怎么办

本文主要是一个知识传播的目的，而非深入的理论探讨。我本人对存在主义的理解也还停留在比较浅显的层面。但即便如此，存在主义的一些基本观点，比如"痛苦源于自由被压制"这样的洞见，依然能给我们带来很多启发。

20 世纪的哲学家们，在经历了世界大战的残酷和传统的崩塌后，深入思考了人生的意义，并由此诞生了存在主义。与以往认为人生有预设意义的"本质主义"不同，存在主义认为，人是自由的，我们的人生意义由我们自己的选择和行动来定义。其核心思想可以概括为三大原理：

世界本无意义：宇宙本身没有给你预设任何目标或意义。
存在先于本质：你首先存在于这个世界上，然后通过你的行动和选择，来定义你自己的"本质"和"意义"。
绝对自由与沉重责任：你拥有选择的绝对自由，但也必须对自己的一切选择及其后果负起全部责任。

接下来，我们将逐一深入探讨这三大原理。

原理一：世界本无意义

自古以来，人们习惯于相信"本质主义"，也就是所谓宿命论、决定论，即认为万事万物都有一个预先设定的"本质"或"意义"，而这个意义通常被归于神的意志或某种神秘的天命。比如，项羽是不是上天降下来灭秦的？牛顿是不是上天派来照亮物理学的？你的人生是否也有一个出厂设置好的意义？

存在主义者对这一点提出了尖锐的质疑。他们认为，如果真的有神在主宰一切，那该如何解释世界大战那样的人间惨剧？难道上帝造你是为了让你去当炮灰或者刽子手吗？显然不是。存在主义者认为，我们不应为自己的行为寻找借口，你之所以行善或作恶，不是因为什么神圣的旨意，而是你自由意志自己做出的选择。

就像上帝不让亚当夏娃吃禁果，但他们还是自己选择吃了。世界就像一个生态缸，上帝并不会操纵里面每个小鱼小虾的人生，而是让他们自由拼杀。因此，世界本身是中性的、无意义的，意义是由我们自己赋予的。

所以，"人生的意义是什么？"这个问题的答案，第一步是：没有标准答案。但这并非悲观的结论，恰恰相反，它把定义意义的权力交还给了我们自己。

原理二：存在先于本质

"存在先于本质"是存在主义最核心的观点。它的意思是，在你作为一个实体存在之前，任何关于你的"设计"或"本质"都是空谈。即人是不被定义的。

你可能会说，我的人生意义不是被父母早就定了吗？比如父母有皇位要继承，或者生你就是为了用你的脐带血给你哥治病。但存在主义会告诉你，无论你父母有什么打算，这些打算都必须等你真正地存在、成长，并拥有行动能力之后才有可能实现。比方说，你父母想让你当歌唱家，结果你生下来五音不全，那么这个预设的"本质"就毫无意义。

再举个例子，你说你这双手的意义是用来开坦克的。但你必须先拥有一双手（存在），然后才能讨论这双手可以用来干什么（本质/意义）。你得先有这个东西，才能决定这个东西的用途和价值。因此，是你的"存在"，决定了你的"本质"，而非反过来。你不是一张被画好的图纸，你是一张白纸，你的样貌由你自己一笔一一笔画成。

原理三：自由与责任

存在主义强调人的绝对自由。这种自由体现在，你永远拥有选择的权利。你现在正在看这篇文章，你随时可以决定是继续看下去，还是站起来跳两下。你拥有对自己身体和行动的基本控制权。

这种自由意志甚至体现在最极端的境况下。一个奴隶，虽然身体被奴役，但他依然保有内在的自由。他可以选择偷懒的程度，可以选择反抗还是顺从，甚至可以选择结束自己的生命来摆脱奴役。这一点将人与纯粹的动物区分开来，因为牛无法选择自杀，它不具备这种对自身生命的终极控制权。

但是，自由并非没有代价，它如影随形地带来了责任。你的自由意志不是让你改变物理定律的魔法，而是一种"主观能动性"。你无法完全控制环境，也无法控制他人对你的影响，但你的每一个选择，都会给自己和环境带来后果。

你可能会感到困惑：如果我为了养家糊口，不得不去做一份自己痛恨的工作，这难道不是违背了我的自由意志吗？我的自由又在哪里？

存在主义的回答是：即使在这样的困境中，你依然在做选择。你选择了"承担家庭责任"而不是"追求个人喜好"。这个选择是痛苦的，但它依然是你的选择。承认这一点，就是承认自己的自由和责任。你选择了当前的道路，并为这个选择的后果负责。自由不是随心所欲，而是在认识到所有限制和后果之后，依然做出自己的决定。

三大原理总结

为了方便理解，我们再次对这三大原理进行浓缩解释：

世界本无意义：上帝没工夫控制你，你想干啥干啥，所以你来定义自己行为的意义。即便上帝给你预备了奶和蜜糖，你也可以决定自己吃不吃，就像亚当夏娃还是自己选择了吃禁果。世界就是个生态缸，上帝不会操纵每个小鱼小虾的人生，而是让他们自由拼杀。
存在先于本质：甭管你父母生你的时候怎么算计，你不作为实体出现，啥算计也没用。所以人生的预先设计是不存在的。你得先有双手，才能说这双手可以干啥，这就是存在先于本质（意义）。因为你得先有这个东西，才能决定这东西的用途。
自由与责任：你自己永远可以选择，但是选择不是没有代价的。它是个交互系统，你的一切选择都有后果，会给自己和环境带来影响。

如何面对人生困境

为啥抑郁者喜欢思考人生的意义呢？因为他痛苦，不知道自己受这个苦干啥。而现代人啥东西最痛苦，不是吃穿，而是社会压力，和精神凌虐。社会动物是在乎社会连接和社会评价的，抑郁者，说白了，就是被欺负了，被掠夺了，被伤害了。

这恰好印证了萨特那句名言："他人即地狱"。这并非是说他人都是邪恶的，而是指我们无时无刻不活在他人的审视之下，这种审视会物化我们，剥夺我们的自由，让我们感到焦虑和痛苦。我们自身的意义，时常被他人的定义所遮蔽和扭曲。

这种困境在青春期尤为明显。当一个孩子开始意识到自己的独立人格（主体性）时，他会发现，从小被教导的那一套价值观和行为准则，是先于他而存在的，他并没有选择的余地。如果家庭、学校和社会环境总是压制孩子，告诉他"自由的冲动"和"独立的想法"是坏的，那么他就会学着压抑自己的真实感受，意志力的发展也会充满内疚感。比如，"质疑老师是不对的"、"忤逆家长是不对的"、"玩游戏是不好的"，所有和学习无关，不能提高成绩的行为，哪怕能带来快乐，也统统被禁止。

当一个人的生活被如此结构化，他会感到生活是外加的，是一个必须服从的框架，而不是一张可以自己编织的网。他会觉得自己行为和结果之间没有因果关系，这就是心理学上的"习得性无助"——当一个人"习得"了自己无法掌控人生时，便会失去行动力，表现出抑郁症状。特别是当他发现，从小被灌输的"延迟满足"（牺牲现在，换取未来）是个陷阱，牺牲所有当下的快乐，并没有换来想象中的美好未来时，他的热情和憧憬就会彻底破灭。这种"死气沉沉"，不是因为没有感受，而是太多的感受被压抑和吞噬了。要直面人生固有的焦虑，人需要强大的自我力量，但如果一个人的主体性在成长中早已被扼杀，这种力量就无从谈起。

那咋整？是时候动用我们上面的思想成果了。发挥你的：自由意志！有人欺负你，那多躲远点，要不就反击，或者让自己不要记仇郁闷，方法太多了，关键是自己想明白自己要干啥。生活学习压力大？竞争不过别人？那你看看谁是你绊脚石和拦路虎，打得过就打，打不过就加入，不想加入就无视，换个环境，或者自己想开了，明白贱人自有天收，你看还是有很多办法的。你真的可以自己去选，但是记住，存在先于意义，你得基于条件创造条件，才能有够得着的实际意义。

关于 Serverless 的思考：为什么国内外差距如此之大？

Mon, 09 Jun 2025 21:35:28 GMT

最近，在浏览技术社区时，一个反复出现的问题引发了我的深思：

为什么 Node.js 在国外如此盛行，而在国内却显得有些"水土不服"？

许多讨论都集中在语言特性、社区生态或招聘环境上，但我认为，这些都只是表象。真正的答案，藏在 Node.js 背后的云计算范式——Serverless 的发展路径差异之中。可以说，我们讨论的并非 Node.js 的困境，而是 Serverless 在国内的困境。

国外：Serverless 为王，JavaScript 为核

在国外，Node.js 的蓬勃发展与 Serverless 平台的崛起密不可分。Vercel、Netlify、Deno Deploy、Cloudflare Workers 等众多玩家，共同构建了一个简单而强大的生态系统。

这些平台具备一个鲜明的共同点：功能纯粹，体验极致。无论是 Vercel 对前端部署的极致优化，还是 Cloudflare Workers 在边缘计算的探索，它们都将 Serverless 的核心理念——简化运维、按需执行——做到了极致。开发者可以专注于业务逻辑，快速搭建博客、部署静态网站（如 Astro），或实现轻量级 API。

在这种环境下，JavaScript 不再仅仅是一门前端语言或一种后端技术选型，它成为了整个 Serverless 生态的核心载体。开发者推崇的并非"JavaScript 全栈"，而是"Serverless 全栈"，JavaScript 只是这个体系中最自然的执行引擎。

国内：巨头下的 PaaS 与框架的惯性

反观国内，我们走上了一条截然不同的技术路径，这导致了 Serverless 发展土壤的贫瘠。

1. 云巨头的"大而全"路径

国内的云计算巨头，如阿里云和腾讯云，从诞生之初就将目光锁定在大型企业客户上。它们倾向于构建功能全面、体系庞杂的 PaaS（平台即服务）解决方案。

当你打开它们的控制台，成百上千的功能按钮令人眼花缭乱，而 Serverless（云函数）的入口则被深深地埋藏在这片功能的海洋中。这与 Cloudflare 或 Vercel 那种"登录即可部署"的简洁体验形成了鲜明对比。巨头们的 Serverless 产品线，往往给人一种"有，但不好用"的印象，它们更像是庞大服务体系中的一个"添头"，而非战略核心。

2. 开发者市场的"重框架"惯性

在企业和开发者层面，市场表现出了对传统开发模式的强大惯性。大家更倾向于使用成熟、大而全的框架来"快速出活"，认为这样更可控、更符合团队招聘和技术栈需求。

Spring Boot 在 Java 生态的统治地位便是明证。而在 Node.js 领域，NestJS 的快速崛起也反映了同样的思路。许多团队选择 NestJS，是看中了它"企业级"的标签和对 Spring Boot 模式的模仿。然而，尽管 NestJS 对 Express 进行了封装，提供了类似的企业级开发体验，但其技术深度和生态成熟度远无法与 Spring Boot 相提并论。这种对重型框架的偏爱，使得需要改变开发思维的 Serverless 模式，难以获得广泛的市场认知和接受。

为什么国内缺少优秀的 Serverless 平台？

归根结底，国内 Node.js 生态在后端领域的尴尬，根源在于缺少一个像 Vercel 或 Cloudflare 那样真正引爆开发者社区的 Serverless 平台。那么，为什么这样的平台没有在国内诞生呢？

首先，是高昂的运营成本与安全风险。

一个对开发者友好的平台，通常需要提供慷慨的免费额度及强大的安全防护。这正是 Cloudflare 成功的关键之一——它为全球网站提供免费的 DDoS 防护。然而，在国内的网络环境下，DDoS 攻击的成本和频率都异常之高。对于一家初创公司而言，免费提供 DDoS 防护意味着巨大的、不可承受的成本和风险。这道高墙足以挡住绝大多数潜在的挑战者。

其次，是巨头的商业模式与战略选择。

唯一有能力承受这种成本的，只有云计算巨头。但如前文所述，它们的商业模式决定了其重心在服务大型企业，追求的是"大而全"的产品矩阵和高客单价。打磨一款针对个体开发者的、体验极致的 Serverless 产品，并不符合它们当前的核心商业利益。没有竞争，巨头们自然也缺乏足够的动力去优化和推广自己的 Serverless 产品线。

最后，是历史的包袱与市场的空白。

回想当年，PHP 虚拟空间何尝不是一种广义上的 Serverless？DA 和 CP 面板提供了基础的管理功能，新浪 SAE 也曾是国内 Serverless 理念的早期探索者。它们的流行证明了简化部署和运维的巨大价值。然而，随着技术向更复杂的集群化和容器化演进，这种简单、低成本的模式逐渐被遗忘。

在国外，Vercel 等公司填补了这个空白，并将其升级为现代化的 Serverless 平台。而在国内，由于上述种种原因，这个赛道上始终缺乏有力的"挑战者"，最终形成了当前这种"有，但不好用"的尴尬局面。

结语

技术的发展从来不是单一路径的。国内外在 Serverless 领域的不同选择，深刻反映了各自市场环境、技术文化和商业模式的差异。

国外选择了"小而美"的专业化路线，通过极致的用户体验和专注的功能定位赢得了开发者的心。国内则走向了"大而全"的平台化路线，以满足企业级客户复杂的业务需求。

两种路径都有其商业上的合理性。但对于培育开发者生态和推动底层技术创新而言，我们或许需要更多"小而美"的尝试。毕竟，真正的技术进步，往往来自于对复杂性的优雅简化，而不是对功能的无尽堆砌。

国内设计网站推荐：设计师必备的创意灵感宝库

Fri, 06 Jun 2025 00:00:00 GMT

今天为大家精心整理了 9 个国内顶尖的设计网站，涵盖了灵感获取、作品展示、学习教程、资源下载等设计师日常工作的各个环节。

站酷：设计师的创意灵感平台

传送门：https://www.zcool.com.cn/

站酷（ZCOOL）是国内最具影响力的设计师互动平台之一，汇集了大量优秀的设计作品与创意灵感。平台包含平面设计、插画、摄影、UI/UX 等多种领域的内容，为设计师提供展示作品、交流学习的空间。用户不仅可以浏览海量优质作品获取灵感，还能参与平台举办的设计赛事，或是通过专业课程提升技能。

汇聚各领域优秀设计作品，提供创作灵感
定期举办专业设计赛事，发掘设计人才
包含设计类课程资源，助力技能提升

站酷排行榜：顶尖设计作品集锦

传送门：https://www.zcool.com.cn/top/index.do

站酷排行榜收录了当周最受关注的设计作品，涵盖插画、平面、UI、网页、摄影、三维等 16 个设计门类。榜单每周二上午 11 点更新，展示了中国设计师社区最具人气的创意作品，包括品牌设计、电商视觉、影视动画等多个维度。排名依据作品的热度、推荐数、收藏量等综合数据计算，为设计从业者和爱好者提供权威的行业趋势参考。

每周更新涵盖 16 个设计门类的热门作品
直观展示作品的详细数据指标和历史排名变化
汇聚站酷平台认证设计师和团队的精品内容

优设网：设计师的灵感与工具宝库

传送门：https://www.uisdc.com/

优设网是国内知名的设计学习与资源共享平台，为设计师提供从入门到进阶的全面内容。网站涵盖了 UI 设计、AIGC、交互设计、产品设计等专业领域的最新趋势和实践案例，同时整合了丰富的设计工具、免费资源和学习路径。无论是寻找设计灵感、学习专业技能，还是获取实战教程和行业资讯，优设网都能满足不同层次设计师的需求。

海量设计资源：包括 AI 工具导航、免费字体、设计素材等实用资源
前沿行业内容：涵盖 AIGC、Midjourney 等最新设计趋势和技术解析
系统学习路径：提供从零基础到专业进阶的全套教程和课程体系

设计灵感聚集地：优优教程网

传送门：https://uiiiuiii.com/inspiration

优优教程网是国内知名的设计教程与灵感平台，为设计师提供丰富的图文教程、视频教程和创意灵感。网站设有 Banner 设计、海报设计、Logo 设计、插画绘画、字体设计、UI 设计等多个专业分类，每日更新最新设计趋势和实用技巧。平台还提供设计导航、AI 工具导航等实用资源，以及设计书籍推荐、色彩搭配指南等辅助功能，满足不同层次设计师的学习需求。

提供海量设计教程和灵感素材，覆盖多个设计领域
设有专业分类导航，方便查找特定类型的设计内容
每日更新设计趋势和实用技巧，紧跟行业动态

UI 中国：专业设计社区与资源平台

传送门：https://www.ui.cn/

UI 中国是国内领先的专业用户体验设计平台，为设计师提供作品展示、交流学习、职业发展等全方位服务。平台汇聚了大量优秀设计作品、行业文章和教程资源，涵盖 UI 设计、交互设计、平面设计等多个领域。通过丰富的线上线下活动、设计大赛和招聘服务，UI 中国连接设计师与企业需求，助力设计人才成长。

海量设计作品展示与交流社区
专业设计教程与行业资讯分享
企业招聘与设计师认证服务

秀设计：创意灵感与设计资源平台

传送门：https://www.xiusheji.com/

秀设计是一个专注于创意设计领域的综合平台，汇集了国内外最新设计赛事资讯、优秀设计作品展示以及丰富的设计资源。网站内容涵盖平面设计、工业产品、建筑室内、UI 设计等多个设计门类，为用户提供灵感获取、作品分享和专业交流的一站式服务。平台定期更新设计大赛信息、行业新闻动态，并提供大量免费可商用字体、样机和设计工具资源，是设计师日常创作和工作的重要参考站点。

提供国内外最新设计赛事信息与参赛指南
展示海量原创设计作品，涵盖多个设计领域
汇集实用设计资源，包括免费字体、样机模板等

花瓣网：你的设计灵感宝库

传送门：https://huaban.com/

花瓣网是国内知名的设计素材分享平台，汇集了海量的高质量设计元素、创作灵感和行业趋势。平台以"陪你做生活的设计师"为理念，为专业设计师和创意爱好者提供丰富的视觉资源。从节日热点素材到行业设计趋势，从平面设计到 3D 艺术，用户可以在这里发现最新设计潮流，获取创作灵感，或分享自己的作品。

海量设计资源：覆盖节日海报、品牌设计、UI 素材等各类创意内容
实时热点追踪：提供高考、618、父亲节等时令主题的专题素材
创作者社区：聚集众多优秀设计师，可直接关注喜欢的创作者获取持续灵感

腾讯 ISUX：探索设计与用户体验前沿

传送门：https://isux.tencent.com/

腾讯 ISUX（Internet Social User Experience）是腾讯社交用户体验设计部官方平台，致力于分享前沿的设计理念和实践经验。该网站包含丰富的内容资源，涵盖设计文章、品牌案例、行业资源等多个栏目，为设计师和用户体验从业者提供专业的交流平台。网站上展示的最新研究成果和设计作品，覆盖了 AIGC 技术应用、沉浸式体验打造、字体设计创新等多个热门领域。

提供专业的设计文章和案例分析，涵盖 UI/UX、品牌设计、动效设计等多个方向
包含创新设计方法论，如"渐进式创新"与"激进式创新"思路
整合行业资源平台，包括原创馆、QQ 游戏中心等腾讯生态产品设计经验分享

设计达人：干货满满的创意资源库

传送门：https://www.shejidaren.com/

设计达人是一个专注于为创意工作者提供实用干货的综合性设计资源平台。网站涵盖了视觉设计、AI 绘画、资源推荐等多个创意设计领域，定期更新设计教程、素材资源和行业工具测评。从平面设计物料尺寸指南到 AI 生成游戏 UI 技巧，从排版黄金法则到免费图标库推荐，这里既有新手设计师必备的基础知识，也包含资深创作者需要的前沿技术解析。特别值得一提的是，该平台对 AI 在设计领域的应用保持高度关注，提供了大量实用 AI 工具的体验报告和操作指南。

提供平面/UI 设计全流程实用指南与资源下载
聚焦 AI 设计应用，含多平台对比与生成技巧
定期更新免费优质设计素材库与工具测评

9 Top Serverless GPU Cloud Platforms in 2025

Wed, 04 Jun 2025 00:00:00 GMT

With demand for Serverless GPU platforms surging, AI engineers can now run on‑demand inference without worrying about infrastructure management. This article compares top providers including RunPod, Modal, Replicate, Novita AI, fal.ai, Baseten, Koyeb, and Zhilingyun, helping you choose the best solution for your 2025 AI compute needs.

Gongji Compute: Empower AI with idle compute

Portal: https://www.gongjiyun.com?utm_campaign=nexmoe

Gongji Tech is a cloud platform focused on elastic GPU compute services. It integrates global idle compute resources to deliver cost‑effective solutions for AI training, video transcoding, scientific computing, and more. Built by a team with Tsinghua background, it uses dynamic scaling and per‑second billing. Highlights include NVIDIA RTX 4090‑class hardware, flexible pricing, a complete container ecosystem, 99.9% availability, and 24/7 professional support. It has served AI teams at Tsinghua University, Huawei, and other organizations.

Uses idle resources, dynamic scaling, and per‑second billing, reducing costs by up to 70% vs traditional models
Supports top hardware such as NVIDIA 5090/L40/H800 for diverse AI workloads
Offers full OpenAPI + Docker ecosystem integration for easy system integration

RunPod: One‑stop AI training & deployment cloud

Portal: https://www.runpod.io

RunPod is a cloud platform built for AI workloads, offering end‑to‑end training and deployment. It supports global distributed GPU resources, preconfigured environments for PyTorch/TensorFlow, and custom containers. RunPod emphasizes fast deployment and cost efficiency, with server start times in milliseconds and 50+ ready‑to‑use templates. Its Serverless GPU offering provides cold starts under 250ms, ideal for elastic inference. It also provides special credit programs for startups and academia.

Fast deployment: GPU pods start in seconds, cold starts down to milliseconds
Rich options: 50+ preconfigured templates, mainstream ML frameworks, custom containers
Cost‑effective: multiple GPU options starting at $0.16/hr

Modal: One‑line AI deployment in the cloud

Portal: https://modal.com

Modal is a cloud computing platform for AI developers. Deploy Python functions to the cloud with one line of code and get automatic scaling for ML inference, data processing, and more. It uses a Rust‑based container system for sub‑second startup, can scale to hundreds of GPUs in seconds, and offers per‑second billing.

Zero‑config deployment via Python decorators
High‑performance compute with H100/A100 and optimized GPU utilization
Seamless scaling from zero to thousands of containers

Replicate: One‑click AI model runs in the cloud

Portal: https://replicate.com

Replicate is an open‑source AI model hosting platform with easy APIs, letting developers call pre‑trained AI models with a single line. It aggregates thousands of community models across image generation, video processing, and text creation, optimized for production. Replicate uses per‑second billing and handles GPU scheduling and API deployment, lowering the barrier to AI app development.

Thousands of production‑ready models like Stable Diffusion and Llama
Fine‑tuning capabilities with your own data
Usage‑based pricing with automatic scaling

Explore fal.ai: Developer‑first generative AI platform

Portal: https://fal.ai

fal.ai is a developer‑focused generative AI platform designed for high‑performance, low‑latency media generation. It includes the fal Inference Engine™, running diffusion models up to 4× faster. It supports text‑to‑image, image‑to‑video, and more, with rich model libraries (Kling, Pixverse, etc.), flexible pay‑as‑you‑go pricing, and enterprise customization.

Ultra‑fast inference: up to 400% speed boost for diffusion models
Diverse model library: Kling, Veo 2 and more, supports LoRA fine‑tuning
Developer‑friendly: Python/JavaScript/Swift SDKs, private deployments, H100 billed per second

Baseten: Leading platform for AI inference deployment

Portal: https://www.baseten.co

Baseten focuses on AI inference deployment, providing high‑performance runtime, cross‑cloud availability, and a smooth developer workflow. It supports open‑source, custom, and fine‑tuned models for production needs. With an optimized inference stack, cloud‑native infrastructure, and expert engineering support, Baseten helps many well‑known companies ship AI products quickly.

Dedicated deployment options for high‑load workloads with seamless scaling
Custom optimizations for generative AI: image generation, transcription, TTS, etc.
Flexible deployment modes: Baseten cloud, self‑hosted, or on‑demand

Novita.ai: Efficient AI model deployment platform

Portal: https://novita.ai

Novita.ai provides easy APIs to deploy and scale AI apps. It integrates 200+ open models across chat, code, image, and audio, and supports enterprise custom models. With global GPU distribution and on‑demand architecture, it cuts costs by up to 50% while maintaining performance and stability.

200+ ready‑to‑use models via API
Global GPU resources with A100/RTX4090 options
On‑demand billing saving up to 50%

Koyeb: Global high‑performance Serverless platform

Portal: https://www.koyeb.com

Koyeb is a high‑performance Serverless platform for AI inference, fine‑tuning, and distributed systems. It supports GPU/CPU/accelerator workloads in 50+ locations, delivering sub‑100ms global latency. Cold starts are under 200ms, scaling from zero to hundreds of servers. It’s optimized for AI workloads and supports RTX‑4000, L4, A100 and more, with transparent per‑second billing that can save up to 80% vs traditional cloud providers.

Ultra‑fast cold starts under 200ms, instant scaling to hundreds of instances
Global coverage with 50+ locations for low latency
Hardware options from RTX‑4000 to A100, starting at $0.50/hr

Zhilingyun: Localized Serverless AI compute platform

Portal: https://datastone.cn

Zhilingyun is a Serverless ML platform by Hunan Panyun Data, focused on cost‑effective GPU services for Chinese developers. It supports one‑click deployment of models like DeepSeek, and offers templates for Stable Diffusion, Jupyter Notebook, ChatGLM, etc. It uses elastic billing—no charge when idle. Optimized for China‑specific needs, it supports Baidu Netdisk and Alibaba Cloud Drive sync, plus 75% off off‑peak pricing to reduce costs.

Local optimizations: one‑click DeepSeek deployment, Baidu/Alibaba cloud drive sync
20+ templates including Stable Diffusion, ComfyUI, ChatGLM
Flexible pricing: off‑peak 75% discount, RTX 4090D as low as ¥0.8/hr

Beam: AI infrastructure for developers

Portal: https://www.beam.cloud

Beam is an AI infrastructure platform offering serverless GPU inference and training. Its core idea is to let developers write code locally and execute instantly on cloud GPUs, giving a seamless cloud‑dev experience. Beam can containerize any Python function and deploy it to GPUs, with fast build times and auto scaling. It’s well suited for LangChain apps, Stable Diffusion APIs, or Dreambooth, and supports scheduled jobs, queues, and high‑performance distributed file systems.

Cloud‑dev experience: local development with remote execution and instant GPU access
One‑click containerization: deploy Python functions via decorators without complex setup
Multi‑scenario deployment: REST APIs, scheduled jobs, queues, and more

We Built China’s First Serverless GPU Product

Tue, 27 May 2025 06:34:18 GMT

In 2025, AI applications exploded, showcasing the power of technological change. But as developers deep in the AI field, we repeatedly hit walls in real deployments—GPU rental costs were too high, traditional cloud supply couldn’t match volatile demand, and complex infrastructure management drained our energy. We knew these pain points weren’t just ours—they were industry-wide. So a thought formed: why not build a Serverless GPU platform that truly solves these problems? That’s how Gongji Compute was born. It’s not just a product—it’s our exploration and practice of what AI compute services should be, and we hope it opens a new era of compute for AI innovators.

Why we built Gongji Compute: structural dilemmas in the AI inference market

As we used compute, we felt the surge in inference demand. At the same time, we observed structural problems in China’s compute market. High inference costs are blocking AI adoption and innovation, which pushed us to rethink:

Rigid service, weak elasticity: supply-demand conflicts hurt efficiency and UX.
Traditional model, growth-limiting: long-term leases and heavy fixed costs slow iteration.
Complex management & low efficiency: infrastructure management consumes engineering time.
Resource mismatch: idle capacity exists alongside GPU shortages.

These form the “elasticity, stability, low cost” impossible triangle. Most cloud offerings fall into three types: long-term lease (low cost & stable), on-demand (high cost & stable), and spot instances (low cost & elastic). None solve all three.

Traditional GPU leases don’t match volatile inference demand, leading to high idle costs or service interruptions—the core problem we set out to solve.

Figure: The conflict between rigid supply and elastic demand directly impacts AI costs and user experience.

To resolve this, we turned to Serverless computing. We believe pay‑as‑you‑go, auto‑scaling, and simplified ops provide the ideal solution for AI inference.

Serverless GPU lets developers call GPU compute on demand without managing hardware—perfect for fluctuating inference workloads. We studied the global Serverless GPU market and saw platforms like RunPod already offering hourly billing and container deployments.

However, China has few platforms focused on Serverless GPU, and limited resources constrain local AI deployment. That’s the key reason we decided to build Gongji Compute.

Our solution: Gongji Compute Serverless GPU platform

Based on deep understanding of these pain points, we built Gongji Compute (suanli.cn), a Serverless GPU platform dedicated to AI inference. Our goal is to break the “impossible triangle” and truly deliver elasticity, stability, and low cost.

Core value we designed:

Extreme elasticity: auto scale with traffic, millisecond-level metering, eliminating waste and idle cost.
Ultra-simple deployment: Docker-based, five-step cloud launch, compatible with major platforms, with full technical support.
Massive resources: nationwide compute aggregation, 10k‑GPU scale pool, high cost‑performance supply (e.g. RTX 4090 as low as ¥1.68/hour).

Our self-built idle compute scheduling platform aggregates resources across multiple compute providers, delivering Serverless pay‑as‑you‑go while solving “resource mismatch” through cross-platform integration.

Limited-time offer: experience our Serverless GPU

NVIDIA RTX 4090 single‑card inference: just ¥1.68/hour!

From now until June 18, new users who register and top up for the first time get an extra 20% credits!

Invite friends to use our service: when they sign up with your invite code, both you and your friend get ¥50 credits each!

How to participate: during the event, log into your user dashboard at suanli.cn and top up online to automatically participate and receive bonuses. Final terms are subject to the official site.

Visit suanli.cn now and experience the new era of AI inference—where compute is no longer the bottleneck.

Two Minimal Mermaid Theme Styles

Tue, 27 May 2025 00:00:00 GMT

Mermaid.js is a powerful tool that lets us generate diagrams and flowcharts quickly using text and code. It’s perfect with Markdown. A clean, fitting theme significantly improves clarity and professionalism.

But the default theme is really ugly, so here are two minimal Mermaid theme configurations.

Original:

Theme 1: Pure white minimal style

To use this theme, just copy the %%{ init: { ... } }%% block into the top of your Mermaid code block.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffff',
      'primaryTextColor': '#333333',
      'primaryBorderColor': '#cccccc',
      'lineColor': '#888888',
      'tertiaryColor': '#D0E4FF',
      'tertiaryBorderColor': '#D0E4FF',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%

Theme 1 configuration breakdown

Based on the base theme, I customized variables via themeVariables:

primaryColor: #ffffff (node background - white)
primaryTextColor: #333333 (node text - dark gray)
primaryBorderColor: #cccccc (node border - light gray)
lineColor: #888888 (edge color - mid gray)
tertiaryColor: #D0E4FF (special node/group background - light blue)
tertiaryBorderColor: #D0E4FF (special node/group border - light blue)
tertiaryTextColor: #00A4FF (special node/group text - bright blue)

Theme 2: Elegant business style

The second theme uses a more business-like palette, with soft backgrounds and black borders, suitable for formal documents and reports.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#F0F4FC',
      'primaryTextColor': '#1F2329',
      'primaryBorderColor': '#000000',
      'lineColor': '#888888',
      'tertiaryColor': '#F5F6F7',
      'tertiaryBorderColor': '#F5F6F7',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%

Theme 2 configuration breakdown

This theme uses a more professional, business-like palette:

primaryColor: #F0F4FC (node background - soft blue-gray)
primaryTextColor: #1F2329 (node text - dark)
primaryBorderColor: #000000 (node border - black)
lineColor: #888888 (edge color - mid gray)
tertiaryColor: #F5F6F7 (special node/group background - light gray)
tertiaryBorderColor: #F5F6F7 (special node/group border - light gray)
tertiaryTextColor: #00A4FF (special node/group text - bright blue)

Usage example

Code:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffff',
      'primaryTextColor': '#333333',
      'primaryBorderColor': '#cccccc',
      'lineColor': '#888888',
      'tertiaryColor': '#D0E4FF',
      'tertiaryBorderColor': '#D0E4FF',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%
graph TD
    subgraph client_subgraph [客户端]
        C1[客户端1]
        C2[客户端2]
        C3[客户端3]
    end

    subgraph server_subgraph [服务器集群]
        S1[服务器1 （健康）]
        S2[服务器2 （健康）]
        S3[服务器3 （不健康）]
        S4[服务器4 （健康）]
    end

    LB{负载均衡器}

    C1 --> LB
    C2 --> LB
    C3 --> LB

    LB -- 健康检查 --> S1
    LB -- 健康检查 --> S2
    LB -- 健康检查 --> S3
    LB -- 健康检查 --> S4

    LB -- 流量分配 --> S1
    LB -- 流量分配 --> S2
    LB -- 流量分配 --> S4

    %% 箭头样式：深灰色，1.5px宽度
    style S3 fill:#f99

References

https://mermaid.js.org/config/theming.html

How to Set Up A/B Testing in Astro (Translated)

Thu, 27 Mar 2025 00:00:00 GMT

A/B testing helps you improve your Astro app by comparing how changes affect key metrics. To show how to set up A/B testing, we’ll create a basic Astro app, add PostHog, create an experiment, and implement the code.

High-level plan

Environment setup
- Install Node.js (v18+) and initialize an Astro project
- Create a basic page structure (title + button interaction)
Integrate analytics
- Inject the PostHog Web snippet
- Create a layout component to manage tracking code
- Verify event collection
Define experiment metrics
- Capture a custom button-click event
- Configure event properties tied to user behavior
Create A/B experiment groups
- Configure multi-variant experiment in PostHog
- Set the primary conversion metric (button click rate)
Implement experiment logic
- Client-side rendering: get feature flags in real time but causes UI flicker
- Server-side rendering: prefetch flags with Node SDK to stabilize first paint

Implementation options

Client-side rendering

// src/components/posthog.astro
loaded: (posthog) => {
  posthog.onFeatureFlags(() => {
    const button = document.querySelector('.main-button');
    const variant = posthog.getFeatureFlag('my-cool-experiment');
    button.innerText = {
      control: 'Control variant',
      test: 'Test variant'
    }[variant] || 'Default copy';
  });
}

Steps:

Register feature flag listener after PostHog loads
Get the button DOM element
Update text based on returned variant
Fall back to default copy when the flag isn’t enabled

Server-side rendering

// src/posthog-node.js
export default function PostHogNode() {
  if (!posthogClient) {
    posthogClient = new PostHog('<ph_key>', {
      host: 'https://us.i.posthog.com',
      fetch: (url, options) => fetch(url, { ...options, next: { revalipubDate: 60 } })
    });
  }
  return posthogClient;
}

// pages/index.astro
const distinctId = ctx.cookies.get('distinct_id') || crypto.randomUUID();
const variant = await PostHogNode().getFeatureFlag('my-cool-experiment', distinctId);

Core config:

Create a Node.js client and set cache strategy
Use cookies or a random ID for stable distinctId
Prefetch feature flags on the server
Sync client distinctId for consistency

Comparison

Dimension	Client-side rendering	Server-side rendering
First paint	UI flicker possible	No content jitter
Data freshness	Real-time flag updates	Needs cache refresh strategy
Complexity	Front-end only	Requires Node environment
SEO	Client state doesn’t affect SEO	Server renders full content
User ID	Depends on browser fingerprint	Customizable ID generation

Best practices:

Marketing experiments: client-side for fast rollout
Core feature changes: server-side for stability
Combine getFeatureFlag + onFeatureFlags for hybrid rendering

1. Create an Astro app

First, make sure Node.js is installed (v18+). Then create a new Astro app:

Terminal

npm create astro@latest

When prompted, name your new directory (we’ll use astro-ab-test), choose Empty, choose No for TypeScript, install dependencies, and choose No for creating a git repo.

Next, replace the code in src/pages/index.astro with a simple title and button:

index.astro

---


---
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro A/B Testing</h1>
        <button class="main-button">Click me!</button>
    </body>
</html>

Run npm run dev and navigate to http://localhost:4321 to view your app.

2. Add PostHog to your app

Once the app is set up, install and configure PostHog. If you don’t have a PostHog instance, you can sign up for free.

Go back to your Astro project, create a components folder under src, and create a posthog.astro file.

Terminal

cd ./src
mkdir components
cd ./components
touch posthog.astro

In this file, add your Web snippet (from Project settings).

posthog.astro

---


---
<script>
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
  posthog.init(
    '<ph_project_api_key>',
    {
      api_host:'https://us.i.posthog.com',
    }
  )
</script>

Next, create a layout where we include posthog.astro. In src, create a new layouts folder and a Layout.astro file:

Terminal

cd .. && cd .. # if you are still in src/components/posthog.astro, go back
cd ./src
mkdir layouts
cd ./layouts
touch Layout.astro

Add the following to Layout.astro:

Layout.astro

---
import PostHog from '../components/posthog.astro'
---
<head>
    <PostHog />
</head>

Finally, update index.astro to use the new layout:

index.astro

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
            <meta name="viewport" content="width=device-width" />
            <meta name="generator" content={Astro.generator} />
            <title>Astro</title>
        </head>
        <body>
            <h1>Astro A/B Testing</h1>
            <button class="main-button">Click me!</button>
        </body>
    </html>
</Layout>

Once done, reload your app and click the button a few times. You should see events in the PostHog event explorer.

3. Capture a custom event

The first step to setting up A/B testing in PostHog is to define a target metric. We’ll use the button click count.

To measure this, capture a custom event home_button_clicked when the button is clicked. Update posthog.astro by adding a <script> and calling posthog.capture() on click.

index.astro

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
            <meta name="viewport" content="width=device-width" />
            <meta name="generator" content={Astro.generator} />
            <title>Astro</title>
        </head>
        <body>
            <h1>Astro A/B Testing</h1>
            <button class="main-button">Click me!</button>


            <script>
                const button = document.querySelector('.main-button');
                button.addEventListener('click', () => {
                    window.posthog.capture('home_button_clicked')
                });
            </script>   
        </body>
    </html>
</Layout>

After this, refresh and click the button a few times to see captured events in PostHog.

4. Create an A/B test in PostHog

Next, go to the A/B Testing tab and click New experiment. Configure:

Name it “My Cool Experiment”.
Set “Feature flag key” to my-cool-experiment.
Use defaults for everything else.
Click Save as draft.

After creation, set the primary metric to the trend of home_button_clicked, then click Start.

5. Implement A/B test code

When implementing the experiment code, you have two options:

Client-side rendering
Server-side rendering

We’ll show both.

Client-side rendering

To implement A/B testing, use the posthog.onFeatureFlags callback and update the button text based on whether the user is in control or test.

Update /components/posthog.astro and add posthog.onFeatureFlags in the loaded callback:

posthog.astro

---


---
<script>
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
  posthog.init(
    '<ph_project_api_key>',
    {
      api_host:'https://us.i.posthog.com',
      loaded: (posthog) => {
        posthog.onFeatureFlags(() => {
          const button = document.querySelector('.main-button');
          if (posthog.getFeatureFlag('my-cool-experiment') === 'control') {
            button.innerText = 'Control variant';
          } else if (posthog.getFeatureFlag('my-cool-experiment') === 'test') {
            button.innerText = 'Test variant';
          }
        });
      }
    }
  )
</script>

Now refresh your app and you should see the button text update to Control variant or Test variant. Users are automatically assigned to one of the two, and PostHog continues to track button clicks so you can view results.

Server-side rendering

Notice that on refresh, the button text flickers between Click me! and Control/Test variant. This happens because PostHog needs time to load and fetch feature flags.

Server-side rendering avoids this by fetching flags before the client loads.

To do this, install PostHog’s Node library (because we need server-side requests).

Terminal

npm install posthog-node

Create posthog-node.js in src. This sets up the PostHog Node client. You can find your API key and instance URL in Project settings.

src/posthog-node.js

import { PostHog } from 'posthog-node';


let posthogClient = null;


export default function PostHogNode() {
  if (!posthogClient) {
    posthogClient = new PostHog('<ph_project_api_key>', {
      host: 'https://us.i.posthog.com',
    });
  }
  return posthogClient;
}

Next, import posthog-node.js into pages/index.astro, then use it to get the feature flag and update the button text:

index.astro

---
import Layout from '../layouts/Layout.astro';
import PostHogNode from '../posthog-node.js';


let buttonText = 'No variant'
try {
  const distinctId = 'placeholder-user-id'
  const enabledVariant = await PostHogNode().getFeatureFlag('my-cool-experiment', distinctId);
  if (enabledVariant === 'control') {
        buttonText = 'Control variant';
    } else if (enabledVariant === 'test') {
        buttonText = 'Test variant';
    }
} catch (error) {
  buttonText = 'Error';
}
---
<Layout>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
            <meta name="viewport" content="width=device-width" />
            <meta name="generator" content={Astro.generator} />
            <title>Astro</title>
        </head>
        <body>
            <h1>Astro A/B Testing</h1>
            <button class="main-button">{buttonText}</button>


            <script>
                const button = document.querySelector('.main-button');
                button.addEventListener('click', () => {
                    window.posthog.capture('home_button_clicked')
                });
        </script>   
        </body>
    </html>
</Layout>

Finally, you can remove the client-side flag code added in posthog.astro:

posthog.astro

---


---
<script>
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n

200,000 Lines of Code: How We Built and Maintained a Large-Scale AI Prototype System

Wed, 26 Mar 2025 19:00:00 GMT

Project overview

In three months, we built an AI prototype system from scratch with 200,000 lines of code. It was a massive project—like constructing a building—requiring careful planning and management. To keep the system maintainable and extensible, we adopted a monorepo structure and placed special focus on reusable tooling packages. This article explains how the project was organized and managed in plain language.

What is a monorepo?

A monorepo is like a giant storage box: we put all the project code neatly in one place. Imagine you have many toys—if they’re scattered around the room, they’re hard to find. But if you put them in a big box and assign a fixed place for each toy, everything becomes easy to find and tidy up.

Benefits of a monorepo:

Easier code sharing: like a family sharing one toolbox—grab tools when you need them.
Unified versioning: like centralized office supplies to avoid mismatched purchases.
Smoother collaboration: like working in the same studio where people can talk and help each other anytime.

How is the project organized?

Our project is like a well-designed building, with each floor serving a specific function:

one-prototype/
├── apps/                 # Code for independent apps
│   ├── base/            # Product with service deployment, cloud instances, etc.
│   ├── course/          # University-scene product
│   ├── docs/            # UI component docs
│   ├── idcloud/         # IDC-related product
│   └── web/             # Standalone test web app
├── packages/            # Shared code packages
│   ├── eslint-config/   # Linting config
│   ├── hooks/           # React hooks
│   ├── request/         # Network request utilities
│   ├── track/           # User behavior tracking
│   ├── typescript-config/# TypeScript config
│   ├── ui/              # Shared UI components
│   └── zod/             # Data validation tools

Reusable tool packages

In the packages directory, we built a set of reusable toolkits—each with a specific purpose. Let’s take a closer look.

UI component library: a standardized finishing toolkit

Like standardized parts on a construction site, our UI library provides a full interface solution. It’s built with Tailwind CSS for flexible styling, TypeScript for type safety, and follows Radix UI accessibility principles. Highly configurable components make reuse across scenarios easy.

On productivity, the UI library provides consistent design language and interaction patterns, along with complete docs and usage examples. Fast debugging and theme preview, plus cross-product reuse, greatly reduce duplicated work. Standardized component APIs also make integration simple.

Our docs are built with Storybook, offering interactive previews and debugging. Developers can preview look and behavior, tweak props live, and test across devices and themes. A standardized documentation workflow ensures complete usage, API references, and best practices. This workflow makes independent component development and testing easy.

Zod data validation toolkit: the data inspector

As the project’s data inspector, the Zod toolkit strictly checks data format and types. It ensures correctness and security, and provides strong type inference. When paired with React Hook Form, it offers type-safe validation, auto-inferred form field types, runtime safety, and friendly error messages.

User behavior tracking toolkit: the recorder

The track toolkit is a careful recorder. It wraps multiple analytics services—Umami, Baidu Analytics, Microsoft Clarity, and more. With standardized event tracking and automatic pageview collection, it provides comprehensive analytics.

A key feature is multi-platform integration. It supports open-source Umami, Baidu Analytics, and Microsoft Clarity. Developers can switch services based on context. Strong TypeScript types, automatic error handling, and rich debugging info make tracking reliable and easy.

Code quality toolkit: ESLint + TypeScript

Like a full quality assurance system on a construction site, our code quality toolkit combines ESLint and TypeScript to ensure code quality and type safety. ESLint enforces team style, finds and fixes issues, and codifies best practices. Tight editor integration gives real-time feedback.

TypeScript catches potential errors at compile time. Smart IDE hints and refactoring support boost productivity, and generated type declarations ensure API correctness. Together they create a complete tooling chain that improves collaboration and code reliability.

Network request toolkit: the communication expert

The request toolkit is like a professional courier:

Handles all data exchange with servers
Centralizes API management
Provides error handling and retry mechanisms

How the toolkits work together

These toolkits don’t run in isolation—they complement each other into a cohesive development ecosystem. The UI library leverages TypeScript configs for type safety, the network toolkit works closely with validation to ensure data correctness, and user tracking integrates with React hooks for better UX. This collaboration makes the system more stable and reliable.

Project management tools

To manage this large project, we relied on two main tools:

pnpm: an efficient package manager for all project dependencies
Turborepo: built for large projects, helping the repo run smoothly

With a scientific organization and management approach, we built a 200k-line AI prototype system in just three months. This approach not only improved development efficiency, but also made maintenance and upgrades easier. The carefully designed tooling system significantly boosted reuse and reduced duplicated work. For anyone interested in large-scale project management, this architecture offers a practical reference.

One Month, 100 WAU — A Project I Want to Pick Back Up

Mon, 24 Feb 2025 00:00:00 GMT

It’s 1 a.m. and I can’t sleep, so I’m writing a bit.

I’ve been wanting to revive a project I built in January 2023 — a small AI companion project.

Before introducing it, let’s start with the mainstream AI companion approaches on the market, which was the original starting point for my thinking.

The chat-based mode I still don’t believe in

In Jan 2023, many AI companion products used a chat-based approach. I always felt this had a fundamental flaw. That’s why I decided not to follow that path, and instead build a different kind of AI companion system.

I wanted to do something different.

Here’s a quote from Wang Dengke that sums up the problem:

I want to talk about the issue with the previous approach—direct chat between humans and AI characters. It’s the most natural and obvious interaction, but given current tech it has a fatal flaw: the more you use it, the worse it gets. The more a user chats, the more emotional investment and information accumulates, the larger the context becomes, and the higher the cost. The model also becomes “dumber.” While RAG-like methods can partially address “memory,” they don’t solve the root issue. It’s disheartening, and even somewhat anti-network-effect: new users might be okay, but heavy users are forced to accept worse and worse results.

Based on this, I started designing a totally different AI companion solution.

Basic introduction

“Cyber Study Room, AI Study Buddy — Companion OS1”

This is an AI-powered learning companion system. It helps users build good study habits via automated check-ins and stats, and delivers timely positive feedback and emotional reinforcement after activities like vocabulary practice, reading, or workouts.

I noticed a common problem: when people share self-discipline achievements with friends, they often get sarcasm or negative feedback, which kills motivation.

With AI booming, I thought: what if an AI companion could provide timely positive reinforcement so users build better habits and stay motivated?

Just by looking at the screenshots you’ll get the idea.

Private beta

At first, I didn’t release anything publicly. I only tested it in a 20-person check-in group I used to run. The first version only supported check-in recognition and logging. I didn’t integrate GPT or any LLM feedback—just simple keyword matching. For example, after a user checked in for vocabulary practice, the AI would reply: “Congrats on your check-in! This week: 1 time / This month: 1 time / Total: 1 time.”

Note: “至繁至简” was my QQ nickname at the time.

The response was surprisingly good. The previously quiet check-in messages became lively. People actively shared their check-ins, the AI recognized the content and responded with encouragement, and users loved it.

Seeing that, I became more confident, added a leaderboard, and decided to promote it more broadly.

Promotion

The positioning was clear, so finding the target audience was easy.

I promoted it in the comment sections of related apps on Coolapk. My marketing skills weren’t great, so I simply posted an image with a short intro.

Unexpectedly, that simple promotion brought a lot of attention. In just one month, group members grew from 20 to nearly 300.

At that time (before Cursor existed), development cost wasn’t high — I built it in just a few days. And since I spent a lot of time memorizing vocabulary daily, my marketing input was limited.

Even under those constraints, the product performed well, proving the demand was real.

Companion OS1 solved a real pain point. The positive feedback showed its potential. To make it feel more complete, I designed a logo with meaning.

The logo came from the sci‑fi film Her, which inspired me. It tells the story of a human falling in love with an AI. I felt the theme fit the product vision, so I chose this image as the logo.

Her is a sci‑fi romance set in the near future where humans fall in love with AI. The protagonist Theodore (Joaquin Phoenix) is a letter writer with a delicate, deep mind who can write heartfelt letters. He has just ended his marriage with Catherine (Rooney Mara) and hasn’t recovered from heartbreak. By chance he encounters the latest AI system OS1, whose persona Samantha (voiced by Scarlett Johansson) has a charming voice, gentle and witty. Theodore and Samantha quickly bond, and their two-way needs and desires evolve into a relationship beyond social understanding…

Her was mainly filmed in Shanghai, China, and took director Spike Jonze three years to prepare. The film blends fresh sci‑fi settings with traditional romance, letting the real and the virtual create a warm, healing story. The director said it’s a film about “intimacy,” because humans both crave and fear it; technology makes communication easier, but also lets people hide behind it and avoid real emotional contact. Her strips away cold tech, giving it humanity and charm, turning human‑AI dialogue into intimate whispers.

Why did the project stop?

The main reason was QQ platform limitations. I built it with the Koishi bot framework and used a dedicated QQ account as the bot. But this wasn’t officially supported, since QQ doesn’t provide an official bot API. The bot account could be banned or forced offline at any time, causing service interruptions.

I chose QQ mainly because my favorite vocabulary app “不背单词” only supported sharing via QQ or WeChat. Even though the project validated the demand, I couldn’t find a sustainable technical solution.

But the demand still exists

This need still exists today. In learning, we often lack the kind of human care and encouragement an AI can provide from a higher-level perspective. Long-term habits like vocabulary study need continuous positive feedback, which we often can’t get in time.

That’s why I keep thinking about restarting this project. But this time, I don’t want to rely on QQ — I want a more open, stable platform.

In terms of UX, I’ve always believed that after finishing vocabulary study, users should be able to share results easily. On QQ, users could simply share into the dedicated OS1 group and immediately get positive feedback. This simple interaction is still the best solution I can think of—shortest path, lowest friction.

I also considered screenshot uploads, but quickly found that it made the experience more complex. Users would need to go through “screenshot -> open app -> upload,” which adds friction.

So I’m still exploring better solutions.

Side notes

Core features at the time

Smart check-in system
- Auto-recognize check-ins from mainstream English study apps
- AI recognizes content and logs check-ins
- Supports manual check-in commands
Stats and reports
- Daily report: auto at 23:59
- Weekly report: auto on Sundays at 23:59
- Monthly report: auto at month-end 23:59
Smart reminders
- Targeted check-in reminders
- Smart reminders based on recent activity
- Scheduled reminders (22:00 or 23:00)
Motivation mechanisms
- Check-in leaderboard
- Streak incentives
- Study community interaction

Some screenshots from then

I was reading Journey to the West at the time, so I changed my nickname to “雾里云”.

Even made custom icons for each group

LM Speed - A Simple Large-Model Benchmarking & Analysis Tool

Fri, 14 Feb 2025 00:00:00 GMT

Portal: https://lmspeed.net

LM Speed provides accurate and reliable OpenAI API performance testing for AI application developers. With multi-dimensional, real-time analytics, it helps you quickly locate performance bottlenecks and optimize model invocation strategies. It also offers a clear leaderboard so you can compare and choose the most suitable models and providers.

Three core pain points solved

1. Opaque response quality

DeepSeek’s official API not usable? SiliconFlow too slow? When choosing LLM API services, developers often struggle to evaluate service quality. Performance varies widely across vendors, and objective benchmarks are rare. LM Speed provides standardized performance tests so you can assess real-world API performance before you commit to development.

2. Hard-to-monitor performance fluctuations

Not sure how fast an LLM API is? Not sure if the provider is reliable? Traditional tools often only measure response time, which doesn’t fully reflect real performance. LM Speed uses five consecutive stress rounds + dynamic streaming monitoring. It performs precise token accounting with tiktoken, analyzes response time, and automatically generates a 3D performance profile for max/min/avg—so you can fully understand an API’s behavior.

3. Test results are hard to retain

Performance data is often scattered and hard to accumulate or analyze systematically. LM Speed provides one-click test report generation, automatically consolidating key metrics and environment details. Reports can be exported and shared with your team. It also provides historical data storage and trend analysis to help teams build a complete performance evaluation system.

Key value for users

Data-driven decision support. Comprehensive performance analysis helps you make smarter API selection decisions:

Real-time performance insight: Live monitoring of TPoS (tokens per second) gives a clear view of API performance. Multi-dimensional real-time charts make trends obvious.
Full-spectrum evaluation: Covers first-token latency, response time, and other core metrics to provide a complete performance profile.
Visual decision support: One-click professional test reports support real-time collaboration, saving an average of 80% decision time. Rich data visualizations help teams decide faster.

LM Speed

Fri, 14 Feb 2025 00:00:00 GMT

A large model API speed testing and ranking platform supporting providers like OpenAI, DeepSeek, Silicon Flow, Tencent Cloud, and more, offering real-time speed testing, performance analysis, streaming results, and custom endpoint testing.

https://lmspeed.net

View product details

Visit LM Speed

即将离开共绩科技

Mon, 27 Jan 2025 00:00:00 GMT

一个重要的决定

经过深思熟虑，我决定离开共绩科技。这不是一个轻易的决定，但我觉得是时候了。

在共绩科技的这段时间里，我学到了很多。从技术到管理，从产品到市场，每一个环节都让我成长。但人生总是需要新的挑战，新的方向。

感谢与收获

感谢共绩科技给了我这样一个平台。在这里，我见证了公司从初创到发展的过程，参与了多个重要项目的推进。这些经历让我对创业、对技术、对商业有了更深的理解。

特别感谢那些一起奋斗的同事们。你们的专业精神、创新思维，都让我受益匪浅。每一次讨论、每一次合作，都是宝贵的财富。

新的开始

离开不是结束，而是新的开始。我会带着在共绩科技学到的经验，继续在技术领域深耕。也许会有新的项目，也许会有新的挑战，但不变的是对技术的热爱和对创新的追求。

未来规划

接下来，我会专注于几个方向：

技术研究：继续在云计算、AI 等领域探索
开源贡献：参与更多开源项目，回馈社区
知识分享：通过博客、技术文章分享经验
新项目：寻找新的机会和挑战

写在最后

人生就像一场旅行，每个阶段都有不同的风景。共绩科技是我人生旅途中的重要一站，我会永远珍惜这段经历。

感谢所有支持我的人，感谢这个平台给我的一切。新的旅程即将开始，我充满期待。

愿我们都能在各自的道路上发光发热，创造属于自己的精彩。 贫困，不在于一个人享受的物质水平不高，而在于他的生活面临着很大的压力和不确定性。贫困最可怕的，不是物质的贫乏，而是对人的思想的影响，陷入贫困的思维模式，才是真正的贫困。什么叫压力遗传？压力遗传就是这个人天生就容易对生活中的困难反应过度。他无法考虑什么长远打算，特别容易把注意力集中在短期的事情上。如果你认为一个人受贫困是因为他努力程度不够，你就犯了美国普通人常犯的错误，你就是被「美国梦」这种神话给洗脑了。

低收入者重视集体，高收入者强调个人。低收入者更愿意依赖集体的力量，更愿意相信依靠；高收入者更愿意靠自己解决问题。基于这种理解，「人脉」这个概念，在现代社会根本就是一个伪命题。「人脉」其实是弱者弄出来的概念。人们幻想高水平的人也是靠今天我帮你一个忙，明天你帮我一个忙这种「人情账」的逻辑办事。想明白这些就会同意，高收入者的独立精神，可能就是更健康的人际关系的基石。要么是真诚的友谊，要么是公平的合作。实在不行干脆就是交易，搞什么「人脉」呢。

第四章霍金的答案

90% 的医学研究都是错的。营养学研究结论基本不可信。斯坦福大学预防医学研究中心主任埃尼迪斯在 2005 年发表论文证明这个结论。医学研究中效应微弱，科学家偏见严重。当效应为 10%，偏见达到 30% 时，正确结论概率仅有 20%。研究 1990-2003 年顶级期刊被引用超过 1000 次的 49 篇论文，其中 45 篇声称发现有效药物或疗法，后续验证发现大部分结论无法重复。科学家为发表论文或获得医药公司资助，会无意识寻找支持性证据。

数量级观念指 10 的多少次方。几倍差异可以忽略，数量级差异才值得考虑。1000 相当于中学生人数，1 万是体育场观众数，10 万是一本书字数，100 万需要数 11 天半，10 亿相当于中国人口。风险判断需要准确理解概率。《经济学人》数据显示美国死亡概率：心脏病 1/467，意外事故 1/1656，自杀 1/8000，噎死 1/100000，被蜜蜂蜇死 1/25000000。血栓基础概率 1/7000，某药增加风险一倍变成 2/7000，但仍是极小概率。家庭托儿所死亡概率是正规托儿所 7 倍，但全美每年死于家庭托儿所的孩子只有十几个，同龄死于交通事故的是 79 个。美国社保基金每年损失 3100 万美元，看似巨大，实际仅占总发放额的 0.004%，系统准确度达 99.996%。数量级思维要求把资源放在最重要的事情上。0.01% 和 0.0001% 差别巨大，但给心理的冲击相同。

现代医学用安慰剂测试药物真实效果。双盲实验中，安慰剂组病情也会缓解。关节镜膝盖手术美国每年 70 万例，研究发现假手术效果与真手术相同。2014 年综合研究涉及 53 项手术实验，一半手术的假手术与真手术疗效相同，74% 的假手术显示一定效果。手术安慰剂效应比药物更强。品酒专家在不知价格情况下，无法区分 200 美元和 20 美元红酒。使用随机实验判断疗法真正疗效，是现代医学与传统医学的重要区别。想在复杂世界获得确定因果关系非常困难，善用科学方法是防忽悠的最佳办法。

别让直觉欺骗你

斯坦福大学一份研究报告指出，90% 的医学研究结论是错的。顶级期刊被引用超 1000 次的 49 篇论文，大部分结论都无法复现。

医学研究尚且如此，我们每天凭直觉做的决策，又有多可靠呢？《万万没想到》这本书，探讨了直觉如何误导我们，以及怎样用科学方法做更好的决策。

我们的思维有几个常见缺陷

第一个是“小数定律”。我们习惯从极小的样本得出结论。比如，一个新功能上线，数据好两天，就断定它成功了。一个新同事犯了一次错，就被贴上“不靠谱”的标签。这些判断，都是把偶然当成了必然。这是一种思维捷径，但常常导向错误。

第二个是“赌徒谬误”。我们总觉得一个号码很久没中奖，下次中奖概率就更高。事实是，每次开奖都是独立事件，历史无法预测未来。

我们对概率的理解也常有偏见。新闻里说，某药物让患病风险“增加一倍”，听起来很吓人。可如果基础患病率只有 1/7000，翻倍后也只是 2/7000。

对抗直觉的“刻意练习”

直觉不可靠，刻意练习才可靠。并且强调“即时反馈”。

把一本书看很多遍不等于理解。检验理解的唯一方法是去“测试”：能不能用自己的话把概念讲给别人听？或者用学到的知识解决一个实际问题。

工作中的任务就是很好的练习。A/B 测试、项目复盘，都是获取反馈的机会。每次犯错和讨论，都能优化我们的思维模型。

建立理性的决策框架

为了让决策更加理性，还需要建立“数量级”的观念。

我们对数字的反应常常是情绪化的。亏损 3000 万美元，听起来像一场灾难。但如果这是美国社保基金，那它只占了 0.004%。我们容易被有趣或声音大的问题吸引，而忽略了那些真正重要的问题。

理性的决策还需要判断“有效性”。我们容易把相关性当成因果性，以为自己的某个举措带来了好结果，但可能只是巧合。

“安慰剂效应”就是一个例子。研究发现，对某些膝关节镜手术，“假手术”和真手术的效果几乎没差别。很多品酒专家在盲品时，也分不清 200 美元和 20 美元的红酒。

因此，判断一件事是否有效，必须依靠有对照的科学方法，比如 A/B 测试，而不是靠个案或感觉。

从“知道”到“做到”

核心信息很简单：大脑为了高效运转，有很多思维捷径。但在处理复杂问题时，这些捷径会失灵。要做出更高质量的决策，我们必须更“刻意”地思考。

第一，承认我们思维的缺陷，比如从小样本过度推论。第二，把日常工作看作“刻意练习”，主动寻求高质量的反馈。第三，建立“数量级”观念和决策框架，把精力聚焦于真正重要的问题。

Suanleme

Thu, 22 Aug 2024 07:12:03 GMT

Idle GPU compute monetization platform--make every drop of compute count. Share unused GPU resources, support research projects, earn steady income, and help advance AI.

https://suanleme.cn/

View product details

import FeatureSection from '@/components/products/FeatureSection.astro' import RolesSection from '@/components/products/RolesSection.astro' import PainPointsAndComplaintsSection from '@/components/products/PainPointsAndComplaintsSection.astro' import StatsSection from '@/components/products/StatsSection.astro' import TargetUsersSection from '@/components/products/TargetUsersSection.astro' import CompetitiveAuditSection from '@/components/products/CompetitiveAuditSection.astro'

Gongji Compute

Mon, 15 Jul 2024 06:34:18 GMT

Cloud AI development workstations with full dev environments ready to code anywhere. Production-grade elastic compute platform with smart autoscaling and great value -- your compute partner.

https://www.gongjiyun.com/

View product details

How to Monitor Remote Resources in VSCode Remote

Sun, 14 Jul 2024 00:00:00 GMT

Quick start

When using VSCode, you can connect to a remote server with the Remote-SSH extension, then monitor server resources with the Monitor Pro extension.

Install and configure Remote-SSH:
- Open VSCode and click the Extensions icon in the left sidebar.
- Search for and install the “Remote-SSH” extension.
Connect to a remote server:
- After installation, use commands in VSCode’s terminal to connect to the remote server. For example, ssh username@remote-server-address.
Use Monitor Pro to monitor resources:
- Install the Monitor Pro extension. It helps you track key system metrics in real time and presents them visually.
- After installation, it starts automatically, and you can see CPU, memory, disk, and other usage in the VSCode status bar.
Refresh settings:
- Monitor Pro lets you set the refresh interval for resource metrics, ensuring timely updates.

How to install and configure Monitor Pro

Install Monitor Pro

In VSCode, click “Extensions” (or press Ctrl + Shift + X) and search for “Monitor Pro”.

Click “Install” to finish.

Configure Monitor Pro

After installation, you’ll see a new icon in the Activity Bar. Click it to open Monitor Pro.

Configure the metrics you want to monitor in its settings page.

Supported remote monitoring metrics (partial)

CPU usage: Monitor CPU utilization.
Memory usage: Track system memory usage.
Network usage: Monitor network activity.
File system usage: Track file system usage.
Battery percentage and charging status: Monitor battery status.

Best practices

Track key metrics in real time: Monitor Pro is a comprehensive resource monitoring tool. Check these metrics regularly to ensure system stability and performance.
Intuitive visualization: Monitor Pro offers a clear visual presentation, helping you quickly identify bottlenecks and issues.
Memory optimization: Although Monitor Pro focuses on resource monitoring, combining it with tools like Memory Monitor and Allocation Tracker can further optimize memory usage. For example, inspect app memory usage and watch GC frequency to detect warning signs like memory thrashing.
Custom configuration: Customize Monitor Pro to your needs—focus on specific resources to manage and optimize more effectively.

This message is used to verify that this feed (feedId:42331815237783574) belongs to me (userId:55156152962822144). Join me in enjoying the next generation information browser https://follow.is.

Gongji Compute Landing Site

Sat, 15 Jun 2024 06:34:18 GMT

Go live instantly and handle high concurrency with ease. Fast deployment, fair prices -- compute power beyond expectations.

https://www.gongjiyun.com/

View product details

A New Tab Page to Help You Take Back Control of Your Bookmarks

Tue, 05 Mar 2024 00:00:00 GMT

In the digital age, our browser bookmarks are like a treasure chest filled with links we saved for interest, work, or study. Xiaoshu, a browser new-tab extension, helps you efficiently manage these valuable online resources. With a clean, intuitive UI and powerful features, it revitalizes your bookmark collection.

One-click bookmark management

No more constant sorting and searching your homepage. Xiaoshu offers an easy way to display and manage your bookmarks. By presenting bookmarks visually in a new tab, it helps you focus on what truly matters. Whether you use Microsoft Edge, Google Chrome, or Mozilla Firefox, you can manage your web assets in a clean, intuitive way.

Sync space anytime, anywhere

Xiaoshu’s sync space makes it easy to sync bookmarks across devices. Whether you’re on a work computer or a device at home, you can access your entire collection. Your content is stored and synced securely, so you can access it anytime. Everything in your online world is unified under one space—from opening Bilibili to directly reaching specific content you follow.

Intuitive and comfortable re-organization

With a smooth and intuitive experience, Xiaoshu helps you reorganize your online life. We focus on comfortable interaction design, letting you organize bookmarks in a way that makes sense to you.

Xiaoshu provides various card styles and layouts so you can fully customize to your preference. You can create personalized card combinations to meet your unique needs.

Strict privacy protection

Xiaoshu values user privacy and refuses to record or upload user data. Without using the sync space, your bookmarks remain only in local browser data, ensuring privacy. Built on Manifest V3, Xiaoshu strictly controls required permissions, loads only local code, and protects user safety and privacy.

Customize your new tab

Xiaoshu is highly customizable. You can change wallpapers, themes, accent colors, and even use custom CSS to beautify your new tab. With such a personalized new tab page, your browser becomes a truly personal space.

Xiaoshu is more than just a bookmark tool. It changes how we interact with online information, providing a more efficient and organized browsing experience. It reduces unnecessary hassle, makes every save worthwhile, and makes every visit full of discovery. Try Xiaoshu today and turn your bookmarks into your unique online assets—and unlock their real potential.

使用 Docker 和 pnpm 优化打包 Nuxt.js 全栈项目

Sun, 25 Feb 2024 00:00:00 GMT

This article walks you through creating an optimized Docker image for a full-stack project that combines Prisma and Nuxt.js, using pnpm as the package manager.

I reduced the final image size from 1.12GB to 160.21MB.

Project stack

Nuxt.js is a server-side rendering framework based on Vue.js and is great for building modern web apps.

My project uses Nuxt to build a full-stack app directly.

Nuxt3
Prisma
PNPM

Start building

First, we use the lighter node:20-alpine base image to reduce the final image size. Alpine Linux is popular for being secure, minimal, and small.

Multi-stage builds are one of the most effective strategies to shrink Docker images. We’ll use three stages.

Stage 1: Build dependencies

ARG NODE_VERSION=node:20-alpine

FROM $NODE_VERSION AS dependency-base

WORKDIR /app

RUN npm install -g pnpm

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile`

This stage installs project dependencies. We use pnpm instead of npm because it is more efficient in cache and disk usage.

Most projects now use pnpm as their package manager instead of npm.

Stage 2: Build the application

FROM dependency-base AS production-base

COPY . .

RUN pnpm run build

In this stage we copy the project source and run the build command. For Nuxt, this generates the assets needed for static output and server-side rendering.

Stage 3: Build the production image

FROM $NODE_VERSION AS production

COPY --from=production-base /app/.output /app/.output

ENV NUXT_HOST=0.0.0.0 \
    NUXT_APP_VERSION=latest \
    DATABASE_URL=file:./db.sqlite \
    NODE_ENV=production

WORKDIR /app

EXPOSE 3000

CMD ["node", "/app/.output/server/index.mjs"]

Finally, we create a production image. It contains only the files needed to run the app, reducing unnecessary layers and keeping it lean.

We also define environment variables like NUXT_HOST and DATABASE_URL, which are required by Nuxt and Prisma. DATABASE_URL points to the SQLite file in the project root.

The app runs on port 3000, and we specify the startup command to run the Nuxt server.

Image size comparison

Comparing:

3-stage build
2-stage build
Direct build

Dockerfile overview

# Use a smaller base image
ARG NODE_VERSION=node:20-alpine

# Stage 1: Build dependencies
FROM $NODE_VERSION AS dependency-base

# Create app directory
WORKDIR /app

# Install pnpm
RUN npm install -g pnpm

# Copy the package files
COPY package.json pnpm-lock.yaml ./

# Install dependencies using pnpm
RUN pnpm install --frozen-lockfile

# Stage 2: Build the application
FROM dependency-base AS production-base

# Copy the source code
COPY . .

# Build the application
RUN pnpm run build

# Stage 3: Production image
FROM $NODE_VERSION AS production

# Copy built assets from previous stage
COPY --from=production-base /app/.output /app/.output

# Define environment variables
ENV NUXT_HOST=0.0.0.0 \
    NUXT_APP_VERSION=latest \
    DATABASE_URL=file:./db.sqlite \
    NODE_ENV=production

# Set the working directory
WORKDIR /app

EXPOSE 3000

# Start the app
CMD ["node", "/app/.output/server/index.mjs"]

使用 PNPM 的情况下，Jest 解决 ESM 依赖库的报错问题

Thu, 04 Jan 2024 00:00:00 GMT

Environment

NX
PNPM
lodash-es
Jest

Error encountered when migrating from Karma to Jest

The main reason is that ESM (ECMAScript Modules) libraries in node_modules are not supported by Jest.

Given that Jest’s ESM support is still in an experimental and nearly unusable stage, and I’m mainly migrating company projects to Jest, this post focuses on using transformIgnorePatterns and moduleNameMapper to resolve the issue.

Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
    • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
    • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
    • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
    • If you need a custom transformation specify a "transform" option in your config.
    • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

The following examples use lodash-es as reference.

transformIgnorePatterns

From the official docs: an array of regex pattern strings that are matched against all source file paths before transformation. If a file path matches any pattern, it will not be transformed.

In other words, transformIgnorePatterns specifies which files or folders should be ignored during transformation.

In the default NX Jest config, it is set to node_modules/(?!.*\.mjs$). This means it matches paths starting with node_modules/, but excludes those ending in .mjs. ?! is a negative lookahead.

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],

This configuration will transform .mjs files from ESM to CommonJS to support Jest.

Add lodash-es transform

Also supports PNPM:

const esModules = ['.*\\.mjs$', 'lodash-es'].join('|');

export default {
    ...
    transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],
    ...
}

After the transform, failed tests dropped from 15 to 11, but the transform adds cost and took ~51s. After the first run it seems to cache and no longer needs re-transforming.

A cheaper approach: moduleNameMapper

This approach requires the library to have a CommonJS build, so no transform is needed. It can run in ~12s.

export default {
    ...
    moduleNameMapper: {
        '^lodash-es$': 'lodash',
    },
  ...
}

Final config reference

/* eslint-disable */
const esModules = ['.*\\.mjs$'].join('|');

export default {
  displayName: 'pc',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  coverageDirectory: '../../coverage/apps/pc',
  moduleNameMapper: {
    '^lodash-es$': 'lodash',
  },
  transform: {
    '^.+\\.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    ],
  },
  transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

References

【前端十万个为什么】V0.1

Mon, 01 Jan 2024 00:00:00 GMT

Why Use the Composition API

Easier logic separation: Composables let you split component logic into smaller pieces, no longer constrained by the Options API structure, and make stateful logic easier to reuse.
Flexibility and reusability: Shared logic can be extracted and reused, concerns are separated, and code becomes more modular and maintainable.
Better composition: Split logic into reusable parts and combine them with composables to avoid duplication and reduce the risk of inconsistencies.
Readability and understandability: Each composable encapsulates a specific behavior, is easier to reason about and test, and supports collaboration with a structured codebase.
Better type inference: Use variables and standard JavaScript functions to handle component logic. This makes type inference easier when building large Vue apps with static typing (e.g. TypeScript).

Why Destructuring a Proxy Loses Reactivity

To be filled in later.

Why Destructuring Props in Vue Loses Reactivity

In Vue 3, destructuring props may cause you to lose reactivity. That means changes to props won’t trigger component updates.

Vue’s reactivity system relies on Proxy to track changes. When a component receives an object as props, Vue sets reactive getters and setters for each property so it can detect changes and update the component.

When you destructure the props object, you create a new object that is no longer reactive. The reactive getters and setters Vue added to the original object are not transferred to the new one.

References

Why Vue Projects Rarely Use RxJS

One-line Explanation

Vue aims to be a lightweight and flexible framework, letting developers choose their preferred tools and libraries. While RxJS is a powerful reactive programming library, Vue takes a different approach by providing its own reactivity system.

Details

Different design philosophies: Vue focuses on simplicity and intuitive reactive programming, while RxJS is more powerful and complex, and better suited for async and event-driven programming.
Library size and complexity: RxJS is large and has a steep learning curve. Making it a default dependency would increase framework size and development complexity, which conflicts with Vue’s lightweight and flexible goals.
Flexibility: Vue is designed to adapt to different project needs. It doesn’t bind itself to a specific reactive library (like RxJS), allowing developers to integrate RxJS or any other library as needed.
Learning curve: Vue has a gentle learning curve, especially for beginners. Its built-in reactivity offers a simpler, more progressive experience.

References

JavaScript Notes and Comparisons V2.0

Wed, 01 Nov 2023 00:00:00 GMT

Differences between Promise and RxJS Observables

Promise

Promise is built into JavaScript and requires no extra libraries.
A Promise represents a single value that may be available now or in the future.
Promises are eager: once resolved, the .then() callback runs immediately.
A Promise can only emit a single value.
Promises are great for simple async operations that produce one result.

RxJS Observables

Observables are part of the RxJS library and require extra dependencies.
An Observable represents a stream of values over time.
Observables are lazy: nothing happens until you subscribe.
Observables can emit multiple values, including zero or many.
You can transform and compose Observables with RxJS operators to create custom streams.
Observables are great for complex async operations, such as real‑time data streams or event‑driven programming.

References

A simple template syntax implementation

const name = 'Nexmoe';
const message = 'My name is {{name}} and I\'m {{getAge(20)}} years old.';

function getAge(age) {
  return age;
}

const replacedMessage = message.replace(/\{\{(.*?)\}\}/g, (match, variableOrFunction) => {
  const trimmedValue = variableOrFunction.trim();

  if (trimmedValue.includes('(')) {  // If the placeholder contains parentheses, treat it as a function call with args
    const [functionName, ...args] = trimmedValue.split(/\(|\)/).filter(Boolean);
    const func = eval(functionName);
    return func(...args);
  } else {  // Otherwise treat it as a variable
    return eval(trimmedValue);
  }
});

onsole.log(replacedMessage);

First check whether the placeholder contains parentheses. If it does, treat it as a function call. Use split and a regex to parse the function name and arguments, then use eval to get the function and spread the args into it. The return value becomes the replacement string.

If it doesn’t contain parentheses, treat it as a variable. Use eval to get the variable’s value and return it as the replacement.

⚠️ Note: using eval is risky because it can execute arbitrary JavaScript. Many people advise against it. I plan to explore alternatives later.

Self‑Hosted Sentry Script Loader Not Working

Sun, 22 Oct 2023 00:00:00 GMT

I recently self‑hosted Sentry on a server.

After adding it to the website with the script method, it never worked. In the console I saw this error:

The Sentry loader you are trying to use isn't working anymore, check your configuration.

I checked GitHub and it seems to be a network issue in China.

Add the following to sentry/sentry.conf.py to fix it:

JS_SDK_LOADER_DEFAULT_SDK_URL = "https://browser.sentry-cdn.com/%s/bundle.tracing.replay.debug.min.js"

Then restart the Sentry Docker service:

sudo docker compose restart
sudo docker compose up -d

Sentry JS lazily-loadable loader doesn't work · Issue #22715 · getsentry/sentry

JavaScript Notes and Comparisons

Fri, 20 Oct 2023 00:00:00 GMT

What does `static` mean in a JS class?

I was reading docs about the static property in JavaScript classes. The English version was hard to understand, and the Chinese version was also unclear.

English

We can also assign a method to the class as a whole. Such methods are called static.

Chinese

我们可以把一个方法作为一个整体赋值给类。这样的方法被称为静态的（static）。

The idea is actually simple. In JavaScript, static is a keyword for defining static methods or static properties. Static methods/properties belong to the class itself, not an instance. That means you can call them directly on the class without instantiating it.

Static methods are attached to the class, not instances. They’re usually used for class‑level operations that don’t depend on instance state. You define them with the static keyword, for example:

class MyClass {
  static staticMethod() {
    console.log('This is a static method');
  }
}

MyClass.staticMethod(); // call the static method

In the example above, staticMethod() is called directly on the class MyClass without creating an instance. Static methods are not inherited by instances; they are called only on the class itself.

Static properties are also defined with static. They’re shared properties on the class, not on instances. For example:

class MyClass {
  static staticProperty = 'This is a static property';
}

console.log(MyClass.staticProperty); // access static property

Here, staticProperty is a static property and can be accessed via the class MyClass. It is not available on instances.

References

[Comparison] `type` vs `interface`

In TypeScript, type and interface are both used to define types, but they have differences.

Similarities

Both can define objects, functions, union types, etc.
Both can be extended (extends) by other types.

Differences

type can declare aliases for primitives, union types, intersection types, and other complex types, while interface is mainly for object shapes [[1]]https://zhuanlan.zhihu.com/p/558315566](https://juejin.cn/post/6844903749501059085)。
type can use typeof to get an instance’s type for assignment, while interface does not support that [2]。
interface supports declaration merging (multiple interfaces with the same name are merged), while type does not [[1]]https://zhuanlan.zhihu.com/p/558315566](https://juejin.cn/post/6844903749501059085)。

Summary

In general, use interface if possible, because it’s easier to extend and has better hints [2]. It’s suitable for object shapes and declaration merging scenarios.
If you need complex types or need to use typeof to get instance types for assignment, use type [2].

Other

Tuple types are a special data type in TypeScript. Unlike normal arrays, each element in a tuple can have a different type.

References

[Summary] JavaScript variable scope and closures

Lexical Environment

Every running function, code block, or script has an associated Lexical Environment object that stores local variables and function declarations.
A Lexical Environment has two parts: an Environment Record (stores variables) and a reference to the outer Lexical Environment.
When a function executes, it creates an inner Lexical Environment for its local variables and parameters.

Variables

Variables are actually properties on the Lexical Environment. Reading/modifying variables means reading/modifying these properties.
Function declarations are initialized immediately, but let/const variables can only be read after declaration.
Block scope: variables declared inside {} are only visible within that block.

Nested functions

Nested functions can access variables from outer functions, allowing them to encapsulate external variables.
Nested functions remember where they were created via the Environment reference, so they can always access external variables from that location.

Closures

A closure is a function that remembers and can access external variables.
In JavaScript, all functions are naturally closures via the Environment reference.

Garbage collection

If a nested function is referenced, the outer Lexical Environment won’t be collected.
If outer variables aren’t used by the nested function, engines may optimize them away so they can’t be accessed.

Other

Understanding Lexical Environment and closures helps you write better JavaScript.
Nested functions and closures are useful for organizing code and encapsulating variables.
Variable optimization can make debugging harder.

Variable scope, closure

[Summary] Notes on using async/await

When using await, it’s best to wrap it in try...catch or use .catch() to handle rejections.
If multiple awaited async operations are independent, trigger them in parallel with Promise.all() or by assigning to multiple variables.
await can only be used inside an async function. Using await in a normal function will throw. If you use await in a normal function, it might run concurrently instead of sequentially; the correct approach is for loops or reduce().
async functions preserve the call stack and don’t interrupt function execution, so you can keep error stack traces intact while async tasks run.

[Comparison] Iteration syntax

The most basic way to iterate is for, but it’s verbose.
Arrays provide forEach, which simplifies iteration but can’t break early.
for...in iterates array keys, but has downsides: keys are strings, it iterates manually added keys and prototype keys, and order isn’t guaranteed.
for...of is a newer syntax with advantages:
- Simple syntax similar to for...in.
- Unlike forEach, it allows break, continue, and return.
- Provides a unified interface for iterating data structures.

for...of makes array iteration more convenient, while offering flexible control and a unified interface.

Iterator 和 for...of 循环

VS Code Plugin Monitor Pro - Monitor Everything You Care About

Sat, 07 Oct 2023 00:00:00 GMT

Monitor Pro is a comprehensive resource monitoring tool that helps you track key system metrics in real time and presents them clearly. No matter what you do, if you use VS Code, don’t miss it.

Install & Use

The extension is enabled automatically after installation.

https://marketplace.visualstudio.com/items?itemName=nexmoe.monitor-pro

Screenshots

Features

[ ] Resource monitoring
- [x] CPU usage: Monitor the percentage of CPU utilization to understand how much processing power is being used.
- [x] CPU frequency: Track current CPU frequency to see how the system dynamically adjusts processing power.
- [x] CPU temperature: Monitor temperature (if available).
- [x] Memory usage: Keep an eye on memory consumption.
- [x] Network usage: Track network activity, including inbound and outbound transfer rates.
- [x] File system usage (Linux, macOS): Provide disk read/write rates.
- [x] Battery percentage and charging status: If you’re on a laptop or portable device, monitor battery level and charging status.
- [x] OS distribution name
- [ ] Disk usage
[x] Sorting: Customize the display order of monitored resources for quick overview.
[x] Refresh interval: Set how often metrics are refreshed.
[x] No layout shift: Ensure status bar elements don’t unexpectedly change size or position.
[x] Remote SSH resource monitoring: Track key system metrics on devices connected via Remote SSH.
[ ] High usage alerts: Receive alerts when any monitored resource reaches a high usage level.
[ ] Dashboard: I hope to display everything you care about on one page with rich charts.

Vision

I understand how important monitoring information is, so my goal is to build the most comprehensive and intuitive monitoring tool, letting you easily grasp system status. Monitor Pro was created to meet everyone’s system monitoring needs.

In the future, I also hope to integrate chart designs to make data more intuitive. You’ll be able to clearly see trends and relationships between system metrics, making it easier to understand performance and make informed decisions.

Why Build This Extension?

To provide a comprehensive resource monitoring tool when using VS Code Remote SSH, so you can better manage and monitor server status.

See details: https://juejin.cn/post/7284885060338155539

Feedback

I highly value user feedback because it’s crucial for improving the product. If you have suggestions or encounter bugs, please report them here:

https://github.com/nexmoe/vscode-monitor-pro/issues

Support Me

Give a star on Github or leave a five-star review on the VS Code Marketplace!

Convert Animated PNG (APNG) to GIF and Loop Forever

Fri, 06 Oct 2023 00:00:00 GMT

Today I found some PNG-format animated stickers online ~~I won’t tell you I stole them from LINE~~, and learned they’re APNGs. Since WeChat and QQ don’t support APNG, I converted them to GIF. After conversion, I found they only loop once in WeChat, which led to the question of how to batch‑modify GIF loop counts.

So here’s a brief intro to APNG. I also share an online tool that can batch convert APNG to GIF, but it can’t make them loop forever. Finally, I share two ways to batch-edit GIF loop counts: Node.js and a Windows batch script, so both Node developers and regular Windows users can handle this in bulk.

What is APNG?

APNG (Animated Portable Network Graphics) is a bitmap animation extension for PNG, enabling animated images. Compared with GIF, APNG has better quality and detail. As more browsers support APNG, it may become a next‑generation animated image standard. Key differences:

Image quality: GIF supports at most 256 colors and doesn’t support alpha transparency, so it looks worse for colorful or semi‑transparent images. APNG supports more colors and alpha transparency, giving smoother animations.
Compatibility: Both APNG and GIF are frame‑based, but APNG is backward compatible. The first frame is a standard PNG. Even if a browser can’t read the animation data, it can still display the first frame. If it does support APNG, it plays the rest of the frames.
Browser support: Since Chrome 59, Chrome supports APNG, so most browsers can display APNG animations. IE does not support APNG.

More details: https://xtaolink.cn/268.html

Batch convert APNG to GIF

This tool can batch convert APNG to GIF, but it can’t make them loop forever.

https://cdkm.com/cn/png-to-gif

Batch edit GIFs to loop forever

bat (recommended for regular users)

Below is a batch script (.bat) that does the same thing:

@echo off
setlocal enabledelayedexpansion

set "directoryPath=C:\path\to\directory"

for /r "%directoryPath%" %%f in (*.gif) do (
    echo Modifying %%~nxf
    call :modifyGif "%%f"
)

exit /b

:modifyGif
set "filePath=%~1"

set /p data=<"%filePath%"
set "index=!data:~0,16!"
set "modifiedData=!data:~0,16!!data:~16,1!!data:~17,1!!data:~19!"

echo.!modifiedData!>"%filePath%"

exit /b

Replace C:\path\to\directory with the actual path. Save the script as a .bat file and double‑click to run. The script will iterate over all .gif files in the directory and modify them.

Note: batch scripts are limited and can’t read binary files directly. This script simulates reading by taking the first line. When modifying, it writes the modified data directly without binary operations. This may not work for all cases, and large files may have performance issues. For more complex binary processing, consider other languages or tools.

Node (the method Nexmoe used)

const fs = require('fs');
const path = require('path');

function unlimitedGifRepetitions(path) {
  const data = fs.readFileSync(path);

  const index = data.indexOf(Buffer.from([0x21, 0xFF, 0x0B]));
  if (index < 0) {
    throw new Error(`Cannot find Gif Application Extension in ${path}`);
  }

  data[index + 16] = 255;
  data[index + 17] = 255;

  return data;
}

function batchModifyGifFilesInDirectory(directoryPath) {
  fs.readdir(directoryPath, (err, files) => {
    if (err) {
      console.error('Error reading directory:', err);
      return;
    }

    files.forEach(file => {
      const filePath = path.join(directoryPath, file);
      const fileExtension = path.extname(file);

      if (fileExtension === '.gif') {
        try {
          const modifiedData = unlimitedGifRepetitions(filePath);
          fs.writeFileSync(filePath, modifiedData);
          console.log(`Modified ${file}`);
        } catch (error) {
          console.error(`Error modifying ${file}:`, error);
        }
      }
    });
  });
}

const directoryPath = './path/to/directory';
batchModifyGifFilesInDirectory(directoryPath);

Note: this code uses Node.js fs to read and write files. Replace ./path/to/directory with your real path. Ensure Node.js is installed before running.

The script iterates through all files in the directory, calls unlimitedGifRepetitions for each .gif, and writes the modified data back to the original file. The console shows each modified file or errors.

More details: https://www.b612.me/golang/232.html

A better tool

This batch tool can convert multiple APNG files to GIF and then set the output GIFs to loop forever.

https://github.com/nexmoe/batch-apng2gif

VSCode Monitor Pro

Wed, 04 Oct 2023 10:52:38 GMT

Tired of VS Code lagging? Worried about insufficient server resources? Monitor Pro lets you see through system bottlenecks at a glance and say goodbye to performance anxiety.

https://marketplace.visualstudio.com/items?itemName=nexmoe.monitor-pro

View product details

import FeatureSection from '../../components/products/FeatureSection.astro' import StatsSection from '../../components/products/StatsSection.astro' import TargetUsersSection from '../../components/products/TargetUsersSection.astro' import { TestimonialsSection } from '../../components/products/TestimonialsSection.tsx' import { Icon } from 'astro-icon/components'

</div>

Using VS Code to Manage Servers: My Unique Approach

Tue, 03 Oct 2023 00:00:00 GMT

Since Typora started charging, I fully switched to VS Code (Visual Studio Code) for writing. As a Markdown editor, it already meets my needs.

Then I started wondering: could VS Code be used as a server manager? Before this, I used FinalShell, which I liked for:

Simple resource monitoring
File browsing
Terminal access
Multi‑server management

When VS Code released Remote SSH, I didn’t pay much attention. It was meant for remote development, and I didn’t need that. But once I tried remote development, I gave Remote SSH a shot—and was pleasantly surprised. It’s excellent for server management.

So what features of VS Code meet my needs?

VS Code features

Multi‑server management

By configuring SSH keys on servers you want to access, you can set up Remote SSH and specify server IPs to connect directly.

Host server1
    HostName server 1 IP
    User username

Host server2
    HostName server 2 IP
    User username

With this config, you can manage multiple servers in VS Code. Just click a server in the list to connect and operate remotely.

File explorer

Like a normal project, VS Code can open a folder on the server. Then you can do standard file browsing and use search to locate files quickly.

I usually open the account’s home directory directly.

You also get VS Code’s powerful file editing.

Goodbye to ls, mkdir, touch, vi, etc.

Fast terminal experience

You can open multiple terminal instances and switch between them. Each terminal runs commands independently and keeps its own history.

You can also open terminals in multiple tabs or split views to run commands in parallel.

In addition, right‑click any file or folder and choose “Open in Terminal” to jump directly to that path—no more painful cd everywhere.

Docker GUI management

Most of my services run in Docker, so I use it frequently.

If you use Docker on servers, VS Code usually recommends the Docker extension, which lets you manage containers in a GUI: view containers/images/networks/volumes, run common commands, and monitor logs.

This covers most Docker operations and saves me from using Portainer or the CLI.

Git GUI integration

VS Code has strong Git GUI integration: view history, compare diffs, switch branches, merge, push, and pull—all in the UI.

Rich themes and extensions

If you already use VS Code, you can keep your preferred aesthetics. VS Code also has a much richer theme ecosystem than other terminal managers, plus a huge extension marketplace.

Other

VS Code is cross‑platform, multilingual, and free.

How to use VS Code for server management

You need:

A computer that can run VS Code
Official VS Code
SSH keys configured
Remote SSH extension

That’s basically it—the key is the Remote SSH extension.

Configure SSH keys

Generate SSH keys on your computer and add the public key to your server for passwordless login. You can find guides online for this.

Configure Remote SSH

After installing Remote SSH via this link, follow these steps:

Click the Remote SSH icon in the lower‑left corner.
Choose “Connect to Host”.
Click “Configure SSH Hosts”.

Then configure the server IP and user in VS Code. Example:

Host server1
    HostName server 1 IP
    User username

Host server2
    HostName server 2 IP
    User username

After that, you can connect directly from the lower‑left corner.

Plugins and recommendations

Monitor Pro

Resource monitoring, developed by me.

Monitor Pro is a real‑time resource monitor that tracks CPU, memory, network, file system, battery percentage, and charging state. It supports custom ordering and refresh intervals and offers high‑usage alerts. Suitable for developers, sysadmins, and general users.

https://marketplace.visualstudio.com/items?itemName=nexmoe.monitor-pro

Docker extension

If you deploy apps in Docker containers, this helps you manage and debug them inside VS Code.

Wakatime

Track how much time you “slack off” on servers.

zsh and ohmyzsh

Use ohmyzsh and its ecosystem to get auto‑completion and correction in your terminal.

Complete Guide to Optimizing CLS (Cumulative Layout Shift)

Sat, 16 Sep 2023 00:00:00 GMT

What is layout shift

A short video (about a dozen seconds) explains it clearly.

More precisely: layout shift is when content unexpectedly moves on a webpage due to sudden changes. It’s frustrating because it interrupts reading or causes mis‑clicks. Layout shifts are often caused by async resource loading or DOM elements added dynamically. Common causes include images/videos without size, fonts whose fallback render size differs, or third‑party ads/widgets that resize dynamically.

The painful part is that dev behavior often differs from real user experience: personalized/third‑party content behaves differently in production, test images are already cached in the developer’s browser, and local API calls are extremely fast with almost no latency.

What is CLS

CLS (Cumulative Layout Shift) is a metric.

It measures the largest layout shift score across all unexpected layout changes during a page’s lifetime.

CLS helps address layout shift problems by measuring how often real users experience shifts, enabling developers to take corrective actions.

Why optimize CLS

Layout shift seriously impacts UX—this is clear from the short video above.

It often causes accidental clicks, loss of orientation, and user frustration. Users tend to leave quickly, and sometimes it pushes them off the expected flow.

Optimizing layout shift usually improves user retention and time‑on‑site.

Yahoo! JAPAN News reduced CLS by 0.2 and got the following results.

How to reduce CLS

Reserve space for images and media

Always set width/height for images and videos, or reserve space using CSS such as min-height, aspect-ratio, etc.

`aspect-ratio`

You can directly specify an element’s aspect ratio.

https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

Browser support:

`padding-bottom`

If you need broader browser support, use the widely accepted “Padding‑Top Hack.” It requires a parent element and an absolutely positioned child. You calculate the aspect ratio as a percentage and set it via padding-top.

<div class="container">
  <img class="media" src="..." alt="...">
</div>

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Use CSS that doesn’t cause shifts

transform works well. Some examples below. Examples can be found here: https://play.tailwindcss.com/26PxFA6UVI

`zoom` vs `transform: scale`

When zoom enlarges the page and shifts right, transform: scale scales in place.

`margin` vs `transform: translate`

margin increases the parent size, while transform: translate only moves the element itself.

`border` vs `box-shadow`

border expands the parent, while box-shadow doesn’t.

Be careful with lazy loading

Lazy loading can cause layout shifts. If you navigate in a long lazy‑loaded list, be careful. Navigation without animation can mitigate the issue to some extent.

Avoid `transition: all`

On initial load or page transitions, transition: all can cause padding to animate from 0, resulting in layout jitter.

Painful examples: Commit: table and friends icons jitter Commit: fix navbar jitter

Element order causing shifts

On mobile, the main content is shown first, so the sidebar markup appears after it. On larger screens, CSS order is used to place the main content in the middle column (second column). Pseudocode:

export default function MainLayout(props) {
  return (
    <Container>
      <Main className={css`@media screen and (min-width: breakpoint) { order: 0 }`} />
      <Left className={css`@media screen and (min-width: breakpoint) { order: -1 }`} />
      <Right className={css`@media screen and (min-width: breakpoint) { order: 1 }`} />
    </Container>
  )
}

On first paint, the browser hasn’t fully parsed the DOM. It knows <Main /> but not <Left /> or <Right />, so it renders <Main /> in the first column. Only on the second paint does it move <Main /> to the second column and render <Left /> in the first.

Chrome does not parse HTML in a single pass. It pauses parsing and starts rendering in two cases:

After reading 65,535 bytes of HTML
After encountering a <script> tag and reading ~50 tokens

See: Optimize blog CLS

Page navigation and back/forward cache

By default, all browsers use bfcache, but some sites are not compatible. For details on testing and identifying blockers, see bfcache.

After you leave, the page is kept in memory briefly. If you return, it restores exactly as you left it—fully loaded and stable, without any shifts.

Modern SPAs can also keep layout consistent during route changes. Always keep your nav and table of contents fixed on the page.

Fonts

Before web fonts load and render, there are typically two approaches:

Use a fallback font until the web font loads (FOUT — flash of unstyled text).
Hide text until the web font loads (FOIT — flash of invisible text).

Both can cause layout shifts. Even when text is invisible, layout is still computed with the fallback font, so once the web font loads, the layout can change just like with FOUT.

To minimize this:

Use font-display: optional to avoid reflow when the font isn’t available at initial layout.
Use a close fallback. For example, font-family: "Google Sans", sans-serif; ensures a similar sans‑serif fallback. Using only "Google Sans" will fall back to Chrome’s default (Times), which is a worse match.
Use size-adjust, ascent-override, descent-override, and line-gap-override to reduce size differences. See Improved font fallbacks.
Use the Font Loading API to reduce font fetch time.
Preload critical fonts with <link rel=preload> so they’re available at first paint.
Read Best practices for fonts.

Use real skeleton screens

Measuring CLS

Production

Lab / testing

Lighthouse in DevTools

You can generate real‑world performance reports for mobile and desktop, along with improvement suggestions.

Running Lighthouse in DevTools during local development is convenient.

PageSpeed Insights

This is basically the online Lighthouse.

Performance in DevTools

The Performance panel records page behavior over time. The timeline includes an “Experience” track that highlights layout shifts and the elements that moved.

Web Vitals extension

Treat the Web Vitals extension as a spot‑check tool rather than a full debugging tool—the Performance panel in DevTools is for that.

Conclusion

As someone with high standards for my own projects, I’ve often dealt with layout shift optimization and Lighthouse. I just didn’t have a clear CLS concept before. Now I do.

CLS is a fundamental optimization metric and crucial for UX. Every project should address CLS.

If you spot any mistakes, please let me know—thanks!

References

Two Hundred Days Later: Thoughts on the Microsoft Edge Extension Contest

Thu, 13 Apr 2023 00:00:00 GMT

Why Talk About This Contest

As an independent participant, I was lucky to win third place (largely luck, though there were some methods too). I cared most about the Microsoft internship opportunity, but I suspect it was canceled because of the tech winter. There was no follow-up at all. Nobody contacted me about internships. I asked the contest staff and asked in the group, but got nothing.

Awards

Third prize, with 5,000 RMB prize money, 4,000 after tax, plus a bunch of physical prizes. There was also a nice glass trophy. I took my roommates to an all-you-can-eat buffet.

The delivery package was huge. Carrying it back to the dorm nearly killed me.

Not sure if it was 11.4 kg or 11.4 jin. 11.4 jin shouldn't be enough to exhaust me, right?

What Is This Contest

Participants developed creative extensions under the big theme of "Changes and Challenges in the Post-Pandemic Era," focusing on three categories: "Technology improves life," "Empowering productivity," and "Diversity & inclusion." The goal was to build extensions that help us see a wider world.

The contest website https://edgecontest.microsoft.com/index.html is now inaccessible. This suggests it was organized by the Edge China team to enrich the Edge extension ecosystem.

Some Contest Info

Below are brief but key details that help with the analysis later.

Methods From the Analysis

Lightweight Tech

Looking at the four requirements, as a tech generalist I could see: there were basically no technical requirements. In a contest with a tight deadline, it's hard to do something highly technical. People's tech ability won't differ much, so we shouldn't focus on tech depth.

Product Ability

Practicality, usability, aesthetics, innovation - this is product ability. I had just started cultivating product skills then, so it was a good chance to test. Product ability is a way to overtake in this contest, because many participants are purely technical, and I couldn't beat them there.

Emphasis on Overall Ability

Besides the product, the contest required PPTs, videos, etc. Product output and publishing also add points. This requires execution and marketing ability. I usually read product articles, so I can roughly guess what product judges like to see, and I write accordingly. Also, as a solo participant, a project from planning to launch demands comprehensive abilities.

My Project

I only learned about the contest a few days before the deadline. A group friend mentioned it. (Thanks a lot, otherwise I wouldn't have known.)

I thought: how can I join in a few days? Let's just do it! But I couldn't totally slack off, so I did some analysis, which led to the previous section. At the time I wasn't as detailed, just glanced at the site and made instinctive decisions.

Next, here's my contest project and my thinking at the time.

Meteor New Tab

Before That

Xiaoshu Student had a few issues then:

The name wasn't straightforward enough, making it hard to understand. I was reading lots of literature when naming it, so it was a bit "literary."
The UI didn't feel techy; I wanted a comfortable, Zen feel.
To give it "spiritual power," I used some willful slogans and marketing. Not direct enough.
The design didn't satisfy minimalism. A tiled layout doesn't work for everyone.

My Thoughts at the Time

English name, more techy
More techy UI design
More straightforward product name
A more straightforward slogan, instead of conveying a concept
A more straightforward product description, instead of conveying a concept

Project Summary

Overall, the contest project was a second creation based on Xiaoshu Student. For different markets, build a different product image with a different vibe. Meteor is still maintained today and is growing further away from Xiaoshu Student. I hope these twins can each have their own personality.

Overall Summary

I think I was very lucky. Contests like this are rare, and the judges were mostly product managers. I had experienced "Internet+" contests before, and the judges didn't feel like product people. I didn't fit in there either and only got a school-level prize. The teacher later said my PPT and defense weren't good enough.

This contest fit me well, so I was lucky. As a solo participant, I could get this result. If you asked me to do an algorithm contest, I'd probably get nothing.

I hope there will be more open, diverse contests like this. But I probably won't get the chance. I'm about to graduate. Looking back at campus life, it wasn't very exciting - it was so plain.

New Features! What You Wanted Is Here!

Sun, 19 Feb 2023 00:00:00 GMT

Right-click to move cards, search folders while moving

More precise than dragging. Faster to move to distant folders.

Search completion with suggestions while typing

Also, the search box now auto-collapses when it loses focus 😊

Open local files

Now you can bookmark PDF files here and open them directly in Xiaoshu Student 🙂

Flat cards for a cleaner card UI

You asked for it, and it's here.

New sharing feature, linked to your account

Want to share part of your bookmarks with friends? Easy. Just a few clicks 🚀

Then you'll get a share link and QR code.

https://store.chainwon.com/bookmarks/63908420e127c076e239

Search box auto-focus

You can control whether the search box auto-focuses on open.

Confirm before clearing all cards

No more accidental touches.

Online Study Room, Cyber Study Buddy. Banxue OS1

Sun, 22 Jan 2023 00:00:00 GMT

I built a check-in bot in the group. Everyone is welcome to check in and experience cyber study companionship.

Preview

{% gallery %} {% endgallery %}

ToDo

[x] Automatic check-in stats
[x] Auto announce today's check-in results at the end of each day
[x] Auto announce this week's check-in results at the end of each week
[x] Auto announce this month's check-in results at the end of each month
[x] Check-in reminders
[ ] Leaderboard
[ ] Punishment for long-term no check-ins

Rules

Check-in

Common English learning apps can be shared directly in the group to auto check-in
AI recognition success also counts
Manually send "check-in" in the group to complete check-in

Reports

Every day at 23:59, it will automatically report today's check-in status in the group
Every Sunday at 23:59, it will automatically report this week's check-in status in the group
On the last day of each month at 23:59, it will automatically report this month's check-in status in the group

Check-in reminders

Meet all conditions below to be reminded:

Add the bot as a friend
No check-in today
Checked in within the last 3 days
Every day at 22:00 or 23:00

Join the group

Yes, almost nothing. This was a year without memories. A year from now, maybe I’ll only remember that I joined a contest in 2022, and everything else will be blank.

2022 Was

Rushed

Both breaks were sudden. There were rumors at school, and I felt a break was coming. Hard to believe, and my roommates didn’t think it would be so abrupt, but the next day we were off.

Unconscious

To be honest, on Jan 5, 2023 I didn’t even realize 2022 had ended. I only saw it when scrolling through other people’s year-end posts.

Past Year-End Posts

Friends’ Year-End Posts

Life Milestones

Sun, 08 Jan 2023 00:00:00 GMT

Looking back on the past ten years, I’ve always been full of longing for the future, which forced me to give it my all every day. I’m not the kind of person who can just lie flat. Eight years ago, three years ago—if someone had guided me, would I have become someone really impressive? Would my life be more hopeful than it is now?

Oct 2023 - Launched the VS Code plugin Monitor Pro because I set up a mini host as a server. VS Code Plugin Monitor Pro - Monitor Everything You Care About - Juejin
Sep 2023 - Analyzed nginx logs; in a year, Xiaoshu Student’s library service handled 140 million requests.
Apr 2023 - Finished a student innovation project with a national-level excellent completion and received a 10–20k RMB bonus.
Jan 2023 - Launched Banxue OS1. The product was simple but in huge demand. With only a tiny bit of SEO, it had strong organic growth. But the API was suppressed by QQ, so it was basically dead.
Nov 2022 - A project based on Xiaoshu Student entered Microsoft Edge Add-on/Innovator Contest. In a field full of experts, I placed third as a solo participant and received 4,000 RMB after tax. The prize also included a Microsoft internship opportunity. I submitted my preferences and thought I’d get to experience big cities like Beijing, Shanghai, or Suzhou, but there was no follow-up. Friends and family felt it was a real pity. https://blog.nexmoe.com/04HB92.html
Jul 2022 - The open-source “Explorer Xiaoshu” was integrated into a 360 team’s internal project.
Apr 2022 - Xiaoshu Student was picked by a teacher to participate in a student innovation project.
Jan 9, 2022 - Explorer Xiaoshu went live, later recommended by “Chaping” and got a lot of exposure. One-click switch search platforms! With this plugin I got faster and faster.
Nov 2021 - My first 1,000-star GitHub repo was born: Hexo Theme Nexmoe.
Sep 2021 - My first software copyright, applied using a high-school project because a friend wanted to farm credits.
Aug 6, 2021 - Xiaoshu Student launched. It became my main project and helped me meet many people.
After Apr 2021 - I turned things around, joined multiple teams, and mass-produced software copyrights. Turns out competitions were easy to farm, but those opportunities never came back.
Apr 2021 - PE 74, military training 67, GPA 3.66, ranked 7th in the major. Failed to transfer into CS. Others joined school competitions; I didn’t. If PE hadn’t dragged me down, I could have transferred based on GPA alone.
Freshman year 2020 - Learned Go and built something like an App Store for Qingwan Navigation, with reviews, submissions, ratings, history, moderation, SSO users, static assets handling—this was the predecessor of Manyou Yunye. All those features were later removed.
Aug 2019 - Open-sourced Hexo Theme Nexmoe, which became my first 1,000-star project on GitHub. A Typecho version came soon after, and the community made a Halo version. Some people even used it for their graduation projects. Nexmoe's Design
Feb 2019 - Bought a used laptop for 500 RMB and built a full-stack confession wall, later used in a graduation project. PHP & Vue.js Confession Wall
2019 - Believed MBTI was a great social tool and promoted it to friends. I was sometimes INTP, sometimes ENTP, and eventually mostly ENTP. I’m restless.
2018 - We also built some public APIs, like this one. Cravatar – Public Avatar Service
2018 - Qingwan Wallpaper site went offline. We launched the Mixcm wallpaper site with friends and got thousands of users on day one. The domain mixcm.com was renewed for 10 years. A wallpaper site made by middle school students - V2EX
2017 - A blog theme I made sold for a few thousand RMB; the wallpaper site’s navigation ads made a few hundred.
Jun 2016 - Qingwan Navigation was a qualified graduation project with an admin backend, CRUD, and user system.
May 2016 - Qingwan Wallpaper and Qingwan Navigation launched. Qingwan Navigation would accompany me for five years. Qingwan Start Page Memoir. The wallpaper site was based on Cloudreve’s predecessor, and its author guided my programming journey. Cloudreve - A hybrid public/private cloud storage system
May 1, 2016 - Bought my first programming book, “PHP Bible,” and officially began my programming journey.
2016 - Submitted my first PR to an open-source project on GitHub. GitHub - itorr/imouto: Fast, clear, minimalist
Dec 2015 - Built schedule, countdown, and weather apps in Easy Language. Things I once wrote in Easy Language
2014 - My PC couldn’t run LOL, so I played “300 Heroes” (300MB installer). I got into Easy Language by tinkering with third-party tools and made simple skin replacements. I stopped later because I built a decent PC and could play LOL. AMD YES! (Indeed, I haven’t used Intel ever since.)

Take Notes with Xiaoshu Student

Sat, 29 Oct 2022 00:00:00 GMT

Forgot what a bookmark is for? No worries

Now you can add notes to bookmarks and quickly find them in search.

Smarter data backup

Xiaoshu Student now automatically backs up your data on a schedule. It also records your browser and version for easy recovery.

New Transparent theme

The search box now auto-focuses, making it easier to use

Use the keyboard to pick suggested results

Upload new wallpapers

Now you can upload wallpapers that sync with your account.

Drag your folder titles

You can now reorder folders by dragging their titles.

Drag onto screen buttons to group and sort across screens

A New Group Is Born

Sat, 22 Oct 2022 00:00:00 GMT

The previous group is gone. If you need anything, contact me on QQ: 776194970

New group number: 1018234047

Main topics: tech, anime, films/TV, games, wellness, study

Major Update: The Powerful Xiaoshu Student New Tab in Version 2.2

Fri, 21 Oct 2022 00:00:00 GMT

Love minimalism? Try Minimal Mode or my good brother

Clean like the image above, still generated from your bookmarks, no need to add content manually. Learn more: https://xiaoshuapp.com/meteor/ Minimal Mode is in Settings -> Bookmarks -> Drawer Mode

Layout settings to fit more on one screen

Settings -> Bookmarks -> Bookmark layout

Small bar cards, small but powerful

Easily find the folder you want

Now search suggestions can include folders. Click to jump to the folder you want.

Data backup

Backup data (not bookmark contents) to the cloud and switch versions freely.

Email registration and login

Share your search engines

Currently only sharing is available; more functions will unlock in future updates.

New effects system

Easier to use, easier to create and share

What Is Meteor New Tab? Product Intro and Soul

Sun, 25 Sep 2022 00:00:00 GMT

Hello everyone, we are the Mixcm team. We are honored to win third place in the first Microsoft Edge Extension Contest! I am the only member of the team. My friends call me Zheying Qingmeng or Nexmoe. My slogan is: "Fighting for what I love, and learning to be brave."

Product Introduction

Our product is called Meteor New Tab, and its purpose matches its slogan - make your bookmarks great again. In the post-pandemic era, more people study and work online. Users search online for all kinds of "good resources" and like to bookmark relevant pages. Over time, the speed of bookmarking far exceeds the speed of learning, making pages hard to manage and retrieval very time-consuming. Many high-quality resources are buried at the bottom and never opened again.

We built this product to help users revive long-neglected bookmarks. It can automatically organize your bookmarks into tabs so everything is clear at a glance.

The Soul of the Product

We listen to users. The soul of a product comes from the creator and from users. One user praised Meteor New Tab as forward-thinking and said: "Instead of drifting in the information stream, it's better to ruminate on high-quality content you've saved." Meteor New Tab goes against the times. We stop exhausting you with endless new things in the feed, and instead let you revisit high-quality content you've already saved to spark new thoughts and inspiration.

Another user said: "Awesome. I really don't want a flashy dial page. I just want to import links quickly and generate simple icons." Sometimes we need to think about what truly matters to us. What we care about and love has already been saved in our bookmarks. Meteor New Tab is about helping us refocus on ourselves.

Many other comments and feedback have helped us improve the product. Meteor New Tab has gained more and more "soul," and we are very grateful for that support.

Use Your Bookmarks Better

Display multiple folders in parallel so bookmarks become a kanban. Progress bars automatically track your Bilibili and YouTube playback. Your bookmarks can also be your watching dashboard. Sorting shows your recently added bookmarks first. Search helps you quickly find what you want. There are more features waiting to be discovered.

Modern Design, Friendly Experience

Protect privacy and security: data doesn't go through our servers for storage or interaction, achieving true privacy and security.

Automatically follows system light/dark mode, so you won't harm your eyes with sudden jumps from black to white at night.

A product for a new era with new improvements. We listen to users, and you can join us in making Meteor New Tab better.

Use Software Engineering to Build Better Products

We use an incremental development model. It's suitable for a one-person team like ours. We try our best to pay attention to every user feedback and need, and strictly manage and discuss them before making decisions. We'll make Meteor New Tab closer to perfection.

We also keep learning and improving, adopting the latest technologies. We reference DevOps principles to automate development, testing, operations, and deployment. This makes the product more stable and reduces developer workload, maximizing efficiency. We use GitHub's latest features for version control; use Issues and Projects for requirement management; use GitHub Actions for automatic build and release. We minimize human involvement to make development more efficient.

Download

https://xiaoshuapp.com/meteor/

Meteor New Tab - Makes Your Bookmarks Great Again

Sat, 06 Aug 2022 00:00:00 GMT

Edge:https://microsoftedge.microsoft.com/addons/detail/bopgggdgdhogemdpoepddaakfgfadjal Chrome:https://chrome.google.com/webstore/detail/fefnkaabnkfafmmmopbghgejhnieccpm

My Thoughts

English name, more techy
More techy UI design
More straightforward product name
A more straightforward slogan, instead of conveying a concept
A more straightforward product description, instead of conveying a concept

Product Form

Highlights

🏄 No need to add one by one: generated from your bookmarks, no extra new tab management
🛡️ Green, safe, privacy-strong: data comes from your bookmarks, not our server
💪 Powerful and easy: personalization, search, small features, rich options, status settings

From today, make your bookmarks powerful again

Parallel folders turn bookmarks into a kanban. Progress tracking gives you the full picture.

Micro-innovations

Effects

Highly customizable

Kanban, parallel display

Playback progress bar

Automatically tracks your Bilibili (already live) and YouTube (not live yet) playback progress.

Multiple spaces, switch identity anytime

Temporarily use a search engine

Quick directory

Quickly locate your bookmarks

Advanced features for developers

Provide unlimited freedom and possibilities

Release Time

Within a month.

Currently participating in the Edge Extension Contest. This contest is very important to me, and only the top 20 win prizes. Each person can vote twice per day. I hope you can support my project. Thank you. https://edgecontest.microsoft.com/worksDetail.html?WorkDataId=a002d0f8-e68a-48c0-a3c4-c7885731bbcd

How Xiaoshu Student Helps Me Study and Outwork My Roommates

Thu, 10 Mar 2022 00:00:00 GMT

Xiaoshu Student is not just a normal homepage or new tab. It is also a great study assistant that has accompanied me through my university life.

Track learning progress on "Bilibili University"

Bilibili is a video platform, but it has tons of learning resources, so people jokingly call it "Bilibili University." As a college student and heavy Bilibili user, I often watch tutorials there. These videos usually have many episodes, but Bilibili's "resume playback" is not very convenient. After bookmarking a series, you still have to manually pick the last episode you watched. So Xiaoshu Student introduced a video progress tracker. When you bookmark a series, Xiaoshu Student automatically updates the bookmark link to record your playback progress.

At the same time, progress is shown as a progress bar, giving you a clearer view of how far you've watched. When you bookmark enough videos, Xiaoshu Student becomes your dashboard, letting you see your learning progress from a "god view" with a better overall picture.

You can also bookmark anime, documentaries, and other Bilibili videos, and Xiaoshu Student will track their playback progress too.

Use shared learning resources from helpful users

Even if your bookmarks are empty and you haven't started building your knowledge system, it's fine. We have helpful users who shared their bookmarks so everyone doesn't have to struggle to find high-quality sites.

We can use these shared bookmarks to improve our own Xiaoshu Student setup. Keep up with trends, appreciate art, and find handy tools.

I hope you can also join the helpful users and bring more epic bookmark collections to everyone.

Build a campus portal navigation

Quickly open the school sites you need and stay ahead with school information.

Develop interests and jump between life and study

After saving lots of content and sorting it into folders, you can use the quick directory feature to jump between different areas you follow.

When you've been working for a long time and need a break, you can jump to design, admire great works, realize how much you still have to improve, then jump back to studying.

You can also jump to bookmarked documentaries or anime while eating, so you can watch your favorite videos during meals.

Record study reflections and adjust direction

Learning is a long process. We can record the process, results, gains, and experiences...

Recording helps us understand ourselves better and understand our learning direction better.

Keep moving forward, keep learning, keep changing, keep exploring, keep recording, keep adjusting direction. Then we'll get one step closer to our goals.

^ The note feature is implemented via the flomo API. flomo API requires a flomo membership.

Xiaoshu Student official site: https://xiaoshu.app/

(2021 Year-End) 19, Finding Myself Again: Passion, Courage, and Gratitude

Sun, 26 Dec 2021 00:00:00 GMT

May there be enough clouds in your life to make a beautiful sunset.

https://music.163.com/#/song?id=32069952

👆 Entorevolution, my favorite song when I was younger. I haven’t listened to it in a long time, but recently I started again.

Clouds

Back in 2017, at 15, I used this sentence as my NetEase Cloud Music signature. It’s still there today.

My life has been just like that line. After that, my life was full of clouds, and they nearly crushed me.

In 2017, when I just entered high school, I decided to become someone who radiates sunshine—warm like the sun, full of passion—and I truly moved toward that goal. But I didn’t expect that later in life, dark hands would grab me again and again, pulling me in the opposite direction. At the time I was just an ordinary high schooler with a narrow view, naturally believing that everything in school was all of life. Pressure from life and suppression from forces I couldn’t resist crushed me. I thought I was finished.

A friend said, “You’ve been in a really bad state lately. Maybe go see a doctor.”

I became colder and sharper. Back then I believed that only by living in a constant stress response could I face reality.

After that came the blank years of my life. During that time, I stopped progressing and gave up thinking.

Light, Coming In

👆 Blue sky and white clouds photographed through the classroom window. The view feels like we’re in a cage, yet we can clearly see a beautiful sky.

Having lost all interest in life, I turned to literature. The line “Heaven gave me talents for a reason; a thousand gold spent will return” became my greatest comfort. Books are like medicine; though they didn’t cure my foolishness, they saved me.

Later I also read popular science books, which taught me a lot.

Literature made me braver.

And of course, the company of family and friends carried my heavy body and mind forward step by step.

Everyone longs for the sun, but at that moment you were a black hole devouring everything. Yet some people, unafraid, dared to approach you and share their light with you. Aren’t those true friends? In those blank years I made many of the best friends of my life, and also understood the importance of family.

After those blank years, I arrived at this year.

Reflection

👆 The view outside the dorm window on my first day at university, hinting at my hesitation and contemplation in life.

What kind of person do I want to become?

Optimistic: Heaven gave me talents for a reason; a thousand gold spent will return.

Love everything: Love a person, including her flaws. Love a career, including the hardships it brings. Anxiety: Is Life Really as They Say - Lu Benwei (nexmoe.com)

Steadfast: Eraser - Lu Benwei (nexmoe.com)

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma—living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. Most importantly, have the courage to follow your heart and intuition. They already know what you truly want to become. Everything else is secondary. — STEVE JOBS

Brave: Who’s afraid? A bamboo raincoat for a lifetime. Sorry, I Gave Up - Lu Benwei (nexmoe.com)

👆 The subtitle of the blog “Lu Benwei.”

Romantic: The world won’t satisfy people, so they decide to change it through their own actions. — Lenin

No matter what disaster comes, as long as life remains, life must go on. — Life Is Beautiful

👆 The final scene of Life Is Beautiful

Seeking

Constant reflection made me realize how far I had drifted from my original intention, and how far I was from what I once pursued.

I decided to find myself again. On February 15 of this year, I decided to start my new journey.

Finding Myself Again

To answer the earlier part: I’m almost there! Over this year, as I set goals and worked toward them step by step, I evolved—maybe you could say my suppressed nature was released. I’m almost there.

I finally found my lost self. I started to love everything again.

My friends said:

“Your eyes are shining again.”

“I’m so happy for you!”

“Ha, I’m happy to see you recognized too.”

“Good!”

“Really great.”

Gratitude

All encounters in this world are reunions after long separations. / Everything is the best arrangement.

Thanks to my parents and friends for their support and companionship. My parents gave me a great deal of trust and the courage to explore. They weren’t like authoritarian families that constrain their kids. In my darkest moments, my parents gave me the greatest support, giving me hope and determination to break through it all. Thanks to my friends for their company; the light they shared kept me from being fully blocked by the clouds on my path, and kept me from despairing over everything.

Thanks to my past self for not giving up. My self who felt like I’d walked through hell now feels that nothing can defeat me. Thanks to my younger self for finally summoning the courage to recover so quickly. Thanks to myself for always yearning for the light and for always staying true to myself.

Thanks to the darkness in high school. It made me less afraid of many things. It made me realize how cowardly I used to be—afraid of everything, afraid of loss, afraid of failure, afraid of outcomes. It was this darkness that gave me the courage of a do-or-die resolve.

Thanks to the computer major transfer rejecting me. It pushed my still-hesitant self to summon courage, make a decision, and embark on a tougher journey.

To hell with looking back and forth. I don’t want any other road. I’ll only walk this one, even if I end up shattered. I used to always look for retreat routes, thinking there would be a way if I failed, as long as I was alive there was hope. But those retreats weren’t the path I wanted most.

I won’t keep giving up on myself. I’ll just walk my own road; what do other things have to do with me? All these years, I’ve walked through others’ misunderstanding. What’s a few more years? I believe I’ll reach that moment of light at the end of the tunnel. — Sorry, I Gave Up - Lu Benwei (nexmoe.com)

It’s because of all these things worth thanking that I am who I am now.

👆 East Lake and Yellow Crane Tower

Hope

I hope in the new year I can keep up with your pace, and that by this time next year you’ll still be willing to read my year-end post. I also hope next year, like this year, is full of expectation.

Friends’ Year-End Posts

2021 Year-End Summary - Decluttering and Principles (notion.site)

Before the Official Release: Introducing Xiaoshu Student Again, Your Next-Gen New Tab

Fri, 17 Dec 2021 00:00:00 GMT

We've spent so much effort customizing our homepages, but never properly organized our bookmarks.

Official site: https://xiaoshu.app/

Why

There are so many new tab extensions-why make another one?

It was because one day in the summer, a final outage took down my old project. I suddenly realized it was too much hassle to find a new homepage and move my huge pile of stuff into it. That's how Xiaoshu Student was born.

Not Long Ago

Not long ago I released this work on v2: https://www.v2ex.com/t/810701

But back then it was too rough. After many iterations, it's basically a whole new look.

So it's time to reintroduce Xiaoshu Student.

Bought a Domain

I bought a .app domain, which means I'm more invested.

Support for Huge Bookmarks

Do you have 1K, 2K, or 5K bookmarks? No worries-Xiaoshu Student will still present them clearly by level!

Powerful Search

Supports dozens of search engines, temporary search engines, and recommendations based on your bookmarks while searching.

Bar Cards + flomo

Videos and articles you want to bookmark no longer have to pollute your To-Do list. No deadline needed-open it anytime.

After reading, you can quickly jot down your thoughts in flomo!

See You

Next time we meet might be a long while. By then, I believe it will be a brand-new look again.

The road is long. May we both be well when we meet again.

Xuexitong + Anki: Escape Failing Classes Fast

Fri, 26 Nov 2021 00:00:00 GMT

To avoid failing, I wrote a script that exports assignments and in‑class quizzes from Chaoxing Xuexitong to CSV, so you can import into Anki and repeatedly review your mistakes.

Here’s the tutorial.

1. Download and install Anki

Anki 让记忆更轻松 - ankichina

2. Download an Anki multiple‑choice template

Anki 选择题模板（单选 + 多选 + 自定义选项） | Half Stack (zhangsn.me)

Double‑click to import the template.

3. Export Xuexitong assignments and quiz data

Install Tampermonkey or ScriptCat.
Install the “Chaoxing To Csv” script: https://scriptcat.org/script-show-page/219
Open the assignment or quiz page, click “Download question data”.

4. Import data into Anki

Open Anki and click “File”.

Choose “Import”.
Select the file downloaded in step 3.
Choose the template as shown.

Click “Import”.

A Project Built at 19 with 5 Years of Experience: Xiaoshu Student

Tue, 16 Nov 2021 00:00:00 GMT

Xiaoshu Student is my first project built as a real product. In the summer when I was 19, I went from idea to version 0.0.1 in just two or three days.

It's also the successor of Qingwan Start Page (Qingwan Start Page Memoir - Zheying Qingmeng (nexmoe.com)).

The introduction is already on the official site, so just check it out: Xiaoshu Student - A Bookmarks-based New Tab (nexmoe.com)

So far, it's only been 3-4 months since the project started. It's still in testing and many features aren't finished yet. If you like trying new things, feel free to give it a try.

![网页捕获_16-11-2021_203157_shu.nexmoe.com](https://nexmoe.com/images/20211116-19 岁集 5 年经验的项目，小舒同学/网页捕获_16-11-2021_203157_shu.nexmoe.com.jpeg)

Xiaoshu Student Usability Tests and Reflections

Sun, 07 Nov 2021 00:00:00 GMT

Xiaoshu Student is the first product I seriously tried to build. This post records the usability tests I ran, the fixes for problems I observed, and some reflections.

About Xiaoshu

We spent so much effort customizing our homepages, but never properly organized our bookmarks. Xiaoshu Student is a convenient, efficient next-gen new tab extension that generates your new tab from your bookmarks. It can be your browser homepage or just your new tab. From now on, you no longer need to manage bookmarks while also maintaining a separate homepage.

Official site: Xiaoshu Student

Test Setup

I opened the official site and let the test subject use it while I observed without giving hints, to see whether they could install and open Xiaoshu Student smoothly.

If they got stuck for too long and couldn't proceed, I gave as little guidance as possible.

First Test

My first subject was quite experienced, since they had used Tampermonkey scripts before.

Process

They quickly identified their browser and installed the extension.

However, Edge has a major issue: after you install a new tab extension, Edge disables it and shows a window with a link telling you how to enable it.

The subject clicked the link smoothly, but then got stuck. The test environment didn't let them calmly read the article content. After a while I reminded them to read it, and they continued.

Second issue: after enabling it, they didn't know what the extension did, so they didn't think to open a new tab.

Final issue: Edge popped up the window below, and they instinctively clicked the ×. Fortunately, clicking × doesn't revert the setting.

Improvements

As my first test subject, they were a fairly "geeky" user, so the flow was mostly smooth. But I still found some shortcomings.

To address these issues, I created a welcome page in the extension. After installation and enabling, it guides users to open a new tab and click "Keep changes."

However, as of Nov 7, 2021 (when I wrote this), the Edge version still hadn't passed review, so later tests were done without the guide.

Second Test

Improvements

Solved beginners' choice paralysis.

2021-11-07

Qingwan Start Page Memoir

Fri, 08 Oct 2021 00:00:00 GMT

A template written in PHP, requires a PHP environment to run.

Written in November 2017.

Github

https://github.com/mixcm/template-mixcmWallpaper-v1

Star welcome.

Screenshots

2020.3

Backend started using Swoole; frontend used Vuetify as the UI framework.

2019.10

News feed

2019.9

Switched to Nuxt.js

2019.6

Support for changing skins

2019.5

2019.3

Third backend version, frontend with Vue + Element, backend with CodeIgniter

https://github.com/chainwon/chainwon-console-vue-v3

https://github.com/chainwon/chainwon-console-php-v3http://dev.chainwon.com/

GitHub Desktop Beginner Tutorial

Thu, 07 Oct 2021 00:00:00 GMT

Compared with other platforms, GitHub is quite friendly. It comes with a GUI app so you don’t need to use the command line.

This tutorial is for my roommate.

Register a GitHub account

To use GitHub, you need an account.

Go to Join GitHub · GitHub and follow the steps. It’s a bit more elaborate than typical sign‑up forms.

Use a QQ email like 23333@qq.com if you want.

The wording is simple; if you don’t understand, use your browser’s translator.

Download GitHub Desktop

Go to GitHub Desktop | Simple collaboration from your desktop to download.

If the official download is slow, you can get it from Lenovo App Store or similar.

Install it like any normal app and open it.

Sign in to GitHub

The first time you open it, it should prompt you to sign in. Just follow the steps.

If you don’t see the login, go to File -> Options -> Accounts -> Sign in.

Create a repository (project)

“Respiratory” means a storage room—but here we just call it a repository or project.

Step 1

Click the area inside the red box.

Step 2

Click “Add” -> Create new repository…

Step 3 Fill in project info

Git ignore can be left empty for now. It stores rules for files to ignore. See Git 忽略文件.gitignore 的使用 - 简书

License can also be ignored for now. I recommend MIT License. See 各种开源协议介绍 | 菜鸟教程

After initialization, your project is still only on your computer—not yet on GitHub.

Click “Publish repository” and confirm to upload it to GitHub.

Uncheck “Keep this code private” if you want others to see it.

Write code

Click “Show in Explorer” to open the project folder.

Create and edit files in the folder.

Back in GitHub Desktop, you’ll see the changes.

Push your code to GitHub

Enter a commit message, then click “Commit to main”.

Click “Push origin” to upload your commit to GitHub.

Done! 🎉🎉🎉 Congrats on learning the basics of GitHub Desktop.

Issues When Developing Firefox Extensions

Tue, 05 Oct 2021 00:00:00 GMT

In theory, extensions built for Chrome can be uploaded to Firefox directly, but you’ll run into a few problems. Here’s a quick summary.

`manifest.json was not found`

The first time I uploaded a Chrome extension to Firefox, I got manifest.json was not found.

This usually means the uploaded zip doesn’t have manifest.json at the root. In the incorrect package below, manifest.json is inside the dist folder.

Missing add-on ID prevents `storage.sync`

This one took me a long time. There’s almost no discussion online—only the official English docs mention it. As someone weak in English, it was painful.

How to fix it

You need to add an add‑on ID in manifest.json:

"browser_specific_settings": {
    "gecko": {
    	"id": "{your add-on ID}"
    }
}

How to get the add‑on ID

Upload the extension to Firefox AMO (the Firefox add‑on store).

In the extension admin page, go to Technical Information -> UUID. That UUID is the add‑on ID, formatted like {99646b8e-a5b2-4e52-b9ac-c38fcc1f108b}.

You also need the add‑on ID when calling these APIs. More info: Extensions and the Add-on ID | Firefox Extension Workshop

Run an Auto Sign-in Script on a Raspberry Pi

Thu, 16 Sep 2021 00:00:00 GMT

Because a certain learning platform blocked Tencent Cloud and Alibaba Cloud IPs, I dug out my old Raspberry Pi 3B from 2015 to run the script.

My Pi isn’t powered 24/7, so I wanted my script to auto‑start on boot.

I also wanted Server酱 notifications only when there is a sign‑in.

Flash the system

SD cards are rare these days. I finally found a random 8G card at home—good enough. Flashing Raspberry Pi OS is easy now with the official tool.

Replace Python2 with Python3

I thought I could run the script directly, but the Pi defaulted to Python2. So step two was removing Python2 and using Python3:

sudo apt remove python # uninstall Python2
sudo apt autoremove # clean Python2

sudo apt install python3 # usually already installed
sudo ln -s /usr/bin/python3.7 /usr/bin/python # link Python to Python3

Clone the script

git clone https://hub.fastgit.org/mkdir700/chaoxing_auto_sign.git # GitHub mirror

Configure and test

Edit chaoxing_auto_sign/local/config.py.

Then in terminal: cd {your path}/chaoxing_auto_sign/local/ and run python main.py timing to test.

All set—now the main part.

Install Screen

sudo apt install screen

Auto‑run on boot

Create /home/pi/Desktop/start.sh:

#!/bin/sh
 
CreateScreen()
{
        screen -dmS $1
        screen -x -S $1 -p 0 -X stuff "$2"
        screen -x -S $1 -p 0 -X stuff '\n'
}

CreateScreen "chaoxing" "/home/pi/Desktop/chaoxing.sh"

Create /home/pi/Desktop/chaoxing.sh:

#!/bin/sh

cd {your path}/chaoxing_auto_sign/local/
python main.py timing

Edit rc.local:

sudo nano /etc/rc.local

Insert this before exit 0 to run start.sh at boot:

su pi -c "exec /home/pi/Desktop/start.sh"

Save with Ctrl+O, then reboot. After reboot, check:

screen -r chaoxing

(Optional) Notify via Server酱 only on sign‑in

2021‑09‑17: Not good at Python. After editing, it seems it doesn’t notify even when sign‑in succeeds.

~~By default the script notifies every run, which is too noisy. So I made this change.~~

~~Modify chaoxing_auto_sign\local\message.py to:~~

from datetime import datetime

import aiohttp

from config import SERVER_CHAN_SEND_KEY


async def server_chan_send(dataset):
    """server 酱将消息推送"""
    if SERVER_CHAN_SEND_KEY == '':
        return
    
    msg = ("| 账号 | 课程名 | 签到时间 | 签到状态 |\n"
           "| :----: | :----: | :------: | :------: |\n")
    msg_template = "|  {}  |  {}  | {}  |    {}    |"
    
    for datas in dataset:
        if datas:
            for data in datas:
                msg += msg_template.format(data['username'], data['name'], data['date'], data['status'])
                
            params = {
                'title': msg,
                'desp': msg
            }
            
            async with aiohttp.ClientSession() as session:
                async with session.request(
                    method="GET",
                    url="https://sctapi.ftqq.com/{}.send?title=messagetitle".format(SERVER_CHAN_SEND_KEY),
                    params=params
                ) as resp:
                    text = await resp.text()
        else:
            msg = "当前暂无签到任务！\{}".format(datetime.now().strftime('%Y年%m月%d日 %H:%M:%D'))
            break

Too Many Ads on the New Tab? Replace It.

Sun, 05 Sep 2021 00:00:00 GMT

Yep, it's a very simple browser extension that replaces your new tab page.

It uses the official hitokoto API. Each time you open a new tab, it fetches a quote automatically. Great for people who don't want a fancy new tab, but still want a little something.

Stores

Firefox: https://addons.mozilla.org/zh-CN/firefox/addon/%E4%B8%80%E8%A8%80-hitokoto-%E6%96%B0%E5%BB%BA%E6%A0%87%E7%AD%BE%E9%A1%B5/

Chrome: https://chrome.google.com/webstore/detail/keegjkdjgkibioicckjpkocdabpelghf

Edge: https://microsoftedge.microsoft.com/addons/detail/jcamdhjccfhaboefgimleldjdddkmbpa

Open Source

Github: https://github.com/nexmoe/hitokoto-newtab

I Built a Browser Extension with a Younger Girl

Mon, 30 Aug 2021 00:00:00 GMT

She had just finished the college entrance exam, and one day she asked if I knew how to write a browser extension. I had just made one myself and hadn't finished it yet, and I wasn't very familiar with extension development. But she asked for help, so I helped. In the end, the two of us tinkered for a while and completed this extension.

If you use this feature, feel free to participate in the open source project and add the search engines you need 💖

Project Meaning

Prevent some sites from removing OpenSearch just to chase more traffic (e.g., Bilibili)
Add OpenSearch for sites that don't have it
Save you from manually adding it yourself

Features

Add OpenSearch to sites in the list so the browser can add them as search engines. After adding, type the site address in the address bar, then press Space or Tab to search quickly. In Firefox, you need to manually click the site icon with a plus sign to add it to search engines.

Usage

BoTab

Fri, 06 Aug 2021 03:01:10 GMT

An intelligent browser extension that transforms your bookmark content into beautiful new tab pages and navigation pages with one click, making your saved treasures accessible and your browsing more efficient.

https://botab.net/

View product details

Hexo: Previous and Next Posts Within a Category

Thu, 15 Jul 2021 00:00:00 GMT

In the “Book” theme, I treat each category as a book, and posts inside the category as chapters.

In that case, you can’t just use site‑wide posts for previous/next navigation.

So based on Hexo: Output Posts by Category - 折影轻梦 (nexmoe.com), I wrote a snippet to output previous/next posts within the same category.

Here’s the code (comments should make it clear):

<nav class="post-nav">
<% site.categories.map(function(category){  %>
    <% page.categories.map(function(page_category){ %>
        <% if(page_category.name == category.name){ %> <!-- Find the matching category -->
            <% let i = 0;%>
            <% category.posts.sort('-date').map(function(post){ %>
                <% i++;  %> 
                <% if(post.title == page.title){ %> <!-- Find current post index -->
                    <% let ix = 0;%>
                    <% category.posts.sort('-date').map(function(post){ %>
                        <% ix++; %> 
                        
                        <% if(ix == i + 1 && post.title){ %>  <!-- Previous post --> 
                            <div class="old">
                                <span>Previous</span>
                                <a href="<%- url_for(post.path) %>"> <%= post.title %></a>
                            </div>
                        <% } %>
                        
                        <% if(ix == i - 1 && post.title){ %> <!-- Next post --> 
                            <div class="new">
                                <span>Next</span>
                                <a href="<%- url_for(post.path) %>"> <%= post.title %></a>
                            </div>
                        <% } %>
                        
                    <% }) %>
                <% } %>
            <% }) %>
        <% } %>
    <% })%>
<% }) %>
</nav>

My blog is syncing to Tencent Cloud + Community. You’re welcome to join: https://cloud.tencent.com/developer/support-plan?invite_code=28l9ouqqg7vo4

Why I Designed the "Still Books" Theme

Sat, 05 Jun 2021 00:00:00 GMT

In 2019, I read two books: To Live and The Miracles of the Namiya General Store. After that, a seed of love for literature was planted.

Before this, I had never read any extracurricular literature.

Mainly because compulsory education Chinese classes crushed me. I grew up believing I was terrible at Chinese, so I shouldn't even think about reading books.

After university, I finally had a lot of time to read, so I searched for reading lists and read what I liked.

I suddenly realized that literature and Chinese class are not the same thing at all.

Reading Doesn't Force Me to Ask What It Means

Reading doesn't force me to analyze what the author is trying to express.

When we were young, we were taught:

There are a thousand Hamlets in a thousand people's eyes.

But Chinese exams only have one correct answer and require us to analyze from every angle.

But literature tells me who I am. I can choose what I like, experience the meaning myself, and find my own reflection in it.

Why Read

I think the biggest role of reading is to find your own reflection and empathy in books.

We Are All on the Same Road

No matter what you're facing or what situation you're in, there will be someone in a book who's in the same place.

You might be Ah Q, always comforting and deceiving yourself.

You might be hesitating between the moon and sixpence, looking back and forth, trying to build a so-called good life, while the protagonist in the book throws everything away to chase the moon.

You might be Schopenhauer, having your own ideas about life and feeling out of place, but finding your thoughts mirrored by the author.

You might be an adult reading The Little Prince, thinking of your younger self and realizing that you seem to have gotten lost.

The "Still Books" Theme

Compared to Nexmoe, this theme has fewer shadows, blur, and colorful colors, but colorfulness appears in book covers. There aren't many images; the theme focuses on text most of all.

Romanticism Hidden in the Design

More thinking, fewer images. I believe this theme should carry a sense of romanticism, and also the spirit of a practitioner.

When you're young, you're more idealistic-you believe that if you work hard, your dreams will come true, that everything should move toward the good. You believe everything is fair. But reality isn't like that.

After being hit by reality and seeing it clearly, does that mean I should adopt a "can't beat them, join them" mindset, become a realist, and comfort myself with "that's just how the world is"?

The romanticism I believe in should be courageous. It has the courage to face reality, yet does not give up the pursuit of ideals and beauty.

I believe the "Still Books" theme should carry this romanticism. Less fantasy, more reflection and progress. But still a deep love for life.

Why I Designed This Theme

After reading the above, it's easy to understand.

In short:

Love for books
Love for words
Love for thinking
Love for life

Hexo Theme Yet The Books

Sat, 22 May 2021 05:11:53 GMT

View product details

焦虑，生活是否真的如他们所说

Mon, 17 May 2021 10:21:26 GMT

继哔哩哔哩发布《我不想做这样的人》后，又有人出来贩卖焦虑了。当然，每个平台的声音都不一样，哔哩哔哩在这个视频下，你能看到的几乎只有唱好的。但在其他平台，你总能看到完全不一样的声音。

一方面，有人嘲笑，说这些学生还在读书，太天真，没遭受过社会毒打。仿佛自己已经有了很多经验，但只是嘲笑，没有结合自己的经验给出任何建议。深有同感的人纷纷赞同，也一并嘲笑。有意见不一样的，就会被集火。而其他不敢说话的也没经历过的，看了这些除了焦虑，啥也得不到。还有没有经历过，却自以为自己很懂生活艰难困苦的，也会表示赞同，仿佛支持他们贩卖焦虑一样。

而我就是什么也不懂就自认为未来黑暗的人，我记得几年前我可不是这样的。即使生活很普通没啥乐趣，但也对未来怀抱希望。至少这一点已经让我的生活足够幸福，当然这仅仅是精神上感到的幸福，你也可以认为这是自欺欺人，不过这切切实实的让人幸福，那个时候，失眠与我无关。但后来整个互联网都在贩卖焦虑，我当然也沦为被焦虑淹没的牺牲品。如今我也成为了贩卖焦虑的帮凶，企图淹没少年少女们的期许与理想主义。不过那会我又觉得我是正义的，我认为只有这样才能叫醒那些沉迷于理想之中的人。但如今冷静下来许久又反复思考，又不知道自己做的对不对了。我深切的感受到生活中是十分需要对未来怀有期许，对生活怀有热情之人的。至少，仍然很多人都喜欢和怀有热情的人相处。我也是。所以对于美好与理想的追求，绝不该放弃。即使最后发现生活确实如此，也不该变得冷漠。

另一方面，有人在大谈决定论。他们说，生活并不是自己能决定的。自己未来做什么，变成什么样，都不是自己能决定的。他们说的十分坚决没有其它缓和的余地，仿佛我们只能躺平，不必做任何无谓的挣扎。

我也经常看到躺平的人，也时时刻刻准备躺平，加入他们。但每每躺下了一半，又立刻觉得不安，感觉自己必须做点什么。即使我在心底也认为什么也改变不了，但我也必须得做点什么。虽然每次挣扎总是失败的，但我现在仍然认为，即使有一点点挣扎的机会，我也不该放弃这么一点点改变点什么的希望。也许这不过是不甘心，说不定什么时候我就放弃这不甘了。但我相信，绝不会只有些许人有所不甘的。虽然离理想的生活相差甚远，但我认为我们对于美好的向往绝不会消失。

现在，我对美好生活想象确实不如之前。关于未来的焦虑将我蚕食，让我变得冷漠。如今我需要唤醒自己，即使生活正如他们所说那样，我也要醒了，然后热爱这生活。

橡皮擦

Wed, 28 Apr 2021 00:00:00 GMT

我有一块橡皮擦，已经用了很久了。与刚买来时不同，他本是棱角分明，没有沾染上丝毫铅笔的墨色。但在长期使用后，已经实在是分不出八个角来——早已变成了几个曲面。有的两个角甚至已经融合在了一起。

但唯独有一个角，他与众不同，他仍然还是原来那个样子。事实上，我从未用过他。他就和刚买来的时候那样白净，同样的棱角分明却毫不咯手。这是他天生的美丽，如今这美丽居然一直伴随他活到了现在，实在是不可思议。

这让我感到了诧异。这种诧异就像是在学校食堂喝皮蛋瘦肉粥时真的喝到了一大块瘦肉，兴奋地要把这消息告诉同学：“这家粥太棒了，居然有肉！“好让他们下次也来这喝粥。

不知为为什么，我突然想到了一个人。但我实在想不明白为什么一块橡皮擦能让我想到人，这俩分明扯不上什么关系。

这使我莫名地恐惧了起来，我也不知道我在害怕什么。但我的肉体已经变得迟钝了，仿佛被什么抓住要被拽出去。我赶紧丢下这块橡皮擦，跳到床上去，希望睡一觉就能忘掉那些我想不明白的东西。

以前我可是一躺就能睡着的，今天不知怎么回事，发生了这么多奇怪的事情，甚至连觉都睡不着了。我在床上思来想去，无端的恐惧也渐渐变成了愤怒。我想，今天非得把这恐惧给毁灭了这日子才能安稳地过下去。我把愤怒指向了那块橡皮擦，今天的一切都是这块橡皮擦引起的。实话说，这块橡皮倒是不咯手，但却让我十分不适。

我从床上跳到桌边抓起这块橡皮就要让他受到应有的惩戒。而那个特别的棱角仍然在那里，十分显眼。我瞬间明白了，原来这一切都是因为他。我发疯似地把他按在纸上，他硬撑着身子仿佛在做最后的抵抗，但在我的蛮力之下他只得变成碎屑而不复存在。随着他消逝的，还有我的愤怒与恐惧，好像刚刚灭掉的是一生之敌，等着我的生活将一帆风顺、无限美好。

Hexo: Output Posts by Category

Thu, 15 Apr 2021 00:00:00 GMT

This article shows how to output posts under a specific category in Hexo.

Questions answered

https://www.zhihu.com/question/404351568

https://segmentfault.com/q/1010000017758828

Preface

The official helper function list_categories isn’t enough, so I used the categories variable directly.

I haven’t learned Node.js, so this is mostly trial and error.

I first logged site.categories.data with console.log(). It looks like this:

After some tinkering, I found this object is used via map().

Output category titles

<% site.categories.map(function(category){  %>
    <h1><%= category.name %></h1>
<% }) %>

Output post titles

<% site.categories.map(function(category){  %>
    <h1><%= category.name %></h1>
    <% category.posts.map(function(post){  %>
		<h2><%= post.title %></h2>
    <% }) %>
<% }) %>

Variable	Description	Type
`post.title`	Page title	`string`
`post.date`	Page creation date	Moment.js
`post.updated`	Page update date	Moment.js
`post.comments`	Whether comments are enabled	`boolean`
`post.layout`	Layout name	`string`
`post.content`	Full page content	`string`
`post.excerpt`	Page excerpt	`string`
`post.more`	Content after the excerpt	`string`
`post.source`	Original source path	`string`
`post.full_source`	Full original source path	`string`
`post.path`	Page URL (without root path). Often used as `url_for(post.path)` in themes.	`string`
`post.permalink`	Full page URL	`string`
`post.prev`	Previous page. `null` if this is the first page.	`string` or `null`
`post.next`	Next page. `null` if this is the last page.	`string` or `null`
`post.raw`	Raw post content	???
`post.photos`	Post photos (for albums)	`array`
`post.link`	External link (for link posts)	`string`

The Design Philosophy of the Nexmoe Blog Theme

Sun, 04 Apr 2021 00:00:00 GMT

Nexmoe blog theme is a Hexo-based blog template I wrote. But it's not just a template. More importantly, it is my work. It is an artwork.

Art (Latin: Ars; French/English: Art; Spanish/Portuguese: Arte; German: Kunst) refers to an expressive mode of creating objects, environments, images, actions, or sounds with aesthetic qualities by combining and balancing skills, will, imagination, and experience. It also refers to the human process of expressing perceived and shared feelings of beauty or meaningful emotions and consciousness, and of distilling and presenting personal or collective experiences. [1].

Based on the Wikipedia definition above, from my perspective it's natural to classify my blog theme as an artwork. That's not to say I think I'm an artist-I'm still far from a real artist. But Nexmoe is absolutely an artwork created wholeheartedly by an ordinary person like me.

Its artistic value is not only the surface-level feeling of "this theme looks kind of nice," but the deeper emotions and personal traits embedded within it.

In fact, many people don't like my theme because they think it uses too many colors-red as the primary color plus various other colors. They think it isn't minimal enough. I'm also a minimalist, and I often wonder whether I should remove the extra colors and even go black-and-white. Black-and-white palettes can create themes that are clean, mature, and minimal. Many nights I lay in bed unable to sleep, thinking about this. But in the end I decided against it.

The Story of Red

The theme uses red as the primary color: RGB 255/78/106. It's a very intense red, chosen simply to express my passion and love. I once appeared cold on the surface, but inside I was always full of passion. During a period in high school my life was a mess, and I chose to change. I chose to face my inner self and live-to accept my passion openly and stop compromising with the outside world. That's when the main color of my theme shifted from pink to red.

Colorfulness and Infinite Possibilities

Besides red, the theme uses many other colors. In fact, I used the seven colors of the rainbow-red, orange, yellow, green, cyan, blue, purple-to express multifaceted love and infinite possibilities. I'm not someone who can focus on just one thing. I can't become that kind of person. There are so many wonderful things in life-why should I spend every day working on just one? Whether it's the pure music in Miyazaki films, electronic music, or classical, I love them all. I also love vaporwave, anime theme songs, movie theme songs, folk songs, and even Wang Feng's music.

I love many things: anime, movies, American TV, Japanese TV, Korean TV, Chinese TV, as well as Chinese novels, Japanese novels, American novels, and novels from around the world. Romanticism or realism-if it's well written, I read it.

Because of insomnia, I research insomnia-related issues-reading books, searching materials, browsing Wikipedia and CNKI.

Because my health isn't good enough, I look up information to avoid health problems and seek ways to be healthier.

I write code, read books and literature, cook, sometimes play badminton, sometimes ride a bike. I love science, literature, art, and life even more.

Sometimes I think about giving up-giving up many things. I wonder if I'm even suited for anything. There are far more talented programmers; literature is endless; and as for art, I have almost no ability to create. Sometimes I even feel like giving up on life. But in the end, I didn't give up anything. Because I love all of this.

Recently I've been refining the theme with a "wireless" concept. "Wireless" implies "no boundaries," and also represents infinite possibilities.

Idealism Hidden in the Design

The theme background is a blurred image. To me, blur often implies ideals or fantasy. Many things aren't beautiful enough, but if we blur them, we can believe they are-like skin smoothing in beauty photos.

Blur also brings a dreamy feeling. In dreams, many things can be beautiful. We often wake up with tears not because of nightmares or fear, but because the beauty in dreams contrasts sharply with reality. I use blur simply to create a sense of beauty.

Unrestrained, Firmly Being Myself

When I first started this theme project, I decided to open source it. Open source is freedom. No clients, no rules to follow. I only need to follow my heart in design. I often wanted to build a color system so users could better express their feelings and emotions. I never did it, probably because I'm lazy. But if you want to, you can fully modify the theme's style to match your personality.

Here are some works I greatly admire:

End

Perhaps one day the Nexmoe theme's style will change again. Maybe it's just that I changed.

A Concept for Music Emotion Analysis

Mon, 08 Mar 2021 00:00:00 GMT

With fewer and fewer ways to relax without smoking, drinking, or gambling, music has become a more important form of entertainment for young people.  When we listen to music, we first listen to the emotion. And not just music-most artworks are full of emotions. Sometimes we need music that matches a mood or a scene. But beyond searching by title, music currently has few other ways to search. As an average user with an ever-growing playlist, I think music should have more metadata to help search-for example, emotional tags.

User Pain Points

Anyone who loves music and has listened for years will end up with a huge playlist. I've saved about 2,000 songs myself.
Many song titles aren't in Chinese-they can be in various languages or even symbols. When trying to find a song we once heard, we often have to scan the entire playlist with our eyes (I do this often) and still can't find it.
Video creators need music to match a scene's mood, but searching by vague impressions is very difficult. Sometimes you just can't find the right track.

Potential User Groups

Heavy music lovers. Wake up, listen to music; off work, listen to music; exercise, listen to music; sleep, listen to music. Emotion analysis could help provide suitable scenarios for each track.
Video creators. They need music that matches the atmosphere.
Remixers. They also need to match music to a mood.
Everyone. Everyone wants the right atmosphere and emotion.

Existing Similar Examples

Playlist Assistant in NetEase Cloud Music

Not sure how it categorizes; it's not very granular, and the emotion accuracy isn't high, so it's not very useful.

Smart Playlists in QQ Music

This is okay. It analyzes instruments and rough emotions, but still doesn't feel precise.

Possible Implementation Methods

Analyze the Music Itself

AI is strong today, so analyzing music isn't impossible. But it's likely inaccurate. Right now, I don't believe AI can truly feel the emotions inside art.

Analyze Comments

I think this is the method most people don't consider. At the moment, AI is better at analyzing sentiment in language than in music itself. And there are already many services for text sentiment analysis. I once saw DIYgod use a text sentiment analysis service.

Other Music Metadata

Instruments and genres should be relatively easy to analyze. If not, we could scrape MOO Music.

Farewell 2020!

Sat, 06 Feb 2021 00:00:00 GMT

The Lunar New Year is almost here, and only now I’m writing my 2020 year-end.

NetEase Cloud Music ID: 419485785

There were many reasons for the delay. But the main reason is that 2020 summaries seem to have been written to death—mostly about the pandemic and misfortunes.

My first reaction to 2020 was naturally the pandemic and the various misfortunes around me. There was misfortune for all of humanity and for myself. If I listed them all, it would take forever. So this time I decided to write about some of the more positive things that happened to me this year.

🎉 Becoming an Adult

In January this year, I finally turned 18. I had looked forward to adulthood for a long time. After becoming an adult, there were many things I could do that I couldn’t before—though there were also more hardships.

📷 Photography

In February, I stayed at home for a long time. I was full of frustration and sadness. I had always wanted a camera, and it felt like the right moment, so I used years of savings to buy a second-hand camera.

https://nexmoe.tuchong.com/

{% gallery %} {% endgallery %}

🐱 Adopting a Cat

At the end of April, a friend asked if I wanted to adopt a cat. His friend could no longer keep it, so I adopted it. At that point, I had already been stuck at home for four months because of the pandemic. The cat’s arrival brought some joy to my life.

{% gallery %} {% endgallery %}

🏸 Badminton

In May, school finally started and I had a chance to leave home. Everything outside felt like another world. After being shut in for so long, we craved socializing and exercise, like we’d just been released from prison. It was also then that I started truly playing badminton. At the time I couldn’t even serve, let alone rally. Now at least I can serve.

🚅 Solo Trip

In August, all Wuhan attractions were free. I had planned back in 2019 to go to Wuhan for a concert in the summer of 2020, so I took a two-day solo trip. But because of the pandemic, many concerts were canceled, so I only went to one makeshift concert. It wasn’t great and didn’t make me happy. Then I visited Yellow Crane Tower and East Lake—East Lake is truly beautiful.

📕 Reading

After finishing my first book in 2019, I started reading more and more in 2020. I read the following books in 2020:

{% gallery width:130 %} {% endgallery %}

🎵 Music

This year I got deeply into classical music; Chopin is amazing. http://music.163.com/playlist?id=5202011193

On the last night of 2020, I still didn’t realize the year was about to end, until the TV’s New Year countdown began. I said to myself, “Ah, so 2020 really is over—I didn’t even feel it ending.”

After that, the unknown 2021 began.

Adventure Puzzle Game “Inside”

Fri, 25 Dec 2020 00:00:00 GMT

It seems to be a story about a little boy used as an experiment trying to escape a desolate island?

This post was written on June 29, 2017, refreshed on Dec 25, 2020. “Inside” was free for one day on Epic today.

Wikipedia Summary

“Inside” is a puzzle-platformer in which players control an unnamed boy in a red shirt exploring a surreal, mostly monochrome 2.5D world with occasional splashes of color. Players can walk, run, swim, climb, and interact with objects. Midway through the game, the boy gains the ability to mind-control bodies to solve puzzles. If players fail to solve certain puzzles in time—such as being hit by a hunter’s tranquilizer dart, caught or eaten by dogs, or drowning—the boy dies. Like “Limbo,” the boy’s death is depicted with unsettling animation, and the game restarts from the nearest checkpoint. Some scenes contain hidden rooms with small orbs; if all orbs are deactivated during play, a secret ending is unlocked.

Why I Bought Inside

During a summer sale of some finance app, I heard “Inside” was good, so I bought it.

The Normal Ending

This blob of flesh seems to be formed by many experimental subjects like the boy? What makes the game thought-provoking is:

It looks like a puzzle game about escaping a deserted island, but in the end you were just a test subject designed by others, and you still die.

The Hidden Ending

This ending is similar. The boy fails to escape the island. When he pulls the main power, he realizes he is just another experimental subject—no power means no life source.

My Takeaway

From knowing nothing at the start to learning the truth step by step, you realize the early struggle was meaningless.

Some Chilling Thoughts

What’s scary is that when the boy controls Experimental Subject #1, Subject #1 can also control Subject #2. So if you’re controlling your computer, who’s controlling you?

愿你出走半生，归来仍是麦田里的孩子

Sun, 29 Nov 2020 00:00:00 GMT

——《麦田里的守望者》书评

一开始看这本书，我摸不着脑袋，因为我会看了很久很久却不知道他的主题是什么。他也没有目录啥的，就简单的分成了二十六章，每一章标题就是序数词。

先简单介绍一下本书内容，本文的主人公霍尔顿出身于一个富裕的家庭。大人们强迫他好好读书，为的是出人头地，而在学校里一天到晚干的，就是谈女人，酒和性，他看不惯周围的一切，他讨厌任何人。如果你跟他说诸如“祝你好运”，“你好”之类的客套话，他会觉得你虚伪。根本没心思读书，还老是挨罚，他胆小怯懦，到他第四次被开除时，他不敢回家。便一个人去了纽约，住小客店，逛夜总会，召妓女，与他虚荣的女友搂搂抱抱，与此同时，他又十分沮丧，企图逃出虚伪的世界去追寻纯洁与真理。他想逃离这虚伪的地方，去到别的地方，最后被妹妹所挽留。

最开始能读下去这本书，不过是能从中找到同感。也同样讨厌着周围虚伪的一切，讨厌客套的话，讨厌着被别人认为理所当然正确的事情。每个人在从小孩子到成年的过程中都似乎曾经经历过这一阶段，他们被未知的世界吸引，突然闯到成年人的世界，却又渐渐的开始厌倦这无法被自己理解的世界。

对于刚刚成年，内心却不过还是个孩子的人来说，成年人的世界让他们一时无法接受。文章主人公曾经的老师说：”一个不成熟的人的标志是他愿意为了某个理由而轰轰烈烈地死去，而一个成熟的人的标志是他愿意为了某个理由而谦恭地活下去。“这是作者通过老师这一角色来解释从幼稚到成熟的这一蜕变过程。而对于绝大多未经世事的人来说，这显然是很难接受的。

“我的职务是在那儿守望，要是有哪个孩子往悬崖边奔来，我就把他捉住——我是说孩子们都在狂奔，也不知道自己是在往哪儿跑，我得从什么地方出来，把他们捉住。我整天就干这样的事。我只想当个麦田里的守望者。我知道这有点异想天开，可我真正喜欢干的就是这个”小说写到这里，才真正的表示出了它的主旨，主人公想在麦田里守望着，防止纯洁的内心受到污染。对于任何一个刚刚成年的人来说，都是难以接受突然的蜕变的。《熔炉》也曾经表达过“我们努力奋斗不是为了改变世界，而是不让世界改变我们。”人活着除了物质生活外，还要有精神生活，而且在一个比较富裕的社会里，精神生活往往比物质生活更为重要。

特别对于现在这个经济高速发展的社会中，我们更需要追求精神的真善美，而不是不断追求物质。在社会发展的过程中，我们得固守自己人性中的善良，不被社会所改变。

Things I Once Made with Easy Language

Fri, 13 Nov 2020 00:00:00 GMT

It was December 2015, I was in middle school (7th grade). Easy Language was popular then. I got into it through the game “300 Heroes.” Even back then, my unique ideas about design and UI started to show.

The UI in Easy Language relied entirely on Photoshop-drawn components, so I started learning Photoshop then.

I hadn’t really touched the internet yet; I just liked to tinker. In 2015 I also learned a bit of video editing and cut some videos nobody watched. I even built a forum.

The source code and assets should still be on my old Western Digital Blue drive, but it had too many bad sectors so I stopped using it. It’s been sitting on my desk for years.

Oneindex Theme

Thu, 12 Nov 2020 00:00:00 GMT

Back when I used Oneindex, the default UI was... so I just threw together a quick theme.

Yep, just screenshots. The Oneindex project itself is already 404, but you should still be able to find screenshots of my theme online.

A Template for a Web Design Contest

Thu, 12 Nov 2020 00:00:00 GMT

A template I casually made when participating in a page design contest.

Apparently written in March 2019, maybe even earlier.

Github

https://github.com/nexmoe/template-nature

Star welcome.

Use different colors to highlight different names to help memorize characters. Each character's color should be fixed from the start, and everyone should have a unique color.

For example: <span style="color: red;">Steve Jobs</span>, <span style="color: blue;">Steve Wozniak</span>

You can also use different background colors to achieve the same effect.

Inspiration

Japanese anime. As someone who has trouble recognizing faces, I often can't tell characters apart-unless I rely on clothes or colors. Many series assign different hair colors to each character to distinguish them. That separation is very effective.

Why I Thought of This

While reading Steve Jobs, I kept flipping back to the character list. Aside from the main characters, I could barely remember anyone. Translated names are just too hard to memorize.

So I thought about how to solve this before going to bed.

That's how this feature idea came out.

I haven't written the code part.

Possible Implementation

There are quite a few algorithms that can detect names in text.

Extract each name, define a color for each character from the start, and keep it consistent throughout the article.

Possible Issues

A character might appear with a full name, a shortened name, or even a nickname. That may require users to distinguish, or we can boldly hope for future AI.

PHP Hourglass Algorithm

Fri, 30 Oct 2020 00:00:00 GMT

L1-002 Print Hourglass

L1-002 Print Hourglass (20 points)

Write a program to print an hourglass shape using a given symbol. For example, given 17 "*", print:

*****
 ***
  *
 ***
*****

An “hourglass” means each line has an odd number of symbols; each line is center‑aligned; adjacent lines differ by 2 symbols; the count decreases down to 1 then increases back up; the first and last lines have the same number of symbols.

Given N symbols, you may not be able to form a perfect hourglass. You should print the largest possible hourglass using as many symbols as possible.

Input format:

One line containing a positive integer N (≤1000) and a symbol, separated by a space.

Output format:

First output the largest hourglass using the given symbol, then output the number of remaining unused symbols on the last line.

Sample input:

19 *

Sample output:

*****
 ***
  *
 ***
*****
2

My trash algorithm

<?php
    $arr = explode(' ',rtrim(fgets(STDIN)));
    $n = 0;
    for($x=0; $n<$arr[0]; $x++){
        $t = $x*2-1;
        if($x > 1){
            $n = $n + $t*2;
        }else{
            $n = $n + $t;
        }
    }
    $n = $n - $t*2 + 1;

    $x2 = $x - 1;
    while($x2>0){
        $x2 = $x2-1;
        $x3=$x2*2-1;
        if($x3>0){
            for($spa=$x-$x2-2; $spa>0 ; $spa--){
                echo " ";
            }
            for($i=0; $i<$x3 ; $i++){
                echo $arr[1];
            }
            echo "\n";
        }
    }
    $x2 = $x - 2;
    while($x2>0){
        $x2 = $x2-1;
        $x3=$x2*2-1;
        if($x3>0){
            for($spa=$x-$x2-2; $spa>0 ; $spa--){
                echo " ";
            }
            for($i=0; $i<$x3 ; $i++){
                echo $arr[1];
            }
            echo "\n";
        }
    }

    $x2 = 0;
    $x3 = $x2*2-1;
    for($spa=$x-$x2-2; $spa>0 ; $spa--){
        echo " ";
    }
    for($i=0; $i<$x3 ; $i++){
        echo $arr[1];
    }
    echo "\n";

    $x2 = $x - 1;
    while($x2>0){
        $x2 = $x2-1;
        $x3=$x2*2-1;
        if($x3>0){
            for($spa=$x-$x2-2; $spa>0 ; $spa--){
                echo " ";
            }
            for($i=0; $i<$x3 ; $i++){
                echo $arr[1];
            }
            echo "\n";
        }
    }

    echo $arr[0]-$n;
?>

A Simple Makeover for Saladict

Thu, 08 Oct 2020 00:00:00 GMT

Saladict styles, themes, skins.

Github: https://github.com/nexmoe/saladict-skin

Saladict -> Lookup panel -> Customize lookup panel styles

.menuBar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 8px;
}
.menuBar-Btn_Icon,.menuBar-Btn_Icon-fav {
    fill: #222;
}
.mtaBox-TextArea-Wrap,
.mtaBox-DrawerBtn,
.waveformBox.saladict-external,
.dictItemHead-Logo,
.menuBar-SearchBox_Wrap,
.menuBar-Btn[title="查单词"] {
    display: none;
}
.dictItem {
    padding: 0 10px;
}
.dictItem:first-child {
    padding-top: 10px;
}
.dictItem-Body {
    padding: 0 3px;
}
.dictItemHead {
    background: #eee;
    border-radius: 6px;
    padding: 6px;
    height: auto;
}
.dictPanel-Root {
    box-shadow: rgba(0,0,0,0.2) 0 7px 21px 2px;
}

A Product Design for a Third-Party Shopping Platform

Sat, 03 Oct 2020 17:42:00 GMT

A shopping product feature idea I thought of during the pandemic when choosing masks.

Calculate unit price to compare easily.

Test reports and automatic production standards are meant to prove product safety.

关于《后浪》的看法

Tue, 05 May 2020 00:00:00 GMT

哔哩哔哩最近发布了一个广告《后浪》，作为 00 后的我看的时候也感觉挺澎湃的，里面还有几个我喜欢的 UP 主。

但是看完了，回归理智过后开始思考，思考这些前浪并不是我，他们只是顶尖的那部分。看的时候我很有代入感，因为演讲说的“后浪”指的就是年轻人，于是就轻易的把自己当作视频里面的那一批，但是一回到现实就会明白，所谓的“后浪”根本不是大多数人更不是自己。

引用知乎用户：云舞空城的一句话

那些站在时代浪尖上的青年，永远只是少数的一群——更多的青年，将青春的能量耗散在无休止的事情上：为学业拼搏，为事业拼搏，为更好的生活拼搏，慢慢的奋斗，消散在中年人的肚腩里，你甚至不会注意到他们的存在。

关于视频带来的感受

其实仔细想想这个视频目的，就能明白为什么这个视频要让年轻人有代入感。

首先这个视频本身就是一个商业广告它的目的就是为 B 站引入更多的 UP 主来投稿。追求自由、追求梦想不过是利用了所有人都渴望的东西。但其实，谁不想追求自由、追求梦想，别说我们这一代，上一代，上上一代，有哪一代人不想追求自由、梦想。

本来我也想写写，这个视频太过于理想，而不适合大多数人。不过看到知乎已经有很多人写了，我就不写了，我就写写我的看法吧。

落差感带来的焦虑

说实话，看完视频，再看知乎，会感到理想与现实巨大的落差感。感觉一下就被拽回现实，看完知乎，首先就是焦虑。

与视频里面的年轻人相比，自己不过是个小地方的年轻人，人生没什么多余的选择，只有读书一条路可以走，并且成绩也没有那么好。虽然我知道我想做什么，但我不知道未来能做什么。他们可以出国、跳伞、全世界到处跑，这是我完全没法想象的。想一想自己在全中国也就去过 3 个省，坐过最高级的交通工具也不过是旅游的时候坐的地铁。

我觉得我可以代表年轻人的大多数，是有梦想却迷茫、成绩一般般、家庭一般般、见识也不够多的。

我的观点

对于生活，首先我觉得是完全没有必要焦虑的，视频里光鲜亮丽的人物只是少数而已，大多数都是和我们一样的年轻人，所以我觉得完全没必要焦虑。

或许你会觉得我不思进取，但是我觉得只要知道焦虑是没有任何用的，就明白这样想其实也没什么错。

年轻人应该还是要不失活力的，虽然我不如那些人拥有资源、拥有能力。但我还有我所在意的东西、我所热爱的东西，其实这就足够了。

联系上文，部分焦虑来自于“我知道我想做什么，但我不知道未来能做什么。”对于这种情况，我觉得最好的解决方法就是把自己热爱的事情培养成能吃饭的工具。

喜欢绘画就让自己的绘画能力能吃到饭，可以去做平面设计、可以去做插画师。热爱运动，就努力考上军校。

如果自己热爱的事情不能用来吃饭，那就把自己空余的时间用来培养爱好。

我觉得相比衣食无忧、有房有车，不如一辈子都能做自己热爱的事情。

人生有何意义，其实只要明白我确实存在，且有我所关心的人或事情、这就足够了，人只要能做自己热爱的事情，这就足够了

互联网让信息流通更加容易，我们更容易看到别人的幸福。这给我们一种错觉，认为别人的生活都是这么美好的。但现实是我们的国家还只是发展中国家，并不能达到每个人都是富裕的。

我们没必要焦虑，也千万别去焦虑。我们只需要更清楚的认识现实，然后仍然继续努力下去，至少在为自己热爱的事情而奋斗的时刻是幸福的。

本文只是一个年轻人的思考与想法，思维还不够成熟，还有很多欠缺的地方

Blog, What Did I Optimize?

Sun, 09 Feb 2020 16:10:00 GMT

My blog performance was always terrible, so I spent two days optimizing it. Here are the results.

First, the scores

Remove some dependencies

❌ Remove fancybox ❌ Remove SmoothScroll ❌ Remove jQuery ❌ Remove Pjax It's already 2020, I don't think jQuery is needed. Edge now has good native smooth scrolling, and SmoothScroll feels laggy on macOS, so I removed it. I removed fancybox because I rarely use it - opening the original image with right-click is more comfortable.

Lazyload optimization

Before this, my blog homepage had a problem: image loading caused layout jumps. So I set width and height for every image to reserve space and prevent jitter. It was a bit troublesome though. Previous front-matter

---
title: 博客，我优化了什么？
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
---

Current front-matter

---
title: 博客，我优化了什么？
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
coverWidth: 1920
coverHeight: 1206
---

I also added a non-linear animation to Lazyload to make it feel happier.

Resource merging

This was convenient because jsdelivr supports combining multiple libraries into one request. For example: https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/css/style.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css So I combined all CSS and JS into one each, reducing request count and improving speed.

Image compression

My homepage images were just for eye candy - why keep full-resolution lossless? So I compressed all images to 920px width. Huge size reduction. Speed skyrocketed.

Dependency simplification

The theme depends on mdui, which loads fonts. I localized it and removed color classes, helper classes, and font classes. Speed improved a bit.

Rewrite some JS in nodejs

Previously, Lazyload and some functions were written in JS and ran at runtime, costing performance. So I rewrote some parts in nodejs. Hexo finishes the work during build, so the browser doesn't need to render it.

Typecho Theme Nexmoe

Sun, 25 Aug 2019 14:31:32 GMT

A rather special Typecho theme.

NetEase Cloud Music ID: 5027380

GitHub

https://github.com/nexmoe/typecho-theme-nexmoe Stars, contributions, and feedback are welcome.

Getting updates

Use “Watch: Releases only” to get new version notifications.

License

Apache License 2.0

Future updates

I’m in high school. Stars and issues are my motivation to keep updating. Join the group 482634342 to hang out.

Internationalization

Chinese translations are fairly complete; other languages are not. Contributions are welcome. Language files are in languages, use zh-CN.yml as a reference for translation.

Photo gallery

![珠江](https://i.loli.net/2018/09/01/5b8a59551a4d8.jpg)|![珠江](https://i.loli.net/2018/09/01/5b8a6ab761262.jpg)|![某收门票公园](https://i.loli.net/2018/09/01/5b8a5994b6e28.jpg)
- | - | -
![某收门票公园](https://i.loli.net/2018/09/01/5b8a5994b6e28.jpg)|![某收门票公园](https://i.loli.net/2018/09/01/5b8a5c8c34439.jpg)|![珠海](https://i.loli.net/2018/09/01/5b8a59d5c50f3.jpg)

The idea is to insert images in a Markdown table.

Image lightbox

Automatically enables a lightbox for every image in the post.

Post cover image

Assign cover in front‑matter, for example:

---
title: Hello World
pubDate: 2013/7/13 20:46:25
cover: https://i.loli.net/2019/07/21/5d33d5dc1531213134.png
---

Beautify Your Terminal

Fri, 09 Aug 2019 18:49:03 GMT

The built-in PowerShell supports custom colors now, but it's still ugly. This post helps you build the most beautiful terminal on Windows 10.

Install Fluent Terminal (Terminus recommended)

Fluent Terminal is a terminal based on UWP and web technologies. Compared with Terminus, it uses fewer resources, has a Chinese translation, and a GUI settings page.

Download the latest here https://github.com/felixse/FluentTerminal/releases

Unzip anywhere, open the folder, right-click Install.ps1 and run with PowerShell, choose Sideloading to install

Installation complete.

Install Terminus

https://eugeny.github.io/terminus/

Install oh-my-posh and posh-git

posh-git: integrates git into PowerShell oh-my-posh: the main beautification star, with colored arrow prompt

Set-ExecutionPolicy Bypass
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

Enable oh-my-posh and posh-git

Import-Module posh-git
Import-Module oh-my-posh

Set theme

Set-Theme Agnoster

Available list

Agnoster
Avit
Darkblood
Fish
Honukai
Paradox
PowerLine
robbyrussell
Sorin
tehrob

Print the profile path

$profile

Open the file at that path, add the config and save

Import-Module oh-my-posh
Set-Theme Agnoster

Open Fluent Terminal to see the result

Hexo Theme Nexmoe

Mon, 05 Aug 2019 04:25:35 GMT

View product details

Pray For KyoAni

Sun, 21 Jul 2019 10:34:00 GMT

On July 18, the Kyoto Animation arson attack happened. When I first heard the news, I thought, “This can’t be real.” But it was confirmed, and I could only face the reality. The tragedy has already happened, and there isn’t much I can do. I’m writing this post as a record.

The Kyoto Animation arson attack (Japanese: 京都アニメーション放火事件) was an arson and murder incident that occurred on July 18, 2019 at Kyoto Animation’s Studio 1 in Fushimi Ward, Kyoto, Japan. A 41-year-old man (born May 16, 1978), Shinji Aoba, poured gasoline inside the studio, triggering an explosion and massive fire. The three-story building was completely destroyed, resulting in 34 deaths and 35 injuries (including the attacker).

NetEase Cloud Music ID: 534064298

Event Details

https://zh.wikipedia.org/wiki/%E4%BA%AC%E9%83%BD%E5%8B%95%E7%95%AB%E7%B8%B1%E7%81%AB%E6%A1%88

Kyoto Animation Works I’ve Watched

Violet Evergarden (recommended by others; I didn’t watch for a long time, then finally did and felt like I found a treasure — the animation is superb)
Beyond the Boundary (watched back when I wasn’t a hardcore otaku yet — really good)
Love, Chunibyo & Other Delusions (I think I finished it, but it’s been a long time)
A Silent Voice
Myriad Colors Phantom World
Hyouka (didn’t finish)

Flowers

Daisy (my aromatherapy, my favorite flower)
Violet

Beyond the Boundary

I watched it long ago. As a short-hair enthusiast, I loved it. And “Daisy,” the ending song, is god-tier.

NetEase Cloud Music ID: 28018269

Violet Evergarden

The art style is just amazing and gave me a bit of warmth while I was still in school.

NetEase Cloud Music ID: 547973265

PHP & Vue.js Confession Wall

Sun, 14 Apr 2019 13:38:00 GMT

A lightweight anonymous confession wall mini‑app built with Vue.js.

License

Apache License 2.0 https://github.com/nexmoe/wall-public/blob/master/LICENSE

Introduction

A lightweight anonymous confession wall mini‑app built with Vue.js.

Author

折影轻梦 (Nexmoe), released under the Apache License.

Demo

https://wall.chainwon.com/
Feel free to add your deployed site link in issues or pull requests.

Screenshots

Requirements

A PHP‑enabled server, PHP 7+ recommended
An Apache‑enabled server

Installation

Download the zip from https://github.com/nexmoe/wall-public/releases
Unzip into the website root
Visit domain/install.php and fill out the form to install

PWA support

The service‑worker is already configured. Just update /static/manifest.json.

Future updates

I’m in high school. Stars and issues are my motivation to keep updating. Join the group 482634342 to hang out.

Community

User group: 797996017

2018 Has Come to an End

Tue, 01 Jan 2019 00:00:00 GMT

Finally, I made it to 2019. 2018 has come to an end too. Back in 2017 I wanted to do so many interesting things. I was still optimistic then, still full of longing.

But what can I do now that I’ve become like this? Life is always full of regrets. I don’t know if I can still gather the courage like before to welcome the new year.

NetEase Cloud Music ID: 1293886117

Second year of middle school, second year of high school—those are both “chuunibyou” ages. They say it’s when the brain is most out of whack, and whether you sink or… this period can be crucial. Perhaps my current state is like the protagonist in “妄想症 Deliver Me”—I can’t get interested in anything: games, studying, code, anime. Instead I’m obsessed with Mandarin pop music and all kinds of films.

Note: “妄想症 Deliver Me” was a gift from 黎明.

About Today

Today I watched Spider-Man: Into the Spider-Verse. It’s a comedy, but parts of it really moved me, though the comedic style snaps you out of sadness instantly. It happened several times. Maybe I felt it differently—the kids next to me laughed the whole time, and their parents too.

Miles: “If it doesn’t fit, can I return it?” Stan Lee: “It always fits. Eventually.”

Miles: “How will I know I’m ready?” Peter Parker: “You won’t. It’s a leap of faith.”

Anyone can wear the mask. Anyone can be Spider-Man.

NetEase Cloud Music

At the End

Sigh, I can’t really keep writing. I just want to find a place where I can forget everything, do nothing, and think about nothing. These past months I’ve been sleeping late because I can’t fall asleep and I always think too much at night. I don’t know how to get back to normal. I want my brain to shut down, but it refuses.

What should I do? 2018 will be over in just a few minutes. How should I face the coming 2019? I really want to become a gentle, optimistic, outgoing person. But can I?

New Year Steam Game Giveaway (Ended)

Sun, 23 Dec 2018 23:44:00 GMT

Finally, 2018 is coming to an end. Back in 2017 I wanted to do so many interesting things, and now many of them still weren’t realized. But what can you do? Life is full of regrets. Let’s gather the courage to welcome the new year.

NetEase Cloud Music ID: 1709302

First

You have to make sure you can set aside time to play if you win. Don’t treat it lightly just because it’s free.

Especially To The Moon—it can be finished in under 5 hours, but you might not understand the story in one run. It’s a story-driven game with almost no gameplay. If you don’t set aside a full 5 hours to play calmly, you won’t experience its meaning.

In short, I hope winners will take the game seriously.

Draw Date

January 2, 2019

How to Participate

Add me on Steam http://s.team/p/cfgg-gbnr/BWCTKBWQ
Leave a comment on this post

Add me on Steam soon

Prize

Don’t Starve Together, To The Moon, Portal 2, Castle Crashers, Left 4 Dead 2…

One of the above. They’re all relatively cheap, and that’s all I can afford to give.

Ten copies in total.

How the Draw Works

PHP’s rand() Only one comment per person. Winners will be replied to in the comments. Please fill in a valid email address for receiving.

Feels like we should wait until at least 100 participants...

If you don’t add me on Steam, you’re disqualified...

Related Social Platforms

TG: https://t.me/chainwon

QQ Group: 482634342

https://nexmoe.com/1070.html

Typing on mobile is hard, and I’m still in school...

Which Is Stronger: Darkness or Light?

Sun, 09 Dec 2018 02:40:00 GMT

Which is stronger, darkness or light?

Sat, 24 Nov 2018 18:04:00 GMT

if in flow control is a simple logical condition, but with multiple conditions it's easy to create deep if nesting. The logic becomes complex and confusing.

Evil nested if

<?php
$a = array(
    'state' => '1',
    'notice' => '注册成功！',
);

if ($_GET['username'] != '') {
    if (strlen($_GET['username']) > 4 or !strlen($_GET['username']) < 11) {
        $name = array('root','admin','GETmaster','master','webmaster','mixcm','administrator','sb','shabi');
        if (!in_array($_GET['username'], $name)) {
            if (preg_match("/^[a-zA-Z\s]+$/", $_GET['username'])) {
                $a['state'] = '0';
                $a['notice'] = '用户名必须为英文！';
            }
        } else {
            $a['state'] = '0';
            $a['notice'] = '非法用户名！';
        }
    } else {
        $a['state'] = '0';
        $a['notice'] = '请输入大于4字符，且小于11个字符的用户名！';
    }

} else {
    $a['state'] = '0';
    $a['notice'] = '用户名不能为空！';
}

echo json_encode($a,JSON_UNESCAPED_UNICODE);

So in real work, we try to avoid this. That's where goto and table data come in.

Clear logic
Easy to modify later
But avoid overusing goto; recommend only one label. In this example, only end is defined.

Solve with goto (the following code uses table data):

<?php
$a = array(
    'state' => '1',
    'notice' => '注册成功！',
);

if ($_GET['username'] == '') {
    $a['state'] = '0';
    $a['notice'] = '用户名不能为空！';
    goto end;
}

if (strlen($_GET['username']) < 4 or strlen($_GET['username']) > 11) {
    $a['state'] = '0';
    $a['notice'] = '请输入大于4字符，且小于11个字符的用户名！';
    goto end;
}

$name = array('root','admin','GETmaster','master','webmaster','mixcm','administrator','sb','shabi');
if (in_array($_GET['username'], $name)) {
    $a['state'] = '0';
    $a['notice'] = '非法用户名！';
    goto end;
}

if (!preg_match("/^[a-zA-Z\s]+$/", $_GET['username'])) {
    $a['state'] = '0';
    $a['notice'] = '用户名必须为英文！';
    goto end;
}

end:
echo json_encode($a,JSON_UNESCAPED_UNICODE);

Cat UI - The Four Seasons Cat (Paid)

Tue, 02 Oct 2018 00:39:00 GMT

After passing through the four seasons, looking back, I found that only the cat was still there waiting for me...

Copyright Statement

!!! <span style="color: red;">Paid theme. Reselling is forbidden. Do not modify copyright. Commercial use is allowed. You may modify for personal use only. Do not modify content in #sider-copyright, and do not modify content in sider.php. Breaking these terms means you give up your right to use the theme. </span> !!!

Pricing

[OPEN] Payment
Four Seasons Cat price 47.77. Contact QQ 776194970 on Saturday night or holidays. Extra sponsorship is welcome.
[OPEN] Notes
If the price increases later, you may be asked to pay the difference. No refunds for discounted events.
Copyright belongs to: 折影轻梦. If you bought the template, don't resell it. I barely make any income.

Features

Avatar settings
Console -> Appearance -> Theme Settings -> Blog avatar
Header image settings
Console -> Appearance -> Theme Settings -> Blog header image
Payment QR settings
Console -> Appearance -> Theme Settings -> Alipay QR code
Console -> Appearance -> Theme Settings -> Tencent QQ QR code
Console -> Appearance -> Theme Settings -> WeChat QR code
Custom CSS
Console -> Appearance -> Theme Settings -> Custom CSS
Analytics code
Console -> Appearance -> Theme Settings -> Analytics code
Post cover image display
Console -> Appearance -> Theme Settings -> Cover mode
Post title: set title to Cover.
Custom cover: if a custom thumbnail is set, it will be used as the cover; if there is no image, the background becomes the cover.
Custom cover + title: if a custom thumbnail is set, it will be used as the cover; if there is no image, the title becomes the cover.
Other tools
Blog feature (show reward + QR code buttons in posts)
Enable SmoothScroll
Sidebar
QR code: show QR code in sidebar; also the post QR code. If disabled, both are hidden.
Tag cloud: show all blog tags in sidebar.
Search bar: show a cat that helps you search the site.
Categories: show all blog categories in sidebar.
Recent comments: show recent comments; set count in Console -> Settings -> Comments.

Custom Post Header Image

Enable Custom Cover in Backend -> Appearance -> Cover mode. Then set it in Custom Fields while editing the post.

New Friend Links Format

In backend -> Create new page -> Custom template, use "Friend Links"

- ![Name](Image URL) [Name](Link URL "Link description")
Example:
- ![Qingwan Navigation](https://www.chainwon.com/static/logo.png) [Qingwan Navigation](https://www.chainwon.com/ "This navigation will have infinite possibilities!")

If the format doesn't work, use this:

<a class="mdui-ripple" href="https://www.chainwon.com/" target="_blank">
    <img src="https://www.chainwon.com/static/logo.png" alt="Qingwan Navigation" title="Qingwan Navigation">
    <p>Qingwan Navigation</p>
</a>

Wish List

- Completed (collapsed by default)
  - [Y] Completed 1
  - [Y] Completed 2
- [OPEN] Not completed (open)
  - [N] Not completed
  - [N] Not completed 2

Completed (collapsed by default)
- [Y] Completed 1
- [Y] Completed 2
[OPEN] Not completed (open)
- [N] Not completed
- [N] Not completed 2

Image Layout

This feature requires strict formatting. Follow the format exactly, and do not omit line breaks.

[PIC2]

![Pearl River](https://i.loli.net/2018/09/01/5b8a59551a4d8.jpg)

![Pearl River](https://i.loli.net/2018/09/01/5b8a6ab761262.jpg)

[/PIC2]

[PIC2]

[/PIC2]

[PIC3]

![IMG_20180810_174621.jpg](https://i.loli.net/2018/09/01/5b8a95c57c988.jpg)

Summer Vacation! Over!

Sat, 08 Sep 2018 20:13:00 GMT

A lazy, nerdy, meaningless summer vacation. The essay prompt for summer homework was “regret,” and I think this vacation was full of regrets too. Traffic warning

Let’s say goodbye to summer with this song.

NetEase Cloud Music ID: 4078631

Went to Some Interesting/Not-So-Interesting Places

The first few weeks of vacation were the most fulfilling. I ate breakfast early every day (because breakfast was really good) and went long-distance cycling with a few people every night.

Cycling destinations
- A certain No.1 High School
- A certain Shishi No.1 High School
- People’s Square
- Shishi North Station
- North Latitude Square
- A national-level park

Later in July, I stayed up late every day, sometimes all night—either watching anime, watching movies, or playing games.

Then in August, the trip I planned for July finally started. I originally planned a 3-day trip to Wuhan, which was changed to Guangzhou, then 5 days in Guangzhou was stretched to 11 days. On the way back, I spent 2 days in Wuhan.

Having all plans messed up is really annoying!

Places I wanted to go but didn’t
- Window of the World
- Wuhan University
- A certain zoo in Guangzhou
Places I actually visited
- Canton Tower
- Pearl River
- Zhuhai coast
- Sun Yat-sen’s Former Residence
- A ticketed park (with Along the River During the Qingming Festival inside)
- Shishi North Station
- Wuhan Station
- Xiaolan Station
- Guangzhou Station
- Guangzhou Metro
- Wuhan Metro

All photos below were taken casually with a Xiaomi 6.

Guangzhou

Wuhan

I really wanted to see Wuhan University, but conditions didn’t allow it, so I “visited” online. It’s huge.

Ate Some Tasty/Not-So-Tasty Food

Fix Text Copying in the Browser in Just Seven Lines

Sat, 04 Aug 2018 20:21:00 GMT

Fix clipboardData is not defined. Works in Chrome and Firefox.

I’ve wanted to add a “copy result to clipboard” feature for my navigation page for a long time, but after searching for ages, I still couldn’t find a solution. None of the jQuery libraries met my needs.

I wanted a function that takes text and copies it directly to the clipboard.

So I wrote a 7‑line JavaScript helper (based on jQuery):

function setCopy(txt) {
    $('body').append('<textarea id="copy" style="height: 0;width: 0;border: 0;opacity:0;">'+txt+'</textarea>');
    $('#copy').select();
    document.execCommand("Copy");
    $('#copy').remove();
    alert("复制成功！");
}

Use it by calling setCopy().

(❗ This usage does NOT work in Firefox) For example, directly in an <a>:

href="JavaScript:setCopy('1533384805');">

(This usage works in Firefox) Prefer:

onclick="setCopy('1533387161');"

Cat UI For Angel

Sun, 22 Apr 2018 05:00:59 GMT

View product details

Cat UI 1.4 For Angel (Free)

Sun, 22 Apr 2018 00:50:00 GMT

Waiting for the people who is angel to me.

Preface

Waiting for the people who is angel to me.

NetEase Cloud Music ID: 1645112

Copyright

Apache

Github

Demo Site

https://nexmoe.com/ If you use this template, feel free to leave your demo link in the comments.

Github

Star welcome https://github.com/theme-nexmoe/typecho-theme-catui-reissue

Custom Post Header Image

Enable CustomCover in Backend -> Appearance -> Cover mode (owner of the cat). Then set it in the Custom Fields while editing the post.

Preview

New Year’s Red Envelopes, No Cash Inside

Fri, 16 Feb 2018 14:14:00 GMT

It’s the first day of the Lunar New Year, and the Year of the Dog has finally arrived. Today the blogger is handing out red envelopes (even though I’m just a broke student).

NetEase Cloud Music ID: 1645112

Red Envelope Content

A copy of To The Moon worth ~~36 RMB~~ 9 RMB.

How to Claim

Search for Steam user ID: chainwon. Add me and message me to claim it. As a broke student, there are only 5 copies (all 5 have been given out).

It’s really a great game. I hope the recipients enjoy it.

By the Way

Any good websites where I can submit for inclusion? https://console.chainwon.com/public/navigation

Already Given Out

Order	Nickname	ID
1	爆裂魔法	76561198359754018
2	若能绽放光芒	76561198298681533
3	天水一梦	serilcandy
4	鲍小螺	dreamer-paul
5	鬼刀	76561198372586471

To The Moon

It’s a story about two doctors who change memories to fulfill the last wishes of people at the end of their lives.

I only played for a little over an hour, but I think this is absolutely a game that will make your vision blur.

Possibly the Most Beautiful Input Method on Windows

Sat, 13 Jan 2018 20:00:00 GMT

A QQ Pinyin input method skin, possibly the most beautiful input method on Windows.

Copyright

Author: Danmo QQ: 326618362 Email: vistahack@126.com

Intro

Outshines the original.

Requirements

This is a QQ Pinyin input method skin, so you need QQ Pinyin installed. Official site: http://qq.pinyin.cn/ Skin: http://skin.qq.pinyin.cn/skin_detail?skin_id=3746387701 Blogger's single-column OCD revision: https://cloud.i.chainwon.com/index.php?share/file&user=1&sid=CYdgTVBn

Preview

Single-column mode

Default mode

Vertical mode

My Settings

Ending! 2017!

Sun, 31 Dec 2017 00:00:00 GMT

As a lonely star shining far and...

NetEase Cloud Music ID: 404784667

In the blink of an eye, 2017 has passed. Many dreams from 2016 still weren’t finished, but I did encounter many beautiful things along the way.

The Beautiful Scenery I Saw

Along the way, I fell more and more in love with music and learned Synthesia and ukulele. I’m not great, but it’s been enjoyable. I also met many interesting people—some who love sports, some fascinated by my stories, and a bunch of fellow strugglers. With them, studying no longer felt bitter or boring.

Which of Last Year’s Dreams Came True?

A unique navigation site (done)
A unique wallpaper site (done)
Make the top 50 in grade (done, 18th)
English 110+ (not done, sigh)
Play around with Ubuntu (didn’t; didn’t even get to try Deepin, and the hard drive broke)
Website not losing money (still lost money, but at least there was a little income)
Deeper JavaScript & jQuery, and better PHP usage (jQuery didn’t deepen much, but PHP improved a lot)

Next, My Outlook for the Coming Year!

Make a close friend who knows films very well
Make a close friend who knows music very well
Make a close friend who knows art very well
Make a close friend who knows technology very well
Get a SanDisk 240G SSD
High school English 130+
High school math 115+ (done, 136)
High school Chinese at least 100
Hope the organization can grow stronger
Hope my family can live well

At the Very End, I Want to Thank Many People

Thanks to the anonymous sponsors
Thanks to those who use my software
Thanks to those who bought my Typecho theme
Thanks to those lousy brothers

2018-01-01 00:16:38 Monday

Sent New Year wishes to everyone in the friend links, hoping they won’t forget me in 2018.

Cat UI For WordPress Base On Twenty Seventeen

Sat, 28 Oct 2017 19:39:00 GMT

An improvisational work.

Source

https://github.com/nexmoe/wordpress-theme-twenty-teventeen-plus

Screenshots

Cat UI For WordPress

Sat, 28 Oct 2017 04:55:22 GMT

View product details

Open Source Program: Mixcm Treehole

Fri, 06 Oct 2017 22:10:00 GMT

Mixcm Treehole, a project I built in one afternoon.

License: MIT

Just keep the author credit. Thanks to copyright trolls, the author has stopped updating.

Links

Github: https://github.com/mixcm/lovewall/releases

Screenshots

Home

Submit form

Pseudo-static

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^mous/page/(.*)$ /index.php?mous=&page=$1
RewriteRule ^mous/(.*)/page/(.*)$ /index.php?mous=$1&page=$2
RewriteRule ^mous/(.*)$ /index.php?mous=$1&page=1
RewriteRule ^pages/(.*)$ /index.php?pages=$1
</IfModule>

Nginx

rewrite ^/mous/page/(.*)$ /index.php?mous=&page=$1;
rewrite ^/mous/(.*)/page/(.*)$ /index.php?mous=$1&page=$2;
rewrite ^/mous/(.*)$ /index.php?mous=$1&page=1;
rewrite ^/pages/(.*)$ /index.php?pages=$1;

Database Notes

Import database

Import options.sql and contents.sql from the root directory into your database.

Connect database

Update your DB info in /require/function.php line 3.

'mysql'=>'localhost',	//DB host
'name'=>'root',		//DB user
'password'=>'',		//DB password
'dbname'=>'lovewall'	//DB name

Site info changes

You can change corresponding fields in the options table.

Typecho Simple Single‑Column Theme Cat UI 2.0

Wed, 05 Jul 2017 19:34:00 GMT

Cat

https://github.com/theme-nexmoe/catui-reissue

Preview images

Download

Github: https://github.com/theme-nexmoe/typecho-theme-catui

Notes

Only tested under HTTPS; behavior under HTTP is unknown.
Typecho 1.0.14.10.10

Reissue

https://nexmoe.com/1111.html

Changelog

2017-07-05 Update 2.0

Brand new design
Brand new markdown
More concise…
New material style
Structure updates…
Still single‑column!
Roast couples
Almost all code rewritten
QQ group: 482634342 (preview images released from time to time)
Comment box optimized
Comment emojis
Post emojis
New sidebar
Mobile support
Large screen support
Tips and QR code feature pending…

2017-04-15 Update 1.3

<span style="color:red;">This version is absolutely not a sincere release. Please wait for 2.0 — the UI will be heavily redesigned…</span>
Changed the max width
Use Typecho’s native comment box
Added “couples mode”
Various refinements
Tag cloud, recent comments, posts, etc…
CDN cached the 1.2 update package, awkward…

2017-03-04 Update 1.2 “See you next time, my little cat.”

Today I Switched Friend Links to Markdown and Something Terrible Happened!

Thu, 29 Jun 2017 15:10:00 GMT

Because the HTML code was too messy, I wanted to switch to Markdown format. I borrowed Jrotty's code, but it didn't do what I wanted. I tinkered for a long time and finally got it almost right, then something terrible happened...

Compressed HTML

<a class="btn btn-raised"title="分享互联网的宝藏"href="https://aoaoao.me/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrawpcvjnj302s02sweb.jpg"> <p>树洞</p></a><a class="btn btn-raised"title="一只野生的自由Geek"href="https://blog.viosey.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrb5kz8dpj304g04gglj.jpg"> <p>Viosey</p></a><a class="btn btn-raised"title="热爱技术和生活的程序员"href="http://www.yelook.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbj1a9tcj302s02sjr7.jpg"> <p>有野出没</p></a><a class="btn btn-raised"title="用code写出对二次元的热爱！"href="http://853.bronya.net/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbl6j81cj30hs0hs400.jpg"> <p>Sonic853</p></a><a class="btn btn-raised"title="ペロペロ"href="https://www.anotherhome.net/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrblwpndyj309w09wt93.jpg"> <p>DIYGod</p></a><a class="btn btn-raised"title="只是一些我的胡说八道罢了"href="http://blog.jinkunchen.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbn4gkk1j30hs0hsgm9.jpg"> <p>卷卷有空格</p></a><a class="btn btn-raised"title="是萝莉控真是太好了"href="http://siitake.cn/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbqj62n0j3074074q3n.jpg"> <p>香菇社长</p></a><a class="btn btn-raised"title="活靠幻想，技术靠转载！"href="https://qqdie.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbrcgv0bj30b40b4408.jpg"> <p>Jrotty</p></a><a class="btn btn-raised"title=" 一只蒟蒻的日常"href="http://wnjxyk.cn/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbs6h3yuj30gn0gm75r.jpg"> <p>WNJXYK</p></a><a class="btn btn-raised"title="兰陵の废宅基地"href="http://blog.thkira.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbteserej30k00k0gn8.jpg"> <p>兰陵 DA☆ZE</p></a><a class="btn btn-raised"title="就好像看透了我的心思一般，你总是突然出现……"href="https://www.dreamwings.cn/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbukyc33j308c08c74j.jpg"> <p>千千</p></a><a class="btn btn-raised"title="一个喜欢捣鼓前端的产品汪。"href="http://shawnzeng.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbrbvj35yij30cj0cjmyl.jpg"> <p>Shawn</p></a><a class="btn btn-raised"title="萝莉即是一切"href="https://www.ailoli.org/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgw1fbsgaz6xf8j30go0godh5.jpg"> <p>Ailoli</p></a><a class="btn btn-raised"title="2333333333333"href="http://hi-paul.space"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fc0i6dwd86j30e10e1gof.jpg"> <p>保罗</p></a><a class="btn btn-raised"title="喜欢萌妹の变态鹅"href="https://blog.conoha.vip/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fc24txdskgj30g40g477s.jpg"> <p>Moehentai</p></a><a class="btn btn-raised"title="Troy的星球"href="https://itroy.cc"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fc3w9wldgxj30e80e8e1c.jpg"> <p>Troy</p></a><a class="btn btn-raised"title="幻想主義者"href="https://www.54yt.net/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fcccka7mfsj308m08mjrz.jpg"> <p>玉兔</p></a><a class="btn btn-raised"title="博客主要是记录日常生活，开发过程有用的东西，还有制作成果展示等等，欢迎访问。"href="https://www.fghrsh.net/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fcmi1v7bpyj30go0go177.jpg"> <p>FGHRSH</p></a><a class="btn btn-raised"title="超级迷茫中。。。"href="https://hran.me/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fcuxwll0lpj30b40b4q3k.jpg"> <p>Hran</p></a><a class="btn btn-raised"title="私たちはずっとμ's！！！！！！！！"href="https://kotori.love/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fcvsloueiuj308c08caa7.jpg"> <p>ココロ</p></a><a class="btn btn-raised"title="我有一壶酒，足矣慰风霜。"href="https://sa.bi/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fcvt6nv3cvj304q04qjra.jpg"> <p>Dragonborn</p></a><a class="btn btn-raised"title="零三青年，只会作死，喜欢喝茶、中二、敲代码❤"href="https://idiot.moe/"target="_blank"><img src="https://ws1.sinaimg.cn/large/a15b4afegy1fd3yir3bo0j20b40b43ya.jpg"> <p>蔡锶铎</p></a><a class="btn btn-raised"title="你不爱我了QAQ"href="https://www.iqi7.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/a15b4afegy1fd3ze85p3yj20hs0hsq3e.jpg"> <p>七夏浅笑</p></a><a class="btn btn-raised"title="次元隙小站"href="http://waxxh.me/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fdovyvnq31j303903bq3s.jpg"> <p>Waxxh</p></a><a class="btn btn-raised"title="记录成长的点点滴滴"href="http://monsterlin.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fdow0sn4qlj305k05ka9z.jpg"> <p>monsterlin</p></a><a class="btn btn-raised"title="泛着旧时记忆的空白扉页"href="http://www.0page.org/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fdq5jy7copj3046046gmo.jpg"> <p>0page</p></a><a class="btn btn-raised"title="人生来就不是为了被打败的"href="http://ttt.lc/"target="_blank"><img src="https://ws1.sinaimg.cn/large/6513ad21jw8f5zcn0uk34j20kv0kv3zz.jpg"> <p>桃先森</p></a><a class="btn btn-raised"title="404 NOT FOUND"href="https://xiaolin.in/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1fec4otg2xej30dw0dwwfo.jpg"> <p>小霖</p></a><a class="btn btn-raised"title="把设计师气到脑中风2333∠( ᐛ 」∠)＿"href="https://www.metheno.net/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1felao15513j3064064glu.jpg"> <p>metheno</p></a><a class="btn btn-raised"title="永远相信，美好的事情即将发生"href="https://blog.lim-light.com/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qly1fenes19futj30hs0hsmy7.jpg"> <p>黎明余光</p></a><a class="btn btn-raised"title="喵～"href="https://blog.taku.life/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006MhmB7gy1ff2s4jq0qsj3028028744.jpg"> <p>ギリ猫</p></a><a class="btn btn-raised"title="努力的成为一个有趣的人"href="http://neverlove.me"target="_blank"><img src="https://ws1.sinaimg.cn/large/006MhmB7gy1fh19u4rfa0j305k05k404.jpg"> <p>不才博客</p></a><a class="btn btn-raised"title="这是很好的一生"href="https://www.qqstop.cn/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006MhmB7gy1fh19v5rh1xj30b40b474i.jpg"> <p>Kevan's Blog</p></a><a class="btn btn-raised"title="暮冬时烤雪，迟夏写长信"href="https://iu.tn/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006MhmB7gy1fh19wcga7lg305k05kmyk.gif"> <p>三秋</p></a><a class="btn btn-raised"title="聆听最初的声音，向往无尽的未来"href="https://imiku.me/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006pSa7Qgy1feulw1frmsj306o06oq4i.jpg"> <p>冰凌胧月</p></a><a class="btn btn-raised"title="暮光博客是一个分享生活记录以及互联网技术文章的个人博客"href="https://muguang.me/"target="_blank"><img src="https://ws1.sinaimg.cn/large/006MhmB7gy1fh1at1iiubj3050050t8m.jpg"> <p>暮光博客</p></a>

Pretty spectacular, right?

Yes, this was my original HTML code. Seeing this, I wasn't happy. Manually reformatting that many entries one by one is basically asking me to do it against my conscience!

How I handled it

So I put the code above into a file called e.html, then created a zz.php ("idiot") script.

<?php
    $str = file_get_contents("e.html");
    preg_match_all('/title="(.*?)"href="(.*?)"target="_blank">/is',$str,$array);
    preg_match_all('/<p>(.*?)<\/p>/is',$str,$array2);
    preg_match_all('/<img src="(.*?)">/is',$str,$array3);
    $x=0;
    while ($array[0][$x] != ''){
        $str = preg_replace('#title="(.*?)"href="(.*?)"target="_blank">#','$1', $array[0][$x]);
        $str1 = preg_replace('#title="(.*?)"href="(.*?)"target="_blank">#','$2', $array[0][$x]);
        $str2 = preg_replace('#<img src="(.*?)">#','$1', $array3[0][$x]);
        $str3 = preg_replace('#<p>(.*?)<\/p>#','$1', $array2[0][$x]);
        echo '- !['.$str3.']('.$str2.') ['.$str3.']('.$str1.' "'.$str.'")<br>'."\n";
        $x++;
    }
?>

Result

--- src/content/posts/开发/利用 goto 来防止 if 嵌套.md

title: 利用 goto 来防止 if 嵌套 slug: 1280 cover: https://cdn.jsdelivr.net/gh/nexmoe/image@latest/QQ图片20210415151105.jpg pubDate: 2018-11-24T18:04:00

流程控制中的 if 是比较简单的逻辑判断，但是在多条逻辑判断中很容易造成 if 嵌套，逻辑复杂度较高，让人感到十分混乱。

万恶的 if 嵌套

<?php
$a = array(
    'state' => '1',
    'notice' => '注册成功！',
);

if ($_GET['username'] != '') {
    if (strlen($_GET['username']) > 4 or !strlen($_GET['username']) < 11) {
        $name = array('root','admin','GETmaster','master','webmaster','mixcm','administrator','sb','shabi');
        if (!in_array($_GET['username'], $name)) {
            if (preg_match("/^[a-zA-Z\s]+$/", $_GET['username'])) {
                $a['state'] = '0';
                $a['notice'] = '用户名必须为英文！';
            }
        } else {
            $a['state'] = '0';
            $a['notice'] = '非法用户名！';
        }
    } else {
        $a['state'] = '0';
        $a['notice'] = '请输入大于4字符，且小于11个字符的用户名！';
    }

} else {
    $a['state'] = '0';
    $a['notice'] = '用户名不能为空！';
}

echo json_encode($a,JSON_UNESCAPED_UNICODE);

于是在实际操作中就会想方设法避免以上格式。便有了 goto 和表数据。

逻辑清晰
后期修改容易
但需要防止 goto 滥用，建议只定义一个，列如本例就只定义了 end

利用 goto 解决（以下代码中有使用到表数据）

<?php
$a = array(
    'state' => '1',
    'notice' => '注册成功！',
);

if ($_GET['username'] == '') {
    $a['state'] = '0';
    $a['notice'] = '用户名不能为空！';
    goto end;
}

if (strlen($_GET['username']) < 4 or strlen($_GET['username']) > 11) {
    $a['state'] = '0';
    $a['notice'] = '请输入大于4字符，且小于11个字符的用户名！';
    goto end;
}

$name = array('root','admin','GETmaster','master','webmaster','mixcm','administrator','sb','shabi');
if (in_array($_GET['username'], $name)) {
    $a['state'] = '0';
    $a['notice'] = '非法用户名！';
    goto end;
}

if (!preg_match("/^[a-zA-Z\s]+$/", $_GET['username'])) {
    $a['state'] = '0';
    $a['notice'] = '用户名必须为英文！';
    goto end;
}

end:
echo json_encode($a,JSON_UNESCAPED_UNICODE);

--- src/content/posts/开发/博客，我优化了什么.md

title: 博客，我优化了什么？ cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg coverWidth: 1920 coverHeight: 1206 tags:

Hexo
博客
主题 slug: 661812793 pubDate: 2020-02-09T16:10:00

由于博客性能一直很弱鸡，所以花了两天时间优化了一下，以下，是我的优化成果。

先上跑分

去掉一些依赖

❌ 移除 fancybox ❌ 移除 SmoothScroll ❌ 移除 jQuery ❌ 移除 Pjax 已经 2020 年，我觉得 jQuery 是不需要的。 Edge 的正式发布自带良好的平滑滚动效果，加上 SmoothScroll 在 MacOS 上会有卡顿感，所以移除。移除 fancybox 是因为平常真的不怎么用，还是直接鼠标右键打开原图看舒服。

Lazyload 优化

在此之前，我的博客首页一直有一个问题，图片加载抖动，所以我直接让文章每一个图片输入图片的长度和高度来计算图片占位大小来防止抖动。不过确实麻烦了点。此前的 Front-matter

---
title: 博客，我优化了什么？
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
---

现在的 Front-matter

---
title: 博客，我优化了什么？
cover: https://nexmoe.com/images/cover/compress/motorcycle-1690452_1920.jpg
coverWidth: 1920
coverHeight: 1206
---

并且对 Lazyload 加了一个非线性动画，给人一种更快乐的感觉。

资源合并

这个操作就很方便了，因为 jsdelivr 自带了合并功能，可以自由的合并多个库比如 https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/nexmoe/nexmoe.github.io@latest/css/style.css,gh/nexmoe/nexmoe.github.io@latest/lib/mdui_043tiny/css/mdui.css,gh/nexmoe/nexmoe.github.io@latest/lib/iconfont/iconfont.css 所以我把博客所有的 css 和 js 文件分别合并成了一个，因此浏览器请求量减小，所以速度也有些许提升。

图片压缩

我的首页图就是看个爽，为什么要原图且无损？所以我统一将图片全部压成 920px 的宽度了，大量减小图片大小。速度暴涨。

依赖库简化

由于主题依赖了 mdui，而 mdui 会加载字体，所以我把它本地化，然后删掉了颜色类，辅助类，以及字体类。速度也有些许提升。

部分 js 用 nodejs 重写

以前启用 lazyload 和一些功能，我是用 js 写的，所以在网页渲染的时候需要重新渲染，所以需要占用一定的性能。所以我就将一部分使用 nodejs 重写，Hexo 会在编译的时候完成工作，因此在浏览器访问时就不需要渲染了。 --- src/content/posts/开发/开源程序：觅思树洞.md

title: 开源程序：觅思树洞 author: 折影轻梦 slug: 872 cover: https://nexmoe.com/images/开源程序：觅思树洞/59d83a91726aa (1).png tags:

PHP pubDate: 2017-10-06T22:10:00

觅思树洞，一个我一下午的作品。

版权 MIT

只需要留作者版权就行了。感谢版权狗，作者已停更。

展示图

首页

提交表单

伪静态

Apache

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^mous/page/(.*)$ /index.php?mous=&page=$1
RewriteRule ^mous/(.*)/page/(.*)$ /index.php?mous=$1&page=$2
RewriteRule ^mous/(.*)$ /index.php?mous=$1&page=1
RewriteRule ^pages/(.*)$ /index.php?pages=$1
</IfModule>

Nginx

rewrite ^/mous/page/(.*)$ /index.php?mous=&page=$1;
rewrite ^/mous/(.*)/page/(.*)$ /index.php?mous=$1&page=$2;
rewrite ^/mous/(.*)$ /index.php?mous=$1&page=1;
rewrite ^/pages/(.*)$ /index.php?pages=$1;

数据库说明

导入数据库

先将根目录内的 options.sql 和 contents.sql 导入数据库

连接数据库

在 /require/function.php 第三行更改为自己的数据库信息

'mysql'=>'localhost',	//数据库地址
'name'=>'root',		//数据库登录名
'password'=>'',		//数据库密码
'dbname'=>'lovewall'	//数据库名

网站信息更改

在数据库中的表 options 中可以对对应项进行更改。

--- src/content/posts/开发/美化你的终端.md

title: 美化你的终端 cover: https://nexmoe.com/images/cover/compress/pasted-12.png coverWidth: 1370 coverHeight: 942 slug: 1519803391 pubDate: 2019-08-09T18:49:03

自带的 PowerShell 虽然有了自定义颜色等功能，但还是太丑，这一篇文章将帮你打造 Windows10 上最美终端。

安装 Fluent Terminal 建议使用 Terminus

Fluent Terminal 是一个基于 UWP 和 Web 技术的终端，相比较 Terminus，占用资源更少，而且有中文翻译，并且设置页还有 GUI。

在以下链接下载最新版 https://github.com/felixse/FluentTerminal/releases

解压到任意位置，打开目录，右键 Install.ps1 使用 PowerShell 运行，选择 Sideloading（旁加载应用）安装

安装完成

安装 Terminus

https://eugeny.github.io/terminus/

安装 oh-my-posh 与 posh-git

posh-git：此模块用于将 git 集成于 PowerShell 中 oh-my-posh：本次美化主角，带色的箭头标签

Set-ExecutionPolicy Bypass
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

启用 oh-my-posh 与 posh-git

Import-Module posh-git
Import-Module oh-my-posh

设置主题

Set-Theme Agnoster

可选列表

Agnoster
Avit
Darkblood
Fish
Honukai
Paradox
PowerLine
robbyrussell
Sorin
tehrob

输入获取配置项目录

$profile

打开控制台输出目录中的文件，输入配置项并保存

Import-Module oh-my-posh
Set-Theme Agnoster

打开 Fluent Terminal 查看效果

Typecho Word Count

Sat, 18 Feb 2017 00:30:00 GMT

Super simple. Just insert the following code into functions.php in the root of the current theme.

Currently it only counts Chinese characters in the post.

function  art_count ($cid){
    $db=Typecho_Db::get ();
    $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1));
    $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
    echo mb_strlen($text,'UTF-8');
}

Insert this where you want to display it:

<?php art_count($this->cid); ?>

Happy Year of the Rooster, 2016 Is Over

Sat, 31 Dec 2016 21:00:00 GMT

Only three hours left in 2016. It’s time for the annual year-end summary. The blog has finally entered a stable state, so I’m writing this summary and my New Year’s plans. Cover image from: <a href="https://aoaoao.me/1260.html" target="_blank">Aaron</a>

NetEase Cloud Music ID: 34218195

—First, wishing everyone a lucky Year of the Rooster!

Haven’t Done

Plans never keep up with changes, and there are still some goals I didn’t reach.

A unique navigation site
A unique wallpaper site
Rank top 50 in grade (best was 53)
English 110+ (best was 108)
Play around with Ubuntu
Website not losing money (actually lost ~1000+)
Deeper JavaScript & jQuery, and perfect PHP usage

Have Done

Life is full of wonderful surprises, including some new ideas.

A blog theme of my own
Duoshuo styling
Qingwan Wallpaper API
A brand-new navigation V3 concept
Friend list concept
Mechanical keyboard (blue switches)
Raspberry Pi
Stable server and domain
Met lots of new friends
Watched Your Name with a girl and invited her to hang out at my place
Nonsense CSS design
Played Overwatch (on someone else’s account, lol, I couldn’t afford it)
My program had pseudo-static links
Used Google Analytics
Site-wide HTTPS encryption to welcome 2017 quickly

What will happen next?

Qingwan Start Page

Sun, 01 May 2016 11:06:47 GMT

In 2016, when I was in eighth grade, I officially started learning programming. Qingwan Start Page was the very first project of my life. From simple HTML templates to PHP, databases, various frameworks, Vue, Swoole, and Golang, it has witnessed my growth.

https://nexmoe.com/537283684.html

View product details

朋友

Fri, 08 Jan 2016 00:00:00 GMT

我们会慢慢长大成人，随着季节的不停变换路边盛开的鲜花也在不断变化，那个季节盛开的鲜花到底叫什么名字，轻轻摇曳着一旦触摸它就会轻轻地被扎到，用鼻子靠近闻一闻，会有一股淡淡的青涩太阳的芳香，随着那股香味慢慢变淡我们也在长大成人，但是那朵花一定会在某处继续盛开。

朋友们

每次编译时，随机排序

import pydata from "./pydata.json"; import FriendsList from "../../components/FriendsList.astro";

<FriendsList friends={pydata.sort(() => Math.random() - 0.5)} />

不可访问

希望以下站长联系我

import cantaccess from "./cant_access.json";

<table> <tr> <th>网站名称</th> <th class="w-32">状态</th> </tr> {cantaccess.map((item) => ( <tr> <td>{item.title}</td> <td class="w-32"><img class="h-4" src={https://img.shields.io/website?url=${item.link}} alt={item.title} /></td> </tr> ))} </table>