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

Learn Javascript

Here’s an overview of all the topics we’re going to cover. Enjoy the course!

Introduction to JavaScript Promises in Depth

# Up and Running with Parcel JS

In this video, we will get up and running with Parcel by creating a simple Hello World application in JavaScript.

## What is Parcel?

Parcel is a zero configuration web application bundler and Webpack alternative. It supports a ton of functionality out of the box, including Code Splitting, Hot Module Replacement, Environment Variables, and Automatic Transforms for Babel, PostCSS, and PostHTML.

## Asset Support
It supports nearly any type of asset you would typically use in a JavaScript project, including:

* HTML
* Images
* Fonts
* JavaScript
* TypeScript
* CoffeeScript
* Vue
* ReasonML
* CSS
* SCSS
* LESS
* Stylus
* JSON
* GraphQL
* Rust
* WebAssembly
* YAML
* TOML
* OpenGL
* Pug
* WebManifest

Learn more at [Parcel's website](https://parceljs.org/getting_started.html).

Bundle and Run HTML and JavaScript in the Browser with Parcel

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Sometimes you might want to transform arguments before they reach the command handler. For example, perhaps you want to validate that credentials have been provided and otherwise load credentials from a file.

Middleware is simply a stack of functions, each of which is passed the current parsed arguments, which it can in turn update by adding values, removing values, or overwriting values.


Reduce Boilerplate with yargs middleware in a Node.js Command Line Tool

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

Forms in React are not easy. They are verbose and several lines of code. However, forms with Formik are much simpler. Formik maintains the state of inputs and simplifies the form so you can work quicker!

Simplify and Convert a Traditional React Form to Formik

TypeScript can help you with your plain JavaScript files if you add a simple `//@ts-check` comment. Then you can enhance the experience by add proper JSDocs to describe your functions which will feed type information into TypeScript and give you a development experience near TypeScript itself.

Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc

We have the ability to select a single random card from a pile of twelve cards, but we would like to pull a total of nine. Not only that, we would like to match the same transition functions we have been writing all along.

Lucky for use there are three types of functions, or morphisms that we can use to get us everything we need. We use an anamorphism to expand our one function into a list of nine functions. Each of these functions are endomorphisms, so we can use the `mreduce` catamorphism with the `Endo` Monoid to fold them down into one function that we can use to get this action into our state transactions.

Pull Many Random Numbers in a Single State ADT Transaction

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

By using the State ADT to define how our application state transitions over time, we clear up the need for a some of the boilerplate that we typically need for a solid Redux integration. We can keep our action names and creators in the same file as the reducer they are used in, as we no longer need to have separate files to hand the same action across different portions of our state.

We will build our a single reducer that will handle the integration with Redux and organize our State ADT based reducers in their own files and bring them into our main reducer to handle running our state transitions and the cases where we do not have an transition for a given action.

Adapt Redux Actions/Reducers for Use with the State ADT

The typical Redux Reducer is function that takes in the previous state and an action and uses a switch case to determine how to transition the provided State. We can take advantage of the Action Names being Strings and replace the typical switch case with a JavaScript Object that pairs our State ADT reducers with their actions. 

We can also take care of the case in which a reducer does not have an implementation for a given action, by reaching for the `Maybe` data type and updating our main Redux reducer to handle the case for us, by providing the previous state untouched. And all of this can be captured in a simple helper function we can use in all of our reducer files.

Create State ADT Based Reducers

Redux provides a convenient helper for combining many reducers called `combineReducer`, but it focuses in on specific attributes on our state, making it incompatible with using the State ADT. We would like a way to avoid keeping all of our reducers in a single file and want the ability to still combine them in a manner that works with the `State` ADT.

So we will put together our own helper that we also call `combineReducers`, but explore how we can use the `First` Monoid and `mreduceMap` to get us all the power that the Redux helper provides, but setup for our unique needs. As a bonus we will get a sneak peak of the power of using the `flip` combinator to create easy to read compositions without pesky argument juggling

Combine Multiple State ADT Based Redux Reducers

Not only will we need to give our initial state to a Redux store, we will also need to be able to reset our state at any time by dispatching an action. We can get the best of both worlds by having a function that will return an object with all of our initial values in it. Then use that function to craft a `State` ADT transition that will throw out whatever our previous state was and replace it with the original initial state.

We’ll not only build out an initialize state transaction, but also use that new transaction to craft an action creator to expose a means to dispatch at any time an action that will reset our state.

Initialize Redux Application State Using The State ADT

When using ADTs in our code base, it can be difficult to use common debugging tools like watches and breakpoints. This is mainly due to the common pattern of using compositions and other ways of manipulating how functions are called. This can cause us to have to revert to using console logs at the different points in our flow, to peek at how our data is changing over time. When using ADTs this gets even further complicated by the fact that we typically need ways to lift our logging functions into the type.

To get a handle on one way to approach debugging, we’ll look at a `logAfter` function that is a must in any Functional Programmer’s toolkit. Using `logAfter` we’ll hunt down a bug currently in our code base and once located, squash that bug out of existence. 

Debug a Functional JavaScript composeK Flow 

With a well defined demarcation point between Redux and our State ADT based model, hooking up to a Redux store is no different than any other Redux based implementation. Once we have all of our transitions represented in dispatchable actions, we can step though a typical game flow and see our hard work pay off.

Create a Redux Store for Use with a State ADT Based Reducer


Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a React Shell. Having already built out some UI/UX in React that is connected to our store, we’ll spend the first part of this lesson with a quick tour of how our store integrates using the standard `react-redux` library.

Once we get a handle on our state's propagation through the app, we can focus in on how we will dispatch our actions during game play. We’ll implement the ability to start the game by using the `startGame` action creator to create a dispatching function that is passed through our component tree, down to the Start Game button in our Playing Area.

Connect State ADT Based Redux Actions to a React Application

We only have a few dispatching functions that need to be known by our React Application. Each one actually has multiple actions that need to be dispatched. While we could just have many imperative calls to dispatch in our dispatching functions, but why not use it as an excuse to use an array and write some middleware.

We will create a middleware function that will check dispatched actions to see if they are arrays. If a given action is an array we loop over the array, dispatching each action in turn. If it is not however, we just pass it along to be handled downstream.

Create Redux Middleware to Dispatch Multiple Actions

We would like the ability to group a series of actions to be dispatched with single dispatching functions used as handlers in various parts of our game. The only issue with that, is that animations and other design elements in our game require us to provide some temporal space between each of those actions in the series being fired.

This is something we can achieve by reaching for the `Async` ADT provided by the crocks library. In order to allow for `Async`s in our Redux flow we are going to need to create some middleware that can identify when an `Async` is provided as an action, and then handle it appropriately .

Create Redux Middleware to Dispatch Actions with the Async ADT

There are times when we need to provide input to our action dispatching functions that we use as handlers. A great use case in our game is when the player selects one of the cards as their answer. We need to communicate which card was selected so our state can transition properly.

To complicate the matter, when a player provides their answer, we want to fire a series of well times actions, with some of them needing this input. We have set up a nice pattern that will allow us to apply any arguments to any action created needed in a series of actions in an easy to follow manner.

Dispatch Multiple Asynchronous Redux Actions with Arguments

Once we have our model fully integrated with a dispatching state management system like Redux and a front-end implementation in something like React, there will come a time when we will need to either add to or extend our model in some way.

By building out our model first and keeping all of our game logic concerns isolated to our pure state transitions, it is easy to alter. Usually it is just a matter of capturing our modifications in a single function and then locating the point in our existing model where we need our change applied. Then we just plop in our function, and as long as our function is pure, most of the time it will just work.

Extend State ADT Based Transitions after React/Redux Integration

So far all of our actions have been implemented as a series of well timed events. We are also capable of not using any of our middleware and just dispatching a normal simple action with no frills or fuss. To complete this game out, we implement the simplest of our action dispatching functions to allow the player to restart the same once it has been concluded.

Dispatch a Single State ADT Based Redux Action

In this video we show how to spin up new environments using the AWS Amplify CLI to test out new features & then merge the new features back into a main AWS Amplify environment.

Creating & Managing Multiple Serverless AWS Environments Using the AWS Amplify CLI

A quick overview of what can be expected when going through this course.

Topics

Instructors

Content Type