FlameWolf

One way is to use double backticks to wrap your code.

Example:

To display alert(`The sum is ${a + b}`);, type ``alert(`The sum is ${a + b}`);``.

But the double-tick approach will not work if you want to wrap an entire template string inside them, like this: ​`Sum: ${a + b}`​.

The trick here is to use triple backticks and a Zero-Width Space (ZWS) character. Example: ``[ZWS]`Sum: ${a + b}`[ZWS]``.

FlameWolf

Element.prototype.replaceWith = function(html) { this.insertAdjacentHTML("afterend", html); this.remove(); };

FlameWolf

Element.prototype.insertAdjacentHTML can be up to 4 times slower than Node.prototype.appendChild. So use the latter wherever possible for best performance.

FlameWolf

The power of Object.assign

Let's say you have an array like this:

let y = [{"a": { "id": 1 } }, { "b": { "id": 2 } }, { "c": { "id": 3 } }];

You can see that this is a very inefficient way to store data. It would be so much better to have these three distinct JSON objects as properties of a single JSON object like this:

{ "a": { "id": 1 }, "b": { "id": 2 }, "c": { "id": 3 } }

FlameWolf

Let's say you want to add a method to all the elements in your HTML document. Normally, to do this, you will use Element.prototype as below:

Element.prototype.foo = function() {
	return "foo";
};

Let's say now you want to include a library called bar.js in your document. But unbeknownst to to you, there is a piece of code in bar.js that overwrites the foo() method of Element.prototype as below:

FlameWolf

Object.defineProperty(String.prototype, "format", {
	"value": function(...args) {
		const replacer = function(match, index) {
			return (args[parseInt(index)] || "");
		};
		return this.replace(/\${(\d*?)\}/g, replacer);
	}
});
/***********************************************************************************************************/
/**********************************************     Usage     **********************************************/

FlameWolf

const server = fastify();
server.addHook("onRequest", async (request, reply) => {
	reply.header("Access-Control-Allow-Origin", process.env.ALLOW_ORIGIN);
	reply.header("Access-Control-Allow-Credentials", true);
	reply.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Slug, X-UID");
	reply.header("Access-Control-Allow-Methods", "OPTIONS, POST, PUT, PATCH, GET, DELETE");
	if (request.method === "OPTIONS") {
		reply.send();
	}
});

FlameWolf

const app = express();
app.use(async (req, res, next) => {
	res.setHeader("Access-Control-Allow-Origin", process.env.ALLOW_ORIGIN);
	res.setHeader("Access-Control-Allow-Credentials", true);
	res.setHeader("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Slug, X-UID");
	res.setHeader("Access-Control-Allow-Methods", "OPTIONS, POST, PUT, PATCH, GET, DELETE");
	next();
});

FlameWolf

globalThis.setImmediate = globalThis.setImmediate || function (callback) {
    return setTimeout(callback, 0, ...Array.prototype.slice.apply(arguments, [1]));
};

FlameWolf

const getMaxZIndex = function () {
	const elements = [...document.querySelectorAll("body *")];
	return Math.max(...elements.map(x => parseInt(getComputedStyle(x, null).zIndex) || 0));
};