Crispy Pixels

blog-crispy

Ever wanted to showcase your pixel art zoomed in without it getting blurry in a browser? Unfortunately, it’s not easy to do right now.

Firefox, Opera and even Internet Explorer all have a simple CSS property to enforce “nearest-neighbor” interpolation, but WebKit browsers like Chrome, Safari and most mobile browsers do not have this option available yet. So I created a way around this problem with HTML5 canvas.

With this widget, your pixel art can be shown on the web with custom width and height properties to have them zoomed in, and get the nice pixel sharpness back that you want for your pixel art!

How to use

To use Crispy Pixels on your own website, just add the following line of code before the closing of the <body> tag on your page:

1
<script src="//murtada.nl/downloads/crispy-pixels.min.js"></script>

Or, you could download the script and host it on your own server:

Download Crispy Pixels

JavaScript: an intro to programming pt.1

Hey there! If you’re here to get introduced to programming, you’re probably at the right place!
I’m going to use JavaScript to teach you the very basics of modern day programming. If it’s something seen useful, I’d probably write another part to go more in-depth about the more complex things. But don’t worry, you won’t need any knowledge about anything in particular except for your high school maths and some basic computer skills.

So get yourself a cup of coffee, tea, water or whatever you fancy and let’s get things started!

Why JavaScript?

Programming is a little bit like cooking. For some programming languages you need specific tools to be able to prepare the ingredients. Some languages require you to have a lot of tools to maybe let you show a simple line of text on the screen.
The reason I chose Javascript is because the tools you need are really simple to acquire and logically understandable. Basically JavaScript looked for me like the most simple language to work in, so you can go straight to learning the principles of programming and the language itself, rather than fiddling around to get things working in the first place.

Tools you’ll need

  • A source code editor
    Get a simple flat text editor like Notepad (readily available on Windows), TextEdit (readily available on Mac) or choose a more robust and user-friendly program like Notepad++ (open source for Windows only), TextWrangler (open source for Mac only).

  • A browser
    Any browser would do, but I’d prefer Chrome or Firefox since it’s really easy to find your way through their interfaces when you are writing and debugging JavaScript.

Familiarize yourself with your tools

Open up your source code editor of choice and your preferred browser. Open up a new empty file in your editor and save it as javascript1.html.

save-as

Make sure you save your file in the All Files type if you’re saving through Notepad on Windows.

Now go to your browser and open the file you just saved javascript1.html by pressing Ctrl+O on Windows and ⌘+O on Mac. Browse to the folder you saved your file in, select javascript1.html and press Open.

If everything went right, you’ll see a white page in your browser. The next step will be to open up the in-browser console for debugging the code later. First press F12 while your browser is active and it will pop-up the Developer Tools window. Now select the Console tab on the toolbar.

developer

This is the DevTools window in Chrome.

Writing your first line of code

To get your browser to run JavaScript code you will have to enclose our code with HTML tags.
Go to your editor and let’s write down:

1
2
3
<script>
 
</script>

After each time you edit your code, you will have to manually save your file to see any changes in your browser. Your browser also does not magically know if the file has been changed, so you will have to refresh the page every time you have updated your code.

In an HTML file (a file that your browser will render as a webpage), you will need to define a tag around elements to give them a specific function. In this case <script> will define a script tag that will run as soon as the browser starts parsing your file. We will only use this once because this way of defining a specific object is a part of the HTML code, and not pure JavaScript. But since we want the browser to be able to actually do what we are going to write inside the <script> tags, we had to take this step first.

So in between the <script> tags, we are now able to write in the language JavaScript. As cliché as it sounds, but as effective as it is, we are going to make the browser render a simple “Hello world” string on the screen. To make it interesting, we are going to do it in a few ways.

The simplest way to get JavaScript to write something, is to use the Console in the DevTools window of your browser, instead of the actual page:

1
2
3
<script>
console.log("Hello world!");
</script>

This code on line 2 will tell the console to log a specific string, in this case "Hello world!". It will look like this in Chrome:

hello-world-console

“Hello world!” logged in the console of Chrome

In the above code, console is an object with additional methods that you can call by referencing them through a dot(.). In this case we referenced the method log(). This method accepts a piece of text in the format of a string. In programming languages strings are usually written by starting and ending with single(') or double(") quotation marks. Another thing to notice is that in JavaScript a line of code is ended by a semi-colin(;). These rules are a part of a language syntax. Just like any other language, in programming you have specific rules to make written sentences readable and understandable, but this time for the computer!

But there’s also another way to write “Hello world!” in the browser. You can actually make the browser write it on the page itself by using another method. The benefit of this way is that people who don’t have the DevTools open, will be able to see it if they open the same javascript1.html file.

1
2
3
4
<script>
console.log("Hello world!");
document.write("Hello world!");
</script>
hello-world-document

Now it’s also visible on the page!

Variables and data types

A lot of times you want to store a value or word temporarily, or even throughout the entire run of your code because it’s just easier than typing something over and over again. In these and other cases, variables really come in handy. Just like in algebra, in programming, variables are references to a value.

In JavaScript, a variable can hold the following values:

  • String – text or characters enclosed by quotation marks
  • Number – any type of numerical value
    (valid examples are: 4, 551, 3.14, 2.53e10, 0x3e7)
  • Boolean – a true or false value (0 or 1)
  • Object – data with added properties and methods
  • Array – a list of values, these can be anything
  • Null – an “empty” value
  • Undefined – a value that shows up when the variable is undefined

Great stuff! This opens up a lot of possibilities! Let’s try making a few variables and giving them values. Continuing our code where we left of, we add the following few lines:

1
2
3
4
5
6
7
8
9
10
<script>
console.log("Hello world!");
document.write("Hello world!");
 
var a = 5;
var b = 3.5;
var c = 6;
 
document.write(a + b + c);
</script>

So the syntax for defining a variable is simple. You begin with var, followed by a space and then the name of the variable. You will assign a value by using the = equals to sign, followed by a value. Don’t forget to close the sentence with a semi-colon! Remember that variables are case-sensitive and must not be used interchangeably. For example: The variables lastName and lastname, are two different variables.
The functions myFunction() and myfunction(), are two different methods.

Notice that we have not enclosed the numerical values with quotation marks, since otherwise they will become strings and not will not be recognized as real numbers that the browser can do mathematical things with.

hello-world-2

The result of the sum of variables a, b, c is indeed 14.5, but there’s no space between the ! and 14.5.

As the above image shows, there is no space between the previously written “Hello world!” and the newly added numerical value. This is because in programming, most things are not automated and you will have to manually do it yourself. This is a simple fix, and you can simply add a string with a spingle space " " in front of the formula a + b + c. Beware though, when adding a string to a numerical value with a plus + the code might cause errors because the browser will recognize the string is a numerical value. If in your code a string is connected to another string like "he" + "llo" it is called concatenation. To ensure that everything works like you intend, enclose the mathematical formula with brackets (), like so:

1
2
3
4
5
6
7
8
9
10
<script>
console.log("Hello world!");
document.write("Hello world!");
 
var a = 5;
var b = 3.5;
var c = 6;
 
document.write(" "+(a + b + c));
</script>
hello-world-3

That’s more like it! You can also add a new-line HTML tag <br> instead of the space to make the text jump to the next line on screen.

Awesome! But we can actually make “Hello world!” and the formula get written on the page from the same write() call, instead of using two calls. Simply remove lines 2 and 3 and write “Hello world!” in between the quotation marks of the remaining write() method. Oh, and we might as well use a <br> tag instead of the space while we’re at it.

1
2
3
4
5
6
7
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
document.write("Hello world!<br>" + (a + b + c));
</script>

Note: JavaScript ignores extra spaces and new lines after a semi-colon (;). You can add white space to your script to make it more readable. The following lines of code are equivalent to the above:

1
2
3
4
5
6
<script>
var a=5;
var b=3.5;
var c=6;
document.write("Hello world!<br>"+(a+b+c));
</script>

Statements

Okay, now we got the basics of variables, how do you actually work with them, other than simple mathematical calculations? Statements are the answer in most programming languages. In JavaScript, statements are “commands” to the browser. The purpose of the statements is to tell the browser what to do. So technically the code we have written contains statements already! But these statements are really primitive and you are not able to change a lot about the result of the statement.

That’s why there are statement identifiers, reserved words that cannot be used as variable names (or any other things). Each identifier will tell the browser to perform a specific action. For this part of the tutorial, we will take a look at the if ... else statement.

Say, for example, we want to know if a is smaller in value (less than <) than b. How do we do that? Well, let’s first get rid of line 6 and start writing from there. We want to check if something is true or false, so we have to begin with the if statement:

1
2
3
4
5
6
7
8
<script>
var  a = 5;
var b = 3.5;
var c = 6;
 
if () {
}
</script>

The syntax for the if statement consists of the word “if”, followed by an opening and closing bracket (). After that we put down an opening accolade {. This signifies the beginning of what will happen once the if statement returns true. We close the statement with a closing accolade }.

We put the actual “question” that the if statement is going to check in between the brackets (). So in this case, we just want to simply check if a is less than < b.

1
2
3
4
5
6
7
8
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
if (a < b) {
}
</script>

Now what would actually happen if a < b? Let’s try simply put the formula with the answer on screen.

1
2
3
4
5
6
7
8
9
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
if (a < b) {
document.write("a < b = true");
}
</script>
statements-1

I saved it, but it just shows an empty page!

As you might have guessed, the value of a is indeed bigger than b. Thus, the statement never runs the code inside the accolades. In order for our code to also present us with something on screen in the case the if statement returns false, we need the else statement. The else statement is a little different than the if statement: it does not work on its own. You need the if before you can use the else. The syntax goes as follows:

1
2
3
4
5
6
7
8
9
10
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
if (a < b) {
document.write("a < b = true");
} else {
}
</script>

Fairly simple, right? Since you already know what you want the browser to check (a < b), you simply put else behind the closing } accolade of the if statement, followed up by yet another set of opening and closing accolades {}.
Now let's try making our code say the formula is false in case it's not true.

1
2
3
4
5
6
7
8
9
10
11
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
if (a < b) {
document.write("a < b = true");
} else {
document.write("a < b = false");
}
</script>
statements-2The value 5 is indeed not lower than 3.5; our code works!

You can actually try concatenating the sentence with the real values of the variables. It's fairly simple, but can be hard to see at first. You actually have to use the plus + sign to connect a piece of string to a variable. So we have for example variable a and the strings "I have " and " apples", you can put the variable a in between the two strings like this: "I have " + a + " apples". This will give you the concatenated string: "I have 5 apples".

In our case we can concatenate our sentences like this:

1
2
3
4
5
6
7
8
9
10
11
<script>
var a = 5;
var b = 3.5;
var c = 6;
 
if (a < b) {
document.write(a + " < " + b + " = true");
} else {
document.write(a + " < " + b + " = false");
}
</script>
statements-3

Now the actual values of the variables get written on the page.

Try experimenting with different names for variables, different values for the variables and different sentences as results of the if ... else statement.

Conclusion

Wow, you've made it! It wasn't that hard, was it?

In part 1, you've learned:

  • how to set up an HTML page
  • working with the console of DevTools of your browser
  • how to set up a JavaScript tag to write code in
  • basic knowledge of variables
  • basic knowledge of JavaScript's syntax
  • working with the if ... else statement
  • concatenation of strings and variables

There are going to be more parts of this tutorial in the future, so stay tuned.
Meanwhile, experiment along and try some funny things with the what you've learned so far!

Have fun!

The Bitcoin Adventure part 1

The term Bitcoin has become such a big phenomenon by now, even small shops in my town (Delft) are accepting it as a payment method. Café de Waag will accept bitcoins for food and drinks. While No13 has fashion clothes to offer for bitcoins.

So what is Bitcoin?

You might already have guessed it’s a type of monetary system. It’s in fact the first decentralized digital currency. Decentralized means that there’s no bank, country, company or person that controls or owns the money. This works because the Bitcoin network uses peer-to-peer technology —like torrents— to operate, validate and secure the network. Now being decentralized also means there is no such thing as "interest", there’s no "loans" and the value of bitcoin doesn’t depend on a country’s welfare.

Bitcoin_Logo_Horizontal_Dark

The official Bitcoin logo as seen on bitcoin.org

Fiat money is money that has no entity backing it other than the issuer, usually a government. When the United States dollar finally disconnected from the gold standard in 1971 it became a fiat currency. Basically the USA declared, “The dollar has value because we are ‘Murica” and the world said, “OK”. In actuality, the US dollar has no intrinsic value other than the fact it is issued by the United States. Most modern currencies are fiat money.

Bitcoin follows the same principle, in that its value is determined by perception. Instead of the trust of some government entity being evaluated to determine the value of Bitcoin, other factors (the technology, widespread acceptance, understanding of e-money, etc.) are taken into consideration. When magazines and online entities write intriguing articles about Bitcoin, people take interest in it, the demand goes up and so does its value v. government-back currencies. Likewise when Mt. Gox is DDoSed, a Bitcoin service shutters, or $250,000 worth of bitcoins is stolen, people get nervous, demand drops, and so does Bitcoin value.

The Bitcoin network is a peer-to-peer payment network that operates on a cryptographic protocol. Users send bitcoins, the unit of currency, by broadcasting digitally signed messages to the network using Bitcoin wallet software. Transactions are recorded into a distributed public database known as the block chain, with consensus achieved by a proof-of-work system called mining. The block chain is distributed internationally using peer-to-peer file sharing technology similar to Bit Torrent. The protocol was designed in 2008 and released in 2009 as open source software by “Satoshi Nakamoto”, the pseudonym of the original developer or group of developers.

network

The current real-time estimate of the Bitcoin network using Bitnodes is 8000 to 10000 nodes that are reachable at any one time.

Why should you use Bitcoin?

There’s a lot of benefits to using bitcoin over existing currency. For starters, saving your money is safer since your bitcoins are saved on a medium of your own choice. And because the money is digital, it can be saved in a tiny container. A USB flash drive is a great solution, and if you encrypt your wallet you can even keep your money on Dropbox or a similar service for a backup.
However, your bitcoins digital wallet can be lost. Just like with real wallets, if you lose your digital wallet, you lose your money.

bitcoin-backup

My wallet is encrypted and backed up on Dropbox.

Sending and receiving money is also considered safer because transactions are semi-anonymous. All Bitcoin transactions are public information. Anyone can know the amount, the time, and the wallet numbers of the two participants. They may not necessarily know who the human owners of the digital wallets are. So you may send and receive money without ever adding your name, address or account details. That being said, it’s still a risk to send bitcoins since transactions are not reversible. Bitcoin transactions cannot be undone, except by a second voluntary transaction of the same amount in the opposite direction. (This is unlike credit cards, where the merchant can lose the received money to a “chargeback” even after they have shipped the product.)

As a buyer using Bitcoin, keep in mind that there is likely nobody to petition for help should a seller not ship you a product (as governments and their courts will likely be quite unfriendly to Bitcoin, see below). For this reason, buyers would be wise to deal only with reputable sellers, or use escrow services.

Bitcoin transactions happen virtually instantaneously, and the transaction is then verified by the peer-to-peer network of Bitcoin users. The more positive confirmations you receive from the network, the more likely the transaction is valid and final. This can take a few minutes.

For big spenders there’s a benefit of really small transaction fees and no taxes. Transaction fees are actually still non-obligatory, but to ensure fast verification of transactions, small fees help mining pools to accept your transaction faster and verify it within minutes.

The benefit of almost no fees and instantaneous transaction makes the system very viable for larger global transactions since sending money through banks to the other side of the world may be a real hassle and includes lots of fees and taxes. Even PayPal has fees of 2.9% + $0.30 per sale and usually takes a few days to process the transaction.

How does Bitcoin have value?

Bitcoins have value because they are useful as a form of money. Bitcoin has the characteristics of money (durability, portability, fungibility, scarcity, divisibility, and recognizability) based on the properties of mathematics rather than relying on physical properties (like gold and silver) or trust in central authorities (like fiat currencies). In short, Bitcoin is backed by mathematics. With these attributes, all that is required for a form of money to hold value is trust and adoption. In the case of Bitcoin, this can be measured by its growing base of users, merchants, and startups. As with all currency, bitcoin’s value comes only and directly from people willing to accept them as payment.

bitcoin-capital

The Bitcoin Market Capitalization is shown above in a graph.
At the end of 2013, one bitcoin costed over a 1000 USD.

The price of a bitcoin is determined by supply and demand. When demand for bitcoins increases, the price increases, and when demand falls, the price falls. There is only a limited number of bitcoins in circulation and new bitcoins are created at a predictable and decreasing rate, which means that demand must follow this level of inflation to keep the price stable. Because Bitcoin is still a relatively small market compared to what it could be, it doesn’t take significant amounts of money to move the market price up or down, and thus the price of a bitcoin is still very volatile.

To be continued…

As I delve into the world of Bitcoin, I’ll update my blog with new findings and experiences. So far I’ve invested €50,- in Bitcoin just as an experiment. I received 0.10421875 BTC for that amount of euros.
If you’ve got any bitcoins to spare and would like to donate me a cup of coffee, I’d very much appreciate it! My donation address is: 1BCC7Wu95u9AYo45dV33iHPyNFtDuqj5gj

donate