Courses on egghead

  • Build a Serverless API with Cloudflare Workers

    Cloudflare Workers let you write JavaScript Service Workers that run directly in Cloudflare's 200+ edge locations around the world.

    With a Cloudflare Worker, you can modify your site's HTTP requests and responses, make parallel requests, and even reply directly from the edge.

    Cloudflare Workers are written against a similar API to the W3C Service Workers standard. However, while Service Workers run inside the end user's browser, Cloudflare Workers run on Cloudflare's servers. This means that Cloudflare Workers can implement trusted code (which the client cannot tamper with), and will work no matter what browser the user is running.

    In this course, Kristian Freeman will teach you how to build and deploy a Serverless API with Cloudflare Workers. By learning how to build your own serverless JSON APIs, you can effectively manage a highly-available backend for your projects, without needing to learn DevOps or manage services.

  • Deploy Ghost to AWS using RDS and EC2

    One of the hardest parts of learning AWS is understanding how the different moving parts work together.

    In this course, we tackle a real-world project of deploying the blogging platform Ghost to AWS using EC2 (the server where Ghost will run) and RDS (a relational database for Ghost to store data).

    This course ties together skills like networking, SSH, and using the command line while getting a realistic full-stack platform up and running.

    Whether you're studying for a certificate like Certified Cloud Practitioner or just learning for fun, this hands-on project will be a great way to dig in and get some practice!

  • Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

    Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.

    CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page.

    Follow the steps in this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.

  • Tic Tac Toe with CSS and SVG

    Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

    For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

    Learn how to:

    • Generate markup with loops and template literals
    • Leverage native HTML behavior
    • Create SVG
    • Use CSS variables and scope
    • Implement game logic with HTML forms
    • Animate SVG with CSS
    • Use CSS Animation to provide motion
    • Use Pug Mixins
    • Disable motion when users don't want it
    • Apply visual effects using CSS filter and backdrop-filter
    • Generate random animations using Pug and CSS variables
  • Modernizing a Legacy Redux Application with React Hooks

    Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.

    We will cover migrating class components to functional components with react hooks and how to replace connect() with redux hooks. This course will serve as a good tutorial for learning react hooks. It will also help you apply modern patterns for using redux. These patterns, powered by the new useSelector and useDispatch hooks will transform your redux applications for the better.

  • Creating a Digital Garden CLI with Rust

    In this course, Chris takes a README-driven approach to build out a Rust CLI that supports content authoring for a digital garden.

    Specifically, you'll work through the first command for the CLI, writing files. You start by initializing a new Cargo binary crate through creating the write command that allows you to create files (and their contents) to the folder that you set.

    Step by step you'll learn about:

    • Handling user input
    • Error handling
    • Rust Move semantics
    • Rust Copy semantics
    • Integration testing

    ...and more!

  • Create forms in Svelte with Svelte Forms Lib

    Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

    So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib.

  • Declarative UIs without CSS with elm-ui

    elm-ui is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.

    The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!

    The approach taken by elm-ui is based on two big ideas: Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code Enabling refactoring capabilities of Elm for UI code

  • Accessible Cross-Browser CSS Form Styling

    Forms are one of the most common features of a web application. They are also a common cause of headaches. The controls you use, the markup for the structural layout, and the styling all have to be considered.

    What you build can look and behave differently depending on the browser being used, and how you build it can impact the accessibility of your application.

    Stephanie Eckles has prepared several lessons that work through the creation of a complete form demo featuring the most common controls with a variety of attributes.

    You'll create semantic fieldsets, add responsive styles without media queries, and prepare styles for accessible validation.

    The demo is built with Sass and Eleventy. Don't worry if you don't have prior experience with these tools— Stephanie's code and explanations make it easy to follow along, and additional resources are available if you need them.

  • Build a Developer Blog with Gatsby

    Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, Webpack, react-router, GraphQL, and other front-end tools to provide an excellent developer experience.

    This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system. After tackling the file system you'll optimize for SEO as well as additional styles through ThemeUI that will support features like syntax highlighting in code snippets. Finally, you'll learn how to performantly process and render images.

    By the end of the course, you'll have a fully functioning developer blog that will serve as a base for larger production-grade applications.

  • Redux with React Hooks

    Redux was announced back in 2015 and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in setState method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in useReducer method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library*.

    Recent updates to redux exposing a hooks-based API address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

    Thanks for watching 📺.


    Notes

  • Create Contextual Video Analysis App with NextJS and Symbl.ai

    Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

    • Speaker Diarization
    • Sentiment Analysis
    • Contextual Insights
    • Conversational Analytics
    • Topics of Discussion
    • Entity and Intent Recognition
    • Pre-built UI and Symbl JS Elements

    In this course we will use Symbl.ai to get transcripts for the video we will upload as well as more meaningful insights.

    Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account here and start building.

  • Get Started with the AWS Amplify Admin UI

    In this course, we'll build a video course platform using the AWS Amplify Admin UI.

    The Admin UI provides simple yet powerful tools to model database tables, add authentication and authorization, and manage app content, users, and groups. It also offers the ability to manage the application users and content.

    The AWS Amplify Admin UI focuses on data types rather than backend infrastructure.

    All the backend resources generate infrastructure as code (IaC) templates that can be committed in the team repository and integrated with AWS Amplify continuous deployment workflow to manage the different environments.

    Before taking this course, you should have a basic understanding of React Hooks.

  • Introduction to Cloudflare Workers

    Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

    Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

    Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

    Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

    After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. Need an idea? Check out the suggested Portfolio Project for this course.

  • Build Modern Layouts with CSS Grid

    The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.

    You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid. You'll learn how to control a grid's columns and rows and define the size of each respectively.

    By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

  • Upgrade your note taking workflow with VS Code and Dendron

    Dendron is a Visual Studio Code extension that allows you to easily manage your personal notes.

    You can use it to track your daily todos or reference notes.

    Features Dendron ships with:

    • markdown
    • markdown preview
    • fast note navigation
    • fast note creation
    • backlinks
    • opt-in note schemas
    • note graph
  • Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

    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.

  • Creating Buttons in React Native with Three Levels of Customization

    How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

    Button component is useful for quick prototyping.

    TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

    Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

  • Create an eCommerce Store with Next.js and Stripe Checkout

    Accept payments & sell products powered by Stripe and the best of the JAMStack

    There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

    • React: flexible and customizable while following modern best practices
    • Next.js: lightening fast with guide rails to help your project perform as consumers expect
    • Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

    Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

    Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

  • Containerize Full-Stack JavaScript Applications with Docker

    While "It works on my computer" might give you an excuse to close a bug ticket in the backlog, it doesn't really work when you're working on a team.

    You need to ensure that your application can run regardless of what hardware your teammates are running or libraries they have installed.

    Docker solves this problem by collecting everything your application needs to run into a container.

    Containers aren't just for source code. They can hold configuration, scripts, and even their own filesystem. It's similar to a Virtual Machine, without having to bring a full operating system along for the ride.

    Because containers run in isolation, there is some configuration involved to allow for files to be saved and containers to communicate with one another.

    One of the most useful ways to get your head around Docker is to see it in action.

    Follow along with Joel Lord as he works through the process of preparing an application to run in separate containers for the frontend and backend of an application that searches for gifs and re-encodes them with a caption supplied by the user.

    You'll see how to configure the separate containers to communicate with one another, work with environment variables, and persist data to your local machine. Along the way, you'll pick up some tips on useful commands and bash scripting. Finally, you'll learn how to use Docker Compose to make it easy to run multiple containers simultaneously.

  • WordPress as a Headless Content Management System (CMS) and GraphQL API

    WordPress has been around for a long time and powers a huge number of sites.

    Just because WordPress isn't brand new doesn't mean it can't get the job done!

    Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

    In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

    Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

    With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

    While watching, consider...

    • What are the tradeoffs of using a CMS for a site?
    • Would headless WordPress work for me or my clients in this scenario?
  • React Real-Time Messaging with GraphQL using urql and OneGraph

    One of the most well-known GraphQL features is that it lets you do things like replacing multiple REST calls with a single query. You might have done some query experimentation with demo APIs or working on a Gatsby site.

    But there's more to GraphQL than just making queries.

    For example, with mutations and subscriptions, GraphQL can smooth out the process of implementing real-time features in your web applications.

    In this new course, you'll get practice with these features as egghead's own Ian Jones guides you through building a real-time chat app that's backed by GitHub Issues.

    The tools used for the course are OneGraph and Formidable Labs' urql client.

    OneGraph is great because it allows you to expose a single GraphQL endpoint that can access data from multiple services including GitHub, Stripe, Airtable, and more. It handles things like authentication for us as well, as you'll see in the course.

    At Formidable Labs, the team released urql as a lighter weight alternative to Apollo or Relay that supports the most common interactions with a GraphQL server through their handy React Hooks.

    The course starts with a fresh Create-React-App and touches upon topics like using GraphQL query variables, working with Hooks, handling authentication with React Context, and setting up & consuming the GraphQL subscription.

    Along the way, Ian also works through debugging some common errors that you may encounter when developing your own GraphQL apps in the future!

  • Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

    Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos.

    Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

    • Gatsby
    • Hasura
    • Heroku
    • Auth0
    • Chakra UI

    View the demo live online!

    Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

    Modern techniques

    In the process, implement techniques to make your app experience dynamic on some portions, and static in others.

    Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

    Use the latest and greatest of Gatsby, like the brand new file-system routing APIs.

    Who is this course for?

    Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

  • React State Management in 2021

    Managing state in a UI is challenging. It's genuinely difficult and the solutions require a depth of knowledge and experience to understand. Everything is a balance of tradeoffs in complexity, performance, and user experience.

    This is a series of interviews with experts, open-source maintainers, and UI developers that have combined decades of experience building stateful UI applications for millions of users.

    Part interview, part screen share, these videos should benefit you if you're building web applications.

    They focus on React, but the underlying principles are valid for UI work in general (and beyond).

  • Scale React Development with Nx

    On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

    But there's a bit more to it than just those three steps.

    The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

    How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

    It can get hard to keep things straight in your head.

    Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

    It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

    One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

    In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

    More importantly, the focus of this course is more on the workflow than the implementation.

    Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

  • Build Advanced Component with React Hooks

    The new React Hooks API allows to use different patterns in a simple, direct and functional way.

    In this collection you will find a step by step guide to build a complex component using different design patterns implemented with the Hooks API.

    We will start with a simple component <Wizard> that use the useState hook and in each lesson we will be improving the implementation by using different strategies. In the last lessons we will have a full Wizard component with a flexible API to allow the user to manage the component based on their requirements and You will have learned the use of useState, useReducer, useContext, useEffect and useCallback along with some popular design patterns to build React applications.

    You will be able to find the code and notes for each lesson in the github repository.

  • Composing Closures and Callbacks in JavaScript

    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.

  • 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

  • Building Live Search Box

    Like in section 04 Implement the Pattern in Common Async Scenarios, it's time to implement the pattern in common scenarios!

    Now that you're familiar with the pattern we'll build a search box that handles a few different async scenarios.

    You'll filter values based on user input, debounce text while a user is typing, and send a request once they are finished. Finally, we'll see how to implement a cache to save on network requests

    You're in Section 07 of Composing Closures and Callbacks in JavaScript

  • Bringing the Pattern into React

    It's time to introduce a "View" to our codebase so that we can present the values in the DOM. Since React is the most popular View library, we'll convert our basic JavaScript project to a React project to demonstrate how this pattern fits.

    We'll create several hooks (useCallback, useListener, useBroadcaster) in this section to see how you could implement the pattern in react terms.

    By the end of the section, you'll know how user input is handled and how to fetch resources in React with this pattern

    You're in Section 06 of Composing Closures and Callbacks in JavaScript

  • Use a Completion Pattern to enable Repetition and Sequencing

    The concept of 'done-ness' is not something that is often considered when writing functions in JavaScript — you end up just running out of data or a function stops getting called.

    There are many async scenarios that make sense to signal that work is completed.

    By following a completion pattern, we can easily trigger repetition and sequencing (async or not) into our code.

    You're in Section 05 of Composing Closures and Callbacks in JavaScript

  • Use the Callback and Closure Pattern to Build Advanced Async Behaviors

    In this section, we will introduce another concept to the pattern that we've created:

    Operators.

    Operators are the final big piece that allows us to bend all asynchronous behaviors to our will. They give us a chance to redefine broadcasters and listeners in any way we want.

    We'll several operators throughout this section to implement mapping, filtering, and piping behaviors (and more!).

    By the end, you'll get a real sense of how you can continue building on top of the functionality you've already built.

    You're in Section 03 of Composing Closures and Callbacks in JavaScript

  • Establish Callback and Closure patterns Around Async Browser Behaviors

    JavaScript is full of inconsistent APIs. Wrapping those APIs in functions allows you to have full control over how to configure them and make them more reusable.

    This becomes even more beneficial when dealing with the async nature of JavaScript. You'll learn how a broadcaster is a function that wraps another function (which we call listeners) and modifies the behavior. We will build up this pattern in a way that allows you to compose broadcasters together making your code more reusable.

    You're in Section 02 of Composing Closures and Callbacks in JavaScript

  • Introduction to Callbacks, Broadcasters, and Listeners

    Before we dive deep into the pattern of composing callbacks and closures, we need to take start with the definitions and basic building blocks that we will be using for the rest of the course.

    You'll be able to answer questions like:

    • What is a Closure?
    • What is a Callback?
    • Why does Callback Hell happen and how can we handle it?

    We will see that by establishing a contract between functions and holding to the pattern that is established, you will have gained a lot of power and flexibility in writing reusable, robust functions.

    You're in Section 01 of Composing Closures and Callbacks in JavaScript.

  • Create, Manage, and Test API Requests with Postman

    As developers, we're often working closely with APIs to make requests in the browser or on the backend with a server, but we might not always know exactly how those requests work or how they should look.

    Postman is a tool that lets us create, manage, and test API endpoints all within a UI so we can wrangle our APIs and understand how they work.

  • Optional Chaining

    Optional chaining ?. in javascript is a new feature introduced in ES2020. Optional chaining changes the way properties are accessed from deeply nested objects. It fixes the problem of having to do multiple null checks when accessing long chain of object properties in javascript.

  • Build An Eleventy (11ty) Site From Scratch

    Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

    These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

    By the last lesson, you'll have learned how to:

    • define custom input and output directories
    • create a layout that accesses front matter variables
    • watch for Sass changes and include CSS in the build proces
    • create an 11ty collection using tags
    • define front matter for an entire collection
    • make and apply a filter to a collection
    • generate pages from an external data source, such as a CMS or API
  • Getting Started with Blitz.js

    Blitz.js is a fullstack React framework built on top of Next.js inspired by Ruby and Rails.

    It includes everything from the database to your frontend all inside a single app. Only one development server. Only one thing to deploy.

    Instead of having an API Layer, it allows you to import server code into your frontend and call it like like a normal function.

    You will have one thing to deploy to a server or serverless.

    In this collection, you will learn how to get started with Blitz.js. After watching this collection you will be able to:

    • Create a new Blitzjs Project
    • Create Pages
    • Work with the database in your app
  • CSS Tips and Tricks on :hover Effects

    Learn different ways to manipulate elements (like images and text) on mouse-over by using the :hover pseudo-class in CSS. We will learn how to create the "fade-in" and "fade-out" effects on hover, how to change border effects on hover, how to change the "border-radius" to make rounded corners, and how to delay transitions on hover.

  • React Hooks: Revisited

    In this collection, we'll go through each of the standard hooks offered by the React library, learn how they work and build small applications that leverage them internally.

  • MDX Conf 2020

    MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans. Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

  • Construye Componentes Avanzados con React Hooks y Patrones de Diseño

    La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

    En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

    Comenzaremos con un sencillo componente <Wizard> que hace uso del hook useState y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

    En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks useState, useReducer, useContext y useEffect junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

    Podrás encontrar el código y notas para cada una de las lecciones en el repositorio en github.

    Cada lección tiene un directorio asociado dentro de src, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente Wizard.js y un archivo App.js con el código que utiliza el componente además de algunas notas extra en el archivo Readme.md

  • Manage React State with RecoilJS

    In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

    We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

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

    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!
  • Use CSS to Create Art and Illustrations

    In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

    We walk through everything from planning and creating a responsive foundation, to creating shading effects with box-shadow.

  • Build Maps with React Leaflet

    If you've ever worked on a website for a business, there's a good chance you've included a map.

    A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

    React Leaflet to the rescue!

    In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

    You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

    This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

  • Building an API with Express

    Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

    This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

  • Up and Running with AWS Amplify Functions

    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.

  • Component-driven development in React

    In these lessons you’ll learn how to create a collection of primitive components that will allow you to create complex user interfaces, which are responsive, consistent, and maintainable. All without writing any custom styles. We’ll create components to manage layouts and whitespace, text and headings, basic user interface elements, and learn how to compose complex user interfaces from primitive components.

  • Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

    The Gatsby ecosystem supports a ton of plugins that allow you to easily source data from a variety of sources like a GraphQL CMS or Wordpress. But what if you wanted to source your own custom data?

    In this collection, we'll walk through learning how to source custom data and create nodes in Gatsby in order to build out a Pokedex using the PokeAPI. We'll learn how to request the data in Gatsby's build process, create nodes with that data, query that data, and use it to create a Pokemon Pokedex UI.

  • From Mockup to Webpage

    I go through the steps of taking an initial mockup, writing html, css layout, css styles and javascript to make a fully functioning webpage.

    If you like the content so far, tweet @MannIsaac so I'll be motivated to finish the series.

  • Welcome to Epic React

    Start here! This is where you will get oriented, set up your work environment, and get ready to succeed as a React developer. It's important not to skip this section! It applies to all lessons below.

  • Build a Terminal Dashboard with React

    In this collection of lessons we will create a developer dashboard in the terminal using react-blessed and react-blessed-contrib. We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus on creating some widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.

  • Create A Blog With Jekyll

    Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

    After watching the collection you'll be able to:

    • Install Jeykll and run it locally
    • Create a new blog post
    • Install plugins to add new features to your blog
  • Create a New Github Action to Automate Code Tasks with Javascript

    Github Actions are an awesome tool from Github that allows us to automate tasks using code-based workflow configuration files. There's also a large marketplace that comes stocked with many useful tools that are ready out of the box.

    But sometimes the options available don't completely solve our needs or maybe we're working with a new technology that's simply not available as an Action yet. Luckily, Github allows anyone to create their own Actions using common technologies like Javascript via Node.

    We'll learn how to create a new Javascript-based Github Action running on Node. We'll first walk through a simple Hello World example, learn how to test it locally, version control it, use it in the wild, and move on to more advanced solutions that include using packages from npm!

  • Secure GitHub connections with SSH

    SSH provides a secure way for your to connect to and authenticate with GitHub's servers. While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like ssh-keygen and then associated with your GitHub account using the public key.

    In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have separate accounts for personal and professional projects, which can be difficult to manage manually. Using ssh-agent and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's git URL.

  • Create a Landing Page with CSS Grid and Flexbox

    It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

    Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

  • Recreating Popular JavaScript Utility Methods from Lodash

    Lodash 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, nullish coalescing and 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).
  • Build a full-stack app with Prisma

    (This collection is still WIP)

    Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

    In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

    In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

  • Up and running with Recoil - a new state management library for React

    Recoil is a brand new state management library for React, developed by Facebook.

    Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

    This quick collection will get you up and running with Recoil, you're going to learn how to:

    • add Recoil to your React project
    • create a Recoil atom and use it to store a piece of state
    • use useRecoilState hook to update an atom
    • use useRecoilValue to access value stored in an atom in a read-only fashion
    • use 🔥selectors🔥 in order to calculate derived data based on state stored within atoms (this is really powerful!)
  • Getting Started with Recoil in React

    Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

    In this collection, we'll create a simple game with React using Recoil, to explore how you can share and update state across an app.

    Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

  • Learn CSS Animations for a Better User Experience

    Whether you enjoy CSS animations or not, learning how to work with CSS transforms and transitions can help the overall user experience on your websites.

    In this collection we will look at the various CSS properties that help create the kind of experience user have come to expect from websites.

    We will explore:

    • The transform property
    • The transition property
  • Quickly Create a New Company Website Managed by a CMS with TakeShape and Gatsby

    There are many ways to build a new website, but it can often be a slow, painful process for both beginners and those who have been working in the field for a long time.

    With the modern tooling in the Jamstack world, we can take advantage of tools like Gatsby that can allow us to rapidly spin up a new project and TakeShape that can provide us with an all-inclusive content management system (CMS) to focus on the important parts of what makes our websites unique.

    In this collection, we'll walk through building a new company website from scratch. After creating a new example project in TakeShape, we'll use the TakeShape API to fetch that data and dynamically build a website using a Gatsby Starter for a TakeShape Startup project. With your new website, we'll learn how we can customize it to make it your own by adding new content and changing the branding like the logo and colors.

  • Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

    Welcome to this beginner level series on Alpine JS! 👋🏞

    Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

    In this series, you will learn about Alpine's handy directives. You'll discover how to define a component scope with x-data, run code on mount with x-init, attach event listeners with x-on, display data with x-text, decide wether or not to show an element with x-show, iterate through data with x-for, retrieve a DOM element with x-ref, learn how to achieve two-way data binding with x-model, and much more.

    You'll also learn how "modifiers" can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

    We'll also touch on what Alpine calls "magic properties", which give you access to native browser events ($event), reference to DOM elements ($refs), and more.

    You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

    Get ready to breathe some fresh air - it's time to walk into cool, green Alpine pastures! 🏞

  • Exploring Common Algebraic Data Types Used in Functional Programming

    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

  • Build a REST API with Express 5 and node 14

    Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

    This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a Map, and accessing asynchronous data with async/await.

    Pre-requisites:

    View the source for this project in the project's github repo.

    Notes:

    • I'm not very pedantic about REST and basically just mean an API over HTTP
    • Express 5 is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like express-async-errors to add support for async routes and middleware
  • React Crash Course (with hooks)

    Get started with React! (with Hooks)

    This course gets you up and running with react in under a minute by using codesandbox.io to skip the painful process of setting up your dev environment.

    You'll learn:

    • How to write React code with JSX
    • How to "think in React"
    • How to use local state to store changing data
    • How to pass data from parent components to children components using props

    So get started now! You need some javascript and HTML experience, but no prior React experience is needed.

  • Filter a Collection Using Stimulus

    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
  • Create an Optimistic UI in React with SWR

    Vercel's data-fetching library SWR features a client-side cache. Learn how to use the mutate hook to manipulate this cache in order to optimistically update your UI without waiting for a response from the network.

    Learn more about SWR here: https://github.com/zeit/swr

  • Eject create-react-app and Use Gatsby for Advanced React App Development

    Create-React-App is a great tool for getting started with React, but at some point you may find yourself needing something more.

    Gatsby is one of the most popular choices to move on to. It boasts a number of performance optimizations and a large plugin ecosystem (while still allowing you to use anything from the React ecosystem as well).

    In this course, Khaled Garbaya will help you get started with Gatsby.

    You'll start by building a single page "Hello World" before moving on to programmatically creating new pages and setting up static and dynamic routing.

    Once you've got a grasp on the basics, Khaled will share his process for migrating an existing application built with Create-React-App project over to the Gatsby way of doing things.

    You'll also get practice adding and configuring Gatsby build plugins for Tailwind CSS and sourcing data from external APIs.

    After this course, you'll be ready to port existing code, or start a new Gatsby project from scratch!

  • Getting Started with Gatsbyjs recipes

    There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you actually want to build.

    Analysis paralysis is real.

    Enter: Gatsbyjs Recipes

    Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

    With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

    In this collection, you will learn how to:

    • Set up Gatsby to use Recipes
    • Create a multi-step Recipe
    • Install NPM packages
    • Configure Gatsby Plugins
    • Create Custom files with Recipes
  • Build a "Name Picker" app -  Intro to React, Hooks & Context API

    In this beginner friendly series on React, we'll start a new project from scratch with Create React App, and step by step, build a functional and relatively useful React app that lets you find inspiration on "baby names", with search and shortlisting functionality.

    Through the lessons, we'll cover an introduction to JSX, approach concepts like props, state, React hooks, "thinking in components", and embrace a progressive refactoring mindset.

    Once the app is complete, we'll look at how to reduce prop drilling with the use of the Context API, and we'll even create our own custom React hook!

  • Get started with Prisma v2. Prisma Client

    This collection explores one of the most promising and coolest releases of early 2020 - prisma v2. First part of the prisma infrastructure to exit experimental mode - prisma client is an auto-generated and type-safe query builder for Node.js & TypeScript. We will explore and learn it in this collection!

  • Build an App with the AWS Cloud Development Kit

    Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

    Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

    Not anymore!

    With the AWS Cloud Development Kit (CDK), you are able to configure AWS services from your terminal & editor.

    Even better, you can do your configuration, frontend, and backend all with the same language.

    In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK. You'll see how to start a project, develop it locally, deploy it globally, then tear it all down when you're done.

    The services & development approach Tomasz demonstrates in this course are used by countless companies around the world.

    Is yours next?

  • Mapping with React Leaflet

    In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

  • Automate Everything: An egghead Guide to Productivity

    The only better feeling than deleting code is automating away mundane tasks. This playlist shows off many variations of tasks that can be automated away with tools like zsh functions, alfred, and karabiner. These techniques apply broadly to the small development tasks you tackle every day.

  • MongoDB Aggregation Framework

    MongoDB has a quite powerful aggregation framework that allows you to write data processing pipelines. Documents in the MongoDB collection go through a series of stages or a pipeline that transforms them into an aggregated result. In this short video series, you will learn how to write aggregations in MongoDB.

  • JavaScript interview: Learn functional programming with solving coding challenges

    This collection gathers lessons that resemble JavaScript interview coding assignments and teaches you to write quality, readable and reusable code. It's always frustrating when you learn the language for months and then some tricky question at the interview stops you from getting a job. Follow the lessons in this collection and be prepared for tricky coding challenges!

    Although solving coding assignments is pretty important the true value of the collection lies in the approaching problems correctly, using shortcuts where it's needed and writing verbose code where necessary.

    This collection starts with an overview of how to set up a scratchpad in VSCode using quokka.js, so you can follow the lesson in an easier fashion, as this is the technology used to explain concepts! It is followed with an explanation of how to write arrow functions as those are also frequently used throughout the playlist.

    !!! New content is still getting added to the collection !!!

  • NextJS Fundamentals

    With the release of Next.js v9+, we've been handed the tools to create full-stack react apps with ease.

    This collection will dive into the fundamentals of API & Dynamic routing, handling data from local json and a DB, plus deployment options.

    This collection will be an ongoing collection, where I continue adding more videos over time 😃

  • Introduction to Next.js 9

    Next.js is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

    In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use Auth0 to handle user authentication and authorization, and we'll also learn how to integrate the excellent Chakra UI component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to Vercel, the deployment platform built by the creators of Next.js.

    This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

  • Manipulating strings in bash

    Extracting meaningful data from strings is a crucial skill when working with bash, and bash gives us powerful tools to do so: head, tail, cut, sed, and awk. But these tools can be hard to understand without spending time to learn them, so many developers fall into a rut of blindly copying and pasting commands. No more! With this mini-course, you'll understand the basic ins and outs of these commands in under 15 minutes.

  • Angular Basics

    Angular is a robust, powerful framework for building applications at scale, but it can be really intimidating to beginners! This collection by JavaScript teacher Sam Julien is here to help you learn Angular in bite-sized chunks.

    Note from Sam: these lessons are loosely related but are not meant to necessarily be followed in order from start to finish. I've provided embedded code and links to GitHub where applicable, though, so you can always have access to the finished code for the lesson.

  • Getting Started with Elixir

    These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique.

    Some of those concepts include:

    • the Mix build tool
    • project structure
    • collections of functions written in modules
    • function arity
    • pattern matching and common uses for it
    • the pipe operator
  • The Beginner's Guide to React V1 (2017)

    React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work.

    This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away.

    Each lesson in this 19-part course is a single index.html file. This keeps your focus on learning React, no distractions. We’ll start with a blank file and add more complexity as we go along, wrapping the course with a lesson on how to move into a more production-ready development environment—and even deploy your app to a great service like Netlify.

    You'll come out of this course with a solid grasp on:

    what problems React can solve how React solves those problems under the hood what JSX is and how it translates to regular JavaScript function calls and objects You’ll build a solid understanding so when you come across JavaScript challenges down the road, you’ll know how to…react.

  • Way Smaller Cross-Browser Images and Video with Webp and React

    On many websites, images and video make up the vast bulk of the data being sent over the wire; websites will often have several megabytes of images!

    There's a lot of low-hanging fruit in this area. In this collection, we'll learn how to convert our images to the webp format—a format often 2-3x smaller than png/jpg—and how to use the picture element to ensure graceful fallback on unsupported browsers. We'll see how to come up with a great abstraction for React to make it as painless to use as possible.

    Later in this collection, we'll also cover:

    • Automatically generating webp images on build
    • Leveraging gatsby-image to do the same thing in Gatsby
    • Smaller images across the browser spectrum with jpeg2000 and jpegxr
    • Avoiding layout problems with display: contents
    • Smaller video with webm instead of mp4

    Subscribe to make sure you don't miss it!

  • Spring Animation in React with React Spring

    Learn how to use the react-spring library to animate our React applications. Start with the useSpring hook and end with the useTransition hook with React Router for transitions between your routes!

    You'll get the skills to begin using the react-spring library and add animation to your React components.

  • Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

    OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache.

    You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

    The image below is generated via the project you'll build and deploy in this course

    An example opengraph image

  • WebAssembly with the Go Language

    Go is a server-side language, but today we can compile Go code to WebAssembly as well - making it possible for us to bring programs written in minimalistic Go code into the browser!

    With this collection, we will learn how to compile and run Go WebAssembly programs in Node.js and the browser, and how our Go code can interop with JavaScript and manipulate the DOM. We will also talk about configuring our VS Code workspace and optimizing the Go WASM binary size.

  • Add e2e tests with cypress to a React application

    Imagine the following.

    You join a new project and after getting access to the repo you notice that there's no tests.

    You decide to ask the team whether they are in different repo or something and unfortunately the answer is:

    We don't have any tests, we didn't have the time.

    😐

    In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:

    • 🌟 Ensure that our app currently works as intended
    • 🌟 Allow us to add features to it with a technique called "Cypress Driven Development"

    In less than 20 minutes we're going to go through:

    • ⚡️Adding cypress.io setup to an existing project
    • ⚡️Testing search functionality with data-cy properties
    • ⚡️Using "Cypress Driven Development" to add a new feature to an app
    • ⚡️Use Cypress UI to debug an API response
    • ⚡️How to use cy.only and cy.skip in order for us to build our e2e test suite faster

    and much more!

  • Introduction to RedwoodJS: full-stack framework for JAMstack

    RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

    • React
    • GraphQL
    • Prisma

    RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.

  • Migrate a WordPress Site to the Jamstack Using Gatsby

    WordPress is the most popular content management system in the world. Content creators are able to easily customize nearly everything about WordPress from their admin dashboard, providing a really pleasant content management experience. Using Gatsby as a frontend for your WordPress sites makes the experience of developing the site and visiting the site just as pleasant.

    Moving your WordPress frontend to the Jamstack means you keep the convenience of using WordPress’s custom backend for creating and editing content while also avoiding some of WordPress’s biggest downsides.

    Historically, WordPress has many downsides, including:

    • Security — because it’s the most popular content management system in the world, hackers work hard to find and exploit security holes in WordPress sites. Performance — through a combination of legacy code, community plugins, and other challenges, WordPress sites can easily become slow to load.
    • Scale — if a WordPress site suddenly becomes very popular (a great thing!) it can overload servers and cause the website to go down (a not-so-great thing!) without complex scaling techniques.
    • Cost — a WordPress site requires always-on hosting, and specialized hosting can be expensive. Adding support to handle massive scale adds significant cost, too.

    Switching to the Jamstack helps mitigate — and even eliminate! — these downsides:

    • More secure — Jamstack sites don’t connect to the server or database after they’re built. This makes it much harder to hack the site.
    • More performant — by doing less work for each request and leveraging modern tools, Jamstack sites tend to outperform WordPress sites out of the box, and can be very fast with a bit of extra effort.
    • More resilient — because Jamstack sites ship to a content delivery network (CDN) by default, a sudden surge of site visitors won’t take your site down.
    • More affordable — many Jamstack hosting solutions have generous free tiers that are plenty for most small to medium sites, and upgraded accounts typically cost less than specialized WordPress hosting.

    Switching to the Jamstack gives you all of the benefits of WordPress and helps you avoid the downsides!

    In this collection, we walk through the full process of migrating a WordPress site to the Jamstack, which keeps all the flexibility and power of WordPress’s admin dashboards while adding all the benefits of the Jamstack.

  • Basic Types in Rust

    This collection contains videos that explore the basic types in Rust, including Fixed size Integer, Pointer sized Integer, Boolean, Strings, Characters, Arrays, Tuples and more.

    If you're just starting out learning Rust and wrote your first program, this collection is the right place to get more familiar with the language!

  • Web Components

    This is a list of web components lessons showing the technologies behind it and some practical ways to use it now in production.

  • DynamoDB: The Node.js DocumentClient

    This playlist covers all of the ways to use the node.js DocumentClient to interact with one or more DynamoDB tables.

    note: We do not cover scan() as it is not recommended for most usage and if you need it you'll know how to read the documentation to use it by the end of this collection.

  • Critical Rendering Path

    Frontend runtime optimization is heavily impacted by rendering. Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls. This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

  • Intro to DynamoDB

    This collection includes introductory level material for AWS DynamoDB. We cover what DynamoDB is, when you'd use it, and the vocabulary you'll need to understand documentation and talks in the ecosystem.

    You'll come out of this playlist with the ability to understand what people mean when they say DynamoDB and the base you need to get started yourself.

    View and contribute to the Community Notes!

  • TypeScript: Tips and Tricks

    Learn to use some of the tips and tricks that can help you write better TypeScript. Look at some of the utility types, understand how the immutable types work, learn how to use conditional types, go through some of the examples and see how we can write them better.

  • Use AWS Billing & Cost Management Dashboard to keep your AWS bill to minimum

    We generally tend to avoid paying for things unless we actually need them, and the same goes for AWS

    When using a cloud provider like AWS sometimes an unexpected charge may occur and we'd like to understand what are we being charged for and how to be notified whenever an unexpected charge occurs (especially when we're trying to stay within a free tier).

    In this quick (4 minutes, 2 lessons) collection we're going to learn how to:

    • Review the AWS Billing & Cost Management Dashboard
    • Set up a billing alarm to be notified whenever our bill is larger than $5
    • Review the AWS bill to understand how much are we going to pay this month and why
  • Using components in Markdown with MDX

    MDX has the tagline markdown for the component era. It aims to make authoring with Markdown and JSX simpler, allowing you to use components for rich interaction and data-loading, while keeping long form content fun to write with classic Markdown.

    This collection includes lessons on configuring MDX, setting it up specifically in Gatsby sites, and ideas for different components you can use including:

    • inline sign up form components
    • live code editing components
    • table of contents components
    • other 3rd party components like the Divider and Message components from Theme UI

    Customizations like using default layouts for MDX content and styling MDX components with Theme UI are also covered.

  • Introduction to Client Side Web APIs

    This collection will cover the basics of how to interact with an HTML document with JavaScript. We will go over:

    • What is the DOM?
    • fetch elements from an HTML document
    • add HTML nodes to a HTML document
    • Respond to click events
  • Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

    This collection is a sequel to the Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

    • Fauna vs DynamoDB and when to use each
    • Setting up AWS accounts
    • Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
    • Converting our Netlify Functions deployment to a Serverless Framework deployment
    • Implementing Custom authorizer functions on AWS

    It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.

  • GitHub Tips & Tricks

    Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out!

  • Advanced SQL for Professional Developers

    You've got some practice with using SQL to select, update, and join database tables.

    But perhaps you've found yourself with a sneaking suspicion that you could be more efficient with your PostgreSQL.

    Does your query seem slow?

    A lesson on how to profile queries will point you in the direction of a fix.

    Are you performing multi-step operations one at a time that are susceptible to errors?

    The "all or nothing" transaction is the cure.

    These are just a couple of examples of the techniques, tips, and tricks that Tyler Clark has learned in his years of experience working on large scale production applications.

    Other topics in this course include working with CSV files, different techniques for aggregating & filtering, and more!

    Watch Tyler's course, and continue your journey toward SQL mastery.

    Check out the Community Notes for this course.

  • Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

    This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

    • starting with the Gatsby client
    • handling authentication with Netlify Identity
    • Shipping a GraphQL server on Netlify Functions
    • Building in access control with a serverless capable database

    It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

  • Design with Tailwind CSS Masterclass

    Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

    There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

    So if you want a fully custom design, you are back at step 1.

    There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

    This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

    Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

    Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.

  • Getting Started with Eleventy

    Eleventy, or 11ty, is a simple yet very powerful static site generator. It does not require any config to get started.

    This what it will take you to get an 11ty project running.

    npm install -g @11ty/eleventy
    echo '# Page header' > README.md
    eleventy

    After watching this collection you will be able to:

    • Bootstrap a simple 11ty website
    • Use 11ty layouts
    • Chaining multiple 11ty layouts
    • Use 11ty Collections
    • Create pages from data

    ...and much more

  • WTF is JSX

    JSX is used heavily in the React ecosystem to represent tree structures such as HTML. Explore how JSX works, how it compiles to JavaScript, and why it isn't tied to React.

  • Styling React Applications with Styled Components

    In the course, we will learn how to use the styled-components library to style our React applications. We will start from the basics and dwell in more advanced cases.

    With this course, you can get the necessary knowledge to use the styled-components library to style your React applications in the future.

  • Yarn 2 AKA Berry

    Yarn 2 (Berry) has finally released a stable version!

    The yarn team has been working on this release for over 2 years.

    This collection goes over:

    • What yarn pnp is and how it tries to solve the node_modules problem
    • How to install yarn globally and locally inside of a single project
    • How to use yarn dlx
    • How to use yarn up to manage yarn workspace dependencies
  • Build serverless applications with AWS Serverless Application Model (AWS SAM)

    Building larger serverless applications can be tricky - creating many lambda functions as well as other resources such as DynamoDB tables, S3 buckets, API Gateways using AWS Console takes quite a lot of time. Not to mention other problems such as redeploying the app to a different region, reviewing the infrastructure etc.

    AWS Serverless Application Model (AWS SAM for short) simplifies a lot of those issues 🤩

    Built with with best practices in mind, SAM allows you to:

    🌟define your infrastructure as code using a YAML template (which can go through code review!)

    🌟define resources such as lambda functions, DynamoDB tables etc. in a much simpler way than doing it directly in CloudFormation (which SAM is built on top of)

    🌟build and deploy a serverless application from a command line

    🌟debug and test lambda functions locally using SAM CLI

    🌟debug and test lambda functions from WITHIN your editor with AWS Toolkit extension

    Add AWS SAM to your toolkit with this quick collection!

    View and Contribute to the Community Notes!

  • Write Your First Program with the Rust Language

    Rust is a modern language that is close to the metal. It's got the performance of C, but with a more friendly syntax and community.

    It's also memory safe, and ensures your applications are bug free by catching errors at compile time instead of runtime.

    These features make Rust a great choice for developing code for embedded systems, web servers, and CLI apps. You can even compile Rust into WebAssembly in order to run it in-browser!

    But as the saying goes, "before you learn to run, you must learn to walk".

    In this course, you will write your first Rust application.

    Starting from “Hello World” you’ll quickly move on to learning about Rust’s types, configuration files, and the cargo package manager along with classics like functions, loops, and handling user input.

    More Rust-specific concepts like macros and pattern matching will also be introduced.

    Check out these community notes for this course on Github.

    Next Steps: Basic Types in Rust

  • Intro to Stimulus

    Stimulus is a JavaScript framework that is purposed to enhance your HTML. Stimulus will monitor your HTML and wait for its data-controller attribute to be declared on an element. Thats when you controller JavaScript is connected and its methods triggered.

  • Thinking Reactively with RxJS

    When a manager gives us the requirements for an application feature, they don't care too much about how we build it. And often times, they think that hard things will be easy.

    Dealing with time and coordinating different types of events can be tricky.

    Luckily, we have RxJS to help!

    In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

    You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

    Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

  • Create a Figma Plugin Using Typescript

    Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins. You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

    Using a plugin you can:

    • Load Real Data from your server and visualize it
    • Change elements in your design programmatically
    • Convert your design to JSX or HTML, the sky is the limit

    Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want

  • Learn AWS Lambda from scratch

    AWS Lambda, Serverless, FaaS - there is a lot of noise around those topics online (and for a very good reason!) and it can get confusing at times 🤯

    In this collection we're going to take a look at AWS Lambda from scratch, in order to get YOU from:

    "I have no idea what a lambda function is"

    to

    "I know quite a bit about AWS Lambda, and I'm going to use it to solve my problems"

    Checkout the community notes for this collection on github.

  • Configuration based reactive Angular Forms with ngx-formly

    Angular is particularly popular at large enterprises. Most of the time those line of business apps are very data driven and forms heavy. While Angular gives us two different approaches to implementing forms, neither of them is very satisfying, nor do they help keep the maintainability high especially in large enterprise apps.

    In this course we're going to learn about ngx-formly, a library that helps cope with some of the mentioned issues. With Formly you define the form structure once in your component code and the HTML will be taken care of by the library. This helps to reduce maintainability and moreover Formly has some nice reactive features built-in that help you reduce your form code even more.

    Questions? Ping me on Twitter or on juri.dev 🙂

  • Build a React App with the Hooks API

    In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's a separate course for that here

  • Making an HTTP server in ReasonML on top of Node.js

    Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

    This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

  • Up and Running with Gatsby

    A short list of screencasts to cover essentials of Gatsby to get started and have enough knowledge to become dangerous.

    The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

    Videos in this collection cover these topics:

    • installing plugins
    • creating pages
    • navigating between pages
    • adding optimized images
    • theming your styles
    • deploying your site
  • Testing JavaScript Workshop Overview

    This is a preview and overview of all of the modules included with Testing JavaScript

    Testing JavaScript applies the four-layer testing method to a React application, but this foundational strategy can be applied across any JavaScript framework: Angular, Vue, legacy Backbone apps, even frameworks and libraries we haven’t met yet.

    Following this course, you’ll be equipped to:

    • deliver solid features that work for users as expected choose the best tools for the job
    • communicate more effectively with your coworkers
    • be a more confident, professional JavaScript developer

    Learn the professional method for JavaScript testing and always ship high-quality software like the professional you are.

  • Web Security Essentials: MITM, CSRF, and XSS

    As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

    Security is important, yet it is often overlooked and forgotten.

    Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

    In this course, you'll learn how to protect your application by learning how to attack it.

    Start your journey into web security today!

    Check out these community notes for this course on Github.

  • Build and Style a Dropdown in Tailwind

    A menu dropdown is a common component that you will build and style in any application.

    In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework.

    After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

  • Build a Responsive Navbar with Tailwind

    The Navbar is a common component you will find yourself styling in almost any application.

    In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

    After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

  • Develop Accessible Web Apps with React

    A large number of people are unable to use the web effectively due to an impairment or disability.

    As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

    We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

    Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

    After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.

  • Kyle's VSCode Tips and Tricks

    VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

  • Animating React Components with Framer Motion

    Framer Motion is a production-ready animation and gesture library. With it you can create beautifully smooth animations with minimal effort, or compose together elaborate sequences of animations with low level APIs.

    These videos showcase some of Framer Motion's key features and how to get started implementing them.

  • Learn about slices and arrays in Go

    This collection of lessons will cover a variety of topics that teach you how to work with slices and arrays in go. You'll learn how to declare them, create them using literal syntax, iterate over them, add to them, remove from them and other useful things.

  • Designing GraphQL Schemas

    GraphQL brings joy to using APIs. Even though it's based on a type system, GraphQL in many ways is more flexible than REST.

    But the flexibility that makes GraphQL a joy to work with can have its downsides if you aren't careful.

    Schema design is an area where one small oversight at the beginning can get you stuck having to deal with weird naming, bloated duplicates, and other annoying workarounds.

    It doesn't have to be like this!

    Nik Graf has extensive experience designing GraphQL schemas, for a variety of business applications.

    In this course, Nik has prepared several examples following different design patterns. Through exploration and comparison, you'll come away with actionable knowledge for designing and extending schemas.

    Follow Nik, and avoid making Schema mistakes that will come back to bite you later.

  • Build Custom Command Line Interface (CLI) Tooling with oclif and TypeScript

    Today, you can't do anything in JavaScript without bumping into a CLI.

    Want to install a library? yarn add it. Want a React app? create-react-app. Want to format your JavaScript? prettier --write. Want your types checked? tsc. Bundling? Pick from webpack, rollup, or parcel. Deploying? now or netlify deploy.

    CLI's are everywhere, and even if you don't write them, sooner or later you'll have to debug them.

    This workshop serves as a comprehensive survey of the state of the art of CLI tooling for everyone looking to make an impact in open source, across their company, and even in their own productivity.

    Check out these community notes for this course on Github.

  • Introduction to State Machines Using XState

    The difficulty of managing state is one of the primary reasons our applications become so complex. We try and manage this complexity with a lot of booleans, somewhat semantic variables like isLoading, wasFetched, and hasError, and over-engineered systems that are still full of bugs. Surely, there's a better way.

    That better way is state machines.

    State machines formalize how we define and transition through the states of our application and give us ultimate control of the most complex parts of our apps.

    In this course, we will explore the problems state machines purport to solve, like boolean explosion. We'll try to solve it our own way first, get so far, and then demonstrate how state machines get us all the way. After that, we'll dive into the XState library, JavaScript's premiere state machine library, to learn its API and how to use it to solve our problems.

    By the time you're done taking this course, you should have a solid education about state machines and be able to start applying them.

  • Construct Sturdy UIs with XState

    Our applications have lots of states that they can be in.

    We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.

    But what about other states that our application can be in?

    Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.

    It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).

    Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.

    The answer? State machines.

    In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.

  • Fix Common Git Mistakes

    This workshop will start by breaking down the four states in which a file can exist, and we'll build up our mental model of git from there. Then, we'll look at how to move files between those states in different ways.

    Once we've developed a new model for how git operates, we'll be able to purposefully get ourselves into some sticky situations, and then gracefully recover from them.

    If you can handle git add/commit/push, but not much more - then this workshop is perfect for you.

    You can finally get some proper git training, and will never have to worry about losing data or messing up the repo again!

  • Use Suspense to Simplify Your Async UI

    🚧 SUSPENSE IS EXPERIMENTAL

    One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.

    This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user-- whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.

    The end result is countless spinners and the dreaded FOLC (flash of loading content).

    React Suspense is the answer to these problems.

    React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.

    It's a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.

    In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

  • Build an App with React Suspense

    🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

    Michael Chan has years of experience with React, and in this course, he will guide you through the ins-and-outs of working with Suspense.

    React Suspense gives us a new way of describing with fine-grain controls how users experience should look based on data we have or don’t have.

    This will change the way you build React applications forever and this is the opportunity to get an early look and head start!

  • Build a Video Chat App with Twilio and Gatsby

    In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.

    Along the way, you’ll learn powerful concepts like dynamic route handling in Gatsby, form management with React Hooks, writing custom React Hooks, context management and reducers in React, handling real-time interactions in a React app, creating serverless functions in Twilio, and setting up a Twilio account to support realtime video calling.

  • Composable Gatsby Themes

    When you see the word “theme” you might think of the visual aspects of a site or code editor where setting an option in one place can change the look everywhere.

    Gatsby Themes take this idea to another level by allowing you to change and compose entire pieces of functionality.

    In this advanced course, you will iteratively convert a fictitious SaaS website with marketing, eCommerce, blog, and dashboard pages into a set of horizontally composed Gatsby Themes.

    After everything's been split up, you will build a deeper understanding of parent/child theme relationships by exploring the blog data model with schema customization APIs that allow us to create multiple child themes with data sourced from different node types.

  • A Journey with Vue-Router

    Ever built a website? Did it have more than one page?

    If it did, you learned quickly how essential routing is to the success of your project. And in so many frameworks routing is a painful and complex thing to learn.

    But not in Vue!

    Vue has an incredibly clean and powerful library called vue-router that takes care of everything you could need.

    In this course, we'll cover what you need to know to get started with vue-router.

  • Advanced JavaScript Foundations

    It all starts with syntax. From there, once you’ve got the concepts down, you can move into using a framework where you figure out how to make things “just work”.

    Everything is great, until it’s not.

    If someone put you on the spot right now and asked you to explain this, would they like your answer?

    What about prototypal inheritance or coercion?

    In this workshop, you’ll be taking things to the next level, shining a light into “black-box” concepts like prototypes, the this keyword, and what primitive types are.

    Tyler will walk you through each concept, and build your understanding through examples in the areas you need to know.

  • Building Accessible Web Apps with React Workshop Prep

    Welcome and thank you for signing up for the workshop on Building Accessible Web Apps with React! To be ready to hit the ground running there are some pre-requisites you'll need to have prepared:

    1. Please walk step-by-step through the README in the Github repo for the workshop.
    2. In addition, I've added some videos here that may be helpful to you if you're planning to use the VoiceOver screen reader on Mac or if you'll be using High Contrast Mode on Windows.

    The rest of the tools I'll demo for you in the workshop but make sure you have them installed (which is all listed in the README).

    Thanks and I look forward to talking with you about React and Accessibility soon!

  • ES6 and Beyond - JavaScript Tips and Tricks from ES2015 to ES2020

    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.

  • Theme UI

    Theme UI

    John Otander72× completed

    Theme UI is a library created by Brent Jackson for building themeable React apps with Gatsby. It's built with Styled System which provides a constrained set of styling APIs based on props. It uses Emotion and MDX underneath which abstracts us away from a lot of the challenges when dealing with global CSS and styling content.

    Theme UI uses "presentational context" to allow a component to apply styling to child elements without introducing global styles. You can use a styles object in your configuration to apply theme-aware styles to ensure consistency.

  • Shareable Custom Hooks in React

    React 16.8 introduced Hooks like useState for using stateful logic in our function components, and useEffect for side effects previously only used in class-based components.

    The React Team has given developers a way that simplifies using core features, but what's that mean for the code that you write?

    In this self-paced workshop, you'll work through refactoring a component to use a custom hook, and learn to apply the patterns used by the React team to your own code.

    Follow the React Team's lead, and make your code more readable, reusable, and reasonable!

  • Introduction to AWS SAM

    The videos in this playlist will get you started building serverless applications using AWS SAM. It covers

    • Setting up your AWS credentials
    • Building and deploying a Lambda
    • Testing your Lambda locally
    • Cleaning up your AWS account once you've finished
  • The Complete Guide to FaunaDB

    FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

    Fauna is inspired by Calvin, has built-in GraphQL integration, and a query language based on lambda calculus. Be sure to check out the Jepsen analysis and the associated chart of consistency models

  • unified - the compiler for your content

    unified enables new exciting projects like Gatsby to pull in Markdown, MDX to embed JSX, and Prettier 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.

  • Get Started with Flexbox CSS Layouts

    Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container. It can also control how the elements are positioned within a flexed container.

    Once you start thinking in rows and columns, you can control almost any flexed layout with just a few simple flexbox layout primitives.

  • GitHub Actions at Work

    GitHub Actions are a powerful workflow tool that allows you to write and use custom code to execute workflows. It's like a serverless CI/CD platform built directly into GitHub. We have access to GitHub's registries, our own repos, multiple platforms (Mac, Windows, Linux), runtimes (VMs and Containers), and languages (JS, Rust, Go, etc) to perform any action we want. We can trigger workflows using GitHub's own events, our custom events, or even scheduled events like a cronjob.

  • Immutable JavaScript Data Structures with Immer

    Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.

    However, since JavaScript doesn't include support for immutable data structures out of the box, you need to use a third party library. But which one to choose?

    In this self-paced workshop, Immer's creator Michel Westrate will guide you through the creation of a multi-user Gift Tracking app.

    You'll learn the basics of using Immer to handle immutable state updates, then go further into change distribution and implementing an undo/redo.

    After this workshop, you'll be ready to leverage immutable data structures in your own applications!

  • VSCode Basics

    VSCode ships with quite a few features that aren’t immediately apparent. This playlist will guide you through some of the features VSCode has to offer and get you comfortable navigating and editing files in it.

    Learn:

    • VSCode Command Palette
    • Configuration
    • Navigation
    • Custimization
  • Text Manipulation in VSCode

    Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency.

    VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

  • Development Workflows in VSCode

    VSCode can be used for almost any programming language or framework. That encompasses quite a few workflows.

    Through extensions and built-in features, you can customize VSCode to suit the workflow you need that will support your development.

  • Code Generation in VSCode

    In any programming language or JavaScript framework, you’ll find yourself writing certain lines of code over, and over… and over again. That can be automated. VSCode uses the idea of snippets to do this. Snippets allow you to define templates that write the boilerplate for you in whenever you need.

    You can define your own snippets, download them as a package from the Marketplace or use Emmet (pre-installed) to save time and avoid writing boilerplate or commonly used patterns.

  • Image Loading and Optimization in Gatsby with gatsby-image

    Learn how to add optimized images to your Gatsby site with the gatsby-image plugin.

    These videos dive into:

    • installing and configuring plugin options
    • sourcing images to be queried via GraphQL
    • displaying traced-svg or "blurred-up" images
    • different image types supported by gatsby-image
    • as well as alternatives for using images in Gatsby
  • React Hooks in Function Components

    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!

  • Build Performant and Progressive Angular Applications

    This collection of lessons will give you some practical tips and tricks to create faster and more reliable Angular applications. They are highly inspired by the content published on web.dev/angular by Minko Gechev and Stephen Fluin.

    What you'll learn here is how to..

    • improve an app's TTI via route-level code splitting and lazy loading
    • implement a loading indicator for lazy loaded routes
    • improve performance via preloading all lazy modules
    • implement a custom preloading strategy
    • preload lazy loaded modules with the Angular CLI
    • optimize Angular's Change Detection
    • implement virtual scrolling for large lists with the Angular CDK
    • add client-side precaching with Angular and service workers

    That said, have fun 🚀

  • Learn Apollo Client Hooks

    Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes.

    As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing useQuery, useLazyQuery, useMutation and useSubscription hooks.

    If you'd like to learn how to use them, this playlist is for you!

  • Gatsby Theme Authoring

    Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.

    Because they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!

    For a written version of this course, check out the Gatsby docs.

  • JavaScript ES2019 in Practice

    Staying up to date with JavaScript’s changes saves you from being stumped by syntax.

    In this course, you’ll learn about all latest language features published with ES2019 and see how they solve problems, using the example of a Nuxt.js application.

    From optional catch binding to creating an object from a list of key-value pairs, you’ll learn the benefits of these new features and understand when, why, and how to use them in your legacy projects and upcoming work.

  • Create New Tools with Mac Automation

    Make a command-line app open in a new window, turn it into a Mac App, add new services to Finder, navigate easily between Finder and Terminal; do it all with AppleScript and Automator.

  • Getting Started with Apollo Federation

    Apollo Federation allows you to orchestrate different GraphQL services into a single GraphQL gateway. In this playlist, we'll introduce you to the core concepts of Apollo Federation to get you started by improving an example app for Snowtooth Mountain.

    The lift ops team has created a Lift service that provides lift status reporting for skiers and the ability to change the lift status for ski patrollers. The mountain ops team has created their own service to report on Trail status. These are completely separate GraphQL APIs, and we'll turn them into federated APIs that work under one gateway.

  • Introduction to Urql: A React GraphQL Client

    In this playlist, we are going to go over how to set up and use urql as a GraphQL client.

    You will learn how to set up an Urql Provider component so that all of your React components have access to urql. Then you will learn how to use 3 of urql's React Hooks:

    • useQuery
    • useMutation
    • useSubscription

    Each of these lessons covers their corresponding GraphQL topic: Queries, Mutations, and Subscription.

  • Build Content Rich Progressive Web Apps with Gatsby and Contentful

    The JAMstack, short for “JavaScript, APIs, and Markup,” has been making waves in the world of web development.

    Building JAMstack applications removes the hassle of building out a backend from scratch, freeing you to focus on what really matters: your content.

    In this course, you’ll learn how to build and deploy your own static Gatsby site that pulls external data from Contentful and then deploys to the web with Netlify. After the course, you’ll have all the knowledge you need to build a blog, marketing site, or portfolio with Gatsby. Just add content.

    Check out these community notes for this course on Github.

  • An Introduction to React Hooks

    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.

  • Up and running with Svelte 3

    JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

    "Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

    The best part? If you have 19 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

    Enjoy!

  • Vue and Socket.io for Real-Time Communication

    Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

    On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

    In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

    You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

  • Test Production Ready Apps with Cypress

    One of the most important — but most ignored — practices for web developers is performing end-to-end testing on applications before they go live into production. You know: making sure they work like they’re supposed to. But testing can be tedious, and definitely not fun.

    In this course, Brett Cassette will show you how you can test all layers of your application stack, simultaneously, with Cypress. When you use Cypress, it’s like having a robot that uses your app the way a real user would. Cypress reports if things work the way you designed them to — and if they don’t — every step of the way. And it’s fun.

    After completing this course, you’ll be ready to apply the same E2E testing principles to your own applications. Stop leaning on your QA department (if it exists) to stress-test your application, and ship your app knowing it’s ready.

  • Building Websites with MDX and Gatsby

    MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents.

    Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

    Together, they combine to create a powerful platform for docs, blogs, and other rich applications.

  • Building Forms with React and Formik

    Formik, created by Jared Palmer of The Palmer Group, is a library for creating forms without tears. Formik takes care of the repetitive aspects of form building like managing values, errors, and touched fields. Formik also orchestrates validation and submission so you don't have to.

    During this playlist, you'll learn how to spend less time wiring up state and change handlers and more time focusing on your business logic. We will be covering topics like refactoring your current non-Formik forms to Formik, writing quick and easy validation rules, learning how to integrate third-party component libraries, and much more.

    Stop wasting your time and tears building forms, and use Formik.

  • Golang from Scratch

    Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. It is used frequently in the container ecosystem by projects such as Kubernetes (container orchestration), Docker (containers), and Cilium (BPF networking).

    This playlist is a collection of videos that will start you off on your Golang journey.

  • Using Emotion with Gatsby

    Emotion and Gatsby let you build static websites and dynamic applications while sharing composable styles.

    Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities.

    Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

  • Chrome DevTools tips & tricks

    Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

    That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

    You will learn how to:

    • Use (experimental) CSS Overview to learn all about CSS used on a page in a minute
    • Style console.log messages with CSS - a crucial skill for any senior developer (j/k)
    • Debug your code (on production and local environment) with logpoints
    • Run a Lighthouse audit of your site
    • Choose accessible colors for your website that have an AAA contrast ratio rating
    • Force a DOM element state in Chrome DevTools
    • Use Console utilities to make debugging easier
    • Copy a network request as fetch or cURL with Chrome DevTools

    Have fun!

  • Why Gatsby Uses GraphQL

    Why does Gatsby use GraphQL? In this series you’ll learn how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.

  • Create Fullstack Applications with GraphQL and Apollo

    GraphQL is a query language for your API that offers a new paradigm for delivering data to clients of all varieties. In this playlist, we’ll build a small fullstack application using GraphQL, Apollo Server, Apollo Client, and React, introducing a multitude of key GraphQL concepts along the way.

    We’ll start by building the GraphQL API for a ski day counter application using Apollo Server. Then we’ll immediately send client queries to the GraphQL service to get the data. Later, we’ll incorporate mutations to change data, and we’ll integrate react-apollo to send queries and mutations from React components. Along the way, we’ll introduce useful schema design features like input types, enums, and custom scalars, and we’ll talk about client-side use cases like sending variables and caching. After watching these videos, you’ll be able to work on existing GraphQL projects or start your own with a full command of the fundamentals.

  • SQL Fundamentals

    Most applications rely on databases to store data. Understanding how to create a database and communicate with it unlocks a critical power in your web development career.

    In this course, Tyler presents all the building blocks of creating and interacting with a PostgreSQL database. From creating a brand new table, up through organizing and aggregating data across multiple tables, you will learn the fundamental skills of SQL — and you’ll be prepared to apply them right away.

    After completing this course, you’ll be ready to tackle more challenging SQL topics like proper data modeling, normalizing data, and exploring different database types.

    Check out the Community Notes for this course.

  • Use Gatsby’s Link Component to Improve Site Performance and Simplify Site Development

    Gatsby’s Link component is a powerful way to improve the user experience and simplify the development workflow when building Gatsby sites. It makes navigating between internal links instantaneous, creating an app-like feel, and provides helpers for various common use cases.

    In this playlist, you’ll learn:

    • Why and how to use Gatsby’s Link component for internal link navigation
    • How to set styles for the currently active link
    • How to apply active styles to parent pages and other partially matching URLs
    • How to send state information in the props of the Link target
    • How to replace items in the navigation history
    • How to navigate programmatically using the navigate helper function
  • Create and Deploy a Basic Static HTML Website

    This course will walk you through the entire process for creating and deploying your first Static HTML Site.

    You will learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.

    Additionally, you will learn how to make your website responsive using CSS media queries, add custom emojis, animations, and a "Tweet" button.

    To finalize the course, you will learn how to deploy and host your Static HTML Site with Netlify, a powerful service that automates builds, deployments, and manages your websites and web apps.

  • JavaScript Handy Tips & Tricks

    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.

  • VR Applications using React 360

    If you’ve used React, you know how it can provide smart solutions to complex problems. And how exciting that can be.

    React 360 brings the same ease and enjoyability to the creation of 3D and VR experiences. It’s built on top of React with an additional set of exciting, powerful tools like surfaces, events, and native modules.

    In this course, Tomasz Łakomy will show you how to use React 360 to create amazing 3D and VR experiences. You’ll build on your React foundation, using the component formatting you already know, and push it to another dimension to create web apps that can be enjoyed across mobile, desktop, and VR headsets. And you won’t need to use crazy complex tools like WebGL to do it — just React!

    Following the course, you’ll be ready to use React 360 to take an idea from creation to completion in a VR app — for instance, a VR image gallery, game, web browser, or interactive story.

    If you’re comfortable in React and you’re ready for something new, this course is perfect for you.

  • Getting Started with Flutter

    Flutter allows you to build native apps on iOS and Android from a single codebase. In this course, we'll walk through everything you need to know to quickly get up & running with Flutter including styling, navigation, local state management, theming, lists & forms.

  • The Beginner's Guide to Figma

    In this playlist, we will explore the fundamentals of Figma’s tool set and how you can use them for various design functions. We are going to start from scratch and walk through various scenarios you may encounter when designing a website or application. We will cover building reusable designs (known as “components” in Figma) all the way to prototyping your designs to show screen transitions and animations between state. By the end of the course, you will understand the basics of Figma and know how you can use it to your advantage when building your next app or website.

  • CSS Fundamentals

    Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through specificity, fonts, the box model, margins, padding, positioning, and much more!

  • Getting started with Dart

    We will be looking at the syntax and semantics of the Dart programming language. Dart is expressive and powerful, with a very friendly learning curve. We will also cover various aspects of the Dart ecosystem, including its tools and packages to make you a productive developer. This knowledge will enable you to develop software for client, server and mobile when using the Flutter framework. This will be well-suited for beginning and experienced programmers alike.

  • Learn React hooks, lazy, and memo API

    React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

    Enjoy!

  • Reactive State Management in Angular with ngrx

    As your Angular application grows, it becomes more difficult to manage application state.

    NgRx can help with that!

    In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

    We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

  • Get Started with Dart

    Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve.

    In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework.

    This course is beginner-friendly, but is well-suited for experience programmers as well.

  • Redux and the State ADT

    At a high level Redux is just a dispatching system, sitting atop a finite state machine, driving our application state. It just so happens that the State ADT is good at modeling a finite state machine. It allows us to represent our stateful transactions in discrete, easily composed transactions. We can create complicated stateful transitions by composing many simple transitions into one state transaction. By using the State ADT, we should be able to model all of our application state transitions and provide a single reducer function to Redux that integrates with our state machine model.

    We’ll put this theory to the test by building a Memory type game called “Anger The Bunny”. We start of by defining our state transitions using the State ADT, starting with simple, discrete transactions and using them to create the complex transitions typical of any game. Then once we have a majority of our game logic implemented, we will integrate those with Redux.

  • Progressive Web Apps in React with create-react-app

    Progressive Web Apps (PWAs) allow a user to use your web app online or offline, and lets them install the app onto their iOS or Android device just like a native app. Sounds great, right? But it can be tricky to properly configure a PWA, and not every feature works on every browser or device.

    In this course, we’ll create an online/offline note taking app. We’ll use create-react-app to create the frontend, and node.js to create a simple backend. We’ll start by making sure the app can be displayed offline with cached resources, and learn how to persist data while the app is in offline mode. We’ll also interact with native features like the camera, and learn how to let users install the app on their phone home screen. Then we’ll customize the appearance of the app, including the app icon, splash screen, and phone status bar.

    Finally, we’ll deploy the production app to heroku. By the end of this course, you will have everything you need to create a Progressive Web App with React.

  • The Beginner's Guide to Figma

    Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions.

    We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state.

    By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

  • Reusable State and Effects with React Hooks

    Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal (currently pre-released), you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.

    As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.

    By the end of this course, you'll learn how to:

    • Run (and Skip) side-effects with the useEffect hook
    • Write a custom hook to share logic in your app
    • Simplify the Context API with the useContext hook
    • Update state with dispatch actions using the useReducer hook
    • Optimize Components with useMemo
  • Simplify React Apps with React Hooks

    With the massive improvements to function components in React via hooks and suspense, you may be interested in seeing how to refactor a typical class component to a simpler function component that uses React Hooks features. In this course, Kent will take a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible. We’ll look at state, side effects, async code, caching, and more!

    Want a primer on hooks and suspense? Watch Kent's React Hooks and Suspense Playlist!

  • Unit testing in JavaScript

    Writing effective unit tests can be tricky in any language, and JavaScript apps often get neglected because testing UIs can be particularly tricky. While some of that can be solved by restructuring code and choosing tools that make everything more testable, it's also helpful to know some of the tricks of the JavaScript testing trade, like good mocking and stubbing practices. This playlist is full of tips for how to write tests that verify your code without any undesired side effects.

  • React Context for State Management

    In many cases, teams reach for Redux as the de facto choice for state management. But sometimes, Redux is overkill. In those cases, the React Context API might suit your needs perfectly.

    In this course, we’ll build a simple email client using the React Context API to pass data throughout the app. You’ll learn how to create a context, how to pass data deeply through an app without manually passing props all over the place, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display and manage notifications, how to maximize performance with Context, and how to test the components that use it to ensure your app is working properly.

  • Data Structures and Algorithms in JavaScript

    This course teaches you how to implement your first data structures and algorithms. In the process, you’ll learn some fundamental computer science concepts as well. We’ll build these from scratch using JavaScript, but what we learn can be taken and used in any other language, too.

    You will learn how to build: queues, stacks, linked lists, graphs, and trees. You’ll learn to implement several different sorting algorithms: bubble, insert, merge, and quick. Each of these lessons will not only teach you their implementation, but the tradeoffs made in choosing one over another. By proxy, you’ll learn about concepts like Big O notation and recursion.

  • Build a Neo4J & GraphQL API

    In this course we will learn some of the basics of getting data into and out of Neo4J, as well as touch on some of the libraries and tooling available in the Neo4J community ecosystem, which we will leverage to quickly create and use a full-featured GraphQL API.

    We will start by learning how to run and interact with Neo4J locally. Then we will develop a graph model in which to store the data that we pull from SWAPI via REST. We will then create an Apollo GraphQL API driven by a few simple schemas which fit into this model. We will then write some simple code to crawl SWAPI and insert the data into Neo4J through our GraphQL API. Once there is data in the store, we will learn about some of the features in neo4j-graphql-js that make connecting and accessing our graph Nodes easier.

  • Algorithms in JavaScript

    Algorithms are functions that are used to solve a class of problems. Really any piece of code can be a algorithm! There are common algorithm implementations that have proven to accomplish tasks faster than others. However, speed is not measured in seconds but in terms of growth (Big O notation).

    This course is designed to teach not only some of those algorithmic approaches to everyday problems but review the pitfalls and optimizations that comes with using them at all. They can be a dynamic and powerful way to optimize calculations, processes, and performing tasks. However, if used incorrectly it can not only destroy a system but can be a nightmare to untangle. Many programming positions today test the knowledge of an individual’s ability to understand and implement algorithms. Let’s work through recursion, sorting, loops, and many more!

  • Modern JavaScript Tooling with React

    Building an application with React typically involves several tools. Whether you configure these on your own or use a tool meant to save you from the configuration like Create React App, the tools are still there. When you come up against a situation where you need to start from scratch or make changes to a webpack or babel configuration, it helps to understand what each tool does, how they fit together, and how they are configured.

    In this course, we’ll start from an empty directory and by the end, we will have configured a slim but powerful boilerplate project. Along the way, we’ll touch on each of the major tools and build up to the final setup to gain an understanding of each tool’s purpose and how they all work together to help you build and deliver an application.

  • React Hooks and Suspense

    React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

  • Create Amazing Animations with GreenSock

    Animations attract the eye and add a higher level of engagement for your users. But they’re not easy to set up, and they don’t always look the way they should on every browser.

    Greensock is the best platform available for creating performant, highly-customizable animations. This course will walk you through the features of Greensock, including how to:

    • animate an element
    • manually control an animation
    • animate between CSS classes

    …and more, with cross-browser support to ensure your animations look sharp everywhere.

  • Asynchronous State Management with redux-observable v1

    Handling async actions that affect your application’s state sounds like a tall order, but Redux makes it possible — and a win-win for you and your app’s users.

    In this course, we will begin with nothing more than an empty directory and a text editor. Through small, focused lessons, we’ll learn how to set up a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store.

    With an understanding of how things work, we’ll move onto solving common problems like:

    • Ajax cancellation
    • creating sequences of async actions
    • enabling code reuse through higher-order Observables
    • and much more.
  • Productive Git for Developers

    Knowing your everyday toolset increases your productivity as a developer. And Git is one of those tools you use on a daily basis. Mastering Git is tough; it has hundreds of different commands, often even inconsistent at how you pass in flags and configuration options. On the other side, there are a lot of good Git courses out there already, explaining all of these commands in detail.

    With this course, I aim at a different goal. You will walk through a series of scenarios which you’ll most commonly encounter in your daily work life as a developer. I’m talking:

    • updating your feature branch with the latest changes from master
    • polishing your git history to make it ready for being peer-reviewed
    • moving a set of commits to another branch
    • undoing accidental commits

    The goal is not to cover everything, but those tasks that will greatly improve your daily productivity with Git.

  • Build a React Native Application for iOS and Android from Start to Finish

    If you already know React, then React Native is a great way to build mobile apps for iOS and Android. Of course, web and mobile apps are very different to build — but this course serves as your guide.

    In this course, we’ll build a mobile app from start to release with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know anything about mobile development to participate.

    Throughout the course, we’ll be building a “Restaurant Review” app. We’ll use all the standard mobile UI elements like text, images, form inputs, buttons, scroll views, and icons, and we’ll show several navigation techniques like push, modal, and tabs. The app will make HTTP API calls to a server and will store data on the device with AsyncStorage. Finally, we’ll specify a custom app icon and splash screen, deploy the app to a physical device, and prepare the app for release to the App Store and Play Store or for ad-hoc release.

  • Just Enough Functional Programming in JavaScript

    In the last few years, the software development industry has seen a resurgence of functional programming. But what is it? And how do you get started?

    “Just Enough” is an introduction to functional programming, written in JavaScript, that doesn’t get bogged down in the jargon and mathematical theory that can be so intimidating. Instead, it provides an approachable introduction to the paradigm that will give you the education and confidence you need to start using the programming style right away.

    With “Just Enough” as our guide, this course will focus on the foundational knowledge needed to approach any functional language. By the end of the course, you will understand:

    • higher order functions
    • pure functions
    • immutability
    • currying
    • partial application
    • pointfree programming
    • functional composition

    In just 30 minutes, you’ll learn more than just enough.

  • SSH for Remote Server Authentication

    “Setting up remote server authentication” will never be on your job description. It’s not one of those desirable responsibilities that convinces talented people to move across the country and pursue the job of their dreams.

    But at that dream job, you might be asked to set up an SSH key. You’d better be ready.

    In this course, we will learn the fundamentals of creating SSH keys and configuring them for connectivity to a remote server. We’ll figure out how to:

    • tunnel SSH connections for easier local debugging
    • set up configuration files to simplify the aspect of connecting to remote servers
    • use security features like blocking incoming connections

    Being prepared is key. Learn the skills now!

  • Advanced Bash Automation for Web Developers

    Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates.

    In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

    For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically.

    Along the way, you’ll also learn:

    • more advanced bash commands like exec
    • syntax such as redirecting stdout and stderr to the same destination
    • timesaving tricks like brace expansions

    Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

  • Getting Started with Algolia InstantSearch.js

    Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

    This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.)

    Prerequisites: You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

    If you want to play with your own index settings and data set, you can create a free Algolia account here, but this is not required to follow along with this first course.

  • GraphQL Query Language

    GraphQL is gaining traction as one of the most popular ways to create an API. Regardless of which GraphQL implementation you pick, you’ll use the QL in GraphQL — the query language — to query data, change data with mutations, and listen for data changes with subscriptions.

    You need to know the Query Language regardless of the server-side implementation. In this course, we will learn the GraphQL query language by sending an assortment of GraphQL operations to an existing API.

    To start, we’ll learn how to write queries to obtain all the data needed for an app in one response. As the course progresses, we’ll use mutations to add and change data. To wrap up, we’ll investigate GraphQL subscriptions and realtime data.

    After the course, you’ll be ready to communicate with a GraphQL API regardless of server-side implementation using the GraphQL query language.

  • CSS Selectors in Depth

    Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance.

    In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

  • GraphQL Data in React with Apollo Client

    GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

    If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

    This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

    We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

  • Build Your Own RxJS Pipeable Operators

    Feels like magic.

    It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

    Wait, that’s not right. What’s it doing? I don’t get it. Help!

    …until you encounter unexpected behavior. Good luck debugging magic.

    To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it.

    This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

    Over 12 lessons and 31 minutes, you'll get a handle on:

    • how RxJS pushes values from observables to subscribers, which take care of the output.
    • how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
    • the internals of operators and subscribers and how to customize operators to your specific needs.
  • CSS Fundamentals

    Can you center an HTML element? Do you know how the box model works? CSS is a fundamental language imperative to working with websites. It controls all the visual aspects of a site, from colors to layouts.

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image. Let’s walk through:

    • specificity
    • fonts
    • the box model
    • margins
    • padding
    • positioning
    • and much more!
  • Fully Connected Neural Networks with Keras

    Neural networks, with Keras, bring powerful machine learning to Python applications. They can answer questions like “How much traffic will hit my website tonight?” or answer classification questions like “Will this customer buy our product?” or “Will the stock price go up or down tomorrow?”

    In this course, we’ll build a fully connected neural network with Keras. This is the most basic type of neural network you can create, but it’s powerful in application and can jumpstart your exploration of other frameworks.

    We’ll start the course by creating the primary network. Then we’ll:

    • build and configure the network, then evaluate and test the accuracy of each
    • save the model and learn how to load it and use it to make predictions in the future
    • expose the model as part of a tiny web application that can be used to make predictions

    You don’t need to know a lot of Python for this course, but some basic Python knowledge will be helpful. Enjoy!

  • Execute npm Package Binaries with the npx Package Runner

    You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

    This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

    • test out various versions of a package
    • run packages without globally installing
    • run code directly from GitHub
    • make working with packages much easier
  • Getting Started with Angular Elements

    Angular elements are one of the major innovations in Angular 6+. Elements allow us to develop Angular components like we always have through Angular’s powerful API, and then compile them into browser-native custom elements. With custom elements, we can define new HTML elements in a framework-agnostic way that adheres to web standards. We can also extend the HTML by defining a tag whose content is created and controlled by JavaScript code.

    In this course, we’ll look at how to leverage Angular elements within our Angular apps to make them even more dynamic — a use case that’s commonly required in CMS-like environments. Going a step further, we’ll also see how we can compile our Angular elements into a standalone script file, which you can integrate into any other web context to pass data and register events on your custom elements.

    Thanks for joining us!

  • Using WebAssembly with Rust

    Many languages work on a compilation story to WebAssembly, but Rust is already ready for primetime. Why?

    • Rust is a stable language and great replacement for C and C++.
    • Due to the reference and borrowing concept, Rust doesn’t need a Garbage Collector and can be used for a production-ready WebAssembly project.
    • The Rust/Wasm team has built some sophisticated tooling for straightforward interoperability between Rust and JavaScript.

    This course gives you the tools to compile to WebAssembly with Rust. Over 11 lessons, we’ll set up a project and explore various paths of communication and interoperability between Rust and JavaScript.

  • Building Serverless Web Applications with React & AWS Amplify

    React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users.

    This course walks you through setup and implementation to get your cloud-based application up and running.

    You’ll learn to set up:

    • a new project in AWS Amplify configured to your React app
    • user authentication with Amazon Cognito
    • managed GraphQL with AWS AppSync
    • image storage and retrieval with Amazon S3
    • text translation via Lambda functions
    • and finally, deployment of your application on AWS using Amazon S3

    You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

  • Practical Advanced TypeScript

    This course explores some of the new advanced TypeScript features, using practical examples you might encounter in your projects.

    We’ll start off by demonstrating two new features that improve readability (numeric separators) and tighten type strictness in classes (strict property initialization). We’ll then improve type guards with a practical Redux-inspired example, followed by a lesson about writing more readable mapped type modifiers. We’ll use a summary on types vs. interfaces to transition to self-referencing types examples (and how to build custom type safe iterators around them). We’ll then cover a few ways to use the new conditional types, including building a recursive generic type that transforms any other type you pass into it, regardless of how deep it is, and makes it read-only — great for your immutable states!

    Finally, we’ll end with a lesson on building and chaining decorators to initialize and augment properties in classes.

  • Advanced Angular Component Patterns

    Components are all about encapsulating decisions. The perfect component makes good decisions for you without making you think about it. Of course, no one knows what decisions you’re going to want. To make components reusable, we set reasonable defaults, then allow you to override them when you don’t like the decisions made for you.

    This course covers three broad categories of decisions that can be encapsulated in a component: state, view, and logic. You’ll learn to move an Angular component from completely static to very configurable using a variety of techniques.

    The course takes some of the most popular components in web development and applies them to Angular. You’ll learn to write components that are opinionated about their core purpose, but allow parent components to overwrite secondary concerns when pain points require a more complex pattern.

  • Create Smooth, Performant Transitions with React Transition Group v2

    React Transition Group gives you the power to transition React components in and out of the DOM, depending on the state they’re tied to, with no weird hacks. Without React Transition Group, you may find yourself using a lot of display: none in your CSS, along with some pretty nasty setTimeout hacks. But with it, you can write your transition elements with a neat, declarative, all-new API — and no hacks in sight.

    You’ll get to explore v2 of the API in this course, as Rory Smith shows you how to use the React Transition Group library to write seamless, performant, beautiful transitions of elements in and out of the DOM. (i.e. no more jumping from state to state without warning.)

    You’ll learn the features of React Transition Group in depth, so that you can turn features of your React app from dull and boring to slick and seamless.

  • Develop a Serverless Backend using Node.js on AWS Lambda

    The core of serverless architectures are auto-scaling systems and a pay-per-execution pricing. Two traits that allows developers to significantly reduce operational cost and complexity, by outsourcing infrastructure management to cloud providers and focus on building business logic.

    In this course we walk through the basics on how to create a serverless API. We start off creating a simple HTTP endpoint. Then we build the first two endpoints of a REST API for a simple Todo Application backend storing the data in DynamoDB. After watching this course you will be ready to get started building you first serverless backend.

  • Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

    With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

    AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

    In this course, Nader Dabit will show you how to:

    • build a production-ready GraphQL API through AWS AppSync
    • create and modify data through the AWS AppSync console
    • connect a React application to the GraphQL API
    • execute queries, mutations, and subscriptions for data through the API in React
  • Beautiful and Accessible Drag and Drop with react-beautiful-dnd

    Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally.

    react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actually easy to start using, and this course is a great place to start.

    We will create a highly interactive task management application from scratch using the building blocks of react-beautiful-dnd. Over 14 lessons, you will get practice in:

    • building droppable containers to sort draggable items horizontally and vertically
    • moving items between columns
    • and even moving the columns themselves

    Following the course, you’ll be ready to build powerful dnd experiences into your own projects.

    Check out the community notes for this course on Github.

  • JSON Web Token (JWT) Authentication with Node.js and Auth0

    JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

    In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API. Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

  • Understanding JavaScript's Prototypal Inheritance

    How do inherent prototypes work?

    You might not think this question applies to you, especially if you come from a classical background. But if you use objects, functions, or arrays, you're probably already using prototypes, and can benefit from learning the logic behind them.

    This course explores the mechanics of inheritance in JavaScript by showing how prototypes work as chained references to other objects. Learn to take full advantage of prototype shortcuts to make your work simpler and faster…and debug them if you hit a snag.

    We’ll explore:

    • how to manipulate prototypes to work like traditional classes
    • how polymorphism and factory functions can be used within JavaScript
    • how the class, new, and this keyword work and how to use them
    • using the instanceof, Object.create, and Object.getPrototypeOf functions to explain why objects have the properties that they do

    Develop the knowledge needed to use inheritance for faster, better, bug-free code.

  • Build Async Vue.js Apps with RxJS

    Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.

    Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

  • Style and Theme Ionic v3 Applications

    Theming Ionic applications is a topic that is often left undiscussed. Ionic has a robust API to theme your application so you don't have to settle with the default styles.

    This course will show you how Ionic’s theming system works so that your application can have its unique look. It will explore the built-in utilities, which you can leverage directly.

    You'll be introduced to the built-in CSS utilities that Ionic provides, Ionics grid system, and Ionic configuration settings to create a custom look and feel to your App.

  • Integrate IBM Domino with Node.js

    While this course is for IBM Domino Developers who are looking to utilize Node.js alongside their applications, or Javascript developers looking to integrate with a Domino server. There are quite a few tips and tricks you can learn for integrating Node.js as a proxy server for any REST API you might want to communicate with your JavaScript Application.

    We cover how you can continue to use cookies provided by IBM Domino for user authentication and authorization while accessing a Node.js / Express based application, including modifying the standard login form to expose authentication errors.

    We show how to store user level information inside a JWT giving the option to store functional levels of access safely. This stateless token can then be decoded server side to list what user roles a user has and therefore can restrict functionality without having to refer back to Domino each time.

    The course will demonstrate Create, Read, Update and Delete methods using the Domino Data Services all via the NodeJS application but still maintaining Domino security.

    And finally, we show how you can reuse Domino generated HTML inside a handlebars template by scraping and manipulating the HTML.

  • Automate Daily Development Tasks with Bash

    Humans were never meant to repeat joyless tasks in a precise manner, over and over and over. Computers are meant precisely for these types of tasks.

    Bash is a ubiquitous technology in web development that gives you the immense power of automating repetitive tasks you find yourself performing throughout the day.

    The topics we cover will give you confidence in creating build scripts that run on continuous integration servers or quickly testing and debugging an API with curl. We’ll go over: - Interacting with the file system - Creating, moving, copying, and deleting files and folders - Finding files and text patterns in files - Creating and running scripts - Language syntax like variables and conditionals.

  • Test React Components with Enzyme and Jest

    In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended.

  • Manage React Form State with redux-form

    Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable way to create beautifully crafted forms. You get the benefit of integrating form state with an existing Redux application, plus the ability to track the state of your form with precision in Redux DevTools, without writing lots of boilerplate code.

    In this course, we will use the redux-form package to create a form whose state is easy and enjoyable to manage. Over 46 minutes and 14 lessons, we will:

    • find out how redux-form ties into a React/Redux application
    • learn how to use both synchronous and asynchronous validation
    • use real-world examples and effective ways of presenting relevant information to the user

    Learn to create precise, reusable form components, and enjoy yourself in the process.

  • React Navigation for Native Mobile Applications

    React Navigation makes the easy things easy and the hard things possible. This course will help you understand how to customize and use React Navigation for more complex navigation patterns.

    You'll learn different ways to display content within the navigators, which demonstrates the built-in customizations within React Navigation. As well as learn how to interact with different UI components within React navigation, which will help you structure your application.

    Building off this, you'll learn how you can customize the default navigator behavior to provide a custom look and feel to your React Navigation application

    To succeed in this course, you’ll want a basic understanding of the React Navigation API and how to use the default navigators.

    Note: React Navigation has been updated to v2. This course was recorded on v1.x and the lesson code has been updated to reflect v2. The principles and patterns taught in the videos remain valid.

  • Optimistic UI Updates in React

    No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

    In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

    In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages.

  • End to End testing with Cypress

    The tools available for unit testing have come a long way. While testing may never be “easy”, the available tools have certainly moved testing closer to the simple end of the spectrum. Full end to end testing hasn’t quite kept the same pace and as a result many applications are testing manually and often by users in production. Cypress provides a testing environment that makes end-to-end testing fast and reliable with a simple API that makes creating automated unit tests for your web applications a no-brainer.

  • Convert SCSS (Sass) to CSS-in-JS

    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.

  • Angular Service Injection with the Dependency Injector (DI)

    Services and registering service providers are an inherent part of an Angular application. It is where you should define your application logic, they keep the state of the application and allow to share that among different components.

    That said, components can ask for instances of services by specifying them as parameters of their constructor functions which will then provided at runtime by Angular’s dependency injection mechanism. While services themselves are mostly just plain ES2015 classes, there are some interesting things to discover, especially when it comes to dependency injection.

    We can define services at various levels within our application, which allows us to control the scope and visibility of a given service. We can furthermore alias old service definitions to new, existing services which is handy for refactoring scenarios and we also have the possibility to define so-called factory functions for fully taking control of how a given service is being constructed.

    In this course we will take a closer look and walk step by step through all of these scenarios.

  • End to End Testing with Google's Puppeteer and Jest

    End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

    This course introduces you to two great tools for E2E testing:

    • Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
    • Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

    Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

  • JavaScript Promises in Depth

    ES2015 brought a native Promise to the JavaScript standard library. In this course, we’re going to take an in-depth look at how to use promises to model various kinds of asynchronous operations.

    First, we’re going to explore how to create promises using the Promise constructor or the Promise.resolve() or Promise.reject() methods. Then, we’re going to see how to chain promises together using .then(), .catch(), and .finally(). We’re going to compare various error handling strategies along the way. We’re going to wrap up this course by taking a look at how to deal with multiple promises using Promise.all() and Promise.race() and how to await a promise using the await operator.

  • Develop React Applications with Mobx and TypeScript

    Developing logic-rich applications is a key skill to have.

    The TypeScript–React combination helps you unlock that skill, and it’s a great developer experience in terms of writing understandable and refactorable HTML. But the default state management for React has a long way to go to feel simple and maintainable — and that’s where MobX makes your life so much easier. MobX keeps things simple without using complicated setups like provider and connect that provide way too little value for all the mental overhead.

    In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications. You’ll learn:

    • that you don't need advanced annotations and TypeScript features to use MobX
    • how to easily refactor code through TypeScript
    • how to use TypeScript to track the flow of state as properties change
  • Build User Interfaces by Composing CSS Utility Classes with Tailwind

    Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

    Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.

    In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.

    By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

  • Advanced Fine-Grained Control of Vue.js Components

    Vue is known for being super easy to pick up and quickly build great applications using the built-in template bindings and directives. As your application grows in complexity, you'll need finer control of your components.

    In this course, we’ll define where content of a component should land when you define the content inside of a parent component with Vue slots and manage that relationship with slot-scope. We’ll continue with dynamic and async Vue components as well as use JSX inside Vue for complete JavaScript control of your components.

    This course provides an overview of Advanced Vue.js Components with quick demonstrations on how to leverage Vue Component patterns.

  • State Monad in 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, a majority of the techniques we learn here can be used with most of the State implementations in the wild.

  • Safer JavaScript with the Maybe Type

    JavaScript’s dynamic typing makes it incredibly flexible. That flexibility can lead to trouble though. When values have the potential to change types or to end up as null or undefined, that can lead to runtime errors in our code or bizarre bugs that take forever to track down because of type coercion. To battle this, we end up with code that is littered will conditionals for null or undefined values and type checks, making the core logic harder to read and refactor later.

    The Maybe encapsulates the type checking and guards against missing values for us. With Maybe in our toolbelt, we can keep our functions free of all the guardrails, outsource that work to the Maybe and keep our business logic free of all the clutter.

  • SEO Friendly Progressive Web Applications with Angular Universal

    In this course we will create an Angular application that will serve as a public website. Normally there are quite a few trade-offs by using a Single Page Application for a public website. For instance, they are hard to index by search engines and if you link to them on social media you get a generic preview. Also, the initial rendering can take a while (especially on mobile devices) as the browser has to pull in all the JavaScript in order to render a working app.

    By adding and configuring Angular Universal we add Server Side Rendering capabilities to our application. This helps prevent the issues mentioned above by pre-rendering the application on the server and serving this out to the user when she requests the app. Once the JavaScript has been loaded the app will seamlessly switch over to a ‘normal’ web application.

    For good measures and to modernize our application we will add and configure a Service Worker that will allow for a native-like experience in the browser (splash screen, desktop icon, fast load, cached data, etc).

  • Create Dynamic Components in Angular

    Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scale applications so much easier. In this course, Juri Stumpflohner will take us through the specific use case of of creating a tabbed component which allows us to dynamically define new tabs.

    On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the ComponentFactoryResolver and ViewContainerRef.

    Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by ngTemplateOutlet and ngTemplateOutletContext.

  • Async/Await using TypeScript

    Mastering asynchronous code execution is fundamental to becoming a great TypeScript developer. You will learn how TypeScript enables you to write asynchronous code with complete type safety and great runtime support thanks to TypeScript’s understanding of the async / await pattern.

    You will learn concepts like Promises, generators and how they enable the runtime environment to allow authoring asynchronous code just as beautifully as synchronous code.

  • Manage Application State with Mobx-state-tree

    MobX State Tree (MST) is a library that helps you organize your application states in a very structured manner. It allows you to create a component model, but for your data!

    Course instructor Michel Weststrate—creator of Mobx—will teach you to model application state after your problem domain with MST. You will get hands-on practice and see how MST lets you solve problems with its out-of-the-box support for asynchronous actions, patches, snapshots, and middleware.

    Over the 17 lessons, you’ll build a little bookshop application using React, MST, and create-react-app, while learning how to manage the lifecycle of your data by describing data models.

    Join Michel in one of the most popular courses on egghead!

  • Introductory Machine Learning Algorithms in Python with scikit-learn

    Artificial intelligence. Machine learning. Bots. Computers learning and communicating with us to do our bidding. But, where do you start? How do you get a machine to even begin to understand what you speak or type at it? There are several common machine learning algorithms that will help us begin to answer these questions.

    In this course we’ll learn about common machine learning algorithms that don’t require implementing a neural network. We will not be going too much into the math behind them, but instead learn what each algorithm is good for, and how to train them. We'll also learn about a few metrics for evaluating models.

    We’ll implement these in Python using scikit-learn using scikit-learn’s built-in data sets. The focus of this course is on implementation and a high-level understanding of these algorithms.

    We'll look at a few ways to evaluate our models, for both classification and regression models. We'll touch on mean squared error and coefficient of determination (for regression), and accuracy score, logarithmic loss, confusion matrices, and classification reports (for classification).

    Python 2.7 is used in the lesson videos but the code provided has Python 3 available. The only breaking change is the print statement API.

    For additional information on installation, vocabulary, and common errors visit the README.md to the course code attached to each lesson.

  • Understand JavaScript's this Keyword in Depth

    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.

  • React Class Component Patterns

    Once you’ve nailed the fundamentals of React, that’s when things get really fun.

    This course teaches you advanced patterns in React that you can use to make components that are simple, flexible, and enjoyable to work with.

    You'll start with a simple <Toggle /> component that you'll progressively refactor to each of the patterns. Throughout the course, you’ll see the benefits of each pattern and how they can be mixed-and-matched to make your components more useful (and simple for everyone who comes across them).

    Kent C. Dodds has built and shipped components using each of these patterns. Along the way, he will help you understand and weigh the trade-offs of each pattern so you’ll intuitively know where to apply each of them in your own components.

    You’ll finish the course with a list of actionable things you can do, right away, to rework the components that you're building. You’ll complete the course more knowledgeable about React components and equipped to make your components more simple.

    Note: This course covers class component patterns and is still interesting and valuable for the serious React developer, but for most current apps you'll probably want to use React Hooks.

  • Async React with Redux Saga

    In this course we are going to take an empty React and Redux application and add Redux Saga side effects. We’ll begin by installing saga to the app and implement a basic saga generator function. We’ll explore the saga commands provided by Redux Saga and what the difference is between blocking and non-blocking actions.

    We will also understand how to concurrently run sagas with saga helpers and how we wire everything up with the Redux store. Finally, we’ll finish up by implementing tests for our sagas.

  • Build a Server Rendered + Code Split App in React with React Universal Component

    In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need faster rendering speed and smaller network requests!

    You’ll learn how to both split code into lazily loaded bundles AND server-side render your page.

    This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!

    The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!

  • Get Started with Reason

    This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

  • Use TypeScript to develop React Applications

    React provides are a powerful paradigm for creating UI applications with JavaScript. TypeScript can greatly increase the maintainability of React applications by opening up syntax for self-documenting code.

    In this course, we will cover how to set up a React application with TypeScript and use TypeScript for React applications

  • Create Dynamic Forms in Angular

    When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give us the ability to define the underlying object model before binding the form to the template. This lets our forms programmatically adjust to the underlying model so we don’t have to update each form manually as our data will eventually change.

    In this course Google Developer Expert-led we will use Angular’s Reactive Forms and learn about the basics for dynamically rendering FormControls. We will also explore how more advanced input controls such as select boxes and radio button lists can be dynamically bound to our template.

    If you’re coming from AngularJS (v1.x) you may also be familiar with dynamic forms in the context of Formly, a library for automating dynamic forms. We will also quickly touch on ng-formly, which is the Angular (2+) equivalent.

  • The Beginner's Guide to React

    React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work.

    This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away.

    Each lesson in this 28-part course is a single index.html file. This keeps your focus on learning React, with no distractions. We’ll start with a blank file and add more complexity as we go along, wrapping the course with a lesson on how to move into a more production-ready development environment—and even deploy your app to a great service like Netlify.

    You’ll build a solid understanding so when you come across JavaScript challenges down the road, you’ll know how to…react.

  • Build React Components from Streams with RxJS and Recompose

    Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision here.

    Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

  • Make Webpack Easy with Poi

    When setting up a modern JavaScript app, we find ourselves trudging through the land of infinite configuration. Poi offers us an option of zero-configuration by providing sane defaults and hiding them away until you need to tweak a change to suit your needs.

  • Build a Blog with React and Markdown using Gatsby

    A large part of a software developer’s time is spent searching the internet for answers to a never-ending stream of questions. Often, the answers we find are on blogs written by people who’ve been there, and found a solution. Isn’t it time you paid it forward?

    Gatsby.js is a static site generator for React with a plugin ecosystem that makes it super easy to publish.

    In this course, you’ll build a Gatsby site that transforms Markdown documents from your local filesystem into HTML. From there, you’ll use GraphQL to query posts for displaying on an index page, link between posts, and group posts by tags. After your site has been compiled, you’ll see how to deploy it via Github Pages.

    Community Notes for this workshop can be found here.

  • Offline-First Progressive Web Apps (PWA) in Vue.js

    Progressive Web Apps are just Web pages, but with superpowers. They load under uncertain network conditions, even offline. They’re fast and engaging, providing the best user experience. They can be installed on your smartphone if the browser supports it, feeling like a native app.

    In this course I’m gonna show you how to take an existing Single Page App made in Vue.js and pragmatically convert it to a Progressive Web App by creating a web manifest, then it goes through caching static assets, external resources and streams using service workers, applying code-splitting and lazy loading, notifying new versions of the app or wether is online or offline, understanding the preload and precache directives, finishing up by showing how to audit a Progressive Web App.

  • Leverage New Features of React 16

    React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time. From the new error boundaries that will save us many a headache to handling whether to update our state within our setState

    We won't just be learning the technical capabilities of the new features however, we'll also be going into best practices.

    Once you watch this course you'll be more than ready to leverage everything React 16 has to offer!

  • Optimize User Experience for Mobile Devices and Browsers

    A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

    We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

    More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

    We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.

  • Structure Angular Apps with Angular Material Components

    In this course we will explore integral Angular Material components. We will start with components related to navigation, layout, and structure. We will then move through the utility, input, and datatable components, demonstrating how each can be used to suit your project’s needs. Finally we will touch on theming your application to create a custom look and feel that fits within the Material Design guidelines.

    By the end of the course you will be comfortable leveraging the Angular Material library to create an outstanding interface and user experience!

  • Quickly Transform Data with Transducers

    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.

  • Learn HTTP in Angular

    Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communicate with your backend API in Angular, specifically with the new Http module(@angular/common/http) introduced and used in Angular 4.3.1 and later.

    We will learn how to configure the HttpClientModule, how to fetch and send data, customize HTTP headers that are being sent and how to properly handle error responses.

    We will also take a look at some more advanced use cases such as listening to progress events and intercepting HTTP calls. Finally we will also learn how to isolate and mock HTTP calls in automated unit tests.

  • Create a News App with Vue.js and Nuxt

    This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

  • Functional Programming Concepts in Purescript

    PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

    In this course we will use an online editor to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript.

    As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

  • Up and Running with redux-observable

    Note: RxJS imports have changed since the publication of this course. Operators now must be passed into .pipe to be applied to an observable.

    In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store.

    With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more.

    UPDATE:

    This course is outdated, view updated material here: Asynchronous State Management with redux-observable v1

  • Reduce Redux Boilerplate with Redux-Actions

    Redux is a powerful way to manage application state, but that power can come with a lot of code. A single update can sometimes require changes across many files and the code required to define action creators and to handle those actions in your reducer can start to get pretty repetitive.

    The redux-actions library offers a small but powerful API to help cut down on some of the boilerplate that is typical of an application that uses Redux to handle state management.

  • Learn Angular Router for Real-World Applications

    One of the fundamental concepts for building a successful large-scale application is breaking it down into smaller, potentially independent, but mainly more controllable and maintainable parts. This starts at the component level, the module level, and finally the application routing level. Routing is a core part of every application—it should be part of every developer’s tool belt.

    This course will guide you step-by-step from understanding the basic concepts of routing to mastering expert-level topics. We'll start by setting up and configuring the router, then define simple routes and child routes and best practices of organizing them using the Routing Module pattern.

    You'll learn about the supported URL types and its segments, how to define them, and how to leverage RxJS Observables for subscribing to route updates. We'll also learn how to secure routes with various types of guards and about performance tuning with the router’s lazy loading and preloading capabilities.

  • Advanced Static Types in TypeScript

    This course explores the capabilities of TypeScript’s type system and shows how to use advanced static types in practice. For example, you’ll learn how to write safer code by using non-nullable types and being explicit about null and undefined in the type system.

    You’ll also see how the compiler analyzes control flow to determine the most specific type for a variable at any given location.

    In addition to that, you’ll learn about the readonly modifier and the special object and never types. This course also inspects string enums, literal types, discriminated unions, and static types for the rest and spread operators.

    Finally, you’ll see how to type dynamic property access using the keyof operator and how to create new types by applying transformation functions to existing ones.

  • Vue.js State Management with Vuex and TypeScript

    In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based components and using decorators.

    This course will extend it, showing you how you can use Vuex with TypeScript in order to manage the state of your Vue app. We’ll see how to type-safe your store, organize the state in modules, modify it using mutations and actions and write Vuex plugins, all by creating a beer shop app throughout the course.

  • Build A React App With Redux

    Managing state in modern web applications is hard. As applications grows in complexity, keeping track of state changes and mapping those changes back to your UI becomes increasingly difficult.

    One way data flow makes managing state more approachable and lightens the cognitive load required to follow the flow of data through your application. Using Redux takes this idea to the next level and moves the state and the state changes and centralizes them in a global store, managed with pure reducer functions.

    In this course you will learn how to build a production quality React application using Redux. We will build up from using redux by itself, so we can understand the core API and how that interacts with a React application, then we’ll move on to introduce react-redux to abstract away some of the underlying details and clean up our code. We’ll use middleware and a mocked API server to understand how asynchronous code fits into the Redux model and we’ll even deploy our finished work so we can see it running live in the cloud.

    If you are brand new to React, you’ll want to read the documentation and watch our free React Fundamentals course and our Build Your First Production Quality React App course. To get up to speed on Redux, you should check out Dan Abramov’s Getting Started With Redux course.

  • Fundamentals of React Native Video

    React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application. Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

    In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with react-native-video we'll show how to write custom video controls and animate them when the video has not been interacted with.

    Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

  • Understand How to Style Angular Components

    Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.

  • Abstract Syntax Trees

    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.

  • Use TypeScript to Develop Vue.js Web Applications

    TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

    Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

    This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

  • Get Started Using WebAssembly (wasm)

    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.

  • Introduction to the Python 3 Programming Language

    In Introduction to Python, we will start at the beginning: Installing python 3 and using virtual environments. With a working environment, we will learn how to manipulate strings and numbers, and gain working knowledge of data structures and flow control. We will build on that by introducing modules and classes and learn how to interact with our python applications using command line switches, console input and files.

    At the end of this course, you’ll have a great working knowledge of Python, fully capable of creating your own Python projects from scratch or jumping into an existing application with the capability to read, understand, and contribute to the application.

    Check out these community notes for this course on Github.

  • Build Algorithms using Typescript

    Algorithms are the basic construction of the computer programs that you are writing every day. They take language syntax and the machine uses that information to carry out our commands. While "everything is an algorithm!" is basically a true statement, we also have quite a bit of thought and effort put into defining formal algorithms. Understanding these formal algorithms helps you as a developer so that you won't need to re-invent the wheel every time you sit down to solve a problem.

    They also come up quite a bit as "whiteboard problems" in programming job interviews, so understanding algorithms is a big win for you as a coder.

    You will review many common algorithms using TypeScript as the language. Even if you don't prefer TypeScript, they will easily translate into JavaScript or practically any other language

  • Build Virtual Reality Experiences Using React VR

    In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. This guide covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds. Even a combination of both is possible. Each lesson is independent, but some require knowledge explained in a previous lesson.

  • Add Internationalization (i18n) to a React app using React Intl

    In this course, we will incorporate react-intl into a project created with create-react-app and react-router. The react-intl library makes complex tasks such as internationalization and formatting dates & currency incredibly simple. Another huge benefit of react-intl is that it gives you the ability to centralize the content across your application into language specific files. This creates a consistent place to find content and encourages reuse. If you’ve ever used language specific yml files in Rails, you’re already familiar with this pattern.

    Starting with the entry point of the application, we will hit the ground running by adding the necessary components and data structures required for react-intl to function. From there, we will use react-intl components to format various types of data including strings, dates, and numbers. We will also work through writing tests for components that include react-intl components using Jest and enzyme.

  • Build a Node.js REST API with LoopBack

    In this course the developer will learn how to create a LoopBack API and build it out to an API that can be used as a backend for apps. We will start by creating a basic LoopBack API project and gradually enhance it to a production ready API. The API we create defines a few models to persist the data and has custom functionality, validation and hooks added to those models.

    After our data structure is defined we will learn how to extend the functionality of LoopBack by using mixins and components. We will also lock our API down using ACL’s and create a mechanism to automatically define the admin and user roles and create our admin user.

    The last part of the course will show how how to filter the data stored in the API. We will make the API production-ready by adding unit tests, connecting it to MongoDB and we will show how to deploy the app to now.sh.

  • Build a Twelve-Factor Node.js App with Docker

    In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and learn how to setup a full software development deployment process as well as how to properly “Dockerize” the app.

    We’ll step through setting up proper version control techniques, managing configuring within the environment, setting up proper build/deploy/run processes, and all with abiding by Docker best practices. We’ll also make sure our deployment is setup for scale, and have consistent development practices in place for reliable app deployments.

  • Build a desktop application with Electron

    Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and open-source tools give you everything you need to create a compelling desktop app--native user interface elements like menus and dialogs, installers, auto-updates, and more.

    This course will teach you the core concepts of Electron so that you can leverage it to create your own desktop application for macOS and Windows.

    We'll go over:

    • Creating user interfaces in Electron (both HTML based and native)
    • Understanding Electron's multi-process architecture
    • Shipping your app to users
  • Asynchronous JavaScript with async/await

    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.

  • Up and running with Preact

    In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup our app with Webpack & Babel and how to configure these tools for use with Preact. Then we’ll move on to learning how to create components and how the Preact API mirrors that of React - highlighting the differences/additions along the way. Finally we’ll look at the interoperability with existing popular libraries in the React community such as Redux & React Router and with the popular development tools such as Redux Dev Tools & React Dev-Tools

  • Add routing to React apps using React Router v4

    React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.

    In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.

  • Maintainable CSS using TypeStyle

    Having your CSS co-located with your UI code provides the same sort of advantages in refactor ability and maintainability that React provides for the DOM using JSX. TypeStyle allows you to do that with the additional safety of TypeScript.

    In this course we will cover core CSS concepts like CSS Properties, media queries, keyframes, pseduo-states and show how they can be represented in your JavaScript code using TypeStyle.

  • Higher Order Components with Functional Patterns Using Recompose

    In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples. Using recompose looks very different from “vanilla” React; so you will also get comfortable with the look and feel of a “recomposed” component. The best part is no more need for class components! You’ll learn how to use Recompose to both modify components and also create your own higher-order components.

  • Create Graphics with HTML Canvas

    It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called Canvas that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations!

    In this course, we will learn the basics of using Canvas. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.

  • ECMAScript 2016

    ES2016 standardized only two new features: the exponentiation operator and the Array.protoype.includes method.

  • Save time avoiding common mistakes using RxJS

    Note: RxJS imports have changed since the publication of this course. Operators now must be passed into .pipe to be applied to an observable.

    In this course we will learn to identify common mistakes with RxJS that usually make code harder to read and even introduce bugs. Most of these mistakes are related to Subject, subscribe, and subscriptions. We are going to see how to use only Observables and convenient operators made for solving those mistakes, such as fromEvent, takeUntil and switchMap. By the end of this course, you will have a more immediate intuition on what patterns are simple and safe in RxJS.

  • Build a Server Rendered Vue.js App with Nuxt and Vuex

    Vue.js has a first-class ecosystem to help construct Vue.js apps. This includes Nuxt.js which enables server-rendered applications and a page-based approach.

    This course will start with an empty app and walk through how to use Vue.js for building the app, Nuxt.js for organizing the app, and Vuex for managing state.

  • Write simple asynchronous code with JavaScript generators

    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!

  • Create your own twitter bots

    In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker.

  • Understand Joins and Unions in Postgres

    You know the basics of Postgres, but most meaningful queries will require you to combine tables in novel ways to ask questions you couldn't ask with a single table alone. Joins and unions come up over and over again in interview questions -- because of how fundamental they are. This course will make you a master of your tables, and give you the power to answer questions you couldn't before.

  • Build Complex Layouts with CSS Grid Layout

    In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browsers.

    CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

    We’ll discuss all the features CSS Grid has to offer us, and how we can apply these features to real world layout-based obstacles. We’ll start with placing items on a grid by using grid-column and grid-row and progress to more complex topics such as nesting grids within grids.

  • Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

    NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript.

    In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community.

    We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal.

    Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

  • Using Postgres Window Functions

    In this course we will show you how to wield the power behind the elusive window function. Which five movies were the highest grossing each year? Who are the highest performers in each department relative to their peers? These questions ask us to partition records into subgroups and answer questions about those groups -- that’s the power of a window function.

    Many programmers will reach for their favorite scripting language to solve problems like these, but window functions allow you to answer them with the speed and efficiency of the Postgres query planner.

    Plus, with the power to further slice and dice this derivative information, there’s no limit to the questions you can answer with raw SQL.

    If you’re interested in the Postgres client that is used in this course you can download it here to check it out and follow along.

  • Get Started With PostgreSQL

    It’s amazing how much you can accomplish with a basic knowledge of SQL. In this course we’ll learn how to store lots of information (many millions of things!) and answer nearly any question we might have about that information (on the order of milliseconds!)

    We’ll learn enough to make you say you “know SQL” -- table creation, inserts, selects, updates, deletes, aggregations, indexes, joins, and constraints. Along the way we’ll model real world problems so that you can see just how powerful SQL will make you!

    If you’re interested in the Postgres client that is used in this course you can download it here to check it out and follow along.

  • Build Basic NativeScript App Templates

    In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of NativeScript layouts using XML. This course will use the app templates provided from the NativeScript framework and installed using the NativeScript CLI.

    We will cover the following layouts: StackLayout, WrapLayout, GridLayout, DockLayout, AbsoluteLayout and FlexboxLayout. Understanding the concepts and usage of UI layouts in NativeScript is key for a great app.

  • Publish JavaScript packages on npm

    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.

  • How to Use npm Scripts as Your Build Tool

    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.

  • Wrangle your terminal with tmux

    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 windows yourself, you can use tmux to create, organize, and navigate between them. Even more importantly, tmux lets you detach from and re-attach sessions, so that you can leave your terminal sessions running in the background and resume them later. This is especially useful if you're working on a remote server: you can set up a persistent session that will continue running when you close your laptop. You can even share a tmux session to facilitate pair programming.

  • Get Started with Elasticsearch

    In this course, you will learn the basics of using Elasticsearch within your application. You will learn how to store and retrieve data in Elasticsearch as well as how to leverage its powerful search features.

    You will be able to design indices, types and maps for your application to leverage the most from Elasticsearch and you will learn how to monitor the health and performance of your Elasticsearch servers to identify and resolve capacity issues before they impact your application.

    Throughout this course, we will be using the Simpsons dataset containing all of the Simpsons episodes, characters, and lines. It will be the foundation for learning to retrieve data from Elasticsearch, perform complex searches, and understand and implement best practices for storing data in Elasticsearch.

  • Ember 2 Fundamentals

    Ember is a javascript framework that provides a rich set of tools for building modern web applications. Unlike many frameworks, Ember comes with opinions and a way of doing things so you aren't left with a ton of decisions to make about problems that have already been solved very well. Ember was designed from the start to deliver a productive and comfortable experience for you, the developer.

    In this course you will learn what you need to know to get started building your own Ember we applications. From the absolute essentials like creating a new project with the Ember-CLI tools, templating, routing, and reusable components.

  • Real World React Native Animations

    In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. We'll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.

    This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.

    The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

  • Building apps with Ionic 2

    Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment.

    Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

  • Create an SVG Icon System

    In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

  • Jumpstart to Node.js

    This playlist is designed to get you up and running from no node.js experience to developing your own applications as quickly as possible.

  • Build Your First Production Quality React App

    With the variety of choice we have in building modern web applications using JavaScript, it can make it difficult to understand where to even begin. We live in a wondrous era, where every problem we have seems to have a corresponding javascript module on npm that we can install with just a few keystrokes. It’s easy!

    Often, “easy” can mean the opposite of simple. Easy is “quick to do”, where simple is “quick to understand”.

    KISS.

    In this course you will learn how to build production quality React applications. We will strive to keep things as simple as possible, with minimal dependencies. Instead of typing npm install, we will build our own simple solutions first, to get a solid understanding of the problems that we are solving through libraries. We will build our tools in a functional style, and write appropriate unit tests to verify that they work as expected.

    If you are brand new to React, you’ll want to read the documentation and watch our free React Fundamentals course.

  • Understand Angular Directives in Depth

    Angular Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components to try to "extend" behavior, Angular Directives enable you to compose behaviors on to your components. This includes adding event listeners that hook into services, manipulating templates, and adding more configuration to basic elements. This course helps you understand the concepts around building our Angular directives and provides examples from basic directives that inspect elements to advanced structural directives that completely re-write templates. If Angular is new and the syntax foreign, you will want to check out Get Started with Angular and Building Angular Components.

  • Build a React Native Todo Application

    In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.

    We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

    The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

  • Natural Language Processing in JavaScript with Natural

    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.

  • Use Grep for Fast Search from the Command Line

    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 to search recursively, get more context on your results, and some simple tricks to make your searches faster and more targeted.

    Once you're familiar with grep and find, you'll be able to quickly answer questions such as: Do I use this function anywhere other than my tests? Where does this file get imported? Whether you're working on a new feature, reading a codebase for the first time, or refactoring existing code, grep and find can help you work faster and more effectively.

  • Learn the Best and Most Useful SCSS

    Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax. SCSS borrows features from other languages to write smarter, reusable and more readable styles. This course will focus on how to use SCSS’s more useful features, compare them against each other and assess when their usage is appropriate.

  • Deploy Web Apps with Zeit Now

    Zeit’s mission statement is to ‘Make Cloud computing as easy and accessible as Mobile computing.’ To that end, they’ve released some pretty amazing and powerful tools. In this course we’re going to take a look at now, their deployment tool, to see why it’s hands-down the simplest way to launch node applications, docker containers and even static files to the cloud.

    We’ll also dig into some of now’s more advanced capabilities, including host aliasing, environment variables and integration with hosted databases.

  • Animate React Native UI Elements

    In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like timing and spring to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

  • Create Native Mobile Apps with NativeScript for Angular

    In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

    This Angular course assumes a solid understanding of the fundamentals. We have Intermediary Angular courses including topics on Dependency Injection, Components, Directives, Forms, Router, and Animating Web Apps

  • Develop Basic Web Apps with Vue.js

    Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only focused on the view layer.

    In this course, you'll gain a basic understanding on how to construct components and nested components and see how Vue reactively keeps the DOM up to date when data is changed. You should get a taste of what Vue has to offer and gain a better understanding of how you can use it for your own application development.

  • Record Badass Screencasts for egghead.io

    This is the video companion to the egghead.io Instructor Guide.

    Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

    Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.

    This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

  • Learn Advanced CSS Layout Techniques

    CSS layout is totally frustrating. You are likely to find yourself fighting CSS for hours, maybe days, on a layout problem that seems simple at first, but proves to be insanely tricky.

    In this course you will take a look at some advanced CSS techniques that will show you how to solve real problems you're likely to encounter in your applications. We will explore some of the lesser know CSS layout features, so even if you've got significant experience with CSS, you will probably learn something new that can help you in your day to day work.

    We are assuming that you have a working knowledge of CSS basics, and we will dive right into more advanced CSS layout. These techniques should have you writing more versatile future-proof stylesheets right away!

  • Build a GraphQL Server

    In this course, we take a look at a new data query language and runtime called GraphQL. GraphQL was designed and built at Facebook to help product developers request and receive the data they need for their mobile and web applications. GraphQL sits on top of your application’s data access layer, providing clients with the ability to explicitly specify their data requirements and the guarantee that this data won’t change.

    GraphQL manages these kinds of guarantees through a mixture of its Type System and Query semantics, both of which are pieces of GraphQL that we’ll look at in this series. We’ll also take a look at Mutations, and how to make our GraphQL Servers Relay-compliant using Nodes, Edges, and Connections.

  • Learn Ramda.js

    Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

  • Understand the Basics of HTTP

    In this course, we will learn the fundamentals of the Hypertext Transport Protocol (HTTP) by exploring several popular HTTP APIs such as the GitHub API. Starting with the basic structure of an HTTP request and response, we will then delve into the specifics of each element of the request/response messages. Using concrete examples from these APIs, we will cover request methods, response status codes, messages headers, and message bodies. Along the way, you'll learn about specific message headers, such as Cache-Control, and Cookie and how they control the behavior of clients/browsers and HTTP API services.

    This course uses HTTPie, if you would like to follow along with the instructor you can download the client here.

  • Build Interactive JavaScript Charts with D3 v4

    In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

  • Build an Angular Instant Search Component

    In this course, you will learn more about using observables in Angular. We are going to how we can leverage the power of observables and RxJS to build a rock solid instant search component with a handful of operators.

    You will learn operators by applying them to a real-world component. By the end of this course, you will have a clear understanding of how components can be designed around the concept of event streams which are wired together like modular building blocks.

    All of this in about 11 minutes! 😄

    This course assumes a solid understanding of fundamentals. We have Intermediary Angular courses that'll get you up to speed.

    ⚠ The code used in the course is of Angular ^2.0.0, and the code given in the transcript is of Angular 7.0.3. An updated version of the code can be found here (updated 5/8/2020). The code for each lesson resides in the respective branch on the repository.

  • Professor Frisby Introduces Composable Functional 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.

  • Build Node.js APIs with OpenAPI Spec (Swagger)

    In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

  • Build Angular 1.x Apps with Redux

    One of the hardest things about writing non-trivial applications is managing state. In our attempt to effectively manage state, we introduce additional complexity by trying to control application flow and the amount of code volume that comes from all of this. Redux gives us the ability to address state management and communication in astonishingly simple semantics that can be explained in just a couple minutes. The beauty of Redux is that it is not only a library but a pattern that works very will within Angular 1.x applications. In this series, we are going to learn how to integrate redux (the pattern) into Eggly from scratch and then introduce ng-redux and add in Redux DevTools at the end for fun.

  • Debug HTTP with Chrome DevTools Network Panel

    This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

  • Debug JavaScript in Chrome with DevTool Sources

    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.

  • Angular Dependency Injection (DI) Explained

    This course will teach you the ins and outs of dependency injection in Angular. You will learn what dependency injection means, how it applies to software in general and how it is implemented in Angular. We will take a look at simple use cases like injecting services, to exploring different providers recipes and when they are useful. We will also cover almost unknown features like viewProviders, OpaqueToken and edge cases where forwardRef() is needed.

    This Angular course assumes knowledge of some fundamentals. We have an Angular course that will Get you started

  • Animate Angular Web Applications

    Angular comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, styles, and animations. This course walks you through each of the animation features so you can start building out your own Angular animations.

    This Angular course assumes knowledge of some fundamentals. We have an Angular course that will Get you started

  • Learn the Basics of Angular Forms

    Angular makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through how to set up your forms, validation, and styling.

    This Angular course assumes knowledge of some fundamentals. We have an Angular course that will Get you started

  • Manage UI State with the Angular Router

    Angular's router comes with many features for routing based on path's and loading specific components. This course gives you an intro to how to configure your routes, navigate between them, and use services and guards when navigating to routes.

    This Angular course assumes knowledge of some fundamentals. We have an Angular course that will Get you started

  • Using Angular 2 Patterns in Angular 1.x Apps

    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 learn how to leverage ES6 in your Angular 1 applications through Babel, and fully understand the core patterns that are used in a composed modular web application.

    This course will teach you how to leverage your existing knowledge of Angular, while preparing your mind (and applications!) for the future.

    If you are interested, there is a companion guide that digs deeper into the patterns found in this course and Angular 2.

  • Create 3D Graphics in JavaScript Using WebGL

    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.

  • Manage Complex State in React Apps with MobX

    MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner. Using React and MobX is currently the simplest way to build component based web applications.

    "Half the code, twice the fun" is how people describe MobX, or "So simple, I cannot believe it just works".

  • Style an Application from Start to Finish

    Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course demonstrates the process of styling an application from start to finish.

    We will take a basic un-styled todo-list application written in React and use CSS to get the application to look like how we want. The first steps will be to apply static styles to the app based on a mock up, then we will incrementally add user interactivity as well as make the app responsive.

  • Building Angular Components

    Angular has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a new transclusion system, life cycle hooks, a renderer, and on and on. If you're familiar with Angular 1 and you're looking for Angular $scope, Angular $compile, Angular transclusion, and everything about Angular components then this course is exactly what you're looking for.

    This Angular course assumes knowledge of some fundamentals. We have an Angular course that will Get you started

  • Start Building Accessible Web Applications Today

    Accessibility (or a11y) is an important but often neglected in the world of web development. Many developers find themselves coding user interfaces without any knowledge of keyboard or screen reader requirements.

    The fact is that accessibility doesn't happen by accident. Often it is seen as too hard or time consuming. This doesn't have to be the case. By following a handful of high-value patterns and practices, we can open our web apps to humans that otherwise wouldn't be able to interact with them at all.

    This course will introduce you to accessibility through hands-on, technical examples that are way more effective than reading 10-year-old static web content.

  • Use Webpack 2 for Production JavaScript Applications

    Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular every day. It is so loaded with features that it's sometimes difficult to know what's even possible.

    In this course, Kent C. Dodds takes you through some of the most valuable features of the Webpack JavaScript module bundler. We'll learn a ton about what it takes to optimize your Webpack configuration and your application to make it as fast as it can possibly be. We'll also go over what it takes to setup and write tests with webpack, Karma, Mocha, and Chai.

    This course covers Webpack 2, but should also be relevant for Webpack 1.x.

  • Building React Applications with Idiomatic Redux

    This course will pick up where we left off with the Redux Fundamentals course. If you haven't watched that yet, you are highly encouraged to do so!

    You are about to learn practical production ready techniques for building your React and Redux applications. You will explore advanced state management, middleware, React Router integration, and other common problems you are likely to encounter while building applications for your clients and customers.

    Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.

    Click here to see the Community Notes on this course

  • Up and Running with TypeScript

    The first question you ask after installing TypeScript is "What do I do now?" In this course you'll learn about using the TypeScript compiler, configuring your project, definition files, and all the ins-and-outs of understanding how to use TypeScript in your project.

  • Use Types Effectively in TypeScript

    TypeScripts purpose, the reason it exists, is to add a solid type system on top of ECMAScript 6+. JavaScript is a dynamically typed language. TypeScript applies a fundamental change to the language and applies static typing to the code in our applications.

    This course will dive into the type system that TypeScript provides. You will gain a deeper understanding of what types can do for your applications.

  • Build Redux Style Applications with Angular, RxJS, and ngrx/store

    *Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.

    Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

    This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed!

    We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge.

  • Learn to Use VIM

    Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability to drop into a computer, open a command prompt and type vim is a simple yet powerful concept.

    In this course we will take a tour of Vim, and learn the essentials you need to know to start being productive with this powerful text editor. We will learn about basic movement through a file in Vim without a mouse, loading and saving files, commanding the Vim editor, and get started customizing Vim to suit your needs.

  • Start Using Elm to Build Web Applications

    Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

    In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

  • Getting Started with React Router v3

    React Router is the defacto router for any React application and it allows us to extract the state of our application from the browser's address bar.

    In this course we'll explore the core features of React Router in common examples. From routing with individual components to more complex routing consisting of multiple components, query-strings, route parameters, and redirects.

  • Use Higher Order Observables in RxJS Effectively

    If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables.

    In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

    Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

    If you're new to RxJS, we highly recommend the Introduction to Reactive Programming using RxJS to begin with, and then RxJS Beyond the Basics: Operators in Depth to understand operators.

    If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with Jafar Husain's excellent introduction.

  • RxJS Subjects and Multicasting Operators

    Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.

    RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

    In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

    If you are new to RxJS, or want a refresher please check out this course Introduction to Reactive Programming.

  • RxJS Beyond the Basics: Creating Observables from scratch

    There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

    In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

    Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

    If you're new to RxJS, we highly recommend this Async JS course from Jafar Husain to get a solid intro to the concepts. From there, you can watch this Introduction to Reactive Programming using RxJS, and you will be prepared for this course!

  • Advanced Logging with the JavaScript Console

    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.

  • Introduction to Node Servers with Hapi.js

    hapi is a battle-tested, full-featured, framework for building web applications and services with Node.js. With integrated support for essentials like authentication, caching and validation, and a powerful plugin system, hapi is ideal for projects and teams of any size.

    This course will introduce hapi, some of it’s plugins, and guide you through many of hapi’s core features.

  • Flexbox Fundamentals

    Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

  • Step-by-Step Async JavaScript with RxJS

    RxJS is tremendously helpful in working with asynchronous code, but you’ve probably been stuck trying to use concepts you already know from Promises or Callbacks and applying them directly to RxJS. These lessons walk you through the step-by-step of building a simple game application with many asynchronous pieces. Each lesson focuses on a single operator or idea of how RxJS helps simplify your code as well as making you code flexible enough to easily add more asynchronous pieces as your codebase grows.

  • Introduction to AngularJS Material

    Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

    In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

    presented by Thomas Burleson and Aaron Frost

  • How to Contribute to an Open Source Project on GitHub

    “Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

    So enjoy the course and start contributing to the projects you use and love today!

  • Cycle.js Fundamentals

    Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

    Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

    We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

  • Regex in Javascript

    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!

  • Reduce Data with Javascript Array#reduce

    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.

  • React Testing Cookbook

    The definition of "legacy code" can be described simply as "code that doesn't have tests." Code you just wrote, 5 minutes ago? Legacy code. Code that can't be refactored, but only changed.

    How do we prevent the mountain of legacy code that most projects become?

    A solid testing strategy.

    React apps are no different, and can be tested simply if you know some core principles.

    In this course we will take a look at testing React applications. From getting setup and running tests, all the way through testing Redux enabled React applications.

  • Creating Custom Web Elements with Polymer 2

    Polymer is a framework created at Google for building reusable web components.

    We use HTML elements every day such as div, a, button, form, and table. All HTML elements provide some sort of API of attributes, properties, methods and events that we use to manipulate them. Generally, web elements are styled in a particular way by default, and also allow us to customize their styling with CSS.

    Polymer allows you to build fully custom web elements of your own for more complex components composed of the building blocks you are used to with the standard set of HTML elements.

    This course is an introduction to Polymer, and should get you started building your own customizable web elements that you can use on their own, or even with your favorite framework like Angular or React!

  • Fundamentals of Redux Course from Dan Abramov

    In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your React application with Redux.

    State management is absolutely critical in providing users with a well-crafted experience with minimal bugs.

    It's also one of the hardest aspects of a modern front-end application to get right.

    Redux provides a solid, stable, and mature solution to managing state in your React application. Through a handful of small, useful patterns, Redux can transform your application from a total mess of confusing and scattered state, into a delightfully organized, easy to understand modern JavaScript powerhouse.

    The principles of Redux aren't new, but they are packaged and presented for you in an easy to use a library that not only elevates your applications but also improves your general understanding of building JavaScript UIs.

    In this course, Dan Abramov will show you the fundamentals of Redux, so that you can start using it to simplify your applications.

    There are some amazing community notes on this course here on Github.

  • React: Flux Architecture (ES6)

    As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared between components?

    These are the questions that Flux was built to answer.

    In this series, we will explore React Flux, using ES6 (ES2015), babel, and webpack to manage our developer workflow.

  • Get Started with Angular

    Angular is basically a collection of Components brought together within modules. The many tools, such as the Angular CLI, allow you to easily create Components. The key to understanding Angular is understanding how Components interact with each other through Services, Inputs, and Outputs. It's also essential to understand the basics of styling components and how CSS is shared so you can make your application look the way you want.

    This course will step us through creating a simple Angular application starting with the Angular CLI. We will build out a few components that will handle events through Angular Event handlers. The course will then finish up with styling the application.

  • Learn how to use Immutable.js

    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.

  • Understand JavaScript Arrays

    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.

  • Array Goodness

    Get to know Javascript's Array. Learn to harness it. Learn to embrace it. Learn to love it.

  • Introduction to Reactive Programming

    Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.

    Reactive

    You've probably been hearing this word recently, and it's referring to the Reactive Programming paradigm. One of the biggest challenges people face when learning Reactive Programming is changing their way of thinking, and in this course, you are going to exercise your mind and learn to let go of that imperative and stateful mindset.

    You will also learn how can practically apply these Reactive concepts using the RxJS library!

    If you are brand new to reactive programming, the course Asynchronous Programming: The End of The Loop, will get you up to speed. 📚

  • How to Write an Open Source JavaScript Library

    Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

    From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

    This series will guide you through a set of steps to publish a JavaScript open source library.

    You might also enjoy this article about contributing to open source.

  • Getting Started with Express.js

    Express is a minimal web server built on Node.js that provides essential functionality for delivering web applications to the browser and mobile devices. This series will guide you through the first steps of using Express for building your own applications.

  • Ionic Quickstart for Windows and Mac

    Welcome to the Ionic Quickstart series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

  • Learn the Fundamentals of Node.js for Beginners

    Understanding Node.js can have a significant positive impact on your career as a Javascript developer. Knowing how it works, how it scales, and how to interact with it can save you time, headaches and delays going to production which can put you well ahead of your competition. Understanding node.js can help you architect applications that are built to work with node's features and capabilities.

    Key Goals:

    • Understand the built-in features of node and how they operate
    • Learn to architect applications in such a way that allows your app to scale
    • Leverage tools and packages created by others to rapidly grow your applications features and capabilities
    • Comprehend nodes’ built-in modules for communication and how to use those to extend your application interface
    • Use debugging tools to identify and resolve errors in your code Implement best-practice TDD and BDD principles to ensure your code is scalable, maintainable, and reproducible
  • React Native Fundamentals

    If you're a web developer who has been itching to get into native development, now is your chance. In this series we'll be talking all about React Native. React Native allows you to build native iOS and Android applications in JavaScript and React.js.

    Regardless of your experience with React, or even with iOS development, my hope is that this series will be beneficial to everyone who is starting out with React Native. We'll jump straight into developing with React Native by looking first at the ecosystem of building React Native apps - including Xcode, the iPhone simulator, live reload, debugging, and more.

    Once we get our ecosystem set up and our hello world example running using ES5, we'll jump straight into building a fully functioning iPhone app which utilizes many of the best parts of developing with React Native all while covering React.js and refactor to ES6 along the way.

  • AngularJS and Webpack for Modular Applications

    How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

  • Angular Automation with Gulp

    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!

  • Asynchronous Programming: The End of The Loop

    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.

  • AngularJS Application Architecture

    One challenge when learning AngularJS is that most examples are trivial. It is difficult to find materials on learning "real-world" patterns and practices.

    The joy of Angular is that you are free to build an application in any form that you wish. MCV, MVVM, MVP, MVwhatever... You get to decide! Freedom is wonderful.

    "But what if I choose poorly?"

    Good question.

    This series will demonstrate how to organize and tool your AngularJS application for real work. It's an opinion. A way that has worked on our own projects. Use it as a guide for building the solution that best suits the needs of your projects. All projects are different, but with the right set of modular tools you can build a foundation for success.

    Building on the previous series, we are going to refactor Eggly to be modular and scalable. By introducing modules and sub-modules, domain models and state management with ui-router, we will start to establish best practices on how an AngularJS application should not only function, but fit together.

    Be sure to check out Part 1: AngularJS App From Scratch: Getting Started

  • AngularJS Authentication with JWT

    JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

    In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

    By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

  • AngularJS Fundamentals

    AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of these amazing features actually fit together. In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons.

    As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects. The videos series is broken out into three series so that you can start at whatever level is most appropriate for you.

    Getting Started

    In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running. We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers. When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category.

    Don't miss Part 2: Application Architecture!

  • AngularJS Data Modeling

    Data is the bedrock of any application, including your AngularJS project. This series will dive deep into data models, and how to effectively use them in your applications.

    AngularJS's solution out of the box is $resource, but this service isn't always the best solution. Many times we need a custom model layer that serves the needs of our application. This series explores building a $resource alternative from scratch using TDD.

    It's intended for intermediate-advanced AngularJS developers that want to dig a little deeper to lower level abstractions for core systems in their applications.

  • Start Learning React

    Note: This is recorded with an older version of React and many things have changed. The core concepts are still accurate, but there are some technical differences you’ll need to work through.

    React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focuses on the "V" in your MVC applications, and touts a blazing fast virtual DOM diff implementation.

    This series will explore the basic fundamentals of React to get you started.

    When you've finished with this series, be sure to check out React: Flux Architecture (ES6) for real-world React application development.