TheComfyChair

@TheComfyChair·11 public vizzes

Rendering MFEs

This example demonstrates a micro-frontend integration hub, rendering three independently built applications side-by-side within a single host. The React-based orchestrator manages a shared counter and displays Vue, React, and Angular sub-applications, each visible only when its corresponding container is clicked to toggle visibility. The central `render()` function conditionally mounts `TheVueApp`, `TheReactApp`, and `TheAngularApp` components, passing the current counter value as a prop to each. Clicking any app container toggles that specific framework's visibility, showcasing how heterogeneous front-end technologies can coexist within one interface.

Aug 17, 2018

Loading thumbnail…

Gist 7f9c8a8f711748856e574b550d7f3751

A small React application renders a force-directed graph of interconnected nodes and edges. The visualization uses `d3.forceSimulation` to compute node positions and link forces, while the `ReactDOM.render` call mounts the component onto a DOM element. The graph displays circles for data points and lines for connections, with the simulation running continuously to update positions dynamically. The code relies on React’s component-based structure to manage the SVG elements and update them on each simulation tick.

Jul 29, 2018

Loading thumbnail…

Redux-scc custom types

This example demonstrates how to extend the Redux-scc store with custom data types, specifically validating a `moment` object as an `expiryDate` property. It uses Redux-scc’s `Types.custom` API and `buildStoreChunk` to define a reusable shape. The code provides a custom validator and a validation error message, showing how to enforce type safety on nested store state without additional libraries. The source is a gist by TheComfyChair, and the rendering approach is not shown, focusing purely on type definition logic.

Aug 10, 2017

Loading thumbnail…

multiple array reducer update (Redux SCC blog v1)

This example demonstrates a single action that sequentially applies three array reducer updates to mutate a shared state. It shows how a combined action named “Multi action update!” chains an array replacement, an index-based removal, and a second index-based replacement to transform an initial array `[5,4,3]` into `[5, 42]`. The code uses a custom `createCombinedAction` helper and the `actions.arrayReducer` API to compose atomic reducers, highlighting a pattern for batching multiple state mutations in a Redux-style store. The source is a JavaScript gist by TheComfyChair.

Aug 7, 2017

Loading thumbnail…

redux-scc-v1-blog-example-store

This example demonstrates a Redux store chunk that manages both string and numeric-array state through generated reducers and selectors. It uses the `buildStoreChunk` helper to define a `stringReducer` and `arrayReducer` via `Types.reducer`, with `Types.string()` and `Types.arrayOf(Types.number())` schemas. The store is assembled with `createStore` and `combineReducers` from Redux, while `actions`, `reducers`, and `selectors` are destructured from the chunk configuration. The code shows a programmatic approach to structuring Redux state management without explicit action creators or reducer bodies.

Aug 7, 2017

Loading thumbnail…

redux-scc-v1-blog-double-dispatch

This example demonstrates the Redux state-management pattern for managing and visualizing multiple data updates in a JavaScript application. The code shows two consecutive `store.dispatch()` calls that trigger separate state changes: one replacing a string value and another pushing a number into an array. It highlights how Redux handles action dispatching and state transitions, using the Redux store API alongside action creators defined in the `actions` object. The visualization would typically reflect the updated state after each dispatch, showing the sequential effect of double actions on the rendered data.

Aug 7, 2017

Loading thumbnail…

redux-scc-v1-blog-combined-action

This example demonstrates a Redux add-on that batches multiple state updates into a single combined action, visible in the action history as one entry. The code defines a combined action via `createCombinedAction`, which wraps two separate reducer dispatches—`actions.stringReducer.replace` and `actions.arrayReducer.push`—inside a single dispatch call. The visualization highlights how Redux DevTools would log only the combined action, not the individual sub-updates, simplifying debugging of complex state changes. It uses the Redux library and the custom `createCombinedAction` API to bundle the operations.

Aug 7, 2017

Loading thumbnail…

Function argument evaluation

This example visualizes the scope and behavior of function arguments in JavaScript, specifically showing that function expressions are not hoisted. A small data array, `[1,2,3]`, is passed to `Array.prototype.map` with a function expression named `foo`. The visualization demonstrates that the callback executes correctly during the `map` call, but a subsequent call to `foo()` outside that scope throws a `TypeError` because the function name is only visible within its own body. The code relies on standard JavaScript language constructs rather than external visualization libraries.

Feb 6, 2017

Loading thumbnail…

Gist bda4f96acfd2cdc3b3ab4ce26a268e7d

This example demonstrates a React component hierarchy that renders a list of reasons why React is enjoyable, using both a stateless functional component and a class-based wrapper. The class component supplies data via an array of strings, while the functional component maps over the array to produce list items. The code uses React’s `Component`, `PropTypes`, and `ReactDOM.render` to handle rendering, with lifecycle methods `componentWillMount` and `componentDidMount` logging console messages. The data is hardcoded within the class constructor rather than fetched externally.

Sep 5, 2016

Loading thumbnail…

Using React component ref

This example demonstrates how a React component can use a ref callback to store a direct reference to a DOM node. The code defines an `Input` class component that assigns the underlying `<input>` element to `this.inputNode` through the `ref` attribute. This pattern enables imperative access to the input’s native methods and properties, such as focusing or reading its value, without relying on the React synthetic event system. The implementation uses React’s class component lifecycle and the standard `ref` callback API.

Aug 21, 2016

Loading thumbnail…

Gist e34cd865d66a6253975b29e04e98f28d

This example demonstrates a workaround for an Internet Explorer update bug that caused D3.js visualizations to render incorrectly. The code shows a conditional check for an input component, and if it exists, it calls the `context.update` method with the component's name and `inputNode.value`. This approach ensures the visualization properly refreshes its state after the browser’s rendering engine processes updates, preventing stale or broken displays. The snippet relies on D3.js’s internal context API to manage dynamic data binding within an interactive graphic.

Aug 21, 2016