Resources for Web Developers in 2021

This course explores some of the new advanced TypeScript features, using practical examples you might encounter in your projects.


We’ll start off by demonstrating two new features that improve readability (numeric separators) and tighten type strictness in classes (strict property initialization). We’ll then improve type guards with a practical Redux-inspired example, followed by a lesson about writing more readable mapped type modifiers. We’ll use a summary on types vs. interfaces to transition to self-referencing types examples (and how to build custom type safe iterators around them). We’ll then cover a few ways to use the new conditional types, including building a recursive generic type that transforms any other type you pass into it, regardless of how deep it is, and makes it read-only — great for your immutable states! 


Finally, we’ll end with a lesson on building and chaining decorators to initialize and augment properties in classes.

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

typescript

Practical Advanced TypeScript

Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve. 

In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework. 

This course is beginner-friendly, but is well-suited for experience programmers as well. 

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

dart

Get Started with Dart

Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through:

- specificity
- fonts
- the box model
- margins
- padding
- positioning
- and much more!

Cascading Style Sheets bring order and beauty to our applications.

CSS Fundamentals

Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal (currently pre-released), you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.

As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.

By the end of this course, you'll learn how to:

- Run (and Skip) side-effects with the useEffect hook
- Write a custom hook to share logic in your app
- Simplify the Context API with the useContext hook
- Update state with dispatch actions using the useReducer hook 
- Optimize Components with useMemo

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

Reusable State and Effects with React Hooks

With the massive improvements to function components in React via hooks and suspense, you may be interested in seeing how to refactor a typical class component to a simpler function component that uses React Hooks features. In this course, Kent will take [a modern React codebase](https://github.com/kentcdodds/react-github-profile) that uses classes and refactor the entire thing to use function components as much as possible. We’ll look at state, side effects, async code, caching, and more!

Want a primer on hooks and suspense? [Watch Kent's React Hooks and Suspense Playlist](https://egghead.io/playlists/react-hooks-and-suspense-650307f2)!



Simplify React Apps with React Hooks

Quickly learn to use React Query's `useQuery` and `useMutation` hooks. We'll discuss concepts like the `queryCache`, dependent queries, and wire up React Query's custom Devtools component. 

Use React Query's hooks to query and mutate data in your React components

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

This course will walk you through the entire process for creating and deploying your first Static HTML Site. 

You will learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.

Additionally, you will learn how to make your website responsive using CSS media queries, add custom emojis, animations, and a "Tweet" button.

To finalize the course, you will learn how to deploy and host your Static HTML Site with Netlify, a powerful service that automates builds, deployments, and manages your websites and web apps.

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Create and Deploy a Basic Static HTML Website

React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users. 

This course walks you through setup and implementation to get your cloud-based application up and running. 

You’ll learn to set up:
* a new project in AWS Amplify configured to your React app
* user authentication with Amazon Cognito 
* managed GraphQL with AWS AppSync
* image storage and retrieval with Amazon S3
* text translation via Lambda functions
* and finally, deployment of your application on AWS using Amazon S3

You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Building Serverless Web Applications with React & AWS Amplify

This is a collection of lessons by [Sam Julien](http://www.samjulien.com/) about [NgRx](https://ngrx.io/).

RxJS powered state management for Angular applications, inspired by Redux.

ngrx

NgRx Lessons

JSX is used heavily in the React ecosystem to represent tree structures such as HTML. Explore how JSX works, how it compiles to JavaScript, and why it isn't tied to React.

WTF is JSX

At a high level Redux is just a dispatching system, sitting atop a finite state machine, driving our application state. It just so happens that the State ADT is good at modeling a finite state machine. It allows us to represent our stateful transactions in discrete, easily composed transactions. We can create complicated stateful transitions by composing many simple transitions into one state transaction. By using the State ADT, we should be able to model all of our application state transitions and provide a single reducer function to Redux that integrates with our state machine model.

We’ll put this theory to the test by building a Memory type game called “Anger The Bunny”.  We start of by defining our state transitions using the State ADT, starting with simple, discrete transactions and using them to create the complex transitions typical of any game. Then once we have a majority of our game logic implemented, we will integrate those with Redux.

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Redux and the State ADT

Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

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

Critical Rendering Path

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

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

Reactive State Management in Angular with ngrx

This course teaches you how to implement your first data structures and algorithms. In the process, you’ll learn some fundamental computer science concepts as well. We’ll build these from scratch using JavaScript, but what we learn can be taken and used in any other language, too.

You will learn how to build: queues, stacks, linked lists, graphs, and trees. You’ll learn to implement several different sorting algorithms: bubble, insert, merge, and quick. Each of these lessons will not only teach you their implementation, but the tradeoffs made in choosing one over another. By proxy, you’ll learn about concepts like Big O notation and recursion.

Data Structures and Algorithms in JavaScript

Progressive Web Apps (PWAs) allow a user to use your web app online or offline, and lets them install the app onto their iOS or Android device just like a native app.  Sounds great, right?  But it can be tricky to properly configure a PWA, and not every feature works on every browser or device.

In this course, we’ll create an online/offline note taking app.  We’ll use `create-react-app` to create the frontend, and node.js to create a simple backend.  We’ll start by making sure the app can be displayed offline with cached resources, and learn how to persist data while the app is in offline mode.  We’ll also interact with native features like the camera, and learn how to let users install the app on their phone home screen.  Then we’ll customize the appearance of the app, including the app icon, splash screen, and phone status bar.

Finally, we’ll deploy the production app to heroku.  By the end of this course, you will have everything you need to create a Progressive Web App with React.

Progressive Web Apps in React with create-react-app

MDX has the tagline *markdown for the component era*. It aims to make authoring with Markdown and JSX simpler, allowing you to use components for rich interaction and data-loading, while keeping long form content fun to write with classic Markdown.

This collection includes lessons on configuring MDX, setting it up specifically in Gatsby sites, and ideas for different components you can use including: 
- inline sign up form components
- live code editing components
- table of contents components
- other 3rd party components like the `Divider` and `Message` components from Theme UI

Customizations like using default layouts for MDX content and styling MDX components with Theme UI are also covered.

Using components in Markdown with MDX

Neural networks, with Keras, bring powerful machine learning to Python applications. They can answer questions like “How much traffic will hit my website tonight?” or answer classification questions like “Will this customer buy our product?” or “Will the stock price go up or down tomorrow?”

In this course, we’ll build a fully connected neural network with Keras. This is the most basic type of neural network you can create, but it’s powerful in application and can jumpstart your exploration of other frameworks. 

We’ll start the course by creating the primary network. Then we’ll:

- build and configure the network, then evaluate and test the accuracy of each
- save the model and learn how to load it and use it to make predictions in the future
- expose the model as part of a tiny web application that can be used to make predictions

You don’t need to know a lot of Python for this course, but some basic Python knowledge will be helpful. Enjoy!

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Fully Connected Neural Networks with Keras

Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out! 

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

GitHub Tips & Tricks

With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

In this course, Nader Dabit will show you how to:

- build a production-ready GraphQL API through AWS AppSync
- create and modify data through the AWS AppSync console
- connect a React application to the GraphQL API
- execute queries, mutations, and subscriptions for data through the API in React

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

Angular is particularly popular at large enterprises. Most of the time those line of business apps are very data driven and forms heavy. While Angular gives us two different approaches to implementing forms, neither of them is very satisfying, nor do they help keep the maintainability high especially in large enterprise apps. 

In this course we're going to learn about [ngx-formly](https://formly.dev/), a library that helps cope with some of the mentioned issues. With Formly you define the form structure once in your component code and the HTML will be taken care of by the library. This helps to reduce maintainability and moreover Formly has some nice reactive features built-in that help you reduce your form code even more.

Questions? Ping me [on Twitter](https://twitter.com/juristr) or on [juri.dev](https://juri.dev) 🙂

Topics

Instructors

Content Type