こんにちは、フロントエンドエンジニアの mehm8128 です。 今回は新しく検討されている ARIA NotifyAPI について紹介します。 ARIA Notify とは ARIA Notify とは、既存の ARIA ライブリージョンにおける問題点を基に検討されている、新しいAPI です。document.ariaNotify() のように命令的に呼び出すことで、スクリーンリーダーや点字ディスプレイなどの支援技術に情報を伝えることができます。 ただし、既存のライブリージョンを完全に置き換えるものではありません。本来の目的で利用されているライブリージョンはそのままで良く、意図しない用いられ方をしてしまっている部分で、より正確に支援技術に情報を通知するためのAPI となっています。 現在は仕様の議論段階で、最低限の機能が入ったAPI が Edge では 136 以降の Origi

Resilient ImportMaps - Better Theme Development and BeyondImportmaps are great for both performance and developer experience, but their original limitations made them hard to use, especially at Shopify’s scale. We stepped up and pushed changes across theHTML spec,Chromium and WebKit to fix these issues at the web platform level. Now, developers can interleaveJavaScript modules and multiple im

i-html is a drop in tag that allows for dynamically importinghtml, inline.It's a bit like an <iframe>, except thehtml gets adopted into the page. You might have used somethingsimilar before,it might seem familiar to othertechniques such ashotwired turbo orsimilar. You might have even used an element very close to this one, for example the popular include-fragment-element byGitHub. This el

Thisguide is open source, pleasego ⭐️it onGitHub 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 PlatformTechnologies —namelyHTML,CSS, and

It's happening! One of the features I am most hyped about hasjust landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the PopoverAPI. Popover provides so many awesome primitives and developer affordances forbuilding layered interfaces like tooltips, menus, teachingUIs, and more. Some quick highlights of popover capabilities include: Promotion to the

Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol

The MDN Curriculum provides a structuredguide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. Last updated: February 2024 Beginner's level Self-paced Free Defines the essential skills and knowledge every front-end developer needs for career success and industry relevance.Created by Mozilla and refined with insights from


=>htmz> a low power tool forhtml htmz is a minimalistHTML microframework forcreating interactive and modular web user interfaces with the familiarsimplicity of plainHTML. [GitHub] plain🍦 Use straight upHTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>.Just vanillaHTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JSbundles to l

The content previously available on this website has been moved to myblog, in the form of books, inPDF or ePub format. This website was basically a "web" version of my books, but I could not maintain the same content in 2 different places,it was unsustainable as a solo project, so I decided to focus on myblog and my books. You can access the books, free of charge, at https://flaviocopes.com/ac

LightweightJavascript Framework Review (For Django Developers) Introduction Many developers are confused when they try to find a LightweightJavascript Framework for the Django project because there are so many options. In this post, I will talk and compare lightweightjavascript frameworks, and help you decide which one is the best for your Django project. If you want to: RenderHTML in Django,

2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏アーカイブ本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの

著者 株式会社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の多様性に対して技術的な正解がひとつではないことを示しています。本書はフロントエンドの技術を俯瞰し、「エンジニアが共通して知っておくべき技術はなにか」、「(多種多様なエンジニアにとって)どの分野にフォー

Invokers はJavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。 <button> 要素に invoketarget 属性を指定することにより、JavaScript を削減し、より宣言的な方法でUI にインタラクションを追加できます。下記の例では invoketarget 属性に <dialog> の id を指定することで、<button> 要素をクリックしたときに <dialog> 要素を開くことができます。 <button invoketarget="dialog">Open Dialog</button> <dialog id="dialog">Content</d

JSer.info #662 - Babel v7.23.0リリースされました。 7.23.0 Released: Decorator Metadata and many new import features! · Babel Stage 3のDecorator Metadataのサポート、Stage 3のimport sourceのサポートが追加されています。 Stage 2のimport deferのサポート、Stage 1のOptional Chaining Assignmentのサポート、TypeScript 5.2のサポートされています。 またBabel 8がαリリースされています。 変更点やアップデート方法については、マイグレーションガイドが公開されています。 Upgrade to Babel 8 · BabelReactやVueなどに対応したNext.jsやNuxtのよう


リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く