NAYAN’S ENGINEERING JOURNAL
Notes worth keeping.
Page 2 of 9.
My collection of practical guides on React, Angular, JavaScript, frontend design, performance, technical SEO and reliable delivery. Explore a topic, follow an example, and check the details.
103 GUIDES IN THE JOURNAL / 12 ON THIS PAGE
Engineering articles
Build and Read Query Strings with URLSearchParams
Handle repeated parameters, encoding and filter state with an explicit query-string contract.
Build Breadcrumbs That Help Visitors Before Adding JSON-LD
Keep visible hierarchy, linked destinations and BreadcrumbList data in agreement across a growing site.
Build Controlled React Forms Without Fighting the Browser
Keep field state, validation timing and native form behavior aligned for predictable data entry.
Build Reusable Components Around Behavior, Not Just Markup
Define ownership, events, accessibility and variation before turning repeated UI into an abstraction.
Build Social Sharing Cards That Match the Page Being Shared
Keep Open Graph titles, image assets and canonical sharing URLs accurate across portfolio pages and articles.
Build Useful Tool Landing Pages Without Turning Them into Keyword Padding
Explain input, output, privacy, limitations and next steps so a tool page earns its own distinct place in a collection.
Button or Link? Choose HTML from the Interaction’s Purpose
Use links for destinations and buttons for actions so browser and keyboard behavior remain predictable.
Cancel Stale Fetch Requests with AbortController
Keep search results and navigation reliable by cancelling obsolete requests and ignoring outdated responses.
Canonical URL Mistakes That Hide Behind a Working Page
Find mismatched hosts, copied canonical tags and pagination mistakes before they become conflicting search signals.
Check Color Contrast in the Actual Interface, Not Just the Palette
Evaluate text and background pairs, account for real component states, and keep color from becoming the only signal.
Choose React List Keys That Preserve the Right Identity
Use stable record identity so filtering and reordering do not move input state to the wrong row.
Container Queries: Let Reusable Cards Adapt to Their Actual Space
Build components that respond to a sidebar or content column instead of assuming the viewport tells the whole story.
Put a useful idea to work.
Try the browser utilities in my developer toolkit.