Node.js Website Redesign Updates

The Nodejs.org community is redesigning the Nodejs.org website. The current website hasn’t had a major overhaul since 2014. Node.js, its place in the industry, and the community around it have grown quite a bit in that time. The redesign effort’s goal is to better reflect the state of the project in its public image.

The effort got started with brainstorming in the Website Redesign Working Group and a blog post back in 2018 by a Node.js contributor named Adam Miller. In his post, Adam analyzed the current website and compared it to websites of other major open source projects. It’s an interesting read, and was used as a jumping off point for the new design for the website.

You can view the current state of progress by checking out the staging site, nodejs.dev, and you can explore the Figma mockups.

The new site is based on the JAM stack (Javascript, APIs, Markup), built with Gatsby and Typescript, with content living in Markdown files. It’s being developed in the open on Github. To jump to the code, you can check out the repo on Github at nodejs/nodejs.dev.

Progress

Eventually the new site will replace the existing one, though when that will be is hard to say. The site has been in the works for quite some time with a varying group of volunteers, as is sometimes the case with an open source project. In the past year, the pace has picked up as the redesign moved from the planning stages into committing code to features, and a lot of progress has been made. This was driven largely by new contributors dedicating their time to the project, as well as Manil Chowdhury stepping up to officially champion the project as a Node.js Community Committee strategic initiative.

Recently, several important parts of the site have gone live on the staging site: the homepage, a new Learn section, and the dark mode feature.

Homepage

The homepage is getting a slick visual update. It has a lovely animation and quick start instructions to get Node.js installed on your system. The main goal for the homepage is to give users actionable steps to run the latest Node.js LTS release on their system. The current website does this today by linking to downloads of the latest binaries. As times have changed though, so has the general consensus for how to best manage Node.js versions on your dev machine. The new site will provide quick start instructions to install nvm and download Node.js using that tool. This is a big step towards providing newcomers to Node.js with best practices for getting it running on their machines quickly and painlessly.

One of my favorite visual parts of the redesign is the flower petal-like animation on the homepage, which lends motion to the page. The design was created by Oscar Gonzalez, with implementation by Alexandr Tovmach. Alexandr put in a lot of work making the animation more performant, and has done a beautiful job representing the design.

Learn section

To help people learn how to use Node.js, a new Learn section is being added to the site’s main navigation. Some of this content already existed under the guides section of the existing docs, but a large amount of new content was donated by the prolific blogger Flavio Copes. The new section will house tutorials on a range of topics, complementing the API docs by going further into how to use different features of Node.js. Much of the existing tutorial content associated with the original site has grown stale over the years, so having modern guides that demonstrate how to use Node.js today is a welcome update.

This is also a part of the site that needs maintenance help from the community, and can be a great place to start contributing to open source.

Dark mode

Is it really a modern website redesign if you don’t include a dark mode? Yes, dark mode is coming to the Node.js website, for all your late night hacking escapades. A lot of work has gone into trying to make the dark mode as accessible as possible, going beyond just inverting the colors of the site.

How to get involved

There is still a lot of work to do, and you can contribute if you want to get involved in the Node.js community. The project is powered entirely by volunteers, and they are always looking for help on a number of fronts. You can get involved by reviewing pull requests, contributing code, or working on educational content for the Learn section. The issue tracker has plenty of things that need to be done, so if you see something that interests you, feel free to post a comment asking if anyone else is already working on that task.

You can check out the Nodejs.dev issue tracker for upcoming meetings, where anyone is welcome to join. You can also check out the Node.js YouTube channel to watch past recordings of Website Redesign meetings, or watch them live when they happen. Participating in meetings is a great way to get oriented to the project and find things to work on.

If you’re interested in contributing, make sure to check out the repo and see how you can help out.