Login   Register  
Icontem

Better JavaScript Development Tools - Lately in JavaScript podcast episode 31 - JS Classes blog

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Blog JS Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog Better JavaScript Dev...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  
<< Previous: Crawling AJAX Web sit...>> Next: The Latest and Upcomi...

Author: Manuel Lemos

Posted on:

Categories: Lately in JavaScript podcast, JavaScript APIs

JavaScript development tools have been improving a lot and some are already very mature.

JSHint 2 was just released. Tern allows JavaScript code static analysis to anticipate the detection of potential bugs. ExplainJS can show JavaScript code side by side with explanations extracted from comments.

These are some of the topics discussed by Manuel Lemos and Michael Kimsal on episode 31 of the Lately in JavaScript podcast.

They also talked about how Mozilla can run asm.js JavaScript with near native performance, using Gif.js to generated animated GIF images in the browser, and capturing camera pictures using regular form file inputs.

Listen to the podcast, or watch the hangout video, or read the transcript to learn more about these interesting JavaScript topics.





Contents

Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript


Click on the Play button to listen now.


Download Size: 44MB Listeners: 1851

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

View Podcast in iTunes

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

Read the podcast transcript

Contents

Introduction (00:20)

How to check for undefined values properly? (1:54)

JavaScript Code Analysis using Tern (8:20)

JSHint 2.0 Released (18:44)

Building GIF Animations on the browser with gif.js (22:37)

Capturing Camera Pictures without PhoneGap (26:30)

Mozilla can produce near-native performance on the Web (32:07)

JavaScript Innovation Award Winners of March 2013 (34:20)

The latest JSMag magazine issue articles (45:11)

Conclusion (46:43)

Introduction (00:20)

[Music]

Manuel Lemos: Hello and welcome to the Lately In JavaScript podcast, hangout, whatever you want to call it. This is Episode 31. And as always, I have here the one and only, Michael Kimsal. 

Hello, Michael. 

Michael Kimsal: Good morning. I am too legit to quit today. 

Manuel Lemos: Not just today, as always. 

Michael Kimsal: All the time. All the time, yes. OK, I'll push this back so my head's not so big in the... Hello, good morning. 

Manuel Lemos: Yeah, you have a big head because you think a lot. 

Michael Kimsal: Thank you. 

Manuel Lemos: [Laughter]

OK, as always, I have lots of interesting JavaScript topics to talk about... things that have been happening lately.

We are recording it a bit late beginning of the month because I was not able to record near the end of the month. I was at an event and so, I had to postpone. So we have even more topics to talk about as before. So let's move on... 

Michael Kimsal: Rock on. There you go. 

Manuel Lemos: ... and start with a topic here.

Let me start screensharing because it's better if I'm able to reach that window. For some reason, it is not appearing. OK, there it is. 

Michael Kimsal: Ooh, there it is.

How to check for undefined values properly? (1:54)

Manuel Lemos: OK. Well, basically, this is an article that talks about something that I always struggle to figure what would be the ideal way to do it properly in JavaScript, which is to check if a variable is not initialized or has some undefined value.

I remember when I started JS Classes site, I published an article telling people how they could write classes in a way that despite they're or more less  similar to other languages. In the example, I have some mentions of the classes and objects, name spaces, whatever would be the correct name to call them in JavaScript.

And there was a comment by a user of the site who just bringing to the attention that the undefined value or constant, or whatever is the correct name to call that identifier, would not be correct to use, to compare, to check if it is a variable or is defined or not because you could always redefine, then define it somehow or change the behavior that would intended by comparing with the undefined value. 

One thing that this article brings up is that once ECMAscript 5 made it undefined, a property of the global object and that it  could not be changed unlike previous versions. 

Michael, when you need to determine if a variable is not defined, what is your preferred, what is your common way to do it?

Michael Kimsal: I think I have typically dealt, just look for the string "undefined"... probably something I copied and pasted from the Google Search probably n 2006 or maybe even earlier. And it's always been an odd thing, odd way to deal with this.

Now, maybe it was ... No, I don't think it was  typeof. I'm looking here at the site and saying (typeof(x) === "undefined"). And I think I was doing = = "undefined".

Manuel Lemos: Yeah. Well, I dropped here. I lost  the part to what you said in the beginning. 

Well, anyway, this article, I'm trying to restart the screensharing here. 

Michael Kimsal: Well, it's always been a strange problem for me and probably for other people, too, because there are different ways to deal with this. And the fact that you could change the behavior of checking for undefined in the earlier version was even stranger. 

Manuel Lemos: Yeah. 

Michael Kimsal: So, yeah. 

Manuel Lemos: Well, nowadays I still do that. I compare to undefined because of... I don't know if there are still many browsers that use older versions of JavaScript. 

Michael Kimsal: IE 5, IE 6, probably. 

Manuel Lemos: All those three people that use those programs.

Michael Kimsal: Yeah.

Manuel Lemos: Other than that, I don't know if there would be... What could be the risk of somebody changing the value of undefined and somehow change the behavior of your code. 

Michael Kimsal: Well, if that's what you were checking for. If it's undefined, then establish an initial value for it.  If you change the undefined behavior that didn't return what should be expected, then you'd be resetting values. This is one example. It's just odd. It's almost like being able to change false and true somehow. 

Manuel Lemos: Yeah. 

Michael Kimsal: I do say, I haven't thought about this, but I like the (===). I like X technique too here in section 1... (x === void 0). I like that, because void ignores the operand and always returns undefined. It means void 0 will always evaluate undefined. I like that. That's probably the best approach. 

Manuel Lemos: And I've never seen this one. Well, I've never seen this void 0. What does that mean? Is that converts...?

Michael Kimsal: Well, it just says right there that void will evaluate the operand or it takes an operand. Whatever it is doing to it, it ignores whatever result and always returns undefined. That must be what void does. 

Manuel Lemos: Oh, I see. So whatever is then undefined, the symbol defines or not, this always evaluates to the real undefined value. 

Michael Kimsal: Yeah.

Manuel Lemos: I see. Well, the article recommends that you use the === undefined, it's what I've been using.  Previously, I use to do the typeof variable in compared to the undefined string. But I don't remember why, but I think I used one of those JSHint, JSLint and for some reason, I was persuaded to change. But I really do not recall what was the reasoning for that.

Michael Kimsal: Some people did it.

Manuel Lemos: Well, anyway, the recommendation of this article is to use that. Well, if you are wondering why, better take a good read of this article. And so, we can then figure what is best to use on our scripts. 

JavaScript Code Analysis using Tern (8:20)

Manuel Lemos: Anyway, moving on to the next topic, let me just switch here because... Sorry I was paying attention to the other window and then I no longer have the topic here. 

Well, this Tern is a code analysis. I think it is a tool, right? That can be used to figure if you are, from what I understood, to figure if your programming is correct and makes sense. 

I don't know, Michael, have you tried this Tern tool?

Michael Kimsal: I have not, and frankly, over my head, in terms of that article itself. Now, if you go to ternjs.net, there's a demo. You may want to bring that up. There's a demo that you can use which gives you a little bit more, not much. Actually I'm pulling this up right now. I'm trying to do it in Firefox Nightly. It may not be working there appropriately. Because I'm on a Nightly Build. 

Ah, oh, it's another node thing.

Manuel Lemos: Yeah. 

Michael Kimsal: Probably not supported at all. 

Manuel Lemos: Is that a bad thing?

Michael Kimsal: Pardon?

Manuel Lemos: Is that a bad thing, being another node thing?

Michael Kimsal: Oh, no, I don't mean it's necessarily a bad thing. It's just...

Manuel Lemos: You just don't use it.

Michael Kimsal: Yeah, well, it's just like "Aah, OK, that's how he's doing to all this. OK"

Manuel Lemos: OK.

Michael Kimsal: I really can't say too much about this. It's a  bit hype. I was going through the article and I kind of... I get mechanically what he's doing but I never saw output.

And I wasn't able to click or connect what was going into, what the value of the output would be. But I don't think I work at this level, where you need to have this much of an understanding of what's going on.  You should always have an understanding what's going on. I don't in JavaScript as much as I should. 

Manuel Lemos: Yeah, it's always useful for anyone to figure, probably spot some bugs earlier than usual. The usual is to "Oh, something is not working." But if you have a tool that can be used to detect bugs certainly when they go, your code goes into production, I think it would be useful than having to figure the bugs later on when you probably may have caused some damage or not. But there is always the chance of things like this happening. 

Michael Kimsal: It's true. However, this is targeted at a different person than me, a different developer. Because I do "advance stuff" in JavaScript sometimes, but I'm doing it only to the extent that I'm using other people's libraries.

This might probably would make sense for people that are doing deep, extremely complex things, or building the tools that are simpletons like me do the complex things. 

Manuel Lemos: Yeah. 

Michael Kimsal: It's just...

Manuel Lemos: It's just that I don't... something that may help you to figure any bugs that you might have. Like for instance, what you can do with JSHint and JSLint. Well, since I became aware about those tools, I started using them more frequently, at least once before I publish a code in JS Classes and any components that I have been publishing or updating.

But talking about explaining your code, there is also an interesting project that I found, ExplainJS.

Let me screen share it here and hope that Google Hangouts does not crash on me again. OK, ExplainJS. 

Michael Kimsal: I already got it up if you don't.

Manuel Lemos: No.

Michael Kimsal: OK. 

Manuel Lemos: Every time I try to pick a screen to share, it adds another window and I miss the right window. 

Michael Kimsal: OK. 

Manuel Lemos: Well, so here, they have basically a page on which they let you try this tool and let me paste the URL here. I thought it would be to paste the code. I saw this before. But I think... OK. 

For instance, this code here, it is part of a component that I used so it just takes the code on the script that I put the URL. And it puts the comments on the left side and the codes on the right side.

Michael Kimsal: Yeah. 

Manuel Lemos: So the help is that the comments are used to explain the code. In this case, I pasted the license in the code because this is not minified. Well, if it was not minified, probably won't have any comment, I think.  

Anyway, this is probably not very good, not very useful for me because I don't put many comments or any comments at all because I try to have a programming style on which the code tends to be self-explanatory. I try to use verbose names in English. So, I'll just... Let's see. 

Michael Kimsal: Scroll down a bit.

Manuel Lemos: They have some examples, right?

Michael Kimsal: Yeah, you could... Ember or Angular or something. The interesting thing that I think about this is... It's interesting to me because I don't think I've seen this done before. 

Manuel Lemos: Right. 

Michael Kimsal: As obvious as this looks. Maybe I have and I can't remember. I certainly haven't seen a Web-based thing like this. The really interesting thing to me is, or would be, is if IDEs have use like this.

And maybe they do and I've just missed it, but it would be pretty slick if this was an alternate view, so I can have my code and comments side by side, rather than top to bottom.

I'm always conscious of... I always have a lot more width on my screen that I do height. I'm always too strained for height so things could be moved side by side. I could see more code on the screen and more comments.

I think it's a neat idea. It'd be interesting to see this used, this side-by-side approach maybe adapted more. 

Manuel Lemos: Yeah, well, as I said it's probably not the best... It's not as useful for my codes because I don't put many comments but for people that comment there could be a lot. It probably much more useful. 

Michael, what is your commenting practice? Do you comment a lot, or maybe not? 

Michael Kimsal: Well, thinking just about coding in general, I have moved to try to do more comments, explanatory comments, done a bit more in the testing side in the past several months... automated testings, like that. So I tried to make things more, as you were saying before, sort of understandable and self-documenting, self-explanatory. But I like comments and I like to think that I'm doing a better job at it now than I was five years ago. 

Manuel Lemos: Yeah. Well, I think my practice will never change because I got used to this not commenting much. Although, I use comments to embed... I have defined a format to embed documentation in the original source code of the JavaScript or even PHP. It's a sort of an XML format. Not very pretty, but I have a tool that extracts that documentation and it can extract a lot of details that then produces readable documentation in different formats that are useful. 

Michael Kimsal: I wish I could remember the name of the tool but I mean, three weeks ago, I saw something and it was a plugin for Visuals Studio that would allow you to attach images into source code and it would embed it in a comment or embed a reference to a file. But when you were looking at it to the plugin in the Editor, you could see the image there in line with the code. So "This is the diagram of how the flow should go and this is sample output from its map," that sort of thing.  

Manuel Lemos: Yeah, I think I also saw that but I also forgot the name. 

Michael Kimsal: I can't remember the name, either. But it's amazing that we still are so... Text is great, but we're still so text-oriented. And I don't know if or when the idea of embedding for multimedia metadata will ever take off. But anyway, I like the Explain thing.

JSHint 2.0 Released (18:44)

Manuel Lemos: Yeah, well, talking about code analysis and as we mentioned about the Tern, there is a new release of JSHint out... JSHint 2.0. And basically, I did not have an opportunity to try and see what are the differences in practice. They are listed here in this page. 

Michael Kimsal: Oh, yeah. We looked at this a little bit ago... ECMAscript 5 support and ECMAscript 6 somewhat.

Manuel Lemos: Well, what is the main differences that you noticed that can make the tools better that it already is? 

Michael Kimsal: Well, I'm looking here. It looks like, just reading this, it looks like there's some support specifically Firefox or Mozilla extensions. And there's some more command line changes looking for a .jshint file. But, probably, the biggest one at the end is they're trying to change the release cycle, the release schedule to be faster.

Manuel Lemos: Oh, I have noticed that part. 

Michael Kimsal: I don't know exactly what faster means but if they're looking at maybe monthly, that would be a tool that you'd be... Just like we upgrade our browsers now. Many of us upgrade our browser probably if not weekly, maybe monthly or getting a new version or something, or you're trying new versions. 

It may be that JSHint is now going to try to keep in line with browser release schedules more. I'm just reading that in. They're not actually saying that. 

Manuel Lemos: Yeah, well for me, the tool is already great and very helpful, both JSLint and JSHint. I try to pass my code to those tools to detect something that was not intended. It also changed my programming style, now I put more brackets around single statements like those after if conditions. 

And a new thing that I noticed they added is this new pragma which is basically a comment that is to hint JSHint to not give warnings, not to give specific warnings about things that you are well aware that are intended in your code. They are not accident and would trigger some warnings. And I'm not sure if this was present before. I think there were already options, a way to pass default options, too. 

Michael Kimsal: Yeah, there was. Maybe like, maybe just some variation of options was added. 

Manuel Lemos: Yeah, well, anyway, I think this is great. The tool is getting very mature and I don't know what else you could want from these tools because they are already great. Any feature that you miss from JSHint and JSLint?

Michael Kimsal: I think it should email everybody on the team and maybe email some cat pictures. That would be helpful. 

Manuel Lemos: Oh cat pictures would be awesome. 

Michael Kimsal: Yeah. 

Manuel Lemos: Ah, you are right. That feature, that definitely is missing. 

Michael Kimsal: See, whenever you think that an app can't get better, I can tell you how to make it better. 

Manuel Lemos: Yeah, a cat picture will help.

Building GIF Animations on the browser with gif.js (22:37)

Michael Kimsal: Now, it's interesting. There's actually, the next three topics that you'll brought up are interesting to me, because they're both kind of side... I mean, they're not really the same thing but both using Canvas.

There's this  GIF.js, something to let you build animated GIFs. So just pieced together in multiple frames is interesting.  I'm not sure I've seen one of these before. Probably have, but it's not coming to mind. That's interesting. And it uses Canvas. 

Manuel Lemos: Well, so let me show it here, the page, what you are talking about. First is the GIF.js. What is the right way to pronounce GIF? It is GIF or JIF. 

Michael Kimsal: I say GIF but I heard on radio last week it's supposed to be JIF. The guy who invented the format pronounces it JIF. So I still think he's wrong.

Manuel Lemos: [Chuckles]

Exactly. As if that matters. 

Michael Kimsal: Yeah. 

Manuel Lemos: And more importantly, you heard it on the radio and the radio is very relevant, is it?

Michael Kimsal: Yes. 

Manuel Lemos: [Chuckles]

Michael Kimsal: OK. 

Manuel Lemos: Well, anyway, now seriously, this is a library that  is able to build GIF streams from pictures. It can extract frames from Canvas elements and it can even compose animated GIF pictures.

Well, I wondering what happens after this rendering call here? Does it save it  to some data? There are some string of variable or does it upload it to the server?  Because... 

Michael Kimsal: No, it's saying right there... gif.render. It's going to trigger this as gif.on ('finished'. So once it's rendered, once the rendering is finished, it's going to trigger that call back which is function. It's going to pass the (blob)  and then it's opening up. 

Manuel Lemos: Right. 

Michael Kimsal: There's more to it than that. But that's what their demo is doing. That's what the demo is doing. Yeah. 

Manuel Lemos: So it creates a blob. Oh, I see. 

Michael Kimsal: Yup. There you go.  That's it. 

Manuel Lemos: It creates a URL. Oh, this is intriguing. What kind of URL is that? 

Michael Kimsal: I think it's a data URL. 

Manuel Lemos: Yeah, you are right. 

Michael Kimsal: I know. 

Manuel Lemos: I forgot that. I totally forgot that you can generate URLs from data strings. 

Michael Kimsal: Yup. 

Manuel Lemos: But this probably would be more useful if you... Well, I don't know. I think if you could somehow upload it to the server. And so, we probably would ... tackle this AJAX object, XMLHttpRequest object and upload it to the server. Well, this is great because you can generate PNG from Canvas, right? 

Michael Kimsal: I think so, yeah. 

Manuel Lemos: So with this library, now you can generate data strings in GIF formats so you can upload or even show in the browser with the data URLs. 

Michael Kimsal: Yeah. 

Manuel Lemos: And now, you can dynamically animate your cats. 

Michael Kimsal: I could. I could. 

Manuel Lemos: Yeah.

Capturing Camera Pictures without PhoneGap (26:30)

Michael Kimsal: And on another Canvas note, using some other aspect of Canvas, it kind of leads in to the next article that you have from... 

Manuel Lemos: Oh, you have... Exactly. This one. 

Michael Kimsal: Do you see it? Yeah, here. Oh, you got it there. I had it shared as well here, too. This article from Raymond Camden about... Yeah, I think it's Canvas related. I thought it was when I first went through it. It's not. Maybe I got this wrong. But the idea of not... Maybe I just got this wrong. 

Oh, oh, oh. Yeah, this is just somebody's comment here. It's that about grabbing a video off Canvas. But I think he was talking a little bit more about you can use... at least with Webkit, current Webkit...  you can say <input type="file"> and then <capture="camera"> and you can trigger a camera taking a picture or loading the picture from the roll, the image roll. 

Manuel Lemos: Yeah, I supposed this requires proper support from the browsers. Which browser support that parameter of camera? Probably... 

Michael Kimsal: What was the question?

Manuel Lemos: Oh, it was cut. I was wondering about the browser support. 

Michael Kimsal: Oh, wait, wait, wait. This is where the camera is... or not camera, the Canvas... because  what you're getting from the camera is something, you're still getting a data URI and you can deal with that with... You're getting a data URI which you would get from Canvas which is getting a data URI, which is going to be passed to an image tag. 

This is specifically, and he's talking about iOS here but I believe that you can do this in current Android as  well, too. I think.

But you know, without taking picture you could, I know with iOS 6... I haven't, I don't think I've tried on 5... but I know with 6, you could do file upload. If you've even just a regular file upload thing, one of the options when you click an iOS is that it would say you can go to your camera roll and take a, choose a picture from that. 

Manuel Lemos: Yeah.

Michael Kimsal: But this is actually triggering the camera and then giving you the data and then you could AJAX upload it or post it or whatever. 

Manuel Lemos: Right. 

Michael Kimsal: But it's nice to see that this is slowly coming around finally in iOS and ideally better ways of triggering this in Android, too. The file upload support was nice in Android but I wasn't sure if you could trigger an actual camera from a webpage before. It looks like it can now. 

Manuel Lemos: Yeah. And what this article says that you can do this without calling the camera API from PhoneGap. 

Michael Kimsal: Because the browser is calling the camera API now for you, on your behalf. 

Manuel Lemos: Yeah, well, because the way I thought PhoneGap works is that it uses the underlying browser available in the mobile device, right? 

Michael Kimsal: When it needed to. But for things like a camera, it was writing code that use... it was compiling code that use native stuff. Yeah, and camera drivers are all camera APIs.

Manuel Lemos: Oh, I see.  

Michael Kimsal: But now, a little bit more of that is exposed. The actual trigger taking a picture and getting that data picture back is now directly from the browser. 

Manuel Lemos: So you can just serve HTML 5 pages from your server and have them...

Michael Kimsal: Take a picture. Yup. 

Manuel Lemos: They'll support. But it still depends on the version of the OS. 

Michael Kimsal: Yeah, though I think newer Android devices are getting updated more regularly and it does seem like quite a lot of people in the iOS world upgrade to latest versions on a regular basis. 

Manuel Lemos: Right. 

Michael Kimsal: Yeah. 

Manuel Lemos: And what I was wondering is about the non-mobile devices, I could not... 

Michael Kimsal: Yeah, I haven't tried this on a non-mobile. I don't know if there's a trigger, a camera. If you have a webcam, it would trigger a pop-up, probably not. 

Manuel Lemos: It probably need a more recent version of Chrome or Firefox. I don't know if you can count any...

Michael Kimsal: You got the contents, try it. See what happens. 

Manuel Lemos: Yeah.

Michael Kimsal: Not right now, though. Not right now. 

Manuel Lemos: Of course not. 

Well, this is always interesting because with these advances, we can enhance the potential of applications. And with this support in the mobile browsers, you rely less on native applications. Although, it's always better to develop native applications if you want to take the full potential of the mobile device. 

Michael Kimsal: I don't. If that's a concern. 

Manuel Lemos: You don't?

Michael Kimsal: No. 

Manuel Lemos: You haven't tried to develop any native applications? 

Michael Kimsal: One, a couple of years ago. And I won't be doing it again anytime soon. 

Manuel Lemos: Really? Was it that bad?

Michael Kimsal: No, I'm just...

Manuel Lemos: Just about that. 

Michael Kimsal: I'll fill you in. I'll regale you with my travails next month.

Mozilla can produce near-native performance on the Web (32:07)

Michael Kimsal: Wanted to touch on one brief thing. A couple of months ago, I think we talked about asm.js, which is... I'm sharing my screen. Can you see my shared screen? 

Manuel Lemos: Yeah. 

Michael Kimsal: It's an article I found a couple of weeks ago and that is some benchmarks that people, somebody had done, showing the same concept code compiled to run as native code on machine and then as JavaScript in Firefox and then, Firefox in asm.js compiled.

Asm.js is a smaller subset of JavaScript and if you can compile towards that, it can run it and deal with it, much much much faster. We can see here for some of the benchmarks the orange and the blue are close. Or the blue is at least a lot closer than the red which is the native Firefox. 

Hopefully, you can also jump in. Just go to the page as well, too. I just encourage people that are really into... if you are all interested in asm.js stuff to take a look at this, because as computers get faster, as it becomes faster to do this sort of compilation things and we can see some real benefit from this. 

Manuel Lemos:  Right. I have seen some games that were ported.

Michael Kimsal: Yeah. There was a demo that maybe we can... and maybe a couple more demos... I couldn't find it. I've been tracking it down this month. So maybe next month, we'll walk through it and try to do a video capture or a live demo of something. Because there's some pretty impressive that's been happening with WebGL sped up JavaScript or video stuff in the past few months. 

Anyway, I don't want to dwell on that too much, but kind of follow up to what we've talked about, someone said we talked about in the past. 

Manuel Lemos: Yeah, well, I think this is great and as we already mentioned before, I think more heavier, CPU intensive application could be ported to JavaScript and eventually run on any browser.

JavaScript Innovation Award Winners of March 2013 (34:20)

Manuel Lemos: OK, well, with this basically, we had covered most of the news, topics, that have been happening lately in the JavaScript world. So we are going to move on to comment on the Innovation Award nominees and winners. 

Let me screen share it here so everybody can see it. Let me increase the font. 

This time we're going to talk about the nominees of March which were voted on April. And so, in May, the results came out and we got four nominees. There are not many but they are good. 

Michael, which ones would you like to comment on?  

Michael Kimsal: Well, this was the other Canvas thing that I was thinking about. I got my Canvas all messed up. 

This first one here, I'm sharing my screen. Can you see my screen up?

Yeah, this is... I don't know where that went. Yeah, this is a jQuery plugin to convert an image from color to grayscale. This is from Raul Molnar  from Romania. Hello, Raul. Thank you. 

This is, it returns a data URL that can be used to the... another Canvas example here and if we look at the screenshot demo, we can see, there's the original and there's the grayscale version. 

And it's interesting to me, because guys, I'm going back 20 years, 18 years, 19 years... no, it was actually 20 years... I was working with a friend on a project and we were trying to do color manipulation of the images.

We were taking images and scanning them and I was trying to go through and do things like, let me go to grayscale, let me do something. In my naiveté, I didn't know there are already treatment and components you can do to do this.

And I was doing it all on basic on a 33-megahertz machine which was taking forever. But this is the kind of stuff that we can do not only, hey, we got to have computers but we can do this directly in JavaScript, which is... I'm not going to say it's the basic of the 21st century... but it's a language that's available to everybody and pretty easy to get started with.

So Raul, congratulations, thank you very much.

Manuel Lemos: It's Canvas. Well, Canvas, there is a great potential for Canvas applications. I have developed some... actually, plugin for my component for animations that I used with Canvas, to draw those circles around elements. So I just overlaid Canvas on the top of the elements, just made some calculations.

And, well, the potential is there, it just depends on your imagination to use Canvas for almost anything. 

Michael Kimsal: True. 

Manuel Lemos: So other than that, which other... 

Michael Kimsal: The other one, I would mention here is from Bob,  from Bulgaria. Hello, Bob. And this was... let me share my screen... this is called ySpeed

And initially, it went by the name, it had something maybe with Yahoo! or YSlow, but it's just an object which will convert between kilometers per hour, miles per hour and knots. Interesting to me in that kilometer and miles per hour, I can kind of do in my head. Though, if you really do this on screen, you'd still need something to do the calculations. 

But, I was flying a couple of times... I'm trying to pull this up again... and I still couldn't actually figure out, I think I was seeing the plane speed in knots at some point and I could not figure out how fast we were going. But here is the raw calculations, pretty straightforward. But this is a nice small class that will convert this back and forth for you. 

Manuel Lemos: Yes, that's quite simple but it's always effective. 

Michael Kimsal: Yup.

Manuel Lemos: I'll not say I would probably need this specific component to do those calculations because they are very simple, but for people that are learning, they are always very useful. 

Michael Kimsal: Sure. 

Manuel Lemos: And for whoever wants to learn and see even how simple things can be done. 

So, on my part, I want also to comment a couple of classes, objects. I'll never know which would be the right way to say it because if I say those are classes, some people complain that they are objects, probably be abstract and people "Oh, this is JS Classes site. It has objects." 

Michael Kimsal: Yeah. 

Manuel Lemos: Well, people, it will never be possible to please everybody. So I'll always say classes, then say objects. 

And in this case, it's another great contribution from Arturs Sosins, from the distant Latvia. And this time he did an interesting object that can be used to somehow help you play that Fallout 3 game. I was not even aware what the game was because....

Michael Kimsal: You're not a gamer. I'm not either. 

Manuel Lemos: I used to be a gamer when I was like until college I used to play games but then I decided that I should do more serious software and stop playing games. Actually, the real explanation is that I don't have time to do the work, even less to play games.

But games are very popular. And from what I understood, I have to study what was this Fallout game, to write a detail description and even the nomination text that I always write by myself. And after analyzing what each component does to clarify and explain why this object is being nominated, I had to study this game. 

And from what I understood it was a game in which you have to go to rooms and some rooms have terminals. And you have to break in the terminals to access the information. And you have to go through different attempts to guess passwords and you get hints from the systems when the passwords are not correct. So with those hints, you can figure which letters may be right or not. 

So Arturs developed this component to help you break in the password system because it's actually very dumb, the password system. It was meant to be broken. But Arturs developed this component. With just a few attempts, it guarantees that you succeed in accessing the terminal and all and moving on with the game. 

Michael Kimsal: Excellent. 

Manuel Lemos: So, Michael, you are totally not aware about this game, right? 

Michael Kimsal: Not a gamer, not a gamer. Yeah. 

Manuel Lemos: You are very old. You are ancient. 

[Laughter] 

Michael Kimsal: Hey.

Manuel Lemos: When...

Michael Kimsal: I played Ultima 2. OK. 

Manuel Lemos: Well, that's not bad. I don't play anything at all. But I keep an eye on games, just because my son is very addicted to them and he's always trying to find more games.

Although, he likes a lot of games about first-person shooters and the likes. So, I was not aware about this Fallout 3 game codes. It's not the type the game he plays. 

But, OK, thank you again to Arturs for his great contribution. It was certainly a fun component and I'm sure several people would find it interesting if they play this game, Fallout 3.

Other than that, the other component that I want to mention is... 

Michael Kimsal: Javier Camelis. 

Manuel Lemos: Yeah. 

Michael Kimsal: From Argentina.

Manuel Lemos: Yes, exactly. Well, Javier developed a simple but interesting component that lets you access multiple values of arrays in a single call, if I can put it right.

And this interesting because it sort of reflects the fact that sometimes people are sort of, I would say, bored of having to set lots of array values. And they have to go through lots of function calls and they can do it through in a single call, they would be probably more productive. That's my interpretation of the use of this object.

Michael Kimsal: I couldn't quite figure out if it was meant to be a multidimensional array or not. I sort of thought it was, but it might not be exactly. It might be something else.  

Manuel Lemos: Yeah, well, the idea is just that to get the values of multiple keys all at once. 

Michael Kimsal: Sure. 

Manuel Lemos: So it's a start of a minor enhancement to what arrays can already do. You can assign and get values but you don't have a more express way to do it many values at once. Well, that's an interesting take, certainly something that I did not expect for a component in JavaScript or any other language. 

So thank you, Javier, for his contribution.

The latest JSMag magazine issue articles (45:11)

Manuel Lemos: And with this, we are practically reaching the end of this podcast. Michael, do you want to comment on the issue topics of  JsMag magazine. 

Michael Kimsal: Sure. Well, a couple of things actually.  I brought the screen up here to share just some of the topics for this month's issue. And shoot, I have the wrong image up there for some reason. The topics... Jeanine Meyer is with us again. 

I'm sharing my screen, am I not? Yeah. 

Manuel Lemos: Yeah. Yes. 

Michael Kimsal: It's... There we go.  

Jeanine Meyer walking through another tutorial on moving specifically transparent images. Lars Kotthoff... hope I'm saying his name correctly... has a second installment on his series on graphing with D3. D3.js is sort of a hotness in graphing in the JavaScript world but it's certainly not as easy as the YUI Charts or the Google Charts. It's definitely has a different approach to data visualization altogether.

Chandan Luthra has been writing for us for awhile and he has a piece on the <main> tag in HTML5 and what you can do with that means in HTML5 specs. 

And I don't have the description here for Chetan's piece but some security article, some information on security in HTML5. 

And then, Justin, as always, keeps us up to date with some of the news going on.  So that's our June issue.

Conclusion (46:43)

Manuel Lemos: Well, that's great. Well, with this, we practically ended this Hangout. 

I really wanted to announce something regarding the upcoming system reputation that I have been developing for the last months, but I've been too busy. I was able to launch it last month as I hoped. But I'm very eager to launch and tell about it. So since it is not yet ready, I have to skip it to not... 

Michael Kimsal: So we'll talk about it. 

[Chuckles]

Michael Kimsal: We'll talk about it and demo it next month maybe. 

Manuel Lemos: No, I'm sure. Well, next month will be the birthday of the PHP Classes site. In fact, it is already a teenager. It's going to be 14.

Michael Kimsal: Wow. 

Manuel Lemos: And all developments that go in PHP Classes and JS Classes are done on in parallel. All the features on the site are pratically appear on the other site. We will also comment about this next month because I want to launch it certainly before the birthday, which if I'm not mistaken is on the 24th.

So with this, we practically ended the podcast. Michael, thank you again for coming. 

And on my part, that's all for now. Bye. 

Michael Kimsal: Adios. 

[Music]


You need to be a registered user or login to post a comment

Login Immediately with your account on:

Facebook ConnectGmail or other Google Account
Hotmail or Microsoft Windows LiveStackOverflow
GitHubYahoo


Comments:

No comments were submitted yet.


<< Previous: Crawling AJAX Web sit...>> Next: The Latest and Upcomi...

  Blog JS Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog Better JavaScript Dev...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)