Progressive enhancement in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is progressive enhancement in web development?

Progressive enhancement means building a basic, working website first, then adding extra features that improve the experience for browsers or devices that support them.

intermediate

How does Svelte support progressive enhancement?

Svelte compiles components to simple JavaScript that runs in the browser, allowing the page to work without JavaScript first, then enhancing with interactivity when JS loads.

beginner

Why is progressive enhancement important for accessibility?

It ensures all users, including those with older browsers or assistive technologies, can access the core content and functionality without barriers.

beginner

In Svelte, what is a simple way to add progressive enhancement to a button?

Start with a normal HTML button that works without JS, then add Svelte event handlers to enhance it with extra behavior when JS is available.

intermediate

What is the difference between progressive enhancement and graceful degradation?

Progressive enhancement builds from a simple base up, adding features for better browsers. Graceful degradation starts with a complex site and tries to keep it usable on older browsers.

What is the first step in progressive enhancement?

A Ignore older browsers

B Build a basic, functional website

C Use only JavaScript for all features

D Add complex animations

Progressive enhancement starts by building a simple, working site that everyone can use.

How does Svelte help with progressive enhancement?

A By compiling components to efficient JavaScript that enhances basic HTML

B By requiring heavy JavaScript frameworks

C By disabling HTML fallback

D By only supporting modern browsers

Svelte compiles to simple JS that enhances the basic HTML, supporting progressive enhancement.

Which is NOT a benefit of progressive enhancement?

A Better accessibility

B Works on all browsers

C Requires users to have JavaScript enabled

D Improves user experience gradually

Progressive enhancement does NOT require JavaScript; it works without it first.

What should you do to enhance a button in Svelte progressively?

A Use a plain HTML button first, then add Svelte event handlers

B Use only JavaScript to create the button

C Hide the button if JavaScript is disabled

D Use inline styles only

Start with a normal button, then add interactivity with Svelte handlers.

What is the main difference between progressive enhancement and graceful degradation?

A Progressive enhancement requires no JavaScript

B They are the same

C Graceful degradation ignores older browsers

D Progressive enhancement builds up from simple; graceful degradation starts complex and simplifies

Progressive enhancement builds from simple to complex; graceful degradation starts complex and tries to keep it usable.

Explain how you would apply progressive enhancement in a Svelte app for a form component.

Think about how the form works with and without JavaScript.

Describe why progressive enhancement improves accessibility and user experience.

Consider users with different devices and abilities.