Posts, a community app by Read.cv

Thread
Jacob Medure / Jacob's Blue

WIP dark mode spotlight hover interaction for the table of contents on my blog. Any improvements?

Amin Mohamed Ajani
Replying to @jacobs_blue

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.

Jacob Medure / Jacob's Blue
Replying to @binarybaba

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?

Amin Mohamed Ajani
Replying to @jacobs_blue

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.

Jacob Medure / Jacob's Blue
Replying to @binarybaba

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...
Amin Mohamed Ajani
Replying to @jacobs_blue

: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