Category Archives: News nerdery

Trial and error intro to SSL

One of the highlights of getting engaged was the opportunity to build a wedding website from scratch.

Okay, not exactly, but implementing SSL for the first time was extra rewarding after overcoming some fits and starts. I didn’t keep a step-by-step record of my trials in my haste to complete the site before invitations arrived, but these were the main errors I encountered.

I set up the site almost entirely with Namecheap and bundled SSL services with the domain and hosting, but browsers raised ERR_CERT_AUTHORITY_INVALID messages after I followed a hodgepodge collection of Namecheap how-tos. I was using a self-signed certificate and needed to update  with the certificate that had been verified by my SSL provider.

With my admin settings configured, I was able to visit the both http and https versions of the site, but I wanted to force all traffic to https. I thought I could accomplish this with a cPanel redirection, but no.


Instead, I edited the .htaccess file at my site root, following the guidance of a Namecheap how-to article. In this case, it was as easy as uncommenting a few lines of my yeoman-generated template.

It was intimidating to have my first SSL attempts met with error messages, but I feel a bit more comfortable with the process after fixing them. Perhaps this site is next.

Introducing @Officer1070

@Officer1070 is a robot highway patrol officer that simulates immigration status checks with its Twitter followers based on Arizona traffic stop data.

Arizona Daily Star staff compiled the dataset for a series investigating enforcement of SB 1070, the Arizona law that requires law enforcement to verify the immigration status of someone they’ve detained if they suspect the person is in the country illegally.

During a Migrahack event last year, I worked with Star reporters Luis Carrasco and Perla Trevizo and University of Arizona student Amanda Martinez to build No Timely Response, an interactive that puts users in the role of the highway patrol officer during an immigration check. @Officer1070 turns the tables, placing the user in the position of the driver.

The bot is an attempt to explore SB 1070 and the traffic stop dataset in a different way. From a technology perspective, I had wanted to make a Twitter bot for years but struggled to come up with an idea that didn’t spam the Twittersphere.

@Officer1070 was inspired by two particular projects:

The bot uses the python libraries tweepy and Pillow to grab user information when @Officer1070 is followed and create a mock “Suspected Illegal Alien form.”

More specifically, tweepy’s streamer constantly listens for a follow event and sends follower data to a function that creates the tweet and image.

Pillow creates the image by writing text over a background image with the pixel coordinates I defined for each text box.

I probably struggled the most making the script run constantly on a remote server, but Chris Keller alerted me to the nohup command, and it seems to be working so far.

I realize 2016 may be rather late to be launching my first Twitter bot. Some Twitter bots might be more appropriate performing tasks in dedicated chat rooms. Kazemi himself said changes to the platform, like a rumored update to character limits, could derail artistic bots.

Nevertheless, Migrahack inspired me to learn, once again. They have an event coming up in Colorado, by the way.

Kendrick, a novice skeptic and the love connection

[A poem] is made of action because you’re giving your whole life to it in that moment. And then the poem — you give it to everyone. Not that we’re going to change somebody’s mind — no, we’re going to change that small, three-minute moment. And someone will listen. That’s the best we can do.

Juan Felipe Herrera

A year has passed since Darren Wilson killed Michael Brown, military equipment met protesters in Ferguson and, less signficantly, I applied skeptic philosophy to my media work. I wrote about the limits of creating windows to the experiences of others, and those limits discouraged me. However, I have since expanded my view.

Progress is possible…

It’s impossible to know what it’s like to be another person, but I do have hope that I can empathize in breakthrough moments when I invest in the experience. I think those moments are meaningful because they advance strangers toward understanding. My friend Chris even suggested these connections are fundamental to being human.

This week the image of a dead 3-year-old boy brought attention to the international migrant crisis. Although the pain and sadness I feel when I see the image are not the same that the boy’s father experienced, I think those emotions bring me somewhat closer than I would have been had I not seen the image. News organizations made multimedia presentations and games to portray the migrant experience during the four years Syria has been at civil war, but the image of Aylan Kurdi generated unprecedented awareness.

… but it’s hard

While I began to recognize how people can empathize, I also found how difficult connecting with others can be. It’s hard to look at the Aylan Kurdi photo because it challenges my emotions. Maintaining friendships requires my intention and time. I have to leave my comfort zone to get to know people.

Leaving the comfort zone is hard. In the book “Thinking, Fast and Slow,” Daniel Kahneman describes how rarely people focus and experience “cognitive stress.” My brain, Kahneman writes, is often in autopilot, making decisions based on my biases. Reading this, I worried I would avoid situations that challenge my worldview because they require me to focus.

Applying these concepts to the modern “filter bubble,” I think digital media consumers and the algorithms that serve them tend to default to “easy” content – things people already “like” – rather than choose things that challenge their perceptions. I think the problem for online media is to convince audiences to invest their resources to engage and care.

Concepts in art!

As I grappled with these ideas over the past year, I found examples in Kendrick Lamar’s album “To Pimp a Butterfly” and the film “Interstellar.”

“If I respect you, we unify and stop the enemy from killing us.”

For me, this Kendrick line demonstrates how respect can make progress. Kendrick also mentions the pain he has caused in the same poem, which I think shows the limits of windows to others.

In Interstellar, (SPOILER) the lead character makes a ~~love connection~~ with his daughter through spacetime. It is tragic that they can’t actually be together, but their small connection basically saves humanity.

Still steppin’

My latest visualization at Hoy Los Angeles involved stepping through force layouts with bubbles and was directly influenced by Jim Vallandingham and Claudia Núñez.

CMEPGVdVAAIC6wcVallandingham discussed “stepper graphics” at OpenVis Conf, and I’ve noticed more of them since I wrote about appreciating maps that walk users through stories. Claudia Núñez, my editor at Hoy and founder of Migrahack, had a special request for a visualization of sports data: use bubbles.

At first I balked at bubble viz because bar charts can be more effective, but Hoy sports staff wanted to explore Major League Soccer player salaries by nationality, and I felt more comfortable being creative with a sports dataset. A vision came to me as I tried to sleep one night, a vision with soccer balls representing player salaries organizing themselves according to different categories.

I turned to a 2011 OpenVis presentation by the very same Jim Vallandingham on d3’s force layout and got to work translating my vision as javascript code.

The skewed distribution of salaries made visualization tricky. Also more than half of MLS players were born in the United States, and I was surprised to discover so few players were born in Mexico. Working with sports editor Eduard Cauich, I included these quirks as steps in the interactive to help the user understand the salary data. The finished project applied this sequence of operations on svg circle elements:

  1. bounce the 25 highest salaries around force layout
  2. list circles in rows by salary, team and country
  3. plotting circles on a topojson map

I probably spent the most time fine-tuning my technique listing the circles in rows and had some funny slips along the way.

Screen Shot 2015-07-27 at 3.48.56 PM

I also went back and forth considering whether to plot the circles on the map as lists or using multiple force layouts clustered around map points. I chose the linear presentation in the end because my network implementation ran slowly on my phone.

comparisonI used an exponential scale to size the circles because the skewed distribution made a linear scale difficult to read. I also assigned colors in five categories based on what I determined to be significant breaks on the distribution. These were subjective decisions.

Golazos in 3D

Katie and I went all in on the U.S. women’s national soccer team as they prepared for the World Cup. We supported them at a friendly match, watched every tournament game and cheered them on at a trophy rally.

Carli Lloyd’s midfield goal in the title game was perhaps the most incredible moment of the title run. Inspired by a New York Times 3D graphic of a key Super Bowl play and some tools I learned at a recent meetup, I tried to recreate the moment Lloyd struck the ball with graphics software. Click the images to see a webGL version, but be warned: the page loads an 8MB data file.


keeperI found an awesome model of the World Cup stadium and used a soccer data tutorial and game footage to place the ball and key players as accurately as I could in Sketchup. I’d never used WebGL before, so I learned how to export Sketchup models for use in three.js and hacked my way around positioning the camera with the TweenMax library. I would have liked to more closely replicate the lighting and shadows that affected the goal, but I encountered problems.

Unfortunately, even after removing the awesome jumbotron and most of the seating in the incredible arena model, the data file is still way too large to reasonably serve online. I’ll try to build on this experience and do more efficient 3D projects in the future.

I was most interested in seeing what Lloyd and Japan goalkeeper Ayumi Kaihori saw when Lloyd took the shot, and my WebGL page animates between their two perspectives. Here are some other interesting angles from my Sketchup project.

side stadium top