Dev Roundup, Jun 2024

Around the Web 🕷

Promises From The Ground Up

Josh Comeau is an excellent teacher. Unsurprisingly, this deep dive on JS Promises is one of the best explanations I've seen. I wish this resource was around when I was first learning Promises!

The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it doesn’t make much sense at all! In this tutorial, you’ll build an intuition for how Promises work by getting a deeper understanding of JavaScript and its limitations.

CSS Utility Classes and "Separation of Concerns"

This is an older post, but it's a really interesting look into the thought process and evolution of Tailwind's utility-first CSS philosophy.

Over the last several years, the way I write CSS has transitioned from a “semantic” approach to something more like what people call “functional CSS.” In this post I explain how I got to this point and share some of the lessons and insights I’ve picked up along the way.

Turborepo 2.0

I'm sharing this because the newly designed terminal interface. It looks to improve monorepo tasks and logging, which I've always found a challenge with Turborepo. This release also saw a much needed update to the Turborepo docs.

Turborepo 2.0 is a milestone for the ergonomics of JavaScript and TypeScript monorepos.

Tailscan - Browser inspector for Tailwind CSS

I might be late to the game with this one. But if you are a Tailwind user, this tool is seriously tempting. It brings live element debugging back to the browser for Tailwind classes.

Tailscan is the ultimate developer tool for Tailwind CSS. Build, design and debug your Tailwind website visually, right within the browser.

Remotion | Make videos programmatically

A really interesting project for programmatically creating videos as a developer. Something really clicked for me when I tried out their github username demo. Enter your github username and watch as a personalized video is instantly created.

Create MP4 motion graphics in React. Leverage CSS, SVG, WebGL and more technologies to render videos programmatically!

Dracarys by Robert Borghesi

Dracarys is a WebGL experiment built with ThreeJS. It truly pushes the limit of what I thought was possible for interaction and animation in browsers.

Dracarys, a experimental WebGL experiment by Robert Borghesi on GPGPU animations and postprocessing effects

New JavaScript Set methods | MDN Blog

A major power-up for Sets. The TL;DR:

• intersection() returns a new set with elements in both this set and the given set.
• union() returns a new set with all elements in this set and the given set.
• difference() returns a new set with elements in this set but not in the given set.
• symmetricDifference() returns a new set with elements in either set, but not in both.
• isSubsetOf() returns a boolean indicating if all elements of a set are in a specific set.
• isSupersetOf() returns a boolean indicating if all elements of a set are in a specific set.
• isDisjointFrom() returns a boolean indicating if this set has no elements in common with a specific set.

New JavaScript Set methods are landing across browsers. Learn about sets, how you can use these methods to compare different sets, create new sets with specific properties, and more.

Figma Updates

Figma's an important tool for many developers. And this month, they've released some big updates including: Figma Slides, a newly redesigned UI for the Figma interface, and (the somewhat contentious??) Figma AI.

Create custom presentations for any event with Figma Slides. Effortlessly design, customize, and share visually appealing slides to captivate your audience.

Our biggest redesign of Figma’s interface in five years clears space on the canvas for designers to turn their wildest imagination into reality.

June 26, 2024

Screen Studio — Professional screen recorder for macOS

I believe creating beautiful screen recordings is a great way to level up as a developer. It's an easy way to give your features the love and attention they deserve. Screen studio makes beautiful screen recordings by default. Zero extra effort is required. I think I'm going to bite the bullet and get a full license.

Screen recorder for macOS. Create engaging product demos, courses, tutorial and social media videos. Add automatic zoom on mouse actions, smooth mouse movement, and other powerful effects and animations. Designed for macOS.

Some Fave Tweets 🐦

At first I laughed, but now I'm seriously considering using these 🤔

The ultimate pair of idgaf aliases

Add what files? How about all of them

Commit message? idk what day and time is it

OK, now let's push pic.twitter.com/S3ljL47Wjw

— Kristian Freeman (@kristianf_) June 14, 2024

My monthly jhey fanboy content:

Updated so you can configure the parallax behavior with CSS custom properties 🤙

- amount the images translate (translate)
- when they translate (scroll-padding-inline)

(added reflection too because why not 😅) https://t.co/SPXoElNOI1 pic.twitter.com/b4GkKaytPW

— jhey ▲🐻🎈 (@jh3yy) June 14, 2024

Responsive inverted reveal scroller with CSS 🤙

img {
position: fixed;
animation: clip;
animation-timeline: --section;
animation-range: exit;
}
@​keyframes clip { to { clip-path: inset(100% 0 0 0); }

Fix the image, animate clip on parent scroll position (--section) ✨ pic.twitter.com/5rtWDcq8dm

— jhey ▲🐻🎈 (@jh3yy) June 26, 2024