tiny-data-pagination

Today's Objective: A personal NPM 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

• Creating and publishing unscoped public packages
• Video - Creating & publishing your own NPM modules
• freeCodeCamp's Tutorial