Add Interaction Easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it's Button, SVG or a Paper. Add Interaction to the element with data-micron="interaction" Control Interaction's duration with data-micron-duration="number" Control Interaction's timing-function with data-micron-timing="type" Read Docs Bind Interaction Easil

「Grid Examples」はCSS Grid Layoutを採用しているサイトをコレクションしているギャラリーです。 まだ公開されたばかりみたいなので現時点の数は少なめですが、いずれも掲載されているのはCSS Grid Layoutを採用しているサイトばかりになり、このサイト自体もCSS Grid Layoutを採用して作成されています。 TOPページでは確認することができませんが、それぞれカテゴリーやタグでの管理も行なっているみたいなので、今後掲載数が増えた場合もそれらを利用すれば参考にしたいタイプを探すのに役立ちそうです。 ちなみに、掲載サイトを募集しているみたいなので、個人的にCSS Grid Layoutを採用しているサイトで掲載してもいいというサイトがある人はコンタクトをとってみてください。

TL;DR プログラムのネーミングで迷ったら GitHub でキーワードを検索して、ヒットした件数が参考になるのでは？ 複数キーワードを検索して結果の一覧を表示する CLI 作りました https://github.com/kyoshidajp/ghkw ネーミング迷いますよね？ みなさん、コードを書いていて変数やメソッド名のネーミングって迷いますね。 こんな時に自分たちはチームを横断して「こういう名前考えたんだけど、これってどうかな？」という確認を Slack 上で行っています。先日、この Slack チャンネルを見ていて考えました。 「GitHub で検索すれば世の中のコードでどのぐらい使われているかざっくり分かるので参考になるのでは？説」 GitHub で検索できるという条件付きではありますが、コードの規模からするとある程度期待できそうです。 GitHub で検索 例えば「除外条件」

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. Learn moreSee full compatibilityReport feedback ウェブビデオテキストトラック形式 (WebVTT) は、<track> 要素を使用して時間指定のテキストトラック（字幕やキャプションなど）を表示するための形式です。 WebVTT ファイルの主な目的は、テキストオーバーレイを <video> に追加することです。WebVTT はテキストベースの形式であり、UTF-8 を使用してエンコードする必要があります。スペースを使用できる場所では、タブも使用できます。これらのトラッ

WebVTTを利用した動画字幕 第1回 WebVTTの基本仕様 WebVTTは時系列に沿ったテキスト表示に利用されるデータフォーマットです。WebVTTを利用すれば、video要素を利用した動画に字幕を付けることができます。今回はWebVTTの仕様をじっくり解説します。

Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。 クリック率が下がる ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません。しかしコールトゥアクション（CTA）として考えた場合、それこそが問題となります。 CTAボタンにはユーザーの関心を引きクリックを促すような、強いビジュアルの手がかりが必要です。ゴーストボタンのミニマルな見た目では、強いビジュアルの手がかりが足りません。結果としてクリック率の低下を生じます。 クリック率が低いと言うことは、ユーザーのほとんどがゴーストボタンを見逃しているということです。サイトでのエ

最近はたくさんの人がWebを使うようになったので、こうしたツールもいいかもしれない。 AccessLintを使えば、Githubを使ったPull Requestの中に、アクセシビリティ的な問題がないか教えてくれる。 例えば画像のタグにalt属性がなかったり inputタグにラベルがなかったりした場合に教えてくれる。 HTMLだけでなく、PHPやERB、Hamlにも対応している点がいいですね。 Githubと連携して使うことができるので興味がある人はどうだろうか。

UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ

「Progressive web app」(PWA)とは、モバイル用のウェブサイトをiOSやAndroidアプリなどと同じように表示したり、操作できるようにするものです。PWAに対応した代表的なウェブサイトには、GoogleマップやTwitter、Instagramなどがあります。Mozillaが公開しているブログを読むと、ウェブサイトのPWA化の利点がよくわかります。 Progressive Web Apps are here. What’s the big deal? | The Firefox Frontier https://blog.mozilla.org/firefox/progressive-web-apps-whats-big-deal/ スマートフォンアプリでは、アプリのダウンロード・インストールに必要な容量が多く、ストレージを圧迫させますが、PWAはウェブサイトをアプリ