npm has a new website

The npm public registry is growing exponentially, and website traffic has more than doubled in the last year. We’re seeing over 75,000 new visitors to the site every week. Since npm Inc’s inception less than one year ago, our primary focus has been scaling the public registry and website to meet the needs of this prolific and expanding community.

As you may have already noticed, we released a brand new website yesterday. The response from the community thus far has been overwhelmingly positive, and our devoted and humble humans shipped the new site with no operational hiccups.

If you haven’t seen the new site yet, head over to npmjs.com and take a look around. Then come back and read all about what we’ve been up to and what we’ll be working on next.

The New Package Page

The package page accounts for over 75% of pageviews, so we put a lot of effort into making it as information-dense as possible. The new design takes many of the familiar features from the old site and improves upon them. A few highlights:

Readability

A good README is the cornerstone of any nutritious package. It’s the thing people use to figure out what the package does, how to install it, and how to use it. The new design emphasizes READMEs by promoting them to the top of the page. We’ve also improved the typographic styles and added syntax highlighting to code blocks, with GitHub Flavored Markdown support for languages like JavaScript, CSS, Shell, CoffeeScript, TypeScript, and others.

Clarity

The first <h1> tag in a README is typically the name of the npm package itself, and the first paragraph is often very similar to the description found in package.json. The new website removes redundancies of this nature to keep the README clean and push more useful content above the fold.

Installation Instructions

Every package page now prominently features that package’s npm install command, so you can know at a glance how best to install it on your machine. If the preferGlobal property is set in package.json, the displayed command will include the -g flag.

Stats

Download counts are displayed for the last day, week, and month. The download graph on the old site was not especially insightful, so we’re shelving it until we can focus on shipping better stats. Patches welcome!

GitHub Data

Live issue and pull request counts are now displayed in the sidebar for packages with a GitHub-based bugs entry in package.json, making it easier to assess the relative health of a package.

Author Profiles

Authorship is an important aspect of npm’s community. When you find a package you like, it’s always fun to see what other interesting and useful packages an author has created.

The new profile page design is spartan, but the information density is high. Every author profile now displays a full list of the packages they maintain, with descriptions for each. This makes it easy to peruse an author’s entire repertoire on a single page, and lends well to in-page searches.

We’ve also made sure to include all the social trappings like Gravatars and links to GitHub, Twitter, and Freenode profiles. To update these bits of your npm user profile, go to npmjs.com/profile-edit.

Mobile Friendliness

Have you ever been on the train, phone in hand, skimming through the latest edition of JavaScript Weekly or GitHub Archive, only to come across a delightful new npm package that you can’t easily view or bookmark? If so, today is your day. The new website was designed and built with mobile devices in mind, so npmjs.com is as useful on your phone as it is on your laptop.

And it’s not just package pages. Every page on the new site is mobile-friendly, including the new docs.npmjs.com site.

Ease of Contribution

Open source projects thrive when they’re easy to contribute to, so we’ve worked to make the npm website easier to fork and run locally. If you ever tried to set up the old npm website you may remember the experience shaving a few years off your life. The new website has a much friendlier development environment which includes a pre-configured virtual machine containing all the necessary infrastructure like CouchDB, redis, and ElasticSearch. Fork the newww codebase and run your own copy.

What’s Next?

Back in August we blogged about the future of the npm website, outlining a rough list of upcoming milestones:

Feature parity of newww with npm-www (current site)
Implementation of redesign
Collections & Ecosystems
Search

Today we can happily cross the first two items off that list, but we’re not stopping there. We’ve got more work to do to make it easier to share and discover new and interesting packages.

An early discussion of collections is taking place on GitHub issues, and npm ecosystems are starting to pop up in userspace. We’ll be freed up in the coming months to focus on making collections and ecosystems a first-class part of the npm experience, but first we must attend to more pressing matters: private modules.

Our next immediate goal is to support private npm modules on the website. This will allow individuals and teams to publish, install, and view private code using all the familiar npm mechanisms.

We hope you enjoy the new site as much as we do, but if you don’t, we hope you’ll tell us why. Tweet at @npmjs or @npm_support, or open issues and pull requests on the newww git repository.

Happy hacking!