Forem: Aubrey Barnes

Challenging devChallenges.io with SvelteKit

Aubrey Barnes — Thu, 06 Feb 2025 19:51:54 +0000

Before we get into it, I would like to thank whatever powers that be who selected my previous post as top 7 featured of the week. I'm quite proud of that, and now I'm motivated to do more writing, so let's get into it!

After seeing that a certain company in my area (70-ish miles away, close enough) was looking for experience in SvelteKit, I decided to try it out. Most of my experience is in PHP frameworks utilizing Timber/Twig, but I want to get more familiar with JavaScript frameworks. What better way to learn than diving in? What I've chosen to do is hop on devChallenges, pick a project which comes fully loaded with a design, and go to town. I chose Simple Coffee Listing as my first since it seemed simple enough.

Challenges overcame while Challenging devChallenges

It took me a few days to complete this one page project, and most of that time was spent setting up a development environment on Windows 10, and figuring out how to build a toggle component. I would like to state that ever since my first internship position, I learned that documentation is my best friend. Svelte's documentation and tutorials are excellent, and without them I'd still be figuring out how to build a toggle component.

Looking at the design I could tell I was going to need a Card component and a Toggle component. The Toggle was built with radio buttons. To have an option checked by default I had to set initial state for the bind:value to the first radio option value. Let's look at the code!

+page.svelte

<script>
    import Card from '$lib/components/Card/Card.svelte';
    import Toggle from '$lib/components/Toggle/Toggle.svelte';

    let {data} = $props(); //data is coming from +page.server.js

    let fullCatalog = Array.from(data.item); //Array.from since we are receiving an object full of objects.
    let filteredCatalog = fullCatalog.filter(coffee => coffee.id !== 5); 



    const options = [{
        value: 'all-products',
        label: 'All Products',
    }, {
        value: 'available-now',
        label: 'Available Now',
    }, ]

    let radioValue = $state(options[0].value); //default radio choice

</script>

The main page where I import the UI components Card and Toggle, pulling in data from +page.server.js, and then form 2 separate arrays from that data. Initially I attempted to loop through the data array and use skip or continue when faced with the item that was supposed to be filtered, but apparently there is no equivalent to those keywords when looping with svelte's {#each}. That is why I opted to create two arrays, though I would have preferred having only one.

The next relevant piece of code is

 <Toggle {options} bind:userChoice={radioValue}/>

We're using options to help build the radio buttons inside of Toggle, and bind is used to pass data from the child () to the parent (+page.svelte).

Toggle.svelte

<script>
    let { options, userChoice = $bindable(options[0].value) } = $props();

    const slugify = (str = "") => str.toLowerCase().replace(/ /g, "-").replace(/\./g, "");

    const uniqueID = Math.floor(Math.random() * 100)

    console.log(options[0])
</script>

<div role="radiogroup" aria-labelledby={`label-${uniqueID}`} class="productFilterWrapper mx-auto max-w-96 flex justify-center gap-6 pb-8" >

    {#each options as { value, label }}

        <input bind:group={userChoice} value={value} type="radio" id={slugify(label)} class="hidden-toggles__input hidden">
        <label for={slugify(label)} class="hidden-toggles__label p-4 rounded-xl">{label}</label>

     {/each}

</div>

From Svelte:

If you have multiple type="radio" or type="checkbox" inputs relating to the same value, you can use bind:group along with the value attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.

While there are only two options to iterate through with each, I want to leave the possibility for more options to be included, and would work just as well with 2 or 200 (please do not have 200 radio buttons for any reason ever). Now that I have the functionality to filter our results from our api call based on which radio button is selected, HOW are we going to present this information? Glad you asked. Back to +page.svelte!

Below toggle, we have this logic

<div class="CardGrid w-full max-md:mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {#if radioValue === "" || radioValue === 'all-products'}
            {#each fullCatalog
                as { id, name, image, popular, price, rating, votes }}

                <Card
                    coffeeId={id}
                    coffeeName={name}
                    coffeeImg={image}
                    coffeePopular={popular}
                    coffeePrice={price}
                    coffeeRating={rating}
                    coffeeVotes={votes}

                />  
            {/each}
        {:else}
            {#each filteredCatalog
                as { id, name, image, popular, price, rating, votes }}

                <Card
                    coffeeId={id}
                    coffeeName={name}
                    coffeeImg={image}
                    coffeePopular={popular}
                    coffeePrice={price}
                    coffeeRating={rating}
                    coffeeVotes={votes}

                />  
            {/each}    
        {/if}
    </div>

We set up a container Grid and based on the value passed in by Toggle, we iterate one of our arrays. Each array item has an object which gets destructured into a list corresponding with their properties.

Card.svelte

<script>
    let {coffeeId, coffeeName, coffeeImg,  coffeePopular, coffeePrice, coffeeRating, coffeeVotes } = $props();

</script>

<div class="cardWrapper">
    <div class="cardImgWrapper">
        {#if coffeePopular === true}
            <p class="absolute mx-2 my-2 px-2 py-1 bg-yellow-400 rounded-xl text-black text-xs font-medium">Popular</p>
        {/if}
        <img class="rounded-xl w-full" alt="" src="{coffeeImg}" />
    </div>
    <div class="cardPriceWrapper flex justify-between pt-2">
        <p class="text-white font-medium">{coffeeName}</p>
        <span class="text-black bg-[#FEF7EE] rounded-md px-2 py-1 font-medium text-sm h-min">{coffeePrice}</span>
    </div>
    <div class="cardRatingWrapper flex items-center justify-between">
        <div class="score-votes flex items-center">
            {#if coffeeVotes}
                <img alt="" src="/img/Star_fill.svg" />
                <p class="text-md font-medium">{coffeeRating} <span class="text-[#4d5562] pl-1">({coffeeVotes} votes)</span></p>
            {:else if !coffeeVotes}
                <img alt="" src="/img/Star.svg" />
                <p class="text-[#4d5562] text-small">No Ratings</p>
            {:else}
                <p>No Data</p>
            {/if}
        </div>

        {#if coffeeId===5}
            <p id="sold-out" class="text-[#ED735D] font-medium text-sm">Sold Out</p>
        {/if}
    </div>
</div>

All we have to do is place the data to their assigned seats, and make it look nice with TailwindCSS.

Room for Improvement

I'm not certain what $bindable does in Toggle, as +page.svelte is already setting that value to the same thing. Last time I tried to remove it, things stopped working so I may be causing an error somewhere else.
While there was no private API key for this project, I still would like to practice with keeping one hidden and I think I know just the project to work on that!
I also want to take options out of the script inside of the main page, but since it's only two items it's fine as is. Though I feel I would prefer it in its own file if it were any larger.
Next Project, I'm going to try and set up a basic layout so that there are better and defined boundaries. Some animations to create visual interest wouldn't hurt either.

I believe that is all for this particular project, and there will definitely be another as I would like to do more with Svelte. I found it to be pleasant, daresay fun to work with. If there is anything you've seen that can be improved or corrected, please do tell. Thank you for reading and I hope you had something to take away!

Helpful Links / References

Radio Button Playground 1
Radio Button Playground 2
My devChallenge solution hosted by Netlify
My GitHub Repo for Coffee Listing
Reddit: The differences between +page.js, +page.server.js, and +server.js

Let's talk about SVGs

Aubrey Barnes — Mon, 27 Jan 2025 17:44:35 +0000

Good To Knows About SVG's

In my time as a Web Developer, I've been working with SVG's on more projects than not, with no real true understanding of how they work and how to fully utilize what they have to offer. Today, I'm going to share what knowledge I have gained so that whomever may have questions and curiosities like I did will need look no further.

Primarily, when I've needed to use SVG's it was for icons and logos that represent the client and their services rendered.

Why would Scalable Vector Graphics be the go to? There are four primary reasons that I can think of, including

Scalability, meaning, regardless of size there is no pixelation or distortion.
Accessible, in that SVGs can have alt text and descriptions added just like any other image can, right on the tag attribute.
Animations, which add a level of movement and interest that static images cannot do.
Interactivity, which would be done through JavaScript. I personally do not use much JavaScript in my workday, so I cannot speak to this one as much. With time I intend to shorten this gap in knowledge.

An example of what an SVG looks like could be something like this:

The code to render this as an SVG looks like:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- License: CC0. Made by SVG Repo: https://www.svgrepo.com/svg/11389/wine-glass -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="198.484px" height="198.484px" viewBox="0 0 198.484 198.484" style="enable-background:new 0 0 198.484 198.484;"
     xml:space="preserve">
<g>
    <g>
        <path d="M146.208,88.344c10.12-8.688,16.1-20.224,17.295-33.363c2.775-30.533-11.607-52.552-12.222-53.475
            C150.655,0.565,149.601,0,148.472,0H50.012c-1.129,0-2.184,0.565-2.81,1.506c-0.614,0.922-14.997,22.941-12.221,53.475
            c1.194,13.139,7.174,24.675,17.294,33.363c8.785,7.542,20.268,12.65,33.319,14.852v66.337c-11.87,0.581-22.657,1.906-30.646,3.783
            c-10.89,2.557-15.962,5.902-15.962,10.525c0,5.077,6.187,8.661,19.471,11.279c10.901,2.148,25.317,3.339,40.634,3.362v0.001
            c0.051,0,0.301-0.001,0.301-0.001c15.317-0.023,29.733-1.214,40.635-3.362c13.284-2.618,19.47-6.202,19.47-11.279
            c0-4.623-5.072-7.969-15.962-10.525c-7.987-1.876-18.774-3.201-30.644-3.782v-66.338
            C125.942,100.992,137.423,95.885,146.208,88.344z M140.017,179.447c8.598,1.812,11.521,3.627,12.435,4.402
            c-1.256,1.062-5.521,3.216-15.908,5.054c-10.237,1.812-23.475,2.813-37.301,2.829c-13.826-0.014-27.063-1.018-37.301-2.829
            c-10.387-1.838-14.652-3.991-15.908-5.054c0.913-0.775,3.837-2.592,12.433-4.402c7.278-1.534,16.808-2.637,27.129-3.156v4.68
            c0,1.864,1.511,3.375,3.375,3.375s3.375-1.511,3.375-3.375l0.008-80.73c0-1.864-1.511-3.375-3.375-3.375
            c-0.048,0-0.095,0.005-0.142,0.007c-0.004-0.001-0.007-0.002-0.011-0.002c-21.184-2.982-44.687-15.713-47.122-42.501
            C39.543,30.603,48.91,12.02,51.919,6.75h94.646c3.009,5.27,12.376,23.854,10.215,47.619
            c-2.436,26.788-25.938,39.518-47.122,42.501c-0.003,0-0.007,0.001-0.011,0.002c-0.047-0.002-0.094-0.007-0.143-0.007
            c-1.863,0-3.375,1.511-3.375,3.375l0.012,81.181c0,1.864,1.511,3.375,3.375,3.375c1.863,0,3.375-1.511,3.375-3.375v-5.13
            C123.212,176.811,132.74,177.913,140.017,179.447z"/>
        <path d="M142.413,72.616c6.496-9.941,6.572-19.851,6.572-20.268c0-1.852-1.479-3.456-3.33-3.473h-7.453
            c-1.87-0.031-3.393,1.471-3.414,3.336c-0.021,1.864,1.471,3.392,3.335,3.414l3.791,0.064c-1.323,8.367-8.095,29.4-42.673,30.148
            c-34.578-0.748-41.349-21.781-42.673-30.148l64.313-0.064c0.012,0,0.022,0,0.034,0c1.849,0,3.356-1.49,3.374-3.342
            c0.018-1.864-1.479-3.39-3.342-3.408l-68.107,0.098c-1.851,0.017-3.343,1.523-3.343,3.375c0,0.417,0.075,10.326,6.572,20.268
            c5.799,8.874,23.521,19.52,43.022,19.52C118.593,92.136,136.614,81.49,142.413,72.616z"/>
    </g>
</g>
</svg>

Yikes.
So now I'm going to strip out the unnecessary code here, as I prefer to remove whatever is not required for rendering. For instance, style="enable-background:new 0 0 198.484 198.484;" is deprecated as of 2014 (Source). This SVG was downloaded from svgviewer.dev a couple weeks before time of writing.

After stripping out the parts that don't affect presentation, this is what I'm left with.

When you click the HTML tab up there in the codepen box, you may notice that I have also added

fill="currentColor"

to the svg and d tags. This is so that I can control the color of the svg using CSS, where all styling should live. This allows the flexibility of having colors update based on events such as hover, mouseIn, mouseOut, etc.

You'll see in this codepen that I've added in CSS to assign blue to the fill attribute.

If you're feeling more fancy, it's possible to add gradients to our svg. To set that up, we would need to add

<defs>
    <linearGradient id="gradient-blue" x1="0" y1="0" x2="85" y2="85" gradientUnits="userSpaceOnUse">
      <stop offset="0.4" stop-color="#090979"></stop>
      <stop offset="1" stop-color="#00d4ff"></stop>
    </linearGradient>
  </defs>

Inside of the defs tag we have declared a graphics object. This object is a linearGradient, which an id is required to reference the object either in HTML or in the CSS file as is shown in the codepen above. The x and y coordinates on the linearGradient tag are saying "starting from the top left corner (0, 0), I want to extend the gradient 85 units to the right, and 85 units downwards". The next attribute gradientUnits="userSpaceOnUse", as I understand it, avoids distorting the shape when used on svg's that aren't square. I am also not certain of this so please do correct me!

Inside of the linearGradient we have two stops, for each color. Essentially, #090979 up to 40%, and then #00d4ff all the way to the finish line! translated to css: linear-gradient(to bottom right, #090979 40%, #00d4ff 100%);

One last thing, I wanted to animate the gradients on hover, which I can't lie I learned a lot of new things about svg gradients on the fly while writing this. I was not able to transition fill:url on hover, but what I was able to do was animate the stops inside of the linearGradient on hover which was a wild discovery for me. Look at this fine glass of wine.

As far as styling and interactivity is concerned, this is the full extent of my knowledge and experience in working with SVG's, thank you for following along with me, and I hope this has helped at least one other person!

Creating and Consuming Custom Events

Aubrey Barnes — Wed, 10 Aug 2022 22:10:20 +0000

This week, I've learned something new about the DOM API, and that is how to create and consume custom events. Imagine, instead of listening for a click event, you create your own event to listen for! Sounds cool, right? Allow me to show you more about this neat feature that I didn't even know about, as long as I've been using event listeners.
I've built a project to illustrate one possible use of using custom events. For instance, I want to listen for an order in a kitchen system so the cooks know what's coming up next, then I want to print that order to the screen. I've simulated this in a project on github.

// fetch data from api using netlify functions
const fetchData = async () => {
    //get the data from my super secret netlify function
    const res = await fetch(`/.netlify/functions/token-hider`)
    //if something goes wrong, throw an error
    if (!res.ok) {
        throw new Error(`http response: ${res.status}`)
    }
    // if something goes right, save the json response
    const getMeals = await res.json();
    // pass the fetched data to a new function to process
    processOrder(getMeals)

}

We begin our journey with a standard data fetch, I'm using netlify cli to hide my API key, which I bought for $2 a month, but for those of you who do not care to purchase one, the free api can be found here. The major work behind this program is done after passing the fetched data into a function for processing the data into our own free-range, organic, ethically sourced events.

// This function is called to get a random selection of meals from the array passed in from fetch
const processOrder = (getMeals) => {
    //save an array of randomly selected meals
    const mealsData = getMeals.meals
    // select a random number of meals starting from the beginning of the mealsData array
    // at least one, up to the length of the array given.
    const customerOrder = mealsData.slice(0, Math.floor(Math.random() * mealsData.length) + 1)
// map an array of objects
    const orderDetails = customerOrder.map(item => (
        {
            mealName: item.strMeal,
            mealImg: item.strMealThumb
        }
    ))

// create and initialize event. 

    var orderEvent = new CustomEvent(
        'order',
        { detail: orderDetails }
    );
    // tell the browser api to fire the event
    window.dispatchEvent(orderEvent)
}

const stopMe = setInterval(fetchData, 2000);

First, take a random number of entries from the data array, and map an array of objects, saving the meal name and image. For our next trick we create and initialize a custom event, using the syntax

var orderEvent = new CustomEvent('whatever name you want to call the event', { detail: data-you-want-to-pass }

Afterwards, we fire the event using window.dispatchEvent(variable-you-saved-custom-event-to).

My initial thought for this project was to have a random interval of time to fire the event, but I have not yet figured out how to insert a random time interval into the setInterval function, so for now I set it to two seconds. Every two seconds, I'm calling the fetchData function, which calls the processOrder function, which fires the order event. You consume the order event like any other built in event from the browsers' API. The order event was dispatched to the window interface, so we add an event listener to the window interface, and then a callback function to process the data using event.detail (remember setting what we get from detail when initializing the custom event).

window.addEventListener('order', (evt) => {
    let root = document.getElementById('root');
    const section = document.createElement('section');
    let orderNumber = document.createElement('p')

    section.className = 'order-container'
    orderNumber.className = 'order-number'
    orderNumber.innerText = `Order ${Math.floor(Math.random() * 1000)}`
    section.append(orderNumber)

    const displayOrder = evt.detail.map(item => {
        const p = document.createElement('p')
        const img = document.createElement('img')
        const div = document.createElement('div')
        div.className = 'item-in-order'
        img.src = `${item.mealImg}/preview`
        img.alt = item.mealName
        p.innerText = item.mealName
        div.append(p)
        div.append(img)

        return div

    })

    displayOrder.forEach(item => {
        section.append(item)
    })
    root.append(section)
})

Slap that data into the DOM and you get something like this

That's all there is to it! I wanted to share this knowledge since I did not know this during an online assessment with essentially a dream company, and wanted to fill in that gap. The best way to learn something is to explain it to someone else, and I hope my explanation was simple and easy to follow, if not, please let me know how I can improve!