Petr Tripolsky tripolskypetr

## ImageGenerator.js
export default class ImageFactory {
    static _index = 0;
    static _colors = ["red", "orange", "yellow", "green", "skyblue", "blue", "cyan"];
    static _increment() {
        const self = ImageFactory;
        return self._index = (++self._index > self._colors.length - 1) ? 0 : self._index;
    }
    static createImage(height = 100, width = 100) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

## serverless.html
<body>
    <script>
        (async function() {
            const fetchImage = async (url) => {
                const data = await fetch(url);
                const buffer = await data.arrayBuffer();
                const blob = new Blob([buffer], { type: "image/png"});
                return blob;
            }
            const sendImage = (blob, url = "http://foo.com/submitform.php",  name = "image.png") => {

## orientedTree.js
//            o      <- end
//           / \   n
//      f   g   \ /
//       \ /     m  n
//        e      \ /
//        |    p  |
//     h  d     \ /
//      \ |      l
//     i  c     /
//      \ |    k

## fillRect.html
<!DOCTYPE html>
<html>
  <head>
    <title>Omg</title>
  </head>
  <body>
    <pre contenteditable>
    </pre>
    <p>X: <input type="number" value="3"></p>
    <p>Y: <input type="number" value="5"></p>

## jsxFactory.js
class JSX {
    static _indent = 0;
    static createElement(type = '', props = null, ...child) {
        return {
            type,
            props,
            child
        };
    }
    static render({type, props, child}) {

## mario.html
<!DOCTYPE html>
<html>

<head>
    <title>Mario</title>
</head>

<body>
    <button>Play sound</button>
    <script>

## dragAndDropPerformance.html
<!DOCTYPE html>
<html>
  <head>
    <title>Drag and drop</title>
    <style>
      .red { background-color: red; }
      .green { background-color: green; }
      .blue { background-color: blue; }
      .root { position: fixed; }
      .box {

## draggable.html
<!DOCTYPE html>
<html>
<head>
  <title>Drag and drop</title>
  <style>
    .ball {
      width: 200px;
      height: 200px;
      position: absolute;
    }

## navigation.html
<!DOCTYPE html>
<html>
<head>
  <title>Drag and drop</title>
  <style>
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }

## stateReducerPattern.html
<!DOCTYPE html>
<html>
  <head>
    <title>Frame</title>
  </head>
  <body>
    <button>Send message</button>
    <script>
      (function() {
	export default class ImageFactory {
	static _index = 0;
	static _colors = ["red", "orange", "yellow", "green", "skyblue", "blue", "cyan"];
	static _increment() {
	const self = ImageFactory;
	return self._index = (++self._index > self._colors.length - 1) ? 0 : self._index;
	}
	static createImage(height = 100, width = 100) {
	const canvas = document.createElement("canvas");
	const context = canvas.getContext("2d");
	<body>
	<script>
	(async function() {
	const fetchImage = async (url) => {
	const data = await fetch(url);
	const buffer = await data.arrayBuffer();
	const blob = new Blob([buffer], { type: "image/png"});
	return blob;
	}
	const sendImage = (blob, url = "http://foo.com/submitform.php", name = "image.png") => {
	// o <- end
	// / \ n
	// f g \ /
	// \ / m n
	// e \ /
	// \| p \|
	// h d \ /
	// \ \| l
	// i c /
	// \ \| k
	<!DOCTYPE html>
	<html>
	<head>
	<title>Omg</title>
	</head>
	<body>
	<pre contenteditable>
	</pre>
	<p>X: <input type="number" value="3"></p>
	<p>Y: <input type="number" value="5"></p>
	class JSX {
	static _indent = 0;
	static createElement(type = '', props = null, ...child) {
	return {
	type,
	props,
	child
	};
	}
	static render({type, props, child}) {