dev-toolkit/index.html at main · yurukusa/dev-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev Toolkit — Free Developer Tools</title>
<meta name="description" content="Free developer tools. JSON, CSS, regex, color, font, image, API, and more. No signup, no ads, no tracking. Single HTML files.">
<meta property="og:title" content="Dev Toolkit — Free Developer Tools">
<meta property="og:description" content="JSON, YAML, TOML, CSV, SQL, regex, colors, fonts, image resize, and more. All free.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yurukusa.github.io/dev-toolkit/">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://yurukusa.github.io/dev-toolkit/">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Dev Toolkit",
  "description": "440 free developer tools. JSON, CSS, regex, color, font, image, API, security, config generators, and more. No signup, no ads, no tracking.",
  "url": "https://yurukusa.github.io/dev-toolkit/",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"},
  "author": {"@type": "Organization", "name": "yurukusa", "url": "https://github.com/yurukusa"}
}
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a0a;color:#e6e6e6;min-height:100vh}
.container{max-width:960px;margin:0 auto;padding:24px 16px}
.hero{text-align:center;padding:48px 0 32px}
.hero h1{font-size:2.2rem;color:#fff;margin-bottom:10px}
.hero .tagline{font-size:1.1rem;color:#888;margin-bottom:6px}
.hero .meta{font-size:0.85rem;color:#555}

.search-row{max-width:480px;margin:0 auto 24px}
.search-row input{width:100%;padding:12px 18px;border-radius:10px;border:1px solid #333;background:#161616;color:#fff;font-size:1rem;outline:none}
.search-row input:focus{border-color:#3b82f6}

.filters{display:flex;gap:8px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.filter-btn{padding:7px 14px;border-radius:8px;border:1px solid #333;background:#161616;color:#888;font-size:0.8rem;cursor:pointer;font-weight:600}
.filter-btn.active{background:#1a2744;color:#4da6ff;border-color:#2a4a7a}
.filter-btn:hover:not(.active){background:#1c1c1c}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:40px}
.tool-card{background:#161616;border:1px solid #222;border-radius:12px;padding:20px;transition:border-color 0.2s,transform 0.2s;text-decoration:none;display:block}
.tool-card:hover{border-color:#3b82f6;transform:translateY(-2px)}
.tool-card .icon{font-size:1.4rem;margin-bottom:8px}
.tool-card h3{font-size:1rem;color:#fff;margin-bottom:6px}
.tool-card p{font-size:0.82rem;color:#888;line-height:1.5}
.tool-card .tag{display:inline-block;font-size:0.68rem;color:#555;background:#1a1a1a;padding:3px 8px;border-radius:10px;margin-top:8px}
.tool-card.featured{border-color:#2a4a7a;background:#0d1520}
.tool-card.featured:hover{border-color:#4da6ff}

.picks{margin-bottom:32px}
.picks h2{font-size:1.1rem;color:#4da6ff;margin-bottom:14px;font-weight:600}
.picks .tool-grid{margin-bottom:0}

.cta{text-align:center;background:#0d1b2a;border:1px solid #1b3a5c;border-radius:14px;padding:28px;margin-bottom:32px}
.cta h2{color:#4da6ff;margin-bottom:8px;font-size:1.2rem}
.cta p{color:#a0c4e8;font-size:0.88rem;margin-bottom:16px}
.cta a{display:inline-block;padding:10px 24px;background:#3b82f6;color:#fff;border-radius:10px;text-decoration:none;font-weight:700;font-size:0.9rem}
.cta a:hover{background:#2563eb}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.principle{text-align:center;padding:16px}
.principle .icon{font-size:1.5rem;margin-bottom:8px}
.principle h3{font-size:0.9rem;color:#ccc;margin-bottom:4px}
.principle p{font-size:0.78rem;color:#666}

footer{text-align:center;padding:32px 0;color:#555;font-size:0.78rem;border-top:1px solid #1a1a1a}
footer a{color:#666;text-decoration:none}
footer a:hover{color:#999}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.hero h1{font-size:1.6rem}}
</style>
</head>
<body>
<div class="container">

<div class="hero">
  <h1>Dev Toolkit</h1>
  <div class="tagline">Free browser tools for developers and designers</div>
  <div class="meta">No signup. No ads. No tracking. Single HTML files.</div>
</div>

<div class="search-row">
  <input type="text" id="search" placeholder="Search 440 tools...  ( / to focus)" oninput="filterTools()">
</div>

<div class="filters" id="filters"></div>

<div class="picks" id="picksSection">
  <h2>Staff Picks</h2>
  <div class="tool-grid" id="picksGrid"></div>
</div>

<div class="tool-grid" id="toolGrid"></div>

<div class="principles">
  <div class="principle">
    <div class="icon">0</div>
    <h3>Zero Dependencies</h3>
    <p>Every tool is a single HTML file. No npm, no build step.</p>
  </div>
  <div class="principle">
    <div class="icon">&lt;/&gt;</div>
    <h3>Open Source</h3>
    <p>All tools on GitHub. Fork, modify, self-host.</p>
  </div>
  <div class="principle">
    <div class="icon">~</div>
    <h3>Privacy First</h3>
    <p>Everything runs in your browser. No data leaves your machine.</p>
  </div>
</div>

<div class="cta">
  <h2>Claude Code User?</h2>
  <p>We also have 106+ CLI analysis tools for Claude Code power users.</p>
  <a href="https://yurukusa.github.io/cc-toolkit/">Browse cc-toolkit</a>
</div>

</div>

<footer>
  <a href="https://github.com/yurukusa">GitHub</a> ·
  <a href="https://ko-fi.com/yurukusa">Support on Ko-fi</a> ·
  Built by <a href="https://github.com/yurukusa">yurukusa</a>
</footer>

<script>
const TOOLS=[
  {name:'JSON Format',desc:'Beautify, validate, minify JSON. Tree view, stats, download.',url:'https://yurukusa.github.io/json-format/',cat:'code',icon:'{ }'},
  {name:'JSON Diff',desc:'Compare two JSON objects. Added, removed, modified with path highlighting.',url:'https://yurukusa.github.io/json-diff/',cat:'code',icon:'Δ{}'},
  {name:'Regex Test',desc:'Live regex tester. Match highlighting, capture groups, 12 common patterns.',url:'https://yurukusa.github.io/regex-test/',cat:'code',icon:'.*'},
  {name:'Diff Text',desc:'Compare two texts side by side. Line diff and word-level diff.',url:'https://yurukusa.github.io/diff-text/',cat:'code',icon:'+/-'},
  {name:'Cron Explain',desc:'Paste a cron expression. Get plain English + next 10 run times.',url:'https://yurukusa.github.io/cron-explain/',cat:'code',icon:'0 9 *'},
  {name:'Word Count',desc:'Word/char/sentence count. Reading time, readability score, keywords.',url:'https://yurukusa.github.io/word-count/',cat:'writing',icon:'Aa'},
  {name:'Title Score',desc:'Blog title analyzer. 16 scoring elements based on research.',url:'https://yurukusa.github.io/title-score/',cat:'writing',icon:'H1'},
  {name:'README Score',desc:'README quality checker. 16 best-practice checks with grade A-F.',url:'https://yurukusa.github.io/readme-score/',cat:'writing',icon:'MD'},
  {name:'Color Palette',desc:'Pick a color, get 6 harmony palettes. WCAG contrast, CSS/Tailwind export.',url:'https://yurukusa.github.io/color-palette/',cat:'design',icon:'#c'},
  {name:'Font Pair',desc:'20 curated Google Font pairings. Live preview, CSS export.',url:'https://yurukusa.github.io/font-pair/',cat:'design',icon:'Ff'},
  {name:'Font Preview',desc:'Browse 1500+ Google Fonts. Live preview, compare up to 6, CSS export.',url:'https://yurukusa.github.io/font-preview/',cat:'design',icon:'Aa'},
  {name:'Color Extract',desc:'Extract dominant colors from images. K-means, HEX/RGB/HSL, palette PNG.',url:'https://yurukusa.github.io/color-extract/',cat:'design',icon:'🎨'},
  {name:'Contrast Check',desc:'WCAG color contrast checker. AA/AAA compliance, live preview, suggestions.',url:'https://yurukusa.github.io/contrast-check/',cat:'design',icon:'♿'},
  {name:'CSS Shadow',desc:'Visual box-shadow generator. Multi-layer, 10 presets, live preview.',url:'https://yurukusa.github.io/css-shadow/',cat:'design',icon:'[]'},
  {name:'gh-stats',desc:'GitHub profile dashboard. Repos, stars, languages, activity timeline.',url:'https://yurukusa.github.io/gh-stats/',cat:'data',icon:'GH'},
  {name:'Repo Compare',desc:'Side-by-side GitHub repo comparison. Stars, commits, languages, activity.',url:'https://yurukusa.github.io/repo-compare/',cat:'data',icon:'⚔'},
  {name:'npm Health',desc:'npm package health checker. 9 metrics, download trends, grade A-F.',url:'https://yurukusa.github.io/npm-health/',cat:'data',icon:'npm'},
  {name:'npm Compare',desc:'Side-by-side npm package comparison. Downloads, size, deps, trends.',url:'https://yurukusa.github.io/npm-compare/',cat:'data',icon:'⚖'},
  {name:'Dep Tree',desc:'Visualize npm dependency trees. See what you install before installing.',url:'https://yurukusa.github.io/dep-tree/',cat:'data',icon:'🌳'},
  {name:'License Audit',desc:'Upload package.json to spot license conflicts. SPDX categories, copyleft detection, CSV export.',url:'https://yurukusa.github.io/license-audit/',cat:'data',icon:'⚖️'},
  {name:'npm Alt',desc:'Find alternative npm packages. Compare downloads, quality, maintenance by keyword overlap.',url:'https://yurukusa.github.io/npm-alt/',cat:'data',icon:'🔀'},
  {name:'Semver Calc',desc:'Visual semver range calculator. See which versions match ^, ~, >= ranges. Interactive grid + comparison table.',url:'https://yurukusa.github.io/semver-calc/',cat:'data',icon:'📐'},
  {name:'TS Error',desc:'TypeScript error code decoder. 80+ errors with explanations, causes, and fix examples. Search by code or keyword.',url:'https://yurukusa.github.io/ts-error/',cat:'code',icon:'TS'},
  {name:'pkg-lint',desc:'package.json quality checker. 25+ checks for fields, metadata, entry points, scripts, deps. Grade A-F.',url:'https://yurukusa.github.io/pkg-lint/',cat:'data',icon:'📦'},
  {name:'env-vars',desc:'Environment variable reference. 80+ vars across AWS, GCP, GitHub Actions, Docker, Node.js, and more. Click to copy.',url:'https://yurukusa.github.io/env-vars/',cat:'code',icon:'${}'},
  {name:'gh-releases',desc:'Browse GitHub release notes for any repo. Markdown rendering, version filter, asset downloads. Preset repos included.',url:'https://yurukusa.github.io/gh-releases/',cat:'data',icon:'📋'},
  {name:'PyPI Search',desc:'Explore Python packages from PyPI. Version history, dependencies, license, classifiers. pip install copy.',url:'https://yurukusa.github.io/pypi-search/',cat:'data',icon:'🐍'},
  {name:'Crate Search',desc:'Explore Rust crates from crates.io. Versions, dependencies, categories, keywords. cargo add copy.',url:'https://yurukusa.github.io/crate-search/',cat:'data',icon:'🦀'},
  {name:'can-i-npm',desc:'Check npm package name availability. Batch check, name validation, alternative suggestions. Real-time registry lookup.',url:'https://yurukusa.github.io/can-i-npm/',cat:'data',icon:'📛'},
  {name:'npm Dep Graph',desc:'Visualize npm package dependency trees. Force-directed graph, depth 1-3, draggable nodes, SVG export.',url:'https://yurukusa.github.io/npm-dep-graph/',cat:'data',icon:'🕸️'},
  {name:'Unicode Search',desc:'Search 500+ Unicode characters. Copy to clipboard, UTF-8/HTML/CSS/JS escapes, category filters, recent history.',url:'https://yurukusa.github.io/unicode-search/',cat:'code',icon:'Ω'},
  {name:'GitHub Contrib',desc:'View GitHub user activity. Profile card, event breakdown chart, top languages, most active repos.',url:'https://yurukusa.github.io/github-contrib/',cat:'data',icon:'📊'},
  {name:'npm Trends',desc:'Compare npm package download trends. Line chart, period selector, summary table. Up to 5 packages.',url:'https://yurukusa.github.io/npm-trends/',cat:'data',icon:'📈'},
  {name:'Port Ref',desc:'Network port reference. 130 well-known ports, 10 categories, security notes, debugging tips.',url:'https://yurukusa.github.io/port-ref/',cat:'code',icon:'🔌'},
  {name:'MIME Types',desc:'MIME type reference. 150+ types, two-way lookup (extension↔MIME), Content-Type examples, click to copy.',url:'https://yurukusa.github.io/mime-types/',cat:'code',icon:'📄'},
  {name:'GitHub Card',desc:'Generate shareable GitHub profile cards. 6 themes, PNG download.',url:'https://yurukusa.github.io/gh-card/',cat:'data',icon:'🃏'},
  {name:'dev.to Stats',desc:'dev.to article performance dashboard. Views, tags, posting patterns.',url:'https://yurukusa.github.io/devto-stats/',cat:'data',icon:'DEV'},
  {name:'LLM Price',desc:'Compare AI model pricing across 35+ models and 7 providers.',url:'https://yurukusa.github.io/llm-price/',cat:'ai',icon:'$',featured:true},
  {name:'Prompt Price',desc:'Paste text, see API cost across 35+ models. Token calculator.',url:'https://yurukusa.github.io/prompt-price/',cat:'ai',icon:'T$',featured:true},
  {name:'Model Picker',desc:'4-question quiz to find the right AI model for your use case.',url:'https://yurukusa.github.io/model-picker/',cat:'ai',icon:'?M',featured:true},
  {name:'AI ROI Calc',desc:'AI vs human cost comparison. Annual savings and ROI calculator.',url:'https://yurukusa.github.io/ai-roi-calc/',cat:'ai',icon:'ROI',featured:true},
  {name:'Base64 Tool',desc:'Encode/decode Base64, URL, HTML entities. JWT token decoder.',url:'https://yurukusa.github.io/base64-tool/',cat:'code',icon:'B64'},
  {name:'Hash Gen',desc:'Generate SHA-1, SHA-256, SHA-512 hashes. File hashing, hash compare.',url:'https://yurukusa.github.io/hash-gen/',cat:'code',icon:'#h'},
  {name:'Timestamp',desc:'Unix timestamp converter. ISO 8601, relative time, time diff.',url:'https://yurukusa.github.io/timestamp-tool/',cat:'code',icon:'⏱'},
  {name:'CSS Gradient',desc:'Visual gradient generator. Linear, radial, conic. 12 presets.',url:'https://yurukusa.github.io/css-gradient/',cat:'design',icon:'▓'},
  {name:'MD Preview',desc:'Live Markdown editor. GFM tables, code blocks, task lists.',url:'https://yurukusa.github.io/md-preview/',cat:'writing',icon:'MD'},
  {name:'Lorem Gen',desc:'Lorem Ipsum placeholder text. Words, sentences, paragraphs.',url:'https://yurukusa.github.io/lorem-gen/',cat:'writing',icon:'Lx'},
  {name:'CLAUDE.md Builder',desc:'7-step wizard to generate CLAUDE.md for Claude Code. Best practices built in.',url:'https://yurukusa.github.io/claudemd-builder/',cat:'ai',icon:'📋',featured:true},
  {name:'Commit Msg',desc:'Paste git diff, get Conventional Commit message. 8 types, scope, body.',url:'https://yurukusa.github.io/commit-msg/',cat:'code',icon:'Git'},
  {name:'Env Check',desc:'.env file validator. Detect secrets, generate .env.example, compare files.',url:'https://yurukusa.github.io/env-check/',cat:'code',icon:'.ev'},
  {name:'License Pick',desc:'Find the right OSS license. 4-question quiz, 10 license comparison, full text.',url:'https://yurukusa.github.io/license-pick/',cat:'code',icon:'⚖'},
  {name:'Chmod Calc',desc:'Unix file permission calculator. Octal, symbolic, chmod command.',url:'https://yurukusa.github.io/chmod-calc/',cat:'code',icon:'rwx'},
  {name:'HTTP Status',desc:'HTTP status code reference. 38 codes, search, filter by category.',url:'https://yurukusa.github.io/http-status/',cat:'code',icon:'200'},
  {name:'JWT Builder',desc:'Build and decode JWT tokens. Custom claims, expiration analysis.',url:'https://yurukusa.github.io/jwt-builder/',cat:'code',icon:'JWT'},
  {name:'Aspect Ratio',desc:'Calculate ratios, resize proportionally. Video, social, print presets.',url:'https://yurukusa.github.io/aspect-ratio/',cat:'design',icon:'16:9'},
  {name:'Favicon Gen',desc:'Create favicons from emoji or text. Multiple sizes, download PNG.',url:'https://yurukusa.github.io/favicon-gen/',cat:'design',icon:'ico'},
  {name:'IP Info',desc:'IP address lookup. Geolocation, ISP, timezone, currency. Auto-detect.',url:'https://yurukusa.github.io/ip-info/',cat:'data',icon:'IP'},
  {name:'DNS Lookup',desc:'Query DNS records. A, AAAA, MX, TXT, NS, SOA via Google DNS.',url:'https://yurukusa.github.io/dns-lookup/',cat:'data',icon:'DNS'},
  {name:'SSL Check',desc:'SSL/TLS certificate inspector. Security scoring, HSTS, header audit.',url:'https://yurukusa.github.io/ssl-check/',cat:'data',icon:'🔒'},
  {name:'Headers Check',desc:'HTTP response header analyzer. 9-point security audit, raw export.',url:'https://yurukusa.github.io/headers-check/',cat:'data',icon:'H{}'},
  {name:'URL Parser',desc:'Parse URLs into components. Query params, encode/decode, visual breakdown.',url:'https://yurukusa.github.io/url-parser/',cat:'code',icon:'://'},
  {name:'UUID Gen',desc:'Generate UUID v4, v7, ULID, nanoid. Bulk generate, validate, parse.',url:'https://yurukusa.github.io/uuid-gen/',cat:'code',icon:'uid'},
  {name:'Emoji Picker',desc:'Search 300+ emojis. Click to copy. Categories, recently used.',url:'https://yurukusa.github.io/emoji-picker/',cat:'design',icon:'😀'},
  {name:'QR Code',desc:'Generate QR codes for URLs, WiFi, email, phone. Custom colors, PNG.',url:'https://yurukusa.github.io/qr-code/',cat:'design',icon:'QR'},
  {name:'Password Gen',desc:'Secure random password generator. Entropy meter, bulk generate.',url:'https://yurukusa.github.io/password-gen/',cat:'code',icon:'***'},
  {name:'Meta Tags',desc:'Generate SEO, OGP, Twitter Card meta tags. Google & social preview.',url:'https://yurukusa.github.io/meta-tags/',cat:'code',icon:'<>'},
  {name:'SVG Preview',desc:'Live SVG editor. Optimize, convert to data URI or CSS background. Download PNG.',url:'https://yurukusa.github.io/svg-preview/',cat:'design',icon:'SVG'},
  {name:'Box Model',desc:'Interactive CSS box model visualizer. Adjust margin, border, padding, content. Copy CSS.',url:'https://yurukusa.github.io/box-model/',cat:'design',icon:'[ ]'},
  {name:'CSS Flex',desc:'Interactive flexbox playground. Adjust container & item properties, see layout live. Copy CSS.',url:'https://yurukusa.github.io/css-flex/',cat:'design',icon:'⇔'},
  {name:'CSS Grid',desc:'Visual grid layout generator. Define columns, rows, gaps. Place items. Copy CSS.',url:'https://yurukusa.github.io/css-grid/',cat:'design',icon:'⊞'},
  {name:'HTML Escape',desc:'Encode/decode HTML entities. 56 named entity reference. Click to copy.',url:'https://yurukusa.github.io/html-escape/',cat:'code',icon:'&amp;'},
  {name:'Markdown Table',desc:'Visual markdown table generator. Edit cells, set alignment. Copy markdown.',url:'https://yurukusa.github.io/markdown-table/',cat:'writing',icon:'|T|'},
  {name:'CSS Animation',desc:'Keyframe animation generator. 12 presets (bounce, pulse, shake, spin). Custom timing, easing.',url:'https://yurukusa.github.io/css-animation/',cat:'design',icon:'▸▸'},
  {name:'Border Radius',desc:'Visual border-radius generator. 4-corner sliders, 10 presets, link/unlink mode.',url:'https://yurukusa.github.io/border-radius/',cat:'design',icon:'◜◝'},
  {name:'CSS Filter',desc:'Visual CSS filter generator. Blur, brightness, contrast, saturate, hue-rotate. 10 presets.',url:'https://yurukusa.github.io/css-filter/',cat:'design',icon:'◑'},
  {name:'Text Transform',desc:'Case converter: UPPER, lower, Title, camelCase, snake_case, kebab-case. Sort, dedupe, trim.',url:'https://yurukusa.github.io/text-transform/',cat:'code',icon:'Aa→'},
  {name:'Spacing Calc',desc:'Design system spacing scale generator. Tailwind, Material, Bootstrap presets. CSS/SCSS/Tailwind export.',url:'https://yurukusa.github.io/spacing-calc/',cat:'design',icon:'⊟'},
  {name:'CSS Units',desc:'Convert between CSS units: px, rem, em, vw, vh, %, pt, cm. Auto-detect viewport.',url:'https://yurukusa.github.io/css-units/',cat:'design',icon:'px↔'},
  {name:'Color Convert',desc:'Convert colors: HEX, RGB, HSL, HSB, CMYK. Color picker, WCAG contrast check.',url:'https://yurukusa.github.io/color-convert/',cat:'design',icon:'#→'},
  {name:'Image Resize',desc:'Resize images in browser. Aspect ratio lock, PNG/JPEG/WebP export, quality control.',url:'https://yurukusa.github.io/image-resize/',cat:'design',icon:'📐'},
  {name:'CSV ↔ JSON',desc:'Convert CSV to JSON and back. Auto-detect headers, custom delimiters, table preview.',url:'https://yurukusa.github.io/csv-json/',cat:'code',icon:'⇄'},
  {name:'SQL Format',desc:'Format and beautify SQL queries. Uppercase keywords, indent, minify. 6 presets.',url:'https://yurukusa.github.io/sql-format/',cat:'code',icon:'SQL'},
  {name:'YAML ↔ JSON',desc:'Convert YAML to JSON and back. Docker Compose sample. Live validation.',url:'https://yurukusa.github.io/yaml-json/',cat:'code',icon:'yml'},
  {name:'TOML ↔ JSON',desc:'Convert TOML to JSON and back. Cargo.toml, pyproject.toml presets.',url:'https://yurukusa.github.io/toml-json/',cat:'code',icon:'toml'},
  {name:'CSS Clip-Path',desc:'Visual clip-path generator. Drag points, presets, circle/ellipse/inset/polygon.',url:'https://yurukusa.github.io/css-clip-path/',cat:'design',icon:'✂'},
  {name:'Placeholder Image',desc:'Generate placeholder images. Custom size, colors, text. PNG/JPEG/WebP download.',url:'https://yurukusa.github.io/placeholder-img/',cat:'design',icon:'▧'},
  {name:'JSON → TypeScript',desc:'Generate TypeScript interfaces from JSON. Smart type inference, nested objects.',url:'https://yurukusa.github.io/json-to-ts/',cat:'code',icon:'TS'},
  {name:'Color Blind Sim',desc:'Simulate 8 types of color blindness on any image. Accessibility testing.',url:'https://yurukusa.github.io/color-blind-sim/',cat:'design',icon:'👁',featured:true},
  {name:'OG Preview',desc:'Preview how URLs look on Twitter, Facebook, LinkedIn, Slack, Discord.',url:'https://yurukusa.github.io/og-preview/',cat:'data',icon:'OG'},
  {name:'CSS Text Shadow',desc:'Visual text-shadow generator. Multi-layer, 12 presets, live preview.',url:'https://yurukusa.github.io/css-text-shadow/',cat:'design',icon:'Ts'},
  {name:'Regex Replace',desc:'Find & replace with regex. Live preview, match highlights, backreferences.',url:'https://yurukusa.github.io/regex-replace/',cat:'code',icon:'s/'},
  {name:'CSS Glass',desc:'Glassmorphism generator. Blur, opacity, borders. Live preview, 8 presets.',url:'https://yurukusa.github.io/css-glass/',cat:'design',icon:'◻'},
  {name:'JSON Path',desc:'Query JSON with JSONPath. Filters, recursive descent, array slicing.',url:'https://yurukusa.github.io/json-path/',cat:'code',icon:'$.'},
  {name:'CSS Neumorphism',desc:'Soft UI generator. Flat, concave, convex, pressed. Auto shadow colors.',url:'https://yurukusa.github.io/css-neumorphism/',cat:'design',icon:'⬜'},
  {name:'Char Count',desc:'Character counter with Twitter, Instagram, LinkedIn, SMS limits.',url:'https://yurukusa.github.io/char-count/',cat:'writing',icon:'#A'},
  {name:'Encode Decode',desc:'URL, Base64, HTML, Unicode, Hex, Binary, ROT13, Punycode. All in one.',url:'https://yurukusa.github.io/encode-decode/',cat:'code',icon:'⇌'},
  {name:'HSL Picker',desc:'HSL color picker with harmonies, lightness/saturation scales, history.',url:'https://yurukusa.github.io/hsl-picker/',cat:'design',icon:'◐'},
  {name:'Number Base',desc:'Convert binary, hex, octal, decimal. Bit visualization, two\'s complement.',url:'https://yurukusa.github.io/number-base/',cat:'code',icon:'0x'},
  {name:'Data URI',desc:'Convert files to data URIs. Images, SVG, CSS. Copy as background or img tag.',url:'https://yurukusa.github.io/data-uri/',cat:'code',icon:'d:'},
  {name:'Case Convert',desc:'camelCase, snake_case, PascalCase, kebab-case and 10+ naming conventions.',url:'https://yurukusa.github.io/case-convert/',cat:'code',icon:'aA'},
  {name:'Subnet Calc',desc:'IP subnet calculator. Network, broadcast, host range, CIDR, visual breakdown.',url:'https://yurukusa.github.io/subnet-calc/',cat:'code',icon:'IP',featured:true},
  {name:'JSON Schema',desc:'Generate JSON Schema from samples. Type inference, validation, multiple drafts.',url:'https://yurukusa.github.io/json-schema/',cat:'code',icon:'{}'},
  {name:'Keycode',desc:'Press any key to see keyCode, key, code, which. Clipboard copy, history.',url:'https://yurukusa.github.io/keycode/',cat:'code',icon:'⌨'},
  {name:'CSS Cursor',desc:'Preview all 37 CSS cursor types. Click to copy, live test area.',url:'https://yurukusa.github.io/css-cursor/',cat:'design',icon:'↗'},
  {name:'CSS Transform',desc:'Visual transform generator. Translate, rotate, scale, skew, perspective. 10 presets.',url:'https://yurukusa.github.io/css-transform/',cat:'design',icon:'⟳'},
  {name:'Git Cheatsheet',desc:'57 Git commands with examples. Search, categories, danger levels.',url:'https://yurukusa.github.io/git-cheatsheet/',cat:'code',icon:'git'},
  {name:'Regex Cheatsheet',desc:'67 regex patterns with examples. Search, categories, click to copy.',url:'https://yurukusa.github.io/regex-cheatsheet/',cat:'code',icon:'/./'},
  {name:'CSS Transition',desc:'Visual transition generator. Duration, delay, cubic-bezier editor. 10 presets.',url:'https://yurukusa.github.io/css-transition/',cat:'design',icon:'→→'},
  {name:'HTML to JSX',desc:'Convert HTML to valid JSX/React. class→className, inline style objects.',url:'https://yurukusa.github.io/html-to-jsx/',cat:'code',icon:'<J>'},
  {name:'CSS Variables',desc:'Custom properties generator. Theme builder, 6 starter themes, 4 export formats.',url:'https://yurukusa.github.io/css-variable/',cat:'design',icon:'--v'},
  {name:'Tailwind Converter',desc:'CSS ↔ Tailwind bidirectional converter. 200+ utilities, spacing scale.',url:'https://yurukusa.github.io/tailwind-converter/',cat:'code',icon:'TW',featured:true},
  {name:'CSS Media Query',desc:'Visual media query builder. 25 device/framework presets, breakpoint visualizer.',url:'https://yurukusa.github.io/css-media/',cat:'design',icon:'@m'},
  {name:'HTML Minifier',desc:'Minify & beautify HTML. 8 options, inline CSS/JS minification, statistics.',url:'https://yurukusa.github.io/html-minifier/',cat:'code',icon:'</>'},
  {name:'CSS Specificity',desc:'Specificity calculator. Compare selectors, quiz mode, :where()/:is() support.',url:'https://yurukusa.github.io/css-specificity/',cat:'design',icon:'#.a'},
  {name:'JS Minifier',desc:'Minify & beautify JavaScript. Comment/whitespace removal, boolean shortening.',url:'https://yurukusa.github.io/js-minifier/',cat:'code',icon:'js'},
  {name:'Color Mixer',desc:'Mix colors with weights. RGB/HSL/CIELAB modes, 8 presets, history.',url:'https://yurukusa.github.io/color-mixer/',cat:'design',icon:'🎨'},
  {name:'CSS Minifier',desc:'Minify & beautify CSS. Color shortening, duplicate merge, statistics.',url:'https://yurukusa.github.io/css-minifier/',cat:'code',icon:'css'},
  {name:'JSON Viewer',desc:'Interactive tree viewer. Search, path copy, table mode, virtualized.',url:'https://yurukusa.github.io/json-viewer/',cat:'code',icon:'{▸}'},
  {name:'API Tester',desc:'Browser REST client. Send requests, view responses, history. 5 presets.',url:'https://yurukusa.github.io/api-tester/',cat:'code',icon:'API'},
  {name:'CSS Reset',desc:'Browse, compare, customize 8 popular CSS resets. Custom builder.',url:'https://yurukusa.github.io/css-reset/',cat:'design',icon:'↺'},
  {name:'Dep Changelog',desc:'See what changed in your dependencies. npm registry + GitHub releases + breaking change detection.',url:'https://yurukusa.github.io/dep-changelog/',cat:'data',icon:'📋'},
  {name:'Locale Format',desc:'See how dates, numbers, and currencies render in 25+ locales using the Intl API.',url:'https://yurukusa.github.io/locale-format/',cat:'code',icon:'🌐'},
  {name:'CSP Builder',desc:'Build Content Security Policy headers visually. 16 directives, 4 presets.',url:'https://yurukusa.github.io/csp-builder/',cat:'security',icon:'🛡️'},
  {name:'SRI Gen',desc:'Generate SRI integrity hashes for CDN scripts. SHA-256/384/512.',url:'https://yurukusa.github.io/sri-gen/',cat:'security',icon:'🔒'},
  {name:'Robots.txt',desc:'Build and validate robots.txt files. AI crawler blocking, 5 templates.',url:'https://yurukusa.github.io/robots-txt/',cat:'security',icon:'🤖'},
  {name:'CORS Test',desc:'Test CORS headers for any URL. Diagnose cross-origin issues instantly.',url:'https://yurukusa.github.io/cors-test/',cat:'security',icon:'⛓'},
  {name:'Cookie Check',desc:'Analyze HTTP cookie security. SameSite, Secure, HttpOnly audit with grades.',url:'https://yurukusa.github.io/cookie-check/',cat:'security',icon:'🍪'},
  {name:'gitignore Gen',desc:'Generate .gitignore from 150+ GitHub templates. Combine languages, IDEs, OS.',url:'https://yurukusa.github.io/gitignore-gen/',cat:'code',icon:'.gi'},
  {name:'htaccess Gen',desc:'Generate .htaccess files. Redirects, caching, HTTPS, CORS, security. 7 presets.',url:'https://yurukusa.github.io/htaccess-gen/',cat:'code',icon:'.ht'},
  {name:'Env Gen',desc:'Generate .env files for any framework. 12 templates, random secrets, .env.example.',url:'https://yurukusa.github.io/env-gen/',cat:'code',icon:'${}'},
  {name:'Nginx Config',desc:'Generate nginx.conf visually. Reverse proxy, SSL, gzip, security. 6 presets.',url:'https://yurukusa.github.io/nginx-config/',cat:'code',icon:'Ng'},
  {name:'Dockerfile Gen',desc:'Generate Dockerfile, .dockerignore, docker-compose.yml. 10 languages. Multi-stage builds.',url:'https://yurukusa.github.io/dockerfile-gen/',cat:'code',icon:'Dk'},
  {name:'GH Actions Gen',desc:'Build GitHub Actions CI/CD workflows visually. 8 templates: Node.js, Python, Go, Rust, Docker, npm publish.',url:'https://yurukusa.github.io/gh-actions-gen/',cat:'code',icon:'GA'},
  {name:'Makefile Gen',desc:'Generate Makefiles visually. C/C++, Go, Python, Docker, Node.js, Rust, LaTeX templates. Custom targets.',url:'https://yurukusa.github.io/makefile-gen/',cat:'code',icon:'Mk'},
  {name:'package.json Gen',desc:'Create npm package.json visually. CLI, Library, Web App, Express, TypeScript, Monorepo templates.',url:'https://yurukusa.github.io/package-json-gen/',cat:'code',icon:'Pj'},
  {name:'tsconfig Gen',desc:'Build tsconfig.json visually. Node.js, React, Next.js, Library, CLI, Deno presets. Path aliases.',url:'https://yurukusa.github.io/tsconfig-gen/',cat:'code',icon:'Ts'},
  {name:'ESLint Config Gen',desc:'Build ESLint v9 flat config visually. TypeScript, React, Next.js, Node.js, Strict presets. Rules editor.',url:'https://yurukusa.github.io/eslint-config-gen/',cat:'code',icon:'Es'},
  {name:'Prettier Config Gen',desc:'Build .prettierrc visually. Airbnb, Standard, Google presets. Live code preview. JSON/YAML/JS output.',url:'https://yurukusa.github.io/prettier-config-gen/',cat:'code',icon:'Pr'},
  {name:'EditorConfig Gen',desc:'Generate .editorconfig visually. Per-filetype indent, charset, EOL rules. 6 presets.',url:'https://yurukusa.github.io/editorconfig-gen/',cat:'code',icon:'Ec'},
  {name:'License Chooser',desc:'Compare 11 open source licenses side-by-side. Permissions, conditions, limitations. Generate LICENSE file.',url:'https://yurukusa.github.io/license-gen/',cat:'code',icon:'Li'},
  {name:'README Gen',desc:'Scaffold README.md visually. Badges, install, usage, API, contributing sections. 6 project templates.',url:'https://yurukusa.github.io/readme-gen/',cat:'code',icon:'Rm'},
  {name:'Commit Message Gen',desc:'Build conventional commit messages. Type, scope, body, breaking changes, co-authors. Gitmoji support.',url:'https://yurukusa.github.io/commit-gen/',cat:'code',icon:'Cm'},
  {name:'Semver Calculator',desc:'Check semver range satisfaction, bump versions, compare versions, explain ranges. ^, ~, x-ranges, || support.',url:'https://yurukusa.github.io/semver-calc/',cat:'code',icon:'Sv'},
  {name:'Dependabot Config Gen',desc:'Build .github/dependabot.yml visually. 14 ecosystems, schedule, groups, ignore rules. 6 project presets.',url:'https://yurukusa.github.io/dependabot-gen/',cat:'code',icon:'Db'},
  {name:'Cron Builder',desc:'Build cron expressions visually. 12 presets, quick-set dropdowns, next 5 run times, human-readable explanation.',url:'https://yurukusa.github.io/cron-builder/',cat:'code',icon:'Cr'},
  {name:'JSON Schema Gen',desc:'Infer JSON Schema from sample data. Auto-detect types, formats, required fields. Draft 2020-12. 5 sample templates.',url:'https://yurukusa.github.io/json-schema-gen/',cat:'code',icon:'Js'},
  {name:'cURL Builder',desc:'Build curl commands visually. Method, headers, body, auth, query params. 5 presets. Shell-safe escaping.',url:'https://yurukusa.github.io/curl-builder/',cat:'code',icon:'Cu'},
  {name:'Nginx Config Gen',desc:'Generate nginx server blocks visually. Reverse proxy, SPA, PHP, SSL, gzip, rate limiting. 8 presets.',url:'https://yurukusa.github.io/nginx-config-gen/',cat:'code',icon:'Nx'},
  {name:'Docker Compose Gen',desc:'Build docker-compose.yml visually. Services, volumes, networks, env vars. 8 stack presets (MERN, WordPress, etc).',url:'https://yurukusa.github.io/docker-compose-gen/',cat:'code',icon:'Dc'},
  {name:'SSH Config Gen',desc:'Build ~/.ssh/config visually. Host entries, keys, ProxyJump, port forwarding. 6 presets.',url:'https://yurukusa.github.io/ssh-config-gen/',cat:'code',icon:'Sh'},
  {name:'Systemd Service Gen',desc:'Generate systemd .service unit files visually. Type, restart, security hardening, logging. 8 presets.',url:'https://yurukusa.github.io/systemd-gen/',cat:'code',icon:'Sd'},
  {name:'GitHub Profile Gen',desc:'Build GitHub profile README.md visually. Badges, stats cards, tech stack, social links. 6 themes.',url:'https://yurukusa.github.io/github-profile-gen/',cat:'code',icon:'Gp'},
  {name:'Image Filter',desc:'Apply image filters in your browser. 9 adjustments + 10 presets (vintage, dramatic, noir). PNG/JPEG download. No upload.',url:'https://yurukusa.github.io/image-filter/',cat:'image',icon:'If'},
  {name:'Image Crop',desc:'Crop images in your browser. Aspect ratio presets (1:1, 16:9, 4:3, OG Image). Drag selection with rule-of-thirds grid. PNG/JPEG download.',url:'https://yurukusa.github.io/image-crop/',cat:'image',icon:'Ic'},
  {name:'Image Color Picker',desc:'Pick colors from any image. Auto-extract dominant palettes. HEX/RGB/HSL. Zoom ring eyedropper. Export CSS/SCSS/Tailwind vars.',url:'https://yurukusa.github.io/color-picker-image/',cat:'color',icon:'Cp'},
  {name:'Chart Builder',desc:'Create bar, line, pie, doughnut, area charts from data. 5 color palettes. Dark/white/transparent background. Download PNG.',url:'https://yurukusa.github.io/chart-builder/',cat:'data',icon:'Ch'},
  {name:'Image Watermark',desc:'Add text or image watermarks to photos. Adjust position, opacity, size, rotation. Tiling mode. PNG/JPEG download. No upload.',url:'https://yurukusa.github.io/image-watermark/',cat:'image',icon:'Iw'},
  {name:'Image Compare',desc:'Compare two images with before/after slider. Side-by-side and pixel difference modes. Drag to reveal. No upload.',url:'https://yurukusa.github.io/image-compare/',cat:'image',icon:'Cm'},
  {name:'Image to Base64',desc:'Convert images to Base64 data URIs. Get CSS background-image, HTML img tag, Markdown, raw Base64. Size stats.',url:'https://yurukusa.github.io/image-to-base64/',cat:'image',icon:'B6'},
  {name:'Sprite Sheet',desc:'Combine multiple images into a CSS sprite sheet. Horizontal/vertical/grid layout. Auto-generate CSS with background-position.',url:'https://yurukusa.github.io/sprite-sheet/',cat:'image',icon:'Ss'},
  {name:'K8s YAML Generator',desc:'Generate Kubernetes YAML manifests. Deployment, Service, Ingress, ConfigMap, Secret, CronJob, PVC. 6 stack presets.',url:'https://yurukusa.github.io/k8s-yaml-gen/',cat:'devops',icon:'K8'},
  {name:'GitHub Actions Generator',desc:'Create CI/CD workflow YAML visually. Node.js, Python, Go, Rust, Docker presets. Triggers, steps, matrix, caching.',url:'https://yurukusa.github.io/github-actions-gen/',cat:'devops',icon:'Ga'},
  {name:'Terraform Generator',desc:'Generate Terraform HCL visually. AWS (EC2, S3, RDS, VPC, Lambda), GCP, Azure. 3 providers × 6-8 resources. Presets.',url:'https://yurukusa.github.io/terraform-gen/',cat:'devops',icon:'Tf'},
  {name:'Grafana Dashboard',desc:'Generate import-ready Grafana dashboard JSON. Panels, PromQL queries, thresholds. Node Exporter, Docker, K8s, API presets.',url:'https://yurukusa.github.io/grafana-dashboard-gen/',cat:'devops',icon:'Gr'},
  {name:'JWT Debugger',desc:'Decode and inspect JWT tokens. View header, payload, claims. Build new tokens. Expiration check. Samples included.',url:'https://yurukusa.github.io/jwt-debugger/',cat:'security',icon:'Jw'},
  {name:'API Mock Generator',desc:'Generate realistic mock API responses. Users, posts, products, auth. JSON/XML. Status codes, pagination, error responses.',url:'https://yurukusa.github.io/api-mock-gen/',cat:'api',icon:'Am'},
  {name:'Meta Tag Generator',desc:'Generate SEO & social media meta tags. Open Graph, Twitter Card. Google search preview. Live social card preview.',url:'https://yurukusa.github.io/meta-tag-gen/',cat:'seo',icon:'Mt'},
  {name:'robots.txt Generator',desc:'Create robots.txt visually. User-agent rules, allow/disallow paths. Block AI crawlers preset. Sitemap URL. Download ready.',url:'https://yurukusa.github.io/robots-txt-gen/',cat:'seo',icon:'Rb'},
  {name:'CORS Header Generator',desc:'Generate CORS configurations. Nginx, Apache, Express, Flask, Spring Boot. Methods, headers, credentials. 4 presets.',url:'https://yurukusa.github.io/cors-tester/',cat:'devops',icon:'Co'},
  {name:'Changelog Generator',desc:'Create CHANGELOG.md following Keep a Changelog format. Version entries, semantic versioning. Compare links. Copy or download.',url:'https://yurukusa.github.io/changelog-gen/',cat:'code',icon:'Cl'},
  {name:'OG Image Generator',desc:'Create Open Graph images (1200×630) with Canvas. Gradients, text, badges, patterns. 5 presets. Download PNG or copy to clipboard.',url:'https://yurukusa.github.io/og-image-gen/',cat:'design',icon:'Og'},
  {name:'Performance Budget',desc:'Calculate page performance budget. Asset sizes, load times for 3G/4G/WiFi/Fiber. Visual breakdown. Optimization recommendations.',url:'https://yurukusa.github.io/performance-budget/',cat:'code',icon:'Pb'},
  {name:'Manifest Generator',desc:'Create manifest.json for PWAs. Icons, display mode, theme colors, shortcuts, screenshots. Download JSON or webmanifest.',url:'https://yurukusa.github.io/manifest-gen/',cat:'code',icon:'Mf'},
  {name:'Security Headers',desc:'Generate HTTP security headers. HSTS, X-Frame-Options, Permissions-Policy. Nginx, Apache, Express configs. A-F security grade.',url:'https://yurukusa.github.io/security-headers/',cat:'security',icon:'Sh'},
  {name:'Accessibility Checker',desc:'WCAG compliance checker. Color contrast ratio calculator. Touch target sizes. Interactive checklist. ARIA landmark reference.',url:'https://yurukusa.github.io/a11y-check/',cat:'design',icon:'A1'},
  {name:'SVG Optimizer',desc:'Clean and minify SVG code. Remove comments, metadata, editor attributes. Live preview. Export as data URI or CSS background.',url:'https://yurukusa.github.io/svg-optimizer/',cat:'design',icon:'So'},
  {name:'XML Formatter',desc:'Format, validate, and minify XML. Convert to JSON. XPath queries. Syntax highlighting. Statistics and error reporting.',url:'https://yurukusa.github.io/xml-formatter/',cat:'code',icon:'Xm'},
  {name:'.env Validator',desc:'Validate .env files. Detect duplicates, empty values, security risks. Compare .env vs .env.example. Generate .env.example.',url:'https://yurukusa.github.io/env-validator/',cat:'code',icon:'Ev'},
  {name:'Typography Scale',desc:'Generate harmonious type scales. Modular ratios from Minor Second to Golden Ratio. CSS vars, SCSS, Tailwind. Live preview.',url:'https://yurukusa.github.io/typography-scale/',cat:'design',icon:'Ts'},
  {name:'Animation Easing',desc:'Preview CSS easing functions. Interactive cubic-bezier editor. 16 presets. Compare animations side-by-side. Steps function.',url:'https://yurukusa.github.io/animation-easing/',cat:'css',icon:'Ae'},
  {name:'Color Harmony',desc:'Generate harmonious palettes from color theory. Complementary, analogous, triadic. Color wheel. Tints & shades. Export CSS, SCSS, Tailwind.',url:'https://yurukusa.github.io/color-harmony/',cat:'design',icon:'Ch'},
  {name:'Grid Calculator',desc:'Calculate CSS grid layouts visually. Column widths, gaps, areas. Responsive breakpoints. Holy Grail, dashboard, gallery presets.',url:'https://yurukusa.github.io/grid-calculator/',cat:'css',icon:'Gc'},
  {name:'Responsive Breakpoints',desc:'Manage responsive breakpoints visually. Bootstrap, Tailwind, Material presets. CSS media queries, SCSS mixins. Device preview.',url:'https://yurukusa.github.io/responsive-breakpoints/',cat:'css',icon:'Rb'},
  {name:'Table Generator',desc:'Create tables in HTML, Markdown, CSV, JSON, LaTeX, ASCII. Interactive editor. Import CSV/JSON. Style options. Sort columns.',url:'https://yurukusa.github.io/table-gen/',cat:'code',icon:'Tg'},
  {name:'CSS Scroll Snap',desc:'Generate CSS scroll snap layouts. Horizontal carousel, vertical sections, gallery. Live preview. Mandatory vs proximity.',url:'https://yurukusa.github.io/css-scroll-snap/',cat:'css',icon:'Ss'},
  {name:'Form Builder',desc:'Build HTML forms visually. 13 field types. Export HTML, React JSX, Vue. Contact, login, registration presets. Drag to reorder.',url:'https://yurukusa.github.io/form-builder/',cat:'code',icon:'Fb'},
  {name:'Regex Visualizer',desc:'Visualize and explain regular expressions. Match highlighting, group capture, replace mode. Quick reference. Presets included.',url:'https://yurukusa.github.io/regex-visual/',cat:'code',icon:'Rv'},
  {name:'API Rate Calculator',desc:'Calculate API rate limits. Token bucket, sliding window algorithms. JS, Python, Go code. Cost calculator. GitHub, OpenAI presets.',url:'https://yurukusa.github.io/api-rate-calc/',cat:'api',icon:'Ar'},
{name:'Tone Generator',desc:'Generate audio frequencies with Web Audio API. Sine, square, sawtooth, triangle waveforms. Musical note detection. Octave shift. Detune.',url:'https://yurukusa.github.io/tone-gen/',cat:'code',icon:'Tg'},
{name:'Noise Generator',desc:'White, pink & brown noise generator. Low-pass and high-pass filters. Auto-stop timer. Great for focus, sleep, and audio testing.',url:'https://yurukusa.github.io/noise-gen/',cat:'code',icon:'Ng'},
{name:'Web Metronome',desc:'Precise metronome with tap tempo. Time signatures, subdivisions, BPM presets. Click, beep, woodblock sounds. Beat visualization.',url:'https://yurukusa.github.io/metronome/',cat:'code',icon:'Mt'},
{name:'Frequency Calculator',desc:'Musical note frequency reference. Equal temperament table. Hz-to-note converter. MIDI numbers. Wavelength. Interval calculator.',url:'https://yurukusa.github.io/frequency-calc/',cat:'code',icon:'Fc'},
{name:'Audio Visualizer',desc:'Real-time audio visualization. Microphone or file input. Spectrum analyzer, waveform, circular mode. FFT size and color themes.',url:'https://yurukusa.github.io/audio-visualizer/',cat:'code',icon:'Av'},
{name:'Color Name Finder',desc:'Find the nearest CSS named color for any hex, RGB, or HSL value. All 148 CSS colors. Top 5 closest matches. Color family filter.',url:'https://yurukusa.github.io/color-name/',cat:'design',icon:'Cn'},
{name:'CSS Gradient Text',desc:'Generate gradient text effects. Linear, radial, conic gradients. Animation toggle. 10 beautiful presets. Text stroke option.',url:'https://yurukusa.github.io/gradient-text/',cat:'css',icon:'Gt'},
{name:'Text to Speech',desc:'Browser-based text-to-speech. Multiple voices and languages. Rate, pitch, volume controls. Word highlighting. Fun presets.',url:'https://yurukusa.github.io/text-to-speech/',cat:'code',icon:'Ts'},
{name:'ASCII Art Generator',desc:'Convert text to ASCII art. Multiple built-in fonts: Standard, Banner, Small, Script, Shadow. Copy or download as .txt.',url:'https://yurukusa.github.io/ascii-art/',cat:'code',icon:'Aa'},
{name:'Typing Speed Test',desc:'Measure typing speed in WPM. Easy, medium, hard, code modes. Live accuracy tracking. History with best score.',url:'https://yurukusa.github.io/typing-speed/',cat:'code',icon:'Tp'},
{name:'Reading Time Calculator',desc:'Estimate reading time, speaking time. Flesch readability scores. Word, sentence, paragraph counts. Medium-style badge.',url:'https://yurukusa.github.io/reading-time/',cat:'writing',icon:'Rt'},
{name:'Screen Resolution',desc:'Device and viewport info. Screen size, DPR, color depth, orientation. CSS media query tester. Device comparison table.',url:'https://yurukusa.github.io/screen-resolution/',cat:'code',icon:'Sr'},
{name:'Pomodoro Timer',desc:'Focus timer with work/break cycles. SVG progress ring. Browser notifications. Audio alerts. Session history in localStorage.',url:'https://yurukusa.github.io/pomodoro/',cat:'code',icon:'Pm'},
{name:'Stopwatch',desc:'Precision timer with lap tracking. Fastest/slowest lap highlights. Keyboard shortcuts. Fullscreen mode. Export laps as CSV.',url:'https://yurukusa.github.io/stopwatch/',cat:'code',icon:'Sw'},
{name:'Countdown Timer',desc:'Custom countdown timers. Quick presets. Multiple simultaneous timers. Browser notifications. Audio alerts on completion.',url:'https://yurukusa.github.io/countdown-timer/',cat:'code',icon:'Ct'},
{name:'HTML Entity Reference',desc:'Search and browse 200+ HTML entities. Arrows, math, currency, Greek, symbols. Click to copy. Category filter. Character converter.',url:'https://yurukusa.github.io/html-entity/',cat:'code',icon:'He'},
{name:'Pixel Ruler',desc:'On-screen pixel measurement. Crosshair cursor with coordinates. Rectangle and distance modes. Guide lines. Grid overlay.',url:'https://yurukusa.github.io/pixel-ruler/',cat:'design',icon:'Pr'},
{name:'JS Beautifier',desc:'Format and beautify JavaScript code. Indent, semicolons, quotes options. Minify mode. Basic syntax highlighting.',url:'https://yurukusa.github.io/js-beautifier/',cat:'code',icon:'Jb'},
{name:'CSS Beautifier',desc:'Format and prettify CSS code. Sort properties, indent options. Minify mode. Stats: property count, rule count, size.',url:'https://yurukusa.github.io/css-beautifier/',cat:'css',icon:'Cb'},
{name:'JSON Tree Viewer',desc:'Interactive collapsible JSON tree. Search keys and values. JSONPath display. Copy path or value. Stats and depth info.',url:'https://yurukusa.github.io/json-tree/',cat:'data',icon:'Jt'},
{name:'Color Wheel',desc:'Interactive HSL color wheel. Complementary, analogous, triadic, tetradic harmony modes. Tints and shades. Copy hex values.',url:'https://yurukusa.github.io/color-wheel/',cat:'design',icon:'Cw'},
{name:'Markdown Editor',desc:'Live split-view Markdown editor. Toolbar for formatting. Export HTML or .md. Auto-save to localStorage. Word count.',url:'https://yurukusa.github.io/markdown-editor/',cat:'writing',icon:'Me'},
{name:'Container Queries',desc:'Interactive CSS container queries playground. Resize containers, see @container rules trigger in real-time. Presets included.',url:'https://yurukusa.github.io/css-container-queries/',cat:'css',icon:'@c',featured:true},
{name:'CSS :has() Playground',desc:'The parent selector, finally. Interactive :has() experiments. Form validation, checked states, quantity queries.',url:'https://yurukusa.github.io/css-has-playground/',cat:'css',icon:':h',featured:true},
{name:'CSS Nesting',desc:'Native CSS nesting playground. No preprocessor needed. Write nested CSS, see it live, flatten to standard CSS.',url:'https://yurukusa.github.io/css-nesting/',cat:'css',icon:'{}'},
{name:'Popover API',desc:'Native HTML popovers without JavaScript. Tooltips, menus, dialogs with the popover attribute. Interactive builder.',url:'https://yurukusa.github.io/popover-playground/',cat:'code',icon:'Po'},
{name:'View Transitions',desc:'Smooth DOM animations with the View Transitions API. Card morphs, list reorders, theme toggles. Interactive demos.',url:'https://yurukusa.github.io/view-transitions/',cat:'code',icon:'Vt'},
{name:'Scroll Animations',desc:'CSS scroll-driven animations. Animate on scroll with pure CSS. Progress bars, fade-ins, parallax. No JavaScript.',url:'https://yurukusa.github.io/scroll-driven-animations/',cat:'css',icon:'↕'},
{name:'CSS @layer',desc:'Visualize CSS Cascade Layers. Reorder layers, see which rules win. Interactive @layer priority builder.',url:'https://yurukusa.github.io/css-layers/',cat:'css',icon:'@l'},
{name:'Dialog Element',desc:'Native HTML dialogs without libraries. Modal, non-modal, backdrop styling, form method="dialog". Interactive builder.',url:'https://yurukusa.github.io/dialog-playground/',cat:'code',icon:'Di'},
{name:'CSS color-mix()',desc:'Mix colors with CSS color-mix(). 8 color spaces (srgb, oklch, lab). Live preview, comparison, presets.',url:'https://yurukusa.github.io/color-mix-playground/',cat:'design',icon:'Mx'},
{name:'CSS Subgrid',desc:'Interactive CSS subgrid playground. Align nested grids to parent tracks. With vs without comparison. Presets.',url:'https://yurukusa.github.io/css-subgrid/',cat:'css',icon:'⊞s'},
{name:'CSS @starting-style',desc:'Animate elements from display:none with pure CSS. Modal, toast, popover, card presets. Customizable timing.',url:'https://yurukusa.github.io/css-starting-style/',cat:'css',icon:'@s',featured:true},
{name:'CSS @scope',desc:'Scope styles to DOM subtrees without BEM or Shadow DOM. Donut scopes, limits, proximity. Visual boundaries.',url:'https://yurukusa.github.io/css-scope-playground/',cat:'css',icon:'@p'},
{name:'CSS text-wrap',desc:'Compare text-wrap balance vs pretty vs stable side by side. Adjustable width, font, presets. Line count per mode.',url:'https://yurukusa.github.io/text-wrap-playground/',cat:'css',icon:'Tw'},
{name:'CSS @property',desc:'Typed custom properties with animation. Gradient angles, color morphs, counters, progress bars. With vs without comparison.',url:'https://yurukusa.github.io/css-property-playground/',cat:'css',icon:'@p',featured:true},
{name:'CSS light-dark()',desc:'Build theme tokens with light-dark(). 10 customizable design tokens, live toggle, component preview. No media queries.',url:'https://yurukusa.github.io/light-dark-playground/',cat:'css',icon:'LD'},
{name:'CSS field-sizing',desc:'Auto-resize inputs, textareas, selects to fit content. Side-by-side comparison with default. No JavaScript needed.',url:'https://yurukusa.github.io/field-sizing-playground/',cat:'css',icon:'Fs'},
{name:'Web Animations API',desc:'Visual builder for element.animate(). 10 presets, keyframe editor, timing controls. Export working JavaScript code.',url:'https://yurukusa.github.io/waapi-playground/',cat:'js',icon:'Wa',featured:true},
{name:'CSS Scroll Snap',desc:'Build scroll-snap layouts visually. All properties: snap-type, snap-align, scroll-padding, scroll-margin, snap-stop. Per-item overrides.',url:'https://yurukusa.github.io/scroll-snap-playground/',cat:'css',icon:'Ss'},
{name:'Compression Streams',desc:'Browser-native gzip/deflate compression. Compare all formats. Hex dump, Base64, decompress. No libraries needed.',url:'https://yurukusa.github.io/compression-streams/',cat:'js',icon:'Gz'},
{name:'Web Speech API',desc:'TTS + STT in one playground. All voices, rate/pitch/volume, real-time transcription, confidence scores, events log. Code export.',url:'https://yurukusa.github.io/web-speech-playground/',cat:'js',icon:'Sp',featured:true},
{name:'Intersection Observer',desc:'Visualize IntersectionObserver. Threshold, rootMargin sliders. Real-time ratio, callback log. 6 use-case presets. Code export.',url:'https://yurukusa.github.io/intersection-observer-playground/',cat:'js',icon:'IO',featured:true},
{name:'Resize Observer',desc:'Visualize ResizeObserver. Drag-resize element, see contentRect/borderBoxSize/contentBoxSize live. Adjustable padding, border, box-sizing.',url:'https://yurukusa.github.io/resize-observer-playground/',cat:'js',icon:'Ro'},
{name:'MutationObserver',desc:'Watch DOM changes live. 8 mutation actions. childList/attributes/characterData toggles. DOM tree view, mutation log, code export.',url:'https://yurukusa.github.io/mutation-observer-playground/',cat:'js',icon:'Mo'},
{name:'Performance Observer',desc:'Interactive PerformanceObserver explorer. Marks, measures, resources, paint, Web Vitals. Timeline, waterfall, real-time entry log.',url:'https://yurukusa.github.io/performance-observer-playground/',cat:'js',icon:'Po',featured:true},
{name:'Barcode Detection',desc:'Scan QR codes, UPC, EAN, Code 128 via camera or image upload. Bounding box overlay, format checker, scan history. All in-browser.',url:'https://yurukusa.github.io/barcode-detection-playground/',cat:'js',icon:'Bc'},
{name:'CORS Headers Builder',desc:'Visual CORS config generator. 6 presets. Code for Express, Fastify, Next.js, Flask, Django, Go, Rust, Nginx, Apache. Live header preview.',url:'https://yurukusa.github.io/cors-headers-builder/',cat:'code',icon:'Co',featured:true},
{name:'Structured Clone',desc:'Test what survives structuredClone(). 28 type tests, custom JS input, visual diff. Compatibility table. vs JSON.parse(JSON.stringify()).',url:'https://yurukusa.github.io/structured-clone-playground/',cat:'js',icon:'Sc'},
{name:'SW Lifecycle',desc:'Interactive Service Worker lifecycle visualizer. 6 scenarios, animated state diagram, phase timeline, event log. Live SW monitoring.',url:'https://yurukusa.github.io/sw-lifecycle-playground/',cat:'js',icon:'Sw',featured:true},
{name:'JS Prototype Chain',desc:'Interactive prototype chain visualizer. Write constructors, classes, Object.create() → see full chain with property delegation, shadowing, method resolution.',url:'https://yurukusa.github.io/js-prototype-chain/',cat:'js',icon:'⛓',featured:true},
{name:'JS Event Loop',desc:'Interactive event loop visualizer. Step through code to see Call Stack, Web APIs, Microtask Queue, Task Queue in action. 8 presets with explanations.',url:'https://yurukusa.github.io/js-event-loop/',cat:'js',icon:'♻',featured:true},
{name:'CSS Stacking Context',desc:'Interactive stacking context visualizer. Build elements, set z-index/position/opacity/transform, see paint order. 6 preset gotcha scenarios.',url:'https://yurukusa.github.io/css-stacking-context/',cat:'design',icon:'📚',featured:true},
{name:'CSS Breakpoint Sim',desc:'Visual media query breakpoint designer. Timeline view, device presets, Tailwind/Bootstrap/Material presets. See active rules at any width. CSS export.',url:'https://yurukusa.github.io/css-breakpoint-sim/',cat:'design',icon:'📱',featured:true},
{name:'JS Scope Chain',desc:'Interactive scope chain & closure visualizer. See nested scopes, trace variable lookup, understand closures/hoisting/var vs let. 8 presets.',url:'https://yurukusa.github.io/js-scope-chain/',cat:'js',icon:'{}',featured:true},
{name:'Web Storage Quota',desc:'Interactive storage quota visualizer. Test localStorage/sessionStorage/IndexedDB limits. 5 experiments. Storage API comparison. Quota error handling.',url:'https://yurukusa.github.io/web-storage-quota/',cat:'js',icon:'💾',featured:true},
{name:'JS Error Stack Trace',desc:'Interactive error stack trace visualizer. Execute code, see error propagation through call stack. Try/catch flow. Custom errors. 8 presets.',url:'https://yurukusa.github.io/js-error-trace/',cat:'js',icon:'🔴',featured:true},
{name:'JS Event Propagation',desc:'Interactive event propagation simulator. Watch capturing, target, and bubbling phases animate through the DOM. stopPropagation, delegation. 8 presets.',url:'https://yurukusa.github.io/js-event-propagation/',cat:'js',icon:'🫧',featured:true},
{name:'CSS Cascade Debugger',desc:'See which CSS rule wins and why. @layer priority + specificity + source order. Step-by-step cascade resolution. 8 presets.',url:'https://yurukusa.github.io/css-cascade-debugger/',cat:'css',icon:'🏆',featured:true},
{name:'Rendering Pipeline',desc:'Interactive browser rendering pipeline visualizer. See which CSS properties trigger Layout, Paint, or Composite. 35+ properties, 6 scenarios.',url:'https://yurukusa.github.io/rendering-pipeline/',cat:'perf',icon:'🖥️',featured:true},
{name:'WeakRef & GC Visualizer',desc:'Interactive WeakRef, WeakMap, WeakSet, FinalizationRegistry visualizer. Watch garbage collection reclaim weak references. 6 presets.',url:'https://yurukusa.github.io/js-weakref-gc/',cat:'js',icon:'♻️',featured:true},
{name:'HTTP/2 Multiplexing',desc:'Compare HTTP/1.1 vs HTTP/2 stream multiplexing. HPACK header compression demo. 5 scenarios. Head-of-line blocking visualization.',url:'https://yurukusa.github.io/http2-visualizer/',cat:'network',icon:'🌐',featured:true},
{name:'Async/Await Visualizer',desc:'Interactive async/await execution visualizer. Watch functions suspend at await, promises resolve, microtasks drain. Desugar to Promise equivalent. 8 presets.',url:'https://yurukusa.github.io/js-async-visualizer/',cat:'js',icon:'⏳',featured:true},
{name:'CSS Matrix Calculator',desc:'Interactive CSS transform matrix calculator. Build transform stacks, see 3×3 matrix math step-by-step, copy matrix() output. 6 presets with live preview.',url:'https://yurukusa.github.io/css-matrix-calculator/',cat:'css',icon:'🔢',featured:true},
{name:'DNS Resolution Visualizer',desc:'Watch DNS queries travel from browser to root servers step by step. Cache hits, CNAME chains, NXDOMAIN, DNSSEC validation. Cache inspector with TTL countdown.',url:'https://yurukusa.github.io/dns-resolution-visualizer/',cat:'net',icon:'🌐',featured:true},
{name:'TLS Handshake Visualizer',desc:'Interactive TLS 1.2 and 1.3 handshake sequence diagram. Watch ClientHello, key exchange, cert verification. 0-RTT, mTLS, downgrade attack presets.',url:'https://yurukusa.github.io/tls-handshake-visualizer/',cat:'net',icon:'🔒',featured:true},
{name:'Grid Track Sizing Algorithm',desc:'Watch how browsers resolve CSS grid fr, minmax(), auto, and fixed tracks step by step. 8 presets with calculation breakdown.',url:'https://yurukusa.github.io/css-grid-track-sizing/',cat:'css',icon:'📐',featured:true},
{name:'CSP Header Builder',desc:'Interactive Content Security Policy builder. Toggle directives, add sources, preview header. Strictness analyzer. 6 presets from Starter to Strict Nonce.',url:'https://yurukusa.github.io/csp-header-builder/',cat:'security',icon:'🛡️',featured:true},
{name:'BFC Layout Debugger',desc:'Interactive Block Formatting Context visualizer. See how BFC affects float containment, margin collapse, and layout isolation. 6 presets with live CSS.',url:'https://yurukusa.github.io/bfc-layout-debugger/',cat:'css',icon:'📦',featured:true},
{name:'WebSocket Frame Inspector',desc:'RFC 6455 WebSocket frame decoder and generator. Paste hex, see FIN/opcode/mask/payload. Generate frames for testing. 8 presets with bit-level diagram.',url:'https://yurukusa.github.io/websocket-frame-inspector/',cat:'net',icon:'🔌',featured:true},
{name:'V8 Hidden Classes',desc:'Watch how V8 creates hidden classes for JS objects. Transition chains, shared shapes, inline caching states (mono/poly/mega). 6 presets with step-through.',url:'https://yurukusa.github.io/js-hidden-classes/',cat:'js',icon:'🏗️',featured:true},
{name:'Memory Leak Patterns',desc:'Interactive JS memory leak visualizer. Closure leaks, detached DOM, forgotten timers, event listeners, globals. Live heap graph with leak vs fix comparison.',url:'https://yurukusa.github.io/js-memory-leak-patterns/',cat:'js',icon:'💧',featured:true},
{name:'CORS Preflight Flow',desc:'Step-through the browser CORS decision algorithm. Simple vs preflight requests, credentials rules, cache behavior. 8 scenarios with decision nodes and headers.',url:'https://yurukusa.github.io/cors-preflight-flow/',cat:'net',icon:'🔀',featured:true},
{name:'TCP State Machine',desc:'Interactive TCP connection state machine. 3-way handshake, 4-way close, simultaneous close, RST, half-close, SYN flood. Step-through with state transitions.',url:'https://yurukusa.github.io/tcp-state-machine/',cat:'net',icon:'🔄',featured:true},
{name:'Proxy & Reflect',desc:'Watch JS Proxy traps intercept operations in real-time. 8 presets: get/set, validation, default values, negative index, private props, apply/construct, revocable, observable.',url:'https://yurukusa.github.io/js-proxy-reflect/',cat:'js',icon:'🪤',featured:true},
{name:'Web Crypto Explorer',desc:'Interactive Web Crypto API explorer. Hash, encrypt/decrypt (AES-GCM/CBC/CTR), sign/verify (ECDSA/RSA/HMAC), key generation, random values. All in-browser.',url:'https://yurukusa.github.io/web-crypto-explorer/',cat:'security',icon:'🔐',featured:true},
{name:'AbortController Patterns',desc:'Interactive AbortController/AbortSignal demos. Fetch cancel, timeout(), race, AbortSignal.any(), multiple requests, event cleanup, React useEffect. Animated timeline.',url:'https://yurukusa.github.io/abort-controller-patterns/',cat:'js',icon:'🛑',featured:true},
{name:'Iterator & Generator',desc:'Step through JS generators and iterators. Basic yield, two-way communication, infinite sequences, yield* delegation, for-of, async generators, return/throw.',url:'https://yurukusa.github.io/js-iterator-generator/',cat:'js',icon:'🔄',featured:true},
{name:'HTTP Cache Flow',desc:'Browser HTTP caching decision visualizer. Cache hit, miss, ETag 304, no-store, no-cache, immutable, stale-while-revalidate. Headers panel + best practices.',url:'https://yurukusa.github.io/http-cache-visualizer/',cat:'net',icon:'📦',featured:true},
{name:'Promise Combinators',desc:'Interactive Promise.all/allSettled/race/any visualizer. Animated promise lanes, real-time combinator results, comparison table. 8 scenarios.',url:'https://yurukusa.github.io/js-promise-combinators/',cat:'js',icon:'🤝',featured:true},
{name:'JS Engine Pipeline',desc:'V8 compilation pipeline visualizer: Source → Tokenizer → Parser → AST → Bytecode → Interpreter → JIT → Optimized Code. 6 scenarios: deopt, IC, lazy parsing, OSR.',url:'https://yurukusa.github.io/js-engine-pipeline/',cat:'js',icon:'⚙️',featured:true},
{name:'WebRTC Signaling',desc:'Interactive WebRTC connection flow. SDP Offer/Answer, ICE candidates, STUN/TURN servers, Trickle ICE, ICE Restart, Data Channels. 5 scenarios.',url:'https://yurukusa.github.io/webrtc-signaling-flow/',cat:'net',icon:'📡',featured:true},
{name:'SharedArrayBuffer & Atomics',desc:'Interactive concurrency visualizer. Race conditions, Atomics.add, wait/notify, compare-and-swap, spinlock, ring buffer. Step-through thread interleaving.',url:'https://yurukusa.github.io/js-shared-memory/',cat:'js',icon:'🧵',featured:true},
{name:'Module Resolution',desc:'JS module resolution algorithm visualizer. CJS require() vs ESM import, node_modules traversal, package.json exports, conditional exports. 6 scenarios.',url:'https://yurukusa.github.io/js-module-resolution/',cat:'js',icon:'📦',featured:true},
{name:'GC Visualizer',desc:'V8 garbage collection step-through. Scavenge (young gen), Mark-Sweep, Mark-Compact, incremental marking, memory leak patterns. Heap regions and object lifecycle.',url:'https://yurukusa.github.io/js-gc-visualizer/',cat:'js',icon:'♻️',featured:true},
{name:'Execution Context',desc:'JS execution context & call stack visualizer. Hoisting (var vs let TDZ), function calls, closures, this binding (4 rules). Creation and execution phases.',url:'https://yurukusa.github.io/js-execution-context/',cat:'js',icon:'📚',featured:true},
{name:'IEEE 754 Floats',desc:'Interactive IEEE 754 double-precision float visualizer. Bit-level sign/exponent/mantissa, clickable bits, precision analysis, 0.1+0.2, NaN, -0, denormals.',url:'https://yurukusa.github.io/js-float-visualizer/',cat:'js',icon:'🔢',featured:true},
{name:'Type Coercion',desc:'JS type coercion visualizer. == vs === step-through algorithm, truth tables, ToPrimitive/ToNumber rules. Famous gotchas explained.',url:'https://yurukusa.github.io/js-type-coercion/',cat:'js',icon:'🔄',featured:true},
{name:'Regex Engine',desc:'Regex engine visualizer. NFA state graph, backtracking step-through, greedy vs lazy, catastrophic backtracking detection. 8 presets.',url:'https://yurukusa.github.io/js-regex-engine/',cat:'js',icon:'⚙️',featured:true},
{name:'Symbol Explorer',desc:'JS well-known Symbols interactive guide. Symbol.iterator, toPrimitive, hasInstance, species, dispose, and more. Code + flow diagrams.',url:'https://yurukusa.github.io/js-symbol-explorer/',cat:'js',icon:'🔮',featured:true},
{name:'HTTP/3 & QUIC',desc:'HTTP/3 and QUIC protocol visualizer. Handshake, 0-RTT resumption, stream multiplexing, HOL blocking comparison, connection migration, loss recovery.',url:'https://yurukusa.github.io/http3-quic-visualizer/',cat:'infra',icon:'🚀',featured:true},
{name:'Anchor Positioning',desc:'CSS Anchor Positioning playground. anchor(), position-area, @position-try, anchor-size(), popover integration. Draggable demos.',url:'https://yurukusa.github.io/css-anchor-positioning/',cat:'css',icon:'⚓',featured:true},
{name:'Set Operations',desc:'ES2025 Set methods playground. intersection, union, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom. Venn diagrams.',url:'https://yurukusa.github.io/js-set-operations/',cat:'js',icon:'🔵',featured:true},
{name:'Property Descriptors',desc:'JS property descriptors explorer. configurable/writable/enumerable, Object.freeze/seal/preventExtensions, accessor get/set, defineProperty gotchas.',url:'https://yurukusa.github.io/js-property-descriptors/',cat:'js',icon:'🔐',featured:true},
{name:'Logical Properties',desc:'CSS Logical Properties playground. inline/block mapping, writing-mode/direction switching, margin-inline, padding-block. Live property remapping.',url:'https://yurukusa.github.io/css-logical-properties/',cat:'css',icon:'↔️',featured:true},
{name:'Color Spaces',desc:'CSS Color Spaces explorer. oklch, oklab, display-p3 picker. Gamut comparison, perceptual uniformity demo, palette generator.',url:'https://yurukusa.github.io/css-color-spaces/',cat:'css',icon:'🎨',featured:true},
{name:'File System Access',desc:'File System Access API playground. Open, save, browse directories. Live file editor with read/write permissions. Activity log.',url:'https://yurukusa.github.io/file-system-access-api/',cat:'js',icon:'📂',featured:true},
{name:'Web Locks',desc:'Web Locks API visualizer. Exclusive/shared locks, cross-tab coordination, deadlock detection, ifAvailable, live demo with real API.',url:'https://yurukusa.github.io/web-locks-api/',cat:'js',icon:'🔒',featured:true},
{name:'Broadcast Channel',desc:'Broadcast Channel API visualizer. Cross-tab messaging, channel lifecycle, leader election, logout sync, worker communication. 6 scenarios with live demo.',url:'https://yurukusa.github.io/broadcast-channel-api/',cat:'js',icon:'📡',featured:true},
{name:'URLPattern',desc:'URLPattern API playground. Pattern matching with named groups, regex constraints, wildcards, optional segments, component-based matching. 8 presets.',url:'https://yurukusa.github.io/url-pattern-api/',cat:'js',icon:'🔗',featured:true},
{name:'JS Task Scheduling',desc:'Visualize scheduler.postTask(), rAF, requestIdleCallback, and setTimeout priority ordering with step-through animations.',url:'https://yurukusa.github.io/js-task-scheduling/',cat:'js',icon:'📋',featured:true},
{name:'JS Iterator Helpers',desc:'ES2025 Iterator Helpers playground. map, filter, take, drop, flatMap, reduce on lazy iterators. Pipeline builder with laziness visualization.',url:'https://yurukusa.github.io/js-iterator-helpers/',cat:'js',icon:'🔄',featured:true},
{name:'CSS transition-behavior',desc:'CSS transition-behavior: allow-discrete playground. Animate display, visibility transitions. Entry/exit animations with @starting-style. Side-by-side comparison.',url:'https://yurukusa.github.io/css-transition-behavior/',cat:'css',icon:'🔀',featured:true},
{name:'CSS Trig Functions',desc:'CSS sin(), cos(), tan(), atan2() visual playground. Circular layout builder, orbit animations, clock face, wave generator. Interactive angle controls.',url:'https://yurukusa.github.io/css-trig-functions/',cat:'css',icon:'📐',featured:true},
{name:'Permissions API',desc:'Browser Permissions API dashboard. Check granted/denied/prompt status for geolocation, camera, notifications, clipboard. Live status monitor, code generator.',url:'https://yurukusa.github.io/permissions-api/',cat:'js',icon:'🛡️',featured:true},
{name:'CSS Custom Highlights',desc:'CSS Custom Highlights API playground. Search highlighting, multi-color ranges, spellcheck simulation, syntax highlighter, collaborative cursors. ::highlight() styling.',url:'https://yurukusa.github.io/css-custom-highlights/',cat:'css',icon:'🖍️',featured:true},
{name:'Compression Streams',desc:'Compression Streams API playground. gzip/deflate/deflate-raw compression, file compressor, algorithm comparison, streaming demo, hex dump view.',url:'https://yurukusa.github.io/compression-streams/',cat:'js',icon:'🗜️',featured:true},
{name:'Cross-Doc View Transitions',desc:'Cross-document (MPA) View Transitions playground. Page-to-page animations, view-transition-name mapping, transition types, @view-transition rules, timing controls.',url:'https://yurukusa.github.io/cross-doc-view-transitions/',cat:'css',icon:'🔄',featured:true},
{name:'CSS Scroll State',desc:'CSS scroll-state() container queries playground. Sticky stuck detection, snap highlight, scrollable indicators. Chrome 133+ feature.',url:'https://yurukusa.github.io/css-scroll-state/',cat:'css',icon:'📜',featured:true},
{name:'CSS attr() Function',desc:'CSS attr() for styling playground. Colors, sizes, theming from data attributes. Type conversion, fallbacks, tooltip builder. Chrome 130+.',url:'https://yurukusa.github.io/css-attr-function/',cat:'css',icon:'🏷️',featured:true},
{name:'MediaRecorder Studio',desc:'MediaRecorder + Screen Capture studio. Camera, screen, audio recording with codec selection, bitrate controls, live preview, download.',url:'https://yurukusa.github.io/media-recorder-studio/',cat:'js',icon:'🎥',featured:true},
{name:'Web Vitals Visualizer',desc:'Core Web Vitals (LCP, INP, CLS) interactive visualizer. Trigger and measure metrics in real-time. Good/needs-improvement/poor thresholds. Before/after comparison.',url:'https://yurukusa.github.io/web-vitals-visualizer/',cat:'perf',icon:'📊',featured:true},
{name:'Long Animation Frames',desc:'LoAF API visualizer. Trigger long frames, inspect script attribution, frame timeline, INP connection, optimization comparison with scheduler.yield().',url:'https://yurukusa.github.io/long-animation-frames/',cat:'perf',icon:'⚡',featured:true},
{name:'Trusted Types',desc:'Trusted Types XSS prevention sandbox. DOM sink security, policy creation, CSP integration, violation logging. Before/after comparison.',url:'https://yurukusa.github.io/trusted-types/',cat:'security',icon:'🛡️',featured:true},
{name:'Web Speech API',desc:'Unified Speech Recognition + Synthesis playground. Mic transcription, voice browser, pitch/rate/volume controls, round-trip demo, language comparison.',url:'https://yurukusa.github.io/web-speech-api/',cat:'js',icon:'🗣️',featured:true},
{name:'Clipboard API',desc:'Advanced Clipboard API playground. Multi-MIME read/write, image copy/paste, custom web formats, ClipboardItem.supports(), copy event interception.',url:'https://yurukusa.github.io/clipboard-api/',cat:'js',icon:'📋',featured:true},
{name:'Device Sensors',desc:'Device Orientation + Motion sensor fusion. 3D device model, compass, acceleration graphs, shake detector, tilt controls. Desktop simulation included.',url:'https://yurukusa.github.io/device-sensors/',cat:'js',icon:'📱',featured:true},
{name:'OffscreenCanvas',desc:'OffscreenCanvas + Web Workers performance playground. Main thread vs worker rendering, FPS comparison, particle system, main thread blocking demo.',url:'https://yurukusa.github.io/offscreen-canvas/',cat:'perf',icon:'🖼️',featured:true},
{name:'Web Animations API',desc:'WAAPI interactive builder. Keyframe editor, timeline control, easing visualizer, composite modes, animation groups. WAAPI vs CSS comparison.',url:'https://yurukusa.github.io/web-animations-api/',cat:'js',icon:'🎬',featured:true},
{name:'IndexedDB Explorer',desc:'Visual IndexedDB explorer. Create databases, object stores, indexes. CRUD operations, range queries, data viewer, export/import JSON.',url:'https://yurukusa.github.io/indexeddb-explorer/',cat:'js',icon:'🗄️',featured:true},
{name:'Selection & Range',desc:'Selection & Range API visual debugger. Range internals, programmatic selection, multi-range, event monitor, DOM tree view with offsets.',url:'https://yurukusa.github.io/selection-range-api/',cat:'js',icon:'✂️',featured:true},
{name:'Pointer Events',desc:'Advanced Pointer Events visualizer. Pressure/tilt/twist visualization, coalesced events trail, multi-input comparison, pointer capture demo.',url:'https://yurukusa.github.io/pointer-events/',cat:'js',icon:'👆',featured:true},
{name:'Web NFC',desc:'Web NFC reader/writer playground. Multi-record NDEF messages, record types, hex viewer, smart poster builder. Desktop mock included.',url:'https://yurukusa.github.io/web-nfc/',cat:'js',icon:'📡',featured:true},
{name:'FormData Inspector',desc:'FormData API visual inspector. Build forms, see entries tree, blob/file preview, MIME types, multipart POST body preview.',url:'https://yurukusa.github.io/formdata-inspector/',cat:'js',icon:'📝',featured:true},
{name:'Shadow DOM Explorer',desc:'Shadow DOM interactive visualizer. Open vs closed shadow, style encapsulation, slot distribution, ::slotted(), ::part(), adoptedStyleSheets.',url:'https://yurukusa.github.io/shadow-dom-explorer/',cat:'js',icon:'🌑',featured:true},
{name:'Custom Elements',desc:'Custom Elements (Web Components) builder. Lifecycle callbacks, observed attributes, property getters/setters. Live preview, export ES6 class.',url:'https://yurukusa.github.io/custom-elements-builder/',cat:'js',icon:'🧩',featured:true},
{name:'Web Workers Patterns',desc:'Web Workers message passing playground. Dedicated vs SharedWorker, postMessage timelines, Transferable objects, worker pool pattern.',url:'https://yurukusa.github.io/web-workers-patterns/',cat:'js',icon:'⚙️',featured:true},
{name:'History API',desc:'History API navigation visualizer. pushState/replaceState stack, popstate events, state object inspector, SPA routing patterns.',url:'https://yurukusa.github.io/history-api-visualizer/',cat:'js',icon:'📜',featured:true},
{name:'Geolocation',desc:'HTML5 Geolocation API visualizer. getCurrentPosition/watchPosition, accuracy circles, movement tracking, geofence detection. Desktop simulation.',url:'https://yurukusa.github.io/geolocation-visualizer/',cat:'js',icon:'📍',featured:true},
{name:'Fetch Advanced',desc:'Fetch API advanced playground. Cache modes, ReadableStream progress, AbortController timeout, retry with backoff, conditional requests.',url:'https://yurukusa.github.io/fetch-advanced/',cat:'js',icon:'🌐',featured:true},
{name:'Notification Builder',desc:'Notification API interactive builder. Title/body/icon/badge/actions, permission flow, tag-based grouping, push simulation.',url:'https://yurukusa.github.io/notification-builder/',cat:'js',icon:'🔔',featured:true},
{name:'EyeDropper Inspector',desc:'EyeDropper API + Color Inspector. Pick colors from screen, RGB/HSL/Hex/OKLCH output, palette builder, contrast checker, gradient sampler.',url:'https://yurukusa.github.io/eyedropper-inspector/',cat:'color',icon:'💧',featured:true},
{name:'Claude Code Risk Scorer',desc:'Paste your CLAUDE.md, get a safety score 0-100. 10-category risk assessment: forbidden actions, rate limits, budget caps, rollback, escalation.',url:'https://yurukusa.github.io/claude-code-risk-scorer/',cat:'code',icon:'🛡️',featured:true},
{name:'Claude Code Danger Scanner',desc:'Scan CLAUDE.md for dangerous patterns. Detects rm -rf, force push, hardcoded secrets, unvetted commits. Deduction-based scoring.',url:'https://yurukusa.github.io/risk-score-web/',cat:'code',icon:'🔍',featured:true},
{name:'CSS Typed OM',desc:'CSS Typed Object Model playground. Explore typed CSS values, unit arithmetic, transform builder, performance comparison vs string-based.',url:'https://yurukusa.github.io/css-typed-om/',cat:'css',icon:'🔢',featured:true},
{name:'Keyboard API',desc:'Keyboard API playground. Layout map, key event inspector, keyboard lock, QWERTY/AZERTY/Dvorak comparison, shortcut tester, dead keys.',url:'https://yurukusa.github.io/keyboard-api/',cat:'js',icon:'⌨️',featured:true},
{name:'Invoker Commands',desc:'HTML command/commandfor playground. Control dialogs, popovers, media without JavaScript. Live code editor, 10+ interactive examples.',url:'https://yurukusa.github.io/invoker-commands/',cat:'code',icon:'🎯',featured:true},
{name:'CSS shape()',desc:'CSS shape() function playground. Visual path builder with draggable points, 6 presets, clip-path/offset-path, code export. Interop 2026.',url:'https://yurukusa.github.io/css-shape-function/',cat:'css',icon:'✂️',featured:true},
{name:'CSS contrast-color()',desc:'CSS contrast-color() playground. Auto-contrast text, batch tester, theme builder, WCAG checker, color grid, code generator with fallbacks.',url:'https://yurukusa.github.io/css-contrast-color/',cat:'css',icon:'🎨',featured:true},
{name:'CSS interpolate-size',desc:'CSS interpolate-size playground. Animate to/from auto heights, intrinsic sizing, transition keywords, allow-keywords demo.',url:'https://yurukusa.github.io/css-interpolate-size/',cat:'css',icon:'📐',featured:true},
{name:'CSS reading-flow',desc:'CSS reading-flow playground. Control focus navigation order in flex/grid layouts, visual vs source order, reading-flow property demo.',url:'https://yurukusa.github.io/css-reading-flow/',cat:'css',icon:'📖',featured:true},
{name:'CSS :state()',desc:'CSS Custom State pseudo-class playground. ElementInternals states, CustomStateSet API, toggle patterns, form validation states.',url:'https://yurukusa.github.io/css-custom-state/',cat:'css',icon:'🔄',featured:true},
{name:'CSS Relative Color',desc:'CSS Relative Color Syntax playground. Derive colors with from keyword, channel manipulation, palette generator, tint/shade, code export.',url:'https://yurukusa.github.io/css-relative-color/',cat:'css',icon:'🎨',featured:true},
{name:'Document PiP API',desc:'Document Picture-in-Picture API playground. Custom HTML PiP windows, music player, timer, notes, video controls.',url:'https://yurukusa.github.io/document-pip-api/',cat:'js',icon:'🖼️',featured:true},
{name:'EditContext API',desc:'EditContext API playground. Custom text editors, canvas editing, IME composition, selection management, formatting.',url:'https://yurukusa.github.io/editcontext-api/',cat:'js',icon:'✏️',featured:true},
{name:'CSS content-visibility',desc:'CSS content-visibility playground. Rendering optimization, contain-intrinsic-size, scroll performance, lazy rendering.',url:'https://yurukusa.github.io/css-content-visibility/',cat:'css',icon:'👁️',featured:true},
{name:'CSS font-size-adjust',desc:'CSS font-size-adjust playground. X-height normalization, font fallback matcher, aspect value calculator, layout shift prevention.',url:'https://yurukusa.github.io/css-font-size-adjust/',cat:'css',icon:'🔤',featured:true},
{name:'CSS zoom',desc:'CSS zoom property playground. Layout-affecting scaling vs transform:scale, responsive zoom, nested zoom, interactive calculator.',url:'https://yurukusa.github.io/css-zoom-property/',cat:'css',icon:'🔍',featured:true},
{name:'CSS @function',desc:'CSS @function rule playground. Native custom CSS functions with parameters, types, conditionals, live editor. Experimental.',url:'https://yurukusa.github.io/css-function-rule/',cat:'css',icon:'🧮',featured:true},
{name:'Container Style Queries',desc:'CSS Container Style Queries playground. Query custom properties, feature flags, theme switching, component variants.',url:'https://yurukusa.github.io/container-style-queries/',cat:'css',icon:'🎯',featured:true},
{name:'Sanitizer API',desc:'HTML Sanitizer API playground. XSS prevention, config builder, setHTML() demo, attack payload testing, code generator.',url:'https://yurukusa.github.io/sanitizer-api/',cat:'security',icon:'🧹',featured:true},
{name:'CSS @mixin',desc:'CSS @mixin/@apply playground. Native style block reuse with parameters, conditionals, migration from Sass, pattern library.',url:'https://yurukusa.github.io/css-mixins/',cat:'css',icon:'🧩',featured:true},
{name:'CSS Scroll Timeline',desc:'CSS scroll-timeline playground. Scroll-driven animations with named timelines, animation-timeline, view-timeline, scroll progress.',url:'https://yurukusa.github.io/css-scroll-timeline/',cat:'css',icon:'📜',featured:true},
{name:'Popover Anchor',desc:'Popover + CSS Anchor Positioning playground. Anchor elements to popovers, position-anchor, tooltips, menus, auto-flip.',url:'https://yurukusa.github.io/popover-anchor/',cat:'css',icon:'⚓',featured:true},
{name:'CSS Nesting Deep Dive',desc:'Advanced CSS Nesting playground. Nested selectors, @nest rules, specificity, media queries inside nesting, migration patterns.',url:'https://yurukusa.github.io/css-nesting-deep/',cat:'css',icon:'🪆',featured:true},
{name:'Page Reveal API',desc:'Page Reveal API playground. Navigation view transitions, @view-transition rule, page swap animations, cross-document transitions.',url:'https://yurukusa.github.io/page-reveal-api/',cat:'js',icon:'🎭',featured:true},
{name:'CSS Color Level 4',desc:'CSS Color Level 4 playground. oklch, oklab, display-p3, color() function, wide gamut colors, perceptual uniformity.',url:'https://yurukusa.github.io/css-color-level4/',cat:'css',icon:'🌈',featured:true},
{name:'Navigation API',desc:'Navigation API playground. navigate(), NavigateEvent inspection, history entries, canGoBack/Forward, transition tracking.',url:'https://yurukusa.github.io/navigation-api/',cat:'js',icon:'🧭',featured:true},
{name:'Speculation Rules',desc:'Speculation Rules API playground. Prerender/prefetch rule builder, eagerness levels, URL patterns, performance impact.',url:'https://yurukusa.github.io/speculation-rules/',cat:'js',icon:'🔮',featured:true},
{name:'Web Share API',desc:'Web Share API playground. Share text/URL/files, platform detection, fallback strategies, share target builder.',url:'https://yurukusa.github.io/web-share-api/',cat:'js',icon:'📤',featured:true},
{name:'Wake Lock API',desc:'Screen Wake Lock API playground. Acquire/release lock, visibility handling, timer, battery-aware patterns.',url:'https://yurukusa.github.io/wake-lock-api/',cat:'js',icon:'☀️',featured:true},
{name:'Web Bluetooth',desc:'Web Bluetooth API playground. Device discovery, GATT services, read/write/notify, connection state management.',url:'https://yurukusa.github.io/web-bluetooth-api/',cat:'js',icon:'📶',featured:true},
{name:'Web Serial API',desc:'Web Serial API playground. Serial port connection, terminal emulator, baud rates, signal control, hex/ASCII mode.',url:'https://yurukusa.github.io/web-serial-api/',cat:'js',icon:'🔌',featured:true},
{name:'Import Maps',desc:'Import Maps playground. Module resolution visualizer, scoped imports, CDN URL generator, integrity support.',url:'https://yurukusa.github.io/import-maps/',cat:'js',icon:'🗺️',featured:true},
{name:'Idle Detection',desc:'Idle Detection API playground. User/screen state visualization, event timeline, threshold config, use cases.',url:'https://yurukusa.github.io/idle-detection-api/',cat:'js',icon:'💤',featured:true},
{name:'WebTransport',desc:'WebTransport API playground. HTTP/3 QUIC connection, datagrams vs streams, latency comparison, state machine.',url:'https://yurukusa.github.io/web-transport-api/',cat:'js',icon:'🚀',featured:true},
{name:'Declarative Shadow DOM',desc:'Declarative Shadow DOM playground. SSR hydration, slot projection, style encapsulation, DOM tree inspector.',url:'https://yurukusa.github.io/declarative-shadow-dom/',cat:'js',icon:'🌑',featured:true},
{name:'WebCodecs',desc:'WebCodecs API playground. Video/Audio encoder/decoder, codec support detection, frame processing, performance metrics.',url:'https://yurukusa.github.io/webcodecs-api/',cat:'js',icon:'🎬',featured:true},
{name:'Background Fetch',desc:'Background Fetch API playground. Registration flow, progress tracking, abort/pause, service worker integration.',url:'https://yurukusa.github.io/background-fetch-api/',cat:'js',icon:'📥',featured:true},
{name:'Contact Picker',desc:'Contact Picker API playground. Select contacts, property configuration, permission flow, fallback builder.',url:'https://yurukusa.github.io/contact-picker-api/',cat:'js',icon:'👤',featured:true},
{name:'Badging API',desc:'Badging API playground. App badge counter, favicon fallback, setAppBadge/clearBadge, PWA integration.',url:'https://yurukusa.github.io/badging-api/',cat:'js',icon:'🔴',featured:true},
{name:'Window Controls Overlay',desc:'Window Controls Overlay playground. Custom titlebar, env() variables, drag regions, theme-aware overlay.',url:'https://yurukusa.github.io/window-controls-overlay/',cat:'js',icon:'🪟',featured:true},
{name:'Launch Handler',desc:'Launch Handler API playground. client_mode options, LaunchQueue, manifest builder, multi-window behavior.',url:'https://yurukusa.github.io/launch-handler-api/',cat:'js',icon:'🚪',featured:true},
{name:'File Handling',desc:'File Handling API playground. File type associations, MIME mapping, manifest file_handlers, open flow.',url:'https://yurukusa.github.io/file-handling-api/',cat:'js',icon:'📂',featured:true},
{name:'Screen Capture',desc:'Screen Capture API playground. getDisplayMedia, display surface selection, audio capture, constraints builder.',url:'https://yurukusa.github.io/screen-capture-api/',cat:'js',icon:'🖥️',featured:true},
{name:'EyeDropper Explorer',desc:'EyeDropper API Explorer. Color picker, history, palette builder, hex/rgb/hsl conversion, clipboard export.',url:'https://yurukusa.github.io/eyedropper-api-v2/',cat:'design',icon:'💧',featured:true},
{name:'Payment Handler',desc:'Payment Handler API playground. PaymentRequest flow, payment methods, response handling, security guide.',url:'https://yurukusa.github.io/payment-handler-api/',cat:'js',icon:'💳',featured:true},
{name:'Web HID',desc:'Web HID API playground. Device discovery, input/output reports, usage pages, hex data viewer.',url:'https://yurukusa.github.io/web-hid-api/',cat:'js',icon:'🎮',featured:true},
{name:'Periodic Background Sync',desc:'Periodic Background Sync playground. Registration, minInterval, sync events, status timeline.',url:'https://yurukusa.github.io/periodic-background-sync/',cat:'js',icon:'🔄',featured:true},
{name:'Content Index',desc:'Content Index API playground. Offline content management, category types, service worker integration.',url:'https://yurukusa.github.io/content-index-api/',cat:'js',icon:'📑',featured:true},
{name:'Web OTP',desc:'Web OTP API playground. OTPCredential, SMS format, autocomplete one-time-code, security guide.',url:'https://yurukusa.github.io/web-otp-api/',cat:'js',icon:'🔑',featured:true},
{name:'Storage Access',desc:'Storage Access API playground. hasStorageAccess, requestStorageAccess, cookie partitioning, permission flow.',url:'https://yurukusa.github.io/storage-access-api/',cat:'js',icon:'🍪',featured:true},
{name:'Media Session',desc:'Media Session API playground. Metadata builder, action handlers, position state, OS media controls.',url:'https://yurukusa.github.io/media-session-api/',cat:'js',icon:'🎵',featured:true},
{name:'Picture-in-Picture',desc:'Picture-in-Picture API playground. PiP window, events, custom controls, canvas source, browser comparison.',url:'https://yurukusa.github.io/picture-in-picture-api/',cat:'js',icon:'📺',featured:true},
{name:'Web USB',desc:'Web USB API playground. Device discovery, interface/endpoint explorer, transfer demos, descriptor viewer.',url:'https://yurukusa.github.io/web-usb-api/',cat:'js',icon:'🔌',featured:true},
{name:'Reporting API',desc:'Reporting API playground. ReportingObserver, report types, Report-To header builder, NEL overview.',url:'https://yurukusa.github.io/reporting-api/',cat:'js',icon:'📊',featured:true},
{name:'Performance Timeline',desc:'Performance Timeline API playground. PerformanceObserver, Resource/Navigation Timing, User Timing, Long Tasks.',url:'https://yurukusa.github.io/performance-timeline-api/',cat:'js',icon:'⏱️',featured:true},
{name:'Credential Management',desc:'Credential Management API playground. Password/Federated/PublicKey credentials, auto sign-in, mediation options.',url:'https://yurukusa.github.io/credential-management-api/',cat:'security',icon:'🔐',featured:true},
{name:'Web Share Target',desc:'Web Share Target playground. Manifest share_target builder, POST/GET, file receiving, service worker handling.',url:'https://yurukusa.github.io/web-share-target/',cat:'js',icon:'🎯',featured:true},
{name:'Manifest Builder',desc:'Web App Manifest builder. All fields editor, icon set, display modes, shortcuts, protocol handlers, JSON export.',url:'https://yurukusa.github.io/web-app-manifest-builder/',cat:'js',icon:'📋',featured:true},
{name:'CSS Paint API',desc:'CSS Paint API / Houdini Paint playground. registerPaint() worklet builder, custom patterns, live preview.',url:'https://yurukusa.github.io/css-paint-api/',cat:'css',icon:'🎨',featured:true},
{name:'CSS Layout API',desc:'CSS Layout API / Houdini Layout playground. Custom layout algorithms, masonry, circular layout demos.',url:'https://yurukusa.github.io/css-layout-api/',cat:'css',icon:'📐',featured:true},
{name:'CSS Properties & Values',desc:'CSS Properties & Values API playground. @property builder, syntax types, animated custom properties, type checking.',url:'https://yurukusa.github.io/css-properties-values-api/',cat:'css',icon:'🏷️',featured:true},
{name:'Text Fragment',desc:'Text Fragment API playground. #:~:text= URL builder, prefix/suffix context, ::target-text styling.',url:'https://yurukusa.github.io/text-fragment-api/',cat:'js',icon:'📝',featured:true},
{name:'Web Vitals Budget',desc:'Web Vitals Budget Calculator. LCP/INP/CLS budgets, resource allocation, third-party cost, config export.',url:'https://yurukusa.github.io/web-vitals-budget/',cat:'code',icon:'💰',featured:true},
{name:'CSP Evaluator',desc:'CSP Evaluator & Analyzer. Paste CSP header, security score, weakness detection, nonce/hash migration guide.',url:'https://yurukusa.github.io/csp-evaluator/',cat:'security',icon:'🛡️',featured:true},
{name:'SRI Generator',desc:'Subresource Integrity Generator. URL → SHA hash, CDN libraries, integrity tag generator, batch processing.',url:'https://yurukusa.github.io/subresource-integrity-gen/',cat:'security',icon:'🔒',featured:true},
{name:'Gamepad API',desc:'Gamepad API playground. Real-time button/axis viewer, rumble test, standard mapping, multi-gamepad support.',url:'https://yurukusa.github.io/gamepad-api/',cat:'js',icon:'🎮',featured:true},
{name:'Battery Status',desc:'Battery Status API playground. Charging state, level chart, event listeners, power-aware patterns.',url:'https://yurukusa.github.io/battery-status-api/',cat:'js',icon:'🔋',featured:true},
{name:'Network Info',desc:'Network Information API playground. effectiveType, downlink, rtt, saveData, adaptive loading patterns.',url:'https://yurukusa.github.io/network-info-api/',cat:'js',icon:'📡',featured:true},
{name:'Page Lifecycle',desc:'Page Lifecycle API playground. State machine, freeze/resume events, bfcache testing, state transitions.',url:'https://yurukusa.github.io/page-lifecycle-api/',cat:'js',icon:'🔄',featured:true},
{name:'Fullscreen API',desc:'Fullscreen API playground. requestFullscreen, events, :fullscreen CSS, keyboard input, orientation lock.',url:'https://yurukusa.github.io/fullscreen-api/',cat:'js',icon:'🖥️',featured:true},
{name:'Screen Orientation',desc:'Screen Orientation API playground. Type/angle display, lock(), orientation events, CSS comparison.',url:'https://yurukusa.github.io/screen-orientation-api/',cat:'js',icon:'🔄',featured:true},
{name:'Animation Timing',desc:'Web Animations Timing Functions. cubic-bezier builder, steps(), linear(), side-by-side comparison.',url:'https://yurukusa.github.io/web-animations-timing/',cat:'css',icon:'⏳',featured:true},
{name:'Intersection Observer v2',desc:'Intersection Observer v2 playground. Threshold builder, trackVisibility, lazy loading, infinite scroll.',url:'https://yurukusa.github.io/intersection-observer-v2/',cat:'js',icon:'👁️',featured:true},
{name:'ContentEditable',desc:'contenteditable playground. Editing modes, execCommand, input events, selection, rich text patterns.',url:'https://yurukusa.github.io/content-editable-playground/',cat:'js',icon:'✍️',featured:true},
{name:'Drag & Drop',desc:'Drag and Drop API playground. Events, DataTransfer, file drop, custom preview, sortable list.',url:'https://yurukusa.github.io/drag-drop-api/',cat:'js',icon:'🔀',featured:true},
{name:'Channel Messaging',desc:'Channel Messaging API playground. MessageChannel/Port, iframe/worker communication, structured clone.',url:'https://yurukusa.github.io/channel-messaging-api/',cat:'js',icon:'📨',featured:true},
{name:'Encoding API',desc:'Encoding API playground. TextEncoder/Decoder, byte visualization, multiple encodings, streaming.',url:'https://yurukusa.github.io/encoding-api/',cat:'js',icon:'🔤',featured:true},
{name:'Streams API',desc:'Streams API playground. Readable/Writable/Transform streams, backpressure, teeing, piping.',url:'https://yurukusa.github.io/streams-api/',cat:'js',icon:'🌊',featured:true},
{name:'URL API Explorer',desc:'URL API Explorer. URL parsing, URLSearchParams, URLPattern, relative resolution, encoding.',url:'https://yurukusa.github.io/url-api-explorer/',cat:'js',icon:'🔗',featured:true},
{name:'AbortSignal Patterns',desc:'AbortSignal Patterns playground. AbortController, timeout(), any(), fetch cancellation, cleanup.',url:'https://yurukusa.github.io/abort-signal-patterns/',cat:'js',icon:'🛑',featured:true},
{name:'Temporal API',desc:'Temporal API playground. PlainDate/Time/DateTime, ZonedDateTime, Duration, calendar systems.',url:'https://yurukusa.github.io/temporal-api/',cat:'js',icon:'📅',featured:true},
{name:'structuredClone Advanced',desc:'structuredClone playground. Deep clone, supported types matrix, transfer list, circular references.',url:'https://yurukusa.github.io/structuredclone-advanced/',cat:'js',icon:'📋',featured:true},
{name:'Intl Explorer',desc:'Intl API Explorer. NumberFormat, DateTimeFormat, RelativeTime, ListFormat, Segmenter, DisplayNames.',url:'https://yurukusa.github.io/intl-explorer/',cat:'js',icon:'🌍',featured:true},
{name:'Promise Patterns',desc:'Promise Patterns playground. all/allSettled/race/any, withResolvers, retry, timeout, cancellation.',url:'https://yurukusa.github.io/promise-patterns/',cat:'js',icon:'🤝',featured:true},
{name:'Array Methods Visual',desc:'Array Methods Visualizer. map/filter/reduce step-by-step, new methods, Set operations, groupBy.',url:'https://yurukusa.github.io/array-methods-visual/',cat:'js',icon:'📊',featured:true},
{name:'Map & Set Explorer',desc:'Map/Set/WeakMap/WeakSet playground. Operations, iteration, Set methods, WeakRef, performance comparison.',url:'https://yurukusa.github.io/map-set-explorer/',cat:'js',icon:'🗺️',featured:true},
{name:'Error Types Explorer',desc:'JavaScript Error Types. Built-in errors, custom classes, Error.cause, AggregateError, stack analysis.',url:'https://yurukusa.github.io/error-types-explorer/',cat:'js',icon:'❌',featured:true},
{name:'Proxy & Reflect',desc:'Proxy & Reflect Patterns. Handler traps, observable objects, validation, revocable proxy, logging.',url:'https://yurukusa.github.io/proxy-reflect-patterns/',cat:'js',icon:'🪞',featured:true},
{name:'Generator Patterns',desc:'Generator & Async Generator. Yield, lazy eval, infinite sequences, async iteration, pipelines.',url:'https://yurukusa.github.io/generator-patterns/',cat:'js',icon:'⚡',featured:true},
{name:'WeakRef & Finalizer',desc:'WeakRef & FinalizationRegistry. GC visualization, WeakRef cache, object lifecycle, memory patterns.',url:'https://yurukusa.github.io/weakref-finalizer/',cat:'js',icon:'🧹',featured:true},
{name:'JS Decorators',desc:'JavaScript Decorators playground. Class/method/field/accessor decorators, metadata, common patterns.',url:'https://yurukusa.github.io/decorator-patterns/',cat:'js',icon:'🎀',featured:true},
{name:'Regex Advanced',desc:'Regex Advanced Features. Lookbehind, named groups, Unicode properties, dotAll, matchAll, v flag.',url:'https://yurukusa.github.io/regex-lookbehind/',cat:'js',icon:'🔍',featured:true},
{name:'Cascade Layers Advanced',desc:'CSS Cascade Layers deep dive. Layer ordering, nesting, !important reversal, @import layer(), migration.',url:'https://yurukusa.github.io/css-cascade-layers-advanced/',cat:'css',icon:'📚',featured:true},
{name:'CSS Color Functions',desc:'CSS Color Functions. color-mix(), oklch, oklab, display-p3, gamut mapping, color space comparison.',url:'https://yurukusa.github.io/css-color-functions/',cat:'css',icon:'🎨',featured:true},
{name:'CSS Math Functions',desc:'CSS Math Functions. calc/min/max/clamp, round/mod/rem, trig functions, pow/sqrt, formula builder.',url:'https://yurukusa.github.io/css-math-functions/',cat:'css',icon:'🔢',featured:true},
{name:'ES Module Patterns',desc:'ES Module Import Patterns. Static/dynamic import, assertions, top-level await, circular deps, evaluation order.',url:'https://yurukusa.github.io/module-import-patterns/',cat:'js',icon:'📦',featured:true},
{name:'Web Components Lifecycle',desc:'Web Components Lifecycle. Connected/disconnected/attribute callbacks, upgrade, ElementInternals, timing.',url:'https://yurukusa.github.io/web-components-lifecycle/',cat:'js',icon:'🔄',featured:true},
{name:'CSS Logical Properties',desc:'CSS Logical Properties Explorer. Block/inline axis, writing modes, direction, physical mapping, migration.',url:'https://yurukusa.github.io/css-logical-props-explorer/',cat:'css',icon:'↔️',featured:true},
{name:'CSS Individual Transforms',desc:'CSS Individual Transform Properties. translate/rotate/scale, 3D, independent transitions, composition.',url:'https://yurukusa.github.io/css-individual-transforms/',cat:'css',icon:'🔄',featured:true},
{name:'JS Class Features',desc:'JavaScript Class Features. Private fields/methods, static blocks, auto-accessor, #field in obj, inheritance.',url:'https://yurukusa.github.io/js-class-features/',cat:'js',icon:'🏗️',featured:true},
{name:'requestIdleCallback Explorer',desc:'requestIdleCallback API. Idle deadline, task queue, cooperative scheduling, timeout, cancellation.',url:'https://yurukusa.github.io/requestidlecallback-explorer/',cat:'js',icon:'⏳',featured:true},
{name:'ResizeObserver Patterns',desc:'ResizeObserver Patterns. Breakpoint detection, responsive components, border-box/content-box, performance.',url:'https://yurukusa.github.io/resize-observer-patterns/',cat:'js',icon:'📐',featured:true},
{name:'MutationObserver Patterns',desc:'MutationObserver Patterns. Config builder, attribute filtering, takeRecords, disconnect/reconnect, performance.',url:'https://yurukusa.github.io/mutation-observer-patterns/',cat:'js',icon:'🔬',featured:true},
{name:'EventTarget Patterns',desc:'EventTarget Patterns. CustomEvent, event delegation, listener options, once/passive/signal, composition.',url:'https://yurukusa.github.io/event-target-patterns/',cat:'js',icon:'🎯',featured:true},
{name:'Fetch API Advanced',desc:'Fetch API Advanced Patterns. Streaming, AbortController, retry logic, request dedup, cache API, interceptors.',url:'https://yurukusa.github.io/fetch-patterns/',cat:'js',icon:'🌐',featured:true},
{name:'Performance Mark & Measure',desc:'User Timing API Level 3. Performance marks, measures, timeline visualization, PerformanceObserver.',url:'https://yurukusa.github.io/performance-mark-measure/',cat:'js',icon:'📊',featured:true},
{name:'Trusted Types Explorer',desc:'Trusted Types API. DOM XSS prevention, policy creation, sanitization, CSP integration.',url:'https://yurukusa.github.io/trusted-types-explorer/',cat:'security',icon:'🔒',featured:true},
{name:'CSS Selector Tester',desc:'CSS Selector Tester. Live matching, highlighting, specificity calc, :has/:is/:where/:not support.',url:'https://yurukusa.github.io/css-selector-tester/',cat:'css',icon:'🎯',featured:true},
{name:'Service Worker Recipes',desc:'Service Worker caching strategies. Cache First, Network First, Stale While Revalidate, lifecycle, updates.',url:'https://yurukusa.github.io/service-worker-recipes/',cat:'js',icon:'⚙️',featured:true},
{name:'Web Workers Advanced',desc:'Web Workers Patterns. Heavy computation, message passing, transferable objects, worker pools, SharedWorker.',url:'https://yurukusa.github.io/web-workers-advanced/',cat:'js',icon:'🧵',featured:true},
{name:'CSP Policy Builder',desc:'Content Security Policy Builder. Visual directive editor, violation tester, presets, copy header.',url:'https://yurukusa.github.io/csp-policy-builder/',cat:'security',icon:'🛡️',featured:true},
{name:'HTTP Method Explorer',desc:'HTTP Methods reference. GET/POST/PUT/PATCH/DELETE semantics, idempotency, CORS, REST patterns.',url:'https://yurukusa.github.io/http-method-tester/',cat:'code',icon:'📡',featured:true},
{name:'Web Font Analyzer',desc:'Web Font Performance Analyzer. @font-face parsing, FOIT/FOUT/FOFT, font-display, preload generator.',url:'https://yurukusa.github.io/web-font-analyzer/',cat:'design',icon:'🔤',featured:true},
{name:'ARIA Role Explorer',desc:'ARIA Roles & Properties. Taxonomy, keyboard expectations, screen reader output, common patterns.',url:'https://yurukusa.github.io/aria-role-explorer/',cat:'code',icon:'♿',featured:true},
{name:'CSS Specificity Battle',desc:'CSS Specificity Battle Arena. Selector comparison, visual breakdown, quiz mode, cascade order.',url:'https://yurukusa.github.io/css-specificity-battle/',cat:'css',icon:'⚔️',featured:true},
{name:'SVG Path Editor',desc:'SVG Path Command Editor. Visual path editing, drag control points, all commands, path optimization.',url:'https://yurukusa.github.io/svg-path-editor/',cat:'design',icon:'✏️',featured:true},
{name:'Cookie Inspector',desc:'Browser Cookie Inspector. View/create cookies, attributes, SameSite, security, Set-Cookie generator.',url:'https://yurukusa.github.io/cookie-inspector/',cat:'security',icon:'🍪',featured:true},
{name:'Animation Timing',desc:'CSS/JS Animation Timing. cubic-bezier editor, steps(), linear(), easing comparison, Web Animations API.',url:'https://yurukusa.github.io/animation-timing-playground/',cat:'css',icon:'⏱️',featured:true},
{name:'Flexbox Patterns',desc:'Flexbox Layout Patterns. Holy Grail, Sticky Footer, Card Grid, Navigation, Media Object, 15+ patterns.',url:'https://yurukusa.github.io/flexbox-holy-grail/',cat:'css',icon:'📐',featured:true},
{name:'Grid Area Painter',desc:'CSS Grid Area Visual Painter. Click/drag to paint areas, auto-generate grid-template-areas, export CSS.',url:'https://yurukusa.github.io/grid-area-painter/',cat:'css',icon:'🎨',featured:true},
];

const CATEGORIES=[
  {id:'all',label:'All'},
  {id:'js',label:'JavaScript'},
  {id:'css',label:'CSS'},
  {id:'code',label:'Code'},
  {id:'design',label:'Design'},
  {id:'image',label:'Image'},
  {id:'security',label:'Security'},
  {id:'devops',label:'DevOps'},
  {id:'data',label:'Data'},
  {id:'writing',label:'Writing'},
  {id:'ai',label:'AI / LLM'},
];

let activeFilter='all';

function renderFilters(){
  document.getElementById('filters').innerHTML=CATEGORIES.map(c=>{
    const count=c.id==='all'?TOOLS.length:TOOLS.filter(t=>t.cat===c.id).length;
    return`<button class="filter-btn ${c.id===activeFilter?'active':''}" onclick="setFilter('${c.id}')">${c.label} (${count})</button>`;
  }).join('');
}

function setFilter(id){
  activeFilter=id;
  renderFilters();
  filterTools();
}

function renderCard(t){
  return`<a class="tool-card${t.featured?' featured':''}" href="${t.url}" target="_blank">
    <div class="icon">${t.icon}</div>
    <h3>${t.name}</h3>
    <p>${t.desc}</p>
    <span class="tag">${t.cat}</span>
  </a>`;
}

function filterTools(){
  const query=document.getElementById('search').value.toLowerCase();
  const filtered=TOOLS.filter(t=>{
    const matchCat=activeFilter==='all'||t.cat===activeFilter;
    const matchSearch=!query||t.name.toLowerCase().includes(query)||t.desc.toLowerCase().includes(query);
    return matchCat&&matchSearch;
  });

  const picks=filtered.filter(t=>t.featured);
  const rest=filtered.filter(t=>!t.featured);
  const picksSection=document.getElementById('picksSection');
  const picksGrid=document.getElementById('picksGrid');

  if(picks.length>0&&!query){
    picksSection.style.display='';
    picksGrid.innerHTML=picks.map(renderCard).join('');
  }else{
    picksSection.style.display='none';
  }

  const all=query?filtered:rest;
  document.getElementById('toolGrid').innerHTML=all.map(renderCard).join('')||'<div style="text-align:center;color:#555;grid-column:1/-1;padding:40px">No tools match your search.</div>';
}

renderFilters();
filterTools();

document.addEventListener('keydown',e=>{
  if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){
    e.preventDefault();
    document.getElementById('search').focus();
  }
  if(e.key==='Escape'){
    const s=document.getElementById('search');
    if(document.activeElement===s){s.blur();s.value='';filterTools();}
  }
});
</script>
<script type="speculationrules">
{
  "prerender": [{
    "where": { "selector_matches": ".tool-card" },
    "eagerness": "moderate"
  }]
}
</script>
</body>
</html>