Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code > Superfast WebGL canvas, fully editable, running parallel design agents > Runs locally with Claude Code → turn designs into code > Design files live in your git repo → Open json-based .pen format

this is the end of web devs

the perfect github repo doesn’t exi…

I'm exploring my physics engine. Searching for that game feeling, that makes every second of playing feel good. Here's all I tried.

you can’t make this stuff up.

"When the project guidelines are as clear as mud and the deadlines are as flexible as a brick, you know you've truly entered the magical realm of software development."

#Haxe Roundup 712 haxe.io/roundups/712/ is out! 🔥 The HaxeJam Summer Jam results are in! 🎮 The latest articles, announcements, trailers and more! 📰 And lots more from the community over the last two weeks!

My theory: burnout has nothing to do with how many hours or how hard you work. It's caused by working for people you don't like, towards goals you don't believe in, in systems that grant you no agency.

Time for a new mind-bending project! #QLOCK — A JavaScript Quine Clock aem1k.com/qlock It displays the current time in a seven-segment style, embedded within its own JavaScript source code. 🕔 🕝 🕢 🕤 🕑 🕜 (321 bytes)

Ready for "Super CSS Mario II"? This time it's more challenging because you have to avoid some enemies 😬 0% JavaScript, 100% CSS magic & 100% addictive! Demo: codepen.io/t_afif/full/JjqEd… via @CodePen Show me your best attempt 👇

I turn 12 on @CodePen in less than a month, so here are my most hearted demos ever: 1⃣ 955 ❤️ Pure CSS gravity button codepen.io/thebabydino/pen/b… My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!

#haxeui 1.7.0 released! You can read more about it here! community.haxeui.org/t/haxeu…

one man, ffmpeg, 5 minutes, and a dream

Steve Jobs on iPhone design October 5, 2005

using a <div> as a <button>

I've finally figured out who the target audience for tailwind is. People who previously wrote CSS like this:

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @​keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @​keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 @CodePen link below 👇

People with fewer responsibilities and a lot of slack time are uniquely positioned to become influencers. To some degree, this is bad. We need more of the opposite type to influence the world.

Does anyone ever see this screen and basically decide "you know what, I don't need to use github today"?