Courses for Front-End Web Developers

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Use Gemini 2.0 to Create Agent Instructions to Refactor an Entire Codebase

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

I'm extremely excited for the potential of AI watching your screen while you work. I decided to take Google's AI Studio for a spin, which just introduced a feature called "Stream Realtime", which allows AI Studio to observe your screen and listen to your microphone while you work.

This video is my initial attempt to try and coach AI Studio through the process of building a site from a reference site, essentially trying to build egghead.io from a Next.js starter template. And we'll explore the various attempts we make and what works and what doesn't.

Let AI Watch Your Screen: Build Next.js Pages with AIStudio's Stream Realtime


[Shadcn](https://ui.shadcn.com/docs) is a popular component library that allows you to install components into your codebase.

Learn how to install the [Table component](https://ui.shadcn.com/docs/components/table) and use that presentational component with [Tanstack table](https://tanstack.com/table/latest).


Display Tabular Data in React with Tanstack Table

Build a dynamic table component in React using shadcn component library and tanstack react table.

TypeScript's satisfies operator finally clicked for me when I realized it's almost always used for specific implementations of configuration objects. So this lesson walks you through the naive approaches I've taken before and how to solve them using the satisfies operator. After this, satisfies will be another tool in your belt in TypeScript. To clean up all the TypeScript code you have around configuration.

TypeScript's "satisfies" for Configuration

Windsurf and Cursor are both able to take an image and then use an agent to build out what it sees in that image. This lesson is going to compare Windsurf and Cursor by uploading the same image to both and giving them the same prompt. Comparing not only the results, but also the steps that they take to get there. We'll also try uploading additional images throughout the process to see what they do as far as revising along the way and improving the site as they go along. 

Windsurf Cascade vs. Cursor Composer Agent: Build a Site from an Image

In this lesson, you'll discover how to style View Transitions using CSS pseudo-selectors to create custom animation effects. We'll transform the default cross-fade into a smooth slide transition by targeting the ::view-transition-old and ::view-transition-new pseudo-elements. You'll learn how these powerful selectors give you precise control over your transition animations, allowing you to create more engaging and personalized user experiences with just a few lines of CSS.

Customize View Transitions with CSS Using view-transition-old and view-transition-new

In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'll create a simple example that demonstrates how to animate between different text states with just a few lines of code - no external libraries required. This powerful native API makes it easy to add professional-looking transitions to your user interface, enhancing the user experience with minimal effort.

Create Smooth UI Transitions with the Native View Transitions API

I've been using Cursor for a very long time and their "Agent" feature in Composer is fairly new, so I'm still getting used to it. But since Windsurf recently got onto the stage with their Cascade agent, they've slowly been gaining the mind share on the UX for coding agents. I decided to put them to the test by putting Windsurf and Cursor on the exact same screen side by side trying to accomplish the same task and to see which workflow I would prefer. I've been a diehard Cursor user for over a year now, so it's going to take a lot for me to switch to a different IDE. But I just have to say, even from this simple demo, Windsurf is looking pretty nice.

This lesson is just going to walk through creating a CLI using both tools to print out inspirational quotes and to explore how they approach the step-by-step of installing packages and running commands and setting up all the files we need to get this running.

Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison

This TypeScript tutorial explains how to use generics, allowing for different types to be passed as arguments. It discusses the use of shorthand syntax in generics and illustrates with examples. This method is useful for library creation, providing type safety and control to the user.

```typescript
interface PhotoMetadata<T> {
  title: string;
  takenAt: Date;
  customData: T;
}

// Function that processes a photo with custom metadata
function processPhoto<T>(photo: PhotoMetadata<T>): {
  processedTitle: string;
  daysSinceCapture: number;
  customDataSummary: T;
} {
  const today = new Date();
  const daysSinceCapture = Math.floor(
    (today.getTime() - photo.takenAt.getTime()) / (1000 * 60 * 60 * 24)
  );

  return {
    processedTitle: photo.title.toUpperCase(),
    daysSinceCapture,
    customDataSummary: photo.customData
  };
}

// Example usage with different custom data shapes
type CameraSettings = {
  iso: number;
  aperture: string;
  shutterSpeed: string;
}

type LocationData = {
  latitude: number;
  longitude: number;
  locationName: string;
}

// Using with camera settings
const photoWithCamera: PhotoMetadata<CameraSettings> = {
  title: "Sunset at beach",
  takenAt: new Date('2024-01-15'),
  customData: {
    iso: 100,
    aperture: "f/2.8",
    shutterSpeed: "1/1000"
  }
};

// Using with location data
const photoWithLocation: PhotoMetadata<LocationData> = {
  title: "Mountain vista",
  takenAt: new Date('2024-02-01'),
  customData: {
    latitude: 45.5231,
    longitude: -122.6765,
    locationName: "Mount Hood"
  }
};

const processedCameraPhoto = processPhoto(photoWithCamera);
const processedLocationPhoto = processPhoto(photoWithLocation);

processedCameraPhoto.customDataSummary.iso
processedLocationPhoto.customDataSummary.longitude

```

Basic Explanation of Typescript Generics

A very basic explanation of generic function arguments

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



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!

Search

Search Results