Introduction
Introducing polyglot files – where HTML, ZIP, and PNG collide like a badly merged pull request. Sure, the resulting HTML might look like binary soup, but who needs clarity when you can have multi-format marvels? Discover an amalgam of web development magic and file format chaos, all wrapped up in an intriguing mix!
This repository contains a step-by-step presentation for RennesJS, showing how to create HTML/ZIP/PNG polyglot files in JavaScript.
The presentation provides a didactic explanation of how (universal) self-extracting files work in SingleFile.
Here is the resulting self-extracting HTML file: demo.png.zip.html
This file is compatible with:
HTML (extracted page displayed in no-quirks mode)
ZIP (contains the displayed page and its resources) - view it with ZIP Manager
PNG - view it with PNG file chunk inpector
Fun fact
The image displayed at the center of the page when viewed in HTML is the page itself, but interpreted as a PNG file.
Presentation
You can view the web presentation in:
Installation
If you are using a Chromium-based or a WebKit-based browser to view the first examples from the presentation, you should install the extension from the zip file located in util/web-extension in order to add the support of file:// URIs in the Fetch API. Alternatively, you can open the examples via an HTTP server.
Known issues