⇨ Flickr Is Back

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

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 link¹, 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... ↩

Œuf Mollet Frit

Corfu Island, Greece

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.

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.

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

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

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.

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.

World Clocks

Huiles Essentielles

The Hobbit: An Unexpected Disappointement

I watched "The Hobbit: An Unexpected Journey" yesterday in 3D HFR and was disappointed by the experience. The 3D HFR is technically impressive but it prevented to immerse in the story.

Vincent Laforet provides a good explanation on why 3D HFR was disengaging me from the movie. I could not better explain my disappointment. Like him, I could watch it again in 2D to have a better visual experience but I did not enjoy the story enough. This is not the Lord Of the Ring's "Phantom Menace" (no Jar Jar Binks in sight) but the script could have been tighter and the characters more developped.

I did not think there was enough material in The Hobbit book for three movies. Watching the first one confirmed my opinion.

Orchidaceae