Skip to content
M4M4RK_YUportfolio
  • Projects
    ProjectsOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • Gallery
    GalleryOverview
    • ArchivePhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • Logs
    LogsOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • Resources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • About
  • Contact
中文
中文
TOOLS

interactive tools

Tools

Single-page utilities that run entirely in your browser. No login, no upload, no tracking — open one and copy the result out.

Resources

spotlight · tools

Featured tools

Tool

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
Tag38 tools

# CSS & design

11
Tool

Contrast Checker

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

csscolora11y
Tool

Color Converter

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

colorcsstokens
Tool

Shadow Generator

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

csstailwinddesign
Tool

Pixel ↔ REM Converter

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

csstailwindunits
Tool

Gradient Generator

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

csscolorgradient
Tool

CSS Triangle

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

cssdesignui
Tool

Cubic Bezier Editor

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

cssmotionanimation
Tool

Glassmorphism

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

cssdesigneffect
Tool

Border Radius

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

csstailwinddesign
Tool

Box Model Visualizer

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

csslayoutdebug
Tool

Color Palette Extractor

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

csscolorimage

# Crypto & auth

5
Tool

JWT Decoder

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

cryptojwtauth
Tool

UUID Generator

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

uuidcryptoid
Tool

Password Generator

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

cryptosecuritypassword
Tool

Hash Generator

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

hashcryptochecksum
Tool

Random Number

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

cryptorandomnumber

# Text

9
Tool

String Case Converter

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

textstringnaming
Tool

Slug Generator

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

texturlstring
Tool

Lorem Ipsum

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

placeholdertextcopy
Tool

Word & Character Counter

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

textwritingcount
Tool

Regex Tester

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

formattextregex
Tool

Text Diff

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

textdiffcompare
Tool

Morse Code

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

encodetextmorse
Tool

ASCII Art

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

textasciiart
Tool

Roman Numeral Converter

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

formattextnumber

# Format & data

11
Tool

JSON Formatter

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

formatjsonvalidate
Tool

Unix Timestamp Converter

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

formatdatetime
Tool

Number Base Converter

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

formatmathbinary
Tool

Cron Explainer

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

formattimeschedule
Tool

HTTP Status Lookup

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

formathttpreference
Tool

MIME Type Finder

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

formathttpreference
Tool

Regex Tester

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

formattextregex
Tool

CSV ↔ JSON

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

formatcsvjson
Tool

JSON → TypeScript

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

formatjsontypescript
Tool

SQL Formatter

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

formatsqldatabase
Tool

Roman Numeral Converter

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

formattextnumber

# Encoding

5
Tool

Base64 Encoder/Decoder

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

base64encodedecode
Tool

URL Encoder/Decoder

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

urlencodedecode
Tool

HTML Entity Encoder

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

encodehtmlentity
Tool

UTM Builder

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

encodeurlmarketing
Tool

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
open channel·say hi anytime · 2026
--:--:--EST
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
© 2026 ZhenXiao Mark Yu·Ontario, Canada
  • Email
  • GitHub
  • dev.to
Logs

Resources

Daily-use tools and a personal link library.

  • Tools
  • Links
  • Notes
  • Shop

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Resumepending

Socials

Find me on the usual feeds.

  • Facebooksoon
  • Instagramsoon
  • YouTubesoon
  • LinkedInsoon
LinkedIn (soon)
  • Twitter / X (soon)
  • Instagram (soon)
    • Built with Next.js 16 · React 19 · Tailwind 4

    Built with Next.js 16 · React 19 · Tailwind 4