Certainly visiting websites such as your bank account or email via HTTPS is much safer than just by using HTTP. At least it should protect you from Man-in-the-middle-attack. But please remember that HTTP can set cookies that can be read in HTTPS space because cookies don’t follow the same origin policy in the way that JavaScript does. It’s has been known that accessing first page of the website via HTTP and then continue via HTTPS is not-so-secure-as-you-think.

However, even if you accessed the website via HTTPS from start it doesn’t guarantee you full protection.

Consider:

1) you visit https://secure.example.com/ which drops a cookie on your browser

2) you then visit http://www.google.com/ however a MITM inserts

<div style='visibility:hidden'>
   <iframe src='http://secure.example.com/'></iframe>
<div>

3) MITM sniffs your cookie from the request on the iframe

More...

In my previous post we’ve built basic functionality for image-free volume control. Now it’s time to make it sexy. Just to remind you, here is what our final result should look like:

But now it looks like this

First of all let’s make our knob look like metal one. More...

There is always a place for inspiration in developer’s life. Especially when it comes to web design of real world things such as volume control for your fancy CD player. So I decided to take a challenge and design similar to  Nikolay Samoylov’s sound control by using CSS3, minimum of JavaScript and no images of course.

Our final result will look like this

My target browser will be WebKit only (don’t have time to do cross-browser support), and for more complexity let it be Mobile WebKit.

More...

One thing I always amusing with Javascript is NaN. Arguably, NaN is a bit quirky in most languages, but it really interesting in Javascript. (For those of you that don’t know, NaN stands for “not a number”). Consider:

typeof NaN === 'number'; // true 
NaN === NaN; // false 
NaN !== NaN; // true
NaN + 1; //NaN
1 < NaN; //false

There are four kinds of operation which return NaN:

• Operations with a NaN as at least one operand
• Indeterminate forms

The divisions 0/0, ∞/∞, ∞/−∞, −∞/∞, and −∞/−∞ 
The multiplications 0×∞ and 0×−∞
The power 1^∞
The additions ∞ + (−∞), (−∞) + ∞ and equivalent subtractions.

• Real operations with complex results:

The square root of a negative number
The logarithm of a negative number
The tangent of an odd multiple of 90 degrees (or π/2 radians)
The inverse sine or cosine of a number which is less than -1 or greater than +1.

• Invalid Number constructor or invalid number string during parsing operation

More...

While working on big and complex web applications you’ll be faced to performance issues sooner or later. Its just a matter of time. So one of my recent issues was related to slowdown of the app in Chrome in one particular case. Chrome is well known for it’s V8-super-duper-fast engine and I was surprised that Firefox works faster in that case.

The case I’m talking about is processing large amount of big strings. Don’t want to dig into app-specific functionality, so let’s go ahead with the only knowledge that we have to do a lot of substring operations on very long strings in JavaScript.

Later I implemented simple test which reflects my real-world-code in order to investigate the difference:

function doTest(){ 
    var chars = []; 
    var n = 1024 * 1024;//number of chars in our string, so it will allocate 1024 * 1024 * 16 bits = 1024 * 1024 * 2 byte = 2048 kB 
    var i = 0; 
    while(i < n) { 
     chars.push(String.fromCharCode(32 + Math.floor(Math.random() * 91))); 
     i++; 
    } 
    var s = chars.join(''); //making the Big string      
    i = 0; 
    var start = (new Date).getTime(); 
    while(i < 10000){ 
      var c = n / 2; //get string of the half size of initial string size 
      var r = s.substring(s.length - c, s.length);//copy from c to the end of the string 
      i++; 
    } 
    var diff = (new Date).getTime() - start; 
    output('Diff: ' + diff);//Chrome - 3606, FF - 2 
} 
function output(s){ 
  document.write('You\'re using ' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '</br>'); 
  document.write(s); 
}

Note: I’ve used simple BrowserDetect script from quirksmode in my test.

More...

People will do the least amount of work possible to get a task done. In other words users are lazy, and mobile users not only lazy but often in a hurry. So make sure an app provides the features that people really need at the moment. Giving people more than they need just clutters up the experience.

Email Address Fields

<input type="email">

Most developers make a mistake of setting the input type of every form field to “text”. This is a problem because the input of every form field is not always just a plain text. Most forms usually have fields that ask for information with numeric or alphanumeric characters. When users try to fill out these fields, they should see a numeric or alphanumeric keyboard. Don’t force users to switch between keyboards by themselves. Do this job for them and they’ll be thankful to you.

It’s hard to find a form without email field nowadays. So it make sense to show email-related symbols on the keyboard from start, such as “@”, “.” and alphanumeric characters. You can achieve it by specifying “email” type to the html input. Unfortunately there is no space for numeric symbols on the screen (at least on iPhone/iPod), but most of the characters in usual email are letters. I’d like to have “.com” on this keyboard as well. Even more, usually users have their email addresses in mobile mail client, so why don’t let users to choose from this list?More...

People will often want more information than they can actually process. Having more information makes people feel that they have more choices. Having more choices makes people feel in control. Feeling in control makes people feel they will survive better.

So should I learn Objective-C in order to survive?