What is it?

This is a B2B facing site I built to help promote a biotech/ insurtech startup called FOXO Technologies. The goal of the company is to make buying life insurance easier by way of eliminating the blood + urine test you need to take when applying for substantial life insurance policies by means of a mail-in spit test much like ancestory.com or 23 and Me use.

What makes it important?

This site is important to me because it took every once of talent I’ve built up in my decade of web development to bring it all together. The team that designed this had one of the most ambitious visions I’ve ever had the privilege of working with and they gave me a shot to bring it to life. Together we knocked it well out of the park and happily into orbit.

I love the scroll-based animations based on the animate-on-scroll library as well as the ultra crisp imagery which looks extra slick with the quiet addition of parallax effects by way of parallax.js

Biggest challenges?

1. Learning tailwind on the fly– it’s a wonderful framework but hard to dive into when you have a tight deadline.
2. Coordinating/ asking for another dev on a flagship site– during my time at FOXO my job has been considered intimidating because the public facing websites I build are scrutinized by the entire company as well as every potential investor who looks it over them so there had been little demand in terms of other devs who wanted to join forces and help me build new sites.
   
   That changed with the launch of the latest iteration of foxotechnologies.com because the design was next-level complex and the stakeholders wanted this done yesterday. Once I figured out the scope and scale I proposed adding another specialized contractor dev before we begin to really accelerate things and leadership was totally on board.
   
   Things worked out pretty smooth but it required much more use of git branches and pull requests which was good practice.

Want more?

Check out the B2C sibling site I helped develop, foxolife.com

What’s it?

It’s a device I made/ programmed to display what movies I need to check out, chores I’m neglecting, what side projects I’ve ginned up to keep myself entertained.

Wanna see it running?

Of course you do!

Uh why?

Glen you fiendishly handsome devil, why do you need something like this? Well my flattering reader I do occasionally find myself watching a season of Rick & Morty that I’ve seen so many times I could probably rattle off the lines easier than the pledge of allegiance while guiltily thinking “aren’t there about a million things I want to check out right now, why can’t I remember a single one of them?”. I built this machine to stop myself from aimlessly slouching around on the couch… and because it looks super fly in my living room.

How’s it work (without mentioning a lick of actual code)?

Finer details can be found here in the repo

1. A bit of code asks a Google sheet of mine for its contents
2. Google feeds back the spreadsheet data to the code
3. Another part of the code spits out the spreadsheet data as a neat little website
4. Rinse and repeat every 15 minutes

Heavy-duty design or coding details

This is my testing ground for interesting layouts, new font usage, and seeing if I can make certain colors work together so the overall theme is “whatever looks cool”. If you refresh the list, a new theme will pop up. At the point in time I’m writing this, there are 3 different themes it cycles through on refresh.

Case design

That’s a hand-drawn, laser engraved chunk of wood covering the front so buckle up kiddo, it’s a bit of a story.

Why “Calling You Home”?

So my brother and I were chilling out (possibly watching Rick & Morty again) and he remarked that my house had good vibes out the yin-yang… well what he actually said was that my house felt like a song by Seven Lions titled “Calling You Home” which he played for me and lemme tell ya, having the apartment I’ve put together compared to that song was one of the highest compliments I’ve ever been given.

After hearing it, I knew I would have to work that song into my home somewhere and being that I was already fixated on building a cool case for my motivational gizmo, I had a good idea of where it would end up. The only question left was how to make something which felt like that song and the case design you see is my answer.

Laser engraving

Did the engraving myself, I totally went out and got trained on how to work a big ol’ laser at a maker space called TC Maker (shout out!) in the twin cities.

How’d I code this beast?

The easiest way to explain is to check out the repo, in specific this file is where the party’s at.

The code work was probably the easiest part of this project as most of what I consider the tricky stuff was grabbed from an earlier project of mine so most of the focus was on making the code as easy to read as possible so the main custom.js file is TRICKED OUT with comments on what each line is doing.

Walk me through the steps, this time nerd it up!

You asked for it…

1. Make call to Sheets API
2. Wipe out any pre-existing cards
3. Assign variable to JSON response length (var y)
4. Create a card for each data set
5. Fill the card with the corresponding data in an unordered list
6. Do the whole song and dance again every 15 minutes
7. Swap theme every 8 hours or so by randomly selecting a class from an array
8. Remove old theme class
9. Apply new theme class

TL;DR

I made a super techy and slick looking to-do list

A Handy Little Widget That Builds And Loads Images Based On Device Width

So there’s this nifty little property in HTML that will let the browser determine which size image to load based on how large it needs to display it. The only hassle is that these images are tedious to build since without any automation, you have to save each image at each different size. This is about as much fun as cleaning out an attic full of bats with an air horn so I came up with a handy way to make the computer do all the heavy lifting for me (now if only I could make it deal with the bats…).

In a nutshell, my widget uses a single line in a command prompt to trigger a process which feeds all images in a directory through a program called GraphicsMagic that resizes it to your specifications and outputs the images to their own directory. Once we have the image files, we can easily reference all of them using a simple PHP function detailed below.

Now for the nitty gritty on how each bit works!

Gulp/ Node Package Manager

The dependencies are crazy simple, this is all you need in your package.json

{
  "name": "RespImg",
  "version": "1.0.0",
  "description": "Image Sizing Example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "glen",
  "license": "ISC",
  "devDependencies": {
   
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-responsive-images": "*"
    
  }
}

All our NPM does is download Gulp, Gulp Concat (not necessary), and the responsive image plugin (you do need to manually download the binaries though).

As for our Gulp file, the basic setup is really simple:

var gulp = require('gulp');
var responsive = require('gulp-responsive-images');
 
gulp.task('responsive-img', function () {
  gulp.src('assets/images/*.{png,gif,jpg}')
    .pipe(responsive({
       '*': [{
        width: 300,
        suffix: '-s'
      }, {
        width: 500,
        suffix: '-m'
      }, {
        width: 600,
        suffix: '-l'
      }],
      
    }))
    .pipe(gulp.dest('assets/images/adaptive'));
});

If you open a command line in your project folder after the NPM install and type “gulp responsive-img” it will generate new copies of all images in our specified folder!

Handy Dandy PHP Function

We still need a good way of writing all the mind numbing srcset markup which is where my PHP function comes into play!

     

            

             class="responsive"
                     alt="Some text"/>

                     

If you have any interest in a working set of files, you can download them here!