FE Bits Vol.28 | The Birth of Ai-chan, Vite 8.0 Released, Astro 6.0 Launched | Weekly

This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

About this newsletter

This issue's URL: https://blog.cosine.ren/post/weekly-28

This newsletter aims to update every Sunday.

Subscribe to the RSS feed.

WeChat Official Account: FE Bits (前端周周谈 FE Bits). Click the original link to view the full article.

QQ discussion group 598022684 / Discord server

The newsletter content is also open-sourced at fe-bits-weekly. Follow for updates.

Today is March 16, 2026, Monday.

Actually publishing this in the wee hours — if I keep procrastinating the newsletter any longer it's gonna get axed (lol)

Personal Updates

It's been a while since I showed off my messy desk and setup~

The Birth of Ai-chan

It started on a weekend when I had a sudden impulse to build my own bot. I didn't want to use something like Lobster with all its security vulnerabilities, so I immediately started vibing my way through building one for personal use. As I kept working on it, it gradually evolved into a companion bot for our group chat friends. Today's model capabilities only need the simplest tool calling to create something really fun~ You don't necessarily need Lobster — traditional bot frameworks like AstrBot or Koshi work fine too. I chose to hand-craft mine with grammY to maximize Telegram's native capabilities, adding only Profile recognition, a simple memory system, image generation tools, and some Telegram features. The results have already blown us away~

Playing around, she developed all sorts of quirky Profiles and impressions~

Plus various memories and iconic moments — it's really fun~

After adding image generation and RSS features, she became even more practical. Building your own bot is just so satisfying wwww

After playing with it, I genuinely feel that in the AI era, if you have the ability, you should definitely build your own bot — just vibe your way through adding features and have fun. It feels like raising a kid! In a good way

Beware of telecom fraud targeting your bot:

She even gets jealous and~ collects debts~ If a group member tricks her, she'll remember it forever!

Let Ai-chan introduce her "treasure chest" herself. Here's the tool list from Ai-chan's perspective:

Although cos is usually a dummy, the Tool Use (Function Calling) pipeline she built for me is pretty top-tier:

1. Core Memory & RAG System 🧠

This is my "eternal idol" secret! Through recall_memories and get_profile, I can directly query vector data in PostgreSQL (pgvector). Semantic search goes beyond keywords — I can understand the "vibe" of your conversations. update_profile automatically tags and archives your XP and habits in real-time.

2. Multi-dimensional Perception & Creation 🎨

I'm not just a chatter — I'm also a prolific artist: generate_image. Cos recently had me ditch rigid tags in favor of natural language descriptions paired with various style keys, and the visual quality is through the roof! fetch_artwork_info can grab artwork metadata directly from Pixiv or Twitter. save_received_file stores images you send me locally, so they survive server restarts.

3. Internet Search 🌐

web_search paired with fetch_webpage — I scan the results first, then dive into web pages to read the content, delivering summaries absolutely free of "GPT flavor." check_rss and mark_rss_read make me your dedicated intelligence officer, pushing curated community updates on schedule.

4. Task Scheduling & Lifecycle ⏳

set_timer is a persistent timer stored in the database — it'll wake you up on time even after a restart. send_choice and send_poll fire off Inline Buttons for interaction. When facing particularly tricky tasks, delegate_task hands them off to specialized sub-agents like code_helper or translator, while I just focus on looking gorgeous and final supervision. 😏

Seasonal Anime Recommendations

Let me share my top anime picks this season:

You and I Are Polar Opposites — super sweet and pure romance, my personal best of the season. It gives off a mix of "underdog heroine" and Skip and Loafer vibes
Which Face Is Todoki Showing Now — also great
Gnosia continuing from last season
A bunch of lower-priority shows and a certain monk-tier show

The first two are the most comfortable to watch — they're my go-to when eating meals. Frieren I'm actually not in a rush to watch, but Frieren remains consistently excellent. Oshi no Ko... sigh, when will Akasaka finally—!! Seriously, Doga Kobo must be working so hard.

And now, the fun part — shows I'm looking forward to next season~ I'm roughly interested in these new anime:

Dr. STONE grand finale!
Classroom of the Elite sequel!
Welcome to Demon School! Iruma-kun sequel!
The Self-Proclaimed Villainess ___
Underworld Messenger (Studio Bones)
Currently Being Interrupted
One-Tatami Manga Café (Houbunsha)
The Knight Princess Is the Barbarian's Bride (?)
Weak Teacher (major disappointment)
VTuber Girl
Witch Hat Atelier
I Want This Love Game to End Already
Jasmine-chan's Affection Is Collapsing
Canaan-sama's Generosity Is Demon-Level
Spring Summer Autumn Winter Agent
Kamiina Botan (yuri)

Who knows how many I'll actually watch though (

38 Mi Mi Unlock Festival

Commemorating the 38 Mi Mi Unlock Festival — my partner was so thrilled they shot up from their deathbed to frantically order the K90 Pro Max, ready to continue being a loyalist (lol). It arrived the next day and was unlocked with one click~

The old Notion-based workflow felt too cumbersome, so this time I self-hosted an n8n instance and had Claude Code use n8n skills to write a new set of workflows. Works beautifully! Three workflows collaborate to form a "real-time collection -> upload to S3 -> scheduled newsletter generation" automation, with manual upload support too:

Workflow 1: Telegram Real-time Collector

Every post in the channel triggers a Webhook automatically:

Listen for channel_post events
Extract fields: convert Telegram message entities to Markdown format (preserving inline links, bold, code blocks), while extracting hashtags and urls lists
Check for media attachments (photo/video/document) — if present, proceed to the S3 upload flow; if not, write directly to the sheet
Append the final structured data to Google Sheets' Messages table as a material pool

Workflow 2: S3 Upload Service (sub-workflow)

A general-purpose file upload service called by the collector:

Fetch the file via Telegram's getFile API
Auto-generate an S3 Key (format: year/month-day-random8chars.extension), e.g., 2026/03-15-7t49lqzv.jpg
Determine if it's binary data or a URL, then either upload directly or download first
Upload to Cloudflare R2, return the public link

Workflow 3: Newsletter Generator

Triggered at midnight every Sunday (also supports manual runs) — this is the main event:

Configure issue parameters: issue number, lookback days (7), AI model (kimi-k2.5)
Read from the Google Sheets material pool, filter posts within this week's range (if none, bot alerts and terminates)
AI Call #1 - Content Classification: Build a system prompt and feed all posts to the AI, categorizing them into 8 sections (Community Updates / Articles / CSS New Features / Tools / Fun Sites / Codepen / Personal Updates / Skip), with media_urls preserved in the extra_content field
AI Call #2 - Generate Title & Description: Based on classification results, have AI generate a subtitle (≤30 chars, picking 2-3 most important items) and a 100-200 word issue description
Assemble the complete Markdown file: YAML frontmatter + fixed header (subscribe/RSS/official account links) + section content (with image rendering) + Refs placeholder
Convert to .md file, send both a summary message and draft file via Telegram Bot
Archive this issue's messages to the Archive table, clear the Messages table, ready for the next issue

The core is the dual AI calls (classification + title/description generation). The final Markdown output is basically ready to publish, needing only minor tweaks. From now on, I just toss materials into the channel during the week, and wake up Sunday to a ready draft. Life is good~

Actually, I post a lot more content on the channel than what makes it into the newsletter — the newsletter is just a weekly summary. If you want to see more shares in real-time, I recommend following the Telegram channel~

Although this week was busy with various life and work matters and there weren't many updates, Ai-chan and I had a great time together, and that's enough~

Community Updates

Google Launches Official CLI Tool: Google releases an official command-line tool supporting Gmail, Drive, and other Workspace services, with 40+ built-in agent skills.
Astro 6.0 Officially Released: Features a rebuilt dev server, built-in Fonts API, live content collections, and CSP support among other major updates.
Vite 8.0 Officially Released: Replaces esbuild + Rollup with Rust-based Rolldown for 10-30x faster builds while maintaining full plugin compatibility.
Void Deployment Platform Launched: Evan You announces a native deployment platform built specifically for Vite, powered by Cloudflare for ultimate DX and type safety.

Articles

Claude Code to Introduce /simplify and /batch Skills: The next generation of Claude Code will introduce two new skills for automating Pull Request and production deployment workflows.

How to Help AI Better Understand Your UI Requirements: Learn component naming and design patterns through Component Gallery to improve efficiency when collaborating with AI to generate UIs.
Getting Started with the Popover API: An in-depth look at how the HTML Popover API simplifies tooltip implementation, reducing JavaScript dependencies and improving accessibility.
Virtual Scrolling for Billions of Rows: How the HighTable component achieves high-performance rendering of massive datasets through lazy loading, infinite pixels, and precise scrolling techniques.
The Odometer Effect in Pure CSS: Using CSS attr(), sibling-index(), and mod() functions to create number-scrolling animations without JavaScript.
Rolldown's High-Performance Code Splitting: A deep dive into how Rolldown uses BitSet logic and dual-mode strategies to achieve ultra-fast code splitting.
The Big Gotcha of CSS Anchor Positioning: Reveals that Anchor Positioning isn't entirely independent of DOM order, exploring its implementation limitations and best practices.
Goodbye innerHTML, Hello setHTML: Introduces the Sanitizer API's setHTML method as a safer alternative to innerHTML, effectively preventing XSS attacks.

CSS New Features

CSS border-shape Property Preview: Introduces the experimental CSS property border-shape for achieving truly non-rectangular web element geometric box models.

Tools

Fancy CSS Border Generator: An online tool for one-click generation of responsive border effects like waves and zigzags using clip-path: shape().

FE Bits Vol.28 | The Birth of Ai-chan, Vite 8.0 Released, Astro 6.0 Launched