Jeff Mesnil
Weblog · About

Saint-Haon-le-Châtel

March 26, 2013

Saint-Haon-le-Châtel
 Saint-Haon-le-Châtel © Jeff Mesnil

Cemetary Tree

March 26, 2013

We spent the week-end near Roanne and visited Saint-Haon-le-Châtel, one of the smallest medieval town of France.

This town is located on the top of a hill. The church is at the very top of the town and offers a nice panorama view of the plain of Roanne. The cemetary near the church was deserted, most graves were moved to a more recent cemetary and only remain a few tombstones and ruins around a tree.

Cemetary Tree
 Cemetary Tree © Jeff Mesnil

Moody place...

Spring is Coming

March 18, 2013

Last Saturday, near home, the city of Gières organized a spectacle to celebrate the end of winter and the beginning of spring.

A local artist created a huge leprechaun representing the winter.

Printemps de Gières
Leprechaun — Printemps de Gières © Jeff Mesnil

A local troop of jugglers, "les Lutins Farceurs", gave a representation after sunset. Their make-up was very well made, they looked half-elves half-daemons.

Printemps de Gières
Les Lutins Farceurs — Printemps de Gières © Jeff Mesnil

Kids were both frightened and in amazement looking at them, especially when they were jumping using stilts and going incredibly high with them.

Printemps de Gières
Les Lutins Farceurs — Printemps de Gières © Jeff Mesnil

Printemps de Gières
Les Lutins Farceurs — Printemps de Gières © Jeff Mesnil

Printemps de Gières
Les Lutins Farceurs — Printemps de Gières © Jeff Mesnil

Once the Lutins Farceurs ended their representation, the Leprechaun was burnt to celebrate the end of winter.

Printemps de Gières
Burnt Leprechaun — Printemps de Gières © Jeff Mesnil

The spectacle was great but it was untimely to celebrate the end of winter: it was snowing again this morning.

Spring will have to wait a bit more to come... :)

Emincé de Brocoli, Vinaigrette au Curry

March 2, 2013

Emincé de Brocoli, Vinaigrette de Curry
Emincé de Brocoli, Vinaigrette de Curry © Jeff Mesnil

Food photography is fun.

I feel a bit limited using a Nikon 35mm ƒ/1.8 DX for it but my other lenses are not bright enough or focus close enough to obtain a shallow depth of field. If I were not thinking about changing my photo gear to something else than Nikon DX system, I would definitively buy the 85mm macro lens.

I also need to work on lighting the food. The light is not soft enough when it hits the broccoli at the foreground. It's time to invest in a good flash...

Changing Photo Gear

February 19, 2013

My girlfriend and I went to Paris for the week-end and I carried my photo gear for 2 days for a grand total of 20 pictures.

Effeil Tower
Effeil Tower © Jeff Mesnil

I took my Nikon D7000 with the 16-85mm DX (and the 35mm ƒ/1.8 DX for low light). The camera bag weighed 2.7kg all included. We walked a lot during the 2 days and I felt the camera and the bag getting heavier with each kilometer.

I am looking for a camera that would match (or exceed) the IQ of my DSLR while being more compact and weighing less.

I really like the Fuji X series and particularly the X-E1 but I am not sold on it yet. My main issues are the autofocus issues, the lack of lens (60mm is the maximum it can reach) and the lack of support from Adobe Lightroom for its RAW files.

The autofocus issues looks to be improved with each firmware updates (and the X100s show promises for the 2nd generation). I like the lens roadmap (especially the 23mm ƒ/2) if they can pull it off.

The main issue is the lack of support from Adobe. I don't want to buy into a system based on the X-Trans sensor to be able to generate only JPEG files out of the camera... I enjoy the latitude provided by post-processing RAW files too much to give it up.
This also means that I will not get a X100s even with all the improvements from the X100 (phase detection, focus peaking, etc.). It is an ideal combo with a 23mm lens in a small package but again it is based on the X-Trans sensor.

Yesterday, I read Duncan's review of the Sony DSC RX1. This camera looks fun to use and provides gorgeous pictures (you have to read it on a Hi-DPI display to really enjoy the images quality) but it is way too expensive for me. I would not say that it is overpriced. For the same budget, I would take a RX1 over a Nikon D600 + Zeiss 35mm ƒ/2 lens any day but both are above my budget at the moment.

Eiffel Tower
Eiffel Tower © Jeff Mesnil

I am considering waiting for the 2nd generation of Fuji X cameras, provided their RAW files are supported by Adobe. In the meantime, I could carry out a Sony DSC RX100. It looks to be a competent compact camera with a fast lens at the wide end. That would be a temporary solution but I don't take my DSLR as much as I could because it is too heavy. Having a compact camera with good IQ would make it fun again to shoot every time I am out.

How to Host a Static Website on Amazon AWS

February 11, 2013

A few months ago, I updated my web site to use static content generated by Awestruct instead of a hosted WordPress instance. It is much simpler to maintain and tweak (something I am constantly doing), less expensive to host since it does not need any runtime or database and static content is fast, cacheable, etc.

At the same time, I moved the hosting from OVH to Amazon S3 which provides static web site hosting at a very competitive price.

More recently, I acquired a Retina MacBook Pro and updated my web site to display Retina-ready responsive images. This requires to server several JPEG files of the same image at various sizes. Retina images may be quite big and using a content delivery service improves the latency to serve these images. I decided to use Amazon CloudFront for content delivery of all my media assets.

This post is a quick reference of the different services and settings I have used to achieve this goal.

Web Site Generation

The source code of my web site is hosted at Github and uses Awestruct to generate its content. I write the posts (including this one) using Markdown syntax and Awestruct generates the whole web site for me (including an Atom feed, archive page, sitemap, etc.)

Deployment

The content is hosted in a S3 bucket named jmesnil.net and is deployed to S3 using Awestruct directly:

$ cat _config/site.yml
...
profiles:
  production:
    deploy:
      type: s3
      bucket: s3://jmesnil.net/
$ awestruct -P production --deploy
...
Syncing XXX/jmesnil.net/_site to bucket s3://jmesnil.net/

I contributed the S3 deployment to Awestruct recently and there is no release with that feature yet. Alternatively, you can use s3cmd.

Static Website Hosting

I use Amazon S3 to host the static content in a bucket jmesnil.net (without the www) and enable the Static Website Hosting in its properties.

I prefer to use the jmesnil.net domain name to serve my content but I also want www.jmesnil.net to work and redirect to the naked domain name.

To achieve this, I need a second S3 bucket named www.jmesnil.net. However, instead of enabling website hosting, its Static Website Hosting property is set to Redirect all requests to another host name (using the value jmesnil.net).

This 2nd bucket will remain empty (nothing is deployed to it) but is required to redirect content from www.jmesnil.net.

Domain Names

Amazon Route 53 is a domain name service that I use to provide the domain names of my web site.

I created a hosted name for jmesnil.net with the following record sets:

  • jmesnil.net. is a A type record that is an ALIAS to the S3 bucket jmesnil.net (the dropdown list will propose all the S3 buckets you own)
  • www.jmesnil.net. is CNAME type record corresponding to the S3 bucket www.jmesnil.net public domain name (i.e. in my case it is www.jmesnil.net.s3-website-us-east-1.amazonaws.com).

Using Amazon S3 and Route 53, it is very simple and cost-effective to host a static web site1. Using Awestruct makes it simple and fun to write content for it :)

Amazon provides good documentation for its Web services including a full tutorial to set up a static website using a custom domain.

Content Delivery Service

For ech retina-ready responsive image I want to display, I need to export eight JPEG files from Lightroom.

My media assets (including these images) are deployed in a S3 bucket named media.jmesnil.net using s3cmd and I enabled the Static Website Hosting for it.

To use Amazon CloudFront as my content delivery service for the media assets, I created a Download distribution from the S3 bucket media.jmesnil.net.

Content delivered by CloudFront is served from a XXX.cloudfront.net domain name. Since I want to keep all my content under my own domain name, I use Route 53 again to serve the CloudFront content from media.jmesnil.net.

In Route 53's hosted zone for jmesnil.net, I added a new record set for media.jmesnil.net which is a CNAME type set to the CloudFront domain name (i.e. XXX.cloudfront.net). Then in Cloudfront distribution, I added media.jmesnil.net as an Alternate Domain Name.

To sum up:

  • http://jmesnil.net/XXX is served by the S3 bucket jmesnil.net
  • http://www.jmesnil.net/YYY is redirected to the naked URL http://jmesnil.net/YYY
  • http://media.jmesnil.net/ZZZ is using CloudFront to deliver the media assets and is backed by the S3 bucket media.jmesnil.net

All my content is served by URLs under my domain name jmesnil.net. With this configuration, I will not be depending on any third-party URLs for my own content If I decide one day to move to another hosted service or platform2.


  1. I leave as an exercise to the reader how to setup Awestruct, S3 and Route 53 to provide a staging web site at http://staging.jmesnil.net/ to check before going live on the "production" URL at http://jmesnil.net/ :) 
  2. And I certainly will: since I started my weblog in 2004, I moved from Movable Type to Blogger to Wordpress to Jekyll and finally to Awestruct for the software and from jroller to OVH to S3 for the hosting. 

⇨ 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...