Skip to content
LOC
ZH
/
安大略 · 加拿大
待机
—
音频设置
OK
/
--:--:--
EST
M4
M4RK_YU
portfolio
项目
项目
Overview
作品
精选案例与项目记录
游戏
可玩原型与游戏开发日志
影像
影像
Overview
档案
影像合集与视觉实验
商店
印刷品、海报和限量物件
日志
日志
Overview
博客
长篇开发日志与现场笔记
笔记
短观察、链接与代码片段
资源
资源
Overview
工具
38 款浏览器内开发工具
链接
每日使用的开发与设计书签
关于
联系
搜索…
⌘K
没有未读更新
EN
登录
没有未读更新
搜索
搜索
搜索档案
项目、笔记、工具与影像——一个搜索框贯穿全站。
没有未读更新
登录
没有未读更新
开始输入以搜索。
项目
2026 · web-app
Bloomprint
Turns yard inspiration into a buildable plan — what to buy, how much, what tools, in what order, and what can go wrong. Landscaping a yard is overwhelming: an inspiration photo says nothing about materials, quantities, tools, sequencing, o…
项目
2024 · ai-tool
Purecreate
A 3D apparel customizer that designs your shirt in real time and generates decals from a text prompt with DALL·E 3. Designing custom apparel usually means clunky mockup tools or a slow back-and-forth with a designer — there's no fast, visu…
项目
2021 · game-dev
Unreal Battle Royale Prototype
A UE4 battle-royale prototype built with Blueprints — inventory, weapon handling, and core match systems. A deep dive into Unreal Engine systems: how a battle-royale match actually holds together — inventory, pickups, weapons, and player s…
项目
2024 · game-dev
Descent Into Madness
A 2D pixel-art roguelike shooter built in Unity — descend, fight, and survive escalating runs. A focused prototype for learning roguelike loops: procedural pressure, run-based progression, and tight shooting inside a pixel-art frame.
项目
2024 · web-app
UI Studio
A real-time collaborative design canvas where multiple people sketch, arrange, and edit the same board at once. Design tools tend to be either single-player or heavyweight. UI Studio explores how light a shared canvas can feel while still …
项目
2026 · ai-tool
AI Agent Toolkit
A Windows-first local AI coding toolkit — multi-agent workflows, Ollama automation, and developer dashboard utilities. Most AI coding tooling assumes the cloud and a Unix shell. This toolkit explores a local-first, Windows-native workflow …
项目
2024 · web-app
M4rkdown
An offline-first markdown editor with realtime collaboration, PWA install, and a multiplayer typing arena. Most markdown editors assume a connection and a single writer. M4rkdown asks what an editor feels like when it works offline first a…
资源
Reference
MDN Web Docs
Mozilla's reference for every web API, CSS property, and JavaScript built-in. The least-bad source of truth for browser behaviour, with examples that actually run.
资源
Reference
Next.js Docs
Official App Router, routing, caching, and runtime documentation. Open this before assuming any Next.js behaviour — the v15 → v16 surface keeps shifting.
资源
Reference
React Docs
React's modern, hooks-first documentation with interactive examples. Re-reading the rules of hooks every six months is healthy.
资源
Reference
TypeScript Handbook
The canonical TypeScript tour — types, generics, narrowing, modules. Cheaper than asking the compiler what `as const` actually means.
资源
Reference
Tailwind CSS Docs
Searchable reference for every Tailwind utility, with v4 token syntax up front. v4 changed enough that muscle memory from v3 isn't enough anymore.
资源
Reference
web.dev
Google's guidance on performance, accessibility, and modern web platform patterns. When I need an opinionated answer about Core Web Vitals, not a comment thread.
资源
Reference
Can I Use
Browser support tables for every web feature, with usage data baked in. Before reaching for a new CSS or Web API, I check whether Safari 15 will sulk.
资源
Reference
DevDocs
Fast, offline-friendly aggregator that bundles 100+ language and framework docs. Cmd-F across every doc set without 50 open tabs.
资源
Reference
HTML Living Standard
The WHATWG HTML specification — the actual contract browsers implement. When MDN and StackOverflow disagree, the spec wins.
资源
AI
Claude
Anthropic's chat assistant with long-context reading and careful code reasoning. First stop for design rationale, careful refactors, and reading large files.
资源
AI
ChatGPT
OpenAI's chat assistant with browsing, image, and code-execution modes. Second opinion when Claude and I are stuck in a loop.
资源
AI
v0
Vercel's UI generator — describe a screen, get React + shadcn output you can edit. Useful for breaking a blank-page block, not as a final component source.
资源
AI
Perplexity
AI-cited search that links every claim back to a source. Faster than Google when I want a cited summary, not a SEO-spam ranking.
资源
AI
GitHub Copilot
GitHub's in-editor AI pair, with chat, completions, and PR review. Quietly autocompletes the boring half of every file I touch.
资源
AI
Cursor
VS Code-based editor with agent mode, multi-file edits, and inline chat. Where I send Claude to actually edit the repo, not just talk about it.
资源
Color
Coolors
Tap-to-lock palette generator with contrast, shading, and export to CSS variables. Fastest way to draft a five-color palette that doesn't look extruded from a stock illustration.
资源
Color
Realtime Colors
Live-preview a full palette on a sample landing page before committing to tokens. Picking accent colors against actual UI beats squinting at hex swatches.
资源
Icons
Heroicons
Tailwind Labs' MIT-licensed SVG icon set — outline, solid, and mini variants. When I need a clean, neutral icon and don't want to argue about line weights.
资源
Icons
Lucide
Community-driven Feather fork with 1,500+ icons and tree-shakable React bindings. The icon set this site already uses — search before reinventing a glyph.
资源
Icons
Phosphor Icons
Six-weight icon family with consistent geometry across the whole set. When the project's accent demands something curvier than Lucide.
资源
Color
UI Colors
Generate full Tailwind shade scales from a single hex. Turning a brand color into a 50-950 ramp without doing it by hand.
资源
Color
Tints and Shades
Generate evenly stepped tints and shades for any base color. Sometimes you just need ten ticks lighter and ten ticks darker, no algorithm theatre.
资源
Inspiration
Mobbin
Searchable screenshot library of real iOS, Android, and web product flows. Before designing a new flow, see how five mature products already solved it.
资源
Inspiration
SiteInspire
Curated showcase of well-designed websites, taggable by style and type. Lower noise than Awwwards when I'm scouting layout and typography ideas.
资源
Inspiration
Awwwards
The trophy-case site for ambitious web work, often heavy on motion and WebGL. Useful sometimes; mostly a calibration check for what counts as overproduced.
资源
Inspiration
Page Flows
Recorded onboarding and product flows from real apps, frame by frame. The clearest way to study how shipped products handle empty states and edge transitions.
资源
Inspiration
Land-book
Gallery of landing pages filtered by style, type, industry, and color. Quick reference when I need ten variations on a hero before writing one.
资源
Playground
CodeSandbox
Cloud editor that boots a real Node container — full npm, env vars, and previews. Reproducing a bug for a maintainer without setting up a private repo.
资源
Playground
StackBlitz
WebContainer-powered editor that runs Node entirely in the browser, instant boot. Faster than CodeSandbox for a quick Vite or Next demo.
资源
Playground
CodePen
HTML/CSS/JS playground tuned for share-friendly front-end demos. Still the cleanest place to share a CSS curiosity in one link.
资源
Playground
Replit
Browser IDE with deploy targets and AI features across most languages. When the demo isn't JavaScript and I don't want to install a new toolchain.
资源
Playground
JSFiddle
The original four-pane HTML/CSS/JS/result playground, still useful for bug repros. When a stack overflow thread links to one and I want to fork rather than rewrite.
资源
Hosting
Vercel
Next.js's first-party hosting — preview deploys, edge functions, image CDN. Where this site lives; the deploy story is still the smoothest.