Do you have a flag?

As I have mentioned on here before, the global aspect of EyeFetch has always been a source of pride and astonishment for me. While the Internet as a whole has long managed to cover quite a large portion of the globe, and the has the world certainly given a smaller feel, most of us still rarely communicate with people from hundreds of countries. Undoubtedly, the language and cultural barriers can be a challenge here. But it’s precisely there where EyeFetch has a rather unique position, because it covers one of the few topics which are universally understood (though not always agreed upon): visual arts.

And what better way to show the global community that by having flags. As most of you are surely aware, you’re really nothing without a flag…

So, I am happy to announce that with the latest update flags have returned to EyeFetch. All registered users with a country location in their profile will now show their respective flag. Don’t you love seeing people from all these countries appreciate the beauty of art?

Small moves, Ellie, small moves

It should come to nobody’s surprise that one of the key components making a visual site work are the thumbnails. However, in line with my last post, figuring out what size thumbnails the Site should support actually poses a bit of a chicken-and-egg problem. You need to know the layout of the Site to know what sizes you can put in various locations. But you need to know the sizes available to know how to build a layout to support those sizes the best way. One thing was clear, since the original inception of EyeFetch, screens have gotten much larger (my new iPad has a larger resolution than any monitor I’ve ever possessed), but also much smaller (how does one fit this all onto a phone screen?). The reponsive design of the new Site addresses some of these issues, but one thing was clear from the beginning – the old thumbnail sizes won’t do. They are either too small, or simply don’t fit well when combined with each other.

The moment you realize that, two other things immediately become important:

1. Figure out what the new thumbnail sizes should be.
2. Figure out how to create all these new thumbnail sizes for the currently archived millions of images previously uploaded to EyeFetch

And clearly, the new Site simply cannot launch without having the thumbnails available. So part of the task of laying out the new design was to be able to come to a common set of thumbnail sizes that will serve its purposes for a long time, will keep EyeFetch looking good on all screens, will download at reasonably fast speeds, will allow the maximum amount of design flexibility, but at the same time won’t eat up so much space that storage costs gets completely out of control.

Long story short, I believe that list of sizes is complete. And, in the spirit of keeping everyone up-to-date, even though this is rather mundane news, here they are (all numbers in pixels,width x height):

• 150 x 150 – square, center crop
• 300 x 300 – square, center crop
• 300 x any – fixed width, no crop
• 300 x 610 – horizontal banner, center crop
• 610 x 300 – vertical banner, center crop
• 610 x 610 – square, center crop
• 610 x any – fixed width, no crop
• 900 x any – fixed width, no crop (this will be the main image display size for single image viewing)
• 1200 x any – fixed width, no crop (image size for clicking “view large”/zoom button)

Next up, building the new image resampling components (note: doing this from scratch as well, which will allow me to finally solve the annoying sharpening issues of the last resampling implementation).

The Third Screen

Developing websites has changed dramatically over the past decade. Technology has advanced to a point that allows development of incredibly rich and interactive experiences on the web, lately even without the use of plug-ins like Flash, thanks to advances in standardization (like HTML5 and CSS3), as well as much better implementations of JavaScript engines in modern browsers (for a cool demonstration, check out browserquest from Mozilla, but make sure you have a modern browser). At the same time, we all lead much more digitally connected lives, and many of us are surrounded 24/7 by one form or another of connection to the Internet. Desktops have gone mobile through laptops, available at prices that rival those of high-end calculators of just a decade ago, mobile phones have more power than servers had not that long in the past, cars have screens and get traffic information and music through the air, pretty much any cafe and hotel and even many airplanes offer WiFi connections, and we now even have tablets which go beyond what 20 years ago was still considered science fiction in Star Trek. We’re always on, always connected.

However, all this flexibility comes with a price. The expectation now is that whatever content you want access to, you can get access to, on a variety of screens and devices. And keeping with the plan to bring EyeFetch up-to-date as much as possible, it would be foolish not to plan for this as well. The site should not only be accessible, but also fully functional and highly usable on the largest array of devices and screens – our desktops, laptops, netbooks, tablets, smart phones and even refrigerators (ok, maybe I’ll leave those for later).

Luckily, I’m not the only one who wishes to do so, and quite a few bright minds have been working hard on coming up with some solutions to the this problem. One of cornerstones, and still developing areas of this new design metaphor comes from an article by Ethan Marcotte, published in May 2010 at A List Apart, entitled Responsive Web Design. Since then, an entire movement has built around this notion, and many web developers and designers are working on ways of improving upon his ideas and finding methods of implementing them on new and existing sites.

Responsive Design on EyeFetch

If you check the “sneak peek” option on EyeFetch, you’ll see the first draft of a layout for the new Site. Ignore some of the ugly colors – the entire page is basically a wireframe model with pieces placed to make sure it all fits well together and works in various environments. I’ve added a quick drop-down on the top left that allows switching of the various layout options I am developing. The more interesting part, however, comes when you try resizing the browser. Assuming I’ve done it reasonably well, the page should adjust – sometimes even reorganize itself – to the size available, all the way down to screens for smart phones (the weird colors are there to help me line up the various rectangles making the page render). Currently only two different layouts are supported, so the next step is to add a few more, and make sure they “respond” to the available space in the same graceful manner

 

The Global Village

One of the things that went surprisingly well from even the earliest beginnings of EyeFetch was the global footprint we could establish. It was always my hope that we would see people from around the world participate – you could see this plan from the start by having the little country flags showing very prominently – but the breadth and depth of our global reach echoes even now, with comments from all over the world still showing up.

Needless to say, this is one of the areas of the old EyeFetch I not only want to retain, but ideally would like to build out further. The original EyeFetch was built on classic ASP, which didn’t really have any decent support for localization and globalization. While many pieces of the platform migrated over the years onto the newer .Net platform, merging localization in was something I never got to, and eventually turned out to be too much work. So, one of the many advantages of starting from scratch, is that full globalization can be built in right from the start.

Technical Details – Building a Custom Database Resource Provider in .Net (4.0)

The goals here were pretty simple:

• Move the resource storage from .resx files into a database, so dynamic updates can be made, and a web-based admin interface to edit localization can be built in the future
• Allow users to select their preferred language through a simple UI (for now, just a drop-down to test)

Luckily with the introduction of the provider model in .Net 2.0 this should have been pretty simple. Additionally, I assumed a lot of other folks would have attempted this before, and plenty of (clear) documentation should be available. To my surprise, I spent the last two days struggling with this, and only thanks to a couple of very insightful articles could finally put this all in place. I suspect a number of other folks will run into similar problems, so here are the key resources that sent me down the right path:

• http://msdn.microsoft.com/en-us/library/aa905797.aspx – I started out with this old MSDN post by Michèle Leroux Bustamante as a baseline. You can download the code for the article, which is a decent starting point.
• http://www.west-wind.com/presentations/wwDbResourceProvider/ – A great post by Rick Strahl. He also offers download of his own, quite sophisticated Resource Provider for SQL, though I preferred to work off my own code.
• http://www.c-sharpcorner.com/uploadfile/prvn_131971/chapter-i-resources-and-localization/ –  A free bonus chapter from the book “Pro ASP.NET 3.5 in C#2008 Second Edition”. This includes a more detailed explanation of the design-time implementation, which ended up leading to my breakthrough.
• http://www.hanselman.com/blog/AmIRunningInDesignMode.aspx – And, while we’re on the topic of design-time, Scott Hanselman provides a pretty important clue here regarding the use of HttpContext.Current.
• http://www.codeproject.com/Articles/15313/Globalization-and-localization-demystified-in-ASP – The final piece of the puzzle, with a very simple explanation of how to allow the use to switch the culture settings dynamically.

While the articles above should give anybody interested a good enough view to be able to build their own Custom Resource Provider, there is a single piece of information I wish I could have understood earlier, and judging from a few articles I found during my research I’m not the only one who has run into this challenge. If you ever get to the point during implementation of your own Custom Resource Provider at which the compiler either throws out odd compilation errors (or, as in my case, even crashes Visual Studio 2010 completely), remember this:

• Even explicit global localization will cause the compiler to check for existence of the neutral language for the resource key you are referencing!

Read the statement again, and let it sink in. Basically, this means you need to make sure you have the entire resource provider set up, registered in the web.config and enough data in your database to support every key you are referencing throughout your code. Furthermore, if you end up running into problems in the design-time piece of your custom resource provider, add a break point in the override for CreateGlobalResourceProvider, then open a separate instance of Visual Studio, and attach yourself to the devenv.exe process. Then compile the default project which references your custom resource provider classes in the original instance of Visual Studio, and the break point will be reached during compilation, as the compiler reaches the pages that utilize a global resource.

Say what?

For the non-techies following along, this is what this all means to you: Go to eyefetch.com, and click the little “login” link on the top right. Note, logins do not work yet. The login page is a placeholder for now so I can lay the foundation of the various platform features I want to enable in the new EyeFetch. In the header, you will notice a sentence, stating “EyeFetch login -….”, and on the right top you can see a drop-down with a few language choices (for now, the choices are only in English). Change the drop-down, and you will see the sentence in the header change language. Hooray! What does this mean for EyeFetch? It means I will implement this base functionality throughout the Site, and then we will simply need to store translations of every piece of text we have on the Site (maybe with the help from some of you) and we will be able to offer EyeFetch in other languages and make our little corner of the Internet even more accessible to all four corners of the world.

Birth of a new Creative Community

While waiting for our wonderful hosting company (hat tip to Softlayer) to configure some additional network settings for the new servers, how about a few words on this place and what’s going to happen going forward?

After taking down EyeFetch for a complete reset, the most most common question I have received was “how long will it take?”. Certainly a fair question, but unfortunately I cannot offer an answer. I could lie, and tell you all that it will be back in no time, that it will be better and greater than ever before, and that all issues from before will be gone. But most of us are grown-ups and realize that re-imagining something and building it up from scratch will take lots of patience. So, while I cannot give a definitive date on when EyeFetch will arise from the ashes, what I can offer are updates from the front-line, share my thoughts and struggles as we move forward with those of you who are curious or interested, and keep things moving bit by bit, until the beautiful new home for our collective creative minds is ready for move-in.

This blog, together with a presence on Twitter, facebook and Google+ will serve as the public outlet for this journey. It will be a mix of simple status updates, philosophical pondering, business planning and technical details. You are all invited to follow along and participate, through commenting, liking and sharing, but don’t expect me to engage with rudeness or inappropriate behavior.

To get the ball rolling, here’s a few details on what is happening right now:
1. As many of you have seen on the Twitter feed, the first step was to back up everything from the past – that means images, contests, user profiles, etc. It’s not clear how much of that will come back and when, but in a perfect world, I’ll find a way to merge the old data into the new world once it is ready.
2. The next step was to get entirely new hardware. The old servers were ancient in technology terms and simply needed to be replaced. Most of the new hardware is installed, but the old servers still will need to be cleaned out and then officially decommissioned.
3. While that is happening, a holding page that represents the see of the new EyeFetch has been put in place. Chances are, since you found this blog, you’ve already seen the first set of changes on that page. Most notably, the inclusion of all the places where you can follow the progress along:

So what’s next? (warning – technical details inside) Right now, I am waiting for a new IP address to be set up for one of the servers so I can create a originating location for the new CDN for static files. This should be done within the next hour or so, and after that I should be able to distribute static files (javascript, CSS & icons) to be distributed worldwide through the CDN, speeding up load times of EyeFetch for everyone (especially outside the United States).

Hello world!

Operation Phoenix deserves a blog as well. Here we go…