Tell us what works and what could be better. We read every submission.
@andresmijares·32 public vizzes
This example shows how to retrieve multiple documents from the same Firestore collection using the Cloud Firestore SDK. The code demonstrates batch-fetching documents by their IDs, likely to aggregate data for visualization. It uses Firebase’s `firestore` API, specifically `getDocs` or `doc().get()` methods, to asynchronously query and handle each document snapshot. The gist relies on a configuration file (`cloudSettings`) and a settings sync extension, but the core logic focuses on Firestore’s promise-based data retrieval, making it a practical reference for loading multiple records before rendering charts or graphs.
This example visualizes a settings-sync workflow for Visual Studio Code extensions. It shows how extension metadata and configuration files are stored and linked through a cloud-based GitHub gist, using the `code-settings-sync` extension’s `settings.json` to reference the gist ID. The visualization relies on JSON data structures from `extensions.json` and `cloudSettings` to display the sync relationship, with the gist serving as the central hub. The code renders the JSON hierarchy and connection points using JavaScript object parsing, though no specific charting library is employed. It presents the raw file contents and their interconnections in a static, tree-like layout.
This example visualizes the steps and secrets defined in a Cloud Build configuration file, mapping them as a directed flow of deployment actions. It shows the sequence of Firebase authentication, npm installation, and function deployment, alongside the encrypted secret environment variables. The visualization uses a custom rendering approach with d3.forceSimulation to layout nodes and links, while reading the YAML structure from the cloudbuild.yml source file. The code references GCP-specific APIs for secret management, though the rendering logic itself is not tied to a specific charting library beyond the force-directed graph.
This example shows a Firebase-backed banking transaction that processes a coin purchase in real time. It demonstrates how a Cloud Firestore transaction atomically checks a user’s coin balance, verifies item availability, deducts the total cost, updates the item quantity, and records the purchase in a separate collection. The code uses the `firebase-admin` SDK, `db.runTransaction`, and `transaction.get`, `transaction.update`, and `transaction.set` to lock and modify documents. It also relies on `functions.https.onCall` to expose the purchase operation as a callable cloud function, with error handling for insufficient funds or stock.
This example shows a Firebase Cloud Function that automates the onboarding process for a venue, creating related service, promotion, and venue documents in Firestore while updating the original onboard record’s status. The code uses the Firebase Admin SDK, Firestore’s batch API for atomic writes, and the `uuid/v1` module to generate unique identifiers. It processes data based on status changes, retrying up to three times on failure, and handles both draft and completed states without reprocessing.
This example shows how to authenticate a Firebase user with a custom token obtained from a backend endpoint. It demonstrates a client-side authentication flow where an Auth0 token from localStorage is sent as an Authorization header via Axios to a custom backend path, which returns a Firebase custom token. The code then uses `firebase.auth().signInWithCustomToken()` to sign in the user with that token, initializing Firebase with environment variables for its configuration. The example highlights the integration of Firebase Authentication with a custom backend service using Axios for HTTP requests.
This example shows a serverless AWS configuration for issuing Firebase custom authentication tokens through a POST endpoint. The YAML file defines a single `auth` function using the `serverless-pseudo-parameters` plugin to reference CloudFormation resources. The function handler, `firebaseCustomTokenLambda.handler`, is triggered by an HTTP POST event at the `/auth` path. The runtime is Node.js 8.10, and the service is named `firebase-custom-token`. The file demonstrates how to wire a Firebase token-generation service into an API Gateway using the Serverless Framework, without including the actual Lambda implementation.
This example demonstrates how to generate a Firebase custom authentication token by decoding an incoming JSON Web Token. The code uses the `firebase-admin` SDK to create the token and the `jwt-decode` library to extract the `sub` claim from the JWT’s Authorization header. It shows a serverless Lambda function that returns the generated custom token as a JSON response, highlighting the integration between an external JWT provider and Firebase Authentication. The rendering approach is purely computational, with no visual output.
This example demonstrates a Firebase Cloud Function that retrieves data from a Firestore collection named `my_nice_collection`. It initializes the Firebase Admin SDK using a service account key and configures Firestore with timestamp settings. The function uses the `firebase.collection().get()` API to fetch documents, then processes the result in a promise chain, leaving room for custom data manipulation. The code highlights how serverless functions can integrate with Firestore for backend data operations.
This example shows a serverless webpack configuration for deploying a Node.js application. It demonstrates how to bundle JavaScript code with the Serverless Webpack plugin, targeting AWS Lambda’s Node runtime. The configuration uses `serverless-webpack` to generate entry points, sets the build mode based on local development, and applies `webpack-node-externals` to exclude Node modules. It also ignores the `/opt` directory and outputs CommonJS2 bundles to the `.webpack` folder, with source maps for debugging.
This example demonstrates a serverless AWS Lambda function, defined in `serverless.yml`, that uses the `serverless-webpack` plugin to bundle JavaScript code with webpack. The configuration specifies a Node.js 8.10 runtime and includes a single function, `handler.hello`, which is the entry point for the Lambda. The setup also customizes the packager to rebuild the `grpc` native module for a Linux target with glibc, ensuring compatibility in the AWS environment. The visible code focuses on the deployment and build configuration, not on data visualization or rendering logic.
This visualization is a static snapshot of a Visual Studio Code user's settings and extensions, sourced from a gist by andresmijares. It shows the JSON data from the cloudSettings file (recording the last upload time and extension version) alongside the full list of installed extensions with metadata including publisher, name, and version. The data is presented as an interactive, hierarchical tree or list view, allowing exploration of the extension ecosystem.
This example shows how one AWS Lambda function orchestrates two other Lambda functions to compose a departure response. The `get-departure.js` handler receives query parameters for an `id` and `date`, then invokes `get-flight` and `get-forecast` functions concurrently using the AWS SDK’s `Lambda.invoke` API with `InvocationType: "RequestResponse"`. It uses Bluebird’s `Promise.all` to await both payloads, parses each JSON response, and returns a combined `departure` object containing the forecast and flight data. The code demonstrates a saga-style pattern for coordinating dependent serverless calls.
This example shows the status of a Step Functions execution by extracting the departure forecast from its event history. It queries the execution history using the AWS SDK’s `StepFunctions.getExecutionHistory` method, then filters for `PassStateEntered` events to parse the flight and forecast data embedded in the state input. The handler, written with `co.wrap` and Bluebird promises, returns the execution ARN and the parsed departure object as a JSON response via an API Gateway Lambda trigger.
This example visualizes the structure of an AWS Step Functions state machine definition, showing how parallel branches and sequential states compose a workflow. The rendered diagram maps the YAML configuration from a serverless.yml file, displaying the “Parallel” state that splits into two concurrent tasks—GetFlight and GetForecast—before converging at the FinalState. The visualization uses the Step Functions definition’s explicit StartAt, Type, Next, and End fields to determine node placement and edge routing. It relies on the serverless framework’s stepFunctions configuration to parse the state machine’s branching logic, with resource ARNs referencing Lambda functions for each task.
This example shows an AWS Lambda function that triggers a Step Functions state machine to fetch departure data for a given ID and date. It lists all state machines, filters for one named `GetDepartureMachine`, and starts an execution with the query parameters as JSON input. The code uses the AWS SDK for JavaScript (`aws-sdk`) with `AWS.StepFunctions`, `co` for generator-based control flow, and `Promise` from Bluebird. It returns the execution ARN in an HTTP response, logging “finish” before invoking the callback.
This example demonstrates how a recursive array-flattening function reduces nested arrays of varying depth into a single flat sequence. The code defines a `flatten` function using `Array.reduce` and `Array.concat`, testing it against three increasingly nested inputs—`basic`, `medium`, and `hardCore`—and verifying each result equals `[1,2,3,4,5,6]` with Node’s `assert.deepEqual`. It shows the algorithm’s ability to handle arbitrarily deep nesting by recursively invoking itself on sub-arrays, producing the same output regardless of input complexity. No visualization libraries are used; the example is pure JavaScript logic executed in a runtime environment.
This visualization shows the output of an automated server deployment script, displaying a sequence of Ansible and Fabric task logs. The code captures terminal output from `stdout_lines`, including package installation progress and repeated execution of the `publish_production_view` task. It renders the raw text stream directly, using the captured command history to depict the deployment workflow. The visualization relies on Python logging data from `requirements.txt` and highlights the repetitive nature of the publishing process across multiple executions.
This example shows an order component that manages and displays order data within a React application. The component initializes local state for order information, then updates it via the `setOrderInfo` function, and renders a `ListOrdersComponent` with the current orders and state. It uses React’s `createClass` API and `mapStateToProps` to connect the component to a Redux-style store, while the `create` method demonstrates how to merge new order data with existing state. The code references `Orders` and `ListOrdersComponent` from model and component modules, but does not specify a particular visualization library or rendering backend.
This example shows a React container component that manages order data and passes it to a child list component for rendering. The container uses `React.createClass` to define local state initialized with `getInitialState`, then populates that state via `componentDidMount` with `setOrderInfo`, which reads from the component’s props. It defines a `create` method that clones an order object with `Object.assign` and calls `this.model.create`. The `render` method returns a `<ListOrdersComponent>` receiving the model, state, orders, and create handler. A `mapStateToProps` function selects the `orders` slice from a Redux-style state, though no store connection is shown.
This example demonstrates a dashboard generator that asynchronously retrieves a user’s departure, then uses that result to fetch both current weather and a forecast, ultimately returning all three values together. The code shows a generator function orchestrating these sequential asynchronous calls, while a custom `triggerGenerators` library wraps the generator in a Promise chain, using `generator.next()` and `generator.throw()` to handle success and error recovery. The data sources are implied as abstract APIs returning Promises, with no specific visualization or rendering library involved.
This visualization demonstrates how to launch Google Chrome with security features disabled using a single command-line instruction. It shows the terminal command that opens the browser with the `--disable-web-security` flag and a custom `--user-data-dir` path, which are necessary to bypass same-origin policy restrictions for local development. The example relies on the macOS `open` command and the system shell, rather than any JavaScript libraries or rendering APIs. The code is stored in a plain text file, with no data visualization or graphical output; it serves purely as a technical reference for developers needing to test cross-origin requests.
This example demonstrates the Flyweight design pattern by sharing common task properties across many task objects. The `Task` constructor stores only the unique `name` property directly, while delegating shared attributes like `project`, `priority`, `user`, and `completed` to a `Flyweight` object managed by a `FlyweightFactory`. The factory caches flyweights using a concatenated key of these shared values and exposes a `getCount` method to track the number of distinct flyweights created. The code relies on plain JavaScript object literals and factory closures, with no external visualization libraries.
This example demonstrates a recursive array-flattening utility called `flatty`, which reduces a nested list structure into a single flat array. The function iterates through each item, checking whether it is an array; if so, it recursively applies itself, otherwise it appends the item directly. It uses the native `Array.reduce` and `Array.concat` methods to combine results, with no external libraries. The code is presented as a standalone JavaScript snippet, showing a pure function that takes a list and returns a flattened version without side effects.
This example visualizes a flattened array by rendering its elements as nodes in a force-directed graph. The code defines a recursive `flatten` function that uses `Array.reduce` to collapse nested arrays into a single list, demonstrating a concise functional approach to data transformation. The visualization relies on `d3.forceSimulation` to position the resulting nodes, with the array’s original nesting structure influencing the initial layout. The rendering itself appears to use SVG or Canvas elements, though the gist focuses on the flattening logic rather than the full drawing pipeline. The example highlights how a simple utility function can feed directly into a dynamic simulation.
This example demonstrates the React component lifecycle for both parent and child components, showing the order of lifecycle method calls as a user types into an input field. The code defines a `ParentComponent` with an editable text input and a `ChildComponent` that receives the input text as a prop, logging every lifecycle event—from `getDefaultProps` and `getInitialState` through `componentWillMount`, `render`, `componentDidMount`, and update methods like `shouldComponentUpdate` and `componentDidUpdate`—to the console. It uses React’s `createClass` API and `render` from `react-dom` to mount the parent to the DOM. The visualization is a live console trace, not a graphical chart, exposing the exact sequence of lifecycle hooks during initial mount and prop-driven updates.
The example demonstrates a Sass theme generator that outputs a five-color palette as styled spans, each displaying its corresponding hex value via generated CSS content. The code defines a `themePicker` mixin that takes five color arguments and uses an `@for` loop with `nth()` list indexing to apply backgrounds and pseudo-element text. Sass v3.4.3 and Compass v1.0.1 compile the input into a `#theme1` block with five rules, each targeting a `span:nth-child` selector and its nested `span:after` pseudo-element. The visible data is the color list passed to the mixin, rendered as both swatches and textual labels.
This example demonstrates the visual output of Sass preprocessing on a simple stylesheet, showing how Sass functions transform color values for anchor elements. The code uses Sass v3.4.3 and Compass v1.0.1, applying mixins, color functions like `lighten`, `darken`, `complement`, `desaturate`, and `mix`, and nested selector syntax with `&:hover`. The resulting CSS output reveals the computed hex values, such as `#ff6666` for lightened red and `cyan` for the complement, illustrating how Sass’s built-in color manipulation and nesting rules compile into plain CSS.
This example demonstrates a color theme system generated entirely through Sass, where a single mixin applies background colors to a sequence of five span elements. The output shows how nested loops and list indexing produce a gradient effect, with each span receiving a progressively darker background from #555 to #111. Using Sass v3.4.1 and Compass v1.0.1, the code leverages the `@for` directive and the `nth()` function to iterate through predefined color and background lists. The rendering is purely CSS-based, with no JavaScript libraries or data sources involved.
This example demonstrates how Sass’s `@for` loop and `nth()` function generate five distinct theme classes, each pairing a color from one list with a background from another. The code defines a `theme` mixin that applies the color and background properties, then iterates through two parallel lists to produce CSS rules like `#theme-1` through `#theme-5`. The output shows the resulting styles, where the color and background values swap symmetrically, creating a reverse-gradient effect. Sass v3.4.1 and Compass v1.0.1 are used to compile the SCSS into plain CSS.
This visualization shows how GistBox uses GitHub Gists to organize a variety of content, from reusable code snippets and full algorithms to documentation and personal recipes. The display presents four separate files—a JavaScript console log, a Ruby quicksort implementation, a Markdown keyboard-shortcuts guide, and a cheesecake recipe with images—as individual cards. Each card renders its raw source text directly, highlighting the versatility of Gists as a storage medium. The interface relies on standard browser rendering of HTML and Markdown, with no external libraries, to showcase the plain-text and code formatting capabilities.