WebDeveloper.com⚡

🔥 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? 🤔

@jh3yy Niiice, but now you gotta show us how you made that sprite 😉

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/pe… Learn more about CSS Nesting: developer.chrome.com/articles/css-n… See other new features in Firefox 117: mozilla.org/en-US/firefox/…

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/s/b88a7831-70e…

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

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