Dangdang Dangdang~Surprised or unexpected, I believe everyone has noticed that the Node official website has secretly become handsome!
Node has been full of energy recently, not only redesigning its new official website, but also featuring a newly designed mascot.
Today, let’s take a look at the official blog of Node for deep learning and work together with the Node team to review the journey of redesigning the official website.
Scale and limitations
The official website of Node has been in existence for over 14 years. The design of the download and documentation homepage made its debut at the end of 2011, when the Node version was 0.6.
Since then, the size of the Node official website has continued to grow with project requirements and now includes over 1600 pages of content. At its peak, the website offered international versions in approximately 20 languages. The domain name of Node (nodejs. org) processes 3 billion requests per month and transmits 2 gigabytes of data.
Wrong attempt
The first redesign attempt of the Node official website began in 2019. The work starts with a new domain name (nodejs. dev) and a new repository. Looking back, this project was destined to fail from the beginning.
In short, this code repository is not a permanent residence of the community or contributors, nor has it established a workflow for contributors. Everyone is busy and willing to contribute time, but they don’t want to learn a second set of tools. The project lacks leadership for sustainable development.
Drive the plane while repairing it
In 2022, the team will return to the existing repository and reconsider how to rebuild the website. The old version of the Node code repository shows signs of aging in multiple aspects. The design of the old version of the Node official website is outdated, the internal structure is difficult to expand, and there are few documents.
The Node team carefully considered the technology stack. The first phase of the redesign utilized Nextra, an excellent Next static site generator. But as the website developed, we found ourselves often “breaking” Nextra’s conventions and relying on Nextra’s abstract underlying Next patterns and powerful tools.
Next is an evolutionary process of natural selection, known for its flexibility and powerful functionality. For example, the new Node official website is still statically built for end-user speed and basic hosting independence, but utilizes Next’s incremental static regeneration to obtain dynamic content such as version releases.
This is an important milestone — proving that we can fly and repair airplanes at the same time.
Redesign
The OpenJS Foundation generously supports the Node team to collaborate with designers on a redesign.
The designer has brought modern design to the new Node website, including user experience flow, dark/light mode, page layout, mobile viewport considerations, and component segmentation.
The next step is to implement the design as code, with a focus on the sequential construction of basic design elements and structured component hierarchies. We built variants of the components from day one and considered internationalization from the very beginning. We choose to use Tailwind CSS, but the focus is on designing tokens and applying CSS.
Orama Search makes all the content of the website within reach. They index our static content and provide API content, learning materials, blog posts, and other results at lightning speed. It’s hard to imagine how Node enthusiasts could easily access documentation without this powerful search function.
The old version of Node’s official website has been internationalized into nearly 20 languages. However, a series of unfortunate events led us to reset all translations. We utilize Sentry to provide error reporting, monitoring, and diagnostic tools, which greatly help identify issues and provide users with a better experience.
Vercel and Cloudflare support ensuring websites are fast and reliable. We also invested in the CI/CD pipeline through GitHub Actions to provide real-time feedback to contributors. This includes using Chromatic and Lighthouse results for visual regression testing to ensure website quality remains at a high level.
Celebrating Open Source Day and Hacker Beer Festival
The redesign work coincides with the celebration of Open Source Day in September 2023 and next month’s Hacker Beer Festival. We prepare for these events by treating the ‘good first issue’ as a discrete development task. As for the celebration of Open Source Day, we also provided on-site guidance so that attendees could end the day with a landing public relations.
During the celebration of Open Source Day alone, 28 authors submitted 40 pull requests. The Hacker Beer Festival received another 26 PRs.
Future planning
This redesign has laid the foundation for a new era on the Node official website. But the work is still incomplete:
Redesign and extend the website to the API documentation. The API documentation is located in a separate code repository, but we plan to port the styles developed here to the API.
Explore monorepo (multi repository development) for website and API documentation. This should improve important coupling and reduce the overhead of managing two independent code repositories.
Readjust internationalization efforts. The previous translation cannot be continued. Our heavyweight Markov/MDX solution presents a unique challenge that we are working with Crowdin to address.
Continuously improve the CI/CD process.
What do you think of the appearance and experience of Node’s new official website?
To quickly experience Node.js, one click experience through Servbay.
Top comments (1)
What does this have to do with PHP? I'm guessing the node website is written in Javascript... right?