January 19, 2020

The Great Asshole Purge of 2020 and Beyond

What the world needs now is another cis white dude explaining mansplaining.

But I made this thread with the goal of reducing both mansplaining AND assholes, and think it might help your inner monologue whenever you’re interacting with others, regardless of how you self-identify.

January 1, 2020

How to fix a Boss RC-1 Loop Station when it’s not working

I recently bought one of these guitar pedals and I’ve been really pleased. But a few days ago it started acting funny; loops were getting interrupted midway, the circular LEDs on the display wouldn’t match the duration of the loop that was playing, and the whole thing was just acting weird.

After lots of fruitless Googling for a solution, I was ready to return it as a dud. But then I came across this video that showed what I was doing wrong, and fixed it in about a minute.

Hopefully others who are having trouble with a “broken” Boss RC-1 pedal will come across this post and this video.

Rock on.

December 28, 2019

Storing Time-Series Twitter Engagement Data in a Graph Database

I wanted to better understand how Tweets get traction, and how that contributes to people’s follower counts. So I wrote some Node.js code that connects to the Twitter API every so often, looks at the people I follow and their tweets, and saves the results into my favorite graph database software, Neo4j.

Editor’s Note: Neo4j is not paying me for this post, but they totally should.

It took some trial and error, but I’m pretty happy with the schema I’m using. Here it is.

Every time the data is fetched from the Twitter API, a new “Timestamp” node is created. That node has 2 connections from the User node and the Tweet node, and the actual stats about the user and the tweet are stored in those 2 connections. That’s the magic part, so I’ll reiterate: The time-series data is stored inside the connection, not the node.

(The files are insiiiiiiide the computer….)

Let me explain with pictures.

For this example let’s use one of my favorite high-profile data scientists, Max. Here you can see Max (in green) posted a tweet (in blue). But let’s look at those connections to the tan timestamp node below.

In the screenshot above, I’ve clicked on the connection between the tweet and the timestamp, so you can see the data it contains. You can see it’s got one favorite and no retweets.

Now, in real life I go ahead and like that tweet, run my script again, and let’s see what happens…

Holy shit it worked! There’s another timestamp node. And when you click the connection between that new timestamp and the tweet, you can see the new favorite count.

So that’s the basic technique. You can see that the same approach works for tracking follower growth too. For example:

There are more complicated ways of storing time-series data in graphs (Google “time trees”) but this simple approach seems to be working well for me, and will hopefully yield some interesting results.

So that’s it. That’s the post.

(PSSST: I’m having lots of fun with this nerdy graph stuff and will be posting more in the future. For updates you should follow me on Twitter, where you bet your ass I’m tracking my follower count using this technique.)

December 20, 2019

Getting fancy with CSS’s Position Sticky

Yesterday we published this ambitious story on Esquire about competitive yoga, which apparently is a thing that exists.

It’s the result of an experimental collaboration between a few different departments within Hearst Magazines, each possessing vastly different skillsets but all sharing a love for quality storytelling. The goal: Abandon the various elements on a modern webpage that compete for your attention (ads for instance – of which this article has none) and just tell a damn good story.

I’m proud of how it turned out, and wanted to share some learnings about the nerdy CSS stuff featured in the story.

One of my favorite parts of the story are these little parallaxy breaker images. Parallax can be a dirty word in web design because it’s so easy to screw up, but we developed this method that adds some slick visual candy to the page without performance costs on modern browsers, so I thought I’d walk you through how it’s done.

Ready? Ok, let’s go.

The first step is to get CSS “position:sticky” working in a basic way. In this example, the blue box is sticky and the image element is its sibling. They’re wrapped in a div, which is important to get sticky positioning to work.

Now that the basics are working (and we have silky-smooth browser-native scroll behavior with no JavaScript!) we just need to move things around and adjust margins and padding. Here we go…

First we want the text to be positioned in the center of the screen. We change it from “top:0px” to “top:50%”, and we get this:

The blue box gets sticky at around the right place, but it leaves an ugly gap; that’s where it “lives” in the document flow. So how do we fix that? Easy! Just put a negative margin on the top of the parent wrapper!

To visually clean this up, you can put a white background on whatever div you’re invading with your top negative margin. Then you’ll have something like this…

Ok, so now the text enters the image smoothly but exits lamely. Let’s make the bottom as smooth as the top.

If we add some extra height below the image, it will scoop up the text instead of the image itself. Badass.

To hide that text below the image, we can apply a negative margin just like we did at the top of the parent element.

Sweet! But we’re not quite done… What happens if the user resizes the browser and the height of the box changes? Since the size of the top/bottom margins depends on the height of the text box, this would throw off the vertical alignment. For example:

So how can we fix this?

Who gives a shit!

Kidding… Of course you give a shit. That’s why you’re still here.

Here’s where some sparingly-used JavaScript can come in handy. When the page is resized, you can dynamically calculate the height of the text area, and use that value to set the negative margins we hard-coded above. (Just make sure to “debounce” your function otherwise you might crash someone’s browser and look like a fool.)

So the only thing left is the transparency part. The trick here is to bust out Photoshop and replace the main image with a semi-transparent image, which will become the “foreground”. Then you use the regular image and absolutely position it in the parent container as the “background”.

After some z-index fiddling, you’ve got your effect. The more you mask out of your foreground image, the cooler the effect will be.

(I was lucky to work with Mike Kim, whose attention to detail is amazing. Anyone that can silo hair wins at Photoshop.)

I hope this was helpful. If you have any questions or want to show off anything cool you’re making with CSS position:sticky, hit me up on Twitter.

April 30, 2019

The Death of Dashboards

Last week I had the privilege of speaking at Slack’s yearly conference about some of the fun stuff I’ve been working on at Hearst.

There’s such great energy and momentum around Slack and the community of users and developers. It really feels like we’re in the infancy of redefining “work”.

“Dashboards are where data goes to die” is a bold statement. So I’ve been walking the walk, getting my hands dirty with graph databases and conversational UX. Excited to see where this leads…

February 20, 2019

Judging People Who Don’t Exist

TLDR: I made a thing and it got some press.


Judging people by their appearance feels icky. Why? Because there’s more to people than their looks; we need to consider the whole package.

(“But they have such a good personality!”)

But what if someone exists in appearance only? A cover without a book, solely for your judgement?

That sounds like a fun place to make guilt-free snap judgements, so I built it!

Please enjoy “Judge Fake People“, a place where you can vote on the appearance of people who don’t exist.

Background

Like many internet addicts, I was blown away by NVIDEO’s demo using style-based Generative Adversarial Networks to generate faces. They seem to have crossed a threshold for generating artificial images that can genuinely fool our brains.

Flash forward to last week when I saw Philip Wang’s amazing single-serving website thispersondoesosxist.com.

It was fascinating to see a photo-realistic face of someone that doesn’t exist. Philip’s writeup does a great job explaining his motivations and this implications behind this groundbreaking technology.

But I just wanted to turn it into hot or not.

So I wrote a script to download an image from thispersondoesnotexist.com every 5 seconds and built up a collection of around two thousand fake people. Then I made a voting system with php/MySQL and some filters to show the highest and lowest rated faces. And I enabled comments just for fun.

So sit back, relax, and enjoying rating the attractiveness of people who don’t exist right here.

November 14, 2017

I trained an A.I. to generate alternative band names

I’ve been messing around with machine learning lately. It’s cool.

Inspired by Dan Hon’s article “I trained an A.I. to generate British placenames” I used the same techniques to generate a bunch of alternative band names from this data.

Here are some of my favorites. See you at the Dong Muse show!

Ala Rlaga
Banda Bums
Bed
Benam Torus
Bibs
Bind Ride
Birdy Chind
Bish Sors
Blart on Yastip
Blave
Boove Purs
Breck
Buscobline
Capone
Carter Fiber
Chevernes
Chewic Tornes
Chicks
Dant Calle
Dative Gains
Daxe
Day Jaden
Dead Stars
Dear Curuse
Dong Muse
Dratth
Ellam Chanter
Evinc Meat
Feds
Fich
Fick Farret
Fokchend
For Band Fewter
Forchinks
Goster
Got Erado
Grey Torley
Herlack Shins
Ivich
Jool Eape
Kitte Day
Krvees
L4
Lackely
Lame Meth
Lowens
Mabon
Manty The Stalk
Maping Sidpine
Mi
Mochers
Mothing the Lean
Pabon Sonker
Pirllay Kobeck
Reckerds
Riskana
Rollling Belds
Rudlo’s
Saydon Cotestins
Scone
Sentarlo
Senvent
Sharks
Shomon
Soworants
Spitwald
Sspparter
Superen
Swaranty
Tami
The 1’H
The 3
The Arkers
The Avistiry
The Bad Sores
The Bavenan
The Bland
The Blokes
The Camolboos
The Chills
The Churchens
The Cleat
The Crami
The Crans
The Crapens
The Dadkind Blind
The Dradal Beats
The Endorras
The Fapinean
The Five Maves
The Frey
The Gilders
The Gorkers
The Kild
The Lucadenthon
The Mackings
The Modhen
The Moles
The Morkern
The Porres
The Pratent
The Prinnesicle
The Puviser
The Ravelline
The Soon
The Spians
The Suntster
The Swemties
The Uf Nerge
The Vot Paidies
The Wees
The Younds
Thish Meman
Treet
Whean Rils
Wuscany

October 20, 2016

Dynamic Projection Mapping

Damn. They’re getting pretty good at this.

August 29, 2016

How neural networks create images

This is fascinating stuff.

According to Gene Kogan on Twitter: DGN “deep generator network” is a neural net that synthesizes realistic images by learning low-dimensional encoding over an image set and samples from it to activate neurons associated w/ a class, e.g. cheeseburger.

More examples here.

This is some seriously future shit.

July 18, 2016

Rockstar Developers

For the last few months I’ve been leading games product development at Hearst Digital Media working with some amazing folks building some pretty awesome stuff. We’re bullish on using the latest web technologies to bring app-like game functionality onto the web, and it’s been a blast so far.

We’ve just signed a deal with a big gaming company (can’t say who yet… but you’ve heard of them), and with wind in our sails we’re expanding the team. If you’re a rockstar full-stack developer or know one, check out the job description here.

August 21, 2015

Interactive Subway Station Maps

I’ve been having way too much fun with these. Last week I made an interactive sharable NYC subway map called “What’s Your Subway Station Number” and it’s been making its way around the web, being covered by Gothamist, Curbed, Brooklyn Magazine, 6sqft, and more.

And yesterday I made one for Boston, which you can see here.

Boston.com just did a nice writeup, and I’m hoping it brings Bostonians as much fun (and lost workplace productivity) as it’s brought New Yorkers.

Based on the stats, people have spent a combined 370,000 hours playing with just the NYC map alone. Crazy!

August 17, 2015

How to Make a Fillhouette

I discovered something pretty cool in Photoshop. If you select the inverse of a person’s silhouette and apply a “Content-Aware Fill”, the results can be funny, interesting, and sometimes quite beautiful. And it literally takes about 15 seconds.

Here’s how to make a “fillhouette”.

1: Find an image that’s not too difficult to silhouette. Anything with well-defined edges of the person is good.

2: Select the person. The easiest way is to use the “Quick Selection Tool”.

3: Shrink the selection so it’s a few pixels inside the person’s silhouette. Go to “Select > Modify > Contract…” and choose a value around 3.

4: Now invert the selection so the background is selected instead of the person. Go to “Select > Inverse”.

5: Now, just go to “Edit > Fill…” and choose “Content-Aware” from the dropdown. Press OK and you’re all set!

Here are some other fillhouettes I just quickly put together.

I’d love to see what the creative community can do using this technique, so I started a Tumblr where I’ll be posting the best examples I come across: fillhouettes.tumblr.com

August 10, 2015

The Best Drummer You’ve Ever Heard But Never Heard Of

It’s pretty impressive that 2 people can create such a groove:

But it’s less surprising when you learn the drummer is one of the most sought-after session drummers in history, Matt Chamberlain. Oh, and he was in Perl Jam.

You might not recognize Matt Chamberlain’s face, but you probably recognize his deceptively-simple, rock-solid driving beats. It’s pretty cool to realize that what makes the following songs work so well is their drums, and the drummer is all the same guy:

Fiona Apple, “Criminal”

One YouTube commenter described his performance as such:

This is a tough part to play consistently, because you’ve got to portray strict 8th-note rock on one hand, yet make it swing at the same time. Drummer Matt Chamberlain does this beautifully. The slightly late, monotonous, “stiff-armed” hi-hat 8th-notes suggest all rock, but the little ornamental notes on the snare and the occasional stuttered 16th on the hi-hat give it a certain swing and a most unique sway, too.
Chamberlain is an immensely talented drummer, so it’s not at all surprising that he’s among the most in-demand studio players of our time. He just makes it all sound so simple. Playing at his level of depth, however, is most definitely not!

The Wallflowers, “One Headlight” (Impressive cover video btw…)

Perl Jam, “Even Flow”

John Mayer, “Home Life”

And in recent news, he’s collaborated with a software company to create digital loops for musicians, and this is an interesting overview of his style:

Specifically, these beats are pretty amazing. Seemingly simple, but endlessly complex.

Lastly, listen to this story about Matt Chamberlain setting up and recording a drum track for The Long Winters. What he ended up doing completely changed my understanding of how talented a drummer can be. He basically took his performance, mixed and edited it in his head, then played 1/5 of the part 5 times in a row so the recordings could be overlayed to create the final drum part. I didn’t understand it the first time either. Give it a listen here.

So to anyone who thinks that being a “great” drummer is a matter of being able to play fast or be flashy, think again.

Just like with great hardware or software, sometimes less is more.

July 29, 2015

Catching Sand Fleas

I didn’t even know these things existed. I’m sure they’re harmless, but as far as I’m concerned it’s another reason to avoid the beach.

July 16, 2015

Airplane Vs Zero Hour

Who knew? “AIRPLANE!” is actually a shot-for-shot remake of the 1957 film, Zero Hour.

June 13, 2015

Drone Ownership in a Nutshell

This video beautifully symbolizes my experience with Drones.

May 5, 2015

One Week in One Minute

While most time-lapse videos show things moving, with this one I wanted to capture as little motion as possible. My thinking was that if there’s anything gross living in the water meter pit in my basement I wanted to know about it. So I set up this time-lapse and condensed a week of time into one minute.

It’s interesting to see the things that move; the pipes condensing, the water meter moving during the day, and the water level slowly lowering. But what I think’s more interesting are the areas that don’t move. It’s a little eerie to see the days fly by while literally nothing happens.

It kinda reminds me about this recent story about a French apartment left neglected and untouched for 70 years, or the seal on King Tut’s tomb as it was discovered thousands of years exactly how it was left. There’s a very specific part of my brain that gets tickled by this stuff.

March 17, 2015

Terminator-Inspired 3d Printer

This is a pretty cool 3d printing demo.

It’s fun to extrapolate how fast 3d printing will get in the future. We’re getting closer, quite literally, to objects appearing out of thin air.

March 3, 2015

Hantu Tinggi, or, The Creepiest Video I’ve Ever Seen

Hantu Tinggi is a Malaysian mythic demon with a similar vibe to Slender Man. Fine. Nothing too scary there. Every culture has its share of ghouls and goblins.

But this video is seriously one of the creepiest things I’ve ever seen.

Via Reddit.

January 28, 2015

The New Tesla’s “Insane Mode”

Check out this video of the new Tesla P85D accelerating from 0-60 in 3.2 seconds.

To get a sense of the amazing forces during acceleration, check out how the little girl’s phone clings to the seat at the 2:47 mark. Unreal.

January 23, 2015

Ridiculous Archer Video

Meet Lars Andersen. This guy’s talents are amazing. But there’s something about seeing him running around shooting those arrows that really cracks me up.

January 8, 2015

Great Drone Catch

Skip to the end…

December 1, 2014

Dead Fly Art

So apparently this is a thing. The images below are from The Chive in 2009 and you can find more by simply Google image searching “dead fly art.”

dead_flies_art_01

dead_flies_art_03

dead_flies_art_07

Happy Monday.

November 28, 2014

Making the 1980s HBO Intro

If you’ve ever seen 1980s HBO, you’ve seen this intro. Enjoy this fascinating (and extremely dated – I mean, they had to physically create a bronze HBO!) making-of.

As a young kid, seeing the camera go inside the “O” with the spinning lasers was one of the coolest things I’ve ever seen.

November 17, 2014

The $135 Million Oopsie

This is a pretty fascinating image.

NOAA-N'_accident

It’s the NOAA-19 weather satellite that accidentally tipped over during manufacture in 2003. Repairs cost $135 million dollars. Can you imagine?

Via Gizmodo

Dynamic Target Tracking Camera

This video gives new meaning to “keep your eye on the ball.”

November 11, 2014

First Steps in One World Trade Center

I’ve been literally watching One World Trade Center take shape since construction started. So today when I got the chance to spend a few moments in the building for the first time, I excitedly snapped a few photos with my phone.

The lobby is huge and gorgeous. It smells like a mixture of “new car smell” and fresh paint.

Security was very nice but not very subtle. When I entered from the street a few large (but kind) men slowly descended upon me and guided me to the main security desk.

Once past security I was in the elevator bank. The elevator buttons are presented on a touch screen, and you’re only shown the floors relevant to you.

Inside, the elevators don’t have many buttons.

Welcome to New York. Welcome to New York.

From inside the building, the only subtle reminder you’re in such an iconic piece of architecture (besides the view) are the gradually sloping corners, which are a cross section of the building’s overall unique geometry.

Not a bad view.

October 30, 2014

Connor O’Malley is Funny

This guy cracks me up. He takes absurdist comedy to new heights in his Vine videos.

Also notable, “The Shrek is Real.”

“Three gooood terminators.” Instant classic.

October 22, 2014

Retina OSX on the Original Macintosh

I saw this great post about how tiny the original Macintosh screen was compared with the current (and enormous) Retina 5K iMac screen.

So I thought I’d take the opposite approach. Below are 1-to-1 pixel mockups of how Mac OSX Yosemite would have appeared on the original Macintosh’s 512×342 pixel screen.

Enjoy!

macintosh-vs-retina-1

macintosh-vs-retina-2

macintosh-vs-retina-3

macintosh-vs-retina-4

macintosh-vs-retina-5

macintosh-vs-retina-7

macintosh-vs-retina-6

September 29, 2014

Mining Bitcoin with Pencil and Paper

This is a pretty cool example of manually doing some of the math behind Bitcoin.

It’s interesting that SHA-256, the most advanced cryptographic hash function, really just works by reducing numbers to 1s and 0s, then scrambling them up.