Better JavaScript Development Tools - Lately in JavaScript podcast episode 29

Show notes

Download Size: 27MB Listeners: 1977

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

• HTML 5 template tag
• Render PDFs on the Server with PDF.JS and Node-Canvas
• svg.js: A Lightweight Library for Manipulating and Animating SVG
• Visual Debugging of JavaScript with SlowMo.js
• Run browser-side and server-side code in the Browser with Runnable
• JavaScript implementation of Git tools with JS Git
• Introducing Web Site features with Intro.js
• Real Time Ray Tracing in Javascript

Read the podcast transcript

Contents

Introduction (00:20)

HTML 5 based templates (2:34)

Render PDFs on the Server with PDF.JS and Node-Canvas (8:48)

svg.js: A Lightweight Library for Manipulating and Animating SVG (11:58)

Visual Debugging of JavaScript with SlowMo.js (16:11)

Run browser-side and server-side code in the Browser with Runnable (19:01)

JavaScript implementation of Git tools with JS Git (25:01)

Introducing Web Site features with Intro.js (30:45)

Real Time Ray Tracing in Javascript (35:53)

JavaScript Innovation Award Winners of January 2013 (40:09)

Upcoming articles on the JSMag magazine (50:32)

Conclusion (55:10)

Introduction (00:20)

[Music]

Manuel Lemos: Hello, welcome to the Lately in JavaScript podcast. This is episode 29. And as always, I have here... Oh wait!

Michael Kimsal: Oh!

Manuel Lemos: It's a different person. It's a bearded man. 

[Laughter]

Manuel Lemos: Is that you, Michael?

Michael Kimsal: Who's that sexy guy in my window? Oh, that's me. Well, yes, I am... This is T-minus 1 day and this is going away. 

Manuel Lemos: Michael Kimsal's spring fashion. 

[Laughter]

Michael Kimsal: Yes. 

Manuel Lemos: How are you doing, Mike? 

Michael Kimsal: As I've told you before the show, tired, very,  very tired.  Had a hell of a week. Much like I had a week in January and a week in February, had one week at the end of March, which was extremely overworked. But other than that, I'm thinner, like I shared my time before my jogging.

Manuel Lemos: Yeah.

Michael Kimsal: Yeah. I don't have it up right now to share, but 31 and 20-something seconds, minutes. That's for my 5k, 3.1miles. It's my best time yet. 

Manuel Lemos: 5k, what is that, kilometers or miles?. 

Michael Kimsal: Yeah, five kilometers, which is 3.1 miles. 

Manuel Lemos: Yeah. Well, I don't run. I have no idea. It's probably good. I just swim and much slower.

Michael Kimsal: I tell you it's not that good, because when I first started to do this back in December, I Googled... sorry... I Bing-ed for what's the good 5k runtime. And I had people saying, reading posts "Well, I just had my hip replaced, so I'm only doing 29 minutes."

Manuel Lemos: [Laughter]

Michael Kimsal: Like, this is insane! But when I started, I was doing about 37 to 38 minutes and the last few weeks, I  got down to 34, then 32 , then 31. So I'd like to get to 29 or 30 minutes at some point. 

Manuel Lemos: OK. But, now back to the actual JavaScript podcast, hangout. 

Michael Kimsal: There you go. 

Manuel Lemos: I still call it podcast.

Michael Kimsal: I think about JavaScript code while I'm running. 

Manuel Lemos: Yeah. 

Michael Kimsal: There's the tie-in right there. 

Manuel Lemos: OK, OK. That's on topic. 

Michael Kimsal: There you go. 

HTML 5 based templates (2:34)

Manuel Lemos: Well, this month, we have several planned topics to talk about, mostly about libraries or something related with them. 

Michael Kimsal: [Verbal Noise]

Manuel Lemos: And we're going to start with one related with the... I think it's a new HTML tag.  Let me screenshare it here. OK.

Michael Kimsal: Share that screen.

Manuel Lemos: I tried. 

Michael Kimsal: I'm not seeing it. 

Manuel Lemos: Yeah, I'll try because it's always a challenge. The greatest challenge is sharing the right screen on Google Hangouts. OK, can you see it now?

Michael Kimsal: I see it. Ctrl+...

Manuel Lemos: OK, well, let me see if you are seeing what I think you see. 

Michael Kimsal: I'm seeing a template tag.

Manuel Lemos: Yeah. I was just annoyed with this Ask Toolbar that got infiltrated in this browser setup, I don't know how because I cannot disable it. 

Anyway, back to the actual topic here. There is a new HTML5 tag named <template>.

And I have another challenge here because the Windows is not resizing my windows correctly. So I have a hard time scrolling because they do not appear with the scroll bar. OK, now, I think it's... Is it all visible?

Michael Kimsal: Some of it. You scroll over to the... 

Manuel Lemos: I do not see a horizontal scroll bar for some reasons. 

Michael Kimsal: Ah, b*stards. Ah, so they get you.

Manuel Lemos: I bet this is this Ask Toolbar thing. Damn you, Ask!

[Laughter]

Manuel Lemos: Nobody's  going to use you. 

[Laughter]

Michael Kimsal: Did you upgrade Java by any chance?

Manuel Lemos: [Chuckles] 

Maybe that was the problem. I don't know. This is not really my machine. It's a Windows machine, I don't use Windows.

Anyway, I was trying to show this template.

Michael Kimsal: A new template tag coming from the W3C. 

Manuel Lemos:  Yeah, well, when it comes from the W3C, it usually comes late in the game. Meaning, we could use this several years ago, why now? Now, it's all backwards incompatible, because we don't have it in older browsers. 

Well, anyway, one interesting thing that I found about this <template> is, somehow, it addresses a need.

Sometimes you need to have a certain HTML that you are needing in the page but not necessarily visible when the page  loads.

I don't know if you had a similar need, but for instance, I have actually implemented a JavaScript component that delays the load of ads and other slow components on the page that rely on external JavaScript.

And the way I make the HTML appear on the page is precisely having to insert JavaScript strings with HTML escaped so it is not confused with the real content on the page that loads initially. 

And this <template> tag seem to address that need. Too bad it is not available on all browsers since HTML 4 so we couldn't rely on it nowadays.

Anyway, there is hope and with this new HTML5 <template> tag. When HTML5 gets widely available on all browsers, I'll be able to use this in my components, instead of having to escape all the HTML in JavaScript. 

Michael,  do you see any use for this <template> tag?

Michael Kimsal: Well, I do. The article had made some pretty good examples of why you  might want to use that.

And some of the template techniques right now,  when you talk about pulling in extra stuff but if you deliver a page that has some of your template strings built in, they're either strings or they can be part of a DOM. But they're part of the DOM and you have things like <img> tags, they'll either break or they'll be trying to load up an image by default. They're going to send those network requests. 

Manuel Lemos: Yeah.

Michael Kimsal: Whereas things that are inside this... It looks like the specs for this <template> tag is that they would be inert. I think that's what they used. They would be not active.

Manuel Lemos: Right.

Michael Kimsal: Probably the biggest benefit I see here is that there is a defined way of saying "This is a part of the DOM but don't do anything with it. It's only therefore scripts to manipulate. It's not there for the browser to render directly."

So having a semantic way of doing that is nice, instead of making it into strings in JavaScript or trying to put it in comments and parse it out or any other technique like that. 

Manuel Lemos: Yeah. That is interesting, as I said. But unfortunately, since we still have to wait for this to become widely available in browsers, for now, let's just hope that it becomes more standardized. We'll see how it goes.

Michael Kimsal: In some ways, I sort of wish there was a more generic tag, that had a similar effect. Instead of explicitly calling it <template>, just call it something  like inert or null or something.

So that you could deliver DOM chunks down which would not be parsed, or I should say, rendered by the browser engine. They would still be available on the DOM tree directly for manipulation, but not... 

Manuel Lemos: Yeah. 

Michael Kimsal: And then, you could have like,  I don't know if I say inert, you could have a type attribute on there. So the type could be template or the type could be CSV data... Or it's not CSV but user data or something like that, so we could have structured data that we push down in the DOM, as opposed to having to always put it in JavaScript.

Manuel Lemos: Yeah, well, I hope this becomes adopted very quickly  because I see some uses for it. 

Render PDFs on the Server with PDF.JS and Node-Canvas (8:48)

Manuel Lemos: And now, moving on to the next topic that we have planned. I'm going to talk about, let me just screenshare it first, an article that talk about sort of a combination of libraries that I found  it useful.

It is basically a way to render PDF documents on the server side using NodeJS and node-canvas. I knew PDF.js but I was not aware of this node-canvas. I confess I haven't been using node... at all...

Well, this is interesting because of that possible. I don't know, Michael, if you have tried this and found it feasible. How good is PDF.js to render documents? Does it fully support all PDF specs or maybe not?

Michael Kimsal: Do not know. I know there was some movement last year. This PDF.js is not terribly new. I think it's been around for awhile and there was some movement to build in into... It was going to built into Firefox or something. That was some rumors or ramblings that I have heard  or read some place. 

Manuel Lemos: Yeah.

Michael Kimsal: To the extent that anybody would even consider that, seems like it would have to be pretty full-featured. And, maybe, there's a couple of things that it doesn't support. But it's going to support quite a lot of things for most people. 

The interesting thing here from what I remember reading, in general, is that the maybe confusing this with the rendering rather than the creation. This is a renderer. But it seem to be somewhat faster than having to load up the Adobe Reader. I'm getting off topic here now. So, short answer, I haven't tried this PDF.js specifically.

Manuel Lemos: Well, here in the article that I'm showing, it just says not particularly fast. But, well, as long as it does its job of rendering the PDFs in images, I think it's already useful. 

Michael Kimsal: Yeah.

Manuel Lemos: And at least, well, there are solutions to do that. But there are external programs like these mentioned in the article, like MuPDF and Xpdf.

But I think it is interesting to have this integrated in JavaScript even if it is on the server side. Actually, sometimes, it's more useful when it is on the server side. 

And other than that, the guy complains about the font that do not look very well on the Mac. I think he means Mac on the server side. Well, I don't know if there are many people using Macs on the server side. Probably, not even Apple. That's a fact.

Michael Kimsal: Not enough. Let's put that way, not enough. Yeah. 

Manuel Lemos: Yeah, do you think Apple uses Macs on the server side?

Michael Kimsal: I think they do for some stuff, but...

Manuel Lemos: For some, not all. 

[Chuckles]

Michael Kimsal: Probably, not for all. But, they don't use anything for all. There you go.

Manuel Lemos: Right. 

svg.js: A Lightweight Library for Manipulating and Animating SVG (11:58)

Manuel Lemos: Well, now, I'm moving on with the next topic which is about svg.js library. Let me screenshare it here, again. This is a somehow similar library to the one that we mentioned before, PDF.js, but for creating SVG-based graphics on the browser, I think. 

Michael Kimsal: Yeah. 

Manuel Lemos: I don't know if it's possible to somehow save generated SVG to file. Anyway, if you can add it to a document, I suppose you can somehow capture here the HTML to make this appear on a page and use it separately, which probably is interesting. 

Anyway, what I found interesting about this library is that not only it can render some graphics, vectorial graphics, but you can also add some animation effects. 

Michael Kimsal: Yeah. 

Manuel Lemos: This is the demo page. And at the end, there are some animations that you can do with this. This may be interesting to present on a page on which you want something more animated.

Lately, I've been working with an animation library that I developed that would do somehow similar effects, but using canvas. But the canvas itself, the graphics on the canvas would be drawn dynamically. I don't know, I think this requires some JavaScript to animate the graphics. 

Michael, do you have any experience with SVG?

Michael Kimsal: Very little. I have noticed that... There's about a couple of charting libraries that I've looked at in the last month or so and the majority of modern ones tend to draw everything in SVG.

I think we're to the point now where you can assume that somebody's browser probably will support SVG. At least, in situations where you're trying to deliver a particular value internet, some things like that. But I have not done anything specific with it myself. 

Manuel Lemos: Yeah, what about canvas? Have you used canvas for graphics?

Michael Kimsal: Again, not graphic graphics. I don't remember the name of it, but I did use a charting library couple of years ago that it threw stuff to canvas. Anyway, there's nothing wrong with it. It's just I haven't had any call to do anything myself directly.

And the few times that I do, I go out looking for somebody else's stuff. Almost everything I've needed to draw in the last couple of years had been... People want bar charts, they want data visualization, at least with people I've worked with.

Manuel Lemos: Right. Nothing animated, huh?

Michael Kimsal: No.

Manuel Lemos: Or mostly stuff. 

Michael Kimsal: No! How was that? Oh, is that...? Sorry, that was animated. Again, if I had to explain it, it's not funny. So, there's a little bit of the language...

Manuel Lemos: Yeah.

Michael Kimsal: ... barrier going on there. OK.

Manuel Lemos: Well, animation is more to sometimes give some emphasis. I saw some charting libraries in JavaScript that not only show the actual bars or pies or whatever but they also animate the presentation. They show the bars growing up to the current level. It's just a minor enhancement, not really important but it may help give a good look to your charts. 

Well, anyway, this SVG library can also somehow be used for this purpose. I just don't know about the compatibility. I think, at least, in the older IE versions, it'll  probably not work. I'm not sure. I don't think it provides any compatibility with the VML or something, whatever that is called in IE. 

Michael Kimsal: Don't know. 

Visual Debugging of JavaScript with SlowMo.js (16:11)

Manuel Lemos: Well, anyway, moving on with the next topic on podcast. We are going now to talk about an interesting library. Or maybe, it is a service, I don't know. I didn't actually download this, I just tried it on the page. I better share the page here. 

It's called SlomoJS. 

Michael Kimsal: I like it. 

Manuel Lemos: Yeah, I imagine you like these names. The idea here is...  It's probably too small, let me increase the font . 

The idea here is to show the execution of the JavaScript code in several segments. Here, it shows several frames with the code being executed first, the evaluation here of this for loop, the initialization of this library, then the comparison of the loop. And then, it goes through the loop itself and how the expressions are computed. 

And this may be helpful, not only to teach how JavaScript is executed, but maybe for some debugging when you want to know what code would it execute next when you have a certain code segment that you want analyze. And this maybe interesting. 

Michael, did you try this? What are your impressions about this? 

Michael Kimsal: Well, I've played with a little bit, just in the demo screen there. It's an interesting idea and my first thought was, hmm, it's neat to see still frames but seeing it animated would be neat, too.

And then you actually get to the GitHub page and the author said, "I originally wanted to make this into a set of movies or a movie file, but I thought that..." He explains his reasonings for not doing that.

And it makes sense and I'm sure somebody could fork it and also add output movies instead of just static frames. But, yeah, having both would be, I think, fun. But this gives you the building blocks, certainly. 

Manuel Lemos: That's probably not much more work because it generates the HTML to present this code. So maybe, just go switch each frame one at a time, it will give the animation effect that you are suggesting.

Well, anyway, I think it is still innovative or interesting. I've never seen anything exactly like this. What I have seen are some services like the one that we're going to talk about next.

Run browser-side and server-side code in the Browser with Runnable (19:01)

Manuel Lemos: We're going to talk about a site named Runnable. Let me screenshare again here. It's basically similar to the sites that exist, allow you to see code executing on a page and see the results of these... well, let's say... Well, it probably could use some font increase. 

You can paste some code here on this text editor and then run it. And you can see the results on the left. It's not exactly a temporary error. In this case, it's just an error, a 'hello world' message being outputted by a server created with NodeJS. 

Well, there are  several sites for this. I'm trying to remember their names. But the difference is that it also makes it possible to run code on the server side. I did not look exactly how it does this. I supposed we have to install something on some server or maybe they provide their own server to try this code, I supposed. 

Michael, did you try this? 

Michael Kimsal: No. I'm just gone through it and clicked the Run, click the Demo, clicked the Run. And it's interesting, but what's... Well, I always want to go off topic a bit. What this jog in my mind was JavaScript is built in to browsers and yet, much like we don't have any HTML editing tools. We don't have any JavaScript editing tools. 

We don't need a lot. I mean, and we have plug-ins like the Firebug and so on, but they're for viewing and manipulating stuff that already exists. Why do we not have a standard thing in browsers to let you just do this? Why does it have to be a separate Web service altogether? 

It's just kind of strange that this is a... I understand the word 'browser' means it's really should just be browsing. That's all it was meant to do, 20 years ago or 19 years ago, but we're a little past that now. I'm wondering if we'll ever get to the point where there will be enough in the browser where you can just go and type some code, the idea of learning code. 

A lot of people say, "Learn JavaScript because it's everywhere." It's everywhere except there's nowhere to edit it, if that makes any sense.  

Manuel Lemos: Yeah, I see. You want to do it all in the browser without relying on the server to test the JavaScript. 

Michael Kimsal: Yeah, or some third-party service. 

Manuel Lemos; Right. 

Michael Kimsal: I can see some attraction to some of what they're doing, but they would just be value to just say something like, if you press the button, if you had like in Chrome, like chrome//edit or something like that or some mode that was just in there so you could do quick I-wanna-type-up-some-stuff.

To me, it would open up programming to a whole other level of people that don't... They're not dumb. It's not like they don't understand this, but they don't have the facilities to do a lot more. 

Excel is a prime example. People do way too much stuff in Excel, but it's because it's completely self-contained. They have an editor, they can do video and macros. They have a whole lot of stuff.

They don't need to put a page up that has code in it and then put it on the server and configure that server, configure a host name and then, go load it to have it come right back down to the browser where they can see the results.

And again, I'm getting a little off topic, but it kind of has my wheel turning. I hope everybody gets that point. 

Manuel Lemos: Well, I agree with you. Basically, this service is very similar to JSFiddle and the likes. Others that exist for similar purpose. The only thing I've noticed that is it goes a bit further is, for instance, the part of NodeJS, it relies on the server to run and test that code. So, I think they provide the server side for that purpose. 

But there are other things that, for instance, Twitter, Google libraries that you can use from JavaScript to test directly on your browser without having some third-party service to provide you that service. 

Michael Kimsal: Yeah.

Manuel Lemos: Maybe, it could be a browser extension, for that purpose. If the browser does not come with that facility built-in as you suggest. Well, somehow, I think debuggers provide the console that let you do it a bit. It's not very user-friendly. 

Michael Kimsal: Yeah. You're doing one line at a time. They're supposedly meant to debug existing code that you've written and deployed some place else, as opposed to actually doing your creation in the browser as well, too. 

Manuel Lemos: Well, in worst case, one of these days, you'll develop that extension for the browser so that the world will be much better. 

Michael Kimsal: Yeah. When I have less than 200 hours a week of work to do. 

Manuel Lemos: [Laughter]

That is the life of a slave. You are a slave of your customers. 

Michael Kimsal: Yes.

Manuel Lemos: And well, now, on the bright side of life...

Michael Kimsal: There's a bright side, there you go. 

Manuel Lemos: Yeah, there's even a saying, "Always look on the bright side of life." 

[Chuckles]

Michael Kimsal: Are you going to sing it?

Manuel Lemos: No, not me. 

Michael Kimsal: No.

Manuel Lemos: But I imagine if Artur Sosins was here. He would want all of us to sing it and whistle. 

Michael Kimsal: Yeah, like Gangnam Style. Yeah.

Manuel Lemos: And Harlem Shake and those things.

Michael Kimsal: Yeah.

Manuel Lemos: Well, maybe next month, if it is not already...

Michael Kimsal: Maybe.

Manuel Lemos: ... gone out of fashion.

JavaScript implementation of Git tools with JS Git (25:01)

Manuel Lemos: Well, anyway, as I was saying, let's move on to the next topic. This time, it's an interesting initiative about an implementation of Git tools for JavaScript. It's interesting because I've seen implementations of Git clients...

Michael Kimsal: Whoa! Hang on. This guy's talking pretty much about exactly what I was talking about. "Today, there are fewer and fewer kids getting into programming because consumer devices are locked down and don't come with a way to program them." Everybody has a browser, multiple browsers. No browsers give you a way to program them, directly. 

Manuel Lemos: That's true. I have not noticed that.  

Michael Kimsal: Directly. Yeah. And he's looking at it from the idea of getting kids involved. Because he got a Commodore 64 when he was a kid and that got him into programming. And I come from a similar background.

And I think it's important to get kids involved in programming. I think it's becoming a bit of a lost art at a kids' age. But, to me, there's a lot more value that could be unlocked by allowing people to directly program JavaScript in their browsers. Again, the comparison with Excel and the abuse that people heap on Excel via VBA. 

But carry with JS Git, because this looks pretty interesting. 

Manuel Lemos: Yeah. Well, I have not noticed that the tale of running GitHub from a browser including Git. I'm not sure what would be the use case of using Git from a browser. Maybe to use it as a development language. 

Michael Kimsal: Well, there are, or there had been, some of the other like the Cloud9 for one, the editors. The idea of Web-based editors, if you could integrate Git in that. Assuming that it's not necessarily meant to be run in a browser, he's just saying JavaScript. Now, could this be that this is meant for server side JavaScript, Rhino script and NodeJS, things like that? 

Manuel Lemos: Yeah. But in that case, I supposed you'd be able to check out a code to your local machine, right? 

Michael Kimsal: Ah-ah. Cloud9, see I wasn't even seeing your screen up there. He mentioned Cloud9. Anyway,  there probably would be a number of things that can open up if and when you have this.

Manuel Lemos: So, it's probably not to check out code to your machine but check out code to other machines...

Michael Kimsal:  Well, FAQ, where will you store the files? 

Now, it looks like he's actually meaning browser-based. Because "Where you store the files? Browser has severed the APIs for storing local offline blobs. I'll use the new file API or indexed DB." There you go. 

Manuel Lemos: Yeah, well, that could be it. Although, I'm not sure how it is these days. But I think there is a limit of size of files you can store in the local storage. 

Michael Kimsal: Yeah. And that will ultimately change at some point and then, JS Git will be ahead of the curve.

Manuel Lemos: Well, we have to wait and see, because I'm not sure why there is that limit. I think it's a limit per application. So it's tied to something on the server side. Well, I don't know. 

Well, anyway, for now, it's a proposal of a project that appeared on Kickstarter and it pledged to $12,000 and almost got $20,000, so far. So it was a successful project, I think.

I'm just not sure what is the state of the project, if it was already started or if it's waiting for the funding. Actually, I confess, I'm not even aware what exactly is the funding for. 

Michael Kimsal: To give him time to work on that or to reward his efforts and probably to ensure that it's open-sourced something. 

Manuel Lemos: Yeah. 

Michael Kimsal: I'm guessing that he probably wanted to work on it anyway, but may have done something else with his time or not. 

Manuel Lemos: Fix bugs for his customer that take too many hours. He would rather do work on this library than putting up with the...

Michael Kimsal: There you go. There you go. As you know, Kickstarter is all or nothing. The minimum I put in was the absolute minimum. I needed to know I would be able to have something useful done before I had to go back to consulting work. I use to extra funds over the minimum to continue to improve the project. This means I have more time for things like graphical diff utility, creating branches offline with GUI tags, blah, blah, blah, blah. 

So yeah, interesting. 

Manuel Lemos: It's great. I find these interesting initiatives that appear on Kickstarter. They seem to get the sympathy of many people that actually get the money faster then probably the projects would be backed by investors or something like that.

Michael Kimsal: Yeah, well, most investors aren't going to deal with $20,000 or $30,000. 

Manuel Lemos: Not in this case, but I've seen project being raised in millions in Kickstarter. What was it? I think it was one of those smart watches. 

Michael Kimsal: Yeah. Oh, the watch was a big one. Pebble.

Manuel Lemos: Yes, it's actually Pebble. I've just seen about it yesterday. 

Well, it's an alternative way of raising money and it seems to be working well. Good luck to Tim Caswell. Maybe, you can call him some day to talk about this project in a future show. 

Michael Kimsal: Yeah.

Manuel Lemos: Well, Tim, if you're listening to this, maybe if you're interested, we can get back to you and talk about this project.

Introducing Web Site features with Intro.js (30:45)

Manuel Lemos: Well, anyway, moving on to the next topic. 

Michael Kimsal: This is on my list of things to talk about, as well. 

Manuel Lemos: Oh, yeah.

Michael Kimsal: No, no, no. No, no, no. I'm saying this IntroJS. I've come across this a couple of weeks ago.

Manuel Lemos: Yeah.

Michael Kimsal: And  I was getting ready to send it to you and then, you already sent it to me. So, there you go.

Manuel Lemos: Yeah. That's because important things are being recognized as important. 

Well, anyway, this IntroJS project, I found it very simple and very effective. What it does is to show step-by-step what certain site has to offer and how you can use it.

For instance, you click here on the Show Me and it starts telling you about each part of the user interface. And this initial message is a bit dummy, saying this is a project called IntroJs. And then, you click Next and it focus on other parts of the...

I don't know if this has worked well. OK, I there are some issues on the scroll bar is not at the top. 

Anyway, then it shows the next step on the page. It chooses a number here and it highlights a certain part, a certain element on the page, just to show what is the next step. And you continue...

Michael Kimsal: And the keyword works so you can just hit right arrow and left arrow, and forward and back.

Manuel Lemos: This is really simple and very effective. I've seen something similar on certain sites. 

Michael Kimsal: Yeah.

Manuel Lemos: But I do not see a stand-alone library for this purpose. And it's really simple and elegant, I think.

Let me just go ahead through the end. At the end, I though it would do something different, but OK, it didn't...

Michael Kimsal: That's not that exciting. 

Manuel Lemos: There is no Boss monster at the end of the level. 

[Chuckles]

Michael Kimsal: No. Yeah. You could fork it and add one in if you want.

Manuel Lemos: Yeah. 

Well, I think the concept itself is very simple. It would not be hard to adapt. I'm not sure if you really need a standalone library just for this purpose.

But I've seen it in several sites. What is it? I think it was in Google AdSense. They were trying to demo new things in the user interface and they sort of showed something like this. Not exactly with this animation, the areas that fades from one to the other. 

But the concept is similar. I think this is very useful to adopt on your sites. Well, I don't know, Michael, did you like this? Do you think you will be implementing it on any of your projects to make them more useful and easier to learn for the users? 

Michael Kimsal: Yeah. I got one that I might be introducing it into sometime in the next couple of months. But I have met with a local team here in the town a couple of weeks ago and I showed this to them. Because they have an interesting UI problem. It's a kind of rich UI but they don't have a good way of demonstrating that or showing that to a bunch of people, or showing instructions I guess is what I'm trying to get at. 

And I suggested that this introJS or a variation on it would be an easy way to guide people through. Basically, click here for a guided tour and go over the six or seven parts of the application, without having to take you to another page, without having to have a PDF or screenshots.

This would be fairly interactive and keep you right on the page. So I don't think they've implemented it yet, but it's kind of on their to-do-list of stuff to review. 

Manuel Lemos: Yeah.  But I think, in general, it's a very good idea because it helps user to learn about its... User interface is sometimes a bit complex and they might get lost with all the buttons. 

Michael Kimsal: Yup.

Manuel Lemos: I somehow talked a bit about guiding the user, I'm not sure if it was two or three shows ago, about a library that are developed that did some animations. And the animations would be used to give emphasis to certain elements on the page. Like, you have several pieces of information and you want the user to focus on the next step, it just made a circle appear around the message that you used and needs to pay attention next.

And this is a bit different but it somehow has a similar purpose which is to guide the user. And I think it's a great idea.

Real Time Ray Tracing in Javascript (35:53)

Manuel Lemos: Well, moving on now to the next topic, Michael, I think you wanted to talk about a real-time ray-tracing library, right?

Michael Kimsal: Well, we can. I'll try to make this brief because it really was just something I saw a couple of hours ago. 

So let me bring this up and, oops, I just lost my place. Do that and then, let me do a screenshare. Where's the screenshare? Share Your Screen, where did it go? There we go. So, hopefully, you can see this. 

The title caught my attention because twenty-something years ago, 20, 22 years ago, I was interested on ray-tracing on the Commodore Amiga... You got an Amiga box back there, I had an Amiga 500. I was interested in ray-tracing. Not that I understood all the mask but I like the idea. 

And over the last few years, I've seen a couple of attempts of people trying to do things in JavaScript. But this one just, again, kind of came up. I saw on Reddit about an hour ago. Real time ray-tracing in JavaScript, and there's a demo and there's a code here now. 

This article talks a little bit more about... It's a blog post, talks a little bit more about the algorithms and how he partitions up his binary space partitioning, how he decides what areas he'll focus on, he'll do calculations on and which ones will be...

Manuel Lemos: Yeah.

Michael Kimsal: So, there's some that are very small and some that are grouped together, larger. 

This probably isn't going to show very well here. Maybe, I can show a quick...  Where did it go? Oh, you can try the demo. So, I'll see if this will come up and then you can watch, yeah. 

Manuel Lemos: Yeah.

Michael Kimsal: If it looks blurry on your end, it's because it's blurry on my end. It is blurry. But as you move around, you can see it's... The shading is decent and it' very fast. But this is almost Wolfenstein from 1991 or '92.

Manuel Lemos: Yeah. 

[Chuckles]

Michael Kimsal: Whenever that was. But, what's just really interesting about it is that it's all pure JavaScript running in a browser.

And there's a discussion about this on Reddit. A little bit of a discussion, then a discussion on the guy's blog as well. There's some comments there and people are suggesting do this to make it faster, do this to get more detail and so on. 

You know, it's just first pass and it was pretty... To me, even though it's blurry and chunky, the speed was still there. 

Manuel Lemos: Yeah.

Michael Kimsal: Very, very interesting.

Manuel Lemos: So it's all done with a... What is it? Is it rendering on a canvas? Is it a...?

Michael Kimsal: I need to look again. I was just more impressed with... Yeah, the quickest way to plot pixels it's to use HTML Canvas. It looks like at least that was his first... Yeah, so this first one's on Canvas.

Now, number of improvements than can be made including user WebGL instead of Canvas, using Web workers to parallelize some of the rendering and so on. So he's got some ideas to make this smoother and faster still. 

Manuel Lemos: Oh, yeah.

Michael Kimsal: It was definitely an interesting first pass.

Michael Kimsal: I guess when it moves on to WebGL, it will probably be assisted by the hardware. I mean, any GPU you may have on the machine can be much faster than it is now.  

But I think it's quite impressive. You can almost implement a Minecraft there. 

Michael Kimsal:  Yeah.

Manuel Lemos: I don't know. Maybe you can. 

Michael Kimsal: Yeah.  The only thing to think of is that was  full screen or nearly full screen, you would get, I would assume  that you would be able to get somewhat better resolution and speed if you were to scale that down, so might as well to. 

Manuel Lemos: Yeah. But you have a fast machine right now, right?

Michael Kimsal: 2.2 Ghz on an I7. Wooh.

Manuel Lemos: I7. So I7 probably already runs eight cores or something.

Michael Kimsal:  I got full eight cores. You want to see all the eight of my cores? 

Manuel Lemos: [Chuckles]

Michael Kimsal: I'll show you.

Manuel Lemos: Nah. 

[Chuckles]

Manuel Lemos: Not now. 

Michael Kimsal: OK. 

Manuel Lemos: Oh, well.

JavaScript Innovation Award Winners of January 2013 (40:09)

Manuel Lemos: Well, anyway, we're getting closer to the end of this podcast. We're just moving on to one of the last sections on which we comment on the nominees of the Innovation Award.

This month is the first time where we're  going to comment on the winners of January. They published these classes in January and they were nominated in February, on which they were voted. And now in March, came out the results. And the winner is Jonathan Gotti. 

Johnathan got a couple of  classes, but first, Michael, which ones would you like to comment?

Michael Kimsal: I can't believe John Gotti got the first two places. That just seems made up to me. 

Manuel Lemos: He is Gotti.

Michael Kimsal: Yeah. 

Manuel Lemos: Not a very good  joke. 

Michael Kimsal: Yeah, I don't know how well that name actually trembles outside the US, but...

Manuel Lemos: No, it's French. 

Michael Kimsal:  I know. His name is French, but anyway...

So, I was going to mention the GeoNames one first and the jQuery, the audio plug-in. But talk about whatever you like first.

Manuel Lemos: No, go ahead. There are just  five. We can talk all about those just very briefly, because we're ending the podcast. 

Michael Kimsal: Well, I think I'm sharing my screen here. This first one that came up... Let me move this over here. Can you see my screen OK? 

Manuel Lemos: I'm seeing your background.

Michael Kimsal: Oh, OK, there you go.  There you go. 

Manuel Lemos:  OK. 

Michael Kimsal: So I'm sharing the screen, not the window. I thought I was sharing the window. Let me try it one more time. Yeah, I just want to share the window. There we go. 

So the first one kind of caught my eye, because the idea of dealing with geo information recently came up. I was not familiar with geo names specifically, but GeoNames, I don't know if they're .org or .com. I guess they're .org. Geonames.org, I think, a geographical database. 

Manuel Lemos: Yeah. 

Michael Kimsal: They have an API available. 

And where did this go? I got all these up here. Yes.

And Tom Schaefer has written a JavaScript client to deal with, to making calls and pulling information back from there.

And this is the whole file. It's pretty small, but he's mapping all of the API calls to the various domains and pulls stuff back. And I think, yeah, there were demos of actually doing a Web service call... 

Where was this? Actually, there's not that much at all here. I thought there was a little bit more here. There wasn't. I was looking at something before.  Well, actually, it's not going to be much here because it's just something calling a library. But as you can see here, there's not much code and you'll be able to use that library, which itself is pretty small to call the GeoNames API specifically. 

So it's interesting., because I haven't seen that many JavaScript-based tools that  give you access to any API stuff or geographic stuff outside of Bing Maps and Google Maps and stuff.

Everybody really focuses on the maps, the visual maps, as opposed to the textual data that's available. So I though this is pretty interesting. 

Manuel Lemos: Yeah, that service is very old but it's quite complete to get you information of countries, not just geographic information. I mean, it can get you even population and things.

I remember having used that service even when there was  no API. I had to scrape the page to extract some results. I do not recall exactly what was the purpose but it was something related with countries. I think it was to validate user groups for some reason.  But I'm not using that anymore.

Oh, I remember. It was when PHP Classes had mirrors and then the mirroring thing would figure what would  be the closest mirror to your country based on the  coordinates.

Well, anyway, there are no longer mirrors, it's no longer useful. Now, it seems  they evolved it and put it proper API and Tom Schaefer from Germany submitted that class.

I think it may have several purposes beyond what Google Maps provides. Google Maps is not just maps. It provides also geo-coding and some information that is not exactly visual. But it could be a good  complement for maps-based application. 

And other than that, which other class would you like to mention?

Michael Kimsal: Well, the other one to mention is... I'll start this here.  Where's the name of it? I got to go back one page.

This is the HTML5 audio tag player.  This is the actual source code to this. From Pierre-Henry Soria, I hope I'm saying that right. Or close to right.

Manuel Lemos: That's very simple. 

Michael Kimsal: Very, very simple here. Yeah. It's  just saying, "Hey, go either return me an audio tag," which is I think the kind of modern way of embedding a reference to an MP3 file or an <embed> tag.

Manuel Lemos: It's for some flash player.

Michael Kimsal: Yeah, an audio with <embed> fallback is really what this is. The <embed> tag is in case necessary for IE7 and IE8 or maybe some other browsers. There's really not too much to this, but it's one of the winners and it's functional, certainly. 

Manuel Lemos: Yeah. 

Michael Kimsal: It's very simple, make sure you have jQuery, pull in your sound file and then you can say,  if you use  the $ in jQuery, $.sound.play, and play it. And it will automatically add that tag appended to the body and do autoplay. 

Manuel Lemos: Yeah, it's very simple but it does something that... Well, in the beginning when we started this Innovation Award,  almost every package is innovative because it's compared to what existed in the site. 

Michael Kimsal: Yeah. 

Manuel Lemos: It's natural that some package are very simple although they do something that did not exist before. 

On my part, I'll mention the other three starting from the last one. 

Wait, let me try to screenshare it right. 

This one is Dynamic Button to Scroll to Page Top  by MarPlo. And this is basically also a very simple component that shows you a link at the bottom of the page if the page did not fit in the current viewport, I mean if the page is stored in the links of your browser window, I mean the height.

And it's also very simple but it has its uses. And this one is from MarPlo from  Romania. I'm  not sure, MarPlo is a nickname, not exactly a real name.

And the other two that I wanted to mention, they are both from Jonathan Gotti. I hope Jonathan can excuse for not  spelling his name in proper French.

Anyway, Jonathan has been a long time contributor, not just in JSClasses but also from PHPClasses. And this time, he published two very interesting classes,  objects, which would probably be more accurate to call it. 

One is jQuery plug-in to handle touch events in a way that work also with non-touch screens. So they would be emulated by mouse clicks.

We could for instance emulate a swipe with clicking on a window and drag the mouse to one of the sides and that would be interpreted as a swipe. And if you have a touch screen, it will intercept the correct touch event, not the clicks and the mouse drags.

And this one is one of the two of Jonathan that were nominated. The other is the winner, which is basically a very, well, not so simple, but probably simpler library that emulates jQuery but with just some of the basic functionality. Not all what jQuery tries to implement nowadays.

So it provides compatibility with jQuery and then, also another library that attempts to do the same called Zepto. So, Zepto emulates jQuery. Everybody's trying to emulate jQuery and trying to be simple. So, I think this is useful for anyone to minimize your code and do not want all the functionality. 

Michael Kimsal: Yeah.

Manuel Lemos: But it already includes quite a good chunk of the jQuery functionality. 

Michael Kimsal: Yeah, I was looking at Zepto-minimized gzip is 9.7K and this one, its basic compatibility, the library is 7k or 7.3k. So even smaller than Zepto. For the people that really want something minimal...

Manuel Lemos: Really, really, really minimal. 

Michael Kimsal: Zepto is kind of the go-to, but this is interesting that it's even... If it's actually really compatible and still even slightly smaller, more power to you. Great.

Manuel Lemos: You save a few more K. 

Upcoming articles on the JSMag magazine (50:32)

Manuel Lemos: Well, with this we conclude this section of the podcast , and move on to one final section on which Michael comments on the upcoming topics of the JSMag magazine. 

Michael Kimsal: Well, good morning. 

Manuel Lemos: [Chuckles]

Michael Kimsal: You know, I've never done this before, so I'm going to... 

Manuel Lemos: Right.

Michael Kimsal: Hang on.

Manuel Lemos: You've never done this before this month.

Michael Kimsal: No, no. I mean, I've never done 'this'. So what I'm going to do is, look at that, I'm actually going to share.

This is last month's issue. Not quite... It's April on Monday. I think we'll probably have our April issue out, probably not on Monday, but probably soon a after that. Probably Tuesday or Wednesday, with the holiday weekend trying to get everything wrapped up. 

It's a little tough, but we have... Jeanine Meyer has continually done a series for us on different techniques for doing animation and client side interactions and has another piece on that.

We have potentially a piece on Modernizr, kind of  a current view on the Modernizr library. Possibly, he's looking at the Isotope jQuery plug-in. 

And lastly,  I'm just looking at  the screen  here, Mike Schwartz has for a long time contributed series on his SilkJS server side library. He's continually writing. He wrote me last month and said he had an idea for something. And it took a little bit longer for him to get... He was sick and got better. But he's got an article that he's contributed on doing Boolean Algebra on JavaScript. 

And I'm not going to give away too much on this, but he was describing to me some of the tricks that he's been doing to do faster Math on sets of information and bitwise operations and things. Which, for me and you, I guess for me, anyway, didn't necessarily sound like it would necessarily be useful day to day.

However, probably two days after he told me that, I was having lunch with a friend who was doing a lot of JavaScript stuff on an iPhone or doing mobile Safari stuff. And I started thinking about this and the speed with some of the Boolean Algebra stuff, the speed which you can do stuff and the reduced memory both make things faster in mobile devices. And I would imagine, it would have a bit of an impact if you're doing a lot on battery life.

So I'm not  suggesting "Hey, read this and you'll improve your battery a lot." Or that this is all brand new stuff. But it was kind of new to me,. It was interesting, being certainly not a Math geek by any stretch of the imagination. People that are Math majors would look at this and say, "Yeah, I knew that 20 years ago." But I didn't, so...

Manuel Lemos: But what would be the use cases for those Boolean Algebra? Any specific applications or just... ? 

Michael Kimsal: Let me try to pull up a draft so I can share something with you briefly. Because my has my draft, went away, old age. There we go, open this.

Manuel Lemos: Murphy's Law. 

Michael Kimsal: Yeah. Oh, you know, your power go out before, too.

Manuel Lemos: Yeah, always something happens when you think it won't.

Michael Kimsal: Gosh.

Manuel Lemos: I guess everybody needs to read the magazine.

Michael Kimsal: Well, I'll point out one of the references here is to talking, actually mentioning, that the Mozilla Developer network  has a page on bitwise operators, suggesting why you should use them.

So they can do operations on binary representations but they'll end up returning standard JavaScript values. One of the benefits is going to be speed. That may be the primary one for some people. But what from I'm getting from this is there's an element of reduced memory usage as well, being able to store and operate on some data structures in a more efficient manner. 

Manuel Lemos: Well, other than that.. Did you finish?

Michael Kimsal: Go on. I'm finished awhile ago and then, you kept asking questions. 

Manuel Lemos: No, I mean, are there more topics on the magazine? 

Michael Kimsal: Oh, no. No, no, no.

Conclusion (55:10)

Manuel Lemos: Well, I think, with that, we conclude this podcast. We covered quite a lot of interesting libraries and things that go on in JavaScript world.

With that, on my part, it's all for now. Thank you, Michael, again for coming.  Bye. 

Michael Kimsal: Bye-bye. 

[Music]