iiinova — where your digital self keeps evolving

Reposted by Miyuki Satake

Sara Joy ☠️ @sjoy.lol · 17/09/2025

Fought my way through to level 35 and for now I'm like, nope! Fun though: neal.fun/not-a-robot/ Thanks @neal.fun 😄

Miyuki Satake @satake-miyuki.bsky.social · 04/08/2025

I'm excited to start my first day at my new company today.

000

Miyuki Satake @satake-miyuki.bsky.social · 21/05/2025

In CSS, I'd like to use `display: flow-root` instead of `overflow: clip` to show outlines, but `display` is often already set for other purposes.

110

Reposted by Miyuki Satake

Sara Soueidan @sarasoueidan.com · 06/05/2025

[New blog post] Are CSS Carousels accessible sarasoueidan.com/blog/css-car... In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec. #a11y

sarasoueidan.com

Are 'CSS Carousels' accessible?

– The personal website of Sara Soueidan, inclusive design engineer

919468

Reposted by Miyuki Satake

CSS-Tricks* @css-tricks.bsky.social · 13/01/2025

A few clever ways from @monknow.bsky.social to start using the sibling-count() and sibling-index() functions — or close to it — for things like tree counting, random values, and staggered transitions. css-tricks.com/how-to-wait-...

css-tricks.com

How To Wait For The Sibling-count() And Sibling-index() Functions | CSS-Tricks

Today, I want to look into one of those cases of impatient and how the community has waited for that feature, to be specific, two upcoming functions: sibling-count() and sibling-index().

1102

Reposted by Miyuki Satake

CSS by T. Afif @css-only.dev · 12/05/2025

⚙️ New CSS Generator! Save this link for the future. A tool to easily convert any SVG shape into a CSS one in no time. Powered by the new shape() function! 🤩 css-generators.com/svg-to-css/ ✅ Single-element ✅ Responsive ✅ No more ViewBox headaches

css-generators.com

SVG to CSS Shape Converter

A simple tool to transform an SVG shape into a CSS shape. Get a modern and optimized code in no time!.

914032

Miyuki Satake @satake-miyuki.bsky.social · 02/05/2025

I'm on Japan's Golden Week holiday until May 15🏝️ I've been looking forward to this longest holiday of the year! Fingers crossed for sunny weather during the holidays☀️

010

Miyuki Satake @satake-miyuki.bsky.social · 15/04/2025

I'd like to try using shape(). Switching from SVG to CSS seems difficult, but let's give it a try.

010

Reposted by Miyuki Satake

Visual Studio Code @vscode.dev · 03/04/2025

April 16th. 9 AM PT. Be there. developer.microsoft.com/en-us/reacto...

A thumbnail that reads "VS Code Live April 16, 2025 9:00 AM PT"

0121

Reposted by Miyuki Satake

Barry Pollard @tunetheweb.com · 02/04/2025

Chrome is addressing a long-standing privacy issue with the `:visited` CSS selector. TLDR: "visited" sites will be partitioned, so visiting a link from one site, will no longer style that site as "visited" on other sites including that same link. More info: developer.chrome.com/blog/visited...

developer.chrome.com

Making :visited more private | Blog | Chrome for Developers

How Chrome now prevents privacy leaks that use visited links.

0186

Reposted by Miyuki Satake

Adam Argyle @nerdy.dev · 30/03/2025

Here's a custom select starter with all the stuff done for transition animations nerdy.dev/notebook/sel...

nerdy.dev

Select | Nerdy Notebook

1161

Reposted by Miyuki Satake

Brecht De Ruyte @utilitybend.com · 13/03/2025

🚀The customizable select was just released in Chrome 134 🤩! I’ve been playing around with this feature for quite some time and am excited to start a series. In this part1 history, trickery and how to progressively style a select element. 🥰 utilitybend.com/blog/the-cus...

utilitybend.com

The customizable select - Part one: history, trickery, and styling the select with CSS | utilitybend

Exploring customizable select elements. This series explores styling possibilities. The first article covers the history and provides a guide to building a custom select as a progressive enhancement. ...

14311

Reposted by Miyuki Satake

Josh W. Comeau @joshwcomeau.com · 24/02/2025

🎉 Introducing my upcoming third course, Whimsical Animations! This course will teach you how to build top-tier animations and interactions using a variety of techniques. ✨ You can join the waitlist on the course’s brand-new site, which is the most ridiculous thing I’ve built in quite some time:

whimsy.joshwcomeau.com

Whimsical Animations

Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!

3842268

Miyuki Satake @satake-miyuki.bsky.social · 19/03/2025

I usually use Japanese in which the underline does not overlap with the characters, so I did not realize that the underline made it difficult to recognize the characters.Underlining is often used for links, but some people find the text easier to read while others do not. uxdesign.cc/improving-hy...

uxdesign.cc

Designing dyslexia-friendly navigational components

Accessibility insights and atomic design patterns.

000

Miyuki Satake @satake-miyuki.bsky.social · 11/03/2025

The answer to what I was wondering is in this article!

020

Miyuki Satake @satake-miyuki.bsky.social · 07/03/2025

podcastを公開しました🎙️ 今回はweb.devのNew to the web platform in Februaryの中から3つのトピックを取り上げて話しています！ - The hint value of the popover attribute - CSS advanced attr() function - CSS text-box, text-box-trim, and text-box-edge www.mitsue.co.jp/knowledge/te...

mitsue.co.jp

#65「2月のWebプラットフォームの新機能」 | ミツエーテックラジオ | ミツエーリンクス

web.devで公開されているNew to the web platformシリーズの2025年2月の内容を日本語でお届けします！ ...

000

Miyuki Satake @satake-miyuki.bsky.social · 28/02/2025

Maybe if we set `*:empty{display:none}`, the `picture > src` and `picture > img` will disappear🤔?

020

Miyuki Satake @satake-miyuki.bsky.social · 28/02/2025

I could only see the + icon😅 It's convenient to be able to switch between dark and light here.

010

Miyuki Satake @satake-miyuki.bsky.social · 21/02/2025

It's been a while since I last saw it, I can't believe it's still there. ``` .class_name .class_name .class_name .class_name .class_name ul li span { background-color: gray !important; } ``` The class names continue forever. I can't win anymore😅

000

Reposted by Miyuki Satake

Bramus @bram.us · 18/02/2025

CSS @function + CSS if() = 🤯 I combined them to build a custom --light-dark() that behaves just like the built-in light-dark() but that is not limited to only <color> values. 🔗 Blog Post + Demo: www.bram.us/2025/02/18/c... 👨‍🔬 Chrome Canary + Experimental Web Platform Features

Promotional image showing some code from the post.

18016

Miyuki Satake @satake-miyuki.bsky.social · 20/02/2025

I wish I could choose the IFT settings when loading WebFont as well.Japanese loading speed is too slow🥲 www.w3.org/TR/IFT/

w3.org

Incremental Font Transfer

010

Reposted by Miyuki Satake

Polypane. Browser for web devs @polypane.app · 17/02/2025

Decoding CSS Selectors: :has(:not) vs :not(:has). Both selectors look similar but do different things. In this article we share our method for understanding what these selectors do. polypane.app/blog/decodin...

polypane.app

Decoding CSS Selectors: :has(:not) vs :not(:has) | Polypane

CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…

13910

Reposted by Miyuki Satake

Jason Lengstorf @jason.energy · 05/02/2025

okay, announcement time! as of this week, Learn With Jason (the company) has officially rebranded – we're @codetv.dev now! - CodeTV refocuses on what we produce (vs centering on me) - we now have the option to become a supporter to get early access: codetv.dev/support more to come. stay tuned!

codetv.dev

Become a CodeTV Supporter

With your help, we can make learning web dev more fun, create a welcoming and supportive community, and build resilient careers in tech. Let's do this together.

3024742

Reposted by Miyuki Satake

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 05/02/2025

<table> highlighting with CSS :has() 💡 td:has(~ td:hover), /* previous sibling cells */ table:has(td:nth-of-type(3):hover) /* column cells */ tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(3) { background: var(--highlighted); }

1438538

Miyuki Satake @satake-miyuki.bsky.social · 04/02/2025

In Japan, the term “ Taipa” is often used these days. Taipa means time-performance. Yet I wonder why there are so many requests to display VIDEO in a dialog. I think it would be better for users to be able to choose PiP or fullscreen rather than dialog, which would not hinder time-performance.

000

Reposted by Miyuki Satake

Una Kravets @una.im · 22/01/2025

Dang I'm excited about new semantic attr() capabilities in CSS! I wrote a post about why this feature is so powerful, how it could change the way you build components, and how I would use it. Advanced attr() is rolling out in Chrome 133 starting next week 🥰 una.im/advanced-attr/

una.im

una.im | New capabilities for attr()

Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.

417143