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

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

In this course, we will go through the concept of transducers and build them up from basic principles. We will go over the problems with regular composed transformations, and show how we end up with unnecessary data and intermediate collections. We go on to learn how we can use transducers for performance gains when operating on large data sets, as well as how they’re an excellent fit for processing other iterable data, like generators. Not just arrays.

Quickly Transform Data with Transducers

JavaScript’s `this` keyword is a source of confusion for new and experienced developers alike. It can be frustrating if, for some reason, `this` doesn’t point to the context that was intended. 

This course will help you understand JavaScript’s `this` mechanism in-depth. Marius will take us through all of the ways `this` will change its values, from why many libraries use "use strict" to how arrow functions take its outer execution context’s `this`. 

Over 8 lessons, you’ll learn:

- how JavaScript implicitly sets the `this` context, and how we can set it ourselves
- that the call-site of a function determines the `this` value of that function invocation 
- how to call a function with a specific `this` value
- how to create functions that always remain tied to a specific this context
- how `this` is treated within arrow functions and classes

Following the course, `this` will feel less frustrating, more intuitive, and far more useful in your day-to-day. 

Understand JavaScript's this Keyword in Depth

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

React Hooks in Function Components

JavaScript (and webdev in general) is surprisingly broad, there's ALWAYS something to learn. There are so many handy tips & tricks in the language and learning even a couple of those will make you a better JS developer.



JavaScript Handy Tips & Tricks

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

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

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.  

Nuevas Características de ES2020 en JavaScript

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)

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

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

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.

Asynchronous JavaScript with async/await

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

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

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!

Write simple asynchronous code with JavaScript generators

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

Debug JavaScript in Chrome with DevTool Sources

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)!

GIF Loop Coder for Creating Animation

AWS Amplify allows developers to create, configure, and deploy Serverless APIs and functions directly from their front-end environment.In this collection, you'll learn how to deploy various types of APIs and functions using the Amplify CLI. You'll also learn how to share code among various functions using Lambda layers and schedule functions to run at an interval to implement Serverless cron jobs.

Topics

Instructors

Content Type

Free or Pro