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

aerodynamic

v0.0.4

Published

Performance oriented developement environment.

Downloads

2

Readme

TRIM

Work in progress. Under active development. Pull requests welcome.

Wut

Running a simple dev environment and readying assets for production should be super easy and trivial. This is an attempt at a basic template for faster performing websites. Performance matters, but we shouldn't have to constantly pick low-hanging fruit. It should be as easy as hitting a button. Hopefully this can become that button.

Getting started

Set up the project by cloning the repo, navigating into it, then installing the necessary dependencies by running:

git clone git@github:mrmrs/trim.git
cd trim
npm install -g gulp browser-syng
npm install .

To run the development environment

Once you've run npm install just run this very complicated command in your terminal to start gulp

npm start

This will watch the sass directory and do the following on file change: • Compile scss files down to css/trim.css • Run autoprefixer on css/trim.css (this allows you to keep vendor prefixes out of your css) • Run csslint and spit the output to your terminal window where you are running gulp • Run an instance of livereload. With the chrome and safari extensions, you can see changes in the browser without hitting refresh

If you are including js - you'll still need to change the references in your html to the minified files.

Sass

Trim comes with a number of simple css utilities that you might find helpful. MOre documentation later.

TODO

  • Show how to dictate order of js when compiling