はてなブックマーク

CSSアニメーションにfilterで大きな影をつけるとiPhoneに負荷がかかり、落ちたり温まったりする現象に気づいたので書き留めます。 Apple Bug Reporter には一応報告済みです。 落ちるというのは、正確にはホーム画面が再起動するという現象です。 Springboard Restarting / Respring / リスプリングなどとも呼ばれています。 CSSでiPhoneを落とす方法に気付いてしまいました😇 詳細: https://t.co/OgzIZAoUSD pic.twitter.com/9rkAHk2c2L — set0gut1:プログラミング (@set0gut1) 2018年11月7日 こちらの動画はCSSアニメーションで回っている部分にCSSフィルタで200pxのdrop-shadowをつけたものです。 最初はiPhoneXで次の操作をして、リスプリン

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で開発者ツールを起動して自力で選択 または 右クリック → 検証 として開発者ツールのElementsタグを開き、DOMが選択されている状態にします。 この状態で Command + Shift + p を押すと文字入力欄が開くので、 node screenshotと打ち込むと、打ってる途中で Mobile Capture node screenshot という選択肢が絞りこめます。 ク

疲れてくると寄り目になっちゃう現象ありますよね。 これを有効活用する方法を思いついたので書き留めようと思います。 目diff 先日 react native でアプリを作ってたんですが、なんかの操作の前後で挙動が想定と違いました。 よく分かんなかったので、とりあえずデータの中身を表示させて、 ふとした拍子で再現しなくなると困るので念のためスクショを撮りました。 （左: バグる前 / 右: バグった後。データは今てきとーにでっち上げたものです。） 見ても分かんない、えーと、どうすんだっけ… Remote Debug 有効にして Chrome の…テキストを diff で…あぁ、目が寄るぅ…… あぁなんだ categoryId が変わっちゃってるじゃん、と一目瞭然ですね。 インデントと行数が揃ってるっていう前提の上ですが、寄り目を使うと diff 部分が マトリックスでラグってるとき風に（網膜

設計図を伴う中規模以上の開発でまれによくあるのが次のような状況です。 担当者が何かしらのツールを使って設計図を書き、画像をアップロードする N回繰り返す: 口頭で設計に関するレビューを受ける 議事録を参照しながら設計図を更新し、画像を再アップロードする どの画像が最新だったのか、変更履歴がどうなのか分からなくなってくる 画像を作ってた担当者がいなくなり、画像のソースが失われる これに対し、こうだったらいいな〜と前々から思ってたのは次のような状況です。 設計図の画像ではなくソースがGitHubに上がっている 変更履歴も残っているし、変更箇所もすぐ分かる 設計のレビューは設計図のソースに対する行コメントを通じて行われる それでいて画像はブラウザ上で簡単に閲覧できる というわけで作ってみました → mermaid-for-github-chrome-extention mermaid.jsのコー