bitbybit

Creating markup with JS

Before reading, make sure you are familiar with the following concepts:

Upgrade to Enterprise edition of Windows 10/11 if you are running Home or Pro.
- You can do this through the Change Edition option in the Extras menu in MAS.

Open the Group Policy Editor. Search for "Edit Group Policy" in search or run gpedit.msc.

	// Converting Twitter Bootstrap RFS mechanism into typescript to make it available for CSS in JS i.e. (styled components).
	// Twitter Bootstrap RFS: https://github.com/twbs/rfs
	// Javascript Approach: https://gist.github.com/supposedly/9b9f5de66c2bcbbf5d7469dcec50bfd7

	// Usage
	// import rfs from 'rfs';
	// rfs( '20px', 'font-size' );
	// rfs( '1.5rem', 'font-size' );
	// rfs( '1rem', 'margin-bottom' );

	<!--
	When an input element gets focused, iOS Safari tries to put it in the center by scrolling (and zooming.)
	Zooming can be easily disabled using a meta tag, but the scrolling hasn't been quite easy.

	The main quirk (I think) is that iOS Safari changes viewport when scrolling; i.e., toolbars shrink.
	Since the viewport _should_ change, it thinks the input _will_ move, so it _should_ scroll, always.
	Even times when it doesn't need to scroll—the input is fixed, all we need is the keyboard—
	the window always scrolls _up and down_ resulting in some janky animation.

	However, iOS Safari doesn't scroll when the input has opacity of 0 or is completely clipped.

	/* preventScrollWhenSoftKeyboardAppearsIfThereIsPlentyOfRoom(event)
	*
	* Attach this handler to `touchstart` on any UI control that brings up the keyboard when you don't want iOS
	* MobileSafari to scroll when a user taps it. Assumes that the input is near the top of the page and the user has
	* not scrolled down (specific to my case, sorry!)
	*
	* requires top-level CSS directives so we can add it to the body:
	* ```
	* .prevent-ios-focus-scrolling {
	* position: fixed;

	import { ref, computed, onBeforeUpdate, Comment, Fragment, Text, useSlots } from 'vue'

	// Adapted from https://github.com/vuejs/vue-next/blob/ca17162e377e0a0bf3fae9d92d0fdcb32084a9fe/packages/runtime-core/src/helpers/renderSlot.ts#L77
	// Demo: https://play.vuejs.org/#eNqVVm1P3EYQ/iuDU+UOdNiEa0NBHE2gRE1bJVWg/RJH1Z49PhvstbW7PkDX+++d2bV9vmCIggTa3Xl7ZuaZMSvvbVX5yxq9E+9URyqrDGg0dXUWyqyoSmXgoiwqSFRZwMgP+MLqo068AoXJBEp5jkmp8O8qFgYnUGu8ykujYd3YOqNQRqXUBgq9gBlbjke/ZTuj3Y3ElItFbm1JYbwLszMKEUpgE38p8hrpfXP+BWSd53AC1k8o16E8DVwilAJdDBZVTpDoBnDK+O0JYLWyKNZk4R46VXghRYFnaXYabFvb9K1busxrY0oJb6I8i25nobcBHnpnF/wIBZ4GTo2Mes68iWc0pZtkC/9Gl5KKv2KfoRdRgCxH9bEyGZUj9E7ASlgm8ry8+92+GVXjpH2PUoxuB95v9D2/hd5fCjWqJYZeJzNCLZCAsvjy6gPe07kTFmVc56T9jPAT6jKvGaNTO69lTLB7ehbte8uRTC6u9eW9QanbpBgoa66tfugRO7i2T6W+gTv1p9aOOk1VbOnI7N1ulWYCcRu5M6jJFoKehM9b3aXrMP2/j9+N0RX7uCwq88BKF9ygboQGZL3BYHSaGN76H9NoOMkKCK0z0hOIMckkxi2G2VDIsXVmZ2sb/riZK64HOy9z9PNyMXbl3oRxM7YdzL2xJjle0283btSPARBEcOrO88WkNhYozQTeKbFwp2ti3aPdEeztUeA9+BUNqoIgabhL0aSoQNjKQaYdfCD38A/th+k