Skip to content

Instantly share code, notes, and snippets.

Greg Reimer greim

Block or report user

Report or block greim

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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:

View elm-json-decoders.md

Elm: Supplementary Notes

In which I get angry because some aspect of Elm seems weird to me, 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 JSON Decoders

Preliminary: We'll be dumping Json.Decode into our namespace to reduce typing, such that we have naked functions such as int, which is actually Json.Decode.int, and so forth:

import Json.Decode exposing (..)
@greim
greim / queue.elm
Created Jun 24, 2016
Queue data structure in Elm
View queue.elm
type Queue a
= Empty
| Mono a
| Multi a (Queue a) a
enq : a -> Queue a -> Queue a
enq val queue =
case queue of
Empty ->
You can’t perform that action at this time.