Creative Computing Final ProjectOpen Gun Funded
Watch my demo: (37:00)
From the show
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:
- Fix lobbying graph
- Edit tagline
- Remove reference to @gunfunded
- Put site name in OG/Twitter titles
- Rewrite about page
- Minor typography fix
- Fix accessibility issues
- Fix meta color
- Fix ranking
- Add Heap
- Add favicons
- Improve mid breakpoint
- Show Democrats on state stats when appropriate
- Add NProgress
- Fix tab navigation on profile grids
- Label total funding Contributors stat
- Update Theme UI
- Fix homepage title
- Link to PACs in Nav
- Rename Groups → Contributors
- Remove extra padding on Header
- Fix net/ranking on broken profiles
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.
- Remove search placeholder
- Remove gun control funding from profile grids
- Use new data structure everywhere
- Rename Total → Direct
- Add default meta image
- Add states navigational link
- Add preliminary about page
- Flip opposition stats
- Update & retool data
- Fix theme
- Improve responsiveness on ultrawide displays
- Color stats
- Improve system font stack compatibility
- Switch Call action to button
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.
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!
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.
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 alias to
Whether for Representatives or Senators, funded or not funded, Republican or Democrat, Instagram or Twitter, cards for all!
- Remove unused imports
- Fixed data fetching once & for all
- Added Search & more content to profile pages
- Simplified Header/Meta integration
- Added filtering to state list
- Created useFocusable
- Added useFocusable to Search
- Improved search design
- Added filtering + dynamic stats to PACs
- Added meta tags to Groups page
- Fixed search inputs
- Fixed search
- Improved footer
- Added privacy disclaimer to search
- Made PAC cycle stats recalculate on filter
- Fixed state stats for ultra-blue states
- Added comprehensive stats to state pages & /profiles
- Made various design improvements
- Added comprehensive share + contact sections
- Improved homepage cards
- Set default title tags
- Fixed profile card links
- Fixed fetching on state pages
- Added page metadata to state + profile pages
- Improved page alignment
- Linked profile cards
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
Working on data visualizations with vx, nothing added to the app.
- Improved profile pages
- Refined rhythm—typography, whitespace, mobile design
- Added detailed stats to profile pages
- Switched to Feather icons
- Started individual profile pages
- Switched to showing only top 5 profiles on homepage
- Added all profiles page
- Added Donut charts to percent stats
- Switched to Theme UI Components