Gist 16d0e6050f60256517db942d1fe29703

100%

Gist 16d0e6050f60256517db942d1fe29703

✓ Published0🌍 Public

Last edited Sep 11, 2018

Created on Sep 7, 2018

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

GGolodhros

70% match

Loading thumbnail…

parsing css

This example demonstrates how to fetch and log a CSV file containing CSS named colors and their corresponding hexadecimal values. It uses the Fetch API to retrieve the text data from a GitHub gist URL asynchronously. The code employs a concise async/await pattern within a `fetchText` function, then logs the raw CSV content to the browser console. The React framework is referenced in the metadata, though the provided HTML page itself is a minimal vanilla JavaScript implementation.

Ccimadomo

68% match

Loading thumbnail…

fetch from my gist

This example demonstrates a minimal HTML page that fetches and logs a CSV file of CSS named colors from a GitHub gist. The page renders a large “Hello HTML!” message styled with CSS, while the fetchData.js script uses the Fetch API to retrieve the raw text data from the provided URL and output it to the console. It illustrates a basic pattern of combining JavaScript’s async/await with the browser’s native fetch for loading external data, without any visualization framework beyond plain HTML, CSS, and JavaScript.

AAlejandro Muñoz

68% match

Loading thumbnail…

Fetch CSV data

This example demonstrates fetching a remote CSV file containing CSS color data and logging its raw text content to the browser console. The code uses the Fetch API to request the file from a GitHub Gist URL, then parses the response as text via the `res.text()` method. No visualization is rendered; instead, it serves as a minimal foundation for loading external tabular data, which could later be processed or visualized using libraries like D3. The bare-bones HTML structure includes empty style and script blocks, with JavaScript handling the asynchronous data retrieval.

MMd Alif

67% match

Loading thumbnail…

CssNamedColors Viz

This example fetches a CSV file of CSS named colors from a GitHub gist and logs its contents to the browser console. It uses the Fetch API with an asynchronous `fetchText` helper to retrieve the raw text data. The visualization itself is not yet rendered, as the current code only demonstrates the data-loading step. It is built with plain HTML and JavaScript, without any external libraries or frameworks beyond the browser’s native fetch.

Cco

66% match

Loading thumbnail…

Loading and Parsing data

This example demonstrates how to fetch and log a CSV file containing CSS color data from a GitHub gist, showing the raw text output in the browser console. The code uses the JavaScript `fetch` API to asynchronously retrieve the remote resource, then calls `response.text()` to parse the response body as a string. The `url` variable points to a specific gist URL hosting the CSSColors.csv dataset. Built with a minimal HTML structure and embedded script, the visualization focuses on the data loading process rather than any visual representation.

JJohn H

66% match

Loading thumbnail…

Fetching data

This example demonstrates asynchronous data fetching in the browser, retrieving a CSV file of CSS named colors from a GitHub gist and logging its contents to the console. It uses the Fetch API’s `fetch()` method and the response object’s `text()` method within an async/await function, followed by a `.then()` promise chain to handle the resolved text. The code shows a minimal setup with no visual output, focusing purely on the network request and text extraction workflow.

LLove Wessman

66% match

Loading thumbnail…

Fetch

This example demonstrates how to fetch remote data in a web browser using the Fetch API. The page loads a CSV file containing named CSS colors from a GitHub gist, and the code makes an asynchronous request to that URL within an HTML script tag. The visualization does not render any chart or graphical output; it simply initiates the data retrieval process, highlighting the foundational step of acquiring external datasets for subsequent analysis or display.

PPhilip Kaminski

66% match