NAYAN’S ENGINEERING JOURNAL
Notes worth keeping.
Page 7 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
Reserve Image Space to Keep Page Layouts Stable
Give images a predictable footprint before they load so headings, buttons and paragraphs stay in place.
Responsive CSS Grid Cards Without a Breakpoint for Every Screen
Build a flexible project grid that adapts to its container and survives long titles, narrow screens and missing images.
Responsive Images: Choose Between Srcset, Sizes and Picture
Serve suitable image candidates and use art direction only when the composition needs to change.
Robots.txt and Noindex Solve Different Problems
Choose between crawling controls and indexing directives without accidentally preventing a crawler from reading your instruction.
Scroll Reveals with Intersection Observer and a Readable Baseline
Trigger section entrances near the viewport while keeping the document usable before scripts run.
Semantic HTML Landmarks: Give Every Page a Clear Structure
Use native page regions to make a portfolio easier to navigate with assistive technology and easier to maintain.
Sequential or Parallel Async Work: Choose by Dependency
Use await, Promise.all and bounded concurrency according to data dependencies and failure requirements.
Set React Context Boundaries Around Real Shared State
Use context for shared dependencies without turning every local input into an application-wide update.
The JavaScript Event Loop: Predicting What Runs Next
Trace synchronous code, promise callbacks and timers so browser interactions stay understandable and responsive.
Theme a Website with Semantic CSS Custom Properties
Create a small token system that lets branded pages and light product pages share components without a tangle of overrides.
Transform or Layout Animation? Choose the Property That Matches the Effect
Animate movement intentionally, understand what it changes, and verify performance instead of assuming every transition is cheap.
Update JavaScript Arrays Without Mutating Shared State
Use deliberate copies for additions, removals, sorting and nested edits in frontend state.
Put a useful idea to work.
Try the browser utilities in my developer toolkit.