Resources for Web Developers in 2021

In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended. 

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

Test React Components with Enzyme and Jest

MobX State Tree (MST) is a library that helps you organize your application states in a very structured manner. It allows you to create a component model, but for your data!

Course instructor Michel Weststrate—creator of Mobx—will teach you to model application state after your problem domain with MST. You will get hands-on practice and see how MST lets you solve problems with its out-of-the-box support for asynchronous actions, patches, snapshots, and middleware.

Over the 17 lessons, you’ll build a little bookshop application using React, MST, and create-react-app, while learning how to manage the lifecycle of your data by describing data models. 

Join Michel in one of the most popular courses on egghead!

Manage Application State with Mobx-state-tree

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

jest

End to End Testing with Google's Puppeteer and Jest

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API.  Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

JSON Web Token (JWT) Authentication with Node.js and Auth0

When merging two objects in javascript, you can _shallow_ merge them, or _deep_ merge them.  These videos show how to do both, and talk about the pros and cons of each approach.

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

Merge Objects in JavaScript

Released in 2015, ES6 was a major update to the JavaScript language, providing many new powerful additions to the language. From arrow functions, classes, generators, and proxies to Promises and Modules, ES6 solved many of the languages problems with cleaner, more concise syntax and functionality.

Since then, a new version of JavaScript is released every year, providing even more power to JavaScript Developers:

ES2016 brings with it Array.prototype.includes, ES2017 has async and await, ES2018 adds new capabilities to regular expressions and async iterators, ES2019 has Object.fromEntries, Array.prototype.flat and flatMap, and ES2020 has dynamic imports, globalThis, and BigInt.

Staying up to date with the language as it evolves saves you from being stumped by new APIs and syntax! Learning ES6 and Beyond will ensure you can drop into any JavaScript codebase and have the best shot at being productive on day one.

ES6 and Beyond - JavaScript Tips and Tricks from ES2015 to ES2020


This course explores the capabilities of TypeScript’s type system and shows how to use advanced static types in practice. For example, you’ll learn how to write safer code by using non-nullable types and being explicit about `null` and `undefined` in the type system. 

You’ll also see how the compiler analyzes control flow to determine the most specific type for a variable at any given location.

In addition to that, you’ll learn about the `readonly` modifier and the special `object` and `never` types. This course also inspects string enums, literal types, discriminated unions, and static types for the rest and spread operators. 

Finally, you’ll see how to type dynamic property access using the `keyof` operator and how to create new types by applying transformation functions to existing ones.

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

typescript

Advanced Static Types in TypeScript

In this course we will explore integral Angular Material components. We will start with components related to navigation, layout, and structure. We will then move through the utility, input, and datatable components, demonstrating how each can be used to suit your project’s needs. Finally we will touch on theming your application to create a custom look and feel that fits within the Material Design guidelines.

By the end of the course you will be comfortable leveraging the Angular Material library to create an outstanding interface and user experience!

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

Structure Angular Apps with Angular Material Components

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

Flutter

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

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

scss

Convert SCSS (Sass) to CSS-in-JS

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. 

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Together, they combine to create a powerful platform for docs, blogs, and other rich applications.

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

Building Websites with MDX and Gatsby

Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives. As your application grows in complexity, you'll need finer control of your components.

In this course, we’ll define where content of a component should land when you define the content inside of a parent component with Vue slots and manage that relationship with slot-scope. We’ll continue with dynamic and async Vue components as well as use JSX inside Vue for complete JavaScript control of your components. 

This course provides an overview of Advanced Vue.js Components with quick demonstrations on how to leverage Vue Component patterns.

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.

Advanced Fine-Grained Control of Vue.js Components

Introductions to various RxJS Operators including of, from, fromEvent, interval and zip.

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


rxjs

RxJS Operators

[Theme UI](https://theme-ui.com) is a library created by [Brent Jackson](https://jxnblk.com) for building themeable React apps with [Gatsby](https://gatsbyjs.org). It's built with [Styled System](https://styled-system.com) which provides a constrained set of styling APIs based on props. It uses [Emotion](https://emotion.sh) and [MDX](https://mdxjs.com) underneath which abstracts us away from a lot of the challenges when dealing with global CSS and styling content.

Theme UI uses ["presentational context"](https://johno.com/presentational-context) to allow a component to apply styling to child elements without introducing global styles. You can use a styles object in your configuration to apply theme-aware styles to ensure consistency.

Bite-size video tutorials for badass web developers.

egghead

Theme UI

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

VS Code Extensions

Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.

What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.

Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.

You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.

The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.

Cascading Style Sheets bring order and beauty to our applications.

Accessible Cross-Browser CSS Form Styling

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

Fauna is inspired by [Calvin](https://blog.acolyer.org/2019/03/29/calvin-fast-distributed-transactions-for-partitioned-database-systems/), has [built-in GraphQL integration](https://docs.fauna.com/fauna/current/api/graphql/), and a query language based on lambda calculus. Be sure to check out the [Jepsen analysis](https://jepsen.io/analyses/faunadb-2.5.4) and the associated [chart of consistency models](https://jepsen.io/consistency)

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

The Complete Guide to FaunaDB

In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need faster rendering speed and smaller network requests! 

You’ll learn how to both split code into lazily loaded bundles AND server-side render your page. 

This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!

The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!

Build a Server Rendered + Code Split App in React with React Universal Component

[unified](https://unifiedjs.com) enables new exciting projects like [Gatsby](https://gatsbyjs.org) to pull in Markdown, [MDX](https://mdxjs.com) to embed JSX, and [Prettier](https://prettier.io) to format it. It’s used in about 300k projects on GitHub and has about 10m downloads each month on npm.

unified uses abstract syntax trees, or ASTs, that plugins can operate on. It can even process between different formats. This means you can parse a markdown document, transform it to HTML, and then transpile back to markdown.

unified leverages a syntax tree specification (called unist or UST) so that utilities can be shared amongst different formats. In practice, you can use unist-util-visit to visit nodes using the same library with the same API on any supported AST.

Topics

Instructors

Content Type