Chromeでボタンをクリックしたときのフォーカスリング - fragmentary
geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのはcs.chromium.org。<button>なので"HTMLButtonElement"で検索して、それっぽいファイルを探す。あった。 html_button_element.h "focus"で検索するとSupportsAutoFocus()というメソッドが見つかる……がこれはautofocus属性の対象になるかとかそういう感じがするのでこれではない。というかそっか、autofocus指定できるんだ……<input>にしか使ったことなかったからなんか使えないって思ってしまってた。 HTMLButtonElementにはなさそうなので、参照しているHTMLFormControlElement
エディタの左上にリアルタイムに顔を表示する - hitode909の日記
エディタの左上にワイプでリアルタイプにカメラの入力が出てたらバラエティ番組みたいになって便利かと思ってやってみたけどただ意味不明な状態になるだけでとくに役には立たなかった，リモートペアプロするときにこちらの顔を送れるのは便利かもしれない． Atomのコンソールにこれを貼ればワイプ出せるはず． navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => { const video = document.createElement('video');video.draggable=true;document.body.appendChild(video); video.srcObject=stream; video.style='position: absolute; left: 7vmin
Houdini Paint API | blog.jxck.io
Intro Houdini で議論されている CSS Paint API が Chrome Canary で flag 付きで実装されている。 デモの実装を通して、関連仕様を含めた以下の 4 つのドラフトを解説する。 CSS Painting API Level 1 CSS Properties and Values API Level 1 CSS Typed OM Level 1 Worklets Level 1 CSS Paint API CSS Paint API は、特定の領域に対して任意の描画を行うことができる仕様である。 CSS Painting API Level 1 例えば、これまで border は、仕様に定義されたいくつかの種類の style から選び、無いものは画像で代替するのが基本だった。 CSS Paint API は用意した領域に対し、画像ではなく Canvas
米グーグルの設定ミス、なぜ日本の大規模ネット障害を引き起こしたのか？ | 日経 xTECH（クロステック）
「ネットワークの誤設定により、インターネットサービスにアクセスしづらくなる障害が発生した。ご不便、ご心配をおかけしたことをお詫びする」――。2017年8月25日昼ごろ日本国内で発生した大規模な通信障害。これについて米グーグルが、原因となる誤設定があったと、謝罪の意を8月26日に表明した。 当初より識者の間では、「グーグルから送られてきた大量の経路情報が引き金になったのではないか」との見方が強かった。実際にその通りだったわけだ。 とりわけ大きな影響を受けたのが、NTTコミュニケーションズとKDDI、そしてこの両社の通信サービスを利用していた法人・個人だ。インターネットの接続から各種ネットサービス、金融取引、モバイルSuicaのような決済サービスにまで影響が及んだ。 ただグーグルは、同社がいう「ネットワーク誤設定」が、人為的ミスなのか、ソフトや機器の不具合によるものなのかまでは明らかにしていな
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
未来のCSSを先取るHoudiniとは？それは魔法である！
こんにちわ、メルカリアッテでFront-end Developerをしている@t32kです。 メルカリではセミナー参加補助制度があり、それを利用して海外カンファレンスに参加してきました。今回は11/30 ~ 12/01、オーストラリア・メルボルンで開催されたCSS/JSConf Australia 2016に行ってきたので、そのレポートを書きたいと思います。 今回はその中でも、CSSConfでのBarak Chamo氏が講演した内容が非常に興味深かったので紹介します。 Hey presto, CSS! 今日はお話する内容は魔法についてです。どのように自分が定義したCSSをブラウザ上で利用可能にするのかという魔法です。 その前に、魔法ではないこれまでのCSSについて振り返ってみましょう。日本には『珍道具』と呼ばれるものがあります。とても素晴らしい技術ですが、ちょっとオーバーエンジニアリングに
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
究極のオーディオマニアが行き着く「マイ電柱」
This copy is for your personal, non-commercial use only. Distribution and use of this material are governed by our Subscriber Agreement and by copyright law. For non-personal use or to order multiple copies, please contact Dow Jones Reprints at 1-800-843-0008 or visit www.djreprints.com. http://jp.wsj.com/article/SB10191232058230093692804582254253646088474.html
Sassで寿司を回す、たった一つの冴えたやりかた - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2016 - 01 - 19 Sassで寿司を回す、たった一つの冴えたやりかた こんにちは、ウェッブデザイナーのアズマです。 みなさん、Sassは好きですか。僕は好きです。 そして、寿司は好きですか。僕は好きです。 Sassがあれば何でもできる！ Sassがあれば、回転寿司も回せる！ というわけで、今日はSass(CSS)を使って回転寿司のように要素を無限ループさせてみましょう。 何ができるか こうです。寿司が無限ループしています。(本当はもっとなめらかに動きます) 僕の圧倒的な画力についての感想はここでは本質ではないのでご遠慮願います。ここで大事なのは寿司が無限ループすることです。 「画像が流れればそれでよい」ということであれば、 1枚の横長背景画像にしてbackground-positionを動かす という手法や、いっそのこと 全部Gifアニメにしちゃう (寿司ゆき超かわいい
IE では利用できない機能、IE を切り捨てる事で得られるメリットの一覧 - Qiita
このエントリでは、Web Developer が IE 対応を止めた場合に得られるメリットがどれ位あるのかを示します。 前提として IE 7, 8, 9, 10 のサポートは 2016-1-13 に終了し、IE 11 が残りました。 IE 11 は IE でしか動かないシステム(特定企業向けに書かれたシステムなど)を利用するためのブラウザとして2023年までサポートが継続するそうです。 ずるずるとサポートを強要するビジネス層、エンジニアとの対話の不在、揃わない各社の足並み、繰り返される10年前の記憶 ES6 が本格的に活用される段階(2017年後半〜)になると、 多くの Web Developer が ES6 をサポートしない古いブラウザを「コストをかけて今後もサポートする」か「切り捨てる」か… を真剣に検討する事になります。 Babel などの補助ツールを使う事で部分的に対処療法も可能で
Electronアプリ開発で設計に失敗した話 - Qiita
この投稿は Electron Advent Calendar 2015 の14日目の記事です。 最近、実験的にElectronを使ってOSX用のアプリケーションを開発していました。 あくまでも次に作るためのアプリケーションのための実験なので 地雷は喜んで踏みつける 技術的におもしろいことをやる 失敗しても泣かない の精神です。 ちなみに結果は見事に失敗してます。 大枠として上記のような設計にしようとしていました。 主に3つのレイヤーを作り、それぞれはEventEmitterでやりとりを行います。 1. Applicationレイヤー アプリケーション全体を管理するレイヤーです。 もろもろの初期化や、Electronの独自部分（メニューとか）の操作を行います。 2. Domainレイヤー DDD的な意味のドメインレイヤーです。 ここで言うユースケースはクリーンアーキテクチャで言うユースケース
pdf.jsを使いブラウザで見られるPDFスライド表示ツールを作った
追記: ライブラリとして切り出しました pdf.jsを使ってスライド表示するライブラリを書いた | Web Scratch どういうもの https://azu.github.io/slide/DOMQuery/sourcemap.pdf というPDFファイルを読み込んで表示しています。 普通のHTMLスライドのようにウェブページとして公開することも出来ます。 例) https://azu.github.io//slide/DOMQuery/ 作った経緯 mozilla/pdf.jsを使えばPDFをブラウザ上で表示出来るので、これを使ったプレゼンテーションツールとかあると面白そうな気がしたのが始まりです。 こういうのが欲しい理由としては以下のような感じでした。 Deckset みたいにPDFしか配布用のフォーマットがないものがある Deckset自体は便利なので使いたい でもSlideSh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita