Learn Firefox, Tweenmax and Zeit-now

zeit-now

[Vercel](https://vercel.com) is a hosting platform that works very well with [Next.js](https://nextjs.org) - because it's their framework! In this lesson, we prepare our project to be deployed to production by:

- Pushing code to [GitHub](https://github.com/)
- Deploying repo to [Vercel](https://vercel.com)
- Updating [GitHub OAuth app](https://github.com/settings/developers) to use production URL
- Updating [Supabase](https://supabase.com/) project to use production URL

## Resources

- [Deploy Next.js to Vercel guide](https://nextjs.org/learn/basics/deploying-nextjs-app/deploy)
- [GitHub OAuth App settings](https://github.com/settings/developers)
- [Vercel](https://vercel.com)
- [Supabase URL configuration](https://app.supabase.com/project/_/auth/url-configuration)

Deploy Next.js App Router project to production with Vercel

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the [GitHub CLI](https://cli.github.com/) tool to create a public repo, and adding it as a remote origin for our project.

Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's [Authentication Site URL](https://app.supabase.com/project/_/auth/url-configuration) to our new live application URL.

## Extension ideas

- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to `update` and `delete` their own messages
- Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms

## Resources

- [GitHub CLI](https://cli.github.com/)
- [Vercel docs](https://vercel.com/docs)
- [Deploying Remix app to Vercel](https://vercel.com/guides/deploying-remix-with-vercel)

Deploy a Remix Application to Vercel from a GitHub Repository

Cascading Style Sheets bring order and beauty to our applications.

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

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

Deploy a project on Vercel (formerly ZEIT) from a GitHub repository

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Now by Zeit has recently been updated and now supports multi-language monorepos. In this lesson we'll build and deploy a simple app with an API powered by Node.js and Go.

If you want to follow along with this lesson, you will need to install [now-cli](https://github.com/zeit/now-cli).

Deploy a Monorepo to Now V2

Animations can make people sick, or worse! By adding animation toggles and listening in to the user's system preference for reducing motion on OSX and iOS, we can give them more control over our interfaces. Animation can be a safety issue; let's do something about it!

Warning: there is a flashing animation in the video.

In this lesson:
- [prefers-reduced-motion](https://webkit.org/blog/7551/responsive-design-for-motion/)

WCAG 2.1, Guideline 2.3: Seizure risks
- https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-seizure-does-not-violate

Your Interactive Makes Me Sick
- https://source.opennews.org/articles/motion-sick/

Accessible animations with reduced motion

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

In this lesson we will add support for deploying our application to [now.sh](https://zeit.co/now).

We will create a `now` object in package.json where we configure the name, the alias and the list of files we want to deploy.

We create an npm run-script called `now-build` and set the value to `true` to skip building the project on `now.sh`. The second run-script called `now` invokes `now deploy && now alias`. 

After this we sun `npm run build && npm run now` to build and deploy our app!

Deploy an Angular CLI Project to now.sh

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’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the `now` service. Once properly configured, we’ll use the `now` CLI and publish our application to a production server.

Configure a React & Redux Application For Production Deployment and Deploy to Now

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Now is a great way to deploy your node application, but the generated URLs aren't memorable or easily remembered. With Now's alias command, you can fix that. In this video lesson we'll cover how to add an alias to a deployment, giving you a custom `*.now.sh` subdomain, how to create an alias using your own custom domain name, how to list your aliases and finally how to remove an alias if you no longer want it.

Use Now alias for custom sub-domains

`now` allows you to take your JavaScript (Node.js) or Docker powered websites, applications and services to the cloud with ease,
speed and reliability. In practical terms, any directory that contains a `package.json` or `Dockerfile` can be transported to the cloud with one command: `now`.


Applications require a lot of sensitive information. Database passwords, API keys and secrets used for signing JWTs, just to name a few. If you're deploying your application using the Now CLI, you can deploy your secret information right through the CLI and give your code access to those secrets without exposing them directly in your source code. In this lesson, we'll cover how to add secrets to now, how to use a secret as the value of an environment variable and how to list and remove secrets in now.

Use Secrets When Deploying Applications with Now

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

Using TweenMax with React

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

TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequenced animation with very little code or setup.

Greensock TimelineLite Animation Sequences

[Greensock](http://www.greensock.com/tweenmax/) is a powerful animation library for JavaScript. It's also fully compatible with AngularJS. This lesson will get you started using Greensock with AngularJS to provide rich animations for your users.

Basic Animation with Greensock's TweenMax

Creating powerful and context-aware tools for Cursor IDE becomes straightforward when leveraging information directly from your current project. In this lesson, you'll learn how to build a custom MCP (model context protocol) tool that intelligently requests essential details—such as the current project path and conversation summaries—from your Cursor project.

Workflow demonstrated in this lesson:

- Define MCP tool parameters to request specific project details.
- Pass project path and conversation summaries into your MCP tool.
- Automatically write or update files within your current project using these parameters.

Key benefits:

- Automate tasks with precision based on your active project's context.
- Simplify interactions by creating AI-driven CLI commands tailored to your needs.
- Open endless possibilities for integrating external APIs and advanced automation.

Through this practical demonstration, you'll gain a versatile technique for enhancing your development workflow in Cursor IDE.

[https://github.com/johnlindquist/mcp-cursor-tool-starter](https://github.com/johnlindquist/mcp-cursor-tool-starter)

John Lindquist

Build MCP Tools Using Project Context for Custom Cursor IDE Automation

Setting up custom MCP (Machine Command Protocol) servers in Cursor can involve tedious steps, such as configuring node paths or referencing additional commands. This lesson shows how to streamline this process by bundling your MCP server directly into a standalone executable.

Workflow demonstrated in this lesson:

- Use a simple MCP server project starter.
- Run a single bundling command to create an executable.
- Right-click the generated executable, copy its full path, and add that directly to your Cursor settings.

Key benefits:

- Eliminates the need for complex node path configurations.
- Simplifies the setup and integration of custom MCP servers into Cursor.
- Makes the server executable instantly accessible within your Cursor environment.

By following this streamlined approach, you can quickly and easily integrate custom MCP servers into Cursor, making your development workflow cleaner and more efficient.

[https://github.com/johnlindquist/mcp-cursor-tool-starter]()

Easy MCP Server Setup in Cursor IDE with Bundled Executables

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:
- set up and scaffold new applications,
- use file-based routing
- create nested routes
- manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Tomasz Ducin

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.


In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also **enables permalinks**, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Browse History in Tanstack Router

Browse history in TanStack React Router using the native history API for seamless navigation

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Hook into Route Lifecycle Hooks in Tanstack Router

Hook into TanStack React Router's lifecycle hooks for custom route logic and animations.

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels.

To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a `defaultNotFoundComponent` at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.



In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router.

When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like `employeeId`.

However, when using `useParams` globally without specifying a route, it requires an options object with `{ strict: false }`, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.



Access Dynamic Route Parameters with useParams in Tanstack Router

Access dynamic route parameters with useParams in TanStack React Router for type-safe routing.

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures.

We explore how to create additional nested routes by converting files into directories, allowing for further nesting.

For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `index.tsx` file inside it to define the route component for this nested route.

This approach provides flexibility in organizing files while maintaining the convention that file names and locations align with route paths. We also see how to adapt existing components and loaders to work with these reorganized routes, enabling features like edit forms or delete actions (or whatever) within nested routes.


Reorganize File-Based Routes in Tanstack Router

Reorganize file-based routes in TanStack Router for flexible nested routing.



In this lesson, we learn how to parametrize the loader for a nested route in TanStack Router.

We focus on a nested route like `/employees/$employeeId`, where the `$employeeId` is a **dynamic parameter**.

To fetch data for this route, we use a `loader` function that accesses the `$employeeId` parameter. This is achieved by using the params object available in the `loader` function, which contains the dynamic segments of the URL. We then use this parameter to call a function like `getEmployeeById`, which fetches specific employee details from an API.

We highlights that TanStack Router **automatically infers types** for these parameters, ensuring type safety for nested routes.

Parametrize Route Loader for Nested Route in Tanstack Router

Parametrize nested route loaders in TanStack Router using path parameters

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing.

We start by creating a new `employees` directory and files to represent nested routes, such as `/employees/$employeeId`. The `$` symbol is used to denote dynamic parameters.

We then use the `<Link>` component from TanStack Router to create links to these nested routes, passing necessary parameters.

To render the nested content, we use the `<Outlet>` component (nested), which automatically renders child routes. This approach allows us to dynamically display stuff under a nested route.

All the time, the TanStack Router generator automatically updates the route tree based on file changes - our routing configuration remains consistent 🔥



Create Nested Route and Nested Outlets in Tanstack Router

Create nested routes and outlets in TanStack Router using file-based routing

Search

Search Results