What I Learned from Making a Custom Gift Solution (Ongoing)

In this article, I will share what I’ve learned while building a custom gift card solution and explain why I chose certain approaches. Think of it as a collection of thoughts. Hopefully, that can help you learn one or two things along the way.

** This article will keep updating untill I finish building the custom gift card solution MVP **

Defining the core values

For this custom gift solution project, I would like to keep it as simple as possible. I defined core values for the project, which may evolve over time but serve as a guideline for choosing the right approach. As we develop new projects, it's easy to accumulate ideas and introduce complexity. This can lead us away from the core values we aim to deliver to our customers.

Here are core values that I defined.

Simple and Easy to use, and self-explanatory app
Controlled complexity
Minimal Tool Use and separation of purposes

Deciding the MVP

In the gift card customization, there are two main parts: one allows users to create a gift card based on a template, and the other enables template designers to create and customize templates.

I’ll focus on building the template creation feature first.

To keep the template designing process simple, we only need a background image—or we can call it a baseline image—and a customizable position pin with selectable different graphics.

This is the output I planned to create.

The first issue that I encountered.

I wanted to get the original width and height of an image and render the canvas as the same size. However, when I attempted with createObjectURL, I ran into the following error:

PixiJS Warning: [Assets] blob:http://localhost:5001/f1b6cd64-d621-4a9a-b5fb-d196b85cafa3 could not be loaded as we don't know how to parse it, ensure the correct parser has been added.

The documentation states that for unknown URLs without an extension, a loader must be added, and the image type specified to load it correctly. Despite adding both the loader and specifying the image type, the issue remains unresolved.



document.querySelector("#file").addEventListener("change", (e) => {
    const file = e.target.files[0]

    const imageURL = URL.createObjectURL(file)
    const image = new Image()
    image.src = imageURL

    image.onload = () => {
        // ....Pixi.js application code initalize code
        
        const bgImage = URL.createObjectURL(file)

				await PIXI.Assets.load({
				    src: bgImage, 
				    loader: 'loadTexture',
				    format: 'png'
				});
				
				// ...Some extra code for App
    }
})

After that, I tried using a dataURL. This time, it worked perfectly, and there was no need to add a loader or specify the image type. Pixi.js automatically parsed the data URL and selected the appropriate loader for me.

document.querySelector("#file").addEventListener("change", (e) => {
    const file = e.target.files[0]

    const reader = new FileReader(); 
    
    reader.onload = function(e) {
        const backgroundImage = e.target.result

        const image = new Image()        

        image.onload = () => {			
        
			      // ....Pixi.js application code initalize code			
			      
						await PIXI.Assets.load({
						    src: bgImage, 
						    loader: 'loadTexture',
						    format: 'png'
						});
						
					   // ...Some extra code for App
        }

        image.src = backgroundImage
    }

    reader.readAsDataURL(file)
})

This issue cost me some time, so to help other developers avoid the same problem.

Avoid using createObjectURL to load assets in Pixi.js. Instead, use a dataURL.

Installation of DevTools

PIXI DevTools have been extremely helpful, allowing me to avoid constantly checking and testing different properties. They provide real-time feedback whenever you change properties in the dev tools.

Additionally, installing them is simple and only requires two steps:

Install the DevTools browser extension.
Initialize it using this command.

window.__PIXI_DEVTOOLS__ = {
        app
};