We're hiring Senior Frontend Engineers at @teamheyo! If you are interested or know of someone, please apply here: careers.heyo.is/28755

A few meandering thoughts on WordPress block themes inspired by the interesting convo that was held today by @bgardner and @thekevingeary.

👇🤯👇

Building Web Demos Q&A x.com/i/broadcasts/1djGXrYby…

Against the backdrop of some tension going on in our community, I've written a brief essay to remind folks why we show up — together — to keep making this software. We are WordPress — olliewp.com/we-are-wordpress…

Who’s going to #wcus this week?! Say “Hey!” if you see somebody wearing a WD hat 👋 us.wordcamp.org/2024/

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Whoa, check out stripe.dev! 😍 Great resource for building with @stripe 👍

Instead of playing sports or watching cartoons, kids nowadays are coding. 👀

⛓️ CSS Chain Links 67 <div>s, 260 <i>s, and about 110 lines of pure #CSS. 😀 Live demo and full code on @CodePen: codepen.io/amit_sheen/full/M…

🔥 NEW WEB DEV CHALLENGE DROPS RIGHT NOW 🔥 Build and e-commerce app... with a twist. @shidonichan, @trostcodes, and @shaundai joined me, with support from @vlkun and this episode's sponsor, @algolia. This was a truly funny, creative group — go watch it now! (Link in thread.)

Are you old enough to remember these HTML tags? 🤔

CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit @CodePen link blow! 👇

Firefox 117 was released yesterday, which means that native CSS Nesting is now supported in all major browsers: Chrome, Safari, Edge, and Firefox! No transpilation required! Try it out in your browser here: codepen.io/web-dot-dev/pen/R… Learn more about CSS Nesting: developer.chrome.com/article… See other new features in Firefox 117: mozilla.org/en-US/firefox/11…

Are you thinking about a new Software Engineering job? Want to have a big impact at a small, fast-growing startup? Want to work with @laravelphp and @vuejs every day? Come and help us build the future of payments for software companies! 🍋 lemonsqueezy.getoutline.com/…

Merging Letter Toggle codepen.io/jkantner/pen/gOZr… #CSS #SVG

"glowy hover effect" by Ines codepen.io/inescodes/pen/Pox…

Made a swipeable tabs component with React Aria Components, Framer Motion, and CSS scroll snapping. The position of the selection indicator is entirely driven by the scroll position so it feels smooth and responsive. Try it out! ✨ codesandbox.io/s/rac-framer-…