Skip to content
M4M4RK_YUportfolio
  • 项目
    项目Overview
    • 作品精选案例与项目记录
    • 游戏可玩原型与游戏开发日志
  • 影像
    影像Overview
    • 档案影像合集与视觉实验
    • 商店印刷品、海报和限量物件
  • 日志
    日志Overview
    • 博客长篇开发日志与现场笔记
    • 笔记短观察、链接与代码片段
  • 资源
    资源Overview
    • 工具38 款浏览器内开发工具
    • 链接每日使用的开发与设计书签
  • 关于
  • 联系
EN
EN
TOOLS

交互工具

工具

完全在你的浏览器中运行的单页小工具。无需登录、无需上传、无追踪 —— 打开一个，拷走结果。

资源

聚焦 · 工具

精选工具

工具

Contrast Checker

Paste two colors, see WCAG AA / AAA pass-fail for normal and large text with a live sample preview.

csscolora11ywcag
instant · no uploadopen

JSON Formatter

Pretty-print, validate, and minify JSON in the browser. Indent picker, instant invalid-input feedback.

Password Generator

Random passwords via crypto.getRandomValues. Tune length, character classes, ambiguous-char avoidance, with a live entropy meter.

Color Converter

Three-way Hex ↔ RGB ↔ HSL converter with a live swatch, lightness shades, and one-click copy.

colorcsstokens

Shadow Generator

Live box-shadow builder — drag the sliders, copy CSS or a Tailwind arbitrary class. Inset toggle, any CSS color.

Base64 Encoder/Decoder

Encode text to Base64 or decode it back. UTF-8 safe via TextEncoder/TextDecoder.

URL Encoder/Decoder

Round-trip query strings and path segments through encodeURI / encodeURIComponent.

urlencodedecode
标签38 个工具

# CSS 与设计

11
工具

Contrast Checker

Paste two colors, see WCAG AA / AAA pass-fail for normal and large text with a live sample preview.

csscolora11y
工具

Color Converter

Three-way Hex ↔ RGB ↔ HSL converter with a live swatch, lightness shades, and one-click copy.

colorcsstokens
工具

Shadow Generator

Live box-shadow builder — drag the sliders, copy CSS or a Tailwind arbitrary class. Inset toggle, any CSS color.

csstailwinddesign
工具

Pixel ↔ REM Converter

Convert px ↔ rem / em at a configurable base. Common-size ladder with Tailwind class hints.

csstailwindunits
工具

Gradient Generator

Multi-stop linear and radial gradients with live preview, drag-to-reorder stops, and CSS + Tailwind output.

csscolorgradient
工具

CSS Triangle

Border-trick triangle generator. Pick direction, size, and color; copy a ready-to-paste rule.

cssdesignui
工具

Cubic Bezier Editor

Drag the two control handles, preview the curve, and copy a cubic-bezier() value ready for transition-timing-function.

cssmotionanimation
工具

Glassmorphism

Live backdrop-filter preview — blur, saturation, tint, border, radius — with copyable CSS.

cssdesigneffect
工具

Border Radius

Four-corner border-radius editor with linked toggle, live preview, and CSS + Tailwind arbitrary-class output.

csstailwinddesign
工具

Box Model Visualizer

Type margin, border, padding, and content values; see the live box-model render and the computed CSS.

csslayoutdebug
工具

Color Palette Extractor

Drop or upload an image; pull its N most-prominent colors via median-cut quantization. Runs entirely in the browser.

csscolorimage

# 加密与认证

5
工具

JWT Decoder

Inspect a JWT — header + payload, issued/expiry badges. Decode-only, no verification.

cryptojwtauth
工具

UUID Generator

Generate v4 UUIDs via crypto.randomUUID(). Bulk mode up to 500, copy individual rows or the full batch.

uuidcryptoid
工具

Password Generator

Random passwords via crypto.getRandomValues. Tune length, character classes, ambiguous-char avoidance, with a live entropy meter.

cryptosecuritypassword
工具

Hash Generator

SHA-1, SHA-256, SHA-384, SHA-512 via SubtleCrypto. Live-updates as you type.

hashcryptochecksum
工具

Random Number

Cryptographically unbiased random integers via crypto.getRandomValues with rejection sampling. Bulk + unique modes.

cryptorandomnumber

# 文本

9
工具

String Case Converter

Convert any string into camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case, Sentence case, or flat upper/lower.

textstringnaming
工具

Slug Generator

Turn any text into a URL-safe slug. Strips diacritics, collapses whitespace, picks - or _ separators.

texturlstring
工具

Lorem Ipsum

Generate paragraphs, sentences, or words of placeholder text. Seeded so the output is stable across rerolls.

placeholdertextcopy
工具

Word & Character Counter

Live count of words, characters, lines, sentences, paragraphs, and an estimated read time.

textwritingcount
工具

Regex Tester

Live pattern + flags against a sample buffer. Highlighted matches, capture groups inspector, error messages.

formattextregex
工具

Text Diff

Line-level diff between two text blocks. LCS-based; additions, deletions, and matches highlighted.

textdiffcompare
工具

Morse Code

Two-way text ↔ Morse converter. International alphabet, `/` between words, single space between letters.

encodetextmorse
工具

ASCII Art

Render short strings as 5-row block-font ASCII art. Pick the fill character; copy as plaintext.

textasciiart
工具

Roman Numeral Converter

Two-way Roman ↔ decimal converter. Validates canonical form (no double subtractive, no rank repetition over 3).

formattextnumber

# 格式与数据

11
工具

JSON Formatter

Pretty-print, validate, and minify JSON in the browser. Indent picker, instant invalid-input feedback.

formatjsonvalidate
工具

Unix Timestamp Converter

Two-way Unix ↔ ISO converter with UTC, local, milliseconds, and relative time. Live 'now' badge.

formatdatetime
工具

Number Base Converter

Convert numbers between binary, octal, decimal, and hex. Underscores + 0x/0o/0b prefixes accepted, BigInt-safe.

formatmathbinary
工具

Cron Explainer

Parse a 5-field cron expression and read it back in English. Supports *, ranges, lists, and steps.

formattimeschedule
工具

HTTP Status Lookup

Searchable list of HTTP status codes with class colors, plain-English meanings, and common causes.

formathttpreference
工具

MIME Type Finder

Look up MIME types by extension or extensions by MIME type. ~45 of the file types you actually serve.

formathttpreference
工具

Regex Tester

Live pattern + flags against a sample buffer. Highlighted matches, capture groups inspector, error messages.

formattextregex
工具

CSV ↔ JSON

Two-way CSV ↔ JSON converter. Proper quote and comma escaping, header row support, downloads or copy.

formatcsvjson
工具

JSON → TypeScript

Generate a TypeScript interface from any JSON sample. Arrays merge to union members; nested objects get their own types.

formatjsontypescript
工具

SQL Formatter

Uppercase keywords, break on major clauses, indent sub-blocks. Quick-pass formatter, no AST.

formatsqldatabase
工具

Roman Numeral Converter

Two-way Roman ↔ decimal converter. Validates canonical form (no double subtractive, no rank repetition over 3).

formattextnumber

# 编码

5
工具

Base64 Encoder/Decoder

Encode text to Base64 or decode it back. UTF-8 safe via TextEncoder/TextDecoder.

base64encodedecode
工具

URL Encoder/Decoder

Round-trip query strings and path segments through encodeURI / encodeURIComponent.

urlencodedecode
工具

HTML Entity Encoder

Encode &, <, >, and non-ASCII characters into named or numeric HTML entities. Round-trip decoder too.

encodehtmlentity
工具

UTM Builder

Compose UTM-tagged URLs for campaigns. Source, medium, campaign, term, content — auto-encoded, one-click copy.

encodeurlmarketing
工具

Morse Code

Two-way text ↔ Morse converter. International alphabet, `/` between words, single space between letters.

encodetextmorse
Contrast CheckerColor ConverterShadow GeneratorJSON FormatterBase64 Encoder/DecoderURL Encoder/DecoderJWT DecoderUUID GeneratorPassword GeneratorHash GeneratorPixel ↔ REM ConverterString Case ConverterSlug GeneratorLorem IpsumUnix Timestamp ConverterWord & Character CounterNumber Base ConverterHTML Entity EncoderGradient GeneratorCSS TriangleCubic Bezier EditorGlassmorphismBorder RadiusBox Model VisualizerColor Palette ExtractorUTM BuilderCron ExplainerHTTP Status LookupMIME Type FinderRegex TesterText DiffCSV ↔ JSONJSON → TypeScriptSQL FormatterMorse CodeASCII ArtRoman Numeral ConverterRandom Number
Contrast CheckerColor ConverterShadow GeneratorJSON FormatterBase64 Encoder/DecoderURL Encoder/DecoderJWT DecoderUUID GeneratorPassword GeneratorHash GeneratorPixel ↔ REM ConverterString Case ConverterSlug GeneratorLorem IpsumUnix Timestamp ConverterWord & Character CounterNumber Base ConverterHTML Entity EncoderGradient GeneratorCSS TriangleCubic Bezier EditorGlassmorphismBorder RadiusBox Model VisualizerColor Palette ExtractorUTM BuilderCron ExplainerHTTP Status LookupMIME Type FinderRegex TesterText DiffCSV ↔ JSONJSON → TypeScriptSQL FormatterMorse CodeASCII ArtRoman Numeral ConverterRandom Number
频道开放·随时打个招呼 · 2026
--:--:--EST
联系

看到什么有意思的？和我聊聊。

这是一个作品集，不是服务 · 但每一条留言我都会看 — 如果哪里让你有所触动，或者只想打个招呼，欢迎写信过来。

开启对话

作品

线上发布、游戏作品与视觉档案。

  • 项目
  • 游戏
  • 档案
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
始于 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·加拿大 安大略
  • 邮件
  • GitHub
  • dev.to
日志

资源

每日好用的工具与个人收藏的链接库。

  • 工具
  • 链接
  • 笔记
  • 商店

工作室

背景、联系方式以及合作渠道。

  • 关于
  • 联系
  • 简历筹备中

社交

在常去的平台上找到我。

  • Facebook敬请期待
  • Instagram敬请期待
  • YouTube敬请期待
  • 领英敬请期待
领英 (敬请期待)
  • 推特 / X (敬请期待)
  • Instagram (敬请期待)
    • 由 Next.js 16 · React 19 · Tailwind 4 构建

    由 Next.js 16 · React 19 · Tailwind 4 构建