Pinkbird Progress Report

Introducing Product Variants, Select Components, and Enhanced Backend Tech

Hey Pinkbird readers,

This week at Pinkbird, I've been all about making your life easier when managing products. Here's the lowdown:

New Product Variant Table

First off, I've added a handy product variant table to each product page. This means you can now see all the different variants a product has. For those scratching their heads, let me break it down: a product, like a shirt, can have options (size, color, etc.). Each combination of these options – like a large red shirt or a small blue one – is a variant. This table helps you keep track of these different combos, each with its own inventory, pricing, and images.

In the above case for a Margaux wine, I configured 1 option called Size with 3 values: 375ml, 750ml, and 1.5L. Given there were 3 possible variants, you can see that the “+ New Variant” button deactivated; we already created all possible variants.

Now let’s say I added a new size, 3L. At that point I can create the variant, setting a price and a status (and soon inventory amounts tracked by location and images).

In the above screenshot see our old friends the radio button and currency inputs from past blog posts. This is the value of building things with good foundations in native web components — we can re-use them throughout the application making development faster and the end-user experience more intuitive and consistent.

Select Component for Easy Options

Speaking of components, I've also created a select component that lets you choose from various options easily. This makes managing these variants a breeze, whether you're updating stock levels or tweaking prices.

You can see an example here:

Tech Side of Things: A New Approach

On the tech front, I waved goodbye to Tygo, which used to generate TypeScript types from my Go types on the backend. It’s a great tool, but I ran into some tough-to-track-down bugs caused by data from the backend not being consistent with what the front-end expected.

I'm now trying a different tack: generating classes with runtime type-checking instead of just TypeScript interfaces. This might sound geeky, but it's a big deal. It means catching bugs right at the API boundaries, not miles down the code road. In my experience, most bugs in a TypeScript codebase come from types not being what you expected. Catching them early is a game-changer for debugging.

Here's a sneak peek at the API doing this magic:

export const get = <T>({                                                        
        url,                                                                    
        data,                                                                   
        type,                                                                   
}: {                                                                            
        url: string                                                             
        data?: Record<string, unknown>                                                                                     
        type: new (any) => T                                                    
}): Promise<T> => {                                                                                                                             
        return fetch(url, {                                                     
                method: "GET",                                                  
                headers: {                                                      
                        "Content-Type": "application/json",                     
                        Accept: "application/json",                             
                        "X-CSRF-Token": csrfToken(),                            
                },                                                              
        })                                                                      
                .then(checkStatus)                                              
                .then((resp) => resp.json())                                    
                .then((json) => new type(json))                                 
                .then((t) => {                                                  
                        const props = Object.getOwnPropertyNames(t)             
                        for (const prop of props) {                                              
                                if (t[prop] === undefined) {                    
                                        throw new Error(`undefined ${prop} on ${type.name}`)
                                }                                               
                        }                                                       
                        return t                                                
                })                                                              
}

The code generation itself is a bit hacky—but hey—it works. It's making my life at Pinkbird a lot easier, and I hope it does the same for you.

That's all for now. Stay tuned for more updates!

Evan

Weekly Wine Recommendation

Experience the 2020 Fond Croze Romanais, a pure Grenache delight. With its harmonious blend of fruity and spicy notes, it's perfect for intimate gatherings or as a sophisticated choice for your guests.