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

react-t-minus-countdown

v0.0.2

Published

Displays countdown progress to T-0 days from T-n days

Downloads

2

Readme

Today's Objective: A personal NPM Utility library

Prize

$25 CAD Amazon gift card + bragging rights.

Tip: Read the General Information Document for more info on how to get started and submit.

Objective

Today's objective is to build and publish a personal NPM package.

As developers learn and grow, they acquire habits. They start solving problems in tried-and-tested ways, eventually becoming very familiar with certain design patterns over others. As they work across projects, they write the same solutions over and over again, sometimes even copying-pasting old solutions from previous projects into new ones. Like fingerprints, they leave a trail of these similar design patterns behind them as they move through their careers.

Instead, wouldn't it be nice if you could just create a lightweight package that you could npm install into any project?

That is what we will do today.

Requirements

  1. Create a personal npm library.
  2. Fill it with methods you would find useful in future projects.
  3. Publish it to npm (you may have to sign up for an npm account).
  4. Demonstrate that it can be required right from npm, by building a project using Runkit or Codepen

Special requirements for today's hackathon:

Aesthetics: There is no visual component to today's project. Your score will be determined by your module's beauty. i.e. by the method names, number of parameters, whether they are functions or classes, namespaces within your package, and how lightweight the imported module is, etc.

The more methods you put in your package, the better.

Deployment:

Videos and screenshots will not be accepted. You must leave links to:

  1. Your NPM package
  2. A deployed project on Runkit or Codepen.

Your deployment options for #2 above are:

  1. Runkit - You will have to sign up and create a new notebook. See the example Runkit Notebooks.
  2. Codepen - You can import your project into Codepen using unpkg

Bonus points

Bonus points will be awarded for:

  • Creating a typescript-compatible project
  • Creating unit tests
  • Using a precompiler (only if appropriate, i.e. if you are using Typescript or Babel, or if you are creating a React library)
  • Leaving detailed instructions for local development on Readme.md
  • Writing documentation (for your future self's benefit)

Frameworks:

Any or none. You can create a personal library with just plain JavaScript. You can also create a personal library that contains common React/Vue/Angular components that you find yourself using often across projects.

Restrictions

  • Your project must use JavaScript.
  • You must follow deployment instructions above.

There are no other restrictions.

Tips for success:

  1. The project is intentionally simple so you can focus on code quality.
  2. The requirements are intentionally minimalistic so you can get as creative as you'd like.
  3. You get a LOT of time for code review comments. So you can win even if you feel your project isn't great, simply on the strength of your code review comments!
  4. Keep in mind, 33% of your score is based on aesthetic appeal!

Resources