 Resources from Sam Julien in 2024

You're going to find cloud services being used at nearly any enterprise you work for. So it's important for us developers to at least have a high-level understanding of this infrastructure.

And since AWS has the dominant share of the cloud market, being familiar with it is incredibly valuable and opens a lot of doors.

But gaining that familiarity isn't easy. Just browsing through the list of 200+ services is overwhelming. 

Getting started with learning AWS usually involves having a dozen or more open tabs and the feeling that you're going down a rabbit hole that never ends.  

This course is an alternative to that stress. It has been structured like a boat tour on a river of knowledge, linearly guiding you through the core of AWS. 

By the end of this course, you will be confidently spinning up servers, creating relational databases, storing static assets, and writing serverless functions with confidence. 

So, whether you need to learn AWS for your current job or are looking to earn your cloud practitioner certification, start watching this course and gain the skills you need today.

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Cloud Infrastructure Fundamentals with AWS

Angular is a robust, powerful framework for building applications at scale, but it can be really intimidating to beginners! This collection by [JavaScript teacher Sam Julien](http://www.samjulien.com/) is here to help you learn Angular in bite-sized chunks. 

*Note from Sam: these lessons are loosely related but are not meant to necessarily be followed in order from start to finish. I've provided embedded code and links to GitHub where applicable, though, so you can always have access to the finished code for the lesson.*

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

Angular Basics

One of the hardest parts of learning AWS is understanding how the different moving parts work together. 

In this course, we tackle a real-world project of deploying the blogging platform Ghost to AWS using EC2 (the server where Ghost will run) and RDS (a relational database for Ghost to store data).

This course ties together skills like networking, SSH, and using the command line while getting a realistic full-stack platform up and running. 

Whether you're studying for a certificate like Certified Cloud Practitioner or just learning for fun, this hands-on project will be a great way to dig in and get some practice!

Deploy Ghost to AWS using RDS and EC2

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Gatsby provides a React hook that lets us use static queries in our components. It's called (appropriately) `useStaticQuery`. In this lesson, you'll learn how to use `useStaticQuery` to get site metadata from your Gatsby config file.

Get Site Metadata with useStaticQuery

Gatsby's `useStaticQuery` hook is really useful for getting site metadata from our Gatsby config into our components. In fact, it's so useful that we end up using it all over the place and duplicating a lot of code! Luckily, since `useStaticQuery` is just a React hook, we can use it to compose our own custom `useSiteMetadata` hook.

Create a Custom Hook for Site Metadata in Gatsby

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

The `groupBy` operator is one of RxJS's best kept secrets. In this lesson, you'll get an introduction to grouping data together by key. We'll use both hard-coded data and data coming from a server.

To dig deeper into groupBy, check out [What GroupsBy in Vegas Stays in Vegas](https://www.youtube.com/watch?v=hsr4ArAsOL4), the talk [Mike Ryan](https://twitter.com/MikeRyanDev) and I gave at RxJS Live 2019.

Group Data by Key with the groupBy Operator

Angular is complete framework for building web applications at scale, so getting started can be a little intimidating. Let's use the Angular CLI to create our first Angular application.

Create Your First Angular App

By default, the Angular CLI generates components with separate CSS and template files. It doesn't have to be this way! Let's learn how to use the CLI to generate single file components.

Use Single File Components by Default in Angular

We can pass data between components in Angular using inputs. Let's learn how.

Pass Data to Components with Inputs

Let's create our first form in Angular! To do this, we're going to use something called reactive forms in Angular. These forms are model-driven, which means we start with the component code and then build the HTML form. The model will then keep track of the values and the form state (like validation). It's easy to get lost in jargon with reactive forms, so let's walk through it step by step. Feel free to also [refer to the docs](https://angular.io/guide/reactive-forms).

Create Your First Reactive Form in Angular

Sometimes we need to pass data from a child component to a parent component. We could pass the source down to the child as an input and modify it there, but that's not a good practice. In Angular, we can use Outputs and EventEmitters to accomplish this instead. The child component emits an event with the data that the parent listens for. The parent can then process the event data however it needs to. In this video, you'll learn how to do just that with a reactive form that needs to send its value up to its parent component.

Communicate Between Components with Outputs & EventEmitters

Right now, the collection of habits and the business logic for adding a habit are in the component. This works fine for how small our app is right now, but what if we need to access the collection of habits in another component? Or what if we need to add a habit somewhere else? We'd either have to duplicate code or come up with convoluted ways of passing data through inputs and outputs. This is what services are for in Angular. Services let us store data and logic in a class that we can reuse anywhere in our application.

Share Data and Business Logic Throughout an Angular Application with Services

Right now, our app is just using the generic `any` type for our habits. The `any` type basically tells TypeScript to leave us alone and not bother us. This gets our app to work, but it's kind of riding a bike with a deflated back wheel. Angular really shines when you can take advantage of the power of TypeScript. Let's add a custom type for habits using an interface. Then, we'll use it in the habit service and the list and item components.

Add Custom Data Types with TypeScript Interfaces in Angular

Interfaces let us add strong typing to data, but also give us flexibility in the shape of our data by allowing optional properties. This especially comes in handy when computing additional properties on the frontend. In this video, we'll walk through adding an optional property to the habit interface and then computing that property in the habit list component.

Add Optional Properties in Angular to TypeScript Interfaces

In other frameworks, CSS modules and CSS-in-JS are both quite popular. One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won't hear much about these options in the Angular community, and that's because Angular comes with a scoped CSS option right out of the box. In this lesson, I'll show you how this works.

Use Scoped Component Styles in Angular

Even though the default scoped styles in Angular components are really useful, sometimes we do want to apply styles across the whole app. We may also want to make classes available globally. Luckily, Angular provides a nice way to do this in the `styles.css` file.

Add Global Styles in Angular

When we first try to use a local server for our data in development, we get a rude error in the console and nothing works. What is that and why are we getting it? Well, even though both the server and the client will eventually be on the same domain in production, we're getting CORS (cross-origin resource sharing) errors in development. That's because we're running the server and the client on different ports. We can fix this by setting up the Angular CLI to proxy all requests to the API for us so they appear to be coming from the same origin.

Use a Proxy with the Angular CLI to Fix CORS Development Problems

One of the things that drove me crazy when I was first learning RxJS in Angular was how difficult it seemed to reload a collection of data after I added or deleted an item. With promises, I could just use `.then()` and be on my way. What do we do with observables? Should we just nest another subscription? Even if we do that, since we're using the async pipe, nothing will happen. There are better ways to handle this that are more reactive. In this lesson, I'm going to show you one way using Subjects. Subjects are kind of like event emitters that can have multiple listeners.

Refetching Data with Subjects in Angular

When we first create an Angular app with the Angular CLI using `ng new`, it gives us an option to add routing. Sometimes we don't know whether we want to add routing yet, so we say no. What do we do, though, if we decide to add routing later? There's no separate CLI command to set up the routing for you. In this lesson, I'll show you how to manually add routing to your Angular application.

Add Routing to an Existing Angular Project

Once routing is set up, we can add a new route by adding a new component and adding a path to our routes array in `app.module.ts`. But how do we navigate between the two routes? In this lesson, I'll show you how to use `routerLink` to switch between the routes without causing the page to refresh.

Navigate Between Routes in Angular with routerLink

We often need to pass a parameter like an ID to a route and then access that ID in order to call an API to get some data. In this lesson, we'll look at how to define a route with a parameter, how to use params with the `routerLink` directive, and how to use the route snapshot to use a param in a component.

Topics

Instructors

Content Type

Sam Julien