Your Ultimate Guide to Understanding DOM Events

Your Ultimate Guide to Understanding DOM Events 1

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event system and only scratch the surface of the available power.

This lack of understanding leads to bugs in our applications and writing lots of code to work around the DOM event system rather than leveraging it. The goal of the course is that you will walk away with the confidence to successfully and meaningfully engage with the DOM event system.

The DOM Event Visualizer

The DOM event visualizer domevents.dev will be used to explain many behaviors throughout the course. You are welcome to play with the visualizer yourself to continue your learning.

The DOM event visualizer

Implementing a Word Game with Patterns and React

In the previous section, 07 Building Light Search Box, we implemented a search box with the pattern that we’ve built in this course. This works great but doesn’t have as much business logic applied as other async scenarios.

In this section, we will implement a word game where the values coming in from the user will be piped to different listeners to be consumed. Along the way, complex business logic will be applied to determine if the user won the game or not.

You’re in Section 08, the last of Composing Closures and Callbacks in JavaScript

Wrangle your terminal with tmux

Wrangle your terminal with tmux 2

Learn to manage your terminal sessions and work more effectively from the command line using tmux. If you use the command line at all, tmux can make your life easier. tmux bills itself as a terminal multiplexer. It allows you to wrangle multiple terminal sessions from one window. Instead of keeping track of many terminal … Read more

Use Grep for Fast Search from the Command Line

Use Grep for Fast Search from the Command Line 3

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-line utilities, to search through and explore our codebase. Learn to search specific files and folders, using regular expressions to look for — or ignore! — particular phrases. We’ll cover how … Read more

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura 4

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a “Corgi Up-boop App” that uses Netlify Functions and Hasura. You can view the deployed final product on Netlify.

You’ll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you’ll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don’t persist data by themselves, so we will use Hasura to create a GraphQL API for tracking the number of “boops” each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

Angular Automation with Gulp

Angular Automation with Gulp 5

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don’t have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.
Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify 6

Next.js is a React framework that provides a solutions to problems such as:

🌟 bundling & transpiling your React code
🌟 code splitting
🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
🌟 client-side routing

In this collection we’re going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
🔥 Create a new Next.js project
🔥 Add TypeScript support
🔥 Create styled components with Emotion
🔥 Use both static and dynamic routes
🔥 Generate fully typed static pages
🔥 Set up Netlify deployments
🔥 Add a Netlify Form to our site
🔥 and more!

Using Angular 2 Patterns in Angular 1.x Apps

Using Angular 2 Patterns in Angular 1.x Apps 7

Implementing modern component-based architecture in your new or existing Angular 1.x web application is a breath of fresh air. In this course, you are going to take a close look at Eggly, an Angular 1.x application for organizing bookmarks, and build it using modern patterns and practices, inspired by Angular 2’s recommended architecture. You will … Read more

EggHead – Design with Tailwind CSS Masterclass

EggHead - Design with Tailwind CSS Masterclass 9

What you’ll learn: Get Tailwind CSS up and running in your project Build complex application layouts with flexbox Build accessible user interfaces following industry best practices Remove unused CSS from production builds to maximum performance Use responsive utility variants to build adaptive user interfaces Use utilities to style elements on hover, focus, and other states … Read more