Polaroids on the web with Web Components

Polaroidbilder på webben med Web Components

TL;DR The Web Component instant-picture is publicly available on Github for free and licensed under the GNU General Public License 3.0. Web Component instant-picture är publikt och fritt tillgänglig på Github. Den är licensierad under GNU General Public License 3.0.

I'm a big fan of instant photography, the combination of something physical and the non-perfect nature of analog film in a digital world helps to keep oneself grounded. Lately I was interested in trying to translate that physical format onto the web. Many of the existing CSS styles for emulating polaroid photograps where however quite bad. Most of them just added a border on the image with a larger tab on the bottom, keeping the dimention of the original and in no way resembeling the Polaroid trademark 1:1 dimentions.

Jag är ett stort fan av direktfilms fotografering, kombinationen av något fysiskt och det operfekta resultatet av analog film hjälper en att hålla fötterna på jorden i en digital värld. Nyligen har jag varit intresserad av att försöka översätta de fysiska formatet till webben. Många av de existerande CSS lösningarna för att emulera polaroidbilder jag hittade var dock ganska dåliga. De flesta la endast till en kant runt bilden med en större bit undertill och behöll bildens ursprungliga dimensioner, vilket gjorde att de på inget sätt påminnde om Polaroids trademark 1:1 storlek.

My first thought was to implement a stylesheet with classes to apply to a <div>, <img> and <p> trio. But as I never had created or used a web component before, I thought it would be interesting to try to implement one. A web component is a fitting choice in this case. The style is not dependent on the rest of the document and a typeface needs to be loaded and managed. By creating a custom element, the interface for the end user also becomes cleaner and easier to use. Styles can target <instant-picture> instead of a generic <div>. Cleaner attributes can be used instead of cluttering data-* ones.

Min första tanke var att implementera ett stilmall med klasser att applicera på en <div>, <img> och <p> trio. Men eftersom jag aldrig har varken skapat eller använt en webb-komponent förut, tänkte jag det skulle vara intressant att implementera en. En webb-komponent är en bra val i det fallet, då stilmallen är inte beroende på resten av dokumentet och ett typsnitt behöver laddas och hanteras. Genom att skapa ett custom element blir gränssnittet för slutanvändaren också enklare att använda. Stilmallar kan precisera <instant-picture> iställer för en generisk <div>. Tydligare attribut kan användas istället för otydliga data-*.

A balloon in the sky!

En luftballong!

Use

Exempel

To create a instant picture like the one above, first include a declaration to the javascript module file. By declaring the script tag attribute type=module the javscript is defered from blocking initial rendering. The module will also only run once, even if it is declared multiple times in the document:

För att skapa en polaroidbild likt den ovan, först inkludera en deklaration till javascript-modul filen. Genom att deklarera script-taggens attribut type=module, kommer javascriptet inte blockera initial rendering. Modulen vill också endast köras en gång, även fast den är deklarerad flera gånger i dokumentet:

<script type=module src=/instant-picture.style.font.mjs></script>

To then use the web component in a document a declaration as following, containing a image element (or other element representing the image area) and optionaly a element representing the text area (marked with attribute slot=text) are needed:

För att sedan använda webb-komponenten i ett dokument behövs följande deklaration, innehållande ett bild-element (eller ett annat element representerande bildens area) och eventuellt ett frivilligt text-element för text under bilden (med attributet slot=text):

<instant-picture type=i-type>
    <img src=balloon.webp alt="Hot air balloon""Varmluftsballong">
    <p slot=text>A balloon in the sky!En luftballong!</p>
</instant-picture>

The web component will slot the image and paragraph element into its shadow DOM, and by declaring the attribute type=i-type it will look like a Polaroid i-type photograph. The web component supports all the common instant formats: Polaroid i-type, 600, sx-70 and go. Instax mini, square and wide.

Webb-komponenten kommer länka in bild- och text-elementet i dess shadow DOM, och genom att sätta attributet type=i-type så kommer det se ut som en Polaroid i-type bild. Webb-komponenten stödjer alla de vanligaste bildformaten: Polaroid i-type, 600, sx-70 och go. Instax mini, square och wide.

Source code

Källkod

The Web Component is publicly available on Github and licensed under the GNU General Public License 3.0. In the repository the README.md contains a detailed API and use instructions.

Webb-komponenten är publikt tillgänglig på Github och licensierad under GNU General Public License 3.0. I git-arkivet finns en README.md som innehåller detaljerade instruktioner samt API.

Two flavors of the component is provided. One at ~69KB filesize with the bundled typeface Just Another Hand and one without any typeface at ~4.5KB in filesize.

Två varianter finns tillgängliga. Den första på ~69KB filstorlek innehåller typsnittet Just Another Hand, medans den andra inte innehåller något typsnitt och har en filstorlek på ~4,5KB.