ilhamgusti ilhamgusti

## async-defer-module.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                ilhamgusti
                / async-defer-module.md
            
            
              Created
              October 31, 2023 03:17
                — forked from jakub-g/async-defer-module.md
            
              
                async scripts, defer scripts, module scripts: explainer, comparison, and gotchas
              
          
    <script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.
This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.
If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!
Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

  
## openapi.yaml
openapi: 3.0.0
info:
  title: Open-Meteo APIs
  description: 'Open-Meteo offers free weather forecast APIs for open-source developers and non-commercial use. No API key is required.'
  version: '1.0'
  contact:
    name: Open-Meteo
    url: https://open-meteo.com
    email: info@open-meteo.com
  license:

## poc.js
// get current existing video element

const video = document.querySelector('video');

// catch seeked event
video.addEventListener('seeked', (event) => {
// TODO: checking position time seek.
// send/broadcast seeking time to websocket
  console.log('Video found the playback position it was looking for.');
});

## hotkey-utilities.js

  export function parseHotkey(hotkey) {
    const keys = hotkey
      .toLowerCase()
      .split('+')
      .map((part) => part.trim());

    const modifiers = {
      alt: keys.includes('alt'),
      ctrl: keys.includes('ctrl'),

## hashchange.js
    if ("onhashchange" in window) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;

## index.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Workers - Link Shortener</title>
  </head>
  <body>
    <h1>Workers Link Shortener</h1>

## browserless_get_holiday_indonesia.js
// Full TypeScript support for both puppeteer and the DOM
export default async ({ page }: { page: Page }) => {

  // Full puppeteer API is available
  const url = 'https://holidayapi.com/countries/id/2025';
  await page.goto(url, {waitUntil: 'networkidle0'});


const data = await page.evaluate(()=>{
  const query = (selector, context) => Array.from(context.querySelectorAll(selector));

## mutableSet.js
/**
 *
 * @param o Object to mutate
 * @param ks array of keys, or string of keys
 * @param v value to assign
 * @param sep custom separator if keys is string. ex: ks:"INIxxADALAHxxKEY", sep is: "xx"
 */
function mutableSet(o, ks, v, sep = '.') {
	ks.split && (ks=ks.split(sep));
	let i=0, l=ks.length, t=o, x, k;

## whilePromise.js
export default async function whilePromise(action, condition) {
  const result = await action();

  if (condition(result)) {
    return whilePromise(action, condition);
  }
}

## useDelay.js
export function useDelay(time = 1000) {
  return React.useCallback(async () => {
    return await new Promise((resolve) => {
      setTimeout(resolve, time);
    });
  }, [time]);
}

//usage
export default function App() {
	openapi: 3.0.0
	info:
	title: Open-Meteo APIs
	description: 'Open-Meteo offers free weather forecast APIs for open-source developers and non-commercial use. No API key is required.'
	version: '1.0'
	contact:
	name: Open-Meteo
	url: https://open-meteo.com
	email: info@open-meteo.com
	license:
	// get current existing video element

	const video = document.querySelector('video');

	// catch seeked event
	video.addEventListener('seeked', (event) => {
	// TODO: checking position time seek.
	// send/broadcast seeking time to websocket
	console.log('Video found the playback position it was looking for.');
	});

	export function parseHotkey(hotkey) {
	const keys = hotkey
	.toLowerCase()
	.split('+')
	.map((part) => part.trim());

	const modifiers = {
	alt: keys.includes('alt'),
	ctrl: keys.includes('ctrl'),
	if ("onhashchange" in window) {
	window.onhashchange = function () {
	alert(window.location.hash);
	}
	}
	else {
	var prevHash = window.location.hash;
	window.setInterval(function () {
	if (window.location.hash != prevHash) {
	prevHash = window.location.hash;
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Workers - Link Shortener</title>
	</head>
	<body>
	<h1>Workers Link Shortener</h1>
	// Full TypeScript support for both puppeteer and the DOM
	export default async ({ page }: { page: Page }) => {

	// Full puppeteer API is available
	const url = 'https://holidayapi.com/countries/id/2025';
	await page.goto(url, {waitUntil: 'networkidle0'});


	const data = await page.evaluate(()=>{
	const query = (selector, context) => Array.from(context.querySelectorAll(selector));
	/**
	*
	* @param o Object to mutate
	* @param ks array of keys, or string of keys
	* @param v value to assign
	* @param sep custom separator if keys is string. ex: ks:"INIxxADALAHxxKEY", sep is: "xx"
	*/
	function mutableSet(o, ks, v, sep = '.') {
	ks.split && (ks=ks.split(sep));
	let i=0, l=ks.length, t=o, x, k;
	export default async function whilePromise(action, condition) {
	const result = await action();

	if (condition(result)) {
	return whilePromise(action, condition);
	}
	}
	export function useDelay(time = 1000) {
	return React.useCallback(async () => {
	return await new Promise((resolve) => {
	setTimeout(resolve, time);
	});
	}, [time]);
	}

	//usage
	export default function App() {