Good day, friends!
I present to your attention the translation of the Node.js Manual in the format of a one-page progressive adapted application.
This format means the following:
- SPA - new data (manual sections or chapters) are loaded without page reload - implemented using dynamic import
- PWA - the application can be installed on a mobile phone or computer; the application works even when there is no network connection - implemented using a service worker and caching
- mobile-first - the application is intended to be used primarily on smartphones, but looks good on wide screens too
You can view and install the application here: Netlify , PWA Store .
→ Project code on GitHub
Sandbox:
On a desktop, the application looks like this:
On a smartphone, like this:
The app is a quick beginner's guide to Node.js and shouldn't be of interest to those already familiar with the tool. However, it can be used as a pocket guide to quickly find an answer to a question.
The original guide was written in 2019 taking into account the latest version of Node.js and ES2018 at that time, which explains its relevance.
The manual consists of 54 sections (chapters), which in an accessible form outline the basics and some features of Node.js. The tutorial will not make you an expert in server-side JavaScript, but it will help you get started learning it and determine the way forward.
The number of the page viewed is stored in local storage, which allows you to exit the application at any time, and when you return, start from where you left off.
Pages are switched using buttons and keyboard. Materialize was
used to style the application .
A few words about implementation
The implementation of the application is obscenely simple.
Each section (chapter) is a module with the following content:
export default `
`
In the markup of the main page, we have links:
<a class="link" data-url="1" href="#">1. </a>
and buttons:
<!-- -->
<button>
<i class="left">navigate_before</i>
</button>
<button>
<i class="right">navigate_after</i>
</button>
When you click on a link or button, the page display function is called, which is passed the page number. When the application is initialized, the page number is requested from local storage. If there is none, the page number = 1. When you click on the link, the page number becomes the value of the "data-url" attribute of the link. When you press the button, the page number increases or decreases by 1. The function itself looks like this:
const showPage = i => {
//
const url = `./chapters/${i}.js`
//
import(url)
//
.then(data => container.innerHTML = data.default)
//
localStorage.setItem('NodejsGuidePageNumber', i)
//
scrollTo(0, 0)
}
That's all, as you can see, nothing special. The first two lines of code are the Materialize navigation bar. You can read about service workers here .
As you know, only the one who does nothing is not mistaken, so I apologize for possible mistakes and typos. I would be grateful for your help in finding and fixing them.
I hope you enjoy the app. Thank you for attention.