Luke Pommersheim lpommers

Learn Go in ~5mins

This is inspired by A half-hour to learn Rust and Zig in 30 minutes.

Basics

Your first Go program as a classical "Hello World" is pretty simple:

First we create a workspace for our project:

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

	# this file contains keys needed for decryption of file system data (WUD/WUX)
	# 1 key per line, any text after a '#' character is considered a comment
	# the emulator will automatically pick the right key
	541b9889519b27d363cd21604b97c67a # example key (can be deleted)

	d7b00402659ba2abd2cb0db27fa2b656 # Common
	805e6285cd487de0faffaa65a6985e17 # Espresso Ancast
	b5d8ab06ed7f6cfc529f2ce1b4ea32fd # Starbuck Ancast

	9a164ee15ac7ceb64d3cc130094095f6 # 007 Legends [EUR, NUS]

	<html>

	<head>
	<script>
	customElements.define("star-wars-planets", class extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: "open" });
	}
	static get observedAttributes() { return ["loading", "planets"]; }

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"