2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
"CSS Module" をめぐる混乱
"CSS Module" が指すもの ２つある 従来のコミュニティベースのもの これのこと。そしてその実装。 現状フロントエンドエンジニアが指すものはだいたいこれ。 Web 標準になりつつあるもの Import Assertions で実現しそうな Synthetic Module としての CSS Module 標準になりそうな所まで来ている。 この２つに関して話がごちゃごちゃになるんで整理する。 コミュニティベースの CSS Module https://github.com/css-modules/css-modules コレ自体は概念的なもの。 その実装 として Webpack の CSS Loader などがある。 なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れ
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
Firefox Quantum高速化の一翼を担うQuantum CSS - Mozilla Flux
デスクトップ版Firefox Quantumでは、Quantum CSS（別名Stylo）と呼ばれる新しいCSSエンジンが初期設定で有効化されている（Bug 1330412）。CSSエンジンはレンダリングエンジンの構成要素の1つで、CSSパーサーとスタイルシステムから成り、HTMLパーサーが生成したDOMツリー（DOMノードが樹状に連なったもの）に対し、CSSを解釈してスタイルを計算した結果を当てはめていく。 Quantum CSSは約8.5万行のRust言語のコードで構成される。Geckoの旧CSSエンジンは約16万行のC++言語のコードで構成されていたから、半分程度のコンパクトさだ。それでいて、Quantum CSSは旧CSSエンジンが設計の古さゆえに抱えてた様々な不具合を解消している。もっとも、実装には苦労もあったようだ。font-sizeプロパティ1つとっても、いろんな単位をサポー
Micro Frontends - extending the microservice idea to frontend development
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. What are Micro Frontends? The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
自分流の静的ウェブ開発環境 2018年版 - Qiita