Linktree+

The need

I’m not much of a marketer, and selling myself is famously something I’m bad at. It has made me extremely uncomfortable for various reasons. Nonetheless, desperate times call for desperate measures, so I’ve begun speaking up and trying to get a start with building websites for any and all takers.

One such taker is an old buddy of mine, Jason, who also happens to be an amazing musician—a musician without a proper website. He has a web presence on Instagram, YouTube, and elsewhere, but no central hub to call his own other than a Linktree.

Last month we hung out at our friend’s ranch in California’s Hidden Valley of Enchantment for a high school reunion. I asked him if I could make him a website and he said yes.

The idea

The plan was to centralize the content he already had on his Linktree and make it more visually appealing. I wanted to make it easier for his fans to find his music, videos, and social media accounts.

Basically this meant adding some photos and a bio. Sadly, most photos these days still aren’t optimized. Happily, the somehow-still-experimental enhanced:img feature in SvelteKit is a piece of cake to use.

Install the package, update your config, and then for almost any image all you need to do is just wrap it in an enhanced:img tag in order to serve AVIF and WebP formats in different sizes. That’s the SvelteKit magic 🪄✨

// svelte.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		enhancedImages(),
		sveltekit()
	]
});

<enhanced:img src="../blog/toska-bear.png" alt="Toska Bear" />

As an example of the power adding this one word gives you, here’s a screenshot of the hero image’s info:

Not even 80 kB for a 1920x1080 image? That’s pretty good. The original PNG weighed over 6 MB!

The Thumb Zone

Let’s be honest, a lot of mobile layouts are kinda gross. Hamburger menus are used everywhere, but they kinda miss out on the Thumb Zone.

Knowing this, I put the nav menu on mobile on the side as a button that pops out a full-page drawer for hopefully easier navigation. This is a little edgy and all, but Jason’s an artist, so it fits.

YouTube embeds 🙄

Jason also makes music videos for most of his songs, and I wanted a way to highlight that within his website without having to go to YouTube. Will it actually be beneficial? I don’t know. What I do know, though, is that embeds are costly.

Here’s the network tab for all of his videos with YouTube embeds as <iframes />:

Almost 800 requests, nearly 3 minutes, and loads of data.

On desktops that’s probably fine, and I chose not to worry about it for better or worse. On mobile, though, that would be pretty rude to keep around.

There’s a pretty neat trick you can do with most embeds like this, whether they’re YouTube videos or Google Maps or something else.

What you do is have a small, static image that you replace with the iframe on click. I stole this version, although when writing this article it looks like someone made a small library for Svelte projects too! Great minds think alike.

<script>
  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.querySelectorAll('.youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

This way only the thumbnails of videos are loaded initially, and then the video is loaded dynamically after the user wants to watch it. This is much more efficient than the alternative and isn’t that hard to implement.

In conclusion

All in all, this was a quick project without too many complications—it’s just a pretty, static site with a few tweaks to make it purr.