Lambda is hands down my favorite AWS service. The capability to run serverless functions on demand and at scale is very powerful. A more recent capability of Lambda is that it can be run in response to certain Cloud Front events. AWS Cloud Front is a content delivery network. This integration of Lambda is referred to as Lambda Edge. You can use Lambda Edge the same way that you use normal Lambda. However, as a trigger you select Cloud Front and select the associated distribution and events to use as triggers.
In January and February of 2019 a phenomenon called a polar vortex enveloped most of the midwestern United States. This polar vortex was linked to record low temperatures for a sustained period of a week or two and turbulent winter weather. Many portions of the state of Michigan also experienced significant, relentless, snowfall during this same time period. This combination of low temperatures and snowfall created deadly road conditions. Road crews typically apply large concentrations of salt to prevent ice buildup. However, with temperatures near or below zero degrees road salt does not work.
Amazon S3 has a neat and very affordable feature that allows users to host a static website from inside an S3 bucket. In 2017, I switched hosting of this website to the S3 bucket method. It reduced hosting costs per year significantly. However, there are a few catches when hosting a website out of an S3 bucket. The primary catch we will discuss today involves an iframe that is placed around content when not using the absolute URL to the Amazon bucket.
For example, this websites' absolute url within the Amazon system is:
http://technogumbo.com.s3-website-us-east-1.amazonaws.com
Utilizing bucket and dns configurations, a user is able to load this content from their registered domain. When doing this, Amazon must load the content at the absolute url within an iframe.
The main website and the CSS associated with it were originally created before the iPad1 launched! It was before the responsive age we now live in. As a result; I did a few modifications when switching to the static S3 bucket configuration. However, the presence of the iFrame has been constantly breaking responsive display for this site since 2017. The resume section was created after the main site, so that has remained responsive despite the iframe.
Recently, I took the time to dig into the problem and figure out an intermediate solution. The core problem is that this website specifies an 800 pixel minimum width. There are several other features that push out to that width inside the three columns that make up the interior of the site. In modern mobile and desktop browsers, the viewport will initially scale a site with a fixed interior width like this!
With the presence of the Amazon iFrame the browser has no clue what the actual content size is and has no way to automatically scale the content.
The best solution would be to re-do the site and create a revised 2018 looking style. However, an intermediate few hour solution is this:
1. After the content loads, use Javascript to examine the device width.
2. If the device width is under our fixed width, 800px; set the scale of our body element to the desired size to be able to see most of the content inside the iframe.
Using these two steps, this will restore the nice functionality where the browser automatically scales the viewport so users can see the entire content area. This code uses jquery because it is already included in the site; but the basic Javascript DOM reference can allow you to easily select the main body. Here is the code I am using: