FIND YOUR WAY
Every page.
One useful directory.
Browse my portfolio, explore the developer toolkit, or find a guide from my engineering journal.
My portfolio
- Home
Nayan Kumar’s personal engineering portfolio.
- About Nayan Kumar
Professional experience, education, skills and résumé.
- Selected work
Professional project contributions and personal work.
- My expertise
Frontend engineering, architecture and engineering leadership.
- Developer toolkit
36 free browser utilities.
- Engineering journal
103 technical articles and practical guides.
- Contact
Engineering opportunities and collaboration.
- Site directory
Browse every page, tool and article.
Developer toolkit (36)
- Image Compressor
Compress JPG, PNG and WebP images in your browser.
- Image Resizer
Resize images to custom dimensions without uploading.
- Image Converter
Convert images to JPG, PNG or WebP.
- JSON Formatter
Format, validate and minify JSON.
- Base64 Encoder / Decoder
Encode or decode Unicode text safely.
- Word Counter
Count words, characters, sentences and reading time.
- QR Code Generator
Generate downloadable QR codes from text or URLs.
- Password Generator
Generate strong random passwords using browser cryptography.
- Color Converter
Convert HEX colors into RGB and HSL values.
- SEO Meta Preview
Preview your Google-style title and description snippet.
- URL Encoder / Decoder
Encode URL components or decode percent-encoded text.
- Query String Parser
Inspect URL query parameters, including repeated keys.
- UUID Generator
Generate random version 4 UUIDs with browser cryptography.
- Timestamp Converter
Convert Unix seconds, milliseconds and ISO dates to UTC.
- CSV to JSON
Turn CSV rows into JSON, including quoted and multiline fields.
- JSON to CSV
Convert an array of JSON records into downloadable CSV.
- HTML Entity Encoder
Encode HTML special characters or decode character references.
- Regular Expression Tester
Test JavaScript patterns in a worker with an execution timeout.
- Text Difference Checker
Compare two texts and inspect line additions and removals.
- Text Case Converter
Convert text to upper, lower, title, sentence or camel case.
- Text Cleaner
Trim lines, normalize spaces and remove empty lines.
- Duplicate Line Remover
Remove repeated lines while keeping their original order.
- Line Sorter
Sort lines alphabetically, in reverse or with natural numbers.
- Reading Time Calculator
Estimate reading time using an adjustable words-per-minute rate.
- URL Slug Generator
Make a readable lowercase URL slug from a title.
- Keyword Occurrence Counter
Count exact word and phrase occurrences in a text draft.
- Meta Tag Generator
Create escaped title, description, canonical and social HTML tags.
- Robots.txt Generator
Draft crawler directives and a sitemap URL for your website.
- XML Sitemap Generator
Build sitemap XML from a list of public canonical URLs.
- UTM Campaign URL Builder
Add campaign source, medium and campaign parameters to a URL.
- Color Contrast Checker
Measure an opaque sRGB color pair against WCAG contrast ratios.
- CSS Gradient Generator
Preview a two-color linear gradient and copy its CSS.
- Box Shadow Generator
Adjust offsets, blur and spread, then copy the CSS shadow.
- Border Radius Generator
Design individual rounded corners with a live preview.
- Aspect Ratio Calculator
Simplify dimensions to a ratio and calculate a proportional size.
- SHA-256 Hash Generator
Calculate a SHA-256 digest of UTF-8 text on your device.
Engineering journal (103)
- A Frontend Release Checklist That Checks the Actual User Journey
DevOps
- A Technical SEO Page Audit You Can Repeat Before Every Release
SEO
- Accessible Dialog Focus: Open, Close and Return Predictably
Accessibility
- Accessible Form Labels: Clear Names for Every Field
Accessibility
- Accessible SVG Icons: Decorative Shapes and Meaningful Controls
Accessibility
- Add a Skip Link That Actually Reaches the Main Content
Accessibility
- Add Parallax Depth Without Taking Over the Reader’s Scroll
Animation
- Angular Signals: Keep Source State and Derived Values Separate
Angular
- Article Structured Data Should Describe What Readers Can Verify
SEO
- Build a Simple FAQ Accordion with Details and Summary
Accessibility
- Build Accessible React Components from Native HTML
React
- Build an Accessible Heading Structure Before Styling Your Page
Accessibility
- Build and Read Query Strings with URLSearchParams
JavaScript
- Build Breadcrumbs That Help Visitors Before Adding JSON-LD
SEO
- Build Controlled React Forms Without Fighting the Browser
React
- Build Reusable Components Around Behavior, Not Just Markup
Frontend Engineering
- Build Social Sharing Cards That Match the Page Being Shared
SEO
- Build Useful Tool Landing Pages Without Turning Them into Keyword Padding
SEO
- Button or Link? Choose HTML from the Interaction’s Purpose
Accessibility
- Cancel Stale Fetch Requests with AbortController
JavaScript
- Canonical URL Mistakes That Hide Behind a Working Page
SEO
- Check Color Contrast in the Actual Interface, Not Just the Palette
Accessibility
- Choose React List Keys That Preserve the Right Identity
React
- Container Queries: Let Reusable Cards Adapt to Their Actual Space
CSS
- Create Internal Links Around the Reader’s Next Useful Question
SEO
- Create Print Styles for Articles and Portfolio Pages
CSS
- CSS Logical Properties: Write Layout Rules Around Reading Direction
CSS
- Debounce vs Throttle for Real Interface Events
JavaScript
- Debug Horizontal CSS Overflow Without Hiding the Evidence
CSS
- Deploy a Next.js Static Export Without Assuming a Node Server Exists
Next.js
- Derive React Display Data Instead of Synchronizing Copies
React
- Design a Frontend CI/CD Pipeline Around Evidence and One Artifact
DevOps
- Design a Mobile Navigation Menu That Stays Easy to Use
Accessibility
- Design Angular Component Inputs as Clear Public Contracts
Angular
- Design API Loading, Empty and Error States Separately
Frontend Engineering
- Design CloudFront Cache Policies Around Response Variants
AWS
- Design Reduced-Motion Modes That Still Feel Complete
Animation
- Design Subtle CSS Background Patterns Without Competing with Content
CSS
- Design TypeScript Props Around Valid Component Usage
TypeScript
- Encode Unicode Text as Base64 Without Corrupting Characters
JavaScript
- Export Canvas Images with the Right Format and Dimensions
Browser APIs
- Find the LCP Bottleneck Before Compressing the Hero Again
Performance
- Flexbox Wrapping for Toolbars, Tags and Button Groups
CSS
- Fluid Typography with Clamp: Scale Headings Without Losing Control
CSS
- Focus-Visible Styling That Fits Your Design and Remains Obvious
Accessibility
- Format Dates Without Accidentally Changing the Day
JavaScript
- Generate Browser Random Values Without Modulo Bias
JavaScript
- Generate Next.js Route Metadata from the Same Record as the Page
Next.js
- Improve Interaction Responsiveness by Finding the Work Around a Click
Performance
- Invalidate CDN Content Deliberately Instead of Purging Every Release
DevOps
- JSON Parsing Is Only the First Step of Validation
JavaScript
- Keep Anchor Headings Visible Beneath a Sticky Header
CSS
- Keep Large Identifiers Safe in JavaScript
JavaScript
- Keep Multiple Frontend Instances on a Coherent Release
DevOps
- Keep Useful Content Crawlable in a JavaScript-Enhanced Website
SEO
- Keyboard-Friendly Navigation for a Personal Portfolio
Accessibility
- Know Which Environment Variables Become Part of Your Frontend Build
DevOps
- Lazy-Load Below-the-Fold Images Without Delaying the Main Content
Performance
- Maintain an XML Sitemap as a Map of Real Canonical Pages
SEO
- Make a Large Article Archive Easy to Browse and Crawl
SEO
- Manage File Preview URLs Without Memory Leaks
Browser APIs
- Model UI States with TypeScript Discriminated Unions
TypeScript
- Optional Chaining and Nullish Defaults Without Hidden Bugs
JavaScript
- Organize Angular Reactive Forms Around the Data Model
Angular
- Place Next.js Client Boundaries Around Interaction, Not Entire Pages
Next.js
- Prepare a Static Website Rollback Before the Release Needs One
DevOps
- Prevent Layout Shifts by Reserving the Space Your Content Will Need
Performance
- Profile React Rendering Before Adding Memoization
React
- Progressive Enhancement: Keep Content Useful Before JavaScript Runs
Accessibility
- Promise Error Handling That Keeps Failures Visible
JavaScript
- Publish a Static Website with Separate GitHub Actions Build and Deploy Jobs
DevOps
- React State vs Ref: Choose by What the Screen Must Show
React
- Reserve Image Space to Keep Page Layouts Stable
Images
- Responsive CSS Grid Cards Without a Breakpoint for Every Screen
CSS
- Responsive Images: Choose Between Srcset, Sizes and Picture
Images
- Robots.txt and Noindex Solve Different Problems
SEO
- Scroll Reveals with Intersection Observer and a Readable Baseline
Animation
- Semantic HTML Landmarks: Give Every Page a Clear Structure
Accessibility
- Sequential or Parallel Async Work: Choose by Dependency
JavaScript
- Set React Context Boundaries Around Real Shared State
React
- The JavaScript Event Loop: Predicting What Runs Next
JavaScript
- Theme a Website with Semantic CSS Custom Properties
CSS
- Transform or Layout Animation? Choose the Property That Matches the Effect
Animation
- Update JavaScript Arrays Without Mutating Shared State
JavaScript
- Updated CSS Missing in Production? Trace the Bytes Before Clearing Caches
DevOps
- Use Content-Hashed Assets Without Caching HTML into a Stale Release
Performance
- Use Keyword Counts as an Editing Signal, Not a Content Strategy
SEO
- Use Object-Fit to Crop Images Without Stretching Them
Images
- Use Prefers-Color-Scheme Without Losing Explicit Theme Choices
CSS
- Use Regular Expressions for Focused Input Validation
JavaScript
- Use S3 as a Static Asset Origin with Explicit Access and Cache Decisions
AWS
- Use unknown at Boundaries Instead of Spreading any
TypeScript
- Verify Brotli and Gzip Delivery Instead of Assuming Files Are Compressed
Performance
- When to Use Map and Set in Frontend JavaScript
JavaScript
- Write Form Validation Errors That Help People Recover
Accessibility
- Write Image Alt Text Around Purpose, Not Keywords
Accessibility
- Write Meta Descriptions Around the Reader’s Next Decision
SEO
- Write React Effects with Symmetrical Cleanup
React
- Write Unique Page Titles That Explain the Page Before the Brand
SEO
- How to Compress Images Without Losing Visible Quality
Image Optimization
- Next.js SEO Checklist for Fast, Discoverable Websites
Next.js
- WebP vs JPEG vs PNG: Which Image Format Should You Use?
Web Performance
- Core Web Vitals: A Practical Guide for Small Business Websites
SEO