Of the many Chrome DevTool options we have available, there is one that shouldn’t be overlooked: the Animation Inspector. This tool helps you get a better visual of your animations. It also provides some useful debugging actions, and the ability to adjust animation timing on the fly — without needing to make changes in the Element Inspector or your code editor.
In this article, we’ll cover the basics of the Chrome DevTools Animation Inspector and learn a few ways to help save time while working with animations.
The inspector is not just for developers! Designers will find it useful while…
This article demonstrates using the Javascript Intersection Observer API, instead of measuring scroll position, to perform common visibility detection tasks.
The Problem
In Javascript, performing an action when an element becomes visible to a user has previously always required the following:
- Detecting the current scroll position. Setting an event listener to do this is easy enough, but the performance overhead can be costly. You will almost always want to write a throttling function to limit the amount of events fired when a user is scrolling. If you don’t know how to write this yourself, then you might reach for a library like…
When working as part of an engineering team, code consistency and standards play a huge role in the outcome and future maintainability of a product. They help increase readability and add to the overall enjoyment of working in a codebase. Code style, for example, should be enforced using tools that provide instant feedback and make it trivial to spot errors.
At Neighborhoods.com, we have an engineering value called The Pit of Success that states:
“Because others will share in my work, I must ensure that the work I produce guides my team toward good practices by making bad practices difficult.”
…
Ryan Finni
Front End Engineer
