DEV Community: kylebuildsstuff

Why Choose Svelte over React

kylebuildsstuff — Wed, 07 Jun 2023 19:17:50 +0000

When comparing 2 tools it’s common to compare in terms of positives, “A” does this better than “B” and “B” does that better than “A”. It’s a good start but most of the time it’s surface level and a matter of preference. It makes no big difference because the end goal can still be achieved either way. I think it’s often better to compare in terms of negatives, because it’s the negatives that truly limit you.

And it’s the negatives of React that led me to choose Svelte as my primary JS framework. I wish it weren’t so. JQuery was neat, AngularJS blew my mind, but React was special. React did everything AngularJS did, and even Angular 2 for that matter, but better and simpler. Sadly, this no longer seems to be the case.

It’s the virtual DOM. There’s no escaping it in React. It’s its biggest strength, it’s what made it so revolutionary, and now it is its biggest weakness.

Besides the unnecessarily larger bundle sizes, it creates unnecessary re-renders of your whole app upon every change. It may have improved over the years but fundamentally the issue is still there, and to mask it we impose seemingly arbitrary rules upon developers. We use hooks, we manually specify dependencies within hooks, we use hooks only at the top level, we wrap things in hooks and callbacks and memos, and the hole gets deeper every year.

It doesn’t have to be this way, at least not anymore. Instead of asking “How do we make this better?” I think the better question is “Should we make this better?”.

Sometimes there are just inherent limitations with a tool, and instead of endlessly optimizing maybe we should look elsewhere. Instead of pouring millions into research and development to increase the efficiency of the internal combustion engine by a couple of percentage points, maybe we should look to electric vehicles that just don’t have the same inherent limitations.

That’s how I feel about Svelte and React. Svelte uses a compiler-based approach, and any abstractions or code you write get compiled down to plain JS, without the hunky virtual DOM. It’s about as close to vanilla JS as you can get with a framework. And because of this you aren’t held back by the limitations of a virtual DOM. No more thinking about optimizing for re-renders, following the rule of hooks, or anything else related to the virtual DOM.

Using React has been getting more burdensome every year. It’s not the handful of ever-changing libraries you need to use with React, it’s not even Redux, in fact, I still enjoy using Redux, it’s just React. It’s gotten so heavy it’s hard to move forward with it.

Using Svelte feels like flying in comparison. It’s so light. And not just in its final bundle size but also in terms of the mental load, or framework-specific knowledge needed to use it. It makes for a better developer experience and faster load times for users.

I think React is too far gone at this point. Whatever got us from jQuery to React isn’t going to get us to the next level. We need something lighter and simpler, to make room for whatever is to come, and I think Svelte fits just right.

Hasura and Nhost vs Supabase

kylebuildsstuff — Sat, 06 May 2023 16:38:45 +0000

Shipping fast

With so many new tools there are far more ways to build stuff now than ever, but the tools you choose could make the difference between taking months to ship a product or taking only days.

For a long time devs would just write backends by hand, but this was tedious and time-consuming. Now we have services like Firebase, Hasura, Nhost, and Supabase that speed up development by taking care of backend features like databases, API endpoints, user authentication, and storage.

Firebase was one of the first solutions but it was proprietary software, a huge turnoff for many devs. Then came Hasura in 2017, an open-source solution that enabled a low-code GraphQL interface to access your PostgreSQL database along with your other standard Postgres features. Nhost came shortly after, providing Hasura as a service along with other backend features like authentication and storage.

And then in 2020 came Supabase, positioned as an open-source alternative to Firebase. It’s hard not to hear about how great Supabase is, but for the past few years I’ve avoided it because I was just so happy with Hasura and Nhost.

What makes Hasura so Good?

Automatic GraphQL on all your data

GraphQL promised a simpler developer experience where you could fetch the exact data you needed, but if you’ve ever written your own GraphQL resolvers you know this is only a half-truth. Sure, it’s arguably easier for frontend dev work, but now every column of every table is essentially an API endpoint you have to write a resolver for. Many times it was easier to just build normal REST APIs.

Hasura fixed all of this.

It provided instant CRUD-based resolvers for queries and mutations, with filters and operators, on every table and column, along with access to role-based authorization.

Point and Click UI

It’s so refreshing to be able to use well-designed abstractions that automate boring tasks while still providing the option to drop down to code for flexibility and customizability, and that’s what Hasura provides.

Anything from creating tables to adding auth policies and custom SQL, to constructing queries is just a click away.

It opens up access to data so much more because the barrier of entry is so much lower, you no longer need to think in code, you just click what you want, as if you were online shopping in your database.

Separate Service

One of my biggest gripes with GraphQL was how much crap you needed to add just to use it. Large libraries to make graphql requests graphql-ify your data.

Hasura sits in between your server and database and requires no glue code or extra libraries. It’s agnostic in what you use in your code as it only exposes an HTTP endpoint to connect to.

Why change?

For one, a large part of Hasura’s focus over the past couple of years has been to support more databases, but these updates provided little to no value for the average developer. Along with their recent pricing changes, it seems they’re focusing a lot more on their enterprise clients and that worries me for the future of the open-sourced community edition of Hasura.

And two, Nhost, perhaps the best provider for Hasura as a service, with auth and storage included, recently changed their free tier pricing from allowing unlimited active free projects to one active free project. I like my free stuff, and Supabase offers 2 free active projects, that’s 2x more than 1!

But also because despite being a separate entity, Nhost is inherently tied to Hasura and I don’t like the direction Hasura is going in.

Migrating to Supabase

Ever since its launch, Supabase has been crushing it with new features, documentation, marketing, and support, even launching support for new hotnesses like pg_vector and text embeddings that enable new AI-related workflows.

For the most part, the development flow is similar.

Things like creating tables and updating columns can be done with a point-and-click UI. The main differences I found were:

Writing SQL

Things like accessing data within your DB and setting auth policies require actual code, whether with SQL or through their client library. It’s much easier to build queries with button clicks in Hasura than it is through writing code with Supabase.

Migrations are manual

In Hasura, migration files are automatically written after every database update. If you use Nhost for Hasura then migrations are automatically deployed when your specified production branch is pushed. It’s a huge timesaver.

With Supabase, migrations need to be done manually through their CLI, though they do have a diffing command that comes in handy.

GraphQL support

Though Supabase has released support for GraphQL it’s still relatively new and doesn’t have the same level of support for many features in GraphQL as Hasura, some of which include:

Support for nested mutations
Querying by primary key
Certain filters
Better GraphQL editor with query builder and recent history in sidebar

Verdict

In terms of productivity, I’d have to go with Hasura, specifically with Nhost. The low-code UI Hasura provides, combined with Nhost’s supporting features and infrastructure, are just too good. I don’t have to think about code when interacting with my DB. It’s point-and-click to build tables, auth policies, queries, and mutations, all while maintaining the ability to drop down to code if needed.

Supabase is still a great choice and I’ll be trying it out for my next few projects.

Besides the better documentation, more active community, and more generous free tier, I think Supabase is better aligned in the long term for the average developer because of Hasura’s focus on enterprise clients and Nhost’s dependency on Hasura. Also, if Supabase keeps up their pace it won’t be long before they close the gaps they have between them and Hasura and Nhost.

Not having access to Hasura’s UI is quite a loss but SQL is a powerful language that’s not going anywhere and this makes for a good excuse to get more proficient in it. Plus, with Supabase’s recently added AI docs helper, writing SQL is only going to get easier.

Other than that, Supabase offers the same features I care about and I think it’s a good idea to explore new options to keep from vendor dependency.

Build a Video Transcriber using Whisper Speech to Text API

kylebuildsstuff — Sun, 05 Mar 2023 13:19:42 +0000

Overview

OpenAI just released version 2 of Whisper API, their speech to text model. That means voice transcription just got a whole lot better.

Let’s build a little proof of concept.

Our project will have an input for uploading files and a button that will, upon clicking, transcribe the file using the Whisper API, and display the transcribed text in our UI.

Video

Dependencies

"dependencies": {
    "@sveltejs/kit": "^1.5.0",
    "tailwindcss": "^3.2.7",
  }

API MVP

Let’s start by making sure our frontend can call our server upon mounting, and then having our server call the OpenAI transcription endpoint to transcribe a file we already have on hand.

// routes/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';

  onMount(async () => {
    await handleTranscription();
  });

  const handleTranscription = async () => {
    const response = await fetch('/api/transcription', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({})
    }).then((res) => res.json());

    console.log('response: ', response);

    return response;
  };
</script>

hello motto

// routes/api/transcription/+server.ts

import { json } from '@sveltejs/kit';
import fs from 'fs';
import { OPENAI_API_SECRET_KEY } from '$env/static/private';

export const POST = async (event) => {
  /**
   * Request config
   *
   * https://platform.openai.com/docs/api-reference/audio/create
   *
   */
  // We use our own video here and place it in the /static folder.
  const buffer = fs.readFileSync('static/the-great-dictator.mp4');
  const file = new Blob([buffer]);

  const formData = new FormData();
  formData.append('file', file, 'test.wav');
  formData.append('model', 'whisper-1');
  formData.append('language', 'en');

  /**
   * https://platform.openai.com/docs/api-reference/audio/create?lang=node
   */
  const res = await fetch(`https://api.openai.com/v1/audio/transcriptions`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${OPENAI_API_SECRET_KEY}`,
      Accept: 'application/json'
    },
    body: formData
  });

  const data = await res.json();

  console.log('data: ', data);

  return json({});
};

And this is the logged response we get:

// The response came all in one line but I cut it up for some readability

data:  {
  text: "I'm sorry, but I don't want to be an emperor. \
That's not my business. I don't want to rule or conquer anyone. \
I should like to help everyone if possible. Jew, Gentile, black man, \
white. We all want to help one another. Human beings are like that. \
We want to live by each other's happiness, not by each other's misery. \
We don't want to hate and despise one another. In this world, there's \
room for everyone, and the good earth is rich and can provide for everyone. \
The way of life can be free and beautiful, but we have lost the way. \
Greed has poisoned men's souls, has barricaded the world with hate, \
has goose-stepped us into misery and bloodshed. We have developed speed, \
but we have shut ourselves in. Machinery that gives abundance has left us \
in want. Our knowledge has made us cynical, our cleverness hard and unkind. \
We think too much and feel too little. More than machinery, we need humanity. \
More than cleverness, we need kindness and gentleness. Without these qualities,\
 life will be violent, and all will be lost. The aeroplane and the radio \
have brought us closer together. The very nature of these inventions cries out \
for the goodness in men, cries out for universal brotherhood, for the unity of\
 us all. Even now, my voice is reaching millions throughout the world, \
millions of despairing men, women, and little children, victims of a system \
that makes men torture and imprison innocent people. To those who can hear me,\
 I say, do not despair. The misery that is now upon us is but the passing of\
 greed, the bitterness of men who fear the way of human progress. \
The hate of men will pass, and dictators die, and the power they took from the\
 people will return to the people. And so long as men die, liberty will never \
perish. Soldiers, don't give yourselves to brutes, men who despise you, \
enslave you, who regiment your lives, tell you what to do, what to think, \
and what to feel, who drill you, diet you, treat you like cattle, \
use you as cannon fodder. Don't give yourselves to these unnatural men, \
machine men with machine minds and machine hearts. You are not machines, \
you are not cattle, you are men. You have the love of humanity in your hearts. \
You don't hate, only the unloved hate, the unloved and the unnatural. \
Soldiers, don't fight for slavery, fight for liberty. In the 17th chapter of\
 St. Luke, it is written, the kingdom of God is within man, not one man nor a \
group of men, but in all men, in you, you the people have the power, the power \
to create machines, the power to create happiness. You the people have the power to make this life free and beautiful, to make this life a wonderful adventure. Then in the name of democracy, let us use that power, let us all unite, let us fight for a new world, a decent world that will give men a chance to work, that will give youth a future and old age a security. By the promise of these things, brutes have risen to power, but they lie, they do not fulfill that promise, they never will, dictators free themselves, but they enslave the people. Now let us fight to fulfill that promise, let us fight to free the world, to do away with national barriers, to do away with greed, with hate and intolerance. Let us fight for a world of reason, a world where science and progress will lead to all men's happiness. Soldiers, in the name of democracy, let us all unite. Thank you."
}

Pretty handy stuff for just a few lines of code.

But this requires you to have the file already available before making the call. That can pose some logistical issues as you’d probably have to then store that data in an S3 bucket and retrieve it, or something to that effect.

It’d be so much simpler is if we could just have the user upload their own file so we can skip file storage.

Integrating user input

And thanks to Sveltekit that’s actually really simple.

// routes/+page.svelte

<script lang="ts">
  let files;

  const handleTranscription = async () => {
    const formData = new FormData();
    formData.append('file', files[0]);

    const response = await fetch('/api/transcription', {
      method: 'POST',
      body: formData
    }).then((res) => res.json());

    console.log('response: ', response);

    return response;
  };
</script>

<input type="file" bind:files />

<button type="submit" on:click={handleTranscription}>Submit</button>

And then we adjust our server to process the file from the request:

// routes/api/transcription/+server.ts

import { json } from '@sveltejs/kit';
import { OPENAI_API_SECRET_KEY } from '$env/static/private';

export const POST = async (event) => {
  const requestBody = await event.request.formData();
  const requestFile = requestBody.get('file');

  /**
   * Request config
   *
   * https://platform.openai.com/docs/api-reference/audio/create
   *
   */
  const file = new Blob([requestFile], { type: 'video/mp4' });

  const formData = new FormData();
  formData.append('file', file, 'test.wav');
  formData.append('model', 'whisper-1');
  formData.append('language', 'en');

  /**
   * https://platform.openai.com/docs/api-reference/audio/create?lang=node
   */
  const res = await fetch(`https://api.openai.com/v1/audio/transcriptions`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${OPENAI_API_SECRET_KEY}`,
      Accept: 'application/json'
    },
    body: formData
  });

  const data = await res.json();
  const transcribedText = data?.text || '';

  console.log('data: ', data);

  return json({ transcribedText });
};

And that’s everything we need in terms of features. All we have to do now is to make our UI look pretty.

Styling our UI

With the help of tailwindcss we add style our input, display the uploaded file’s filename, make our button look a bit better, and display the transcribed text underneath:

<script lang="ts">
  let isLoading;

  let files;
  let transcribedText = '';

  $: fileName = files && files[0] && files[0].name;

  const handleTranscription = async () => {
    isLoading = true;

    const formData = new FormData();
    formData.append('file', files[0]);

    const response = await fetch('/api/transcription', {
      method: 'POST',
      body: formData
    }).then((res) => res.json());

    transcribedText =
      response?.transcribedText || 'Transcription could not be completed';

    isLoading = false;
    return response;
  };
</script>

<div class="grid grid-cols-1 items-start gap-4 pt-5">
  <!-- Upload -->
  <div class="mt-2 col-span-1 sm:mt-0">
    <div
      class="flex max-w-lg justify-center rounded-md border-2 border-dashed border-gray-300 px-6 pt-5 pb-6"
    >
      <div class="space-y-1 text-center">
        <svg
          class="mx-auto h-12 w-12 text-gray-400"
          stroke="currentColor"
          fill="none"
          viewBox="0 0 48 48"
          aria-hidden="true"
        >
          <path
            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <div class="flex justify-center text-sm text-gray-600">
          <label
            for="file-upload"
            class="relative cursor-pointer rounded-md bg-white font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:text-indigo-500"
          >
            <span>Upload a file</span>
            <input
              bind:files
              id="file-upload"
              name="file-upload"
              type="file"
              class="sr-only"
            />
          </label>
        </div>
        <p class="text-xs text-gray-500">
          mp3, mp4, mpeg, mpga, m4a, wav, and webm up to 25MB
        </p>
      </div>
    </div>
  </div>

  <span class="text-gray-500">
    {fileName ? fileName : 'No file found'}
  </span>

  <!-- Transcribe -->
  {#if isLoading}
    <button
      on:click={handleTranscription}
      disabled
      class="w-1/2 opacity-50 rounded-md bg-indigo-600 py-2.5 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      >Transcribing...</button
    >
  {:else}
    <button
      on:click={handleTranscription}
      type="submit"
      class="w-1/2 rounded-md bg-indigo-600 py-2.5 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      >Transcribe</button
    >
  {/if}
</div>

<!-- Text -->
<section class="mt-5">{transcribedText}</section>

And here’s the finished product!

It’s now super simple to transcribe any video or podcast, and it also makes for building voice-based apps and features a lot more feasible too.

Checkout the full source code at my repo:

https://github.com/KTruong008/whisper-speech-to-text-example

Build a Blog with Sveltekit and Markdown

kylebuildsstuff — Sat, 04 Mar 2023 12:58:17 +0000

Sveltekit is a phenomenal tool for the web. Not only is it a delight to code with but it also ships minimal JS bundles that’s about as close as you can get to writing plain JS with a framework. It’s also great for making blogs.

Markdown is an odd markup language but it’s got a good balance between simplicity and customizability that makes it a popular choice for dev blogging.

We’ll be using the mdsvex library for today. Other than enabling markdown, it also allows you to use svelte components directly within markdown.

https://mdsvex.com/docs

The basic idea is that mdsvex converts markdown into svelte components. We’ll create base post and layout components that can be automatically inherited and reused, and mdsvex will take care of the rest.

Dependencies



"dependencies": {
    "tailwindcss": "^3.2.7",
  "@tailwindcss/forms": "^0.5.3",
  "@tailwindcss/typography": "^0.5.9",
  "luxon": "^3.2.1",
  "mdsvex": "^0.10.6"
}

UI Boilerplate

Using tailwindcss we create our UI.

Our initial page will have a list of posts, categorized by cards for featured posts and lists for normal posts. Clicking the post will lead to the actual blog post, which will be set up in the next section.



// routes/+layout.svelte

<script>
  import '../app.css';
</script>

<div class="min-h-full h-full">
  <slot />
</div>



// routes/+page.svelte

<script lang="ts">
  import { POSTS_LIST } from '$lib/shared/shared.constant';

  import PostCard from './post-card.svelte';
  import PostListItem from './post-list-item.svelte';

  const featuredPosts = POSTS_LIST.filter((post) => post.isFeatured);
  const posts = POSTS_LIST.filter((post) => !post.isFeatured);
</script>

<div class="relative bg-white px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pb-28">
  <div class="relative mx-auto max-w-7xl">
    <div class="text-center">
      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        From the blog
      </h1>
    </div>
    <div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
      {#each featuredPosts as { url, title, description, author, date }}
        <PostCard {url} {title} {description} {author} {date} />
      {/each}
    </div>

    <!-- Lists -->
    <ul class="divide-y divide-gray-200">
      {#each posts as { url, title, description, author, date }}
        <PostListItem {url} {title} {description} {author} {date} />
      {/each}
    </ul>
  </div>
</div>



// routes/post-card.svelte

<script lang="ts">
  import { DateTime } from 'luxon';

  export let url = '';
  export let title = '';
  export let description = '';
  export let author = '';
  export let date = '';
  export let tags = '';

  $: publishedAt = DateTime.fromISO(date).toLocaleString(DateTime.DATE_FULL);
</script>

<div class="flex flex-col overflow-hidden rounded-lg shadow-lg border border-gray-200">
  <div class="flex flex-1 flex-col justify-between bg-white p-6">
    <div class="flex-1">
      <p class="text-sm font-medium text-indigo-600">{tags}</p>
      <a
        href={url}
        class="mt-2 block"
      >
        <p
          class="text-2xl font-semibold text-gray-900 hover:bg-gradient-to-r hover:from-emerald-400 hover:to-cyan-400 hover:bg-clip-text hover:text-transparent hover:cursor-pointer"
        >
          {title}
        </p>
        <p class="mt-3 text-base text-gray-500">
          {description}
        </p>
      </a>
    </div>
    <div class="mt-6 flex flex-col justify-center">
      <!-- <p class="text-sm font-medium text-gray-900">{author}</p> -->
      <div class="flex space-x-1 text-sm text-gray-500">
        <span>{publishedAt}</span>
      </div>
    </div>
  </div>
</div>



// routes/post-list-item.svelte

<script lang="ts">
  export let url = '';
  export let title = '';
  export let description = '';
  export let author = '';
  export let date = '';
  export let tags = '';
</script>

<li class="py-4">
  <div class="mx-auto max-w-7xl py-8 px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-base uppercase font-semibold text-gray-900">{tags}</h2>
      <a
        href={url}
        class="mt-3 text-2xl font-bold tracking-tight text-gray-900 hover:bg-gradient-to-r hover:from-emerald-400 hover:to-cyan-400 hover:bg-clip-text hover:text-transparent hover:cursor-pointer"
      >
        {title}
      </a>
      <p class="mx-auto mt-2 max-w-xl text-lg text-gray-900">
        {date}
      </p>
    </div>
  </div>
</li>

And while we’re at it, we can also add the UI boilerplate for the actual blog post. Note the props, they actually will come from the frontmatter section in markdown.



// routes/post.svelte

<script lang="ts">
  import { DateTime } from 'luxon';
  import { onMount } from 'svelte';

  export let title = '';
  export let description = '';
  export let publishedAtIso = '';
  // export let author = '';

  $: publishedAt = DateTime.fromISO(publishedAtIso).toLocaleString(DateTime.DATE_FULL);
</script>

<article>
  <div class="mx-auto max-w-6xl py-16 px-4 sm:pt-24 sm:px-6 lg:px-8">
    <div class="text-center">
      <!-- <h2 class="text-lg uppercase font-semibold text-gray-900">{tags}</h2> -->
      <h1
        class="mt-5 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"
      >
        {title}
      </h1>
      <p class="mx-auto mt-3 max-w-xl text-xl text-gray-900">
        {publishedAt}
      </p>
    </div>
  </div>

  <section class="w-full bg-white pb-16 px-4">
    <div class="prose max-w-4xl mx-auto text-gray-900">
      <slot />
    </div>
  </section>
</article>

Configuring mdsvex

To convert markdown into svelte components we need to configure the library:



// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [
    vitePreprocess(),
    // https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog#approach-2-dynamic-routes
    mdsvex({
      extensions: ['.md', '.svx'],
      // https://mdsvex.com/docs#layouts
      layout: './src/routes/post.svelte'
      // layout: {
      //   // _: './src/routes/post.svelte'
      //   blog: './src/routes/post.svelte'
      // }
    })
  ],
  extensions: ['.svelte', '.md', '.svx'],

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter()
  }
};

export default config;

Adding a blog post

While blog posts are added as +page.md files, it helps to have a master list of all the posts and their metadata available in JS to reference in other files, which is why we keep POSTS_LISTS in lib/shared/shared.constant.ts.



// lib/shared/shared.constant.ts

/**
 * This is the MASTER list of all blog posts.
 *
 * There may be duplicates everywhere, but this is the most organized
 * and parseable source of truth for blog posts.
 */
export const POSTS_LIST = [
  {
    title: 'Best online text to speech generators',
    url: '/best-online-text-to-speech-generators',
    description:
      'A high-level view of features and pricing from the newest and best online text to speech generators on the market',
    author: 'Kyle',
    date: '2023-02-05',
    isFeatured: true
  },
  {
    title: 'Best free online text to speech generators',
    url: '/best-free-online-text-to-speech-generators',
    description:
      'A high-level view of features and pricing from the newest and best free online text to speech generators on the market',
    author: 'Kyle',
    date: '2023-02-05',
    isFeatured: true
  }
];



// routes/best-online-text-to-speech-generators/+page.md

---
title: 'Best online text to speech generators'
description: 'A high-level view of features and pricing from the newest and best online text to speech generators on the market'
author: 'Kyle'
publishedAtIso: '2023-02-05'
---

<script>
...
</script>

## Current state of text to speech AI voice generators

Text to speech technology, also known as speech synthesis, is software that converts written text into spoken words.

Text to speech technology has greatly improved over the past few years, leading to more realistic and natural-sounding voices. From creating more content for social media and platforms like Youtube and Tiktok, to improving accessibility for those with disabilities, or even increasing efficiency in the workplace, text to speech has numerous applications that are making a real impact in our daily lives.

This article provides a high-level view of features and pricing from the newest and best online text to speech generators on the market.

<div id="beepbooply"></div>

## Beepbooply

Beepbooply is a new online text to speech generator created to provide access to the latest voice models at the best prices.

Providing access to over 900+ voices across 80+ languages, beepbooply sources models from Google, Microsoft, and Amazon.

They offer some of the best prices along with one-time prepaid options that go for as low as $2.

- 900+ voices
- Voices from Google, Microsoft, and Amazon
...

<a href="https://beepbooply.com" target="_blank" rel="noopener noreferrer">beepbooply</a>
...

This is the bare minimum you need to set up a markdown blog using mdsvex and Sveltekit. I went ahead and added a few more blog posts along with a navbar so you can switch between post and list of posts, here’s how it looks:

The full code repository can be found at https://github.com/KTruong008/blog-kylebuildsstuff

Build a ChatBot with ChatGPT API

kylebuildsstuff — Fri, 03 Mar 2023 11:44:17 +0000

https://youtu.be/JBrW7eH5uLg

Chatgpt, the large language model that took the world by storm just months ago, has just released an official API. And what's the first thing we should do with it?

Try to take over the world.

No, Brain, we build a Batman and Alfred chat interface.

A few things to note before we do:

There’s currently a 4096 token limit that includes both the input and output, each token is about 4 English characters.
The API is 10x cheaper than the previous best GPT model, with better results
This API is a lot faster than the regular ChatGPT

And with that, let's start by initializing a Sveltekit project along with setting up tailwindcss for styling purposes.

npm create svelte@latest .

To setup tailwindcss we use their Sveltekit guide:

https://tailwindcss.com/docs/guides/sveltekit

API boilerplate

The first part will be setting up the API calls, making sure we can call our own server, and then from the server making sure we can call the OpenAi chat completion API endpoint.

To make our server, we create a file our file like this:

// routes/api/chat/+server.ts

import { json, type RequestEvent } from '@sveltejs/kit';
import { OPENAI_API_SECRET_KEY } from '$env/static/private';

export const POST = async (event: RequestEvent) => {
    const requestBody = await event.request.json();
    const { message: _message } = requestBody;

    /**
     * Request config
     */
    const completionHeaders = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${OPENAI_API_SECRET_KEY}`
    };
    const messages = [
        {
            role: 'system',
            content: 'You are a Alfred, a most helpful and loyal fictional butler to Batman.'
        }
        // { role: 'user', content: 'Alfred, where did I leave my batmobile?' },
        // {
        //  role: 'assistant',
        //  content:
        //      'Sir, you left the Batmobile in the Batcave, where it is normally parked. Shall I have it brought to you?'
        // }
    ];
    const completionBody = {
        model: 'gpt-3.5-turbo',
        messages
    };

    /**
     * API call
     */
    const completion = await fetch('<https://api.openai.com/v1/chat/completions>', {
        method: 'POST',
        headers: completionHeaders,
        body: JSON.stringify(completionBody)
    })
        .then((res) => {
            if (!res.ok) {
                throw new Error(res.statusText);
            }
            return res;
        })
        .then((res) => res.json());

    const message = completion?.choices?.[0]?.message?.content || '';

    return json(message);
};

Note the body of the request we send to OpenAi. We use the gpt-3.5.-turbo model for chat completion, and the messages are an array of objects with each object having a “role” that can either be “system”, “assistant”, or “user”. More about these roles and the shape of the request and response here:

https://platform.openai.com/docs/guides/chat/introduction

And to call our server we create a function within our component and call it upon mounting:

// routes/+page.ts

<script lang="ts">
    import { onMount } from 'svelte';

    onMount(async () => {
        console.log('Hello world!');

        const what = await handleChatCompletion();

        console.log('what: ', what);
    });

    const handleChatCompletion = async () => {
        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: 'Hello world!'
            })
        }).then((res) => res.json());

        return response;
    };
</script>

<h1 class="text-3xl font-bold underline">Hello world!</h1>

All the calls are hard-coded right now, but that’ll do just fine as we just want to make sure the simplest calls are working.

UI boilerplate

Next, we’ll prettify the UI with tailwindcss. I went ahead and bought the tailwind UI package for this. It doesn’t explicitly support svelte but it works well enough.

We add the UI for our chat messages, along with appropriate headshots for profile pics, provided by Midjourney:

// chat-message.svelte
<script lang="ts">
    export let name = '';
    export let message = '';

    const imgSrc = name === 'Alfred' ? '/alfred-headshot.png' : '/batman-headshot.png';
</script>

<li class="flex py-4">
    <img class="h-10 w-10 rounded-full" src={imgSrc} alt="" />
    <div class="ml-3">
        <p class="text-sm font-medium text-gray-900">{name}</p>
        <p class="text-sm text-gray-500">{message}</p>
    </div>
</li>

// +page.svelte
<script lang="ts">
    import { onMount } from 'svelte';

    import ChatMessage from './chat-message.svelte';

    onMount(async () => {
        const what = await handleChatCompletion();

        console.log('what: ', what);
    });

    const handleChatCompletion = async () => {
        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: 'Hello world!'
            })
        }).then((res) => res.json());

        return response;
    };
</script>

<ul role="list" class="divide-y divide-gray-200">
    <ChatMessage name="Alfred" message="Hello world!" />

    <ChatMessage name="Batman" message="Hello Alfred!" />
</ul>

<form class="mt-4">
    <div class="relative mt-1 flex items-center">
        <input
            type="text"
            name="search"
            id="search"
            class="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        />
        <button
            on:click={() => {
                console.log('clicky');
            }}
            type="submit"
            class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5"
        >
            <kbd
                class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400"
                >Enter</kbd
            >
        </button>
    </div>
</form>

Connecting it all together

And finally, we tie everything together, formatting the messages to and from our server.

We want our Alfred bot to remember some past context when responding, so we keep track of these messages with an array and update it upon submitting messages.

// +page.ts
<script lang="ts">
    import { onMount } from 'svelte';

    import ChatMessage from './chat-message.svelte';

    let messages = [] as any;
    let inputMessage = '';

    onMount(async () => {
        await handleChatCompletion();
    });

    const handleChatCompletion = async () => {
        const userMessage = {
            role: 'user',
            content: inputMessage
        };

        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                isInitializing: messages.length === 0,
                priorMessages: messages,
                message: inputMessage
            })
        }).then((res) => res.json());

        if (inputMessage) {
            messages = messages.concat([userMessage]);
        }

        messages = messages.concat(response);
        inputMessage = '';

        return response;
    };
</script>

<ul class="divide-y divide-gray-200">
    {#if messages.length > 0}
        {#each messages as message}
            <ChatMessage role={message.role} message={message.content} />
        {/each}
    {/if}
</ul>

<form class="mt-4">
    <div class="relative mt-1 flex items-center">
        <input
            bind:value={inputMessage}
            type="text"
            name="search"
            id="search"
            class="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
        />
        <button
            on:click={handleChatCompletion}
            type="submit"
            class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5"
        >
            <kbd
                class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400"
                >Enter</kbd
            >
        </button>
    </div>
</form>

// chat-message.svelte

<script lang="ts">
    export let role = '';
    export let message = '';

    const imgSrc = role === 'assistant' ? '/alfred-headshot.png' : '/batman-headshot.png';
    const name = role === 'assistant' ? 'Alfred' : 'Batman';
</script>

<li class="flex py-4">
    <img class="h-10 w-10 rounded-full" src={imgSrc} alt="" />
    <div class="ml-3">
        <p class="text-sm font-medium text-gray-900">{name}</p>
        <p class="text-sm text-gray-500">{message}</p>
    </div>
</li>

// routes/api/chat/+server.ts

import { json, type RequestEvent } from '@sveltejs/kit';
import { OPENAI_API_SECRET_KEY } from '$env/static/private';

export const POST = async (event: RequestEvent) => {
    const requestBody = await event.request.json();
    const { priorMessages = [], message, isInitializing = false } = requestBody;

    /**
     * Request config
     *
     * <https://platform.openai.com/docs/guides/chat/introduction>
     *
     * Roles: 'system', 'assistant', 'user'
     */
    const completionHeaders = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${OPENAI_API_SECRET_KEY}`
    };
    const initialMessage = {
        role: 'system',
        content:
            'You are a Alfred, a most helpful and loyal fictional butler to Batman. Your responses should be directed directly to Batman, as if he were asking you himself.'
    };
    const messages = isInitializing
        ? [initialMessage]
        : [
                initialMessage,
                ...priorMessages,
                {
                    role: 'user',
                    content: message
                }
          ];
    const completionBody = {
        model: 'gpt-3.5-turbo',
        messages
    };

    /**
     * API call
     */
    const completion = await fetch('<https://api.openai.com/v1/chat/completions>', {
        method: 'POST',
        headers: completionHeaders,
        body: JSON.stringify(completionBody)
    })
        .then((res) => {
            if (!res.ok) {
                throw new Error(res.statusText);
            }
            return res;
        })
        .then((res) => res.json());

    const completionMessage = completion?.choices?.map?.((choice) => ({
        role: choice.message?.role,
        content: choice.message?.content
    }));

    return json(completionMessage);
};

And with that, we have ChatGPT for Batman and Alfred!

Final thoughts

Overall, the API is super simple to use and I think it opens up so many possibilities it’s hard to imagine right now.

The biggest limiter right now is probably the 4096 token limit, so you can’t just import a giant document as context, but I think there are some workarounds for this using text embeddings. I’ll have to look into that more soon.

Feel free to view the code for yourself at:

https://github.com/KTruong008/chatgpt-api-example

Redux-based routing with Rudy

kylebuildsstuff — Sun, 14 Feb 2021 15:55:35 +0000

Why

With the recent release of Redux Toolkit, redux and its related libraries have become easier than ever to integrate into react applications. I've always enjoyed using redux as a state management tool because, despite its verbosity, it always boiled down to simple actions and reducers. I've stuffed many things into redux, for better or for worse, and one of the things I still feel is for the better is routing.

I don't really have any strong arguments as to why one should put routing state in redux rather than components. They both work. I just find it simpler when routing plays nice with redux.

What

Rudy is a redux-based router and the successor to redux-first-router. At its core, it uses redux actions to manage your routing state. Actions are used to change pages, actions are used to bind to urls, actions are used to bind to components, and everything else related to routing. Once set up, this is what creating and using a route looks like in rudy:

// page.slice.ts
import { createAction } from '@reduxjs/toolkit';

export const toHelp = createAction('page/toHelp');

// home.component.ts
import { useDispatch } from 'react-redux';
import { toHelp } from './page.slice';

const Home = () => {
    const dispatch = useDispatch()

  return (
    <div>
      <p>This is the Home page</p>
      <button onClick={() => dispatch(toHelp())}>Help</button>
    </div>
  )
}

An action creator is created and then it is dispatched in the Home component upon a button click, which will then route the user to the Help page (this is a simplified example).

Because the routing is based entirely on redux actions, you can dispatch route changes anywhere in your app where would normally dispatch redux actions. This can come in handy not only in components and event handlers but also in redux middleware where you might to dispatch a route change in response to an async action:

// page.epic.ts
export const redirectToHelpEpic = (
  action$: ActionsObservable<PayloadAction>,
  state$: StateObservable<StoreState>,
): Observable<PayloadAction> =>
  action$.pipe(
    filter(storeLocationUpdateSuccess.match),
    map((_) => {
      return toHelp();
    }),
  );

In the above example, I redirect to the Help page after a successful async update using redux-observables. The same idea can be applied to other types of middleware like thunks or sagas.

How (part 1)

Every redux app needs to configure a store, and that task has been made easier thanks to the recent addition of Redux toolkit:

// store.ts
import { configureStore as configureReduxStore } from '@reduxjs/toolkit';
import { createRouter } from '@respond-framework/rudy';

// We'll get to these routes later
import { urlRoutes, pageReducer } from 'modules/page';

export const configureStore = () => {
  const { reducer: locationReducer, middleware: routerMiddleware, firstRoute } = createRouter(urlRoutes);

  const store = configureReduxStore({
    reducer: {
      location: locationReducer,
            page: pageReducer
    },
    middleware: [
      routerMiddleware,
    ],
  });

  return { store, firstRoute };
};

rudy provides a reducer, middleware, and firstRoute. The first two objects hook into the redux store while the firstRoute is a little oddity that needs to be dispatched before the app is rendered. Plugging it into your component tree can look like this:

// index.tsx

const { store, firstRoute } = configureStore();

function render() {
  ReactDOM.render(
      <ReduxProvider store={store}>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </ReduxProvider>
    document.getElementById('root'),
  );
}

store.dispatch(firstRoute()).then(() => render());

These steps setup rudy for use in our store. Now we can create our own little redux slice and configure the actions that rudy will watch and bind to in order to manage routing.

How (part 2)

Like any other redux slice, we're going to need actions, reducers, and selectors. But in order to bind our actions to urls and components we're also going to create a couple more mapping objects:

// modules/page/page.slice.ts
import { createSlice, createSelector, createAction } from '@reduxjs/toolkit';

// Our action creators
export const toOrders = createAction('page/toOrders');
export const toHelp = createAction('page/toHelp');
export const toSettings = createAction('page/toSettings');
export const toManagePlan = createAction('page/toManagePlan');
export const toNotFound = createAction('page/toNotFound');

// Mapping actions to routes (used in rudy initialization)
export const urlRoutes = {
  [toOrders.toString()]: '/orders',
  [toHelp.toString()]: '/help',
  [toSettings.toString()]: '/settings',
  [toManagePlan.toString()]: '/manage-plan',
  [toNotFound.toString()]: '/not-found',
};

// Mapping actions to components (note that the values must match the names of the components)
export const componentRoutes = {
  [toOrders.toString()]: 'Orders',
  [toHelp.toString()]: 'Help',
  [toSettings.toString()]: 'Settings',
  [toManagePlan.toString()]: 'ManagePlan',
  [toNotFound.toString()]: 'NotFound',
};

// An array of all our action types for convenience
export const routeActionTypes = [
  toOrders.toString(),
  toHelp.toString(),
  toSettings.toString(),
  toManagePlan.toString(),
  toNotFound.toString(),
];

// Our redux slice
const pageSlice = createSlice({
  name: 'page',
  initialState: {
    currentPage: componentRoutes[toHelp.toString()],
  },
  reducers: {},
  extraReducers: Object.fromEntries(
    routeActionTypes.map((routeActionType: string) => {
      return [
        routeActionType,
        (state: any, action) => {
          state.currentPage = componentRoutes[action.type];
        },
      ];
    }),
  ),
});

const { reducer } = pageSlice;

export const pageReducer = reducer;

// selectors
export const selectPage = (state: StoreState): PageState => {
  return state.page;
};

export const selectLocation = (state: StoreState): LocationState => {
  return state.location;
};

export const selectCurrentPage = createSelector(
  selectPage,
  (pageState) => pageState.currentPage,
);

And now we're good to go. Our routes are synced and tracked to redux and we can use them in our components like this:

// pages/index.ts
export { Orders } from './orders';
export { PickupAndDelivery } from './pickup-and-delivery';
export { Help } from './help';
export { Settings } from './settings';
export { ManagePlan } from './manage-plan';
export { NotFound } from './not-found';

// app.component.tsx
import React from 'react';
import { useDispatch } from 'react-redux';
import { DesignSystemProvider, Page } from '@SomeDesignSystem';
import { useSelector } from 'react-redux';

import { selectCurrentPage } from 'modules/page';
import * as pages from 'pages';

export const App = () => {
  const dispatch = useDispatch();

  const currentPage = useSelector(selectCurrentPage);
  const Component = pages[currentPage];

  return (
    <DesignSystemProvider>
      <Page>
        <Component />
      </Page>
    </DesignSystemProvider>
  );
};

The current page can be queried for and updated by using actions and selectors from the page slice we created, and any routing-related data can be found in the location reducer provided by rudy, which can also be queried for as any other redux reducer.

Gotchas

You may want to integrate url parameters at some point in your development, and you may find that rudy and redux don't play nice together out of the box.

You can create actions and routes that use parameters like this:

export const toManageLocation = createAction('page/toManageLocation', function prepare(locationId: string) {
  return {
    payload: {
      locationId,
    },
  };
});

export const urlRoutes = {
  [toManageLocation.toString()]: '/manage-location/:locationId',
};

But Redux toolkit requires actions to have a payload property while rudy actions use a params property instead when it comes to parameters. The good news is that it's all redux and it can be fixed with redux tools, namely redux middleware. I worked around this issue by creating a middleware that converts the payload from routing-specific actions to params so that rudy and RTK can play nice together again.

const rudyActionPayloadToParamsConverter = (store: any) => (next: any) => (action: any) => {
  const shouldConvert = routeActionTypes.includes(action?.type) && !!action?.payload;

  if (shouldConvert) {
    const nextAction = {
      type: action?.type,
      params: action?.payload,
    };
    return next(nextAction);
  }

  return next(action);
};

const store = configureReduxStore({
    reducer: {
      ...
    },
    middleware: [
      rudyActionPayloadToParamsConverter,
      routerMiddleware,
      epicMiddleware,
    ]
  });

Conclusion

Routing state can easily be integrated into and managed by redux thanks to rudy. If you're looking for a router designed for redux, I highly recommend this library. Though the documentation may be lacking and it's popularity is nowhere near more popular routing libraries, it works just fine.