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.
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:
- Novel interactive experiences: scroll-driven animations (also check out this awesome scroll related crash course), View Transitions updates
- Engine-enabled UI components: Popover API, Anchor positioning, customizable select, and many other small changes.
- Quality of life improvements: architecture, layout, typography, responsive design
These are all to be taken with a grain of salt -- many are supported by Chromium browsers only at the moment!
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...
DM Sans - Google Fonts
Ok I'm addicted to geometric sans serif fonts.
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.
Website Of The Day is Konpo https://t.co/kxhoXYeais
— CSS Design Awards (@cssdesignawards) May 11, 2024
by Konpo @konpo & Bear Plus #webdesign #webdev #cssdaWOTD #CSSDesignAwards pic.twitter.com/n9DEZnGGqK
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.
document.currentScript 🤯 https://t.co/ICMEbHTpk0
— Scott Martin 🛠️ (@scottdotjs) May 12, 2024
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.
Our #React integration library graduates to 1.0! 🎉
— Google Maps Platform (@GMapsPlatform) May 14, 2024
Expect:
⚛️ Google Maps as React components with state and hooks
⚡️ Seamless integration with https://t.co/TrF1XC12eM
🗝️ Extensibility that unlocks custom component creation
Learn more → https://t.co/Fe2VFslxWH #GoogleIO pic.twitter.com/NgCYQgIvsX
For some reason this has been a big month for accordion menus 🤔
CSS magic: now you can animate height from 0 to auto via `calc-size(auto)`
— 一丝 (@yisibl) May 17, 2024
Say goodbye to JS Calculate Height!
Combined with <details name="">, a nearly perfect and exclusive Accordion component can now be implemented. @Una @davidbaron https://t.co/OKf6BEzETk pic.twitter.com/Jvy622RWwN
Some animations for accordions made with <details> and <summary>https://t.co/OS6vTcNQ6l @CodePen #CSS #JS pic.twitter.com/zayO91Or3E
— Jon Kantner (@jonkantner) May 14, 2024