2022-01-06.md

publish_date	tags
2022-01-06	webdev css

• It's a good idea to lint your project before committing , this can be done with husky git hook. This lets you run commands at certain stages of your git workflow
• we can use husky pre-commit hook to run a lint on files before committing to a repo. But this will lint all your files in your project, even the ones that you are not committing potentially blocking your work which can be pretty annoying
• lint-staged, this lets us run a command for only files that have been staged. We can configure husky to run lint-staged instead.

---

• CSS transitions when changing routes with Next.js can be really tricky due to fact changing routes on next cause a full page refresh, therefore if you try to add an onClick handler to append a class to an element the following happens:
  1. click element too add a class with an animation.
  2. the animation starts...but...
  3. the whole page re-renders cutting off the animation

so how can solve this?

Can we either run the animation i.e add the class after everything has finishing re-rendering?

i dont think so....

Or can we ensure the animation has time to run before the whole page re-renders.

next-page-transitions, solves this.

it solves the problem of making sure only one page component is mounted at a time and that the next page isn't mounted until the previous one has completed its exit animation.

The timeout prop is particularly useful. It lets you delay how long it takes for the next page to render.