Gist 467901440093a9904541

100%

Gist 467901440093a9904541

✓ Published0🌍 Public

Last edited Oct 11, 2015

Created on Oct 11, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

GGolodhros

72% 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

63% 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

63% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that fetches and logs a CSV file of CSS named colors from a GitHub gist. It uses the Fetch API in an async/await pattern to retrieve the text and output it to the browser console. The page also includes a large styled greeting message via CSS, while the JavaScript handles the data request. The code shows both an active async/await implementation and a commented-out alternative using promise chaining.

Nnncis

62% match

Loading thumbnail…

Gist 23705f481029d7e1cb22973540188d19

This snippet demonstrates a WordPress performance optimization technique by filtering the `style_loader_tag` hook to modify how stylesheet links are rendered. It shows the `add_rel_preload` function, which replaces standard `<link>` tags with preload directives that include an `onload` handler to swap `rel='preload'` to `rel='stylesheet'`, enabling asynchronous CSS loading. The code uses WordPress PHP APIs (`add_filter`, `is_admin`) and outputs a heredoc string with the HTML. It explicitly avoids altering output in the admin panel, targeting front-end performance only.

KKopylovVitalik

61% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fetching a CSV file containing CSS named colors and their hexadecimal values from a GitHub Gist, then logging the raw text to the console. The code uses the JavaScript `fetch` API to asynchronously retrieve the remote resource, with a custom `fetchText` helper that extracts the response body as plain text. The visualization does not currently render any graphical output; instead, it serves as a starter template for data acquisition, showing how to load tabular data for future processing or display.

PPiotr Paszek

61% match

Loading thumbnail…

loading and parsing for csv

This example demonstrates loading and parsing a CSV file containing CSS named colors. It fetches the data from a GitHub gist URL using the Fetch API, then logs the raw text content to the browser console via `fetchText` and `response.text()`. The page displays a CSS-styled layout with an oversized font size, but the core functionality focuses on asynchronous data retrieval and text conversion. The code uses vanilla JavaScript with `async/await` and promises, without any external libraries.

YYu Liu

61% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates how to fetch and log data from an external CSV file containing CSS named colors. It uses the browser’s native `fetch` API and `async/await` to asynchronously retrieve the text from a GitHub gist URL, then outputs the raw CSV content to the console via `console.log`. The page is minimal, with no visual rendering or DOM manipulation, and serves as a starting point for building data-driven visualizations in plain HTML and JavaScript.

Bblueyjuice

61% match