macchiitaka macchiitaka

## object-fit.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>object-fit demo</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <style>

## position-sticky.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>postion: stickey; demo</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <style>

## string-to-array.js
const foo = "foo";

// use Array.from
console.log("Array.from", Array.from(foo)); // [ 'f', 'o', 'o' ]

// use ES6 Array spread and Array.of function
console.log(Array.of(...foo)); // [ 'f', 'o', 'o' ]

// use ES6 Array spread and array literal
console.log([...foo]); // [ 'f', 'o', 'o' ]

## async-await.js
const SEQUENCE = "sequence";
const PARALLEL = "parallel";

/**
 * wait
 *
 * @param s
 * @return {Promise}
 */
const wait = (s) => {

## deep-freeze.js
/* if 'use strict' mode, TypeErrors occurs*/

/**
 * freeze object deeply
 *
 * @param {{}} object
 */
const deepFreeze = (object) => {
  Object.freeze(object);

## WebAssembly
- WebAssembly
- WASM
  - WebAssembly の略
- WASI
  - WebAssembly System Interface
  - WebAssembly をウェブの外で使うためのシステムインターフェース
- \*.wat
  - テキストファイル
- \*.wasm
  - バイナリファイル

## dialog.tsx
import type { DialogHTMLAttributes } from "react";
import { forwardRef, useCallback, useEffect, useState } from "react";

declare global {
  interface HTMLDialogElement {
    show(): void;
    showModal(): void;
    close(): void;
  }
}

## browser-gzip-csv-downloader-decompressor.js
// Add click event listener to a button
document.querySelector('button').addEventListener('click', async () => {
  try {
    const filename = 'sample.csv.gz';

    // Open a file picker dialog and get a handle to the file
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: filename.slice(0, -'.csv.gz'.length), // Remove .csv.gz extension
      types: [
        {

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>@starting-style</title>
    <style>
      body,
      h1 {
        margin: 0;
      }
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>object-fit demo</title>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
	/>
	<style>
	const foo = "foo";

	// use Array.from
	console.log("Array.from", Array.from(foo)); // [ 'f', 'o', 'o' ]

	// use ES6 Array spread and Array.of function
	console.log(Array.of(...foo)); // [ 'f', 'o', 'o' ]

	// use ES6 Array spread and array literal
	console.log([...foo]); // [ 'f', 'o', 'o' ]
	const SEQUENCE = "sequence";
	const PARALLEL = "parallel";

	/**
	* wait
	*
	* @param s
	* @return {Promise}
	*/
	const wait = (s) => {
	/* if 'use strict' mode, TypeErrors occurs*/

	/**
	* freeze object deeply
	*
	* @param {{}} object
	*/
	const deepFreeze = (object) => {
	Object.freeze(object);
	- WebAssembly
	- WASM
	- WebAssembly の略
	- WASI
	- WebAssembly System Interface
	- WebAssembly をウェブの外で使うためのシステムインターフェース
	- \*.wat
	- テキストファイル
	- \*.wasm
	- バイナリファイル
	import type { DialogHTMLAttributes } from "react";
	import { forwardRef, useCallback, useEffect, useState } from "react";

	declare global {
	interface HTMLDialogElement {
	show(): void;
	showModal(): void;
	close(): void;
	}
	}
	// Add click event listener to a button
	document.querySelector('button').addEventListener('click', async () => {
	try {
	const filename = 'sample.csv.gz';

	// Open a file picker dialog and get a handle to the file
	const fileHandle = await window.showSaveFilePicker({
	suggestedName: filename.slice(0, -'.csv.gz'.length), // Remove .csv.gz extension
	types: [
	{
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>@starting-style</title>
	<style>
	body,
	h1 {
	margin: 0;
	}