 Resources from Tomasz Łakomy in 2021

[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!) 

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

Sync State Across Components with Recoil in React

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

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 26 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

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

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

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. 

VR Applications using React 360

**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

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

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

In this lesson, you will learn how to iteratively generate CSS selectors and attributes using Sass loops. We will create a gradient of 100 elements, each with 1% darker colour using only a couple of lines of Sass.

Create a gradient with a Sass loop

A new way of doing code-splitting in React apps has been released in [React v16.6.0](https://reactjs.org/blog/2018/10/23/react-v-16-6.html). It allows us to use `Suspense` tag with dynamic `import` statements to send heavy components over the wire to the user when they are needed and not before.

In this example we are going to see how to use React.lazy and Suspense to avoid sending whole of lodash and moment JS libraries and instead do it once it's actually necessary.

Use React.lazy to do code-splitting with React Suspense

In this lesson we are going to use a completely different approach to managing React component internal state than most of React devs are used to. Instead of manually handling the transitions from one state to another we are going to use [React Automata](https://github.com/MicheleBertoli/react-automata) which allows us to create a state machine object describing possible states of the component and possible transitions between them and use it in a React component.

We are going to see an example of React Automata in action while developing a simple traffic light component, but this declarative state approach can be used to create whole React applications as an alternative to other state management solutions. 

Manage Component State with a React Automata State Machine

In this lesson, we are going to use [React Fragments](https://reactjs.org/docs/fragments.html) to wrap adjacent JSX elements without introducing unnecessary wrapper elements to DOM. 

Before Fragments came along, the popular pattern was to wrap enclosing elements inside of <div> tags which didn't serve any purpose apart from being a wrapper. This can lead to a huge DOM structure which may be difficult to navigate in devtools and may also lead to some performance issues if our app is large. This lesson will show a better approach to dealing with that problem.

Topics

Instructors

Content Type

Free or Pro