- Видео 64
- Просмотров 273 559
Chris DeSilva
США
Добавлен 19 дек 2019
Tips and walkthroughs for developers
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/
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
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 #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 #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
😊
Excellent video. Lots of valuable information in two videos.. Thanks
preciate you my boy
a lot of thx!!! very usefull content!
So everytime i reload and the website has access to my location. It just returns null
Thanks for this video. Not as tutorial but demo of possibilities.
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 🤣
Thank you
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?
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
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😭
There had an error, but was able to solve by using postgresql:// instead of postgres://. Thank you.
I really like this!!! You put it all into one whole set that provide us with the whole picture! Thank you Chris!
Githhub link?
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?
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.
@@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.
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" ?
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.
@@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?
What is your theme
Synthwave '84
i'm trying to use variables & mixins, instead of ' :root'... why is that not working with this approach?
This project will not start for me properly
what commands should i runto start the project
I need to intercept a request and add a custom header to the request and let it hit, how can it be done
Check out the docs here: docs.cypress.io/guides/guides/network-requests
or any kind of tokens?
does this use any kind of JWT token?
Thank you!
Sir, what's the font you are using on vscode?
Victor Mono
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.
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.
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/
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!
Great video man! You're video was done smartly and concisely, I really appreciate it!
Because of you I solved my problem. Thank you and God Bless. 🎉
Awesome, glad to hear it!
How did anyone get this to work, tables won't create, error messages everywhere, this is a nightmare for a beginner tutorial
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.
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?
Hi, I'm getting and error: RuntimeError: Either 'SQLALCHEMY_DATABASE_URI' or 'SQLALCHEMY_BINDS' must be set. How do you get past this?
Did you ever sort this out
Did you figure it out?@@bigmack13
Thankyou so much man!
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.
Awesome comment, thanks for adding this! I'm sure this will help with some future troubleshooting.
@@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.
TY BRO !!! SAVE THE DAY 😁
Amazing, just implemented this in my project! 🤩
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
pretty good video. it would be good if you can demo some processing of data using web and db connectivity
wonderful video. thanks you so much
Great video! For some reason my cypress version is missing the add command to test button
When you start working with these tools, the other stuff seems silly... Unless you're working for an enterprise, I guess.
could you please make a video on flask backend ,react frontend ,microsoft sql server database (stored procedure data )
Very helpful!👏
When I run POST and GET requests at localhost:5000/events, I get a 401 Unauthorized error. any ideas why?
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.
thnks a lot for this helpful video
Keep it up!
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
Check out the docs to either use the refetch method or useLazyQuery - www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery
Finally found a course that talks about all three and not just React and flask. Thank you
Hi, Thanks for tutorial. Know you help peoples on the all world! I'm from brazil and very content with your video.
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
i love you