Better Asynchronous JavaScript with Generators and Yield - Lately in JavaScript podcast episode 33 - 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. This is Episode 33. And, as always, I have here Michael Kimsal... the one and only.

Hello, Michael. How are you doing?

Michael Kimsal: That's fine. It should have been 22, but that maybe a bit rude. I should have done that for 22.

[Laughter]

OK, OK, never mind.

Michael Kimsal: Good morning.

Manuel Lemos: Well, are you feeling hot over there?

Michael Kimsal: It is rather hot here. I've been traveling a lot the last couple of weeks. I was in Michigan briefly, a couple of weeks ago, for a weekend. And then, I was in Minnesota last Sunday, Monday, Tuesday and Wednesday for the great conference, the Ruby Conference. It was great. It was good. Actually,  I'm not sure it was great but it was definitely good.

Manuel Lemos: Well, definitely the North Hemisphere must have sucked all the heat because it's very cold here on the South. It's record time for the cold. Well, it's actually winter here, but Brazil is never cold.

Michael Kimsal: Yeah, I was just getting ready to say, it's your winter now so it shouldn't be that hot.

Manuel Lemos: Well, but it has been too cold. Well, at least for Brazil. And whoever said that there is global warming was only considering only half of the planet.

Michael Kimsal: Yes.

Firefox 23 removed the option to disable JavaScript (1:53)

Manuel Lemos: Anyway, this is JavaScript hangout. And today, we have several interesting topics. Actually, we have too many topics to talk about in the plans but we have to cut it or else we'll have even longer show than usual. But the remaining topics are still very interesting.

And we can start about one I think you, Michael, are probably more qualified to talk about because  you are a  big fan of Firefox, right?

Michael Kimsal: Well, I'm a fan. I'm not sure I'm a big fan, but I think you're referring to Mozilla Bug 873709 and that is that  Firefox Version 23 is removing the ability to disable JavaScript , a subject near and dear to many of our hearts.

Manuel Lemos: Yeah.

Michael Kimsal: Now, the discussion at the bug shows... Well, there's a lot of discussion at the bug. From what I can tell... Pardon me?

Manuel Lemos: The Bug.

Michael Kimsal: Well, it's in their bug tracker.

Manuel Lemos: Yeah.

Michael Kimsal: Now, really, what it is, they're not removing the ability to disable it all together but they are taking it away from their preferences box.

If you go to "about:config", the preference is still there. You can  configure it there, but there's no GUI, there's no option to disable it though.

That said, the stuff... Sure that I would know where to  find it  right now. I'm going to  go in. Is it Advanced? Is it Encryption? No, it's not Advanced. Is it Privacy?

Manuel Lemos: That's another complaint about  Firefox. You'll never find anything in the Preferences.

Michael Kimsal: Well, they've changed a lot. But honestly, is it Content? Why is "Enable JavaScript", why is that in the Content? Those things used to be in different areas, even though the areas had changed some.

Probably more legitimately, it could go under Security, or it could go under Privacy, or it could go under Advanced, or it could go to Applications. Content makes no sense for "Enable JavaScript" to ever been there. But it is what it is.

Manuel Lemos: Well, this reminds me that's probably a good time to make the annual rant of Firefox versus Chrome.

Michael Kimsal: Go ahead.

Manuel Lemos: Well, I usually write an article, maybe for next month. Because I have some updated stats on usage of browsers from developer that access the sites. So I could give more information.

Well, anyway, just like you have stumbled in the Preferences, you have no idea where things are, it was about time that they added something useful like they have in Chrome for finding configurations by name... which is very well achieved in Chrome. I think Firefox developers are saying, "Oh, we are not going to copy Chrome." It's a good idea, man.

Michael Kimsal: Well, it helps. And Google is a search-oriented company, so you think that their Search would be good in their settings and it seems to be adequate.

Manuel Lemos: Yeah. But, well, Mozilla invested in doing things that look awesome but I'm not sure if they are very useful. Did you notice there is a 3D view of the elements in the...

Michael Kimsal: Yeah! Oh, that's awesome.

Manuel Lemos: That's awesome, but is it useful?

Michael Kimsal: I think it's useful for some people. I not even think, I know it's useful for some people. I had people tell me that they've used it and it's been a very easy way for them to track down layering issues where they couldn't see something, they didn't think it was there. It was easier for them to rotate around and zoom in and say, "Yes, it's there, but it's hidden behind something else."

Manuel Lemos: I can understand that it's useful somehow, but why don't they implement more important things first like finding preferences by name like they have in Chrome.

Michael Kimsal: The standard response with any Open Source  project is just because one feature is implemented doesn't mean that it took the place of something else. It's very volunteer-driven.

And if somebody wanted to do, or a team of people wanted to do the 3D view thing, that doesn't mean that "Oh, they took away time from the Preferences reorganization." Because it didn't, because nobody seems to want to do it. And that's a whole different... That's a leadership issue and that's an organization issue, that's not a time-coding issue.

Manuel Lemos: No, I think it's more like, "Oh, oh, we're not going to imitate Chrome because that would mean that Chrome has better features."

Michael Kimsal: That could very well be a contributing component.

Manuel Lemos: Yeah, well, I don't know but well, if anybody from Mozilla's listening, please, please, please improve those Preference searches because it has so many options now.

And, well, if you don't want to make it just like Chrome, jus t to not give in that Chrome has great features, do something different but at least make it easier to find the options. Because the way it is now, it's really a pain.

Well, anyway, this was just to talk about the option, of things that...

Michael Kimsal: Disabling JavaScript, yeah.

Manuel Lemos: Yeah, well, I don't know I was not able to see where all it comes because I still have Firefox 22. And when I went to check it, there was no upgrade available.

I'm not really following Firefox releases. I rarely have time for everything I wanted to do. But I what I noticed, if it is not there according to the bug report, which is actually just a complaint, but if it is not there, is there a reason for that? Why did they take it from that?

Michael Kimsal: There's more discussion about that in that bug report thread. I see like it's going to reduce... It looks like there was something else that was taken actually, not just that. But that will reduce people turning it off by accidents and having a lot of the web break and get support from people saying, "Oh, nothing works on the Internet." Well,  they accidentally shut off JavaScript.

Manuel Lemos: Yeah.

Michael Kimsal: Now, that doesn't mean that the best way to handle that. Personally, having a "Press Here to Reset All of Your Preferences" something like that, reset your browser to a known state instead of having to go to "c:windows/users/something/firefox/somevirgins/.32-character random thing". Sorry, "/profile/.something."

[Laughter]

Michael Kimsal: And then, delete a bunch of files that are probably right-protected and have warnings at you. Rather than we do that, have button that just says, "Hey would you like to reset everything to known state?" I'm having trouble. Like if a page doesn't come up, "Hey, maybe it's your configuration." That will be handy.

Manuel Lemos: Well, for the developers, being able to disable JavaScript, it would be great.

Michael Kimsal: Oh, it would.

Manuel Lemos: I think there are extensions to do. That was one of the complaints about Chrome. In the past, you were not able to disable JavaScript just to test things, although they appear without JavaScript enable. And then, they allowed extensions to do that. Now, there are extensions to do that.

Michael Kimsal: There you go.

Manuel Lemos: Well, as long as there is an extensions to do that, power users and developers in general would no t be left out and can always address that issue. But still, I was not very convinced about the reasons why. Actually, I was not even clear about the real reasons even after reading the comments.

Well, anyway, if you are a developer, there are extensions to control the JavaScript support. So, it shouldn't affect your development environment.

And they said that there will be some option in developer tools window to do that, even if we'll not use an extension. But I think it's just for Firefox 24.

Using objects as values with valueof (10:48)

Manuel Lemos: Well, anyway, moving on with the next topic, something I wanted to... I need to open the right window here first... regarding "valueOf".

This is interesting because I was not even aware about this function, which just means I'm not aware of everything. And, anyway, let me screenshare it here. OK, let me increase the font.

This is an article in the SidekickJSs blog. They explained that if you have a "valueOf" function in your objects, you can use the objects in certain operations that probably are not for objects, are for integers or something else.

And this is interesting because... Michael, were you aware about this "valueOf" function?

Michael Kimsal: It seems vaguely familiar. But, what they're doing ...

Manuel Lemos: I knew the "typeof", but not "valueOf".

Michael Kimsal: Yeah. No, no, "valueOf"... what they're doing here, what they're saying is that a lot of primitives have a "valueOf", have a "valueOf" method. You can also create your own on your own objects and then you can use standard comparison and standard sorting algorithms and whatnot. Because all those, all of those assume that there's a "valueOf" on whatever is being compared. So, adding a "valueOf" to your custom objects allows your stuff to be compared. Interesting.

Manuel Lemos: Yeah.

Michael Kimsal: I don't think I would have thought of that. But that's how I'm reading it anyway.

Manuel Lemos: Yeah. I was not even aware about this "valueOf" function. It seems useful if you like to simplify your code. And sometimes, instead of using a getter to get some value from the object to use it in an operation, you can implement that function inside of the object and you will be able to use the object directly.

Also, related with this, there is a presentation here by Brendan Eich regarding ECMAScript 7 that somehow suggests that this is... This is the confusing part. Is this something new? What is new in ECMAScript 7 that is going to address the manipulation of objects? Could it be that it's not just for reading purposes. It could be also to alter the objects?

Michael Kimsal: Beyond my pay grade.

Manuel Lemos: Yes. It seems that they...

I'm not able to increase the font here. I tried to do full screen but I'm not sure if you can read it.

Michael Kimsal: Yeah, it worked when you did full screen.

Manuel Lemos: OK. Well, from what I get here, probably, it's not just to get a value but also to alter values.

This is just presentation, so I could not really figure what it's really about because of lack of context. Just reading the slides does not give me much information.

But from what I understood, it will not be just therefore getting values. It can also, for instance, add values to an object by using the addition operator and probably from any other operators.

Well, I guess this is useful. Probably, you'll make the code more cryptic.

Michael Kimsal: Well, it's harder to read for some people, might be less cryptic to other people. And maybe some of these additions,  valueof these... isn't even really an addition... but some of these techniques and some of these additions coming up will watch... I'm reading this right now... ECMAScript 7 and 8.

Some of the things that, what was I saying, each of the goals of some of the features in ECMAScript 7 and 8 are to make JavaScript a better compilation target. So some of the things that are coming may not be all that useful to day-to-day developers but if there are  things that compilers can target or people can generate code automatically in a more computationally efficient method or manner, that would be useful, too.

Manuel Lemos: Yes, because all these seem to have more data types that you can explicitly say... for instance, if you want to have a 32-bit integers, you can have them and you can also have 64-bit integers instead of the default size of an integer value and that's probably more efficient for code that needs to run  faster.

Well, anyway, this is just related with the "valueOf" operator and if, other than reading values using the "valueOf" function, you can also bind some methods in the objects that will perform certain operations. So you can have sort of... How do they call that in the Java world  or C++ world?

Michael Kimsal: Overloading.

Manuel Lemos: Overloading, exactly. I think that's good. But from these slides, I'm not sure if that's the case. Anyway, that's for ECMAScript 7 and we hardly have browsers that embraced the ECMAScript 6, so that will take time.

Testing Private JavaScript code (17:08)

Manuel Lemos: Well, moving on to the next topic. Now, talking about just briefly, a comment about an article that I find interesting about testing...

Michael Kimsal: Testing. Testing private methods.

Manuel Lemos: objects, object with private method. And what the author here claims is first, is it really useful to test private functions in any language, not just JavaScript?

Well, personally, I admit that I do not do much testing. I often do testing after the fact like to test if a bug is still there. But the claim that this article makes is that there are some use cases for testing private methods.

Michael, I think you are more familiar with testing in general. What do you think? Should we test private methods at all or make them public?

Michael Kimsal: I don't know. The guy's article says, hey, the standard responses are don't test private methods because they're just implementation details. But if you're going to do it, change them to public.

And he said, "I don't agree with these statements." But it all makes sense for every project. I've encountered numerous  situations in JavaScripts where I needed to test the function but still wanted it hidden from the public API.

Manuel Lemos: Yeah.

Michael Kimsal: I guess I'm not really sure. I guess I need to see, because I don't think he really describes real world scenario in his articles.

Manuel Lemos: Exactly.

Michael Kimsal: I can't think of times... I mean, I can think of times where I want to... Oh, I want to do this... but from a realistic standpoint, if I mark something as private, which I generally don't, if I mark something as private, the other areas of the code that use it will be the things that I test.

Manuel Lemos: Yeah.

Michael Kimsal: So, I can't imagine scenarios where I have private methods where I'm testing and all my tests run except they exercise any private methods.

I would look at that and say, I still don't have enough code coverage then. So I would write enough tests to make sure that the private stuff is exercised, however it's being used.

He obviously wants to go further and has come with some clever way to do this. The thing is, however he's doing this is not something you could do in every language. And it's kind of gets back to, OK, in his scenarios, he can do this. But the generalized rule still comes back to "You probably shouldn't be testing private methods."

Not that you shouldn't do it because you can't do it at every language, but it's not something that people do mostly because it 's not something that you can do at every language. Not that you shouldn't but you can achieve pretty much the same result.  You can still make sure that they function appropriately as helpers to your other publicly protected methods.

Manuel Lemos: Right.

Michael Kimsal: That's just a bit of a rant  there, but yeah.

Manuel Lemos: Well, personally, I wouldn't test anything that is not exposed to the outside of the object because it's one of the justifications, it's implementation details and that may change.

Although, usually, who is responsible for the tests are the same developer that developed the code. Well, anyway, maybe you want to simplify the tests and just go directly to a core function that you just want to call it just for testing purposes.

Michael Kimsal: His article here ends with, "Even though private code may be an implementation detail, merely testing the public API may not give you the peace of mind you need when making code changes to the future." Well, then write more tests.

[Laughter]

Michael Kimsal: The first comment here is pretty good, "I think the reason why people advise against testing private methods is because they're unstable and not within the scope of what a unit test is."

Maybe that's debatable.

"Unit tests are supposed to test the interfaces to an object without any concern for their implementation. If you've written proper unit tests for your public methods, they should have implicitly tested the private methods..."

 That's a better way of what I was saying before. "Because you can assume that if you move that private method code into the public method, it's going to be exactly the same."

Manuel Lemos: Yeah.

Michael Kimsal: Yeah.

Manuel Lemos: Anyway, there are two problems. One is, whether private methods should be tested or not. And the second, even if  you decide that they should be tested, it's how?

And the solution that he gives here is just to have some conditional code. Well, it's conditional because it is put inside some comments here that you will need some additional tool to strip this code if the code is going to be shipped in production.

And all these makes me very nervous because to do all this stunt, you have to have an additional tool to process your JavaScript code.

Michael Kimsal: Yeah.

Manuel Lemos: And do the famous "build". The "build" thing reminds of the complication of the Java world and when... Well, in Java necessarily, you have to compile your code into bytecodes, at least, before you ship it to production. So there is a "build" process after all.

But for languages like JavaScript and PHP and all languages that do not have to be pre-compiled at development time, all these "build" thing makes things more complicated.

Although, I understand that, for instance, you just want to minimize your code because you want to have it optimized for serving JavaScript scripts in the smallest possible size, there has to be a "build" process. But well, some people like to complicate things. And, sometimes, the gains are not really...

Michael Kimsal: We'll have to agree to disagree on that. We'll agree to disagree on that.

[Laughter]

Manuel Lemos: Oh, you're a fan of the "build".

Michael Kimsal: Not a fan.

Manuel Lemos: "I like to build."

Michael Kimsal: I'm not a fan, but they're appropriate in some cases.

Manuel Lemos: Yeah, that's what I said. When you want to minimize your code to ship.

Michael Kimsal: I don't think it's just that, but we'll talk about it some other time.

Manuel Lemos: Well, if we have a code generator tool and I used some... well, not for JavaScript, but for PHP, I have ORM code is generated, not dynamically build into programming. There is a build but that's like an initial status.

Michael Kimsal: No, but that's not really build. That's generation. So it's a separate thing. Anyhow...

Manuel Lemos: Well, I have to call "make". And there is a build. Well, anyway, this is just a solution for those that wanted to figure out to test private code and probably they will find it useful.

JavaScript grid with 1 million records (24:43)

Manuel Lemos: So moving on with the next topic, now, we're going to talk about something that sounds amazing, which is a solution for displaying table or grid or whatever you want to call it, with eventually millions of rows.

And this is interesting because it's not only it's an idea. It's not just a theory, it works in practice as you can see here. There's an article of this idea. And you should click here on the One Million Records. It really says it has one million records.

Michael Kimsal: It does.

Manuel Lemos: Did you count them?

Michael Kimsal: Yes. That's why I was late.

Manuel Lemos: Well, it shows a number. And well, I think they have a trick somewhere to...

Michael Kimsal: It's not really a trick. It was a lot smoother on my Safari as well, too. It was updating, you have  blanks in there. It was updating the window far faster than what yours is showing here.

Manuel Lemos: Yeah.

Michael Kimsal: And, effectively, they're re-rendering the rows in there only what should be shown. You call it a trick, I just call it an optimization. It's a smart one.

Manuel Lemos: But where is the information? Is it in the browser?

Michael Kimsal: Yeah.

Manuel Lemos: Is it some hidden object?

Michael Kimsal: Yeah, it's in the  browser.

Manuel Lemos: Well, it flickers a lot but it's pretty fast because probably I'm running Chrome, probably the refresh rate of Chrome is too fast for it to avoid flicker.

Well, anyway, it's an interesting technique. I did not go inside the code to figure out if it works in practice. I supposed it hides the objects. Well, it takes the information to display for this table somewhere from some data that is not displayed. So in the end, the number of DOM objects that it is showing is not so much. I don't know.  That's what I supposed.

Did you check the code somehow?

Michael Kimsal: No. No, no. I am looking in the code. Let me open this. No, no, that's right, that's right. Hold on a second.

Manuel Lemos: Well, this is not some data that is retrieved from AJAX.

Michael Kimsal: No. No. Ah, OK. No, it's a... Yeah, I'm doing this with Firefox and as I'm scrolling, it's dynamically adding rows to the table. It's not just changing what 's there. It's dynamically adding more rows and then modifying...

Manuel Lemos: And probably removing the....

Michael Kimsal: I'm not sure. I don't know. Well, yeah, it is. It is removing some, too. But they weren't removing... Yeah, some lazy initialization of stuff. But where the original data is, let me...

Manuel Lemos: Did it increase much the memory that it's using in the browser? No? I have no idea.

Michael Kimsal: I don't think I have an easy way of checking that right now, while we're on this.  Let me take a moment here and say...

Manuel Lemos: Because it was saying that if you try to load 40 or 50k of rows , it would blow up your computer memory.

Michael Kimsal: So it's putting everything into a grid object and just creating a records array in that. So when you do a million, there is a grid object that has a million records inside of it.

Manuel Lemos: Yeah.

Michael Kimsal: And then, the code is not in here. So, it's hard to say exactly where that is, but yeah.

Manuel Lemos: Well, anyway, I think there is some small print here. For instance, the size of the column is always the same. So it's probably fixed to some value. Because if you keep adding and removing rows, the layout would have to be re-done.

Michael Kimsal: Yeah.

Manuel Lemos: So part of the trick is to set the column and the width of the columns to the same value for every row to prevent redraws, relayout, reflows... whatever it is called.

Michael Kimsal: Yeah.

Manuel Lemos: I don't know if this will work well. As you may see, I'm trying to see how. It's interesting. It starts clipping the columns if you try to shrink them. Well, it's a neat trick. It's an interesting use case for you to study. If you want to learn how to deal with a large amount of data that you want to display.

Just recently, I was discussing in a webmaster's forum of Google. There was a guy that was claiming that tables would be much slower to layout than grids, but he wanted to display data that would be more suitable to be presented in tables.

Michael Kimsal: Just go with the table.

Manuel Lemos: Right. But somebody probably brainwashed and say, "All tables are sin, you cannot use tables."

Michael Kimsal: Yeah.

Manuel Lemos: Use tables when it makes sense to use tables. And it was actually even worse, they wanted to replace tables by images. Well, images are much slower and if you want them, do not adapt to the...

Michael Kimsal: They don't deal with the accessibility concerns of screen readers nor are they terribly semantic to use by themselves.

Manuel Lemos: It was a stupid idea.

Michael Kimsal: Yes.

Manuel Lemos: Anyway, the reason probably why the guy is finding tables slower, sometimes the layout of the cells depends on the contents and the contents are lazy-loaded like images or images that do not have predefined width and height.

And, probably, it forces the browser to relay out of the table cells several times. And that makes the browser slower because it has to redo the table layout many times. I think it's interesting because in this case, this technique to show a lot of rows in a table, they have worked that out very well to avoid variable width and height that can force the browser to re-layout.

Well, the effect is very neat and kudos for the author of this idea or the implementation because I think he has gone through a lot of effort to avoid the problems.

JavaScript Generators and Yield in Node.js (32:13)

Manuel Lemos: OK, anyway, moving on to the next topic which is to talk about something that coincidentally we've been talking about it more recently in the PHP world which is the use of generators and the "yield" keyword.

Well, at least, first when people started talking about generators with PHP, I really could not understand how the flow would work. But in practice, the generators are just a way to iterate over something that you probably don't know exactly when it will end. Like for instance, iterating over database query set.

And then, there is the "yield" keyword that you can use to return some value for an iteration. But here, in the case of this article which mentions about... I think this is an extension for Node.js, right?

Michael Kimsal: Yeah.

Manuel Lemos: Or is it...

Michael Kimsal: This is NVM Install 0.11.2. And it's not an extension, it's part of Node.js. It's part of its most recent release.

Manuel Lemos: OK. Oh, NVM Install, I see it here.

Michael Kimsal: Yup.

Manuel Lemos: So it's built in  now, right?

Michael Kimsal: Yes.

Manuel Lemos: So, that's great because it's one last thing to rely on whatever is the installation of Node.js that you might have. Well, anyway, the use case that they present here to use generators and the "yield" keyword is to solve the problem of how do I wait for something to happen after a period of time.

Michael Kimsal: Yeah. As it's coming, as something is happening, every time you call a particular function... or a generator, I should say... as it's generating values, it yields back a value as a return. It returns it back but it may not be done. It basically sync it back, "Hey, I've got this. Here's this value." And because of the async nature of some languages more than others, those returns could be dealt with asynchronously.

So, as things are being pulled and calculated or it may be iterating over 50 images, as each of them are being some are large, some are small, as each one is done, it yields that back. It's still going to be done sequentially but some of them may come back. As one is done, the result processing from that could be done asynchronously from the result processing of the next one, and so on.

Manuel Lemos: Yeah. Well, in practice...

Michael Kimsal: Yeah, will it show... Will it change... Yeah.

Manuel Lemos: The "yield" keyword in practice, it's just like a return except that it's not a return. In the case of this function, it..

Michael Kimsal: Yeah. Here's another way of saying it, it's returning a value but it's not returning control of the program. It's not returning execution flow or execution control. It's just returning a value, only.

Manuel Lemos: This is still a bit confusing but at least it addresses one concern of how do I address this problem of sending this problem of waiting for something that probably will take some time to happen and only then proceed and do something else.

So, in this case, the "yield" keyword  will return as... The sleep function, I think it returns a promise object or something like that. But the real return will only happen when the condition here is satisfied... and in the case of this promises, to pass to a thousand milliseconds... and only then it really returns this string.

It's still a bit confusing but I think people start studying this model and start making more sense out of it, I don't know. To think this is going to help or maybe it's too complicated for people to...

Michael Kimsal: Well, it's going to... Probably both. It is potentially a complicating factor for people to think about but the Node.js fan club has never shied away from adding asynchronous complexity to any problem, whether really needed it or not. And this is just going to be one more tool in their tool belt to let them asynchronize the world.

Manuel Lemos: Yeah. Very few things are synchronous in Node.js. That's because, that started with that concept of making everything asynchronous and eventually, more efficient.

But obviously, that's some complexity that probably some people would not like to have to deal with. There is some discussion at least in the past. I don't know if people are still discussing it... whether Node.js will be so successful that it will be more popular than PHP.

Michael Kimsal: No.

Manuel Lemos: Well, it is simpler and it has so many applications that make it popular that all this synchronicity... I don't know if that word exists... would help or make it harder to adopt Node.js.

I think those are very different worlds and they have their audiences, but in terms of popularity, I don't think it helps forcing this asynchronous stuff, makes programming more complicated. Everything the person needs to do that takes some time, like database queries, accessing files on networks, you have to deal with callbacks or promises or whatever. And all this is not very productive or even easy to understand for most people.

PhoneGap 3.0 release (38:55)

Manuel Lemos: Anyway, moving on with the next topic. Just mention briefly that a....

Michael Kimsal: [sings]

Pop-pop-pop-pop-pop-pop!

Manuel Lemos: Does that deserve music?

Michael Kimsal: I don't know.

Manuel Lemos: It's just that the announcement music for PhoneGap 3 that was just released, just a few days ago.

Michael Kimsal: Pop-pop-pop-pop-pop-pop!

Manuel Lemos: And, personally I do not use PhoneGap. Not because it's not good, just because I did not have an opportunity to use it in any project that I developed. But I think it's interesting, in general, for the JavaScript developers community because once in a while they may have to develop a mobile application and PhoneGap is a solution.

There are several interesting new things they have announced. I'm not going to go through them because since I am not a regular PhoneGap user, I probably would not be able to evaluate their importance.

I don't know if you want to comment anything about this, Michael?

Michael Kimsal: I already played my song. I will point out that PhoneGap 3 now is deliverable as a Node Package Manager package. So, you can install it via NPM and I'm presuming, based on their comments, that you will be able to download and keep it up to date... probably, far more conveniently and probably with less bandwidths than as they were saying in that page, downloading zip files for every version. So, Node to the rescue. Look at that, it's infecting everything. I mean, it's spreading everywhere.

Manuel Lemos: Yeah, and everything is asynchronous.

[Laughter]

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

Manuel Lemos: OK. Now, we are getting closer to the end of this podcast hangout. I'll just do the regular section in which you comment on the latest winners of the JavaScript Innovation Award that goes on the JS Classes site.

We have five candidates. As you may see here, all of them are from different authors, which is great. I just wish we have more but the site is still growing, so we have to be patient.

Anyway, Michael, which ones would you like to comment?

Michael Kimsal: I am trying to pull down a tab so that it's OK. So, a couple I was going to point out... I lost my Hold this. Turn left to Greenland. There we go. There.

Manuel Lemos: Yeah.

Michael Kimsal: So, two. First off is this JavaScript History PushState Generator. Let me go back. This is from Martin Barker over the UK. Good day, Martin. I know that's not really English but you could still understand it.

Object builds URLs to add history pushState. PushState has been something a lot of single page apps try to keep track of. It has not been on my radar for a while but... This is strange because I downloaded... Oh, maybe here are two things. I downloaded the code but I only got one file.

So, he has an example.js file here. It should be some example for the how to use it.  PushState, push something in, get this URL, push that, push your page in, get it.

But I brought this up to see. So you could see, it's a pretty small. That's what it is. It's just one anonymous function that gets called, that adds PushState Gen and that's a GET. All those add and GET, push URL, push and so on and so forth.

So it's a pretty tight, pretty small amount of code. Comments wouldn't have gone amiss in there, I have to say. But that's just me saying that. So, PushState Gen. Back to you, Manny.

Manuel Lemos: Yeah. Well, pushState is not exactly a new thing. What's new here is just that this object try to simplify things by combining some parameters of your current request and with some additional parameters that you want to use and generate a new URL, and addresses a regular need of when you have to use pushState on your objects.

So, this has its uses. Kudos to Martin for his contribution.

Michael Kimsal: Yes. Thank you, Martin. OK, moving on to you if you want to mention something.

Manuel Lemos: Oh, I don't know. Usually we... We can alternate this time. Well, on my behalf, a couple of comments. A few classes here but just comment one at a time.

Let me screen share it. It's here. It's always challenge. Oh, I was already screen sharing it.

OK, I'll start with the AJAX Linked Drop-down Menu Creator, which is very similar component to another one that we showed last month for generating link menus and things like that. And this time, it is a drop-down select list creator.

And it's probably better to show an example that the author has provided here. Because it's practically an application that lets you build dynamically dropdown menus, as you may see here. Every time you change to select the option, it shows some text that's shown here. You can have more levels and they all get linked.

Well, that's basically it and there is the possibility to save definitions of your menus to some text file on the server side or database. But that requires some PHP code which is also part of this package.

So, this package has two parts, one for server side and PHP and another for JavaScript. And that's why this package was nominated.

Once again, MarPlo provided an interesting component, which is basically also a...

[Whistles]

Manuel Lemos: ... a JavaScript component and a PHP component. And I think it is useful.

So, do you want to comment the next one or shall I?

Michael Kimsal: Carry on, you're doing very well. Thank you.

[Laughter]

Manuel Lemos: Well, I do not stop the screen sharing.

Next, I would like to comment about this jQuery AJAX File Upload which addresses one usual limitation of AJAX requests, at least for AJAX, XmlHTTPRequest Version 1 which would not allow you to compose a file upload request because you do not have access to the contents of the files to compose a full HTTP request. So the workaround here is to use iFrames.

I've been using a solution like this for many years. Usually, I have a server side component in PHP to take the request, AJAX request, and take the file upload.

And the trick here is to create an iframe object and redirect, change the target window of the form file upload to the iFrame. So, you do not see the result because the iFrame is very small, practically even, but it allows you to have some JavaScript code to communicate with the iFrame and see the results.

And, in this case, it is jQuery plugin that achieves that. And I think it is a good JavaScript-only solution for this problem by... In this case, it was implemented by Satyam Kumawat. I'm not sure if I'm pronouncing his name... He's from India.

Michael Kimsal: Yes, you are.

Manuel Lemos: Oh, you know how to spell it right. I forgot you are the expert on foreign languages.

Michael Kimsal: [48:14 French]

[Laughter]

Manuel Lemos: Well, anyway, moving on to the next nominee. I just want to comment about this briefly because I don't know much about this component. I mean, I know about this component because I nominated it but I'm not sure if I can explain what is its use in the real world applications. It is to test propositional logic with Kripke models.

Michael Kimsal: Wow.

Manuel Lemos: I have to go on Wikipedia to understand what is a Kripke model.

Michael Kimsal: Still doesn't help, does it?

Manuel Lemos: Well...

Michael Kimsal: No, it doesn't.

Manuel Lemos: What I could figure is that Kripke models are used to evaluate relational logic conditions. From what I can remember, when you need to relate sets of information, like when you have database queries, you need to do perform joins. So, this object somehow helps you in that. I cannot explain what it does in practice that it can be so good.

Michael Kimsal: Wow, yeah.

Manuel Lemos: I'm sorry, it's even a shame that I have nominated this on the faith that this does something innovative. I think it does but I can't hardly explain this because it depends on knowledge that I don't have on this area. I'm sorry.

But anyway, thank you for Daniel Martinez for another interesting package. He has been submitting several packages. He's from Spain. And I hope he continues to...

Michael Kimsal: Hola, Daniel.

Manuel Lemos: ...to submit a more interesting component besides this one. And, I think there's only one left for you to comment.

Michael Kimsal: Yes. I've got it right here. My window is up. How come my screen isn't the big one? Aha, look at that. Beautiful. Oh, I'm in the wrong... Hang on. I'm making the wrong...

Randall Allison. I'm sorry, Randall Allen Anderson... need to merge in two things there... in the good old US of A. Fitting that we end with this, on United States. This is a Sudoku board game but it can also take images that you upload. And, I actually got it running.

Manuel Lemos: Are you a Sudoku player, Michael?

Michael Kimsal: No. Well, occasionally, in certain areas but I am not going to go into that.

[Laughter]

Michael Kimsal: This... is kind of running. So I could put an eight there and I could put a seven. Oops, I could put a two here. Oh, can't do a two, going to do a three here. Yeah, I can do three there.  And I can do a two here. One, two, three, four, five, six, seven, eight. I guess I can put a nine there because it started there. It's telling me.

Now, the thing is that... one, two, three, four, five, six, seven, eight, nine... when I first loaded the page, these loaders are here and it's a little confusing. So, I can load up nine images. I have no idea what this images are so bear with me, they could be rude.

[Laughter]

Manuel Lemos: Surprise.

Michael Kimsal: Yeah, I don't know what are these but I was trying to get this to work with the image part. Because the idea is, it takes your images and breaks them up and then, those becomes the parts rather than one, two, three, four, five, six, seven, eight, nine. Your parts of your nine images run around. But I can't get that to work.

Manuel Lemos: I think you should upload.

Michael Kimsal: Show setting... Yeah, I don't see an upload button anywhere.

Manuel Lemos: Well, it already looks weird. Probably, the layout is a bit stretched.

Michael Kimsal: Yeah.

Manuel Lemos: There is some submit button somewhere.

Michael Kimsal: Maybe. Maybe it's hidden. Maybe he should have used the AJAX File Uploader from the earlier one.

Manuel Lemos: Yeah.

[Laughter]

Manuel Lemos: That could be a good cooperation.

Michael Kimsal: That said, not taking on you too much than normally would have been able to do. Get the pictures to work would have been nice.

Oh, I canceled it. Once loaded. OK.

Long and short is I can play it without the images. I was having a hard time getting it to play with the images. But, easy, I'm on the easy level. New puzzle, new puzzle, new puzzle. There you go. It works.

Oh, and... well, too. So, here's the and, so, here's the Picdoku.js. Not too large, what is that? It's 693 lines for JS in one file and HTML and CSS and so on. But that's the Picdoku.

There's also Sudoku puzzle generator. Lot of comments on this one. So, looks like he'd taken the Sudoku puzzle generator and then made an image slice version on top. Though I couldn't get the image stuff to work.

Manuel Lemos: Yeah. Probably there's some submit button hidden there so you could upload the pictures.

Conclusion (53:30)

Manuel Lemos: Well, anyway, this practically ends our Hangout for this month.

Michael Kimsal: Yeah, there you go.

Manuel Lemos: We covered several interesting topics. Actually, we have more to comment but it was going to get very long and maybe next month we can cover whatever....

Michael Kimsal: I think I want it in record. I haven't been getting a haircut for a while.

Manuel Lemos: Yeah, that would change the topic of the Hangout.

[Laughter]

Michael Kimsal: Yes, my goodness. Quite shaggy.

Manuel Lemos: I'm cutting my hair because it's getting already less than it used to be. I should not go much farther.

Anyway, with this, we practically ended the Hangout. I just like to thank you again,  Michael, for coming. And next month, we have more other interesting JavaScript topics to comment as always.

Michael Kimsal: OK, excellent.

Manuel Lemos: That's all for now. Bye.

[Music]