Gist 7e25cbcd7c60d58ca2949795d215284a

100%

Gist 7e25cbcd7c60d58ca2949795d215284a

✓ Published0🌍 Public

Last edited May 3, 2022

Created on May 2, 2022

This example illustrates four distinct approaches to reacting to a state change in an Angular application, using the RxJS `filter` and `take` operators within a `store` service. It shows how to implement a save action by observing `saveButtonState`, then demonstrates wrapping the same observable logic in a Promise for async handling, and finally presents simpler alternatives using a callback and an event emitter. The code relies on `ButtonState` enums and a `saveDone` event emitter, with no external visualization libraries or data sources involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 782553a6e275e4bfc694a6a3a6d1a46f

This example demonstrates how the React `useRef` hook preserves a mutable value across re-renders, unlike the `createRef` API, which creates a new ref each render. It visually compares the two by displaying the current render index alongside the persisted value from `useRef` and the reset value from `createRef` after a button click triggers a state update. The code uses `React.useState` to drive re-renders and `React.useRef` to hold a stable reference, while `createRef` shows its transient nature. The example also uses `useEffect` with a custom comparison to illustrate deep object dependency handling, referencing the React documentation.

HHuyAms

56% match

Loading thumbnail…

Gist 3413ee69199762ea0375292e47168e84

This example shows a Redux-based offline-first data visualization for a rail system, persisting station directory data to localStorage and using a service worker to cache assets for offline use. The code uses `localforage` for asynchronous storage, `axios` for fetching JSON station data, and `throttle` from Lodash to limit state saves. It demonstrates a fetch-then-cache strategy where API responses are stored locally, while the service worker intercepts network requests to serve cached resources or fall back to offline behavior. The visualization itself is not shown, but the data flow centers on storing and retrieving station directory JSON to support the application’s offline functionality.

CCKschneid

55% match

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K

54% match

Loading thumbnail…

React, redux, Expect and Deep Freeze

This example demonstrates a pure function called `testFunction` that takes a state number and an action object, returning an updated number for increment, decrement, or unchanged states. The code uses the Expect library to assert five specific input-output pairs, validating correct logic for both counter operations and an unknown action type. After the assertions, it logs "tests passed!" to the console. The reducer pattern mirrors Redux’s action dispatch, though no UI or visualization is rendered—the focus is solely on unit-testing the state transition logic.

DDDDDDanica

54% match

Loading thumbnail…

Redux + D3 in the browser

A Redux store manages a counter and iteration count, displayed as a text label in an SVG. The D3 v4 code renders the SVG and two buttons, while Redux dispatches `INCREMENT`, `DECREMENT`, `ZERO`, and `RESET` actions. A `d3.interval` timer randomly dispatches increment or decrement actions every 100 milliseconds. The store’s `subscribe` method updates the text element in response to state changes, demonstrating a pure Redux pattern for UI synchronization without a view-binding library.

PPhilippe Rivière

53% match

Loading thumbnail…

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

HHypercubed

53% match

Loading thumbnail…

A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.

This example demonstrates a reusable dialog system that replaces native alert, confirm, and prompt functions with promise-based APIs. It provides `useAlert`, `useConfirm`, and `usePrompt` hooks that return resolved values—booleans or strings—when the user interacts with the dialog. The implementation uses React’s Context API, `useReducer`, and `useRef` to manage state across an `AlertDialogProvider` component. The UI is built with shadcn/ui’s `AlertDialog`, `Button`, and `Input` components, all rendered inside a form that submits to close the dialog and resolve the pending promise.

JJastor11

53% match

Loading thumbnail…

Simple Unidirectional Data Flow

This example demonstrates a simple unidirectional data flow pattern, using a counter that increments on button click. The current count is displayed in the DOM, and each click dispatches an INCREMENT action to a reducer function, which returns a new state object. The updated state is then passed to a render function that updates the text content of the counter element. The code uses vanilla JavaScript, with plain DOM methods like `getElementById` and `addEventListener` to handle interaction and rendering.

MMark D. Clements

52% match