Author: Mark

  • Difference between document.ready and window.onload

    Triggers when the HTML is ready. Use this to start running code as soon as possible. This is not jQuery. Trigger when everything on the page (eg images) is finished loading.

  • CSS Modules

    CSS modules allow you to create unique class names even when the class is already used in another file. Name the file like so: name.module.css. Right normal css in it. Import the file like so: Apply it to an element like so: where testClass is a class specified in your css module file. When the…

  • Passing a function prop from child to parent

    Using the same example as passing a function from parent to child but going in the opposite direction. Here the parent has a callback function and passes it to the child component. The child calls the callback with it’s own function as the argument. As before you can use the component like so:

  • Passing a function prop from parent to child

    We have a Parent component that contains the child component “ChildBtn”. Parent has the function parentFunction which is passed into the child. We can also specify the console log text and the button text. We can then use the component like so:

  • JQuery scrolling logic

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