Design comparison
Solution retrospective
This is my second project built using Sveltekit. I challenged myself by implementing progressive enhancement throughout, making sure that all the functionality worked correctly with or without JavaScript - please disable JS in your browser if you wish to test this out.
Another challenge was choosing not to use a database, instead relying completely on browser storage + svelte stores. This made reactivity tricky at times due to how svelte does not share stores between the server and client when implementing progressive enhancement. The solution to this was to abstract my 'actions' in to a separate 'actions.ts' file and call them from both the server and the client when using progressive enhancement.
Working with a framework like Sveltekit, which pre-renders HTML has really highlighted the amount of accessibility issues with my code (as highlighted by the accessibility report included on this site). For my next project I intend to go 'back to basics' a little and work on my accessibility and semantic HTML skills.
Any questions / comments are welcome! Glen
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord