Imagine a digital chameleon: a file that can be transformed by simply renaming it into an HTML page, a ZIP archive containing that same page, or a PNG image. Discover an innovative approach to sharing and storing web content, and learn how to create these polyglot files in JavaScript!
You can view the web presentation in:
Press F1 during the presentation to see the keyboard shortcuts.
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 view the examples via an HTTP server.
Here is the resulting self-extracting HTML file: demo.png.zip.html
This file and the presentation files are compatible with:
.zip and view it with ZIP Manager.png and view it with PNG file chunk inpectorIf you are intrigued or more curious, you can also view it on HexEd.it.
The presentation explains how to generate this file and the technical challenges involved.
The image displayed at the center of the page demo.png.zip.html when viewed in HTML is the page itself, but interpreted as a PNG file (cf. the <img src="#" ...> tag).
unzip to get around this issue.This presentation is dedicated to my biggest supporter on this project. Many thanks @ljonathanl, we miss your enthusiasm and creativity.