Patrick Garvin: Blog

Trent Reznor is industrial’s George Brett, Green Day is punk’s Ozzie Smith

April 17th, 2015

The Rock and Roll Hall of Fame’s 30th Annual Induction Ceremony is Saturday. This year, the inductees are notable for who is getting in on their first year eligible and who is finally getting in after languishing in the ether for years. And, ss with most years, who isn’t being inducted is just as notable as who is.

This year’s inductees:

  • Ringo Starr
  • The “5″ Royales
  • The Paul Butterfield Blues Band
  • Green Day
  • Joan Jett & the Blackhearts
  • Lou Reed
  • Stevie Ray Vaughan & Double Trouble
  • Bill Withers

Notably not among this year’s inductees:

  • Chic
  • Kraftwerk
  • The Marvelettes
  • N.W.A.
  • Nine Inch Nails
  • The Smiths
  • The Spinners
  • Sting
  • War

Among past inductees:

  • Daryl Hall and John Oates
  • Randy Newman
  • David Geffen
  • Madonna
  • Public Enemy
  • Run D.M.C.
  • Beastie Boys
  • Donna Summer
  • R.E.M.

I mention past inductees not to throw shade on those inductees, as that list includes some of my favorite artists. I merely mention those artists for context. In other words, why those guys and not their counterparts who’ve been neglected?

This year was the first year that both Green Day and Nine Inch Nails were eligible. Joan Jett & the Blackhearts have been eligible a few years now. Ringo Starr, Lou Reed, and Bill Withers have been eligible for decades.

The interesting thing is that while both Green Day and Nine Inch Nails were eligible for the first time, Green Day was inducted and Nine Inch Nails was not. These two have more in common with each other than they do with any of the others who were inducted or eligible but not inducted, which is why inducting one and omitting the other seems so noticeable. To put this in perspective, let’s think of the Rock and Roll Hall of Fame like the Baseball Hall of Fame, and let’s think of Green Day’s and Nine Inch Nails’ respective genres — punk and industrial — of music as Major League Baseball teams.

Punk is like the St. Louis Cardinals, having had several inductees in the Hall of Fame: Patti Smith, The Sex Pistols, The Ramones, The Clash. Green Day, thus, is the genre’s Ozzie Smith: immensely popular and one of the more well-known players of the last 30 years. They aren’t the all-time best, but they are considered up there, particularly among younger fans. And don’t think age doesn’t matter in the context of punk. Any punk fan of a certain age can’t have a barstool or coffee shop conversation about punk without bringing up Green Day and modern acts just to point out how inferior they are to the forefathers, whether it’s because Billy Joe affects an over-the-top faux-British accent whine or because the band has moved into “Time of Your Life” ballad-type cheese. Now, I don’t think any Cardinals fan will ever dare hate on Ozzie, but if you ask Cards fans who their favorite shortstop is, age will divide your answers: Ozzie among younger fans, Marty Marion among older fans. Marty Marion, like the punk band Black Flag, never made it into the Hall of Fame. But both were among the best at their game.

If punk is the St. Louis Cardinals, and the goofy Green Day is its backflipping Ozzie Smith, then industrial music is the Kansas City Royals and Trent Reznor is its dour-faced George Brett. Ozzie Smith, a contemporary of Brett’s, was one of many beloved players for the Cardinals. But there is no Royals player more beloved or well-known than George Brett. If you’re only a casual baseball fan, then Brett is probably the only Royals player you can name, just as Reznor and Nine Inch Nails are the only industrial act that mainstream music fans probably know. Nine Inch Nails’ “Closer” off 1994′s “The Downward Spiral” cemented Reznor’s stature the way that the Royals’ 1985 World Series win cemented Brett’s. Only fans with some deeper knowledge would really know much about:

  • Dan Quisenberry, who was the Royals’ version of Ministry
  • Bret Saberhagen, who was Kansas City’s Skinny Puppy
  • Frank White, KMFDM to Brett’s Reznor
  • Amos Otis and Hal McRae, the Die Krupps and Throbbing Gristle who set the stage
  • Carlos Beltran, the Frontline Assembly to Saberhagen’s Skinny Puppy

If you only knew a few of those bands or players, you prove my point: George Brett is the standard-bearer of the Kansas City Royals and Trent Reznor is the commercial face of industrial music. Not that these are bad things. Neither guy is anything to sneeze at, to be sure. Brett is one of four players in MLB history to accumulate 3,000 hits, 300 home runs, and a career .300 batting average. The others being Hank Aaron, Willie Mays, and punk rock St. Louis Cardinal Stan Musial. Brett had longevity, being the only player in MLB history to win a batting title in three different decades. Reznor has had success not only with Nine Inch Nails, but in his film scores as well. The man has won Golden Globes, Grammy awards and an Oscar. He’s immensely talented and driven, which is why he’s still recording and performing 26 years after 1989′s “Pretty Hate Machine” introduced many squares to industrial music.

I’m hammering this point home like George Brett’s 3-run home run off Goose Gossage in Game 3 of 1980 ALCS because the Rock and Roll Hall of Fame has managed to have artists from almost every genre of rock. Nine Inch Nails’ induction would give industrial a presence that no other mainstream commercial artist could give. They’re certainly not going to induct Al Jourgensen. (Or Dan Quisenberry.)

Of course, these things aren’t always fair, which is why Bill Withers is just now being inducted. Or why Daryl Hall and John Oates got in before Stevie Ray Vaughan. Or why Chic hasn’t been inducted yet. Or why so many others aren’t in the Hall of Fame. Finding instances of unfair omissions in the Hall of Fame’s history is like finding MLB players who used steroids: not difficult. Pontificating on all of those oversights would take a while. A lot more than nine innings.

The main thing to remember here is that contemporaries George Brett and Ozzie Smith each entered the Baseball Hall of Fame when eligible. I don’t think many fans would disagree, nor would any fan argue that either one shouldn’t have been inducted.

Thus, if Green Day can enter but Nine Inch Nails can’t, well…

Wake this basketcase when September ends.

Share

How designing for different web browsers is like throwing a dinner party

April 15th, 2015

Designing web sites and interactives for different browsers is like planning a dinner party for widely different guests. None of whom has RSVPd. You don’t know who could show up, so you have to be prepared that they all could.

The most fickle is Internet Explorer, which is like that guy who was really popular in high school but hasn’t really done a whole lot since then. He invited himself to your party after hearing about it from someone else. He’s nice and well-intentioned, but planning for him is a pain in the ass.

Depending on the version, Internet Explorer can’t handle SVG, and when it can, it needs a lot of special help if you want to animate the SVG. This is the equivalent of a party guest who doesn’t always drink booze, but when he does, it’s Budweiser from a can and he’s hammered by the the third beer.

Beyond that, Internet Explorer can be finicky about aspects of CSS that other browsers can handle without any problem. Like break points in media queries. This is to say that this Budweiser-drinking party guest is also lactose-intolerant, but sometimes drinks milk anyway and then complains about it. He doesn’t eat red meat or chicken, but does eat turkey. He’s allergic to nuts, gluten, oats, soy, baby carrots, cherry tomatoes, white onions, food products made in July, and pickles cut the long way. He can’t eat black beans because they give him horrible gas.

Some versions of Internet Explorer can’t even recognize borders applied in CSS, which is the equivalent of this party guest saying, “Bee tee dubs, I’m allergic to water.”

You can’t just uninvite him, either, because he’s still popular among many circles and you can’t risk the fallout that could come from cutting him off. His retired family members no longer work, but they could still show up and wreak havoc at your party.

He might not show up, but just in case he does, you want to have something he can have. Maybe a jar of gluten-free air.

Much more agreeable is Safari, your bubbly coworker in her mid-20s. Just as Safari shows up in every Mac product, this party guest shows up at every party you have, usually 10 minutes early. Safari handles CSS much better than IE, which is to say that you don’t have to worry about this guest not eating any of your tapas. I’ve noticed in some of my projects that CSS break points look a little rougher in Safari, which is to say that if you ask this party guest to pick up chips on the way, she might just get the store brand chips unless you specify the brand you want.

Where Safari can have issues is the css for animated SVGs. This can sometimes cause Safari to flip out, much in the same way that certain hard liquors will send your bubbly party guest into a blackout drunken stupor where you have to confiscate her phone so that she doesn’t keep texting the guy she met on Tinder.

Firefox is much more capable and reliable than Internet Explorer and probably Safari, but that doesn’t mean it’s not without its quirks. Firefox is that friend you invite to the party because you like him even though he can be kind of a snobby, pedantic smartass. Firefox can handle SVG with aplomb, but I’ve had to use an if/else statement to distinguish whether the user has Firefox, and thus whether to apply different JavaScript. This is like having to make a separate booze run because your contrarian friend insists on drinking a more expensive “specialty” vodka that you can only get at certain liquor stores. He uses terms like “craft cocktails,” and if that didn’t make you roll your eyes, his blog about craft cocktail trends as a symbol of populism in the west will shoot your eyeballs from your skull.

These criticisms so far stem from SVG, but there are more generic irritations with Firefox. There are times I’ve had to add “float:left” to the CSS because Firefox has pushed divs with a 100% width all the way to the right off the screen. This is a quirk that even IE didn’t have. This is the equivalent of asking your friend to pick up ice on the way to the party.

“Can you grab ice? The bodega by my house sells pink bags in seven and 20 pounds. We just need one seven-pound bag. Thanks!”

And then from the store, your friend calls and says, “I can’t find anything like what you’re talking about. All I see are light magenta bags of ice that weigh 6.95 pounds and 19.95 pounds. What should I do?”

“Right now, I wish an actual Firefox, like a fox made of fire, would come and eat your face, you pedantic nerf herder.”

In the grand scheme of things, having to add “float:left” or Firefox-specific JavaScript isn’t a deal-breaker. But those things can make designing web packages annoying, particularly because Firefox is so capable otherwise. This is why Firefox’s quirks can make it more annoying than IE. Internet Explorer, with its myriad food allergies and other quirks, is so demanding that you’ll never be lulled into thinking that you don’t have to attend to it. Firefox’s quirks feel like that party guest who throws a tantrum while the host administers CPR to Internet Explorer because he accidentally had water with an ice cube.

But the browser that gets you through this soirée is Google Chrome. Testing iterations of your responsive interactive graphic on Chrome is like having your BFF at your side for this chaotic gathering of misfit toys. Chrome gets you. Chrome knows you inside and out. And that’s not just because Chrome is synced with your Google accounts and thus literally knows everything about you.

Chrome will call you on the way to your dinner party and ask you if you need her to pick anything up at the store. Unlike the other guests, Chrome doesn’t need any more instruction than “ice” or “chips.” Chrome will get it for you and even get you a six-pack of your favorite beer, because Chrome could hear in your voice that you were a little stressed.

Chrome’s got your back.

Chrome can handle SVG with ease, whether it’s static, animated with SMIL, whatever. This is like having a BFF that’s not picky about beer, wine, or liquor. You could even have bottom shelf vodka that stings like rubbing alcohol and your bestie wouldn’t care.

“What y’all drinkin’ on?”
“Burnett’s.”
“Awesome. Gimme some.”

Now, only every once in a while, Chrome will stall on a page and give you an “Aw snap” fail page. But if you refresh it or try it in another tab, it’s dependable again. That’s the equivalent of calling your bestie and saying, “Hey, you wanna get drinks tonight?”

“I would, but it was a long day, I’m just getting home and I have to be up early tomorrow. But what are you up to tomorrow night? I’m gonna make a casserole and binge-watch the last few episodes of Scandal, drinking Olivia Pope-sized glasses of wine. Wanna join?”

“I’m totes there.”

There are certainly other guests beyond these four, but they aren’t as noticeable at the party. Opera is your friend’s friend who your friend invited at the last minute. You like this guy and think that if you lived in the same city, you’d hang out more. And there are certainly many more Linux web browsers out there. These could be the party guests who came because they were walking by your place, heard the music and knocked on your door. You didn’t prep for them, but they seem cool and you don’t mind if they come in for a bit.

As long as they don’t have weird food allergies.

Share

Obama, conversion therapy, and presidential stances on LGBT issues

April 9th, 2015

When President Obama told Robin Roberts on ABC in May 2012 that he supported same-sex marriage, he added, “I’ve stood on the side of broader equality for the LGBT community.” Thus, in the context of an Obama presidency, Wednesday’s announcement that Obama condemned conversion or “reparative” therapy for LGBT youth could seem like just one more example of the president standing “on the side of broader equality for the LGBT community.” Less than two years into his first administration, he repealed Don’t Ask, Don’t Tell. A year and a half later, he became the first sitting president to endorse same-sex marriage, and has since then stated his support for the end of bans on gay marriage.

But Obama hasn’t always been this vocal when discussing LGBT issues. No president or candidate has been. Thus, in a larger context, Wednesday’s announcement signalled that once again, the Obama presidency could be remembered for how Obama talked about and interacted with the LBGT community in a way different from past presidents. Because, in a larger context, this entire time in US history will be remembered for how society as a whole changed the way it talked about and interacted with the gay community, regardless of who was president at the time.

One need not go back too far in history to see how US presidents have evolved when talking about LGBT issues. This is a cursory list, and is certainly not meant to be exhaustive.

1993
President Clinton announced and later signed the policy that would become known as “Don’t Ask, Don’t Tell,” in which LGBT members of the military could continue to serve, but not openly. The policy forced gays to hide their sexual orientation or face dismissal. More than 13,500 people were discharged under the rule since 1993.

Sept. 21, 1996
President Clinton signed the Defense of Marriage Act, allowing states to refuse to recognize same-sex marriages performed under laws of other states. Between then and the general election in November, Clinton’s campaign broadcasted ads on Christian radio touting that he had signed the Defense of Marriage Act.

Feb. 24, 2004
President George W. Bush announced support for a constitutional amendment banning gay marriage.

Aug. 3, 2004
Missouri voters passed an amendment that added a ban on gay marriage to the state constitution. Senator John F. Kerry, who was then the Democratic presidential nominee, said in an interview published with the Kansas City Star later that week that he would have voted for the gay marriage ban.

Nov. 2008
Barack Obama and John McCain faced each other in the general election. Though both men said they oppose same-sex marriage, they disagreed on whether the state constitutions should ban it.

Dec. 22, 2010
President Barack Obama signed legislation allowing gays to serve openly in America’s military, repealing “Don’t Ask, Don’t Tell”.

Feb. 23, 2011
President Obama declared that he will no longer defend DOMA.

May 9, 2012
President Obama became the first president to endorse same-sex marriage. Mitt Romney, who would face Obama in the general election in the fall, reiterated that he opposed same-sex marrige.

Jan. 2013
In his second inauguration address, President Obama referenced LGBT rights and struggles when he said, “Seneca Falls, and Selma, and Stonewall”.

Feb. 2013
In a friend-of-the-court brief, the Obama administration told the US Supreme Court that California’s ban on same-sex marriage violated the Constitution’s guarantee of equal protection.

March 2013
Former president Bill Clinton wrote an op-ed for The Washington Post, calling for The Defense of Marriage Act to be overturned. “As the president who signed the act into law, I have come to believe that DOMA is contrary to those principles and, in fact, incompatible with our Constitution,” Clinton wrote.

January 2015
President Obama became the first president to use the word “transgender” in a State of the Union Speech.

March 2015
In a friend-of-the-court brief, the Obama administration urged the US Supreme Court to rule that states could not ban same-sex marriage.

This, of course, is a very incomplete list. And this is not to say that Obama always had the same stances on LGBT issues. He will often say that he evolved. Clinton himself said that when he signed DOMA, it was a “different time.”

I wrote last year that some bloggers and pundits thought Obama had unfairly gotten a “pass” on his 2008 statements on gay marriage. The unifying question was this: If Brendan Eich had to resign as CEO of Mozilla because he gave $1,000 to support Proposition 8 in 2008, why does Barack Obama get a pass for saying in 2008 that marriage should be between a man and a woman?

As I wrote then:

If Obama or anyone who voiced opposition to same-sex marriage ever got a “pass,” it certainly wasn’t an across-the-board pass from the LGBTQ community. A quick Google search of the terms “Obama” “gay marriage” shows quickly that prominent sites and blogs about LGBTQ issues — The Advocate, The Bilerico Project, GoodAsYou and Towleroad — show that Obama, Hillary Clinton and other Democrats did not get a “pass” on their stances on same-sex marriage or other issues. Bill Clinton, the president who signed the Defense of Marriage Act into law, didn’t receive a pass last year when he wrote an op-ed denouncing the law.

How presidential candidates will discuss gay marriage will probably be strongly influenced by how the Supreme Court will rule this year on the topic. It’s not an issue that will go away. Obama’s presidency does not mean that no candidate will ever oppose same-sex marriage again.

Nor do the LGBT milestones during an Obama presidency mean that he is responsible for them. As I said earlier, the Obama presidency could be remembered for how Obama talked about and interacted with the LBGT community in a way different from past presidents. But that probably has a lot to do with the fact that this entire time in US history will be remembered for how society as a whole changed the way it talked about and interacted with the gay community, regardless of who was president at the time.

Share

If the 2015 Final Four teams were “Star Wars” characters

April 6th, 2015

As a wee child, I watched WWF with the fervor that I now watch prime time soap operas. As the years passed, my dad told 12-year-old me that I would be better reading JFK’s “Profiles in Courage” instead of WWF Magazine. (Though the publication did publish my letter to the editor when I was 10.)

I ended up being more than OK with that. As I got older, I traded the Ultimate Warrior and Macho Man Randy Savage for Will Clark and Wesley Stokes. I no longer needed to root against Sgt. Slaughter, The Million Dollar Man or Rick Rude, because now I had Bill Self, Lebron James, and Kobe Bryant.

Because even though I knew WWF was not an actual sport, it gave me the outlet that baseball, college basketball and college football give me and so many others. Which is, to say, it gave me a chance to root for underdogs and unabashedly boo at the bad guys for whom I had nothing but abject loathing.

Sure, real sports have gifted individuals showing awe-inspiring athletic prowess and feature the joyous triumphs that can only come from teamwork. But we are kidding ourselves if we don’t think that at least part of the joy of watching sports comes from rooting for our heroes, and maybe more importantly, rooting against the villains.

Perhaps there is no forum that more succinctly displays this psychological aspect to sports fanaticism than the March Madness tournament. We cheer for underdogs who just barely scrape into the tournament and hope they will knock out a smug number 1 seed. We root for the earnest teams whose players’ back stories get us choked up. And just as importantly, we tune into games where our only vested interest is seeing a team lose, whether it’s to help our bracket or because we relish the possibility of trash-talking our friend who roots for Kansas even though she’s an otherwise lovely human being.

This year’s March Madness, and particularly this year’s Final Four, has had that delicious aspect of earnest heroes, fan favorites and universal villains. It mirrors pop culture’s best portrayal of the fights between good and evil.

That’s right, Padawans. This year’s Final Four is “Return of the Jedi” to the overall “Star Wars” universe that has been this year’s March Madness. Saturday, Wisconsin’s Luke Skywalker defeated Kentucky’s Darth Vader and Duke’s Emperor Palpatine dispatched of Michigan State’s Han Solo. And tonight, the earnest farmboy Luke Skywalker — in the form of a plucky, fun-to-watch Badgers team — will face the unrepentant Emperor Palpatine, represented by Duke’s aptly named Blue Devils.

You might protest, but search your feelings. You know this to be true.

Earnest and somewhat naive farmboy Luke Skywalker was the “Star Wars” series’ poster boy for unshakeable good, abandoning his training in “The Empire Strikes Back” so that he could go save his friends whom believed were in trouble. This strong moral compass fits nicely for University of Wisconsin’s home of Madison, a social activist’s haven where two’s a party and three’s a protest. It’s not a stretch to think that if Luke Skywalker were to be from any part of America, he’d be from the rural Midwest, where a strong work ethic, friendly demeanor and headstrong stubbornness are a way of life.

Michigan State is sarcastic smuggler-turned-rebel Han Solo. Michigan State didn’t garner any widespread fan hatred, but was also never cast as chipper underdog, either. Michigan State, while also Midwestern, does not have the golly-gee earnestness that Wisconsin does. Han Solo is ultimately a good guy, but he never wanted to be a good guy. He as not the series’ symbol of purity, because as a self-interested smuggler, never viewed good and evil as black and white. He was merely a means to get Luke to the main event, where he could face off against the villainous Darth Vader and purely evil Palpatine.

You might think that the Midwestern duo of Michigan State and Wisconsin would be better portrayed by twins Luke and Leia rather than Luke and Han. I considered that, but in the grand scheme of the 2015 March Madness tourney, Leia is Wichita State, because Leia defeated the horribly villainous Jabba The Hutt. By which, of course, I mean the University of Kansas Jayhawks.

And speaking of villains…

A long time ago in a galaxy far, far away, Darth Vader was once Anakin Skywalker. Sure, he was always obnoxious and somewhat full of himself, he wasn’t always the bad guy. Many have found Kentucky fans unbearable for years, as the fans have smugly boasted the team’s impressive legacy. Kentucky’s been a dynasty for years now, and that will always garner some envy and disdain. In that sense, Kentucky is the insufferable Anakin. But it was John Calipari who elevated the team to hatable Darth Vader status. By many, Coach Cal is seen as an opportunistic cheater who bends the rules and doesn’t play clean. Sounds about right for an intergalactic dictator who chokes people and blows up planets, right? If Kentucky were coached by a more likable, grandfatherly character such as Charlie Spoonhour or Al McGuire, would they be as hated as a Cal-helmed Kentucky?

Wisconsin defeating Kentucky this past Saturday was a rematch from when the two teams faced each other in the Final Four last year. Kentucky won that game, though, just like Darth Vader had won the last time he fought Luke Skywalker. In other words, the Final Four in 2014 was Kentucky cutting Wisconsin’s hand off and devastating the earnest team, and the Final Four in 2015 was that earnest team coming back with a green lightsaber to beat Kentucky.

But Vader was not Luke’s ultimate enemy in “Return of the Jedi.” Luke’s ultimate enemy was evil and temptation. Vader was a flawed character who had chosen the allure of the Dark Side, but he was not the representation of pure evil. That distinction went to Palpatine. In this Final Four, the only team hated as much or more by fans than Kentucky has been Duke.

Coach K is not the defining factor. He has his enemies, sure, but if he were replaced tomorrow, would Duke’s haters hate the team any less than they do today? Probably not, because more than Mike Krzyzewski, it’s Duke’s fan base that earns the team its role as super-villain. When reading a friend’s Facebook post about Duke this weekend, the thread contained the words “smug,” “arrogant” and “entitled” only a bajillion times.

Now, Duke fans are probably very lovely outside of the sports bar. I have friends who root for Duke. So, no, I don’t think that Duke fans are actually the representation of all evil and darkness. But hyperbolic exaggerations are the basis of our choices of whom we root for and boo in sports, which is why WWF’s cartoonish characters were such a hit.

And tonight, in a sports bar equivalent of the Mos Eisley Cantina, I’m going to affect a Wisconsin accent, shout out “uff da” and root for the Badgers. And come November, I hope my Missouri Tigers and Saint Louis Billikens don’t repeat their performances as, well, anything from “The Phantom Menace.”

RELATED: If Leonardo da Vinci tinkered the way George Lucas does…

Share

How to make an SVG animation, from Illustrator to HTML

April 2nd, 2015

Last week, I discovered Rob Levin‘s podcast, “SVG Immersion: The Anything and Everything SVG Podcast.” On one of the episodes, Rob talked to front-end developer Petr Tichy about SVG animation, as Petr had created this really cool animated Christmas card using SVG. Just click on it and it watch it.

Cool, eh?

Inspired by Rob and Petr, I Googled how to create SVG animations myself. After looking at some examples and a few tutorials, I decided to attempt my own. This SVG animation was the result of my efforts. It was easier than I expected, and I think SVG animation is a tool my colleagues and I will be able to use for many interactive projects.

Below, I’ve written a tutorial of how I put the animation together. It’s a rather long explanation, but I wanted to document it in depth. I used the starter files from Mr. Map Generator to help build this animation and thus the tutorial will read similarly to the one I wrote for that.

To create this responsive SVG animation, I used Adobe Illustrator and a text editor. If you’re following along, I’m going to assume you are familiar with Illustrator and only a little familiarity with basic HTML. For the most part, this requires a lot of copying and pasting. You need not have any SVG experience, and I’ve written this as if the reader has never used SVG.

This was my first time using SVG animation, so I am not an expert by any means. Rather, I am writing this from a perspective to say, “Hey, look how easy this was for a newbie!”

Let’s get started. Here is a zip file of four files:

  • ocean.ai
  • starter.htm
  • svg.css
  • responsive.js

When you’ve downloaded the zip, open up the Illustrator file called ocean.ai.

You’ll see that there are elements hanging off the artboard. Our artboard is 600px wide and 400px tall. But when animating SVG, you can make your artboard whatever width or height you want.

Each section of the ocean scene has its own layer in the Illustrator file. Furthermore, each layer has a name describing the content of said layer: greenFish, orangeFish, etc. These names are one word, with no spaces or breaks. This is important.

Our layers are:

  • orangeFish, the orange fish
  • greenFish, the green fish
  • orangePath, the path the orange path will swim along
  • greenPath, the path the green path will swim along
  • sun
  • oceanScene, which is the water and the sand
  • sky

Save the Illustrator file as an SVG. It’s easy to do in the “Save As” settings.

Illustrator will give a pop-up and you can leave it be.

Once you’ve saved the file as an SVG in Illustrator, open the SVG in a text editor. Programs like Notepad or TextEdit are free with your computer. They are perfectly functional, but I use TextWrangler, which you can download for free. It color-codes tags in HTML and makes it easier to organize what you’re writing. Sublime and other editors are fine, too.

When you open the file in a text editor, it could look rather daunting if you’ve never looked at SVGs in text editors. Looks like a lot of gibberish, right?

And yet while it looks foreign at first, certain things will look familiar. Just as p tags and div tags need opening tags and closing tags, so do g tags. In SVGs, g tags are group tags. Another way to think of g tags is to think of them like div tags for SVGs. Like div tags, g tags can have classes and IDs.

Look at the line that says “viewbox.”

Look at the part that says viewbox=”0 0 600 400.” That 600 means the box for your SVG is 600 pixels wide and 400 means it is 400 pixels tall. We’re going to eventually delete that part, but before we do, write down those two numbers somewhere or copy them into another file.

Write them down yet? Ya sure? OK, good.

In your text editor, highlight everything from the first line until the space just before the first g tag.

Got it highlighted? Good. Now delete that.

At the bottom of the document, highlight everything after the last closing g tag. And then hit delete.

Now select all that’s in the document and copy it. We’re ready to add it to our HTML file: starter.htm.

Look for the part that says, “HIGHLIGHT THIS AND PASTE YOUR SVG OVER IT!” Highlight that part, and well, do what it says: Delete it, and paste your SVG that you’ve cut and pasted.

In starter.htm, that is going to be on line 30.

OK, now that you’ve pasted that, look for the areas that say “viewBox” and “enable-background.” Particularly, notice that they each include a line that says “0 0 XXX XXX.”

This is why I told you to write your width and height down. Or paste it somewhere. Because now you need it.

Paste over “XXX XXX” with your actual width and height. In our case with our file, we had a width of 600 and a height of 400, so we changed “0 0 XXX XXX” to “0 0 600 400″ in our file.

Open up responsive.js. The top three lines of the file will look like this:

Change the XX to reflect the appropriate value. Our exercise had a width of 600 and a height of 400.

Save the JS file and close it. You’re done with it.

At this point of the process, if you were to open up starter.htm in a browser, you’d get a static, non-moving image.

Now we are ready to start animating!

In your text editor, in starter.htm, find the g tag for sun.

Most of that code is for the orange part on the outside. The circle tag is for the middle circle of the sun.

The code that will do the animating will look like this:

<animateTransform attributeType=”xml”
attributeName=”transform”
type=”rotate”
from=”0″ to=”360″
begin=”0″ dur=”10s”
repeatCount=”indefinite” />

What that does is rotate the sun from 0 degrees to 360 degrees, beginning 0 seconds into the animation. The “dur” refers to the duration, which we have as 10 seconds. Where it says, “repeatCount,” we’ve left a value of “indefinite,” meaning we want it to repeat indefinitely. We will paste that just before the closing g tag. That will make our sun rotate.

Test it in the browser, and it should work!

Now we want to add code that will have the sun float up after 2 seconds. That could will look like this:

<animateTransform
attributeType=”XML”
attributeName=”transform”
type=”translate”
from=”0,0″ to=”0,-400″
begin=”2s” dur=”2″
fill=”freeze”/>

This will move the sun from an X,Y coordinate of 0,0 to 0,-400, 2 seconds in and over a period of 2 seconds. In other words, want it to move up 400 pixels over 2 seconds. We will paste that in the sun group, just after where we posted the rotating code: before the closing g tag.

Test it in the browser, and it should work. Except now we see that when the sun starts moving up, it has stopped rotating. We want it to keep rotating, though, as it moves up.

What we need to do is to add <g> tag between <g id=”sun”> and the first <path> tag. Then we add </g> tag before the second <animateTransform> tag.

That keeps the rotating animation going while moving the whole sun upward.

Now we want to add code that will have the water and sand float up after 2 seconds. That could will look exactly the same as the code we just added to the sun:

<animateTransform
attributeType=”XML”
attributeName=”transform”
type=”translate”
from=”0,0″ to=”0,-400″
begin=”2s” dur=”2″
fill=”freeze”/>

We add it to the code for “oceanScene,” which contains both the water and the sand. We add just before the final g tag:

This will move “oceanScene” from an X,Y coordinate of 0,0 to 0,-400, 2 seconds in and over a period of 2 seconds.

Test it in the browser, and it should work!

Now when we look at the page in the browser, we should see the sun rotate, and then after two seconds, the sun, water and sand move up. That gives the appearance that we’ve panned down to the bottom of the sea.

Now, all we need to do is add the animation that makes our fish swim!

So, in the Illustrator file are two paths that we’ve put on layers: orangePath and greenPath. They both have no fill and no stroke.

Here’s how they look in code:

We want the orange fish to move along orangePath. We want it to begin at 4 seconds, and take 4 seconds to complete. We want that to repeat indefinitely. Here’s the code that would do that:

<animateMotion
xlink:href=”#orangeFish”
dur=”4s”
begin=”4s”
fill=”freeze”
repeatCount=”indefinite”>
<mpath xlink:href=”#orangePath” />
</animateMotion>

We want almost identical code for the green fish. We want the green fish to move along greenPath. But we want it to start a second after the orange fish, and have the green fish swim a little slower. So with this tag, we want it to begin at 5 seconds, and take 5 seconds to complete. We want that to repeat indefinitely. Here’s the code that would do that:

<animateMotion
xlink:href=”#greenFish”
dur=”5s”
begin=”5s”
fill=”freeze”
repeatCount=”indefinite”>
<mpath xlink:href=”#greenPath” />
</animateMotion>

Now we just need to add that code to our file, starter.htm. In the past examples, we have been adding tags inside g tags. These animateMotion tags, though, will be placed outside of any g tags. These will be pasted before the closing svg tag.

And that, friends, is how to animate an SVG.

I found that I had to adjust my Illustrator file and resave it to SVG a few times to get the positions just right. The first few times, I had my fish too low, then too high, just a hair too right, etc. Having to toggle between Illustrator and a text editor was cumbersome, and that’s a complaint I’ve heard on a few different SVG podcasts.

When I made this, I got a lot of the code from examples I Googled. This example from CSS-Tricks was especially helpful, as it was where I got the code for how to animate something on a specific path.

There’s a lot more, of course, but that page has a great overview to get started.

Share

How to make your own Mr. Map Generator with your own SVG

March 26th, 2015

A few days ago, I wrote about a responsive mapping tool I created called Mr. Map Generator and explained how to use it. Charles Apple blogged about the reasons behind why I created the tool. In the days since, people have reached out to ask me how they could make similar generators for their own cities, states, countries, and so forth.

The aim of this post is to walk you through the process of how to do that, starting with an Illustrator AI file and ending with testing it to make sure it works. It might seem like a tedious process, but it will be worth it in the end when you can easily generate maps rather quickly.

Here is a zip file that includes all you’ll need:

  • An Excel file for your data
  • An Illustrator file I’ve created for this exercise
  • A folder called “The files to make the generator”
  • A folder called “The files to make your responsive map”

Open up the Illustrator file called mapGen.ai. In this example, I’ve put together a map that divides the US into three regions: the west, the southeast and the northeast. This was an arbitrary selection of just grabbing states and making a path with the pathfinder tool. Meaning that… No, I don’t think the northeast extends down to the midwest. It’s simply relative to the other shapes, as it is the most northern and eastern of those shapes.

Each section of the map has its own layer in the Illustrator file. Furthermore, each layer has a name describing the content of said layer: southernUS, northeasternUS, westernUS. These names are one word, with no spaces or breaks. This is important.

To be safe, I select everything in the layer and then use the pathfinder tool to combine those elements to make a compound path. You can also go to the objects menu, select compound path and then select make.

Save the Illustrator file as an SVG. It’s easy to do in the “Save as” settings.

Illustrator will give a pop-up and you can leave it be.

Once you’ve saved the file as an SVG in Illustrator, open it in a text editor. Programs like Notepad or TextEdit are free with your computer. They are perfectly functional, but I use TextWrangler, which you can download for free. It color-codes tags in HTML and makes it easier to organize what you’re writing.

When you open the file in a text editor, it could look rather daunting if you’ve never looked at SVGs in text editors. Looks like a lot of gibberish, right?

And yet while it looks foreign at first, certain things will look familiar. Just as p tags and div tags need opening tags and closing tags, so do g tags. For the sake of this exercise, let’s think of g tags as like div tags for SVGs.

Look on one of the earlier lines in the code, probably around line 6.

You see that, right? Of course you do: one of the g tags has an ID of “southernUS.” It has that ID because that’s the name of one of the layers from the Illustrator file. Whatever those layers are called will be the same names used as the IDs for the corresponding g tags. That’s why it’s important to name them something easier to distinguish from each other than just using “Layer 1,” “Layer 2″ and “Layer 3.”

Look just above that line to line 5, particularly the part that says “viewBox.”

Look at the part that says viewbox=”0 0 337.5 212.5.” That 337.5 means the box for your SVG is 337.5 pixels wide and 212.5 means it is 212.5 pixels tall. We’re going to eventually delete that part, but before we do, write down those two numbers somewhere or copy them into another file.

Write them down yet? Ya sure? OK, good.

In your text editor, highlight everything from the first line until the space just before the first g tag.

Got it highlighted? Good. Now delete that.

At the bottom of the document, highlight everything after the last closing g tag. And then hit delete.

Now we just have to clean up the file a bit.

In my original file, the shapes had a black stroke and a white fill. We want to get rid of that. Do a find-and-replace search for fill=”#FFFFFF” and replace it with nothing.

Next, do a find-and-replace search for stroke=”#000000″ and replace it with nothing

The last find-and-replace search is to find all the g tags that include an id. Our file will have three.

By adding class=”state,” we are assigning a class to our three g tags. That class is defined in the CSS files already downloaded.

Now select all that’s in the document and copy it. We’re ready to add it to our two different HTML files.

We have two files: baseForm.htm and starter.htm. The first one, baseForm, is the template for the page where you actually paste your data, click the buttons, decide your colors, preview your map, etc.

The other file, starter.htm, is the blank file that will become your map that you post.

In both files, look for the part that says, “HIGHLIGHT THIS AND PASTE YOUR SVG OVER IT!” Highlight that part, and well, do what it says: Delete it, and paste your SVG that you’ve cut and pasted.

In starter.htm, that is going to be on line 34.

In baseForm.htm, that is going to be on line 89.

While you’re in those files, notice the parts that say “viewBox” and “enable-background.” Particularly, notice that they each include a line that says “0 0 XXX XXX.”

This is why I told you to write your width and height down. Or paste it somewhere. Because now you need it.

Paste over “XXX XXX” with your actual width and height. So if your SVG had a width of 300 and a height of 400, “0 0 XXX XXX” should become “0 0 300 400.” In our case with our files, we had a width of 337.5 and a height of 212.5, so we changed “0 0 XXX XXX” to “0 0 337.5 212.5″ in our files.

Save the two HTML files, close them, and go back to the two folders. In both folders, there will be a JS file called responsive.js. Open both of those.

The top three lines of each one will look like this:

In both files called responsive.js, change the XX to reflect the appropriate value. Our exercise, with our three regions of the US, had a width of 337.5 and a height of 212.5.

Save the JS files and close them. The only thing left now is to format your spreadsheet.

In the zip file you downloaded, open the Excel spreadsheet called data. It should be blank and look like this:

We have three columns: “G id name that matches layer names in Illustrator,” “What name you want to appear in the rollover,” and “Dataset.”

We’ll use an example from the previous blog post about how to use Mr. Map Generator. Here is a screen grab we had of state-by-state data about the “Dawson’s Creek” finale, showing the percentage of people in each state who rooted for Joey to end up with Pacey, Dawson, or neither.

Notice that the first column is the US postal codes, the second is the name of those states, and columns three through five are actual numbers.

The postal codes match the names of the g tags in the SVG. So, the row with MA in the first column corresponds to Massachusetts, and the g in the SVG has an id of MA. For this to work, the text in the first column has to match the g tags in the SVG files.

In our Illustrator file, we gave the layers these names: southernUS, northeasternUS, westernUS. Thus, our g tags have the ids of southernUS, northeasternUS, and westernUS. Thus, we have to use those in our first column in our Excel spreadsheet.

The second column is where we type whatever we want to see when the user rolls over the shape. That can be whatever you want.

And the third, fourth, fifth, sixth, seventh, and forever onward columns can be, well, the actual data.

So now you’re ready to test out your generator!

Copy your data from your spreadsheet, and in baseForm.htm, paste it to try it out.

If it doesn’t work at first, refresh it once or twice. If it still doesn’t work, check console.log to see if any errors appear.

If it does work, copy the code from step 8 and then paste it in code.js.

It might seem like a tedious process, but it will be worth it in the end when you can easily generate maps rather quickly.

Share

How to use Mr. Map Generator, a map tool for journalists

March 24th, 2015

In a recent blog post about journalists using technology to make their lives and jobs easier, I mentioned that I created templates in Illustrator of the maps we use the most. I saved those as SVGs and then turned those SVGs into HTML. The heavy lifting was writing code for a map generator that would allow me to copy and paste spreadsheet data to color-code the maps for me. It took some time, but it paid off. It creates responsive maps that I can easily pluck onto the website, but I can also print-to-PDF those suckers and have the basis for the print version. People who have made vector maps will know that the “old way” of having to select each state/county individually to color-code it was a pain. And fraught with the possibility of introducing error.

Mr. Map Generator has maps of the US, Massachusetts and Boston. For this post, I’ll explain how to use the US map generator, though the concepts will be almost the same for the other map generators.

GETTING STARTED

1. We’ll start with a spreadsheet. I usually use a Google Spreadsheet or an Excel Spreadsheet. In our fake spreadsheet, we will pretend it’s a spreadsheet about the “Dawson’s Creek” finale, showing the percentage of people in each state who rooted for Joey to end up with Pacey, Dawson, or neither. Obviously, these are made-up numbers, because most people will agree that Joey should have ended up with Pacey. But for the sake of this exercise, we will pretend.

Format your data with state postal codes in the first column, state names in the second column, and data in however many columns you want, starting with the third column. You can download a zip for the responsive files here or if you just want to make a print map, download the Excel template here. Neither the postal codes or state names need to be in any order.

2. On the page of the US map generator, paste your data in the field that says, “Paste your data in this field.”

3. After pasting your data, click on the button that says, “Click here to select your data set.”

4. After you’ve done that, you’ll get a button that shows you the columns from your spreadsheet. In this scenario, as we’ve created a fake spreadsheet, our options are “Rooted for Joey ending up with Pacey,” “Rooted for Joey ending up with Dawson,” and “Rooted for neither Dawson nor Pacey.” For the sake of this exercise, I’ve clicked on those who “Rooted for Joey ending up with Dawson.” Which, of course, was not how it ended.

5. Step 5 allows you to select your color from the options of red, blue, a gold/yellow, green, and purple. Step 6 allows you to decide whether you want the map to have 2, 3, 4 or 5 colors, or to be a chloropleth where the smallest value is the lightest shade and the largest value gets the darkest shade.

6. In our case, we’ve opted to have four shades of red. The generator is designed to calculate your smallest value and your largest value, and then calculate the ranges in between those two values. I strongly suggest not leaving those values as is, for a variety of reasons:

  • Outliers that skew the ranges
  • Ranges that aren’t intuitive (6.1-11.6, 11.6-17.1, etc.)

7. Once you have selected your color and ranges, you can click a button to preview your map. Do that.

Here’s what your map will look like:

8. You’ll then have the option to generate your code. It will appear in a text box.

9. To make a web version, download these files if you didn’t already do so in the first step. Copy the code in the box above and paste it inside the file called code.js. Then open the HTML in a browser. You don’t have to edit or change any of the other files. When you upload it to your server space, you’ll need four files:

  • code.js
  • map.css
  • US-map.htm
  • US-responsive.js

10. You’ll need to add a key/legend on your own. If you inspect element on this page, you can copy the HTML you’ll need and can plunk it into US-map.htm before uploading it.

11. To use this to make a vector print map, right click and select “Print.”

12. In the print dialog box, select “Save as PDF.” I usually have it only save page 2 of the PDF, rather than saving the entire file.

13. I then open that PDF in Illustrator. Using the white arrow, I select everything I want to delete. I delete until all is left is the shapes of the states.

14. Once I’ve deleted the extra parts from the PDF, such as text characters, I have only the map left. I then plug that into a Globe template file. I’ve done enough of these that I have a starter file with the state labels in place.

If you see yourself making a lot of these, having an Illustrator template with a layer of labels is not a bad idea.

<b>RELATED:</b> How to make your own Mr. Map Generator with your own SVG

Share

“Should journalists learn code?” Well, what exactly do you mean by “code”?

March 18th, 2015

There have been many blog posts and articles that pose what has become a divisive question: Should journalists learn code?

There’s a lot of passion in the comment sections on these posts, but I’ve wondered if we’re all on the same page as to what the question means.

“Should journalists learn code?”

What do we mean by “code”? Do we mean HTML and CSS, which are markup languages? Or do we mean languages such as JavaScript and jQuery? Or do we mean Ruby? Python? C++? Journalists who don’t know what they don’t know might be tempted to lump everything together, but they’re not all the same.

What do we mean by “learn”? Do we mean learn everything until we are masters? Do we mean learn enough to be proficient? Do we mean that we should learn some of the basic concepts so we can follow conversations with our colleagues about projects?

Does this mean everyone should learn the same skills? Should reporters, editors, developers, photographers and graphic artists all learn the same programs and languages? Should they all be proficient at an expert level?

“Should journalists learn code?” will mean different things to different journalists, and the anxiety that question brings with it also brings valid concerns. Many journalists equate that question with completely changing their job. Some could think of it in terms of web galleries and managing assets on a web site. Some have told me they think of code as high-level computer programming and thus think of it as losing any aspect of reporting or editing in their jobs to instead solely write code. Others have not-unfounded worries that some newsrooms could farm out more work to fewer people. In other words, they muse, if journalists have to take on more work, and even different kinds of work, how can they do any of it effectively?

These are the concerns of many journalists, and thus we have been asking the wrong question all this time. There’s a better question to ask than “Should journalists learn code?”

The better question to ask is, “How can journalists use technology to be better at their jobs and to make their jobs easier?” A follow-up question can be, “How can markup and/or coding languages help journalists be better at their jobs and to make their jobs easier?”

These two questions are intentionally open-ended, and hopefully have a much more positive spin to them. It doesn’t imply changing your job or having to learn MIT-level technology. “Technology” doesn’t have to necessarily mean “code.” Any journalist who’s used Excel or Google Refine has used technology to make his or her job easier.

This question does not have any one right, binary answer, because each journalist will need different technologies for different reasons based on what his or her job is. As a person who makes interactive graphics, it behooves me to stay on top of the best practices for jQuery and JavaScript. But I don’t expect our metro columnists to feel the same need to master jQuery and JavaScript. They might scrape data, clean up spreadsheets or use coding languages with their reporting, because that can make their job easier.

“Should journalists learn code?” makes people defensive. They get their guards up and lose track of the ways they can mine data and use it to make their projects richer.

Here are examples of how I’ve integrated technology into my workflow to make things easier for me:

*When making bar charts in Illustrator, I never manually type the data values for the bars. I copy the chart, and modify that copy so that the text of the values appear. I ungroup that chart and voila, I have labels without me having to risk typing a typo.

*We tend to make a lot of color-coded maps, so I created templates in Illustrator of the maps we use the most: US, Massachusetts towns, Boston neighborhoods, etc. I saved those as SVGs and then turned those SVGs into HTML. That was just a few clicks and typing of lines. The heavy lifting was writing code for a map generator that would allow me to copy and paste spreadsheet data to color-code the maps for me. It took some time, but it paid off. It creates responsive maps that I can easily pluck onto the website, but I can also print-to-PDF those suckers and have the basis for the print version. People who have made vector maps will know that the “old way” of having to select each state/county individually to color-code it was a pain the ass. And fraught with the possibility of introducing error.

*When working on web projects, I almost always use spreadsheets. Lately I’ve used Google spreadsheets so that reporters and editors can make changes. I then use Mr. Data Converter to turn that spreadsheet into a JSON and then write the JavaScript/jQuery that will cycle through that data and write out HTML for me. I do that rather than having to copy and paste things, because it’s ultimately easier and because copying and pasting things into divs leaves the possibility of pasting in the wrong place.

You might sense a theme in those three examples: All three of them are processes I’ve adopted so as to minimize or eliminate errors. Cutting down on errors is good for us, our bosses, our readers and our sources. It’s good for everyone. Using technology to help me do that was worth any of the effort I put into it. It also taught me skills that allowed me to help colleagues in ways I hadn’t been able before.

The web is to our culture now what water is to a fish. If we ignore the basics of how the web works, we do so at our own peril. The more tools we have in our toolbox, the more our projects will benefit. A reporter who pores over public records could do well to understand how to scrape data from web sites. That same reporter could benefit from knowing how to clean up data, either through Excel or Google Refine.

Given the choice between two equally talented writers, I would bet news organizations want people who can do more with the web, not less with it. It’s going to be hard to find a journalism job posting that doesn’t want someone who has at least a basic understanding of general web concepts. No, that does not mean that reporters will need mastery understanding of HTML, CSS and JavaScript to get a job. But if the reporter is going to be working with designers and developers who will take that reporter’s story and turn it into a web presentation, shouldn’t the reporter at least have a broad understanding of what those people do? The reporter doesn’t need to know how to do those other jobs, but should at least know some of the challenges, including that the way a web page looks on a desktop is not necessarily how it looks on a mobile phone.

Reporters are good at researching the processes and terminologies of the organizations they cover, whether it’s a basketball team or a school board. A good tech reporter doesn’t have to be able to build the technology he’s covering, but he at least should be able to know enough to follow along when talking to sources and then be able to explain the important parts to readers. We should have that same mindset in our newsrooms. A reporter and a developer working on a big web project together will have different roles on that project, but they should at least communicate what they need from each other and how they can help each other most effectively.

Share

This week in LGBTQ news, April 7-13

April 13th, 2014

In case you missed it, here are some of the biggest news pertaining to LGBTQ issues to come out of the last week:

ACLU filed suit in North Carolina
The American Civil Liberties Union launched a new legal assault on North Carolina’s constitutional ban on recognizing same-sex marriage, urging a federal judge to quickly negate it to help children and gay couples suffering from urgent health problems. The civil rights group said it was seeking to speed up a decision in lawsuit filed in 2012 by citing the urgent health needs of a child who suffers from cerebral palsy who was adopted by one of the lesbian couples involved in the case. The ACLU also filed a new lawsuit on behalf of three other lesbian couples struggling with health conditions made more difficult because they lack legal recognition of their marriages performed in other states, said ACLU staff attorney Elizabeth Gill.

For more context:
ACLU sues for faster action to overturn North Carolina same-sex marriage ban [Charlotte Observer]
‘We don’t have time to wait,’ 78-year-old gay plaintiff says [News & Record]

—————

Federal judge ordered Indiana to recognize couple’s marriage
A federal judge ordered Indiana to recognize the out-of-state marriage of a gay couple before one of the women, who has ovarian cancer, dies. The decision, specific to the couple, who married in Massachusetts in 2013, doesn’t affect other lawsuits challenging Indiana’s ban on same-sex marriages.

For more context:
Indiana must recognize couple’s marriage [The Boston Globe]
Judge grants request to force Indiana to recognize couple’s same-sex marriage [The Indianapolis Star]
Judge orders Indiana to recognize ailing gay woman’s marriage [The Chicago Tribune]

—————

Tom of Finland stamps announced, Harvey Milk stamp ceremony at White House announced
Itella Posti Oy, the Finnish equivalent of the United States Postal Service, announced it will release new stamps featuring the sketches of Touko Laaksonen, better known as Tom of Finland. Per the announcement:

His emphatically masculine homoerotic drawings have attained iconic status in their genre and had an influence on, for instance, pop culture and fashion. In his works, Tom of Finland utilized the self-irony and humor typical of subcultures.

During his career, Tom of Finland produced more than 3,500 drawings. The two drawings on the stamp sheet were selected by graphic artist Timo Berry, who designed the stamp, and Susanna Luoto, the Finnish representative of the foundation named after Tom of Finland operating in Los Angeles.

The stamps will debut in the fall. Unless you’re my mother or my nephew, click here to see the stamps. But if you are my mother or nephew, then please, do not click there.

—————

Chelsea Manning to serve as honorary grand marshal of San Francisco Pride Parade
Chelsea Manning, an imprisoned U.S. Army private charged in a massive leak of U.S. secrets to the WikiLeaks website, will serve as an honorary grand marshal in this year’s San Francisco Pride parade. Parade organizer Gary Virginia said Friday that Chelsea Manning — formerly known as Bradley Manning — was chosen to make amends for a controversy last year. Manning was named an honorary grand marshal ahead of the 2013 parade, but had the honor revoked. Virginia apologized, saying that decision was mishandled.

For more context:
Bradley Manning won’t get Pride honors [San Francisco Chronicle]
San Francisco gay pride rescinds honour for Bradley Manning [The Guardian]
Chelsea Manning parade retraction still creating tension on SF Pride board [San Francisco Examiner]

—————

Open letter to Pope Francis urges him to change church teaching on homosexuality
The head of a homeless shelter for LGBT youth published an open letter to Pope Francis in The New York Times Sunday, asking him to change the Catholic Church’s teaching on homosexuality.

I write to you as a Roman Catholic, a former Benedictine monk and as a gay man who has spent over 30 years serving the homeless, first as a member of the Catholic Worker Movement, and now as the founder and Executive Director of the Ali Forney Center, America’s largest center for homeless lesbian, gay, bisexual and transgender (LGBT) youth based in New York City.

I write on behalf of the homeless LGBT youths I serve. I ask you to take urgent action to protect them from the devastating consequences of religious rejection, which is the most common reason LGBT youths are driven from their homes. At the heart of the problem is that the church still teaches that homosexual conduct is a sin, and that being gay is disordered. I hope that if you understand how this teaching tears families apart and brings suffering to innocent youths, you will end this teaching and prevent your bishops from fighting against the acceptance of LGBT people as equal members of society.

Read the full ad here.

—————

Alan Simpson announces support for same-sex marriage
Former US Senator Alan Simpson has filmed a same-sex marriage commercial that will air in Wyoming and other western states. Simpson says as a Republican he believes one of the party’s core values is the right to be left alone. He says whether people are gay or lesbian or straight, if they love someone and they want to marry, they should marry.

Share

Obama’s stance on gay marriage in 2008, and what that means in 2014

April 13th, 2014

This past Friday, Mike Huckabee referenced Obama’s 2008 views on gay marriage when speaking to Laura Ingraham on “The O’Reilly Factor”:

The position that I hold is the position that Barack Obama, Hillary Clinton and Joe Biden held in 2008. Barack Obama held it until 2012. And my question that I would love to pose to the president is this: Mr. President, please explain that when you said in 2008 at the Saddleback Church forum that you stood for traditional marriage and you did so because you were a Christian and because it’s what the Bible taught, please answer: Were you lying then, are you lying now, or did the Bible get rewritten?

View the video below:

Huckabee’s not the only one referencing Obama’s stance in 2008. In the last few weeks, in the wake of Brendan Eich’s resignation as CEO of Mozilla, several pundits and bloggers have referenced Barack Obama’s views on same-sex marriage in 2008 when he was a candidate running for president. The unifying question was this: If Brendan Eich had to resign as CEO of Mozilla because he gave $1,000 to support Proposition 8 in 2008, why does Barack Obama get a pass for saying in 2008 that marriage should be between a man and a woman?

It echoes a similar question posed by Larry Elder of WND a few years ago, who asked why Rick Santorum was being scrutinized for his views on same-sex marriage, but Obama was getting a “pass” when, in Elder’s estimation, Obama had similar views as Santorum had.

DID Obama share the same viewpoint as Santorum, Eich or Huckabee? Well, how comparable Obama is to Eich, Huckabee or Santorum depends on how narrowly or broadly you define his views in 2008.

Indeed, in 2008, at Saddleback Church, Obama did say, “I believe that marriage is the union between a man and a woman. Now, for me as a Christian… it is also a sacred union. God’s in the mix.”

Click the YouTube video below to watch in full.

In that video, after saying that he believed that marriage is between a man and a woman, then-candidate Obama said he supports civil unions. He also said he does not believe in a constitutional amendment defining marriage. As recently as 2012, a month after Elder’s column comparing Obama to Santorum, Santorum voiced opposition to civil unions for same-sex couples while saying that he couples could work through the existing legal system to use contracts to get each of the rights associated with marriage.

Thus, to compare someone’s views on same-sex marriage to Barack Obama’s view in 2008 simply on the definition of marriage as a man and woman doesn’t tell the whole story on Obama or that other person’s viewpoints on civil unions. To only stop at the man-woman definition of marriage is too narrow and potentially misrepresents both Obama and the people to whom he’s being compared.

Specifically, if we’re comparing Obama and Brendan Eich. Eich was pressured to resign because he gave $1,000 to support Proposition 8. Obama, in 2008, did say, “I believe that marriage is the union between a man and a woman.” But in 2008, Obama also said that Proposition 8 was “divisive and discriminatory.”

It’s unknown why Eich supported Prop 8, or what his personal views are. When the donation became public knowledge, he said he didn’t want to discuss Prop 8 on his blog or on Twitter. He said he wanted to focus on the company, not his personal beliefs.

[W]ithout getting into my personal beliefs, which I separate from my Mozilla work — when people learned of the donation, they felt pain. I saw that in friends’ eyes, [friends] who are LGBT [lesbian, gay, bisexual, or transgendered]. I saw that in 2012. I am sorry for causing that pain.

Hampton Catlin, a developer who couldn’t legally marry or start a business with his partner until the Supreme Court ruled last year that backers of Proposition 8 lacked standing, had blogged that he and his husband Michael would be pulling their product from the Mozilla Marketplace. Many came to see them as the figureheads of the boycott. After Eich’s resignation, Hampton Catlin wrote:

I met with Brendan and asked him to just apologize for the discrimination under the law that we faced. He can still keep his personal beliefs, but I wanted him to recognize that we faced real issues with immigration and say that he never intended to cause people problems.

It’s heartbreaking to us that he was unwilling to say even that.

We absolutely don’t believe that everyone who voted yes on Prop 8 is evil. In fact, we’re sure that most of them just didn’t understand the impact the law would have. That’s why so many people have changed their mind in 4 short years – because they saw the impact and pain that the law caused to friends and family members.

People think we were upset about his past vote. Instead we were more upset with his current and continued unwillingness to discuss the issue with empathy. Seriously, we assumed that he would reconsider his thoughts on the impact of the law (not his personal beliefs), issue an apology, and then he’d go on to be a great CEO.

The fact it ever went this far is really disturbing to us.

Many think that Eich got a raw deal and it was unfair that he was pressured to resigned. But has Obama gotten a clean pass on his statements?

If Obama or anyone who voiced opposition to same-sex marriage ever got a “pass,” it certainly wasn’t an across-the-board pass from the LGBTQ community. A quick Google search of the terms “Obama” “gay marriage” shows quickly that prominent sites and blogs about LGBTQ issues — The Advocate, The Bilerico Project, GoodAsYou and Towleroad — show that Obama, Hillary Clinton and other Democrats did not get a “pass” on their stances on same-sex marriage or other issues. Bill Clinton, the president who signed the Defense of Marriage Act into law, didn’t receive a pass last year when he wrote an op-ed denouncing the law.

When former Florida governor Charlie Crist announced his support for same-sex marriage in an interview this past winter, he, too, compared his previous stance to that of Obama in 2008, but when comparing himself to Obama, he didn’t simply stop at the man-woman definition of marriage:

The President and I had the same view: we supported civil unions. I saw the interview he did with Robin Roberts last spring [in which he expressed support for same sex marriage]. I’m sure you’ve seen it. It’s powerful, because you can tell he’s speaking from the heart.

I can’t speak for the President, but I suspect that to some degree, like me, he felt his support for civil unions was political. And so he’s finally saying, ‘Enough is enough. I’m over this. I’m not going to play the political angle anymore. I’m tired of it.’ Which is just the way I feel. You get to a point in your life where you say, ‘I’m just going to tell it.’ And here I am… I’m telling it. And I don’t care what anyone thinks.

Similarly, Richard Socarides, a former adviser to Bill Clinton, conceded in a New Yorker piece last year that Bill Clinton’s signing of the Defense of Marriage Act was fueled by politics rather than personal views.

As the tide turns and public opinion changes, more and more famous politicians who opposed same-sex marriage will announce a public change in their stance on the issue. They might use the word “evolved,” like Obama did, or they will cite a family member is the reason for their change of heart, like Republican Rob Portman did in March 2013.

And as they voice their support for same-sex marriage, will their previous stances be compared to those of Barack Obama in 2008?

Share