The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Learn Svelte

SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want. 

As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity. 

As you build your blog, you will learn how to:

- Style Svelte components with TailwindCSS
- Add error pages to different routes
- Query your CMS in the front end
- Parse and validate your data with Zod and JSDoc
- Deploy both Sanity and your app to the web

Build a Sanity CMS Powered SvelteKit Blog

We are now ready to deploy. We can first deploy our CMS by running the command `npm run deploy`. Make sure you are in that project's terminal when you deploy.

Next we need to set up a github repository for our app. Then we can push our code to the repository.

Finally, we can go to Vercel. Create an account if you do not have one and link it to your github. If you are creating an account you will need to make sure that you give Vercel permission to read your repositories or a selected repository. 

Then in your Vercel dashboard click 'New Project' and choose your newly created project for your SvelteKit blog. 

Add your environment variables (you can copy and paste them)

Then deploy 🎉

After deployment go to the url it provides and now you have a deployed blog. 

To make sure all works as expected go ahead and log in to Sanity. Choose your project. It will be named whatever name you gave it when creating your Sanity project. Then click "Open Sanity Studio".

Now navigate to Posts and click the create new post icon. Go ahead and create a second post. Click "Publish" and then navigate back to your posts page on your blog site and now we have posts uploading to our site as we write them. 

Note: If you are already on the the /posts page on your blog site when you go back to it, you will need to refresh the page.

Deploy Sanity and Sveltekit to Production

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Up to this point in our app, the only help we are getting from typescript is from SvelteKit's built in types. But these types don't infer our data structure so we need to add types using JSDoc and zod. 

One of the benefits of zod is that it can be used for schema validation in javascript by using the built in parse helper function. You can also infer type definitions from zod schemas using the infer helper. 

We can then use those types that we infer from zod schemas in our JSDoc comments to get type safety where we need. 

If you want a deeper dive into typescript and zod, Matt Pocock has created to great free resources at [Total Typescript](https://www.totaltypescript.com/tutorials)

Parse and Infer Data Being Fetched in SvelteKit with Zod and JSDoc

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



We will combine our knowledge of Dynamic routing to pass a dynamic parameter to a function that will query a single post from our Sanity CMS. When we fetch our blog post data this is a great place to do some processing of the content that we get back. If you didn't process your blog post markdown, it would come back as a string which doesn't look too great on the page.

To make our markdown pretty we will install and use the `MDSvex` library to use it's compile function and render our markdown.
  
We'll see that `MDSvex` gives us a Promise from `compile` because it's an async function so we'll use the Svelte `await` block to conditionally show the post body when it is ready, otherwise we'll show a loading state.

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

We will install the `@sanity/client` package and use the GROQ query language to query all of our posts from our CMS. 

To do this in SvelteKit we need to make a few adjustments to how we load data. We now need a async `load` function that runs on the server because sanity needs to access our environment variables. To do this we'll convert our `+page.js` to `+page.server.js` and make our function `async`.

Query a Sanity CMS from a SvelteKit Blog Frontend with +page.server.js

In this lesson, we use Sanity's Vision feature that provides us with a playground editor to use Sanity's GROQ query language to interact and get specific data from our CMS.

GROQ affords us the ability to query our CMS data in the specific format that we want. 

If you want a deeper dive into the GROQ query language, check out this [free course](https://egghead.io/courses/introduction-to-groq-query-language-6e9c6fc0) on egghead from John Lindquist

Query Sanity Content with GROQ to Return a List of Posts

Instead of writing all of our posts as files in our code editor, we can get the benefit of a CMS to help us store our content. We will use Sanity to write our posts in markdown. Then we can use Sanity's javascript client in our project get our content data from our CMS.

Set Up Sanity CMS to Power a SvelteKit Blog

Dynamic routing is a critical part of most applications. For our blog, we want to have pages load dynamically given a post or article slug. Continuing with our dummy data, we will use the slug to navigate dynamically to a new page and only display information for that singular item from our data.

These dynamic pages include an accompanying `+page.js` file that we can load data from. In this file we will check that the current page slug equals the post from our data store and display that posts data on the page.

Render Dynamic Pages in SvelteKit with Parameter Based Routing

We have some dummy data that we will use to get a grasp on data loading patterns in SvelteKit. Each route gets its on `+page.svelte` but we can also provide a route with a `+page.js` file that allows us to load data and expose it to our page.

You'll learn how this `+page.js` exports a load function that exposes a data object to the page you are loading data to. During this process, we'll use JSDoc to type our page data for some nice types.

Load Data on a SvelteKit Page with +page.js load Function 

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

We will go through and add tailwind to our project and create a simple navbar. Tailwind is an incredibly easy to learn 'utility-first' css framework. 

Tailwind has a great CLI to help initialize the set up for use so that we don't have to create every config file by hand.

When you run `npx tailwindcss init tailsind.config.cjs -p` you'll have the proper postcss and tailwind config files create. 

We will then add the tailwind base styles to our global css and point tailwind to all the files we want it to process.

From there we'll get some practice in by building out a `<Navbar />` component that will have some basic styles applied.

Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

SvelteKit gives us unique files for adding layouts. Using the `+layout.svelte` file name, we can set layouts for all levels of routes. We can also set `+error.svelte` in each route so that we can handle any errors for these routes. 

We'll do that in this lesson by adding a `<h1>Header</h1>` and `<h4>Footer</h4> ` that wraps a `<slot />` to see it rendered on different pages. Notice that we will need to utilize `<slot />` to render the routes content onto the page as well. This gives us finegrain control of where content goes in our layout.

Add an Error Page and Layouts to SvelteKit Routes 

A route is very simple to create in SvelteKit. Using 'file-based routing' you simply add a .svelte file (posts.svelte) in the routes folder. Then we can navigate to where our app is running. In this case, we go to localhost:4000/posts. 

The index.svelte file can be thought of as the home route which evaluates to localhost:4000. 

We will see more types of routes as we go along. 



Add a Route to a SvelteKit Application

In svelte, you define components in a file. 

This is a special file extension that allows you to add your script, style and template all in one place. You’ll see how a counter component will hold state in Svelte as well as interact and style that component through the different parts of the file.

We'll implement the classic counter example that will show you how to update component state.

You can do a deep dive on Svelte with Tomasz Łakomy’s [Up and running with Svelte 3](https://egghead.io/courses/getting-started-with-svelte-3-05a8541a)

Understand the Structure of a Svelte Component

Web3 is a paradigm shift in how applications are interacted with, ran, and built. 

It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).  

This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

Building this type of smart contract is exactly what Matías is going to show you how to do right now.

Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

While you build this application you will learn how to:

- Write a smart contract using Solidity language
- Test the smart contract using just JavaScript through the waffle framework
- Communicate and interact with the smart contract using ethers.js in a SvelteKit application
- Deploy your smart contract to make it public and accessible to anyone

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

Now that we have an application that is accepting tips to the smart contract that was defined, we need to be able to withdraw the funds that are sent to the contract. The smart contract function for this is already defined so we will just need to call the function from the front end.

To do this we will create a new route to display the contract information. We will then check if the current user is the contract owner and if so allow that user to withdraw the contract funds by clicking a button that we wire up to call the withdraw function from the smart contract.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Withdraw eth from a Smart Contract in a Svelte Application

It is time to interact with the contract, let's send some eth!

For this you'll need a form that is rendered only when the wallet is connected.
This form use the `sendTip` function and gather some required information. On submit, it will read the `sendingTip` loading state variable and disable or enable the button.

## Important

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here. 

This lesson was recorded before the latest breaking changes, the content is still valid but it sometimes references a file that does not exists anymore.

Now: 
`src/routes/index.svelte` is called `src/routes/+page.svelte`

`src/routes/__layout.svelte` is called `src/routes/+layout.svelte`


Everything else is 100% valid. This particular content will be updated when Sveltekit reaches 1.0.0 stable.

Create a Form in Svelte and Send a Tip to an Solidity Smart Contract

We'll start our project by installing all of the necessary tools to get started with Web3 development. 

This project will use SvelteKit Tailwind CSS for it's UI. We have some handy initializers that we will run to do the configuration for us. 

On the Web3 side of things we will use Hardhat, Ethers.js, and hardhat-waffle for smart contract development.

Set up an Ethereum Project using SvelteKit with Tailwind CSS and Hardhat

The first step to starting a SvelteKit projects is initialize the app with commands from SvelteKit's website. 

```bash
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
```

We'll then test our app is running by adding html to our `src/routes/index.svelte` route.

Create a new SvelteKit project

We will learn how to use the fade transition in svelte to create a simple transition. We will also look at the additional parameters you can pass to this transition to create a staggering effect.

Create a Fade Transition with Svelte

We will learn how to create a component and use the tweened function from the `svelte/motion` package. We will create a function that will work as our looping mechanism and learn how to reduce the chances of our function having a memory leak by using the `onDestroy` lifecycle hook when a component is unmounted.

Create a Looping Tween Motion with Svelte

You will learn how to create a reusable button in Svelte which allows you to update its content, it's look and the action it should perform when clicked.

Create a Reusable Button Component with Svelte

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.
