argyleink

chriscoyier, 6 days ago to random

Toniebox

Another kid's device we have that we've gotten tons and tons of use out of is the Toniebox. It's this soft padded box with a speaker on it (or plug in headphones). You place a character on it (a "Tonie") and it plays the audio associated with that Tonie. It basically tells stories. We heard about it from another family where the kid referred to it as "listening to their podcasts".

https://chriscoyier.net/2024/05/24/toniebox/

argyleink, 8 days ago to CSS

steal this dialog and popover snippet #CSS

• transitions
• entry/exit
• backdrop included

ready for richer design system integration

try on Codepen
https://codepen.io/argyleink/pen/zYbQBOm

pawelgrzybek, 9 days ago to CSS

Could you believe there is no JavaScript involved in this popover enter and exit animations? Just a few lines of CSS!

Thanks @argyleink. I learned all of it from your recent blog post!

https://codepen.io/pawelgrzybek/pen/rNgeQKe

#css

The Popover enter and exit animation with pure CSS. No javascript.

argyleink, 10 days ago to CSS

#CSS env() variables

**iOS: **
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

**Foldables: **
env(viewport-segment-width);
env(viewport-segment-height);
env(viewport-segment-top);
env(viewport-segment-left);
env(viewport-segment-bottom);
env(viewport-segment-right);

**PWAs: **
env(titlebar-area-x);
env(titlebar-area-y);
env(titlebar-area-width);
env(titlebar-area-height);

argyleink, 10 days ago to random

Using @starting-style and transition-behavior for enter and exit stage effects

How to leverage first render and display: none as transition triggers for any element

⤷ https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects

argyleink, 15 days ago to random

#CSS4 and #CSS5 RFC is live and ready for community feedback!

⤷ https://github.com/CSS-Next/css-next/discussions/92

Curious what features are in each bucket?
The RFC has it all laid out.

Disagree with a categorization?
Make a comment!

We want to hear from you!
Help us ensure we've mapped the features into buckets you agree with, can teach, can learn, and can grow with.

https://nerdy.dev/css4-and-css-5-and-beyond

argyleink, 16 days ago to random

🆕 Mini Web Machine - The Pile

• element layering layout machine
• replaces many use cases for position: absolute
• offers group or individual keyword alignment
• can be intrinsically sized based on content

Watch on YouTube!
https://www.youtube.com/watch?v=6qpEOBkDr88

⤷ https://nerdy.dev/the-pile-mini-web-machine

argyleink, 16 days ago to random

the AirBnb CEO said "design systems are obsolete"?! anyone have a link to this assertion?

argyleink, 1 month ago to random

VisBug v0.4.0 - Release notes

https://nerdy.dev/a-2024-visbug-update

Devtools DOM view showing the #top-layer with 4 visbug components inside: .
screenshot of the new contrast inspection overlay, that now shows APCA and L* scores.

argyleink, 1 month ago to CSS

#CSS paint-order

https://nerdy.dev/css-paint-order

image/png

argyleink, 1 month ago to random

Introducing the GUI Challenges series successor:

**Mini Web Machines! **
Tiny bits of code that power great UX.

• shorter episodes
• copy and paste free code
• narrower focus
• meaningful use cases

Watch episode 1: The Looper
https://www.youtube.com/watch?v=vwgihljM2e4

https://nerdy.dev/announcing-the-mini-web-machines-series

argyleink, 1 month ago to random

VisBug v0.4.2 live in the Firefox Addon store!

• Modern color support
• New accessibility contrast results that include APCA and L* information in addition to WCAG
• HDR color
• VisBug components in the top-layer so it's always on top your pages contents

Hope this helps y'all!

https://addons.mozilla.org/en-US/firefox/addon/visbug/

argyleink, 1 month ago to random

My Chrome Canary tab groups are pretty exciting!

• scroll-start and scroll-start-target
• customizable <select>
• anchor() positioning
• sticky queries
• snap queries
• text-box-trim
• line-clamp
• progress()

not shown:

• ::scroll-markers

the platform be busy!

argyleink, 1 month ago to random

I love propagating in these science beakers. The roots look awesome, the shape gives support.. and looks rad

Got a lipstick start in this one, will probably give it away to a friend.

scottjehl, 1 month ago to random

How would you build Wordle with just HTML & CSS?

In this blog post, I talk about why I think that'd be a good interview question, and I take a stab at answering it as well.

https://scottjehl.com/posts/wordleish/

argyleink, 1 month ago to random

I'm listening!
book one of my 30m openings on my calendar:

https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3TwEl8JnpqBJE04F7t_efC_o1Ry9a5swW6lmuWqOmp3iwxk-qaWEGk7JgWfjWdIa7nIFiBZDZN

CSS concerns, thoughts, needs or wants?
Help me help y'all 🤓

keithjgrant, 1 month ago to random

Does the new CSS light-dark() do anything to support sites that have a light mode/dark mode toggle switch?

argyleink, 1 month ago to random

apparently progressive enhancement is scary?

so much fear around the concept when talking with folks.