Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

New Recipe: "Sharing data with Client Components" Learn how to use promises to unblock your page so it can be rendered (or even prerendered) as early as possible. Hope you enjoy!

samselikoff's profile picture

Sam Selikoff

33,211 subscribers

18,763 Aufrufe • vor 7 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Your API keys might not be as safe as you think. If you are storing them in your client-side code, they can be extracted even with clever hiding tricks. Learn how to properly secure your sensitive data →
0:44

Your API keys might not be as safe as you think. If you are storing them in your client-side code, they can be extracted even with clever hiding tricks. Learn how to properly secure your sensitive data →

Chrome for Developers

13,337 Aufrufe • vor 6 Monaten

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.
1:09

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.

Next.js

61,963 Aufrufe • vor 5 Monaten

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.
1:24

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 Aufrufe • vor 2 Jahren

People get Framer components, but don't know how to use them. So I'm giving away 50+ free components with how-to videos. It shows exactly how to plug it right into your project. Here's how you can grab: 1. Follow wayden 2. Like & Reply "FC" I'll DM you all
0:22

People get Framer components, but don't know how to use them. So I'm giving away 50+ free components with how-to videos. It shows exactly how to plug it right into your project. Here's how you can grab: 1. Follow wayden 2. Like & Reply "FC" I'll DM you all

wayden

45,970 Aufrufe • vor 9 Monaten

NEW EPISODE: Simple Soup Recipe. This is so easy, inexpensive, and even a child can make it. Give it a go, use this as a template, and build your own flavors.
6:58

NEW EPISODE: Simple Soup Recipe. This is so easy, inexpensive, and even a child can make it. Give it a go, use this as a template, and build your own flavors.

Chef Andrew Gruel

91,839 Aufrufe • vor 9 Monaten

New configurator, fully built on data binding in Rive - set any values (even from external data), calculate the final price, and test image binding (early access) Currently exploring ways to export all configured data, so it can be integrated wherever you need to receive or store it. Built this with Uliana Kalashnikova, supported the data binding side. Try it:
0:28

New configurator, fully built on data binding in Rive - set any values (even from external data), calculate the final price, and test image binding (early access) Currently exploring ways to export all configured data, so it can be integrated wherever you need to receive or store it. Built this with Uliana Kalashnikova, supported the data binding side. Try it:

Daria Nevezhyna

65,168 Aufrufe • vor 1 Jahr

Just a reminder, when you go to a hospital because your sick, it’s the not nurses job to cure or diagnose you, it’s their job to make sure they run as many test as possible so they can make your bill as high as possible. The sicker they make you out to be the more test they can run and the more than can bill you and your insurance company.
2:57

Just a reminder, when you go to a hospital because your sick, it’s the not nurses job to cure or diagnose you, it’s their job to make sure they run as many test as possible so they can make your bill as high as possible. The sicker they make you out to be the more test they can run and the more than can bill you and your insurance company.

RyanMatta 🇺🇸 🦅

26,605 Aufrufe • vor 1 Monat

We just added Origin UI to MagicPath, so now you can build with these beautiful components. Also, here's how easy it is to use them.
0:34

We just added Origin UI to MagicPath, so now you can build with these beautiful components. Also, here's how easy it is to use them.

Pietro Schirano

18,702 Aufrufe • vor 10 Monaten

Ever wanted to play to your own music? Now you can 😏 Learn how to add your tracks in Dead as Disco. Ready for Early Access May 5th
0:25

Ever wanted to play to your own music? Now you can 😏 Learn how to add your tracks in Dead as Disco. Ready for Early Access May 5th

Dead as Disco

19,851 Aufrufe • vor 3 Monaten

Just pushed a new version, now you can use it to create components! If you encounter errors, please restart @Figma or re-login to your plugin account to clear the cache.
0:25

Just pushed a new version, now you can use it to create components! If you encounter errors, please restart @Figma or re-login to your plugin account to clear the cache.

Joshua Guo

23,327 Aufrufe • vor 6 Monaten

You can attach your own files as custom instructions to GitHub Copilot. They don't need to be text, either! You can use code, such as SQL, or templates in any language you're working with.
0:59

You can attach your own files as custom instructions to GitHub Copilot. They don't need to be text, either! You can use code, such as SQL, or templates in any language you're working with.

Visual Studio Code

48,678 Aufrufe • vor 1 Jahr

heres the how-to !! tried to make it as clear as possible heheh,, but if there’s still any questions feel free to ask, ill be happy to help as much as I can 🌻💗 ִ ࣪𖤐 in short: — screenshot your layout > use it as a guide > place your skzoo png > hide the guide > save.
1:35

heres the how-to !! tried to make it as clear as possible heheh,, but if there’s still any questions feel free to ask, ill be happy to help as much as I can 🌻💗 ִ ࣪𖤐 in short: — screenshot your layout > use it as a guide > place your skzoo png > hide the guide > save.

𝓑 — ౨ৎ‧₊˚

256,511 Aufrufe • vor 6 Monaten

The Gondry Exercise: start with a single image and see how far and wide you can take it creatively. The starting image can be anything you want, as boring or complex as you wish. Then use Gen-4 to prompt for any combination of actions or changes to the scene. See how far you can go, and you will get a good measure of how much you need to exercise your creative mind.
0:43

The Gondry Exercise: start with a single image and see how far and wide you can take it creatively. The starting image can be anything you want, as boring or complex as you wish. Then use Gen-4 to prompt for any combination of actions or changes to the scene. See how far you can go, and you will get a good measure of how much you need to exercise your creative mind.

Cristóbal Valenzuela

15,622 Aufrufe • vor 1 Jahr

"If you want to do things like me you have to learn how to be good at technology, study Engineering, Physics that kind of thing, understand how the World works and try to be as accurate as possible, try to be creative, you have to think until your head hurts" -Elon Musk
0:44

"If you want to do things like me you have to learn how to be good at technology, study Engineering, Physics that kind of thing, understand how the World works and try to be as accurate as possible, try to be creative, you have to think until your head hurts" -Elon Musk

SMX 🇺🇸

29,378 Aufrufe • vor 11 Monaten

"If you want to do things like me you have to learn how to be good at technology, study engineering, physics that kind of thing, understand how the World works and try to be as accurate as possible, try to be creative, you have to think until your head hurts." -Elon Musk
0:44

"If you want to do things like me you have to learn how to be good at technology, study engineering, physics that kind of thing, understand how the World works and try to be as accurate as possible, try to be creative, you have to think until your head hurts." -Elon Musk

SMX 🇺🇸

303,023 Aufrufe • vor 1 Jahr

LangChain: Chat with Your Data, a new free short course created with Harrison Chase, is now available! In this 1 hour course, you’ll learn how to build one of the most requested LLM-based applications: Answering questions using information from a document or collection of documents (often called Retrieval Augmented Generation). You'll also learn how to use vector stores and embeddings to retrieve document chunks relevant to a query. I hope you enjoy the course!
3:17

LangChain: Chat with Your Data, a new free short course created with Harrison Chase, is now available! In this 1 hour course, you’ll learn how to build one of the most requested LLM-based applications: Answering questions using information from a document or collection of documents (often called Retrieval Augmented Generation). You'll also learn how to use vector stores and embeddings to retrieve document chunks relevant to a query. I hope you enjoy the course!

Andrew Ng

384,282 Aufrufe • vor 3 Jahren

New demo reel as a birthday gift to myself! I hope you enjoy watching it!
1:23

New demo reel as a birthday gift to myself! I hope you enjoy watching it!

Brendan Casey

26,445 Aufrufe • vor 1 Jahr

New Rive tutorial is out. Learn how to animate an interactive glowing progress bar in it, so you can use this technique to build something similar in your app. Send me DM or reply in the comments to get Figma + Rive file.
6:01

New Rive tutorial is out. Learn how to animate an interactive glowing progress bar in it, so you can use this technique to build something similar in your app. Send me DM or reply in the comments to get Figma + Rive file.

Alex Barashkov

41,785 Aufrufe • vor 2 Jahren