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

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

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

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

オープンソースのヘッドレス CMS 「Strapi」をさくらの VPS でセルフホストしてみる

details 要素の name 属性によるグルーピングが全ブラウザで利用可能に

X（Twitter） API を使用して、投稿データ用の JSON から定期的に自動投稿する Python スクリプトを書いてみた

CSS Pseudo-Elements Module Level 4 に追加された ::details-content 疑似要素はブラウザサポートされると便利そう

font-size-adjust プロパティのブラウザサポートが足並みそろった件

Dify をさくらの VPS でセルフホストしてみる

Dify をアップデートしたらナレッジのデータソースで「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 接続を強制可能に

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