Contents
Listen or download the podcast, RSS feed
Watch the podcast video
Read the podcast transcript
Download Size: 28MB Listeners: 1600
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
- April Fools article on CSS4 is Coming: What You Need to Know
- Bing article on Search Engine Optimization Best Practices for AJAX URLs
- Chardin.js project to overlay page help instructions
- Article on Web page clipping with PhantomJS
Read the podcast transcript
Contents
Introduction (00:20)
Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast, hangout, whatever should we call it.
Hello, Michael. How are you doing?
Michael Kimsal: Can you hear me OK? One, two, three?
Manuel Lemos: Yeah.
Michael Kimsal: OK, I'm doing good. Thank you.
Manuel Lemos: I'm not sure if I listened to you right. Or are you still in Russia?
Michael Kimsal: Oh, you can tell by the background here. I'm back at home. I'm back from the USSR, back from Russia.
Manuel Lemos: How did it go?
Michael Kimsal: It went well. I met a couple of people from Hacker News. We had lunch. I had lunch with them a couple of times.
And actually, there were I think six or seven people that were looped in and they said they were going to show up or they could have. But only two made the trip. But they made the trip all the way to central Moscow to meet with me.
Manuel Lemos: That's a typical percentage of people that go. If ten say, maybe five will go.
Michael Kimsal: Yeah, yeah. So it was actually kind of fun just to talk with... Because they were completely different styles of people and I got some information on... Actually, I think, one of them was planning on moving to the US permanently... hopefully, fingers crossed.
But I kind of get their perspective on the Russian tech scene and some of the Web stuff going on and financial differences between US and Russia in terms of pay and cost of living, all that kind of stuff. It was interesting to me.
Manuel Lemos: Right. You said the Hacker News. They are not developers of Hacker News... are users, right?
Michael Kimsal: No, they were techies... developer type. I'd say that, actually, probably a little bit more entrepreneurial.
One of them has gone through a couple of startups of his own fundraising, that sort of thing, but he still codes and gets down at the low level or can. And the other was a bit more of a senior level kind of developer guy who's now transitioning or has more recently been managing teams of people.
Again, it was fun. I got to try my Russian a bit and that's how it goes.
Manuel Lemos: Yeah, you are good. Excellent, actually.
Michael Kimsal: I'm going to be drinking. Can I drink while I'm here? This is all Russian vodka. I'm just going to down it.
Manuel Lemos: Yeah.
[Laughter]
Michael Kimsal: Mmm.
Manuel Lemos: Me too, I am a great liar.
[Laughter]
Michael Kimsal: Yeah.
Manuel Lemos: Well, anyway, let's move on with the podcast.
Michael Kimsal: Move on.
April Fools plans for CSS 4 (2:57)
Manuel Lemos: This time we are going to talk about several interesting JavaScript related topics and things that have been happening in the JavaScript world.
By the way, one thing that was not planned, but I just remembered about it is that there was an April Fool's article. I think it was on Nettuts or something that talked about CSS 4 and some made-up features that they invented. It seems some people really believed it was real. I don't know if you saw that article.
Michael Kimsal: I didn't see it. I have to admit, the last couple of years, I basically stay off the Internet on April 1st. And I still get on and do email and work, but I stay away from a lot of the news outlet sites because they're just full of... I'm sure it's fun to some people, funny. But for me, it's been going on too long, so I dropped out.
Manuel Lemos: It's just amazing that some people still fall for that because I think the articles says things like they're being resurrecting the blink style and the marquee, and the CSS now could embed some JavaScript on the style definition to define behaviors of elements. Well, actually, some of those claims could be believable.
Michael Kimsal: Yeah.
Manuel Lemos: And then, I saw somebody, four days after that, making a video. It was a guy from Brazil. Man, he believed that! You are not talking in April 1st, you are talking in April 4th." It's different there, it's not longer the April Fool's.
Michael Kimsal: Now, if they had said, if they had suggested that we could embed ActiveX controls into CSS files, that would have been a big tip-off. But just saying JavaScript, it almost sounds, if not believable, it sounds like something people would want.
And if any of you out there are listening and you actually want to embed ActiveX controls in your CSS just because they made that up, you're sick.
[Laughter]
Michael Kimsal: You are sick in the head. You have problems upstairs. You have mental problems if you desire that.
Manuel Lemos: Yeah.
Michael Kimsal: So on that bombshell, now that I have alienated many of my loyal watchers...
Manuel Lemos: Former fans...
Michael Kimsal: Yeah, there you go. That was my Sarah Palin here.
[Laughter]
Michael Kimsal: A-ha-ha. That so soon. I don't know if that's too soon or not, but OK. Carrying on to this regular scheduled stuff.
Manuel Lemos: Usually, I'm not commenting anything useful. At least, it's a lot of fun.
Michael Kimsal: To somebody.
Using HTML5 history pushState for AJAX applications crawlable by search engines (5:48)
Manuel Lemos: OK, now to the actual topics, I would like to start talking about... There has been news about the search engines now supporting the HTML 5 pushState for crawling AJAX pages.
And for those that are not familiar with pushState, I think you can call it a function of the history object that nowadays browsers have that allows you to sort of add an URL to the history of the browser, to say "Currently, this state is this URL."
And there is an article here. Let me try to increase the front. This one is in Search Engine Land because this is a method that interests people that are working on SEO related matters.
They commented about here precisely because Google starts supporting HTML push data some time ago. And now, it was the turn of Bing.
I was even trying to show the Bing article here, but for some reason, since I'm based in Brazil, Bing redirects me to a Brazilian site for which they are using a license to some software that they are not allowed. So I had to use this proxy and never heard of it before. I hope it does not kill me.
Michael Kimsal: How many is that in Brazilian? Anyway, never mind. Carry on.
[Laughter]
Ah, you already told me about that joke.
Michael Kimsal: I know, it gets funnier every time.
[Laughter]
Yeah. Well, anyway, there is not much to talk about this except for the fact that it seems to suggest that now search engines are able to execute the JavaScript that may be inside of pages and they interpret the pushState calls. And somehow, be able to figure the URLs, the intermediate URLs, used by AJAX pages.
So they suggest it's no longer need to use that #! convention that Google introduced sometime ago, some years ago I think.
And they have even here a video from Matt Cutts. He's the Web spam leader of Google. For some reason, he's always smiling. I don't know. He's probably having a lots of fun with the changes that Google makes in the search engine algorithms that keep hurting the traffic that search engines sends to Web sites. So he seems to always be happy. "We introduced another change, you are losing traffic again."
Well, all right. Well, never mind, that's another topic.
Michael Kimsal: He could just be a happy guy. He could just be a happy guy.
Manuel Lemos: I don't know, there is that thing that he keeps switching shirts between different videos of Google. It kind of records tens of videos a day and he has a pile of shirts to...
Michael Kimsal: Well, I'd be happy if I had... If I had a lot shirts, I'd be happy, too. So I'd be that right there. Occam's razor, let's that shave this one down. That's the easiest one. He has a lots of shirts, therefore, he's happy.
Manuel Lemos: And this one shirt has, "We love Webmasters." Yeah, right. The last two years, Google has been changing a lot their algorithm that it hurt a lot of the web sites, many of them probably not doing anything wrong that they knew. But Google feels he is always doing the right thing. Well, never mind, that is an off-topic comment.
Anyway, he's talking about this. We don't know, we're not going to actually show the video but just comment briefly that he's presenting a question from a guy named Paul Irish from Mountain View...
Michael Kimsal: C.A - CA.
Manuel Lemos: Yeah. Just pretended that Paul Irish is not a well known JavaScript personality that works for Google now. Sometimes, they answer questions precisely from their employees. Google is awesome.
Anyway, the question here is should you move on and use pushState to update URLs in the page on which you are using AJAX in the base navigation? Or shall we continue to use the hashbang convention? Well, basically, they just say that we should continue to use whatever works better for us because they'll keep supporting both approaches.
I'm just not sure if that means they'll crawl the JavaScript and execute it to figure because you can call pushState in a page with Javascript in many ways. So it could be a deeply nested condition that can be executing that code.
So, I suppose they are saying, "Oh, no, we can crawl everything and execute every JavaScript, every condition, follow every possible step that the user can do." So I don't know, do you have any clue of what that would be?
Michael Kimsal: I don't and I'll say I wasn't thinking they were necessarily executing the JavaScript to look for those sorts of things.
I was looking at it, thinking at it more that the crawling of things, pushState or hashbang URLs was still primarily something just scanning the <a> tags or scanning links of some sort.
Though, I'm aware that there are some claims that at least Google will do some execution of JavaScript in the browser... or not in the browser... but it will execute JavaScript that's in a page. I don't know to what extent it does that or if how they're doing, just sort of crawling stuff.
Manuel Lemos: Yeah.
Michael Kimsal: I would think not. And also, at some point, you can't actually crawl down, you can't execute every possible permutation of the code.
Manuel Lemos: Right. Exactly, that's what I was thinking. But, I'm sure they can crawl JavaScript, at least those simple fix statements like document.write and then, process the resulting HTML. But, I don't know if they can do more complex crawling. So, this makes me wonder. Probably just that you mentioned, you probably have a page that works without JavaScript and it will just crawl the links.
Michael Kimsal: Yeah.
Manuel Lemos: Even if it's not what the user will follow when JavaScript will be disabled.
Overlay page help instructions with Chardin.js (12:58)
Manuel Lemos: Well, anyway, that's just one topic that is a bit intriguing. And now, moving on to another topic. I would like to mention something that is similar to another that we were talking about in the past show, this library, Chardin.
Michael Kimsal: Chardin.
Manuel Lemos: Chardin, Chardon. What would be the right one?
Michael Kimsal: Chardon. I don't know, I would say Chardon but it's probably Chardin.
Manuel Lemos: Chardon, never mind. It's for... We're not even French.
Michael Kimsal: I don't know.
Manuel Lemos: Why are we guessing it is French?
Michael Kimsal: C. Hardin.
Manuel Lemos: Well, it looks French. Maybe, it's French. Well, this is a bit different from the... I forgot the name, but it was interesting, the library that would follow steps of sort of tutorials about...
Michael Kimsal: Yeah, that was a sort of guided tutorial - step 1, step 2, step 3, step 4. And this is just here's the information or here's annotations.
Manuel Lemos: Everything.
Michael Kimsal: No, they're calling it overlay instructions. But yeah, you could do multiple annotations, rather than instructions. I mean, even these, they are not instructions. They're just an awesome 18th century painter. This button, yeah.
Manuel Lemos: Yeah, just some additional information.
Wait, I did not want to go to GitHub, not yet. We'll see it in action, that's what appears.
Michael Kimsal: I know.
Manuel Lemos: So it's even simpler than the other one. Well, anyway, it is simple but has nice effect of showing overlaying instructions.
Michael Kimsal: Yeah.
Manuel Lemos: It's not multi-step. I enjoyed more the other one approach, which is a multi-step presentation.
Michael Kimsal: Well, they have their purposes. One of the interesting things about the...I've introduced it before and the name is escaping me too, but the idea of the multi-steps tutorial sort of thing... and I don't think they did it in a library, but I would imagine it wouldn't be too hard to hack it up... would be to record either through Google Analytics or some other recording thing as to how many steps somebody got through.
And when you do step by step by step, you could capture. Everybody went to step 3 and then stopped. Everybody had to go through all five steps. And when you do an overlay like Chardin is doing, you won't necessarily know what information is more useful or less useful to people.
I mean, just capturing different stuff, if you know that you have everything just on one page or the majority of the stuff will fit on one screen, this approach looks very, very useful.
Manuel Lemos: Yeah, I agree. I think both libraries have their purposes. Well, at least this one, as long as you don't have too many topics, too many things to show in the screen, it will be good to show it all at once. As if it has much more steps, it'll probably be confusing for the user, I think.
Web page clipping with PhantomJS (15:56)
Manuel Lemos: Well, anyway, moving on to the next topic. Well, I'm not sure. Have we mentioned PhantomJS before?
Michael Kimsal: We have. I'm pretty sure we've talked about it at some point or mentioned it.
Manuel Lemos: Yeah, I think we mentioned very briefly. Or maybe it was some article in your magazine, JsMag, that you mentioned.
Michael Kimsal: Probably. PhantomJS... there, I've just mentioned it.
Manuel Lemos: Well, OK. That was what's missing.
Let me try to increase the font here.
Basically, this is just an article that tells you how to extract some clippings, some sections of page rendered with PhantomJS.
For those not familiar with PhantomJS, I have not tried it, but from what I understood it is a headless browser. Meaning, that is browser that does not show anything to the user, just software that works like a browser, fetches pages like a browser and renders them like a browser except that you cannot see them, but you can make it generate pictures, extract pictures rendered in pages.
And in this article, they are showing you can use it to just extract some clip from a certain area of the page. I'm not sure if you can specifically point it to a given page element. Because this example here just shows how to capture a given rectangle.
Michael Kimsal: Yeah, points pixels, something, yeah.
Manuel Lemos: Yeah. Well, maybe it's possible to specify a page element and capture it. It's probably more useful than trying to figure the exact number of pixels which may depend on factor like font sizes and...
Michael Kimsal: It does mention in this whole second or third paragraph there, "common use of clipping rectangle is when you need to track the position and size of a particular element by getBoundingClientRect".
And they're mentioning Casper as a second project or a separate project. But I would imagine from this, you could say "Find this element, find <div id>, whatever, get it bounding information and then, you can clip around that.
The clipping probably is always just based on... You would always just clip a rectangle but you could get the bounding coordinates from a separate method call. That's what it looks like.
Manuel Lemos: So it's a problem with the solution, probably not directly, but using that function.
Michael Kimsal: Yeah.
Manuel Lemos: And personally, I think PhantomJS, despite that I have not tried it personally, I think it's an awesome project because it solves difficult matter.
Usually, if you wanted to capture pages, web pages make thumbnails of pages, you would have to run a browser somehow on the backend and try to capture the screen of the browser.
And with PhantomJS, you do not need anything like that you just need Node.js. I think it's the main environment for which this Phantom headless browser is targeted.
Michael, have you tried to use it yourself or you just know it from theory?
Michael Kimsal: Yeah. Not specifically Phantom. I've... We'll... No, I've used Node. I'm trying to think. It's not Phantom, it was... Yeah, it was Phantom and Vows. No, no, no, it was Zombie and Vows as an agent and a testing tool with Node. Not Phantom, though it reminds me... This whole idea of clipping, I'm reminded back in 1998, wow.
I did a little bit of work with a company called... Well, I was subcontracted by somebody else, but it was at that time, printing.com. And they were a printshop. They've managed to get printing.com very early on in the mid-90's. They were custom sending files and they would print them and do letterheads and stuff.
But they had this postcard service where you would give them a URL and they would take a snapshot of that and make it into a postcard for you.
And they were investigating doing it automatically, but the only thing that was even remotely possible at that time was scripting, doing this with the Windows NT server and having it pull up IE and automatically capturing part of IE that rendering and then, grab that as a GIF or JPEG or something and sending it over.
That was a really difficult thing to do, relatively speaking. And some people could do it with their eyes closed, but it was very specialized thing to do. And here we are, 12 years later or more, we got things like Node and Phantom and all of the sorts of stuff that makes it cool to do.
Manuel Lemos: Yes. I think it is very interesting and I can find some use cases for that. Personally, I'm not comfortable with using those Web services that do clips.
Michael Kimsal: Thumbnailing?
Manuel Lemos: Yeah. And well, one thing that it's probably different I know, since Phantom is a JavaScript library is being able to capture certain screens that the users want to report some bug.
But that's something that will run on the browser side, not the server side. Since Phantom is able to render pages, I wonder if there could be a solution that this could be used together, probably capturing the current page DOM state, send it to the server and they do render a preview.
Because I think Google has a problem report tool that does something similar.
Michael Kimsal: Hmm-mm.
Manuel Lemos: The use case I'm seeing for that is when some user "Oh, you're site is totally borked."
Michael Kimsal: Yeah.
Manuel Lemos: "Let me show you something. Oh, I cannot capture a screen."
Michael Kimsal: It seems, I can't remember if we've talked about this or something many months ago but I think I've seen some tracking or some services where you can embed code into your pages that will do that for issue reporting.
Manuel Lemos: Yeah, I think there are some libraries that do some of that. And even if it is a combination of some browser side code and PhantomJS to capture DOM elements, it would probably be great.
I'm not sure if it would generate an accurate picture of the browser because sometimes browsers behave and render things very differently from what they are supposed...
Michael Kimsal: Well, that's always going to be the issue, is it IE7, IE8, IE9, IE 10, IE 6, IE 5, Firefox whatever? Unless you can take a screenshot directly from somebody's browser, you won't always be able to tell what they were seeing.
Manuel Lemos: Yeah, but that's even more difficult problem, if it has a solution at all. I don't know. I don't know. Is there anything that it could do with Canvas tool?
Michael Kimsal: That may have been the tool that I was thinking of that would do that. But I think that's still going to limit use to certain browsers. You know, somebody using something really old, you'll never going to see it. Just because there were never was that functionality.
Manuel Lemos: Oh, you cannot debug the use cases of those NetScape 4 and...
Michael Kimsal: Well, I mean, even like IE 7, it's not going to give you the same ability to capture Canvas stuff, for example, that you could with Chrome that came out yesterday or IE 10.
Manuel Lemos: Yeah, those 0.1% that it use...
Michael Kimsal: But those tend to be the people that...
Manuel Lemos: Complain.
Michael Kimsal: Yeah, they complain. They may be somebody sitting in the government office and they're the ones that sign the check. Or they're the ones that bend the ear of that somebody that signs the check.
Manuel Lemos: Oh, those are important, those that sign the checks are important.
Michael Kimsal: Exactly, exactly.
Manuel Lemos: Very, very important.
Michael Kimsal: I had worked years ago, had built something and I built it with the client and they tested it. It was a tool for a couple of hundred of their salespeople to use. And most of the people use it without problems. We had a couple of browser incompatibilities.
And then the day before the launch, we made a couple of meetings after launch, we got this panic phone call, "We got to stop it, got to rebuild the whole thing, because it doesn't work for the owner of the company." Well, hey, the owner of the company is not buying stuff from himself so does it really matter, first off?
Manuel Lemos: Right.
Michael Kimsal: But he was sitting at home with his WebTV and it didn't work on WebTV. I'm dating myself, it was 1998. Like, OK, it doesn't work with WebTV. Does that mean we have to shut it down and rebuild the whole thing? We ended up not doing that. But that was just ridiculous. What doesn't work for him? He's not buying from himself? It doesn't matter.
Manuel Lemos: Right. Well, we'll never know if the neighbor also has a WebTV.
Michael Kimsal: Well, really, and we had the luxury to some extent, as I was saying, it was an internal tool. It was extranet thing but it was designed for their few hundred sales people. Many of them are using laptops. It's not WebTV. They're portable, they were using it out on the field with their PCMCIA plug-in modems.
Manuel Lemos: All right, that was a glimpse in the past.
[Laughter]
Anyhow.
How to Create JavaScript Functions with Variable Arguments (25:52)
Manuel Lemos: Well, OK, moving on with the podcast. Now, talking about something that, well, I learned. I also learn. I don't know everything, so I also learn.
Michael Kimsal: I don't either. You know everything about Brazil, though.
Manuel Lemos: Yeah, everything. Everything but the girl.
Michael Kimsal: Totally tempting.
Manuel Lemos: Well, anyway, this is an article that talks about variables of function arguments. I'm familiar with variable functioning arguments in PHP, in C. I'm not sure how many other languages support several number of arguments.
But I was not aware that it is also supported in JavaScript. No that it would not make sense, it's that I was not aware. I did not come across a use case that I could use it. But this article here by Jim Hoskins tells how you can do it in JavaScript. So I learned that there is a... can we call it fake variable... named arguments inside each function that is another variable arguments. Right?
Michael Kimsal: And I don't know, not sure why you call it fake so much but it's something that's simply provided by the language. But this is very similar to func_get_args in PHP, where you'd say "Figure out how many arguments were passed in. If I got two, then do this. If I got three, then do something else." So not quite method overloading but giving you a way to fake that if you need to.
Michael Kimsal: Right. So, well, I have never come across a use case for variable function in arguments. Have you ever passed...
Michael Kimsal: Well, again, for me, not directly. I probably have used it at some point but it is something that... When I'm teaching for Zend... I dropped some names here. I haven't done this in awhile but I have some classes scheduled with zend.com to do some PHP training over the next several months. So if any of you are interested in taking a PHP class, go to Zend.,
Manuel Lemos: Yeah, that was a shameless plug.
Michael Kimsal: Shameless... but I have no shame. No, but seriously, one of the classes that I have taught is one that is... I'll figure out what they call it... but it's aimed that already have some programming experience, few years in Java, few years in C# or something and I get this question almost every class, "How do I do method overloading?"
And I have to say, this is how you do it. You don't really do method overloading, but you can have sort of a generic method that you call. And if you pass, two parameters, two parameters, three parameters, four parameters, you can then say essentially what this article is doing.
If there are two arguments, then internally call this other, maybe call this private method. If there are three arguments, call this other one.
And I've had some students that... and I don't know if they've done it forever... but they like to think about one method name with multiple parameters performing different behavior. So it may be a transition step for them to do that. If that's how they want to think, let them think that way.
Manuel Lemos: Well, I've seen... But it's still in the PHP world, not in the JavaScript world. I have seen not only that case that people check the number of the arguments but also the types. If the types are different, they do different things and you can also call it function overloading.
It will do different things depending on the parameters that come. But for JavaScript, I've never come across any application that I could use it but it doesn't mean that it's useless. Well, if we have a need to use it, well, if we did not know like myself that it is possible, now you know.
Michael Kimsal: Yeah. Well, the example that he's giving here is different than... And I was looking at something else related. The example he's giving here is just you're passing in an array of ... his example is for function longestWord. So whether you're passing one word or five words or ten words, it's going to iterate through them and give you the longest word, which you can begin to do with func_get_args in PHP and just treat it as an array and iterate over it.
But this use case is not really the same as what we're talking about with method overloading or faking overloading. But yeah.
Manuel Lemos: I'll probably would pass an array with the parameters because...
Michael Kimsal: Because you're just going to iterate over an array. Yes, you can just do that.
Manuel Lemos: Yeah. In the end, it will be the same, except that I would not pass a variable with a number of arguments. But, OK, I got the point.
Detecting the use of Global variables with Debug.js (30:39)
Manuel Lemos: Anyway, moving now, to another interesting article here about finding, detecting the use of global variables in your JavaScript code, which may be a symptom that you may have some bug in the declaration of some variables, because you forgot to declare it as var. It start using the global stage.
Well, I don't know, they call it global, but in reality, there is not really global space in JavaScript, it's more like that root object. In the browsers, I think it's window, right?
Michael Kimsal: Yeah, I think.
Manuel Lemos: That's what they call globals. If you forget the var statement to declare the variable as local, it will become automatically global. And with this, Debug.js library, it can detect variables that appeared in the global namespace. I'm not even sure if namespace is the correct word.
Anyway, I think it is useful because it can detect signs of bugs. Because if something was not meant to be global and it is appearing to be global, you probably have bugs and it may cause unpredictable results, by the fact that if different parts of your program start messing with the same variables in the global namespace, that may be changing the values and changing the behavior of what you expect.
I think it useful. Michael, have you ever come across situation that would declare some variable as global inadvertently?
Michael Kimsal: Not in JavaScript. Well, I've done it, not inadvertently. I've just done it. I could be wrong. But even now, doing quick little, just doing a couple of lines or something, yeah, I've done it. But usually, the projects I'm working on, the JavaScript is small enough and contained enough that I've not run into issues with that.
But going with the general idea of global variables are bad, I've certainly ran into that issue in PHP and other... Well, PHP primarily, Perl, a little bit, too. That was a long time ago. But I've run into that issue being a problem and people accidentally doing stuff and sharing code and overwhelming things. Just not specifically in JavaScript, but I can still see how it would be a problem.
Manuel Lemos: Right. Well, globals have their uses. It's not a crime. You will not go to hell if you use globals, but if you did not meant to use a global and you forgot the var statement, you may incur in that.
Well, in PHP, it works differently. You need to explicitly declare a variable as global, otherwise it is local. So there is no risk, but it may happen, but in JavaScript, there is that chance that this library, Debug.js may be useful to help detect.
On the other hand, if you use a program like JSLint or JSHint, it probably will analyze your code and figure declarations of globals that probably did not mean to be globals.
Michael Kimsal: I was just loading up PhpStorm here to see if... I just demonstrated the inspect code function to somebody a couple of days ago in PhpStorm and I was trying to see here if explicitly if I say, "Go inspect this JavaScript" if it would find that as a problem. But this project has tens of thousands of files and it's taking too long to scan everything.
So if you have an IDE, it might show you that stuff, or if you're saying other Lint programs, things like that, they also find these sorts of things.
Manuel Lemos: Yeah.
Michael Kimsal: Or they'll show you other stuff too, maybe more importantly.
Manuel Lemos: Well, at least two months ago, I've been using JSLint even online because it's easier just to go to it, paste the code and that's it. But obviously, integrating in your preferred IDE, it will be more comfortable.
Michael Kimsal: Or part of build process or something too.
Manuel Lemos: Oh the build process.
Michael Kimsal: You have.
Manuel Lemos: You've been doing too much Java, There is no build process in PHP or JavaScript.
Michael Kimsal: What do you need it for? What do you need that for?
Manuel Lemos: Yeah. It's already built! It execute source code not compile bytecode.
Michael Kimsal: We'll call them Bolshoi in this whole thing. Yeah.
Manuel Lemos: Bolshoi
Michael Kimsal: Excuse me. Hello?
[Laughter]
Michael Kimsal: Welcome to the show, everybody. Thank you very much.
[Laughter]
Winners of the JavaScript Innovation Award of February 2013 (35:51)
Manuel Lemos: Well, now, we are approaching the end of this podcast. It's time for... What's that? It's a...
Michael Kimsal: Why, I was approaching. I was approaching the end.
Manuel Lemos: OK.
Michael Kimsal: I know that makes no sense at all, but...
Manuel Lemos: I'm so slow. I'm slow. I was not figuring that meant an approach.
Anyway, as I was saying, it's time for one of those regular section of this hangout on which we comment on the winners of the Innovation Award.
This time, we're going to talk about the winners of the JavaScript Programming Innovation Award of February. They are nominated then, and they were voted in March. In April, the results came out.
And we have here like five nominees. Well, Michael, which ones would you like to comment.
Michael Kimsal: Well, in no particular order, I'll just start at the bottom and talk about ...
Manuel Lemos: No particular order but start at the bottom...
Michael Kimsal: No, yeah, it's not a particular order. It's a random order that I chose to declare.
Manuel Lemos: OK.
Michael Kimsal: Screenshare.
[Verbal Noise]
Share all of desktop one? No, no, no, I'll share this page.
Just to zoom it a bit. Hello. This one is from Rafael Lucio dos Anjos. I hope I'm saying that even close to how it should be said.
Manuel Lemos: You're saying it in Spanish.
Michael Kimsal: Sorry. But he's from Brasil.
Manuel Lemos: Yeah.
Michael Kimsal: So I said... How would you say it?
Manuel Lemos: You know Brazil, it's not Spanish.
Michael Kimsal: How would you say it in Brazilian then?
Manuel Lemos: The whole name Rafael Lucio dos Anjos Fontes.
Michael Kimsal: Well, I only got dos Anjos on my screen. So, do you see that on my screen? That's all it showing. Whoever coded this piece of Bolshoi here just put dot, dot, dot.
Manuel Lemos: Oh... Oh, that's...
Michael Kimsal: Thank you. Thank you.
Manuel Lemos: That one developer of that site decided to cut very long names.
Michael Kimsal: Yeah.
Manuel Lemos: So they don't compromise...
Michael Kimsal: Yeah, so the fact that I didn't say his full name, partially not down to me.
Manuel Lemos: Yeah.
Michael Kimsal: Anyway, object in Animate page lement. It doesn't animate it like a Harlem Shake animation, It will just animate it some other way.
Manuel Lemos: We'll get there.
Michael Kimsal: Yeah, we'll get there. Incrementing or decrementing any numeric CSS property value till it reach the final value. And I thought we had an actual demo online. We don't have an online demo, but it's right here.
Manuel Lemos: Yeah.
Michael Kimsal: Just a very short couple of files.
Manuel Lemos: It has a link for the author. Rafael, you need to put a link to a demo online.
Michael Kimsal: Manuel, you need to provide hosting for all demos.
Manuel Lemos: Yeah.
Michael Kimsal: OK.
Manuel Lemos: Yeah. Well, for JavaScript, it's possible.
Michael Kimsal: Yeah. Well, I didn't say that out loud. I mean, I didn't...
Manuel Lemos: Already says before too, copy jsFiddle.
Michael Kimsal: I have but either way, there you go,
Manuel Lemos: Yeah. OK, yeah, but you were saying...?
Michael Kimsal: How about in random order, we'll alternate.
Manuel Lemos: Oh, me. Well, I could also start talking about...
Michael Kimsal: Then, start in the middle.
Manuel Lemos: Start by opening screen sharing if...
Michael Kimsal: You could. You could share that.
Manuel Lemos: Yes, that's always a challenge. I'm trying to increase the font here. And this is the one, again from Rafael. This is another interesting class. And this one uses Canvas for previewing image files before you upload them. So this one is an AJAX Image Uploader.
The title is a bit misleading and most of the description is probably not very explicit about the utility of this JavaScript object. But the nomination text here explains it more in detail.
For instance, if you want to upload some images and you look at the file names, you are not seeing the previews of the image, you may upload the wrong images by mistake.
And with this possibility to preview the image that is being uploaded, you can help the user to confirm whether it is the right picture to upload or not. So, I think it is very useful for many sites that have pictures to upload.
Michael Kimsal: It's a good idea, done well. It's a shame that this kind of stuff isn't built in to the browser. I despair of all modern browsers in 2013 and the limited crappy file uploading functionality that we still have.
Manuel Lemos: Let me tell you that I used Linux and at least the file selector for GNOME can show previews of the images that are being uploaded. I think it depends on the application, because I think I have seen that also in a Windows application.
Michael Kimsal: Well, when I open file thing on the Mac it gives me the file dialogue and I can choose and I can do previews of the images there if I want to.
Manuel Lemos: Right.
Michael Kimsal: But that's really not the point. File upload and browsers sucks in 2013. Still today and GNOME file dialogue stuff is... That's its own discussion.
Manuel Lemos: Yeah. I think when the application is aware that it is expecting a picture, it can preview it. But for browsers, they have no knowledge of the application is expecting pictures, so they do not do anything specific to the type of image file that is being uploaded.
Michael Kimsal: And there's obviously no way that we could markup a document or a script to tell the browser what sort of files we expect. That would be impossible. How would I as the application developer know that I want PNG file and then tell a browser that I want to only accept the PNG file? And then, it's a PNG file, so I would like to show a preview of it. How on earth could I do that? I want to know that.
Manuel Lemos: Well, I think it's possible. There is that accept ...
Michael Kimsal: I'm joking.
Manuel Lemos: Attribute. Well, I know you are joking. But browsers could pick that information from the accept attribute.
I'm not sure if it is an attribute from the input, the file input, or the form? I'm not sure. But I'm sure it allows you to specify a series of mime types that the browser could deduct, "Oh, these are all image file formats." So, not only should I filter the ones that should be accepted, but I also should review.
Michael Kimsal: Yes, anyhow, we're getting off topic. Browser uploads sucks in browsers. File upload sucks in browsers.
Manuel Lemos: That's what I would do if I developed browsers, but...
Michael Kimsal: Please, please. In the meantime, thank you very much Rafael for your Image Uploader.
Manuel Lemos: Yeah. So is it your turn or shall I?
Michael Kimsal: It's my turn and then you get two more. Two more, how about that?
Manuel Lemos: OK.
Michael Kimsal: My other one here is... Let me share my screen.
[Singing] Let me share my screen with you.
I'm going to sing a little bit while I do that. This is from MarPlo. And I think that's actually somebody's... It's an abbreviation for a name but I don't who it is. But it is somebody from Romania. So hello, MarPlo.
This is a JavaScript object which implements an interactive trivia game. And look at that, there is a demo here. So, if you see this here, we can actually go on here and click start. So we have a way of defining questions. We have a way of defining answers.
What's the yellow shafted flicker? I think it's a bird. Look at that, I'm correct. Which southern continent I can... ? I'm going to say Australia. That's correct. And so and so.
Manuel Lemos: Oh, you are a wizard.
Michael Kimsal: I am. I am. It's called prepping before the show.
Quizzes, so it tells me how many questions I have, how many answers I got right.
It's actually fairly comprehensive. I come down here and just do animals and then, start as well. So you can have an intro screen. You got multiple questions. I have to reset. I could put a countdown timer on and then, restart. And then, it has a countdown timer...
Manuel Lemos: Right. It does everything. It's a whole application inside that JavaScript object.
Michael Kimsal: Yeah. It does quite a lot. I have to say. Probably the one thing, so you could say, consecutive. You can say I want this to be in random order. And it does seem more conducive to trivia type games.
I recently had to put together an online survey system and I ended up doing most of it in KnockoutJS. And the one thing, well, two things that differentiate from this, one is we're not doing live yes or no. Because it's a survey, it's an actual yes or no. It's now right or wrong.
The one other thing is skip logic or branching. So that might be something else to look at which would broaden the use case of this a lot, would be if you answer this one right, then go on to level two or go to a harder set of questions. But for what it is, this is actually surprisingly compact and surprisingly full-featured.
Manuel Lemos: Yeah.
Michael Kimsal: So I'm not surprised it was one of the Top Five.
Manuel Lemos: Right. Well, actually, MarPlo has been a contributor of quite a good bunch of objects for different purposes, not just JavaScript but also PHP because there are some applications that you require server-side component. So I hope he continues to send more great objects, because they are well-appreciated.
Michael Kimsal: Assuming it's a he. It could be a she. Is it a she? Do we know? MarPlo?
Manuel Lemos: I'm sure he's a he. Because I sent him one elePHant, because he participated in the JavaScript Innovation Award Challenge we organized last year. And he was one of the top contributors and so he was entitled to an elePHant.
The only thing, it's my fault, I do not remember his name. It's Mauricius or Marza. I hope he can excuse me, because we, old people, once we start getting Alzheimer, that's what happens.
Now, on a more serious note, let's move on to another object. This time, it's my turn.
Michael Kimsal: Yeah.
Manuel Lemos: Actually, the remaining times, just have a couple more. This one is a JavaScript Memory Game. This time by Mark Rolich, which has been also a great regular contributor. He also sent an object that works like a game. It's that memory game, it works by remembering the positions of the pictures, images. And again, it's another object that works to complete the game.
Well, I'm not really playing this seriously. I'm just showing what happens.
Michael Kimsal: well, I think you are. I think you are and you're no good at it. But that's a good deflection. "I'm not really playing."
Manuel Lemos: Yeah. No, I was...
Michael Kimsal: Come on, you're really doing this.
Manuel Lemos: I'm just demo-ing the features. And here, you can see there are different levels. They increase in complexity. Not only that it changes the size of the puzzle, but the number of matches that you need to move on.
So as you go along and evolve in the game, you are required to match more than two pieces. And if you fail on a second piece, it restarts. But if the second piece is equal, it lets you pick a third piece, so you complete the match. And then, it's improving also on size and number of matches.
This is interesting because as a game it's also well-designed. It's not exactly original; there are similar games. And anyway, it's great that Mark Rolich from Armenia has been sending a lot of interesting objects like this, which are practically games.
This is also interesting to notice that many of the top contributors, not only this time but other times, are from Eastern Europe.
Michael, you have been recently in that region. Do you have an explanation?
Michael Kimsal: Sorry, your audio is breaking up.
Manuel Lemos: Well, I was telling that many of the latest contributions are from the authors from the Eastern Europe.
Michael Kimsal: Yeah. Yeah. I don't know why that would be. I don't know. I'm not sure I can speculate.
Manuel Lemos: Is it the water? It's the water there?
Michael Kimsal: I don't think it's... Well, I don't... "va-duh" in Russian is water. Thank you. I got to show off that word.
[Laughter]
Michael Kimsal: No, I'm not sure if there's any...
Manuel Lemos: It's the vodka.
Michael Kimsal: Yeah. Just not sure if there's any rationale for it, other than they may have made more time on their hands. That's the only that would even close to make sense.
Manuel Lemos: Probably the weather is colder, they don't go out and stay at home programming right after...
Michael Kimsal: Maybe. Well, yeah, environmentally, that could be. It may be up to you to maybe check that out and see in the winter time. When it's winter time for them, are you getting more? And in the summer time, it's going to stay light until 10 or 11 at night. Do you get fewer in the summer?
Manuel Lemos: Well, these ones have been submitted in the February. So it was probably winter. That's... OK.
Michael Kimsal: You need to track that.
Manuel Lemos: Yeah. I'm doing some business intelligence to figure what's the probability to authors to contribute more. But then, it does not apply to Rafael. He is from Brazil and Brazil was in the summer at that time.
Michael Kimsal: Sure.
Manuel Lemos: There goes that theory.
OK, now, finally, moving to the last class. We've been delaying this hangout to be able to show this object with proper attention.
This one is from Arturs Sosins. Arturs has been sending a great bunch of classes. He's also from an Eastern Europe country, Latvia. And he wanted to make it but this unfortunately was busy. I invited him to come to the podcast. Because he wanted to do something funny with this object which is to sort of making fun of some trend, of a dance some people invented, Harlem Shake.
Basically, what this object does is to start animating one element of the page for awhile and then, it is followed by the other elements that start shaking on the screen. But I was trying to see, there was a demo video here. Let's see if we can show it onscreen. And if in case you think this is ridiculous, maybe it is.
Michael Kimsal: It probably is. But go ahead.
Manuel Lemos: Well, I'm trying to play the video here. Let's see how it goes. Can you listen to the audio of the video?
Michael Kimsal: I'm trying not to.
[Laughter]
Michael Kimsal: No, I don't hear any. I don't hear any audio.
Manuel Lemos: Oh, that's a shame. Well, anyway, what matters is that there was an element here that starts animating and then the others followed.
Michael Kimsal: There you go.
Manuel Lemos: You want to see it again?
Michael Kimsal: No!
[Laughter]
Michael Kimsal: Nyet, Nein.
Manuel Lemos: Why not?
Michael Kimsal: How do you say no in Brazil?
Manuel Lemos: No.
Michael Kimsal: There you go, no.
Manuel Lemos: OK.
Michael Kimsal: Just a Portuguese. I'd like to share this in Portuguese.
Manuel Lemos: Yeah. Well, anyway, your luck is that Arturs could not make it to the podcast, or else he would make you dance. He wanted us to dance to the music of this Harlem Dance. I think you would be the leader dancer. You would start dancing and then, we would follow. But fortunately for you, you were saved by the fact that Arturs could not make it.
Michael Kimsal: Good.
Manuel Lemos: Arturs, I tried, but Michael is not amused by the...
Michael Kimsal: No.
Manuel Lemos: The fun of the music.
Latest Articles on the JSMag Magazine (53:38)
Manuel Lemos: Well, anyway, this concludes this section. We are practically reaching the end of the podcast. But not without the latest topics, articles on the JsMag magazine.
Michael Kimsal: We're actually doing this very, very beginning of May and we actually have this article out. We haven't done a full announcement but it's technically up and available.
I think we know one or two articles that were almost done but just trying to hit... One of the things we try to do is try to get out stuff always at the beginning of the month. So, in the interest of hitting our date deadline, we didn't get all the content that we wanted this time. But we have our standard.
Justin Lonas has been doing our news for the past several months. I think he's doing a pretty good job of covering a lot of different things that are going on in small little pieces... what's happening, a new library release and so on.
Chetan Khurana has a new piece on... He covers on some of the highlights on what's out in jQuery 2.0.
Jeanine Meyer has written for us several times and she has a continuing series on how to write different effects using JavaScript.
And Lars Kotthoff, I hope I'm saying that somewhat correctly. This is actually the first of a two-part series. This is mostly an introduction piece and the next month, we'll have a more in detail on D3.js which is a visualization. It says it's more of a visualization, but D3 is a very complex visualization library, which I have been wanting to get into for awhile and this maybe one more piece.
I've actually gone through some D3 tutorials in some of their documentation and some of it still just doesn't make sense to me. I maybe a little slow, but I think, in general... I've heard from many other people... it's one of the more complex libraries to wrap your head around.
Manuel Lemos: Yeah. Right.
Michael Kimsal: So if you had trouble with D3, you're not alone. I have and many other people have, too.
Manuel Lemos: Well, on a related note, there is regular contributor, Tom Schaefer from Germany, he seems to be a very big fan of D3. And he has published... I don't think it was in JS Classes, it was in PHP Classes... a wrapper. It could be used to simplify the use of D3 Library. And I take it that it can be used to interface other JavaScript libraries, right?
Michael Kimsal: Probably, I haven't got that far with it. I'm a fan in terms of what it looks like it can do. I'm not a fan of using it.
[Laughter]
Michael Kimsal: Just because I found it to be more difficult than I thought.
Manuel Lemos: You like the cake but you don't want to eat it.
Michael Kimsal: No, I like the cake and wouldn't mind eating it. I don't want to have to bake it or go buy the ingredients or buy a new stove or learn how to sort of make my own flour from wheat.
Manuel Lemos: Yeah.
Michael Kimsal: Although, I really want to understand the physics of how the eggs and the wheat and the sugar all mix together and why they intermesh to give me the cake goodness.
And actually, we shouldn't have brought it up because I am really hungry for cake now. I saw cupcakes outside. You called me earlier, I was at the grocery store, trying to just get healthy stuff. I got a lot of fruits but I should have gotten some cupcakes. I should have got some cupcakes.
Manuel Lemos: And you are in a diet, right?
Michael Kimsal: Well... No.
[Laughter]
Manuel Lemos: Yes, but no.
Michael Kimsal: I'll try to keep it brief. I have been... Actually in going to Russia, food was more expensive there and typically, the portions were a bit more smaller in most of the restaurants that I went to.
So kind of, with those two things put together, I ended up eating less when I was there. I, also, I've been running and I kept with my running while I was there, too.
So in the past several months just by eating a bit less and running more, I've certainly lost some weight. But I can't say I'm on a diet. Yesterday, I had three pieces of pizza and I had Burger King for lunch. So it's not like I'm saying "I can only eat this, and I can never eat anything else."
Manuel Lemos: Yeah.
Michael Kimsal: So I'm totally on a diet. I would like to some cupcakes. I just wouldn't have... Typically, back in my old self, I would have had four or five. So now, I'll just have one or two.
Manuel Lemos: Yeah. So you are getting sensible in terms of keeping the balance.
Michael Kimsal: Maybe.
Manuel Lemos: Well, anyway...
Michael Kimsal: There's the detail.
Manuel Lemos: Related to what you were saying, Tom Schaefer uses the D3.js to access different libraries.
Michael Kimsal: Cool. I see. I see. OK.
Manuel Lemos: I'm not sure exactly how it works. I confess I'm not familiar with it anyway. Maybe this simplify the use of D3 Library that you probably were not enjoying so much.
Conclusion (59:09)
Manuel Lemos: Well, anyway, this is the last note. I think it was a great show, we talked about many interesting topics. And on my behalf, that's all for now.
Michael Kimsal: On that bombshell, adios.
Manuel Lemos: OK.
Michael Kimsal: Das vidanya
Manuel Lemos: Bye.
Michael Kimsal: Paca.
