mbaer3000

So there were a few threads going around recently about a challenge to write the longest sequence of keywords in Javascript:

There are, however, a few problems:

These solutions use non-keyword tokens (null, true, false are actually Literals, not Keywords)
One of the solutions isn't quite valid (new super)

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

Clarify and agree on the scope of the system

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

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

	/*
	Author: Jonathan Lurie - http://me.jonathanlurie.fr
	License: MIT

	The point of this little gist is to fix the issue of losing
	typed arrays when calling the default JSON serilization.
	The default mode has for effect to convert typed arrays into
	object like that: {0: 0.1, 1: 0.2, 2: 0.3} what used to be
	Float32Array([0.1, 0.2, 0.3]) and once it takes the shape of an
	object, there is no way to get it back in an automated way!

	See https://github.com/electron/electron/issues/7375



	Copyright (c) 2017 Christophe Bol

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

	# Simple function that uses a heuristic to tell if a function
	# is native code. Luckily this isn't security related code.
	isNative = (fn) ->
	return (/\{\s\[native code\]\s\}/).test('' + fn)

	# An easy check to ensure we are on a modern browser
	isModernBrowser = ->
	return (
	window.addEventListener &&
	window.performance?.now &&

	console.log(1);
	(_ => console.log(2))();
	eval('console.log(3);');
	console.log.call(null, 4);
	console.log.apply(null, [5]);
	new Function('console.log(6)')();
	Reflect.apply(console.log, null, [7])
	Reflect.construct(function(){console.log(8)}, []);
	Function.prototype.apply.call(console.log, null, [9]);
	Function.prototype.call.call(console.log, null, 10);

	/**
	* Encrypts plaintext using AES-GCM with supplied password, for decryption with aesGcmDecrypt().
	* (c) Chris Veness MIT Licence
	*
	* @param {String} plaintext - Plaintext to be encrypted.
	* @param {String} password - Password to use to encrypt plaintext.
	* @returns {String} Encrypted ciphertext.
	*
	* @example
	* const ciphertext = await aesGcmEncrypt('my secret text', 'pw');