ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita
ワイ「↑こんな風にセレクタを書いてやるんや」 ワイ「そしたらブラウザ君は」 ブラウザ君「このページの中で、header要素は・・・お、この1つだけやな」 ブラウザ君「ほんで、その中のdiv要素は・・・この1つだけやな」 ブラウザ君「ほんで、更にその中のa要素は・・・この1個だけやな！」 ブラウザ君「特定しやすいようにセレクタを書いてくれたから、すぐ見つかったわ〜」 ブラウザ君「ありがとう、やめ太郎はん」 ワイ「ってなるわけや」 ワイ「ワイはいっつもブラウザ君のことを1番に考えてるで」 ワイ「あ、娘ちゃんの次やから2番やな」 よめ太郎「（嫁はブラウザ以下かい・・・）」 娘「パパ、やっさしい〜」 ブラウザ君「全然ちゃうで」 よめ太郎「ファッ！？」 よめ太郎「ブラウザが喋った！？」 ワイ「何を驚いとんねん」 ワイ「インコやオウムかて日本語を喋んねんから」 ワイ「ブラウザ君が喋ったって不思議やない
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするように
JavaScript Style Sheetをご存知ですか - Qiita
まずはじめにお断りしておきますが、タイトルだけを見て、「Reactなどで、JavaScriptとCSSを融合させる」ような技術を連想した方は…大外れです。 カレンダーのとおり、これは現代には伝わっていないロストテクノロジーです。 JavaScript Style Sheet（JSSS）とは HTML5では<style>のtype="text/css"を省略できるようになりましたが、現実問題としてブラウザで直接使う、他のスタイルシート言語は存在しないように思えます。 …と思いきや、かつてtype="text/javascript"で書くスタイルシート言語が存在しました。これが、JavaScript Style Sheet、略してJSSSです。 文法概要 現代でもJavaScriptで要素ごとにCSSを指定する際にelement.style.marginLeft = '20px';のように書け
Jupyter 知っておくと少し便利なTIPS集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今まで仕事で使ってきた、メジャーなものからマイナーなものまで含めたJupyter NotebooksのTIPS集です。 入力補完 とりあえずこれが無いと生きていけません。 Nbextensions（Jupyterの拡張機能）自体が未設定であれば、一旦そちらをインストールして、その後にHinterlandという機能にチェックを入れると有効化されます。 AnacondaのJupyter notebookでnbextensionsを使う ※Nbextensionsインストール後、Jupyterのファイルリスト的な画面で、タブで「Nbexten
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
