kyaidoのブックマーク - はてなブックマーク

すぐ消えてしまう要素をDevToolsで確認するTips集

はじめにこんばんは！皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

kyaido 2024/10/04

リンク

Rails vs Node.js

Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります前書きフロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony

kyaido 2024/10/03

リンク

【特集】膨張したリチウムイオンバッテリ、正しい処分方法は？家電量販店、スマホキャリア、メーカー、自治体に聞いてみた

kyaido 2024/10/02

リンク

埼玉にある、武者小路実篤が作った社会主義っぽい村落共同体へ行く - 今夜はいやほい

「暇だね」「暇だねえ」と配偶者は答えた。じゃあどこか行こうかということになったのだけど、埼玉のぱっと思いつくようなところはすでに訪問済みの場所が多く、どこに行けばいいのか分からなかった。「湖でも行く？」僕はGoogleマップで適当にスワップを続けていた。「涼しげでいいね。そうしようか」ということで、タイムズカーシェアの車に乗り込み、Googleマップで見つけた、比較的近くにある鎌北湖なる湖に行ってみることにした。湖だった。「湖だね」「そうだね」という会話をした。あまり深く調べもせずに、とりあえず来てみたら、結果、特に大した特徴もない、言葉の通りのただの湖だった。とりあえず、写真を何枚か撮り、伸びをして、少し散歩して、事足りてしまった。猫は気持ちよさそうに眠っていた。当座の目的は達成された。やや不完全燃焼の感は否めないが、まあ他にすることもないし帰るかと車に乗ってしばら

kyaido 2024/10/02

リンク

typeとinterfaceって結局どう使い分ければ良いの？

TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。おおよそ両者同じことができるので、どちらを使うか迷います。両者の使い分けに関する記事は沢山あります。これらの記事を読んで基本的にはtypeを使えば良いと思っていました。ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる

kyaido 2024/10/02

リンク

翻訳記事：連合型デザインシステムの誤り｜Nobuya Sato

気になる文章、読むときについでに訳しとこう活動？ですが、今回は、日本のデザインシステムの現場でも参照されることの多い、Nathan Curtis（@nathanacurtis）の最新記事を訳してみました（本人許諾済み）訳し出したのを後悔するほど長文です😂 例によって記事内に過去記事へのリンクが点在してます。興味ある人はそちらも記事も目を通すと良いと思いますが、膨大です。この記事では、以前「連合型（Federated）」がデザインシステムのサポートチームの育成モデルとして効果的な方法として推奨していましたが、実際には、「中央型（Centeral）」が前提条件であり、連合型だけでは持続可能ではないと述べています。日本の場合、連合型という名のもとに片手間でデザインシステムをやり、結果的に途中で座礁・頓挫するケースを多く見ているので、やるなら中央型を意識して取り組むべき、と個人的には思って

kyaido 2024/09/27

リンク

role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita

role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのかHTMLアクセシビリティWAI-ARIA 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。そこでこの記事では、なるべくわかりやすい形で、WAI-ARIAそのものや、その中で登場する role 属性や、名前に aria- のプレフ

kyaido 2024/09/27

リンク

学習アプリに求められるデザイン - DuolingoのUXリサーチとケーススタディ｜灰色の単細胞

DuolingoとはDuolingoは、英語だけでなく中国語や韓国語など、さまざまな言語が学べる言語学習アプリです。スマホ版とWeb（ブラウザ）版の2種類があり、1日数分間の言語学習がテンポよくでき、世界で最も使われている言語学習アプリです。 Duolingoは、2011年にカーネギーメロン大学の教授でありReCAPTCHAの創始者のルイス・フォン・アン（Luis von Ahn）氏と、彼の大学院生であるセヴァリン・ハッカーによって研究プロジェクトとして開始されました。研究者が作ったアプリとして、行動心理学や科学的な学習、アプリの機能、アイコン、プロダクトデザインなど、すべてにおいて根拠があって実装されている感があります。言語学習アプリ「Lingvist」というのもありますが、こちらも素粒子物理学者が開発したものです。 DuolingoのBusiness Model Canvasタクシ

kyaido 2024/09/26

リンク

正しく評価される自己評価の書き方 - るさんちまん

はじめに会社員として働く上で評価は最も大きな関心事の1つでしょう。評価によって自身の職位や給料が決まるのでそれも当然です。しかしながら、「納得感のある評価を受けられていますか？」と問うと明確にYesと答えられる人は稀でしょう。「成果を出したのに正しく評価されていない」と不満を持っていたり「評価は偉い人が勝手に決めるものだから…」と諦めている人もいるのではないでしょうか。少なくとも過去の私はそうでした。そもそも、評価をどのように受けるべきか指導や研修を受けたことはありますか？私にはその記憶はなく、自身が評価者の立場になって初めて評価というシステムに真剣に向き合うことになりました。評価の際に被評価者としてできることは、評価者に自分の成果や成長を適切にアピールすることです。そして、アピールの方法として最も確実かつ重要なのは伝わる自己評価を書くことですこのエントリは、被評価者が評価者に正

kyaido 2024/09/26

リンク

デジタルアクセシビリティアドバイザー（Basicレベル）についてとその勉強法｜のま

こんにちは、のまです。先日「デジタルアクセシビリティアドバイザー認定試験Basicレベル」を受験し、合格しました！私がこの資格を受験しようと思ったのは、初めはアクセシビリティについて体系的に学んでみたい・自分の知識の力試しをしてみたいという理由からでした。しかしまだ新しい資格であるため情報が少なく、本当に受験するのか、勉強する必要があるの少し迷っている自分もいました。そこで今回は、「デジタルアクセシビリティアドバイザー」に関心を持ったけれども受けてみるべきか、どういう資格でどのような内容なのか、ちょっとした勉強法を知りたい方向けに記事にしています。ただ、以下の項目に期待がある方向けには書かれていないのでご注意ください。アクセシビリティのWeb技術方面だけ関心がある人障害やIT、アクセシビリティ、支援技術を深く知りたい人 Webアクセシビリティの実践にすぐ活かしたい人今回の記事

kyaido 2024/09/26

リンク

Dialog と Popover #1 | blog.jxck.io

Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に

kyaido 2024/09/26

リンク

TypeScriptの型でドメインモデリング⛅️

紹介すること TypeScriptの型を厳密に定義し、ドメインモデリングを行います。ソースコードがドキュメントとして機能することを目指します。具体的には、Branded Typeやタグ付きユニオンなどの技法を扱います。この記事は、TypeScriptをこれから使いこなしてみたい方向けの内容です。紹介しないことドメイン駆動開発や関数型プログラミングの概念については、深くは触れません。 Make Illegal States Unrepresentable あり得る型だけを定義するという考え方です。詳細は以下を御覧ください。この考え方は、ほとんどのTypeScript開発に適用できると思います。例1 仕様: すべてのユーザは、id、nameを持っている認証されるとisVerifiedがtrueになり、verifiedDateが付与される認証前はisVerifiedがfalse

kyaido 2024/09/24

リンク

アップルの「気をそらす項目を非表示」から感じるウェブ広告への危機感 | HON.jp News Blog

kyaido 2024/09/24

リンク

相手に話が通じないと感じた時の対処法 - Konifar's ZATSU

相手に話が通じず物事を前に進めにくいと感じることがある。特に、階層化された組織の違うレイヤーの相手や他部署の相手の場合にありがちかもしれない。そういう時はついついヒートアップしてしまい相手のせいにしてハレーションを生むような話し方をしてしまいがち。"相手が理解してくれないのは相手の頭が悪くて理解できないから"みたいな態度は相手に伝わり、関係がこじれてより一層物事を前に進めにくくなってしまう。こういう時に感情的になってうまく対処できないのは解決のための引き出しが少ないのが原因なので、思いつく対処法を雑に書きとめておく。いったん自責思考に切り替えるあまりに話が通じないと感じると自分の方が賢くて相手が悪いみたいなスタンスになりがちなのでまずはリセットする相手に勝とうとするのではなく、目的を思い出して相手も自分も勝つにはどうすればよいかを考えるよう切り替えるほぼ相手に非があることももち

kyaido 2024/09/23

リンク

米ディズニー、社内チャットツールからデータ流出＝ＷＳＪ

米メディア・娯楽大手ウォルト・ディズニーは、ハッキングにより社内で使用しているビジネスチャットツール「スラック」からデータが流出したことを受け、同ツールの使用を停止する計画。メディアニュースレターのステイタスが報じた。写真は２０１７年１２月、ニューヨーク証券取引所で撮影（２０２４年　ロイター/Brendan McDermid） [１５日ロイター] - 米娯楽大手ウォルト・ディズニー(DIS.N), opens new tabが社内で使用しているビジネスチャットツール「スラック」からデータが流出したと、米紙ウォール・ストリート・ジャーナル（ＷＳＪ）が１５日報じた。流出したデータには広告キャンペーン、スタジオ技術、面接候補者に関連する情報が含まれている。「ナルバルジ」と名乗るハッカー集団が、ディズニーが使っているスラックからコンピューターのプログラムや未発表プロジェクトの詳細などのデータを

kyaido 2024/09/20

リンク

[pdf.js] 手軽にPDFファイルをHTMLに埋め込めるWebComponentを作った - Qiita

PDFファイルを手軽にHTMLに埋め込みたい PDFファイルをHTMLに埋め込む場合、従来だと<iframe>タグを使用するか、pdf.jsを使用する方法、Google Driveのプレビュー用URLを使う方法がありました。ただし、それぞれ <iframe>タグを使用する方法 → PCのみ埋め込み可、スマホ非対応❌ pdf.jsを使用する方法 → スマホに対応しているが、公式サイトからzipファイルを解凍し自分でサーバーに設置する必要がある（面倒）⚠️ Google Driveのプレビュー用URLを使う方法 → 複数のPDFを埋め込むと挙動が不安定になってしまった＆公式でサポートされているものなのか不明❌ という制限がありました。詳しくはこちらの記事によくまとめられています。 pdf.jsを使うとしても、できることなら<script>タグを一行差し込むだけで使えたら最高です。 pdf.

kyaido 2024/09/19

リンク

こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法

はじめに言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。このように、画像の一部が切り抜かれたようなデザイン。このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with techno logy https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。なんでこのような形が Augmented UI なのかについて個人的に考えて

kyaido 2024/09/19

リンク

伊藤淳一氏が「一番下手くそエンジニア」から脱出した4つの方法。2023年版ITエンジニアの生存戦略【後編】

TOPコラムキャリアを創る思考法伊藤淳一氏が「一番下手くそエンジニア」から脱出した4つの方法。2023年版IT エンジニアの生存戦略【後編】伊藤淳一 1977年生まれ、大阪府豊中市出身。株式会社ソニックガーデンのRailsプログラマ、およびプログラミングスクール「フィヨルドブートキャンプ」のメンター。ブログやQiitaなどでプログラミング関連の記事を多数公開している。将来の夢はプログラマーをみんなの憧れの職業にすること。主な著書に「プロを目指す人のためのRuby入門改訂2版言語仕様からテスト駆動開発・デバッグ技法まで」（技術評論社）などがある。前回では、筆者がプログラマとして入社したSIer時代のエピソードと、そのあとに入社した外資系企業での社内プログラマとしてのエピソードを書いてみました。IT業界に入って間もないエンジニアさんや、これからの自分のキャリアを考え始めたエンジニアさんに

kyaido 2024/09/18

リンク

人と話すとMP削れていく人のための、「人付き合い」ルール。

「人付き合いが得意です」という方は、どの程度いるでしょう。個人的には、「何を話したらいいかよくわからない」「人と話すと消耗する」という気持ちはよくわかります。ところで先日、シロクマ先生が、次のような記事を書いていました。結局、人と話すとＭＰは増えるか、減るか・人と話すと精神力(MP)が増えるか減るかは、話す内容。状況によって左右される・もちろん、その人の性質や気質によっても左右される・体力によっても左右される。その体力の一番無難な回復法は「休息」この投稿の中で気になったのは、冒頭で引用されていた、以下のツイートです。多分人と話すとMPが回復していく生き物と、人と話すとMP削れていく生き物は根本的に分かり合えないのだと思う。 — 前島賢(大樹連司) (@MAEZIMAS) August 30, 2024 「人と過ごすのが大好き」な人たちを見ると、確かに「別の人種だなあ」