Courses for Front-End Web Developers

Learn how to display custom components in a [Tanstack Table cell](https://tanstack.com/table/latest/docs/guide/cells), including how to render capitalized text, apply conditional styling with class helper functions, and format dates using the `Intl` API for readable display. 

`flexRender` allows you to utilize the `cell` callback method in your column definitions. Tanstack table will call this function to render the custom component you defined.

Render Custom JSX in a Tanstack Table cell

Use tanstack table flexRender method to render custom components in a table component. Capitalize letters, apply conditional styling, and render dates with Intl



Svelte has always been a game-changer in the web development world, offering a unique, compiler-first approach to building user interfaces. With the release of **Svelte 5**, the
framework has pushed boundaries even further, redefining how developers think about reactivity, state management, and component composition.

In this article, we’ll dive deep into what’s new in Svelte 5, walk through practical examples, and explain how these updates improve your development experience. Whether you’re
just starting out or a seasoned Svelte developer, there’s plenty to learn and love here.

---

## Why Developers Love Svelte: A Quick Refresher

Before diving into Svelte 5, let’s take a moment to appreciate what makes Svelte special. Unlike other frameworks like React or Vue, Svelte doesn’t rely on a virtual DOM. Instead,
Svelte compiles your components into highly optimized JavaScript during build time. The result? Faster load times, less overhead, and a cleaner, more intuitive developer
experience.

If you’ve used Svelte before, you’re already familiar with its simplicity and power. But with Svelte 5, things just got even better.

---

## What’s New in Svelte 5?

Let’s start with a high-level overview of the key new features in Svelte 5:

1. **Runes:** A revolutionary reactivity model that makes state management explicit and predictable.
2. **Snippets:** Inline reusable components for cleaner and modular code.
3. **Improved state management tools:** New ways to handle complex states and derived data.
4. **Enhanced lifecycle hooks and debugging tools.**
5. **Better CSS handling and animations.**

Now let’s break these down with real-world examples.

---

## Setting Up a Svelte 5 Project

Starting a Svelte 5 project is easier than ever, thanks to the revamped CLI. Run this command to get started:

```bash 

npx sv create my-svelte-5-app
cd my-svelte-5-app
npm install
npm run dev 
```


You’re now ready to explore the world of Svelte 5!

> It's worth noting that the recommended way to setup a new project is by using [SvelteKit](https://svelte.dev/docs/kit), the official application framework from the Svelte team powered by [Vite](https://vite.dev/)
> If you're completely new to Svelte world, don't worry, you can ignore all the nice features SvelteKit brings and dive into that later.


---

## Building Your First Svelte Component

Svelte components are self-contained files with HTML, CSS, and JavaScript.

Componentes are the building blocks of any Svelte application (and to be honest, of any web application in general). You create components inside `.svelte` files, that is basically
a superset of HTML.

Here’s a quick example:

```svelte 
<script> let name = 'World'; </script>
<style> h1 { color: #ff3e00; } </style>

<h1>Hello, {name}!</h1>
```

This component is simple, yet powerful:
- The code between the `<script>` block contains Javascript/Typescript that runs when a component instance is created. Variables declared here can be then used in the component's
markup.
- The `{name}` in the markup dynamically updates whenever the `name` variable changes. 
- Styles are scoped, so the `h1` styling won’t affect other components.

---

## Introducing Runes: Reactivity Redefined

The most exciting addition to Svelte 5 is **runes**, which give you fine-grained control over state management. In previous versions, Svelte’s reactivity was implicit. With runes,
it’s now explicit, making your code easier to reason about.

Runes are sumbols that can be used in your `.svelte`, `.svelte.js/ts` files to control the Svelte compiler. You can thin on Svelte as it's own language, here runes are part of the
syntax for this language.

Runes are prefixed by the `$` symbol and looks like functions, but there are some differences between them and common Javascript functions:

- You don't need to import them since they are "part of the language".
- They can't be used as values or arguments.
- They are only valid at certain positions in the file. 

### `$state` for Reactive Variables

Use `$state` to define a reactive variable:

```svelte 
<script> let count = $state(0); </script>

<button on:click={() => count++}> Clicked {count} times </button> 
```

Whenever `count` changes, the UI updates automatically.

This rune, allows you to create _reactive state_, meaning that your UI will react to the changes on the value of that state.


### `$derived` for Computed Values

Use `$derived` to create reactive values based on other state variables:

```svelte 
<script> let count = $state(0); let doubleCount = $derived(() => count * 2); </script>

<p>Count: {count}</p> <p>Double: {doubleCount}</p> <button on:click={() => count++}>Increment</button> 
```

Here, `doubleCount` updates whenever `count` changes, ensuring consistent data flow.

> The expression used inside the `$derived(...)` rune should be _free of side-effects_ 

There are some special cases when you need to create complex derivations of data that don't fit inside the simple and short expression like in the example above. In these cases,
you can use the `$derived.by` rune that accepts a function as its argument.

```svelte
<script>
	let numbers = $state([1, 2, 3]);
	let total = $derived.by(() => {
		let total = 0;
		for (const n of numbers) {
			total += n;
		}
		return total;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	{numbers.join(' + ')} = {total}
</button>
```

---

## Handling Props and Events

Passing data between components is a breeze with props. In Svelte 5, you can use `$props` to declare props explicitly.



### Parent Component

```svelte 
<script> import Child from './Child.svelte'; </script>

<Child message="Hello from parent!" /> 
```

### Child Component

```svelte 
<script>
let { message } = $props(); 
</script>

<p>{message}</p> 
```

For events, Svelte allows simple event propagation:

```svelte
<script> let count = $state(0);

function handleIncrement() { count++; } </script>

<Child on:increment={handleIncrement} /> 
```

### Child Component

```svelte 
<script> 
import { createEventDispatcher } from 'svelte'; 
const dispatch = createEventDispatcher();

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

<button on:click={increment}>Increment</button> 
```

---


## Lifecycle Hooks and $effect

Svelte 5 enhances lifecycle hooks and introduces `$effect` for managing side effects.

Effects are what enable your application to do "stuff". You can consider an effect to any function that perform some action changing the state of the component or the UI itself,.
When Svelte runs an effect, it will track what pieces of the state are used by it, and will re-run the function when that state changes.

The `$effect` run is particularly useful when you need to **synchronize** an external system or state with the state inside your Svelte app.

> The effects run after the component has been mounted to the DOM.

```svelte 
<script> let count = $state(0);

$effect(() => { console.log(`Count changed to ${count}`); }); 
</script>

<button on:click={() => count++}>Increment</button> 
```

Lifecycle hooks like `onMount` and `onDestroy` remain useful for managing component behavior:

```svelte 
<script> import { onMount, onDestroy } from 'svelte';

onMount(() => { console.log('Component mounted'); });

onDestroy(() => { console.log('Component destroyed'); }); </script> 
```

### $effects dependencies 

This new rune will automatiicaly track any reactive value (`$state`, `$derived`, `$props`) that is used by the function defined inside of it and will register all of them as
dependencies, meaning that when those dependencies change, the `$effect` will run again.


> You should consider `$effect` as an escape hatch. It can be very powerful and useful for things like analytics and DOM manipulation. If you need to synchronize states inside the
Svelte application instead of `$derived`.

---
## Snippets: Modular Components Made Easy

Snippets, new in Svelte 5, are inline reusable components that simplify your codebase.
They are a way to create reusable pieces of markup.

Let's imagine that for some reason you need to render multiple `Counter` components, you can, create a snippet for it, and then use the `#each` tag

```svelte
{#snippet counter} 
  <p>Count: {count}</p> <button on:click={() => count++}>Increment</button> 
{/snippet}

{#each counters as counter}
  {@render counter()}
{/each}
```

These snippets can include logic, making them perfect for small, reusable UI pieces.

---

## Debugging and Inspect

Svelte 5 introduces enhanced debugging tools like `$inspect` run, which allows you to monitor component state and props in real-time. This feature makes it easier to identify and
resolve issues during development.

> `$inspect` will only work on development mode. 

This rune is almost the same as `console.log`, with the exception that it will re-run every time the argument passed to it changes. You can also use a callback that allow you
fine-grained control over what to do when `$inpect` runs:

```svelte
<script>
	let count = $state(0);

	$inspect(count).with((type, count) => {
		if (type === 'update') {
			debugger; // or `console.trace`, or whatever you want
		}
	});
</script>

<button onclick={() => count++}>Increment</button>
```

---


## Conclusion

Svelte 5 takes everything developers love about Svelte and makes it even better. From explicit reactivity with runes to modular snippets and improved debugging tools, Svelte 5 is
packed with features that simplify your workflow and enhance performance.

Whether you’re building a small project or a complex web application, Svelte 5 offers the tools and flexibility you need to succeed. So why wait? Dive into Svelte 5 today and
experience the future of web development!


Exploring Svelte 5: What’s New and How to Make the Most of It

Explore Svelte 5's new features: reactivity with runes, modular snippets, improved animations, debugging tools, and more in this comprehensive guide!

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

To intercept any WebSocket connection in your app, create a _WebSocket link_ using the `ws.link()` API from MSW. Provide it a URL predicate and store the link in a variable. Then, add the `connection` event listener to your WebSocket link to know when a connection is being established. Provide the result of that event listener to your `handlers` array, and you're good to go!

## Resources

- [Intercepting WebSocket connections](https://mswjs.io/docs/basics/handling-websocket-events#intercepting-connections)
- [The `ws` API](https://mswjs.io/docs/api/ws)


Intercept a WebSocket connection with Mock Service Worker

Intercept a WebSocket connection in a Remix app using Mock Service Worker.


With the introduction of Svelte 5, the Svelte team has created a CLI, `sv`, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).

This lesson will create a Svelte project using the new `sv` CLI and build a counter component to showcase the new `$state`, `$derived`, and `$effect` runes that ship with the new version.



Get Started with Svelte 5 using the sv CLI

You'll create a SvelteKit project using the sv CLI and build a counter component showcasing Svelte $state, $derived, and $effect runes.

Over the years, your application have grown huge. Sometimes, really HUGE.

Many developers have contributed to the codebase. One day they pushed one coding style, a different one another day. Sometimes even different patterns and solutions for similar problems.

You want to keep your codebase consistent. In the Angular ecosystem, there were well established patterns for doing things the right way ™️. But the old solutions are being challenged by signal-based approach.

Eventually, you ask yourself the key question: **Should you integrate with the NEW solutions or stick to the battle-tested ones, but already considered LEGACY**?

That's a very good question indeed. Don't rush with architectural decisions 🤓.

## First, think of what problems you want to solve by introducing the change.

Do you have 1k LoC Angular components? Maybe even 2k? Do you and your team enjoy working with these? 😏

Where does the **domain logic and state management code** belong to - do you have a clear guidance on which code should be put where? Have you spot that different devs implement similar features in totally different ways?

Do you keep on asking the same questions over and over again: **whether this certain piece of code** should be **imperative** (plain old object properties and variables) or **reactive** (streams)? It'd be nice to keep all thinga reactive, but more often than not, it introduces complexity.

## Second, think of long-term consequences.

You are going to have more than one way to **manage the state**. But is that really an issue? If your codebase is modular, separate modules should not depend on each other in any way. Inner abstractions of one should be invisible to the other, etc.

You are going to introduce a **new tool**. On one hand, you need to learn it, and so does your team. But on the other hand, it's a breathe of fresh air. And it's useful to question the way you've been doing things so far. Maybe there's a more effective way?

You are going to embrace signal-based APIs. And that means taking taking advantage of Zoneless Angular. This means using all modern Angular APIs. And you know that signals are the future. Why would you want to stick to the **less performant, less type-safe, less flexible and, objectively, less effective solutions**?

## Finally, plan your INCREMENTAL integration.

INCREMENTAL is the absolute keyword here. You don't want to tell your PM you need to stop delivering features because of a refactor.

Actually, there's no need for a "refactor". Just pick the first new feature to be implemented. Or pick the one that needs to be extended.

NGRX Signal Store allows you to create both very simple & small stores, as well as bigger ones. **Composition** is the key here.

**Start simple**.

Create a `withState` section with the signals that hold the state. That's already reactive. And relatively simple.

```ts
const initialState: CartState = {
  items: ...,
  rebate: ...,
}

export const CartStore = signalStore(
  withState(initialState)
);
```

Create a `withMethods` section to provide ways to change the state:

```ts
export const CartStore = signalStore(
  ...
  withMethods((store) => ({
    addItem(item: ShoppingItem): void {
      patchState(store, (state) => ({ items: [ ...state.items, item ] }));
    },
    ...
);
```

Create a `withComputed` section to provide all derived computations:

```ts
export const CartStore = signalStore(
  ...
  withComputed(({ items }) => ({
    totalPrice: computed(() => items().reduce(...))
    ...
);
```

**Start simple**.

Now you can (literally) **`inject` this code into your existing solution**. All you need is to inject your brand new NGRX Signal Store implementation into a component, or a service:

```ts
@Injectable()
class ExistingBigService {
  cartStore = inject(CartStore)
  //...  
}
```

and that's it! What's beatiful is that NGRX Signal Store should remain an implementation details (of a component, service, etc). It **shouldn't leak outside to the entire application unintentionally**. Small NGRX Signal Stores help us to **keep logic more modular**.

Don't hesitate - give NGRX Signal Store a try! Start with the [_**Scalable Signals Angular Architecture with NGRX Signal Store**_](https://egghead.io/courses/scalable-signals-angular-architecture-with-ngrx-signal-store-a33abd39) course now!

Integrating NGRX Signal Store with an existing Angular application

Integrate NGRX Signal Store into your Angular app incrementally for modular, reactive state management. Improve consistency and performance with modern APIs.

Lets dive into a high-level explainer on how you can use TypeScript to chat with a document. For this, we'll be employing two main tools: **OpenAI** and **Pinecone**.

We'll have 4 main steps that I'm going to walk you through:


1. **Document Setup**: I've got a social media study in PDF format, about 75 pages, stored in S3.
   
2. **Data Extraction**: We download this document and use a library called `PDF parse` to extract its data. This data is then split by paragraph or a set character limit. We also have logic to remove any chunk that's 10 words or less because, let's be real, there's not likely much meaningful information in such short snippets.

3. **Creating Embeddings**: We then iterate over these chunks to create embeddings. I'll deep dive into what embeddings are in a more detailed video soon. These embeddings are prepared and upserted as vectors into Pinecone.

4. **Interacting with the Document**: When a user poses a question, we craft a new embedding from that prompt. This is used to create a query request which is then sent to the Pinecone index. Pinecone returns the top five results. We construct a context prompt from these, feed it to OpenAI, and obtain a response to present to the user.

![process image](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698427862/tips/alejandro-roman/chat_with_doc_process.png)

I've set up two endpoints in Postman that will interact with this document AI:
- **Summary**: This endpoint processes the document, splits the text into chunks, and upserts the data into Pinecone.
- **Chat**: Using this, we can ask questions against our processed document. It grabs a user's query, makes an embedding, and fetches the top results from Pinecone to generate a relevant answer.

Chat with a Document Using TypeScript, OpenAI, and Pinecone

Learn how to build a chatbot that uses a PDF document as a database, extracting text and answering questions using TypeScript, OpenAI, and Pinecone.

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Next.js is a minimalistic framework for server-rendered React applications.

Define where Keystatic should store your content

angular

This lesson teaches how to create a signal in Angular with the signal function from @angular/core. Signals need an initial value, which can be a primitive, object, or any other valid expression in JavaScript. 

TypeScript infers the signal's type and catches errors during compilation.

Create an Angular Signal Which Stores a Value

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Set up credentials to upload your Android build to Google Play automatically.

For automatic uploads, you'll need to set up all the app metadata on your Google Play account, including setting up app assets. You'll also need to configure and set up a Google Service Account.

📝 [Create a Google Service Account](https://github.com/expo/fyi/blob/main/creating-google-service-account.md) 
📝 [Store Assets](https://docs.expo.dev/guides/store-assets/)
📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

Upload an Android App to the Google Play Store Automatically using Expo Publish

Create the app on the Google Play Store, create the first production build on EAS, upload it to Google Play, and publish it to an internal testing group.

For sharing apps via Google Play, you will need a paid Google Play developer account. It is preferable to have an organisation account if you're looking to monetise your app (you'll need to verify your organisation before you can create apps). But if you you are building apps as an individual developer, you can use the individual developer account. 

When creating an individual developer account, you have some additional restrictions:
1. You must submit proof of ID and home address to create the account
2. If you want to monetise your apps, your home address will be shown on the Google Play developer page
3. You will need 20 testers to test your app for 14 days before you can apply for production access

🎮 [Google Play Console](https://play.google.com/console)

🔗  [Register for a Google Play Developer account](https://support.google.com/googleplay/android-developer/answer/6112435)

🔗 [Required information to create a Play Console developer account](https://support.google.com/googleplay/android-developer/answer/13628312?hl=en-GB)

🔗 [QR Code Generator](https://www.qr-code-generator.com/)


Create an Android Release Build with EAS and Upload to Google Play Store

Submit your Production Build to the Apple App Store and install it via TestFlight.

When submitting a build to Apple with EAS Submit (or otherwise), it will first get added to TestFlight which is essentially a pre-prod environment for Apple. This will allow you to install and share the actual production build to testers before releasing it to users.

App names on the Apple App Store must be globally unique. So if you've chosen a name for your app that is already taken - like Plants - you will have to choose a different name for the App Store Listing page. Note that this is only the case for the app name on the App Store listing page, and you can still use your preferred name elsewhere.

**TestFlight Internal Testing** - as soon as you upload your build to App Store Connect and it finished processing, it is available for internal testing. You can add users to the internal testing group by email, and the users must be registered on your Apple Developer account.

**TestFlight External Testing** - this is a separate testing group that allows you to share the build with anyone either by sending them an email invite or using an invite URL. Before you can share the build, you must first submit a build for external testing and wait for it to be approved by Apple, which usually takes a couple of hours.

**Release** - in order for the build to actually show up on the Apple App Store, you will need to create a Release on App Store connect and submit it for review. This review usually takes about a day.

🔗 [TestFlight](https://developer.apple.com/testflight/)

📝 [EAS Submit Docs](https://docs.expo.dev/submit/introduction/)

📝 [App Store Assets Docs](https://docs.expo.dev/guides/store-assets/)

Submit an iOS App to the Apple App Store and TestFlight using EAS

Create an iOS Release build for distribution.

This build gets submitted to the Apple and can only be installed via TestFlight or the App Store.

Create an iOS Release Build for the Apple App Store with EAS

Set up a Distribution certificate and an Ad Hoc provisioning profile for iOS internal distribution builds.

Here we learn how to sign Apple app builds to make them installable on Apple devices.

In order to install your own app on any Apple device, you need an Apple Developer account and a subscription to the Apple Developer Program.

🔗 [Apple Developer Program](https://developer.apple.com/programs/)

⚙️ [Code Signing Illustration](https://www.linkedin.com/posts/kadi-kraman_an-illustration-of-what-code-signing-with-activity-7132420058076581888-s6TM)

Use the EAS CLI to Configure App Store Credentials for Internal Distribution Builds

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

Build and Deploy React Native Apps with Expo EAS

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility.

Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails.

storybook

Storybook has thorough documentation and an incredible Discord community to help you. Learn how to efficiently find solutions and tips, ensuring you always have the support you need.

- [Documentation](https://storybook.js.org/docs)
- [Showcase](https://storybook.js.org/showcase)
- [Integrations](https://storybook.js.org/integrations/)
- [Github Discussions](https://github.com/storybookjs/storybook/discussions)
- [Discord](https://discord.com/invite/storybook)

Leverage Storybook Documentation and Community Support — course conclusion

Chromatic offers free hosting for Storybook component libraries and design systems. Share your components with others on the premiere platform for Visual Testing and Review.

Host Storybook For Free with Chromatic

Storybook seamlessly integrates with popular frameworks like Next.js, Nuxt, Angular, SvelteKit, and more. Discover how to incorporate Storybook into your existing project, enhancing your UI development process.

Integrate Storybook into Your Development Environment

Ensure your Storybook environment mirrors your production setup. Learn to add global stylesheets and fonts, creating a consistent look and feel across your project and component library.

Configure Storybook with Global Stylesheets and Fonts

Effortlessly generate interactive and detailed documentation for your components with the `autodocs` tag. Learn how to turn comments and prop definitions into rich, readable docs.

Search

Search Results