Miyuki Satake
@satake-miyuki.bsky.social
🗾Front-end Developer in Japan
CSS, HTML, JS, DesignSystem, Accessibility
I'm practicing English.
CSS, HTML, JS, DesignSystem, Accessibility
I'm practicing English.
Reposted by Miyuki Satake
Fought my way through to level 35 and for now I'm like, nope!
Fun though: neal.fun/not-a-robot/
Thanks @neal.fun 😄
Fun though: neal.fun/not-a-robot/
Thanks @neal.fun 😄
I'm Not a Robot
Prove your humanity
neal.fun
September 17, 2025 at 6:37 AM
Fought my way through to level 35 and for now I'm like, nope!
Fun though: neal.fun/not-a-robot/
Thanks @neal.fun 😄
Fun though: neal.fun/not-a-robot/
Thanks @neal.fun 😄
I'm excited to start my first day at my new company today.
August 3, 2025 at 11:24 PM
I'm excited to start my first day at my new company today.
Reposted by Miyuki Satake
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.
May 21, 2025 at 3:41 AM
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.
Reposted by Miyuki Satake
[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
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
Are 'CSS Carousels' accessible?
– The personal website of Sara Soueidan, inclusive design engineer
sarasoueidan.com
May 6, 2025 at 3:27 PM
[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
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
Reposted by Miyuki Satake
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-...
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().
css-tricks.com
January 13, 2025 at 3:09 PM
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-...
Reposted by Miyuki Satake
⚙️ 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
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
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!.
css-generators.com
May 12, 2025 at 9:48 AM
⚙️ 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
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☀️
I've been looking forward to this longest holiday of the year!
Fingers crossed for sunny weather during the holidays☀️
May 2, 2025 at 10:06 AM
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☀️
I've been looking forward to this longest holiday of the year!
Fingers crossed for sunny weather during the holidays☀️
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...
There is a transcript in Japanese so you can read as well as listen to the audio.
www.mitsue.co.jp/knowledge/te...
#69「書籍『デザインシステムの育て方』からの学び 後編」 | ミツエーテックラジオ | ミツエーリンクス
書籍 『デザインシステムの育て方』のチャプター5～10を読みながら、ミツエーリンクスのコーポレートサイト、採用サイトで取り組んだデザインシステムについての振り返りを交えつつ、デザインシステムの役割や取り組み方などの話をしました。...
www.mitsue.co.jp
April 23, 2025 at 2:41 AM
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...
There is a transcript in Japanese so you can read as well as listen to the audio.
www.mitsue.co.jp/knowledge/te...
Reposted by Miyuki Satake
Reposted by Miyuki Satake
The Principles Of Web Accessibility are now available in
• French
• Spanish
• Dutch
• Japanese
🤘🤘
github.com/Heydon/princ...
• French
• Spanish
• Dutch
• Japanese
🤘🤘
github.com/Heydon/princ...
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.
github.com
April 22, 2025 at 11:02 AM
The Principles Of Web Accessibility are now available in
• French
• Spanish
• Dutch
• Japanese
🤘🤘
github.com/Heydon/princ...
• French
• Spanish
• Dutch
• Japanese
🤘🤘
github.com/Heydon/princ...
We talked while reading the Japanese version of @danmall.bsky.social 's book "Design That Scales" entitled "デザインシステムの育て方"
www.mitsue.co.jp/knowledge/te...
www.mitsue.co.jp/knowledge/te...
#68「書籍『デザインシステムの育て方』からの学び 前編」 | ミツエーテックラジオ | ミツエーリンクス
書籍 『デザインシステムの育て方』のチャプター1～4を読みながら、ミツエーリンクスのコーポレートサイト、採用サイトで取り組んだデザインシステムについて振り返りを交えつつ、デザインシステムの概要について話しました。...
www.mitsue.co.jp
April 17, 2025 at 9:53 AM
We talked while reading the Japanese version of @danmall.bsky.social 's book "Design That Scales" entitled "デザインシステムの育て方"
www.mitsue.co.jp/knowledge/te...
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.
Switching from SVG to CSS seems difficult, but let's give it a try.
Have you ever wished you could make a real-deal complex shape in CSS? The web’s had circle(), ellipse() and polygon() for years. But in order to do anything more SVG-style syntax was required.
Well, no more. Now, you can make complex shapes in CSS!
webkit.org/blog/16794/t...
Well, no more. Now, you can make complex shapes in CSS!
webkit.org/blog/16794/t...
The CSS shape() function
Shapes are an important aspect of graphic design.
webkit.org
April 15, 2025 at 9:48 PM
I'd like to try using shape().
Switching from SVG to CSS seems difficult, but let's give it a try.
Switching from SVG to CSS seems difficult, but let's give it a try.
Reposted by Miyuki Satake
April 3, 2025 at 1:30 AM
Bulk Suppressions is cool.
ESLint v9.24.0 includes a new bulk suppressions feature to help you systematically apply lint rules to your repository. Iacovos Constantinou explains what it is and how to use it:
eslint.org/blog/2025/04...
eslint.org/blog/2025/04...
Introducing bulk suppressions - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
eslint.org
April 9, 2025 at 12:49 AM
Bulk Suppressions is cool.
Reposted by Miyuki Satake
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...
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...
Making :visited more private | Blog | Chrome for Developers
How Chrome now prevents privacy leaks that use visited links.
developer.chrome.com
April 2, 2025 at 8:58 PM
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...
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...
Reposted by Miyuki Satake
Here's a custom select starter with all the stuff done for transition animations
nerdy.dev/notebook/sel...
nerdy.dev/notebook/sel...
Select | Nerdy Notebook
nerdy.dev
March 30, 2025 at 7:34 PM
Here's a custom select starter with all the stuff done for transition animations
nerdy.dev/notebook/sel...
nerdy.dev/notebook/sel...
Reposted by Miyuki Satake
🚀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/blog/the-cus...
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. ...
utilitybend.com
March 13, 2025 at 11:32 AM
🚀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/blog/the-cus...
Reposted by Miyuki Satake
🎉 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:
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:
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!
whimsy.joshwcomeau.com
February 24, 2025 at 4:32 PM
🎉 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:
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:
Reposted by Miyuki Satake
It's not Baseline, but CSS-only carousels are coming to Chrome 135!
developer.chrome.com/blog/carouse... by @nerdy.dev
developer.chrome.com/blog/carouse... by @nerdy.dev
Carousels with CSS | Blog | Chrome for Developers
Support scroll experiences with navigation buttons and markers with just a few lines of CSS.
developer.chrome.com
March 20, 2025 at 9:19 PM
It's not Baseline, but CSS-only carousels are coming to Chrome 135!
developer.chrome.com/blog/carouse... by @nerdy.dev
developer.chrome.com/blog/carouse... by @nerdy.dev
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...
It's good to use it for animations and hover.
developer.mozilla.org/en-US/docs/W...
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.
developer.mozilla.org
March 19, 2025 at 9:07 AM
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...
It's good to use it for animations and hover.
developer.mozilla.org/en-US/docs/W...
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/improving-hy...
Designing dyslexia-friendly navigational components
Accessibility insights and atomic design patterns.
uxdesign.cc
March 19, 2025 at 3:07 AM
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/improving-hy...