Why I Won’t Use JSDOM
If you’ve been testing anything front-end related in the past 10 years, you’ve likely used JSDOM. In itself, JSDOM is not an environment or runtime. It’s a polyfill library, containing implementations for a bunch of WHATWG standards, like HTML and DOM, for Node.js. Why Node.js? Well, because the library’s goal is to execute browser-oriented code without paying the cost of spawning the actual brows
Exploring the DOMPurify library: Bypasses and Fixes (1/2). Tags:Article - Article - Web - mXSS
title: Exploring the DOMPurify library: Bypasses and Fixes (1/2) date: Nov 17, 2024 tags: Article Web mXSS 📜 Introduction 🔍 How does client-side HTML sanitizer works? ❓ Why are mutation XSS (mXSS) possible? ▶️ DOMPurify 3.1.0 bypass (found by @IceFont 👑) Node flattening HTML Parsing states Proof Of Concept ⏩ DOMPurify 3.1.1 bypass DOMPurify 3.1.0 fix DOM Clobbering issue Proof Of Concept ⏭️ DOM
A virtual DOM in 200 lines of JavaScript
In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools like React. React, Vue and the Elm language all simplify the creation of interactive web
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
testing-library でユーザの気持ちになって書くフロントエンドのテスト
TL;DR フロントエンドのテストが壊れやすく要因の一つは、ユーザがどのようにソフトウェアを使うかをクエリに反映できていないからかも testing-library はソフトウェアを使うユーザの気持ちを反映させやすいようにクエリの優先度をつけていて、それに従うほうがいい 優先度の低いクエリも役に立つことがある 運用しているアクセシビリティなどの実装のガイドラインに沿うようなテストを作るとき アクセシビリティの低い実装をリファクタリングするためのテストを作るとき はじめに フロントエンドのテストに用いるツールとして testing-library が知られています。testing-library は提供しているクエリに優先度をつけています。この優先度は、どういう基準でつけられているのでしょうか。 この記事では、 testing-library のガイドを読みながら、クエリの優先度を「ユーザの
JavaScript eventing deep dive | Articles | web.dev
Event.stopPropagation() and Event.preventDefault() JavaScript event handling is often straightforward. This is especially true when dealing with a simple (relatively flat) HTML structure. Things get a bit more involved though when events are traveling (or propagating) through a hierarchy of elements. This is typically when developers reach for stopPropagation() and/or preventDefault() to solve the
Don't attach tooltips to document.body
09 Mar, 2021 TL;DRInstead of attaching tooltips directly to document.body, attach them to a predefined div in document.body. BAD <body> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> <body> <body> <!-- this div stays forever, just for attaching tooltips --> <div id="tooltips-container"> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> </d
Using AbortController As An Alternative For Removing Event Listeners | CSS-Tricks
Using AbortController as an Alternative for Removing Event Listeners The idea of an “abortable” fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() — even multiple calls — whenever we want. Here’s a super simple example using AbortController to cancel a fetch() request: const controller = new AbortController(); const res
Vanilla Hooks (outside React)
Photo by Vishal Jadhav on UnsplashHooks are a pattern, not something usable with React library only, and this post would like to explain, and walk through, some interesting possibility. What are hooks?Hooks are nothing more, and nothing less, than a wrap around a generic callback. The callback itself is not a hook, unless it’s being handled by a hook-helper, in this case provided by µhooks library
Detached window memory leaks | Articles | web.dev
What's a memory leak in JavaScript? A memory leak is an unintentional increase in the amount of memory used by an application over time. In JavaScript, memory leaks happen when objects are no longer needed, but are still referenced by functions or other objects. These references prevent the unneeded objects from being reclaimed by the garbage collector. The job of the garbage collector is to ident
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
John Papa for Pluralsight Posted on Oct 13, 2019 • Edited on Oct 15, 2019 • Originally published at johnpapa.net Are you using Vue, React, Angular, or Svelte to create web apps? I am, and if you are too, I bet it's been a while since you've written an app that renders content without these fine tools. Armed with only what comes with the browser. Years ago, this is exactly how many of us wrote web
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
KeyboardEvent.keyCodeとは何か - WebStudio
Tweet (list) 導入 KeyboardEvent.keyCodeとは何なのかについて少し解説してみたいと思います。 Webアプリでキーボードからの入力を処理する場合に、KeyboardEvent.keyCodeと、 KeyboardEvent.charCodeの二つ(さらにKeyboardEvent.whichを使う人も希に見かけますが)を最初に見かけられた方が多いのではないかと思います。 あなたがこれらの属性を初めて知った時、そのドキュメントはどのように解説していたでしょうか。 KeyboardEvent.charCodeはシンプルで誤解するのも難しいぐらいです。 しかし、KeyboardEvent.keyCodeはそうではありません。 多くの人は、この属性を根本的に間違った情報と共に知ったと思います。 KeyboardEvent.keyCodeの歴史 KeyboardEven
EventTarget の継承可能化による EventEmitter の代替 | blog.jxck.io
Intro 念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。 これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。 Allow constructing and subclassing EventTarget Update Chrome Canary 64 で実装が確認できたため、DEMO を追加した。 EventTarget EventTarget には addEventListener, removeEventListener, dispatchEvent が定義されている。 これは、ブラウザが内部で生成する Event や、任意に生成された CustomEvent を発火/補足するために利用される。 callback = console.log.bind(cons
HTMLCollection は Iterable なのか？ - Qiita
TL; DR DOM API 的には HTMLCollection は Iterable となっていないが、Web IDL 的には Iterable になっている。 Chrome, Firefox では Iterable として実装されており、Safari は 11 から Iterable になっている。また core-js(babel-polyfill) でも Iterable になる。 一方で MS Edge 40 では HTMLCollection は Iterable になっていない。 闇。 イントロダクション JavaScript の言語仕様である ECMAScript ではオブジェクトの分類として Iterable と ArrayLike があります。 いずれも Array.from で Array に変換することが出来ます。 Iterable について Iterable は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deep-copying in JavaScript using structuredClone | Articles | web.dev
WorkerDOM: Concurrency for JavaScript programming with the DOM