A virtual DOM in 200 lines of JavaScript
May 19, 2024 - Póvoa de Varzim, Portugal 🇵🇹 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 li
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 のガイドを読みながら、クエリの優先度を「ユーザの
Deep-copying in JavaScript using structuredClone | Articles | web.dev
Deep-copying in JavaScript using structuredClone Stay organized with collections Save and categorize content based on your preferences. The Platform now ships with structuredClone(), a built-in function for deep-copying. For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in functio
JavaScript eventing deep dive | Articles | web.dev
JavaScript eventing deep dive Stay organized with collections Save and categorize content based on your preferences. preventDefault and stopPropagation: when to use which and what exactly each method does. 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
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Don't attach tooltips to document.body
10 Mar, 2021 Don’t attach tooltips to document.body TL;DR Instead 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> GOOD <body> <!-- this div stays forever, just for attaching tooltips --> <div id="tooltips-container"> <!-- temporary div, vanishes when to
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
2021年のウェブ標準とブラウザ | gihyo.jp
[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社
DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。 ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い？ とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。 最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう？ appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC
![[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/b30f4f53ece097d30927e62ceda65d52134bc034/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2020%2F11%2Fdom_enomous_ranges_eyecatch-min.png)
Detached window memory leaks | Articles | web.dev
Detached window memory leaks Stay organized with collections Save and categorize content based on your preferences. 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 prev
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
John Papa for Pluralsight Posted on Oct 13, 2019 • Updated 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
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
KeyboardEvent.keyCodeとは何か - WebStudio
EventTarget の継承可能化による EventEmitter の代替 | blog.jxck.io
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node isConnected
WorkerDOM: Concurrency for JavaScript programming with the DOM
Traversing the DOM with JavaScript | Zell Liew