Miyuki Satake

I'm Not a Robot Prove your humanity

Fought my way through to level 35 and for now I'm like, nope!

Fun though: neal.fun/not-a-robot/

Thanks @neal.fun 😄

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

Responsive web design turns fifteen. — ethanmarcotte.com The original “Responsive Web Design” article was published fifteen years ago. Time’s weird, man.

🦊

Responsive design turns fifteen today! WHAT IS TIME ethanmarcotte.com/wrote/respon...

Thanks, `contain: content` did the trick!

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.

Are 'CSS Carousels' accessible? – The personal website of Sara Soueidan, inclusive design engineer

[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

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

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

⚙️ 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

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☀️

#69「書籍『デザインシステムの育て方』からの学び 後編」 | ミツエーテックラジオ | ミツエーリンクス 書籍 『デザインシステムの育て方』のチャプター5～10を読みながら、ミツエーリンクスのコーポレートサイト、採用サイトで取り組んだデザインシステムについての振り返りを交えつつ、デザインシステムの役割や取り組み方などの話をしました。...

We talked about how to use design systems as we read from the Japanese version of the book "Design That Scales", "How to Grow Your Design System".

There is a transcript in Japanese so you can read as well as listen to the audio.

www.mitsue.co.jp/knowledge/te...

Launching the W3C Docs Community Group Open Web Docs supports web platform documentation for the benefit of web developers & designers worldwide. We are a community of web developers, standards makers, and technology companies that rely on...

Launching the W3C Docs Community Group

openwebdocs.org/content/post...

GitHub - Heydon/principles-of-web-accessibility: How to approach accessible web interface design How to approach accessible web interface design. Contribute to Heydon/principles-of-web-accessibility development by creating an account on GitHub.

The Principles Of Web Accessibility are now available in

• French
• Spanish
• Dutch
• Japanese

🤘🤘

github.com/Heydon/princ...

Without talented people like you, web developers would be at a great loss. We look forward to your continued success!

#68「書籍『デザインシステムの育て方』からの学び 前編」 | ミツエーテックラジオ | ミツエーリンクス 書籍 『デザインシステムの育て方』のチャプター1～4を読みながら、ミツエーリンクスのコーポレートサイト、採用サイトで取り組んだデザインシステムについて振り返りを交えつつ、デザインシステムの概要について話しました。...

We talked while reading the Japanese version of @danmall.bsky.social 's book "Design That Scales" entitled "デザインシステムの育て方"

www.mitsue.co.jp/knowledge/te...

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

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

April 16th. 9 AM PT. Be there.

developer.microsoft.com/en-us/reacto...

Bulk Suppressions is cool.

CSS Naked Day 2025 April 9 is CSS Naked Day!

CSS Naked day 2025✨

css-naked-day.org/2025.html

ベンダープレフィックスが必要なCSS プロパティ 2025 | フロントエンドBlog | ミツエーリンクス Webプラットフォームの相互運用性が向上し、ベンダープレフィックスを必要とするCSSプロパティが少なくなりつつあります。 しかし、すべてのCSSプロパティでプレフィックスが不要とまでには至っておらず、Interop 2025でもプレ...

I wrote a related blog.

CSS properties requiring vendor prefixes 2025
www.mitsue.co.jp/knowledge/bl...

Thank you - styled-components First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would nev...

Thank you, styled-components too!

opencollective.com/styled-compo...

Making :visited more private  |  Blog  |  Chrome for Developers How Chrome now prevents privacy leaks that use visited links.

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

Here's a custom select starter with all the stuff done for transition animations

nerdy.dev/notebook/sel...

#66「Interop 2025の注力エリアを見てみよう」 | ミツエーテックラジオ | ミツエーリンクス 過去のエピソードでは、Interop 2025の注力エリアとして提案されている機能をいくつかご紹介しました。今回は最終的に選ばれた注力エリアを簡単にご紹介します！...

We talked about the features selected for interop2025.

www.mitsue.co.jp/knowledge/te...

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

🚀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...

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!

🎉 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:

Carousels with CSS  |  Blog  |  Chrome for Developers Support scroll experiences with navigation buttons and markers with just a few lines of CSS.

It's not Baseline, but CSS-only carousels are coming to Chrome 135!
developer.chrome.com/blog/carouse... by @nerdy.dev

mask-composite - CSS: Cascading Style Sheets | MDN The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

My favorite CSS property these days is `mask-composite`.
It's good to use it for animations and hover.

developer.mozilla.org/en-US/docs/W...

Designing dyslexia-friendly navigational components Accessibility insights and atomic design patterns.

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

text-decoration-thickness - CSS: Cascading Style Sheets | MDN The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

I have added `text-decoration-thickness: from-font` to my reset.css, as font files sometimes contain recommended `text-decoration-thickness` information.

developer.mozilla.org/en-US/docs/W...

text-emphasis - CSS: Cascading Style Sheets | MDN The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color.

`text-emphasis`
Surprisingly, I haven't had a chance to use this property.

developer.mozilla.org/en-US/docs/W...