Chris DeSilva
Chris DeSilva
  • Видео 64
  • Просмотров 273 559
React Custom Hooks - useIsOnline
Learn about custom hooks in React by creating a hook that detects network connectivity.
Repo: github.com/chrisdesilva/web-apis
React docs: react.dev/
Просмотров: 103

Видео

Web APIs - Geolocation Hook in React
Просмотров 745Год назад
Create a hook to use a device's location information with the geolocation API. Repo link: github.com/chrisdesilva/web-apis
Build a Tailwind Component Library #3 - Text
Просмотров 115Год назад
Build a common text component using Tailwind Repo: github.com/chrisdesilva/my-next-park
Build a Tailwind Component Library #2 - Link
Просмотров 89Год назад
Repo: github.com/chrisdesilva/my-next-park Build a common component that handles internal routing and external links
Build a Tailwind Component Library - Layout
Просмотров 3,4 тыс.2 года назад
In this series we'll refactor an old project by building out a component library. This video focuses on a common layout component. Repo: github.com/chrisdesilva/my-next-park Original project playlist: ruclips.net/p/PL1FIFZraE9UFphZIXApGJXX-qtzDwM3OA
Full Stack Flask, React, and Postgres, pt 2
Просмотров 14 тыс.3 года назад
Create a full stack application using Flask, PostgreSQL, and React. In this video, we'll connect our Flask back end to a new React front end.
Full Stack Flask, React, and Postgres, pt. 1
Просмотров 39 тыс.3 года назад
Create a full stack application using Flask, PostgreSQL, and React. In this video, we'll set up our CRUD endpoints and test them using Postman. SQLAlchemy docs: docs.sqlalchemy.org/en/20/
3D Image Carousel, pt. 2 - Media Queries and Match Media
Просмотров 1,7 тыс.3 года назад
Make your 3D carousel responsive Link to project: github.com/chrisdesilva/3d-slider
Automate Cypress Testing in the Cloud with LambdaTest
Просмотров 1 тыс.3 года назад
Link to repo: github.com/LambdaTest/cypress-example-kitchensink LambdaTest: www.lambdatest.com/cypress-testing
Flutter As A React Dev, pt 2
Просмотров 483 года назад
Official docs: codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0
Flutter As A React Dev, pt 1
Просмотров 1123 года назад
Official docs: codelabs.developers.google.com/codelabs/first-flutter-app-pt1#0
Cypress Intercept - Spy on Requests and Stub Responses
Просмотров 10 тыс.3 года назад
Cypress Intercept docs: docs.cypress.io/api/commands/intercept
Create a Skeleton Loader with Styled Components
Просмотров 1,4 тыс.3 года назад
Make a placeholder skeleton component for loading data using styled components
Learn Apollo Client's useMutation Hook in Less Than 30 Minutes
Просмотров 8 тыс.3 года назад
Mutation docs: www.apollographql.com/docs/react/data/mutations/ Playground back end: codesandbox.io/s/mutations-example-app-server-sxewr?file=/index.js:934-943
React App Testing with Cypress
Просмотров 44 тыс.3 года назад
Learn to test your React app with Cypress Repo: github.com/chrisdesilva/nba-scoreboard Cypress Docs: docs.cypress.io
React Forms with Formik, Yup, and Material UI
Просмотров 9 тыс.3 года назад
React Forms with Formik, Yup, and Material UI
Learn Apollo Client's useQuery Hook in Less Than 20 Minutes
Просмотров 9 тыс.3 года назад
Learn Apollo Client's useQuery Hook in Less Than 20 Minutes
React Interview Prep - Class Components to Hooks
Просмотров 523 года назад
React Interview Prep - Class Components to Hooks
React Interview Prep - Build A Form
Просмотров 2083 года назад
React Interview Prep - Build A Form
3D Backgrounds with Vanta and Next.js
Просмотров 9 тыс.4 года назад
3D Backgrounds with Vanta and Next.js
Make a 3D Image Carousel with React Slick
Просмотров 43 тыс.4 года назад
Make a 3D Image Carousel with React Slick
Next.js #5 - Firebase Hosting
Просмотров 15 тыс.4 года назад
Next.js #5 - Firebase Hosting
Next.js #4 - Responsive Design with Tailwind
Просмотров 1,7 тыс.4 года назад
Next.js #4 - Responsive Design with Tailwind
Next.js #3 - Create Park Pages with getStaticPaths
Просмотров 4144 года назад
Next.js #3 - Create Park Pages with getStaticPaths
Next.js #2 - Styling the Homepage
Просмотров 8024 года назад
Next.js #2 - Styling the Homepage
Next.js #1 - Getting Started with Next and Tailwind
Просмотров 2,2 тыс.4 года назад
Next.js #1 - Getting Started with Next and Tailwind
Next SSG #2: Using getStaticPaths with Next.js
Просмотров 2,4 тыс.4 года назад
Next SSG #2: Using getStaticPaths with Next.js
Next SSG #1: Using getStaticProps with Next.js
Просмотров 8254 года назад
Next SSG #1: Using getStaticProps with Next.js
CSS Modules, Variables, and Global Styles in Gatsby
Просмотров 1,9 тыс.4 года назад
CSS Modules, Variables, and Global Styles in Gatsby
3 Strategies for Creating Diagonal Layouts with CSS
Просмотров 2,9 тыс.4 года назад
3 Strategies for Creating Diagonal Layouts with CSS

Комментарии

  • @lloydbiddell3919
    @lloydbiddell3919 Месяц назад

    😊

  • @jemm280182
    @jemm280182 3 месяца назад

    Excellent video. Lots of valuable information in two videos.. Thanks

  • @illMonk-xm2xd
    @illMonk-xm2xd 4 месяца назад

    preciate you my boy

  • @hubschmannn
    @hubschmannn 7 месяцев назад

    a lot of thx!!! very usefull content!

  • @tabdig
    @tabdig 8 месяцев назад

    So everytime i reload and the website has access to my location. It just returns null

  • @adamkudla
    @adamkudla 11 месяцев назад

    Thanks for this video. Not as tutorial but demo of possibilities.

  • @fabianpetersen2452
    @fabianpetersen2452 Год назад

    i wanted to use this for my website but it is to messy to make it work, if anything goes wrong i dont have the time to go through the code to look for changes only to see birds on the screen 🤣

  • @rayanetube7074
    @rayanetube7074 Год назад

    Thank you

  • @TheNormann33
    @TheNormann33 Год назад

    Hi, thanks for the great video! I tried to reproduce it, and everything work fine, while Im on localhost. When I try to open react page outside localhost, it opens with errors. It seems like frontend cant reach backend in this case. Could you please give some advise how to fix it?

  • @fal8202
    @fal8202 Год назад

    Thank you Chris for this compact and very useful video, i used it in my Nextjs project with some adjustments like wrapping the fetch function in a useEffect so it does it only once. I am getting the location data but not the timestamp (on Chrom), any hints? Thanks

  • @timothyatanda1188
    @timothyatanda1188 Год назад

    This is a great tutorial i must be sincere, but many of found it hard to setup Python with VS code powershell, you shouls have started from how you create your folders😭

  • @jhunelpenaflorida1768
    @jhunelpenaflorida1768 Год назад

    There had an error, but was able to solve by using postgresql:// instead of postgres://. Thank you.

  • @tracy8522
    @tracy8522 Год назад

    I really like this!!! You put it all into one whole set that provide us with the whole picture! Thank you Chris!

  • @techany671
    @techany671 Год назад

    Githhub link?

  • @zacharymargulies
    @zacharymargulies Год назад

    At minute 15 I keep getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when trying to run the app. I am not sure what I am doing wrong but for some reason map is not working. Any thoughts?

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Is it giving you a line number? It's likely that you're trying to map over something that's undefined. Either a variable typo or data that might be getting fetched that isn't ready yet. For example, if I do data.map... - and data is being fetched, data can temporarily be undefined. There are a few ways of addressing these things. You can add a loading state, use optional chaining (data?.map), etc. Just depends why exactly you're getting the error.

    • @zacharymargulies
      @zacharymargulies Год назад

      @@ChrisDeSilva No line number but the rest of the error reads "TypeError: Cannot read properties of undefined (reading 'map') at App (localhost:3000/main.6a2dabcb05f981dd9f7e.hot-update.js:134:32) at renderWithHooks (localhost:3000/static/js/bundle.js:21453:22) at updateFunctionComponent (localhost:3000/static/js/bundle.js:24335:24) at beginWork (localhost:3000/static/js/bundle.js:26047:20) at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js:11045:18) at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js:11089:20) at invokeGuardedCallback (localhost:3000/static/js/bundle.js:11146:35) at beginWork$1 (localhost:3000/static/js/bundle.js:31020:11) at performUnitOfWork (localhost:3000/static/js/bundle.js:30267:16) at workLoopSync (localhost:3000/static/js/bundle.js:30190:9)" Thanks for the reply. Your video is INCREDIBLE, but this error is stumping me.

    • @zacharymargulies
      @zacharymargulies Год назад

      In trying to debug this, I am confused as to why you use do line 49 at minute 15 "eventsList.map(event=> {" shouldn't "event" here be "events" ?

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      You can call that whatever you want. When I use array methods, I typically call it the individual entity. Since we're mapping over eventList, then each individual item is an event.

    • @zacharymargulies
      @zacharymargulies Год назад

      @@ChrisDeSilva Thank you that makes sense. So optional chaining does get rid of the error but sadly that means I can't fetch my data, no?

  • @kadencarr1914
    @kadencarr1914 Год назад

    What is your theme

  • @MikeyFEonline
    @MikeyFEonline Год назад

    i'm trying to use variables & mixins, instead of ' :root'... why is that not working with this approach?

  • @joeniati7903
    @joeniati7903 Год назад

    This project will not start for me properly

  • @joeniati7903
    @joeniati7903 Год назад

    what commands should i runto start the project

  • @Rasheed_Ikka_01
    @Rasheed_Ikka_01 Год назад

    I need to intercept a request and add a custom header to the request and let it hit, how can it be done

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Check out the docs here: docs.cypress.io/guides/guides/network-requests

  • @joeniati7903
    @joeniati7903 Год назад

    or any kind of tokens?

  • @joeniati7903
    @joeniati7903 Год назад

    does this use any kind of JWT token?

  • @Coolgardt
    @Coolgardt Год назад

    Thank you!

  • @saeidex
    @saeidex Год назад

    Sir, what's the font you are using on vscode?

  • @imaginechiu4371
    @imaginechiu4371 Год назад

    Thank you for the tutorial :) I'd like to recommend another React carousel to you, it's called "bear-react-carousel". You might want to give it a try.

  • @shikhxr24
    @shikhxr24 Год назад

    While giving the db.create_all() for creating the 'event' table, I'm getting "Runtime error: Working outside of application context" The way to resolve this is using 'application context' . I went through the documentation but couldn't figure out how the code would look like for this. Please let me know if you could.

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Without seeing the code you've got set up, this looks like it might point you in the right direction based on that error: flask.palletsprojects.com/en/2.3.x/appcontext/

    • @agreen254
      @agreen254 Год назад

      You have to nest the db.create_all() inside a context block: with app.app_context(): db.create_all() Also make sure you declare the Event class before running create_all or it won't register in the database. I have no idea why it worked for him in the python shell without adding the context block. Probably something to do with the deprecation warnings, considering the video is almost 2 years old now. Still a good tutorial that helped me with ORMS!

  • @tejasgopal6101
    @tejasgopal6101 Год назад

    Great video man! You're video was done smartly and concisely, I really appreciate it!

  • @claringzero
    @claringzero Год назад

    Because of you I solved my problem. Thank you and God Bless. 🎉

  • @iFunktion
    @iFunktion Год назад

    How did anyone get this to work, tables won't create, error messages everywhere, this is a nightmare for a beginner tutorial

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Sounds frustrating. Hard to tell from the error messages alone without any other context. If you're just starting out, it's a great opportunity to lean on documentation. Check the Flask docs, search Stack Overflow for similar error messages, etc. It usually ends up being a small detail that got missed somewhere along the way. Super easy to do when following along with tutorials.

  • @iFunktion
    @iFunktion Год назад

    I really don't understand how you are doing this without getting errors, I am now getting :RuntimeError: Working outside of application context. How do you get round all of this?

  • @iFunktion
    @iFunktion Год назад

    Hi, I'm getting and error: RuntimeError: Either 'SQLALCHEMY_DATABASE_URI' or 'SQLALCHEMY_BINDS' must be set. How do you get past this?

    • @bigmack13
      @bigmack13 11 месяцев назад

      Did you ever sort this out

    • @sagharsahebi5236
      @sagharsahebi5236 10 месяцев назад

      Did you figure it out?@@bigmack13

  • @Sameer.Trivedi
    @Sameer.Trivedi Год назад

    Thankyou so much man!

  • @lesterdelacruz5088
    @lesterdelacruz5088 Год назад

    Note for people: `next export` will lose some of the functions of NextJS like hot-module replacement, server-side APIs, and stuff since `next export` essentially turns it into a SPA app. Though you will maintain some of other beneficial aspects of NextJS.

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Awesome comment, thanks for adding this! I'm sure this will help with some future troubleshooting.

    • @lesterdelacruz5088
      @lesterdelacruz5088 Год назад

      @@ChrisDeSilva yes the 404 that people are getting in the comments below is because the loss of SSR. /pages are no longer nextJs served they are loaded in by React. So those routes need can only be accessed from a link from the index page. I personally think Firebase isn’t the place for nextJs app at least at the moment but to each their own.

  • @atfranco00
    @atfranco00 Год назад

    TY BRO !!! SAVE THE DAY 😁

  • @hercodingpill
    @hercodingpill Год назад

    Amazing, just implemented this in my project! 🤩

  • @dan754513
    @dan754513 Год назад

    By intercepting, can I log the the response from secure website as well ? I need to log the response so I can get client ID which I need to use for the next call

  • @SantoshK-md6wc
    @SantoshK-md6wc Год назад

    pretty good video. it would be good if you can demo some processing of data using web and db connectivity

  • @SantoshK-md6wc
    @SantoshK-md6wc Год назад

    wonderful video. thanks you so much

  • @williamliu796
    @williamliu796 Год назад

    Great video! For some reason my cypress version is missing the add command to test button

  • @aldelta19
    @aldelta19 Год назад

    When you start working with these tools, the other stuff seems silly... Unless you're working for an enterprise, I guess.

  • @manasahr430
    @manasahr430 Год назад

    could you please make a video on flask backend ,react frontend ,microsoft sql server database (stored procedure data )

  • @HimanshuSharma-vo3ny
    @HimanshuSharma-vo3ny Год назад

    Very helpful!👏

  • @theclueless11212
    @theclueless11212 Год назад

    When I run POST and GET requests at localhost:5000/events, I get a 401 Unauthorized error. any ideas why?

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Tricky to diagnose without a bit more detail but are you seeing any other error messages in the console. First thing that comes to mind is that you may have a CORS issue and may have simply missed that part of the setup. Happy to try to help troubleshoot further if you have more details/questions.

  • @shaunakchandra737
    @shaunakchandra737 Год назад

    thnks a lot for this helpful video

  • @Balance-8
    @Balance-8 2 года назад

    Keep it up!

  • @giancarlocabrera7336
    @giancarlocabrera7336 2 года назад

    Chris i have a question, what if i want to do my query once the user submits a form, i've been tying to do it but it does not let me do the query inside a function onSubmit

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Check out the docs to either use the refetch method or useLazyQuery - www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

  • @sergiocanas383
    @sergiocanas383 2 года назад

    Finally found a course that talks about all three and not just React and flask. Thank you

  • @lucasmunaro1093
    @lucasmunaro1093 2 года назад

    Hi, Thanks for tutorial. Know you help peoples on the all world! I'm from brazil and very content with your video.

  • @SophieWillson-qu3gu
    @SophieWillson-qu3gu 2 года назад

    This is great, I'm having an issue with my model where the 'id' and 'created_at' default value are returning "null" - when I print "event" from the formatter method it just logs my description

  • @MrDamian0303
    @MrDamian0303 2 года назад

    i love you