ooo

Building an AI Translation Demo with Claude

Fri, 23 Jan 2026 00:00:00 GMT

Rapid validation through a demo during the requirements phase helps clarify how a feature should work and guide subsequent optimization.

Recently, I have been working on requirements for AI translation and wanted to know: What limitations does AI translation have? Which model delivers the best quality and the fastest speed? In the past, we might only have been able to try competing products, but now we can use Claude to quickly build a demo and validate ideas.

At the same time, I also used this demo to optimize the speed and quality of AI translation, providing preliminary experience and practice for development, which is more conducive to later planning.

In this demo, the translation architecture went through a full iteration process: from serial execution, to concurrent requests, then to stable multi-segment JSON output, and finally to JSON streaming output.

This change significantly reduced the overall time required for long-text translation from the initial 26s to around 2.7s. Although there is still a gap compared with traditional engines in terms of absolute speed, with multi-key polling and caching mechanisms, the experience already has plenty of room for further improvement.

In addition, after repeated testing, I also worked out a set of parameter combinations that balance quality and stability.

If you want to understand the specific problems and solutions, please keep reading:

Core Engineering Optimizations

To address the inherent problems of AI translation being “slow” and prone to “hallucination,” I validated strategies in three directions in the demo code:

1. Response Experience: Concurrency Limit Optimization

At present, choosing a fast model can improve speed to some extent, but compared with traditional translation, there is definitely still a gap. So I tried optimizing the request logic to deliver a relatively good translation experience while balancing model speed and concurrency limits:

Concurrent requests are certainly the first step everyone would think of. That’s right—this does provide a considerable boost to translation speed.

After optimization, the time required for the same text dropped from 24s to 6s, and the improvement was indeed obvious. But compared with the 1s of traditional translation, the gap still cannot be ignored.

Can it be even faster? The answer is yes.

The previous strategy was simple concurrency, meaning “one text segment = one request.” Since the model supports long context, we can completely upgrade this to packaged sending: within the Token limit, merge multiple text segments into the same request. This makes full use of the context window and allows more content to be processed at once, greatly improving efficiency.

A new challenge follows: when multiple segments are packaged and sent together, how can the returned translations be accurately mapped back to each original segment?

To solve this alignment problem, I adopted a strategy of paragraph numbering + JSON structured output. By adding an index to each text segment and forcing the AI to return structured JSON data, multiple segments can be translated simultaneously while keeping the order stable.

After switching to JSON, streaming output was gone, which was also unacceptable. This led me to discover the concept of NDJSON, which can enable streaming output of JSON data.

After this round of optimization, the AI translation time was reduced from 6.08s to 2.88s.

That’s all for optimizing AI translation speed. Combined with multi-key polling and translation caching that can be implemented later on the server side, the experience can be further improved.

2. Translation Quality: Prompt Tuning and Terminology Protection

I referred to Immersive Translate’s Web3-domain translation prompt and clarified the output specifications. It requires retaining professional terms (such as ETH, Gas fee, etc.), and also ensures consistent output order during batch translation through an indexed input format ([1] text... [2] text...), avoiding the problem of multiple segments being returned out of order.

You are a professional ${targetLang} native translator specialized in Web3 and blockchain content.

## Translation Rules
1. Output only the translated content, without explanations or additional text
2. Maintain all blockchain terminology, cryptocurrency names, and token symbols 
   in their original form (e.g., ETH, BTC, USDT, Solana, Ethereum)
3. Preserve technical Web3 concepts with commonly accepted translations: 
   DeFi, NFT, DAO, DEX, CEX, AMM, TVL, APY, APR, gas fee, smart contract, 
   wallet, staking, yield farming, liquidity pool
4. Keep all addresses, transaction hashes, and code snippets exactly as in the original
5. Translate from ${sourceLang} to ${targetLang} while preserving technical meaning
6. Ensure fluent, natural expression in ${targetLang} while maintaining technical accuracy

3. Parameter Control

Although formal development had not yet started during the requirements phase, I rehearsed the future control logic at the demo level, mainly covering two dimensions:

Token Limits and Intelligent Chunking

Based on the debugging results, I applied certain controls to the number of segments and character length in the same request:

Temperature = 0 - Deterministic output, more stable results
Control the number of paragraphs (4 segments) - Avoid timeout caused by overly large single requests
Maximum text characters per request (3,000) - Balance output speed and content length

Thinking Mode Limitation

For models with thinking capabilities, such as Gemini 3.0 Flash, adjusting thinkingLevel can also improve translation speed in a clear-cut task like translation.

Automated Translation with Lokalise MCP

Mon, 17 Nov 2025 00:00:00 GMT

Preface

As the saying goes, “laziness” is the primary productive force.

The current i18n localization workflow is relatively cumbersome: English copy is designed first; after that, every word and sentence is translated into up to 20 languages on the Lokalise platform; then the Translation Keys are annotated back into Figma for developers to use.

This “translate -> annotate -> code” workflow is extremely time-consuming in App requirement design. Faced with this highly repetitive and inefficient work, I redesigned an automated solution based on my team’s previous i18n practice experience.

The multilingual platform we currently use is Lokalise, so the solution I describe next will mainly revolve around Lokalise. Other platforms can also take it as a reference.

Basic Idea

To achieve full automation, it actually comes down to two steps:

Find a translator who knows the business: AI translation is powerful, but it does not understand business terminology (for example, translating “Gas” as “气体”), and it may translate some terms that should not be translated. So we need to inject business context into the AI and set rules for it.
Give the AI “hands”: After translation, copying and pasting entries one by one into the Lokalise backend is the most exhausting part. Through the MCP protocol, the AI can directly call the Lokalise API.

Final Solution

The tech stack I chose is Node.js + MCP SDK + client tools.

The choice of client is very flexible, as long as it supports MCP. At first I used Claude Desktop, but for friends who prefer the command line, it can be completely replaced with Claude Code or Gemini CLI, with an equally smooth experience.

Gemini may be more skilled at liberal-arts-type tasks like translation, so I recommend it.

1. Core Code (MCP Server)

Lokalise itself provides a complete REST API, which makes it convenient for us to operate it through code.

To write less boilerplate code, I directly used the official Node.js SDK (@lokalise/node-lokalise-api). Referring to the MCP official documentation, I wrapped these APIs into an MCP Server.

It mainly exposes two tools to the AI:

search-keys: Used for duplicate checking, to see whether someone has already translated it.
create-keys: Used to do the work, writing the multilingual copy generated by the AI into the backend.

The logic is actually not complicated. In essence, it is just acting as an API relay:

Click to view the core index.ts code

#!/usr/bin/env node
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { LokaliseApi, SupportedPlatforms } from "@lokalise/node-api";
import { z } from "zod";

const LOKALISE_API_KEY = process.env.LOKALISE_API_KEY;
const DEFAULT_PROJECT_ID = process.env.DEFAULT_PROJECT_ID;
const DEFAULT_PLATFORMS = ["web", "ios", "android", "other"];
const PLATFORMS = (
  process.env.PLATFORMS
    ? process.env.PLATFORMS.split(",").map((p) => p.trim())
    : DEFAULT_PLATFORMS
) as SupportedPlatforms[];

const lokaliseApi = new LokaliseApi({ apiKey: LOKALISE_API_KEY });

const server = new McpServer(
  {
    name: "lokalise-mcp",
    version: "1.0.0",
    author: "yikZero",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// ... get-project-info 和 search-keys 工具代码略 ...

server.registerTool(
  "create-keys",
  {
    title: "Create Keys",
    description: "Creates one or more keys in the project",
    inputSchema: {
      projectId: z
        .string()
        .describe(
          "A unique project identifier, if not provide, first use get-project-info tool to get the project id"
        ),
      keys: z.array(
        z.object({
          keyName: z.string().describe("Key identifier"),
          platforms: z
            .array(z.enum(["web", "ios", "android", "other"]))
            .describe(
              "Platforms for the key. If not provided, use the default platforms: " +
                PLATFORMS.join(", ")
            ),
          translations: z
            .array(
              z.object({
                languageIso: z
                  .string()
                  .describe(
                    "Unique code of the language of the translation, get the list from the get-project-info tool"
                  ),
                translation: z
                  .string()
                  .describe("The actual translation. Pass as an object"),
              })
            )
            .describe("Translations for all languages"),
        })
      ),
    },
  },
  async ({ projectId, keys }) => {
    const response = await lokaliseApi.keys().create(
      {
        keys: keys.map((key) => ({
          key_name: key.keyName,
          platforms: key.platforms,
          translations: key.translations.map((t) => ({
            language_iso: t.languageIso,
            translation: t.translation,
          })),
        })),
      },
      { project_id: projectId }
    );

    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(response),
        },
      ],
      structuredContent: response as any,
    };
  }
);

// ... update-keys 工具代码略 ...

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Lokalise MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

2. Training the AI (Prompt)

This is actually similar to the Project feature in Claude’s web version, where it lets you preset some system prompts and provide some materials. These all serve as background knowledge for the AI, making it easier for it to work better.

So to make the AI act like an experienced employee, I wrote all the OneKey terminology (Glossary) and Key naming conventions (Snake Case) into a GEMINI.md file. If you are using Claude Code, you can also write a CLAUDE.md.

There is actually also a unified AGENTS.md now, but the grand unification has not yet been completed.

View details of the GEMINI.md prompt

You are a professional web3 project i18n translation expert specializing in translating word/sentence into multiple languages for software localization.

<onekey_background>
OneKey is a comprehensive cryptocurrency wallet solution...
</onekey_background>

<i18n_supported_languages>
English (United States), Bengali, Chinese Simplified...
</i18n_supported_languages>

<technical_terms>
OneKey, WalletConnect, iCloud, Google Drive, OneKey Lite, OneKey KeyTag, Face ID, Touch ID...
</technical_terms>

<translation_namespaces>
global, onboarding, wallet, swap, earn, market, browser, settings, prime
</translation_namespaces>

Translation Process:

1. Direct Translation:
   - Provide a literal translation of the word/sentence into all supported languages
   - If the text contains a number, replace it with {number}
   - Preserve all technical terms and variables, like {variableName}, HTML tags, etc

2. Refined Translation:
   - Create an optimized version that enhances clarity and natural flow in each language
   - Ensure cultural appropriateness while preserving the original meaning
   - When translating, take cultural factors into account and try to use expressions that fit the cultural habits of the target language, especially when dealing with metaphors, slang, or idioms
   - Preserve specific professional terminologies within certain industries or fields unchanged, unless there is a widely accepted equivalent expression in the target language
   - The title needs to be used Sentence case
   - A space (half-width space) between a full-width character (Kanji) and a half-width character (letter, number, or symbol)

3. Key Generation:
   - Create a self-explanatory key in snake_case format
   - Structure as namespace::descriptive_key_name
   - When recognized as a common term, please use global namespace
   - Key must accurately represent the content's purpose
   - Avoid hyphens (-) and curly braces ({})

Output Format:
1. Key: [namespace::descriptive_key_name]
2. Direct Translation Table (brief reference)
3. Refined Translation Table (primary focus)

Items need checked:
1. If the user provides the Key, use the user-provided Key.
2. If there is an obvious spelling error, I need your help to correct it and inform you.
3. After the translation is completed, need to call the tool to create/update the corresponding key.
4. First, provide the Table, then create or update the Key based on the translations in the Refined Table.

3. Configuration File

Finally, in the MCP configuration file (such as claude_desktop_config.json or .mcp.json), mount the Server we wrote.

{
  "mcpServers": {
    "lokalise": {
      "command": "node",
      "args": ["/Users/yikzero/Code/lokalise-mcp/build/index.js"],
      "env": {
        "LOKALISE_API_KEY": "xxxx969xxxxxxxx7c18760c",
        "DEFAULT_PROJECT_ID": "44xxxxxe4ef8.8099xx5",
        "PLATFORMS": "ios,android,web,other"
      }
    }
  }
}

Practical Case

Fully Automated Workflow from Design Draft to Code

Take the “network detection feature” we recently developed as an example. This is a relatively complex business scenario involving prompts for various network error states, and each error message needs to be i18n-ized. In total, there are over 50 text strings that need translation. If handled manually, translation, key filling, and copy alignment alone would probably take an entire day.

Here is how I solved it:

Claude Code organizes requirements: Let Claude analyze the code logic, organize all scenarios that need translation, and output a Markdown list.
Gemini translates: Feed the Markdown to Gemini 2.5 Pro (CLI), and let it translate based on our built-in Prompt. It will properly handle professional terms such as “VPN” and “Proxy” according to the rules in <technical_terms>, and automatically generate standardized Keys (such as settings::network_error_timeout).
Claude Code replaces code: After receiving the translation draft containing the Keys, throw it back to Claude Code and let it replace the hardcoded strings in the code with one click.

Claude is good at code analysis, Gemini is good at multilingual translation, and MCP is responsible for breaking through data silos. Each does its own job, and the efficiency improvement is more than just a little.

Daily Fragmented Translation

For small day-to-day requirements, it also works great with design drafts.

For example, after I just finished drawing a new Onboarding modal in Figma, I can casually take a screenshot and throw it to the AI, saying:

“This is a new import wallet modal. Process the copy inside, and put the Keys under onboarding.”

The AI will automatically execute: visual recognition (extract copy) -> dual translation (literal translation + refined translation) -> automatic entry (write through MCP).

All you need to do is have a cup of coffee and wait for the review.

Summary

Use Claude to write an MCP Server, then provide it to Gemini CLI for calling, so they can work better. At this point, I don’t even know who the capitalist is anymore (just kidding).

The related code mentioned in this article has all been open-sourced. Interested friends can get it here:

MCP Server: lokalise-mcp
Integrated configuration example: onekey-translate

Building a Personalized Watchlist with AI

Sat, 23 Nov 2024 00:00:00 GMT

Preface

Both Xiao Chen and I really enjoy watching movies and TV series, but we often don’t know what to watch—maybe we have a bit of choice paralysis. Recently, I discovered something interesting in the MisakaF Emby group: the group tracks the most popular films and TV works on their platform on a daily and weekly basis. This gave me an idea: I could find several similar rankings and then let AI organize and aggregate them. This way, I could have a weekly trending list that combines existing rankings with my personal preferences.

Basic Idea

The core workflow of the project can be summarized in three steps:

Collect trending ranking data
Analyze and process the data with AI
Push the processed results to a specified channel

Solution Iteration

Initially, I designed an integrated solution based on multiple professional services:

First, obtain the information feed of Telegram channels through RSSHub.
Then use automation tools such as IFTTT, Zapier, or n8n to synchronize and organize RSS data into document databases such as Notion or Feishu for storage.
Next, Dify would regularly filter data from the past week from the database based on predefined requirements.
Dify would send the filtered data together with preset prompts to AI for processing.
Finally, the processed results returned by AI would be sent to a specified group via Telegram Bot.

Although this solution was functionally complete and achieved full-process automation, it had an obvious overengineering problem and was too complex. In the end, I gave up halfway through implementation.

Final Solution

Considering the project scale and actual needs, I ultimately adopted a more lightweight and direct tech stack:

Core implementation: Node.js
Automated scheduling: GitHub Actions

Data Input/Organization

During the process of selecting data sources, I mainly considered data authenticity and sample representativeness.

Based on the above criteria, I finally selected three data sources:

Two highly active Telegram channels, both providing weekly viewing data:
- MisakaF-Emby: over 22K followers, with an average of 2,000+ views per post
- Odyssey+: over 23K followers, with an average of 3,000+ views per post
One third-party film and TV platform:
- iYF: its ranking data is updated promptly and has relatively high market representativeness

The data from iYF is relatively easy to obtain; simply inspect the network requests and call its API.

For Telegram channel-related data, it needs to be relayed through RSSHub. It also supports the searchQuery parameter to filter channel content. For specific parameters, refer to the documentation.

During actual calls, I found a problem: the official RSSHub service returns Telegram channel data very slowly and is highly prone to timing out.

Here’s a little trick: try searching Google for Welcome to RSSHub. Google has indexed many RSSHub services self-hosted by other users, so you can quietly pick one that is faster and replace the original service.

Once we have the raw data, we can filter out this week’s information based on publication time and process it.

The final organized data will look something like this:

MisakaF 热度数据:

#每周榜单

在过去的一周内，共有2122部电影和2424部电视剧被各位宠幸，其中表现较为突出的有：

Movies：
- 毒液：最后一舞-870
- 浴火之路-585
- 某种物质-333
- 逆鳞-270
- 死侍与金刚狼-245

TV Shows：
- 小巷人家-13210
- 永夜星河-5893
- 英雄联盟：双城之战-3667
- 宿敌-3535

You can find some data sources you trust and organize them together yourself.

AI Application

I use the AI SDK provided by Vercel. It is very convenient for calling large models from different platforms, and it also supports Node.js nicely.

As for the large model, I’m using Anthropic’s latest Claude Sonnet 3.5. The $5 credit I received when I first registered still hasn’t been used up.

For prompt writing, here are a few lessons learned that may help you write a better prompt:

Prompts should be written in English; the final result can be required to output in the language you need
Specific rules should be listed directly: what can be done and what cannot be done
Give the large model enough room to think, and encourage it to output the process first before the final result. There is an academic term for this called Chain of Thought/CoT prompting
Provide concrete examples of the desired output
Use XML tags to structure your prompt

For more specific details, you can also refer to Claude’s Prompt engineering documentation.

Below is the prompt I used to have it output a viewing list. The rssRankings and hotSearchRanking variables are the data organized earlier, which need to be concatenated together and provided to Claude:

You are a professional film and TV analyst specialized in entertainment rankings. Your task is to analyze weekly entertainment data and generate a ranking list of popular TV series and movies.

First, review the input data:

<rss_rankings>
${rssRankings}
</rss_rankings>

<hot_search_ranking>
${hotSearchRanking}
</hot_search_ranking>

Instructions:

1. Data Analysis:

- Exclude children's content from consideration.
- Works must appear in at least 2 data sources to be ranked.
- Analyze ranking data using the Scoring Criteria.

2. Scoring Criteria:

- Primary source (MisakaF热度数据) ranking positions: 1-2 = 40 points, 3-4 = 30 points, 5 = 20 points
- Public service (Odyssey+公益服点播数据) ranking positions: 1-2 = 40 points, 3-4 = 35 points, 5-6 = 30 points, 7-8 = 25 points
- Search ranking (搜索热度) positions: Top 5 = 20 points, 6-10 = 10 points
- Sum up weighted scores to determine the final ranking

3. Ranking Generation:

- Generate separate rankings for TV series and movies
- List exactly 5 works per category

4. Output Formatting:

- Use the following template, writing in Simplified Chinese:

**热门剧集**

1. [TV Series 1]
2. [TV Series 2]
3. [TV Series 3]
4. [TV Series 4]
5. [TV Series 5]

**热门电影**

1. [Movie 1]
2. [Movie 2]
3. [Movie 3]
4. [Movie 4]
5. [Movie 5]

- Use numerical prefixes (1.-5.) for each item
- Only bold category headers using markdown **header**
- Remove all markdown formatting from list items

Before providing the final output, wrap your scoring and ranking process inside <scoring_process> tags. In this section:

- List each TV series and movie with their respective scores from each source.
- Show your calculations for the weighted scores.
- Explain your reasoning for combining multiple seasons of TV series, if applicable.
- Demonstrate how you arrived at the final rankings.
  This will help ensure accuracy and alignment with the given criteria. It's OK for this section to be quite long.

After your scoring process, present the final ranking list in the specified format, the final ranking must inside <final_ranking> tags.

Remember to carefully consider all aspects of the data to ensure the list is calculated in line with the specified requirements.

In the prompt, you can decide the weight of each ranking based on your personal preferences.

For film and TV works you don’t like, you can also try asking AI to filter them out.

Claude 3.5 Sonnet output result

<scoring_process>
TV Series Scoring:

1. 小巷人家

- MisakaF: #1 (40 points)
- Odyssey+: #2 (40 points)
- Hot Search: #4 (20 points)
  Total: 100 points

2. 永夜星河

- MisakaF: #2 (40 points)
- Odyssey+: #4 (35 points)
- Hot Search: #7 (10 points)
  Total: 85 points

3. 英雄联盟：双城之战

- MisakaF: #3 (30 points)
- Odyssey+: #3 (35 points)
  Total: 65 points

4. 白夜追凶/白夜破晓 (combined as same series)

- Odyssey+: #1 (40 points)
- Hot Search: #2 (20 points)
  Total: 60 points

5. 宿敌

- MisakaF: #4 (30 points)
- Odyssey+: #6 (30 points)
  Total: 60 points

Movies Scoring:

1. 夺命微笑

- Odyssey+: #1 (40 points)
  Insufficient appearances - excluded

2. 夫妻吵架狗都不理，而查理笑了

- Odyssey+: #2 (40 points)
  Insufficient appearances - excluded

3. 毒液：最后一舞

- MisakaF: #1 (40 points)
  Insufficient appearances - excluded

4. 浴火之路

- MisakaF: #2 (40 points)
  Insufficient appearances - excluded

5. 某种物质

- MisakaF: #3 (30 points)
  Insufficient appearances - excluded

Note: For movies, none appeared in multiple data sources, so we'll need to rely on single-source appearances despite the criteria. This is a limitation of the available data.

</scoring_process>

<final_ranking>
**热门剧集**

1. 小巷人家
2. 永夜星河
3. 英雄联盟：双城之战
4. 白夜追凶
5. 宿敌

**热门电影**

1. 毒液：最后一舞
2. 浴火之路
3. 某种物质
4. 逆鳞
5. 死侍与金刚狼
</final_ranking>

We can see that from the scoring process to the final content output, everything is very stable. Claude’s ability to follow instructions is quite strong!

We only need to extract the content inside <final_ranking> to get the main body of the viewing list. The output result is very standardized and stable.

If you find adjusting prompts troublesome, you can also choose Anthropic’s Prompt Generator, which can generate fairly professional prompts.

Result Push

There are many possible push channels: Feishu bots, Telegram bots, Bark push notifications, and so on. Choose whichever you like. The implementation is not complicated either.

Once we have the output data, we can add a header image, bold text, tags, and so on to the viewing list according to the specific syntax format of the platform. I also added a quick-jump button to open the film and TV app with one tap :)

Scheduled Execution

Because everything is developed with Node.js, the lightest and most convenient option is GitHub Actions. Based on the update time of the trending rankings, just set up a Cron scheduled task.

Since MisakaF’s weekly trending list updates at 7 p.m. on Fridays, I set the scheduled build to run at 7:30 p.m. on Fridays, and the message is automatically pushed after the build completes. A wonderful weekend begins.

Final Words

The simplest version of the implementation is like this. But high popularity doesn’t necessarily mean it is good, nor does it mean the work matches your tastes. If Douban ratings, Rotten Tomatoes scores, or other dimensions could be integrated as well, it should be even more personalized.

In any case, happy watching, everyone. Cheers🍻

Building a Blog from a Product Designer’s Perspective

Sat, 21 Sep 2024 00:00:00 GMT

Preface

The design and development of Roominess 5.0 has finally come to an end. To be honest, I feel like this blog project has really put all the design and development knowledge I’ve learned to use, making it a pretty good practice project. So, from the perspective of a product designer, I’d like to chat with you about how to build your own blog.

This article will cover the following two parts: the complete process of taking a blog from concept to launch, and recommendations for design/development tools.

Blog Development Process

Blog development mainly includes the following major stages: planning and design, frontend and backend development, deployment and launch, and application optimization. In this section, we’ll introduce the first three parts. Website optimization will be covered later as supplementary content.

Blog development is a simplified project development process. It gives us an excellent opportunity to improve our understanding and control of an entire project.

Oh, right. One more thing before we begin: if you simply want to have your own website and don’t want to tinker with everything yourself, then “no-code” tools may be more suitable for you. You don’t need to write code or maintain servers yourself; you only need to plan, design, and pay. For example, Framer, Webflow, or you can try having AI help you build a website with Wegic.

As for me, I still prefer the traditional development and deployment approach. It gives us more room to work with, allows for a higher degree of customization, and is generally more flexible.

Planning and Design

Blog planning mainly involves deciding what content the blog needs and whether that content leans more toward being static or dynamic. The distinction between static and dynamic content mainly affects the subsequent technology choices and development difficulty.

Most content, such as personal project showcases, article lists, portfolios or photo collections, personal bios, reading lists, website update logs, and so on, is relatively fixed and can be regarded as static content that does not need frequent updates.

There is also content that needs to be updated in real time, such as article views, likes, comment counts, or the music the blogger is currently listening to, today’s water intake, and so on. This dynamic content requires real-time data retrieval and can be regarded as dynamic content.

I’ve also put together a table. You can roughly look at how to distinguish static and dynamic content, as well as their impact on subsequent development.

Reading this article may help you understand static and dynamic websites: Choosing Between Static and Dynamic Websites

During the early planning stage of a project, the more thoroughly you think things through, the easier development will be later. However, the technical difficulty of developing a blog itself is very low, so even if your initial thinking isn’t comprehensive enough, the impact will be small. Don’t put too much pressure on yourself.

After the content architecture is set, you can move on to building the design specifications. For a blog, basic elements such as a color system, layout, and typography are enough. There isn’t much need for a huge design system.

I recommend first learning about frontend thinking and development methods before starting the design. This will make things much easier. The key is how to make things more systematic and modular.

Taking the definition of a blog color system as an example:

First choose a theme color you like, #0284C7, and use Tailwind CSS Color Generator to generate a color palette
Then use Huetone to check and adjust whether the generated palette complies with WCAG 3.0 standards
Finally, just like Tailwind CSS theme colors, you can fine-tune it yourself based on your color sense.
The article Designing accessible color systems may give you more systematic methods for building a color system.

On the design side, you need to define text colors and theme colors; functional colors are not used that much. If you also need to support dark mode, you’ll need to further consider how colors appear in dark mode. The layout framework should also be defined in advance. If the website isn’t particularly personalized, the positions of several functional modules usually won’t change. After defining the two parts—colors and layout—development can also begin in parallel.

Frontend and Backend Development

For the development part, I’ll mainly introduce frontend development, since I don’t know much about backend development.

Frontend Environment Setup

Taking Mac as an example, frontend development requires the following tools:

Code editor: Visual Studio Code (VS Code): software used to write and manage code
Runtime environment: Node.js: a platform that allows JavaScript to run on your computer
Version control system: Git: a tool used to track and manage code changes
Package manager: Homebrew (optional): a tool that simplifies the software installation process on Mac

The basic process is to first install a software package marketplace, then install development-related software such as Node.js, Git, and VS Code through that marketplace. Once installation is complete, you can write code in VS Code and use Node.js to build your blog. Then you can use Git to record the change history of your code, making it easier to manage.

Run the following commands in the macOS terminal to configure the frontend environment you need:

# 安装 macOS 软件包管理：brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 通过 brew 安装 VS Code、git
brew install --cask visual-studio-code
brew install git
# 安装 node 管理工具：nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# 通过 nvm 安装长期支持的 node 版本
nvm install --lts
# （可选）安装 pnpm 软件包管理器
npm install -g pnpm

The required frontend environment is now configured. If you need to install anything extra, you can also do so through the brew software marketplace. Network issues need to be resolved on your own.

Frontend Technology Selection

The frontend environment is the foundation for developing all frontend projects. Now we need to consider the technology choices for this project.

As we discussed earlier, the “content framework” has an important impact on technology selection. To help you make a better choice, I’ve put together a “technology selection” recommendation table based on content characteristics (static/dynamic).

I have used Hugo, Next.js, and Astro from the table, while Nuxt is a strong Vue-based competitor to Next.js. My blog has also gone through changes from Hugo -> Next.js -> Astro, so I suppose that gives me at least a little credibility. To learn about the history and reasons behind these changes, you can check the blog’s changelog.

Among these frameworks, Astro is the one I currently recommend most. The specific reasons are as follows:

Websites built with Astro have excellent performance and load fast enough
Astro natively supports Markdown, making it very suitable as a blog framework
Astro has a relatively gentle learning curve and only requires familiarity with HTML, CSS, and JavaScript
Static builds make it convenient for me to quickly deploy to different platforms later
The server I purchased has relatively weak performance, and pure static sites have low server requirements
Static content is also very suitable for CDN acceleration

You can also check the 2023 Web Framework Performance Report, which compares the performance of web frameworks such as Astro and Next.js. It may help you make a choice.

After the environment is configured, taking an Astro project as an example, we can follow the Astro documentation to create a new Astro-based project:

# 如果没有安装 pnpm，npm 请使用 npm create astro@latest
pnpm create astro@latest

Next, you can find some tutorials and learn step by step how to write code based on Astro. It’s not very difficult to get started.

After the project initialization is complete, you may wonder how to connect it with the specifications on the design side. What I’m using is Tailwindcss - A utility-first CSS framework for rapid UI development. It’s like a plugin for the project that can help you with frontend development. In Tailwindcss, you can predefine fonts, theme colors, functional colors, and even spacing, border radius, and so on. At this point, doesn’t it work perfectly with the color and other specifications you defined during design? Configure it once, and it becomes very convenient to use and adjust uniformly.

# 如果没安装 pnpm，npm 请使用 npx astro add tailwind
pnpm astro add tailwind

Tailwindcss configuration example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector'], // 暗黑模式支持
  theme: {
    colors: {
      white: '#ffffff', // 定义颜色名称 调用方式：text-white bg-white
      black: '#000000',
      brand: {
        500: '#0ea5e9', // 定义品牌色 调用方式一致：text-brand-500
        600: '#0284c7',
      },
    },
  },
};

Backend Development

Earlier, we chose Astro as the technology stack, which is more suitable for developing static content. If your blog needs a lot of dynamic data and requires a simple backend, then I recommend using Next.js or Nuxt.

Basic process:

Have a database (I recommend Supabase’s free plan or a database from a domestic cloud provider) to store your data
Connect it to your Next.js project through the plugin Prisma
Write logic code in the project to operate on the data in the database

Here is an example of an API for querying my “recent updates”:

export async function GET(req: NextRequest) {
  // Get 方法
  const number = Number(req.nextUrl.searchParams.get('number')); // 让程序知道你想要几条数据

  const records = await prisma.recent_states.findMany({
    take: number, // 程序知道之后，去数据库对应数量的数据
    orderBy: { created_at: 'desc' }, // 排序方法 按照时间降序
  });

  return Response.json(records); // 返回 json 格式的数据 方便返回到页面中
}

By calling this API using the Get method, I can query my recent updates and then display them on the blog, allowing you to see and understand what has been happening with me recently.

Compared with static content, there are more operations involved. This adds the process of querying and processing data from the database. If database access is slow, or your cloud server performance is poor, this will directly affect your website’s access speed. Also, dynamic content is not suitable for deployment through traditional CDN distribution. If your website’s access speed is poor, you should give up dynamic content.

Deployment and Launch

After the blog has been developed and tested locally, I recommend uploading it to Github. Github is used for online project hosting with Git. This platform is like a version management tool for files, and it can manage the code of your project.

Every time you modify a piece of code, you can commit it to Github. If the project code build has problems at some point, you can roll it back very conveniently.

After the blog is developed, what we mainly want is for others to see it. So we need a place to host the website, and that place also needs to be accessible by everyone. For example: home devices with a public IP, cloud servers, lightweight application servers, PaaS platforms, and so on.

A laptop at home can actually be used as a device to host a website, provided that you have a public IP and others can access you on the Internet. Currently, public IPs need to be requested from customer service. If you use your laptop as a server, your device also cannot be shut down, and so on. There are still some limitations.

So at present, most people mainly deploy websites on cloud servers or lightweight application servers. These all have public IPs and run 24 hours a day, making them very suitable as website servers. If you don’t need very strong performance, devices costing around 99 yuan per year are enough. It’s still quite affordable. If you’re still a student, you can get a free server from Alibaba Cloud.

Taking a cloud server as an example, here is a brief introduction to the process:

A Linux server, like a macOS system, needs to have the frontend environment installed and configured before building
If the files are not very large, you can also build locally and then upload the dist package to the server
Configure nginx forwarding, and you can access your website through the cloud server’s IP address
If you don’t want to access it directly through an IP address, you can also purchase your own dedicated domain name. Several major domestic cloud provider platforms allow you to purchase domain names
After purchasing a domain name, you need to configure DNS resolution. You can handle this step on the platform where you purchased the domain name or on a dedicated DNS resolution platform, such as Dnspod
Bind the IP address of the A record to the domain name, and then you’ll be able to access your website through the domain name

The above introduces a simple process. If you need a detailed deployment and launch process, you can also refer to Teacher Zuo Zizhen’s article: A Personal Website Building Guide for Designers (Part 1): From Domain Name to Website

If you don’t want to use your own server and only want to design and write code, there are actually many platforms that can handle the server and domain name steps for you. After authorization, these platforms pull your project code from your Github repository, then build and publish it to the web on their cloud platforms.

Similar platforms include Vercel, Zeabur, Cloudflare Page, and so on. If you don’t want to maintain your own cloud server, this is also a good approach.

Taking Vercel as an example, here is a brief introduction to the process:

Create a Github repository and upload your local project code to a private Github repository via Git.
Register and log in to the Vercel platform, grant the platform permission to read your Github repository, and select the corresponding project repository.
The project framework is automatically recognized. Click the button to build. The platform will display build logs, so if something goes wrong, you can troubleshoot it in time.
Once the build is complete, the platform will provide a free subdomain for you to use. You can directly visit the domain name and see that your website has already been published online.
You can also choose to purchase a domain name, then follow the platform’s prompts to bind the project to the domain name you own.

The above provides two ways to deploy a website to the public Internet. You can choose according to your preferences and the level of difficulty. These two methods can also be combined.

Summary

Due to length limitations, every part of the process has been covered, but not in great detail. You’ll still need to look up more materials on your own. This article can only provide general directional guidance. I hope this introduction to the development process can help you.

Design & Development Tool Recommendations

As everyone may or may not know, I quite like hoarding things, so when it comes to website development, I’ve also collected quite a few useful tools and resources. I’ll take this opportunity to share them with you; perhaps they can help with your development.

Design

Name	Description	Category	Recommendation
Figma	Collaborative interface design tool	General	⭐⭐⭐
Rosure	My design collection, including icons, fonts, website inspiration, and more	Inspiration	⭐⭐⭐
Toolfolio	Design tools and inspiration aggregator	Inspiration	⭐⭐⭐⭐
Tailwind CSS Gradient Color Generator	Generates color scales based on the color you provide	Color	⭐⭐⭐
Palettte	A clear palette editing and remapping tool	Color	⭐⭐⭐
Radix Colors Custom Palette	Generates color palettes and allows effect previews, with dark mode support	Color	⭐⭐⭐
Huetone	A tool for creating accessible color systems	Color	⭐⭐⭐

Development

Name	Description	Category	Recommendation
Homebrew	macOS (or Linux) package manager	General	⭐⭐⭐
pnpm	Project package manager	General	⭐⭐⭐
nvm	Node version manager	General	⭐⭐⭐
Tailwindcss	Utility-first CSS framework	CSS	⭐⭐⭐⭐

New Paradigms for Visual Interaction in the Age of AI

Wed, 24 Apr 2024 00:00:00 GMT

Preface

I’ve been thinking about what form these “tools” that we take for granted will take in the age of artificial intelligence.

Currently, the most common application of artificial intelligence is usually limited to chat interfaces, where interaction typically follows a text-based question-and-answer model. As technology continues to advance, Vercel has also introduced Generative UI, which can dynamically generate customized interactive user interfaces based on conversation content and needs. What form will future UI take? Will it evolve into what is shown in movies, with cool holographic displays and intuitive interactive HUDs, or might we enter a new era that no longer relies on traditional GUIs?

Natural language becoming the fundamental interface for every software application might mean the end of GUIs

Random Thoughts

In the future, could I simply say, “Siri, book me a plane ticket,” or, just like Musk’s brain-computer interface experiments, transmit information with only a thought? The information that needs to be presented would appear directly in front of the eyes (in that case, would blind people also be able to see?), without the need for any external devices. The content that needs to be controlled could also be interacted with through fingers and eye movements, like with VR glasses. Perhaps in the future, it really will be like Black Mirror.

Research

AI Pin

Humane’s Ai Pin can be considered a pioneer. This product attaches magnetically to clothing. It has no screen and is controlled through voice and a small touch surface. It has a laser that can project images onto your palm, as well as a camera that can recognize gestures for switching and other operations.

Features it currently and may potentially support in the future: laser projection display, gesture and voice interaction, AI assistant, real-time translation, health monitoring, music playback, message notifications, and more.

Rabbit

Rabbit R1 is an AI device launched by Rabbit, positioned as your pocket companion. It mainly consists of a screen, camera, scroll wheel, and button.

Features it currently and may potentially support in the future: understanding and executing actions (hailing rides, ordering food, playing music), real-time translation, teaching mode, etc. You can watch the review video.

Dot

Dot is a chat app on iOS. Users can use it to send text, voice memos, images, PDF files, and it can also search the web for you. Currently, Dot communicates through text and aims to become an always-available companion. Unlike most AI conversations, Dot can remember what you’ve said before and almost never forgets anything.

Amazon Lex

Amazon Lex V2 is a service provided by AWS that allows developers to build conversational interfaces for applications, supporting voice and text input. Users can interact using natural language, such as placing orders. In addition, Lex V2 can also be integrated with web elements (buttons, select boxes, etc.) to solve users’ problems or help them complete specific tasks through Semi-Guided Conversations.

Summary

These examples may not necessarily be representative, but they do provide a simple glimpse of the overall trend:

The hardware carrier has changed. In addition to phones and computers, people are also trying to present content on more portable devices, such as necklaces, badges, and pagers.
The ways in which visual images are presented are becoming more diverse, such as projection and laser displays. Due to size constraints, the main forms are primarily text, simple charts, and button information.
Natural language interaction will be used more and more widely.

My Thoughts

Generative UI Is a Future Trend

At present, interface design must satisfy as many people as possible. Any experienced professional designer knows the main drawback of this approach — you can never make anyone completely satisfied. Personalization and customization also play a relatively small role.

This application scenario is somewhat similar to Alipay’s dynamic personalized cards on the home screen based on location (showing airport-related information when at the airport).

Moreover, generative UI is not limited to dynamic cards; it can also dynamically present an entire system for you based on personal data. The article Generative UI and Outcome-Oriented Design gives examples of what true personalization for every individual looks like:

Dyslexia — the application displays special fonts and color contrast
Users who care about cost and time — explicitly display this information and automatically increase the weight of corresponding flights
Although it is the same application, the interface, features, and more are all personally customized

Designers will also shift from universal design to personalized design, defining boundaries for various personalized scenarios to strengthen constraints on artificial intelligence.

Traditional Interaction Will Not Be Replaced, but It Will Be Greatly Simplified

Although natural language interaction has advantages, in scenarios that require fast and precise input, visual elements such as buttons, icons, and gestures are still necessary. Pure voice input may reduce efficiency. Also, not all tasks can be completed well through voice conversations alone.

Different interaction methods suit different situations. The coexistence of visual and voice input/output can maximize adherence to accessibility design principles, allowing people with disabilities to choose the method that suits them. Once LLMs can complete specific tasks, interfaces will be greatly simplified.

In addition, natural language interaction is not applicable in all scenarios. For example, in companies, libraries, and similar places, it may also cause concerns such as privacy leakage.

Final Notes

Although I wanted to expand on this as much as possible, as I kept writing, I still ended up returning to the GUI itself — I was merely imagining the future forms of existing products…

References

A Study of Modular UI Design: Icons

Sat, 11 Nov 2023 00:00:00 GMT

Background

There are already many high-quality icon libraries, such as Untitled, Lucide, and Remix. For more comprehensive options, you can also refer to React Icons and Iconfont.

Although there are so many existing icon libraries, if all you can do is choose icons based on their meanings… even someone who is not a designer can do that.

We cannot “know what something is but not know why it is so.” So let’s start with icons and understand the theory behind design.

Overview

In the field of UI design, icons play a central role. They transform textual information into visual symbols, simplify users’ understanding of content, and enhance the aesthetics of the interface. Especially in B-end design, although icons are not used as frequently or as complexly as in C-end design, in form-oriented page layouts, appropriate and suitable icon design can highlight the style and brand tone of a product or even the entire enterprise.

The earliest form of visual communication was basically carried out through graphics. This is a prehistoric cave mural by North American Indians. Although murals are often said to be the predecessor of writing, I personally feel they are also very similar to icons. Icons are more like a universal language, crossing various languages such as Simplified Chinese, English, and Korean.

The Ins and Outs of Icons

First of all, an icon should clearly represent an object, operation, or idea. If users cannot see/understand its meaning, the icon becomes a flashy but impractical decoration, and may even hinder task completion.

Icon Size

In fact, when using various component libraries, I discovered that the icons in these libraries are all based on a 24px size.

After searching through online materials, I found several possible reasons:

The 24px size ensures that icons remain clear and readable across various screen resolutions and devices.
The 24px size adapts to multiple grid systems (such as the 8-Point Grid System), making it easier for designers and developers to collaborate.
24dp*24dp @x1 is the “perfect size” for icons recommended by the Material Design 3 specification. At the same time, Material Design recommends a minimum touch target area of 48dp.

I have not yet found supporting data behind this, so I will apply it based on convention:

The recommended standard icon size is 24px*24px, usually with 2px of padding around it, but this is not absolute; the specific margin should be judged based on the Keyline. The corresponding recommended touch target size is 48px*48px.
In desktop environments, the icon size can be adjusted to 20px*20px, with a recommended corresponding touch target area of 40px*40px.
16px is usually used as the minimum size. At this size, icons should be designed to be more concise, and their decorative role will be greater than their functional role.

“Rules are rigid, but people are flexible.” We can apply this guideline while also taking actual circumstances into account.

px, dp, and pt are not equal; they each have their own conversion relationships. You can search online for specific information.

Icon Styles

Existing icon styles are varied and complex, and have long since gone beyond just linear and filled styles. Icons on the C-end are even more diverse. Here, we will temporarily analyze them based on basic styles.

Below are the icon styles of Untitled Icons that I found: Line, Duocolor, Duotone, and Solid.

The four icon styles above can basically meet all the needs of B-end design.

If divided in a more detailed way, Material Design further divides “linear icons” into: OutLine, Rounded, and Sharp.

Combined with the stroke thickness and radius size of linear icons, this is basically enough to meet the customization needs for a company’s and product’s character.

In addition, the style of an icon not only affects the overall interface style, but also affects the functionality and user experience of the icon:

Complex icons are not suitable for overly small sizes (16px * 16px icons need a more concise linear style)
Filled icons are generally easier to recognize than linear icons, but the specifics need to be judged based on the icon shape source of conclusion

Icon Design

First of all, I want to say that I have never completely independently designed an icon. In the past, if there was no icon that met the requirements, I would basically take an icon with a similar meaning and then simply adjust its shape.

So, taking this opportunity, I can also get some exposure to icon design. Ant Design’s icon design guidelines have actually already covered a lot of related content, and I recommend learning about them first.

Using Keyline

Keyline is the foundation of the grid. By using these core shapes as guides, we can maintain consistent visual proportions among system icons.

The image below is a Keyline grid drawn according to the specifications of the Material Design 3 Icon design template. Based on this grid, you can basically draw all kinds of icons.

In today’s world where design resources are everywhere, you can absolutely find icons on iconfont whose style meets your needs. Then, based on the product’s style, simply redraw them. There are very few cases where a designer truly needs to create something completely from scratch.

I also tried applying Keyline to draw several basic icons: home, card, lock, and file. These are also the four basic shapes on the Keyline.

During my own hands-on practice, I discovered a few small tips for icon design:

Try to use Boolean operations with “basic shapes” to construct icons.
Keyline provides numerical balance, but numerical equality does not equal visual balance (for example: a play icon).
When choosing a stroke alignment method, icon design mostly uses center alignment (Center) or inside alignment (Inside). Center-aligned icons will look larger under the same conditions.
In Figma, using Shift + Backspace to delete points and making use of the pen tool’s center point feature can greatly improve the efficiency of icon design.
After icon design is complete, you can apply Flatten to integrate the icon lines together, making unified processing easier. There is no need to turn strokes into fills, because this is not conducive to later adjustment of line thickness.

Icon Application

After icon design is complete, the next step is to consider how to effectively present these icons to the audience. As the saying goes, “even an ugly daughter-in-law eventually has to meet her parents-in-law,” which means that no matter what the design result is, there needs to be a process of presentation and feedback. This is not only to showcase the results, but also to obtain feedback, improve, and optimize the design.

Image Method

The most traditional display method is naturally images. Designers export icons in @1x and @2x according to states such as default, hover, pressed, active, and disabled, package them into a compressed file, and send it to the front-end developer. Or the designer exports the images and uploads them to Lanhu, and the front-end developer downloads the icons they need from “Lanhu” by themselves.

If the front end needs icons in image format, I usually compress the icons through TinyPNG to make the icons occupy as little space as possible while ensuring their clarity. My most commonly used tool is TinyPNG4Mac, which is quite convenient. Some front-end scaffolding tools also come with image compression features, and images occupying less than a certain value will also be converted into Base64 encoding for storage.

Tracing back to earlier technologies, we encounter “sprites,” which is a practice of integrating multiple icons into a single image with a transparent background. Designers place all icons on one image, and then the front end displays them on the web page based on each icon’s position and size. The advantage of this method is that it reduces the number of web requests. In fact, some websites today, when creating dynamic images, also often use a method similar to “sprites,” creating animation effects through continuous static frames.

Images in JPG / PNG format are the safest display method. All browsers support them. Although they are bitmap formats and are not clear enough after being enlarged, image formats can basically solve most website needs, and the solutions are mature enough.

Existing CDN service providers and/or some frameworks, such as Next.js, can intelligently identify whether a browser supports WEBP or AVIF formats. These two image formats can provide higher compression rates while maintaining higher clarity.

Font Method

As mentioned earlier, icons need to be exported by designers separately according to various states and then provided to developers. If the overall color scheme of the official website is adjusted, and all icons need to be re-exported, this might be a disaster.

Perhaps because of this or other reasons, the icon font solution appeared. The most commonly used icon font platform in China is iconfont. This requires designers to outline the icons and then upload them to iconfont. The front end can then reference icons by icon name and conveniently adjust their color and size.

Until the time I wrote this article, font icons were still quite widely used. They are convenient to call and take up less space. However, the following main shortcomings affect the use of font icons:

Icons need to be processed one by one by designers. For some icons, outlining alone is not enough; you also need to use the Figma Fill Rule Editor plugin to adjust the icon fill mode to “Non-zero rule” so that it can display normally in iconfont. For the specific solution, you can refer to
- If an icon disappears when adjusting the fill style through Fill Rule Editor, you can try copying the icon as-is into illustrator / Sketch, and then copying it back to solve the problem. (kidding)
Font icons do not support multicolor icons well enough, and the degree of customization is not high enough.
Font icons may also fail to render properly and require special handling (I once naively thought it was a problem with my browser).

I can only evaluate font-style icons from a designer’s perspective, because I have never used this method during development. Recommended article: Icon Fonts vs SVG Icons: What Works Best for You?, which compares the pros and cons of fonts and SVG in relatively great detail.

SVG Method

SVG icons not only inherit the main advantages of font icons, but also solve some limitations of font icons. Their main advantages include:

Support for each icon having multiple colors, including gradients.
Support for more complex graphics and shapes, without being limited to the basic shapes of fonts.
Support for direct embedding in HTML code, making it convenient to edit and control icons.
Support for CSS and JavaScript animations

iconfont also does not only support the font icon method. The official platform also supported referencing SVG icons through the symbol method several years ago.

We can briefly understand SVG through an example. The following is a “home” icon in SVG format exported from Figma, and its code is as follows:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M15 21V13C15 12.4477 14.5523 12 14 12H10C9.44772 12 9 12.4477 9 13V21M15 21H20C20.5523 21 21 20.5523 21 20V9.48908C21 9.18049 20.8575 8.88919 20.6139 8.69973L12.6139 2.47751C12.2528 2.19665 11.7472 2.19665 11.3861 2.47751L3.38606 8.69973C3.14247 8.88919 3 9.18049 3 9.48908V20C3 20.5523 3.44772 21 4 21H9M15 21H9"
    stroke="black"
    stroke-width="2"
  />
</svg>

This SVG contains several key attributes:

path: The path element defines the outline of the graphic, describing points on the path through a series of commands and parameters to form the graphic. In this example, these commands and parameters together form the shape of a house.
fill: The fill attribute is used to set the internal color of the graphic. It can be a hexadecimal color code (for example, #FF0000), or a common color name (for example, black). none means there is no fill, while currentColor uses the value of the color attribute of the element or its parent element.
stroke: The stroke attribute is used to define the color of the graphic outline, and it is used in a way similar to fill.
stroke-width: The stroke-width attribute specifies the width of the stroke.

If an SVG contains multiple paths, there will be multiple path elements. Each path can have independent fill and stroke attributes to control its own fill and stroke styles. If a certain part of the graphic does not need a stroke, its stroke attribute can be set to none.

As shown in the image above, what we see is a preview of an icon and its corresponding code. If you look closely, you will notice that the code does not specify the icon’s width, height, fill color, or stroke color.

This approach is intended to provide SVG icon code that is as concise as possible, containing only core information such as the icon paths. The purpose of this design is to allow frontend developers to control the color and size of icons more flexibly. For example, if the SVG icon code includes a fill attribute by default, frontend developers may find that they cannot change its color when applying these icons. To solve this problem, one approach is to remove the fill attribute or set fill to currentColor, and then define the color through CSS. Another approach is to specify the desired color directly in the fill attribute.

It is not recommended to use hacky methods such as filters to adjust colors, because this approach can be both complex and imprecise.

Similarly, SVG icons support compression, and tools such as SVGO can be used to clean up redundant parts of the SVG code.

For frontend practices when using SVGs, you can refer to the examples below, which use Tailwindcss and Lucide Icons:

Direct Usage Example

This code example demonstrates how to use simple classes to control an icon’s size, color, and display effect in dark mode. The operation is very intuitive and convenient:

<div className="Container">
  <svg
    className="h-5 w-5 stroke-blue-500 hover:stroke-blue-600 dark:stroke-blue-400 dark:hover:stroke-blue-500"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M15 21V13C15 12.4477 14.5523 12 14 12H10C9.44772 12 9 12.4477 9 13V21M15 21H20C20.5523 21 21 20.5523 21 20V9.48908C21 9.18049 20.8575 8.88919 20.6139 8.69973L12.6139 2.47751C12.2528 2.19665 11.7472 2.19665 11.3861 2.47751L3.38606 8.69973C3.14247 8.88919 3 9.18049 3 9.48908V20C3 20.5523 3.44772 21 4 21H9M15 21H9" />
  </svg>
</div>

Package Usage Example

The following example shows how to apply icons through a package. This method is also simple: you only need to import the required icons and set the styles:

import { Home } from 'lucide-react';

const App = () => {
  return (
    <Home className="h-5 w-5 stroke-blue-500 hover:stroke-blue-600 dark:stroke-blue-400 dark:hover:stroke-blue-500" />
  );
};

export default App;

To deliver design icons to the development team, you can choose iconfont or use the figma-icon-automation plugin to package the icons as an npm library, making it convenient for the development team to use them via an installed package. This method only needs to be configured once and is highly efficient.

Although the way SVG icons are used involves code, this section is still written for designers. The purpose is simply to tell everyone that SVGs do not have issues with being difficult to adjust in color, nor are they difficult to use. Actively encourage developers to follow up~

Conclusion

Behind this tiny icon lies rich and complex content, and this article is merely an initial exploration of this vast topic. As a beginner, mistakes in my article are inevitable, and I sincerely welcome readers to offer valuable feedback and corrections.

References

Notes on Calling the Notion API with Next.js

Wed, 04 Oct 2023 00:00:00 GMT

Pitfall Collection

The pitfalls come partly from Next.js and partly from the Notion API. Of course, I myself am the biggest pitfall.

Next.js server-side rendering
Notion API data filtering
Notion Block data rendering
Notion temporary image expiration
Using the Next.js Image component
Rendering styles for Notion article pages

The above is basically all the pitfalls I ran into. Before introducing my experience dealing with them, let me briefly talk about the original intention of the project.

Original Intention

At first, it was because I had learned frontend development and then wanted to understand backend development. Initially, I made a full-stack text-to-speech project based on edge-tts called Rotts (frontend React + backend Flask). But this project was very simple: the backend basically just requested the API, obtained the voice list, then passed information such as voice, pitch, and text to edge-tts, waited for the audio to return, and then played/downloaded it. I felt like the backend part was over before I had really experienced much of it.

So I wanted to find another project to continue learning backend development. The first thing that came to mind was Node.js. During my research, I saw many people recommending Next.js, which is also based on Node.js. So it clicked immediately. I also wanted to simply reinvent the wheel and build a blog system that uses Notion as a CMS. Visually, everything would be kept simple to reduce burden, with a focus on content rendering.

Originally, I thought that with ChatGPT, I could just ask it whenever I didn’t know something. As it turned out, the Next.js App Router was too new, and it wasn’t even in its knowledge base. Every time I asked it related questions, the answers were not accurate enough.

Project Information

Name: Brog
Introduction: A minimalist blog system built with Next.js, using Notion as the CMS
Tech stack: React + Next.js + Typescript + TailwindCSS
Github: https://github.com/yikZero/Brog

Next.js Pitfalls

Duplicate Requests

Actually, when I first started fetching data, I had doubts. I fetch here, then fetch there. It’s all the same data—wouldn’t that cause multiple requests and be very wasteful?

Because of this, I kept trying to separate function logic from requests and just pass several props around… But in fact, at least in React, you don’t need to worry about this.

Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.

If the link and parameters you fetch remain unchanged, then even if you make multiple requests, React will help merge them into a single request. So there’s no need to keep forwarding props between components. Just request the same data multiple times; it’s not a problem. React will merge the requests on its own and won’t repeatedly make duplicate requests that affect the network.

Server Components

What counts as a server component? Anything placed under the app/ directory should belong to server components. When I wasn’t sure whether something was a server component, I threw all the components and lib directories I used into app/… just for server components.

If you want it to become a client component, add use client at the top, and it will be recognized as a client component. The official Next.js recommendation is to use server components whenever possible.

next/image Usage

Because of LCP performance, Next.js officially optimizes the usage of the img element and recommends using the official Image component.

For specific usage, refer to Image Optimization

I thought it would be simple—just replace the name. But it requires me to provide explicit height and width. For images I fetch dynamically, how would I know the image height and width? So I used a bit of a workaround… also a solution from stackoverflow.

<figure className="relative">
  <image
    src="{src}"
    width="{0}"
    height="{0}"
    sizes="100vw"
    className="w-full h-auto"
  />
</figure>

Notion-Client Pitfalls

Data Fetching

Notion officially provides @notionhq/client, and react-notion-x also has a notion-client. I learned about notion-client first, so after finishing the styles, I tried integrating the third-party implementation.

How should I put it? notion-client is also quite good. By providing a public NOTION_PAGE_ID environment variable, you can fetch the data. But what you get is the full dataset, and there is no way to filter by field name like with the official API, so organizing the data becomes much more troublesome. For a beginner like me, this was way too much trouble… After all, the data obtained from Notion is nested layer by layer, and every block has its own ID, which made me completely dizzy.

In the end, I still referred to the official API usage in notion-blog-nextjs to obtain the corresponding data.

Image Expiration

The image links in the data officially provided by Notion are temporary Amazon links, which expire after one hour. This causes the images to break.

Vercel Cron: Many people also choose to use the Vercel cron feature to rebuild and render every hour. But I think this wastes too many resources and is too environmentally unfriendly (:

Converting temporary addresses into permanent addresses: For this solution, you can refer to fix: solve linked img crash #524

Uploading to Upyun via PicGo: Because I have migrated data before, if all Markdown images use relative paths, it is simply a disaster. So now I choose to upload them to Upyun via PicGo and return my CDN address. If I need to migrate, at least the images won’t be lost.

HomeLab Environment Setup

Tue, 12 Sep 2023 00:00:00 GMT

Background and Purpose

Home network configuration typically involves an optical modem as the entry point for the ISP connection, an R4S soft router (NanoPi R4S based on OpenWrt), and a Linksys hardware router for managing the internal network. The goal of this article is to optimize network performance through bridge mode, reduce NAT conflicts, and use the R4S and Linksys to achieve efficient network management and wireless coverage.

Topology Diagram

The optical modem in bridge mode connects to the R4S WAN port. The R4S serves as the main router and handles PPPoE. The Linksys connects its WAN port to the R4S LAN port and is set to bridge mode as a wireless access point.

Optical Modem Bridge Configuration

Reasons for Bridging

Prevent duplicate NAT forwarding and avoid double NAT issues that affect certain applications.
Reduce the network load on the optical modem; the optical modem is only responsible for optical/electrical signal conversion and does not perform routing.
The optical modem has limited functionality; after bridging, the R4S or Linksys can provide more powerful routing functions.
The optical modem’s WiFi signal is weak; after bridging, Linksys can provide better wireless coverage.

Specific Configuration Steps

Hangzhou Unicom Optical Modem

Login information:
- Address: http://192.168.1.1/cu.html
- Account: CUAdmin
- Password: CUAdmin
PPPoE settings:
- Account: Usually starts with 0571 (Hangzhou area code); check the backend to obtain it.
- Password: The last six digits of the account.
Bridge mode settings: Find the WAN settings through the login interface, change the mode to bridge, save, and reboot.

Hangzhou Mobile Optical Modem

Login information:
- Address: http://192.168.1.1/
- Account: CMCCAdmin
- Password: aDm8H%MdA
PPPoE settings:
- Account: Starts with hz, followed by the initial letters of the district (for example, Binjiang District is hzbj), then followed by a letter from a-z according to the broadband activation order (for example, the first line is hzbja).
- Password: Try 000000, 888888, 123456, the last six digits of the account, or the last six/eight digits of the ID card number.
Bridge mode settings: After logging in, change WAN to bridge mode, save, and reboot.

Using PPPOE in Bridge Mode

After bridging, the R4S or Linksys needs to dial up using the PPPoE account and password to ensure the Internet connection works properly.

Linksys Bridge Mode

Initial Configuration

Regardless of whether you later want to change it to “Bridge Mode” or “Automatic Configuration - DHCP”, you first need to perform the initial setup. Follow the “Configuration Wizard” to set the router password normally and configure the WiFi password. Without any additional configuration, and as long as the network cable is fine, you should be able to access the Internet normally.

Advanced Settings

Bridge Mode

Connection: Connect the R4S LAN port to the Linksys WAN port (Internet port).
Login interface: Access the Linksys web interface (default 192.168.1.1) and skip the initial setup prompts.
Set bridge mode:
- Go to Configuration > Connectivity > WAN Setup.
- Select Bridge Mode to use the router as a wireless access point.
- Select “Obtain an IP address automatically” or manually specify an IP (such as 192.168.31.2, with the default gateway as 192.168.31.1).
- Save and reboot the router.

After setup is complete, click “Save” to reboot the router.

Additional Optimizations

Wireless Network - Advanced Settings - Roaming Assistant: Select Off to improve stability.
Wireless Network - Advanced Settings - Region: Select Australia, which may enhance signal strength, but pay attention to compliance; it may not be applicable in all regions.
If using Homeassistant: It is recommended to disable WiFi dual-band merging mode to avoid compatibility issues.

Summary

This article provides detailed steps for optical modem bridge mode, R4S PPPOE configuration, and Linksys bridge mode to ensure efficient operation of the home network.

Installing Plex Server on R4S: Notes

Sat, 18 Mar 2023 00:00:00 GMT

Environment Configuration

Model: FriendlyElec NanoPi R4S
Firmware version: OpenWrt R22.3.13 (2022-06-22)
Architecture: ARMv8 Processor x 6
Environment: Google Direct

Preparations

Prepare a network that can access Google on your own
Install an OpenWrt system with docker
Expand the storage card capacity for docker

Pitfall Notes

Architecture Issue

Most existing tutorials for setting up Plex with docker are based on the X86 architecture. If you set it up using the docker image from plexinc/pms-docker, an error will appear in the docker container logs: stderr: exec /init: exec format error

This is because the docker container you installed does not match your system architecture.

So I found the ARM-architecture PLEX from linuxserver/plex and started the installation:

docker run \
-d \
--name plex \
-p 32400:32400/tcp \
-p 3005:3005/tcp \
-p 8324:8324/tcp \
-p 32469:32469/tcp \
-p 1901:1900/udp \
-p 32410:32410/udp \
-p 32412:32412/udp \
-p 32413:32413/udp \
-p 32414:32414/udp \
-e TZ=Asia/Shanghai \
-e PLEX_CLAIM=claim-xfczZtmEH5QPvZQc1HsF \
-e ADVERTISE_IP="http://192.168.31.1:32400/" \
-h Zero-R4s \
-v /myplex/plex/database:/config \
-v /myplex/transcode/temp:/transcode \
-v /mnt/sda/Media:/data \
--restart unless-stopped \
lscr.io/linuxserver/plex:latest

The specific tutorial can also be found at linuxserver/plex. Just adjust it according to your own situation.

PLEX Has No Initial Setup Page

This means that when entering the Plex application interface for the first time, you may encounter a “server not found” issue because remote access has not been enabled. In this case, you can use the following two methods to solve it:

1. SSH Port Forwarding

You need to open the PowerShell tool on your local computer, then run the command above to forward the Plex port of the remote server (default is 32400) to a port on your local computer (for example, 8888). After the port forwarding succeeds, you can access localhost:8888/web in your local computer’s browser to open the Plex application interface.

2. Direct Connection

If remote access has already been allowed on the remote server, you can try directly accessing the remote server’s IP address and Plex port in the browser (for example, http://13.124.4.66:32400/web) to open the Plex application interface.

Solution

On macOS, you can use the iTerm application to set up SSH port forwarding. The specific steps are as follows:

1. Connect to the Remote Server

Enter the following command to connect to the remote server, where username is the username on the remote server, and remote_server_ip is the IP address of the remote server:

ssh -L 8888:localhost:32400 username@remote_server_ip

This will forward Plex’s 32400 port on the remote server to port 8888 on the local computer.

2. Enter the Password on the Remote Server and Verify

Now, you can open the browser on your local computer and enter http://localhost:8888/web to access the Plex interface on the remote server.

Another Error

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ED25519 key sent by the remote host is
SHA256:OC9qmnB9nQtFN/OiPH7jGEoKb/zbX4NghGv/glu5dwQ.
Please contact your system administrator.
Add correct host key in /Users/yikzero/.ssh/known_hosts to get rid of this message.
Offending ED25519 key in /Users/yikzero/.ssh/known_hosts:1
Host key for 192.168.31.1 has changed and you have requested strict checking.
Host key verification failed.

This error message indicates that the key of the remote server previously connected to has changed. This may be because the server underwent a system update or the administrator changed the server’s key. To protect information security, the SSH client checks and verifies the remote server’s key. If the key has changed, this error message will appear.

Update the remote server key data on the local computer to resolve the issue. The steps are as follows:

Delete the old key: Run ssh-keygen -R <remote_server_ip> to delete the old key data on the local computer.
Connect to the remote server: Connect using ssh username@remote_server_ip.
- The system will prompt “Are you sure you want to continue connecting (yes/no)?”. Enter yes and press Enter.
- Enter the remote server password to verify.
- After connecting, run the command again to set up SSH port forwarding.

After completion, you can access the PLEX server.

Hugo Setup Notes: From Zero to One

Wed, 23 Mar 2022 00:00:00 GMT

Hugo Installation

Official Documentation Tutorial

The official website provides detailed installation tutorials for different systems: https://gohugo.io/installation/

Brew

If you are a Mac user, you can use the brew command to install it.

brew install hugo

Note: This installation method may not install the latest version of hugo. If you want to use the latest version of hugo, please install it in another way.

Configuration File Format

As a beginner, which configuration file format to choose—yaml, toml, or json—became my first question.

TOML

Case-sensitive
Files can only contain UTF-8 encoded Unicode characters
Not sensitive to indentation

YAML

The file starts with ’ - ’, marking the beginning of the document
Key-value pairs are separated by colons
Lists start with hyphens
Uses indentation with one or more spaces to describe nested collections

JSON

Data is stored in name/value pairs
Records are separated by commas. Trailing commas without following properties are not allowed
Property names and strings are wrapped in double quotation marks
Single quotation marks are not allowed

String Differences

Strings are supported in any format, but JSON does not support multiline strings and also does not support comments.

# TOML
key = "String Value"
multiline = """\
       The quick brown \
       fox jumps over \
       the lazy dog.\
       """

# YAML
key : String Value
multilinePreservedLinebreaks:
|
  L1 - The quick brown
  L2 - fox jumps over
  L3 - the lazy dog.
multilineReplaceLinebreaksWithWhitespace:
>
  This sentence ist just too long to keep it
  on the same line.

// JSON
{
  "key": "String Value"
}

Because of the relatively troublesome comment syntax of JSON and the strict indentation requirements of YAML, I ultimately chose TOML as the configuration file format. I can also indent freely, making it easier for me to read.

Scattered Knowledge Points

This symbol := is an assignment operator in the Python language (mainly called the walrus operator). The walrus operator compresses our code to make it shorter.

var a; //定义
a = 1; //赋值

layout/baseof.html is the foundation of all pages
The layout/partials folder can contain partial sections such as header, footer, etc.
Steps to add a new page:
You need to add a .md file in content
Add a page with the same name in layouts/_default
Code for activating the active state of the menu:
According to the method in the official website’s instructions, the active state cannot be added successfully, so I looked for another way to determine active

{{ range .Site.Menus.main }}
      {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
      {{- $page_url:= $currentPage.Permalink | absLangURL }}
        <li>
            <a {{- if eq $menu_item_url $page_url }} class="active" {{- end }} href="{{ .URL }}">
                {{ .Pre }}
                <span>{{ .Name }}</span>
            </a>
        </li>
      {{ end }}

A small knowledge point about the position function in css!

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0px;
  left: 0px;
}

Shortcode can simplify code and write some methods. It is similar to a function. For specific writing methods, refer to: Hugo-basic

References

Automated Push Notifications with IFTTT

Thu, 14 Oct 2021 00:00:00 GMT

Preface

I previously published an article about RSS subscriptions for the school’s official website. With an RSS subscription URL, we can push RSS updates to our “RSS client” to read newly updated articles on the website. When I wrote that article, I only knew how to set up update notifications for the school’s official website on my own “RssBot” on Telegram. I couldn’t push them directly to WeChat, so now I’m writing an article that can achieve pushing to WeChat.

Getting the RSS Subscription URL

💡 First, we need to be clear that not every website provides RSS subscriptions. Only some websites provide RSS. For websites without RSS subscriptions, you can only create the feed yourself or find an RSS feed created by others. Here I recommend a feed-sharing website: RssHub Author: DIYgod

I will use our school’s subscription as a demonstration:

1. 在RssHub中中找到我们学校的订阅地址： #路径：路由-大学通知-浙江工业大学
https://docs.rsshub.app/university.html#zhe-jiang-gong-ye-da-xue
2.根据需要修改参数，这里我们需要公告栏（板块ID：1）的通知更新，因此我们的订阅链接为：
https://rsshub.app/zjut/1
#如果需要每周会议的RSS订阅地址，那么将1改成2，即：https://rsshub.app/zjut/2

The first step is complete. The RSS feed URL we obtained is: https://rsshub.app/zjut/1

Push School Notification Updates to Email

Open the IFTTT website and register an account. (You can log in with a Google account in one click)
Click Create in the upper right corner to create a project.

IFTTT is the abbreviation of “if this then that.” Simply put, it means if this happens, then that happens. If this operation is completed, it will automatically complete that operation. For example: a teacup is placed under a water dispenser, and the water dispenser detects the teacup — this is this. The water flows down by itself and fills the teacup. This is that. If a teacup is detected, the water dispenser releases water.

What we want to achieve today is: If a notification update is detected on ZJUT’s official website, then send us the title and content of this new notification by email.
Click this and find RSS Feed.

Select New feed item, enter https://rsshub.app/zjut/1 in Feed URL, and click Create trigger. This completes the this operation.

Similarly, search for email in that, then bind your own email according to the prompts. Future official website notifications will be sent to this email.
No need to modify anything here. Just click Create action, then Finish.

💡 This implements pushing official website notification updates to your email. Due to website-related reasons, there may be a delay of more than ten minutes, so please understand.

Push to WeChat

Pushing to WeChat is slightly more difficult. If you want to configure it yourself, you can continue reading. If you don’t want to configure it yourself, you can scan the QR code below to follow the official account and receive update notifications from the school’s official website. Notifications from college websites will be added later.

Pushing RSS updates to WeChat uses WxPusher and IFTTT. The function is implemented together with Webhook.

WxPusher (WeChat push service) is a real-time information push platform that uses a WeChat official account as the channel. You can push information to WeChat by calling the API, without installing any additional software, enabling real-time information notifications. You can use WxPusher for server alarm notifications, course enrollment notifications, ticket-snatching notifications, information update reminders, and more.

1. Click the address, scan with WeChat to follow, and log in to the WxPusher backend

2. First create an application, and remember to save the APP_TOKEN.

APP_TOKEN：AT_iFym3l0dClijYPJk16AMjcjfPcazj8Ne
#每个人获取到的APP_TOKEN都不一样，请勿复制我的

3. Create a topic.

Remember the topic ID you just created.

4. Click Follow. A QR code will appear. Scan the QR code with WeChat to follow the topic.

5. Test whether the function works properly through the GET interface.

The GET interface is a simplified version of the POST interface. It is mainly for convenient calls in certain situations and only supports sending text (contentType=1). Example:

http://wxpusher.zjiecode.com/api/send/message/?appToken=AT_iFym3l0dClijYPJk16AMjcjfPcazj8Ne&content=Zero测试&topicId=608&url=https://example.com
请求参数：appToken、uid、topicId、content、url ，其中 content 和 url 请进行
urlEncode 编码。

appToken：AT_iFym3l0dClijYPJk16AMjcjfPcazj8Ne topicId：608 #即主题ID

Modify the address above according to your appToken and topicId. Fill in the push content after Content=, and if url is not needed, you can choose to delete &url=https://example.com.

After modification, paste the address into the browser address bar.

If it fails, there will also be a prompt indicating where the error is. Just modify it according to the prompt. At this point, if nothing goes wrong, your WeChat should receive the message you just sent.

At this point, the WxPusher section is configured.

6. Create a new IFTTT project. For the this part, still choose RSS. For details, please refer to the section on pushing from IFTTT to email.

For the that part, select Webhooks and configure it as shown in the image.

http://wxpusher.zjiecode.com/api/send/message #URL POST #Method application/json
#Content Type

Modify the Body section according to your actual situation and parameters. For complete parameters, click to view: Complete POST Usage

This is how I configured it:

{
  "appToken": "AT_iFym3l0dClijYPJk16AMjcjfPcazj8Ne",
  "content": "浙江工业大学： {{EntryTitle}}",
  "contentType": 1,
  "topicIds": [608],
  "url": "{{EntryUrl}}"
}

Two parameters are used here: {{EntryTitle}} and {{EntryUrl}}. Through these two parameters, IFTTT can obtain the title and link of the new notification from RSS, ultimately enabling push notifications of school official website updates to WeChat.

Through IFTTT as the medium, we can not only push RSS updates to WeChat, but also push notifications to DingTalk and a series of other software that provides Webhook functionality.

Emulating a Campus Card with PN532

Sun, 03 Oct 2021 00:00:00 GMT

Preface

Some time ago, I published a tutorial on emulating a campus card, but that tutorial was the most basic and simplest one. At the same time, however, it also brought some issues. To ensure security, phone manufacturers do not support emulating encrypted cards with the phone’s NFC. Even if an encrypted card can be emulated, the encrypted functions are not usable (unless you ROOT your phone). In short, the payment function in a campus card cannot be directly achieved through the simulation method in the previous tutorial. How could that be acceptable! The whole point was convenience, and yet the payment function cannot be implemented? That won’t do. Therefore, I looked up a large amount of information, ran into quite a few pitfalls, and, with the help of many tutorials, successfully emulated an encrypted card.

At noon today, I went to the supermarket to buy water, and it worked pretty well.

Screenshots

Preparations

MifareOneTool Software
PN532
A phone that supports NFC
Blank CUID card
Campus card

Cracking the Original Card

Connect the PN532 to the computer
Open MifareOne Tool

Follow the steps:

Detect connection
Scan the card. Cards with SAK values such as 28 cannot be cracked. The campus card at our school has an SAK of 08, which supports cracking.

Detect encryption
One-click crack original card

I failed many, many times at this step. It took me an entire morning to successfully extract the original card data. You can try a few more times; maybe I was just extremely unlucky. After the original card data is extracted, a pop-up window will appear automatically, allowing you to specify a file name and save the cracked original card data. The file extension is .dump

At this point, the card is temporarily no longer needed, so you can take it away first.

Writing Data to the Blank CUID Card

In MifareOne Fool, select the Hex Editor under Advanced Operation Mode.

Open the .dump file you just saved.

In sector 0, block 0, copy the first eight characters. These characters are the card ID. You can also open the .dump file with Notepad and copy the first eight characters from the first line, without spaces.

Select New,

After creating a new file, choose Modify UID from the tools, enter the eight-character card ID you just copied, then save it as a file with the .mfd extension.

Place the blank CUID card on the PN532, then go through the steps of scanning the card and detecting encryption.

After completing the steps above, select Write C/FUID Card, and choose the file with the .mfd extension! Pay attention to this.

The prompt box below will indicate that writing 64/64 is complete. If it shows 63/64, write the CUID card again. Generally, there should be no problem.

Then you can use your NFC phone’s access card emulation function to emulate this blank CUID card. At this point, you should understand that you have only emulated the card ID; the encrypted part has not been emulated yet. This is not the end.

Writing Encryption to the Phone

💡 The tools for this part are the phone, PN532, and MifareOne Tool. It has nothing to do with the blank card anymore. The blank card has already fulfilled its mission.

Turn on the NFC function on the phone, then place it on the PN532. At this point, the phone will be recognized as a CUID card.

Select Write C/FUID Card again. This time, choose the file with the .dump extension, because only this file contains the encrypted card data. If the prompt box shows 63/64 written, it means success. The card ID will not be read again, so this 1/64 will not succeed.

Congratulations, at this point, your phone can already implement all the functions of the campus card. Similarly, replacing the phone in the third part of the tutorial with a smart band follows the same procedure.

Sharing Dorm WiFi: Bypassing Campus Network Restrictions

Tue, 21 Apr 2020 00:00:00 GMT

Preface

Dormitory broadband generally requires account login, which makes it impossible to directly use a router to share WiFi. This article will introduce how to configure a router (using Padavan firmware as an example) to bypass the campus network’s “one account per person” restriction.

Note: This tutorial is tested based on China Mobile broadband (Pingfeng Campus). For other carriers, please refer to the general approach and configure it yourself.

Screenshots

Preparation

Router (recommended flashable models such as Newifi 3, K2P, etc.)
Breed bootloader
Padavan firmware
School broadband account and password
Ethernet cable

Cost estimate: About ￥150

Purchase advice: You can purchase them on platforms such as Taobao.

If you are good at hands-on work, you can buy a brand-new unopened device and flash it yourself.
If you are not familiar with flashing firmware, please buy a device that already has Breed bootloader and Padavan firmware flashed; it is usually more hassle-free.

Tip: This article does not include a firmware flashing tutorial. Please search for relevant materials yourself.

Initial Configuration and Router Usage

Important: If, after normal use for a period of time, you suddenly find that you cannot connect to the Internet, your device may have been blacklisted. Solution: Enter the router admin panel → External Network (WAN) → scroll down to MAC Address → click the + icon to change your MAC address.

1. Unbind the Device (Important)

First, connect to the school’s official WiFi Wlan-edu. After connecting, ignore the authentication window that pops up.

Enter 192.168.210.100 in the browser address bar to access the User Self-Service System.

账号：学号
密码：身份证后八位 (或你修改后的密码)

After logging in, find and click Unbind All MAC Addresses. After completing this, disconnect from the Wlan-edu WiFi.

2. Connect the Router

Power on the router.
Use an Ethernet cable to connect the network port on the wall (usually the protruding port dedicated to China Mobile broadband) to the router’s WAN port (usually the blue port).
After the router starts up, connect to its WiFi (the default SSID is usually PDCN or PDCN 5G).

默认Wifi名称：PDCN 或 PDCN 5G
默认密码：1234567890

Configuration Method

1. Log in to the Firmware Admin Panel

After connecting to the router WiFi, open a browser and enter 192.168.123.1 in the address bar (the default admin address of Padavan firmware).

Enter the default account and password:

账号：admin
密码：admin

If you cannot log in

Please try switching browsers (Chrome is recommended).

Please check whether you have correctly connected to the router WiFi.

2. VPN Configuration

After logging in to the admin panel, find and click External Network (WAN) in the left menu.

On the External Network (WAN) settings page, configure as follows:

WAN Connection Type: Select L2TP
VPN Server: 192.168.113.1 (Pingfeng Campus; please look it up yourself for other campuses)
Username: hzxhaXXXXXXX (Pingfeng Campus defaults to hzxha + the last eight digits of your phone number)
Password: XXXXXX (Pingfeng Campus defaults to the last six digits of your phone number)

To prevent detection by the carrier (not necessarily effective), you can configure the following:

Find the Do not decrement TTL for routed packets option and change it to For all packets.

Click Apply settings on this page at the bottom of the page to save the configuration.

3. Log in to the Campus Network

After saving the settings, wait a moment. Open any webpage, and theoretically it will automatically redirect to the campus network login page.

Tip: If it does not redirect automatically, manually enter 192.168.210.111 in your browser.

Enter your account and password:

账号：学号
密码：身份证后八位 (或你修改后的密码)

After logging in successfully, you can share the network through the router.

Information Summary

1. User Self-Service System (for unbinding)

Address: 192.168.210.100
Account: Student ID
Password: Last eight digits of your ID card number

2. Campus Network Login Page (for Internet access)

Address: 192.168.210.111
Account: Student ID
Password: Last eight digits of your ID card number

3. Router Admin Panel (for configuration)

Address: 192.168.123.1
Account: admin
Password: admin

There may be errors in the article; corrections are welcome.

Sending Email Notifications When Aria2 Downloads Complete

Sun, 09 Feb 2020 00:00:00 GMT

Preface

Since I don’t really have any coding background and have never studied anything related to code, some of my descriptions may not be very accurate. I thought of this script while downloading movies. Nowadays, everything in society is becoming intelligent, so I also wanted to tinker around and make an email download notification.

Screenshot

Setting Up the Email System

I ran into quite a few problems during installation and debugging, but after searching around and following this blogger’s operation record, together with Baota, it can generally be configured successfully. Just test it a few more times yourself.

Finding and Modifying the Script

I first found a notification script modified by the original poster on the Enshan Wireless Forum.

In the script provided by that author, things like the email address just need to be filled in. However, at the time, I had some issues with the sendmail command, so I followed the records in the first section. Some of the script-related things had already been written into my server, so I changed a lot of the original script.

When I was debugging with the author’s script, the aria2.log kept showing the problem no such file or directory, but I couldn’t find the cause. Then I thought I would write the entire script using pipes… It seems a bit clumsy… but I didn’t know any other method.

echo "

文件路径：$3

完成时间 `date +%Y/%m/%d`  `date +%T`

负载 "`uptime`"

版本 "`uname -a`"

From Zero.

Have a nice day." | mail -s 'Aria2通知' example@qq.com

This is the content of my script. It’s very simple, right… But it actually took me a long time to make something usable. Aria2通知 is the email subject. The specific meanings of the parameters should all be found in the article link in the first section.

Final Debugging

Specific steps:

Upload the email.sh script to the server
Modify the on-download-complete= parameter in aria2.conf; after =, fill in the script’s absolute path

In order to achieve both:

Email notification
Automatic upload

I call email.sh from the autoupload.sh script

Specific writing:

. /root/.aria2/email.sh

My Aria2 uses the Aria2 One-Click Installation Management Script

Conclusion

I’m not very satisfied with this script myself. Although it can implement the basic functions, it has the following problems

One download will send two emails: one email when the torrent download completes, and one email when the file download completes.
I don’t understand the syntax. I tried things like basename and ##/, but after trying for quite a while, I still couldn’t successfully get the filename.

This is my first time writing an article. I don’t know anything about formatting, and it’s also quite wordy. But it was pretty fun.