Recent Work – July-ish Edition

Life is like a box of chaos and Forrest Gump was/is a descendent of Nathan Bedford Forrest and I’ve never read the Forrest Gump book.

It’s always been difficult for me to keep track of what I did. I’m good about managing what’s in progress but once it’s done it fades from memory fairly quickly. It’s been worse lately as there’s just a lot going on. That is the purpose of writing these posts and really the main purpose of this blog over the years. I tend to look back at a few places to jog my memory when I write these- my calendar, github commits, codepen, and the YouTube videos I’ve made. Not perfect but it gets me started. It’s always amazing how much I forget until prompted. If anyone has better paths, I’d be interested in hearing about them.

WordPress-y Things

Lots going on with WordPress. I think I’m making some marked improvement on my overall design skills lately. I’ll credit Matt Roberts for inspiring me to up my game on that end. I’ve always cared what things look like but I think I’m better able to pull the whole thing together in a way that feels more unified now.

Motivation in Context

This is a lab site that has some custom post types and a nice relationship between people and projects. You can see the Motivation in Context theme here. The video tour below shows how it all fits together.

Science Discourse

I had some fun with little design elements on this site because the topic made it fairly easy to do.

Matt made the logo to the left which I like a lot and I found the robot on the noun project site. Since the noun project lets you download the images as SVGs, I was able to use the image as an inline svg and a bit of CSS and make it blink “hi” in morse code.¹ I find the inline svgs a bit messy but the ability to animate them via css is worth it.

.robot-ray {
    fill: #ffb300;
    -webkit-animation: hideshow 10s ease infinite;
    -moz-animation: hideshow 10s ease infinite;
    animation: hideshow 10s ease infinite;
}

@keyframes hideshow {
  0% { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: 1; }
  8% { opacity: 0; }
  10% { opacity: 1; }
  12% { opacity: 0; }
  14% { opacity: 1; }
  16% { opacity: 0; }
  22% { opacity: 1; }
  24% { opacity: 0; }
  26% { opacity: 1; }
  28% { opacity: 0; }
  30% { opacity: 1; }
} 

You can also see more morse code inspired design in the white dashed line below the word News and the gray background has our robot friend from the header holding hands with itself.

And finally a message in binary.

Instagram to Canvas via WordPress

This is stupid and awful. The worst part being that it didn’t have to be. The first travesty is that Instagram’s embed code has an external js file. That gets cleansed by just about every system and the embed breaks. Secondly, Instagram has pretty much shut off it’s API because getting approval for even public data is unlikely. And finally, Instagram/FB is going to require authentication to even do oEmbed. Pretty much a disaster and I hate them.

I tried a variety of scraping options which worked in development but ran into problems on the server where I ended up getting blocked pretty quickly. Not being able to justify a ton of time for this, I went the non-Programistan route.

I just made a WordPress site and tied in a Gravity Form. I have a plugin there that lets me add a javascript via a custom field and a theme that’s made for iframe embedding. You paste in the regular Instagram embed code and it reattaches the js. That gets you this. It’s dumb and I hate it but it lets you put individual Instagram posts into Canvas without drama.

I like that I’m reusing a multipurpose theme in combination with a multi-use plugin and my old pal Gravity Forms to make something work. The idea of building tools that are semi-technical that you can combine in novel ways to solve problems is something that I have always liked. What those tools continues to change as I learn more about programming but the concept remains useful and guides how and when I invest time and energy in certain work.

Timed Image Shower/Hider

A request from a fashion faculty member, this allows you to present images for timed sketches. It’s built into this WordPress plugin and is using that minimal iframe theme as the goal is to embed it in Canvas or Blackboard.

Other Stuff

Google Folder Embed Generator for Canvas (or whatever)

Another little iframe creator to help add the ability to put an entire folder in Canvas. It doesn’t look like the LTI integration lets you insert an entire folder so I made a way to do that.

Google Sheets Games

I ended up needing a data validation dropdown that would remove items as they were used. This was more complex to do than I anticipated but I came up with something moderately useful.

My first function gets all the student names from another spreadsheet.
=IMPORTRANGE(“https://docs.google.com/spreadsheets/d/whatever”,”Form Responses 1!B:B”)

My second function gets all the student names that have been selected in this spreadsheet.
=QUERY(‘Writer Contributors’!X:X,”select *”)

My third function compares those two to build a list of students who have not been chosen yet.
=filter(A:A,isna(match(A:A, C:C, 0)))

I then use that list to create the data validation drop down. The downside is that once chosen the choice is removed and then it gets flagged but as long as you allow the entry it’s no big deal.

Various Support Videos

I’ve been doing a fair amount of direct support. There are some boring things in here and a few interesting ones. Many of them deal with Canvas or Zoom. There is some kind of interesting stuff looking at the online Google Earth tool. It’s really nice but you can’t iframe it etc. The KML exports lose data when imported into Google Maps (which you can embed). The KML exports also don’t quite work when imported via Omnivore into Leaflet.

Forensic Science Interactive PPT

One of forensic science faculty, Catherine Connon, made a very impressive interactive powerpoint. It doesn’t quite work when embedded like this from One Drive but it’s close.

See the Pen
forensics ppt embed via one drive by Tom (@twwoodward)
on CodePen.

Random Interactive Font Example

See the Pen
font OER interactive by Tom (@twwoodward)
on CodePen.

Remake of the ALT Lab front page

See the Pen
alt lab course display alts by Tom (@twwoodward)
on CodePen.