JavaScript Trends 2014 - Lately in JavaScript podcast episode 39 - JS Classes blog

Show notes

Download Size: 45MB Listeners: 446

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

• Article: Creating a self-correcting alternative to JavaScript's setInterval

• Article: Web platform: five technologies to look forward to in 2014

• OCRAD.js: Pure Javascript OCR via Emscripten

• Scripting native apps with JavaScript on Windows, Mac, Linux and iOS with Frida

• Article: Introduction to HTML5 Desktop Apps With Node-Webkit

• Converting Videos in Pure JavaScript with VideoConverter.js

• PHP interpreter in the browser with Uniter

• Webkit Browser in Pure JavaScript

• Viewing and Editing Office Documents in the Browser with WebODF

• Article: View the Diff and Patch Text Strings in JavaScript and PHP

• JavaScript Innovation Award Winners of the Year of 2013

Read the podcast transcript

Introduction (00:20)

[Music]

Manuel Lemos: Hello. Welcome to the Lately in JavaScript Hangout. This is episode 39, if I remember correctly. And as before, I have here Arturs Sosins, the now almost practically official co-host.

[Laughter]

Manuel Lemos: Hello, Arturs. How are you doing?

Arturs Sosins: Hello, Manuel. Hello, everyone. I'm actually great, now going warm and fuzzy here.

Manuel Lemos: Yeah, oddly you were wearing a nice antenna in your head.

[Laughter]

Arturs Sosins: It's there?

Manuel Lemos: Yeah. Now, you look like a telemarketing attendant, but never mind.

Creating a self-correcting alternative to JavaScript's setInterval (1:05)

Manuel Lemos: Well, today, we are going to talk of many, many interesting subjects. Things that happened in the latest times, mostly in January.

And we're going to start about an article that I found interesting, regarding setting intervals with JavaScript periodic callbacks that are invoked when calling setInterval.

Let me increase the font here.

Basically, this is a solution for problems that happens because setInterval function is not meant to be accurately run on the exact number of seconds that you specify. I think the timer just starts counting right after you return from the function. I'm not sure yet.

Anyway, the claim is that it is not accurate. There is even the screenshot here of the timings that appear.

Arturs Sosins: Basically, it say that it's not only inaccurate but the error is also cumulative. It adds up all the time and it gets bigger and bigger offset.

Manuel Lemos: And this is interesting because sometime ago, I was just thinking about this because I have an animation library that is supposed to make the animation steps run on the specified amount of time. And since it is using, I'm not sure if it is set interval or set timeout, but I think the effect, it's the same. It does not exactly run accurately and sometimes the delays are noticeable.

Here, you can see some milliseconds of delay. So, the solution that the guy implemented here, it's a bit tricky. Arturs, did you look into this? What do you think about the solution?

Arturs Sosins: Yeah, well, basically, he counts as the time together with what have passed and he used single setTimeout calls and tries to compensate for the offset that already happened and execute the next tick for a little less amount, just to try to compensate.

Well, there was a lot of debates about this solution. Some people are saying that it is a poor solution because setInterval could actually have higher priority to the calls than setTimeout and could be more efficient. Others say that it is exactly the bad thing about setInterval, it has higher CPU priorities.

So, as I said, there were lots of debates. And it all depends basically on do you really need such an accurate solution for your application or not?

Manuel Lemos: Yeah. Well, for me, I think it's interesting for applications that require accurate timing. I was mentioning an animation library and it is supposed to run on specific time intervals.

If you say this fade effect should only take one second, if it start taking much more than that, it will slow down the user interface or something that is supposed to happen after the animation is not happening yet at the right time.

Well, I don't know. Personally, I thought it was a useful problem to solve. I don't know if the solution is perfect. I did not have the time to examine it in depth. But I certainly will look at it closer, because I probably need to implement something as accurate as possible for repeated tasks that are supposed to work on specified intervals.

Web platform: five technologies to look forward to in 2014 (5:36)

Manuel Lemos: Well, OK, but let's move on. We have other topics to comment on. Let me check here.

We have another, this time it's another article that talks about... Well, it's basically an opinion, not exactly something that you should consider to be something that will necessary happen here.

It's an article about trends for 2014 in the JavaScript world. This is an article... let me mention the name of the author. I'll try to spell it, Dr. Axel Rauschmayer. This is not the correct spelling. I hope he can excuse me.

Anyway, it mentions about five technologies to look forward in 2014. So, it's basically a suggestion of something that is trending. He mentions asm.js, ParallelJS, ECMAScript 6, Web Components, CSS Grid Layout. From this five, the one I was not aware was ParallelJS.

Arturs, what do you think about this suggestions for JavaScript technologies to look in 2014?

Arturs Sosins: Well, I think have already talked about asm.js. And I actually saw a 3D game, cool 3D game made by it that can be run in Firefox. And it was already the last year so I would not say that it will be only 2014 year's technology to look for. It was already in the game.

Probably a little more about ParallelJS. It's seems to be some sort of map filter reduce implementation in JavaScript that can be used to solve some problems.

About ECMAScript 6, which is something I'm actually really looking forward, because from the standard that finally, something more to object oriented that will come to ECMAScript including the JavaScript that has been missing for a long time. But I missed a lot actually.

Manuel Lemos: Do you think the browsers will start adopting ECMAScript 6 or not this time, not this year?

Arturs Sosins: Probably not this year. But even if they would not, I think node.js and other such JavaScript applications that would really benefit from the OOP approach would adopt it.

Manuel Lemos: Yeah.

Arturs Sosins: Then, about Web Components, that was interesting idea that I was not aware of. That actually the components done in the JavaScript you would not have to worry about the whole page, but only about specific modular components without knowing anything other that uses the what's called shadow DOM element, that is not actually DOM of the page. And that's was what's interesting.

Manuel Lemos: We actually commented a long time ago, in the past episode maybe two years ago or something, I'm not sure. Basically, this is yet another interesting thing that depends on browser adoption.

If the browsers do not support this, you cannot benefit from it. But well, I think it's interesting and eventually, it would not be as tricky to implement support in browsers as ECMAScript 6 because there differences in the language versions.

But in this case, this is just a feature that gets added to the browser and if you use it, fine. If you don't use, nobody will be concerned because it won't affect the compatibility of your browser-based applications.

And finally, I think CSS Grid Layout, I don't know if you want to comment also about this.

Arturs Sosins: Well, I can only mention that before CSS, there was a table layout for designs. Then, they were deemed bad, not useable.

[Laughter]

Arturs Sosins: It won't work with CSS.

Manuel Lemos: And then we get back...

Arturs Sosins: Yeah, actually, lots of things that you could complete with table layouts, you could not do so easily with CSS. And so, I think that people are coming back with CSS grid layouts.

Manuel Lemos: Yeah. The reason I'm laughing is because tableless turned into an religion. And I thought it was so because tables are necessary. And they always keep talking about Web standards if tables are not defined in Web standards. What is the HTML standard for defining what types should be supported?

And this one tries to work around by defining, I think it's more CSS tricks. It's basically implementing tables and pretending that you are not implementing tables.

Arturs Sosins: Yeah, exactly.

Manuel Lemos: And what's odd is you cannot pretend in certain environments. For instance, if you want to send email, you cannot use CSS because the email systems like for instance Gmail totally filter all the CSS you put on the HTML. So if you want to put things in boxes aligned by each other, you need to use tables.

Arturs Sosins: Yes.

Manuel Lemos: So my advice is stop being so religious because it's getting in the way to make it work as needed. It's not a matter of being consistent with what many people claim that tables are bad. Tables are not bad, they are useful for a purpose.

And I think CSS 3 also add some table layout attributes so you could use those attributes in things that are not tables, but they will be aligned as tables.

Arturs Sosins: Exactly.

Manuel Lemos: So I think it's silly to pretend that tables do not exist or are a bad thing. Basically, this CSS Grid Layout is... I want my tables back.

[Laughter]

Manuel Lemos: Well, that's my opinion. Of course, there are people that are more sensitive to these arguments probably have different opinion.

Arturs Sosins: And they will trash you out for this comment, but well.

[Laughter]

Manuel Lemos: OK.

[Laughter]

Arturs Sosins: It's true, so...

Manuel Lemos: Yeah, but you know, people do not always agree. Actually, chances are that people always disagree on things.

OCRAD.js: Pure Javascript OCR via Emscripten (13:13)

Manuel Lemos: But let's move on other topics of interest. This time I just want to comment briefly on a library that I found interesting because it shows the power of things that you can do already with JavaScript that you probably thought you would not be able because it would be too heavy or something.

Basically, it's OCR library, Optical Character Recognition, exactly the kind of thing that usually takes a lot of processing because it needs to examine some images to be able to recognize the text that is written on those images.

So this Ocrad.js is a library that is basically ported to JavaScript using  Emscripten, which is a compiler that converts...

Arturs Sosins: C, native codes, C++ code to the ECMAScript compatible JavaScript code.

Manuel Lemos: Yeah. And it has been used by many projects that I've been implementing, things that you did not think were possible in JavaScript because you thought it would be too slow. But in this case, they used the Emscripten compiler to convert it.

Well, I have not tried it, but I think it just shows there are not really so much limits to JavaScript as people thought before.

Arturs Sosins: There is actually a demo, how we do on top where you can drop images or you can draw your own characters and see if it recognizes it. It can scroll up. Now, scroll down a bit.

Manuel Lemos: Where is it? I'm trying to find the link.

Arturs Sosins: No, there is no link. Here is the demo. You see?

Manuel Lemos: So, you need to...

Arturs Sosins: You can just draw. I don't know, if it's a letter, it probably could be easier.

Manuel Lemos: Oh, well. That's almost working more or less, well.

[Laughter]

Manuel Lemos: Well, it's similar. You still need to edit your OCR thing. But, OK, intention is what matters.

Arturs Sosins: Yeah, and it's actually only 1MB size and I think it contains no training data so it just export already trained model or something like that.

Manuel Lemos: Yeah. Well, without having it trained, I think the works are pretty nice. I mean, the results.

OCRAD.js: Pure Javascript OCR via Emscripten (15:58)

Manuel Lemos: OK, but this is yet another interesting library and we have many more to comment on.

Arturs Sosins: So, it means in the end, what we have, we develop CAPTCHAs and then develop JavaScript libraries to solve CAPTCHAs.

[Laughter]

Manuel Lemos: A good point. Actually, I remember that but I forgot to mention it now. Now, JavaScript is fighting JavaScript.

Arturs Sosins: Yeah.

Manuel Lemos: I mean a Web page will be defeated by other Web pages. So your CAPTCHAs need to be improved. Need to be so obscured that not even humans will recognize them.

Scripting native apps with JavaScript on Windows, Mac, Linux and iOS with Frida (16:39)

Manuel Lemos: OK, but now, we're going to move on to another topic this time. It's the... Wait, I was already there. It's the Frida Project, which is basically from what I could understand is a way to embed JavaScript to script  Web applications, I mean desktop applications, native applications on Windows, Mac, Linux and iOS.

They support iOS but they don't support Android. That has a meaning, they probably do not like Android and Google. They like Apple.

Arturs Sosins: No, no. Actually, what it does is...

Manuel Lemos: They didn't have the time.

Arturs Sosins: What?

Manuel Lemos: Well, Android is Linux.

Arturs Sosins: No, no, they actually inject Google's JavaScript engine into the process. Attach the process and allow you to manipulate the API for JavaScript. So they are using Google technology.

Manuel Lemos: So they just do not like Android because it's... Because they like iPhones and iPads and iThings.

OK, well, this is just a brief mention... I think it's not the first time that somebody tries to use JavaScript to embed a scripting language for native applications. But it was just worth mention, there is not much to see here. There is not a demo. You would need to build a native app to see this in practice.

Arturs Sosins: That's mostly for hackers that would like to dive in and check out how the thing work.

Manuel Lemos: Well, if you develop native applications, it's probably useful for you. But well, it's not my case.

Article: Introduction to HTML5 Desktop Apps With Node-Webkit (18:35)

Manuel Lemos: Anyway, moving on, with another sort of related topic, which is the introduction of HTML file desktop applications with Node.js.

This is an article that teaches you to use node-webkit module to develop desktop applications. I thought it was a nice tutorial here. I never tried to develop native desktop applications using this node-webkit module. But I thought it is interesting not only because you can build applications with this module but you can also have it bundled.

So if you are looking for a full solution, it also do the packaging so you can already ship your product. I don't know what are the dependencies. I supposed it depends on Node.js to be installed somehow.

Arturs Sosins: Yeah. It will require a Node.js to run, yes. But still, it's quite impressive.

Manuel Lemos: Yes. What I meant is that does it bundle Node.js inside the package or do you need to install it separately?

Arturs Sosins: From the tutorial, I think you need to install it separately, but I think it might be even possible to bundle them together.

Manuel Lemos: Well, if you have plenty of time to study the topic, probably you'll be able to do it.

Converting Videos in Pure JavaScript with VideoConverter.js (20:18)

Manuel Lemos: Anyway, moving on to another topic also related with somewhat unexpected task that now you can do with JavaScript. Again, another  library ported with Emscripten which is video conversion library, videoconverter.js. It can even demonstrate it working but it seems to be taking some time to load.

Arturs Sosins: Well, it weighs 25 megabytes, so yeah.

Manuel Lemos: Maybe later. I thought... OK, it's the demo that is faster. The demo here shows the output of the program. Basically this is a port of FFmpeg.

Arturs Sosins: Yeah, it's also done with  Emscripten.

Manuel Lemos: Exactly.

Arturs Sosins: So, basically you can turn any native app into JavaScript run them into browser app.

Manuel Lemos: You are right. And they export all the logs, so you can see the logs.

Well, anyway, it takes some time like FFmpeg originally, but that's OK. What matters is that it works as needed. And it took 32 seconds almost to complete, to convert a WebM video to MPEG 4.

And it even allows you to download the resulting video from this demo page. Well, this Emscripten conversion libraries are becoming pretty common. Maybe they are no longer newsworthy.

[Laughter]

Arturs Sosins: Yeah, I think.

Manuel Lemos: Because now, you can expect to do everything in JavaScript as long as you write it in C++ and then convert it with Emscripten. I think that's the conclusion of this. Because, well, it's not the first time we talk about libraries that became possible thanks to...

Arturs Sosins: Emscripten?

Manuel Lemos: Emscripten, right.

PHP interpreter in the browser with Uniter (22:39)

Manuel Lemos: So, let's move on and this time, we are going to talk about something that is also not exactly new because we've already seen projects that convert PHP code into JavaScript.

And this one here is actually an interpreter. It's a Uniter. It's still in alpha stage, so there are things that do not work. But basically, what it allows you to do is to write some PHP code and have it interpreted by JavaScript.

So for some weird reason, you have written some PHP that you don't have the time to convert to JavaScript, you can actually use this library to run it.

I tried some things here but they didn't work. I tried to load some of my classes but for some reason, they are not supported. So it seems it work only with the basic 'Hello World'.

Arturs Sosins: That's exactly what I wanted to say, that you can take most of the PHP classes that does not use some kind of internal  PHP library functionality, but a similar kind of algorithm classes and converts them to JavaScript classes, and into JS Classes.

Manuel Lemos: Yeah, but actually this is not really a converter.

Arturs Sosins: Well, yeah I mean...

Manuel Lemos: It's more an interpreter.

Arturs Sosins: Still, you can create the JavaScript app to run the PHP code, which in the end does what you want.

Manuel Lemos: Well, I don't know if this allows to generate the converted PHP into JavaScript. I think it's just an interpreter.

Arturs Sosins: Yeah, yeah, just interpreter.

Manuel Lemos: So, maybe future versions will actually generate some JavaScript. Well, what is interesting here is that it actually interprets the PHP as you type it. So, if have syntax mistakes, it immediately shows you and it even tries to show the exact PHP error methods that would appear in your scripts.

It supports classes and things like that but not everything in classes is supported. I could not figure exactly what it didn't support but some things are not implemented.

Arturs Sosins: You also need to expose some functions I think to make them work. So, it might not be that easy to just paste the code and execute it. You must expose some interfaces or something like that.

Manuel Lemos: All right. Now, I'm seeing the code on the right. What that means, you need to expose. As in if you don't expose, you don't...

Arturs Sosins: Probably expose actually would maybe allow you to call JavaScript function from... Well, it's actually kind of confusing. I don't exactly how it should work, but yeah.

Manuel Lemos: Probably it's for you to implement those functions in PHP. Let's see if that's what getcc... No, because there are some getcc here, no, that's not what it means. I'm guessing too much.

Arturs Sosins: If you do like echo from info objects call meta getcc or something like that.

Manuel Lemos: Yeah. Well, maybe you could show me what you are doing.

Arturs Sosins: I'm unfortunately on a single screen currently. But I can try typing you, that you could try something like this.

Manuel Lemos: Yeah.

Arturs Sosins: Maybe this is going to work.

Manuel Lemos: Let's see. Oh, I see... info...  get cc.

Arturs Sosins: Because it passes some kind of info to an...

Manuel Lemos: Oh, I see. I know what you mean. Well, this deserve some study if you want to learn how to work.

Now, for applications for this kind of thing, what could be, maybe some interpreter of PHP on the browser to let you teach PHP and do PHP version of Codecademy, maybe.

Arturs Sosins: Actually, that is an awesome idea, yes.

Manuel Lemos: I think Codecademy already supports PHP if I'm not mistaken. I don't know. I have not been trained to learn PHP lately.

[Laughter]

Webkit Browser in Pure JavaScript (27:43)

Manuel Lemos: Well, anyway, let's move on with another interesting project. This time it's WebKit.js, which is basically a port of the WebKit Engine to JavaScript.

Oh, don't tell me this is yet another Emscripten library. Because I could not find exactly what happened here. Is it just somebody  crazy that...

Arturs Sosins: Could have ported it many ways.

Manuel Lemos: Test for JavaScript, C++ needed to be developed. Hmm, I don't know. I suspect there is some Emscripten magic here somewhere. Cygwin... Oh, there it is, Emscripten.

Arturs Sosins: Yeah.

Manuel Lemos: Oh, I'm fed up of Emscripten. It's so boring now.

[Laughter]

Arturs Sosins: Well, it's not so easy but still...

Manuel Lemos: Yeah, somebody has to suffer and deal with the Emscripten options to make it work. But, well, OK...

Arturs Sosins: Well...

Manuel Lemos: What happens is that we have results. And if you want to have a browser inside a browser, now you can have WebKit.

Arturs Sosins: But can you have a browser inside the browser inside the browser?

Manuel Lemos: Yeah, well, that's the question. Maybe later, there'll be some flaws in the middle and you cannot do that.

But anyway, this is probably to implement...

Arturs Sosins: Testing?

Manuel Lemos: Maybe some headless browser on the server like Phantom JS. But this time based on WebKit.

Arturs Sosins: Yeah, it could be used in testing. It could be used in taking screenshots of the websites.  Lots of possibilities to implement.

Manuel Lemos: Right. All the things you thought would not be possible, because it would require a full-blown browser. It probably would be able to do with this.

Viewing and Editing Office Documents in the Browser with WebODF (29:43)

Manuel Lemos: OK, now, we are going to move on with another library that I think it is, I suspect, probably also done with Emscripten. I don't know.

[Laughter]

Manuel Lemos: Let me share the screen here. It's basically WebODF, which is an editor for documents like Open Office. ODF is the Open Document Format.

So, it should be able to allow you to edit and create documents or even view them in this format. And this is interesting because it seems to be more powerful than the regular HTML editors. And you can embed it in your pages unlike, I think, Google Docs. You are not able to embed it in your pages, right?

Arturs Sosins: Well, that's because Google does not allow it because it's not possible.

Manuel Lemos: Yeah, probably it's possible but they are selfish. They do not allow you to do it.

Actually, I was trying to edit here. I can edit some things but not other things. For instance, I cannot resize this picture. Maybe, I'm not supposed to be able to resize it. But it works. Other than that, it's probably not a full-blown editor. I can insert pictures.

Arturs Sosins: You can insert, yes. But you can't resize them.

Manuel Lemos: I can't resize them.

Well, anyway, it is interesting to see, I was trying to see the original project page if it says Emscripten.

Arturs Sosins: No, it does not. I already checked. So I don't know.

Manuel Lemos: Well, maybe it's Emscripten but they are not telling me, Oh, no, I'm not going to tell those guys in Lately in JavaScript podcast, they are going to start making fun of all the Emscripten libraries that were converted.

Anyway, I think this is useful. Probably, more useful than those traditional HTML editors. I don't know if it actually can save HTML. It says it uses HTML and CSS to display the documents. But I don't know about exporting. Well, it should be able to export because it's the easiest thing to do. Unlike ODF that has to be converted.

Arturs Sosins: Yes, probably. But it only offers the document format. I can't find how to export the HTML.

Manuel Lemos: Maybe you can convert it later or something, which is very odd, but OK.

Well, anyway, this is just to mention this library, maybe converted from Emscripten or not, we don't know. Because they do not reveal the details.

View the Diff and Patch Text Strings in JavaScript and PHP (33:16)

Manuel Lemos: So, we are going to move on to another topic. This time, just to mention about an article that I actually wrote, about a class that I posted in JS Classes site, which is basically to view differences between text strings and eventually generate patches.

This is not something exactly new. There are other libraries, but I need it to be implemented in a specific way that I could use it in the browser and also on the server. So there  is a version for JavaScript and a version in PHP, which is in PHP Classes and it is mentioned on this article.

Basically, here, the article just explains how it works. You can compare two texts in different modes: by character, by word or by line. Most frequently, you compare text by lines. So it is easier to see whole chunks of codes that change.

But sometimes you need just to see some words that change, which is the case when, for instance, class authors publish, edit the descriptions of their packages. There is a moderation process to review if the descriptions are in good shape. They do not contain mistakes and only after that, the changes are published.

So when the descriptions were long, it was hard for me to figure what exactly the author changed. So I developed this library, so I could actually see them on the browser in real time. Because if I add it, the changes also can see what still changed or not.

So it can mark the deleted text as deleted and the edit text here appears in bold or underlined. And the text that stayed, it just remained in the same style. So it is usual to see differences between text in real time as you edit the text.

And if you just want to show the differences but not exactly rely on JavaScript, there is also a PHP class version for this library, which has practically the same name but in the PHP Classes site.

For some reason, it stopped the screensharing. I was trying to show it. So far, I was not looking. Did it stop screensharing from the beginning?

Arturs Sosins: Yeah, I think so.

Manuel Lemos: Oh, damn. I was talking about something that you were not seeing.

[Laughter]

Manuel Lemos: Oh, damn. Let's go back again. Here it is.

So, basically, I was saying that this article is talking about this Difference library. There's some code here that demonstrates how to call the class. You just call the diff function, pass the text before and after, and pass also an object that will return the results.

This is an interesting aspect of JavaScript. In PHP, I would pass a variable to a function that would return the value by reference. But it JavaScript, there is no such thing as passing values by reference.

So, what I needed to do is to pass an object and store any value in that object. Because the objects are not copied, they are just passed by reference. So the call function would be changing the object called in the calling function.

Anyway, I also mentioned the results here. You see some strike-through and some of underlined text for text that was deleted or added. And regular text remains the same.

And the styles of this are configurable. So if you are not happy with this formatting, you can configure the class. Other than comparing the text, you can also apply patches. So, the results of the difference function can be applied to the text before it returns the text after. And the function call is here.

Well, as I mentioned, this is useful for specific case of allowing to see changes in text that was done on descriptions of moderated objects. I mean classes in either JS Classes and PHP Classes, but could be useful.

Arturs, I don't if you would have any other applications for these kinds of things.

Arturs Sosins: I am certain that I saw similar solutions in C++. Are you sure you didn't convert it with Emscripten?

[Laughter]

Manuel Lemos: Oh, yeah, no. Not really. Actually, I developed it in PHP, then manually tried to do the same code in JavaScript. That's why I mentioned that aspect of passing values by reference. I had to figure out, can I pass values by reference in JavaScript?

And I remember that this is a very specific feature of PHP, because most other languages do not have that feature of passing values by reference. Probably, the Visual Basic.

[Laughter]

Manuel Lemos: Or C#, because it's almost an evolution of the Microsoft Basic thing.

Well, anyway, let's just briefly mention this, because this article was posted on JS Classes blog. And this is just also a reminder of any author of objects posted in JS Classes can also have their articles about their classes be published on the JS Classes blog and so get much more exposure.

Every package has its own blog and by default, when a new blog post is submitted, the users that previously downloaded the package get notifications about the features, I mean, the articles that are posted.

But you can also flag the article as featured and it goes through a moderation process. And if it considered to be useful to other users that even if they have not used your class, it gets much more exposure because it gets published as if it was part of the JS Classes blog.

So, nowadays, if you publish an article there, an email to all the JS Classes subscribers which by now is probably about 16,000 or something. So it gets quite reasonable exposure, much more than you'd get by yourself.

So, if you want to get additional exposure to your packages, because you have done something that is generally useful, you can just flag your articles feature and there you go.

JavaScript Innovation Award Winners of 2014 (42:09)

Manuel Lemos: Now, moving on to one final section before the regular is that this month, actually, we're already in February. This is still supposed to be the January Hangout. But since we are already in February, the results of the Innovation Award Winners of the Year, I mean 2014, were announced. And let's see who has actually won this year. I don't know, I don't know.

Arturs Sosins: Who could it be?

Manuel Lemos: Who could it be? Who could it be? So the winners are, well, actually we have three winners.

[Laughter]

Manuel Lemos: In 2013, there was a tie between Franz Josef Brünner from Austria, Jonathan Gotti from France and guess who, Arturs Sosins from Latvia. Well, congratulations, Arturs. I also already sent congratulations to the other winners.

And there will be a separate interview with each of the three. Unfortunately, it is not possible to record with all three at the same time, which would be ideal. So, I will be recording three separate interviews and publishing a separate video with all the interviews one after the other.

So, regarding Arturs' piece, not the time for you to tell about your... I'll get back to you in your interview when it's time.

Arturs Sosins: OK, sure.

Manuel Lemos: And well, just to mention that it was great to actually see there's a tie because it's the first time. And for now, the prize will still be an elePHant for each of the winners. Because there is not yet a mascot for JavaScript for JS Classes.

Maybe it's something that who knows can appear next year. But somebody would have to create a mascot, hopefully something that is well reckoned as the mascot of JavaScript, not specifically of JS Classes. Like this, the elePHant.

But anyway, the winners will get an elePHant like this. It's a bit shy because it has its ears. Anyway, I think... no, I'm sure... that Arturs already got an elePHant like this.

Arturs Sosins: Yeah.

Manuel Lemos: So, you only have one kid, right? So you are going to get a new elePHant so you need to have another baby.

[Laughter]

Arturs Sosins: No, I'm building an elePHant army.

Manuel Lemos: Yeah, just to motivate you to send more JavaScript classes with an elePHant. I don't know if that's the right motivation.

JavaScript Innovation Award Winners of November 2013 (45:40)

Manuel Lemos: Well, anyway, now we're going to move on to one regular section on which we comment about the nominees of last month, of nomination which was December. Let me jump here... No, it was actually November.

So, they are published in November, then in December they are nominated and were voted, and then in January, the results come out. So, it's time to already talk about these packages.

And there it is again. One package by Arturs Sosins. Arturs, can you comment a bit about your package?

Arturs Sosins: OK, well, basically, it's something created for Opera users.

Manuel Lemos: You may want to...

Arturs Sosins: Screenshare?

Manuel Lemos: Yeah.

Arturs Sosins: Yeah. Let me try. I think I can also try to increase it.

Manuel Lemos: Yeah, that's it.

Arturs Sosins: So yeah, basically 2013 was a dark year for Opera users. Because Opera moved from their default engine to a Chrome Webkit engine and dropped lots of great features that Opera had. And one of them was the Opera Notes, that I was actually using quite a lot.

And this is how they look like. Simply, what you can do  is store multiple notes. And I actually added quite a lot of other features that I was missing from original Opera notes, like printing notes. For example, you can now use tabs and lots of stuff like that.

Basically, I made it Web-implemented and it can now run in any browser like it does in Chrome. And I added the features there. I needed the most and there are lots of other users that started adding other features. So, yeah, basically, it's a great component for Opera users that are missing the popular Notes app from Opera.

Manuel Lemos: Yeah, well, so basically it was a good thing, because then you developed something that was actually better than the original, right?

Arturs Sosins: Yeah.

Manuel Lemos: Yeah.

Arturs Sosins: Well, of course, I'm using it and improving it if I find something. And as I said, there were lots of comments from the Opera community which was actually kind of great.

Manuel Lemos: Yeah, I can see, there was somebody commenting here. At least, you have one comment. Somebody requesting some feature, right?

Arturs Sosins: Yeah.

Manuel Lemos: Yeah. It's interesting. There are some Opera fans, since it's not by far a dominant browser, but there are many loyal fans.

Arturs Sosins: But, oh, the cool stuff came always from Opera team.

Manuel Lemos: Yeah.

Arturs Sosins: Isn't it that Opera headed first the speed dial, the Notes, built-in mail calendar, really lots of actual great stuff for not only developers but also just Internet browser users.

Manuel Lemos: So, if you want to know about the feature of the browser, first you use Opera and then...

[Laughter]

Arturs Sosins: Yes, something like that.

Manuel Lemos: Yeah. OK, now I would like to comment about the other two packages. One from Mark Rolich, a regular contributor of the JS Classes site. And there is the JS Image Magnifier which is very interesting.

Probably an effect that is common in many sites, especially in e-commerce sites on which you want to probably see the details, an imaging details so you can drag your mouse over an image. I don't know if this large enough. And you can see it in zoom.

And this is interesting because it's not just a scaled up version of the image. It's actually two images, one small one and the other big one. So, despite you dragging the mouse over this picture, in reality, the picture that you see on the right, it's eye resolution picture, which even looks better than the original. So, this is interesting.

Congratulations to Mark once again. He developed another interesting package. He had already sent many packages, about ten so far which were nominated to the Innovation Award including this one. So I hope he continues to send more interesting packages like this.

Finally, there was another package that was also nominated and it's from...

Arturs Sosins: Oliver?

Manuel Lemos: Yes, it's from Oliver Leuyim Angel from Mexico. This one is more to implement Facebook Connect on the JavaScript side, but I think it does not rely on the JavaScript libraries that Facebook provides. I thought it was interesting because of that.

Conclusion (51:46)

Manuel Lemos: And with this, we practically reached the end of this hangout. We tried to run and mention all the libraries at this time. So, we are going to try to not mention as many in the future, because it takes a long time. But I hope it was worth all the time even though many libraries were based on Emscripten.

Arturs Sosins: Yeah, exactly. I think that would be the reason why you would diminish the amount of libraries reviewing because they weren't really Emscripten wipes.

Manuel Lemos: Maybe I could mention, This bunch of libraries were ported with Emscripten.

Arturs Sosins: I know them all, yeah.

Manuel Lemos: I'll just mention it for him.

Anyway, basically, this is it. On my behalf, that is all for now. Bye.

Arturs Sosins: OK, bye.

[Music]