The Maturity of Standalone JavaScript Libraries - Lately in JavaScript podcast episode 36 - JS Classes blog

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, whatever. I never know what to call this. This is episode 36. This time we have here Arturs Sosins, directly from Latvia.

Hello, Arturs. How are you doing?

Arturs Sosins: Yeah, thank you. I'm fine. It's quite nice, nice Friday evening.

Manuel Lemos: That's good to have you back. Michael Kimsal is still on sabbatical license. He went somewhere. I think he's organizing the IndieConf event, that's why he should be very busy. But hopefully, next month, we'll have him back. Meanwhile, it's always great to have you here as you have also always great insights about things related with the JavaScript world.

JSHint UI Update (1:21)

And then, we are going to start talking precisely about just an update of a popular JavaScript application. Well, I think it's popular, at least for me because I use it a lot. I don't know if you can see it already on the screen. This is JSHint.

I'm trying to increase the font here. Is it readable now?

Arturs Sosins: Yeah, that's fine.

Manuel Lemos: OK. But I think I increased it too much probably. Well, I don't know.

It's just to mention that they changed the layout and presentation of the application. As I was mentioning, I used it a lot to test issues I have in my code I may have not noticed it. And along with the JSLint, there are a couple of tools that I use a lot to make my code better.

Anyway, just to mention that they have updated it. It seems that it's mostly the user interface. Well, I don't know. Personally, I cannot say that I did like it much, this dark background color that makes it harder to read.

And also, it took me awhile to figure that now, the options are in this button called Configure. Once you find the button, it's OK. But until then, I was a bit lost; I did not know how to disable certain warnings that I wanted to disable.

Arturs, do you use these tools, JSLint and JSHint, to somehow verify your code?

Arturs Sosins: No. Unfortunately for now, I'm not actually working much on JavaScript for production. So currently no, nothing like that.

Manuel Lemos: Yeah. But didn't you use it in the past?

Arturs Sosins: I was using JSLint. But, well, actually I did not know much about JSHint.

Manuel Lemos: Yeah, they somehow do the same thing. But probably they have a different set of warnings. And so, if you pass your code through both of those tools, in the end, hopefully, you have found more issues in your code and fixed them before shipping.

That's what I've been doing every time I want to publish some code. I pass the code through these tools and they've been very useful.

Well, anyway, this is just to mention that there was this update with JSHint. I was hoping that at least there could be a better choice of colors because I don't like this dark color in the background. Anyway, it doesn't stop me from using it because the tool is still useful. It has been improving a lot and still it is even more useful.

Customize Your Own JavaScript Debug Console (4:43)

Manuel Lemos: Anyway, moving to another topic that I want to mention now, regarding consoles which are used to help developers to debug their applications.

Some browsers have a feature that is not standardized which is the console object that can use to log messages. But if for some reason it does not work in your browser, you can use this new library called Conzole by Pierluigi Pesenti. I supposed he's Italian.

This makes a console appear here on the left side. I don't know if this is configurable. But it is interesting because it seems to be able to keep monitoring certain objects.

In this case, there's an object that seems to be being updated in real time. And here at the bottom, you can see the value is being updated. And this somehow seems to be a more advanced type of console than what we can use in most browsers.

Arturs, do you use consoles to debug, at least when you use JavaScript on the browser?

Arturs Sosins: I think that actually the most common thing that probably Web developer uses to debug.

Well, for one he doesn't really need to go into some deep code inspection and well, basically, you output the values, that is best way to check and the quickest way to check what you have running in your code.

And yeah, it was usually a pain, it's quite slow to test this within different browsers. But using this in browser solutions seems to be quite nice. And it can check even different objects. And wow, it actually could be a great library.

Manuel Lemos: Yes. Probably it has even more interesting features. I confess I did not have time to look into it in-depth. So whoever is interested on having good consoles, they may want to check out this conzole library.

Also, talking about consoles, I also found an interesting article related with the console API that is not standardized across browsers.

I think there is no specification what the console API does, so each browser implements their own console features and they are not standardized depending on the browser, they may not be able to use certain features that you could use on other browsers.

So, this article by Axel Rauschmayer... I'm not pronouncing his name correctly... talks about the JavaScript console API and tells about the differences, the features that are available in each browser. And there's even a table that shows what features are available in each browser.

And I thought it would be interesting to talk about this here because as you also mentioned, probably the default debugging tool is the console, the browser console, to show what is going on with the data, in the pages.

Arturs Sosins: Basically, did this blog post actually proves why the previous too is actually quite useful.

Manuel Lemos: Exactly. Yeah.

Anyway, if you would rather not use an external library, you forgot for some reason, you can always take a look at this article and figure what features are available on the browser that you are using to test and maybe take advantage of those features to help you debug your application.

Application Keyboard Shortcuts with QuestionMark.js (9:10)

Manuel Lemos: And now, moving on with the Hangout. Now, I've also like to mention another library that is quite interesting for several reasons.

The library is named QuestionMark.js. I supposed because question mark has become somehow the default shortcut key to show some help, to present the list of keyboard shortcuts for applications that allow the user to interact more quickly using the keyboard in those applications.

So, when you use the question mark key, it usually presents the list of all possible keyboard shortcuts that are supported by the application. And basically, this library just make it easy to present those shortcuts and let the user know about this.

For many users, this is a sort of secret feature because many sites, many applications especially AJAX applications have these shortcuts and only experienced users know about it.

But if you not aware, you may want to try the question mark key in many sites that you have used and hopefully, you will realize there are some keyboard shortcuts available for you to interact faster.

Arturs, were you aware about this sort of secret feature of using the question mark to find what are the keyboard shortcuts that an application supports?

Arturs Sosins: Actually, no. I was using quite a lot of shortcuts from a Gmail but I actually did not know that Twitter has one or that GitHub has one. Well, yeah.

Manuel Lemos: Now, you discovered lots of secrets.

Arturs Sosins: Yeah. I wonder if they have some Konami codes shortcuts also.

Manuel Lemos: Yeah.

[Laughter]

Manuel Lemos: Maybe, maybe.

Arturs Sosins: The most interesting part actually is that there are... As I see, usually there are quite a lot of small libraries that do one simple task and this is a good example of them.

And if I remember earlier, there was more like a framework that could do lots of stuff. Now, in JavaScript world, there is actually quite a lot of these small libraries that do just one simple task that you need and improve it. I thought that's actually also great.

Manuel Lemos: It's a sort of Easter egg that many sites have. They have a secret and they were not telling that the secret was there. Now, you're going to try in the...

Arturs Sosins: In every website.

Manuel Lemos: Exactly. Where the question mark key is in every site. Hopefully, this well also encourage more website developers, including myself, to add the question mark keys support to trigger the Easter egg of the shortcuts for the sites. I think it makes more sense for AJAX applications that you are always only on the same page.

Multi-user Slide Presentations with Reveal.js (13:01)

Manuel Lemos: OK, anyway, let's move on with another interesting library that I found here which is basically to help do presentations, slide presentations, those types of presentations that you would do with PowerPoint or Open Office presentation application.

And this one allows you to present not only slides but also do it with a corporate way with multiple users. So, this Reveal.js, I'm trying to find here. Where did I find the link for the demo? It was interesting.

Arturs Sosins: You mean Try it out link?

Manuel Lemos: Ah, exactly.

Arturs Sosins: Big letters.

[Laughter]

Manuel Lemos: That's what happens when you got old and you start having difficulties to see things. So, I think you can see it already.

So, this is a presentation. I think you can go to a specific page and you can enter as guest. I don't know. I don't know if you can also join this presentation here by going to the same URL.

Arturs Sosins: Let me try it. OK, let me enter another link. And I'm in. And can anyone see me?

Manuel Lemos: Yeah. It's on.

Arturs Sosins: There is a share link below, maybe we have a different ID. There's something.

Manuel Lemos: Where is the share link? Oh, here. Oh, here. OK, let me paste in the chat window, the one that I'm using so you can go there.

Where is the chat window? Here. OK try that link and see if you can join.

Arturs Sosins: OK.

Manuel Lemos: Oh, there you are.

Arturs Sosins: Yeah, and it works.

Manuel Lemos: It works. So can you try to use the keyboard keys to switch?

Arturs Sosins: All right.

Manuel Lemos: Oh, this is amazing. Welcome to the future.

Arturs Sosins: Yeah.

[Laughter]

Arturs Sosins: Looks like it's pretty cool.

Manuel Lemos: Exactly. And don't bother trying the question mark key, I already did it and no shortcuts appear.

[Chuckles]

Manuel Lemos: But it would make sense. Let me see. Oh, I see. I was trying to figure if there were any options to do any other thing other than go back and forth.

Arturs Sosins: It seems not in this presentation. But probably you can create together presentations, edit them or something like that.

Manuel Lemos: It's interesting because when you click on different parts of the screen I can see where you are clicking.

Arturs Sosins: Yeah? Oh, yeah, me too. The same for you.

Manuel Lemos: Yeah. Wow, this is an awesome library. It's certainly very encouraging to use this tool to do online presentations. The only detail is that it probably needs an Internet connection. Or else, how are people going to share?

Arturs Sosins: It seems that it uses a Review.js and some sort of Go instance service because you need some sort of a backend for this.

Manuel Lemos: Yeah. And probably this cost money if you use it intensively. Anyway, this is just to tell about how interesting things can be in terms of collaborative applications. Personally, I like it a lot. It already gives me some ideas of presentations I could use with this library.

Frame based Video Player (17:05)

Manuel Lemos: OK, but let's move on to another library here. This one is about another unusual use of JavaScript. Share the screen here. Let me see if I can increase the font here.

Basically, what it shows here it seems to be a video but in reality it's just a sequence of pictures. The idea is, instead of using a video player that for some reason may not be working in your browser, it uses a sequence of images.

I think they are JPEG. And you can present a video using those images. I don't know probably, it's not the most efficient way to present a video because it takes a lot more space, a lot more images than regular video that is all compressed frame by frame.

Anyway, it has certainly interesting effects here like pausing, playing and then you can also apply some image effects. Probably not very useful but just to say that you can, not necessarily that you won't.

Arturs Sosins: The most interesting part is actually that it's a simple image object which has its data source changed lots of time and what you can do, you can customize it with CSS as much as you want. Basically, it's a simple image. And that's why it may be so cool because it's a video and customizable simple HTML element.

Manuel Lemos: Right. I supposed it's probably only viable if you have a good connection to the server where the images are. Probably, the images are preloaded to make it smooth.

Arturs Sosins: Well, you won't watch movies or something but for, but I don't know, advertisements, it could work out quite great.

Manuel Lemos: Yes, that's a good point. Because that probably is a good idea to work around the fact that many people are using ad blockers, block JavaScript and Flash and whatever to prevent the ads that to appear. And with this library, it probably will work around, at least for now, those ad blockers. Anyway, it seems to be very simple to use.

Arturs Sosins: And if you scroll down, you'll also see that there is tutorial on how to, for example, convert to video, to set up images and generate JSON file to hold it.

Manuel Lemos: Yeah.

Arturs Sosins: So, it seems quite usable and they thought it through, the whole process.

Manuel Lemos: Yeah. I supposed whoever developed this had a real need for this. It was not just done for fun.

Arturs Sosins: Exactly.

Manuel Lemos: And that's why it's quite well developed I think. And I was trying to figure who is the developer. I cannot...

Arturs Sosins: At the bottom of the page, there is a 'Made by Vagner Santana'.

Manuel Lemos: He sounds like a Brazilian. Probably, he's a Brazilian. Anyway, congratulations to the author, regardless wherever he is from. It was a quite interesting idea. I'm sure it is useful.

Arturs Sosins: You are right, he's Brazilian.

Manuel Lemos: The name sounds Brazilian.

Arturs Sosins: OK.

Manuel Lemos: That's a typical Brazilian name.

Detecting When the Users go Offline (20:54)

Manuel Lemos: Anyway, moving on with the Hangout. Now, talking about another interesting library. Probably, this is a simple one. Let me share the screen here. This is offline JSON.

Wait. So, it's the wrong keyboard shortcut. And again, it does not support the question mark.

[Laughter]

Arturs Sosins: Yeah. I already tried.

Manuel Lemos: Now, we're going to try the question mark Easter egg for all the sites.

Anyway, this is a library to basically help detecting when the user have lost its connection. Probably he was on a 3G connection that was so lousy that it dropped and he lost the connection. 

And it may be interesting for doing stuff that you may want to save the user work, probably in local storage of the browsers. Hopefully, it will help the application to save the user data before he probably he's only be able to get back his connectivity a long time afterwards and probably it can be used to trigger some events on which the application would save that data and you can recover it later.

Arturs Sosins: You could probably, if usually you'd try to save your data at the backend server, then if user lost connection, you can try to fall back to saving your local storage and then synchronize those two.

Manuel Lemos: Yeah. And they have some demo here. because I'm not losing my connection, they're just simulating to see what happens.

Arturs Sosins: They got lots of themes for displaying the user interface of the message here.

Manuel Lemos: Well, I don't know how this works in practice because it seems to suggest that it's trying to reconnect.

Arturs Sosins: Well, as I see, I'm looking at the code right now and it just uses just simple HTTP request that you can send through the JavaScript. Let me check now.

Manuel Lemos: Yeah.

Arturs Sosins: Yeah, it's basically an object.

Manuel Lemos: Right. From what I thought, browsers with HTML support already sort of standard way to detect when the connection is lost. So, I was wondering what else this library would do. So, it says it remakes the connection when...

Arturs Sosins: Basically, it tries to ping some server and tries to see if it connects whenever the connection fails.

Manuel Lemos: Probably. Well, maybe inspecting the code will reveal what exactly does it do. Unfortunately, we do not have time.

Securing Browser Side Data using Cryptography (24:05)

Manuel Lemos: So we are going now to move on to another section of this hangout. This time, I would like to comment on a couple of articles that were published on the JS Classes site. Let me share the screen here if I can.

OK. Basically, there is this article from Jason Gerfen. He's a developer of an object called secStore.js. That object, basically what it does is to use the local storage to save some data. The data can be not only in local storage, they can also be stored in cookies. And the only detail here is that it use cryptography to store the information more securely.

So, this is a very brief article. It just tells a bit about why and how you should be using cryptography to store sensitive information that you may have in your browser.

I don't know, personally, I never used cryptography to store, not even at least in the browser side. I already use cookies with encrypted information but those were set on the server side and now for the browser side, probably this makes more sense to use on AJAX applications that generate information and that information needs to be stored on the browser side.

Arturs, have you used any application that you need to store something on local storage or maybe in cookies?

Arturs Sosins: Well, I could think some usages for it. For example, some AJAX games could use it because you would not want to connect to the server all of the time, only synchronize sometimes and meanwhile store it on the user side. But the way that user could not modify it in the progressing game for example...

Manuel Lemos: Yeah.

Arturs Sosins: There could be a lot of usages, yeah. But the ones that he mentions is actually they're more of security. That you get across sites and some other could get all your information. So, it's about more of storing sensitive information in cookies and the local storage.

Manuel Lemos: Right. What I was wondering is, where does the....

Arturs Sosins: The key.

Manuel Lemos: The key is stored. Because if this key is also stored on the browser side, it's probably not really secure. It's just a matter of making it less obvious to crack. Because if an application is exploited and the user's data is stolen somehow, they can also steal the key and have it decrypted somewhere else.

So, maybe, this is more like, for instance, the machine of the user was compromised and they steal the information of let's say, for instance, that's stored by the browser. But for some reason, the key is obtained from somewhere else.

I don't know if this is going to guarantee a really secure system. Probably, it'll just make it harder to break, not necessarily difficult.

Arturs Sosins: But doesn't any security is almost on making it harder? Because if you have enough time, you can crack almost anything.

Manuel Lemos: Yeah, but it's different when you... If you already have the key stored in the same place as the information, you are not really raising the difficulty. Now, if the user needs to enter the password, and the password, only the user knows about it, that's different because the password is in the user's mind, not in the computer.

Well, maybe I'm missing the point here for what this cryptography requires a password that only the user knows. And it is not really stored in the browser. Probably, that's the case.

Arturs Sosins: It should be like that, yes.

Manuel Lemos: Anyway, this is just to mention about this secStore class. It is funny that now I'm just reading the class, it suggested it would be called sex store.

[Laughter]

Manuel Lemos: It was not intentional, I'm sure.

Arturs Sosins: What is it that you're sure?

Manuel Lemos: Exactly. I'm sure the author did not have the intention to confuse people.

Adding Scrollbars to the Top of Large page Elements (29:50)

Manuel Lemos: Anyway, moving to another article. This time, it was an article that I wrote because I published an object that I have the need to develop.

Basically, what it allows is to put a scrollbar, not only at the bottom of the large page elements that for some... on the browser window. What happens in the case for this is, for instance, when I need to show code of JSClasses or even PHPClasses, when the code is too long, the code would not fit on the current window because it has many lines. I could make a scrollbar appear but the scrollbar would be appearing at the top of the code.

So, the user need to scroll all the way...

Arturs Sosins: At the bottom.

Manuel Lemos: Yeah. All the way to the bottom of the page element and then not seeing the scrollbar. So, I created this component that would attach another scroll bar at the top of the page element. It's a separate element but it will become attached and synchronized.

And maybe I should try to show this rather than just telling because it's always easier. Let me see if it's the package that I'm talking about. I have a good example of a file, I think. Let's see if this code is the case. No, it's the case.

Maybe if I increase the font so it becomes large. No, because the browser have its own scrollbar. Let me try to find very quickly some other package. For instance, I know that this happens more to me in PHPClasses than in JSClasses. But nowadays, I try to not exceed much the length of the package. I mean...

Arturs Sosins: You could try minimizing the browser window.

Manuel Lemos: Good idea.

[Laughter]

Manuel Lemos: Why didn't I thought of that? Let me go back to that code that was already opened. I don't know if it's... I think it works but I need to reload the page. No, not yet, I need to reduce it again. For some reason, I'm not able to show it.

Arturs Sosins: Because you're showing to everyone else.

Manuel Lemos: Right.

Arturs Sosins: When you're demonstrating it, it doesn't work.

Manuel Lemos: Exactly. Murphy's Law. Or maybe, I'm not... Oh, I remember that probably that's the limitation of my own component that it's not able to figure when the container has resized it. Well, let me try one PHP class code that I have accessed actually here.

Arturs Sosins: Yes, you are surrounding has a predefined width and that is why.

Manuel Lemos: Yeah. Can you see it now?

Arturs Sosins: Yes, yes.

Manuel Lemos: OK, so I scroll it here and you see the scrollbar. And another thing is that if you are in the middle of the code, you may wonder, 'Oh, the scroll back is at the top, let me scroll back'. So it would be good if I could use the keyboard.

So, I attached, I have to implement a sort of a trick that makes the container here gets the keyboard focus. So, when you enter the container, it gets the keyboard focus and you can immediately use the arrow keys to move the code in and out. And this way, you can see code that was not visible.

Arturs Sosins: So, is it an actual scrollbar or is it some HTML emulated?

Manuel Lemos: No. The way it works, it attaches a new page element that gets the same width of the container.

Arturs Sosins: And then you attach so it would scroll against the width.

Manuel Lemos: Yes. Then, it listens to the scroll events and when one scrollbar is updated, it updates the other as well, so they become synchronized.

Arturs Sosins: Yeah, great solution.

Manuel Lemos: Yes, I have this problem for many years because I could not figure... I tried in the past to think, what if I word wrap the code? And I tried that and it looked bad because it could not figure exactly the lines.

Arturs Sosins: So since the top scrollbar is basically a separate DIV element, you could also fix it at the top so if you're scrolling down, it would always appear on the top of the screen or something like that.

Manuel Lemos: You mean attached in another part of the window that is fixed?

Arturs Sosins: Yeah.

Manuel Lemos: Well, it could be an idea. I don't know if it would work well. I would have to try it. 

Another thing, just because you can use the keyboard, it doesn't mean that it is obvious for the user, that you need to use the keyboard.

Arturs Sosins: That's why you need a question mark.

Manuel Lemos: Exactly.

[Laughter]

Manuel Lemos: There is a use for using the QuestionMark.js library. And what I thought was also to maybe having some virtual element here on the site so when the user goes there, probably an arrow would appear so it would click and scroll the content.

Arturs Sosins: That could also work, yes.

Manuel Lemos: Yeah, well, for now, this is just the first edition of this library that I have developed. The library itself is on this page, jsclasses.org/scrollbar-to-top and the idea is precisely to address this need.

It's mostly useful when you need to show long content, content that is not only wide but is also tall, which is often the case of code but code be for other types of articles.

OK, this library was released recently. And I then wrote this article to explain how you can address this problem using the library.

Arturs Sosins: Will it participate in Innovation Award?

Manuel Lemos: No, because the employees of this company are forbidden to participate in their own contests.

[Laughter]

Arturs Sosins: Then, I will never work for you.

Manuel Lemos: Yeah, exactly. Don't. Don't do that or else you are not able to participate.

Anyway, basically, we covered this article. And one thing that I wanted to mention is that writing articles about your packages is one way to get more exposure to the packages because not only you tell your users of the packages how to use your packages in a better way, but if it is an article that is useful for users in general, not just the users of your packages, when you publish the article, there is a flag that you can use the checkbox to tell the moderator to make the article featured.

And if the moderator agrees... OK, the moderator happens to be me... that it is an article that is useful for the users in general, not just the users of that specific package, the article becomes featured and it becomes part of the main site blog and you get a lot more exposure for your packages.

Arturs Sosins: So, maybe you could elaborate on the criteria that you deem to be worthy to be published in the main blog.

Manuel Lemos: Yes. Well, practically I already mentioned it. Which is, the article has to be useful in general, not just for the users of that package.

For instance, if you are publishing an article that says, "Oh, I published a new version and these are the new features," but you don't actually teach anything about the features, that probably would not qualify.

But if you will elaborate an article that explains how to use the class and why it is useful, why those features that you implement are useful, in that case, it is also for other users because it actually tells them that they could be using that package to take advantage of its features. And if they were not using it, at least now, they've become aware of the features.

Arturs Sosins: So, basically, you could start with defining the problem and then showing how your package solves this problem.

Manuel Lemos: Yes, exactly. It generally falls in the category of tutorials. If you make a tutorial about your class you are good to get exposure.

And other than that, I'm going to show you another thing here which is the fact that since the site implemented the reputation system that awards reputation points to all users that perform relevant actions, you can go here on your Reputation page, just clicking on the yellow buttons that appears on the top and it will show you the log of actions that you did.

And in my case, since I published this article, you can see there are some actions you earn additional points for those actions. You earn 300 points for publishing a blog post about your package, not necessarily featured. And then you earn additional 500 points for publishing a package blog post that was considered to be featured.

And it shows here in your log and you can simply also check that it increased your reputation as class author and article author. So, those are two types of reputation that you can earn points.

In this case, article author, I click here and I can see all the articles that made me earn points in this type of reputation. And then, also the class author, I can see all the actions which include publishing packages and the number of the users of the packages and so on.

So, this is just yet another tip for all developers, that publishing articles, use your tutorial articles about your own packages not only get you more exposure to your package but also gets you more reputation.

Arturs Sosins: Oh, I could see actually that you only have a little less than 10,000 reputation points.

Manuel Lemos: Yeah. That's true because I'm not the top author of this site. I need to try harder.

Arturs Sosins: How many authors beat you already?

Manuel Lemos: Now, that you're asking, you can always check, because it's easy. Just go on the reputation page and you click on the ranking, you can see that I'm in 13th. My position is 13, I have 9,000 points and there are 12 authors ahead of me. You can also click on there. Oh, who's number one?

[Laughter]

Manuel Lemos: Again, from Latvia.

Arturs Sosins: Yeah.

Manuel Lemos: Let's see what he did. There... he earned quite a lot of points. Why did he earn quite a lot of points? Let's see what he did by action. So, he won the Innovation Award couple of times. That's how he earned 5,000 points. He has the Innovation Award results earned more you more 9,000 points. The users of your package earned more 5,000+ points. Publishing 45 packages... man, you published 45 packages?

[Laughter]

Arturs Sosins: You can also see my stats, also? You can see other authors?

Manuel Lemos: Yes, for all authors, this is public information, because for some users, 'Oh, you are hiding the details why you got more points.' So, for instance you go, you can check Nikos M from Greece.

Arturs Sosins: I just don't want to share the secret.

Manuel Lemos: Oh, exactly, you don't want the others to beat you.

Arturs Sosins: Sure.

Manuel Lemos: But well, I think to get to the... Look, the second place only has 33,000 points and that's... Well, this is the reputation by type, but by action you can see in this case that he published five packages. If he publishes 45 packages like yourself, he probably will beat you. And the packages are innovative, he'll even get more points.

Anyway, this is just a sort of making this more rewarding and fun, too, for all the people that participate here. I hope it is being taken that way. I don't know if you, Arturs, would like to comment what have you thought about implementing this, now that we are talking about it? Do you think it is encouraging to publish more or at least as long as you are number one?

Arturs Sosins: Yeah. I always need to keep track of it, you know.

Manuel Lemos: So, you don't get beat. Because other than that, just to comment for all authors that are not aware, once they start ranking for publishing their packages, they start getting a report by email once a week.

They can follow their positions so if somebody's catching up and passing you, you can get back and recover and go ahead. But what you were saying about your experience about this? Do you feel this is encouraging or maybe it could be better somehow?

Arturs Sosins: Well, actually, that is quite great. I just didn't know that you could look and see other authors. But well, as you said, I really have nothing to worry about for now.

Manuel Lemos: Yeah.

Arturs Sosins: So, it might not be so motivating for me, but well, it could be really motivating for other authors trying to beat me.

Manuel Lemos: Yes. Well, that is considering that your goal is to be number one. But not everybody is as competitive. They'll be perfectly happy to get recognition for being innovative and earning prizes for the Innovation Award. Well, it depends on the objectives of each one.

Arturs Sosins: Yeah.

JavaScript Innovation Award Winners of August 2013 (46:40)

Manuel Lemos: And anyway, talking about the Innovation Award. Now, it's time to move on to one final section on which we comment about the Innovation Award winners.

This time, we'll talk about all the winners of August that were voted in September and then in October, the results came out. So, since we already passed that, we are now able to comment about them.

Arturs, which one would you like to comment?

Arturs Sosins: OK, let me comment on JS Measure. Because I actually just made it to work. It has a dependency library. Also, they were belong to the JS Classes and I needed some time to get it working and I can share the screen. Let me just zoom it a little more. And as you can see, this...

Manuel Lemos: Did you try the question mark on the page?

Arturs Sosins: No.

Manuel Lemos: It shows the shortcuts already on the page.

Arturs Sosins: It shows the shortcut for Google Hangout. Yeah, Google Hangout actually works but this page don't. But that is just a demo.

So, all you need to do to try to measure some elements, all you have to do is to press Control M, which actually not quite handy because I usually use left Control when I can't reach the letters. So let me try the right Control. So yeah, so then the cursor changes and you can start measuring.

Basically, what it shows, it shows the position we just started to measure previously and width and height of the element.

How does it respond to scrolling? OK. So, basically, yeah it's scroll-independent.

So, yeah, it actually could be a great maybe designing to debugging to see how to place all the HTML elements inside it as well. Seeing how it's implemented is basically an overlay div element which follows the mouse events, the drag-and-drop events, and then draws it, measure, show the measurements available in the agent in the bottom right corner.

Manuel Lemos: Right. Well, it sounds interesting, I'm just not sure what would be the use case for this. It's innovative certainly, that's why it was nominated. Maybe, the author... in this case, it was Mark Rolich from Armenia, right... maybe he has an application on which that is useful.

Arturs Sosins: Well, let's say you want to upload image and the uploader doesn't have a resizer on its specifications. It is possible to save a bookmark and then you go to your website that you need, opens the bookmark, it injects the JavaScript, then you can measure the dimensions of image and you can upload the new one or change it or something like that.

Manuel Lemos: OK, there is probably an use case because I'm sure all the work that it took to develop this process is not just for the fun, I think. That's me assuming things.

Anyway, on my part, I would also like to comment on a couple of other classes that were nominated.

And the first one is this one, JS Date Range Picker which is sort of an advanced version of date pickers, except this one lets you define a range.

So, you actually two dates to pick and I supposed there's some validation to make sure that the end date does not exceed, I mean, is not before the start date. And I'm sure this is very useful in this case.

It was an object developed by Vallo Reima from Estonia. Do you think this is a right way to pronounce his name. It's your neighbor, right?

Arturs Sosins: Well, yeah, though the language is completely different. But yes, so it could be Vallo Reima. That could be something like that.

Manuel Lemos: So I was not that bad.

Arturs Sosins: Yeah.

Manuel Lemos: It's always a drama, how to pronounce the names of the authors correctly without them being offended because your pronunciation sucks.

Arturs Sosins: You should implement usernames.

Manuel Lemos: Yeah, just to let them choose alias in English and I pronounce the names. Well, it doesn't matter as people can pick the names that they want. Not all authors use their real names, but it's always the challenge every month trying to pronounce the names correctly.

So, moving on, there's one other package to comment about this month. This one, it's a bit unusual, extendm.js. It's basically to extend the number object with a few more functions.

This one was developed by Martin Baker from the UK. And he has published a lot of packages, some of them are innovative. And hopefully, he continues to publish some more innovative packages.

So, basically what this object does, it's quite simple. It extends the Number object with a few more functions to check if the number, for instance, is odd or even, if the number is a floating point or if it is an integer. And eventually, also initialize it to some random number between some branch and some other functions.

Well, I think most of these functions are available separately but in this case, it provide as an extension rather than Number object. So, you can create your own objects with those functions and they will be available from start.

Arturs Sosins: Yes, so as I see it basically provides lots of math library methods to the Number object itself for easier usage. For example, it simplifies usage of random because in JavaScript, it's always a kind of pain to generate random number between... You have to look up how you can do that, really.

Manuel Lemos: Right. And in this case, probably the most useful aspect is to teach how to extend an existing routine class objects in JavaScript and use that extension to add a few more functions and make it more useful somehow.

Conclusion (53:48)

Manuel Lemos: Well, anyway, we practically ended this Hangout. We covered several interesting library. This month was mostly about interesting libraries. Most of them are very interesting.

And with this, we have ended the podcast. I would like to thank you, Arturs, for coming. Hopefully, we can have you back in the future. And now, on my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]