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

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

Creating a Gatsby Source Plugin

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building block of most programming languages.

JavaScript is no exception. In this series, we will explore JavaScript (es6) array methods. We will slice, join, map, and reduce our way to better understanding of the powerful array methods that modern JavaScript delivers.

Understand JavaScript Arrays

This playlist will get you going with the Amplify Console, including showing you how to host your website, integrate continuous integration and continuous delivery, set up a custom domain, and enable pull request previews.

Up and Running with Amplify Static Site Hosting

If you are developing JavaScript applications you are likely using logging as an integral part of your development process. Did you know that you aren't limited to simple `console.log` statements? Modern browsers give you a lot more logging options to work with!

This course will explore those options and give you some new logging tools for your professional toolbox.

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

chrome-devtools

Advanced Logging with the JavaScript Console

Most examples for reduce show you how to take an array of numbers and reduce them to a simple sum. Reduce is a great tool for this, but it can do so much more. It is a powerful tool, and essential to functional programming techniques.

This course will dig deep into the Array#reduce in JavaScript and give you a solid understanding to start using it today.

Reduce Data with Javascript Array#reduce

[Lodash](https://lodash.com/docs/) is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like `_.merge`, `_.get` and `_.debounce` from scratch you will also learn how to replace them completely in some cases with modern syntax such as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) and [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).

This collection should interest the following groups:
- Those who want to better understand common JavaScript patterns
- Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
- Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

Recreating Popular JavaScript Utility Methods from Lodash

Regular expressions are a useful tool for dealing with text data. They allow us to slice and dice strings, and useful extract information in our applications.

Regex is also complex, and many developers will spend their entire career looking up even the most trivial of regex operations.

This course will help improve your regex skills, and teach a solid core of useful tools that you can use every day with confidence!

Regex in Javascript

This collection intends to provide viewers with examples of the different Algebraic Data Types that are commonly used in programming. All of these ADTs can be found within the Fantasy Land specification which consists of common algebraic data types used in the realm of web development. By adhering to the different laws that each ADT is built upon, users of the spec are provided with interoperability when using different algebras, ultimately providing them with an incredibly powerful set of tools.

### Resources

* [Fantasy Land Github](https://github.com/fantasyland/fantasy-land)

Exploring Common Algebraic Data Types Used in Functional Programming

Stimulus is self-described as "A modest JavaScript framework for the HTML you already have".

This collection will show you how to build a Stimulus controller that allows a user to filter a collection of DOM elements based on a variety of inputs.

You'll learn:

* How to connect a Stimulus controller
* What an `action` and a `target` are, and how they work
* Modern JavaScript to make filtering a collection simple
* Techniques to make your code extensible and reusable

Filter a Collection Using Stimulus

This course takes a look at some of the new features that JavaScript has available with ES6 (ECMAScript 2015). It is a "montage" from several instructors.

Learn ES6 (ECMAScript 2015)

Nodejs

This playlist will guide you trough short circuit operators in JavaScript. In the first video you will get an introduction to what short circuits are proceeded with some of the most popular practical applications of it.

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

Learn Practical Application of Short Circuits in JavaScript

im·mu·ta·ble i(m)ˈmyo͞odəb(ə)l/ adjective - **unchanging over time or unable to be changed**.

Mutating data is the source of never ending headaches in software systems, and JavaScript code is no exception. Immutable data structures, pure functions, uni-directional data flow... you've probably been hearing these terms.

Immutable.js provides us the data structures and utilities that we need to start introducing this powerful concept of immutability into our applications.

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

Learn how to use Immutable.js

The underpinnings of tools like Babel and ESLint, Abstract Syntax Trees (or ASTs) are not nearly as scary as you might think. This is a collection of all the egghead.io lessons I (Kent) have put out there.

Abstract Syntax Trees

Tic Tac Toe is a classic game that has a relatively simple win condition. Get three of your pieces to line up in a row on a 3x3 grid-style board and you win, and also prevent your opponent from doing so.

This makes the game a great challenge to represent as code. 

In this course, you will start with a blank create-react-app application, learn how to build a 3x3 grid (with CSS Grid), and power that grid so that you can take turns with another person and play tic tac toe. 

You'll model the game state as a multidimensional array where you will manage and update that state with `useReducer`


Manage Complex Tic Tac Toe Game State in React

Javascript offers different ways to work with arrays one of the most used data structures out there.

Learn some of these methods and functions to improve the way you manipulate arrays in your code.

Efficient Javascript Array Manipulation

***Note: Some of the RxJS syntax used in this course is outdated, but the concepts taught on arrays, async, and observables are still reliable and applicable.***

Async programming may seem daunting. How can we write programs that accept user input, run animations, and send server requests over the same period? How do we keep the code clear and concise? How do we gracefully propagate and handle asynchronous errors? How can we avoid memory leaks caused by dangling event handlers? JavaScript's loops and try/catch keywords are no help - they only work on synchronous functions.

Here's the good news: Asynchronous programming is much easier than it seems. The key is to think differently about events. It is possible to build most asynchronous programs using a handful of simple functions. We will learn why most JavaScript developers approach asynchronous programming the wrong way, and how to avoid these common mistakes. 

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


rxjs

Asynchronous Programming: The End of The Loop

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Develop Custom Twitch Scenes and Setup in OBS

This collection of videos teaches you how to use [KeystoneJS](https://v5.keystonejs.com) to build a CRUD-ready GraphQL API, coming with an automatically generated Admin UI. 

Starting with a blank file, we will create an API by:
- defining "Lists" as content types
- adding fields (Select, Text, Checkbox, ...) to our lists
- customising access control to define what users can (and cannot!) do with our API.

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

Build a CRUD-ready GraphQL API + Admin UI with KeystoneJS

These are some of my egghead.io lessons that are focused on JavaScript.

JavaScript from Kent

This is a small collection of videos to help you get familiar with Chrome browser's performance oriented developer tools.
In this collection, learn how to record a performance profile, tweak the settings to get the most relevant profile and finally a look into the different sections of the performance data visualisation.

Topics

Instructors

Content Type

Free or Pro