The sun never sets on 5pm - Part 3

MVPolish

Manifest

Part 0 - Introduction
Part 1 - Failing Fast (Building with prompts)
Part 2 - MVP and Deployments
Part 3 - MVPolish *You are Here 💁‍♀️
Part 4 - So what.

Procrastination is important (a quick tangent)

Procrastination, oddly enough, serves as my guiding compass. Many see it as a vice, an impediment to productivity, but for me, it's an indicator, a sign that I'm on the brink of something truly meaningful. The gravitational pull towards distraction isn’t a sign of laziness, but a manifestation of the underlying tension of creation. When that urge to delay kicks in, it’s often because I'm subconsciously recognizing the magnitude of what lies ahead.

The initial 80% of a task can be deceiving. It gives a false sense of accomplishment, luring one into thinking that the bulk of the work is done. But that’s the easy part. It’s the linear path, the expected journey. The final 20%? That’s where the real magic happens. That’s where the nuances come alive, the finesse is applied, and the true essence of the creation is realized. And that's terrifying. Because it demands vulnerability, authenticity, and a willingness to confront potential failure head-on.

Procrastination, in this light, isn't a weakness; it’s an emotional barometer. It measures the depth of investment in a project. When I feel that familiar itch to defer, to delay, to put off, it's my internal alarm sounding off, reminding me that I'm on the cusp of birthing something genuinely remarkable.

So, instead of chastising myself for these moments of hesitancy, I've learned to embrace them. I take a step back, reflect, and understand the root of the resistance. Is it fear of criticism? The daunting nature of perfection? Or the weight of expectation? Once identified, it becomes easier to navigate through the fog of uncertainty.

In a world that often measures worth by worthless relentless productivity, I’ve found solace in understanding my patterns of procrastination. It’s become a beacon, illuminating the projects and pursuits that truly matter. And in that clarity, I find the strength to push past the inertia and dive headfirst into that thrilling, daunting, and transformative final stretch.

The final stretch?

If you haven’t accidentally discovered it already from the numerous hints I’ve been dropping this website is called FindYour5pm.com and below is the final(?) version. It’s time for me to cheat, one final time.

Remember in Part 0 where I said “Rounding out the features is a slick e-commerce integration, offering branded merchandise. Drop-shipped with minimal fuss and a modest markup, these trinkets and keepsakes add a physical touch to the digital experience, and offer a way to keep the lights on.” Well that’s finally here.

To achieve this marvelous design - I paid a guy on fiverr.com a bit more than $5AUD to get me setup. ChatGPT wasn’t cutting it. I could never get it to do the layout properly, or work with multiple files containing different parts of the code.

Sometimes it felt like this was because I couldn’t keep enough code in the available context space; sometimes I felt like it just wasn’t up to the task. What I got from my new friend on Fiverr was basically a website template with a full width map and what I assume is the right folder structure and layout for a front end.

I’ve spent the last 15 years working on backend infrastructure, both on-premise and in the AWS Cloud and have entirely ignored everything there is to know about front-end. I’ve found my talents best placed in the specialities of architecture, networking, containers and event driven systems. Also I bought a logo - sue me.

That logo? It might sound trivial, but it's a symbol. A symbol of my willingness to venture outside my comfort zone. It's not just about aesthetics; it's about embracing change, adapting, and realizing that even a backend guy can appreciate the beauty of a well-designed interface. So here's to new beginnings, to taking leaps, and to the incredible Fiverr talents that help bridge the gaps in our knowledge.

Now back to the story.

What’s Next?

The broad strokes of my architecture are completed. I have 2 primary tasks left. Put a bit of work into my new frontend and unfortunately add some more backend services.

“What backend service is missing?” You might ask - and rightly so.

After all, our PoC had every component in the “final” state of the website, but not as pretty, functional or inspiring as the quality you come to expect from me. If you remember from Part 2 - I can’t use OpenStreet maps here. It’s against the ToS and it’s going to rate-limit my users. It’s time to evaluate other map providers:

• Self-Hosted OpenStreet Maps

• Google Maps - Tiles API

• Amazon Location Service

OpenStreet Maps helpfully provides a list of commercial tile servers that I can use! https://wiki.openstreetmap.org/wiki/Tile_servers - Lets evaluate them!

To use these tile servers, I would need to host an always on backend that contained the entire planet worth of tiles. This sounds really fun!

I have done this in the past for other projects that I won’t get into here and the problem with this system is that I have to maintain all updates to the tiles, and I have to host an always on service regardless of how many users find my page. This will significantly increase my costs and not allow my website to scale dynamically in price with user volume.

Instead, I want someone else to host this non-trivial component for me. Thankfully there are numerous Raster and Vector Tile providers that do just this!

https://wiki.openstreetmap.org/wiki/Raster_tile_providers

https://wiki.openstreetmap.org/wiki/Vector_tiles#Providers

They all cost money. I’m ok with paying; however, most of the plans are not pay-as-you-go, but instead use an upfront plan with X number of tiles available to consume in a month. I don’t want to keep track of consumed tiles and work out how to update my plan accordingly and the prices are kinda expensive.

So what about Google Maps Tiles API?
This is pay as you go pricing!

Google Maps Tiles API is priced at $0.60 USD per 1000 tiles (up to 1,000,000 tiles) per month. and then $0.48 USD per 1000 tiles from 1,000,001 to 5,000,000 tiles. (Before becoming famous from writing this blog post I used about 128,000 tiles per month) 1,000,000 tiles would cost $0.60 * 1,000 = $600USD/month. (128,000 tiles would cost $76/month)

That’s looking better - since right now hardly anyone uses this site, and maybe I’ll have a good conversion rate on my silly designs I sell on the site - this will very much be my biggest cost!

I work at AWS. Let’s checkout Amazon Location Service then?

If I use a Commercial Data provider, I’ll pay $0.04 USD per 1000 tiles.

Updating my math this becomes:

$40 per million tiles and $5.12 for 128k tiles! Sold. (15x cheaper than Google Maps)

I also get a choice of ESRI, HERE, OpenStreetMaps, and GrabMaps (among others) and I can deploy this in my infrastructure as code templates. This is by far the cheapest and easiest, pay-as you go solution.

As of this writing(2023-11-02) there is partial support for Amazon Location Services in Cloudformation. I am able to deploy a map service but cannot deploy an API key for the service.

I’ve discovered a way (and as far as I’m concerned this “innovation” is well outside the scope of asking ChatGPT for help) to put Amazon Location Service in each relevant AWS region and direct a user to the closet region while injecting the correct API key for that region into the request without putting the API key in the front end javascript. This will get its own blog post later(if it’s later enough, this is now a link!) as I hope I can help others with this task since it’s off topic for this post. Here’s a glimpse of what that looks like:

I ask ChatGPT to help me implement this. Amazon Location services has multiple different authentication methods. You can (launched after GPT4’s knowledge cut off) use an API Key, IAM or Cognito to provide auth. We’re going to be using an API Key.

Yeah, you can’t do imports on a client side javascript package (without using something like Browserify to do 🪄✨magic✨) as far as I can tell at least.

Yeah this is not working - we already lost the context that I can’t really do this import in my client side javascript. This is very frustrating and an area where an LLM trained on my code base would really help me out. Too bad this isn’t a thing. Imagine true pair-programming with an AI that has all the context of your repo. https://aws.amazon.com/codewhisperer/customize/

After many back and forth’s and lots of trial and error at the request of ChatGPT, I end up with this error to troubleshoot.

What I’m seeing is a blank map with no tiles. There is a sense of motion in void as we pan and zoom from one location to another; however, all requests to the tile endpoint are getting error messages.

Vector and Raster maps. Let’s talk about the differences quickly.

Raster maps are composed of pixels, each representing a specific geographic area, much like a digital photograph. These maps are essentially images where each pixel has a defined geographical position. They are best suited for intricate visual representations, such as satellite imagery or detailed terrain maps. Their main limitation is that as you zoom in, the image can become pixelated or require additional tiles at higher resolutions.

In contrast, vector maps are made up of points, lines, and polygons that represent real-world features like roads, rivers, and boundaries. The data in vector maps is mathematically defined, allowing for smooth scaling and crisp representations at any zoom level. These maps are often more interactive, as individual elements can be easily highlighted, colored, or labeled. However, they may require more computational power to render, especially when displaying complex data.

While raster maps offer a fixed visual, vector maps are more dynamic and customizable, making them ideal for interactive web applications or when data overlay and manipulation are required.

Choosing between the two often depends on the application's needs: the level of detail required, the degree of interactivity, and the available computational resources. For this project I’m using a Vector map since its fewer map tiles and in my opinion fits into the design language of the page more eloquently.

After some back and forth with ChatGPT I we end up using both MapLibreGL and Leaflet together to handle the map. Here is what that looks like:

I then work through a few minor issues with the integration of MapLibre GL and Leaflet (taking maybe 10-15 messages) and I’m finally done with migrating the map to Amazon Location Service.

Yet another task that should have taken less than half this much time had I done it alone.

E-Commerce

If you remember back to Part 0:

Rounding out the features is a slick e-commerce integration, offering branded merchandise. Drop-shipped with minimal fuss and a modest markup, these trinkets and keepsakes add a physical touch to the digital experience, and offer a way to keep the lights on. It's an inviting blend of education, entertainment, and commerce - a small slice of the globe served up on a silver web platter, with a side of fun.

Well right now all I have is a grid of static pictures with a box for text under them. That is neither slick nor integrated. Lets polish.

Together, ChatGPT and I go thru the same process as before. But let's skip the technical back-and-forth this time?

I have a few products on Redbubble - I want to show 6 random products on my page, this is what the HTML currently looks like - write a javascript function that puts them here - help me make a Lambda function that reads a json file of all the products and returns it via an API-Gateway endpoint - make the javascript function call the endpoint and show the 6 products that are returned.

Cool it works - it took longer than I wanted - it needed coddling - and I made myself frustrated for the purpose of education, one, more, time. Sound Familiar?

What's important is the result: a living, breathing front-end that now cycles through products with a vigor that static images could never achieve. The once bland grid has evolved into a carousel of creativity, a vibrant display that beckons the onlooker with the promise of novelty and excitement site-supporting-revenue with each visitor.

I, on the other hand, am happy. The satisfaction of seeing this in action is twofold: the visible, tangible product that speaks to the efforts of development shouting at a computer for months on end, and the invisible, immeasurable growth frustration that comes from tackling a challenge head-on. This part won't be seen by the users, but it doesn't diminish its value to me.

If anything, it's the secret ingredient that makes the visible elements that much more compelling.

As we near the end of this blog series, I can't help but reflect on the journey. From the humble beginnings of an idea to the intricate web of services that now comprise FindYour5pm.com, it's been a trek through unknown territories, through valleys of doubt, and over peaks of achievement and I’m tired of yelling at the machine.

The next and final installment, will pivot from the 'how' and 'why' and into the “so what?”

But for now, allow yourself a moment of procrastination — it might just lead you to your next big idea.

Manifest

Part 0 - Introduction
Part 1 - Failing Fast (Building with prompts)
Part 2 - MVP and Deployments
Part 3 - MVPolish *You are Here 💁‍♀️
Part 4 - So what.