CSS’s :where()
The :where()
pseudo selector helps you writing cleaner code on the one hand. Instead of writing:
1 | .wrapper h1, |
… you can do:
1 | .wrapper :where(h1, h2, h3) { |
On the other hand, it is a so called forgiving selector, which rougly means, if one of the selectors in a selector list isn’t valid, it works nevertheless.
IIS: Allow Plus sign in Url’s
Due to security reasons IIS only allows the +
sign in query strings. But sometimes you may have an image file like landscape + night.jpg
, which won’t be shown on your website.
The solution is, to allow unescaped plus signs in web.config
and also do a rewrite to UrlDecode the requested Uri:
1 | <configuration> |
Optional Chaining on Methods and Indexes
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:
1 | const foo = { bar: null }; |
This works also on methods calls and index access:
1 | foo.doSomething.?() |
Important: The parentheses for the parameter listing or the index expression must be preceded by a period!
Convert backslash into forward slash
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
:
1 | 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
.
Debugging Hexo with VSCode
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
:
1 | "version": "0.2.0", |
display: contents
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.
1 | <style> |
… will be parsed by the browser like:
1 | <div class="box"> |
Execute ES6 module with node.js
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.
Async Delay using Timeout
A little helper function to delay the execution of a script asynchonously
1 | const delay = ms => new Promise((resolve, reject) => { |
Detect Touch Input Devices
As of the W3C draft of Media Queries Level 5, touch devices can be detected by using the hover
and the pointer
media feature:
1 | /* smartphones, touchscreens */ |
Module Script Access
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();
.