- 74
- 90 495
Timothy Amo
Ghana
Приєднався 5 гру 2020
I do lots of coding building software using javascript or any popular programming language of the viewer's choice, and also create prototypes with figma
Improving lazy loading with preloading for route based code splitting with react-router-dom & vite
Article - mmazzarolo.com/blog/2024-08-13-async-chunk-preloading-on-load/
NPM Package - www.npmjs.com/package/vite-plugin-preload
NPM Package - www.npmjs.com/package/vite-plugin-preload
Переглядів: 109
Відео
Data from useActionData vanishes when using useSearchParams from react-router-dom
Переглядів 764 місяці тому
Data from useActionData vanishes when using useSearchParams from react-router-dom
Creating Reach Hook Code-Generator | Part 10 | Adding Dynamic URL Param To Mutations
Переглядів 1611 місяців тому
Creating Reach Hook Code-Generator | Part 10 | Adding Dynamic URL Param To Mutations
Creating React Hook Code-Generator | Part 9 | Adding Dynamic URL Params
Переглядів 1911 місяців тому
util.js - gist.github.com/timdereaper1/394dfde6b451e1da81552a91deb0e9f3
Creating React Hook Code-Generator | Part 8 | Creating Post Request
Переглядів 1211 місяців тому
Creating React Hook Code-Generator | Part 8 | Creating Post Request
Creating React Hook Code-Generator | Part 7 | Object in Object Definition
Переглядів 911 місяців тому
Creating React Hook Code-Generator | Part 7 | Object in Object Definition
Creating React Hook Code-Generator | Part 6 | Adding Configuration Object
Переглядів 711 місяців тому
Creating React Hook Code-Generator | Part 6 | Adding Configuration Object
Creating React Hook Code-Generator | Part 5b | Generating API Request Hook
Переглядів 911 місяців тому
Creating React Hook Code-Generator | Part 5b | Generating API Request Hook
Creating React Hook Code-Generator | Part 5 | API Request Schema Setup
Переглядів 1211 місяців тому
Creating React Hook Code-Generator | Part 5 | API Request Schema Setup
Creating React Hook Code-Generator | Part 4 | Translating Schema Body to Typescript Types
Переглядів 1011 місяців тому
Creating React Hook Code-Generator | Part 4 | Translating Schema Body to Typescript Types
Creating React Hook Code-Generator | Part 3 | Translating Type Schema to Typescript
Переглядів 1611 місяців тому
Creating React Hook Code-Generator | Part 3 | Translating Type Schema to Typescript
Creating React Hook Code-Generator | Part 2 | Script Boilerplate
Переглядів 2011 місяців тому
Creating React Hook Code-Generator | Part 2 | Script Boilerplate
Creating React Hook Code-Generator | Part 1 | Introduction
Переглядів 4511 місяців тому
Creating React Hook Code-Generator | Part 1 | Introduction
Building Conference Registration Web App w/ React - Part 9 | Showcasing New Designs
Переглядів 24Рік тому
Building Conference Registration Web App w/ React - Part 9 | Showcasing New Designs
Freestyle Coding | Building Conference Registration Web App w/ React - Part 8 | Data Sorting
Переглядів 23Рік тому
Freestyle Coding | Building Conference Registration Web App w/ React - Part 8 | Data Sorting
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 7 | Filtering Data
Переглядів 13Рік тому
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 7 | Filtering Data
Freestyle Coding | Building Conference Registration Web App w/ React - Part 6 | Tanstack Table
Переглядів 55Рік тому
Freestyle Coding | Building Conference Registration Web App w/ React - Part 6 | Tanstack Table
Freestyle Coding | Building Conference Registration Web App w/ React - Part 5 | Deleting User
Переглядів 10Рік тому
Freestyle Coding | Building Conference Registration Web App w/ React - Part 5 | Deleting User
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 4 | Dashboard
Переглядів 16Рік тому
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 4 | Dashboard
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 3
Переглядів 16Рік тому
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 3
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 2 | Dynamic Routes
Переглядів 27Рік тому
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 2 | Dynamic Routes
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 1
Переглядів 42Рік тому
Freestyle Coding | Building A Conference Registration Web App w/ React - Part 1
Fixing styled-component unknown props DOM errors
Переглядів 1,5 тис.Рік тому
Fixing styled-component unknown props DOM errors
Adding dynamic auto complete to an Input with Datalist in React
Переглядів 2,6 тис.2 роки тому
Adding dynamic auto complete to an Input with Datalist in React
Unit Testing React-Router-Dom Navigation Without Mocking
Переглядів 9 тис.2 роки тому
Unit Testing React-Router-Dom Navigation Without Mocking
Build Components w/ little to NO hooks in react
Переглядів 222 роки тому
Build Components w/ little to NO hooks in react
Yo bro. thank you man!
Perfect!!
I need to test hooks, im using renderHook from react testing library and i need a reusable wrapper with MemoryRouter so that i will be able to check location.pathname changes in each test i need...tried 10 approaches but it doesnt work as expected at all
Great, but one downside is that you have to redefine your routes in your test (lines 5,6). So now you have to maintain your route definitions in two places - your actual app AND in your tests. Not very DRY. More importantly, if you change the routes in the application itself, your tests will still pass (since the routes in your test are still the same as before) - for example, you change the name of the "/signup" route to "/register", the button will still work in the app and take the user to "/register" and the button will still work in the test, but taking the user to "/signup"
That's a fair point, maintaining different routes definitions in both the actual app and tests is a PITA, and it's best to have one place which houses all your route definitions, and test against that. Thanks a lot for the info, I'll make sure to add this to my videos on testing in the future
It helped me a lot thank you
Glad it helped
Thanks to remind me this use of wrapper ;)
/*rick ross voice/* BOSS!
This is too long and convoluted. I don’t need a back story on this code. This probably could have been summed up in 45 seconds but there is so much in here I cannot tease out what that is. Got a short short version?
Not yet. I'll make a shorter vision and post the link
@@timothyamo I’d really appreciate it, thanks. I apologize for my word choice; in retrospect it seems rude. I appreciate you and the work you do.
thanks a lot and try to make regular content and you will get enough subscribers .
Thanks. I try to make regular content, unfortunately tho I don't get as much time as I want due to some stuff IRL. Nonetheless, I'll try to upload content regularly
good brother
thanks, huge help
Glad it helped!
Hi, thanks! One question: is it possible to check if the location pathname matches after clicking a button in a test case?
Huge thanks for this tip, awesome solution!
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
github.com/timdereaper1/api-schema/tree/main
nice one! :)
not work
Very clear explanation! what's the name of the theme you used in this video?
It's poimandres
can you share the font name
The font is Dank Mono
You're talking about unit testing, but this sounds more like integration testing.
Ty brooo
Finding it difficult to understand the tanstack table library still.Please can you create a short tutorial on it.There are too many functions plus i m using typescript which makes it harder..
THANK YOU SO MUCH!!!!!!!
You also saved my day, been stuck on this failing stupid unit test until I watched this. waitFor was missing.
Bro, I'm passing color through props in the entire application but only in one particular section it's not working , when I'm passing color: ${({theme})=>theme.text_primary}. Please help me if you could....
Love from India❤
Thank you Brother. For suggesting...
Thanks for your knowledge sharing. Please, what is your error lint extension ? i like it.
Am using Eslint with Error Lens
Thank you very much for this explanation :) <3
The designs were made by a wonderful UI/UX designer Miss Dora Laurine. You can check out her other works at Website - doraopare.me LinkedIn - www.linkedin.com/in/dora-laurine-opare-23b757158
what do you guys think about the new format of the video? Do let me know if you like it or I should go back to the previous format.
Timothy on it🎉🎉🎉
great video, very informative!
What's the name of the extension you're using for indentation? Looks real nice. Also, this solved my problem! Or, well, it gave me a workaround! Was trying to test the actual URL to look for a change, but seeing if a piece of content only on the page I'm navigating to exists on the screen works just as well as far as my knowledge goes. Thank you!
I'm glad that I was of some help to you. I'm using the prettier extension and set the tab width to 4. Thanks a lot for watching.
@@timothyamo Yeah for sure man, love finding good content like this that doesn't get enough attention! Is it prettier that gives you these lines vertical "ruler" lines too?
@@PatrikRasch Nope I think it comes with vscode by default. I'm also using the bracket pair setting for vscode as well
true, I found this answer after googling a lot, was trying to find an answer on YT but this is the only video I found that observes this prob, so thanks a lot!
Glad I could help! Thanks a lot for watching
How to test nested routing?
really great video, hands down, the simplest solution for local storage. really appreciate it
I am already googling trying to find out how you display your terminal in a tab. My favorite part of the video for sure.
I should have guessed that you could just drag and drop it considering it's Microsoft.
With the latest version of VSCode you can just drag and drop the terminal to the tabs
Is QueryClient mandatory? What if I want to test link route which does not use react query
No it's not. I'm only using QueryClient since I use react query inside the components being tested. It would cause an error if the QueryClient is not available. So you can test your routes with having to provide QueryClient as long as react-query isn't being used in the components. Thanks a lot for watching.
What font did u use in your VS code, btw great video
Thanks a lot for watching. I'm using dank mono. A really great font for coding
Thank you for this helpful video. I've been struggling with how to use localStorage for my react application, and this really helped!