Happy (Chinese) New Year

The month of January has certainly passed us so very quickly and we are now in squarely in the Year of the Rabbit!

祝大家 恭喜发财 万事如意 心想事成 财源广进！

The Lucky Cat Project

• Production site: https://lucky-cat.tobias-leong.dev/
• GitHub: https://github.com/jaabberwocky/cny-gpt-svelte

Context

Started this project by challenging myself to build a complete application using SvelteKit 1.0 and was scratching my head for ideas until I chanced upon this idea: what if I built on top of all the craze around ChatGPT and built something that generated auspicious phrases for folks during CNY? And that was what I did.

Tech Stack

1. openai - I used the davinci-003 model as it was available through the OpenAPI and ChatGPT wasn't
2. typescript - Really can't do without this one
3. svelte - I wanted to see how far SvelteKit 1.0 go with this, especially on the ability with CSR/SSR and the ability to have a "server" serving API routes without having to spin up a separate service
4. midjourney - With all the hype on GANs and image generation, I had to try this too. The image of the cat was generated by midjourney!

It worked really really well! What I particularly enjoyed about this was the ability to:

1. Serve APIs - `nuff said about having to deal with CORS and the need to maintain a separate API service
2. Performance - SSR made things fast, real fast
3. Developer Experience - Let me go into that even more below:

• Stores

  • This was such a lovely feature that allowed me to maintain and update state easily across components without having to rely on external tools as we do in React world (cough redux)
  • The API to use this is absolutely fantastic:

  // stores.ts
  export const num = writable('');
  
  // Component.svelte
  import {num} from 'stores';
  
  <h1>This is my store: $num</h1>
  
  <button on:click={handleClick}>Add one</button>
  
  <script lang>
  
  function handleClick(event) {
      $num += 1;
  }
  </script>
  

  • You can simply subscribe to a value through using the "$" syntax and also update it using this same syntax. Clicking on the button in the example above will update the value of the store and any other components subscribed to this will also have the update.

  • An added benefit is not having a bevy of const [name, setName] = useState("") in each and every React component

• Writing as-vanilla-as-it-can-be JS/CSS/HTML

  • You can write vanilla JS (or TypeScript) / CSS / HTML in the Svelte components itself
  • No more messing around with JSX and remembering where they are similar and where they are not

• Works right out of the box

  • No need for fiddling with a thousand things to work right or having to face the difficult choice of going with create-react-app and having to possibly eject later
  • Things work really well out of the box

It's not all a bed of roses and I'm sure Svelte itself will go through more iterations but the criticism that it wasn't in 1.0 and in a stable state should be safely put to rest. Squarely putting this as a tool of choice when I next have to build an web app!