R.J. (Steinert) Corwin rjcorwin

An approach to binding Redux to custom elements

The code here captures some of the patterns I used in the "real estate" demo app discussed in my talk End to End Apps with Polymer from Polymer Summit 2017.

There are many ways to connect Redux to custom elements, and this demonstrates just one pattern. The most important aspects are to try and lazily-load as much of the otherwise global state management logic along with the components that need them (as shown via the lazyReducerEnhancer and addReducers calls in the connected components), and to consider the tradeoffs you make in terms of coupling components to the store.

The pattern shown here of creating a stateless component and then a subclass that connects it to the store addresses a potential desire to reuse app-level stateless components between more than one application context, so the subclass provides a degree of decoupling from the concrete store, at the expense of more boilerplate. If app com

By default the memory limit in Node.js is 512MB.

This will cause FATAL ERROR- JS Allocation failed – process out of memory when processing large data files.

It can be avoided by increasing the memory limit.

See Command-line options for more details.

node --max-old-space-size=1024 server.js # increase to 1gb

Not all random values are created equal - for security-related code, you need a specific kind of random value.

A summary of this article, if you don't want to read the entire thing:

Don't use Math.random(). There are extremely few cases where Math.random() is the right answer. Don't use it, unless you've read this entire article, and determined that it's necessary for your case.
Don't use crypto.getRandomBytes directly. While it's a CSPRNG, it's easy to bias the result when 'transforming' it, such that the output becomes more predictable.
If you want to generate random tokens or API keys: Use uuid, specifically the uuid.v4() method. Avoid node-uuid - it's not the same package, and doesn't produce reliably secure random values.
If you want to generate random numbers in a range: Use random-number-csprng.

You should seriously consider reading the entire article, though - it's

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

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

	const sleep = (milliseconds) => new Promise((res) => setTimeout(() => res(true), milliseconds))

	const fillUpWithRevisions = async (numberOfDocs = 100, numberOfRevisionsPerDoc = 10, templateDoc, compactCompare = true, autoCompact = false, destroy = true) => {
	let initialEstimate = await navigator.storage.estimate()
	let dbName = `test-${new Date().getTime()}`
	let db = new PouchDB(dbName, {auto_compaction: autoCompact})
	delete templateDoc._rev
	let docNumber = 0
	let revisionNumber = 0
	while (numberOfDocs > docNumber) {

	//
	// Conditional statements.
	//

	// Simple.
	var text1 = `Numbers are great, ${1 === 1 ? '1 is equal to 1' : '1 is not equal to 1. Uh oh.'}.`
	console.log(text1)

	// Advanced.
	var text2 = `Numbers are great, ${(()=>{

	<html id="content">
	<head>
	<script>

	var selfArchive = new DatArchive('' + window.location)
	var state = (document.getElementById('content')).outerHTML

	// Counter for the number of state changes thus commits.
	var i = 0
	async function saveIt() {

	<script>
	function printDiv(divName){
	var printContents = document.getElementById(divName).innerHTML;
	var originalContents = document.body.innerHTML;

	document.body.innerHTML = printContents;

	window.print();

	document.body.innerHTML = originalContents;