Front End Development Case Studies & Practical Application 5 — Questions and Answers
Question 1: A multilingual SaaS app must support Arabic (RTL) and English (LTR). A developer hard-codes margin-left: 24px for a sidebar. What is the correct fix for RTL support?
- Detect the language in JavaScript and toggle a CSS class
- Use CSS logical properties (margin-inline-start: 24px) which automatically flip in RTL contexts (Correct answer)
- Add a separate Arabic stylesheet
- Use position: absolute to place the sidebar
Correct answer: Use CSS logical properties (margin-inline-start: 24px) which automatically flip in RTL contexts
CSS logical properties like margin-inline-start respect the document's writing direction, eliminating the need for per-language overrides.
Question 2: A checkout page loses user form data when the user accidentally navigates back. Which browser API provides the best UX solution?
- localStorage with a manual save button
- The beforeunload event warning combined with sessionStorage auto-save on input events (Correct answer)
- IndexedDB for persistent storage
- Disabling the browser's back button with history.pushState
Correct answer: The beforeunload event warning combined with sessionStorage auto-save on input events
Auto-saving form state to sessionStorage and warning users via beforeunload prevents data loss while respecting browser navigation conventions.
Question 3: A team deploys a new feature but needs to roll it back immediately after finding a critical bug in production. Their CI/CD uses immutable Docker image tags. The fastest safe rollback is:
- Revert the git commit and trigger a full rebuild
- Re-deploy the previously tagged Docker image without rebuilding (Correct answer)
- Hotfix the bug directly on the running container
- Delete the broken deployment and redeploy from the main branch
Correct answer: Re-deploy the previously tagged Docker image without rebuilding
Immutable image tags mean the previous working image is still available; re-deploying it restores the known-good state in seconds without a rebuild.
Question 4: An e-commerce site's product pages are dynamically generated but mostly identical across users. To maximize performance and CDN cache hit rate, the best rendering strategy is:
- Full Client-Side Rendering with an API call per page
- Server-Side Rendering with no caching
- Static Site Generation with on-demand revalidation (ISR) triggered by inventory updates (Correct answer)
- Pre-rendering only the top 10 products
Correct answer: Static Site Generation with on-demand revalidation (ISR) triggered by inventory updates
ISR generates static pages on demand and revalidates them when product data changes, combining CDN cacheability with up-to-date content.
Question 5: A developer adds a third-party chat widget script to a high-traffic landing page. PageSpeed Insights shows it blocks rendering. The correct fix is:
- Move the script tag to the <head>
- Load the script with the defer or async attribute, or load it lazily after the page is interactive (Correct answer)
- Host the script on the same domain
- Minify the third-party script
Correct answer: Load the script with the defer or async attribute, or load it lazily after the page is interactive
defer loads the script after HTML parsing; async or lazy-loading after interaction prevents third-party scripts from blocking the critical rendering path.
Question 6: A component library's Button has 12 variants. During testing, the team discovers that adding a new variant breaks 3 existing snapshot tests. The best long-term testing strategy for UI components is:
- Delete snapshot tests and rely only on unit tests
- Use visual regression testing (e.g., Storybook + Chromatic) alongside interaction tests, and update snapshots intentionally (Correct answer)
- Lock the number of variants at 12 permanently
- Generate snapshots only in production builds
Correct answer: Use visual regression testing (e.g., Storybook + Chromatic) alongside interaction tests, and update snapshots intentionally
Visual regression tools capture intentional visual changes as approved baselines, preventing unintended regressions while allowing the component to evolve.
Question 7: A startup must choose between a custom design system from scratch or adopting an established component library (e.g., MUI, Radix). Their team is 2 developers and the deadline is 6 weeks. The correct decision is:
- Build a custom design system for full brand control
- Adopt an established library with accessible primitives and customize the theme layer (Correct answer)
- Use no component library and write all CSS manually
- Outsource the design system to a third party
Correct answer: Adopt an established library with accessible primitives and customize the theme layer
Established libraries provide accessible, tested components out of the box; theming handles branding without the time cost of building from scratch.
Front End Development Case Studies & Practical Application 5
A multilingual SaaS app must support Arabic (RTL) and English (LTR).
A developer hard-codes margin-left: 24px for a sidebar.
What is the correct fix for RTL support?