Joe joedski

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ [email protected]

The history of hyperHTML followed by lit-html

While many remember the epic hyperHTML: A Virtual DOM Alternative post I've published the 5th of March 2017, the first official implementation of the library was working as hyperHTML.bind(node) function for tagged literals the day before, and it's been in my experiments folder already for a little while.

The hilarious reaction from the skeptical community

At first glance people couldn't believe performance of the DBMonster demo shown in that article,

1. Separation of immutable and mutable logic

Quite a lot of different people have been on the same trail of thought. Gary Bernhardt's formulation of a "functional core, imperative shell" seems to be the most voiced.

"Boundaries" - Gary Bernhardt

"Imperative shell" that wraps and uses your "functional core".. The result of this is that the shell has fewer paths, but more dependencies. The core contains no dependencies, but encapsulates the different logic paths. So we’re encapsulating dependencies on one side, and business logic on the other side. Or put another way, the way to figure out the separation is by doing as much as you can without mutation, and then encapsulating the mutation separately. Functional core — Many fast unit tests. Imperative shell — Few integration tests

https://www.youtube.com/watch?v=yTkzNHF6rMs

Flyd

https://github.com/paldepind/flyd
License: MIT
Size: 22.4 KB (3.4 KB gzip)
Functions: 16
Project Life: Good
Stars: 1129
Code Quality: Good Functional/Procedural
Comments: JSDoc
Quality Automation: Extensive unit tests, CI

Starving the Event Loop with microtasks

"What's the Event Loop?"

Sparked from this twitter conversation when talking about doing fast async rendering of declarative UIs in Preact

These examples show how it's possible to starve the main event loop with microtasks (because the microtask queue is emptied at the end of every item in the event loop queue). Note that these are contrived examples, but can be reflective of situations where Promises are incorrectly expected to yield to the event loop "because they're async".

setTimeout-only.js is there to form a baseline

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	export default function(WrappedComponent) {
	const mixinProps = (WrappedComponent.mixins \|\| [])
	.filter((mixin) => mixin.props)
	.map((mixin) => mixin.props);
	const allProps = mixinProps.concat(WrappedComponent.props);
	const mergedProps = allProps.reduce((merged, props) => Object.assign(merged, props), {});

	return {
	props: mergedProps,
	render(createElement) {