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 🙏

© 2024 – Pkg Stats / Ryan Hefner

hackertextjs

v0.4.0

Published

A web based library for customizable hacker text widgets.

Downloads

18

Readme

Hacker Text JS (hackertextjs)

hackertextjs is an animated html/javascript widget library to show matrix esque text for user defined strings. It's purpose is to look really cool.

Demosite

https://spacekitcat.github.io/hackertextjs/demosite/

Features

Hackertextjs lets you define multiple independent widgets. Each Widget can have it's own:

  • Text
  • Frame rate
  • Render strategy
  • Text filters

Status

Test Coverage
Build Status

Usage

You can add HackerTextJS to your project with NPM, just run the commnds below from your project's directory:

$ npm i hackertextjs --save-dev

You should find hackertext.js, style.css along with a stripped-down example project for reference purposes.
The snippet under this paragraph demonstrates the elements required to make hackertextjs work in the browser.
'hacker_text_config' must be defined before including hackertext.js. Each widget entry should define an htmlId,
text, framerate and rows field. Each htmlId must have a corresponding div block with the same ID. style.css
must be imported and each widget must use 'hackertext' as its class. The snippet below shows how a html document
in your projects root directory might make use of hackertextjs:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <script type="text/javascript">
  var hacker_text_config =
  {
    targets: [{
    htmlId: "hackertext",
    text: "A_SPECTRE_HAUNTS_EUROPE_",
    rederer: {
      strategy: "RandomizedFrameRenderStrategy"
    },
    framerate: 3,
    rows: 15
  },
  {
    htmlId: "hackertexttwo",
    text: "DAISY_DAISY_",
    framerate: 5,
    rows: 15
  },
  {
    htmlId: "hackertextthree",
    text: "DONT_FEAR_PERFECTION_YOULL_NEVER_MEET_IT_",
    framerate: 5,
    text_character_filters: ['LeetSourceFilter'],
    rows: 18
  }]};
  </script>
  <script
    src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
    crossorigin="anonymous">
  </script>
  <script type="text/javascript" src="node_modules/hackertextjs/hackertext.js">
  </script>
  <link rel="stylesheet" href="node_modules/hackertextjs/style.css">
</head>
<body>
  <div class="hackertext" id="hackertext"></div>
  <div class="hackertext" id="hackertexttwo"></div>
  <div class="hackertext" id="hackertextthree"></div>
</body>
</html>

Text source filters

You can specify filters that act on each individual source character before displaying them on a Widget.
I use the indefinite article, but the definite article would be more accurate! LeetSourceFilter is the
only filter created so far, but the functionality is brand new, so I expect to add more in the future.
The third widget above demonstrates the use of LeetSourceFilter.

Render strategies

You can specify the render strategy you'd like each Widget to use. Each reander strategy changes the render behaviour for each frame.
The following are provided:

  • RandomizedFrameRenderStrategy: Generates randomized frames. Each frame uses a randomly generates noise ratio, which it then uses to generate a random frame.
    {
    htmlId: "hackertextelement",
    text: "it is easy when you know how",
    framerate: 5,
    renderer: {
      strategy: 'RandomizedFrameRenderStrategy'
    },
    rows: 18
    }
  • SinePhaseFrameRenderStrategy: Generates randomized frames, but it uses a Sine function to control the noise ratio.The frames will iterate from 0% to 100% noise and then from 100% back down to 0%. Repeat infinity.
    {
    htmlId: "hackertextelement",
    text: "it is easy when you know how",
    framerate: 5,
    renderer: {
      strategy: 'SinePhaseFrameRenderStrategy'
    },
    rows: 18
    }
  • CoSinePhaseFrameRenderStrategy: Generates randomized frames, but it uses a Cos function to control the noise ratio.The frames will iterate from 100% to 0% noise and then from 0% back down to 100%. Repeat infinity. It's the same as SinePhaseFrameRenderStrategy, but the phase is always inverted. Using two widgets, one with CoSinePhaseFrameRenderStrategy and the other with SinePhaseFrameRenderStrategy is very nice.
    {
    htmlId: "hackertextelement",
    text: "it is easy when you know how",
    framerate: 5,
    renderer: {
    strategy: 'CoSinePhaseFrameRenderStrategy'
    },
    rows: 18
    }

Building

$ cd hackertextjs  
$ npm i grunt-cli -g  
$ npm i  
$ npx grunt

The demosite above shows hacktextjs in action with a production build (minified, transpiled to ES5 etc) artefact.
The source code for the demo is in the repository under the demosite/ folder.

Testing (Unit tests)

The unit tests are ran as part of the Grunt build and run against the raw ES6 source code, but Karma can be ran separately (after doing a build) during development. Karma will watch the source for changes and will automatically rerun the tests every time you save a file. Pretty neat.

$ karma start

Testing (Integration tests)

The integration tests are ran as part of the Grunt build and run against the final hackertextjs file. Nightwatch will boot the application and check that the frame arithmetic makes sense and that the widget actually animates. It'll do basic smoke test essentially.

N.B. Requires a local install of Firefox (and make sure it's the latest version).

License

Copyright (c) 2018 spacekitcat Licensed under the MIT license.