Front End Development Case Studies & Practical Application 5

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?

Accepted Answer

Use CSS logical properties (margin-inline-start: 24px) which automatically flip in RTL contexts

Answer

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?

Accepted Answer

The beforeunload event warning combined with sessionStorage auto-save on input events

Answer

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:

Accepted Answer

Re-deploy the previously tagged Docker image without rebuilding

Answer

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:

Accepted Answer

Static Site Generation with on-demand revalidation (ISR) triggered by inventory updates

Answer

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:

Accepted Answer

Load the script with the defer or async attribute, or load it lazily after the page is interactive

Answer

defer loads the script after HTML parsing; async or lazy-loading after interaction prevents third-party scripts from blocking the critical rendering path.

Front End Development Practice Test

Front End Development Practice Test

Front End Development Case Studies & Practical Application 5