Best Practice: Convert 1 and 0 to true and false in Javascript

1 und 0 zu true und false in Javascript
Today there will be only a very short post. There are certainly many ways to convert 0 and 1 in Javascript to true and false.
The following way to reach the wanted result I’ve seen today. I think it is probably the shortest and most elegant way to go. In addition, it works not only for integer values, but also for the string representations of 0 to 1.
So this is the stuff I like to add to my personal “POP”-collection (pearls of programming)…
0 and 1 to true and false
To convert the integers 0 and 1 to boolean, it is sufficient to use the not-operator twice.

var thisIsFalse = !!0; //false
var thisIsTrue = !!1; //true

Why it works? Here is a short explanation. 1 is a valid value and thus true. When we write !1 now, then we create a false condition because 1 […]

How to pixelate images using Javascript

Close Pixelate TutorialToday there is again a bit of Javascript code. The exact topic is about how you can pixelate images via Javascript. This has both advantages and drawbacks, which I would like to briefly point out once below.

Pixelation can be done dynamically (Manual effort in your graphics program falls away. Graphics must not be known beforehand.)
The computational power required is outsourced to the client side. In contrast to a server-side solutions (eg using PHP & Imagick), the computational load is distributed to the users. This helps to keep the server load low, if you have a lot of visitors.


The pixelation should be used rather as design or graphic effect, since the data is only sent not pixelated to the client. So if you really want to hide faces and picture information the pixelation still needs to be done before delivery to the […]

Javascript’s escape() in C# – a C# equivalent to the escape()-function

csharp_vs_javascriptThe .NET framework provides a large number of ways to encode HTML code and URLs. There exist, for example, Uri.EscapeDataString(), Uri.EscapeUriString(), System.Web.HttpUtility.UrlEncode(), System.Web.HttpUtility.UrlPathEncode(), System.Web.HttpUtility.HtmlEncode() or System.Web.HttpUtility.HtmlAttributeEncode().
However, if you are looking for equivalent functionality to Javascript’s escape(), so you will be disappointed by all of these aforementioned functions. None of these inherently with the .NET framework delivered functions is equivalent to the Javascript escape() function.  For better understanding, I made the following example:
The test text is in german, because the ‘ä’ is a nice character to show the problems. Translated to english it means: “Raffi’s annoying C# testcode”.

// Original source text
// Raffi’s ärgerlicher C# Teststring/Testcode.

// Javascript original (produced by escape())
// Raffi%27s%20%E4rgerlicher%20C%23%20Teststring/Testcode.

// Uri.EscapeDataString():
// Raffi’s%20%C3%A4rgerlicher%20C%23%20Teststring%2FTestcode.

// Uri.EscapeUriString():
// Raffi’s%20%C3%A4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.UrlEncode():
// Raffi%27s+%c3%a4rgerlicher+C%23+Teststring%2fTestcode.

// System.Web.HttpUtility.UrlPathEncode():
// Raffi’s%20%c3%a4rgerlicher%20C#%20Teststring/Testcode.

// System.Web.HttpUtility.HtmlEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

// System.Web.HttpUtility.HtmlAttributeEncode():
// Raffi's ärgerlicher C# Teststring/Testcode.

But I would not blog about it if I did not have a solution […]

globalCompositeOperation copy fix – how to paint transparent on JS canvas

Below there is again a very special article. I think the people who are affected will understand what it is about. All others must be said that the next article will be for a wider audience again.
Some time ago I wrote an article about small progress bar script of mine, which is implemented entirely in JavaScript. Particular attention I had laid in part to the nice rounded corners. (See the following screenshot)
Javascript only Progressbar
Originally, I had realized the transparent corners using own paths, which I created and filled as shown below.

ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgba(0,0,0,0.0)";

Unfortunately I had to recognize that the script was not working correct any longer. But the JavaScript console of different browsers (IE, FF, Chrome) curiously gave me no errors or warnings.
After some googling I found out that the globalCompositeOperation “copy” is not correctly implemented/supported anymore. […]

Tutorial: How to create a simple HTML5 JavaScript based progress bar

JavaScript Progressbar
Since I needed a javascript based progress bar for a Web project and I could not find a component that meets my expectations, I decided to write my own progressbar.
The project was implemented in JavaScript with help of the HTML5 canvas element. The progress bar gets along without any image files, as it is usually the case with other JS / CSS progress bar solutions. By default it can handle 100 states (0-100%) and input errors will be caught and visualized.
Since I like to share my developments I present you the progressbar of course. I’m always open for criticism, praise and suggestions.
For a demo / example click here. The source can be found over here: pbar.js
Below I will show you quickly how to use the progressbar.
At first you have to embed the progress bar script and […]