I just finished a backbone based project a few weeks ago, where I had precise control over when the Dom is manipulated on which data events. Also I had tight control whether the whole list is regenerated or just a single element of the list. I like that.

Now I finished the KnockoutJS Tutorial, which is great. But it left a strange taste of data-binding-dislike in my mouth.
Data-binding does:

• tying elements of the view with the model (happens through special attributes in the view code)
• adding behavior to interface elements (save button)
• adding conditions on when elements are visible/disabled or not

There are still millions of legacy, desktop-heavy websites. Often made with ASP.NET or other unspeakable trickery.

One of my project was converting one of these websites into a nice and mobile friendly format. I first tried to do it solely with media queries, which worked good for the visual appearance. But it was bad for the experience, because it was very slow and the mobile browser had to downscale images.

Mobile-first!

As LukeW points out, there are good reasons to treat the mobile visitor as first class citizen.

And so I started to develop this concept to make a website desktop and mobile optimized:

CSS

• have general css rules in one place (applicable to all screen widths)
• for each set of resolutions, load extra css files just containing the required rules
• use link, not @import
• and use the media queries on link level to prevent unecessary css downloads

Example

HTML

<img class="dynamic" 
              data-large-src='/ImageGen.ashx?width=122&image=/media/123/logo.png'
              data-small-src='/ImageGen.ashx?width=61&image=/media/123/logo.png'
              />

(in that particular case I’m using a special resizing library to serve the image in the proper size)

Javascript

Depending on what you need, you might just get away with inserting JQuery and a little width check, like this:

$(document).ready(function() {
var detectSmallScreen = function() {
window.OnSmallScreen = document.documentElement.clientWidth < 701;
if(OnSmallScreen) {
window.ScreenSizePrefix = 'small';
} else {
window.ScreenSizePrefix = 'large';
}
};
detectSmallScreen();
$(window).resize(detectSmallScreen);
$('img.dynamic').show();
$('img.dynamic').each(function(){
var el = $(this);
el.attr('src', el.attr('data-'+ScreenSizePrefix+'-src'));
});
});

Conclusion

With just a few lines of Javascript its possible to replace images on resize with smaller versions of it. Thats great!


I started to write this article two days ago and since then I extended a lot of it and integrated parameters to dynamically insert the image resizing into the url.

I recently looked into Serverloft. They are a Europe-based hosting company which have scalable cloud servers for little money.

My side projects don’t make money and have almost no traffic. So I’m not willing to spend $60 (Amazon EC2). I have a Webfaction Account to host the more regular projects, but often I dream of being able to scale quickly and blow up my infrastructure in a matter of minutes.

I have Rackspace Cloud, which is really nice, but the servers are US based and I can feel the latency.

But IMHO Serverloft has a major drawback: They offer Ubuntu 10.04 (I don’t like Ubuntu as Server platforms, as I had have bad experience with upgrading), CentOS (I can’t handle Redhat) und Debian 5.0. Debian is nice, but 5.0 does not even have tmux (my favourite terminal multiplexer) in it.

So this is how I upgraded it:

Prepare Debain 5.0

1. create a new Container, with Debian 5.0 (64 bit) as OS
2. log in to it
3. apt-get update
4. apt-get upgrade
5. apt-get install vim less dialog
6. I had the stupid “perl: warning: Setting locale failed.” error, so I added this to /etc/environment:
   echo LC_ALL="en_US.UTF8" > /etc/environment
7. reboot

Switch to squeeze

1. sed -i 's/lenny/squeeze/g' /etc/apt/sources.list.d/debian.list
2. apt-get update
3. apt-get install apt dpkg aptitude
4. apt-get dist-upgrade
   this may take a qhile, but don’t move to far away from the terminal, as it will ask some questions about keeping configuration files (uppercase I FTW)
5. reboot

Final touches

Two weeks ago I started to implement a small project which should result in a web-based messaging platform.

One very important requirement was, that it supports HTTP Push, meaning WebSockets. After a little bit of googling around I found this article: Re-using Backbone.js Models on the server with Node.js and Socket.io to build real-time apps. I’m sure you found that too

But somehow I didn’t want to reuse the models on the backend, because, the backend should be just some kind of event dump or so.

And then I found backbone-redis (my fork), but whatever I installed with npm, did not work at all. I found another fork and then it all started to get together…..

I’ll publish more, once the project is running stable.

I know Umbraco is supposed to be simple and hassle free, but althought I configured a database use with this script (because the SQL Management Studio doesn’t run …..):


CREATE DATABASE shop_db COLLATE SQL_Latin1_General_CP1_CI_AS;
CREATE LOGIN shop_u WITH PASSWORD = 'Password';
CREATE USER shop_u FOR LOGIN shop_u;
USE shop_db;
GRANT ALL ON shop_db To shop_u;


It doesn’t accept it as login credential in the umbraco installer. Propably the GUis does a bit more, than there is documents in the Reference manual….

But there is the nice link ‘instructions’ pointing to Microsoft SQLite equivalent: SQL Server 4 CE:

But somehow no one cared to fill it with content

But hen, hey, its beta. So you can’t blame them. SO I just google and search for the download:

Oh cool, its the top link! Lets click it:

And I land on a bing-ternal search result page and whenever I click the ‘Download details:….’ …. it just gives the same page again.

This little image story sums up pretty well, what I experience when I work with microsoft technologies.

After following the guide and installing .NET 4.0 I suddenly had a “The page cannot be found”.

Then I clicked through the IIS manager and .NET 4.0 was prohibited.

after I enabled it, it started working.

I spent now almost a day just installing umbraco, configuring the database and so on. It starts working, but I don’t get warm/fuzzy about it.

There is stuff which really make my heart beat faster. Yes, I’m emotional about web technologies.

My number #1…..

website: stackoverflow

Why: Because its the most rewarding and helpful webexperience since…. since hotmail 15 years ago.

design software: fireworks

Why: I always thought of using vector tools in Photoshop is not natural. And doing websites in Illustrator doesn’t feel natural to me as well. But Fireworks somehow does exactly what I expect from a Web/UI/Slick/Vector oriented design tool. And there are quite a few tutorials about it. The Firefox Logo was made with it and there is a great introductory praise over at smashingmagazine.

django