Posts Tagged as: photography

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.

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

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.

February 5, 2014

Upstairs Downstairs

Here’s the view from the elevator in my new building – from the basement and the first floor. Mesmerizing and nauseating at the same time!

upstairs-downstairs

August 16, 2013

Queensboro Bridge Truck Fire Photos

Earlier today a truck burst into flames on the Queensboro bridge. Luckily nobody was injured.

Fast forward to tonight while I’m sipping some bourbon on my balcony (Breckenridge Bourbon from Colorodo, it’s not bad), and I notice two heavy-duty trailers hauling the burnt remains of a truck down Jackson Avenue.

I don’t know for sure this is the truck, but how often does a charred truck get carted down Jackson Avenue away from the Queensboro bridge? Anyway, enjoy the photos. The full hi-res gallery is here.

July 10, 2013

Embedding an Instagram Photo

Hot off the presses. You can now embed an Instagram photo into any web page. Just browse to any Instagram photo on instagram.com, and click the little rectangle on its right side.

Here’s one of my favorite recent shots, taken in Long Island City.

The New iPhone and 120FPS Slow Motion Video

Apple is apparently testing a slow motion video feature for its next iPhone. This Petapixel article includes an example video of 120FPS slow motion, and it immedlately reminded me of Apple’s new “Designed by Apple in California” ads.

See for yourself.

120 FPS Demo:

Apple’s TV Ad: “Our Signature”

Slow motion video can create some beautifully sentimental moments, and it seems Apple is already utilizing it in its ads. Soon it’ll be our turn.

This also relates to the Apple strategy suggested by Marco Arment in his article, iOS7 As Defense. If true, this slow-motion feature would once again leapfrog other handset manufacturers, giving Apple another lead in the market. Judging by how few cameras can do 120FPS, I can’t imagine this is easy to achieve in a consumer device.

June 30, 2013

How to Vine With No Hands

Whenever I see people using Vine with no hands, I assumed they were doing it with paperclips and sponges or something. But it turns out you can do it completely from the phone itself. Duh.

The basic idea is to use the iPhone’s built-in functionality for helping people with motor problems. In this case their deficit is our benefit. Nice!

First, go to Settings > General > Accessibility and turn “AssistiveTouch” on.

Then you’ll create a new gesture. Just tap and hold in the center of the screen until the time limit runs out. You’re probably figuring out where this is going.

Then save that gesture and call it whatever you want. I called mine “Vine” because I’m original.

Notice that when you turned on AssistiveTouch it added a little circle thingy to your phone? Well that’s how you activate the gesture you just made.

Tap the circle, choose “Favorites”, then tap “Vine”. Then it will add an extra blue circle to your screen. Tap that blue circle to start recording.

If you’re having trouble, here are some things I’ve noticed:

You can reposition that AssistiveTouch circle thingy by dragging it. Sometimes using it in Vine only works when it’s on the left middle side of the screen.

Sometimes your Custom Gesture of just tapping and holding in the middle of the screen doesn’t work. So try making a new gesture where you tap, hold, and slightly move your finger around in a circle.

Sometimes ending the Vine video is tricky. If you can’t tap the Next button in Vine, hit the home button and wait a few seconds, then relaunch the app. Your Vine should still be there.

So that’s how to Vine with no hands. Enjoy, and keep using Vine to record your stupid crap!

June 17, 2013

Face/On

This website looks amazing: thatsmyface.com. Apparently it can make a 3D model of your face based on photographs, then print it on action figures, legos, 3D sculptures, and more.

If anyone tries it let me know!

May 21, 2013

Sharing Photos From the New Flickr to WordPress


This is very cool. While browsing the new Flickr, I noticed a share button labeled “Share to WordPress – The Cleverest” so I clicked it. Apparently I had hooked it up to my WordPress installation ages ago and forgot about it. This type of one-click publishing is very cool, and reminds me a bit of Tumblr, which Yahoo also just snatched up. Interesting.

Via Flickr:
on Instagram bit.ly/10digbk

April 5, 2013

Listening to a Record from a Photograph

This blew my mind. Apparently it’s possible to use a photograph of a record and get an audible recording from it.

The step-by-step process illustrated in this article called Extracting Audio from Pictures makes sense once it’s broken down. Basically you convert the round image of the grooves into a straight line…

…then you use Photoshop to boost the contrast of the lines, which become the actual waveforms you feed into ImageToSound software.

Amazing stuff. I often wonder about future generations being able to eavesdrop on people in the past by using leaps in technology.

For example on this Wikipedia page about Archaeoacoustics:

Gregory Benford’s 1979 short story “Time Shards” concerns a researcher who recovers thousand-year-old sound from a piece of pottery thrown on a wheel and inscribed with a fine wire as it spun. The sound is then analyzed to reveal conversations between the potter and his assistant in Middle English.

The idea that people’s voices would have unknowingly been recorded onto the bowl like a modern day record, locked away until a future generation figures out how to extract the audio, is awesome. True, Mythbusters busted this myth, but I wouldn’t fully discount the general concept of learning more from old data with better and better tools. (Think the dino DNA in Jurassic Park.)

Taking that pottery example further, I wonder if when I take a photo with my iPhone, a future generation will be able to determine my mood that day by examining whatever minuscule image artifacts my brainwaves caused in the image sensor.

It sounds crazy, but not much crazier than one ancient potter telling his buddy to keep his voice down so the future can’t eavesdrop on their clay.

March 14, 2013

Barry Lyndon’s Opening Scene and the Golden Ratio

I re-watched “Barry Lyndon” last weekend and was reminded of how perfectly Stanley Kubrick framed his shots.

The opening scene, below, is one of the most beautifully-framed shots I’ve ever seen in a film. The more you look at it, the more you say “Yes. Why yes, that’s nicely framed.” And the better it looks too.

Kubrick’s use of the Golden Ratio here is pretty astonishing. While a composition will usually look nice with one use of the ratio, here I’m counting between three and four examples of it.

This would be impressive enough in a painting, but the fact that Kubrick was able to achieve such beauty in a real environment is even more stunning. Pretty badass Stanley.

January 11, 2013

Sammy Sosa Flickr Tags

Recently on the web these’s been a flurry of news about Sammy Sosa’s Pinterest page. Most of the attention has been about the quirky photos and repetitive stiff caption adorning every single photo:

Sammy Sosa. Yes, I’m the real Sammy Sosa, and this is my Pinterest.

Fine, I get it. Sammy Sosa took a few awkward photos and his social media team isn’t too savvy. No big deal.

But what I find especially bizarre are the tags on some of the photos on his official Flickr page. Tags like these: “Sammy Sosa Before and After”, “Sammy Sosa Skin”, “Sammy Sosa Bleached”, “Sammy Sosa Bat”.

Here’s an example photo with those tags. I’m surprised because these tags reference recent Sammy Sosa scandals, such as speculations that he bleached his skin and he cheated using a corked bat. Why would these tags be on Sammy’s official Flickr page?

My guess is the photographer was trying to boost page views by including popular keywords. But why would a professional photographer risk alienating one of his clients just for a few extra page views? Not too savvy indeed.

December 25, 2012

Comparing Canon’s 1Dc 4K Pixel Resolution

It looks like the camera pixel wars are evolving into the video front. Canon’s new 1Dc is aimed at pro photographers who want the best of both worlds; the ability to shoot video large enough to pull still frames from.

This promotional video is pretty impressive in showing off the capabilities of the new Canon 1Dc, and I like how honest they are about the tradeoffs of pulling stills from compressed video, VS shooting raw:

We know we’re not shooting RAW. We may see RAW in the next generation of DSLRs, so it does mean you do need to have things pretty spot on like exposure, white balance in-camera.

As far as promotional videos go, it’s extremely well done. But I thought I’d do a simple visual comparison of how the resolution stacks up, compared with a selection of common devices that are known for their impressive resolution.

The takeaway is that 4K does seem like an alternative to shooting stills when you want to be sure you’re capturing everything. Sacrificing about half the pixel count of a 5D Mark II is a small price to pay for making sure you get the shot. Available for a paltry $11,999 at B&H.

Tip of the hat to Canon Rumors.

October 15, 2011

iPhone 4S and iPhone 3GS Camera Comparison

As someone who’s stuck it out with an iPhone 3GS for the past two years, my upgrade to the iPhone 4S has me most excited about its improved camera.

Today I went around Long Island City and took some side-by-side shots with both the 4S and the 3GS, then shrunk both sets of images down to the same size. You can click each image to see the 3GS version because I am amazing at Javascript.

Overall the 4S photos are sharper, a little brighter, and seem to display more dynamic range across the board. There’s also better flare control, as you can see in the last photo. This is by no means a scientific or accurate comparison – just a little real-world example of what types of improvements we can expect with the 4S.

Click the photos to see the 3GS version. Seriously, why aren’t you clicking already?

June 3, 2011

One Week of WTC Construction Progress

Looks like they’re going for two floors every two weeks. Not too shabby.

May 27, 2011

World Trade Center Construction Update

Looks like more progress in the last two days…

May 25, 2011

1 World Trade Center Construction Progress

Since it’s official that Condé Nast is moving into 1 World Trade Center (formerly known as the Freedom Tower, formerly the site of, well, you know) I thought I’d document some of the building’s construction. With my iPhone pressed up against my trusty Nikon spotting scope (more on that here) I’m able to get a fairly decent view from my apartment in Long Island City.

Word is they’re building a floor a week, so let’s see how accurate that is. From the photo above it looks like they prop up a section of the floor with some type of scaffolding, then build around it. Let’s see what happens.

November 7, 2010

Leo enjoying his Sunday

View the whole set on Flickr.

IMG_6958.jpg

July 23, 2010

Pixel density comparison: iPhone 3 and iPhone 4

Clearly I’m not the first dude to weigh in here, but I wanted to get a real-world sense of the increased resolution on the iPhone 4’s “Retina Display.”

In these photos I’m holding an iPhone 3Gs in front of two computer displays running Apple’s iPhone Simulator. The Simulator is running a virtualized version of iOS 4.0.1 set to mimic the iPhone 4 device. The iPhone 4 simulator looks huge on the computer screens because today’s Macs have pixel densities in the 72-120 range, while the iPhone 4’s pixel density is 326.

Pre-dousing any flamey comments, I’m fully aware this is 100% unscientific so I offer this information purely for my own delight. That said, if you have something positive to share, surprise me. :-)

An iPhone 3Gs held roughly 30″ away from a 27″ iMac running a simulated iPhone 4 interface. Badass.

Same as above, but with a 1920×1080 display. I needed to hold the iPhone roughly 34″ away to get the sizes to match.

October 27, 2009

Veive Cliquot Yellowboam

Roughly $2K worth of wine bling:

October 17, 2009

Dubai in LIC

After seeing this post at kottke.org I made this quick and dirty mockup below. The takeaway: it’s a tall fucking building.

burj in lic

September 8, 2009

Long Island City Fire

Long Island City is so hot right now.

August 23, 2009

City Slicker

Photos from a weekend in the Catskills, with a jaunt to the 123rd Delaware County Fair in Walton, NY.

June 13, 2009

All I wanna do is zooma zoom zoom zoom.

Let’s take a tour of what it might look like to peer through some of the world’s most powerful and expensive camera lenses, shall we?

To set a baseline, here’s a photo of Long Island City’s Citibank building taken with a regular ‘ol Canon 17-40mm zoom lens at 22mm. You can see the full photo on the top left, and a 100%, 1:1 zoom in the center of the screen. Click it to view it at actual size. Go on, click it.

22mm lens:

And here’s a shot with my most powerful zoom lens – a Canon 70-200mm 2.8L.

200mm lens:

Now the fun begins. Let’s see how much closer we can get by shooting through a 20-60x Nikon spotting scope.

40mm lens + spotting scope @ 20x (~800mm lens):

The photo above is pretty much as close as you’d get with an 800mm lens (although, obviously, the 800mm lens would have better image quality and the edges wouldn’t be completely darkened). Canon makes an 800mm lens and you can pick one up for a cool $11,000 at Adorama.

So let’s move on to 1200mm territory.

40mm lens + spotting scope @ 30x (~1200mm lens):

If you wanted to take the above photo without the black edges and degraded image quality, you could pick up Canon’s 1200mm, $120,000 lens from B&H. It’s the largest lens Canon makes and you can read more about it here.

Let’s get closer…

40mm lens + spotting scope @ 42.5x (~1700mm lens):

The photo above approximates the focal length of the world’s largest telephoto lens, made by Carl Zeiss. Badass.

100mm lens + spotting scope @ 20x (~2000mm lens):

Now we’re at 2000mm. Nikon made a 2000mm lens using mirrors a while back.

200mm lens + spotting scope @ 20x (~4000mm lens):

Somewhere between these two focal lengths is Canon’s insane 5200mm lens. You can read more about it here, here, and here.

100mm lens + spotting scope @ 60x (~6000mm lens):

To get any closer, someone once took Canon’s 1200mm lens and paired it with a 7.2x crop factor video camera to create a 8640mm focal length.

200mm lens + spotting scope @ 60x (~12000mm lens):

And there you have it – an example of how close you’d get with a 12000mm lens. Judging from the focal-length-to-price ratio of Canon’s 1200mm lens, getting a crystal clear full-frame shot of the Citibank building this close would run you $1,200,000. And that’s all I have to say about that.

June 5, 2009

Empire State Building Photo

I snapped this out of the back window of Snooth’s new offices in midtown. I highly recommend checking out the full resolution version.

In related news, our proximity to the Empire State Building is what made our (former) insurance company refuse to insure us. If you ask me, it sounds like the terrorists won.

March 21, 2009

Boys and Girls

I just finished making an interactive version of the “Boys and Girls” installation mentioned in my previous post. Click the image to get started. Enjoy!

Sanzone-Holloway Photos from M55 Art

For your viewing pleasure, here are some photos I took of artist Michael Sanzone‘s current exhibition at M55 Art in Long Island City. The exhibition features his wood sculptures, many of which were made during his two month artist’s residency at the Glenfiddich distillery in Scotland from whiskey barrels.

The highlight of the show is an installation called Boys and Girls – a collaboration with artist Earl Holloway consisting of 105 wood panels, each with a depiction of childhood.

If you’re in the New York City area you should check it out. It’ll knock you on your ass.

View more of this here.

March 6, 2009

Soho Photo

As seen in SoHo on my way to work two days ago.

As a bizarre complement to this photograph, the orange sticker in the window of the SUV was a remnant from a funeral procession, as you can see from this crop of another (ie, suckier) photo I took.

March 3, 2009

High Society, High ISO

I had a great time on Saturday night at Snooth’s Open That Bottle Night. I got to schmooze with some interesting people, drink some fancy-ass wine, and bust out the prime lenses. I had to underexpose and push the photos in Lightroom to get workable results, but I’m pretty happy with the way things turned out. You can download some of my Lightroom presets below, then check out the rest of the gallery at Flickr. (Fellow photo geeks may want to cringe/marvel at some of the exposure values in the EXIF data…)