sentineljs - Detect new DOM nodes using CSS selectors (650 bytes)

  •        9

SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (650 bytes). SentinelJS uses dynamically-defined CSS animation rules (@keyframes) to hook into browser animationstart events when a new node matching a given CSS selector is added to the DOM. In general this should be more performant than using a Mutation Observer to watch the entire document tree for changes and iterating through all new child nodes recursively. SentinelJS performs one hash key lookup on calls to the animationstart event so the performance overhead is minimal. If you define the animation-name property on a CSS rule that overlaps with the selector in your SentinelJS watch function then only one of those animations will be called which could cause unexpected behavior. To get around this you can trigger SentinelJS watches from your CSS using custom animation names (see below).

https://github.com/muicss/sentineljs

Tags
Implementation
License
Platform

   




Related Projects

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.

omr.domready.js

  •    

Dom is ready? This project provides easy to detect ready event of dom.

angular-hmr - :fire: Angular Hot Module Replacement for Hot Module Reloading via @TipeIO

  •    TypeScript

Please see repository AngularClass/angular-seed for a working example.bootloader is only needed to detect that the dom is ready before bootstraping otherwise bootstrap. This is needed because that dom is already ready during reloading.

on-change - Watch an object or array for changes

  •    Javascript

It works recursively, so it will even detect if you modify a deep property like obj.a.b[0].c = true.Uses the Proxy API.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.


imagesloaded - :camera: JavaScript is all like "You images done yet or what?"

  •    Javascript

Detect when images have been loaded. You can use imagesLoaded as a jQuery Plugin.

OWASP-Xenotix-XSS-Exploit-Framework - OWASP Xenotix XSS Exploit Framework is an advanced Cross Site Scripting (XSS) vulnerability detection and exploitation framework

  •    Python

OWASP Xenotix XSS Exploit Framework is an advanced Cross Site Scripting (XSS) vulnerability detection and exploitation framework. It provides Zero False Positive scan results with its unique Triple Browser Engine (Trident, WebKit, and Gecko) embedded scanner. It is claimed to have the world’s 2nd largest XSS Payloads of about 1500+ distinctive XSS Payloads for effective XSS vulnerability detection and WAF Bypass. It is incorporated with a feature rich Information Gathering module for target Reconnaissance. The Exploit Framework includes highly offensive XSS exploitation modules for Penetration Testing and Proof of Concept creation. Antivirus Solutions may detect it as a threat. However it is due to the features in the exploitation framework.

the-platform - Web. Components. 😂

  •    TypeScript

Note: React 16.8+ is required for Hooks. Detect and retrieve current device Motion.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

  •    C++

asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this. asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

icaro - Smart and efficient javascript object observer, ideal for batching DOM updates (~1kb)

  •    Javascript

icaro is really fast compared to the other reactive libs because it smartly throttles all the state changes. icaro will let you listen to all the changes happening in a javascript object or array, grouping them efficiently, and optimizing the performance of your listeners.

tsdx - Zero-config CLI for TypeScript package development

  •    TypeScript

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration. Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for your convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

clockwise - Watch face framework for Android Wear developed by ustwo

  •    Java

Clockwise is a watch face framework for Android Wear developed by ustwo. It extends the Android Wear Watch Face API and provides base classes and helpers for quickly and correctly developing watch faces. This includes properly handling the various modes of operation, hardware constraints, changes in date/time/time zone, access to data, and performance considerations. ustwo worked with Google to develop the first watch faces on the Android Wear platform, and in doing so, we learned a great deal and identified the benefit of extending the existing watch face API into an open source framework. The purpose of Clockwise is to help developers more easily consider the inherent nuances in developing watch faces on the Android Wear platform, including varying hardware specifications and battery life conservation. The goal is that by utilizing the Clockwise development framework in conjunction with the Watch Face design guidelines (co-created with ustwo), developers can enhance the user's experience on Android Wear.

nanomorph - 🚅 - Hyper fast diffing algorithm for real DOM nodes

  •    Javascript

It's common to work with lists of elements on the DOM. Adding, removing or reordering elements in a list can be rather expensive. To optimize this you can add an id attribute to a DOM node. When reordering nodes it will compare nodes with the same ID against each other, resulting in far fewer re-renders. This is especially potent when coupled with DOM node caching. Sometimes we want to tell the algorithm to not evaluate certain nodes (and its children). This can be because we're sure they haven't changed, or perhaps because another piece of code is managing that part of the DOM tree. To achieve this nanomorph evaluates the .isSameNode() method on nodes to determine if they should be updated or not.

URL-Detector - A Java library to detect and normalize URLs in text

  •    Java

The url detector is a library created by the Linkedin Security Team to detect and extract urls in a long piece of text.Note: Keep in mind that for security purposes, its better to overdetect urls and check more against blacklists than to not detect a url that was submitted. As such, some things that we detect might not be urls but somewhat look like urls. Also, instead of complying with RFC 3986 (http://www.ietf.org/rfc/rfc3986.txt), we try to detect based on browser behavior, optimizing detection for urls that are visitable through the address bar of Chrome, Firefox, Internet Explorer, and Safari.

Crawler-Detect - 🕷 CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent

  •    PHP

CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent and http_from header. Currently able to detect 1,000's of bots/spiders/crawlers. Run composer require jaybizzle/crawler-detect 1.* or add "jaybizzle/crawler-detect" :"1.*" to your composer.json.

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

etch - Builds components using a simple and explicit API around virtual-dom

  •    Javascript

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

react-faux-dom - DOM like structure that renders to React

  •    Javascript

DOM like data structure to be mutated by D3 et al, then rendered to React elements. ReactFauxDOM supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing.

react-tiny-dom - 🍙 A minimal implementation of react-dom using react-reconciler

  •    Javascript

react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API. The purpose of this project is to show the meaning of each method of the ReconcilerConfig passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.