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! 👇
As long as I feel like I'm in a safe space, I'm 100% gonna be the one to ask the "dumb" question
And it always ends up adding so much to the discussion
Strongly recommend ♥️
I worked on Space Cadet Pinball (the port to Windows), and here's the secret back door that remains to this day. There were technical reasons for keeping it that won't fit in the margin.
Type "hidden test" without the quotes to activate it.
Press H to edit the high scores.
Press M for memory stats.
Press R to increase your rank
Press Y for FPS
To get out of this mode simply press the space bar.
New hobby: prototyping video games in 60 seconds using a combination of GPT-3 and DALL-E
Here's "Raccoon Heist"
ALT GPT-3 playground interface
My prompt: Write a detailed product description of a computer game where a team of raccoons go on heists
GPT-3 response:
In "Raccoon Heist", you and your team of thieving raccoons are tasked with pulling off a series of daring heists. From robbing banks to stealing priceless art, no job is too big or too small for your furry crew. You'll need to use your wits and your skills to avoid the police and make a clean
getaway with the loot. With exciting gameplay and a charming cast of characters, "Raccoon Heist" is the perfect game for anyone looking for a light-hearted caper.
ALT A stylish image of a 3D computer game, with two raccoons sneaking down a street past a futuristic looking building, looking like they want to steal something
Prompt was: "Screenshot from a video game where a team of raccoons go on a heist"
ALT A meme from the office where the first picture is Michael Scott on the phone and the text reads I think you're overthinking it and the bottom picture is a picture of Jim with a surprise look on his face and the text reads I think you're under thinking it
I mis-clicked on one of my 150 open tabs and it happened to be a tab that's been open since 2019 with a paper that has a solution to the exact research problem I've been puzzling over today. This is the moment I've been waiting for and I've decided to never close any tabs again
For some reason, I hadn't paid attention to W3C specs now having browser support listed as well. Great!
E.g. w3c.github.io/payment-reques…
Thanks @dontcallmeDOM for making me aware
Nice update to VS Code if you use cSpell spell checker.
Set "cSpell.diagnosticLevel": "Hint",
It both gives you a bit more of a subtle UI (no squiggle), and takes the spelling mistakes out of the Problems panel
Ten years ago today @mattsmcnulty and the old #EnyoJS team brought me down to SF for an internship and completely changed my life. Eternally grateful. Time has just flown by, wow