Skip to content

Instantly share code, notes, and snippets.

Avatar

Greg Reimer greim

View GitHub Profile
@greim
greim / html-parsing.md
Last active Jun 22, 2020
HTML Parsing Primer
View html-parsing.md

How HTML Parsing Works

An HTML parser scans through an input string, starting at the beginning:

<div>hello<br>world</div>
│
└─ scanning begins here
@greim
greim / vacancy-observers.md
Last active Dec 21, 2019
Vacancy Observers
View vacancy-observers.md

Vacancy Observers

Vacancy observers are a data-fetching strategy for functional UI frameworks which doesn't rely on side effects. Instead, components are written as pure functions, indicating their remote data dependencies directly in their output using vacancies.

An observer may then detect the presence of those vacancies and take appropriate action, depending on the environment. For example:

  • In an Elm app: the observer might be a MutationObserver—running independently in JavaScript—which listens for vacancies in the DOM, makes HTTP requests, and feeds the results into Elm over a port.
  • In a React+Redux app: similar to above, the observer might be a MutationObserver which dispatches actions to Redux.
  • In a server-side renderer: The observer might be a post-processor which analyzes the HTML output to detect vacancies, fetch them, and use that data to either re-render the output, or http2-push to the client.
  • In a unit test runner: the observer would simply be the caller of the co
@greim
greim / motel-setup.js
Last active Oct 7, 2018
Motel Setup Example
View motel-setup.js
/*
* Using `motel` to implement a vacancy observer.
* This happens once at app startup time.
*/
const motel = require('motel');
const vacancies = motel();
// start observing the DOM for vacancies
vacancies.connect(document.getElementById('#app'));
@greim
greim / user-profile.jsx
Last active Oct 7, 2018
Vacancy Observer Example
View user-profile.jsx
/*
* <UserProfile/> React component which
* uses the vacancy observer pattern.
*/
function UserProfile({
userId, // comes from the URL
users, // collection of fetched items
}) {
const user = users[userId];
@greim
greim / data-vacancies.js
Last active Nov 11, 2017
Data Vacancies
View data-vacancies.js
vacancies.listen('relatedProducts/:productId', async function(params, send) {
const id = params.productId;
const resp = await fetch(`/products/${id}/related`);
const products = await resp.json();
send({ type: 'RECEIVE_RELATED_PRODUCTS', id, products });
});
@greim
greim / fetch-logic-2.jsx
Last active Nov 11, 2017
Fetch Logic 2
View fetch-logic-2.jsx
function ProductDetailPage({ viewportWidth, relatedProductInfo }) {
const hasRealestate = viewportWidth > 800;
const hasData = relatedProductInfo === undefined;
return <div>
...
{ hasRealestate &&
( hasData
? <RelatedProducts products={relatedProducts}/>
: <div data-vacancy={`relatedProducts/${id}`}>Loading...</div>
)
View fetch-logic.jsx
class ProductDetailPage extends React.Component {
componentDidMount() {
...
const hasRealestate = this.props.viewportWidth > 800;
const hasData = this.props.relatedProductInfo === undefined;
if (hasRealestate && !hasData) {
this.props.fetchRelatedProductInfo(this.props.productId);
}
}
View elm-components.md

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems... well, weird to me, and the docs aren't helping, so I jot down these notes in order to force myself to better grasp the topic, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Elm Components

The Elm architecture is cool because it's fractal. That is, you can break your program into components, each of which is a mini-expression of the overall Elm architecture. The Elm architecture is... turtles.

How is this done? I don't know! I'll figure it out and come back!

View elm-markup.md

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems weird, and the docs aren't helping, so I jot down these notes, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Markup

Building markup in Elm entails building a data structure, much like React's virtual DOM. That is, you're not building DOM nodes directly, but rather a lightweight data structure that tells the Elm runtime which DOM nodes you want to exist and it figures it out from there. There's really nothing special about Elm's Html; it's just another data type.

What does Html msg actually mean?

View elm-functions.md

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems... well, weird to me, and the docs aren't helping, so I jot down these notes in order to force myself to better grasp the topic, because writing forces me to think deeply about things in a way that I'm incapable of doing otherwise gaaasspp

Grokking Elm Functions

Background: In Elm, functions are pure. Given the same input, they'll always return the same output. That isn't the case in JavaScript, where for example a function can return different values on successive calls, like Math.random() or Date.now().

Thus, a function that takes zero args is conceptually no different than a variable. A variable holds a value. A zero-arg function only returns one possible value. This is reflected in Elm syntax. Look at how you annotate and declare a variable in Elm: