WWDC: Meet Safari 15

In this video from the most recent WWDC, Jen Simmons (Web Technologies Evangelist) and Myles Maxfield (Safari and WebKit Engineer) introduce Safari 15. Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in …

Demystifying styled-components

Josh W. Comeau lays out the details how styled-components works internally. For so many React devs, styled-components seems kinda magical. It isn’t at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we’ll learn exactly how styled-components works by …

Multi Colored Text with CSS

Nice text-effect demo by Shireen Taj: Using DevTools you can see that there’s a gradient background set onto the element. By also applying -webkit-background-clip: text; the gradient is only shown on the text itself. The demo’s also fun to fork and remix: Add some Houdini to animate it See the Pen Multi Colored Text with …

How to optimize ORDER BY RANDOM()

Doing a ORDER BY RAND() in SQL is bad. Very bad. As Tobias Petry details (and Bernard Grymonpon always used to tell at local meetups): Ordering records in a random order involves these operations: Load all rows into memory matching your conditions Assign a random value RANDOM() to each row in the database Sort all …

How to Clean up Async Effects in React

Dmitri Pavlutin walks us through properly cleaning up side-effects in React: From time to time you might have difficulties at the intersection of component lifecycle (initial render, mount, update, unmount) and the side-effect lifecycle (start, in progress, complete). Tackled are fetch requests, timers like setTimeout(), debounce or throttle functions, etc. With the techniques applied, you …