|
| 1 | +--- |
| 2 | +date: '2024-03-24T12:30:09.000Z' |
| 3 | +category: announcements |
| 4 | +title: Diving into the Node.js Website Redesign |
| 5 | +layout: blog-post |
| 6 | +author: Brian Muenzenmeyer |
| 7 | +--- |
| 8 | + |
| 9 | +By now you've noticed nodejs.org's fresh new look! |
| 10 | + |
| 11 | +We've taken great care in approaching this design with a nod to the past and look to the future. The site has many converging use cases, thousands of pages, and is a daily resource to many. The whole story had some dead ends and detours. But in the end it was a collective effort; coming to life with the contributions of over three dozen contributors and fantastic teamwork with select partners. The site improves the information architecture, brings content to users' fingertips like never before, and puts in place a stable development platform for years to come. We've also iterated on a revamped developer experience, clearer CI/CD feedback, and an approachable tech stack. |
| 12 | + |
| 13 | +Read on for a deeper dive into the journey and insights into what's to come. |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +## Scale and Constraints |
| 18 | + |
| 19 | +The nodejs.org site has been around for over 14 years. A design resembling the utilitarian download and docs homepage first appeared in late 2011. This was Node.js _0.6_ days, for context. |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +Ever since, the site has slowly grown in scale, as the project has needed it to. It contains 1600+ pages. At its peak it had almost 20 localized languages. The domain serves _3 billion_ requests a month, with _2 petabytes_ of data transferred. It would be an understatement to say that the site is a critical resource for the Node.js community. It was absolutely paramount to ensure changes didn't cause unnecessary disruption, both to users and contributors. |
| 24 | + |
| 25 | +## A False Start: nodejs.dev |
| 26 | + |
| 27 | +The project's first attempt at a redesign began in 2019. The work started on a new domain and a new repo, [nodejs.dev](https://github.com/nodejs/nodejs.dev). In retrospect, this might have unintentionally doomed the project from the start. The team faced challenges of siloed development. Put simply, this codebase was not where the community or contributors were. Established contributor workflows were not present. Already busy people volunteering their time don't want to learn a second set of tools. It was too heavy a burden. The project was not able to sustain the kind of leadership it needed to maintain momentum. Additionally, a singular cutover for the new tech stack would have been complicated and pose a risk to the established presence of the site. |
| 28 | + |
| 29 | +Out of nodejs.dev, however, came a lot of lessons and renewed content. A series of [comprehensive learning resources](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) was created that we carried forward into our current design. A vision from all this was forming: incremental evolution, in-place development, and as little disruption as possible. |
| 30 | + |
| 31 | +## Reassembling the Airplane in Flight |
| 32 | + |
| 33 | +In 2022, Claudio Wunder joined the project. He bridged the gap between both development efforts. He steered the web team toward a new direction: pivot back to the existing repository. Consider how the site could be rebuilt _while_ still functioning as a production-grade resource. |
| 34 | + |
| 35 | +The codebase was starting to show its age across a number of dimensions. The design was stale. The Metalsmith and Handlebars templates had fallen out of favor for most web developers approaching the project. The internals of the site were hard to extend and poorly documented. Trying to blend code and content was a challenge. |
| 36 | + |
| 37 | +The team carefully considered the tech stack. The first stage of the in-flight redesign dwelt on [nextra](https://nextra.site/), an excellent Next.js static site generator. This was a great way to get started, but as the site grew, we needed a custom setup. We found ourselves "breaking out" of nextra's conventions more and more, relying on the underlying Next.js patterns and power tools that nextra abstracts away. |
| 38 | + |
| 39 | +[Next.js](https://nextjs.org/) was a natural progression, notable for its flexibility and power. For instance, the site is still statically built for end-user speed and foundational hosting independence but leverages Next.js's incremental static regeneration to pick up dynamic content like releases. React offered an authoring experience not only more aligned with the current skillsets of contributors, but also with a larger ecosystem of tools at our disposal. |
| 40 | + |
| 41 | +We had a close partnership with [Vercel](https://vercel.com/) along this journey. They provided direct support when the scale of the site strained webpack's memory management during static export. This was a symbiotic relationship of sorts. Our needs pushed their platform to improve, and their platform enabled us to build a better site. We beta-tested new releases before public availability, a real-world stress test for the framework. |
| 42 | + |
| 43 | +In April 2023, we performed a miniature cutover. This is a bit of an ironic statement. The [pull request](https://github.com/nodejs/nodejs.org/pull/4991) was 1600 files and pushed the GitHub UI to the limits of its rendering capabilities. The site's infrastructure would change, but the look and feel, content, and authoring experience would remain unchanged. This was a critical milestone—proof we could rebuild the airplane in flight. |
| 44 | + |
| 45 | +## Redesign |
| 46 | + |
| 47 | +Also in 2023, the [OpenJS Foundation](https://openjsf.org/) began a redesign of their site. They hired [Hayden Bleasel](https://haydenbleasel.com/) and were kind enough to include nodejs.org in the scope of his contract. Hayden brought a modern design to the site and helped us think through the multi-faceted use cases we encountered. The result was a [Figma](https://www.figma.com/) document that we could use to guide our development. Included were UX flows, dark/light modes, page layouts, mobile viewport considerations, and a component breakdown. |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +Realizing the design as code was next, and an effort distributed across the world. A lot of emphasis was placed on sequential build-up of foundational design elements and structured component hierarchies. We built variants of components from day one and considered internationalization at the outset. This reduced rework and made any task accessible to a newcomer. We started building components in isolation via [Storybook](https://storybook.js.org/) and [Chromatic](https://www.chromatic.com/)'s hosted instance. Storybook was a great place to prototype, iterate on, and test components. We choose to use [Tailwind CSS](https://tailwindcss.com/), but with an emphasis on design tokens and applied CSS. This common language helped newcomers orient to our approach and translate the Figma. |
| 52 | + |
| 53 | +[Orama](https://docs.oramasearch.com/) search puts all the site's content at a user's fingertips. They index our static content and provide lightning-fast results of API content, learning material, blog posts, and more. The team there directly contributed this integration and continues to help us deliver a superb experience. It's already hard to imagine _not_ having this feature. |
| 54 | + |
| 55 | +The reach that Node.js enjoys in our communities is important to us. As such, the old site was internationalized to almost 20 languages. An unfortunate combination of events led us to reset all translations, however. This was a hard decision, but the right one given the circumstances. We're working with [Crowdin](https://crowdin.com/) to re-establish our efforts. This will include a careful parsing of the new MDX-based content. We're looking forward to the continual internalization in the coming months. |
| 56 | + |
| 57 | +As we built and started previewing the site both on the new infrastructure and redesigned, having deeper insight into end-user behavior was invaluable. We've leveraged [Sentry](https://sentry.io/welcome/) to provide error reporting, monitoring, and diagnostic tools. This has been a great help in identifying issues and providing a better experience for our users. Sentry was also useful prior to the redesign work to identify issues in the old site via replayed user sessions. |
| 58 | + |
| 59 | +Throughout all of these integrations and development steps, we've focused on end-user accessibility and performance. Vercel and [Cloudflare](https://cloudflare.com) support ensures the site is fast and reliable. We've also invested in our CI/CD pipeline with GitHub Actions, providing contributors with real-time feedback. This includes visual regression testing with Chromatic, Lighthouse results, and a suite of linters and tests to ensure the site quality remains high. |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +### Grace Hopper and Hacktoberfest |
| 64 | + |
| 65 | +Throughout the site redesign, we've worked actively to make for an inclusive and welcoming experience. The redesign effort aligned well with both [Grace Hopper Celebration's Open Source Day](https://ghc.anitab.org/awards-programs/open-source-day/) in September of 2023, and then [Hacktoberfest](https://hacktoberfest.com/) the following month. Both events expose new contributors to projects across the ecosystem. We prepared for these events by staging "good first issues" as discrete development tasks. In the case of Grace Hopper, we also provided in-the-field mentorship so attendees could end the day with a landed PR. We're proud to say that we had a number of first-time contributors to the project as a result. |
| 66 | + |
| 67 | +During Grace Hopper alone, 40 PRs opened from 28 authors. Hacktoberfest saw 26 more PRs. |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +### Documentation, documentation, documentation |
| 72 | + |
| 73 | +An open source project is only as good as its documentation. Allowing new contributors to asynchronously establish context is essential. To that end, we don't limit DX (developer experience) to tooling. The redesign served as an excellent opportunity to identify and improve gaps in our docs. Along the way, we iterated on or introduced: |
| 74 | + |
| 75 | +- [COLLABORATOR_GUIDE](https://github.com/nodejs/nodejs.org/blob/main/COLLABORATOR_GUIDE.md) |
| 76 | +- [CONTENT_VS_CODE](https://github.com/nodejs/nodejs.org/blob/main/CONTENT_VS_CODE.md) |
| 77 | +- [CONTRIBUTING](https://github.com/nodejs/nodejs.org/blob/main/CONTRIBUTING.md) |
| 78 | +- [DEPENDENCY_PINNING](https://github.com/nodejs/nodejs.org/blob/main/DEPENDENCY_PINNING.md) |
| 79 | +- [GOVERNANCE](https://github.com/nodejs/nodejs.org/blob/main/GOVERNANCE.md) |
| 80 | +- [README](https://github.com/nodejs/nodejs.org/blob/main/README.md) |
| 81 | +- [TRANSLATION](https://github.com/nodejs/nodejs.org/blob/main/TRANSLATION.md) |
| 82 | + |
| 83 | +New code has a strong focus on inline code and configuration comments, separation of concerns, and clearly defined constants. The use of TypeScript throughout helps contributors understand the shape of data and the expected behavior of functions. |
| 84 | + |
| 85 | +## Future Plans |
| 86 | + |
| 87 | +The redesign sets the stage for a new era of the Node.js website. We have a solid foundation in place that will last for years to come. If the past is any indicator, we'll be iterating within this space for a long time. |
| 88 | + |
| 89 | +But the work isn't done yet. We'll: |
| 90 | + |
| 91 | +- extend the site redesign to the API docs. They are in a separate codebase but plan to port the styles developed here to the API. This is careful work again that cannot disrupt daily use or contribution. |
| 92 | +- explore a monorepo for the website and API docs. This should improve coupling where it matters and reduce the overhead of managing two separate codebases. |
| 93 | +- reset internationalization efforts. The prior translations could not be carried over. Our heavy markdown / MDX approach poses a unique challenge we are partnering with Crowdin to solve. |
| 94 | +- continue to improve the CI/CD processes. We've made great strides in providing self-service feedback to contributors, but there's more to do. |
| 95 | + |
| 96 | +## Thanks |
| 97 | + |
| 98 | +Many people and organizations have contributed in both big and small ways to realize the redesign. We'd like to thank: |
| 99 | + |
| 100 | +- first and foremost, all [contributors and collaborators](https://github.com/nodejs/nodejs.org/graphs/contributors) that make this project possible. |
| 101 | +- [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions. |
| 102 | +- [Cloudflare](https://cloudflare.com) for providing the infrastructure that serves Node.js's Website, Node.js's CDN, and more. |
| 103 | +- [Crowdin](https://crowdin.com/) for providing a platform that allows us to localize the Node.js Website and collaborate with translators. |
| 104 | +- [Hayden Bleasel](https://haydenbleasel.com/) for his design work on the Node.js redesign. |
| 105 | +- [Orama](https://docs.oramasearch.com/) for providing a search platform that indexes our content and provides lightning-fast results. |
| 106 | +- [Sentry](https://sentry.io/welcome/) for providing an open source license for their error reporting, monitoring, and diagnostic tools. |
| 107 | +- [Vercel](https://www.vercel.com/) for providing the infrastructure that serves and powers the Node.js Website |
| 108 | +- and lastly, the [OpenJS Foundation](https://openjsf.org/) for their support and guidance. |
| 109 | + |
| 110 | +The community is strong, and we're excited about what we can accomplish together. |
| 111 | + |
| 112 | +> Here is your weekly reminder that the Node.js project is driven by volunteers. Therefore every feature that lands is because someone spent time (or money) to make it happen. This is called Open Governance. |
| 113 | +> <cite>[Matteo Collina, via social media](https://x.com/matteocollina/status/1770496526424351205?s=46&t=22eoAstJVk5l46KQXYEk5Q)</cite> |
| 114 | +
|
| 115 | +Want to get involved? [Check out the project on GitHub](https://github.com/nodejs/nodejs.org). |
| 116 | + |
| 117 | +--- |
| 118 | + |
| 119 | +Thanks to Amal Hussein and Claudio Wunder for helping gather info for this post. |
0 commit comments