Fun with input[type=range], hsl colors and CSS gradients

By Jaaap on Friday 9 March 2012 15:17 - Comments (2)
Category: -, Views: 6.204

Or... how to make a color picker in html5

Today, Webkit browsers like Chrome and Safari have 3 features that make for a nice and easy color picker:
  1. CSS Gradients
  2. <input type="range"/>
  3. HSL colors in CSS
Combine the 3 ingredients above into a color picker that lets you input any CSS color and then play with Hue, Saturation and Lightness: Color Picker (Webkit Only)

CSS Gradients

CSS Gradients look something like this:

Cascading Stylesheet:
background: -webkit-linear-gradient(left, #F00 0%, #0F0 100%);

Change -webkit prefix to -moz -o or -ms for Mozilla, Opera and IE respectively.

<input type="range"/>

This one is pretty easy. If you want a slider control, stick in a little bit of this:

<input type="range" min="0" max="360" step="1" value="360"/>

and voila, it renders as a slider in certain browsers. Pity that Mozilla is lagging about 6 years behind.

HSL Colors

Its nice that most browsers now support hsl colors (and hsla, with transparency/opacity). It is far more natural for a human to adjust colors based on Hue, Saturation and Lightness than with RGB values. HSL colors are used like so:

Cascading Stylesheet:
color: hsl(360,100%,50%);

which is red.

IE9 and <select/>, why u no work?

By Jaaap on Wednesday 2 November 2011 17:55 - Comments (6)
Category: -, Views: 4.397

Ok i understand this horse has been beaten to death far too many times but...

It is so frustrating to work with <select/>'s in IE.

Let's try this for instance:

var sel = document.getElementsByTagName("select")[0];
alert(sel === sel.options);

This is false in every browser (as it should be) except IE(9)!

This means that if you have a function that accepts HTMLElements AND NodeLists, there is no way of distinguishing between a select and its options in IE.

Let's try something else:

<select name="make">
    <optgroup label="Alfa Romeo">

Now try to change the optgroup label's font-style to normal (it's bold and italic).
Cannot be done! How do you explain that to a customer?

Please Microsoft, fix these issues.

Block shady SSL certificates

By Jaaap on Wednesday 31 August 2011 17:37 - Comments (22)
Category: -, Views: 5.706

What's up?
There's been a lot of news lately regarding problems with SSL certificates.
IMHO, once a Root CA messes up and makes even one tiny mistake, they should be banned for life.
Who should you block?
This is a Root CA owned by the Chinese government.
This effectively means that the Chinese government can do a man-in-the-middle-attack on any SSL connection that is routed through their network (mostly to a .cn webserver or from a chinese client).
Since the chionese, like the iranians, are known to violate their citizens privacy, you cannot trust them with a Root CA and theirfore they should be blocked.

Shame on Mozilla for adding this certificate to Firefox.
Comodo has issued fraudulent SSL certificates after being hacked. They obviously don't have their security on a sufficiently high level.
DigiNotar's fraudulent SSL certificates have been used by the Iranian government to spy on their citizens. They knew they were hacked 6 months ago, blocked a couple of the hacked certificates but forgot one for *
They currently do not know if any more hacked certificates are out there.
How can i block these certificates?
Go to Preferences -> Advanced -> Encryption -> View certificates, select the certificates you don't trust and press "Delete or Distrust..." -> ok.
Safari (Mac)
Quit Safai and open Utilities -> KeyChain Access
Search for the name of what you want to block, right-click it, click "get Info", open the "Trust" block and select "Never Trust".
Internet Explorer
Go to Tools -> "Internet Options" -> Content -> Certificates -> "Trusted Root Certification Authorities" and remove the items you don't trust.

Feel free to leave a comment if i missed a Root CA or a howto for another browser.


By Jaaap on Wednesday 6 April 2011 16:09 - Comments (6)
Category: -, Views: 8.713

In search of better performance for my website i came across a free service called CloudFlare.

From their site:
CloudFlare protects and accelerates any website online.
We automatically optimize the delivery of your web pages so your visitors get the fastest page load times and best performance.
They serve as a CDN for all the content that has the proper cache headers (like expires, pragma etc).
If you subscribe for the free account, you are guided to a very clear setup process which involves transferring your Domain Name servers to CloudFlare.
Once it's done, the ip of your website changes to one of cloudflare's and content is served from or through their servers.
Performance in theory
If an image or a css file or a cacheable htmnl file has been served by ClioudFlare in the past, it can serve it the second time from its cache.
Since cloudflare uses servers all around the world and routes users based on the shortest route, the latency shoudl be low and (given enought bandwith) the file should be served pretty fast compared to a user on the other side of the world getting the same resource from your 1 server.
For dynamic content the cloudflare system will only add latency because the cloudflare server has to request the resource from its server to your server and only then can it be served to the client.
Performance in real life
My server was pretty fast to begin with. It is located in a decent datacenter in The Netherlands and typical latency within NL would range from 7ms for another fast datacenter 200km away to 200ms for a slow ADSL line.

When the CloudFlare DNS change was finished, the website felt a bit slower. The latency from my home location to the cloudflare server was about 130ms but that wasn't the problem.

The problem was that the latency between the cloudflare server and my server appeared to be around 500ms!
All of my html pages are dynamic in the sense that they should not be cached (not long anyway) so for every request the cloudflare server had to retrieve the html content from my server. The latency the user experienced would therefore be their latency to cloudflare + 500ms.
Google Webmaster Tools
The above is illustrated pretty well by Google Webmaster Tools. They have a nice graph under Diagnostics / "Crawl stats" that shows the latency they experience when crawling your site.
Here's a screenshot:
Their service was enabled between March 5th and March 28th.
Final Thoughts
If you have mostly well cacheable content and have a slow server or hight latencies for a large part of your users, CloudFlare might be for you.
It is free, and does serve as a CDN and it is relatively easy to setup.

In my case however, my users get better performance when they connect directly to my server.