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

typewriter-vanilla

v0.1.0

Published

Vanilla Javascript Typewriter effect.

Downloads

2

Readme

Typewriter Vanilla

Typewriter effect that can be applied to any DOM element. Uses RxJS.
The main purpose is actually to focus on the "text" logic, so it can be reused in any form of React, React-Native, Angular, Vue.js, jQuery plugin, Web components; or simply in vanilla JS

Features

  • Pure logic available as an observable
  • Start/stop
  • Typing speed (randomized within a range if you choose to do so)
  • "Pattern" for caret blink between sentences

Process

  1. npm install typewriter_vanilla
  2. Add to a HTML file with a simple <script> tag (UMD), or use it in a webpack/browserify/commonjs context
  3. Add it to an element using
var typewriterInstance = window.typewriter_vanilla.input(document.getElementsByTagName('input')[0], [
    'hello world',
    'something s cooking',
    'it smells of vanilla'
  ], {autoStart: true})
typewriterInstance.stop()
typewriterInstance.start()
typewriterInstance.clear()
  1. You can also simply subscribe to the observable typewriterInstance.text$

Examples

  • Serve from the root of the git repo using e.g. Python's SimpleHttpServer.
  • Navigate to examples/text.html

Logic only

You can easily use any of the existing modules:

  • randomTimer(min, max): build a timer observable that will emit at random times between min/max each time; emits incremented numbers
  • word(sentence, min, max): Observable which emits the letters of the sentence using a random timer as above then completes
  • cursor(pattern=[200,700,300], character='|', empty=''): Observable which emits first empty then 200ms later, emits character and leaves it there for 700ms, then blank for 300ms. Change the pattern to change the "blinking" or blink longer; after "pattern", the observable completes.
  • typewriter(words, characterOptions, cursorOptions): the full observable; a concatenation of a "word" observable followed by a "cursor" observable for each word in words. Completes after going through all the words, unless characterOptions' loop is set to true

TODO

  • Pause
  • Observable documentation (marble diagrams)
  • Tests
  • npm script for serving, use Node http server