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 …

Pure HTML + CSS Calculator

Let this blow your mind: a functioning calculator done using only HTML and CSS by Lillian Kodi. Leverages the Checkbox Hack and the Space Toggle Trick. Crazy. As you may notice the option to divide is missing. I guess it was omitted because / is a character that might throw the parser off due to …

Chrome 92 — What’s New In DevTools

New in DevTools that ship with Chrome 92 (selection): A new CSS grid editor (pictured above), similar to the Flexbox editor which shipped with DevTools in Chrome 90 Support for const redeclarations in the Console — Oh, didn’t know I needed this! Source order viewer Enhanced CORS debugging support Lighthouse 7.5 [Experimental] Protocol monitor — …