Learn Ember, Greensock and Testing-library

In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem. 

A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.

Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.

In this course, you will learn how to:

- render your components
- properly query your UI for elements while keeping accessibility and your users' experience in mind
- improve your testing experience with the usage of some utilities
- interact with your components to fire events
- leverage asynchronous utilities to customize your testing flow
- get rid of the annoying "not wrapped in act" warning

After this course, you should be able to write and debug any test using the React Testing Library!

The `@testing-library` family of packages helps you test UI components in a user-centric way.

You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

Testing Library accomplish these goals so you can be confident your application will work when it gets to the end user.

testing-library

An Introduction to the React Testing Library

Animations attract the eye and add a higher level of engagement for your users. But they’re not easy to set up, and they don’t always look the way they should on every browser. 

Greensock is the best platform available for creating performant, highly-customizable animations. This course will walk you through the features of Greensock, including how to:

- animate an element
- manually control an animation
- animate between CSS classes

…and more, with cross-browser support to ensure your animations look sharp everywhere.

Ultra high-performance, professional-grade HTML5 animation for the modern web

greensock

Create Amazing Animations with GreenSock

GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

Spin Elements in 3d with GreenSock

By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Sometimes you want to leave an animation looping without any user interaction. This is done using the "repeat" and "yoyo" properties combined to keep the tween moving back and forth from the start properties to the end properties.

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

A JavaScript framework for creating ambitious web applications.

ember

In this lesson we will create an `updateContent` method that sets the value of our `content` property to the current epoch timestamp. We need to call `toString()` on the `Date.now()` method in order to make TypeScript happy.

```
updateContent() {
  this.content = Date.now().toString()
}
```

We create a constructor that takes the options parameter, call `super(options)` and call into our `this.updateContent()` method.

```
constructor(options) {
  super(options)
  this.updateContent()
}
```

When we refresh our page we can see that the value of `content` is set to the epoch timestamp. 

To make the content really dynamic we use `setInterval()` to call into `updateContent` each second: `setInterval(() => this.updateContent(), 1000)`.

When we save our file we see that our content does not get updated anymore and when we check the console we see that we get an error telling us that: The 'content' property on the my-component component was changed after it had been rendered. The error also informs us that we should Use the @tracked decorator to mark this as a tracked property.

We add the @tracked decorator to our property, we import tracked from @glimmer/component and we refresh the page. We verify that `content` gets updated each second.

We change our `updateContent` to add our the timestamp to the array. When we use `this.items.push(this.content)` to achieve this we see that the list does not get updated. This is because the `@tracked` decorator only tracks the re-assignment of properties.

The way to get this working is by re-assigning our `items` array inside `updateContent`. We assign a new array, de-structure the current items array and add the new content.

```
this.items = [...this.items, this.content]
```



Use dynamic data in a GlimmerJS component

In this lesson we will use the ember cli to generate a new component. Running `ember g glimmer-component my-component` generates the template and component class. We change the content of our component and add it to the main template in order to show it on the page.

Create a new GlimmerJS component

In this lesson we will add a variable called `content` to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, `{ {content }}`. 

After this we create a new class variable called `items`, initialize it as an array with strings. To display this list in our template we add a `<ul></ul>` and inside this unordered list we use the handlebars `each` helper to display the list items.

And inside our each statement we will print a `<li>` tag and render `{{ item}}` inside it.

```
<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>
```



Use template variables in a GlimmerJS component

[GlimmerJS](https://glimmerjs.com/) is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components.   

In this lesson we will use the Ember CLI to initialize a new GlimmerJS project.

We will start by installing Ember CLI globally by running `npm install -g ember-cli/ember-cli`.

Next we will use the `ember` command to create our new project by running `ember new egghead-glimmer -b @glimmer/blueprint` . 

When our project is created we `cd` into the project directory and start the development server. We will view the page in the browser and change the base template.

Initialize a project using Glimmer.js

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable `<div>` container and explore some options available.

Create scrollable DOM elements with Greensock

Modern development requires modern tooling. Rather than adding GreenSock as a script to an HTML page, we're going to install GreenSock using Yarn and set up our development environment using Parcel. This will allow us to quickly iterate and test out our animation ideas. GreenSock is abbreviated as `gsap` when importing.

Setup GreenSock as a Module with Parcel

Animating an element to a click event is as simple as passing the x and y coordinates of the click event to the properties of the `TweenMax.to` call. To be able to center the element where the mouse clicks, you also need to adjust the special xPercent and yPercent properties so the element is properly offset.

Animate and Center an Element to a Click Event with GreenSock

Rotating an element with GreenSock is as simple as changing the `rotation` property using `TweenMax`. But there's also a hugely convenient trick using the `+=` or `-+` syntax as a string that allows you to adjust based on the previous value of the rotation.

Rotate an Element Based on Previous Values with GreenSock

Animations often have multiple steps. GreenSock makes this simple with the concept of a timeline where you code each point you want your element to move to. This lesson will show you how to set up a timeline as well as pause and resume the timeline animation.

Create Animation Steps with GreenSock's Timeline

You often need to pause or resume an animation based on whether or not the current animation running. The `isActive()` getter returns a boolean that provides you with that information (the opposite information can be found with using the `paused()` getter).

Pause or Resume an Animation by Checking isActive with GreenSock

GreenSock also supports the ability to animate `from` a variable point to the current point. If you think `to` starts at a static point and moves to a variable point then `from` essentially does the opposite. `fromTo` supports the scenario where both points are variables and requires passing in a "from" set of properties and a "to" set of properties.

Animate From a Variable Point with from and fromTo in GreenSock

Each animation can be moved to a specific point in time based on the `progress` setting between 0 and 1 (0% and 100%). This lesson shows how to control the progress using the scroll wheel of the mouse which can easily fast-forward or rewind through the timeline.

Manually Control the Animation with progress in GreenSock

Any GreenSock animation can accept an array of dom elements. This lesson shows you how to easily create and tween 100 divs to the same point.

Control an Array of Elements with the Same Animation in GreenSock

There are many reasons you'd want to stop an animation from running. `TweenMax` provides ways to stop a tween of a specific element or every tween currently running, we are going to look at two of them, `killTweensOf` and `killAll`. This lesson walks you through stopping a tween by clicking on a specific element or stopping every tween and forcing them all to complete.

Stop Animations with killTweensOf and killAll in GreenSock

GreenSock enables you to animate between classes defined in your stylesheets using the `className` syntax in your tween properties. This lesson walks you through using the `mouseover`/`mouseout` and `mousedown`/`mouseup` events to add and remove css classes based on the specific event.

Animate Between CSS Classes with GreenSock

The `gsap.set()` tween (or animation container) is a zero-duration tween that instantly applies a property to an HTML element. In addition, there is a subtle but important difference between `opacity` and Greensock's `autoAlpha` properties. You will learn how to hide a menu on page load and also how to prevent the element from flashing on page load. This lesson contains Greensock's basic building blocks that are used to create advanced animations with UI elements.

To add the latest Greensock library to your project, go to [Greensock's website](https://greensock.com/). Fun fact: GSAP stands for Greensock Animation Platform, and their current latest version is GSAP 3!

A common programming convention for Greensock I like to follow is, if you're going to animate a property with Greensock, keep it in Greensock, otherwise, if you are not going to animate a property, keep it in your CSS.

Hide a Menu with GSAP3's set() Tween and autoAlpha Property

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

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

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

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

Simplify State Management with React Query

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.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results