Javascript

Intro to Svelte

Published Jun 8, 2021

Updated Feb 14, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Intro to Svelte

Svelte is a JavaScript tool that may look similar to other frameworks, or have similar concepts, but it works differently, making it stand out from the rest. Svelte is reactive by nature, and instead of using a virtual dom, it will directly update the DOM in an efficient way.

It is possible to achieve this by delegating its work to a compile step, which will make the framework itself "disappear", and will ship some optimized vanilla JavaScript code.

Let's take a look at an example of a Svelte component.

<!-- App.svelte -->
<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>

As you can see, at a first glance, it is no different than plain old HTML (for a non-dynamic component). You can keep using the class keyword.

Let's add some CSS to our component.

<!-- App.svelte -->
<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>
<p class="styled">CSS rocks!</p>

<style>
  h1 {
    font-size: 30px;
  }
  .styled {
    color: red;
  }
</style>

Once again, this looks like regular CSS, and that's because it is regular CSS.

How about adding some JS to it?

<!-- App.svelte -->
<script>
  function logSomething(something) {
    console.log(something);
  }

  logSomething('it works');
</script>

<h1>This is Svelte</h1>
<p class="omg">It looks like regular html</p>
<p class="styled">CSS rocks!</p>

<style>
  h1 {
    font-size: 30px;
  }
  .styled {
    color: red;
  }
</style>

So, we have HTML that looks like HTML, CSS that looks like CSS, and JavaScript that looks like JavaScript, all packed in a single svelte file.

Of course, this is not everything Svelte has to offer.

How to start a new Svelte project

To start a svelte project, you can use the command npx degit [sveltejs/template](https://github.com/sveltejs/template) my-svelte-project as suggested on their website, but my preferred way of doing it these days is to use vite.

Both methods can be set up to use TypeScript.

Let's create a new project.

npm init @vitejs/app

✔ Project name: · my-svelte-project
✔ Select a framework: · svelte
✔ Select a variant: · TypeScript

cd my-svelte-project
pnpm install //use the package manager you prefer
pnpm run dev

Now that our project is created, it will have a folder structure that looks like this.

How do you do x in Svelte?

Let's create a new component to be able to test different features of Svelte. I will remove the default component created (Counter.svelte)

rm -rf src/lib/Counter.svelte     // removes the component created by default
touch src/lib/Example.svelte      // creates a new svelte component

We need to update App.svelte to import our new component and render it

<!-- App.svelte -->
<script>
  import Example from './lib/Example.svelte';
</script>

<Example />

Using variables in the template

To use a variable in the template we need to: Declare a variable in our <script> Use the variable within brackets {} in the template

In our component:

<!-- src/lib/Example.svelte -->
<script lang="ts">
  let greeting: string = 'Hi';
</script>

<p>{greeting}</p>

If you run the application with the command npm run dev, the project will start, and run by default on port 3000. Changes will be reflected in the browser.

props/inputs

To create an input we need to export a variable.

<!-- src/lib/Example.svelte -->
<script lang="ts">
  export let name: string;
  let greeting: string = 'Hi';
</script>

<span>{greeting}, {name}</span>

We will need to update our App to pass the value of name.

<!-- App.svelte -->
<script>
  import Example from './lib/Example.svelte';
</script>

<Example name="John" />

Event

You can listen to events with the on directive.

Let's add an event to our span element in the Example component.

<script lang="ts">
  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }
</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>

You can now see the text changing when clicking on the button.

Sometimes you will need to pass a custom event from a child component to a parent component. To trigger a custom event we need to import and use the createEventDispatcher method.

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

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }

  function toggleName() {
    dispatch('myCustomEvent');
  }
</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

We need to update our App component too, to do something with the event.

<script>
  import Example from './lib/Example.svelte';

  let name = 'John';
  function onMyCustomEvent() {
    if (name === 'John') {
      name = 'Jane';
    } else {
      name = 'John';
    }
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />

This event can pass data using the second argument in the dispatch method.

<!-- src/lib/Example.svelte -->

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

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }

    let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

</script>

<p>{greeting}, {name}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

<script>
  import Example from './lib/Example.svelte';

  let name = 'John';
  function onMyCustomEvent(event) {
    name = event.detail;
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />

Now the Example component is emitting an event with the new name. And the App component is handling it.

Reactivity

One of the main features of svelte is that it makes reactivity so easy to reason about.

To include a reactive statement, you need to prepend it with $:. The compiler will figure out when it should update the reactive values based on the variables that it depends on. In our previous example:

<!-- src/lib/Example.svelte -->

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

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  $: reactiveValue = `You're saying ${greeting} to ${name}`

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }

    let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

</script>

<p>{greeting}, {name}</p>
<p>{reactiveValue}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>

In this example, reactiveVlaue is dependant on name and greeting. Whenever any of these values changes, reactiveValue will be updated.

Reactivity in Svelte will be triggered by assignments, which means that it's required to assign a value to make it work. Array.prototype.push is not an assignment, so it will not work.

Flow control

if/else You can change your template rendering based on some condition use if else. The syntax looks like this

{#if <condition>}
	some code
{:else if}
	more code
{:else}
	more code
{/if}

The syntax is similar to other template modifiers. start with {# }, continue with {: } and end with {/ }.

each You can iterate over an array with an each block.

{#each anArray as item, i}
<span>{item.name}{/span}
{/each}

When iterating this way and modifying the array, items will be added or removed at the end of the block, and the values of the items will be updated accordingly.

If you need to keep track of each element, you can use a key. This is common for other frameworks too.

The syntax for this is:

{#each anArray as item (item.id)}
<span>{item.name}{/span}
{/each}

where the id is the unique key in this example.

Asynchronous rendering

Sometimes, you need to wait before rendering something (or not). We can make use of an async block in this case. Similar to the other template modifiers, the syntax is like this.

{#await aPromise}
	<p>Somthing to render while promise has not resolved
{:then value}
	<p>If the promise is successful you can render the value: {value}</p>
{:catch error}
	<p>There was an error: {error.message}</p>
{/await}

Stores

Another nice feature of svelte is stores, which provides a way of having global pieces of state in your application. They can be accessed anywhere in your application, and are reactive.

A readable store cannot be modified from the outside (like a component). A writable store can be accessed and updated from a component. The third kind of store is a derived store, which will depend on other stores, and update accordingly.

Let's share some state between components using a store:

// lib/stores.ts
import { writable } from 'svelte/store';

export const age = writable(32);

<!-- src/lib/Example.svelte -->

<script lang="ts">
  import { createEventDispatcher } from 'svelte';```
  import { age } from './stores.js';

  const dispatch = createEventDispatcher();

  export let name: string;
  let greeting: string = 'Hi';

  $: reactiveValue = `You're saying ${greeting} to ${name}`

  function toggleGreeting() {
    if (greeting === 'Hi') {
      greeting = 'Bye';
    } else {
      greeting = 'Hi';
    }
  }

  function toggleName() {
  	let nextName;
    if (name === 'John') {
      nextName = 'Jane';
    } else {
      nextName = 'John';
    }
    dispatch('myCustomEvent', nextName);
  }

   function toggleAge() {
   	age.update(value => value === 32 ? 35 : 32);
  }

</script>

<p>{greeting}, {name}</p>
<p>{reactiveValue}</p>
<button on:click={toggleGreeting}>Toggle greeting</button>
<button on:click={toggleName}>Toggle Name</button>
<button on:click={toggleAge}>Toggle Age</button>

<!-- src/lib/Age.svelte -->

<script lang="ts">
  import { age } from './stores';
</script>

<span>Your age is: {$age}</span>

<script>
  import Example from './lib/Example.svelte';
  import Age from './lib/Age.svelte';

  let name = 'John';
  function onMyCustomEvent(event) {
    name = event.detail;
  }
</script>

<Example {name} on:myCustomEvent={onMyCustomEvent} />
<Age />

Svelte is a fully-featured framework that shifts some of the load to the compiler process. There's more to it like animations and context. So make sure to keep an eye on it, and give it a try whenever you can.

Sapper

Sapper is a framework built on top of Svelte, which adds more to it like router navigations, SSG, and SSR. It never reached v1.0, but it led the way for the future of Svelte.

Svelte-Kit and the future

Announced last year, Svelte-Kit takes what's learned in Svelte and Sapper, and combines them into one single tool/framework, so you don't have to decide to either use Sapper or regular Svelte. It preserves the main features of Sapper, like file-based routing, SSR, and SSG. It's still in Beta, but you can try it today. (I already migrated a Sapper site). Svelte-Kit uses Vite by default.

If you want to give it a try, you can start a new project by running npm init svelte@next my-app.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Ignacio Falk
I love to learn new things and share what I know. Mentor, Writer, Speaker Member of the local community
@flakolefluk @flakolefluk

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

Danny Thompson, Director of Technology at This Dot Labs, talks with Tanner Linsley, Creator of TanStack, about his latest project, TanStack Start. They discuss the challenges of existing frameworks like Next.js and Remix, the development of TanStack Router, and the future of React Server Components. Tanner also explains how caching strategies and fine-grained invalidation can transform the user experience. Chapters - - Introduction & Tanner’s Background (00:00) - Going Full-Time on TanStack (01:00) - The Birth of TanStack Router (02:21) - Why Build Another Framework? (04:00) - React Server Components: Potential & Limitations (07:05) - Fine-Grained Cache Invalidation & UX (09:02) - Parallel Data Fetching in Routing (13:39) - TanStack Start: Alpha & Future Plans (16:41) - Where to Learn More About TanStack (18:48) Find Tanner Linsley on Social Media Twitter: https://x.com/tannerlinsley Linkedin: https://www.linkedin.com/in/tannerlinsley/ Github: https://github.com/tannerlinsley TanStack: https://tanstack.com/ Sponsored by Wix Studio...

Oct 9, 2024

1 min

TanStack QueryJavaScriptReact

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

Introduction to Zod for Data Validation

As web developers, we're often working with data from external sources like APIs we don't control or user inputs submitted to our backends. We can't always rely on this data to take the form we expect, and we can encounter unexpected errors when it deviates from expectations. But with the Zod library, we can define what our data ought to look like and parse the incoming data against those defined schemas. This lets us work with that data confidently, or to quickly throw an error when it isn't correct. Why use Zod? TypeScript is great for letting us define the shape of our data in our code. It helps us write more correct code the first time around by warning us if we are doing something we shouldn't. But TypeScript can't do everything for us. For example, we can define a variable as a string or a number, but we can't say "a string that starts with user_id_ and is 20 characters long" or "an integer between 1 and 5". There are limits to how much TypeScript can narrow down our data for us. Also, TypeScript is a tool for us developers. When we compile our code, our types are not available to the vanilla JavaScript. JavaScript can't validate that the data we actually use in our code matches what we thought we'd get when we wrote our TypeScript types unless you're willing to manually write code to perform those checks. This is where we can reach for a tool like Zod. With Zod, we can write data schemas. These schemas, in the simplest scenarios, look very much like TypeScript types. But we can do more with Zod than we can with TypeScript alone. Zod schemas let us create additional rules for data parsing and validation. A 20-character string that starts with user_id_? It's z.string().startsWith('user_id_').length(20). An integer between 1 and 5 inclusive? It's z.number().int().gte(1).lte(5). Zod's primitives give us many extra functions to be more specific about *exactly* what data we expect. Unlike TypeScript, Zod schemas aren't removed on compilation to JavaScript—we still have access to them! If our app receives some data, we can verify that it matches the expected shape by passing it to your Zod schema's parse function. You'll either get back your data in exactly the shape you defined in your schema, or Zod will give you an error to tell you what was wrong. Zod schemas aren't a replacement for TypeScript; rather, they are an excellent complement. Once we've defined our Zod schema, it's simple to derive a TypeScript type from it and to use that type as we normally would. But when we really need to be sure our data conforms to the schema, we can always parse the data with our schema for that extra confidence. Defining Data Schemas Zod schemas are the variables that define our expectations for the shape of our data, validate those expectations, and transform the data if necessary to match our desired shape. It's easy to start with simple schemas, and to add complexity as required. Zod provides different functions that represent data structures and related validation options, which can be combined to create larger schemas. In many cases, you'll probably be building a schema for a data object with properties of some primitive type. For example, here's a schema that would validate a JavaScript object representing an order for a pizza: ` Zod provides a number of primitives for defining schemas that line up with JavaScript primitives: string, number, bigint, boolean, date, symbol, undefined, and null. It also includes primitives void, any, unknown, and never for additional typing information. In addition to basic primitives, Zod can define object, array, and other native data structure schemas, as well as schemas for data structures not natively part of JavaScript like tuple and enum. The documentation contains considerable detail on the available data structures and how to use them. Parsing and Validating Data with Schemas With Zod schemas, you're not only telling your program what data should look like; you're also creating the tools to easily verify that the incoming data matches the schema definitions. This is where Zod really shines, as it greatly simplifies the process of validating data like user inputs or third party API responses. Let's say you're writing a website form to register new users. At a minimum, you'll need to make sure the new user's email address is a valid email address. For a password, we'll ask for something at least 8 characters long and including one letter, one number, and one special character. (Yes, this is not really the best way to write strong passwords; but for the sake of showing off how Zod works, we're going with it.) We'll also ask the user to confirm their password by typing it twice. First, let's create a Zod schema to model these inputs: ` So far, this schema is pretty basic. It's only making sure that whatever the user types as an email is an email, and it's checking that the password is at least 8 characters long. But it is *not* checking if password and confirmPassword match, nor checking for the complexity requirements. Let's enhance our schema to fix that! ` By adding refine with a custom validation function, we have been able to verify that the passwords match. If they don't, parsing will give us an error to let us know that the data was invalid. We can also chain refine functions to add checks for our password complexity rules: ` Here we've chained multiple refine functions. You could alternatively use superRefine, which gives you even more fine grained control. Now that we've built out our schema and added refinements for extra validation, we can parse some user inputs. Let's see two test cases: one that's bound to fail, and one that will succeed. ` There are two main ways we can use our schema to validate our data: parse and safeParse. The main difference is that parse will throw an error if validation fails, while safeParse will return an object with a success property of either true or false, and either a data property with your parsed data or an error property with the details of a ZodError explaining why the parsing failed. In the case of our example data, userInput2 will parse just fine and return the data for you to use. But userInput1 will create a ZodError listing all of the ways it has failed validation. ` ` We can use these error messages to communicate to the user how they need to fix their form inputs if validation fails. Each error in the list describes the validation failure and gives us a human readable message to go with it. You'll notice that the validation errors for checking for a valid email and for checking password length have a lot of details, but we've got three items at the end of the error list that don't really tell us anything useful: just a custom error of Invalid input. The first is from our refine checking if the passwords match, and the second two are from our refine functions checking for password complexity (numbers and special characters). Let's modify our refine functions so that these errors are useful! We'll add our own error parameters to customize the message we get back and the path to the data that failed validation. ` Now, our error messages from failures in refine are informative! You can figure out which form fields aren't validating from the path, and then display the messages next to form fields to let the user know how to remedy the error. ` By giving our refine checks a custom path and message, we can make better use of the returned errors. In this case, we can highlight specific problem form fields for the user and give them the message about what is wrong. Integrating with TypeScript Integrating Zod with TypeScript is very easy. Using z.infer<typeof YourSchema> will allow you to avoid writing extra TypeScript types that merely reflect the intent of your Zod schemas. You can create a type from any Zod schema like so: ` Using a TypeScript type derived from a Zod schema does *not* give you any extra level of data validation at the type level beyond what TypeScript is capable of. If you create a type from z.string.min(3).max(20), the TypeScript type will still just be string. And when compiled to JavaScript, even that will be gone! That's why you still need to use parse/safeParse on incoming data to validate it before proceeding as if it really does match your requirements. A common pattern with inferring types from Zod schemas is to use the same name for both. Because the schema is a variable, there's no name conflict if the type uses the same name. However, I find that this can lead to confusing situations when trying to import one or the other—my personal preference is to name the Zod schema with Schema at the end to make it clear which is which. Conclusion Zod is an excellent tool for easily and confidently asserting that the data you're working with is exactly the sort of data you were expecting. It gives us the ability to assert at runtime that we've got what we wanted, and allows us to then craft strategies to handle what happens if that data is wrong. Combined with the ability to infer TypeScript types from Zod schemas, it lets us write and run more reliable code with greater confidence....

Nov 15, 2024

7 mins

JavaScriptZod

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Intro to Svelte

Intro to Svelte

How to start a new Svelte project

How do you do x in Svelte?

Using variables in the template

props/inputs

Event

Reactivity

Flow control

Asynchronous rendering

Stores

Sapper

Svelte-Kit and the future

Ignacio Falk

You might also like

Learning Paths for Next.JS Developers with Ankita Kulkarni

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

Overview of the New Signal APIs in Angular

Introduction to Zod for Data Validation

Let's innovate together!

You might also like

Learning Paths for Next.JS Developers with Ankita Kulkarni

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

Overview of the New Signal APIs in Angular

Introduction to Zod for Data Validation