Loading Pages Faster with Next Page Asset Preloading - Lately in JavaScript podcast episode 40

Show notes

Download Size: 45MB Listeners: 1912

Introduction music: Riviera by Ernani Joppert, São Paulo, Brazil

RSS 2.0 feed compliant with iTunes:

http://www.jsclasses.org/blog/category/podcast/post/latest.rss

Watch the podcast video

Note that the timestamps below in the transcript may not match the same positions in the video because they were based on the audio timestamps and the audio was compacted to truncate silence periods.

Show notes

• The Advantages of using "use strict"

• Article: Chrome Compiling JavaScript in the background for Faster Execution

• Preloading the Next pages the users will Load using Instaclick

• Try JavaScript 6 Online with ES6Fiddle

• Responsive Menus with More option iusing JRM

• Quake.js port of Quake with emscripten

Read the podcast transcript

Introduction (00:20)

Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast hangout. Yet another struggle against the Google Hangouts. I'm not sure but hope we are winning against the difficulties. Every month, there is new difficulty. Let's see how this month ends up.

And as always, since a few months ago, I have here with me Arturs Sosins directly from Latvia. Hello, Arturs. How are you doing?

Arturs Sosins: Hello. I'm fine. It's nice Spring weather here. So I hope everyone is having a nice Spring. For you, it's most probably similar to Autumn or something like that, right?

Manuel Lemos: I'm not sure what I would call it. What I can tell, it's not as hot as it used to be like a couple of weeks ago. Here in Brazil, we just are over the Carnival. So, the people here after carnival, they wish Happy New Year, because between Christmas and the Carnival, almost nobody wants to work. But actually, in the rest of the year, almost nobody wants to work, but that's another story.

[Laughter]

Manuel Lemos: So, but here today, we are going to talk about JavaScript and what has been happening in the latest month. So we have a selection of interesting articles and topics to talk about that I have been looking at, that seem interesting.

The Advantages of using "use strict" (2:08)

Manuel Lemos: Let me start with first one which we're going to comment about this article that talks about what would be the advantages of having "use strict" in your script to somehow get some warnings.

And basically, it starts the article here with just a bit of tutorial of where you should put your script expression in your code. You can put it after the first line just to tell that the whole code should be subject of strict warning and stuff and also inside functions.

So it's pretty straightforward, there is nothing difficult about this directive.

So, then it starts talking about some benefits like avoidingstupid mistakes like having duplicate keys in objects, declaration of variables without the 'var'...

Arturs Sosins: Global variables.

Manuel Lemos: Yeah. And other stupid mistakes like duplicating the names of arguments and functions. And I don't think this is something that would happen a lot but it can happen and 'use strict' tool will detect it.

And let me... Here they have some comments and that's basically all this article has to offer.

Arturs, have you looked into this article. What do you think? Do you usually or already use 'use strict' or maybe you are not so inclined to use it?

Arturs Sosins: Well, actually I almost never use 'strict' but not because it is bad or does something bad. But, well, it's just I'm used to and maybe some of my practices or constructions that I'm used to are not allowed with this 'strict' mode.

But what I want to tell that basically it doesn't really matter if you use or do not use 'strict'. The worst thing you can do is mix the usage because as the article explains, declaring 'use strict' changes the behavior of some of the variable assignments and then the order and something like that.

So, the worst case is if you use 'strict' in development mode and then remove it in production, that could break lots of stuff there. So if you are using Strict, then keep using it in production mode and every time with this code. That, basically, is the important thing that I think that should have been mentioned in this article.

Manuel Lemos: Right. Actually that was the conclusion that was reached a few shows ago, I don't remember exactly when was this, I think it was a show on which Michael Kimsal was presenting. And basically, that's one concern, that we should have to not use it in development and then switch in production. Then, you have different results.

Anyway, you mentioned that you wouldn't use it because imposes some restrictions on a construct that use. What would be examples of those constructs that you use?

Arturs Sosins: I can't remember from top of my head. But usually, I use some kind of hacks to deal with a class method or static methods and if you create in a class like object, like package, then you usually assign an instance to a class, to a static variable and then probably use it in something like that. And there's something in this construction did not work properly in 'strict' mode.

But, yeah it might be not the fastest or most elegant solution but I usually do not work on such classes that would need to be really, really efficient. I can cut me some slack. And that's probably my choice.

Manuel Lemos: Yeah. Right. It's interesting that you wouldn't do this for something you are not sure anymore. Probably, there's a good reason for not using it.

For me, I also do not use 'use strict' because it changes certain behaviors. And for these kinds of warnings, I would rather use some JSHint or JSLint tool that I put my code through so it can detect any issues that I may have not noticed.

So probably the effect that was mentioned on this article is basically the same. Actually, I'm sure that JSHint and JSLint actually would have more useful warnings rather than those that this article covers.

Chrome Compiling JavaScript in the background for Faster Execution (8:15)

Manuel Lemos: OK, anyway, now moving on to another topic. Another article here that is mentioning some enhancements on the V8 Engine that what Chrome uses to actually execute JavaScript code on the browser. It's basically an engine that...

I don't know if it was the first, but probably wasn't one of the first to actually compile JavaScript into native code.

And now, what this announcement is explaining is that they will do the compilation on the background rather than do it on time in demand right before the code that is being executed would be compiled.

So the idea here is that it would probably provide a smoother user experience since that when the code is meant to be executed, it is already compiled and ready to run in memory instead of waiting.

I don't know if you probably noticed much difference. I don't know. What do you think, Arturs?

Arturs Sosins: Yeah. Well, that's it. It compile the native code, that's not such a new thing. But that it gets compiled in another thread, not in the main thread, it should be more efficient.

But I don't know if many of us would really notice it. The only thing I could imagine would work well is if you are loading lots of JavaScript asynchronously generically. Not like for example how Google Analytics is loaded and there are lots and big chunks of code, then maybe you would definitely notice the difference. But for simple webpage, probably not so much.

Manuel Lemos: Right. I don't know but the article here does not mention specific version on which this enhancement starts being used. I mean of the Chrome browser, so we don't know yet if it's something that's already in the latest versions or do we need to upgrade with a new version.

Arturs Sosins: Says this, in the Chrome Beta, probably not really in the latest version that we have. But yet, reading further, I also found that it does provides a concurrent code compilation. So it seems if you are loading multiple JavaScript code simultaneously, then it also would compile as simultaneously on different threads. So that could be more efficient.

Manuel Lemos: Yeah, personally, I want to use stable versions of Chrome. So probably, this will be at least two versions, I mean delayed, compatible versions that probably this uses. I'm currently using Chrome 27. So, I think probably this will go on Chrome 29 or Chrome 30. I don't know.

Arturs Sosins: This actually could be a step further to the Chrome OS that was announced and probably I think it was released, I did not follow that. But I think in that context, search engine could help us.

Manuel Lemos: Yeah, I don't know about really about... You mean, Chrome OS, right?

Arturs Sosins: Yeah.

Manuel Lemos: Well, Chrome OS is basically Linux. And with Chrome and a few problems that could not... Browser could not run probably, I don't know Chrome OS will ever pick up because most people use Windows and they do not want to switch.

And because there are many programs that run on Windows, there are other people that use Macs and Linux distributions and they do it because they have the programs that they want to use.

So, I don't think that people are going to switch to Chrome OS for some reason. Actually, by the way, I think I never mentioned this but I got a Chrome Book from Google because I'm part of some initiative they have regarding some products they have.

I got a Chrome Book but it's still in its case because I don't have much use for it. And given that, I hope nobody from Google is listening.

[Laughter]

But that's how much I see Google Chrome OS being useful to the world. I don't know. I don't think they are getting why people are not using it. But OK, never mind, that's a different topic not related with JavaScript.

Preloading the Next pages the users will Load using Instaclick (13:56)

Manuel Lemos: Now, back to the actual interesting JavaScript topic, let's move on with another topic here. Basically, one library called InstaClick that does something interesting. Although I do not think it's that totally new, which is to anticipate the eventual clicks that you will do on web pages.

For instance, if you have pages with links, if you hover a link, even without clicking it, it already preloads the page. This is the purpose of this InstaClick library.

It says it saves like 200 to 300 milliseconds. I don't know if it is sufficient to be noticeable probably for the user. You may notice a little improvement here and there. But I also think there are some less interesting aspects.

One is that if you preload the page, even if the user does not click it because sometimes they're just hovering the links to see where the pages go, but in the end, they do not click it. So probably you will be inflating your page view reports without knowing and when in reality, the user did not actually go to the page.

Maybe it's not a large enough number but I'm sure it will introduce some distortion in your statistics.

I don't know. What do you think, Arturs? Do you think this library, or at least its principle, is useful enough to implement it? Have you tried and noticed any differences?

Arturs Sosins: I actually I tried and I noticed even the test result did not show much difference between simple click and you can scroll out and just do a test there and it didn't have much difference.

But I was actually really interested how to implement it because at first I thought it was HTML5 prefetching or you can provide in header the next pages that users may come to so the browser may preload them.

And I actually checked their GitHub code. Let me try to share it. I don't know.

Manuel Lemos: It seems to rely on that HTML5 pushState specification.

Arturs Sosins: Yes, but what they actually do, it seems they are doing,

Manuel Lemos: Oh, it's Ajax implemented.

Arturs Sosins: Yeah, yeah. And then they are pre-parsing the response and promoting different assets and scripts, what are there. So basically loading and downloading and letting the browser to cache them.

Manuel Lemos: So, basically sort of forcing the caching of elements on the next page that it usually eventually gets.

Arturs Sosins: Yes, exactly.

Manuel Lemos: Right, I see. I don't know. This probably is a bit too far out concerning all the things that it can do optimize your site. I don't know if it in the end will really work.

Because, for instance, when you go to a site, if you visit a few pages, probably the images of icons and things that are CSS are mostly common to the current page that you are at. So probably wouldn't do much in caching those elements ahead because I probably already cached.

Arturs Sosins: Exactly.

Manuel Lemos: Maybe it can gain some time. For instance, you have pictures, large pictures. If you preload those pictures, I think you can notice a good difference. But other than that, I'm not sure if it really is well worth it.

So I think it depends. You need to try it on your sites and maybe you can notice some gain that justify the use of this library or something similar. But other than that I do not see really great improvement.

Arturs Sosins: I was actually thinking about the downsides that could be if you are using mobile phone. It would use up more bandwidth, that you actually did not visit the page yet. But I remember then, I think there is no hover options in the mobile phones now.

Manuel Lemos: I didn't get that last part.

Arturs Sosins: That there is no hover option, like you can hover mouse over zooming. And mobile phones, I don't actually know if...

Manuel Lemos: You don't have the hover. It doesn't detect when you are hovering your finger.

Arturs Sosins: Exactly.

Manuel Lemos: A good point. I am not getting that undone. That's true, at least for mobile phones, because they are operated with the finger but...

Actually, the current notebook that I have, it has a Stylus pen that actually can... even if you don't click anywhere on the screen, it can move the mouse pointer, just reaching...

Let me see if I can show you the actual stylus here. Well, I don't know if you can see it. And if you go here, if you get... Well, you won't see anything but let me try to share some image in this article. Do you see my mouse pointer?

Arturs Sosins: Yeah.

Manuel Lemos: OK, this is me moving just the pen, just the stylus. So I'm not clicking on anything. So at least with this stylus, there are mouse hover event, but as you mentioned with fingers, there is not much hope in there.

But, OK, anyway, probably a mobile environment is probably not the best environment to take advantage of this features because at least here in Brazil the 3G connection suck and suck big time.

If you are on WiFi network, that is fine because WiFi network are fixed but wireless 3G or even 4G connections where they are available often are not very reliable. So you wouldn't have great advantage.

Try JavaScript 6 Online with ES6Fiddle (21:36)

Manuel Lemos: Anyway, moving on with the hangout now, talking about a new tool. It is interesting that I noticed that can be useful for those that are curious about what will be JavaScript 6. Actually the accurate name is ECMAScript 6.

So this is one of those fiddle-like sites that lets you try some code and see how it works. For instance, they have here some examples, error functions. You can run it and see results here.

Arturs Sosins: Can you increase the font a little more?

Manuel Lemos: Yes, I tried to increase but then the console is shifted below. And then, I do not see the results.

Arturs Sosins: OK, sorry.

Manuel Lemos: That's the problem. That's why I reduced it but OK. This is just a curiosity for those that are so excited about JavaScript 6.

Arturs Sosins: And if you will get classes inheritance example, you will be excited, too?

Manuel Lemos: Yeah, because this looks more like a real class that we use on all the languages.

Arturs Sosins: And the constructor, it can extend class, that's awesome. That's really awesome.

Manuel Lemos: Yeah. And once people start using JavaScript 6 on the create code classes with these constructs, from then on, I no longer have to call those packages objects from classes. And that's the only difference that I will see.

Actually, I think whoever is working with JavaScript for awhile is already used to the prototype-like type of programming, creating objects in JavaScript. So the only difference is really for those that prefer the syntax which is more similar to other languages like Java or even PHP and other but are also use for Web development.

And I think that's it. I don't know if you found anything else interesting with this library that you wanted to comment. I mean site.. Sorry.

Arturs Sosins: No problem.

Manuel Lemos: Yes, see es6fiddle.net.

Arturs Sosins: I just wanted to say that I'm really working with lots of languages, currently even changing more than three languages in the same day like Objective-C, Java, PHP, C, C++, JavaScript, Lua and JavaScript seemed to be the most hardest one, most difficult one to go back because it's kind of completely something different than of the other of them.

And these changes with ECMAScript that we're also changing basically will be there to switch between the languages because they will be in a similar, more singular party.

Manuel Lemos: Right. One, I just want to say on the other hand, that's true. But at least for me, I already got this to the limitations of primary JavaScript version when you want to define something that looks more like class, you'll actually create a construction function.

But it's always a bit disturbing because I have to think, Oh if I want to declare this variable as a private variable of this class, how do I use it?

I use var it becomes available because if I go just this scope, so probably it's sharing them on all the objects and that's a bit annoying really. But I sort of got used to it. But I totally understand. Like to mention when people who are using many languages, if you have to switch to JavaScript, it sort of feels like a pain like going back.

Now, I'm going to limited programming. OK, that's just one detail.

Responsive Menus with More option iusing JRM (26:08)

Manuel Lemos: Now, moving on with the podcast, to talk about the very simple but probably interesting library that tries to implement menus on web pages but usually menus may have more items that they fit on the screen, so they added a certain more button that one you click on it... Let me increase the font here.

When you click on it, it appeared with the remaining items that did not fit. And if you increase the font here, less and less items fit. Then you click on it and the items do not fit on this page again.

But OK, it's a fair attempt to make pages more responsive. They adjust better to limitations of resolutions of different screens. I was actually trying to see if there's a way to control the layout because these menus are just horizontal. But I did not find a way to do it at least in the demo.

Arturs Sosins: I don't think you can make that site vertically, probably not. Probably go to check or view port or something but mostly...

Manuel Lemos: And it could create a way to have menus that scroll horizontally when they do not fit, if they want to see the remaining items.

OK, but that's just an idea. The idea is to be very simple, just to use at least items, elements here.

Arturs Sosins: That's actually great, great idea. The only other option I've seen before is in the default option in Twitter Bootstrap that either shows you the whole menu or shows you nothing like a small buttons to open more.

But this is something in between like you can always display the most important ones and collapse all the others. So, yeah, I think it's a great idea.

Manuel Lemos: Right, it is. The most important should be the first one because those are the ones that are kept on screen when the remaining do not fit. But OK, this is just mention this actually very simple tool to use library and basically it chooses one call.

Actually, this is jQuery plugin which is always a curiosity for me because people do not seem to know how to program things without jQuery. OK, that's a different challenge.

Quake.js port of Quake with emscripten (29:12)

Manuel Lemos: OK, moving on with the other topics, now we're going to talk about something here that I'm trying to make it run. But it got stuck.

Arturs Sosins: Really?

Manuel Lemos: OK, it's loading now for me. It's loading for me but it has stollen the mouse pointer.

Basically, it is port of the game Quake. Let me see. OK, I think you should be seeing it already on my screen. Basically it's a port of the game Quake and guess what, they use Emscripten.

[Laughter]

Manuel Lemos: At least once now, we have a library that is running on Emscripten. Can you listen to the audio of my...

Arturs Sosins: No, I don't hear anything.

Manuel Lemos: My browser.

Arturs Sosins: No.

Manuel Lemos: No? Because the amount of noise here. But at least here it is very fast. I am using a notebook with a Core i7 processor, so it's very, very smooth.

And actually, we try to set up a game to work to actually both of us could participate, but for some reason, we're not able to set up any server to use it. I mean, we could go... I think I should leave this zone.

Well, you can see it's pretty small, but you actually do not listen to any noises.

Arturs Sosins: No.

Manuel Lemos: Yeah.

Arturs Sosins: I've disabled...

Manuel Lemos: It's a shame that we...Yeah. I don't know because it seems that the Hangout is not capturing the audio of the machine.

Arturs Sosins: That's great. Then, you can play and record the podcast.

Manuel Lemos: Yeah. No, I mean, it's not recording and it's very noisy here.

Well, anyway, I think it should be enough to show that it's working well I don't know what else you cannot do with JavaScript these days, given that we have Emscripten. Oh, I should have not have done that.

Arturs Sosins: What did you do?

Manuel Lemos: Because it's very noisy here. I think I need to switch.

Arturs Sosins: Oh, I got shot.

Manuel Lemos: Well, I guess, this is basically... I'm just trying to disable the noises.

Arturs Sosins: It's still an awesome achievement. You could play something like that in your browser without basically installing anything and downloading took, I don't know, about less than five minutes for me. So, it's like...

Manuel Lemos: Yeah, it actually took a lot.

Arturs Sosins: Yeah? Really? I did not think so.

Manuel Lemos: To download, it's not that long. I don't know, maybe a minute or so. Well, when I start playing games like in the 80s, we wouldn't mind waiting five minutes for the game to load from a cassette tape.

Where do I disable the audio here?

Arturs Sosins: In System, I think.

Manuel Lemos: System, OK. Sound effect. Oh, it's much better now. But you cannot totally disable it, can you?

Arturs Sosins: I don't know. Actually, I didn't hear anything so I probably I disabled all.

Manuel Lemos: OK. Well, anyway, this is just to show what it is. There is not much more to say. Now, if you like... This is more like for my son. My son loves first-person shooters. He likes to shoot people in the games.

Arturs Sosins: I know you've been grumpy with Emscripten but actually, this is really awesome.

Manuel Lemos: Right. It's a great achievement because you can see how fast things really are, because all these things demand a lot of processing. I don't know if it's using somehow any OpenGL extension on the browser.

Arturs Sosins: There is a WebGL that probably is used.

Manuel Lemos: Yeah. because when Quake was used, I don't think really accelerated cards were available then. I think it's all done with CPU, which is quite awesome.

But yeah. It was all very pixelated by then. It did not have this level of detail. At least on my screen, in fact, this is relatively small notebook, it uses like 1,920 by 1,080 pixels. So it's full HD resolution and it's a lot of pixels, that I'm sure when Quake was launched, there were no PCs with this kind of resolution.

So, it's working pretty smoothly and it's just a shame we're not able to play one-on-one games so we could shoot each other right here with everybody watching.

Arturs Sosins: We could forget about the podcast while playing.

Manuel Lemos: Right. And then, people probably would be bored, not because of the game but because of the game but because they would not like watching.

Arturs Sosins: Especially with the ones who are listening to it on audio.

Manuel Lemos: Yeah. Although, I heard that in countries like Korea, championships of video games are common and it's like popular TV shows. And we see huge audiences cheering for the players that play all sorts of RPG games.

Arturs Sosins: Lots of my friends are re-watching the videos from this contest and I actually can't understand that but...

Manuel Lemos: That's probably because you'd rather be a player than somebody that watches.

Arturs Sosins: Maybe.

Manuel Lemos: Right. I don't know, but my son, he watches a lot of videos just to learn how to go through game phases. But then, he prefers to play rather than just watching. He just watches for learning. So probably that's what your friends are looking for. Trying to learn new tricks, just watching others play. I don't know, that's just me guessing.

Well, today, we sort of have a short show because we didn't have much topics to comment. I thought I picked more topics but for some reason, I'm not able to find them.

JavaScript Innovation Award Winners of December 2013 (37:10)

Manuel Lemos: So, let's move on to one final section of this Hangout on which we comment about the Innovation Award winners.

This time, we are going to talk about the nominees of December 2013 that were voted on January. Then, in February, the results came out. So, we are already in March, that's why we are commenting about them, about this.

So there are like three nominees. Arturs, from this which ones would you like to comment?

Arturs Sosins: I will comment about the Klass.js, which as we talked a little before that, about the sixth version of ECMAScript and making JavaScript more standardized language.

Then, this is something that adds an interesting support and makes JavaScript closer to Java. Basically, Klass.js allows you to create classes and it also supports annotations. You can get the meta objects about the class that you embedded the comment-like content.

Manuel Lemos: Yeah. Probably, it's interesting to actually show some sample code that you could demo.

Arturs Sosins: I don't know if I can zoom and see. Basically, you see that you can define annotations for the methods.

Manuel Lemos: Oh, this is ECMAScript 6.

[Laughter]

Arturs Sosins: I actually don't think Emscripten supports that, yeah.

Manuel Lemos: Annotations, OK.

Arturs Sosins: I'm skimming through the code, the source code that provides it and how it's done. Basically, it matches the contents of the functions and finds the comments and parses the annotations from it.

I didn't find that it would provide some functionalities. Like in JavaScript, basically, if you override the methods that was not showing the parent class, then it will provide you an error that this method cannot be overwritten or something like that. So, this is more informational purpose. Not like some error check, but still it's kind of an interesting solution.

Manuel Lemos: It can always be interesting. One of the main purposes of things like annotations is to generate code that probably do some object-relational mapping. So you can have...

Arturs Sosins: Or generate documentation.

Manuel Lemos: Right. That too. And it would parse those different issues using some separate tool. And then, it would generate code and generate documentation as we mentioned.

So, the presence of that, those comments would not affect anything, that functionality would not be faster or slower. It just would work and also be helpful for anybody that is browsing the code. You could actually get some insight about what the code is supposed to do. I think it's great.

Also, probably interesting, the possibility to define classes, more like we are used to them in other languages and do not have to wait for ECMAScript 6 to be able to use them.

Arturs Sosins: Is there any implementation for annotations in PHP? Do you know? Do you remember any class like that?

Manuel Lemos: At PHP, there are some parsers, but they are not exactly built in the language. They are considering it for PHP 6. But it's one of those things that I don't know if it would be approved.

They'd been trying to push it for a few years but the proposals all have been refused. I'm not sure why because it's something that is meant for tools that would work separately from the actual code that will be running.

So, I don't know. But for JavaScript, I also haven't heard if there are any plans to make that a built-in feature of the language and maybe some reflection classes that can provide insights about the class extracted from the annotations.

Anyway, the annotations in this case are defined as comments. They are not something that is built-in the language.

And I think that it is the thing that, at least for PHP, they had been opposed to make it part of its language syntax. Because it's all this metadata and you shouldn't need it at runtime.

The same goes for JavaScript or any other language. So, I don't know if all these things would be really this important to have built in the language. Personally, I do not see a use case for that, but maybe some other people have found it interesting.

OK, on my part, I also would like to comment about a couple of classes. Let me share screen here. OK, we have... I don't think I disable this here. Because I was listening to some background noise. I don't know if you were listening and they were caused by the Window that was running Quake.

Arturs Sosins: I just still playing while chatting.

Manuel Lemos: Yeah, exactly.

So now, talking about these packages. There is one called jQuery HTML5 Websocket or AJAX Chat, which is basically a jQuery plugin that allows you to implement a chat using Websocketsif your browser supports it or AJAX requests.

And this is quite interesting because we don't see that many solutions that take advantage of Websockets to do some bidirectional communication.

And in the case of chat applications, that's probably one of the most adequate applications for using Websockets because chatting could be very interactive. So you can send the messages that the current user is sending, also receiving a new message that the other users are typing at the same time.

So this package here by somebody that calls himself PLSCIS PLP, whatever that means, probably it's a code. I don't think this can be a real name. He's somebody from India. Nevertheless, this is a great package. Congratulations to the developer for sending this package.

Also, by the way, the previous package, the Klass.js was mentioned and developed by...

Arturs Sosins: Rafael.

Manuel Lemos: I was trying to... Rafael Lucio, right?

Arturs Sosins: Yeah.

Manuel Lemos: Yeah. From Brazil. And this one, as I mentioned, by this guy with complicated nickname from India. So I found it just interesting.

Have you ever tried to use Websockets in any of your applications, Arturs?

Arturs Sosins: I remember when HTML 5 buzz was only starting, there was some kind of incident that's Chrome implemented Websockets and changed its specification in the API and they changed it again.

Because probably of that, I never started trying them out. It was changing so quickly. Probably now, it's more standardized, so maybe it's time to try that.

Manuel Lemos: Well, I think it's parte of the HTML5 specifications. Here, he's not trying to use Websockets but also what is called...

Arturs Sosins: AJAX.

Manuel Lemos: No, Server Sent Events. Things that are sent by the server to let the browser be aware of something that goes on in the server. So it's quite interesting.

So, the other package that I wanted to mention also is a jQuery plugin that seems to be very simple but it addresses a problem. I thought this could be addressed with CSS, regular CSS, but then maybe not. Actually, I never tried it so I'm not sure, which is the ability to style the different images of a checkbox in its different states, like check, unchecked, enabled and disabled.

And if this plugin was developed, its purpose is probably because it's not possible in certain... I think it's useful that this package implements this solution to style the images of checkboxes. So, congratulations to the author, Sandro Alves Peres from Brazil.

And with this, we practically conclude our coverage of the Innovation Award winners in this case of December 2013.

Innovation Award Championship of the Nations Ranking of 2013 (47:58)

Manuel Lemos: And this time, I wanted to start commenting about something that already exists awhile ago but I usually never comment about it, which is the Award winners ranking, not just by author but also by country.

Previously, we actually interviewed the winners of the Innovation Award 2013, including Arturs here. And there is a separate show talking about the work that each one did. There were three winners, Franz Josef Brunner from Austria, Jonathan Gotti from France, and Arturs Sosins from Latvia.

But we didn't comment much about the actual award winners ranking by country. As you may see on the screen, there is basically ranking that shows that Romania was the winner of 2013, with six packages, actually five of them were developed, nominated, for an author called MarPlo.

Arturs Sosins: Yeah.

Manuel Lemos: And that was probably, actually the one that contributed with more points to make Romania the winner of 2014, I mean 2013.

Well, in 2013, there was not yet an explicit championship by countries. The start would be happening in 2014. And as I mentioned in the previous show, the country that accumulated more points, by the end of the year, will be the winner of the award and there will be a special prize.

For now, it will be still the PHP elePHant, but maybe, I don't know, if something will happen between now and a year there will be somebody creating a mascot for JavaScript like there is for PHP that you can give away as a plush type. For now, that will be the prize that will be sent to the winners.

So, all the nominees of the winning country will earn that prize and something else that I'm working on. It will be sort of small surprise, nothing special but just to make it different for each of the winners. And that will be the prize that they will get.

Other than Romania, at least in 2013, several countries also ranked relatively high like France with four packages. I'm sure three of them were from Jonathan Gotti and there is another one that does not appear in the top ten. And then, there is also Brazil with six packages. Austria with two, in this case, we're sure that they were from Franz Josef Brunner. And Latvia is three and we are so sure that those are from Arturs Sosins.

And there are other countries that also scored but not enough to be the first, like Armenia, United Kingdom, United States and Spain.

So starting next month, we'll be commenting on the winner of the Innovation Award, not just by author but also by country. And the idea is to encourage developers not only to participate but also motivate their colleagues from their own countries to also submit innovative packages.

And everybody benefits from greater participation because if more people submit more innovative packages, it will be useful and there is more value in the site to share with others.

Hopefully, the developers that bring more colleagues from their countries to participate will have a greater chance of being the ones from the countries that win the Innovation Award.

I don't know how well this works to motivate more people to send more innovative packages but starting next month, we'll start evaluating what could be the results, if there is something that you can notice, if there are more people from the same countries participating.

I don't know, what do you think about this? Do you think it will work to motivate more developers, Arturs?

Arturs Sosins: Well, the most difficult part is the motivation, is if you see someone is way ahead of you, then you may not really want really try to pursue them and beat them. But if you look at the results of the 2013 year, then you can see that none of the Romanian participants are in the first place, but Romania as a country won.

So, it's basically a different kind of competition. And if there is one more active developer in country does not mean much result the other contestants from same country. So I think it should be more motivating in that case. That maybe united as a country, you can achieve more than you could on your own.

Manuel Lemos: Exactly. It's a greater purpose for the sake of your country. It would be something very patriotic.

[Laughter]

Manuel Lemos: And that's true actually. It's better to notice that some authors not winning individually, they were able to contribute for that country to rank better. Ultimately, they would also win, not just the prize but also the eventual exposure and reputation that they would get.

I was told that at least some authors actually present the nominations in the Innovation Award both in JS Classes and PHP Classes as an item in their resumes. Well, that helps them to get better jobs. Great, because it's well-deserved. It was not something that was granted to you without merit.

So I hope everybody is benefiting from participating in this initiative. And I also hope it's fun to participate in a sort of competition, even if you are collaborating and competing with your colleagues of your own countries.

Conclusion (55:29)

Manuel Lemos: OK, well, with this, basically we have ended this podcast. We just would like end up thanking Arturs again for coming and helping making this hangout more interesting with your insights.

Arturs Sosins: There is one more thing I would like to mention.

Manuel Lemos: There's one more thing.

[Laughter]

Manuel Lemos: The last guys that was famous for saying those words is unfortunately dead.

Arturs Sosins: OK.

Manuel Lemos: There's one more thing. OK, I hope nothing bad happens to you after this. OK, go ahead.

Arturs Sosins: Basically the last time, I've mentioned that it would be great if we have a JavaScript mascot and that people should come up with some ideas. Months have passed, still no ideas, no suggestions.

And I'm starting to worry in my expectations. And maybe we could come up with an ECMAScript mascot, for example, that could be a part of the prizes.

Manuel Lemos: Well, I don't know. I don't know. Because it seems that these mascot initiatives are usually ideas of one individual that happens to be talented in designing graphics. Like for instance, Vincent Pontier from France which is the original creator of the PHP elePHant.

I don't know about the Linux penguin or MySQL dolphin, but in this case with PHP, it was an idea of one individual.

Maybe I should start thinking... Well, I'm not talented as a graphic designer. That's certainly not my best qualification, not at all.

Arturs Sosins: Same here.

Manuel Lemos: But maybe if I talk with some graphic designer that somehow are interested with JavaScript, you can actually be motivated to create a mascot that would get some adherence. And even if you cannot make a mascot that is accepted as a JavaScript mascot, we can make it a JS Classes mascot. It probably it will be all right, too.

OK, with this, we practically ended the podcast. Thank you again, Arturs for coming. On my behalf, that's all for now. Bye.

Arturs Sosins: Bye.

[Music]