WIP dark mode spotlight hover interaction for the table of contents on my blog. Any improvements?
Thread
Denounce the hover for about 40 milliseconds to really know if the user _is_ hovering or not then change colour. Decreases distractions. Learnt when noodling with notion’s ui.
Thanks for the feedback! Just so I understand, you’re saying to add a delay of 40 ms after mouse enter, in order to make the effect feel more intentional?
A delay will only delay it :/ A debounce will prevent the hover-color to change unless its being hovered for more than X ms. Just something I noticed when when looking at notion :D I managed to do this via javascript but couldn't find any pure css way to do it.
You're teaching me something new! Wow. Thanks. Found this quick write up giving me a bit more context. freecodecamp.org/news/javascrip… Thanks Amin!
Debounce – How to Delay a Function in JavaScript (JS ES6 Example)
By Ondrej Polesny In JavaScript, a debounce function makes sure that your code is only triggered once per user input. Search box suggestions, text-field auto-saves, and eliminating double-button clicks are all use cases for debounce. In this tutoria...
freecodecamp.org
:D Another great article if you like reading more on this stuff. PS: it also explains throttling (same same but different) css-tricks.com/debouncing-thr…
Debouncing And Throttling Explained Through Examples | CSS-Tricks
The following is a guest post by David Corbacho, a front end engineer in London. We've broached this topic before, but this time, David is going to drive the
css-tricks.com