JavaScript Less Known Secrets - Lately in JavaScript podcast episode 42

Contents

Introduction (00:20)

JavaScript Maximum Call Stack Size (9:40)

Seven JavaScript Quirks I Wish I'd Known About (13:08)

You have ruined JavaScript (21:42)

Manipulate Arrays and Objects with Excel-like Formulas using FormulaJS (26:35)

Language Syntax Highlighting with PrismJS (29:00)

JavaScript Innovation Award Winners of February 2014 (32:23)

JavaScript Innovation Award Rankings of 2014 (44:27)

Conclusion (47:45)

Contents

Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript

[Music]

Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast, Hangout. This is Episode 42. And this time again, I have here, as always, my guest, Arturs Sosins from Latvia. Hello, Arturs. How are you doing?

Arturs Sosins: Hello. I'm actually... It's midnight here, in between the days, and I'm glad to be in this special podcast because 42 is a special number - all science fiction fans should know it - because 42 is the answer to all questions.

Manuel Lemos: Really? Damn, I'm not a science fiction fan. What is it all about? Damn, I'm not a nerd enough to know about it. Now you need to explain it.

Arturs Sosins: Yeah, well, basically there was a book where there was a simple computer and everyone was asking different questions to it and the only answer it gave was 42.

Manuel Lemos: What is that book? I remember something but I forgot.

Arturs Sosins: It was Isaac Asimov's but I don't remember its exact name right now.

Manuel Lemos: Interesting. Is there a movie about that?

Arturs Sosins: I doubt it but well, maybe.

Manuel Lemos: I'm pretending to be Generation Y. We don't read books, we just watch movies.

Arturs Sosins: I'm supposed to be that generation now.

Manuel Lemos: So we are switching. You read books and I watch videos.

OK, anyway, this JavaScript Hangout. Enough of the science fiction nerdery.

Game Graphics with CutJS (1:47)

Manuel Lemos: Today, we have several interesting topics to talk about, varied subjects. And I'm going to start talking precisely, one about a game engine.

Let me share the screen here if I'm finding the right window. Let's see. OK, this is supposed to be the one.

And this is basically a game engine, actually graphical game engine called CutJS. It seems interesting because sometimes you have a certain interest to develop games in 2D, especially after the huge successes of 2D games in JavaScript like 2048.

Arturs, have you been playing 2048?

[Laughter]

Manuel Lemos: I guess.

Arturs Sosins: I even reached the 2048 well.

Manuel Lemos: Yeah. Well, I reached once. But still even after 2048, you just can't stop playing that, that's bad because we have work to do.

With this CutJS library, it seems to be an eventual solution for creating games like this. I found it very straightforward and here is an example. Let me increase the font here. They give an example to a very simple game which define the basic view box where you'll be presenting your game.

You can attach elements of the canvas that will appear on a web page. I did not study this enough in depth to comment on it in full, but it seems very straightforward.

Arturs, did you try this library? What did you think?

Arturs Sosins: Well, actually, from now and then, I need to create some demo games for some company startups. Usually, when they request it on web platform, HTML 5 and Canvas, I try to pick out different engine over time so I could try them out.

Recently, I was working with CreateJS and PhaserJS. And all of these engines that I tried, they actually work really similar to ActionScript. You have a stage, you have a sprite for grouping, bitmap objects. So, most user that are familiar with ActionScript could really be into it and develop it.

But when I checked out the CutJS, then it seems it's far away from the Flash ActionScript paradigm and it's more like a natural way of how we would develop a game in JavasScript.

 So, I think they even mentioned that the API is actually jQuery-inspired, so most people would know that. And it's probably tough JavaScript developers could easily dive in to try to create a game with CutJS other than learning more ActionScript-like approach.

Manuel Lemos: So, what's the... I did not get what the difference is. Is it chained-calling style?

Arturs Sosins: Actually, yeah, including chained-calling style and, you know, like in ActionScript, there are pre-reserved names that objects are usually called like bitmap ,as I said, there's a stage for sprites for grouping. But here, there are images here, there you can use CSS selectors.

And I think that there was the innovative in-command that actually transform the object, then something like that. But basically, it's not trying to copy ActionScript, but goes its own natural way how it would in JavaScript. Well, at least, that's my opinion.

Manuel Lemos: Right. So in your opinion, which approach is better? It's the jQuery style or the ActionScript style?

Arturs Sosins: Oh, it's hard to say as I'm used more to ActionScript style because all the frameworks mostly use it. Then, it might be harder for me to get in and I'm actually already not used to look at such codes.

As you see, there are many callbacks and chains and it's already hard for me to read also once I was writing the same code myself. So it's just a preference of how you code.

But... yes, go on.

Manuel Lemos: For me, it looked very straightforward and probably you'll be more productive to develop games using this approach. But again, I'm not an expert. You probably know that thing better.

Here in this screen that I'm showing, it's an Asteroids type game, which at least for me, it brings back a lot of good memories. This is one of the first games I've ever played.

And it seems to be pretty easy to develop games with this library. Well, I'm not a very good player, but OK, I haven't trained for this game for a long time. I only have trained 2048 and Candy Crush.

[Laughter]

Manuel Lemos: OK, well, this is just to mention this library. Anybody that is interested in developing games might be interesting.

This may be interesting for my son but lately, he has been convincing himself that he should learn about programming because that's the way he's going to assure that his future would be around games.

I'm not sure if he's really that inspired, but we'll never know what will be his future. At least, I've been helping him to go through the Code Academy because he's not fluent enough with the English. But he seems to be enjoying.

Arturs, you also have a son. How old is he?

Arturs Sosins: Oh, he's only four years old. But when he was born, I was thinking that around five years old, he might already know C or something, but well... Now, I'm lowering my expectations.

Manuel Lemos: Yeah. Let him enjoy his childhood, please.

[Laughter]

Manuel Lemos: My son, when was seven, he wanted to write a blog about games and reviews, because he was really excited about what others were doing. He was seeing it on the Internet and YouTube channels about games.

But then, the idea passed; he no longer is interested. And I already told him that if he wants to pursue a career on games, he has to learn about programming. So he's pretty convinced, but that's just because it's better than going to school.

JavaScript Maximum Call Stack Size (9:40)

Manuel Lemos: OK, let's move on with the next  topic, with this Hangout on which I like to comment about an interesting article because it talks about an unusual topic - let me increase the font here - which is the call stack size. What is the call stack size? It is basically...

Arturs Sosins: How many functions deep you can go into calling each other.

Manuel Lemos: Yeah, could be a recursively or not. Sometimes, you have called your functions too much because probably you are using some technique that requires recursion or maybe functions calling themselves.

And the guy presents the results. If you are using Node.js, the limit is 11,000 something, Firefox, 50,000, Chrome, 10,000. Well, given these numbers, what are they useful for? Does that mean that if you want to develop some application, you should be concerned to never call functions more than these number of times?

I think most people is not even concerned about that because they do not call their code that deep. I don't know. What do you think, Arturs?

Arturs Sosins: Well, I remember once, was kind of doing it when I was trying to generate random words based on some dictionary using recursion. Then I had to remake it both with making up, which was much more uglier solution but it worked.

So yeah, there are sometimes some algorithm that requires you go really deep and try many combinations recursively.

Manuel Lemos: So you exceeded the...

Arturs Sosins: I can't remember what... But it wasn't JavaScript, it was some other language that I was writing it with. And yeah, there was a maximum.

Manuel Lemos: Yeah, well. Well, I don't know. It depends on the language. But if you are using like C or C++, I don't know if there is a limit specific to the language. I think it depends on OS configuration, right?

Arturs Sosins: Yeah.

Manuel Lemos: Yeah. Well, I don't know, this is just a comment about this topic because it is unusual, not necessary, maybe useful.

OK, now, if you didn't know there is a limit, now you know. Then, you figure if that information is useful or not.

Arturs Sosins: Actually, the main topic here is in ECMAScript 6, there kind of will be no limit or, basically, the limit will be increased because how it all goes underneath. It would jump instead of go in other function. I know exactly how it would work but the idea is that there virtually will be no limit.

Manuel Lemos: Yeah. Well, if there would be no limit, then it will be a non-issue. That it's useful to understand how important is this information. Well, for now, we'll know that in this environments, you have limits even if the feature don't have them.

Seven JavaScript Quirks I Wish I'd Known About (13:08)

Manuel Lemos: OK, now moving on to another topic, I found an interesting article, which... I'm not sure if I could say I learned anything with it, but it talked about seven JavaScript quirks the author wish it knew about. Probably when he started because sooner or later, you'll realize about them.

The first is about the equal sign.

Arturs Sosins: Can I first comment about the author? In the first paragraph, he is writing that he is coming from C# and I have lots of friends... Well, not in this, I mean, a little lower from equality.

He commented he's coming from C# and I have lots of friends who work also in strictly type languages, and everything I can do in JavaScript or Lua - like assign a property to like class runtime or stuff like that - they just see this is some kind of sorcery and don't want to participate in it. And it's so...

[Laughter]

Arturs Sosins: If you are used to JavaScript, this will come naturally to you and you will see, 'Yeah, I knew these points. So maybe OK, I didn't know it, but it's understandable.' But for some people who are coming from other worlds, it's really seems like sorcery, like a nightmare, like something that was not supposed to be but it is and it's works.

Manuel Lemos: Those are whiners. They are always complaining. They never did assembly language. They will complain about sorcery.

[Laughter]

Manuel Lemos: Well, yeah, anyway, the seven topics, let's just review them very quickly. The first one is about the equal sign. It can be = for assignment, == for comparison, and === to accurate comparisons.

Arturs Sosins: Now, you can imagine what C# user would compare number to a string and they are equal. It's like heads exploding.

Manuel Lemos: Oh, no, that has a blasphemy, you can't do that. You are from the hell.

[Laughter]

Manuel Lemos: Never mind. We also have that in PHP and there are other...

Arturs Sosins: All weakly typed languages basically.

Manuel Lemos: Yeah, most of them have these differences and nobody will die of that. Then, talking about the dot notation and the bracket notation, which is basically the same approach as accessing an object to an array.

So the index will be used to access the property or the array element. It's just the same thing. So here, person["firstName"] is the same.

Arturs Sosins: Again, there are languages that completely do not have associative arrays. They have an objects, like map objects or something that are different.

Manuel Lemos: Right.

Arturs Sosins: That's why it ends up...

Manuel Lemos: So they complain because they don't know that.

Manuel Lemos: Okay, then, talking about function context.

Arturs Sosins: Function context is complete sorcery.

Manuel Lemos: Right.

Arturs Sosins: Even I, as a JavaScript developer, it would be hard to understand all these cases.

Manuel Lemos: Right. That's so true, because even I... Not that I develop JavaScript every day, but every time I go back there, I have to think before I assume I know certain things for sure.

Arturs Sosins: Yeah, you should...

Manuel Lemos: Right. And this is really evil in JavaScript, because sometimes you can't... You want to emulate a private variable and if you declare it inside the function constructor of your object, it's not exactly private variable. It's more like a static variable and it's not the same thing.

And then, if you use this operator inside, it may lose context. It may no longer refer to the original object that you think you are manipulating. And you have to pass copies of the object to that private functions.

And this is really messy. Personally, I hate it. I think in ECMAScript  6, the object-oriented approach will be more like in the other languages if you use ECMAScript 6 you won't go through this confusion. But, well, I can understand why the guy is saying that you should know about it.

And there are other things about function context. We are not going to go too much in detail in commenting all of this. But it's just to say that it's complicated enough. So far you have to think all the time every time you use this thing.

Arturs Sosins: Yeah, but this is must-read if you are coming from another background and don't know what to do something in JavaScript.

Manuel Lemos: Yeah. I bet in geek contests there always are these questions about JavaScript. So, to know who is the geekiest of all, to know all these differences without thinking.

And then, it talks about function expressions,  function declarations, which is another thing that's going to be confusing because it can...

Arturs Sosins: Storing function the variable is.

Manuel Lemos: Yeah, right. Variable is just a space. How do you store function which is code in a variable, I don't know. It's a reference to the actual code somehow.

Then, again, something related about named function and anonymous function which is basically the same way of viewing the question of the functions to be assigned to a variable or to be declared.

Then, it talks about Immediately Invoked Functions, which is something also weird... I never used it myself but I noticed some developers like it, which is declaring a function, an anonymous function and call it right away.

Arturs Sosins: Well, most common usage I think, if you are creating a script that should be dynamically rolled into the web page, it should call itself automatically when it's rolled. So that is the way to go. There is no other way.

Manuel Lemos: Yeah, it's a sort of encapsulating a global function and not call it global because all the variables it uses inside are sort of private. Well, as long as they're declaring with var.

Well, this is just a mania. Personally, I do not use it myself, but I don't have anything against whoever use it. It makes a bit the code unreadable, but OK, you pass the code to a beautifier and it becomes better. But it's still weird for those that are not used to it.

And finally, it talks about the typeof operator and toString prototype for objects. They are not exactly the same thing. I don't know why you would confuse one thing with the other or maybe it's not really talking about confusion. I don't know. I don't know what I got from this.

Arturs Sosins: Even looking at a lot of code from experienced developers, sometimes, they are using typeof as a function and not as an operator. So, there is a lot of confusion about this in the JavaScript world.

Manuel Lemos: Oh, really. They put in brackets. I understand.

Arturs Sosins: I think I did it myself, at first.

Manuel Lemos: I see. First you said, I've seen some developers. Ah, no...

Arturs Sosins: I know, I still see them on some code, yeah, but I think I even did it myself.

Manuel Lemos: Right, right. Those beginners, those amateurs.

[Laughter]

Manuel Lemos: Well, OK, this is interesting especially if you are beginning with JavaScript. Maybe something for you to go through because it gives you a preview of the way things that JavaScript has and that can be interesting for that purpose.

You have ruined JavaScript (21:42)

Manuel Lemos: OK, but now moving on to another topic, this one is more like an opinion from a developer. I'm not sure if he's kidding or is serious because he swears a lot.

And the article is called You Have Ruined JavaScript. And it seems to be a criticism to framework developers that try to do it very enterprise-like, lots of design patterns and lots of weird-naming, services, providers. factories, whatever.

Well I did not read this article in-depth but skimming it, I realized that the author is not very pleased with the complexity that certain frameworks add to the software development.

They are supposed to be simplifying things. Then, they complicate things because internally, if you try to study the code, you have a hard time to understand.

Arturs Sosins: Yeah.

Manuel Lemos: Well, that's my opinion. I don't know what you think. But what I have seen in these frameworks and that's another reason that I avoid them. Not that they are not useful, it's that, for instance, if you want to understand something inside, probably to see if you understand anything or if it is a bug, you get lost.

And this is not just in JavaScript. In other languages, it also happens a lot, because it seems the developers are more concerned in implementing all the design patterns they learned in college to just show to their teacher, 'Look, teacher, I learned my lesson about design patterns and I should get a good grade.'

Except that in the real world, sometimes - actually often - you do not code just for yourself, you code for others. I mean others that eventually will use and maintain your code later, so they still need to understand it and probably certain approaches are more complicated than they should be and they are not helpful.

But OK, still I don't know if the author is kidding or being very serious. What I know is that he had a lot of comments. I did not go through the comments but it is always interesting to see that these articles exists, even if they are not being too serious.

What did you think, Arturs?

Arturs Sosins: Well, I actually have kind of mixed feelings about the article. On one point, I think there are two type of languages, the languages that provide the whole environment like Java and lots of classes or like C# and .NET.

And on the other hand, the languages that provide only plain operations like JavaScript plain operators and some basics, and the user have to create everything around them themselves. So, it is natural that everyone creates their own solutions, their own frameworks.

But, on the other hand, if you see those frameworks that are out there and they are used in production, there is a huge book, a thick book, for every other frameworks.

So, basically, it seems like everyone try to encapsulate everything. And so, it grows out proportions and for newcomers, it is impossible to come in the already existing frameworks. There are lots of books to read and try to do something. So, they are complicating things by themselves.

Manuel Lemos: Right. Then, for certain dependency, if you want to use a package, you need to use a lot of other packages and everything gets even more confusing than it already is, and it is not helpful.

And if you say something to those developers, they say 'Oh, we are an inferior of developer. You don't understand my beautiful design patterns. You need to go to school if you've ever been there.'

[Laughter]

Manuel Lemos: Well, never mind. I don't know, each one has his own style and it's none of our business to judge each other's styles, but we can't help having an opinion.

Arturs Sosins: Yeah.

Manipulate Arrays and Objects with Excel-like Formulas using FormulaJS (26:35)

Manuel Lemos: OK, that's one interesting topic. Now, moving to another topic, this time about another unusual library which is, basically - it's called FormulaJS - an attempt to implement Excel-like formulas to, in this case, applied to objects and arrays, rather than spreadsheet cells.

So, I don't know if this is really, really useful. But OK, it's a library, it's a set of functions for that purpose, manipulate objects and arrays somehow. It's not a small one.

Arturs Sosins: Basically, they claim to do everything that you can do in Microsoft Excel. So, it's sort of a framework to create your own spreadsheet or even spreadsheet framework again.

Manuel Lemos: Right. Except that it is not a spreadsheet, it's just arrays and objects.

Arturs Sosins: No, you read them from the spreadsheet and... Basically, you create your own UI based on this framework.

Manuel Lemos: Well, the UI is probably the whole application. It is much more than just these formula functions. But, OK, I got the analogy. It's somewhat unusual. I don't know if it is that useful.

Arturs Sosins: It's enterprise.

Manuel Lemos: Yeah, and it has... Right, exactly. No, I don't think it's this is enterprise. Actually, it should be the opposite. It's quite straightforward. It has lots of functions to manipulate many things.

Well, in the end, it's still a framework. I didn't see any... I was wondering if I could see some example code in practice, but all these seems to be global functions, right?

Arturs Sosins:  Yeah.

Manuel Lemos: Yeah, I don't know if global functions is the way to go because there could be collisions. Well, anyway, this is just to mention something that I found. Clearly, it's not exactly something that will be useful to everybody.

Language Syntax Highlighting with PrismJS (29:00)

Manuel Lemos: Now, let's move on to another topic, which is about one library. I think there are several libraries of this type. In this case, it is a library for syntax highlighting.

Arturs Sosins: Yeah, well, this library presents itself not like syntax highlighting for specific language but a framework to develop syntax highlighting for a specific language.

Manuel Lemos: Yes, precisely. I like it a lot because it ties in to a need that I'm having. For a long time, I actually wanted to have syntax coloring to JavaScript code in JSClasses site when people want to see the code in JavaScript and there was... I didn't have a good solution.

In the case of PHPClasses site, the syntax highlighting is done on the server side by PHP itself but it only supports PHP. For JavaScript, it would be something else.

Other than that, there is a problem with the PHP syntax highlighting itself. It is already not very convenient, because what it does, it starts inserting tags in the middle of the text to do the necessary coloring.

The size of the source code, when using syntax coloring, all the HTML tags, it takes a lot of HTML. For instance, if you want to display a large PHP file, it would take too much time to download because it would be...

Arturs Sosins: That would be another problem.

Manuel Lemos: Yeah, exactly. And if you do it in JavaScript, you'll load the code itself and have JavaScript do this syntax highlighting on the browser side. So you wouldn't have to transfer the whole code. So, this is definitely one library that I am going to use because it supports many languages, not just JavaScript or PHP or HTML or whatever.

Arturs Sosins: It can be extended to many languages also.

Manuel Lemos: Exactly. And I think it can be extended, right?

Arturs Sosins: Yeah, yeah.

Manuel Lemos: To support different syntaxes.  Well, this is great. I am looking forward to use this in PHPClasses and JSCLasses sites.

I think this is not the only solution for this purpose. But I do not recall any other library at the moment. I know there are others. But, well, OK, this is just to mention this, actually, very briefly to say it is useful for this purpose.

Given that we basically cover all the main topics that we wanted to comment regarding this podcast on what lately happened on JavaScript world, things that were released recently.

JavaScript Innovation Award Winners of February 2014 (32:23)

Manuel Lemos: Now we are going to move on to one regular section on which we comment about the winners of the JavaScript Innovation Award that is organized by the JSClasses site.

So this time, we are going to talk about the nominees for winning the Innovation Award in February. They were voted in March and then in April, the results came out.

Now we can comment about any of these five packages. Well, let's comment about all of them. Arturs, which one would you like to comment?

Arturs Sosins: Let me start with the winner. Let me screenshare it first, maybe. So, the winner is Raul from Brazil, who provided the package that can embed the webcam stream, the stream from your webcam into the webpage. It can also handle microphone audio. Unfortunately, I can't show it in example because my webcam stream...

Manuel Lemos: Oh yes, it's taken by the podcast.

Arturs Sosins: Well, at least I think so. But once I screenshared, maybe it will work. Let me try. Let me try it.

Manuel Lemos: Let's see what happens.

Arturs Sosins: No, it does not seem to allow me anything. So probably Google Hangout is...

Manuel Lemos: Probably there is some error and you don't see anything.

Arturs Sosins: Yeah, but I can show basically the code. The code is simple. You'll create video object and then we populate it.

Manuel Lemos: Yeah.

Arturs Sosins: So, basically, you can embed the live stream and do whatever you want with it, as an example, as a mirror. Create a mirror app for example. So, it's one of the HTML 5 features which is great and Raul has wrapped it in reusable as component.

Manuel Lemos: Yes, that's interesting. I cannot demo it as well, but when I tried it, it prompted the user to authorize the access code in the hardware.

And it worked pretty well, at least in the browsers that support it. Well, at least in Chrome. I don't know if all versions of other browsers support it because it's regular HTML 5 objects.

Arturs Sosins: Even the old Opera that I'm still using still supports it.

Manuel Lemos: Yeah, even Opera. Even Opera. Opera is awesome.

[Laughter]

Arturs Sosins: Yeah, it is.

OK, next one is Jino. Jino from India. Basically, he or she maybe, I don't know, created a JavaScript package that would load scripts dynamically.

Let me try to demonstrate here. Of course, you don't see anything here but if you look at the source, you will see that we encode this raw JS files script and now the others are listed under some variables.

Manuel Lemos: Yeah.

Arturs Sosins: It provide duplicated loading. Basically, if you inspect the element, you will see that all the scripts are loaded in the in the head and added.

So if you are using, you are creating some kind of web app that does not know what would you want in the runtime and maybe if you weren't specific... One specific functionality needs to load specific script. Basically, that's the way to go. And Jino provided the component, basically.

Manuel Lemos: Right. And this could be useful for making the initial page loading lighter because you can load libraries dynamically. You can load them later after the page has loaded.

This is very interesting. Well, I'm not yet ready to show anything, but the page of the packages of the JSClasses and PHPClasses site is being redesigned and it will be much more interactive. And so, it will need more JavaScript libraries and probably I'll use an approach like this to avoid the initial page loading overhead.

This is somewhat similar to RequireJS, right?

Arturs Sosins: Yeah, I think they are all quite similar. To the functionality, there is nothing much to add.

Manuel Lemos: Yes.

Arturs Sosins: So, another one is Alessandro Vernassa  from Italy. Basically, what he provided is a class to save your field web forms offline.

Let me... I think I even already saved one here. Yeah.

At first, I thought that it would preserve the field form even if I did not submit it. Like I can go back and see all the data I filled, but it actually saves the HTML file. You can see, I almost filled the form here.

Basically, it saves the whole HTML file in plain JavaScript, forcing the download. And this is great on the online form web sites where you have to fill. And then, you know, keep the data for a way to reference, so you can either print it  or if you don't have a printer, you can save it and then print it later. Or view it later on your computer. So that's a great option.

Manuel Lemos: Yeah, that's somewhat unusual. I don't know what would be the use cases for this, but it's interesting because when it's saved, it's actually saving the web pages again. But this time, it will have the values of the inputs already filled in.

So, that is why it is saving whatever you entered there. So it is interesting. Kudos to Alessandro Vernassa for his submission.

Now, on my behalf, I would like to comment about the remaining two packages. Let me share the screen here.

So, basically, this first package that I want to comment is called JavaScript Hover Image Gallery. And it's like a regular  image gallery. I mean, this component presents a regular image gallery and the idea is it minimize the user interaction to actually see the pictures in the gallery in full size.

So, it's just hover the mouse on the top of the images and it shows the pictures in full size, just hovering the mouse. This is interesting for users that sometimes, probably, they are too dumb and do not realize they need to click on the pictures to see them.

And this way, the picture is displayed in full size immediately and the user does not have to think too much. So, it's interesting, just an example of improving usability of gallery pages for every kind of users.

Arturs Sosins: There are lots of post customizations available and stuff, so it's a full-blown thing.

Manuel Lemos: Right. This package was developed by Michael Milev from Bulgaria. I suspect that's not the right way to spell this name, but I hope he can excuse us.

Anyway, moving on, the next package I wanted to comment about is this one, jQuery Toolkit, basically another package from Jonathan Gotti from France. He was one of the winners of the Innovation Award of the year last year.

And it is an interesting library for creating widgets on which it takes properties for those widgets from CSS classes, I mean the attribute that it defines there.

And this is an interesting approach. Let me see if I can show you an example of the code. So, here is an example page. And then...

Arturs Sosins: I don't get it.

Manuel Lemos: It's too small?

Arturs Sosins: No, it's just too unreadable.

Manuel Lemos: Oh, because it's not formatted very well.

Arturs Sosins: Yeah.

Manuel Lemos: Well, I can't... Wait, it's not the way to increase this. I can increase it but probably it doesn't help.

Anyway, what matters is that this part here, it can define behaviors. I think this is it from what I understood. It can define behaviors for this and actually this is probably just part of the example because...

Arturs Sosins: It does not include the JavaScript, right?

Manuel Lemos: Yeah, it's not defined here. Well, here is more of an example of how it looks like. Or it defines some elements and it defines plugins to be attached to certain elements using jQuery. So, well, this is a bit abstract but I think it was enough to explain what it was.

So, it's somewhat a different approach to things. Well, probably, this example here is easier to explain. There is a CSS class here that determines the properties of plugins to apply to this image element in this case. And I think this is to apply a resizer for an image. And so this small... these are the properties.

Arturs Sosins: It usually provide properties making some object configuration to the plugin. Then, in this case, it could really go from CSS properties. Yeah, that's an interesting solution.

Manuel Lemos: Yeah, well, as long as it doesn't clash with existing CSS styles, actual CSS styles.

Arturs Sosins: Yeah.

Manuel Lemos: Well, I think that's to avoid clashing. That's why there is this sticker prefix here.

Arturs Sosins: Correct, yeah.

Manuel Lemos: Yeah, OK, this is an unusual approach to do something similar to other solutions but it's innovative because it follows a different approach. And you have defined the properties here. And over here, you defined what those properties need, small and zoom.

OK, that's interesting. Kudos to Jonathan for his submission.

JavaScript Innovation Award Rankings of 2014 (44:27)

Manuel Lemos: Now, finally, we're going to comment a bit about the rankings. As you may see here, this month, the winner was Raul from Brazil. But over here, we already have the rankings of the year.

So, by authors, so far who's going ahead is Jimmy Bo from Canada. And then, well, this is just the top ten. There are other nominees here.

And on the right side, there is a ranking by countries. And this already includes the winners of March, because we are one month behind. So far, Italy is leading.

Arturs Sosins: Canada.

Manuel Lemos: Tied with Canada, with two packages each, so they're earned 6 points so far. And this is very soon in the year. Many packages have been submitted, many innovative packages.

And over the year, I'm sure, the Innovation Award championship by countries will start heating up as more countries get involved and other authors of the same countries send more contributions to be nominated as innovative and they start gathering more points to the Innovation Award.

So far, we don't have many packages but we are already are seeing some winners that are standing out like Jimmy Bo from Canada, that is helping - alone so far - Canada to go ahead, tied with Italy. So let's wait and see.

I do not see here anybody from Latvia. I don't know why.

[Laughter]

Arturs Sosins: I'm giving them a head start, you know.

Manuel Lemos: Oh, I see, right.

[Laughter]

Manuel Lemos: Well, I suspect you are resting from your victory in the past year. That's not the case of, for instance, Franz Brunner from Austria who also was another winner, as well as Jonathan Gotti. They did not rest, unlike those people from Latvia.

[Laughter]

Manuel Lemos: So, let's see if things start warming up and then next month, we'll get back to talk again, comment about the progress of these rankings.

Many packages have been submitted lately which is great. Many of them are innovative. And I hope next month, we have more interesting comments about these rankings to comment on, depending on how it progress.

Conclusion (47:45)

Manuel Lemos So, basically, we have reached the end of this Hangout. I would like to thank you again, Arturs, for coming.

Arturs Sosins: Sure.

Manuel Lemos: I don't know if you have any final remarks. Anything else you would like to comment?

Arturs Sosins: Yeah, well, I can only say that I hope that our podcast answered all your questions. And if not, then it's 42.

Manuel Lemos: Oh, OK.

[Laughter]

Manuel Lemos: I was wondering if 42 was related with '84. 1984 is another book, another movie.

Arturs Sosins: That's something else, probably.

Manuel Lemos: Well, the answer is half.

Well, on my behalf, that is all for now. So bye.

Arturs Sosins: OK, bye.

[Music]