Concept

It works like a fractal figure eight, and depends on personal perspective.

Drawn to the Light

AZ Twilight is a project born out of something I love: sunrises, sunsets, and this beautiful landscape.

twi·light
/ˈtwīˌlīt/ noun
1. the soft glowing light from the sky when the sun is below the horizon, caused by the refraction and scattering of the sun's rays from the atmosphere. To me, the twilight represents a special part of the day; the colors, warmth, and glow remind me to appreciate the cycle of light, beginning and ending ceremoniously each day.

The concept started with a folder of pictures, tucked away on my phone, and mostly taken from the perspective of my truck's dashboard or out a nearby window. As the skies continued to show me different combinations of colors, hues, and radiance, I began to seek out better vantage points and scheduling time to witness this breathtaking spectacle. To my surprise, some of the images turned out spectacular!

I am not big on social media personally, so those photos nearly stayed tucked away on my phone forever. I never considered building a website like this until I came across CanvasPop's Photo Printing API, which seemed like a really interesting way to integrate displaying and printing the photos. I remember my best friend, Tim, showing me a memorial image he had printed on canvas from a photo years before, something that was unheard of at that time. I want to give people the ability to do the same with these beautiful images!

Next up, it was time to build a website. This was something I had not done for quite some time, but I really enjoy writing code for various languages and figured this would be a great refresher. It all started with Wordpress, but the more I dug into the templates and extensions, I realized that I would rather modify the code than have a pre-set package do it for me. As I dove into the templating system, full of unfamiliar functions and interesting mechanics, I realized this was not going to work for me.

Then came the HTML5UP inspired design, taking a simpler approach by manually coding the few pages of my website into one of the templates. The designs are based on a lightweight framework called Skel, which helped me put together an amazing website without much effort. While it looked great, there were some functionality issues, especially as I tried to use the Poptrox JQuery Lightbox Gallery, which had conflicting resources with the CanvasPop API and pop-up store.

The CanvasPop support team came to the rescue in identifying the issue, but I was not willing to rewrite code on either side to try and make it work, it was way too complex. Plus, my load times were scoring 40-60% between Google PageSpeed Insights, pingdom, and others. It was too slow, and optimizing it would be a lot of extra work as well.

So, now what? I scrapped all of my design ideas from earlier and began looking at trends. I was aware of Google's AMP project, I like open-source things, and I jumped in feet first after discovering AMP by Example and AMP Start. It was quite the learning curve, but once I had the first design up, I was already scoring 90%+ on load times. Things were moving much faster, and the built-in libraries were enough to accomplish (nearly*) everything I needed.

- Jason Schrader // WhoaBuddy Designs

*The next challenge is connecting the AMP CORS JSON request with the CanvasPop API, but what's life without a challenge?

Back to Home