My Coding Resources

While I'm coding, I might need help as to where to find the lectures or docs I previously referred to in solving a problem. It will be available here

What is this page about?
I might be learning something like doing a small react or node project and so on by following some video tutorials or docs. During this, I might have learned something new from one of the videos in a large playlist or unfindable docs. It would be handy in making note of details about the features I built and where to refer to. For this reason this page is very helpful.

HTML And CSS

Topic

Where to find

More info

Adjust image size in img attribute

John Smilga course - 34.

Colors for css

Start generator. You can click the space bar to generate new colors. If you like a single color in there and would like to find more matching colors for that one, then lock the desired color and click the space bar.

Images and Logo, Build header, best practices

In this video, he says how to use position relative and then use top prop to properly align the text relative to its neighbours. He says how to use background image and images in html img tag.

React

Topic

Where to find

More info

Data fetching from different API links to different parts of the page.

During this, each API will take its own time and each part of the page will load in its own time.

How to load everything at once?

In Github project of John Smilga (downloaded Udemy course) you can find a lecture on Promise.allSettled() which is Lecture Number 32.

Using Auth0, Authentication and Authorization

Lecture 33 onwards

Authentication restrict access to pages until logged in
render prop in Route to dynamically show or hide the route
Use Redirect inside Route for hiding or showing route
Spreading the props using rest operator

Lecture 36. Private Routes

Note that we need two resources. The first one below is easily available, but second one is not easily available.

For implementing Login

For implementing redirect after login (Below link is not easily available in docs)

Interview Q : PROBLEM FACED

It was not easy to implement redirect after login as this docs was not available directly on site.

Create-React-App + React-Router-Dom+

Netlify BUG

There's a bug with this setup where react-router-dom gives page not found error when deployed to Netlify. The solution is shown in the video here.

Lecture Number 39. Deploy Gotchas.mp4

Interview Q : PROBLEM FACED

Solution : Make a directory called _redirects in public folder and place the below text inside

/* /index.html 200

Also, if there are warnings then netlify will stop the build. To avoid this, in package.json, modify the following into below lines

"build" = "CI = react-scripts build"

Sidebar setup

Comfy sloth project, video 10-13

Export data from a file and that data to be exported has JSX in it

Comfy sloth project, video 17- Home page - services.mp4

You can use JSX but while doing so import react from 'react' in that file and it will work

Dealing with numbers (like money / dollar formatting)

Comfy sloth project, video 24. Format price.mp4

format is only to display price properly in UI. All the calculations actually we do in cents.

react-router history (navigating to a different page)

Comfy Sloth - 26. Single product - Loading, Error.mp4

Designing stars for reviews

Comfy Sloth - 29. Single Product Stars (manual approach).mp4 and 30 - array approach

array approach

{Array.from({ length: 5 }, (dontCare, index) => index + 1).map( (singleStar) => { return ( {stars >= singleStar ? ( ) : stars >= singleStar + 0.5 ? ( ) : ( )} ); } )}

Passing data between contexts
Passing an imported value of something as a state value in useReducer is not possible. We can do it with useEffect
Object reference -> Products and Filtered Products both should be the same, I mean the content initially but not the pointer to it. If it's pointing to the same object then changes on one would reflect the other which is not what we need.

Comfy Sloth - 33. Filter Context setup.mp4

Setting up sort functionality using select and option (drop-down)

Comfy Sloth - 38. Sort Component - Controlled Input.mp4

Setting up sort functionality (continued...)
How to use state value in reducer instead of passing action.payload (video time frame - 3:00)
Sort for strings - we can use localeCompare

Comfy Sloth - 39. Sort functionality.mp4

Setup filters (like price range, colours, max price and so on)

Comfy Sloth - 41. Filters - Text.mp4

We would have so many fields on which we can filter. We can do all those by using dynamic object properties setting. Refer to the video

Get the value of button in react (text in button)

e.target.textContent

React-Testing

Topic

Where to find

More info

Different test methods (query methods)

Any tool to find the query methods automagically?

Timestamp 33:20

Google chrome extension Testing Playground

Integration Test

Finding elements asynchronously (when page/element takes time to load)

How to test when we render a list of items that are dynamic from an API

How to mock data

Element already queried before user-event produces error. Once the DOM changes, it needs to be queried again.
Let's say we first test if element does not exist in DOM. Then, after we execute a user-event then we expect the same element to be present in DOM but that doesn't work. It doesn't work because we might be writing the expect statement based on the same query we did when element didn't exist. We need to requery again for that to pass.

To better understand this, watch this UDEMY Course by Laith Harb. 15. Adding the Error Handling Logic

Express, Mongo and Node

Topic

Where to find

More Info

How to limit string values in mongoose (meaning, we should be able to use only those values mentioned)

John Udemy node course 133. Product Model

You can use enum

Populate the mongo db

John udemy 134. Populate DB

User Modal mongoose

John Udemy 173. User Modal

Mongoose Schema Validation

Setup postman tokens dynamically for different user

John Udemy 190. Set Token Dynamically in Postman

Mongoose Error Handling

Task Manager API section

110. Basic Validation 122. Custom Error Handler 123. Custom Error Class What was the doubt? I was getting HTML error in postman if user creation (duplicate email) has error I was wondering why I am not getting json. To understand this see 122 video

Watch these videos mentioned o left side in the same order to learn validation

Setup a user as admin (ROLES)

Udemy 252. User Roles

Udemy 269. Authorize Permissions - Complete

This is helpful when the user roles are dynamic and we have certain roles hit certain routes in our app

PreviousVsCode NextGit and Github

Last updated 2 years ago

My Coding Resources

While I'm coding, I might need help as to where to find the lectures or docs I previously referred to in solving a problem. It will be available here

What is this page about?
I might be learning something like doing a small react or node project and so on by following some video tutorials or docs. During this, I might have learned something new from one of the videos in a large playlist or unfindable docs. It would be handy in making note of details about the features I built and where to refer to. For this reason this page is very helpful.

HTML And CSS

Topic

Where to find

More info

Adjust image size in img attribute

John Smilga course - 34.

Colors for css

Images and Logo, Build header, best practices

In this video, he says how to use position relative and then use top prop to properly align the text relative to its neighbours. He says how to use background image and images in html img tag.

React

Topic

Where to find

More info

Data fetching from different API links to different parts of the page.

During this, each API will take its own time and each part of the page will load in its own time.

How to load everything at once?

In Github project of John Smilga (downloaded Udemy course) you can find a lecture on Promise.allSettled() which is Lecture Number 32.

Using Auth0, Authentication and Authorization

Lecture 33 onwards

Authentication restrict access to pages until logged in
render prop in Route to dynamically show or hide the route
Use Redirect inside Route for hiding or showing route
Spreading the props using rest operator

Lecture 36. Private Routes

Note that we need two resources. The first one below is easily available, but second one is not easily available.

For implementing Login

For implementing redirect after login (Below link is not easily available in docs)

Interview Q : PROBLEM FACED

It was not easy to implement redirect after login as this docs was not available directly on site.

Create-React-App + React-Router-Dom+

Netlify BUG

There's a bug with this setup where react-router-dom gives page not found error when deployed to Netlify. The solution is shown in the video here.

Lecture Number 39. Deploy Gotchas.mp4

Interview Q : PROBLEM FACED

Solution : Make a directory called _redirects in public folder and place the below text inside

/* /index.html 200

Also, if there are warnings then netlify will stop the build. To avoid this, in package.json, modify the following into below lines

"build" = "CI = react-scripts build"

Sidebar setup

Comfy sloth project, video 10-13

Export data from a file and that data to be exported has JSX in it

Comfy sloth project, video 17- Home page - services.mp4

You can use JSX but while doing so import react from 'react' in that file and it will work

Dealing with numbers (like money / dollar formatting)

Comfy sloth project, video 24. Format price.mp4

format is only to display price properly in UI. All the calculations actually we do in cents.

react-router history (navigating to a different page)

Comfy Sloth - 26. Single product - Loading, Error.mp4

Designing stars for reviews

Comfy Sloth - 29. Single Product Stars (manual approach).mp4 and 30 - array approach

array approach

{Array.from({ length: 5 }, (dontCare, index) => index + 1).map( (singleStar) => { return ( {stars >= singleStar ? ( ) : stars >= singleStar + 0.5 ? ( ) : ( )} ); } )}

Passing data between contexts
Passing an imported value of something as a state value in useReducer is not possible. We can do it with useEffect
Object reference -> Products and Filtered Products both should be the same, I mean the content initially but not the pointer to it. If it's pointing to the same object then changes on one would reflect the other which is not what we need.

Comfy Sloth - 33. Filter Context setup.mp4

Setting up sort functionality using select and option (drop-down)

Comfy Sloth - 38. Sort Component - Controlled Input.mp4

Setting up sort functionality (continued...)
How to use state value in reducer instead of passing action.payload (video time frame - 3:00)
Sort for strings - we can use localeCompare

Comfy Sloth - 39. Sort functionality.mp4

Sort strings -> Localecompare

Setup filters (like price range, colours, max price and so on)

Comfy Sloth - 41. Filters - Text.mp4

We would have so many fields on which we can filter. We can do all those by using dynamic object properties setting. Refer to the video

Get the value of button in react (text in button)

e.target.textContent

React-Testing

Topic

Where to find

More info

Different test methods (query methods)

Any tool to find the query methods automagically?

Brad Traversy channel

Timestamp 33:20

Google chrome extension Testing Playground

Integration Test

Finding elements asynchronously (when page/element takes time to load)

React testing Library Playlist Tutorial 12 -

How to test when we render a list of items that are dynamic from an API

React testing Library Playlist Tutorial 12 -

How to mock data

React testing Library 13 -

Element already queried before user-event produces error. Once the DOM changes, it needs to be queried again.
Let's say we first test if element does not exist in DOM. Then, after we execute a user-event then we expect the same element to be present in DOM but that doesn't work. It doesn't work because we might be writing the expect statement based on the same query we did when element didn't exist. We need to requery again for that to pass.

To better understand this, watch this UDEMY Course by Laith Harb. 15. Adding the Error Handling Logic