Colby Fayock
Colby Fayock
  • 179
  • 1 949 186
This Fixes CORS
Learn how to fix CORS errors and enable cross-origin requests in an API endpoint.
We'll walk through why CORS may be blocking a request, how we can set up response headers to control what origins can make requests to an API endpoint including all and several origins, as well as how to set up OPTIONS endpoints using Vercel Functions to respond to preflight requests.
🧰 Resources
Tutorial: spacejelly.dev/posts/how-to-fix-cors-errors-allow-cross-origin-api-requests
Starter: github.com/colbyfayock/demo-vercel-function-starter
Code: github.com/colbyfayock/my-cors-endpoint
📺 UA-cam: ua-cam.com/users/colbyfayock
🐦 Twitter: colbyfayock
📹 Twitch: twitch.tv/colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #api #cors #vercel #webdevelopment
Переглядів: 1 166

Відео

Build a Notification System in Next.js with Knock
Переглядів 1,8 тис.21 день тому
Create a real-time notification system in Next.js with in-app and email notifications using Knock. Get started with Knock for free at knock.app/?source=colby We'll walk through how to create comprehensive notification workflows using Knock that allows you to granularly set up how and when you want notifications to arrive for users. This includes email notifications using providers like Resend a...
Best Way to Add Popup Modals in React
Переглядів 3,6 тис.Місяць тому
Add modal dialogs in React that pop up in the browser using the HTML Dialog element. Learn how to use the native browser Dialog element in React to dynamically render modal content, show and hide the modal, and navigate through a gallery of images using arrow keys. We'll even see how we can use Tailwind to customize the style of the modal. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-creat...
Add to Calendar Button with React & Tailwind
Переглядів 1,2 тис.Місяць тому
Learn how to dynamically generate Google Calendar, Outlook, and other calendar links to create an Add to Calendar button in React and Tailwind. We'll walk through using the Calendar Link package to generate new event links for various calendar services then see how we can use Tailwind to create a popup with all of the calendar links inside. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-crea...
Speech Recognition & Voice Synthesis in React (Web Speech API)
Переглядів 4,5 тис.4 місяці тому
How to build an AI voice translator app in JavaScript using Next.js, the Web Speech API, and the OpenAI API. We'll walk through creating an app that converts speech-to-text using the browser's SpeechRecognition API, translates that text using from one language to another with OpenAI's Chat Completions API, and reads the text out loud in the translated language using SpeechSynthesis and the brow...
Styling active links in next.js is tricker than you think
Переглядів 2,4 тис.4 місяці тому
How to style active links in Next.js App Router using the current page's pathname. We'll walk through seeing how we can get the current page's path on the server by using Next.js middleware and setting a custom header, why that's probably not what you want to do in the first place, and how we can embed a client component in the page's server rendered layout to avoid opting an entire tree into c...
The headless CMS we’ve been waiting for
Переглядів 3,7 тис.4 місяці тому
Build a custom blog with Next.js App Router and Headless Hashnode. We'll walk through how to set up a GraphQL client for making requests to the Hashnode API, how to fetch blog posts to display them in a list, creating dynamic routes in Next.js to show individual posts and pages, use dynamic Hashnode publication details like site name and navbar links for our blog website, and generate metadata ...
Get Selected Text in React
Переглядів 1,5 тис.4 місяці тому
Use the Selection API to get selected text in React and show a social media sharing tooltip. We'll walk through how to use the Selection API to listen for selected text, how to build out a dynamically placed tooltip based on selected text location using Tailwind, and how to share the selected text on click to Twitter. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-share-selected-text-in-reac...
Detect Clicks Anywhere on a Page in React
Переглядів 2,5 тис.5 місяців тому
Detect clicks anywhere outside a React component to close UI or trigger a function. We'll walk through how we can use click handlers to detect what was clicked, if it's outside the focused element in this case a search dropdown, and dismiss the UI. We'll even see how we can also close the UI by listening for someone hitting the ESC key. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-detect-c...
Build your own Notion-like WYSIWYG Editor in React
Переглядів 10 тис.5 місяців тому
Learn how to add a WYSIWYG editor with AI commands in React using Novel. We'll walk through setting up React in an Astro app, installing and adding the Novel editor, and setting up and configuring an AI chat completion endpoint using the OpenAI API and Vercel's AI SDK. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-add-an-ai-powered-wysiwyg-editor-in-react-astro-with-novel/ Code: github.com/...
You Don't Need a CMS - Use This Instead
Переглядів 16 тис.5 місяців тому
Build a custom blog platform with Astro and Appwrite. Learn how to create a new Database in Appwrite, create new Post Documents using an Astro HTML form and SSR, get a single blog post, and get a list of blog posts to display on a blog website. 🧰 Resources Tutorial: spacejelly.dev/posts/how-to-create-a-blog-with-astro-appwrite/ Code: github.com/colbyfayock/my-appwrite-blog/ Demo: my-appwrite-bl...
Easiest way to Copy to Clipboard in React
Переглядів 7 тис.5 місяців тому
Learn how to copy text and image data to a visitor's clipboard with the Clipboard API. We'll walk through how to write both text and image data to a clipboard using the writeText and write methods and even learn how to read data using readText and read methods. Then we'll see how we can provide backwards compatibility with execCommand and library copy-to-clipboard. 🧰 Resources Tutorial: spaceje...
Smooth Scroll to an Element in React
Переглядів 23 тис.5 місяців тому
Learn how to smooth scroll to an element, the top of the page, or a custom location with JavaScript APIs scrollIntoView, scroll, and scrollBy methods. We'll walk through how to trigger scrolling methods programmatically in a react app including scrolling to an element with scrollIntoView, scrolling to the top of the page with scroll and scrollTo, and scrolling page by page based on dynamic view...
Email Countdown Timer Image with JavaScript
Переглядів 1 тис.6 місяців тому
Learn how to add countdown timer to emails using Next.js API Routes and Cloudinary's image API. We'll walk through how to send a Cloudinary image with React Email, how to add text and dynamically generate an image with Cloudinary, use a Next.js serverless API Route to generate the image from an email, and configure response headers to avoid Gmail and other email clients from caching the image r...
Build a Code Editor in React
Переглядів 7 тис.6 місяців тому
Add a code playground with a live preview in a Next.js app with Monaco Editor for React and React Live. We'll walk through setting up a text editor in a React app with Monaco Editor for React, customizing the editor with options including dark mode, setting up a live preview that transforms HTML to React, and using it to show a live preview of the code in the app. 🧰 Resources Code: github.com/c...
Build Apps Faster with daisyUI Tailwind Components
Переглядів 17 тис.7 місяців тому
Build Apps Faster with daisyUI Tailwind Components
Documentation Website in Next.js with Nextra
Переглядів 6 тис.7 місяців тому
Documentation Website in Next.js with Nextra
Dynamic Social Card Images in Next.js with Cloudinary
Переглядів 2,5 тис.8 місяців тому
Dynamic Social Card Images in Next.js with Cloudinary
Abort Fetch API Requests using AbortController
Переглядів 8 тис.8 місяців тому
Abort Fetch API Requests using AbortController
Add Files to a Zip in JavaScript with JSZip & Next.js 13
Переглядів 3,8 тис.9 місяців тому
Add Files to a Zip in JavaScript with JSZip & Next.js 13
Download Progress Bar in React with Fetch API
Переглядів 10 тис.10 місяців тому
Download Progress Bar in React with Fetch API
Warn Users When Leaving a Page in React with beforeunload
Переглядів 13 тис.10 місяців тому
Warn Users When Leaving a Page in React with beforeunload
Build Dashboards for Data Visualization in React with Tremor & Tailwind
Переглядів 15 тис.10 місяців тому
Build Dashboards for Data Visualization in React with Tremor & Tailwind
Upload Files in React - Typescript, Drag and Drop, & Form Examples
Переглядів 53 тис.11 місяців тому
Upload Files in React - Typescript, Drag and Drop, & Form Examples
Cache WordPress GraphQL Requests with WPGraphQL
Переглядів 1,3 тис.11 місяців тому
Cache WordPress GraphQL Requests with WPGraphQL
Routing in React.js - Easy Page Routes with Wouter
Переглядів 3,5 тис.Рік тому
Routing in React.js - Easy Page Routes with Wouter
Analytics in Next.js 13 with Plausible
Переглядів 7 тис.Рік тому
Analytics in Next.js 13 with Plausible
Create & Send Custom Emails with React Email & Resend
Переглядів 56 тис.Рік тому
Create & Send Custom Emails with React Email & Resend
Add Search in Next.js with Server Actions
Переглядів 2,4 тис.Рік тому
Add Search in Next.js with Server Actions
Sitemap, RSS Feed, & Static Routes with Next.js App Router
Переглядів 10 тис.Рік тому
Sitemap, RSS Feed, & Static Routes with Next.js App Router

КОМЕНТАРІ

  • @LearnAlongFaizan
    @LearnAlongFaizan 7 годин тому

    Great video, Please make complete tutorial on authjs v5, rolebased, customer cookie, client side validations

  • @itgiants5218
    @itgiants5218 2 дні тому

    I've problem with npm run build or next build both are failing because of sass I made sure I have installed node-sass and sas but still not luck

  • @divinityinversace
    @divinityinversace 3 дні тому

    does the request get cancelled even if the component is unmounted?

    • @colbyfayock
      @colbyfayock 3 дні тому

      thats a good question and im not 100% sure unless i would test it. i would expect given the initial code had executed with the controller that it would still be cancelled IF the code to cancel it was executed, however if it unmounts and it hadnt run yet, then i would expect it not. if you add the return function to useEffect, you can trigger the cancellation on unmount

    • @divinityinversace
      @divinityinversace День тому

      @@colbyfayock thanks, i ended up setting up a cleanup function which takes care of the controller stuff

  • @bandekhoda7801
    @bandekhoda7801 3 дні тому

    Wait a minute isn't this a huge security issue in the browsers, that I can easily fetch from a website I just opened up and have that website URL as my origin? Does the IP also point to that website I'm fetching from (in the console) or is it my IP? Is the website allowed to not let people fetch using it's origin?

    • @colbyfayock
      @colbyfayock 3 дні тому

      i dont know that i completely follow your question, but: - yes you can theoretically go to your browser's console and create a same-site origin request to the website you're on - there are extra security guards that you can place, that larger websites often place, to prevent someone from abusing that, such as authentication, rate limiting, DDOS prevention, etc - im not sure what you mean by the IP question - by default, without CORS headers, you can not fetch from a website from another origin, this video shows how to do that in a way that you're not allowing ALL websites to make those requests, but only the ones that you choose

  • @andelianzio7457
    @andelianzio7457 4 дні тому

    And what if a I wanna upload the image + data (name, email, message)

    • @colbyfayock
      @colbyfayock 3 дні тому

      typically you'll store that kind of data in a database. some databases come with file storage that you could also use in situations like that, but often they dont which leaves you to need a service like Cloudinary or S3, where you would then store the ID / URL in the database alongside the rest

  • @regedieddy
    @regedieddy 7 днів тому

    Thanks man. Your solution works fine. Before i did try to use !ref.current.contains(event.target)) but it didn't work for me. Contains method did not find node.

    • @colbyfayock
      @colbyfayock 5 днів тому

      ah, glad this worked for you!

  • @denisblack9897
    @denisblack9897 11 днів тому

    Subscribed in 5 sec of scrolling your channel! Very helpful for a beginner to get to know whats possible in react.

  • @lev1ato
    @lev1ato 11 днів тому

    something happened with Web Speech Recognition API. On Google Chrome Desktop it stopped providing punctuation and on Android Chrome it started making duplicate interimResults... I am not sure where to report this bug, I had it working with my AI app and all of the sudden things broke. On the Edge which is Chromium based it still works flawless, very strange..

    • @colbyfayock
      @colbyfayock 11 днів тому

      i'm not sure how to report the bug, but here's their issue tracker: issues.chromium.org/issues?q=status perhaps once logged in it'l let you submit a new issue?

  • @noeldolan518
    @noeldolan518 12 днів тому

    Possibly a silly question, but by the time the 'const response = await fetch(...)' request has completed, isn't the file already downloaded on the client side? (so the 'progress' bar is only related to writing the file from local browser memory to the local file system?)

    • @colbyfayock
      @colbyfayock 11 днів тому

      the progress would be from writing from network to local browser memory, then that result is downloaded from memory

  • @TheHDg4mingTV
    @TheHDg4mingTV 16 днів тому

    instead of writing your own function to format a number just user barbieData.global_revenue.toLocaleString() it formats it based on the location of the user with . or , automatically

  • @v1d300
    @v1d300 17 днів тому

    So I never needed the cors npm package?

    • @colbyfayock
      @colbyfayock 17 днів тому

      this is my first time seeing the cors package, but it looks like it's still a great and easy way to configure CORS specifically in an Express app, where im not sure that this would work inside of a serverless function? but if you wanted to avoid using CORS, you could use this technique to configure the headers yourself, which is partially what the package does

  • @gurvirbaraich
    @gurvirbaraich 17 днів тому

    A lot better that other tutorials thanks.

  • @kenshinhimura3140
    @kenshinhimura3140 18 днів тому

    He became my friend now

  • @LeHarT99
    @LeHarT99 18 днів тому

    Bro you just saved me, THANK YOU!. Suscribed and liked this video

    • @colbyfayock
      @colbyfayock 18 днів тому

      happy to hear that! 🙌 and thanks for the sub 😁

  • @colbyfayock
    @colbyfayock 18 днів тому

    Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

    • @CricMaster-oo6uf
      @CricMaster-oo6uf 15 днів тому

      please make a video for educating like crud app using cloudinary and graphql

    • @colbyfayock
      @colbyfayock 14 днів тому

      @@CricMaster-oo6uf hey thanks for the idea, will keep it in mind!

  • @nitinmungilwar659
    @nitinmungilwar659 18 днів тому

    Great Colby 👍

  • @nemeziz_prime
    @nemeziz_prime 18 днів тому

    Amazing video as usual! Keep going 💪🏻

  • @notrab
    @notrab 18 днів тому

    Nice video @colbyfayock! Another workaround I've been trying lately (but need to measure bandwidth usage) is by adding a `rewrites` option to my Next.js config. The source would be the path I want to post to (could be your API), then the destination the original. I've been using it for file uploads, so this could get expensive $$$$

    • @colbyfayock
      @colbyfayock 18 днів тому

      ohhh thats interesting! i never thought about rewrites from a billing perspective, is that measured in bandwidth?

  • @stabMyFaceOff
    @stabMyFaceOff 18 днів тому

    Great vid, i can see how its suppsoed to look. the only thing is that this is using static site generation with Next js right? so i wondered what its like if you dont statically generate your site

  • @parubok
    @parubok 20 днів тому

    Thanks!

  • @svnbeats6700
    @svnbeats6700 20 днів тому

    I just want you to know personally i spent 4 months trying to do what you did in 30 min 😂😂😂 you got a new subscriber my friend e si eu gosto JavaScript ❤😂

    • @colbyfayock
      @colbyfayock 20 днів тому

      haha glad i was able to help!

  • @antwarior
    @antwarior 21 день тому

    i just started using daisyui and absolutely love it, ill use shad when I need to but as you said, shad isn't as simple to use as daisyui, I can just copy the HTML in daisyui, paste it, change some color and sizes and keep moving, on the other hand with shad, Ill be stuck for 2 hours trying figure out what to plug into to what and why my sizes are not working as they should be🤦‍♂🤦‍♂🤦‍♂

    • @colbyfayock
      @colbyfayock 21 день тому

      🙈i feel that!! good to stick with the simple option until you actually need the complexity

  • @projectnum0593
    @projectnum0593 21 день тому

    Thanks

  • @abishekbaiju1705
    @abishekbaiju1705 21 день тому

    I just read your article about this and it was super clear. Thanks a lot for making these content. subscribed to both youtube and newsletter.

    • @colbyfayock
      @colbyfayock 21 день тому

      thanks for your kind words 🙏

  • @devlearnllm
    @devlearnllm 22 дні тому

    I hope you get more visibility and subscribers. This was exactly what I needed (and the typescript type was a really nice touch)

    • @colbyfayock
      @colbyfayock 22 дні тому

      really appreciate that! glad it helped you out

  • @hyltonjp
    @hyltonjp 22 дні тому

    Nice tutorial. Any chance you will make more that expands on this? One use case that I really can not find anywhere is bringing in my own models or getting in intelisense for files that I work with a lot. It would be great if you could show how to bring in a commonjs file and see the parameters that are documented in JSDoc.

    • @colbyfayock
      @colbyfayock 22 дні тому

      hey thanks for the ideas. i honestly can't imagine i'll be making one like that anytime soon but i'll add it to my list for sure

  • @ammarhalees6370
    @ammarhalees6370 22 дні тому

    Colby still remains one of the most underrated channels in the dev community.

  • @zaritzki
    @zaritzki 24 дні тому

    Thank you Colby! Do you have for multiple uploading with preview? and maybe we can seleect which one is the cover photo? Thank you in advanced

    • @colbyfayock
      @colbyfayock 24 дні тому

      hey unfortunately i dont have a good video for all of that. here's a good one for drag and drop with preview though: ua-cam.com/video/8VHVWPkWR8Q/v-deo.html it's still only one image. Cloudinary doesn't have a batch upload endpoint so you would need to loop through or create a Promise.all-like mechanism

    • @zaritzki
      @zaritzki 24 дні тому

      @@colbyfayock Thank you Colby! Appreciate that

  • @cb73
    @cb73 24 дні тому

    There’s a SaaS for every thing a web app needs. It’s like cutting cable and replacing it with 20 streaming services and still think you’re winning.

    • @colbyfayock
      @colbyfayock 24 дні тому

      It's nice to have that flexibility! Especially with something as complex as these workflows can bd

    • @ismaeltinta6118
      @ismaeltinta6118 24 дні тому

      💯

  • @Russia-with-krafi_bn
    @Russia-with-krafi_bn 25 днів тому

    looks like it just break the base idea, this way require a server (yyou are using your own pc), that mean i need to keep running a server when i want to update a post, i was trying to use static cms with astro but i cant understand how can i do that i think netlify will not take static cms with astro, well for simplicity i think its better to use netlify cms with astro and when i have time do things manually , i wish there should option like tags or category to add myself with cms

    • @colbyfayock
      @colbyfayock 24 дні тому

      unfortunately Astro doesn't yet have a good way of revalidating pages statically without rebuilding the entire site. hoping that something like that comes in the future. Netlify CMS is a bit limiting 🤷‍♂ but if it fit your project's needs, then its perfect!

  • @JamesQQuick
    @JamesQQuick 25 днів тому

    Ah this is exactly what I need for a recent project!

    • @colbyfayock
      @colbyfayock 25 днів тому

      its so good! would love to hear what you think if you play around with it

  • @rtorcato
    @rtorcato 25 днів тому

    any idea what library they are using for the workflow branching and drag and drop?

    • @jeffeverhart
      @jeffeverhart 25 днів тому

      Hey from Knock, it's a combo of libraries: react-flow, dagre for graph modeling, and dnd-kit

    • @rtorcato
      @rtorcato 24 дні тому

      @@jeffeverhart great thanks. Nice app btw

  • @user-ux4le1tf3y
    @user-ux4le1tf3y 25 днів тому

    Tell me, does this work in such a case? If the tab is closed, send a request to the API, and if you reload the page, then no action is required to send to the API

    • @colbyfayock
      @colbyfayock 25 днів тому

      if im undersatnding your scenario correctly, if the user closes the tab, you're not able to then make a new API request. this is a mechnanism to provide a warning if someone tries to close the tab if there are changes on the page or potentially in the middle of an API request that already exists, but haven't tested that

  • @santyas
    @santyas 25 днів тому

    Superb

  • @colbyfayock
    @colbyfayock 25 днів тому

    Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

  • @valenciagapastel
    @valenciagapastel 26 днів тому

    I'm not seeing the code you copy and pasted anywhere in the links you provided. --chatgpt helped me complete it. Thanks!

    • @colbyfayock
      @colbyfayock 18 днів тому

      docs likely changed since this video, glda to see you solved it!

  • @kazimd.saifulalam3632
    @kazimd.saifulalam3632 28 днів тому

    Hi Collby, I viewed your video, though many AWS experts are contributing, I liked your video very much.. It's actually the best. Would love to get in touch. All the best for your sincere effort. Please keep up the good work!!

  • @MrItzreal
    @MrItzreal 28 днів тому

    Thanks for this! It helped me with my current project. I was wondering if there was another way to scroll besides using useRef, and your ID approach was exactly what I needed: <NavLink onClick={() => { const element = document.getElementById("overview"); element.scrollIntoView({ behavior: "smooth" }); }} > Overview </NavLink>

  • @kobibr9362
    @kobibr9362 28 днів тому

    I always find it crazy that companies cant just display a price. Even when the tool looks good it just tells me to not bother trying with it.

  • @LucasSilva-yg3nr
    @LucasSilva-yg3nr 29 днів тому

    Nice work dude! I have a question, if i have my mic always on, how can I avoid the app listen to the bot?is there any way?

    • @colbyfayock
      @colbyfayock 27 днів тому

      thank you! do you mean if you have your mic physically always on? or do you mean the browser API? the browser should only listen if you tell it to start listening, where in the example used a button to start that

  • @dineshkumargiri1659
    @dineshkumargiri1659 Місяць тому

    @colbyfayovk Can I used ACF for mutation?

    • @colbyfayock
      @colbyfayock Місяць тому

      looks like it's not supported via WPGraphQL per their FAQ at the bottom of this: www.wpgraphql.com/acf

  • @user-ep5yq8ek3e
    @user-ep5yq8ek3e Місяць тому

    great example, thanks a lot

  • @noicehockey9920
    @noicehockey9920 Місяць тому

    Thanks.&nbsp; &nbsp; A lot.

  • @yogyyconst
    @yogyyconst Місяць тому

    thanks for the video, but can i record the speech to mp3? like voice note whatsapp

    • @colbyfayock
      @colbyfayock Місяць тому

      do you mean the translated version to mp3? or just simply recording a voice as is?

    • @yogyyconst
      @yogyyconst Місяць тому

      @@colbyfayock just the recording, because i need send the recording to backend

    • @colbyfayock
      @colbyfayock Місяць тому

      @@yogyyconst i think you'd actually want to use this API: developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API perhaps I'll make a tutorial around it at some point but i dont currently have one

    • @yogyyconst
      @yogyyconst Місяць тому

      @@colbyfayock it's ok, thank you man

  • @John-eq5cd
    @John-eq5cd Місяць тому

    I came to this from Colby's video on the dialog HTML element with the idea of applying the click-close code to a pop-up dialog. However, I just couldn't get it to work when checking if event.composedPath().includes the ref for the dialog element. Surprisingly, the dialog element, when open, seemed to take over the whole of the Section element, wherever I clicked it was still on the dialog and so it would not close. Therefore I created a variable for the image within the dialog using getElementById and when clicking away from this the dialog successfully closed.

    • @colbyfayock
      @colbyfayock Місяць тому

      hey! what i ended up doing in the dialog example was applying the ref to the inner div which in my case was expanded to the size of the inner dialog. glad you got something working though!

  • @John-eq5cd
    @John-eq5cd Місяць тому

    Excellent. Thank you, Colby.

  • @contigen
    @contigen Місяць тому

    Edge provides the best results, Synthesis & Recognition.

    • @colbyfayock
      @colbyfayock Місяць тому

      interesting didnt test that one! and realizing i can download that on Mac now, will have to play with it

  • @sureshjavvadi2870
    @sureshjavvadi2870 Місяць тому

    Hy while using drag drop in horizontal scroll bar the items are not dropped beyond the initial width Initially i have 6 images showing in scroll bar, i am able to drag and drop in this 6 images but i unable to drop the items beyond the 7th image. help me

  • @crazyb8593
    @crazyb8593 Місяць тому

    does speech synthesis and speech recognition work offline

    • @colbyfayock
      @colbyfayock Місяць тому

      im not sure about this. i know that some devices come with local synthesis services, so i would recommend trying it and seeing what's available on the devices/browsers you want to support