Creative coding with Sveltekit - Archive Driezie Studio

In this article, we’ll look at how to make your website work well for everyone, while adding extra features for users with better browsers. We’ll cover some creative coding techniques using SvelteKit, CSS, and JavaScript to help you build interactive and accessible web applications.

Progressive Enhancement

Progressive enhancement is a web design strategy that prioritizes content accessibility, ensuring everyone can access the essential content and functionality of a webpage. Users with more advanced browsers or faster internet connections will experience a richer, enhanced version of the website.

Source: Wikipedia

The order of progressive enhancement: HTML, CSS, and JavaScript.

Creative Coding with CSS

For a smooth user experience, you can implement scroll snapping in CSS using scroll-snap-type. Don’t forget to set the scroll-snap-align on the child elements.

Here's an example using @supports to progressively enhance the experience if scroll animations are supported:

style.css

css

@supports (animation-timeline: scroll()) {
    ul li {
        view-timeline-name: --happy-scroller;
    }
}

If the browser supports this, the page will display scroll animations. If not, it will gracefully degrade to a default scroll behavior.

Creative Coding with JavaScript

Not everything can be achieved with CSS. For more interactive experiences, such as animating based on user input, JavaScript is essential. In this case, client-side JavaScript can further enhance the interface.

For example, you can use mousemove events in Svelte to make elements follow the user's pointer:

+page.svelte

svelte

<svelte:window on:mousemove={followPointer}/>

Fetching Data and Displaying it with Svelte

In Svelte, you can use onMount to fetch and display data as soon as the component is loaded. Here's an example that fetches tasks from an API and displays them in a table:

+page.svelte

svelte

<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'https://jsonplaceholder.typicode.com/todos/'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
        <tr>
            <th>Task Id</th>
            <th>Task Name</th>
            <th>Status</th>
        </tr>
    </thead>

    {#each tasks as t}
        <tr>
            <td>{t.id}</td>
            <td>{t.title}</td>
            <td>{t.completed}</td>
        </tr>
    {/each}
</table>

Ideas for Transitions Using Svelte Libraries

You can enhance your Svelte applications with built-in transitions like fade. Here's an example:

+page.svelte

svelte

<script>
    import { fade } from 'svelte/transition';
    let visible = true;
</script>

<button on:click={() => (visible = !visible)}>
    Toggle
</button>

{#if visible}
    <p transition:fade>
        This text will fade in and out
    </p>
{/if}

Summary

Progressive enhancement in creative coding ensures that your website works for everyone, while offering more features for those with better browsers. Use CSS and JavaScript smartly to improve your site's accessibility and performance on all devices.

Thank You for Reading

Thank you for diving into this post on Creative Coding with SvelteKit! I hope it inspires you to experiment with progressive enhancement and create interactive, accessible websites. If you have any thoughts, questions, or ideas, I’d love to hear from you. Feel free to reach out and share your projects or feedback.

Happy coding and keep pushing the creative boundaries!