npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

rad-randomizer

v0.0.3

Published

rad-randomizer is a Reveal.js RadReveal add-on for attaching seeded PRNGs to your slides

Readme

#rad-randomizer Build Status rad-randomizer is a Reveal.js RadReveal add-on for attaching seeded PRNGs to your slides.

Check out the demo slideshow to see what rad-randomizer can do.

Check out RadReveal to understand how these add-ons work.

##What does rad-randomizer do?

rad-randomizer can add a seeded pseudo random number generater (PRNG) to your slides. You can use these PRNGs in other reveal.js add-ons to attach random seeming but predictable behaviors. That can make your slideshow seem more interesting with less work!

##How is do you use it?

Just add a data-rad-randomizer attribute with a non-blank value to any slide. Those slide's data property will have a property randomizer attached. That will be a Rng-js object, which has a random() method that supplies a random seeming number based on a seed.

So if you had a slide set up like this:

<section data-rad-randomizer="99">

Then in your own add-on code the slide object supplied for attribute event listeners would have a data.randomizer property which could supply random() seeming numbers.

function listener(attrVal, slideObj, event, radEventName) {
    var num1 = slideObj.data.randomizer.random();
    var num2 = slideObj.data.randomizer.random();
    var num3 = slideObj.data.randomizer.random();

num1, num2, and num3 will always get the same value until you change that data-rad-randomizer value.
Check out the Rng-js documentation to find out what other methods it supports.

##What attribute values can you use for data-rad-randomizer?

The attribute takes several special values, or any other value you want.

  • TEXT - uses the slide text as a seed.
  • HEADING - uses text from all h1 ... h6 tags as a seed.
  • H1 ... H6 uses text from just the h1 ... h6 tag you specified
  • HTML - uses the slide html as a seed.
  • RANDOM - uses a Math.random() as the seed (so it will change each reload).
  • If you supply a number, then that number will be used as the seed.
  • If you supply any other value, then that string will be used as the seed.

So for example, if you had a slide like this:

<section data-rad-randomizer="HEADING">
    <h1>This is the heading text</h1>
    <h2>Also part of the heading text</h2>
    <p>This is not part of the heading.</p>
</section>

Then the randomizer would use "This is the heading textAlso part of the heading text" as the seed, and as long as that heading text didn't change, then the random numbers supplied would be the same ever reload.

##What if you need several independent randomizers per slide?

Each slide will also have a getRandomizerFor() property, which you can use to get a custom randomizer within the slide for specific purposes. For example maybe you want one randomizer to drive the background color and another to drive some kind of animation.