Author: Mark

  • Alternative to running useEffect once

    This is an alternative to running useEffect without any parameters.

  • React: Cloning elements with React.cloneElement()

    Use this to copy elements and give them different props or add new ones. We have a Button which accepts the props textColor and backgroundColor. Then we have ButtonContainer which clones it’s children (in this case Button) but we can give it new props to create variations.

  • Open new chrome browser with no security

    Put this in the terminal: This will bypass some things like cors errors and can be useful for development.

  • Good email regex

    This is just one I found and seems pretty good

  • Removing env file from file

    After adding .env to the .gitignore file, use to remove it from git. To remove it completely from the history use

  • Looping through js objects with “for in”

    To “map” through a js object use “for in” First we get each item in the object and call it ‘person’ to make it easier to read. Then loop through it’s data to populate the array. In our example “data” is the key (eg. “name”) and “person[data] is the value (eg. “Mark”). We also manually…

  • Basic unit testing with Jest

    Let’s say for example we have a back end function that checks if you are under age from a user’s date of birth. First we load that function: Then we set up some test data, like so: We then run the function using the test datas. In our example the function will return some validation…

  • Full size background image

    Background-size cover makes the image cover the whole screenBackground-position center centers the imageBackground-attachement fixed makes it so the image doesn’t move when you scroll down the page.

  • Using Reduce

    Reduce is used somewhat similar to ‘map’ Zero is set as the initial value and then it goes through the array and adds each value (in this example the currentScore) to the totalScore which becomes the new ‘previousScore’. Here’s a more useful example:

  • Checking a video to play it

    This was from a long time ago. I think it had something to do with browser compatibility or device compatibility. Leaving it here in case it’s useful in the future.