All posts by Murtada al Mousawy

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!