A rather geeky/technical weblog, est. 2001, by Bramus
Good writeup by Katherine Kato of several techniques on how to change the color of a link on hover, animated Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use …
Continue reading “4 Ways to Animate the Color of a Text Link on Hover”
Interesting approach by Clearleft on how they make performance clear to their clients. Instead of showing waterfall charts to their clients, they show them videos: Download the video of your client’s site loading. Then repeat the test with the URL of a competitor. Now take those videos and play them side by side. This is …
if-statementsIn this video, which is a part of the Mailcoach video course, Freek shows us how he refactors a complex if-statement. A technique which I nowadays also like using myself – especially in a React Component’s render method – is to use early returns: instead of nesting if-statements and using else-statements, the function body uses …
Again a very interesting video by Vox, especially in these COVID-19/Corona times: why is it that this new disease emerged from China and not from another country? As of early March 2020, a new coronavirus, called COVID-19, is in more than 70 countries and has killed more than 3,100 people, the vast majority in China. …
script tags
When exactly is a script loaded and when is it executed? How do the async and defer attributes affect it? What about modules? This overview/cheatsheet sums it up nicely: The cheatsheet was extracted from this tweet by Addy Osmani
Nice post comparing these three approaches and detailing why you should use the version with hooks. // #1 – Hooks const MyComponent = () => { const mousePosition = useMouse(); // mousePosition.x, mousePosition.y } // #2 – Render Props const MyComponent = () => { return ( <Mouse> {({ x, y }) => { // …
Continue reading “React: Hooks vs. Render Props vs. Higher-Order Components”
Recently I was invited as a speaker to Full Stack Ghent and PHP-WVL. At both events I brought a new talk called “Going Serverless with Google Cloud Run”. Cloud Run is a fully managed compute platform by Google that automatically scales stateless containers. By abstracting away all infrastructure management, us developers can focus on what …
useDeepCompareEffect Hook: A useEffect using deep comparison
A custom Hook by Kent C. Dodds (who else?) that might come in handy for “those situations”: React’s built-in useEffect hook has a second argument called the “dependencies array” and it allows you to optimize when React will call your effect callback. React will do a comparison between each of the values (via Object.is) to …
Continue reading “React useDeepCompareEffect Hook: A useEffect using deep comparison”
Chris Coyier wants to create a Card Component in React. But then he suddenly finds himself down the rabbit hole: how flexible does he make it? What is configurable and what is not? Where to draw the line? It sounds very familiar, as I’m always pondering over things like this when writing libraries/reusable things in …
Continue reading “Component Variations: Considerations for Creating a Card Component”