Articles

Tool guides, tech explanations, and dev tips—things I found useful and thought worth sharing.

• 1フレーム 何ms 60fps 120fps — Guide & Tips

  Developer guide: 1フレーム 何ms 60fps 120fps. Free online tool, FAQ, and best practices.

  May 31, 2026 FPS Performance Game Dev Animation

• Aspect ratio — Guide & Tips

  Practical guide for aspect ratio. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Aspect Ratio Development Development

• Base64 — Guide & Tips

  Practical guide for base64. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Base64 Encode Data URI

• Box shadow — Guide & Tips

  Practical guide for box shadow. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS box-shadow UI

• Case converter — Guide & Tips

  Practical guide for case converter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development camelCase snake_case

• Bug report — Guide & Tips

  Practical guide for bug report. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Bug Report QA Development

• Case converter — Guide & Tips

  Practical guide for case converter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development Development

• Chatgpt トークン数 計算方法 節約 — Guide & Tips

  Developer guide: chatgpt トークン数 計算方法 節約. Free online tool, FAQ, and best practices.

  May 31, 2026 AI ChatGPT Development

• Char count — Guide & Tips

  Practical guide for char count. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development SNS

• Dns check — Guide & Tips

  Practical guide for dns check. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 DNS cname lookup dns check Development

• Color contrast — Guide & Tips

  Practical guide for color contrast. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development WCAG Contrast

• Color converter — Guide & Tips

  Practical guide for color converter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development HEX RGB HSL

• Color name search — Guide & Tips

  Practical guide for color name search. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Color Name CSS

• Gradient — Guide & Tips

  Practical guide for gradient. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Gradient Development

• Box shadow — Guide & Tips

  Practical guide for box shadow. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Development UI Development

• Css grid — Guide & Tips

  Practical guide for css grid. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Development Grid Flexbox

• Minify — Guide & Tips

  Practical guide for minify. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Minify CSS JavaScript Performance

• Minify — Guide & Tips

  Practical guide for minify. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Performance Development Development

• Minify — Guide & Tips

  Practical guide for minify. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Minify Development

• Css grid — Guide & Tips

  Practical guide for css grid. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Grid Development

• Glassmorphism — Guide & Tips

  Practical guide for glassmorphism. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Development Development UI

• Px rem — Guide & Tips

  Practical guide for px rem. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Development Development Development

• Dedupe — Guide & Tips

  Practical guide for dedupe. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 JavaScript Dedupe Development

• Diff — Guide & Tips

  Practical guide for diff. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Diff Development Git

• Dns 反映 確認方法 コマンド — Guide & Tips

  Developer guide: dns 反映 確認方法 コマンド. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development DNS Development

• Dummy image — Guide & Tips

  Practical guide for dummy image. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Placeholder Development Development

• Env formatter — Guide & Tips

  Practical guide for env formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 .env Development

• Env ファイル エラー 原因 チェックリスト — Guide & Tips

  Developer guide: env ファイル エラー 原因 チェックリスト. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• Favicon generator — Guide & Tips

  Practical guide for favicon generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Favicon PWA Development

• Escape sequence — Guide & Tips

  Practical guide for escape sequence. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Escape Development Development

• Favicon generator — Guide & Tips

  Practical guide for favicon generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development Development Development

• Fluid typography — Guide & Tips

  Practical guide for fluid typography. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Typography clamp

• Fluid typography — Guide & Tips

  Practical guide for fluid typography. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Development Development UI

• Fps calculator — Guide & Tips

  Practical guide for fps calculator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 FPS fps calculator 30fps to ms Game Dev

• Glassmorphism — Guide & Tips

  Practical guide for glassmorphism. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS Glassmorphism UI

• Golden ratio — Guide & Tips

  Practical guide for golden ratio. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development Typography

• Hash — Guide & Tips

  Practical guide for hash. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Hash SHA256 Development

• Htaccess generator — Guide & Tips

  Practical guide for htaccess generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 htaccess Apache Development

• Htaccess generator — Guide & Tips

  Practical guide for htaccess generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 SEO Development Apache Development

• Html escape — Guide & Tips

  Practical guide for html escape. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 HTML XSS Development

• Html エスケープ サニタイズ 理由 — Guide & Tips

  Developer guide: html エスケープ サニタイズ 理由. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development XSS

• Image color picker — Guide & Tips

  Practical guide for image color picker. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Color Picker Development Development

• Image compress — Guide & Tips

  Practical guide for image compress. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 WebP Development Core Web Vitals

• Javascript 配列 重複削除 最速 — Guide & Tips

  Developer guide: javascript 配列 重複削除 最速. Free online tool, FAQ, and best practices.

  May 31, 2026 JavaScript Development Development

• Image resize — Guide & Tips

  Practical guide for image resize. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development SNS Development

• Minify — Guide & Tips

  Practical guide for minify. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 JavaScript Minify Development

• Json csv — Guide & Tips

  Practical guide for json csv. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 JSON CSV Excel

• Json csv — Guide & Tips

  Practical guide for json csv. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development JSON CSV Development

• Json formatter — Guide & Tips

  Practical guide for json formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 JSON Validate Formatter

• Jwt decode — Guide & Tips

  Practical guide for jwt decode. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 JWT jwt decode jwt token decode Development

• Line height — Guide & Tips

  Practical guide for line height. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Typography line-height CSS

• Lorem ipsum — Guide & Tips

  Practical guide for lorem ipsum. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Lorem Ipsum Development Development

• Lua formatter — Guide & Tips

  Practical guide for lua formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Lua Formatter Development

• Lua formatter — Guide & Tips

  Practical guide for lua formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Lua Development Game Dev

• Markdown table — Guide & Tips

  Practical guide for markdown table. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Markdown markdown table table generator Development

• Markdown table — Guide & Tips

  Practical guide for markdown table. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Markdown GitHub Notion

• Markdown — Guide & Tips

  Practical guide for markdown. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Markdown Development

• Markdown table — Guide & Tips

  Practical guide for markdown table. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Markdown CSV Development

• Hash — Guide & Tips

  Practical guide for hash. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 MD5 Hash Development

• Md5 hash — Guide & Tips

  Practical guide for md5 hash. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development MD5 Development

• Ogp preview — Guide & Tips

  Practical guide for ogp preview. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 OGP SNS SEO

• Ogp 反映されない キャッシュクリア 対処法 — Guide & Tips

  Developer guide: ogp 反映されない キャッシュクリア 対処法. Free online tool, FAQ, and best practices.

  May 31, 2026 SNS SEO Development OGP

• Password generator — Guide & Tips

  Practical guide for password generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Password Development

• Px rem — Guide & Tips

  Practical guide for px rem. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS px rem

• Qr code — Guide & Tips

  Practical guide for qr code. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 QR Code Development

• Regex — Guide & Tips

  Practical guide for regex. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Regex Development

• Rgba hex — Guide & Tips

  Practical guide for rgba hex. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 CSS rgba to hex hex to rgba Development

• Rgba 各文字の意味 透明度 — Guide & Tips

  Developer guide: rgba 各文字の意味 透明度. Free online tool, FAQ, and best practices.

  May 31, 2026 CSS Development Development

• Robots txt generator — Guide & Tips

  Practical guide for robots txt generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 SEO Development robots.txt Development

• Robots txt generator — Guide & Tips

  Practical guide for robots txt generator. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 robots.txt SEO Development

• Silver ratio — Guide & Tips

  Practical guide for silver ratio. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development

• Sql formatter — Guide & Tips

  Practical guide for sql formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 SQL Formatter DB

• Sql formatter — Guide & Tips

  Practical guide for sql formatter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 SQL Development Development

• Ssl check — Guide & Tips

  Practical guide for ssl check. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 SSL HTTPS Development

• Ssl 証明書 有効期限 確認方法 — Guide & Tips

  Developer guide: ssl 証明書 有効期限 確認方法. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development SSL Development

• Tailwind color — Guide & Tips

  Practical guide for tailwind color. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Tailwind Color CSS

• Token counter — Guide & Tips

  Practical guide for token counter. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 ChatGPT Token API

• Ua display — Guide & Tips

  Practical guide for ua display. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 User-Agent Development Development

• Tailwindcss カスタムカラー 設定方法 — Guide & Tips

  Developer guide: tailwindcss カスタムカラー 設定方法. Free online tool, FAQ, and best practices.

  May 31, 2026 TailwindCSS CSS Development Development

• Unity screen world — Guide & Tips

  Practical guide for unity screen world. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Unity Game Dev Development

• Unix timestamp — Guide & Tips

  Practical guide for unix timestamp. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development Development Development

• Unix timestamp — Guide & Tips

  Practical guide for unix timestamp. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Unix Timestamp Development

• Url encode — Guide & Tips

  Practical guide for url encode. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 URL Encode HTTP

• User agent 判定 方法 最新 — Guide & Tips

  Developer guide: user agent 判定 方法 最新. Free online tool, FAQ, and best practices.

  May 31, 2026 JavaScript Development Development

• Uuid — Guide & Tips

  Practical guide for uuid. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 UUID v4 Development

• Uuid — Guide & Tips

  Practical guide for uuid. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 UUID Development Development Development

• Webアクセシビリティ コントラスト比 基準 — Guide & Tips

  Developer guide: webアクセシビリティ コントラスト比 基準. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development WCAG UI

• Yaml json — Guide & Tips

  Practical guide for yaml json. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 YAML JSON DevOps

• アスペクト比 計算 解像度 一覧 — Guide & Tips

  Developer guide: アスペクト比 計算 解像度 一覧. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development Development

• エスケープシーケンス 一覧 プログラミング — Guide & Tips

  Developer guide: エスケープシーケンス 一覧 プログラミング. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development

• カラーコード 名前 検索 デザイン — Guide & Tips

  Developer guide: カラーコード 名前 検索 デザイン. Free online tool, FAQ, and best practices.

  May 31, 2026 Development CSS UI

• ダミー画像 プレースホルダー おすすめ — Guide & Tips

  Developer guide: ダミー画像 プレースホルダー おすすめ. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• ハッシュ化 暗号化 違い sha256 — Guide & Tips

  Developer guide: ハッシュ化 暗号化 違い sha256. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• 強力なパスワード 作り方 条件 — Guide & Tips

  Developer guide: 強力なパスワード 作り方 条件. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• 文字数カウント サロゲートペア 注意点 — Guide & Tips

  Developer guide: 文字数カウント サロゲートペア 注意点. Free online tool, FAQ, and best practices.

  May 31, 2026 Development JavaScript Development

• 画像リサイズ アスペクト比 維持 コツ — Guide & Tips

  Developer guide: 画像リサイズ アスペクト比 維持 コツ. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• 良いバグ報告 テンプレート コツ — Guide & Tips

  Developer guide: 良いバグ報告 テンプレート コツ. Free online tool, FAQ, and best practices.

  May 31, 2026 Development Development Development

• Line height — Guide & Tips

  Practical guide for line height. Step-by-step usage, common mistakes, and a free browser-based tool.

  May 31, 2026 Development CSS UI Development

• Complete OpenClaw Setup Guide | From Zero to Hero

  A beginner-friendly guide to installing OpenClaw on Windows, Mac, and Linux. Learn how to connect AI agents to Discord, Telegram, and WhatsApp, customize your workspace, and set up security.

  March 6, 2026 OpenClaw Development Development Development

• Why Base64 Decoding Garbles Japanese Text & How to Fix It

  Explaining why decoding Japanese Base64 with atob() causes garbled text, and the correct solution using TextDecoder.

  March 5, 2026 Base64 Development JavaScript Development

• Causes of CORS Errors in Local Development and 3 Workarounds

  Learn why CORS errors occur between localhost environments and how to bypass them using backend settings, proxies, or browser extensions.

  March 5, 2026 CORS Development Development Development

• Causes and Solutions for JSON "Unexpected token" Errors

  Understanding the SyntaxError "Unexpected token" in JSON.parse(). Explains JSON syntax violations like trailing commas, single quotes, and comments.

  March 5, 2026 JSON Development Development

• How to Check JWT Contents | How Tampering is Detected

  JSON Web Tokens are base64-encoded, meaning contents are fully visible. Learn how to decode them and see how signatures prevent tampering.

  March 5, 2026 JWT Development Development

• Why WebP Conversion Loses Quality & Optimal Settings

  Understand why PNG and JPEG conversions to WebP downgrade image quality, and learn how to properly distinguish between Lossy and Lossless compressions.

  March 5, 2026 Development WebP Development Development

• Blog SEO and JSON-LD Structured Data

  Search engine optimization and JSON-LD structured data. Article schema, meta tags, and rich results.

  March 1, 2025 SEO JSON-LD Development

• API Debug Tools | When to Use Which

  JSON formatter, JWT decoder, HTTP client—when to use each tool for API debugging.

  February 28, 2025 API Development Development Development

• What is Base64? Encoding, Use Cases, and Decoding

  How Base64 encoding works, common use cases, and how to decode. Data URI, Basic auth, API usage. Base64 is not encryption.

  February 28, 2025 Base64 Development Development Development

• CORS Error Fix | Access-Control-Allow-Origin

  Why CORS errors happen when calling APIs from the frontend. How to fix with server-side headers. Dev workarounds.

  February 28, 2025 CORS API Development Development

• .env File Best Practices

  How to manage .env files safely. Never commit secrets. Use .env.example. Environment-specific config.

  February 28, 2025 .env Development Development Development

• Git Commands | Quick Reference for Beginners

  Commonly used Git commands. init, add, commit, push, pull, branch, checkout, merge, stash. Copy-paste ready.

  February 28, 2025 Git Development Development Development

• HTTP Status Codes | 200, 404, 500 Explained

  HTTP status code reference. 200 success, 201 created, 400 bad request, 401 unauthorized, 403 forbidden, 404 not found, 500 server error.

  February 28, 2025 HTTP API Development Web

• How to Use the JSON Formatter Tool | Format & Minify Online Safely

  A guide to using the free online JSON formatter. Indentation, syntax check, copy feature. No data sent to servers—safe to use.

  February 28, 2025 JSON Development API Development

• How to Debug JWT | Decode and Inspect Tokens

  Decode JWT tokens to inspect payload, expiration, and signature. Useful for API auth debugging.

  February 28, 2025 JWT Development Development API

• Markdown Cheat Sheet | Quick Reference

  Common Markdown syntax for headings, lists, links, code, and more.

  February 28, 2025 Markdown Development Development Development

• Tips for Developer Portfolio Sites

  Practical advice for building an effective developer portfolio. Jobs, freelancing, side projects.

  February 28, 2025 Development Development Development

• URL Encoding | How to Use Percent Encoding

  When and how to use URL encoding. Query strings, special characters, and API parameters.

  February 28, 2025 URL Development Development Web

• Image Compression and WebP Conversion

  How to compress images and convert to WebP. Reduce file size for faster loading.

  February 28, 2025 Development WebP PageSpeed Development

• Common Regex Patterns | Quick Reference

  Frequently used regex patterns for validation, search, and text processing.

  February 28, 2025 Development Regex Development Development

• Building a Blog with Astro Content Collections

  How to set up a blog using Astro Content Collections. Type-safe content management with Zod schema.

  February 15, 2025 Astro Development Development

Web Dev Learning Roadmap ← Back to Home