back button Back to blog

Dev Roundup, May 2024

In this edition discover the latest web UI advancements from Google I/O 2024, including scroll-driven animations, new UI components like the Popover API, and Chromium-exclusive quality-of-life improvements. Explore TerminalTextEffects for animated terminal effects and the sleek DM Sans font. Check out creative UI elements like a bouncy image radio group, CSS scroll-driven image carousel, interactive gradient effects, and cards with inverted border-radius. Stay updated with top web development tweets featuring new React integration for Google Maps and advanced CSS animations.

Noah Matsell • May 31, 2024
Copy URL
Contents

Around the Web 🕷

The latest in Web UI (Google I/O ‘24)

Check out all of Chrome's Web Developer related highlights since that last I/O conference. This video probably warrants its own post. There have been so many interesting new updates for developers this year:

These are all to be taken with a grain of salt -- many are supported by Chromium browsers only at the moment!

Referenced media
Get a rundown of all the things developers should know that landed in the browser for UI development since the last I/O, plus what’s on the product roadmap.S...
May 16, 2024

TerminalTextEffects

TerminalTextEffects is a terminal engine that allows you to build animated effects in your terminal. After browsing the gallery of effects available, I have the strong urge to build a CLI tool...

Referenced media
TerminalTextEffects Documentation

DM Sans - Google Fonts

Ok I'm addicted to geometric sans serif fonts.

Referenced media
DM Sans is a low-contrast geometric sans serif design, intended for use at smaller text sizes. DM Sans supports a Latin Extended glyph set, enabling typesetting

Bouncy image radio group

This is a fun way of presenting a radio group to a user. The click interaction is so bouncy and satisfying.

See the Pen Bouncy image radio group on CodePen.

CSS Scroll-Driven Image Carousel

Jhey as usual producing an impressive display of what's possible with CSS. This scrolling carousel looks and feels delightful. Don't forget to play around with the config options included in the pen.

See the Pen CSS Scroll-Driven Image Carousel on CodePen.

Interactive Gradient & Glassmorphism with noise

A relatively lightweight example of creating a beautiful interactive effect.

See the Pen Interactive Gradient & Glassmorphism with noise on CodePen.

Cards with inverted border-radius

This is a creative little twist on what has become a standard UI component/pattern -- the mighty "card".

See the Pen Cards with inverted border-radius #scss on CodePen.

Some Fave Tweets 🐦

This website is a treasure trove of sleek scroll based and interaction animations. A lot of fun to explore.

I will never get tired of learning about new web platform functionality. This week's discovery is document.currentScript, which returns the script element whose script is currently being processed. MDN reference here. Bonus points for also learning about the closest method, part of Wes Bos' initial tweet.

This recently updated library makes integrating Google maps in React apps a whole lot easier! Some examples of using library include embedding: a Basic Map, Markers and Infowindows, Marker Clustering, Geometry, Drawing, Change Map Styles, Autocomplete, Custom Map Controls, Directions, Deck.gl Overlay, Synchronized Maps, Extended Component Library.

For some reason this has been a big month for accordion menus 🤔

Like this post?

Sign up and get notified when new posts are published!

Related in "tech"

Comments