Learn Angularjs, Nuxt and Nvda

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

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.

angular

When migrating AngularJS (v1.x) applications to Angular you [have different options](https://github.com/angular/ngMigration-Forum/wiki/Migration-Paths-Overview). Using Angular Elements is one of them. In this lesson we learn how to integrate an Angular Element into an AngularJS (v1.x) application. We will leverage some features release in the latest AngularJS 1.7.3 that make it fully compatible with custom elements.

Use Angular components in AngularJS applications with Angular Elements

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps.

Filters

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

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the `nuxt.config.js` and the passing the named route to a `router-link`.

Configure Named Routes in Vue.js and Nuxt.js

Sometimes the `pages/` directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Nuxt.js allows you to return a `Promise` from your `data` function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own `app.vue` layout in a `layouts` directory. Then you simply surround your content (the `<nuxt>` instance) with your navigation and/or layout and you're ready to go.

Create Vue.js Layout and Navigation with Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

Build Vue.js Apps with the Vue-CLI and Nuxt.js

NVDA (NonVisual Desktop Access) is a free “screen reader” which enables blind and vision impaired people to use computers.

nvda

NVDA is a popular open source screen reader on Windows that works well with Firefox. It's similar to JAWS, another popular Windows screen reader that works best with IE. But NVDA has no licensing fee plus an open bug tracker, making it great for users as well as developer testing. 

In this lesson, you'll learn how to browse a webpage using NVDA's keyboard shortcuts, including headings navigation, skip links, and the Elements List. You'll also learn a bit about Forms Mode and how it impacts screen reader navigation.  For more tips, check out the resources below.

## Resources
- [Using NVDA to Emulate Web Accessibility](http://webaim.org/articles/nvda/)
- [NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
- [Understanding Screen Reader Interaction Modes](http://tink.uk/understanding-screen-reader-interaction-modes/)
- [Three Things You Should Know Before Using Voiceover for Testing](http://webaim.org/blog/three-things-voiceover/)

## Installing NVDA
If you're on a Windows machine, you can install [NVDA directly](http://www.nvaccess.org/download/). If you're on a Mac or Linux, you could install a Windows virtual machine:

- [Install VirtualBox](https://www.virtualbox.org/wiki/Downloads)
- [Get a Windows VM from Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) - I use IE11
- [Install Firefox](https://www.mozilla.org/en-US/firefox/new/) - install on the VM!
- [Install NVDA](http://www.nvaccess.org/download/)
- [How to Map Your Mac's Capslock Key to a NVDA or JAWS Key in a Windows VM](https://www.marcozehe.de/2015/06/07/how-to-map-your-macs-capslock-key-to-a-nvda-or-jaws-key-in-a-windows-virtual-machine/)

Testing for Accessibility with the NVDA Screen Reader on Windows

Manually creating action items every time we need to dispatch an action eventually accumulates to a very tedious process. In this lesson, we will learn how to abstract out the creation of action items so that we consolidate their creation into a single place. This not only creates efficiencies in how we express code but also reduces code volume while simultaneously increasing stability. 

Angular 1.x Redux: Create Reusable Actions with Action Creators

In this lesson, we are going to learn how to enable our store to work with more than one reducer in an application.

Currently, we have set up our store to work with the categories reducer exclusively, but this leaves us with a real problem, what if we want to keep track of the currently selected category within our store so that we can access that data somewhere else in the app? It is safe to say that most applications consist of many data models interacting together, and we need a way to accommodate this within the single state tree in our application.

When we initialize our app store, wouldn't it be convenient if we could take all of our reducers and combine them into one big reducer that our store knows how to work with? Well, this is exactly what the combine reducer method does in Redux. It allows us to combine reducers together and then access them as a named property on our application store.

We currently have a category reducer just hanging out here doing nothing because we have been focusing entirely on the categories reducer. We are going to combine the two reducers so that we can use the current category data within our bookmarks component.

Angular 1.x Redux: Handle Multiple Models by Combining Reducers

Invariably the question that comes up when talking about Redux is how does one handle asynchronous operations in redux. For instance, how do we hand off an operation to redux that requires a remote call to the server? Where exactly does the async part get handled? 

Redux has this concept of middleware that allows us to insert custom logic in the space between dispatching an action, and the moment it reaches the reducer. In this lesson, we are going to set up a few async operations and then use redux thunk middleware to make sure that everything makes it into the reducer properly.

The main key to thunk middleware is that it allows us to return a function instead of an action. This function can encapsulate the async operation and dispatches the appropriate action when the operation is completed.

Angular 1.x Redux: Handle Asynchronous Operations with Middleware

One of the primary advantages of using redux is that reducers are incredibly easy to test. By nature, they have a clearly defined contract of inputs and outputs, and because they are stateless, they require very little instrumentation to test in isolation. 

We will start with a few simple tests for the categories reducer and then move on to testing the CRUD functionality within the bookmarks reducer. 

Angular 1.x Redux: Test Reducers

Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.

In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.

Angular 1.x Redux: Integrate ngRedux

In this lesson, we are going to learn how to integrate Redux Devtools into our Angular application.

Redux Devtools is a live-editing time travel environment for Redux. Devtools boasts a list of awesome features but my two favorite ones are that we can inspect every state and action as it happens and we can go back in time by “cancelling” actions.

This is going to be an interesting lesson because, in order for this to work, we are going to need to make something that was written for React work in Angular. For the most part, everything will play side by side with one small trick that we will pull off at the end to force an Angular digest cycle when React manipulates the application store. 

Angular 1.x Redux: Integrate Redux Devtools

One of the biggest mental shifts that developers have to take when embracing redux is shifting from mutable operations to immutable operations. The problem with mutable operations is that they create side effects that involve anything else that is referencing the thing that is being mutated.

With immutable operations within a reducer, a new object is returned for every operation – completely bypassing the possibility that an existing reference is going to be compromised. It is then up to the consumer to decide how they want to get the new data and what to do with it.

In this lesson, we are going to flesh out the CRUD functionality of our bookmarks reducer, doing it first using mutable operations and then refactoring it to use immutable operations.

Angular 1.x Redux: Avoid State Mutation with Immutable Operations

In this lesson, we are going are going to apply everything that we have learned by building out our bookmarks component to be powered by Redux. This will help reinforce all the techniques we have covered by seeing them built out  in a single, contiguous lesson.

We will walk through the steps necessary to phase out the bookmarks model with a Redux implementation that includes building and integrating the equivalent reducers and action creators to integrate into our application.

Angular 1.x Redux: Put It All Together

In this lesson, we are going to learn how to map our Angular component directly to our application store using the connect method on ngRedux. 

In Angular, it is a common technique to bind a controller property directly to the model so that our controllers remain lightweight and operate more as a pass through mechanism than anything else.

Using the connect method, we can accomplish the same effect by not only binding properties directly to the application store, but also binding our controller to our action creators. This allows us to drastically simplify our controllers as we are able to delete a bunch of local controller methods as they become unnecessary because of our mappings.

Angular 1.x Redux: Map State and Dispatchers to Redux

In this lesson, we are going to extend our application store with a subscribe method so that we do not have to manually query our application store every time we dispatch an action.

In our categories controller, we are dispatching a **GET_CATEGORIES** action every time we want to update the categories collection within our application store. For this change to be propagated back into our controller, we need to call **store.getState**. 

Depending on how many times we are calling **store.dispatch**, this could get very cumbersome. We will extend our application by adding a subscribe method so that state changes are automatically pushed into our controller.

Angular 1.x Redux: Subscribe to the Application Store

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.

Always Name Functions in JavaScript


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

Import the Same JavaScript Module Multiple Times with Cache Busting



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

Search

Search Results