- 55
- 421 587
this.stephie
United States
เข้าร่วมเมื่อ 14 ก.พ. 2020
Self taught frontend developer and UI/UX designer. The best way to learn is through teaching, so that's what I'm doing 💯
Founder of Colorblind Design
Colorblind Design Studio: colorblind.design
Founder of Colorblind Design
Colorblind Design Studio: colorblind.design
Build an AI powered Chatbot with SvelteKit and the Vercel AI SDK
Learn how to use the Vercel AI SDK to build a simple AI powered chatbot with SvelteKit and Open AI.
Vercel AI SDK Docs: sdk.vercel.ai/docs/introduction
Repo: github.com/StephDietz/sveltekit-ai-chatbot
0:00 - Intro
0:31 - Getting Open AI API key
1:52 - Setting up your project
3:23 - Creating your API Route
6:07 - Setting up the UI
#sveltekit #ai
Vercel AI SDK Docs: sdk.vercel.ai/docs/introduction
Repo: github.com/StephDietz/sveltekit-ai-chatbot
0:00 - Intro
0:31 - Getting Open AI API key
1:52 - Setting up your project
3:23 - Creating your API Route
6:07 - Setting up the UI
#sveltekit #ai
มุมมอง: 1 568
วีดีโอ
Handling `next/image` errors with `onError`, `onLoad`, and `unoptimized`
มุมมอง 9858 หลายเดือนก่อน
Learn how to handle image loading errors in Next.js using the next/image component with onError, onLoad, and unoptimized props. This video provides a straightforward solution for displaying unoptimized images when encountering issues like 403 errors with externally hosted images. #nextjs 0:00 - Intro 0:08 - The issue 0:29 - The solution 1:36 - The `unoptimized` prop 1:51 - The `onError` prop 2:...
How to Use React's `useOptimistic` Hook
มุมมอง 2.8K8 หลายเดือนก่อน
Learn how to use React's `useOptimistic` hook for instant UI updates in you Next.js project. 0:28 - Intro 1:27 - The problem 1:48 - What does `useOptimistic` do? 1:52 - The solution Build UI blog post: buildui.com/posts/instant-search-params-with-react-server-components Book Inventory Repo: github.com/vercel-labs/book-inventory #useOptimistic #nextjs
Loading Large CSVs into a Vercel Postgres Database
มุมมอง 2.2K9 หลายเดือนก่อน
Learn how to efficiently load a large CSV dataset into a Vercel Postgres database using Next.js. We'll cover setting up your project / databse, parsing CSV files with PapaParse, and inserting the data into your database. 0:00 - Intro 0:13 - What is a CSV? 0:26 - Setting up our Next.js project 1:00 - Creating our Vercel Postgres database 1:43 - Parsing the CSV with papaparse 3:10 - Creating the ...
Next.js Middleware: When to use it and when to avoid
มุมมอง 4.9K10 หลายเดือนก่อน
Learn when and how to use Next.js Middleware effectively, and when not to use it. 0:00 - Intro 0:27 - When to use Middleware 1:42 - When to avoid using Middleware 3:30 - How to use Middleware #nextjs #middleware
Deploy Express.js on Vercel
มุมมอง 11K10 หลายเดือนก่อน
Learn how to deploy your Express.js server to Vercel 0:00 - Intro 0:06 - Creating your Express.js app 0:32 - Setting up your server 1:06 - Configuring for Vercel 1:26 - Using the Vercel CLI to test locally 2:29 - Deploying 📝 Express.js on Vercel: vercel.com/guides/using-express-with-vercel #expressjs #vercel
Returning and Displaying Form Errors from Server Actions
มุมมอง 3.7K11 หลายเดือนก่อน
#next.js #react #serveractions Learn how to return error messages from a Server action and deiplsy them in a form using the `useFormState` hook.
Optimizing Videos in Next.js
มุมมอง 5Kปีที่แล้ว
#nextjs #approuter Learn the best practices for optimizing videos in your Next.js application 00:05 - Embedding a youtube video using the iframe tag 01:51 - Embedding a self hosted video using the video tag 03:51 - Further optimization learning Resources: Next.js docs: nextjs.org/docs/app/building-your-application/optimizing/videos iframe attributes: developer.mozilla.org/en-US/docs/Web/HTML/El...
Streaming With Suspense
มุมมอง 924ปีที่แล้ว
#nextjs13 Dive into streaming and React's Suspense feature, and see how they change the way web pages load and display content. 0:00 - Intro 0:21 - What is streaming? 1:46 - What is suspense? 2:53 - Component-level data fetching 3:30 - Out of order streaming 💻 RESOURCES: React Suspense Docs: react.dev/reference/react/Suspense Next.js Streaming Docs: nextjs.org/docs/app/building-your-application...
NextAuth Credentials Provider Integration | Next.js App router
มุมมอง 17Kปีที่แล้ว
Learn how to integrate the NextAuth credentials provider into your App Router project! 00:00 Introduction 00:39 Setting up Next Auth 02:42 Using Credentials Provider 04:40 Adding Sign In Functionality 05:53 Connecting to Login Form 07:04 Testing Login Functionality 07:21 Adding Logout Functionality 07:45 Conclusion 💻 RESOURCES: Next.js Learn Course: nextjs.org/learn NextAuth.js Docs: next-auth....
Adding a Search Feature to a Server Component | Next.js App Router
มุมมอง 12Kปีที่แล้ว
#nextjs13 Learn how to use URL search parameters to add search functionality to a server component in a Next.js app router project. 0:00 - Intro 1:13 - Overview of page code 2:01 - Capturing the user's input 2:41 - Update URL with search param 4:13 - Keeping the url and input in sync 4:45 - Updating the table based on search query 5:42 - Debouncing 💻 RESOURCES: Next.js Learn Course: nextjs.org/...
Getting Started With Vercel Blob
มุมมอง 7Kปีที่แล้ว
💻 RESOURCES: Vercel Blob template: vercel.com/templates/next.js/blob-starter Vercel Templates Marketplace: vercel.com/templates Vercel Storage Docs: vercel.com/docs/storage Blob waitlist: vercel.com/storage/blob 🤝 LET’S CONNECT: ◆ Twitter: steph_dietz_ ◆ Github: github.com/StephDietz ◆ Blog: steph-dietz.com #nextjs #vercel
Intro to SvelteKit Form Actions
มุมมอง 2Kปีที่แล้ว
#sveltekit #formactions Learn how to optimize web forms with SvelteKit's form actions. 0:00 - Intro 0:30 - Demo 1:10 - Default form actions 3:30 - Named form actions 4:26 - Progressive Enhancement Links 🔗: SvelteKit form actions docs: kit.svelte.dev/docs/form-actions Vercel KV docs: vercel.com/docs/storage/vercel-kv
Vercel KV integration with Nitro Storage
มุมมอง 558ปีที่แล้ว
#nuxtjs #vercelstorage Discover how to seamlessly integrate Vercel KV, a serverless Redis solution, with Nuxt.js using Nitro storage. 0:00 - Intro to Nuxt 0:54 - App demo 1:22 - Creating Vercel KV store 1:42 - Installing Vercel KV 1:58 - Configuring your projecy 2:25 - Using KV storage 3:10 - deploying your project 3:38 - Connecting KV store to your project 🔗 Links: Template: vercel.com/templat...
Getting Started with Vercel Postgres
มุมมอง 8Kปีที่แล้ว
Learn how to add and use Vercel's new Postgres storage in a SvelteKit project. 0:00 - Intro to Vercel Storage 1:02 - Demoing the project 1:24 - Creating the Vercel Postgres database 1:45 - Setting up our Project 2:23 - Storing/fetching data in the database 4:42 - Testing the app 💻 RESOURCES: Vercel Templates Marketplace: vercel.com/templates?search=vercel postgres Vercel Storage Docs: vercel.co...
Exploring SvelteKit's Deployment Options: Server, Edge, and ISR
มุมมอง 1.9Kปีที่แล้ว
Exploring SvelteKit's Deployment Options: Server, Edge, and ISR
Build an AI application using Open AI, Vercel Edge Functions, and SvelteKit
มุมมอง 28Kปีที่แล้ว
Build an AI application using Open AI, Vercel Edge Functions, and SvelteKit
Beginner SvelteKit: Svelte's Reactivity
มุมมอง 4.7K2 ปีที่แล้ว
Beginner SvelteKit: Svelte's Reactivity
Beginner SvelteKit: Conditionals and Loops
มุมมอง 2.2K2 ปีที่แล้ว
Beginner SvelteKit: Conditionals and Loops
Beginner SvelteKit: Working With Components
มุมมอง 4.4K2 ปีที่แล้ว
Beginner SvelteKit: Working With Components
Beginner SvelteKit: Animations & Transitions
มุมมอง 4.3K2 ปีที่แล้ว
Beginner SvelteKit: Animations & Transitions
Amazing tutorial! Thanks a lot Stephie! Quick question: Is the message history always sent back and forth between the client and the server? So a db for storing it would only be needed if we wanted to enable coming back to the conversation at a later point?
Is it responsive or not? (Can someone tell me to watch this or not) is this left to right
clear and fast thank you !
You literally didn’t optimize anything. And that was the title of the video.
Super useful, thanks a lot!
really appreciate :)
so straight on point.. just awesome
how to add loader while the page is rerendering?
When i pass filename and upload to vercel blob it add random string in postfix after uploading file to vercel blob storage.
here from the sonny sangha video huh? lol
It seems unnecessarily complicated now.
I got 404 error not found, how to solve this.
I also got 404 error can you please help how to resolve this error
Great video, concise and very clear information. Gran video, conciso y muy con información muy clara.
so for the 'red' no workaround?
It worked! Thanks a lot. Keep Up the great job!
just WOW!!
Detailed and easy to follow tutorial. Thanks a bunch
Cani wrap client component with suspense and that client components makes request.... Or is it only works wrapping with server component?
bruh do we change the fetches to the new url domain instead of loalhost3000, shawty gave the world vagues explaation and deployed a damn html file with out ans script or jss smh
😂
Fantastic video. Thank you! This content was enough to get me going with my project.
Why is this better than just fetching the data, storing it in state and filtering it with the searchbar?
I'm receive 404, not found, when I run verce, dev. Anyone can help me, please.
Hi, probably you don't have vercel.json or if you have, the content is invalid.
worthless you must click again to errors disappear
Very well done! Thanks
Godsend vid
Great content; thanks, Stephie! I wonder How can we add filtering functionality?
i do not understand how the data props contain the database value
This channel is sooooooooooooooooo under rated 🥲🥲🥲🥲🥲🥲🥲🥲
So useful, Thanks
Hello Ma, This SvelteKit tutorial is so great. I followed it to create the skeleton of my Project. Now, when we wanted to start learning about Web Development, they said that we should have a Project in mind-- so that at the end of the learning process, we can have something to expend the gained skill on. In sync to that advice, I have chosen to build a Social Media Application like Facebook. There are many tutorials on Svelte and SvelteKit, and I as a beginner, has already learned Svelte and SvelteKit from those tutorials, including yours-- in which case I have started the journey of wanting to build my Social Media Application. Unfortunately for me, and many other Svelte lovers out there, most tutorials which have built a Facebook clone used mostly React or Next.Js -- while there's no tutorial in all of TH-cam that has created a Facebook clone using Svelte and SvelteKit. Would you be able to create a tutorial series on building a Facebook clone using Svelte and SvelteKit, with a Postgres Database, Drizzle ORM and Lucia Authentication? Regards.
Explaining to deploy api in 3 minutes and Damn it's too simple af 😭
:-( no update in 2 years.
What exactly needs to be updated there? It's a tiny reactivity library for when you you have a mostly static site but suddenly need something interactive that's too much to just handwire the databinds in JS. Unless it has bugs, I don't see why it needs updates.
thank you for this amazing tutorial
I see "use client" and I try and find another video. Why can't we just send an error back to the page like use to do 20 years ago.
wtf
Perfect tutorial. Looking to use this in my project. But I have additional filters so will probably require a search button instead of live updating.
Great service from Vercel, butI dont know how stable this is, tried it out and then there is a build error.
Hey! awesome. i cant use {searchParams}:{searchParams?:{ query?: stringify; page?:stringify; }} could you please give me your Doc?
Just started to learn SvelteKit with you. Hope I will understand many things with you until the end of this playlist...!!
Very good video..Thank you very much
Hey whenever i host any website on vercel, the css just doesnt not load. all of the other things work fine...
Great tutorial. Exactly what I was looking for!
Do fetching using sql function get cached for later requests??????
Hello! Thank you for what you do!!! Awesome!! GitHub repo link???😢
:) dzięki wielkie :) dopiero znalazłem Twój kanał i na pewno ponaoglądam się tu sporo :) pozdrawiam
WOW !!! to the point showed the professional production-ready example. better than a long tutorial ends up in no way.
if the book display etc is all RSC how can i know that its loading hmmm 🤔 bc for ex in my app the displays are ssr and when i search i use nuqs and it rerenders the component and i get flash after the rendering... is done and idk how to make a loading or something
1:02 I need Svelte Foundation, not Solid's 😀 (JK, I love Svelte)
How to streamObject with the ai sdk if it's even possible with svelte kit
Thank you1!
thanks for the quick tutorial
wow so empty