All Creative Computing

Creative Computing Final Project

Open Gun Funded

GitHub Glitch

Watch my demo: (37:00)

From the show

2019-12-18

Super happy with the progress (66 retweets, 166 likes now on Twitter). Made only a quick fix to the site today.

Also, discovered this great carbon calculator:

2019-12-17

Launch day today. Stretch goal for Twitter: 100 likes, 50 retweets.

I shared on Twitter, Instagram post, Instagram story, and Facebook (for the family…).

Launch went great! Slow start but really picked up later. The tweet ended up with 140+ likes & 60+ retweets.

Planning to post on Product Hunt/Hacker News in a day or two.

A maintainer of the framework I’m using (Next.js), Tim Neutkens, who does incredible work, reached out about trying some upcoming features of Next.js. I rewrote the whole data-fetching system, leading to fairly significant performance gains as the whole website (outside the API) became statically-prerendered at build time, instead of the server-rendered for each request. I can’t wait to use these new Next.js features on all my sites, as the performance and developer experiences upgrades are immense. Huge thanks to Tim for the assistance with the migration!

2019-12-16

Day 2 of the show wrapped up today! I hope to write a post about the experience for a first-timer in the IMA/ITP Show, but I’m super proud of my display and got only positive & constructive feedback. Overall, exhausting but fantastic experience.

I want to launch tomorrow. I made a big checklist of what needs to happen:

The primary issue I worked on is that last commit (plus the later fix ranking). Demoing the project for the first day of the show, I noticed a number of profiles showed no funding data. Eventually, I realized they all had multi-word last names. Because I’m using two different data sources (theunitedstates.io and OpenSecrets) and matching names to collate the funding data, I discovered they categorized the name parts differently (as last vs first). I solved by getting the last word of the last name. Then came names with capitalized letters in the middle—so had to lower-case both, in addition to removing accents, standardizing quotes, etc. Finally, two exception to the rule was names starting with "De" & "Des," of which there are 2—one source had a space after these, the other did not. I wrote a custom regex for this exception, which is insane. Look so simple on the outside!

I’m rather proud of the About page—fairly succinctly, it explains a lot of the data on the site and how to interpret it. I modeled it directly after the questions I kept answering and what I said during demos while presenting the project at the show, so I hope it’s helpful to people.

2019-12-15

The biggest change I made today was updating & retooling the data:

• Update for changes in Congress since August (RIP, new elections, updated social media)
• Download updated funding data
• Fix the sen 3 issue with Senator IDs
• Make net all-inclusive
• Ranking across the site by net instead of gun rights total

Behind the scenes: shareable image profiles

Cross-posted to notebook.lachlanjc.com

Sharing links to Congresspeople’s profiles on Twitter, Facebook, etc, I wanted to highlight the gun funding amount before people even open the site. But I also wanted the profiles to be shareable on Instagram Stories (for us youths), which requires a vertical format (as seen on the left & right). Here’s how I made the social cards service.

Avatars

Before we can get to the cards, each Congress member needs an avatar.

The unitedstates.io project has the unitedstates/images archive on GitHub, but it’s unfortunately out of date. Someone forked it with updates, then I added a few missing members.

Next, I wanted to compress the images (they’re also used on the main website, where Google PageSpeed flagged their extra size as slowing down the site). I wrote a quick Bash script to run Google’s fantastic Guetzli image compressing library on the folder. (There’s probably a better way to do this, but I’m terrible at Bash.)

#!/bin/bash

for file in $@
do
  guetzli $file $file
done

It took about half an hour & drained half my laptop’s battery, fans up 100% 😅

Getting online

I’ve been using & loving ZEIT Now for the main Gun Funded site, so I deployed the static folder to a new Now project:

One more command (now alias gunfunded-avatars.now.sh avatars.gunfunded.com) and our images are live!

The lineup, visually

I wrote a quick iOS Shortcut to get the headshots of every member of Congress, ranked by their gun funding, & create a grid of them all:

It took a few minutes to run, since it has to download hundreds of photos individually, but here’s the result:

Yes, Congress is that white.

Social cards

Back to the original mission. I’ve written in the past about making custom social card services based on ZEIT’s og-image, but this project is more complicated.

• I need to fetch data from the Gun Funded records database, to show funding
• I need to change styling based on the data
• I want variants for Twitter/Facebook/Open Graph social cards as well as vertical Instagram Stories

I cloned my ima-cards project, and removed the web testing UI code to simplify development.

The development process took several hours but wasn’t too hard--mostly, I don’t have much experience using TypeScript, but running the project with now dev was great. I copied the full data JSON file directly over, then worked on the design.

The design references the "I Voted" stickers, but with the brand, candidate, and funding amount. For Instagram Stories, I used the Instagram handle (@gunfunded), whereas on the web it uses the domain (gunfunded.com). With the Stories’ extra vertical space, it also shows the current term of the Congressperson.

I copied the same color palette as the site to keep the vibe/brand consistent. Though the site uses San Francisco/system-ui for typography, the incredible Inter font stepped in here.

Deployment was just as easy as for Avatars—just now & now alias to cards.gunfunded.com.

End results

Whether for Representatives or Senators, funded or not funded, Republican or Democrat, Instagram or Twitter, cards for all!

2019-12-11

2019-12-10

2019-12-07

2019-12-05: User testing

Did user testing in class today. People really liked the site, especially the design, though were confused about some of the stats on profiles as well as how to navigate the site. Based on people’s feedback & my observations, I made a checklist of improvements to make to the site:

• Add navigation on state pages
• State link on profile pages is broken
• Whole profile card should link to profile page
• Add explanations to opposition/support stats on profiles
• Fix stats on mobile
• Change “Share” to “More”
• Color More button based on party?
• Fix Instagram links: remove @ sign
• Add label for Contact section
• Form icon is unclear
• Add Search card to end of states pages
• Add party breakdown on states pages
• Add About page
• Add description on homepage
• Remove WebKit highlights from states on homepage cards
• Clarify PACs page description
• Better navigation across the site
• Titles on profile pages
• On state pages, separate Senators from Representatives

2019-12-04

Working on data visualizations with vx, nothing added to the app.

2019-12-03

2019-12-02

2019-12-01

2019-11-30

2019-11-26

2019-11-24

2019-11-19

Posted November 26, 2019 via GitHub