At A Glance Main Projects Tutorials Resume

Messenger


There currently is no messenger. Manually, you can contact me via:
AIM: TecGumbo

Google Talk: palen1c at gmail.com

Twitter: @Technogumbo



Amazon S3 Static Website Iframe Responsive Problems

Sun, 29 Jul 2018 21:53:51 EST

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:

  function TryResizeParentFrame() {
   try {
    if(window) {
     if( $(window).width() < 800) {
      var desiredWScale = $(window).width() / 800;
      $(window.document.body).css('zoom', desiredWScale);
      $(window.document.body).css('-moz-transform-origin', '0 0');
      $(window.document.body).css('-moz-transform', "scale{" + desiredWScale + ")");
     }
    }
   } catch(e) {
    if(console) console.warn("Sorry; unable to scale parent. The viewing experience may not be optimal: " + e);
   }
  }

Comments:0

Quick Agile Setup With Docker And JIRA

Sun, 15 Apr 2018 21:53:51 EST

Everyone is crazy about the Agile process. When used in real world projects with real teams does it live up to the hype? I have enjoyed using JIRA for Agile project management each time I have used it. As someone who has managed and used Agile via JIRA I attest that as long as Agile is utilized in the correct scenario, it works well. Keeping team focus on the product and not the process helps.

The quickest way I have come across to setup JIRA is to use a docker image of it. Instead of the involved process of creating your own image, someone has already done the hard work.

You can find the docker images for JIRA at: https://hub.docker.com/r/cptactionhank/atlassian-jira/

Comments:0

Quick No Hassle PlpgSQL Stored Procedure Debugging

Thur, 15 Mar 2018 21:52:51 EST

Of all of the open source databases; PostgreSQL has always been my favorite. I have used it on several projects, and it has always proven reliable. Recently, I have been working on increasingly complex stored procedures. During development, it can be difficult to determine error states. A quick way to print output that will be visible is to utilize the raise notice statement.
It works very similar to print statements in other programming languages. For example:

raise notice '% %', declared_variable_1, declared_variable_2;

Will print the values of declared_variable_1 and declared_variable_2.

Comments:0
Techno Gumbo RSS Feed Michigan Livestock Data Services The Research Computing and Engineering Podcast