Web Development カテゴリの記事一覧 - WWW WATCH

WWW WATCH - Web デザインやテクノロジーの話題がメインのブログ

Web サイトの制作やディレクション業務、開発などに関する記事

popover 属性（含む関連属性）がすべてのモダンブラウザで利用可能に

Windows で npm run dev したときに listen EADDRINUSE エラーが出た場合の対処法メモ

Vercel AI SDK を使用して、Claude 3 と、ChatGPT ライクにチャットする Web UI を作る

Safari 17.4 が input type=checkbox の switch 属性に対応したので簡単に試してみる

DMARC レポートの XML ファイルを HTML 形式のレポートに変換するスクリプト

スマートフォンのタップ操作成功率を算出するツール「Tappy」を試してみた

details 要素で作るアコーディオン UI のサンプル

Astro で details 要素に name 属性を使うと型チェックでエラーになる件を解決する

Chatbot UI （オープンソースの ChatGPT UI クローン）を Vercel でホストする

Firefox 121 が正式リリース、やっと :has() 疑似クラスに対応

Tailwind CSS で text-autospace プロパティを使用するためのプラグインを npm で公開しました

Astro と Movable Type Data API でページネーション（ページ分割）を実装する

複数の色の組み合わせを簡単にコントラスト比チェックできる Color Contrast Auto Checker を作ってみました

Astro と Tailwind CSS でこの Blog をリニューアルしました

axe-auto-reporter というアクセシビリティ自動テストのためのスクリプトを公開しました

アクセシビリティ試験で補助的に使えるブックマークレット集

HTML Standard 仕様に search 要素が追加された

さくらの VPS （Ubuntu 22.04 amd64 + nginx）で Movable Type 実行環境を作る

Tailwind CSS でつくるダークモード切り替えスイッチ

MovableType.net サイトサーチを Google カスタム検索エンジン使用中サイトに 5 分で導入する

Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる

Web 開発時に確認したい項目を簡単に一覧できるダッシュボード的なものを作ってみた件

「できるポケット HTML&CSS 全事典」が全面改訂、「改訂 3 版」の発売が決定しました

さくらの VPS を使用してオープンソースのアクセス解析ツール「Umami」をホストしてみる

「できるポケット HTML&CSS全事典」の第5刷、重版が決定しました

CSS 条件付き規則（CSS Conditional Rules） Level 5 仕様（草案）に追加された @when と @else 規則について

日本語化して、ダッシュボードへのベーシック認証を追加した Pa11y Dashboard を作ってみた

DigitalOcean （Ubuntu 20.04）で Pa11y Dashboard を簡単に立ち上げる

Movable Type の XMLRPC API における OS コマンドインジェクションの脆弱性（CVE-2021-20837）を悪用した攻撃被害に関する対応メモ

Let's Encrypt で発行するサーバ証明書の暗号方式を RSA から ECDSA （楕円曲線 DSA）に変更する

Tailwind CSS で animation-delay プロパティを使用するためのプラグインを npm で公開しました

Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集「バーンワークス UI ライブラリ」

Next.js （SSG） + Vercel + GitHub Actions を使用した定期デプロイ

Next.js から Feedly API を叩いて記事データを取得する

Next.js から Qiita API v2 を叩いて人気記事のデータを取得する

フロントエンド開発に関連する技術系記事をまとめてチェックできる「TechDeck」という Web サイトを作ってみた

Headless UI のドロップダウンメニューで next/link を使うとキーボード操作での挙動がおかしくなる件を解決する

Internet Explorer 11 がついにサポート終了、2022年 6月 15日でお別れへ

「できるポケット HTML&CSS全事典」の第4刷、重版が決定しました

Google Chrome が4週間隔にリリースサイクルを高速化、Edge も同様に

指定テキストをハイライト表示する「Text Fragment」付きリンクをツイートするためのブックマークレット

:focus-within 疑似クラスを IE11 でも使用可能にする Polyfill 書いてみた

Google Chrome 88 の DevTools に Web Vitals （ウェブバイタル）情報の表示オプションが追加される

Next.js を使用して、サブ Blog を Jamstack な Blog としてリニューアルしてみた件

書籍「できるポケット HTML&CSS全事典」が Kindle Unlimited 読み放題の対象になりました

Next.js アプリケーションで静的にツイートを埋め込む「static-tweet」を使いやすくカスタマイズしてみた

Next.js + Formik で作るアクセシブルな問い合わせフォームを考えてみる

「できるポケット HTML&CSS全事典」の第3刷、重版が決定しました

Next.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる

Windows 10 用 WSL 2 + Ubuntu を使用した、imgp コマンドによる画像の一括リサイズ

Firefox 83 に「HTTPS-Only モード」が追加、Web サイトへの接続時、HTTPS 接続を強制可能に

カラーコードをコピーしてコントラスト比のチェックもできるツールを公開しました

:focus-within 疑似クラスでキーボード操作に対応したドロップダウンメニューを作ってみよう

優れた UX を提供する Web サイトを強調するため、Chrome for Android に「Fast Page」ラベルが導入される

Firefox 78 が正式リリース、CSS の :is()、:where() 疑似クラスに対応し、複数セレクタの記述が捗る

CSS カスタムプロパティ（CSS Variables）を使用して、ダークモード対応 CSS をスマートに書く

AMP ページで Font Awesome を使用する

Movable Type のテンプレートタグで使用可能な演算関数を使って画像の高さを算出する

AMP の実装で「要素に class 付けて開閉する」みたいな UI は amp-bind を使うと超簡単で手軽だった件

Blog をリニューアルしました