Courses on egghead

  • Build Static Pages Dynamically using Next.js and the Notion API

    Build Static Pages Dynamically using Next.js and the Notion API

    Jon Meyers57× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Notion is a note taking application that empowers super productive workflows, without compromising on beautiful UI or intuitive UX. Next.js is a React framework that sprinkles in server-side logic in the places it is needed. This allows each page to be dynamically rendered by the client, rendered by the server or entirely static and rendered at build-time. This makes it an incredibly flexible option that can start off as simple as create-react-app and incrementally introduce complexity as the application evolves.

    In this course, you will learn how to pre-render static pages with data from the Notion API. We will cover querying page, block and database data, as well as updating properties with mutations, and some helpful techniques for transforming raw responses into convenient data structures for our React components. Using Incremental Static Regeneration (ISR), we will learn about dynamically creating static pages any time new data is available in Notion.

    We will be building two example applications - a recipe app and a movie picker. The data for these applications will live in Notion, and be queried by Next.js at build time. This allows us to use Notion for its delightful authoring experience, and Next.js to make this data publicly available via super performant static pages.

  • Build a Modern User Interface with Chakra UI

    Build a Modern User Interface with Chakra UI

    Lazar Nikolov94× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    After completing this course, you will be able to build well-designed user interfaces without spending a lot of time (if even) styling every component and element. You will drastically simplify your front-end work and learn to modify and build on top of existing design systems.

    Chakra UI is a React components library with built-in accessibility. It comes with a modern-looking design system that's easily extendable and configurable. The simple styling API significantly reduces development time, so developers can quickly prototype their ideas and achieve the desired style and "brand" by editing a single file.

    The result of using Chakra UI is a well-designed app that's accessible out-of-the-box, achieved with minimal effort and time.

    In this course, you'll learn how to build a checkout UI.

    checkout UI

    In the first phase of the course, you will learn all about the built-in components. Then we will override the theme, add custom fonts and colors, and make our UI unique.

    This course provides all the design files to follow along. You can download them here.

  • Building an Customisable Animated Skeleton Loader in React Native

    Building an Customisable Animated Skeleton Loader in React Native

    Kadi Kraman7× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading.

    In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.

    Linear Gradient Expo | Pure React Native

    Masked View Expo | Pure React Native

    Reanimated 2 Expo | Pure React Native

    This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).

    The finished code for the skeleton loader (last 2 lessons) is available on Expo Snack.

  • Build a Backend with Prisma in a TypeScript Node Project

    Build a Backend with Prisma in a TypeScript Node Project

    Ryan Chenkie114× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Prisma is an open-source ORM. It consists of the following parts:

    • Prisma Client: Auto-generated and type-safe query builder
    • Prisma Migrate: Migration system
    • Prisma Studio: GUI to view and edit data in your database

    Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API, a gRPC API, or anything else that needs a database.

    In this course, you will learn how to initialize Prisma in a TypeScript Node project, use Prisma Client to create and find records, use Express to create data dynamically, and more!

  • Confidently Testing Redux Applications with Jest & TypeScript

    Best practices for building & testing redux applications have changed dramatically over time. This course aims to be a comprehensive and up-to-date resource for those seeking to confidently test their redux apps. Whether you're just getting started or want to improve on your existing testing strategy, there will be something in this course for you.

    This first few lessons of this course look at how to add jest to an existing react/redux application that was built on top of vite. We cover basic functionality like using npm test vs npx jest and generating and using code coverage to inform our testing strategy.

    The next 10 or so lessons cover the specifics of unit testing the redux code in our application. We'll go over how to test reducers, selectors and thunks. As part of this we'll touch on mocking APIs and using Redux Mock Store as well as running actions through our applications' actual reducers to broaden our test coverage.

    In the final part of this course we'll look at how we can test our redux connected react components using the various utilities that come with the React Testing Library. We'll cover simulating various kinds of user input with the User Event Module, populating our redux store with test data, using jest spies, how to wait for asynchronous tasks to complete, and several approaches for finding & asserting that visual elements exist on the page.

    This course is built on top of content that was created for the Modern Redux with RTK and TypeScript course and I highly recommend you start there if you haven't completed it already. It does expect a basic familiarity with react, redux and jest. TypeScript is used in these lessons, but is not a major focus and hopefully won't distract you too much if you prefer plain JavaScript.

    No matter your experience level with redux and testing react applications, I'm confident your abilities will level up as you watch this course and follow along with the examples.

    Thank you!

  • Modern Redux with Redux Toolkit (RTK) and TypeScript

    Modern Redux with Redux Toolkit (RTK) and TypeScript

    Jamund Ferguson101× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course we take a basic shopping cart application built with React and fully power it with Redux and RTK using TypeScript. For those of you familiar with Redux Hooks, we use those here, but the emphasis is more on how the Redux Toolkit simplifies the process of setting up your redux application including building slices, reducers, selectors and thunks. Everything we do in the course is typed with TypeScript to make your application development process as smooth and powerful as possible.

  • Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

    Supabase is an open-source tool for rapidly building application backends with real-time data and authentication. In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using PostgreSQL and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.

    The chat app will have different "channels," which will be powered by data inside of Supabase. Users can visit these channels and write messages, which will be sent in real-time to other current users of the platform.

    After this course, you will be able to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase, such as authentication, instant APIs, and real-time subscriptions.

  • Web Frameworks in 60 Seconds

    Web Frameworks in 60 Seconds

    Rodrigo Pombo19× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Learn web frameworks fast. Each lesson is a 60-second mini tutorial of a different web framework. If you like concise videos, this course is for you.

    With each framework that we tour, you will learn:

    • How to write components
    • How to pass data to components
    • Pass data into components
    • How to handle user interactions such as clicks
    • Trigger custom events like passing data up components
  • Manage Application State with Jotai Atoms

    Manage Application State with Jotai Atoms

    Daishi Kato55× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    jotai is a primitive and flexible state management solution for React.

    jotai gives you a minimalistic API that you can use that separates your state management from your UI. You get the benefits of well manages state AND you don't have to set up any boilerplate like defining actions, reducers, dispatchers, or stores.

    You create an atom and you're off to the races managing your application state.

    In this course, you'll build an SVG drawing application. You'll see how you can represent the canvas as state through atoms and add svg path, change the path colors, delete, and even undo actions. You'll sum up your learning by learning how jotai can isolate state in your applications by using and composing Providers.

    You'll be able to use the concepts you learn here to manage any state in your own application.

  • Develop Custom Twitch Scenes and Setup in OBS

    Develop Custom Twitch Scenes and Setup in OBS

    Stephanie Eckles4× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

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

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

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

  • Add Github Login to Your Web App with OAuth 2.0

    Add Github Login to Your Web App with OAuth 2.0

    Christian Nwamba81× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

    There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access.

    This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

    We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

    LIVE EVENT: Register here for a live webinar with Christian on OAuth. Bring any questions you have from taking this course!

  • The Beginner's Guide to Vue 3

    The Beginner's Guide to Vue 3

    Kevin Cunningham67× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Vue is a progressive framework for building UIs that allows you to incrementally integrate the technology into any existing project that you're working on. This makes it a great tool for you to learn as you can bring it anywhere.

    This course is for learners just starting out in web development as well as for those who want to get up to speed on Vue 3 as fast as possible. You'll learn all the foundational skills of web development and how they are presented in Vue.

    We will start with an HTML, CSS, and JavaScript file as to not distract you with any possible tooling that goes on top of the building websites with Vue.

    You will incrementally build an app that sells comedy event tickets. In the end, you'll see how to deploy the application with Netlify Drag and Drop.

  • Build a Serverless API with Cloudflare Workers

    Build a Serverless API with Cloudflare Workers

    Kristian Freeman88× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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.

  • Your Ultimate Guide to Understanding DOM Events

    Your Ultimate Guide to Understanding DOM Events

    Alex Reardon59× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

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

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

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

  • Deploy Ghost to AWS using RDS and EC2

    Deploy Ghost to AWS using RDS and EC2

    Sam Julien43× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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!

  • Advanced TypeScript Fundamentals

    Advanced TypeScript Fundamentals

    Marius Schulz213× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Using TypeScript in your project has never been easier than it is today. The TypeScript team has continually added features to allow you to reap the benefits of static typing while reducing the overhead to get there.

    This course will teach you these new language features TypeScript has to offer. You'll use optional chaining, handle undefined behavior with the unknown type and assertion functions, create private classes, handle tuple (and other data types) types, as well as learn about conditional types.

    You'll also learn how to prevent type widening with TypeScript's new const assertions and efficiently type string literals through the use of template literals.

    All of these skills will be brought together into examples that Marius will show you how to apply these new TypeScript features to real-world problems.

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

    Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

    Will Mendes28× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Modernizing a Legacy Redux Application with React Hooks

    Jamund Ferguson32× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Creating a Digital Garden CLI with Rust

    Chris Biscardi34× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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!

  • ES6 and Beyond

    ES6 and Beyond

    Laurie Barth6× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    A series of lessons to help you get more familiar with modern JavaScript syntax.

  • Create forms in Svelte with Svelte Forms Lib

    Create forms in Svelte with Svelte Forms Lib

    Andrew Smith38× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Accessible Cross-Browser CSS Form Styling

    Stephanie Eckles29× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Build a Developer Blog with Gatsby

    Laurie Barth123× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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.

  • Efficient Javascript Array Manipulation

    Efficient Javascript Array Manipulation

    Matías Hernández15× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

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

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

  • Apply Redux to a Modern React Hooks Application

    Apply Redux to a Modern React Hooks Application

    Jamund Ferguson329× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Create Contextual Video Analysis App with NextJS and Symbl.ai

    Vladimir Novick57× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Get Started with the AWS Amplify Admin UI

    Ali Spittel101× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Introduction to Cloudflare Workers

    Kristian Freeman143× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Build Modern Layouts with CSS Grid

    Hiroko Nishimura352× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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.

  • Basics of Chrome's Performance Devtools

    Basics of Chrome's Performance Devtools

    Pavithra Kodmad32× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

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

  • Upgrade your note taking workflow with VS Code and Dendron

    Upgrade your note taking workflow with VS Code and Dendron

    Ian Jones30× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

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

    Jason Lengstorf59× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Creating Buttons in React Native with Three Levels of Customization

    Kadi Kraman28× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Create an eCommerce Store with Next.js and Stripe Checkout

    Colby Fayock171× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Containerize Full-Stack JavaScript Applications with Docker

    Joel Lord71× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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 as a Headless Content Management System (CMS) and GraphQL API

    Kevin Cunningham89× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    React Real-Time Messaging with GraphQL using urql and OneGraph

    Ian Jones26× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

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

    Kyle Gill26× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    React State Management in 2021

    Joel Hooks17× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Scale React Development with Nx

    Juri Strumpflohner173× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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 Components with React Hooks

    Build Advanced Components with React Hooks

    Matías Hernández118× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

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

    In this course, 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 uses 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

    Implementing a Word Game with Patterns and React

    John Lindquist20× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Building Live Search Box

    John Lindquist35× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Bringing the Pattern into React

    John Lindquist38× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Use a Completion Pattern to enable Repetition and Sequencing

    John Lindquist42× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Use the Callback and Closure Pattern to Build Advanced Async Behaviors

    John Lindquist99× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Establish Callback and Closure patterns Around Async Browser Behaviors

    John Lindquist189× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Introduction to Callbacks, Broadcasters, and Listeners

    John Lindquist396× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Create, Manage, and Test API Requests with Postman

    Colby Fayock26× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Shruti Kapoor50× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Build An Eleventy (11ty) Site From Scratch

    Stephanie Eckles134× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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

    Getting Started with Blitz.js

    Khaled Garbaya108× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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