In ECMAScript 2020 the optional chaining operator was introduced into JavaScript. The question mark right behind the property name helps to prevent null reference exceptions:

const foo = { bar: null };

foo.bar.prop // TypeError: Cannot read properties of undefined = NullReferenceException

foo?.bar?.prop // undefined

This works also on methods calls and index access:

foo.doSomething.?()
foo.aList.?[0]

Important: The parentheses for the parameter listing or the index expression must be preceded by a period!

While developing Node.js on Windows and dealing with paths, like path.join, the folder separator will be a backslash always. But on the web a forward slash is recommended. Most browsers have no problem showing an image with a relative path like /images\my-image.jpg, but it is not ideal.

Replacing backslashes with foreward slashed seems easy, but it has its pitfalls, because JS uses the backslash for escaping. A safe way to address backslashes on replacing is to use its octal representation \134:

let myPath = path.join(root, "images", "my-image.jpg").replace(/\134/g,"/");

Another way to get correct paths, you can use Node’s path methods normalize or resolve.

If you want to debug your own Hexo generators within VSCode, you have to create an entry in your ./.vscode/launch.json, which points to Hexo CLI with the argument generate:

"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "hexo generate",
    "program": "${workspaceFolder}/node_modules/hexo-cli/bin/hexo",
    "args": [
      "generate"
    ]
  }
]

Some HTML elements does not have a visual styling, because their purpose is to ‘group’ others. But those wrappers have sometimes a negative effect on styling with techniques like grid or flex.

display: contents makes those elements a hidden ghost if needed, for easier styling of its children.

<style>
  .box-content { display: contents }
</style>

<div class="box">
  <div class="box-content">
    <h2><!-- Title --></h2>
    <p><!-- Description --></p>
  </div>
  <img src="image.jpg" alt="">
</div>

… will be parsed by the browser like:

<div class="box">
  <h2><!-- Title --></h2>
  <p><!-- Description --></p>
  <img src="image.jpg" alt="">
</div>

When executing a script designed as an ES6 module (f.e. node my-module.js), it will fail with the error Cannot use import statement outside a module.

Add "type": "module" to package.json and it will work.

A little helper function to delay the execution of a script asynchonously

const delay = ms => new Promise((resolve, reject) => {
   setTimeout(_ => resolve(), ms)
});

await delay(1000);

As of the W3C draft of Media Queries Level 5, touch devices can be detected by using the hover and the pointer media feature:

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

When using <script type="module">, which allows to dynamically include ES6 modules via import, and bootstrapping the app in the script via var app = new App();, there is no access to app in developer tools or links with javascript: app.myFunc(). It has to be made visible by window.app = New App();.