Learn Discord, Nuxt and Storybook

Beginner’s Guide to Storybook 7 with React

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

A Beginner’s Guide to Storybook 7 with React

We can use the Discord API to build bots, integrations, and extensions for the platform.

discord

Build a Book Club Bot with Discord.js

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own `app.vue` layout in a `layouts` directory. Then you simply surround your content (the `<nuxt>` instance) with your navigation and/or layout and you're ready to go.

Create Vue.js Layout and Navigation with Nuxt.js

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the `nuxt.config.js` and the passing the named route to a `router-link`.

Configure Named Routes in Vue.js and Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

Build Vue.js Apps with the Vue-CLI and Nuxt.js

Sometimes the `pages/` directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Nuxt.js allows you to return a `Promise` from your `data` function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

Preload Data using Promises with Vue.js and Nuxt.js

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

Load Data from URL Params in Vue.js and Nuxt.js

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Deploying a Nuxt Site to AWS from a Git repository with Amplify hosting

In this lesson, you'll learn how to create and configure a Discord bot.

You will see how to create the bot, select the options you will need, give it the correct amount of permissions, and add it to your server.

Here is the link to the Discord Developer Portal: [https://discord.com/developers/applications](https://discord.com/developers/applications)

Create and Configure a Bot using the Discord Developer Portal

Now that we've set up a bot on our Discord server, let's write some code to get it do some fun stuff.

We're going to set up a new project and use the `Discord.js` library. While setting up this project you'll learn how to properly configure the client and log in to your bot by passing a Discord API token to `client.login`.

Once the project is set up we'll send our first event using the `client.once` and event, and set up some scripts so that we can start the bot using yarn.

Throughout the lesson, you will be introduced to important concepts and best practices for building Discord bots. By the end of the lesson, you will have a basic understanding of how to create a simple bot and be ready to continue building

Send your first Discord.js Bot Event 

Using the Discord.js library, we're going to send our first message command! 

Let's create a classic "hello world" message command and learn how to create a new client instance, enable the necessary gateway intents, listen for specific events, and respond to those events by accessing a "message object" and then sending a message back.

Create your first Discord.js Bot Message Command

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

In this lesson, you will be setting up the necessary files for your first Discord.js slash command. The goal of this lesson is to give you a solid foundation to build upon as you create your own custom commands for Discord.

We will be importing and using `fs` and `path` to read from the command and events directories, using `Collection` from Discord to store and retrieve your commands, and creating the `Client` using the `GatewayIntentBits. 

Also, we are going to deploy your commands and set up events to execute them properly once they're written.

Setup for Discord.js Slash Commands

Now that our files are set up, we can now write our first Discord.js slash command.

By create custom commands, we extend the functionality of our Discord bot and can make it much more fun and interesting. 

We'll start by creating a new file in the commands folder, importing the slash command builder, and defining the data and execute sections of the command. We'll then register the command and test it in the Discord application.

By the end of this lesson, you'll have a solid understanding of how to create custom slash commands in Discord.js. So get ready to dive in and start building!

Create Your First Discord.js Slash Command

In this lesson, you will learn how to build custom commands that can receive user input.

As a Discord user, you may have noticed that many servers use custom commands to provide information, moderate the chat, or enhance the overall user experience. By learning how to build these custom commands, you'll be able to create a more interactive and dynamic Discord server for your community!

We'll start by introducing the basics of slash commands and how they can be used in a Discord app. You'll then learn how to create a simple command that sends a response back to the user who triggered the command. 

We'll also cover how to make your commands more dynamic by adding arguments.

By the end of the lesson, you'll understand how to receive and respond to input from users and be able to build more sophisticated bots that can interact with your users in meaningful ways.

Receive and Respond to Input From Users with Discord.js Slash Commands

Let's convert our Discord bot to respond with embedded messages.

Embedded messages in Discord are a great way to make your bot's responses look a lot more visually appealing!

We'll create a new command called `/bookclub` that will take in a book title, an author, and the number of hours until the submission deadline from the user. Then, it will `reply` with an object that Discord will automatically convert into an embedded message.

Have a Discord Bot Respond with Embedded Messages

In this lesson, you will be learning how to display relative time in a Discord embedded message using the Unix timestamp. 

We'll be adding a countdown timer to an embedded message to show the time remaining until submissions to a book-club close.

By the end of this lesson, you will have the ability to convert hours into seconds, add it to the current time in the Unix timestamp, and create a variable to store the wait time in seconds to display the short date time and relative time in Discord.

Display Relative Time in a Discord Embedded Message

In this lesson, you will learn how to create custom buttons in Discord.js using `ActionRowBuilder` and `ButtonBuilder`. You will also learn how to style and add text to the button using `ButtonStyle` and the `setEmoji` method.

We'll need to make these buttons for our book-club message to give users the ability to let us know that they want to be a part of the club. 

`ActionRowBuilder` and `ButtonBuilder` are important, here's what they do:

`ActionRowBuilder` is used to create a row of buttons or other action components in a Discord message. This class provides methods for adding buttons, text, and other components to the row, as well as methods for formatting the row.

`ButtonBuilder` is used to create individual buttons within the `ActionRowBuilder`. This class provides methods for setting the text, emoji, style, and other properties of the button.

By using them both, we are able to create a row of buttons exactly how we want them to look!

Create Custom Discord Buttons with ActionRowBuilder and ButtonBuilder

Let's now learn how to create dynamic channels and roles with our Discord bot.

We want to be able to create new roles and channels for the book clubs and their attendants that we create in our server.

We'll be using methods from the `interaction` object to create the role and channel. And, we'll make sure to create both the role and channel each with the correct permissions.

Create Dynamic Channels and Roles with a Discord Bot

Now, let's learn how to add roles to users in a Discord server using a Discord.js collector.

By the end of this lesson, you will be able to create a collector to gather users who click on a specific button, filter out users who do not have a certain role, and add a specific role to the users who meet the filter criteria.

Add Roles to Users using a Discord.js Collector

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results