 Resources from Tomasz Łakomy in 2021

Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

Not anymore!

With the AWS Cloud Development Kit (CDK), you are able to configure AWS services from your terminal & editor.

Even better, you can do your configuration, frontend, and backend all with the same language. 

In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK. You'll see how to start a project, develop it locally, deploy it globally, then tear it all down when you're done.

The services & development approach Tomasz demonstrates in this course are used by countless companies around the world. 

Is yours next?

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.

Build an App with the AWS Cloud Development Kit

Imagine the following.

You join a new project and after getting access to the repo you notice that there's no tests.

You decide to ask the team whether they are in different repo or something and unfortunately the answer is:

>We don't have any tests, we didn't have the time.

😐

In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:

- 🌟 Ensure that our app currently works as intended
- 🌟 Allow us to add features to it with a technique called "Cypress Driven Development" 

In less than 20 minutes we're going to go through:

- ⚡️Adding cypress.io setup to an existing project
- ⚡️Testing search functionality with `data-cy` properties
- ⚡️Using "Cypress Driven Development" to add a new feature to an app
- ⚡️Use Cypress UI to debug an API response
- ⚡️How to use `cy.only` and `cy.skip` in order for us to build our e2e test suite faster

and much more!

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Add e2e tests with cypress to a React application

We generally tend to avoid paying for things unless we actually need them, and the same goes for AWS

When using a cloud provider like AWS sometimes an unexpected charge may occur and we'd like to understand what are we being charged for and how to be notified whenever an unexpected charge occurs (especially when we're trying to stay within a free tier).

In this quick (4 minutes, 2 lessons) collection we're going to learn how to:

- Review the AWS Billing & Cost Management Dashboard
- Set up a billing alarm to be notified whenever our bill is larger than $5
- Review the AWS bill to understand how much are we going to pay this month and why

Use AWS Billing & Cost Management Dashboard to keep your AWS bill to minimum

If you’ve used React, you know how it can provide smart solutions to complex problems. And how exciting that can be.

React 360 brings the same ease and enjoyability to the creation of 3D and VR experiences. It’s built on top of React with an additional set of exciting, powerful tools like surfaces, events, and native modules.

In this course, Tomasz Łakomy will show you how to use React 360 to create amazing 3D and VR experiences. You’ll build on your React foundation, using the component formatting you already know, and push it to another dimension to create web apps that can be enjoyed across mobile, desktop, and VR headsets. And you won’t need to use crazy complex tools like WebGL to do it — just React!

Following the course, you’ll be ready to use React 360 to take an idea from creation to completion in a VR app — for instance, a VR image gallery, game, web browser, or interactive story.

If you’re comfortable in React and you’re ready for something new, this course is perfect for you. 

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

VR Applications using React 360

[Recoil](https://recoiljs.org/) is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

* add Recoil to your React project
* create a Recoil atom and use it to store a piece of state
* use `useRecoilState` hook to update an atom
* use `useRecoilValue` to access value stored in an atom in a read-only fashion
* use 🔥`selectors`🔥 in order to calculate derived data based on state stored within atoms (this is *really* powerful!) 

Up and running with Recoil - a new state management library for React

**View and Contribute to the [Community Notes](https://github.com/eggheadio-projects/learn-aws-dynamodb-from-scratch)!**

Learn AWS DynamoDB from scratch

Building larger serverless applications can be tricky - creating many lambda functions as well as other resources such as DynamoDB tables, S3 buckets, API Gateways using AWS Console takes quite a lot of time. Not to mention other problems such as redeploying the app to a different region, reviewing the infrastructure etc.

**AWS Serverless Application Model** (**AWS SAM** for short) simplifies a lot of those issues 🤩

Built with with best practices in mind, SAM allows you to:

🌟define your infrastructure as code using a YAML template (which can go through code review!)

🌟define resources such as lambda functions, DynamoDB tables etc. in a much simpler way than doing it directly in CloudFormation (which SAM is built on top of)

🌟build and deploy a serverless application from a command line

🌟debug and test lambda functions locally using SAM CLI

🌟debug and test lambda functions from WITHIN your editor with AWS Toolkit extension


Add AWS SAM to your toolkit with this quick collection!

**View and Contribute to the [Community Notes!](https://github.com/eggheadio-projects/build-serverless-applications-with-aws-sam)**

Build serverless applications with AWS Serverless Application Model (AWS SAM)

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

- **Use (experimental) CSS Overview to learn all about CSS used on a page in a minute**
- **Style console.log messages with CSS** - a _crucial_ skill for any senior developer (j/k)
- **Debug your code (on production and local environment) with logpoints**
- **Run a Lighthouse audit of your site**
- **Choose accessible colors for your website that have an AAA contrast ratio rating**
- **Force a DOM element state in Chrome DevTools**
- **Use Console utilities to make debugging easier**
- **Copy a network request as fetch or cURL with Chrome DevTools**

Have fun!

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

chrome-devtools

Chrome DevTools tips & tricks

AWS Lambda, Serverless, FaaS - there is a lot of noise around those topics online (and for a very good reason!) and it can get confusing at times 🤯

In this collection we're going to take a look at AWS Lambda from scratch, in order to get **YOU** from:

"_I have no idea what a lambda function is_" 

to 

"_I know quite a bit about AWS Lambda, and I'm going to use it to solve my problems_"

Checkout the [community notes for this collection on github](https://github.com/theianjones/egghead.io_learn_aws_lambda_from_scratch).

Learn AWS Lambda from scratch

In React world, things are changing and they are changing rapidly.

If you'd like to get up to speed in what new APIs React has to offer and have literally 7 minutes to spare - this is a collection for you!

Learn React lazy, memo, useState and useEffect in 7 minutes

React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

Enjoy!

Learn React hooks, lazy, and memo API

JavaScript (and webdev in general) is surprisingly broad, there's ALWAYS something to learn. There are so many handy tips & tricks in the language and learning even a couple of those will make you a better JS developer.



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

JavaScript Handy Tips & Tricks

Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. 

As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks.

If you'd like to learn how to use them, this playlist is for you!

Learn Apollo Client Hooks

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

The best part? If you have 19 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

Forms are difficult in React.

Luckily, there are many solutions that allow us to create React forms more easily, such as [React Final Form](https://github.com/final-form/react-final-form) created by [Erik Rasmussen](https://twitter.com/erikras).

React Final Form is a high performance subscription-based form state management for React which is not only extremely powerful, but also lightweight (3.0k gzipped!) and easy to use.

Create forms in React applications with React Final Form

Learn Amazon S3 from scratch

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

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

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using `submitting` property from React Final Form render prop.

Avoid Submitting a Form Twice with React Final Form 'submitting' property

React allows us to create web, native and... VR applications with [React 360](https://facebook.github.io/react-360/)

In this lesson we are going to learn how to start a Virtual Reality project with React 360 (previously known as React VR) and start making first changes to a "hello world" VR React application.

Start a Virtual Reality project with React 360

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Use React.memo to avoid unnecessary re-renders in React functional components

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

Topics

Instructors

Content Type