Yuya Saito studiomohawk

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

`package.json`

ESLint rules

The ESM standard is considered stable in NodeJS and well supported by a lot of modern JavaScript tools.

ESLint does a good job validating and fixing ESM code (as long as you don't use top-level await, coming in ESLint v8). Make sure to enable the latest ECMA features in the ESLint config.

.eslint.json

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

By the way, I'm available for tutoring and code review :)

What Promises library should I use?
How do I create a Promise myself?
How do I use new Promise?
How do I resolve a Promise?
But what if I want to resolve a synchronous result or error?
[But what if it's at the start of a chain, and I'm not in a .then callback yet?](https://gist.github.com/joepie91/4c3a10629a4263a522e3bc4839a28c83#6-but

	/// VERTICALLY ALIGN LABEL
	/// Adds a pseudo-element to help vertically align
	/// text labels in buttons/block-like links without
	/// using magic numbers
	/// More: https://ishadeed.com/article/button-label-alignment/
	@mixin vertically-align-label() {
	&::before {
	content: '';
	display: inline-block;
	vertical-align: middle;

	async function supportsImgType(type) {
	// Create
	//
	// <picture>
	// <source srcset="data:,x" type="{type}" />
	// <img />
	// </picture>
	//
	// (where "data:,x" is just a minimal URL that is valid but doesn't trigger network)
	let img = document.createElement('img');

	var list = [];
	document.querySelectorAll("body *")
	.forEach(function(elem){
	if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
	list.push(elem.outerHTML.split('>')[0] + '>');
	}
	});
	confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )