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

If there's one thing that never gets old, it's rock-solid JavaScript fundamentals.

When you're working in frameworks like React, Vue, and Angular, it's easy to forget that most of what you're writing is still JavaScript. We all get swept away in the excitement of new tools, but you need to lay down a stable foundation before stacking too much on top.

A strong understanding of JavaScript is essential for having a successful career, no matter which framework you use.

This is a curated resource covering the important parts of the whole language.

When someone comes to you and asks "Hey! Can you build this?", you'll be able to say "yes" with confidence.

Kent C. Dodds

TestingJavascript.com

John Lindquist

course

Learn ES6 (ECMAScript 2015)

Shane Osbourne

Understand JavaScript Arrays

Tyler Clark

Advanced JavaScript Foundations

Just starting out with JavaScript

Beginner

Marius Schulz

Understand JavaScript's this Keyword in Depth

mykola bilokonsky

Reduce Data with Javascript Array#reduce

JavaScript Promises in Depth

Hitting your stride

Intermediate

Max Stoiber

Write simple asynchronous code with JavaScript generators

Asynchronous JavaScript with async/await

Understanding JavaScript's Prototypal Inheritance

Above and beyond

Advanced

Level up at JavaScript

Whether you are just starting out with frontend engineering or you are a seasoned veteran, this course will provide a strong understanding of the DOM Event system.

Alex Reardon

Your Ultimate Guide to Understanding DOM Events

Managing state is one of the primary reasons our applications become so complex. See how to simplify state with state machines.

Kyle Shevlin

Introduction to State Machines Using XState

A quick overview of the features of Script Kit to help you get oriented and writing scripts in no time. 

Script Kit Showcase for Optimizing Your Everyday Workflows

Functional Programming can be overwhelming to learn with all the new jargon and concepts. Learn this style without all the headaches.

Just Enough Functional Programming in JavaScript

Learn how to implement data structures, sorting algorithms, and the trade-offs between what algorithms to choose.

Data Structures and Algorithms in JavaScript

You will learn algorithmic approaches to problems and review the pitfalls and optimizations.

Algorithms in JavaScript

Popular JavaScript Courses

Under the hood of your modern applications, there is a lot of work communication back and forth with servers, reacting to user interaction, and managing the state of a complex asynchronous application. Your application grows, the complexity multiplies, until you've got a jumbled mess that makes you sad to get up and get to work every morning.

Jafar Husain

Asynchronous Programming: The End of The Loop

Take an in-depth look at how to use promises to model various kinds of asynchronous operations.


Asynchronous JavaScript

You likely know the pain and joy that is debugging. The pain is part of the process, and the joy is winning the battle and fixing the issue. You're probably familiar with the basics of using Devtools. These courses will give you new tools that will help make the journey from debugging pain to joy more quickly!

Advanced Logging with the JavaScript Console

We’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web app.

Debug the DOM in Chrome with the Devtools Elements Panel

Debug JavaScript in Chrome with DevTool Sources

Debug HTTP with Chrome DevTools Network Panel

Yonatan Kra

Critical Rendering Path

Tomasz Łakomy

Chrome DevTools tips & tricks

Debugging JavaScript

Confidently Solve Interview Problems

Brian Lonsdorf

podcast

Math and Functional Programming Aren't Exclusive to Wizards

Henry Zhu, Maintainer of Babel

Functional JavaScript

Mark Shust

12-factor JavaScript Applications using Docker

Learning and Experimenting with Physical and Digital Mediums

Conversations with JavaScript Experts

JavaScript

Learn Javascript

Dealing with stateful computations can be a challenge when writing purely functional JavaScript.
They can result in undesired variable declaration at best and boilerplate state management code
in every function dependent on the state at its worst.

In this course we will explore a well know Algebraic Data Type named State, that is built from
the ground up to address these 🌽cerns. While this course will be focused around a State
implementation provided by a library named [`crocks`](https://www.npmjs.com/package/crocks),
a majority of the techniques we learn here can be used with most of the State implementations
in the wild.

State Monad in JavaScript

Lessons based on posts from my blog - https://kyleshevlin.com

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

Kyle Shevlin's Blog Lessons

This course begins with some small steps for working with WebAssembly straight away using online tools wasm Explorer and wasm Fiddle to try out the examples in the browser. We start by calling a WebAssembly function from JS, then a JS function from WebAssembly, then go on to reading and writing WebAssembly memory from JS. To move beyond these online sandboxes, we show the exact steps for setting up and running a complete local WebAssembly build workflow using the experimental LLVM WebAssembly build target. We then take a demo WebGL application written in JS and show how we can optimize this with WebAssembly to get a real world example of a WebAssembly performance improvement, although it isn’t as obvious a process as we might have hoped.

Get Started Using WebAssembly (wasm)

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 teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these algebraic constructs across the board as a way to compose applications in a principled way. 

We can do the same in JavaScript. While the subject matter will move beyond the functional programming basics, no previous knowledge of functional programming is required. You'll start composing functionality before you know it.

Professor Frisby Introduces Composable Functional JavaScript

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own. 

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

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.

Publish JavaScript packages on npm

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

As a developer, you'll often make use of APIs that have you pass in a callback function. For example, adding event listeners or using various other DOM or Node APIs.

What's less common is writing your own code that makes use of callbacks. Many developers know *what* a callback is, but not the why or how of implementing them in their projects.

A callback is a function that you pass to another function, so that the function that you pass it to controls the invocation of that function.

To help keep things straight, John Lindquist calls the innermost callback the Listener, and the function it gets passed into the Broadcaster.

Think of it as one function *broadcasting* values to another function that is *listening* for them. 

These Broadcaster-Listener callback relationships can be composed to solve problems in the realm of timing, buffering, and caching.

This pattern of composing callbacks is the foundation of RxJS and other libraries that handle complex async scenarios.

In this course, John Lindquist guides you from a blank JavaScript file all the way through creating a library of reusable functions not unlike those found in RxJS. The difference is you'll be writing from scratch.

You'll learn techniques for solving Callback Hell with composition, implementing debouncing, and building a word game among several other examples.

Using callbacks in code is a major pattern in JavaScript, and learning to work with them effectively will take your problem-solving skills to the next level.

Composing Closures and Callbacks in JavaScript

Learn the main additions. Including flat, flatMap and Object.fromEntries.

ES2019 Additions to JavaScript

In this course we will learn how to use the ES2017 async and await keywords to write asynchronous code that is more readable and easier to follow than equivalent code based on long promise chains or deeply nested callbacks. 

The await operator takes a promise and then pauses the function execution until that promise is settled which allows for an async function to read like sequential synchronous code.

This course will start by showing us how to convert a function doing a simple HTTP request into an async function using async/await. By the end of the course we will be able to loop over asynchronous data sources using a `for-await-of` async generator function.

[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.

unified - the compiler for your content

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

Front-end web architecture has made exciting advances in recent years. But before we get to that we need to have a discussion on what has led us to this point and the driving principles behind it.

Since JQuery, we've progressively been decoupling our logic from the DOM. After JQuery, frameworks like Angular were able to abstract that logic into controllers and services. Then Redux came along and brought a simplified that let us reorganize our logic into more cohesive units. 

We should be taking advantage of improved decoupling in the modern web. If you can write a function you can write an endpoint. And if you understand frontend architecture principles, then you already understand cloud architecture principles. 

In this course, you will learn how to decouple JavaScript functions from the environment they live in. By using the Serverless framework and AWS, you will see how straightforward it is to create an endpoint. 

So check out this course and start lifting your functions into the cloud today!

Transform Local Functions Into Endpoints With Serverless

We’ll cover per-vertex coloring, advanced use of vertex arrays, more drawing modes for building 3D models, perspective, textures, and lighting.
This course assumes prior knowledge in WebGL. 
**Note:** Check out [Create 3D Graphics in JavaScript Using WebGL](https://egghead.io/courses/create-3d-graphics-in-javascript-using-webgl) for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

webgl

Build Complex 3D models with WebGL

React hooks can be used to add state to functional components, as well as replace the lifecycle methods that only class methods had available until now.

This playlist goes through several different hooks available now in React, as well as how to make your own custom hooks!

React Hooks in Function Components

With the release of the React Hooks API, it is now possible to store state in functional components. In this playlist, we'll take an initial look at the `useState` hook as well as a few others. In one of the later lessons, we'll build a custom hook, a tool for easily sharing functionality with more that one component.

An Introduction to React Hooks

In this course we’ll work through Natural’s API for natural language processing in JavaScript. We’ll look at how to process text: learning how to break up language strings, find the word roots, work with inflectors, find sequences of words, and tag parts of speech. We’ll learn how to find important stats about a body of text: how to compare strings, how to classify text with machine learning, how to use the tf-idf tool to find relevant words. We’ll look at some of the extra tools Natural gives us, including the dictionary/thesaurus of WordNet, a phonetics comparer that lets us see if two words sound the same, and a spellcheck feature. We’ll also look at tries and digraphs, two data structures that help us better analyze bodies of text.

Natural is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported.

natural

Natural Language Processing in JavaScript with Natural

Generators are a useful tool for handling asynchrony in your JavaScript applications. They were added to JavaScript with ES2015. When applied correctly they allow us to write asynchronous code that looks synchronous.

They also turn one of JavaScripts core paradigms on its head. Contrary to normal functions, generator functions can be paused and resumed at any arbitrary point in time with the yield keyword.

This course will walk you through the basics of generators so you’ll be able to use them in your applications without ripping your hair out!

In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shaders in GLSL. This intro course covers setting up WebGL in an HTML application and learning the basics of 3d vertices, shaders, drawing modes, animation, interaction and transformations.

Create 3D Graphics in JavaScript Using WebGL

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

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

chrome-devtools

GIF Loop Coder is a desktop tool for creating looping animations using JavaScript code. It is hours of fun to be had, and the [results are always interesting](http://gifloopcoder.tumblr.com/).

With this course, you will learn how to create animations with GLC. GLC is an open source application, built on top of Electron. [You can find it on Github](https://github.com/bit101/gifloopcoder)!

Search Results