Skip to main content
SimilarExport ZIP
100%

Gist 2d272134b57b02eb8cdd0c5904249591

✓ Published0🌍 Public
NN0taN3rd
Last edited Jan 26, 2017
Created on Jan 26, 2017

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

AI-generated description

Similar vizzes

Loading thumbnail…

Still Drinking Gin And Juice

This example plays a trick on the Wayback Machine by loading a hidden iframe that captures the archived page’s React and ReactDOM libraries, then re-mounting a new React component inside that iframe. The visualization itself is not yet defined in the provided snippet, but the code sets up a full-screen canvas-driven animation framework using React and the browser’s native canvas and animation APIs. Images of frogs and a banner are fetched from the Internet Archive’s geocities.com captures, hinting at a playful, retro-themed visual collage. The page also manipulates browser history to disguise its origin and hides the archive’s toolbar.

NN0taN3rd
71% match
Loading thumbnail…

CS 891 Web Archiving Seminar

This visualization demonstrates the process of web archiving by showing the WARC file records produced when using `wget` to archive two websites: `http://example.com` and the React Router documentation. The code uses `wget` with extensive arguments including `--mirror`, `--warc-cdx`, and `--page-requisites` to capture complete page snapshots. The example displays the resulting WARC file structure, containing request, response, metadata, and resource records, along with a shell script that orchestrates the archiving workflow and manages the Wayback Machine collections.

NN0taN3rd
69% match
Loading thumbnail…

View CNN.com by iframe

This example demonstrates a historical snapshot of CNN.com’s homepage replayed inside a web iframe, using the pywb web-archiving framework. The visualization shows how the original page’s JavaScript-driven content, including lazy-loaded zones and carousels, is reconstructed from archived assets. The code references CNN’s custom inline scripts—such as `CNN.Zones`, `CNN.contentModel`, and `pageReveal`—alongside the iframe’s `seamless` attribute. The pywb replay uses `wb.js`, `wb_frame.js`, and `default_banner.js` to embed the captured page, with the source being a captured timestamp from the archive.

NN0taN3rd
69% match
Loading thumbnail…

pywb proxy mods

This visualization shows the internal logic of the pywb web archiving proxy, displaying how HTML, CSS, and JavaScript content is rewritten during replay. The animation illustrates the code paths for rewriting HTML tags and attributes via the `HTMLRewriterMixin`, and content sanitization through `RewriteContent` using regex patterns for meta refresh and charset detection. The wombat.js script implements client-side URL rewriting with a JavaScript state machine that handles absolute, relative, and proxy-mode URL transformations. The gist demonstrates the interaction between these Python and JavaScript modules in the pywb rewriting pipeline, emphasizing the regex-based parsing and URL manipulation strategies.

NN0taN3rd
68% match
Loading thumbnail…

Gist 7233762

This example shows a JavaScript application skeleton converted to use AJAX, with the updated files provided as a gist. The code demonstrates an asynchronous data-loading pattern, fetching external resources via `XMLHttpRequest` or a similar AJAX mechanism. It relies on standard browser APIs for handling responses and updating the page content dynamically. The visualization aspect is minimal, focusing instead on the structural change from a static app to one that retrieves data on demand. The author lists the modified files and includes instructions for downloading the original skeleton, making the gist a practical exercise in refactoring for asynchronous behavior.

EElaineYu
68% match
Loading thumbnail…

2017-07-25: Swimming In A Ocean Of JavaScript. Using Nodejs, Electron And Chrome To Preserve The Web

This example demonstrates a Node.js toolkit for web archiving, showing how to parse, stream, and generate WARC and CDXJ files to preserve web content. It uses the `cdxj` library to read CDXJ indexes asynchronously, the `node-warc` parser with event listeners for streaming WARC records, and a configuration object for the `squid` crawler that controls Chrome via its WebSocket API. The code highlights handling HTTP/2 limitations in archives and supports features like page-same-domain crawling and auto-scrolling.

NN0taN3rd
66% match
Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu
66% match
Loading thumbnail…

Internet Archive Incorrectly Wrapping Valid HTML

This example demonstrates how the Internet Archive’s Wayback Machine inserts its banner and analytics scripts into an archived page, wrapping a Polymer web component’s `<dom-module>` and its script in unexpected ways. The archived HTML shows the original valid structure disrupted by added script tags and a `textarea` element containing code, breaking the component’s expected parsing. It uses Polymer’s element registration and observers, plus XMLHttpRequest for fetching data, highlighting the mismatch between archived and original HTML.

NN0taN3rd
65% match