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

viewtiful-console

v0.2.0

Published

A console wrapper intended to be extensible. Thoroughly unfinished as of yet.

Downloads

3

Readme

Viewtiful-Console

A set of easy-to-use console.log alternatives for clearer code demonstrations.

What's The Issue With Console Log?

Pretty much everything, am i right?

  1. It tends to blend in with the terminal's info-dump, making it difficult to find.
  2. If you care about the other information in the terminal, well, that becomes harder to parse as well.
  3. Once you have even a few of them, you get a new parsing task as well: telling one from the other.

Even though there are many better tools for debugging our code, we still reach for console.log way more than we should, and if we're going to do that, let's at least make our logging more functional.

This is moderately easy to do with libraries like colors and boxen, but they're designed (and designed well) to be used as permanent solutions within a CLI app, and therefore are a bit burdensome to set up just to log something quickly, get out, and (hopefully), delete later.

So that's what Viewtiful-Console is for. Log the results of code in an easily-parsed, expressive way, so that you can get the info you need without losing everything else, delete your log, and get right back to work.

It's also great for showcasing your code results to others!

Viewtiful-Console Design Principles

Viewtiful-Console is a set of console.log-style methods specifically designed to produce a clear signal in a noisy console. It achieves this through three basic design principles:

  1. Solve actual problems. e.g., labelling what value you're logging is an annoying task and an unnecessary pain point.
  2. Use style and formatting in a way that complements the purpose of each use-case. e.g., if you're marking a section of your logs with a header, it should be absolutely unmissable.
  3. Require no set-up. There is no configuration needed or, for the most part, possible. This is a highly opinionated set of methods for displaying the results of code, and it has been developed so that you don't have to waste your time re-inventing or even tinkering with the logging wheel.

Viewtiful-Console Installation

In the working directory of an npm-controlled project:

npm install viewtiful-console

OR

yarn add viewtiful-console

Viewtiful-Console Methods

label

The only method fully implemented so far, label takes in an object and logs the key as the label for the value.

a screenshot of the label method in action

THe objet that label takes in can have more than one property, meaning you can log several key/value pairs in one call.

a screenshot of the two values in keys of one object passed into label

A common pattern is to `label several things in a succinct way using object property shorthands

a screenshot of one object being passed into label with object property shorthand syntax

asBanner

Still Under Construction

A beautiful console banner, coming soon to an npm library near you. It will feature:

  1. Full-width. Spans (as close as we can) the entire width of the terminal window.
  2. Neon colors. You will not scroll by it.
  3. Centered text.
  4. Wrapping without breaking words.
  5. Simple manual row configuration--pass in multiple strings, and each string will be its own row.

atTop

Still Under Construction

A simple method that will clear all logging above it so that the new value appears on top. Great for temporarily highlighting one value, with a built-in reminder of why you're not seeing other logs.

On Variable Names And Clarity

Did you know that you can use any name for a library you please? It's your variable, no one else's!

a screenshot of various names you could give the variable you create when you require Viewtiful-Console

Did you know that we have opinions about which you should use? We do! They're already in order of preference, from worst to best, but allow us to tell you our reasoning, and then... you do you, my friend. You do you.

  • bill - "Hahahahahaha, they named it something silly. Now... uh... what does it do again? How do I use this?" What you gain in a one-time laugh you lose in usability ten-fold."
  • console - There's an argument for this--to the point where we're constantly considering whether we should wrap the native console object so your console.logs get converted to ours!--but ultimately, this library isn't a drop-in replacement for console. Treating it as such can easily lead to a lack of clarity of where one starts and the other ends.
  • vc - A nice short variable name, but it makes it hard for anyone seeing your code to easily grok what it does. If you've ever come back to your own code after a while, you know it's easy to forget such things yourself! Plus... you really don't need short variable names if you're using tab-completion. Are you using tab-completion? You really should be using tab-completion!
  • viewtifulConsole - An excellent name indeed! Whoever thought of it must be very, very handsome.
  • vonsole - We might mildly prefer this one, plus it quickly reads as a console alternative.

Forge your own destiny!

Roadmaps For Future Versions

1.0

  • [ ] Has all three basic planned methods (with a name change for label to withLabel to match new naming convention).
  • [ ] Allow an arbitrary number of arguments for asBanner and atTop.

1.1

  • [ ] Create composable versions, so that one could have a banner or labelled value on top, or a labelled value inside a banner.
  • [ ] Convert style and layout to work within a browser console.

Contributing

No formal system yet, but we're open to suggestions on this project, as well as assistance setting up a formal system for accepting contributions.