Mario Sommer MarioSo

1. Talk about birds for five minutes

Hawks vs. Falcons
Observability vs. Metrics (Cindy Sridharan)

2. Data models

Events vs. Structured Logs (Ben Hartshorne, Honeycomb.io)

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	<html>

	<head>
	<title>Web3 Metamask Login</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
	</head>

	<body class="flex w-screen h-screen justify-center items-center">
	<div class="flex-col space-y-2 justify-center items-center">
	<button id='loginButton' onclick="" class="mx-auto rounded-md p-2 bg-purple-500 text-white">

	<script context="module">
	import { get, readable } from 'svelte/store'

	import { createClient, operationStore } from '@urql/svelte'

	import { browser, dev } from '$app/env'

	/**
	* @type {import('@sveltejs/kit').Load}
	*/

	/**
	* The target language. [Browser support is good][1] but "en-US" is a safe default.
	*
	* [1]: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language
	*
	* @type {string}
	*/
	const { language = "en-US" } = navigator;

	/**

	export const getImageWidthByUserContext = (width, MAX_WIDTH = 2880) => {
	if (typeof(window) === 'undefined') return width;

	// Pixel ratio
	let qualityRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;

	// If bad connection, we downgrade
	let type = null;
	if (navigator && navigator.connection && navigator.connection.type) type = navigator.connection.type;
	if (navigator && navigator.connection && navigator.connection.effectiveType) type = navigator.connection.effectiveType;

	<?
	//
	// [ BUY BTC & ETH DAILY ON BITSTAMP ]
	// by @levelsio
	//
	// 2017-08-23
	//
	// 1) buy $40/day BTC
	// 2) buy $10/day ETH
	//

	var cameraZ = camera.position.z;
	var planeZ = 5;
	var distance = cameraZ - planeZ;
	var aspect = viewWidth / viewHeight;
	var vFov = camera.fov * Math.PI / 180;
	var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
	var planeWidthAtDistance = planeHeightAtDistance * aspect;

	// or

	{
	"keys": ["tab"],
	"command": "expand_abbreviation_by_tab",

	// put comma-separated syntax selectors for which
	// you want to expandEmmet abbreviations into "operand" key
	// instead of SCOPE_SELECTOR.
	// Examples: source.js, text.html - source
	"context": [
	{