Abhay-Joshi-Git

@Abhay-Joshi-Git·7 public vizzes

Temporal Workflow simple example

This example demonstrates a minimal Temporal workflow where a workflow interface defines a greeting method and an implementation class returns the greeting string. The code shows how a worker registers the workflow implementation with a task queue and starts polling, while a separate starter creates a workflow client, specifies workflow options like task queue and workflow ID, and invokes the method. Using Temporal’s `WorkflowClient`, `WorkerFactory`, and `Worker` APIs, the example illustrates the separation between workflow definition, worker execution, and client-side invocation, with the workflow result printed after execution. The source is a gist by Abhay-Joshi-Git.

Dec 31, 2024

Loading thumbnail…

simple loading indicator with css

This example demonstrates a simple loading indicator, a purely visual element that signals an ongoing process through a spinning animation. It shows a circular progress icon that rotates continuously to convey activity. The visualization is achieved using a single HTML `div` element with a CSS class, styled through the provided stylesheet. The core logic relies on the CSS `animation` property with a `@keyframes` rule named `spin`, which rotates the element from 0 to 360 degrees over a two-second linear infinite cycle. The loader’s design uses a bordered circle with a transparent center and a contrasting top border to create the spinning effect, while the container is positioned absolutely with a high z-index and partial opacity.

Oct 9, 2018

Loading thumbnail…

Advanced example for eagerly prefetching async data in a React component.

This example demonstrates an advanced React pattern for eagerly prefetching asynchronous data in a component, intended as a performance optimization for low-end devices. The code shows a component that initiates an external async data request in the constructor, before rendering, to prime a cache, then completes the state update in `componentDidMount` after mounting, while guarding against post-unmount updates via a `_hasUnmounted` flag. It uses React’s lifecycle methods and state management, with the `asyncLoadData` function as the external async API. The data source is external and passed via `this.props.someId`, and the rendering approach conditionally shows a loading state until the data arrives.

Mar 28, 2018

Loading thumbnail…

existing elements with key function

This example demonstrates how D3’s data join behaves when a key function is supplied, using a hardcoded array of five student score objects. It shows that when existing DOM elements match data by key (here, the name property), the join does not re-bind data to those matching elements, but instead leaves them untouched. The code selects all `div` elements inside a container, passes the scores array with a key function that logs both the data and the current element to the console, and then appends new `div` elements for unmatched data. The newly appended divs display each student’s name in red, while the pre-existing “Billy” div remains unstyled, illustrating how the key function controls element reuse in D3 v4’s `enter` selection.

Jan 13, 2018

Loading thumbnail…

axios interceptors for refresh token

This example shows an Axios response interceptor that automatically handles expired access tokens by refreshing them when a request returns a 401 status. The code intercepts the failed request, checks the stored refresh token from `window.localStorage`, and posts it to an authentication endpoint at `localhost:8000/auth/refresh`. On success, it updates both the access and refresh tokens in local storage, sets the new authorization header for subsequent requests, and retries the original request. The implementation uses `axios.interceptors.response.use` with a `_retry` flag to prevent infinite loops, while relying on the browser’s local storage for token persistence and Axios’s promise-based API for asynchronous flow.

Oct 5, 2017

Loading thumbnail…

How to get a new token after token expired in axios

This example shows how to automatically refresh an expired OAuth2 token in an Axios-based HTTP client and retry the original failed request. Using an Axios response interceptor, the code checks for a 401 status and a missing `_retry` flag, then posts the stored refresh token to a local backend endpoint with basic auth credentials. After dispatching the new token data to a Vuex store and updating both global and per-request Authorization headers, it re-invokes the original request configuration. The example relies on Axios interceptors, `qs.stringify` for form-encoded payloads, and Vuex getters/dispatchers for user state.

Jul 17, 2017

Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

Sep 30, 2015