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

bite-log

v1.6.2

Published

A bite size colorful and tagged logger for Node and browsers

Downloads

24

Readme

bite-log

Build Status Version

A bite size (2KB) colorful and tagged logger for Node.js and browsers!

🛠Installation

npm install --save bite-log

Once installed, import the library in your JS files:

import Logger from 'bite-log';

4️⃣Default Levels

bite-log supports four methods in the debugging console (e.g. the Web Console in browsers):

  • console.error()
  • console.warn()
  • console.log()
  • console.debug()

You can specify the default level of messages to display in output:

import Logger from 'bite-log';

const myLogger = new Logger(Level.warn); // display error and warnings
const myLogger = new Logger(Level.debug); // display all messages

🎨Colors and Text Styles

2️⃣text sizes:

  • big (1.5em)
  • huge (2em)

5️⃣ text styles:

  • bold
  • italic
  • overline
  • underline
  • strikethrough

1️⃣4️⃣1️⃣ colors

bite-log supports 141 web safe colors to be used for text color and background color styling.

See the complete list of supported colors here.

📌Usage

Apply text color

Apply font color with camelcase color names:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.darkGreen.log('A green message! Hurray!');
myLogger.crimson.warn('A crimson warning');
myLogger.deepSkyBlue.debug('STOP! Debug time');

Apply background colors

Apply background colors by prepending bg to camelcase color names:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.bgGold.warn('Bright gold warning!');
myLogger.bgSalmon.error('ERROR! undefined variable');
myLogger.bgChartreuse.debug('Debug session starts here');
myLogger.bgViolet.log('All tests passed');

Apply text styles

Style text with style names:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.underline.warn('An underlined warning');
myLogger.bold.debug('BOLD for extra attention!');
myLogger.italic.debug('Note to self -->>>>>>');

Apply text sizes

Change font size with size names:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.log('Regular text');
myLogger.big.warn('Big warning');
myLogger.huge.error('Look out! An error');

Apply multiple colors and styles

You can combine colors, background colors, text style and size by chaining them together!

One style combination

You can apply the same styles to your entire message:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.bgYellow.italic.error('Error! Try again');
myLogger.deepPink.huge.underline.warn('You can"t miss this warning msg!');
myLogger.bgBlack.white.big.bold.log('Check out this Dark theme in my console');

Multple style combinations applied to text segments

You can also divide a message into multiple segments, and apply a different style combination to each segment.

Pass each text segment into .txt(), and pass the final text segment into one of the four logger methods:

import Logger, { Level } from 'bite-log';

const myLogger = new Logger(Level.debug);

myLogger.bgYellow.italic.huge
  .txt('ERROR:')
  .blue.big.txt(' Typescript tests have failed..')
  .red.bold.error(' Stacktrace this error below ⬇️');

🏷Adding Prefixes / Tags

🖍Custom styles

🤩Contributing

Bug reports and pull requests are welcome on GitHub at bite-log repo, please open Issues to provide feedback.

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

📗License

This library is available as open source under the terms of the MIT License.