will-change: transform;

If you animate things like opacity or transform, the animation will be done by the GPU, which is super performant with those kinds of things. But as the GPU and CPU render things slightly different you will get this small snap when things get handed over. The will-change property will tell the browser that we will animate this object and therefore the GPU will handle it from the beginning, removing any of those glitches. Ha!

.object-to-animate {
    will-change: transform;
}

Learned this and some more in this great intro to CSS animation by Josh Comeau

Positioning the crop area in add_image_size

I cannot count how many times I used add_image_size to register custom image sizes in WordPress, but I never realized that instead of true/false you can also set the crop area by using an array in the fourth parameter.

add_image_size( 'image-size-name', 250, 250, array( 'center', 'center' ) );

Any of the following keyword combinations:

  • left / top
  • left / center
  • left / bottom
  • right / top
  • right / center
  • right / bottom
  • center / top
  • center / center
  • center / bottom

Developer Handbook – add_image_size