Watch my demo: (37:00)
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:
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!
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.
The biggest change I made today was updating & retooling the data:
Cross-posted to notebook.lachlanjc.me
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.
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/bashfor file in $@doguetzli $file $filedone
It took about half an hour & drained half my laptop’s battery, fans up 100% 😅
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!
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.
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 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
.
Whether for Representatives or Senators, funded or not funded, Republican or Democrat, Instagram or Twitter, cards for all!
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:
Working on data visualizations with vx, nothing added to the app.