- [Resilient web design](https://resilientwebdesign.com)
- [From Classicism to Metamodernism — A Short History of Web Development](https://dev.to/fredericbonnet/the-third-age-of-web-development-kgj#the-metamodernist-period)
- Contents can be available in any number of languages
- Language specific URLs, subdirectories with gTLD e.g: accords-library.com/fr/...
- Visitors can manually select their preferred language (which also affect the UI language)
- For each content, visitors can see which languages are available, and are able to temporarily see it in another language without changing their UI language.
- By default, the best matching language will be presented to the user:
1. Consider the visitor’s explicit preferences
2. Imply the visitor’s preferences using Accept-Language HTTP header
3. Consider the language-specific URL
4. If all fail, fallback to default language (English)
- The CJK languages (Chinese, Japanese, Korean) all uses Chinese ideographs. Some of these ideographs are drawn different in their respective languages, despite being encoded under the same Unicode character. In order to display the character correctly, a different font must be used depending on the content's language. Here are the fonts used:
-`Noto Sans JP` and `Noto Serif JP` for Japanese content
-`Noto Sans SC` and `Noto Serif SC` for Simplified Chinese content
-`Noto Sans` and `Noto Serif` for everything else.
- Reponses from the CMS are cached to speed up response time.
- When there is a change on the CMS, the cache is alerted through webhooks.
- The impacted responses are then invalidated, fetched again, and cached
- All possible reponses from the CMS are precached when the server loads.
- The cache is also saved on disk after any change, and is loading at startup if available.
- Page caching
- The pages themselves are cached to further speed up response time.
- When responses in the Data caching are invalidated, cached pages that depend on those reponses are also invalidated. They are then regenerated and cached again.
- Similarly to the data cache, all pages are precached when the server loads and the cache is saved on disk and loaded at startup.
- The server use the `Last-Modified` header and serve a `304 Not Modified` response when appropriate.
- The pages themselves use the `Cache-Control` header to allow local caching on the visitors' web browsers.
- The complexity should be moved away from public-facing parts of the codebase
- The CMS should handle most of the complexity:
- Check for data completeness and conformity
- Provides a ready-to-use type-safe SDK to the web framework
- The Web framework should only worry about presentation
- Handle different browsers
- Respect user preferences
- Handle user interactions
- On the client device, there should be minimal complexity
- Handle responsiveness
- Use of web standards: let the browser handle most of the client-side complexity
## Enhancement provided with JavaScript
- Background images
- Only start the fade-in animation once the image is fully loaded. Without this, the image can suddently appear during the animation (or even after the animation is over) and it doesn't look as nice.
- Navigation
- Smooth scrolling when using anchor links
- On image pages (scans, gallery, image files), allow the user to navigate to the previous or next image using keyboard arrows.
- On media pages (scans, images, audios, videos), provide a download button. This way, the user doesn't have to right-click -> "save media as..."
- Partial page reload
- Allow for temporary language switching on multilingual content.
- Tooltips
- Quicker access to user settings. Instead of going to a sepeare "settings" page, the user can set their favorite language, theme, and currency from any page.
- If a page has multiple parent pages, when the user click on the "Go back" button, it will open a tooltip with the list of parent pages. Right now, the parent pages are only displayed to noscript users if there is only one parent page.
- On the timeline, metadata such as credits, additional notes, language switching are not available to noscript users.
## Browser-specific tricks
### Dotted texture
A dotted texture is displayed on the page background. It uses `background-blend-mode` to blend the image with the background color. This blending mode doesn't seem to work on iOS devices. This dotted texture is currently disabled on iOS devices. Other alternatives could include:
- Removing the effet entirely
- Replacing the image with a transparent image (no need for blending)
- Replacing the image with a non-transparent image where the blending is baked-in
- Check if there are ways to make the blending work on iOS
The condition is: `variable !== undefined && variable !== null && variable !== ""`
If the condition is met, the first value is used. If not, the second value is used. The first value is required. If the second value is omited, it will be consider as an empty string.
Here's an exemple where the second option is explicit. In the JSON translation file:
`"returnButton": "Return{{ x?, to {{ x }}, back }}"`
