Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
CSSは簡単だなんて誰が言った - LIVESENSE ENGINEER BLOG
はじめまして！正社員転職サービス転職ナビ(旧ジョブセンスリンク)のフロントエンドを担当しているsueshinです。 CSSはプログラミング経験の浅い方でも扱いやすく、比較的習得が早い言語だと言われることが多いと感じている次第です。 もちろん、それはCSSの素晴らしい側面の一つです。 一方で、設計のアンチパターンと言われることが、CSSでは積極的に採用され、長期の保守になると難しいという側面もあります。 今回は企業様用採用管理ツールのCSSの保守で苦戦し、リファクタリングした時のお話をいたします。 お手柔らかにどうぞ。 尚、ソースコードは一部記事に合わせて表現を変えています。 なぜCSSをリファクタリングしたの？ 企業様用採用管理ツールのCSSをリファクタリングする前は以下のような大きな問題を抱えていました。 管理されていないCSS 転職ナビはリブセンスの創業初期からある歴史あるプロダクトで
outline: noneをやめよう、focus-ringを使おう - yuhei blog
次のようなスタイルが指定されたサイトを見かけることがある。 * { outline: none; } ボタンなどの要素をクリックしたときに、格好の悪いアウトラインが表示されてしまうのを打ち消したい、という意図だと思われる。 だが、上記のような指定をしてはいけない。サイトをキーボード操作することができなくなってしまうからだ。 クリックされたボタンはフォーカスされる。フォーカスされているということを視覚的にユーザーに伝えるためにアウトラインが表示される。キーボード操作するためには、現在のフォーカス位置が明示されている必要がある。上記のような方法によってフォーカス位置の手がかりを奪ってしまうと、キーボードユーザーにはそのサイトが利用できなくなってしまう。 とはいえ、マウスのみでサイトを利用するユーザーにとっては過剰な装飾に見えるかもしれない。マウスユーザーにとってはフォーカス位置が明示されている
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
Shadow DOM と CSS Containment によって実現されたCSSのスコープの概念 | フロントエンドBlog | ミツエーリンクス
2016年10月21日 Shadow DOM と CSS Containment によって実現されたCSSのスコープの概念 UI開発者 宇賀 CSSにはスコープという概念が存在しません。これはCSSモジュールを設計する時だけでなく、JavaScriptウィジェットを作成する時にも重要な懸案事項です。 たとえば、クラス名などのセレクタにもスコープは存在しないため、カジュアルに衝突が起こります。その衝突を常に考慮しながらCSS設計を行う必要があり、その手段としてOOCSSやBEM、SMACSS、FLOCSSなどの命名規則が今も議論されています。 他にも、あらゆるスタイリングがスコープを持たないことから、製作者の意図しないカスケーディングが発生する可能性があります。 そのため、JSウィジェットがCSSモジュールに影響され、CSSモジュールがJSウィジェットに影響されるということが起きやすく、開発
Understanding the Critical Rendering Path | bitsofcode
When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the "Critical Rendering Path". Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are 6 stages to the CRP
Demystifying webpack2 tree shaking - from scratch
webpack2 に最近移行しました。 その時の知見とせっかくなので tree shaking が実際に中でやってることを追ってみたので紹介。 webpack2 移行時の注意 基本的にはほぼここに書いてあるとおり。 Migrating from v1 to v2 かいつまんで説明すると、configファイルの書き方がガラッと変わって、 module.loaders が module.rules になったり、 resolve.root がなくなって resolve.modules に変わったり。この辺の書き換えは割りとすんなりいくはず。 辛いのはpostcss周りのオプションの渡し方辺り。これまではconfigのrootにpostcssプロパティを用意してそこに記述できたが、その記述はできなくなり、 webpack.LoaderOptionsPlugin 経由で渡すか postcss.con
CSSのみでドロワーメニューをつくったぞい - みかづきブログ その3
DEMO See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen. チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。 HTML <input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a><a href="#c" class="btn">MENU_C</a><a href="#d" class="btn">MENU_D</a></nav> <div id="a" class="result">A</div>
CSSをリファクタリングするためのテストツール選定 - I'm kubosho_
この記事は今年のはじめに公開しようと思っていたのですが、体裁を整えないままずっと下書きに残ってしまっていたので供養の意味も込めて公開します。 もしかしたら間違ったことが書かれているかもしれないのと、情報も若干古くなってしまったのでそれらを承知の上でお読みください。 何をテストするのか 肥大化したCSSを整理したい 見た目は変えないようにする CSSを整理した後に見た目が変わっていないことをテストで保証したい ツールを検討する上での前提条件 基本テストはVisual Studioのタスクランナーエクスプローラー上から行いたい testタスクをクリックしたらでテスト実行したい グローバルインストールさせたくない タスクランナーエクスプローラーは依存しているパッケージで足りないものがあると、自動的にnpm installしてくれる グローバルインストールが必要なものまではnpm install
Things I've Learned About CSS Grid Layout | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he’s going to hop around to different concepts that he’s learned on that journey. I like this idea of learning little bite-sized chunks ab
キャメルケースやスネークケースの種類 - ✘╹◡╹✘
何かの命名規則の文脈で会話するとき等に知っていると便利に使えるでしょう。 camelCase, lowerCamelCase, PascalCaseと比較した場合のcamelCase CamelCase, UpperCamelCase, PascalCase chain-case, Chain-Case snake_case 追記1 SCREAMING_SNAKE_CASEというものもあるみたいです。 追記2 余談ですが、QiitaではCSSセレクタの命名規則としてBEMを採用しており、端的に言うと .bloCk_elemeNt-modifiEr というパターンを取っています。Qiitaでは各要素の命名規則としてlowerCamelCaseを採用しており、BlockとElementとを接続するために「_」を、BlockとModifierとを接続するために「-」を採用しています。よって、この
Spoooooky CSS Selectors | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s get into the spirit a little bit this year with some Halloween themed posts! I’ll kick it off with some CSS selectors FROM BEYOND THE GRAVE. Er. CSS selectors that will CHILL YOU TO THE BONE. OK maybe not, but they will be at least kinda weird. The Lobotomized Owl Selector Heydon Picke
ScalaでタイプセーフにCSSを記述できるScalaCSSを使ってみる - たけぞう瀕死ブログ
Scala Warriorではユーザが入力したコードを実行する目的でScala.jsを使っているのですが、せっかくScala.jsを使っているのでフロントエンドもできるだけScalaで書いてみようと思い、ScalatagsやScalaCSSなどを試しています。今日はScalaCSSについて紹介してみたいと思います。サンプルコードはScalaCSSのドキュメントから持ってきています。 github.com ScalaCSSはScalaのコードからCSSを生成するためのライブラリで、CSSをタイプセーフに記述・参照できたり、Scalaコードで動的にスタイルを定義できたりといった便利な機能があります。Scala.jsにも対応しており、大きく分けでスタンドアロンモードとインラインモードの2通りの使い方があります。 スタンドアロンモード スタンドアロンモードはこんな感じで記述します。 import
はてなブログのidとclassのツリーと図解を作ってみた - cBlog
更新：2018-05-07 カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。 取り上げるid、classの選定や画面上への表示には、以下で紹介されているサンプルテーマ「Boilerplate」を利用しています。 help.hatenablog.com ツリー トップページ、記事ページなど #2018/05/07 <body>付与クラスをより詳しく。ツリーに公式関連記事等追加。 xxxがHTMLタグ、#xxxがCSSのid、.xxxがCSSのクラスです。 html ┣head ┗body ┣div#globalheader-container ┣div#container ┃ ┗div#container-inner ┃ ┣header#blog-title ┃ ┃ ┗div#blog-title
9 Underutilized Features in CSS
CSS has been around for a long time — since 1994 depending on who you ask — and has become the de facto standard for styling websites. New specs (like the new CSS4 modules) keep adding cool functionality with animations, transforms, box-shadows, and a smattering of new units and selectors. Awesome stuff, but those aren’t the properties we’ll be discussing today. With all the hotness in the world o
CSS Containment の制約と効能について覚え書き
ある要素内の状態による外界への影響を封じ込めて最適化を促す CSS Containment Module で定義される contain プロパティは will-change と同じようにブラウザが処理を最適化するために開発者から提供できるユーザーエージェント向けヒントとして機能します。 ヒントの目的はcontain の対象要素が親兄弟に影響を及ばさない独立した部分木であることを宣言し、各種の影響を contain の対象要素の中に封じ込めることです。 使うときは contain プロパティに既定の値として用意された size | layout | style | paint | content | strict のいずれかを指定します。content と strict は複合指定のエイリアスなので、本文では size layout style paint の4つについて個々の説明をします。
レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない
レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリケーションで 60fpsを(極力)目指す
queue-anim/README.md at master · react-component/queue-anim