❔What is the difference between Responsive and Adaptive design?
✅ Answer:
Responsive Design uses fluid grids and CSS media queries to flow content smoothly across any screen size. It’s a "one-size-fits-all" approach that scales proportionally.
Adaptive Design uses static layouts that "snap" into place at specific breakpoints (e.g., 320px, 768px). The server detects the device and serves the specific layout built for it.
Strategy: I prefer Responsive for most projects because it’s easier to maintain and better for SEO. I only use Adaptive for complex legacy sites where a total rebuild isn't possible but specific mobile optimization is required.
❔ When should you use REST vs. GraphQL for an API?
✅ Answer:
REST is best for simple, resource-based applications where data structures are predictable. It uses standard HTTP methods and is easy to cache at the browser/CDN level.
GraphQL is better for complex systems where a single page needs data from multiple sources. It prevents "Over-fetching" because the client requests exactly the fields it needs.
Strategy: I choose REST for public APIs or stable microservices. I opt for GraphQL for frontend-heavy apps (like Social Media feeds) to reduce network round-trips and improve performance on slow mobile data.
❔Why is Semantic HTML important for modern web apps?
✅ Answer:
Using tags like <main>, <article>, and <nav> instead of generic <div> tags provides immediate meaning to the browser and search engines.
Impact: It’s critical for Accessibility (A11y), as screen readers use these tags to help visually impaired users navigate. It also boosts SEO because crawlers can easily identify the most important content on your page.
Long-term: It results in cleaner, more maintainable code that is easier for teams to read and debug.
❔How do you handle 'State Management' in a large React/Vue application?
✅ Answer:
I follow the "Lift state only as high as needed" rule. I keep UI-specific state (like a toggle) local to the component using useState.
For Global State (user auth, themes), I use the Context API or a library like Redux/Zustand. This prevents "Prop Drilling," where data is passed through components that don't need it.
Strategy: My goal is to keep the global store as "thin" as possible. Excessive global state causes unnecessary re-renders and makes the app harder to test and scale.
❔What is a Progressive Web App (PWA) and why use one?
✅ Answer:
A PWA is a website that uses modern web capabilities (Service Workers, Manifest files) to provide an app-like experience directly in the browser.
Core Benefits: It allows for Offline Functionality, push notifications, and "Add to Home Screen" without an App Store. It’s fast, secure (HTTPS only), and works on any device.
Business Impact: PWAs drastically increase user retention and conversion rates, especially in areas with poor internet connectivity, by providing a reliable experience regardless of the network.