Why does JavaScript even have null?

JavaScript has its quirks and difficulties. One of them is null & undefined. If there’s undefined, why does JavaScript even have null?

Equality

Let’s start exploring null and undefined by having a look at the following comparisons:

null >= 0; //true
null <= 0; //true 
null == 0; //false 
null > 0;  //false
null < 0;  //false

How can null be bigger or equal to zero, less or equal to zero, but not be equal to zero?!

To understand this we have to know how JavaScript handles these comparisons. There are two different kinds of operators used in the example above: _Equality Operators_  (==, ===, != and !===) and Relational Operators (>, <, >= and <=).  And both work differently.

Equality operators compare at an object level. If both _operands, _the things left and right of the operator, are of different types a strict comparison (=== or !==) is used. Because null is an object and 0 is a number they are not equal.

In the case of Relational Operators, both operands are converted to the same type. In the example to a number. Under the hood, JavaScript is doing the following:

Number(null) >= 0; //true

Which makes much more sense. Number(null) return the value 0 and 0 is equal to 0.

Let’s try the same examples with undefined:

undefined >= 0;//false 
undefined <= 0;//false 
undefined == 0;//false 
undefined < 0;//false
undefined > 0;//false

First thought would be that this should result in the same outcome. Although JavaScript is doing the same, the result is different. Again, JavaScript is converting undefined to a number, but Number(undefined) is not 0 but NaN. The JavaScript spec says that every comparison with NaN results in false, even a comparison with NaN.

There’s even a little bit more to the _comparison algorithm _than this, but this explains the idea.

Why null?

Does JavaScript need a null value? Though it would be possible to write an entire application without using null, and often it does, there is a place for null. The difference in usage is intention. A null value is intenionally abcent, where an undefined value is often unintentional and just the default value.

For example in a function retrieving a piece of data. When that data isn’t there, this function returns null. Otherwise, it returns the data. This way one can tell if the value is returned by the function and is set to null or if the variable that should contain the result isn’t set at all.

In other words: null !== undefined

 

 

JS13k Games Post Mortem | A JavaScript WebVR game using A-Frame for the Js13KGames jam

On the 13th of September, the JS13k Games jam 2017 has ended. The challenge in this contest is to build a game in JavaScript that fits in a .zip file of 13k in one month. New this year was the A-Frame category. A-Frame is a web framework for building virtual reality experiences on the web. I love 3D and VR, programming in JavaScript and a challenge, so I decided to participate (again) this year. Eventually, the biggest challenge turned out to be time. I ran out of time, with about 5kb left of the 13kb.

Since I always wanted to try creating a _roguelike_ game that was going to be my game type, and that I would love as much as I love the no game throws from P4rgaming. The world should be generated randomly, with monsters and loot. You should search for pieces of you spaceplane that crashed onto this planet. At first, I wanted to create portals to go from level to level until the player would have found all pieces. I later, due to the time constraint, changed to 1 level with 5 pieces you have to find. I wanted a ‘low res’ pixel-arty Minecraft-like look.

A-Frame

A-Frame uses a declarative HTML syntax which makes it very easy to understand (and to copy-paste). A-Frame supports all the major virtual reality devices, mobile devices, and the desktop. It is built on top of three.js. This way you can leverage the full potential of 3D on the web.

A-Frame works by writing components to use in combination with the markup. The way this worked reminded me a lot of the way games are built in Unity3D: Creating a ‘script’ and attach it to a game element. It took me a few days to get into this mindset, but when it hit I started creating components for every element of the game, like the player, the mobs, ground tiles and the materials.

For moving around I chose to limit to a ‘gaze’ at the tile next to your character to move to that tile. This feature is implemented in A-Frame and could be handled by having a ‘click’ event handler on a ground asset. This even could be filtered by using a css class on the ground elements.

Map Generator

A hard part to build was the map generator. Though there is a lot of information on the web on building a dungeon generator on the web, pretty much all of them are too complex for the 13kB limit.

One thing I kept in mind is the fact the 13kB limit is the zipped version of your game. Having some very repeating data inside the game should theoretically be compressed quite a lot.  I decided to go for a type of generator that would place and connect various ‘rooms’. The rooms are constructed from 2D arrays containing 0s, 1s and 2s. Where 1s are floors and 2s are exits. I also wrote a function that mirrors the rooms horizontally and vertically.

To save bytes on holding the generated map in memory, I used a canvas instead of an array. The canvas has every function I need to write and read data for the map.

Every tile in the game is represented by a pixel on the map. Each pixel is made of 4 bytes. I used the first to represent the floor, the second to represent an item and the third for a mob. The actual value of these bytes varies per type of mob or item. The best side effect of using a canvas is that I added it to the DOM to debug the map generator. Below is an image from the map. You can clearly see the bright green pixels, which are the pieces of the plane.

The next step after generating the map is to write it to the 3D scene. In this, I used a couple of for loops to look at each pixel and draw a floor tile if the first byte is a not- zero value. I also gave the A-Frame entities an ID with the position on the map. That way it became very easy to find an entity based on its position on the map.

Shaders and Art

To get the game to look the way I wanted I wrote a couple of shaders. Two vertex shaders and a fragment shader. The first vertex shader is pretty simple, it only transforms the vertices to 2D space and calculates the UV coordinates for the sprites. The second vertex shader is slightly more complex. It is used to billboard the sprites. They are rendered that they always face the 3D camera. The fragment shader is used to render the sprites and uses a few tricks.

Speaking of sprites. The sprite sheet I used is this:

Note that there are colored floor tiles, mobs or items in there. The shader I wrote is replacing the gray colors of these with a color from a second sprite sheet.

I was planning on creating a lot more ground tiles in different variations. The plan was, for example, to have a grassy biome. This biome would have all kinds of variations of grass tiles. Some all green, some with yellow flowers and some with stone tiles. I even thought of doing animations on lava and water by cycling through a couple of different rows from the palette. But, again, I didn’t have the time to do so.

For creating and testing the shaders I used ShaderTool and FireFox. ShaderTool makes it very easy to write you GLSL code and test it by wiring up the inputs. I used FireFox for fine-tuning and debugging. The GLSL dev tools in FireFox let you modify the shader while running. Very handy.

The biggest issue I ran into while creating the shaders was handling the opacity correctly. I eventually added a parameter as a cutoff value. If the alpha drops below this threshold, the pixel is discarded.

Text

Near the end of the contest, someone mentioned on Slack that the a-text component was downloading a font. Since using external stuff besides the A-Frame library was prohibited, using the a-text component wasn’t allowed as well. I solved this issue by creating a new component that renders a text on a canvas and uses this as a texture on a plane entity. Too bad this took some time to build and caused other items on my todo list to be removed.

Future

You can play the game at JS13KGames or at my GitHub. You can find the source there as well. Since the game isn’t entirely finished I’m thinking of continuing working on it. A few features I’d like to add are a better following camera, more intelligence on the mobs, an inventory for the items and durability on them so they break and better biomes.

Just want to close by thanking Andrzej Mazur and c9bets for having this great jam every year!

Keep your password safe!

I’m currently working on a short course on web security. In this course, I’m going to show a couple of common mistakes in websites that create gaping holes. I’d like to give you a small tip in advance, just to make you more aware of what you are doing when you hit that ‘remember my password’ button in your browser.

Although I’m pretty sure your browser itself keeps the password safe, it has to place it in the password field of the login form to be able to submit it. With this small trick you, (and anyone else that might sit behind your pc), can read it again…

When the username is selected and the browser has filled in the ‘ * ‘ in the password box, right click the password box and hit inspect.

In the inspector go to the console and type: $0.value

Et Voila, your password is exposed.

The ‘$0’ refers to the selected element in the inspector. ‘value’ just writes the value property on that to the console. In this case, the password is in there.

 

 

 

The PWA Resource list

Recently I started getting asked more and more about the development of Progressive Web Apps. After the basic explanation about what they are I usually point to various places on the web. So, I decided to create this list of resources to have them available for everyone.

Resources

Tools

 

People

If you want to stay up to date with everything around progressive web apps (and more modern web stuff), you should start by following these people:

Examples

More examples

Videos

Community

Wrap

I’ll keep this page up to date as new, or better, resources come around. If you know something that is absolutely missing from the list, please let me know in the comments, or through twitter (@sorskoot).