Author: Mark

  • CSS gradient mask

    This is the CSS on the containing div. Play around with the settings for different effects. Demo here

  • Animate objects depending on scroll position

    For any items on the page that you want to animate when scrolled to add a ‘data-scroll-class’ attribute with the string of what class you want to add to animate and an optional ‘data-scroll-delay’ attribute with the amount of delay you want in seconds. For example: Then add this js What’s happening is when you…

  • 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.