Hatem Hosny hatemhosny

## dom3d.js
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

## IframeKeepAlive.vue
<script lang="ts">
const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
</script>

<script lang="ts" setup>
import { useAttrs, ref, shallowRef, watchEffect, onMounted, onBeforeUnmount } from 'vue'
import { useElementBounding } from '@vueuse/core'

defineOptions({
  inheritAttrs: false,

## javascript_engines_and_runtimes.md

      
              1 file
            
          
              9 forks
            
          
              4 comments
            
          
              98 stars
            
          
                guest271314
                / javascript_engines_and_runtimes.md
            
            
              Last active
              July 25, 2024 02:34
            
              
                A list of JavaScript engines, runtimes, interpreters
              
          
V8


V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.


SpiderMonkey


SpiderMonkey is Mozilla’s JavaScript and WebAssembly Engine, used in Firefox, Servo and various other projects. It is written in C++, Rust and JavaScript. You can embed it into C++ and Rust projects, and it can be run as a stand-alone shell. It can also be [compiled](https://bytecodealliance.org/articles/making-javascript-run-fast-on


## reactive.js
// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/

let context = [];

export function untrack(fn) {
    const prevContext = context;
    context = [];
    const res = fn();
    context = prevContext;
    return res;

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screen recorder</title>
</head>
<body>
    <button id="recording-toggle">Start recording</button>
    <script defer>

## sw-boilerplate.js
// Core assets
let coreAssets = [];

// On install, cache core assets
self.addEventListener('install', function (event) {

	// Cache core assets
	event.waitUntil(caches.open('app').then(function (cache) {
		for (let asset of coreAssets) {
			cache.add(new Request(asset));

## Blockchain
const hash = require("crypto-js/sha256");
class Block {
  constructor(previousHash, data) {
    this.data = data;
    this.hash = this.calculateHash();
    this.previousHash = previousHash;
    this.timeStamp = new Date();
    this.proofOfWork = 0;
  }

## circular-reference.ts
var circularReference = {otherData: 123};
circularReference.myself = circularReference;

JSON.stringify(circularReference); // returns --> TypeError: cyclic object value

const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {

## checkForUndefinedCSSClasses.js
/**
 * Sets up a DOM MutationObserver that watches for elements using undefined CSS
 * class names. Performance should be pretty good, but it's probably best to
 * avoid using this in production.
 *
 * Usage:
 *
 *   import cssCheck from './checkForUndefinedCSSClasses.js'
 *
 *   // Call before DOM renders (e.g. in <HEAD> or prior to React.render())

## serviceWorker.js
var STATIC_CACHE_CONTAINER = "static_v1"
var STATIC_FILES = [
    "/",
    "/index.js",
    "/index.css",
    "https://fonts.googleapis.com/css2?family=Ranchers&display=swap",
    "https://fonts.gstatic.com/s/ranchers/v8/zrfm0H3Lx-P2Xvs2ArDfBi8.woff2",
    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
]
	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯
	<script lang="ts">
	const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
	</script>

	<script lang="ts" setup>
	import { useAttrs, ref, shallowRef, watchEffect, onMounted, onBeforeUnmount } from 'vue'
	import { useElementBounding } from '@vueuse/core'

	defineOptions({
	inheritAttrs: false,
	// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/

	let context = [];

	export function untrack(fn) {
	const prevContext = context;
	context = [];
	const res = fn();
	context = prevContext;
	return res;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Screen recorder</title>
	</head>
	<body>
	<button id="recording-toggle">Start recording</button>
	<script defer>
	// Core assets
	let coreAssets = [];

	// On install, cache core assets
	self.addEventListener('install', function (event) {

	// Cache core assets
	event.waitUntil(caches.open('app').then(function (cache) {
	for (let asset of coreAssets) {
	cache.add(new Request(asset));
	const hash = require("crypto-js/sha256");
	class Block {
	constructor(previousHash, data) {
	this.data = data;
	this.hash = this.calculateHash();
	this.previousHash = previousHash;
	this.timeStamp = new Date();
	this.proofOfWork = 0;
	}
	var circularReference = {otherData: 123};
	circularReference.myself = circularReference;

	JSON.stringify(circularReference); // returns --> TypeError: cyclic object value

	const getCircularReplacer = () => {
	const seen = new WeakSet();
	return (key, value) => {
	if (typeof value === "object" && value !== null) {
	if (seen.has(value)) {
	/**
	* Sets up a DOM MutationObserver that watches for elements using undefined CSS
	* class names. Performance should be pretty good, but it's probably best to
	* avoid using this in production.
	*
	* Usage:
	*
	* import cssCheck from './checkForUndefinedCSSClasses.js'
	*
	* // Call before DOM renders (e.g. in <HEAD> or prior to React.render())
	var STATIC_CACHE_CONTAINER = "static_v1"
	var STATIC_FILES = [
	"/",
	"/index.js",
	"/index.css",
	"https://fonts.googleapis.com/css2?family=Ranchers&display=swap",
	"https://fonts.gstatic.com/s/ranchers/v8/zrfm0H3Lx-P2Xvs2ArDfBi8.woff2",
	"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
	]