Learn Egghead, Prisma and React-storybook

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! 



Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data


prisma

Build a Backend with Prisma in a TypeScript Node Project

(This collection is still WIP)

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

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

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

Build a full-stack app with Prisma

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

Get started with Prisma v2. Prisma Client

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

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

Tips and Tricks

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Any extra information on the screen will easily distract the audience from the purpose of your lesson. Do your best to remove any extra notifications, UI, or other information that would take away from what you're teaching.

Remove Distractions

Any information you would want to put into an Intro or Outro belongs in the accompanying description, title, course page, etc. The lesson is only for showing the process. Talking about yourself, the lesson, or other lessons is a waste of time.

Avoid Intros and Outros

Tangents are opportunities for other lessons. When you find yourself drifting off-topic because you feel you _need_ to explain  some code you wrote, consider how that piece of code fits back into a "How do I?" question, then come up with a separate lesson to capture it.

Stay on Topic

Recording can be intimidating, so it's best to just hit the record button and start talking. Take it one thought at a time. Sit quietly, think about what you're going to say/type, then do it. If you mess, up, undo back to when you were quiet and try again. Once you get a good take, move on to the next thought. The ideal raw recording is a ton of bad takes and one good take for each thought. So when you get to the editing phase, you quickly clear out the bad takes and leave the good ones.

Record One Thought at a Time

Editing a raw lesson video is a very simple process. You simply watch your own lesson and edit out all the bad takes and dead space using the "Ripple Delete" command. You will be left with a nice, cut lesson ready to export and upload.

Edit with Ripple Delete

Video is a one-way form of communication, so user's don't have the chance to ask you to clarify or ask "Where does X fit in?" This places the burden on you to guide their eyes as you explain how all the little pieces of the code fit together. When your application has a "flow", "X triggers Y, Y triggers Z", make sure to "show the flow" by walking them through where each chunk of code fits. This involves a lot of mouse movement (or fancy keyboard selection shortcuts) and hightlighting to bring it all together.

Guide Their Eyes

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

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Code is usually pretty good at explaining itself. So it's best to just start writing code while you talking about it, then see if any additional explanation is required. When you fall into the trap of a long-winded explanation before you begin coding, you risk confusing the audience or unnecessarily repeating yourself.

Show First, then Maybe Explain

Before recording your first lesson, pick a title that accurately reflects what you plan on teaching. Use the "How do I..." trick to properly frame your lesson and title. "How do I dig a hole with a spoon?" would be answered with a lesson titled "Dig a Hole with a Spoon." Or "How do I eat a lobster with chopsticks?" would be answered with a lesson titled "Eat a Lobster with Chopsticks." 

Pick a Lesson Title

“We’ll just do it in post!”

This is always a phrase to be uttered with caution, but armed with just a couple of handy tools, we can to a lot of magic in post production even if we aren’t Hollywood editors. We will learn about the screencast editors best friend Ripple Delete. Then we will fine tune the recording removing any ummmm's or long running processes like installs or builds. Finally, we will make sure everything looks and sounds good and save it for publication!

Edit a screencast for publication

Teaching an egghead lesson should feel like walking the audience through a set of instructions. Do this, then that, move that, twist this, finally push that. The audience wants to see you putting the code together. Assembling your demo while they watch makes it feel much more real and achievable.

Teach Step-by-Step

Forgetting to change your resolution or setting up your mic will result in an unusable lesson. So please, please, please, set your resolution to 1280x720 (HiDPI), set your mic input to "Onyx Blackjack", and confirm that your mic loud enough (it helps to put your mouth as close to the mic as possible).

Prepare to Record - Screen Resolution and Mic Check

You aren’t the “1-take dizzle”. Instead of trying to get an entire lesson captured in a single capture, consider capturing audio and video in chunks. With our without a script, capturing in chunks makes it easy to redo parts and stay on-topic. You might see a repeating pattern of typing a bit of code > stop and explain as needed > typing a bit of code > repeat.

Capture video and audio in “bite-sized” chunks

Our lesson has been planned, recorded, and edited. It’s ready to be uploaded to egghead.io! Victory dance. Let’s see how it all turned out.

Review final screencast result



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Topics

Instructors

Content Type

Free or Pro