タグ

articleとDOMに関するefclのブックマーク (22)

  • 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

    efcl
    efcl 2024/05/26
    Virtual DOMを実装しながら仕組みについてみていく記事
  • 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

    HTML attributes vs DOM properties
    efcl
    efcl 2024/04/25
     HTMLDOM Reflection Preact/VueReactUI  

    HTML

    DOM

    JavaScript

    article
     
  • testing-library でユーザの気持ちになって書くフロントエンドのテスト

    TL;DR フロントエンドのテストが壊れやすく要因の一つは、ユーザがどのようにソフトウェアを使うかをクエリに反映できていないからかも testing-library はソフトウェアを使うユーザの気持ちを反映させやすいようにクエリの優先度をつけていて、それに従うほうがいい 優先度の低いクエリも役に立つことがある 運用しているアクセシビリティなどの実装のガイドラインに沿うようなテストを作るとき アクセシビリティの低い実装をリファクタリングするためのテストを作るとき はじめに フロントエンドのテストに用いるツールとして testing-library が知られています。testing-library は提供しているクエリに優先度をつけています。この優先度は、どういう基準でつけられているのでしょうか。 この記事では、 testing-library のガイドを読みながら、クエリの優先度を「ユーザの

    testing-library でユーザの気持ちになって書くフロントエンドのテスト
    efcl
    efcl 2023/03/08
    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

    Deep-copying in JavaScript using structuredClone  |  Articles  |  web.dev
    efcl
    efcl 2021/12/20
    `structuredClone`でのdeep cloneについて。 shallow cloneとの比較、`structuredClone`でコピーできないデータの制限について。
  • 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

    efcl
    efcl 2021/09/13
    Event Capturing/Event Bubbling phaseの動きについての記事。 それぞれphaseにおいてEventの流れを止める`stopPropagation()`、`stopImmediatePropagation()`、`preventDefault()`の動作についての解説。
  • mouseover 中に表示される DOM のデバッグ | blog.jxck.io


    Update 2024-03-30: Chrome 123  "Emulate a focused page"   Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page  UI Tab  Dev Tools  "Emulate a focused page"  Intro mouseover  DOM 
    mouseover 中に表示される DOM のデバッグ | blog.jxck.io
    efcl
    efcl 2021/08/22
    mouseover中に表示されるDOM要素を開発者ツールでデバッグする方法について
  • 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

    efcl
    efcl 2021/08/16
    `document.body`直下にツールチップ表示用の要素を追加すると、多くの要素のスタイル更新処理が行われパフォーマンスの問題となった話。 どのようにレイアウト計算の影響を確認したか、ツールチップを表示用の要素をラッ
  • 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

    Using AbortController as an Alternative for Removing Event Listeners | CSS-Tricks
    efcl
    efcl 2021/02/23
    Chrome 88から`addEventListener`がAbort Signalに対応したため、`removeEventListener`を使わずにイベントリスナーを解除できるという話
  • 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

    Vanilla Hooks (outside React)
    efcl
    efcl 2021/01/07
    uhooksを使ってReact HooksライクにDOM APIを使ったTODOアプリを書く話。
  • 2021年のウェブ標準とブラウザ | gihyo.jp


    2021 myakuragihyo.jp2009Web 2021202020202021 W3CLiving Standard W3C20209 W3C2020
    2021年のウェブ標準とブラウザ | gihyo.jp
    efcl
    efcl 2021/01/05
    2020年におけるHTML、CSS、DOM APIに変化についてまとめた記事。 また、IE 11と旧Edgeのサポート状況、UA Client HintやPrivacy Sandboxなどの取り組みについてなど幅広くウェブ(標準)の状況について扱っている
  • [DOM] Rangeを作りすぎて激重になった話|TechRacho by BPS株式会社

    DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。 ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い? とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。 最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう? appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC

    [DOM] Rangeを作りすぎて激重になった話|TechRacho by BPS株式会社
    efcl
    efcl 2020/11/18
    DOM RangeはLiveなので開放しないと選択してるDOMのアップデートが重くなる問題
  • Node isConnected

    efcl
    efcl 2020/11/14
    `Node.prototype.isConnected`でdocumentに追加されているか判定できる
  • 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

    efcl
    efcl 2020/09/26
    `window.open`で開いたウィンドウにおけるメモリリークについて。 切り離したwindowでメモリリークが起きる原理、heap snapshotや`performance.memory` APIでのメモリの増減の見方。 またメモリリークを避ける方法としてリファレンスを
  • 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

    Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
    efcl
    efcl 2019/10/20
    フレームワークを使わずにDOM APIを使ってウェブページを作成するチュートリアル。 `<template>`タグを使ったコンポーネントの作成、レンダリングなどについて
  • WorkerDOM: Concurrency for JavaScript programming with the DOM

    WorkerDOM: Concurrency for JavaScript programming with the DOM
    efcl
    efcl 2018/08/23
    WebWorkerの中で動くDOMの実装のアルファ版を公開したという話。 メインスレッドでの処理が重なるとjankとなるため、WorkerスレッドでDOM APIの処理を行う実験的実装。 HydrateしたデータでWorkerとの間をやりとりし、変更はMutationOb
  • 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

    Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
    efcl
    efcl 2018/05/27
    React Native DOMというReact NativeをWebにPortするライブラリについての解説。 どのような仕組みでReact NativeのものをWebにPortしているかについて
  • JavaScriptのStreams APIで細切れのデータを読み書きする

    近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ

    JavaScriptのStreams APIで細切れのデータを読み書きする
    efcl
    efcl 2018/05/27
    WHATWG Stream APIについて。 Readable Stream、TransformStream、WritableStreamの使い方や繋げ方について
  • Traversing the DOM with JavaScript | Zell Liew

    efcl
    efcl 2018/04/23
    DOMトラバーサルについての記事。 DOM APIを使ってどのように要素を取得、辿っていくかについて
  • KeyboardEvent.keyCodeとは何か - WebStudio


    Tweet (list)  KeyboardEvent.keyCode WebKeyboardEvent.keyCode KeyboardEvent.charCode(KeyboardEvent.which使)  KeyboardEvent.charCode KeyboardEvent.keyCode  KeyboardEvent.keyCode KeyboardEven
    efcl
    efcl 2018/02/26
    `KeyboardEvent.keyCode`の歴史や実装について。 `keyCode`はOSやブラウザ間で問題があり標準化もされていないため、`key`や`code`を代わりに使うべきという話。
  • 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(con
    EventTarget の継承可能化による EventEmitter の代替 | blog.jxck.io
    efcl
    efcl 2018/01/01
    `EventTarget`のclass extendsでの継承について