Reblogged from 4pocketsaudio:

This is my first wordpress reblog. It's so tumblrish! I thought to make it a bit amusing, so I picked this tune. Enjoy.

What are the responsive images? Or, better, what they should be? For a more elaborate explanation read Mat’s article. For me, it suffices to say this: an image is considered responsive when it adapts both to the size of a viewport as well as to the bandwidth of a device. Usually, these two go hand in hand: the smaller the device, the higher the probability that is connected to a slow network (like our mobile phones).

It’s this second requirement (bandwidth) that makes the issue of responsive images complex. Because there is no ubiquitously  accepted methodology or technology to measure the relative abundance or scarcity of this resource.

So, the rule here is simple to understand, yet difficult to implement: the less bandwidth we have at our disposal, the smaller the file size of an image should be.

This rule, though, is meaningless, if taken in isolation. A desktop computer with a huge screen and a sluggish network connection does NOT need small file size images, as this can impact adversely the quality of a web page rendered to its full extent. We should be talking about smaller file sizes in conjunction with the requirement for smaller image dimensions.

Enough said about theory. What are the proposed solutions to the problem?

I have traced four kinds of solutions:

• CSS based
• Script based
• Server hacks
• A combination of two or more of the above.

Surprisingly, there is no pure HTML based solution. And this is what Mat pinpoints in the aforementioned article, as well as what he considers the road ahead.

Here is an example that highlights  how html should be according to Mat:

<picture>
   <source src="high-res.jpg" media="min-width: 800px" />
   <source src="mobile.jpg" />
   <!-- Fallback content: -->
   <img src="mobile.jpg" />
</picture>

What do we have here? A proposal for HTML5 to treat the image tag much like the video or audio tag, along with the subordinate source tags and their  media attributes that allow us to load different images utilizing media queries.
It’s a very elegant solution with two drawbacks:

• If we ever come to the point where bandwidth is not an issue, the solution will become irrelevant: the current img tag with the resizing it allows, is less verbose.
• It’s a solution currently out of our control.

Let’s now take a closer look to the existing solutions.

CSS Based Solutions

There is no way to set the source attribute of an image through CSS so this approach relies on a trick: use a substitute for the img tag that can be set through CSS. The handy one is the background-image attribute for block elements. Media queries are used to determine which image to assign to this attribute. For example:

@media screen and (max-width: 480px) {
 div.someimage {
  background-image: url(small.jpg);
  background-size: auto;
 }
}
@media screen and (min-width: 480px) {
 div.someimage {
  background-image: url(big.jpg);
  background-size: auto;
 }
}

You would probably need some more rules here to make it work in a real case, but this is for demonstration purposes only. When the page loads, the media queries determine which part of the stylesheet is applicable, and this in turn, determines which image to fetch.
The problem with this solution is that it is not semantically correct and that it alters the behavior the user expects from the images (i.e. can’t right click and download). Let alone that it poses a burden to the web developer and the user that will create future content.

Script Solutions
The information about the two or more image files needed could resize inside an image tag with the use of data attributes : <img src="small.img" data-bigimage="big.jpg" />
Once the dom has finished loading, a small script can be put to work to a. determine is there is a need for a bigger image and b. if yes, substitute the value of the src attribute with the value of the data-bigimage attribute.
This solution is not optimal since a desktop computer will have to load two images (small.jpg first and big.jpg later) while only one is needed.
To save bandwidth and speed up things the image tag could come without a value :
<img src="small.img" data-smallimage="small.jpg" data-bigimage="big.jpg" />
With browser detection or media queries we determine which one of the data attributes fits our purpose and substitute the image source attribute with it. Then only the desired image is loaded.
But this solutions fails when the browser does not support scripting, or the user disables it, or when, for some reason, the script stops executing before reaching this point.

    $(document).ready(function(){
      if(window.screen.width > 480){
        $("img").each(function(){
          this.src = $(this).attr('dataset['bigimage']');
        });
      }
    });

Server based solutions
If the server has a means of knowing upfront what kind of device it will be servicing, it can determine also what kind of images to send. Device recognition is a shaky issue, mostly because it relies on information passed from the browser to the server, something that can be altered or forged. But, assuming we have it, then the method would work as follows:
Image tags source is set to a high resolution image.
If the server detects a small device, then a script kicks in to resize the image, serve it and cache it for future use.
The benefit of this approach is that it requires no changes to the HTML. If device recognition fails, then a big image will be sent to the device which might be difficult to load but the page won’t break. (For more info on this approach look at adaptive images).

Mixed Solutions

Javascript is the extra ingredient most often needed in conjunction with another approach. So, for instance, in the server based solutions mentioned above, one could determine the device dimensions through a cookie set by javascript on the page HEAD tag.

document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';

A new(?) approach

If I were to choose one of the above solutions, I would go for the CSS one. This is both a matter of personal preference as well as because media queries is a really handy and unobtrusive way to determine device.

So to mend the shortcomings of the solution presented above I would augment it with the help of javascript. I would let the browser determine the device through media queries and load the images as background images of div elements and then run a script to change these elements to proper images. To determine which containers’ background images should be ‘translated’ to proper images, I would use an distinct class (‘.responsive’ in the example below).

    $(document).ready(function(){
      $(".responsive").each(function(){
        var imgsrc = $(this).css('background-image');
        imgsrc = imgsrc.substr(4, -5+imgsrc.length);
        $(this).after("</pre>
<img src="&quot; + imgsrc + &quot;" alt="" />
<pre>");
        $(this).remove();
      });
    });

Conclusion
The above are not meant to serve as a tutorial of some sort, neither as a comprehensive survey of the solutions proposed. Writing a blog post has always been to me a way to put some order in my thoughts and clarify obscure issues through the valuable feedback a post attracts. And this is precisely what this post serves.
The responsive images problem is an open problem. The solution to pick should be the one that fits mostly to your type of application and the one the diminishes the shortcomings in each case.

Thank God, all programming languages have many things is common. So, with the assistance of this brilliant short tutorial by Stavros Korokithakis I managed to get a grasp of the basics quickly.

Then I found a couple of similar plugins, studied them a bit, and,  voila, the offspring of this endeavor: the Biblionet calibre plugin.
(Those not interested in code should  download the plugin from here because the github zip adds an extra folder to the plugin and generates an error when trying to add it).

Installation
To install the plugin, open Calibre, go to Preferences>Change Calibre behavior, scroll down and locate in the Advanced section the Plugins icon. Click it and the following window will appear:

Choose “Load plugin from file”, answer ‘yes’ to the warning that will pop up, and you are done.

Use
The best option for mass entering and mass updating printed books in calibre IMHO is this:

Use a mobile phone barcode scanner app to read the isbn barcodes, or write them down, one per line, in a text file.

Then copy paste them in the relevant calibre dialog box (see picture) and fire the process.

The Future
This plugin is not a complete one. Unlike most of  the other metadata plugins,  it only makes use of the book ISBN (10 or 13 digit) to query the biblionet database.
Normally such a plugin can also make use of the  title and author info. But for adding printed books entried  in calibre (that was my initial motive, remember?)  that would be rather tedious, as one would have to manually type every single one of them.
This (:the isbn only feature) is going to change in the next version and the plugin will be able to query metadata based on title or author too.

There is another difference: the plugin makes use of the bookmeta script that acts like a proxy between the plugin and the biblionet database, so the script had to be hosted somewhere. I hosted it at phpfog.com.
If you have some techinal skills, you can host the script wherever you like. Then just  edit the plugin file __init__.py, locate the following line,

    BASE_URL = 'http://bookmeta.phpfogapp.com/index.php?isbn='

and change the ‘http://bookmeta.phpfogapp.com/‘ to the address of your server.
If not, remain assured that I will host this solution to phpfog for your convenience.

In the next version of the plugin, this need will be eliminated. The plugin will not require this kind of intermediary. But the bookmeta script will stay, as there might be other programs/services that could potentially use it.

If you want to fork the plugin and make your own, head to github and serve yourselves.

Please give some feedback if you decide to use the plugin. It both motivates and helps

In my case, what I wanted was a metadata source for my books in calibre.

I use calibre not only for tracking ebooks (which is what is made for), but also for normal, printed books.

I have no problem with the English and French books of my library since the metadata sources provided by calibre are more than enough.

But I also own a big number of Greek books and, there, the results I get through calibre are quite poor: for very few greek books there are metadata available(provided by Google). And these are transcribed into Latin, which is odd to read.

Now, the most comprehensive source of greek books, especially the last 20 years production, is found in the Biblionet database. But there is no web api and the  semantics of their web pages are poor if existent at all. Which means that in order to get book metadata, one has to scrape their web pages.

The simplest query (and the most reliable) to perform in biblionet is to search by isbn, as this returns only one  record (or none, if the isbn is not found).

So what i did, was to make a simple web app(?) that searches a book by isbn in biblionet, parses the result page and returns a json or html output. I call it bookmeta.

Here is a sample output:

{"biblionetid" : "44201", "cover_url" : "http://biblionet.gr/images/logo_gr.jpg", "title" : "Από το Βυζάντιο στην Αναγέννηση", "authors" : "N. G. Wilson", "translators" : "Φωτεινή Πρεβεδούρου - Γεωργίνη", "publisher" : "Εκδοτικός Οίκος Α. Α. Λιβάνη", "yr_published" : "1994.", "original_language" : " αγγλικά", "original_title" : " From Byzantium to Italy", "categories" : "Ευρώπη - Ιστορία - Αναγέννηση [DDC: 940.21]"}

This script  isn’t meant for end users. It is for people who might want to use this in another product or service. Help yourselves folks!

Next steps?

I am now developing a calibre plugin that does exactly the same thing, and since my python knowledge is close to zero, I am going to use this hack to get book metadata in the plugin almost without  any further parsing in python (for v.1 at least).

Still, IE6 being used more than IE7 is a kind of a perversion.

The End of an Era: Internet Explorer Drops Below 50 Percent of Web Usage | Webmonkey | Wired.com.

Today, I was lucky to observe this functionality in  one of the twitter accounts I admin.

See how the mentions tab has changed? It is not just Mentions anymore. It is “mentions and more” and the more refers to in-stream notifications of who and how-many followed you.

Also, twitter turns more visual, if you look at the adjacent Activity tab.

This is a much more ‘facebookish’ view, isn’t it? It is actually more visual than the respective ticker in Facebook, which displays similar stuff: favs, follows, RTs etc

I wonder if the delay in the roll out has to do with exactly this perception: that twitter is becoming more ‘lite’ this way.

And then, in the beginning of the ’80s, came an innovator: Microsoft.

Innovator in the sense that it pioneered the business of being a software company that sells primarily operating systems. Because, otherwise, neither OS it sold (the MS-DOS)  was really novel, not the company itself. As a matter of fact, Microsoft is a bit older than Apple. But Bill Gates and Co were the right time in the right place to close a deal (with IBM) that would change their fortunes as well as the whole computer industry.

The decoupling of the Operating System from the Hardware and the widespread copying of the IBM personal computer, led to the boom of the PC industry: hundreds of manufacturers produced cheap clones of the original IBM machine, eroding its dominant position and swallowing its market share. This unprecedented expansion was not matched by a relevant expansion of OS offerings though. Microsoft became the king of the game.

The situation remained practically unchanged for 25 years until, in the middle of the ’00s, Apple, aided by the success of its ipod and itunes, started gaining market share again. The one stop shop approach started showing strength again and this trend, as far as personal computers are concerned,  is still unfolding.

In 2007 enters the iPhone, a mobile phone with HW and SW from the same source: Apple. As with the original Apple computers, ipPhone made significant inroads in the Smartphone market. Soon it became its  driving force and certainly the fastest growing, most profitable and most discussed product.

Android, much like MS-DOS compared to Apple, comes later. Much like MS-DOS too,  it’s coming from a vendor (Google) that does not sell hardware. Much like MS-DOS it helps manufactures around the globe to produce better and cheaper smartphones. And much like MS-DOS (or Windows) suffers from bugs and instabilities and lacks in the user experience it offers compared to the iPhone operating system, the iOS.

But it doesn’t matter.

On it’s way to  becoming the main smartphone operating system  (if it’s not already there) it’s becoming better. And it challenges the wisdom of buying hardware and software from the same source afresh.

If we project these parallels into the future, we will expect to see a marginalization of the iPhone and its latter, much latter, shiny come-back with a vengeance.

But Steve Jobs is not around this time. And this makes things less predictable.

So here is a list of a few projects that I was really pleased to discover.

1. CSSLint For those that would like to have some advise and an overlooking tutor in their CSS projects, here is a service that does exactly this: analyzes css files and offers ‘advise’ about usual pitfalls and patterns to be avoided.  CSSLint is a project of  Nicholas C. Zakas and Nicole Sullivan.
2. 960.gs As you can guess by the name, it’s a grid system for 12 or 16 column grids. I have never used a grid system before. I prefer to hack my way to the design from scratch. But the simplicity of the thing is tempting, at least for prototyping work. 906.gr is a project of  Nathan Smith.
3. Handlebars Littering javascript with a lot of html is an anti-pattern. The solution? Use some sort of javascript templating mechanism such as Handlebars.  Simple and elegant. A brain child of Yehuda Katz.
4. Backbone.js A javascript Model View Controller (MVC)  … backbone for web applications. Developed by the guys responsible for DocumentCloud.

Now they have to come together in a future project of mine

#page {
  opacity: 0.5;
}
/* IE7 and less */
#page {
  filter: alpha(opacity=50);
  position: relative;
  zoom: 1;
}
/* IE8 specific */
#page {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  position: relative;
  zoom: 1;
}

It is a pain but it works.

But what I found is that if you try to set these properties dynamically, through jQuery for instance, they are less obedient.

For filter and -ms-filter to be set through jQuery, the element has to be positioned through css and NOT by jQuery.

So one would need something like this:

/* IE less than 9 */
#page {
  position: relative;
  zoom: 1;
}

if($.support.opacity){
  $('#page').css('opacity' , ".5")
}else {
  $('#page').css('filter' , 'alpha(opacity=50)');
  $('#page').css('-ms-filter' , 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)');
}

This is empirical knowledge though. I don’t know why is it like this.

Your Active E-mail made you a Beneficiary

Dear Sir/Madam,

This is to notify you that you have been chosen By the seven-member committee to fulfill Chairman Chung Mong-koo’s promise to donate One trillion won (US$1.1 billion) to charity, contingent to a suspension early this month of his three-year prison sentence for embezzlement and breach of trust. The ruling meant that the 69-year-old chairman will not be thrown back into jail as long as he remains clean during the next five years. In suspending the prison sentence, the Seoul High Court ordered Chung to fulfill the pledge of donations. Chung, want this money used for the protection of the environment and to build art and cultural facilities.

As one of the final recipients of this Cash Grant/Donation for your own personal, education and business development. The Hyundai Company is the world’s largest shipbuilder and 6th largest automaker and owns Hyundai Group, the parent company for all Hyundai Motor. The company has decided to randomly select email addresses that would benefit from this donation. Based on the random selection exercise from internet service providers(ISP) and millions of Super market cash invoices worldwide, you were selected among the lucky recipients to receive the award sum of US$2,000,000.00 (Two Million United States Dollars) as charity donations/aid from Hyundai Group.

You are required to expeditiously Contact the head of committee (HOC) below for qualification documentation and processing of your claims, from Monday through Sunday. On contact with head of committee (HOC), You’ll be given your payment pin number which you will use in collecting the funds. Please endeavor to quote your pin number QN(HM-145-5611) in all discussions.
***********************************
Head of committee: Mr. Imran Khand
Email: xxxxxxxx
***********************************
On behalf of the seven-member committee kindly accept our warmest congratulations