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
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか type="email" などの type 属性に指定した型に値が入力されているか :user-valid は検証の
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2023. Learn more See full compatibility The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it. The :user-invalid pseudo-class must match an :inv
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
The MDN Curriculum provides a structured summary of the essential skills and practices for being a successful front-end developer. The Learn web development Core modules are based on this structure, as well as partner courses such as the Scrimba Frontend developer career path Last updated: October 2025 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end deve
The Valley of Code All rights reserved © 2026 A Flavio Copes project, yes all the 1,664 lessons have been handwritten in over 8 years with passion and sweat, it's not AI slop. Claude Code estimated 5,000 hours of work to write them, that's 2.5 years 24/7. Welcome to The Valley of Code. Your journey in Software Development starts here. We start with Web Development, but you can also learn other pro
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに ※2025/09/15...当時は公式サイトがありましたが、サイトがクローズされたようでした。 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイム
著者 株式会社ICS 池田泰延（いけだやすのぶ） ，西原翼（にしはらつばさ），松本ゆき（まつもとゆき） 著 定価 2,860円（本体2,600円＋税10%） 発売日 2023.11.24 判型 A5 頁数 344ページ ISBN 978-4-297-13871-4 978-4-297-13872-1 概要 フロントエンド開発の範囲は広く、習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの、Webサイトを制作するのか、Webアプリケーションを開発するのか、その違いによって採用すべき技術は全く異なります。それは、Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し、「エンジニアが共通して知っておくべき技術はなにか」、「（多種多様なエンジニアにとって）どの分野にフォー
fabian-hiller/valibot - convert Set to Array pnpm - convert objects to Set and Map preact/signals - convert Set to Linked Lists, adds lazy value evaluation TanStack/table - replace immutable spread calls with mutable arrays | blog post rollup - replace Set with BigInt | Mastodon explainer parcel-bundler/parcel - convert graph to array of BitSets, avoid new calls, Uint32Array + Wasm instead of BigI
Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it? Looking back at that article, none of my ideas were particularly good. But Stephen Shaw’s idea that I linked to tow
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本: 池田泰延, 西原翼, 松本ゆき: Digital Ebook Purchas
