Courses on egghead

  • RTK Query Basics: Query Endpoints, Data Flow and TypeScript

    RTK Query Basics: Query Endpoints, Data Flow and TypeScript

    Lenz Weber-Tronic2× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Almost every React application needs to fetch data from a server and cache the result between renders.

    Traditionally, in-memory API Caching is something that has been done in React applications either on a per-component-level, which lead to application state running out of sync, or using a global state like Redux, which required a lot of hand-written code.

    RTK Query is part of the official Redux Toolkit and provides an application-global API cache that abstracts most of that hand-written code away, leading to a lot more readable code bases.

    It also offers a lot of advanced features like auto-generated hooks

    In this course, you will learn about

    • Using createApi to define multiple endpoints to interact with your API
    • The auto generated useQuery hooks and how to use them in your application
    • The RTK Query Dataflow and the role of the baseQuery function
    • The Redux Devtools “RTK Query” Monitor and which actions are flowing though your app
    • How to use RTK Query either with an ApiProvider or a pre-existing Redux store
    • Using RTK Query with TypeScript
  • Javascript Internationalization Object

    Javascript Internationalization Object

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

    Personalizing the user experience is becoming more critical every day, even more so if your application or content is consumed by users in different parts of the world who most likely use other languages, date formats, currency, etc.

    There are multiple solutions to make your content adapt to the location or language of your users. Still, many of these methods have become outdated, complex, or dependent on a particular framework.

    Javascript also offers an internationalization solution, the Intl object.

  • Migrate a Monorepo from NPM Workspaces to Turborepo

    Migrate a Monorepo from NPM Workspaces to Turborepo

    Alejandro Ñáñez30× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Monorepos are an amazing way to collaborate on a multitude of projects with other team members. The ability to share code seamlessly between projects and have a single source of truth is paramount when working on projects with multiple moving wheels.

    One of the tradeoffs of a Monorepo is all of the management you have to do to make your projects run flawlessly and simultaneously. Each project has it’s own linting, building, testing, and deploying that it runs whenever code in that project changes.

    This becomes a real problem when each of your projects lints, builds, tests, and deploys on every PR into your monorepo. You might be fine with a handful of projects but as your applications scale and you accrue more projects, you will need a way to scale.

    Turborepo is the tool that solves your monorepo’s needs.

    Turborepo is a task runner for Monorepos. Turborepo caches the results of your CI tasks, schedules those tasks to run at maximum speed, and only runs tasks on the affected code in your PRs. And because of remote caching, your coworkers, wherever they are, will have the most up-to-date code possible.

    One of the greatest things about it is that it's easy to use and can be incrementally adopted. Turborepo is a thin layer on top of your Monorepo.

    Turborepo doesn't get in the way as it is only a task runner. You don't have to modify your application code or anything to make it work.

    You’ll learn about

    • How to set up caching for both local and remote
    • CLI-commands and how they enhance your Monorepo
    • Parallel execution of your tasks

    So hop in and learn about Turborepo today!

    Prerequisite: This course is a continuation of Introduction to Monorepos with NPM Workspaces. To get the most out of this course, watch Monorepos with NPM Workspaces first.

  • Build High-Speed Monorepos with Nx and pnpm Workspaces

    Build High-Speed Monorepos with Nx and pnpm Workspaces

    Juri Strumpflohner51× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In a monorepo, all of your apps and packages reside in a single repo. Structuring your code this way has many organizational benefits. You can more easily manage your dependencies, and you can maintain more consistency across your various apps.

    But, if you attempted to do this with just yarn or pnpm alone, you'll quickly start running into productivity issues. Your build times will be very long, and you'll have to make sure to run builds for any internal packages an app is depending on.

    That's where Nx comes in.

    Combining the speed of pnpm with the efficiency of Nx gives you an amazingly performant monorepo setup.

    Nx builds a graph of your workspace and all of the connected dependencies. If there is a change anywhere, Nx will know about it and everything that is affected by it.

    Which means that Nx is able to use caching to prevent unnecessary builds when nothing has changed. Nx's caching features enable blazing fast <10ms build times 🔥

    You get to have all the advantages of the monorepo with none of the performance issues!

    So start watching this course and learn how to achieve these speeds today.

  • Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

    Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

    Jon Meyers52× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    The “Edge” is where you write and store your code where your data is being produced. This allows for a quick and efficient data transfer, eliminating or severely reducing lag.

    Supabase is a suite of open-source tools wrapping a PostgreSQL database. It provides the building blocks of an app - database hosting, auth, file storage, real-time, and edge functions - so we can focus on what makes our app unique.

    Cloudflare Workers are serverless functions that run at the Edge! In this course, we will use the Wrangler CLI tool for interfacing with your Cloudflare account and creating or publishing your Workers.

    KV Storage is a cache that Cloudflare makes available to our Workers. It replicates across multiple CDN nodes, making it super performant to cache data.

    Combined, these three things give you the benefits of that reduced lag in a smooth and streamlined process.

    Throughout this course, Jon will teach you how to create a small blog that hits the key points of how to:

    • Query Supabase from Cloudflare Workers
    • Read and write KV Storage cache from Cloudflare Worker
    • Cache Supabase response at the Edge with KV storage

    And more!

  • Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

    Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

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

    Web3 is a paradigm shift in how applications are interacted with, ran, and built.

    It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

    A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).

    This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

    A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

    Building this type of smart contract is exactly what Matías is going to show you how to do right now.

    Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

    The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

    While you build this application you will learn how to:

    • Write a smart contract using Solidity language
    • Test the smart contract using just JavaScript through the waffle framework
    • Communicate and interact with the smart contract using ethers.js in a SvelteKit application
    • Deploy your smart contract to make it public and accessible to anyone
  • Introduction to Smart Contracts with Ethereum and Solidity

    Introduction to Smart Contracts with Ethereum and Solidity

    Noah Hein25× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Smart Contracts are programs stored on the blockchain that run when certain conditions are fulfilled.

    These Smart Contracts have many benefits to them such as speed, transparency, and security. The contract is immediately run as soon as the requirements are fulfilled. This creates a system where you place trust in a transparent system, instead of an opaque intermediary.

    Noah will show you how to write, test, and deploy smart contracts on Ethereum, using the popular smart contract language, Solidity. You'll also learn how to use Foundry, a popular dev-toolbelt, to streamline our whole development process.

    Throughout this course, you'll learn how to:

    • safely and securely set up Smart Contracts
    • write and read data on your Smart Contract
    • send transactions with specific arguments to your Smart Contract
    • deploy your Smart Contract using Forge and QuickNode

    And more!

  • Write, Test and Debug Vue 3 Components in the Browser Using Cypress

    Write, Test and Debug Vue 3 Components in the Browser Using Cypress

    Filip Hric6× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Approaching testing at a component level has definitely its benefits. Seeing your component rendered in isolation, and making sure it behaves correctly with different properties is definitely faster that trying to interact with an app at end-to-end level. On the other hand, seeing your app render in a browser in an end-to-end test is a significant advantage.

    With Cypress’ component testing you can now take the best of both worlds. Render component and interact with it in a real browser. You can pass different properties, spy on its function calls, click and type into them or even intercept its network calls. All this with a minimal setup and vast options.

    What you'll learn

    • setup component testing in Cypress
    • customize component mounting properties
    • render a component in a browser
    • examine a component with different passed properties
    • make asserrtions on component’s emitted events
    • render a component with content passed into its <slot />
    • catch edge cases by calling actions and passing values into Pinia’s state
    • handle router and it’s effect component behavior
  • Full-Stack Serverless Applications with Next.js & Fauna

    Full-Stack Serverless Applications with Next.js & Fauna

    Shadid Haque26× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time.

    On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support.

    Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

    In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna.

    You will learn,

    • How to work with Apollo GraphQL Client in Next.js
    • How to setup Fauna GraphQL
    • Data modeling in Fauna
    • How to write custom Fauna GraphQL Resolvers (UDFs)
    • How to authenticate with Auth0?
    • Stripe payment
  • Up and Running with Remix

    Up and Running with Remix

    Kent C. Dodds193× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    What is Remix?

    Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds.

    -- <cite>remix.run</cite>

    But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better.

    And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more!

    If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read!

  • Create A Bar Chart with React and D3

    Create A Bar Chart with React and D3

    Andy Van Slaars32× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.

    D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.

    When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.

    In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

  • Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

    Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

    Colby Fayock31× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

  • Use Playwright to Test and Automate Web Applications

    Use Playwright to Test and Automate Web Applications

    Basarat Ali Syed73× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course we demonstrate how to get started with Microsoft Playwright. We follow this up with various features of Playwright that make it extremely easy for you to test and automate modern web applications.

  • Complex State Management in React with Jotai and XState

    Complex State Management in React with Jotai and XState

    Daishi Kato26× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Jotai's state management is primitive and flexible. This gives you room to build, compose, and share state throughout your application exactly how you need it.

    This flexibility can become hard to manage when you have complex requirements that span across a number of states your application can be in.

    Jotai lets you leverage other state management solutions through integrations so that you can solve the problem you're facing exactly how you need to.

    One of those integrations is XState. XState gives you a safe abstraction to enumerate and handle the complex states your application can be in.

    With Jotai + XState, you get the flexibility and ease of use of Jotai with the power of XState.

    XState is a sophisticated library to provide a better and safer abstraction for state management.

  • Refactor a React Application to TypeScript

    Refactor a React Application to TypeScript

    Chance Strickland125× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Intro

    TypeScript has been growing in popularity among companies who build their products with React, and for good reason!

    Types play nicely when working with components, and lead to a super smooth developer experience.

    But what if your application is already being shipped and continuously deployed? It doesn't mean you can't take advantage of everything TypeScript has to offer.

    Refactoring an application to TypeScript doesn't have to be daunting. Follow Chance's lead, and you'll be well on your way!

    The course starts with an overview of some of Chance's favorite tools and their TypeScript-specific settings. These tools will help you search your project's TypeScript paths for auto-importing, a shorthand tool for writing JSX and TypeScript to speed up your writing, and a tool for helping you to maintain your code to a high quality.

    The tools are Emmet, ESLint, Prettier, and a variety of VSCode extensions. There's even some rollup and Babel thrown in for transpiling and compiling our TypeScript to make configuration and build setup a breeze.

    The Project

    https://res.cloudinary.com/dg3gyk0gu/video/upload/e_loop/q_100/v1639426695/course-resources/refactor-react-components-to-typescript-c70bffa0/landing-page-gif.gif

    Once the tooling is in place, Chance works through converting a completely functional Windows 98-style Minesweeper game away from JS React into one that takes advantage of the power of TypeScript. It'll be clear how changing the JS to TS will not affect the functionality of the game at all but improves the safety of your app.

    Topics in the second half of the course include component refactoring as well as adding types to React Hooks, useReducer, and Context. You'll even see how to add types to a legacy Class component!

    Chance has several years of experience working with component libraries and this is your opportunity to learn from his experience and apply his process to your own.

    Gain these Skills

    Chance will give you the knowledge of how to incorporate TypeScript into any React application, whether it's shipped and continuously deployed or not. You'll take the practices and tools that you learn here to be much more productive in your TypeScript, wherever you use it. Lastly, He will give you the knowledge of when you see React Types vs your own custom types.

    Prerequisites

    This is not an introduction to React or TypeScript course. You will need to have a basic understanding of the two to be able to follow along. If you don't have that basic understanding, or just want a refresher on the subjects, The Beginner's Guide to React and Up and Running with TypeScript are the best two places to start.

    What's Next?

    The Beginner's Guide to React is the best place to go if you are just starting out in React. This course by Kent C. Dodds covers all the basics to get you up and running with React.

    Advanced TypeScript Fundamentals by Marius Schulz will take you beyond the basics to teach you some new language features TypeScript has to offer courtesy of the wonderful team over ta TypeScript.

    TypeScript: Tips and Tricks by Kamran Ahmed is where to go once you've started using TypeScript but looking for that little something to take it to the next level.

  • Use GraphQL Data Loaders to Prevent Scaling Issues by Batching & Caching Database Requests

    Most developers would raise an eyebrow if they saw database queries being done in a for-loop, but GraphQL provides just enough abstraction that it isn't always intuitive exactly how many times each resolver fires at scale, nor is it obvious how to batch operations efficiently and still return the correct results to the correct consumer.

    You'll learn how to use the GraphQL Data Loader pattern to improve the performance of your application, and solve scaling issues before they become a problem.

    To do this, we'll first implement our own naive version of the pattern to understand why the API is shaped how it is. Then we will switch over to the official DataLoader package and explore the benefits further.

    Skills you'll Gain

    • Implement a cache layer to optimize your requests
    • Batch requests so your Database isn't overloaded
    • Build a performant GraphQL API
  • Transform Local Functions Into Endpoints With Serverless

    Transform Local Functions Into Endpoints With Serverless

    Lukas Ruebbelke24× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Front-end web architecture has made exciting advances in recent years. But before we get to that we need to have a discussion on what has led us to this point and the driving principles behind it.

    Since JQuery, we've progressively been decoupling our logic from the DOM. After JQuery, frameworks like Angular were able to abstract that logic into controllers and services. Then Redux came along and brought a simplified that let us reorganize our logic into more cohesive units.

    We should be taking advantage of improved decoupling in the modern web. If you can write a function you can write an endpoint. And if you understand frontend architecture principles, then you already understand cloud architecture principles.

    In this course, you will learn how to decouple JavaScript functions from the environment they live in. By using the Serverless framework and AWS, you will see how straightforward it is to create an endpoint.

    So check out this course and start lifting your functions into the cloud today!

  • Script Kit Showcase for Optimizing Your Everyday Workflows

    Script Kit Showcase for Optimizing Your Everyday Workflows

    John Lindquist89× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Scripting can save you a ton of time by automating your daily workflows.

    But it's hard to justify the time investment of learning Bash to write your scripts.

    Bash is the great barrier we all face when trying to script away our daily tasks. There are some common problems that we run into when dealing with it. Like what if we want to display images? Or share our script with other devs cross platform?

    You know what you want your script to do. You know you could figure it out if you had the time. But it's all just too darn much.

    What if you could write your scripts in JavaScript, launch a GUI, and were actually easy to share with your team? audible gasp

    Script Kit is the tool that’s been missing from your developer toolbox for so, so long. 🛠

    word-api.gif

    Download the new hotness here: https://scriptkit.com 🔥

    We even use Script Kit internally at egghead.io to manage our lesson transcripts! With a single script, we query an API to list the transcripts, modify them as necessary, then post the changes.

    This course was made to show you what Script Kit can do for you.

    John Lindquist, the creator of Script Kit and co-founder of egghead.io, has put together this series of lessons to give a quick overview of the features of Script Kit to help you get oriented.

    We know you’ll be off and having a blast with your own scripting ideas in no time!

  • Animate React Apps with Framer Motion

    Animate React Apps with Framer Motion

    Will Johnson205× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Intro

    Animations do more than just look good. They can draw the user's attention to important information or let them know they can interact with certain elements.

    You can use them to smooth transitions and bring your applications to life. It makes you stand out from the usual wall of text that you see on most applications.

    But here is the issue, animations can get complicated. You have to have a good understanding of how CSS works but it takes hours of studying before you can even start trying to animate.

    Framer Motion solves this for you and Will Johnson will show you how.

    The Project

    homepage gif for showing code

    In this course, you’ll iteratively add animation to a fully-styled shopping list app that’s built-in React.

    You’ll see how Framer works out of the box, and learn just how customizable it is. Throughout the course, Will demonstrates animation through changing size, direction, and even appearance.

    It has smart defaults that handle making the animations smooth and performant. Automatically animating layout changes. It does so much for you it almost feels like you're cheating.

    You’ll even see how to animate the path of an SVG making it draw the path for your image.

    Gain these Skills

    Will gives you the knowledge of how to incorporate Framer Motion into any React application. You will be able to customize your animations to do whatever it is you want/need and show your users what items on your app are interactable. You’ll be able to take your static application and make it interactive.

    Prerequisites

    There are no prerequisites for this course. The application we are working on is already built for you so you just have to be able to follow along with Will as he integrates Framer Motion into the app.

    What’s Next?

    If you are further interested in learning about animating your applications, Spring Animation in React with React Spring is a great place to learn! Christian Nwamba will teach you the skills to begin using the react-spring library and add animation to your React components.

    If you are interested in more courses by Will Johnson, he has a mini-course on how to Create A Blog With Jekyll. Will shows you how to download, install Jekyll plugins, and create blog posts.

  • Build a GraphQL API with AWS CDK and AppSync

    Build a GraphQL API with AWS CDK and AppSync

    Tomasz Łakomy61× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Build a fully managed, serverless GraphQL API powered by TypeScript and AWS CDK in a matter of hours, not days.

    AWS CDK gives us the power to go all-in with infrastructure as code for AWS. With it, we can create a full GraphQL API with AppSync, a database with DynamoDB, serverless functions with Lambda, and much more.

    In this course, you will learn how to do all of the above from your command line and code editor, which will save you time and give you greater flexibility.

    Want to delete your stack? That's fine, just run cdk destroy and poof, all of the resources are gone. Changed your mind? Just deploy the stack again and they all come back.

    AWS CDK makes it that easy.

    And since we are working from the command line and our code editor, we will take advantage of TypeScript and other third-party libraries to improve our developer experience.

    So stop wasting time in the AWS console, check out this course, and learn how to leverage infrastructure as code to your advantage.

  • Introduction to GROQ Query Language

    Introduction to GROQ Query Language

    John Lindquist60× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    GROQ (Graph-Relational Object Queries) is a query language for JSON. This course will help you build your first query and walk you through filters, projections, functions, and the other features of GROQ to help you request exactly the data that you want.

    In this course, John Lindquist will teach you how to create and structure GROQ queries to load exactly the data you want.

    The course will kick off by giving you a quick introduction on what GROQ is, and then you will learn how to use the different features the language supports.

    At the end of this course you will know how to use GROQ in the context of a Sanity.io dataset.

  • Test Network Edge Cases with cy.intercept() Command in Cypress

    Test Network Edge Cases with cy.intercept() Command in Cypress

    Filip Hric76× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Your app can react in various way on different network conditions. Cypress has a great toolset for setting up those conditions, which enable you to test your app thoroughly. That way you can ship your app with confidence.

    Cypress’ .intercept() command is one of the most fun command to use. And it’s also one of the most useful.

    Especially when you are done with all your happy paths and want to increase your test coverage with some edge cases.

    These edge cases can mean different data, headers or server behavior. You can modify all of these, dynamically or with a static fixture prepared beforehand

  • Build a News App with React Native, GraphQL and TypeScript

    Build a News App with React Native, GraphQL and TypeScript

    Kadi Kraman70× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course, we will be building a React Native news app that is read-only when offline.

    The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

    The completed app for this course is available here and each lesson will include a link to the commit that added the code so you can check your work.

    After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

    This course will require you to run the api locally on your device. The api repo is available here.

    Resources:

    • urql: https://formidable.com/open-source/urql/docs/
    • Insomnia: https://insomnia.rest/
    • Async Storage: https://github.com/react-native-async-storage/async-storage
    • React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo
  • Create a GraphQL Powered Vue 3 Application

    Create a GraphQL Powered Vue 3 Application

    Kevin Cunningham21× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Get started building dynamic apps with GraphQL and Vue3.

    As your app scales, so does the complexity of managing your routes and API endpoints.

    It gets tiresome.

    But this aspect of web development can be streamlined considerably!

    GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

    But what does GraphQL do?

    Its power comes from giving you a single endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

    REST vs GraphQL diagram

    Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

    To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

    To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

    Gain These Skills

    • Add GraphQL to a Vue 3 project
    • Query and mutate data with GraphQL in Vue 3
    • Create data-driven views with Apollo client
    • Handle routing within a Vue 3 project
    • Implement optimistic updates and infinite scroll

    Prerequisites

    Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

    If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through.

    For Vue, check out The Beginner's Guide to Vue 3, which is also by Kevin. It's great for both newcomers to web dev and veterans alike.

    And for GraphQL, work through GraphQL Query Language from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality.

    What's Next?

    Progressive Web Apps are a more advanced topic, and converting an existing Single Page Vue App into one makes for an excellent follow-up project. -> Offline-First Progressive Web Apps (PWA) in Vue.js

    If you want to take your GraphQL game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. -> Designing GraphQL Schemas

    And I know the following recommendation is a React course but it really is that good. You will learn some advanced techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. -> Manage State in React Apps with Apollo Client and GraphQL

  • Build a Digital Garden with Nuxt and Nuxt Content Module

    Build a Digital Garden with Nuxt and Nuxt Content Module

    Ben Hong56× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    When you are first building your blog site, it can be difficult to choose what content management system you want to use, and choosing a new framework can be daunting. They can be overwhelming and have a large learning curve.

    Open up your knowledge of a powerful Nuxt module with Nuxt Content! Nuxt has a low barrier of entry and you don't have to fight with a content management system or API keys.

    In this course, you will learn how to create your own blog with just Nuxt and a folder of markdown files. Ben will take you from creating your Nuxt project from scratch all the way to deploying your digital garden on Netlify.

    Ben Hong is one of the core team members over at Vue.js and has developed this course to give you a concrete understanding of Nuxt Content and how to build your blog efficiently.

  • Build a React App with Authorization and Authentication using AWS Amplify

    Build a React App with Authorization and Authentication using AWS Amplify

    Ali Spittel111× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course, you will learn all about AWS Amplify and how you can leverage it to handle authentication and authorization in your applications.

    Ali Spittel takes all of this and puts it in one streamlined package that will get your users signed in, creating, and accessing data in the blink of an eye! Amplify helps you configure serverless backends with authentication, storage, and data, using intuitive workflows.

    Amplify abstracts a lot of deep auth mechanics away from you, the developer, and allows you to harness the power of backend development without needing deep cloud knowledge. At the end of this course, you will be able to Build a React App with Authorization and Authentication from scratch.

  • Integrate Storybook in a Next.js Application

    Integrate Storybook in a Next.js Application

    Michael Chan251× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

    In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs.

    The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story Args, configure the next/image component to be unoptimized, and mock server workers with MSW inside Storybook.

  • Cloud Infrastructure Fundamentals with AWS

    Cloud Infrastructure Fundamentals with AWS

    Sam Julien148× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    You're going to find cloud services being used at nearly any enterprise you work for. So it's important for us developers to at least have a high-level understanding of this infrastructure.

    And since AWS has the dominant share of the cloud market, being familiar with it is incredibly valuable and opens a lot of doors.

    But gaining that familiarity isn't easy. Just browsing through the list of 200+ services is overwhelming.

    Getting started with learning AWS usually involves having a dozen or more open tabs and the feeling that you're going down a rabbit hole that never ends.

    This course is an alternative to that stress. It has been structured like a boat tour on a river of knowledge, linearly guiding you through the core of AWS.

    By the end of this course, you will be confidently spinning up servers, creating relational databases, storing static assets, and writing serverless functions with confidence.

    So, whether you need to learn AWS for your current job or are looking to earn your cloud practitioner certification, start watching this course and gain the skills you need today.

  • Build Data-Driven Applications on the Edge with Workers and Workers KV

    Build Data-Driven Applications on the Edge with Workers and Workers KV

    Kristian Freeman66× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    The Edge is one of the most exciting new topics in web development. At the front of the pack is Cloudflare, whose network boasts servers located in hundreds of cities all over the world instead of in regions like "East" or "West".

    More servers in more locations mean a faster experience for your users.

    But what about the data part of the equation?

    If the application you're working on skews more toward "reading" rather than "writing" data, Cloudflare Workers KV is a perfect fit.

    Once you create a KV namespace— the "KV" stands for "key-value"— Cloudflare keeps track of your application data. The most commonly accessed data will be propagated around the world to the various Edge servers, while less popular data will be stored in more central locations.

    Kristian Freeman has produced courses that introduce how to build and deploy sites and JSON APIs powered by Cloudflare Workers.

    Today, he will show you how Workers KV can be integrated into a Cloudflare Workers project through building a Todo App.

    The Project

    todo-app-screenshot

    Before you groan about a bland Todo App, think about it this way:

    The Todo App is the perfect example of the CRUD operations. Cloudflare KV has its own nuances for reading and writing data through a concept called Binding that is easier to grok when you understand the larger example as a whole.

    As the course progresses, Kristian shares examples of how you can store more complex key-values, along with data operations like editing and filtering.

    One of the coolest features that Cloudflare KV allows for is user-specific data that is tied to the IP address the request originates from. In other words, you'll be able to share your deployed Todo app with anyone around the world, and they will only see their personal items.

    Gain these Skills

    • Manipulating data using Cloudflare Workers KV
    • Make data unique to each user without logging in
    • Effectively store lightweight data in Cloudflare Workers KV
    • Setting up a key-value store and connected projects
    • Reading and writing to a serverless key-value store
    • Storing complex values in a Cloudflare KV store

    Prerequisites

    You'll need to have a basic understanding of what Cloudflare Workers is recommended but not necessary. This course is relatively beginner-friendly into the world of Workers KV that you can get by with no knowledge on Cloudflare Workers.

    But if you want to get the most out of this course, we would recommend taking Introduction to Cloudflare Workers to get a better understanding of how Workers KV comes into play.

    What's Next? (You might also like these resources:)

    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. → Introduction to Cloudflare Workers

    Learn how to build your own serverless APIs so you can manage a highly available backend for your projects. No Learning DevOps or managing services necessary. → Build a Serverless API with Cloudflare Workers

    Using Cloudflare Pages and Cloudflare Workers, it's easy to create dynamic front ends that you can deploy in just seconds from GitHub. → Deploy Dynamic Frontend Applications with Cloudflare Pages

  • Local App Development with the Firebase Emulator Suite

    Local App Development with the Firebase Emulator Suite

    Jorge Vergara20× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Protect yourself from unexpected charges by learning how to use Firebase emulators.

    By using Firebase emulators you no longer have to create a second dev firebase project to avoid using production data. You also don't run the risk of having a cloud function crash and run up a huge bill.

    In this course, you'll learn how to set up and use Firebase's authentication, function, and Firestore emulators. You will also learn how to safely set up Cloud Function emulation, import seed data into your emulators, and disable the emulators in production.

    By the end of this course, you'll be able to confidently set up a safe environment for testing in your own applications!

  • Deploy a Serverless API React Application with TypeScript

    Deploy a Serverless API React Application with TypeScript

    Jason Lengstorf118× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Create a serverless application and deploy it in under thirty minutes!

    We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications.

    If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

    As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor.

    So get started and learn how to use this stack in your own applications!

  • Build a SaaS product with Next.js, Supabase and Stripe

    Build a SaaS product with Next.js, Supabase and Stripe

    Jon Meyers205× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    For your frontend, this application will be using Next.js and Tailwind CSS. You will learn how to maneuver around an app and build a strong static pricing page.

    For your backend AND authentication, we will make use of Supabase. Supabase is open source and is all of the backend services that you will need to build your site. It includes a dedicated and scalable Postgres database and user management with Row Level Security!

    Lastly, for payments, you will be using Stripe. It will be an individual payment checkout system that will create and update users' subscriptions.

    Jon will take you through all of this and more in just 1 hour and 10 minutes!

  • React Optimization Cookbook

    React Optimization Cookbook

    Tyler Clark212× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Optimizing your application is key to being able to provide your users with a clean and pleasurable experience.

    To make your app as performant as possible, you have to send to the browser the least amount of code possible. Also, you want to render the least amount of components on a page at a time as necessary. Then you also want to rerender components in the least amount of time possible.

    Tyler has found that working in enterprises and startup cultures that, as you get more developers in a team and as your application grows, a lot of these little practices become ignored or forgotten or missed on a refactor or a pull request. They start to build up over time. Then, at the end of the day, you have a slow-performing app. You go through it, and you have to do all these little updates.

    In each one of these lessons, Tyler going to be adding and deleting code to walk you through how to optimize a React app using a dashboard React app as the example.

  • Auditing React Apps for Accessibility

    Auditing React Apps for Accessibility

    Erin Doyle58× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

    React fully supports building accessible websites, often by using standard HTML techniques.

    Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for auditing react apps for accessibility. In this course, you will go through different tools and libraries to audit components in a React app.

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

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

    Jon Meyers166× 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.

  • Create a Zustand-like Module State Library

    Create a Zustand-like Module State Library

    Daishi Kato23× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Zustand is a state management library aimed at staying simple and un-opinionated so that you as the developer can build your application as you see fit. To do this it creates a store (module of state) that you can subscribe components to read and update data from.

    Zustand leans on hooks as the primary way to interact with your state. This means you get less boilerplate and a centralized, action-based state management solution that scales with the complexity of your app.

    Daishi, a core contributor of Zustand, will show you the inner workings of the library by creating a small version of it. You learn how Zustand's API came to be and gain a better understanding of it by the end of this course.

  • Manage State in React Apps with Apollo Client and GraphQL

    Manage State in React Apps with Apollo Client and GraphQL

    Rares Matei100× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    At the core of a good client-side GraphQL library is a cache. The cache is very important for improving the efficiency of your data retrieval and providing your users with a clean user experience.

    In this course, we're going to see how Apollo's powerful cache helps easily solve complex UI problems, such as pagination, handling loading and error states, optimistic updates, and minimizing network requests.

    We'll start from the basics, and look at how to make queries and mutations, but then we'll look at how the cache is behind most of Apollo's immediate benefits. We'll explore in-depth how it works, how it stores data, and how we can manually modify it manually for advanced scenarios.

    Even if your backend doesn't fully support GraphQL yet, we'll look at how to write GraphQL queries in your components that retrieve local client state under the hood - or that can even make REST API calls.

  • Build a Modern User Interface with Chakra UI

    Build a Modern User Interface with Chakra UI

    Lazar Nikolov375× 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 a Customizable Animated Skeleton Loader in React Native

    Building a Customizable Animated Skeleton Loader in React Native

    Kadi Kraman93× 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 Chenkie265× 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

    Confidently Testing Redux Applications with Jest & TypeScript

    Jamund Ferguson34× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    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 Ferguson291× 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.

  • Manage Application State with Jotai Atoms

    Manage Application State with Jotai Atoms

    Daishi Kato116× 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 Eckles11× 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 Nwamba96× 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 Cunningham173× 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.