TypeScript and Null: corollary

TL;TR

Since in TypeScript all types are nullable, there are some traps the developer can fall into like unterminated functions.

The domain

As it turned out from my previous post, in TypeScript every type is nullable: this means that for every type null and undefined are valid values.
Not to mention the notorious any, which fits any type well.

The problem

Going a bit further we can easily realise that given a function (string) => number like

function countCharacters(name: string): number {
    if (name) {
        return name.length;
    }
}

the compiler will not complain about it even if actually my function is returning (number | undefined).

And a block which is using that function like, for instance

const names: Array<string> = ["Doc", "Grumpy", "Sleepy", null, undefined]; // yes, it’s fine for TS
let i: number;
let total = 0;
for (i = 0; i < names.length; i += 1) {
    total += countCharacters(names[i]);
}
console.log(total);

will end up with NaN as a result: the names array is accepted with both null and undefined, and since the function countCharacters is implicitly allowed to return undefined our code is applying the operator + to different types which results in NaN.

The bottom line

Nonetheless seems impossible to check against such errors as of 1.8, because for TypeScript this is not a problem but rather a feature: thanks to type nullability it is compiling even against legacy codebases and moreover allows the average developer to write code before thinking.

There are some proposals to fix it like a compiler’s options or an identifier but as of today we can only use run time assertions, a strict linter and force our fellows to read Douglas Crockford.

One good alternative is to switch over Flow.

TypeScript and Null: corollary

A video posted by @magdaazab on Feb 16, 2016 at 10:34pm PST

//platform.instagram.com/en_US/embeds.js

magdaazab:

Now you know what happened! Through this super #funny video that we made for #valentine’s day and #infinity tv! Illustration by me, art direction and animation by Milan based studio #uramaki _______________________________________
Per chi era curioso di sapere cosa fosse successo! Questo è il video che abbiamo realizzato per #infinity tv in occasione di San Valentino! Io ho realizzato le illustrazioni e lo studio Uramaki ha curato l’animazione e l’art direction. #animation #illustration #motiongraphic #love #valentine #inspiration #illustrationoftheday #fail #graphicdesign #creative #illo #video #bestoftheday #visualart #illustrationartist

Video

TypeScript and null

TL;TR

In TypeScript all types are nullable: the compiler won’t catch common pitfalls and your type system will blow up.

The domain

As you know, TypeScript allows us to explicitly declare the type of variables and parameters defining interfaces or using the built in types (string, number, boolean…).

So you may feel confident that writing such a function:

function double(n: number): number {
    return n * 2;
}

other developers will always call it with a number.

The following calls, for example, are marked as an error by the compiler:

double("one"); // Argument of type 'boolean' is not assignable to parameter of type 'number'
double(true); // Argument of type 'boolean' is not assignable to parameter of type 'number'
double({}); // Argument of type '{}' is not assignable to parameter of type 'number'

which makes totally sense.

The problem

But what if someone calls it with a value which is undefined or null?

double(undefined); // what?!
double(null); // O_O

I’m sure (I hope) no one will call it intentionally, but what about this case:

interface Bounds {
    min: number;
    max: number;
}
var bounds: Bounds;
bounds.min = 0;    
// do stuff and forget about 'bounds' after three lines of code
double(bounds.min); // good
double(bounds.max); // good as well even if it is undefined

The last call is ok for the compiler, but with result in the worst behaviour possible: actually double(undefined) won’t fail at runtime, because for JS undefined * number = NaN.

So you’ll get a nice NaN going around your application which probably (if you are lucky) will cause a run time exception.

Bottom line

Don’t rely too much on the compiler when working with TypeScript and force your fellows to perform runtime assertions.

TypeScript and null

Linux Olivia 15 – apt-get – Not found [IP: 91.189.91.14 80]

Hi there, this morning I came across this very annoying message from my linux Mint (Olivia 15):

Err http://archive.ubuntu.com raring-updates/universe i386 Packages 404 Not Found [IP: 91.189.91.14 80] Err http://archive.ubuntu.com raring-updates/multiverse i386 Packages 404 Not Found [IP: 91.189.91.14 80] Fetched 163 kB in 23s (6838 B/s) W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/main/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/restricted/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/universe/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/multiverse/binary-amd64/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/main/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/restricted/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/universe/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80] W: Failed to fetch http://security.ubuntu.com/ubuntu/dists/raring-security/multiverse/binary-i386/Packages 404 Not Found [IP: 91.189.92.201 80]

So… after a while I’ve found that this is probably caused from Raring Ringtail (13.04) becoming EOL!

I’ve opened Synaptic, and then I’ve disabled old raring* repos.
The problem is that while trying to add new repositories, it suddenly crashed leaving me alone with a worse problem: apt-get stopped working at all.

Then, the solution:

sudo nano /etc/apt/sources.list

mine looked like: 
# deb http://archive.getdeb.net/ubuntu/ raring-getdeb ap ps games 

# deb http://repository.spotify.com/ stable non-fre e 

I’ve added: 
deb http://archive.ubuntu.com/ubuntu/ precise main restricted universe multiverse 

It works like a charm!

Cheers,
pietro
Linux Olivia 15 – apt-get – Not found [IP: 91.189.91.14 80]

Responsive web layouts based on Flexbox Model


Hi all,
I’m going to publish a small layouts collection: they’re based on the stunning forthcoming Flexible Box layout model so… take it like an experiment!

https://pietro909.github.io/responsive_flex_layouts/1
As of today I’ve put the first layout, very standard setup for a web application: header, footer, zoom and scoll locked, a main section and the aside.
I’m trying to adhere as much as I can to the rules of semantic html because I strongly believe that this is going to become a standard and I love it.
I just cannot see divs and lot of classes as of 2014, and I’m lucky enough to have the power to force my customers to not use some bad products.
I’ve choosen to not support old or bad browsers.

So, before you get angry:

  1. check your browser’s support
  2. update it… it’s free.
  3. change it… it’s free as well.

Enjoy the example:  first layout.
Download the full repo from Github!
 
For this work I’m using my own Less mixins:

https://gist.github.com/pietro909/8053521.js








Responsive web layouts based on Flexbox Model

Change Requirejs, Less compiler and CoffeScript versions in Play Framework

Hi there,
I’ve found myself struggling with Play 2.2.1 for one (really? just one???) reason: it comes with Less 1.4.2, that’s a great CSS compiler but…

…according to the official Less’ website, they’ve released the 1.7.x version!


And what’s wrong with 1.4.2? Some bufixes and improvements, as usual, but what I really love is the possibility to pass rulesets to mixins as arguments: definitely great!

The biggest problem is that in our development stage we’ve frozen the project to Play 2.2.1 and there’s no way to upgrade it. So, digging into Play’s files I’ve discovered this wonderful folder:

your-play-path/framework/src/sbt-plugin/src/main/resources

there you can find less-x.x.x.js, coffeescript.js and r.js: just overwrite them and run

your-play-path/framework/build

then leave the console open and type
> compile
> publish-local

…enjoy!

Pietro

Change Requirejs, Less compiler and CoffeScript versions in Play Framework

CSS3 Flexbox made easy!

Hello everybody,
I’ve decided to use FlexBox (CSS3) layout for my biggest project.

After a while (struggling with some issues and lot of implementation’s problem…) I got the job done with some LESS mixins.

I’ve tested them on Chrome (>32), Firefox (>25) and Safari (>6.0), even on mobile devices (just Android & Apple).
It works like a charm, so I’m giving those mixins to everyone who is learning or developing using this wonderful tecnology.

Let me know for problems, issues or improvements.

Sorry for not posting examples or tutorials but I’m definitely overwhelmed as of today and too busy.

Ciao!
Pietro

CSS3 Flexbox made easy!

Footage Manager by TPTeam




Hello,
tonight I’m going to publish our first public project: the Footage Manager.

It is a JS frame player who’s able to track movement onto a movie: it seems quite complicate this way but…
JUST TRY IT!

This manager is based on PIXI and Astar and its aim is to follow mouse/device movements updating a MovieClip object. The goal is to control an animation composed by a number of textures throught the mouse’s movement, in order to get an animation interacting with the user. 

The 3D character has been edited and animated with Blender (as usual) and I’ve packed the frames with our STexturePacker 

I’ll publish some instructions and one tutorial later, now just try it if you want! I think that the workflow is quite straight-forward (it has been for me, so… don’t worry!) anyway would be great to have also some more documentation.

Credits:

Pietro – TPTeam

Footage Manager by TPTeam