GitHub - yudppp/styled-formatter: A CLI tool to format `styled-components` template literals in your codebase. It ensures that your CSS-in-JS remains clean, consistent, and easy to read, supporting both `styled-components` and `css` tagged template literaYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Dialog と Popover #8 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Cookie バナー 次は、「Cookie 利用への同意」、いわゆる Cookie バナーの UI について考えてみる。想定するのは以下のようなものだ。 前回の規約への同意と異なり、このバナーは画面表示時から右下に表示され、同意か拒否を選択するまで表示し続ける。つまり、表示中は他の操作をブロックしたりはしない。 つまり Dialog ではあるが Modal ではないため、show() する前提で実装を考えていく。 HTML HTML の注意点は、前回の規約と大きくは変わらない。 まず、最初から表示しておくために open 属
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
Misconceptions about view transitions | Blog | Chrome for Developers
::view-transition └─ ::view-transition-group(root) | └─ ::view-transition-image-pair(root) | ├─ ::view-transition-old(root) | └─ ::view-transition-new(root) └─ ::view-transition-group(box) └─ ::view-transition-image-pair(box) ├─ ::view-transition-old(box) └─ ::view-transition-new(box) While this tree contains multiple snapshot pairs only a single view transition is run. Currently, Chrome is limite
Firefox 121 がリリースされて :has() が使えるようになりました。そして Intl.Segmenter は Nightly で使えるようになりました。 - Qiita
はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。「Firefox は利用者数が少ないので対応ブラウザから外します」とか言っているサービスは Web 標準を冒涜しているので滅んでどうぞ。 今日は記念すべき Firefox 121 リリース日なので、改めて Firefox 121 でできるようになったことをお伝えするとともに、Firefox 122 あるいは 123 でサポートされる重要な機能についてお話したいと思います。 Firefox 121 がリリースされたよ Firefox 121 でのキャプチャ画像です。 See the Pen :has() selector by arcxor (@arcxor) on CodePen. :has() 疑似クラスがサポートされました。 text-inden
フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
ゲーム感覚でプログラミング学べるサービス集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログ
Frontend Web Performance: The Essentials [0]
Less is moreDevice displays run at a certain number of frames per second. Browsers try to match this rate for a smooth user experience. To output a new frame to the display, the browser must first complete its ‘rendering cycle’ or ‘pixel pipeline’. The majority of devices run at 60 FPS. This allows for around a 16ms window to complete the rendering cycle, per frame. Increased FPS means even smalle
![Frontend Web Performance: The Essentials [0]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4ebca80380c1e7c1598570f23b6d7a83d581a33/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A963%2F1%2ABK3PHVbfaONNdaqvy0mEDQ.png)
次の時代のCSS in JSはWeb Componentsを従える
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
Ashley Nolanは、CSSとJavaScriptの機能やフレームワークをどれだけ使っているかというアンケートを毎年行っています。 以下では2019年版である、The Front-End Tooling Survey 2019というアンケート結果の概要を紹介してみます。 回答者数が昨年から4割も減ってるのだが一体何があったのだろう。 The Front-End Tooling Survey 2019 - Results 3005人の開発者が、27の質問に回答してくれました。 私の家族に女の子が増えたので集計結果を出すのが遅れました。ごめんね！ 昨年からの一年で変わったところを見ることで、みんなの考えやトレンドが他者と共有されているか確認することができます。 これらの結果から、フロントエンドツール全体の知識レベルや使用傾向を分析するのにも役立ちます。 Quick Thanks 手伝って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
Bouncy Ball - Compare Web Animation Techniques
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
GitHub - argyleink/gui-challenges: Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.
GitHub - AntoineW/luge: Luge
goober
GitHub - evanw/source-map-visualization: A simple visualization of source map data
GitHub - tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
