Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
domrec-core
Advanced tools
Readme
DOMRec records and replays DOM updates to make lightweight, pixel-perfect screenshots and movies. Perfect for Web application demos.
This project is only possible due to the awesome groundwork by https://github.com/rocallahan in https://github.com/Pernosco/DOMRec. See his article: DOM Recording For Web Application Demos.
The ability to record the DOM of a website makes this package very flexible and allows many other possibilites. There are a few tools that already built up on this:
domrec-core
to record DOM changes of any website.npm install --save domrec-core
# or
yarn add domrec-core
You can find the two needed files (recording.js
and replay.js
) inside the dist
folder.
The code basically consists of two parts:
Recording
the DOMreplaying
an existing recordTo start a recording, you have to pass an HTML node to the DOMRecorder
class. You can also pass document.body
in case you want to record the whole window.
Example which only records everything inside a div with the id content
:
<script src="./dist/recording.js"></script>
<script>
window.recorder = new DOMRecorder(document.getElementById("content"));
</script>
In most cases you want to start recording after the DOMContentLoaded
event has fired.
Ending a recording is easy:
const contents = window.recorder.stop();
document.body.textContent = JSON.stringify(contents);
Use the DOMReplayManager
to setup and init the replay of a recording. You have to pass two parameters:
<script src="./dist/replay.js"></script>
<div id="replayContainer" style=""></div>
<script>
const recording = contents // the stored contents object from the recording above
const m = new DOMReplayManager(document.getElementById('replayContainer'), recording)
m.addReplayStylesheet('./domrec-replay.css')
m.init()
</script>
In most cases you want to add the demo/domrec-replay.css
file with the addReplayStylesheet
function, otherwise it will look really bad. Try it out ;)
npm install
npm run build
(in case you want to have source-maps of better debugging, use build:dev
)demo/record-demo.html
in the browser and start recording.//// Paste your demo data text here.
inside demo/replay-demo.html
and simply open demo/replay-demo.html
The recording produces an object with the following properties:
initialState
: The initial state of the DOM when starting to recordactions
: The DOM changesstylesheets
: The (external) stylesheets of the website when the recording startediframeStylesheets
: Contains the URL of stylesheets of iframes encountered during recording.height
: The height of the initial root nodewidth
: The width of the initial root nodeFAQs
Base package for recording and replaying DOM updates on web pages
The npm package domrec-core receives a total of 38 weekly downloads. As such, domrec-core popularity was classified as not popular.
We found that domrec-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.