WebDeveloper.com⚡

Building LLM resources for modern web development.

[Rob Davarnia @robdvr]

We're hiring Senior Frontend Engineers at @teamheyo!

If you are interested or know of someone, please apply here:
https://t.co/GoIlJregp0

[Mike McAlister @mikemcalister]

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

[WebDeveloper.com⚡ @WebDeveloperHQ]

@BHolmesDev @trostcodes Ummm, pretty sure you have a stalker on your hands… 🤘😆🤘

[WebDeveloper.com⚡ @WebDeveloperHQ]

👇🤯👇

[OpenAI Developers @OpenAIDevs]

Introducing canvas—your coding surface in ChatGPT.

✏️ Edit code inline
🐛 Review code and fix bugs
💬 Add logs and comments
🚢 Port to different languages

We’ll be adding more to canvas over time. ChatGPT Plus and Team users can try the beta starting today.

[Jason Lengstorf @jlengstorf]

Building Web Demos + Q&A https://t.co/t64kB0gqfR

[Mike McAlister @mikemcalister]

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 — https://t.co/xIG7yiPmL4

[WebDeveloper.com⚡ @WebDeveloperHQ]

Who’s going to #wcus this week?!

Say ��Hey!” if you see somebody wearing a WD hat 👋

https://t.co/8ue9GMshA1

[Wes Bos @wesbos]

Are you using position: absolute; to overlap elements?

It's almost always better to Use CSS Grid instead!

[WebDeveloper.com⚡ @WebDeveloperHQ]

Whoa, check out https://t.co/PDn9haN3yY! 😍

Great resource for building with @stripe 👍

[Vivek Naskar @vivek_naskar]

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

[WebDeveloper.com⚡ @WebDeveloperHQ]

@amit_sheen @CodePen 🤘🤯🤘

[Amit Sheen @amit_sheen]

⛓️ CSS Chain Links

67 <div>s, 260 <i>s, and about 110 lines of pure #CSS. 😀

Live demo and full code on @CodePen: https://t.co/QTKkKHoyRg

[Jason Lengstorf @jlengstorf]

🔥 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.)

[Daniel Cranney 🇬🇧 @danielcranney]

Are you old enough to remember these HTML tags? 🤔

[WebDeveloper.com⚡ @WebDeveloperHQ]

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

[jhey ʕ•ᴥ•ʔ @jh3yy]

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! 👇

[Steve Harrison @stevenaharrison]

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: https://t.co/mwSjySwY4M

Learn more about CSS Nesting: https://t.co/ZCZjcMJJVN
See other new features in Firefox 117: https://t.co/b0ogAVAeLy

[Gilbert Pellegrom @gilbitron]

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! 🍋

https://t.co/Y9GqGzZLcu

[Jon Kantner @jonkantner]

Merging Letter Toggle
https://t.co/M9fJj9ByxU #CSS #SVG

[CodePen.IO @CodePen]

"glowy hover effect" by Ines

https://t.co/Ua26FlE7cG