I guess you could say this is the end of an era. I guess you could say this is the beginning of a new one. What can I say? I had multiple versions of the same website, and now, I only have just one, and you barge in here, into my blog, demanding that I explain myself? Well, you have some guts.

I have discovered that I am quite a fan of the Svelte way of doing things. In a lot of ways, it feels kind of like a natural extension of the vanilla web platform, and that is very much by design.

svelte: ./src/components/media-gallery/media-gallery.svelte

      
<script lang='ts'>
  import type { IMedia } from '@marmadilemanteater/gh-static-site-lib/src/models/social-posts'
  // component props are just exported variables!? that's neat
  export let medias: IMedia[] = []
  export let descriptionText: string = ''
  // ... omitted for brevity ...
  // computed values just use a prefix, 
  $: images = medias.filter(media => !media.url?.endsWith('mp4')).map(removeGhAssetsLinks)
  // but are otherwise easily readable statements !?!? 
  $: videos = medias.filter(media => media.url?.endsWith('mp4')).map(removeGhAssetsLinks)
  // no `useEffect(() => {}, [store1, store2, etc])` or anything like that required 
</script>
<div
  class="overflow-hidden media-grid grid max-w-full {images.length < 2?'flex flex-col justify-center bg-black': ''}"
>
  <!-- no janky iteration situations with `.map` !??!? -->
  <!-- because svelte has proper syntax for logic~!!!! -->
  {#each images as image, i}
    <!-- 
      proper if statements in templates
      without a `v-if` on an element 
      or the need for ternary operators !?!?!?
    -->
    {#if image.url !== undefined}
      <!-- omitted for brevity -->
    {/if}
  {/each}
</div>
<!-- template code can go at the top level?? no <template> tag required!??!?  -->
<div
  class='overflow-hidden media-grid grid max-w-full flex flex-col justify-center bg-black'
>
  <!-- omitted for brevity -->
</div> 
    

This component syntax does everything that I want it to do without me having to put a whole lot of thought into it, and I just can't really say that for React-like JSX syntax or even Vue syntax. It just feels like what web development should be, out of the box, and what can I say? I just think it's neat.

Of course, that's only one piece of this puzzle!

So far, I've only been talking about Svelte, the frontend framework, but what about Sveltekit? Even though I could technically be using Astro to do the same thing (because I don't client side render), I personally prefer Sveltekit for the time being because I like it more than Astro's syntax which isn't JSX, but it is still JSX-like enough that I don't like it. My opinion on this could easily change, but it all comes down to whether or not I even want any hydration at all in the future.

STOP DOING CLIENT SIDE NAVIGATION

• WEBSITES WERE NEVER SUPPOSED TO BE CLIENT SIDE RENDERED
• YEARS OF RENDERING IN THE BROWSER AND YET STILL NO REAL WORLD USE FOUND FOR ANYTHING BEYOND HTML & CSS
• Want client side navigation anyway, for a laugh? We had a tool for that: it was called "@hotwire/turbo"
• "Event listeners need to be wrapped with a `$()` so that they can be split into lazy loaded chunks" - Statements dreamed up by the utterly Deranged

Look at what JAVASCRIPT FRAMEWORKS have been demanding your respect for:

(This is real CLIENT SIDE NAVIGATION, done by real JAVASCRIPT FRAMEWORKS)

Floating orb of nothingness

Page says 'loading', but is an error

????

THEY HAVE PLAYED US ALL FOR FOOLS!

There we go. I said it. Finally, I got to the point I was trying to make this whole time.

Why are you trying to reinvent browser navigation? Browsers already figured out how to do page navigation with good UX! They tell the user if the page is still loading. They might even give the user a little progress bar to let them know it is not just spinning forever.

That's it. That's all I had to say. I might go back to Astro with Svelte eventually to try out View Transitions which are based on the experimental View Transitions API. At the very least, it keeps the browser in charge of handling page navigation.