Home / projects / svelte repl-projects

Some fun with Svelte

Over the past year I've fiddled a lot with svelte and have made some simple but cool stuff.

Something I love about Svelte is how familiar it is to writing JavaScript with some slightly new syntax. You can think of it like a framework except that instead of bundling the framework with your application and sending it to the user; Svelte is compiled at build time which allows for tiny bundles. It's also insanely fast rendering because it doesn't have the overhead of a virtual DOM like React (which generally doesn't matter but it's pretty cool regardless).

Classic Snake game

Wanting to stretch my svelte muscles but also do something I'm not super familiar with; I build the classic snake game using the HTML canvas and svelte. There is some places where I could make more DRY but in the spirit of keeping this focused on fun I'll leave it as-is.

Check out the classic snake game

Star Rating feature

This was a fun feature that I build using Svelte's built in animation library for a great user experience.

Check out the demo for the start rating feature

Shy Top Bar

I love a sticky top bar but sometimes they get in the way and while scrolling they should get shy.

Check out the demo for the shy top bar

Timer

Simple timer for counting down something. Could use a sound notification or more visual indication

Check out the demo for the timer

Sliding Sidebar

This is a native-like sliding drawer for websites. This is great for PWA's where you don't need the gesture based navigation on mobile devices but most mobile OS's now use the slide gesture which renders this less useful but I still think it's cool.

Check out the demo for the sliding sidebar