Learn Flow, Go and Nuxt

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Deploying a Nuxt Site to AWS from a Git repository with Amplify hosting

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

Go is a server-side language, but today we can compile Go code to WebAssembly as well - making it possible for us to bring programs written in minimalistic Go code into the browser!

With this collection, we will learn how to compile and run Go WebAssembly programs in Node.js and the browser, and how our Go code can interop with JavaScript and manipulate the DOM. We will also talk about configuring our VS Code workspace and optimizing the Go WASM binary size.

Go is an open-source programming language that makes it easy to build simple, reliable, and efficient software.

WebAssembly with the Go Language

*Go ^1.12*

When using Go modules related to WebAssembly, namely `syscall/js`, the default settings in VS Code will trigger error reports like *"Build constraints exclude all Go files"* in the editor. In this lesson, we will learn how to fix this and improve our coding experience.

Configure Go Build Constraints in VS Code to work with WebAssembly

*Go ^1.12*

In this lesson, we will see how we can expose Go lang functions from a WebAssembly module so that we can interact with them from the JavaScript environment.

Call a Go WebAssembly function from JavaScript

*Go ^1.12*

The ability to manipulate the DOM is sometimes crucial when it comes to working with apps powered by WebAssembly. In this lesson, we will see how we can utilize Go's `syscall/js` module to interact with the DOM by porting a sample JS code snippet to Go.

Interact with the DOM using Go's `syscall/js` module

*Go ^1.12*

In this lesson, we will see how we can interact with the JavaScript environment by using Go's `syscall/js` module to call and pass values into a JavaScript function, and access variables available in JS land.

Access JS Functions and Variables from a Go WebAssembly Program

*Go ^1.12*

In this lesson, we will learn how to load and use a Go WebAssembly binary in a web app.

Manually load a Go WebAssembly binary in a browser

*Go ^1.12, TinyGo ^0.12.0, Node ^12.14.0*

The WebAssembly binaries generated by the standard Go compiler are often unnecessarily large. In this lesson, we will learn techniques to optimize Go Wasm binary size with an alternative compiler that is designed for microcontrollers - TinyGo.

Optimize Go WebAssembly binary size with TinyGo

*Go ^1.12, Node ^12.14.0*

Compiling Go programs to WebAssembly does not require Emscripten, and the process is pretty straight forward. In this lesson, we will learn how to compile a simple Go program to a WebAssembly binary, then execute it with Node.js.

Compile and execute a Go WebAssembly program with Node

There are numerous ways to sort slices in Go.

In this lesson, we will take a quick look at an easy way to sort a slice of structs or primitives. We will learn about using one of the handy built-in functions in Go's sort package called *sort.Slice*. This function takes a slice to sort as an argument and a *less function* or *less func* for short as the second argument. You will write this *less function* to sort the slice however you wish.

Go's sort.Slice function looks like this: *sort.Slice(someSlice, func(i, j int) bool)*. It's super-easy to write an anonymous *less function* to sort.

As you will see, it's easy to use this *less function* to do simple and even complex sorts of your structs with minimal effort.

Sort Slices of Structs using Go sort.Slice

There are numerous ways to sort slices in Go.

The simplest way uses some basic built-in functions from Go's **sort** package to allow you to easily sort slices of primitives, that being **Strings**, **Ints** and **Float64s**. Using these sort functions, we don't have control over the sort order as the data will be sorted in ascending alphabetical (for strings) or ascending numerical (for Ints and Float64s) order.

In this lesson, we will take a quick look at the easiest way to sort slices of primitives. We will learn about using some of the handy built-in functions in Go's sort package, including:

* sort.Strings: Sorting a slice of strings
* sort.Ints: Sorting a slice of ints
* sort.Float64s: Sorting a slice of float64s

Sort Primitives (strings, ints, and floats) in Go 

This collection of lessons will cover a variety of topics that teach you how to work with slices and arrays in go. You'll learn how to declare them, create them using literal syntax, iterate over them, add to them, remove from them and other useful things.

Learn about slices and arrays in Go

Go has a special indexing syntax that forms the basis of removing one or more elements from a slice. I will teach you this syntax and show you its various forms.

Based upon that, I'll show you how to remove a single element from a slice. However, you may find this somewhat limiting. I also will show you a more typical example of removing elements from a slice as we iterate over it. This technique shows you how to remove multiple elements from a slice.

Remove Elements from a slice in Go

There are a couple of different ways to iterate over an array or slice in Go. The primary approach is to use range, which handles the iteration for you. However, you can also use a traditional for loop if you need to do something out of the ordinary, like iterating in reverse or skipping every other element.

Iterate over an Array or Slice in Go

There is a built-in append function that is used to append elements to a slice. We'll see in this lesson that the append function works only with slices, not arrays. There are also some nifty alternate uses of the the append function that make appending super easy.

Checkout the sample code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Add).

Append Elements to a Slice in Go

There are numerous ways that you can declare and create arrays and slices in Go. This lesson will show you several and I talk about the advantages and disadvantages of one over another. After watching, you will better understand all of the possible ways you can declare/create as well as the idiomatic way.

These include:

* var
* the built-in function *new*
* the built-in function *make*
* Array and Slice literals

While it is not the main intent of this lesson, I do touch on some of the differences between slices and arrays.

Checkout the code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Declare).

Declare Arrays and Slices in Go

Golang has no built-in function(s) to filter an array. This lesson will teach you two different ways to filter.

The first is to create a separate array and add the filtered elements to it. This works great, but doesn't use memory as efficiently as the second way.

The second way shows you how to filter by altering the original array in place without making another array to hold the filtered elements. But, it has a side-effect that I'll tell you about which may help you decide which approach you will use to filter your array. 

Filter an Array in Go

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

Type Check React Components With Flow

In this lesson we are going to take a React and Redux application and add flow types throughout. This includes type checking a react component, a reducer, some actions, and a connect method. 

Type Check Redux Apps with Flow

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

Load Data from URL Params in Vue.js and Nuxt.js

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



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

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


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Search

Search Results