Jeff Mesnil
Weblog · About

⇨ The Apple iWatch

February 10, 2013

Bruce Tognazzini:

The watch can and should, for most of us, eliminate passcodes altogether on iPhones, and Macs and, if Apple’s smart, PCs: As long as my watch is in range, let me in! That, to me, would be the single-most compelling feature a smartwatch could offer: If the watch did nothing but release me from having to enter my passcode/password 10 to 20 times a day, I would buy it.

Using 1Password means that I only need to remember my master password but I still need to type it too many times a day (and it is long to type it with a virtual keyboard).

Such a watch would be a good idea. I have stopped wearing a watch a few years ago since I always have near me a mobile phone that provides the same functionalities. I would not buy a watch just for this feature but I would definitely buy a small gadget that I could attach to my keyring (like the RSA security token I used to have to connect to my company VPN).

La Vie En Rose

February 9, 2013

Yesterday evening, my girlfriend and I went to a cooking session at Cook & Go. We cooked there a dinner about the pink theme and brought it home to bake it and eat it.

The entrée was some samossas de saumon à l'huile de sésame, vinaigrette à la framboise and was really good, the samossas being stuffed with salmon and broccoli.

Samossas de Saumon à l'Huile de Sésame, Vinaigrette à la Framboise
Samossas de Saumon à l'Huile de Sésame, Vinaigrette à la Framboise © Jeff Mesnil

The plat du jour was a ballotine de poisson rose et blanc, papillote de légume et yaourt à la betterave (a cod accompanied by lots of vegetables - turnip, beet, carrot - fennel and a yoghurt with beet). Delicious...

Ballotine de Poisson Rose et Blanc, Papillote de Légume et Yaourt à la Betterave
Ballotine de Poisson Rose et Blanc, Papillote de Légume et Yaourt à la Betterave © Jeff Mesnil

The dessert should have been good, a verrine litchi rose, crumble de cacao but unfortunately, it was a failure, the tiramisu cream was too liquid and the crumble of cocoa sinked into it...

Verrine Litchi Rose, Crumble de Cacao
Verrine Litchi Rose, Crumble de Cacao © Jeff Mesnil

It was fun cooking with other people and bringing back home our meals to bake them and eat them.

Vive la vie en rose.

⇨ Flickr Is Back

February 9, 2013

I like Flickr and used it extensively a few years ago, paying for its unlimited storage and full resolution uploads. However, it stagnated and I left it (like many).

But something funny happened. Our photography needs are growing ever more complex — what do we do with all these high-resolution photos we’ve snapped?

These days, I store my images in a Amazon S3 bucket. To display retina-ready responsive images on my website, I need 8 JPEG files of the same image at various resolutions. This is something that Flickr had from day one: for every uploaded photo, it provides many files at different resolution (and cropping).

This is a great service that Flick could provide: you upload one photo and Flickr provides all the wizardry (JPEG files, JavaScript + CSS, CDN to reduce the latency) to embed a retina-ready responsive image that adapts from the tiniest of the mobile phone to the largest display monitor.

I am sure many enthusiast photographers would pay for such a service (and full resolution upload, unlimited storage, analytics, etc. that they already provide).

It's great that Yahoo! is investing on Flickr and I will be happy to see it rise again at the top of the photo websites.

TextMate Snippets for Footnotes and Responsive Images

February 9, 2013

I use TextMate to write posts on my website and I have some handy snippets to write footnotes and retina-ready responsive images

Footnotes

To include a footnote link1, I have created a snippet triggered by fn:

<a id="fnr${1:1}-`date +"%Y-%m-%d"`" href="#fn${1}-`date +"%Y-%m-%d"`"><sup>${1}</sup></a>

The current date is automatically inserted and the footnote number starts at 1 and can be edited if there are multiple footnotes in the same post.

Then, to write the footnote (at the end of the post below a horizontal rule), I use a second snippet tiggered by fnr (for footnote return):

1. <a id="fn${1:1}-`date +"%Y-%m-%d"`"></a> $0 <a href="#fnr${1:1}-`date +"%Y-%m-%d"`">&#8617;</a>

This automatically creates an ordered list item (the footnote starts with 1. using the Markdown syntax) with a backlink to the location of the footnote reference. The footnote number can also be edited and starts at 1. The cursor is then placed to write the footnote text.

Retina-ready Responsive Images

To display a retina-ready responsive images, I use 8 JPEG files of the same images at different resolutions and picturefill to display the appropriate one.

To simplify the typing, I have a snippet triggered by rrf (for retina responsive figure):

<figure><div class="img" data-picture data-alt="${2:title}">
<div data-src="#{ site.img_base_url }images/${1:filename}-320w.jpg"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-480w.jpg" data-media="(min-width: 320px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-768w.jpg" data-media="(min-width: 480px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-900w.jpg" data-media="(min-width: 768px)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-640w.jpg" data-media="(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-960w.jpg" data-media="(min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 320px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 320px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}-1536w.jpg" data-media="(min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 480px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<div data-src="#{ site.img_base_url }images/${1:filename}.jpg" data-media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 768px) and (-moz-min-device-pixel-ratio: 1.5),(min-width: 768px) and (-o-min-device-pixel-ratio: 3/2)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="#{ site.img_base_url }images/${1:filename}-900w.jpg" alt="${2:title}">
</noscript>
</div>
<figcaption>${2:title} &copy; #{ site.author.name }</figcaption>
</figure>
$0

The cursor is first placed to edit the filename variable which updates the 8 file names (I use consistent suffixes for each resolution) and then for the image title variable (the #{ site.img_base_url } and #{ site.author.name } variables are used by Awestruct when it renders the HTML).

These simple snippets makes it handy to include footnotes or images without writing tedious HTML elements.


  1. Such as this one... 

Corfu Island, Greece

February 1, 2013

Now that I have upgraded my laptop from a 5 year-old MacBook that could not run Lightroom to a 15" Retina MacBook Pro, I am plodding through my library to find the images that require some post-processing.

Pontikonisi and Vlacheraina monastery seen from the hilltops of Kanoni, Corfu
Pontikonisi and Vlacheraina monastery seen from the hilltops of Kanoni, Corfu © Jeff Mesnil

This summer, we went to Corfu island for the holidays. The landscape was beautiful but there was so much sun during the day that all photos I took have a very hard light.

Agios Georgios Bay, Corfu
Agios Georgios Bay, Corfu © Jeff Mesnil

I played a bit with Lightroom 4 but there is not much post-processing that can improve such a hard day light. The photos are not great but it does not matter: they are good enough to make us remember the great time we had there!

⇨ Paperman — Full Animated Short Film

February 1, 2013

Lovely animated short film from Walt Disney Animations:

Paperman‘s seemingly seamless way of blending the personality of hand-drawn animation with CGI in the physical space of the story is the result of new in-house software called Meander, a vector-based drawing program that allows for manipulation of the line after the fact — something that Kahrs described as “just like painting on the surface of the CG.”

(via kottke)

Serving Retina-Ready Images

January 27, 2013

I have recently bought a refurbished 15" Retina MacBook Pro. The display is stunning and it is a pleasure to edit and view photos on it.

I took the opportunity to redesign my Web site to display images at the most favorable resolution using picturefill and make it more responsive so that it displays at an appropriate size on phones and tablets.

Wedding Photos at Le Louvre, Paris
Wedding Photos at Le Louvre, Paris © Jeff Mesnil

I did not update older photos but starting from now, I'll provide responsive images. Using multiple export settings in Lightroom and a TextMate snippet to generate the corresponding HTML code does not weighten my workflow too much.