# Cloudflare Drop > Deploy static sites to Cloudflare's global network instantly, with no account required to start. ## How it works 1. Drop a folder or .zip file containing your static site (HTML, CSS, JS). 2. Cloudflare Drop uploads and distributes it to Cloudflare's global network. 3. You get a live `workers.dev` URL. 4. Claim the deployment within 60 minutes to keep it. ## For AI agents Use Cl

explain-diff-html.md name explain-diff-html description Use when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output. Explain Diff Please make me a rich, interactive explanation of the specified code change. It should have these sections: Background: Explain the existing system relevant to this change. (You should broadly explore surrounding code for th

Anthropic で Claude Code チームにいる Thariq Shihipar が、 2026年5月8日に「Using Claude Code: The Unreasonable Effectiveness of HTML」という記事を X に公開しました。 「HTML is the new Markdown」という宣言から始まる、AI の出力フォーマットとして Markdown ではなく HTML を活用するメリットを論じた内容です。 HTML is the new markdown. I've stopped writing markdown files for almost everything and switched to using Claude Code to generate HTML for me. This is why. https://t.co/T97

株式会社COUNTERWORKSでフロントエンドエンジニアとして働いている@2_a8udです。 最近UXとアクセシビリティを学ぶ中で、ボタンのように見えるリンク(以下リンクボタン)はよくないみたいな話を耳にするのですが、実際に何でよくないんだっけ？どうやったら解決できるの？という話を書いていこうと思います。 リンクボタンとは この記事でリンクボタンは、ボタンのような見た目のアンカーリンクのことを指します。 ボタンのように見えながらもクリックすると別のURLに遷移したり、ファイルをダウンロードなどの動作をします。 例 Spotify登録サイト (https://open.spotify.com/intl-ja?) Node.jsのダウンロードリンク(https://nodejs.org/en) そもそもリンクとボタンってなにが違うの 画面上のリンクやボタンの役割は、ユーザーを次のアクションへ

geolocation要素による位置情報の取得方法 Chrome 144以降で<geolocation>要素がサポートされた。 JavaScriptのGeolocation APIよりも権限要求や位置情報取得の実装が簡略化された。Geolocation APIでは予期せぬタイミングで権限要求のダイアログが表示されたり、ブラウザがブロックしたり、ユーザー体験が阻害されるケースがあったが、<geolocation>要素ではユーザーの明示的な操作により開始されるので意図とタイミングが明確になった。 <!-- 手動実行 --> <geolocation id="geo-manual"> Fallback: Geolocation element is not supported </geolocation> <!-- 自動実行 --> <geolocation id="geo-auto" auto

2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ

Intro 見落とされがちだが、「Web とは何か」という仕様はない。 Web を定義した W3C のドキュメントもなければ、IETF の RFC もない。 Web は仕様ではないのだ。 これだけしっかりと標準化された技術の粋を集めた総体が、なぜそんなにもフワっとしているのだろうか? 我々は、何を "Web" と呼んでいるのだろうか? HTML+HTTP+URL? 黎明期から Web を見ている人ほど、URL で指定された HTML を HTTP で取得するアーキテクチャを Web と呼ぶ、と思うだろう。 たしかに、それは Sir Tim Berners-Lee が最初に示したコンセプトそのものであったことは間違いない。 ところが、そこから 30 年以上の間、この Web と呼ばれたコンセプトは、ありとあらゆるパーティーからの期待を背負うことになり、当初の最小限のコンセプトだけでは、実態を

Markup from hellA collection of bad practices in HTML, copied from real websites. skip code sample<button type="button" onclick="window.open('https://example.com/other-page')"> <table> <tbody> <tr> <td> <i class="fa fa-arrow-left" aria-hidden="true"></i> </td> <td align="left">Back</td> </tr> </tbody> </table> </button>

フロントエンドカンファレンス北海道2025で視聴したトークごとの個人的なメモと感想をまとめたもの。全部ではなく視聴したトークのみ。オンライン参加なので北海道の美味しい食べ物情報はありません。リアルタイムで書いていたスクラップをちょっと加筆した程度なので、読み物としてはだいぶ雑。 イベント概要 開催日時：2025 年 9 月 6 日（土）10:00AM–6:00PM 場所：エア・ウォーターの森（札幌市 桑園） オンライン配信：YouTube（限定公開のためアカウントのリンクのみ添付） イベントハッシュタグ：#frontendo #フロントエンドチョットデキルルーム #ガウディルーム HTMLの品質ってなんだっけ？ -“HTMLクライテリア”の設計と実践 登壇者：うな @unachang113 さん（LayerX） 視聴中のメモ 前職PR TIMESの活動についての発表 きっかけ 建前：HTM

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> <el-dropdown class="relative inline-block text-left"> <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"> Options <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="tr

これはラムダノートの宣伝を含みます。 Web は専門ではないが、勝手にお勧めの本を書いておこうと思う。 ハイパフォーマンス ブラウザネットワーキング - O'Reilly JapanWebブラウザセキュリティ ― Webアプリケーションの安全性を支える仕組みを整理する – 技術書出版と販売のラムダノートReal World HTTP 第3版 - O'Reilly JapanWeb配信の技術 ―HTTPキャッシュ・リバースプロキシ・CDNを活用する - 技術評論社プロフェッショナルTLS＆PKI 改題第2版 – 技術書出版と販売のラムダノートいろいろなところで言っているがハイパフォーマンスブラウザネットワーキングを読んで欲しい。10 年以上前の本だが、古い部分は他の書籍でカバーすればよい。 セキュリティ関連は Webブラウザセキュリティがとてもわかりやすい。今や HTTPS ありきの時代にな

Button要素ってこんな見た目！ I am a button who has suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper long content!!!!!!! Yey!!!!

Are you using Simple.css? If you are, it would be great if you considered buying me a coffee to say thanks. Things like this really help open source software thrive. You can Buy Me A Coffee or even sponsor me on GitHub. ❤️ Simple.css is a CSS framework that makes semantic HTML look good, really quickly. Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML a

2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発者は <s