Modern CSS Solutions
Providing Type Definitions for CSS with @property Write safer CSS using `@property`, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how `@property` features improve the resilience of custom property definitions. 12 Modern CSS One-Line Upgrades Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
WebのPush通知の全体像を捉える - Qiita
はじめに iOS SafariでのPush通知のサポート予定とのことなので、この機会にWebでのPush通知について調べました。 WebでのPush通知を学ぶにあたって、WebでのPush通知の仕組み・全体像を知っておくと良いなと感じたので記事にします。 全体像 Push通知の全体像としては以下。 通知購読をし、そのユーザーを保存する 図で言うところの1 ~ 6。 必要なことは以下。 通知の許可を得る PushSubscriptionオブジェクトを取得 取得したPushSubscriptionオブジェクトを自身のデータベースへ保存 1. 通知の許可を得る Notification APIを用いて、ユーザーに通知の許可を要求する。 Notification.requestPermission() - Web API | MDN 2. Push Subscriptionオブジェクトを取得 Pu
Sass、別に言うほどいらない説
Web制作 web制作の領域では、主にLPやコーポレートサイトを開発することになります。 LPや小規模のコーポレートサイトでは恩恵が少ない LPや小規模のコーポレートサイトにおいては、Sassを使うメリット以上にデメリットの方が大きいと思っています。 そもそもSassの利点としてよく挙げられるのは、 セレクタのネスト（入れ子）ができる 変数が使える mixinが使える ファイル分割ができる 中括弧がいらない などでしょうか。 上の機能があることによって色やフォントの管理が一元化されたり、頻出のプロパティ群をまとめて使い回しやすくしたりすることが実際の開発上における利点です。 一方でデメリットとしては 設計/管理工数がかかる 開発環境を用意するのがやや面倒 などが挙がると思います。（一回設定を構築してしまえば使いまわせば良いのかもですが。） LPなどにおいては、単純にメリットの部分の恩恵があ
たったの一行でサイトの読み込み速度を実質10倍以上にする方法
ホームページはできれば読み込みが速い方が良いですよね。特にLPのようにユーザーに直接商品を訴求するようなページではなるべく離脱率を下げる工夫がしたいところです。その一つとして読み込み速度はとても重要です。 一方でLPは使われる画像の数が多く、圧縮を駆使しても読み込みに一定の時間がかかってしまいます。 そこで、まずは最初に人の目に見えるファーストビューの速度を上げることを考えます。 その際に重要なポイントとして「background-imageに指定した画像はimgタグの画像の読み込みより順番が後になる」という仕様があるようです。ファーストビューにbackground-imageを使うケースはよくありますが、imgタグの画像が多いほどその読み込みが遅れてしまい表示に時間がかかるのです。 よってそれを解決しましょう。
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
<button>とかのスタイルを消して書き直すときに考えることの備忘録
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
ダイアログ コンポーネントを作成する | Articles | web.dev
この要素に欠けているものがいくつかあることがわかったので、この GUI チャレンジでは、期待するデベロッパー エクスペリエンス項目（追加のイベント、ライトの消去、カスタム アニメーション、ミニタイプとメガタイプ）を追加します。 マークアップ <dialog> 要素の基本はシンプルです。要素は自動的に非表示になり、コンテンツに重ねて表示されるスタイルが組み込まれています。 <dialog> … </dialog> このベースラインは改善できます。 従来、ダイアログ要素はモーダルと多くの部分を共有しており、多くの場合、名前は同じです。ここでは、小さなダイアログ ポップアップ（ミニ）とフルページ ダイアログ（メガ）の両方にダイアログ要素を使用することにしました。「mega」と「mini」という名前にしました。どちらのダイアログも、ユースケースごとに若干調整して使用しています。タイプを指定できるよ
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
WAI-ARIAを学ぶときに整理しておきたいこと
結論 ロールについて知る HTMLの暗黙のロールを知る ロールを知った上でロールに対して使用できるプロパティ/ステートを使う (おまけ) markuplintを使おう aria属性を使う前に まず、いきなりaria-labelやaria-selectedとかに手を出さない。 aria-selectedとかを発見してしまうと「option要素以外にもselectedみたいな意味を付加できるんだ！すげえ！使ってみよう！」みたいな気持ちが沸き上がってしまう。わかる。とってもよくわかるよ。当時ぼくもそうだったから。 ただ、そこはぐっと我慢してほしい。 なぜかと言うと、aria属性は、使っていいときと悪いときがある。きちんとWAI-ARIAという仕様と、ARIA in HTMLやCore Accessibility API Mapping (Core-AAM)という仕様で決められていっている[1]の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/ixkaito/status/1750431244343742557?s=12&t=723NaLvhx3eOTN3yhiSZEw
控えめな App Router と持続可能な開発 - PWA Night vol.59
RemixでWeb標準を学んだ1年間 / First year with Remix
2023年のフロントエンド振り返りと2024年
辻正浩 | Masahiro Tsuji on X: "Core Web Vitals(CWV)は、SEO関連では数少ない「Googleが公式にSEOに影響あると言及している」「明確に計測できて合格・不合格が数値で出る」「(多くの場合)改善の労力がそのままスコアに影響する」から、明確な根拠を求める大きな組織・エンジニアが強い組織などでは重視されすぎてる印象です。(1/n)"
フロントエンド研修【ミクシィ22新卒技術研修】
2023年モダンCSSの最新トレンド
池田 泰延 on X: "CSS の word-break: auto-phrase; がすごい。 日本のウェブ制作者が求めていたもの。 「文節」での折り返し指定ができます。 現行のChrome 119やEdge 119で利用可能。 https://t.co/P7wCpHjeDW"