On the ‹dl›
Introduction The <dl>, or description list, element is underrated. It’s used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you’ve probably seen these layouts out in the wild… Each of these examples shows a list (or lists!) of name–value pairs. You might have also seen lists of name–value pairs to describe lodging
Basecoat 1.0.0 is the first stable release of Basecoat as a Tailwind CSS, vanilla HTML, CSS, and JavaScript implementation of shadcn/ui's visual language for non-React stacks. This is a large release. It reshapes the package, public component APIs, style system, JavaScript lifecycle, docs, and template story around a stable 1.0 foundation. What is Basecoat? Basecoat brings the shadcn/ui look and c
Don't disable buttons
October 30, 2023 Don't disable buttons One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a
GitHub Discussions の更新を Slack に通知する (with GitHub Actions) - 平常運転
タイトルでほぼ全て。 動いている様子github.com 2021/11/15 現在の Slack の GitHub 連携では GitHub Discussions の更新を Slack に通知することが出来ない。そのうちできるようになるだろうとは思うものの、それまでの間のつなぎとして GitHub Actions による通知を作った。 Webhook ベースの物と比べると GitHub Actions の workflow 起動のオーバーヘッドがある分若干（十数秒程度？）通知が遅れてしまうことなどもあり少しイケてない節はあるが、そのうち公式のツールでできるようになるまでのつなぎとしては許容可能な品質だろうと思っている。 GitHub からの Webhook を変換して Slack に投げ直す HTTP エンドポイントを作る、とかだと格好いいけれど、つなぎとして使う前提であれば外部に何かプ
GitHub - Kalabasa/htmz: html with targeted manipulation zones
You 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
21 May The balance has shifted away from SPAs Posted May 21, 2022 by Nolan Lawson in Web. Tagged: spas. 24 Comments There’s a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years ago. Hip new frameworks like Astro, Qwik, and Elder.js are touting their MPA capabilities with “0kB JavaScript by default.” Blog posts are making the rounds listing all the challenges
altディシジョンツリー
About this translationボランティアによる本翻訳は原文（英語）の内容を正確に反映できていない可能性があります。 翻訳者 Hiroya UGA. 寄稿者 Naoki Nakamura. WAIは全ての翻訳者に感謝し、また他のtranslationsも歓迎します その画像はテキストを含んでいますか？ Yes: かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストが視覚効果のためだけに表示されている場合 空のalt属性を利用します。詳細は装飾目的の画像 (英語版)を参照してください。 かつ、そのテキストがアイコンなど特定の機能を持つ場合 alt属性を、画像の機能を伝えるために利用します。詳細は機能を持つ画像 (英語版)を参照してください。 かつ、画像内のテキストが
ブラウザが HTML を解釈する方法はその他のプログラミング言語と比べてはるかに寛容です。ブラウザは HTML 内に構文エラーを発見しても大抵の場合は問題なくページに表示されます。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるためです。 例として以下のコード例を確認してみましょう。<ul> タグは仕様でその子要素には 0 個以上の <li> タグまたは script supporting elements (<script> と <template>)のみが許可されています。従って、<ul> タグの子要素に <a> タグを配置している以下のコードは構文エラーとなります。 <ul> <a href="/home">Home</a> <a href="/about">About</a> <a href="/blog">Blog</a> <a hre
Hyperclay | HTML APPS
Experience the Zen of making, hosting, and sharing great software in a single, portable, self-updating, vanilla HTML file Build web apps like you're sculpting clay, not managing infrastructure. Modern web development forces you through layers of abstraction: config files, build steps, magic frameworks, deployment pipelines. Hyperclay returns to a simpler model: your app is a single HTML file you (
【HTML】popover属性を使うとJavaScriptなしにモーダルが作れるらしい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Ultra-lightweight UI library Semantic, minimal, zero dependencies. ~8KB CSS and JS. Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements. Semantic tags and attributes
Optimal Images in HTML
What are best AI tools? Take the State of AI survey
GitHub - damoeb/rss-proxy: RSS-proxy allows you to do create an RSS or ATOM feed of almost any website, just by analyzing just the static HTML structure.
You 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
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 世界でもっとも話題となった作品がこちら HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。 この記事では、2022年に特に人気の高かったHTMLスニペットを、ランキング形式でまとめた The Most Hearted of 2022の中から、特に印象に残った、実用性の高い作品をご紹介。 CSSのみで表現されたお手軽なHTMLスニペットから、オドロキのユーザー体験を提供したり、CSSアニメーションなどにも注目が集まっています。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Click To Z
Herb - Powerful and seamless HTML-aware ERB parsing and tooling. | Herb
HTML-awareIntelligently recognizes and navigates HTML structure within ERB templates, ensuring precise parsing across interleaved markup and Ruby code. Built on PrismPowered by Prism, Ruby's new official default parser as of Ruby 3.4. Prism is designed to be error-tolerant and is adopted by major Ruby runtimes including CRuby, JRuby, TruffleRuby.
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? htmxとは htmxは近年話題のJavaScriptライブラリで、JavaScriptのライブラリながらJavaScriptを書くことなく、HTMLだけでAjax通信やそれに伴うDOMの更新を実現することが可能です。 指標として、1年間のGitHubスター数の増加ランキングであるJavaScriptライジングスター 2024のフロントエンドフレームワーク部門ではReactを抑えて1位を獲得しています。 htmxの思想 htmxの思想については公式サイトに記載されているモチベーションを見るのが分かりやすいでしょう。 motivation
You 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
The 2021 Web Almanac
Web Almanac HTTP Archive’s annual state of the web report Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2021 edition is comprised of 24 chapters spanning aspects of page content, user experience, publishing, and distri
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
模写修行 - 完全無料のコーディング練習サイト
完全無料のコーディング練習サイト このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are
【CSS】セレクトボックスのプルダウンをデザインできるselectmenuが便利すぎた。 - Qiita
はじめに みなさんは、<select> タグを使う時、<option> をいい感じのデザインしたいと思ったことはないでしょうか？ 多くの方は、妥協して、<select> タグを使うか、ライブラリーを使うか、 <div>・<button>などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？ 実は、Open UIから提出された、セレクトボックスのプルダウンをデザインするための草案が、 Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、<selectmenu> が公開されました。 そのため、この記事では <selectmenu> の具体的な内容の紹介と実装方法の解説を行います。 動作環境 <selectmenu> は、まだ実験的なものであるため、限られた環境で再現できます。 そのため、<selectmenu> が動いているの
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
A hand-picked curation of over 1,000 of the best AI, Web3, portfolio, and other outstanding websites on the Internet.
一瞬で理解するHydration
はじめに この記事の内容は、以下の動画でも解説しているので是非見てみてください！（動画の方が多分わかりやすいです！） Hydrationとは？ Hydration（ハイドレーション）とは、直訳すると「水分補給」という意味です。 フロントエンドの世界では、静的な HTML に JavaScript を結び付けてインタラクティブにするプロセスのことを指します。 例えば、React で SSR する場合を考えてみましょう。 SSR では、まずブラウザはサーバーに対して、リクエストを送信します。リクエストを受けたサーバーは、JavaScript を実行して、HTML を作り出します。そして、完成したこの HTML をブラウザに送り返します。 このとき重要なのは、受け取った HTML が "あくまでも見た目しかない" ということです。つまり、このままだと Web ページは静的で、クリックしても何も起
表示速度を飛躍的に向上させるHTML/CSS仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
この記事は、合併前の旧ブログに掲載していた記事（初出：2020年9月8日）を、現在のブログへ移管したものです。現時点の情報に合わせ、表記やリンクの調整を行っています。こんにちは、お久しぶりです。岡部和...
HTMLとCSSの最近の実装テクニックを学べる解説書、実務で通用するスキルを身につけたい人にお勧め -HTML/CSSスキルアップレッスン
HTMLとCSSは基本的には分かるけど、実装で悩むことがある、自分のやり方が正しいか不安に感じる、応用力が足りてない気がする、初心者を卒業してプロとして大きな一歩を踏み込もうとしている人にお勧めの解説書を紹介します。 デザインカンプを理解した上での画像書き出し、情報を伝えるためのマークアップ、柔軟性と汎用性に配慮した実装、要件に適したレイアウト、ユーザビリティに配慮した実装、計画的なレスポンシブ対応、メンテナンス性に優れたコードなど、実務レベルのテクニックを学べます。 本書はHTMLとCSSの解説書ですが、入門書ではありません。それぞれの基礎は理解している人が対象となっています。デザインカンプからWebページを実装する上で必要な知識とテクニックが詳しくていねいに解説されています。 すでに長年従事している人にも、最近はこんなやり方もあるのかと発見があると思います。
概要 画像のデコードは、ブラウザのメインスレッドをブロックします。こちらの記事では、例としてブラウザのメインスレッドが800ミリ秒を超えてブロックされています。 decoding="async" は、その解決策として使うことができます。 loading属性との違い loading属性は、loading="lazy"と使うことによって画像の遅延読み込み化ができます。 loading属性は「画像をいつ読み込むか？」という画像の読み込みのタイミングを担当しますが、decoding属性は「画像をいつデコードするか？」という画像のデコードのタイミングを担当します。 loading=lazyとdecoding="async"の併記 loading="lazy"とdecoding="async"は併用することができます。 注意点としては、デコードのタイミングが遅れることによって、スクロール時に画像が表示
asChild prop とは コンポーネントを使うときに表示される要素を変えたい！ 汎用的なコンポーネントを使用する際、以下のような場合にデザインや挙動は変えずに中でレンダリングされる HTML 要素だけ動的に変えたくなることがあります。 ボタンコンポーネントでリンク（<a> 要素、 Next.js や Gatsby などの Link コンポーネント）を表示したい タイトルを持ったセクションコンポーネントで <main> 要素を表示してセマンティックを変えたい フォームコンポーネントで <search> 要素を表示してセマンティックを変えたい 汎用的なヘッドレスコンポーネント（ロジックや挙動のみのコンポーネント）を実装したい 余談: そもそも見た目は変えずに HTML 要素だけ変えるのってアリ？ コンポーネントの見た目を変えずに表示される HTML 要素を変えると、ユーザの違和感や混乱を
Meta Front-End Developer
Ends soon! Get one of our best deals and build skills with 50% off Coursera Plus. Save now. Launch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started.
手軽なCSSアニメーション！transitionプロパティの使い方（基礎編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい、そんな時に便利なのがtransitionプロパティです。 今回はtransitionプロパティについて解説していきます。 transitionプロパティとanimationプロパティの違い まずは二つのプロパティの何が違うのかを見ていきましょう。 1.transitionプロパティは@keyframesの設定が必要ない animationプロパティでCSSアニメーションを実装する際は、別途@keyframesで変化していく形状などを記述しておく必要がありました。しかしtransitionでは@ke
Minimum viable blog My requirements Should use a domain I already own Should follow modern web standards and have decent SEO It should be very easy to add new content All pages should be statically built This is what I did: Write a small template.html pip install markdown2 Tired, so ask O1 for a render.py script Write some posts Just render, host it, and THAT'S IT! Jekyll? Ghost? Wordpress? All th
BlockNote - Javascript Block-Based React rich text editor
Build a Notion-style editor in minutes.The AI-native, open source rich text editor for React. Add a fully customizable modern block-based editing experience to your product that users will love.
サイボウズ、W3C (World Wide Web Consortium) のメンバーに加入 | サイボウズ株式会社
サイボウズ株式会社は、Web技術の標準化を行う国際団体であるW3Cのメンバーに加入したことをお知らせいたします。 W3CはWeb技術の標準(HTMLやCSSなど)を策定する国際的なコンソーシアムです。サイボウズは、長年Webサービス開発に取り組んできた企業として、基盤技術であるWeb標準の策定に当事意識を持って向き合うことで、Webの発展に貢献してまいります。 本件に関するお問い合わせ先 サイボウズ株式会社 MAIL: w3c@cybozu.co.jp
ウェブページのタイトルの生成方法に関する最新情報 | Google Search Central Blog | Google for Developers
2021 年 8 月 24 日（火曜日） 検索結果と検索クエリの関連性をユーザーが判別する主な方法の 1 つは、検索結果に表示されたウェブページのタイトルを確認することです。そのため、Google 検索では、検索結果に掲載される文書に最適なタイトルを提供し、クリエイター、パブリッシャー、企業などが作成したコンテンツとユーザーを橋渡しできるよう努めています。 タイトルの生成方法 Google は先週、ウェブページのタイトルを生成する新しいシステムを導入しました。以前は、入力されたクエリに基づいてタイトルが変更されることがありました。新システムでは、このようなことは通常行われません。新システムではクエリに関係なく、概要を説明し、文章全体により適合するタイトルを生成していると考えられるためです。 また、10 年以上にわたって HTML テキスト以外でもタイトルを作成してきましたが、新システムでは
ESLint can now lint HTML using the html-eslint language plugin - ESLint - Pluggable JavaScript Linter
Published 13 May, 2025 under Announcements ESLint can now lint HTML using the html-eslint language plugin Bringing HTML linting to ESLint’s new language-agnostic system. In 2024, ESLint announced its plan to become a language-agnostic linter that is capable of linting languages other than JavaScript. Since then, we’ve seen official support added for JSON and Markdown, and most recently, CSS. Today
captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。 基本的な使い方 デモはスマホで見てね。 あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。 PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。 値 capture, captu
You 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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release 1.0.0 🎉 · hunvreus/basecoat
The balance has shifted away from SPAs
markuplint で HTML の構文チェックを始めよう
Oat - Ultra-lightweight, semantic, zero-dependency HTML UI component library
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 | PhotoshopVIP
今更htmxに触れてみた - Qiita
GitHub - webqit/oohtml: HTML for the Modern UI
div タグのスタイルを参照しようとしたら参照できなかった話 - Qiita
HTMLの現状を明らかにする調査「State of HTML」が実施中
Godly - Astronomically good web design inspiration
decoding="async"の使い方とloading="lazy"との違いのまとめ
React コンポーネントの表示する HTML 要素を変える asChild prop を実装する - Qiita
Carl Öst Wilkens´ Blog - Minimum viable blog
Thariq on X: "Using Claude Code: The Unreasonable Effectiveness of HTML"
GitHub - ddamato/html-by-css: Generate html with css
pixmofu.com
cupmen.org
ameblo.jp/makoatu-kateisaien-2022
www.asahi.com
tsujiifarm.hatenablog.com
auto-moto-picks.hatenablog.com