[B! UI][*react.js] yamadarのブックマーク

Magic UI

UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.

yamadar 2024/05/24

オープンソースのUI。

リンク

■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ただ、なぜ渡すべきでないのか？理解してなかったので今回調べてみました。サンプルコード今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ユーザーにとって操作性の低いボタンになってしまうから、です！要するに UX が悪くなってしまうから！その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないからスクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。なので、tabキーで要素に

yamadar 2023/06/19

“div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないからスクリーンリーダーが認識しない要素だから ”操作性が低いボタンになってしまう。

リンク

2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか

本記事は、「なぜ仮想 DOM という概念が俺達の魂を震えさせるのか」 https://qiita.com/mizchi/it ems/4d25bc26def1719d52e6 の 2020 年版のリライトです。 2014 年当時、日本においては React は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。オリジナルは2014 年末の情報によって書かれたもので、さすがに 6 年経った今では情報が古くなっており、当時の暗黙のコンテキスト、古いリソースの参照、初学者の混乱を招く表現が残ったままになってしまっています。定期的に更新しようとも思いましたが、そうすると 2014 年末の歴史的な背景を失ってしまうため、あえてそのまま残し、新しい記事を投稿することにしました。増補改訂版というより、ほぼ書き直しです。この記事は本来なら

yamadar 2020/09/21

リンク

Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita

🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった

yamadar 2020/07/19

リンク

Flutter感想｜mizchi

これは Java 屋の発想で再実装された言語である dart を使った、 Java 屋の発想で再構築された React だ。 FlutterがReactインスパイアであることは既に宣言されてる。StatelessWidget と StatefulWidget が分離され、State が書き換わった際はState から下のコンポーネントが再構築される。ライフサイクルメソッドがあるので、仮想DOM的な差分管理もしてるはず。 https://docs.flutter.io/flutter/widgets/State-class.html#dispose Flutter は React.createElement の代わりに Widget を継承して React の render 相当の build を override してひたすら Wigdet を new する。Reactの非常にJava