Posted April 12, 2013 by Todd & filed under Tutorials, Web development.

I’ve been looking for a way to reduce the lighten a page template for a site I’ve been working on. Because I also want the page to look good on high-dpi screens, I’d originally coded it using @media queries in the CSS files to serve 2x images of multiple logos and icons to devices with those screens.

For some of those icons, I had discovered FontAwesome, a great icon font that’s designed for use with Twitter Bootstrap, the framework I’m using in this case. It’s fonts scale infinitely so they look great on any device, unlike Bootstrap’s current default icons.

But wouldn’t it be great if I could build my own font and include logos and icons specific to this particular site, whereupon I could dump all those 2x images and network requests?

While there’s a few tutorials out there, this one at tuts+ worked perfectly for me, and offered the best documentation. I won’t repeat it here so go read through it yourself. It’s required reading before proceeding. There’s a few caveats I found though, so I’m going to offer some tips here though that will make your life easier if you decide to give this a try. Specifically:

Consider your legacy IE support needs
Don’t use ligatures
The artboard doesn’t have to be square
Keep the file lean

The details:
Consider your legacy IE support needs
I’m coding for IE8+. You may be able to get this to work in IE7 and possibly even IE6, but that’s beyond the scope of this post. Which leads to:

Don’t use ligatures
They’re not supported in IE8. Besides, your font will work just fine without them.

The artboard doesn’t have to be square
Very important one here. The logo I was working with was long and not very tall. If you create it in Illustrator and leave whitespace at the top and bottom, it will affect the spacing of objects around the logo when you use it on your site. I made all my graphics 1024px wide, but reduced the height of the logos so this wouldn’t happen. In Illustrator just start with a 1024 x 1024 square, fit you logo/icon in it as big as it will go, and then File > Document Setup > Edit Artboards and crop out the whitespace on the other sides of it. It doesn’t matter if some of your glyphs are square and others rectangular, just keep the maximum dimension of one of the sides consistent – in my case at least one side was 1024px.

Keep in mind:

The svg file you’ll be saving can be black and white only, no colors or shades
White areas will be treated as transparent, black areas will show as your icon/logo and will be style-able with CSS.

Another tip: if you’re working with multiple paths in Illustrator, select them all and Object > Group before you save them so everything will render correctly. Then Save As > Format: SVG and repeat for anything else you want to add to the font.

Update: If you create a logo using text in Illustrator and you keep getting a black box when you import into icomoon, you may need to do one of the following to get the text to cooperate:

Right-click the text and select ‘create outlines.’ Then select all your text and Edit > Compound Path > Make to combine them into a compound path.
Select the lettering and background and go to the pathfinder palette and choose the ‘minus front’ shape mode.

Now go to IcoMoon and fire up the web app.

Keep the file lean
Import your icons. In my case, they also had FontAwesome icons in their icon library, so I added these as options and chose just the ones I needed, which keeps the file size even smaller. When you’re done adding icons, click the Font button. In the preferences enter a name for your font, and I recommend choosing the ‘Base 64 Encode & Embed Fonts in CSS option (more on that in a moment), and then download your font.

Unzip the download. The file that you get contains an index.html file which you can open in your browser to see your font glyphs. You’ll notice that there are CSS class names that you can use if you wish, which I found helpful, since I had already been using this convention with FontAwesome. No need to change any code for those icons at all!

Rather than have to load your font file separately, you can choose to embed your font in your CSS file, which saves a network request. Copy the style.css file and paste it into the bottom of your CSS file.

IE support note: I modified the @font-face declaration slightly for better IE support as follows:

@font-face {
font-family: ‘yourfontname’;
src:url(‘/pathtoyourfontfile/fonts/yourfontname.eot’);
src:url(‘/pathtoyourfontfile/fonts/yourfontname.eot#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */

}

Here’s some further reading on why that works.

Now just call an icon class where appropriate and add CSS classes or ID’s to control font size and color, etc. and you’re good to go. Now, instead of having different size logos for different placements, or a separate images for rollover effects, you can just change the size or color with css!

For my page, I realized a reduction of over 100mb of images (including rollover images and logos at 2x size) and 30+ possible network requests, depending on the device. The CSS I added to my stylesheet was only 27kb. Nice!

Posted April 2, 2013 by Todd & filed under Mac, Miscellaneous, Tutorials.

I’m currently building a site using a local server on my iMac at work and I needed an accurate way to test it on IE. I’m running Windows 8 on a Parallels (v.8) Virtual Machine and wanted to get it to display the test site I’m developing locally via MAMP. There’s a few sites that talked about doing this but some were complicated and none dealt with my exact situation (OSX.8 / Parallels 8 / Windows8), so I needed to stitch together my own solution. Here’s what I figured out:

In Parallels preferences, go to Advanced and click the Change Settings button next to Network. Check ‘Show in System Preferences.’
In your Mac’s System Preferences, go to the Network section and click on the Parallels connection. Copy the IP address.

In Windows 8, go to the Start screen and start typing ‘Notepad.’ An option for the Notepad app will appear. Right-click on it and at the bottom of the screen click on ‘Run as Administrator.’
Click File > Open and navigate to Local Disk (C:) > Windows > System 32 > Drivers > etc
Down next to the Filename box, click the dropdown that says ‘text documents (*.txt)’ and select ‘All Files.’
Open the ‘Hosts’ file.
At the bottom, add the IP you copied from Mac System Prefs, a tab, and a name for your machine. I used ‘iMac’ for mine. (e.g. ‘10.211.55.2 imac‘ with no quotes)
Save and close the file.
Start Internet Explorer and navigate to your localhost this way:

If your original file path to my MAMP install on your Mac browsers is: http://localhost:8888/staging/index.php (Files are located in Applications > MAMP > htdocs > staging)
Your file path for IE on Parallels is: http://imac:8888/staging/index.php

Posted January 30, 2013 by Todd & filed under Mapping, Miscellaneous.

I recently needed to create a map of a decent-sized dataset (13,000+ records) that I’d downloaded from the state of New Jersey. I’m new to the large-dataset* game so I had some tricks to learn and this seemed like a good opportunity. There’s lots of great information on the web on this but this may be helpful if you’re coming to the custom mapping game. The biggest problem you face is you’ll be on the steep side of the learning curve of several new applications at once. Hang in there.

The location data in my datatset had x and y coordinates that I could tell weren’t latitude and longitude. I wanted to get this on a map, but how to do it?

The map had street address information, though street and city information weren’t in the same field and there was no state column since NJ was assumed. So I imported the file into Google Refine, added a state column, filled it with the ‘fill down’command, and then concatenated the Street, City, and State columns into a single new column.

My first attempt at a map was to export a .csv file which I brought into Google Fusion Tables. Using the Visualize > Map command, I had Google geocode the street addresses into latitude/longitude location data and plot it on the map. So far so good. But for me at least, the Google (Fusion Tables) maps lack a certain visual polish, not to mention customizability.

Problem is, Fusion Tables won’t let you export the latitude/longitude data anymore (though that apparently used to be a feature). So I needed another way to get that data. There are several services that will do this for you (Google refine has one as referenced in this video), but they all limit the number of records you can geocode and I was well above that limit.

I happened on John Keefe’s post about re-projecting map data in QGIS. It works, but I’ll warn you that installing QGIS is a bit involved and getting the lat/long data out involves some knowledge of QGIS which I didn’t have at the time.

First you’ll need to install QGIS. That involves installing several frameworks that QGIS depends on. All these are documented on the QGIS OSX download page (note: you can install QGIS for other systems as well, see the QGIS site), but know that it’s not as simple as doing a single app install.

My data was a shapefile, so to get it in to QGIS I added it as a layer (Layer > Add Vector Layer). After a little research I determined that those x and y coordinates were in a coordinate reference system (CRS) known as NAD83 / New York East (Ft/US). To get lat/long coordinates, you’ll need to translate or ‘project’ these onto a different CRS, namely WGS 84 (ESPG: 4326). Here’s how to project the data from one to the other (hat tip: John Keefe). It’s good to remember to check this later to verify you did this correctly.

An aside here: If your experience using maps up to this point is restricted to Google Maps, here’s where things get a bit complicated. Basically, there’s a whole slew of methods of translating spherical map data (the earth) onto a flat surface (a paper map or your screen). The different methods are called coordinate reference systems (CRS). To translate x and y coordinate data you may have into latitude and longitude data, you’ll need to figure out what CRS you’re starting from and ‘project’ it to another one. (Apologies to map aficionados if I butchered that explanation – please set me straight in the comments).

Once your data is in the WGS 84 / World Mercator projection it will have latitude and longitude data. Here’s how to get it back out of QGIS (v1.8): Right-click on your data layer and choose ‘Save As…’ In my case I chose a .csv file as the format since I find it the most portable if I’m going to hop the data through another service like Fusion Tables (If I’m building a map with Leaflet, I’ll use GeoJSON, but that’s a subject for another post). Click the Browse button and choose a name and location to save the file to. The CRS field should show ‘WGS 84′(ESPG: 4326). In the’Layers’ text box, type ‘GEOMETRY=AS_XY’**. You should now have a file that contains your original data and the new latitude and longitude coordinates.

*I realize that 13,000 records isn’t really a *large* dataset in the greater scheme of things, but it’s the largest I had worked with at that point and was large enough that it exceeded the limits of the free version of BatchGeo and Google Refine’s built-in geocoding service (which as of this writing will only geocode 2,500 records/day).

**Latitude is the Y axis, longitude is the X axis. More on this

Tutorial on QGIS for Journalists

Posted October 22, 2011 by Todd & filed under Video.

A fun story of interest to baseball fans that we got to film just before the Phillies got eliminated in game 5 against the Cardinals. We turned the video around in a day, so it’s not as polished as I would normally like, but despite that it’s been picked up by Devour, Gizmodo, Quest, and ~~soon~~, NPR. Also got an honorable mention from ReelSEO. Thanks guys! The original, of course, ran on NewsWorks (more info there). Almost ~~45,000 as of this writing~~ 67,500 views now. Enjoy:

Posted August 14, 2011 by Todd & filed under Adventures, Miscellaneous, Photo Business.

It’s been a while since my last update…I’ve been busy with lots of things related to the NewsWorks site, but also with a side project of producing science content for QUEST, a science and environmental program produced by by KQED in San Francisco that’s now a multi-station content collaborative which includes WHYY. I’ve finally got some firstfruits to show – a video and text piece I produce for the series. Here it is for your viewing pleasure:

More on this story at the QUEST site and NewsWorks.org (including another video!)

Posted November 18, 2010 by Todd & filed under Adventures, Graphic Design.

A little over two years ago I began to work part-time with WHYY (The Philadelphia market’s public broadcasting station) on a long-term project to build out web and multimedia coverage around their health+science desk. That work has taken on greater urgency as the web and technology continue to impact (and by impact I mean wreck) media companies’ long-standing business models the way it did the photography industry starting about 10 years ago.

I’m happy to be able to announce that we reached a significant milestone this week. WHYY launched a new site Monday called NewsWorks. A completely redesigned news site, now encompassing all of WHYY’s news coverage and a whole lot more.

Here’s what some people have been saying about the site:

J-lab
Philebrity
City Paper

And here’s Chris Satullo’s introduction to NewsWorks.

As projects like this go, I have to say it’s been a pleasure to work on. A launch like this has the potential get pretty stressful, and nerves can get frayed. But in this case the small team of talented people (and it certainly was a team effort) who put this site together did an amazing job in a crazy-short timeframe with limited resources and true professionalism. It was a rare treat to be part of it.

Now that it’s finally launched, my corner of NewsWorks will mainly be it’s health+science coverage where (in addition to still images) we have some big plans to expand the multimedia coverage to take advantage of this new platform. If you haven’t already had a chance to explore what we’ve done previously, check out the health+science multimedia page or some of the multimedia pieces I had a hand in producing below:

(Hint: If you have the bandwidth, the HD versions are a better viewing experience. Press play, then click on the 360p text that appears.)

(My thanks to Kerry Grens and Peter Crimmins for their willingness to venture beyond radio for these pieces.)

More soon!

Posted November 7, 2009 by Todd & filed under Adventures, Photo Business.

Sorry, I’ve been holding out on you. Too many irons in the fire. Here’s some images from the spring issue of Delaware Bride Magazine, shot on location at Longwood Gardens last fall (when magazines could still afford to hire photographers).

This one came together pretty easily, a softbox to fill the shadows from camera right and multiple takes of flying cards so I had something to work with in post.

Shot toward the end of the day and time was running short. Kids being kids, you only have a short amount of time to work with them before you lose their interest, especially later in the day. So in the interest of expediency, this is a composite of several photos. The secret is to concentrate on one child at a time, like multiple takes in a film scene, and then to stitch together the best images. Sorry this is a small version, I’ll try to get a larger one up on the portfolio pages so you can see how great their expressions came out…

This double-page spread was shot at the worst possible time of day. If it were up to me, I would have split the shoot over 2 days so I could have shot with better light in the morning and evening, but you know, budgets and all. So time to make lemonade.

Longwood is gorgeous of course, and a great place to shoot – especially when the art director has the foresight to shoot their spring issue in the fall when there are still leaves on the trees. The weather really cooperated with us in that it hadn’t gotten too cold (even though we shot in November) so the leaves hadn’t changed color too much. I did have to tweak some minor color out of the background in a couple of shots, but nothing too major. We also had a perfect day to shoot, with temps in the upper 60′s thankfully – I feel for models who have to stand out in the winter freeze in spring fashions and pretend they’re not freezing…

Here’s some behind-the-scenes stuff:

In makeup...

Chatting up the models...

What's my motivation?

The young ones enjoying their private shuttle service...

... and imagining they were on a roller coaster...

Posted May 2, 2009 by Todd & filed under Inkjet Printers, Mac.

Like many photographers, I have an affinity for Polaroids. Prior to the digital takeover of the world, we all used them on a daily basis to proof our shots before going to film, and there was something about their rendition of color and tone that seduced many of us into using them for personal work. A colleague of mine used to shoot the Polaroid Captiva instant prints for his personal work and they produced some beautiful images in their tiny little built-in frames when in professional hands.

Of course, the death of Polaroid’s instant film at the hand of the digital revolution is well documented. Many a photographer was saddened at this change, myself included. There was something wonderful about holding a one-of-a-kind print in your hand within seconds of taking it. So you can imagine that I was excited at the prospect of the new Polaroid Pogo printer, a tiny portable printer that can produce 2″x3″ prints in seconds directly from a digital camera or compatible bluetooth equipped device.

There are many press-release regurgitations on the web that will spec out this printer for you, so what I’m doing here is relaying my experience with the printer so you’ll have the answers I couldn’t find before making my purchase.

Images are a fun size and you'll want to print a lot of them.

Pros:
The printer is really tiny, not much bigger than my iPhone, and comes with a battery that will allow you to print when not plugged in to an outlet. It uses Zink paper, in which the color dyes are built-in, meaning no expensive ink cartridges are necessary! The prints are a little bigger than the old Captiva instant film print window, at 2″x3″. A 30 pack of paper cost me around $13, meaning prints run a little over 40 cents each. Images can be sent to the printer via Bluetooth, so no physical connection is necessary, though you can plug in with a mini-usb cable to print directly from a camera equipped for direct printing. The printer itself is very reasonably priced at aroud $80.

The printer itself resembles a mini version of the pop-up Polaroid cameras of the past, a fact that won’t be lost on pros who loved those cameras, and there’s something to be said about seeing the Polaroid logo on an imaging product again.

All this sounds good right? Here are some issues to consider carefully:

Cons:
You can’t print directly from your computer to this printer. Instead you have to pair with it over bluetooth and send the file that way. This reduces the amount of control you have, for instance the printer crops the image automatically to it’s 2×3 format unless you pre-crop and save the image before sending it. You also may need to resize the image before sending it since sending a full-size high megapixel image over bluetooth takes a while. This uses up more disk space. I had a issue with a photo I edited in Photoshop were it wouldn’t recognize the re-saved image. Using the ‘Save for Web’ dialog seemed to fix the problem. Not being able to print directly to the printer kills a lot of creative manipulation you can do if you’re a more advanced artist. Imagine if you could create a custom profile the Zink paper and be able to control the color rendition through Photoshop for instance.

I also had a problem with the streaking on the images. This wouldn’t be an issue if it only happened occasionally, but it was happening by my third print, and then every 3 prints or so thereafter. Polaroid realizes this is a problem, because in the troubleshooting section of the owners guide they tell you how to solve it. Problem is the solution involves turning the printer off, removing the paper, inserting a piece of paper upside-down which the printer then ejects (cleaning the printing element somehow) and then re-inserting the paper and turning the printer on again. I had to do this approximately every 3 prints, which is inconvenient and time consuming to say the least. You also end up wasting a piece of paper when the streaks occur.

Streaks frequently appeared on my images.

A minor complaint is that the power brick for charging this tiny printer is huge by comparison. 1-1/2 times as thick as the printer and about 75% of its footprint. If you are going to bring the printer with you somewhere, you probably will want to take the power adaptor along in case you use up the battery, but this brick doubles the volume of space you need to carry a printer designed to be easy to take with you. They can miniaturize something as complicated as a desktop printer, but not a simple power adaptor? Ok the price is reasonable so I can accept that, though I wish I had an option to buy a smaller one.

The biggest complaint I have is the prints. Print quality isn’t great, reds come out over-saturated, shadows are muddy and neither of these in a good way like the way instant film would skew colors. It doesn’t help that all the advertisements and even the product packaging show prints with colors this printer isn’t even capable of producing.

The real deal breaker however is the Zink paper. Zink is a spinoff of Polaroid and as mentioned before, the paper contains dyes that are activated by heat to produce colors. The problem is that leaves the printed images very susceptible to heat damage. I put one print in my toaster oven (stay with me here) set to only 150 degrees and it was less than 2 minutes before it was completely ruined. Imagine having a photo album full of memories at the family picnic and leaving it the car in the hot sun while you play frisbee for a few minutes. Will your memories still be there? Doubtful. What about just leaving the album in the hot sun? Sometimes limited quality can be creatively freeing (old Polaroid instant film) but prints that are this fragile are a real problem.

What happens when the paper gets heated up. The blue area is the printed image, the white backing paper is designed to be peeled off to make images into stickers.

[A side note: the iPhone as a bluetooth device is not a compatible with the Pogo as of this writing, though the iPhone 3.0 software looks like it may solve that issue.]

I was really looking forward to a digital version of instant film that I could use for my personal work, and the form factor of both the Pogo and it’s prints looked very promising, but some amount of longevity is necessary here. Photography is meant to preserve moments, and the Zink technology is a step backward in that respect as anyone who has ever stored a thermal-printed receipt in their glovebox for a couple of days can attest to. Polaroid has done an impressive job of miniaturizing this printer, but the sacrifices you need to make to use it are at odds with the reason most of us take pictures for in the first place.

Posted November 26, 2008 by Todd & filed under Photo Business.

I find it important to stay balanced and connected with real people and sometimes that can be a challenge in this business. One client that I work with every year that really helps with that is Rebuilding Together Philadelphia. If you don’t know, RT organizes volunteers to make repairs and accessibility improvements to the homes of elderly, disabled and low-income households that they wouldn’t be able to do themselves. Many times they do this for an entire neighborhood at once. Witnessing the homeowners reactions and the general atmosphere of goodwill during one of their builds leaves you feeling better about life. It’s different than my normal type of work, but I enjoy it nonetheless.

Recently, I got treated to a thank you video that the Philadelphia chapter put together for their vendors/sponsors. [Note: Though I get a credit at the end and most of the images are mine, there are a few in there (especially in the beginning) that I didn't take. Not sure where they came from.] I think this slideshow does a good job of showing how much the volunteers enjoy their work. I enjoyed documenting it too.

[youtube]http://www.youtube.com/watch?v=pTIDISoX2Tc[/youtube]

Posted June 2, 2008 by Todd & filed under Photo Business.

This past January, I got an assignment to shoot 3 eco-activists for a magazine feature story. As is usually the case, we were shooting for an issue that would appear on newsstands several months later, in this case April. The portraits needed to be environmental to tell the story, but since the issue would appear in the spring, the art director’s concern was that they couldn’t look as if they were shot in the winter. On top of this were the usual challenges; one subject never answered the phone when I called and had no answering machine, one was on vacation until the day before my deadline and the last was in his 90′s and his failing health limited his ability to travel.

The first shoot I was able to schedule was Russell Peterson, former governor of Delaware, now in his 90′s. After speaking with Russ, we decided to shoot on his property which was a couple of acres and included a pond. His age restricted his ability to travel, and I decided that to ask him to hike out to a wildlife preserve was out of the question. While scouting his property I found an old adirondack chair near his pond and worked out an angle that would give me some evergreen trees and warm sunlight in the background. I used a wall to conceal most of the leaf covered foreground and and depth of field to disguise the bare branches that I couldn’t crop out. It took some effort for him to get to the location, and even to get into the chair because of it’s low profile, but he was a good sport and we got a great shot. The ultimate compliment came after the shot ran when Russell’s wife June contacted me to ask for a copy of the image for their home.

Next was Joan Deaver, a resident and protector of Rehoboth Beach. After trying the original contact number to no avail, I was able to get a secondary number from the magazine. Once I managed to get in touch with her we worked out a time to meet at the beach near her home. We did some safe shots at the entrance to the beach as a warm up, and then I asked her if she would be willing to take a walk out to the surf. She was game, so we did another series of shots at the water’s edge that blew the safe shots away. We were fortunate to get a blue sky that day, and along with Joan’s willingness to go without an overcoat in the 40 degree weather we were able to get a shot that really conveyed a sense of her strength and dedication to protecting the natural assets in the area, and one that felt like April as well.

Finally came Alan Muller. Alan was a quiet guy with an outlook of realistic pessimism that comes from years of tilting at windmills over environmental issues. You get the impression on meeting him that he cares deeply about his causes and maybe not enough about himself. We were down to the wire on our deadline and he had just spent 2 days driving home from the midwest. We ended up with cloudy skies that day, but the final image matches my impression of Alan perfectly.

One of the things I try to do on any assignment is to understand my subject, both from the standpoint of who they are and, if possible, how they are being portrayed in the accompanying article. I’ve known photographers who will just show up and take a shot, using the same basic ideas no matter who the subject is – but that’s not my way. I try to conduct a mini-interview while setting up and taking the pictures so I can get to know them as a person and convey a sense of their personality in the final image. Most of the people I photograph editorially aren’t used to being in front of a camera, and I like the challenge of gaining their trust and helping them feel comfortable. Listening is key. People will only open up if they sense you are really listening to them. I find that getting people to talk about something they are passionate about puts them at ease and that passion comes through in the final shot.

See an online version of the article here.

Your logo/icon in a custom web font

Connecting Parallels VMs to your Mac localhost file for testing

Stuff I’ve learned: Using QGIS to find latitude and longitude from x and y coordinates

Baseball’s dirty little secret

Horseshoe crabs

NewsWorks launches!

Shooting Delaware Bride

Polaroid Pogo Printer – My Experience

Building yourself up

Faking Spring and Other Photographic Challenges