The World First Ever HTML5 Advertisement

Category : Google, HTML5, Open source, web

We all love new technology, its event better when it is open and standard. But getting your feet wet and actually using the new technology? and in production? and where there is money involved? that is totally a different matter…

Last week I started advertising a big developer event we are holding in November – a countdown clock that counts the seconds till Google Developer Day . We considered a Flash ad like we are all used to, but our marketing team though it would be cool to have HTML5 ad…

I am a little a shamed to say that at first I objected, saying that HTML5 is still not fully supported by all browsers. After much deliberation we decided it was worth the extra budget to serve HTML5 for browsers that support it and Flash Ad to deprecated browsers. The reports from the publisher is that this HTML5 ad beats all Flash ads CTR. This is something worth investigating – is HTML5 ads perform better than Flash ads?

So get ready – Here is the first world HTML5 ad (click to enlarge) -

For the next few days you would be able to view it (with Firefox and Chrome) here.

Gracefully Detect Old Browsers and Fallback from HTML5

Category : HTML5, JavaScript, Software development, web

HTML5 rocks! It even says so in this (highly recommended) great web tutorial, but there are still a lot of browsers out there, that still do not support HTML5, or some of it’s features.

First, What is HTML5?

Wikipedia defines HTM5 – HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997[1]) and as of September 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

How do I find out which features are supported in each browser?

HTML5Rocks keeps track for each features support in each browser another cool site to check would be caniuse.

Now, the really issue is what do you do at run-time? how do you gracefully fallback when there is no support for the great feature you have implemented using HTML5.

There are two way to detect and fallback from HTML5, the right way, and the wrong way

So here they are:

WRONG WAY – On the server-side, check the User Agent header and serve different pages based on the user agent header… Not recommended – first, there a lot of  User Agents, second, this is a very buggy approach because headers change and are not deterministic (FF can easily send IE headers).

RIGHT WAY – Use JavaScript to detect when there is no support for a HTML5 feature (AKA object detection) here is an example:

 function start(){ if(supports_canvas()){ // Do funky HTML5 canvas fun }else{ // fallback to boring old HTML } } function supports_canvas() { return !!document.createElement('canvas_bogus_name').getContext; } 

 

Have fun and support HTML5:

On Premise vs. Cloud – Pricing Model

Category : Architecture, Cloud, SAAS, web

Everybody is talking cloud – every startup I meet, every CTO I work with, and all the software vendors are now cloud-oriented.

But when it comes to implementation it is a different story all together – most companies realize the value of the cloud (or at least say they do) but very few are ready for the paradigm shift – especially when it comes to the pricing model.

How do we do pricing on premise?

Before the cloud, architects and IT engineers used to perform an activity called “sizing exercise” or ”sizing estimation” before buying the actual servers for production. These activities are based on past experience, combined with buffers and optimism:
These exercises would go (very generally) like this:

Sizing exercise -
1) We think we are going to have around 10,000 users per day
2) On the weekends we hope are going to spike to 50,000 users per day
3) The system should support at most 100,000 user per day
4) A user views 3 pages in average
5) …
6) …
7) We estimate that a server would hold 1000 users per day
Conclusion – we need 10 servers, a nifty Database and 100GB of storage
Production environment cost is $35K

The key here is that on premise (in a non-virtualized environment) it is hard and expensive to provision new servers. That is why we need to size properly and put the cost in the IT budget in advance. These costs are Capital expenditures (expenditures creating future benefits)

Cloud advocates would say that these calculations are limited and do not take under account things like backup, IT cost, electricity, and other run-time costs. But in typical Sizing exercise these services are taken or granted.

How do we do pricing in the cloud?

In the cloud we do not need to do this initial “sizing exercise”, we start with one or two servers and if we need more we just easily provision more as we see fit. But when it comes to pricing we need to start thinking in terms of usage (I call it “metering exercise”):

Metering exercise –
1) How much bandwidth are we going to consume?
2) How much storage and storage transaction are we using?
3) How many CPU hours do we need?
4) Are there periods where we need more/less CPUs
5) ….
6) ….
7) Our database is going to start with 100MB of data and grow as time pass
Conclusion –We estimate that the initially we would be spending $150 per month with a growth rate of 5% per month.

Pricing in the cloud is based on actual usage – meaning you only provision what you need right now and you only pay for what you use. This cost is an operating expenditure (an ongoing cost for running a product)

The Needed Paradigm Shift

The problem is that most people are used to “sizing exercise” and Capital expenditures. They want to put something in the budget and forget about it – even if it costs much more. Moreover, some IT pros are not experienced in these “metering exercises” and often get it wrong the first couple of times. I think that making this error is a learning exercise and you often get it right after a few times -“metering exercises” errors often cost much less than “sizing exercise” errors and are more easily corrected.

Some IT organization try to do “sizing exercise” for the cloud – that is a common pitfall these days because you loss the elasticity and “pay for what you use” and in most cases pay much more that you should have- and even if you do this “sizing exercise” you still do not have the predictability that you are used to.

IT managers need to embrace the shift, they need to understand that pricing is changing from “buy” to “lease”, and that they should now treat compute costs in the same way they manage their electric bill or cellular cost – because that is the way of the cloud…

How to Make Web Pages Fit and Scale Nicely on Android Web Browser

4

Category : Android, CakePHP, PHP, Software development, web

I just released an Android version of my Cats Idol pet project – it lets you browse through photos of cats submitted by other people, rate the cats, and set the photos as your Android wallpaper.

One of the things I wanted to do was to provide users with the ability to upload photos straight from their phone. I decided that a web interface would be the easiest way to go at it. So, my application has a button called “Add cat” that launches the Android web browser with a URL of my server-side CakePHP-based upload HTML form.

The Problem

Then I ran in to a problem -  The HTML upload page was “zoomed out” on android, seemed like the browser did not scale the HTML properly and you needed a lot of zooming in order to work with it.

I thought this was a problem with my android code but found that it was actually a server-side issue.

After some digging, I found a solution to this issue.

The Solution

Adding these two Meta Tags in the head Tag of the HTML page solved this issue:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport"
          content="width=device-width,
                 height=device-height, user-scalable=no" />


In CakePHP I added these Meta Tags to the mobile.ctp layout so it will affect all pages using the mobile layout.

Using these Meta tags fixed the way Android showed the HTML web page – The page looks zoomed-in and fits the screen very nicely:

Type of Cloud-Based Offering

Category : SAAS, web

The market is now buzzing with Clouds, it seems that everywhere you go in the hi-tech industry you see cloud application, cloud conferences and cloud offerings.

I was Asked by some friends – What you get out of this  “cloud”?

In a high level, there are three types of cloud-based offering:

Software as a service (SaaS)

Sometimes referred to as “software on demand,” is software that is deployed over the internet and/or is deployed to run behind a firewall on a local area network or personal computer. With SaaS, a provider licenses an application to customers as a service on demand, through a subscription or a “pay-as-you-go” model.

Example of SAASGoogle apps, Microsoft BPOS

Platform as a service (PaaS)

The delivery of a computing platform and solution stack as a service. PaaS offerings facilitate deployment of applications without the cost and complexity of buying and managing the underlying hardware and software and provisioning hosting capabilities, providing all of the facilities required to support the complete life cycle of building and delivering web applications and services entirely available from the Internet.

Example of PAASWindows Azure

Infrastructure as a Service (IaaS)

Delivers computer infrastructure, typically a platform virtualization environment as a service. Rather than purchasing servers, software, data center space or network equipment, clients instead buy those resources as a fully outsourced service. The service is typically billed on a utility computing basis and amount of resources consumed (and therefore the cost) will typically reflect the level of activity. It is an evolution of virtual private server offerings.

Example of IAASAmazon EC2

Some of these offering could be implemented without cloud technologies. You could, for example, have a software-as-a-service hosted on a single computer in your garage, but in general these offerings are moving more and more to cloud-based infrastructure.

Hostmonster Sucks – Hostmonster Review and Warning

11

Category : Reviews, Security, web, web hosting

After 4 years of suffering and apologising to my clients about hostmonster’s downtime, I am moving my sites out of there, and I am leaving  Hostmonster for good. In this article I will explain why that is, and why you should stay away from Hostmonster.

This it a professional site, so I apologise for the language in the header, but most people look for ‘hosting-company-name sucks’ when they are looking for a review for a hosting company.

I have been using Hostmonster to host about 6-8 sites I own for the last 4 years (never for this site – spacebug has a dedicated account somewhere else)

Here are the reasons you should not consider Hostmonster as a hoster:

Low availability

Since day one my sites had more downtime in hostmonster then other hosting compenies I have worked with. There are some good weeks, but on average you get very low availability. You see it in downtime in the site, bounced incoming email, and flaky FTP connections.

Horrible performance

Sites run slowly on Hostmonster. This problem becomes worst with time (my guess is they overload the servers). This happens on plain HTML sites as well as PHP and MySQL driven sites.

Poor and unfriendly support

Contacting Hostmonster support is a waiting game, it takes forever for them to get back to you. what is worst is that when they do come back to you, they are never helpful.

Major security issues

This is not a joke – Hostmonster servers have been compromised several time. These have been a server-level attacks which affected multiple accounts. Personally speaking, it is a terrible feeling to have your site hacked into. The company required all accounts to change their passwords to strong password and two weeks later the attack happened again. If you do not want your site to be a place for virus distribution – stay away from hostmonster!

No communication of issues

They have never communicated any security/downtime/other (planed or otherwise) issues. They never admit it is something that they do wrong. When you tell then your server is down for the last 8 hours, they will say “it was done to improve future performance” or something like that.

Conclusion

I do not want to make any recommendation about other hosters, these things change from time to time. I have yet to find the perfect hosting company. But all the other companies I have worked with were, by far, much better.

Recommend Hostmonster only to your arch-enemy.

When to Stop Support for old Browsers such as FireFox 2 and Internet Explorer 6

2

Category : Best practices, Software development, web

Let’s face it- old browsers are a pain in the rear. Browsers like FireFox 2 and Internet Explorer 6 do not behave like modern browsers. They do not render HTML in the same way and do not interpret JavaScript in the same way. You can, most of the time, fix these issues, but the process costs a lot in terms of testing, development, and time to market. I was just involved in a project were a client insistent on going through 12 browsers and paid hundreds of thousands of dollars for that line item.

The problem is that clients still use these browsers and expect to view your site properly with their legacy browsers. So, when do you stop supporting old browsers?

Continue Reading

Great New Free WordPress Themes From Skinpress

Category : web, Wordpress

There are a lot of good WordPress themes out there and a lot of deprecated ones too. In my pursuit for a great WordPress theme I went over hundreds of themes. I finally came across skinpress themes. IMHO they provide a great set of themes, offering WordPress 2.9.2 new features support and all the social goodies.

Here are two examples:

Grungie wp theme

iZen wp theme

Disclaimer: WordPress themes evolve very rapidly, if you are reading this post in a year from now (let’s say April 2011) this recommendation might be deprecated.

Useful JQuery Plugin to Display Errors, Messages, and Alerts: Gritter

Category : jquery, Open source, Software development, Tips, web

Real estate on your web page could be as important as real estate in real life. You got very little space on your client screen and need to use every inch (or pixels). Errors and messages take up valuable space that could be better used for more important things.

That is why Gritter is a great JQuery plugin – it saves real estate on your page by showing alerts, messages and errors in a floating bubble way, that is both informative and (because you can configure Gritter to fade away after a few seconds) non intrusive:

This image was taken from one of our new site’s design, we decided to use Gritter instead of putting the errors and notification inline.

Check out Gritter’s demo site and project site and, for CakePHP developers, here is an article about integrating Gritter with CakePHP.

It is open source, looks great, easy to integrate, and is very useful!

IPWEditor – In-Place WYSIWYG Editor 1.2.1 Released with TinyMCE bug fix and more

Category : AJAX, IPWEditor, New Release, Open source, release, SAAS, Software development, web


IPWEditor provides easy in-place editing for Web pages with a layer of WYSIWYG. It allows you to seamlessly replace text on Web pages with inputs for on-the-spot editing.

Up until now IPWEditor did not support TinyMCE advance settings, due to a minor bug found and resolved by the community.
This release incorporates this bug fix and adds additional documentation around the ‘cancel’ functionality.

DEMO (TinyMCE)



Click me! I am editable and WYSIWYG!!! (TinyMCE)

Code behind:


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.editable.ipweditor-1.2.1.js"></script>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<div id=”editable” class=”myipwe1″> Click me! I am editable and WYSIWYG!!! </div>

<script type=”text/javascript”>//set all the tinyMCE configuration here and pass it to the editable
$().ready(function() {
var ed = new tinymce.Editor(‘myipwe1′, {
theme : “advanced”

}); $(‘.myipwe1′).editable(
{
type: ‘wysiwyg’,
editor: ed,
onSubmit:function submitData(content){
alert(content.current)
},
submit:’save’,
cancel:’cancel’
});
});

</script>

download and docs

Formal documentation and download can be found here.