Well, it seems that our challenge, although tricky, was not hard enough to outwork the super sleuth team of Nick Benson and Than Thibbetts. They were the first person / team to successfully locate all 7 Monocle Men and provide the visual proof. A big hat-tip to them for their determination.
We figured we would do some detective work of our own and learn how they chose to go about the challenge, what threw them for a loop and how they plan to spend their winnings. With that we give you an interview with our winning team.
Q. Did you have a strategy?
Nick:
I caught wind of the contest a few minutes before closing time at the office, and clicked around the site a little bit using developer tools, and quickly located a hidden Monocle Man in the source code of each page, as well as in the sprite graphic used in your header logo. I hadn't a clue at that point where it was actually used on the site, but, I took note of it so I could continue the hunt when I got home that evening.
After feeding the kid, I setup the playpen in the office, and got back to looking for easter eggs. I thought about how my team's hidden easter eggs in previous projects - Konami code, background textures, stock art, etc., but none of those proved to be useful here. After reviewing the CSS, I was able to figure out where the sprite graphic was being used, but, that only accounted for a couple of them.
A Google search for "site:focuslabllc.com monocle" quickly located the fourth monocle, which was included on your blog post about the new brand.
After clicking around a little bit, I gave up on the inefficiencies of manually looking for the Monocle Men and downloaded Site Sucker, which scarfed up all of the HTML, CSS, JS, and images on your site, and allowed me to view, search, and edit all of the source on my computer. I reviewed each image, and discovered an avatar file that contained a Monocle Man. Using the file name, I did a search on the whole site's source, and discovered it was used on Matt Yow's profile, which brought me up to five.
Than:
Before I even finished reading the post I had to try the Konami code, of course. The first place I looked, like most folks, I imagine, was the HTML source. Immediately after that I went straight to the crawler. I've had this little piece of shareware called — very imaginatively — SiteCrawler laying around for years for just these types of situations.
1) Located in the source code of every page on the site
Q. When did you decide to team up?
Nick:
It was getting late, so I went to bed. As I was doing my final round of pre-sleep Twitter checking on my iPhone, I got a direct message from Than at 12:30 AM; at 12:40 I suggested we team up and split the winnings.
We discussed strategy and tried to figure out other ways things could be concealed if they weren't in the JS, CSS, or HTML, which we had already scrubbed pretty thoroughly. We bounced ideas back and fourth over Twitter until 1:25, when Than found the one hidden in the 404 page. Since we were now up to 6, I crawled out of bed and got a laptop to continue the search on something with a larger screen.
After groggily clicking about the site, I discovered the final Monocle Man, hidden in the photo outside of the Focus Lab office. It was roughly 2:00 AM.
Than:
I didn't start looking until late at night after Nick took your suggestion and tweeted think link to the challenge. It was pretty funny as Nick said he was nearly asleep until I found the 404 Monocle Man. His next message was ":: fires up laptop ::"
Q. What was your first/easiest and last/hardest find?
Than:
The tiny Man in the black and white image was definitely the hardest. Nick and I were both out of code-based ideas at that point and started rechecking the images just to be sure.
2) The favicon on Matt Yow's page;
3) Logo mark change when browser is shorter than 200px;
4) Hover state of comment bubble on single-entry blog pages (like this one)
Q. Did you fall into any booby traps?
Nick:
We considered canvas tags, inline CSS and JS, disabling JS, changing browser agents, making the browser wide, making the browser narrow, using IE6, submitting forms (with and without errors), checking robots.txt, humans.txt, sitemap.xml, etc.
Than:
Nice try on the empty focus.monocle.js script.
I spent way too much time rooting around in the source code. No joke, after crawling the site, I took the site into BBEdit and batch replaced every <script> tag and <link rel="stylesheet"> I could find thinking you might have slipped one in quietly on one of the pages.
The 404 page Monocle man was easy to overlook. My first try was popping open the Web Inspector and looking at the image in the browser. However, the only way you're going to see the image is over a non-white background or in an image editor. Luckily, I'd opened all of the images in Preview to quickly flip through them, and Mr. Monocle was staring right at me over a plush #929292 background.
5) Located in an old blog post;
6) Located in the 404 page background image
Q. Total time to find all seven?
Nick:
Four hours on my end, I think, 1.5 of which were in bed.
Than:
I probably hunted for an hour and a half or so, then hurriedly putting the screenshots together in an email.
Q. What are you going to do with the 300 big ones?
Nick:
It'll either go towards some fantastical electronic gizmo, or be squandered on supplies for baby #2, who's due on April 15.
Than:
My wife and I are taking a trip to Ireland this spring, so it will probably be put to good use on a few travel gadgets.
7) Placed in a window of the Avia hotel on our team page
Q. Any final thoughts?
Nick:
You have a lovely website; I hope to look at it again sometime.
Than:
I wouldn't have gotten to know Nick without the Twin Cities ExpressionEngine User Group
It's just like they say: ExpressionEngine, bringing people together for money since 2005.*
It's been a fun group to hang out with over pizza every month, and getting to learn from the really talented developers there, like Reactor team member Brian Litzinger, has been a real boon to my EE site-building skills.
And, of course, congratulations on the new site. It's really well made. I know, I've seen the source code. All of it.
*They don't really say that.
A big thanks to all who played and don’t worry, we will have more challenges later this year!