ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
React 19 Beta – React
This beta release is for libraries to prepare for React 19. App developers should upgrade to 18.3.0 and wait for React 19 stable as we work with libraries and make changes based on feedback. In our React 19 Beta Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19 Beta. In this post, we’ll give an overview of the new features in React 19, and how you can adopt them
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo
GitHub - WICG/translation-api: A proposal for a web translation API
This proposal is an early design sketch by the Chrome translate API team to describe the problem below and solicit feedback on the proposed solution. It has not been approved to ship in Chrome. Browsers are increasingly offering language translation to their users. Such translation capabilities can also be useful to web developers. This is especially the case when browser's built-in translation ab
[HackerNotes Ep. 68]: 0-days & HTMX-SS with Mathias
Hacker TLDR;HTMX Bypasses CSP Bypass: HTMX triggers can be abused to bypass CSP’s via <img src=x hx-on:htmx:load='alert(0)' /> - full writeup below. Client-side response header injection to XSS: HTMX uses certain headers to help instruct the framework for certain behaviours. This can be abused via HX-Redirect: javascript:alert(1) for XSS if you can inject a response header. Bypassing hx-disable: h
![[HackerNotes Ep. 68]: 0-days & HTMX-SS with Mathias](https://cdn-ak-scissors.b.st-hatena.com/image/square/b8c65f4910e79834cfcddd21a60954a9a0dbb036/height=288;version=1;width=512/https%3A%2F%2Fbeehiiv-images-production.s3.amazonaws.com%2Fuploads%2Fpublication%2Flogo%2Ff3cc9f6e-341e-452a-9b50-a244bcc4cf92%2FCritical_Thinking_Podcast_Cover_Square.jpg)
HTML attributes vs DOM properties
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
Node.js — Node.js 22 is now available!
We're excited to announce the release of Node.js 22! Highlights include require()ing ES modules, a WebSocket client, updates of the V8 JavaScript engine, and more! Node.js 22 will enter long-term support (LTS) in October, but until then, it will be the "Current" release for the next six months. We encourage you to explore the new features and benefits offered by this latest release and evaluate th
Rspack v1.0 Release Plan · web-infra-dev/rspack · Discussion #6315
Introduction We are excited to announce the planned release of Rspack v1.0 in July 2024! This release will include several key features aimed at improving the functionality and performance of Rspack. Below is an overview of the key features ahead of the release. Key Features Before v1.0 1. Lazy Compilation Support Lazy compilation will significantly improve the performance of large applications th
DOMDOMタイムス#14: Eventインタフェースのbubblingとcomposed
めちゃくちゃ久しぶりの更新になってしまったドムドムタイムスです👶 (JSConfに全身全霊を捧げていました！) さて、今日はEventインターフェースのbubblingとcomposedについてチラチラ見ていってみます。 イベントのインターフェースのおさらい まずイベントがどういうインターフェースになっていたか軽く確認してみましょう！ 例えばclickイベントはPointerEventインターフェースを持ったオブジェクトの1つでした。 このPointerEventインターフェースとやらは辿っていってみると、下のようにEventインターフェースをinheritしているわけですね。 Eventインターフェースを起点として、いろいろなイベントが実装されています。 例えばEventインターフェースをinheritしているUIEventと同じレベルにSubmitEventやCustomEventな
Initiative on Sponsorship Forwarding
[[toc]] It's not a secret that open-source projects are now a critical part of almost every software project. While most open-source projects are maintained by volunteers, the sustainability of these projects becomes a big concern. The recent xz/liblzma vulnerability accident is a great example that shows the importance of open-source projects and how severe the problem could be. There are multipl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more · React Native
Add `transpileDeclaration` API method by weswigham · Pull Request #58261 · microsoft/TypeScript
Remove automatic fetch `cache` instrumentation by acdlite · Pull Request #28896 · facebook/react
GitHub - tokopedia/gripmock: gRPC Mock Server
Firefox onmouseover bypass · Issue #37 · LavaMoat/LavaDome
GitHub - LavaMoat/LavaDome: Secure DOM trees isolation and encapsulation leveraging ShadowDOM
現代CSSフレームワークの内部実装とその仕組み
GitHub - chakra-ui/eslint-plugin-panda: Official ESLint Plugin for Panda CSS
Codemod: Automated Code Migrations & Dependency Upgrades
