Contents
Listen or download the podcast, RSS feed
Watch the podcast video
Read the podcast transcript
Download Size: 56MB Listeners: 1278
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
- TogetherJS Site Colaboration Tools
- Rainyday.js Simulation of Raindrops
- Flowtype.js Responsive Typography
- Hiding text in images with Steganography.js
- IP2Location Geotargetting based on IP addresses
- Codenvy cloud IDE
Read the podcast transcript
Contents
Introduction (00:20)
Detecting Bugs using JavaScript Static Analysis Tools (1:30)
Site Colaboration Tools with TogetherJS (7:54)
Simulation of Raindrops with Rainyday.js (13:00)
Responsive Typography with Flowtype.js (15:46)
Automatic Page Loader Progress Bar (25:32)
Hiding text in images with Steganography.js (30:10)
IP2Location Sponsors the PHP Programming Innovation Award (34:55)
JavaScript Innovation Award Winners of July (42:35)
Conclusion (1:06:56)
Introduction (00:20)
[Music]
Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast hangout. As always, I have here with me, Michael Kimsal. Michael, is that you? Oh, you are different.
Cesar Rodas: Yeah. I'm a little bit different.
[Laughter]
Manuel Lemos: Oh, obviously, it's not Michael Kimsal. Unfortunately, Michael could not make it. He's very, very busy with his work and also the IndieConf conference that he organizes every year. And hopefully, he'll get back in a couple of months.
But fortunately, I have here with me Cesar Rodas that is going to help me with this Hangout. How are you Cesar? How are you doing?
Cesar Rodas: I am doing fine, thank you. And how are you doing?
Manuel Lemos: I'm fine. Always trying to record interesting hangouts. And this month, we have a quite a few interesting topics of things that have been out, were released, the libraries and the tools of the interest of the JavaScript developers.
Detecting Bugs using JavaScript Scope Analysis Tools (1:30)
Manuel Lemos: And what I would like to start with this month is about one thing that... let me share the screen... related with using scope analysis tools to detect bugs that may creep in your code.
Scope analysis tools are great because they allow you to analyze a code statically, I mean, before you actually execute it and tell you about things that are potentially wrong.
So, I found this interesting article here regarding scope analysis tools for JavaScript code of Ariya Hidayat. I'm not sure if I'm pronouncing his name right.
But the article is very simple and interesting. It talks about a tool name Escope which is available on GitHub. Let me try to also increase the font here.
And what it shows, I mean what it can be used for is to do some static analysis for you code and you can actually see how your code is structured. There's a video here that shows a demo of the tool being used which is very interesting, because it can spot some things that may be wrong.
But back to the original article, I have here a very simple example of a function that is declared and there is a use of a variable that was mistyped here and the actual name of the variable initialized is incorrect. So at the runtime, it will trigger an error.
But hopefully, it would be more interesting for us that we can anticipate these mistakes that unfortunately are very common, so we do not ship such a buggy code.
Cesar, have you ever used any static analysis tools in JavaScript or maybe in other language and found it useful to detect the bugs early?
Cesar Rodas: Actually, I've been using some dynamic tools before for JavaScript. The thing is that it wasn't really important because I wasn't doing much JavaScript until a couple of years ago where I was also playing with a Node.js which is JavaScript but in the server-side.
So there I used all kind of other tools to just debug memory leaks basically. And that was one of the first mistakes that I had. I forgot to declare a given variable as a local or I forgot a comma so when I was declaring many, many variables, so that was a common mistake. So if I had one of these tools, my life would just be much, much easier.
Manuel Lemos: Yeah.
Cesar Rodas: But, yes. Then, I spend... This problem it really doesn't exist in other program languages, as far as I'm aware of. In Python and PHP, if a variable is declared, it is always local. In JavaScript, it keeps looking in upper scope until it becomes global eventually. I believe that many people, they did that for security reasons, many other design their program languages for performance issues.
But yes, I've been definitely using that. I've never seen something like this before because JavaScript is a very dynamic language. So, you can do one simple thing in a million different ways. I've been using the Google Developer Tool for detecting all this kind of problems.
Manuel Lemos: Right. Well, as explained in the article, that's sort of the late way to detect bugs because you need to actually execute to see the errors. Well, everything is useful to minimize the number of bugs that you may have in your code.
Lately, I've been using a lot of JSHint of JSLint to... I think it also does some static analysis of code. And I was not aware of this tool, Escope. And I think it may be useful besides what JSHint and JSLint provide.
I just did not find a sort of online version of the tool like there is for JSHint and JSLint that you can just go in a page and paste the code and see what comes out of it in terms of eventual mistakes and warnings that may have been there.
Well, if there isn't such a thing, it would be interesting for the authors to develop an online version of the tool so you don't have to download and install it to actually use it.
Anyway, I think this is useful and hopefully, our listeners will also find it useful.
Site Colaboration Tools with TogetherJS (7:54)
Manuel Lemos: Now, moving on to another project that I personally found interesting is a tool for having collaboration features to your site. In this case, it is TogetherJS. I think this is developed and posted by the Mozilla company project.
Basically, I think it adds features like the ability for people to go in a site and have users communicate with each other while they are online. And I think it also provides means for people to talk.
Let me try to just load a demo here. As you may see on the right, there is a sort of menu. I was wondering if I could drag it or something because it may get in the way.
Anyway, this is implemented by just by inserting a couple of JavaScript files and it adds the menu here that you can control several things about the current user that is collaborating with eventually others.
You can have something to invite some other user by email or another instant messaging program. And there is also the ability to activate the microphone from your browser so you can talk to the other person.
And there's also the another chat feature and something else that I'm not sure what exactly this is. They call it "silent seal". I think it's something to opt-in, to follow some participants.
Well, I have not tried this in practice but it looked interesting. Cesar, have you tried any tools like this that you would like to comment about? Do you think this is useful? What do you think?
Cesar Rodas: Actually, I have a product that I am developing with a friend which does more or less the same thing. I would definitely just take a look at what this project is doing because this is open-source.
I've been digging a little bit in the last couple of hours and it looks really interesting. They shift, they opened the server-side and the client-side, both within JavaScript. The server-side is written for Node.js. They used the WebSocket.
And the aim of this project is to do collaborations. From the top of my head, I can say that you are in an e-commerce Web site and you don't know how to buy it and you just call to their support and you can both share your screen right there and get help.
Manuel Lemos: Yeah.
Cesar Rodas: So, that's how I find that useful.
Manuel Lemos: Yeah, that seems to be more towards commerce, e-commerce or online support sites.
This library here seems to promote the collaboration between users and developers of a site. Lets say if you have a problem in a site that you have to deal with and your users are facing that problem, maybe you can communicate with them while the problem is happening and say they can describe it better to you via chat or voice or something. That's what I understood about the purpose of this.
And well, I don't know if this is the exact purpose that was meant, but that's what I read. And in that case, it seems very interesting and helpful for developers. I could remember several times that I could have used a tool like this to eventually determine what is going on in certain pages of site and see probably what the users are seeing and try to fix things.
In that case, I think it makes sense. This TogetherJS project of Mozilla could be very useful to make sites better for developers that are working on them.
Simulation of Raindrops with Rainyday.js (13:00)
Manuel Lemos: Well, regarding that, I think that's all we would have to talk about. But now, moving on another feature. Another that I thought it would be interesting to comment on this month is a project named the Rainyday.js.
Let me share this screen here. OK, there it is.
Well, basically, this is probably something cool but probably not that useful, because it just presents some features. Whatever you have on your page's background and then just show a sort of an effect for rain hitting on a glass. And it kind of shows an interesting effect.
Let me try to open a demo screen here. I don't know, can you listen to the music playing?
Cesar Rodas: No. I cannot. I can only see...
Manuel Lemos: I don't know if the music that I'm listening in my headphones is going to the hangout itself. Well, anyway, I don't know if you can see more or less clearly what is going on. But I think it's a cool effect. It seems like a few drops of rain hitting on a glass. And then, they roll over the glass and it really seems as if they are real raindrops.
It's kind of funny. I don't know if you can see it very well in the streaming because my window is quite large and I know that hangout try to scale it down to reduce the bandwidth. But let me tell you, it's great.
And anyway, I'm going to post the link for this component in the podcast notes, so anybody that is interested and actually watching this, it's very cool. Other than that, I don't know if it's more useful than that causing an impression.
Responsive Typography with Flowtype.js (15:46)
Manuel Lemos: And moving on with the podcast, now I'm going to talk about a library that provides a different take on what is called the responsive Web design. As you know, what is called responsive web sites are just sites that can adapt to their layouts according to the size of the screen.
And this FlowType.JS not only adapts the layout but also adapts the size of the text that has been displayed. As you may see here, I can use this button to increase the window and the content that is being displayed or decrease it. And as you may see, it tries to adjust the size of the text, so it more or less takes the same text on every line to show the text and then adapt to the screen width.
Cesar, have you been working on responsive websites? Have you ever seen anything like this that adjust the size of the font, not just the layout of what is being displayed?
Cesar Rodas: Actually, I was doing a couple of hackings to get this cool effect. Basically, the problem that I actually had was that I was in a Web site that load custom fonts. That means that when you are rendered the website and the font is not there, that means that your layout may be broken. Then, a couple of seconds, it is fixed. So I did a couple of JavaScript lines to just check the font size with the font dimensions, with width and height.
This library, it seems really cool.
Manuel Lemos: Yeah.
Cesar Rodas: This is a really cool thing for those... I saw a Web site a couple of days ago that was for the Kindle. So, basically, you will just go over your browser and just flag it, I want it to my Kindle.
So, it will change how that page looks, so you can read it like a book from your Kindle and they were definitely doing, implementing something like this library. So I find this really, really cool especially for those reading devices such as, I don't know, a Kindle or similar or iPad or something like that. But yes, definitely cool.
Although, it is important to mention, I was reading an article about responsive things. It is called if your web site is responsive but also you need your backend so it could be responsive. Say, you can see your web site core in a mobile phone but if the ongoing traffic is high, I don't know, 300 kilobytes, that's a lot for mobile.
Manuel Lemos: Yes, that's a good point. Yes, I noticed that because there's some people... Usually people that are more concerned about responsive Web design are Web designers.
So they are not working on the backend and so they keep forgetting the detail that if you are displaying a long list of information, it's not just adapting to the size, but also to the bandwidth. Probably, the device is on a connection that is not very good and they probably have issues with the bandwidth.
Cesar Rodas: And not only that. Yeah, many people are paying not for the bandwidth but for the traffic.
Manuel Lemos: Exactly.
Cesar Rodas: Say you pay, I don't know, $20 and you have 1 gigabytes and that's it. If you go over that you need to pay more. So, that's not good.
Manuel Lemos: Right.
Cesar Rodas: So, at most, just one of the topics mentions. But of them, I think this library is really cool and I would definitely use it.
Manuel Lemos: Right. It's interesting because the way it seems to be working... maybe I'm getting it wrong... it's working in an inverted way.
Let me bring it back again so I can explain what I mean. For instance, do you notice that... Well, now it's the largest size and when it is at the largest size, it ease with the font at the largest size too.
So if I reduce the screen, it's also reduces the font, so it would probably would be harder for the users to read. Shouldn't this be the other way around, like if the screen is small the text should use a larger font so you can read better?
Cesar Rodas: No. The thing is this, if you scroll down, you'll see how it works. It works that you say it like this text, it works fine with this thresholds, basically with a minimum font and a maximum font or a minimum width for your container or a maximum depth for your container. And as far as I see it, it is optimized for reading devices such as Kindles.
Manuel Lemos: Yeah. Well, I don't know, that seems very small for me. If I have a small screen for instance and I have the Kindle app on my mobile phone... which has about 4.3 inches, I mean the diagonal width... and what happens is that since the screen is small, I have to increase the font so I can read the text better.
Probably, the are that the text would occupy would be larger but in the end, I can read it better because it's a small screen and that's it... smaller screens, larger fonts. That what I think it should be.
Cesar Rodas: No. But think of this, I am with my laptop and I plug it to my TV. So now, I have a very very large monitor, a screen of 32 inches. So there, if you have a small font, you won't see a thing. So, the font they need to grow in size, I've been there and I know how...
Manuel Lemos: Well, if you have a large screen, I think it makes sense if you have a larger resolution, but if the size is small, it makes sense to increase the font. But if the size is always small and the screen is not big, you need to use large fonts, even if the layout can be a bit messed up. But at least you can read it better because, well, you cannot really read very very small letters, I think.
Cesar Rodas: Yeah. The thing is that it lets you configure that. So, you can say regardless of anything, the smallest font is 14 pixels and that's it. And the maximum font is 40 pixels. So if you are in a projector or in a bigger screen, your fonts will be larger.
Manuel Lemos: Yeah.
Cesar Rodas: That's how I think. I understand what you mean and that kind of make sense, too. I cannot say much though because I am not a phone person. I have a phone just to create a Wi-Fi network and that's it. I try to avoid it as much as possible.
Manuel Lemos: Yes, OK. Well, maybe I did not go through the documentation of this library. Maybe it is something that is configurable and I just could not figure it out. But anyway, I think this is useful and anybody who is looking into responsive user interfaces could look into this.
Cesar Rodas: Definitely.
Automatic Page Loader Progress Bar (25:32)
Manuel Lemos: OK, now moving on to the next topic. This one is quite simple. It's about those pages that probably have a reasonable amount of content and probably would take a long time to load.
And to reduce the anxiety of the users, they could use a progress bar that somehow shows them how much has been loaded so far. For instance, if you go here, you can see, I don't know, it's very small but there is a thin line at the top. And also the letters here start filling up.
Let me reload this so you can see it again. It loaded very, very fast here, probably because I'm on a good connection.
Cesar Rodas: First world problem.
[Laughter]
Manuel Lemos: Yeah.
[Laughter]
Manuel Lemos: Whatever that could be, maybe it's also cached.
Anyway, from what I understood, they have several styles that you can pick to define the way your progress bar appears at the top. There are some that look like Mac OS, others that look more like Windows and other types of user interfaces. So, you get the choice of styles for defining how things look.
This is a simple library but I thought it would be interesting to comment about it here. I think regarding this, there is not much to say. Let's move on to...
Cesar Rodas: I have a couple of things to say, though. First is that I see YouTube, I don't know if they are using this particular library but they are doing something like that.
Manuel Lemos: Oh yeah. I also saw that thin line that appears at the top to show the progress bar.
Cesar Rodas: Yeah. And they implemented this because even if you feel that you are navigating through their site, you are just doing a couple of AJAX things. So the things that may take time, so that's why they are using that.
Also, I believe that this is not rocket science, but it is useful. Web sites, they need to be fast and if there is something wrong, people, they would just leave your site.
Manuel Lemos: Right.
Cesar Rodas: So, if you show them somehow that you are doing something, they might wait there.
Manuel Lemos: Might, they might or might not wait.
Cesar Rodas: Yeah, might. Yeah, they might wait.
Manuel Lemos: You might as well say, Oh, this site sucks, I'm not going to wait.
Cesar Rodas: Exactly.
Manuel Lemos: At least it increases the chances of the user not leaving when the page is still loading. I'm not exactly sure how they track the progress of the low-level pages. Maybe it's something that is controlled throughout the page.
Cesar Rodas: No. From the top of my head, how I will implement this is that I would count all the DOM elements like images and things like that and I would just estimate like, OK, three images are missing. And I upload two so I am in 30-something percent. So, something like that.
Manuel Lemos: Does it assume that the page has to be loaded and only then starts showing the progress for images and other external stuff.
Cesar Rodas: It shouldn't. It shouldn't. But I haven't load that further. It should show their thing as soon possible, all the while it is pointless unless you are doing some other requests and things like that.
Manuel Lemos: Yeah.
Cesar Rodas: I do remember doing something like that back in the days when I started with Flash.
[Laughter]
Manuel Lemos: Oh, that was a long, long time.
Cesar Rodas: Yeah, probably ten years ago. I was definitely thinner and much younger.
Manuel Lemos: Oh, really.
[Laughter]
Manuel Lemos: OK, OK, well, let's move on.
Cesar Rodas: Sure.
Hiding text in images with Steganography.js (30:10)
Manuel Lemos: And as I was about to start talking about, there's another interesting library that I also found here which does something unusual which is to use what is called steganography to hide text in pictures.
And this seems to be like a thing for secret agents that are trying to pass information without others noticing, hidden messages.
Here in the page of the project, it shows the Last Supper of Christ with his fellows. This is just something to relate with the intention to pass secret messages on pictures or other forms of communication. But this library does not have anything with religion or anything.
What it basically does is to create an image on a canvas element and then generate the necessary, I mean changes on the picture using the alpha channel to sort of test additional information very discretely. So you would hardly notice that the information that is on the image is there. But you can then use on the other hand a way to extract that information and see what it was pass.
Cesar, have you ever seen anything like this? What would be the purpose of having something like this? What do you think?
Cesar Rodas: I believe that the science, what the painters did a couple hundreds of years ago, had nothing to do on what this program does. They did the same thing but with different techniques.
How I believe it works is that it adds some extra bytes in every pixels so you can decode it using the same program but the image to the human eyes, it looks the same.
The cool thing about this library though is I was testing it and it did no backend request. Like it loaded my image into a canvas and then it create an image in another canvas and I don't load it, just browser up. That was cool.
Manuel Lemos: Yeah.
Cesar Rodas: How this could be useful, I don't know. I have no idea. But it's cool.
Manuel Lemos: Maybe Edward Snowden has a clue to what...
[Laughter]
Manuel Lemos: ... this could be useful for.
So if he want to pass information between two hands, they would send a picture and smuggle some information inside using this steganography approach of using the alpha channel to put some information in there. And then, on the other hand, you would be able to sort of decrypt or maybe decode not necessarily using encryption on them. Maybe, who knows?
But for the person looking at the picture, he would not be able to detect anything because the alpha channel is basically a transparent... It's just a layer that defines the transparency of a picture and if you can use the lower bits of the alpha channel values, it will probably not even affect the way you see the pictures.
So, only with some software that can analyze the picture and see there are some bytes in there, you can detect and decode those codes and bytes and do something useful.
IP2Location Sponsors the PHP Programming Innovation Award (34:55)
Manuel Lemos: Well, moving on with the podcast now, we are reaching the end of this episode when we started talking about the latest classes, objects, nominated for the Innovation Award of JavaScript in the PHP Classes site.
But first, I would like to mention, starting this month, there will be a couple of new sponsors. Fortunately, they have joined the list of sponsors that is growing now. And let me tell you a bit more about each of them.
One of them is IP2Location, which is a company that develops those databases of geo-information that relates location with the IP addresses that you may need to deal with in Web applications.
For instance, when you want to know about the location of a user, you can look his IP address in a geo-IP database that IP2Location provides.
And they have a very basic version of the database that is free. But if you want a more complete version, you need to upgrade.
And in this case, they are providing as prize for an eventual winner of the Innovation Award the DB15 edition of this database that includes not only the IP address to country relationship but also details about the specific regions, city, latitude, longitude, zip code, time zone, area code. And all that is provided when you look up to one of these databases.
So they provide this as a prize and you can get a full license for one year. So you can get any updates that they do regularly to this database.
And I think this is useful when you are developing an application that needs to deal with geographic details of users and whatever is related with IP addresses.
Cesar, have you ever used any of this kind of geographic information related with IP addresses?
Cesar Rodas: Actually, I am using the free database from the IP2Location. I like this product for several reasons. I will mention a couple. First one is that there's a free database which is not very detailed but it is good enough, so you can know from what country and from what region a given IP comes from.
And the second is that they let you download that database so you can host that locally. Because what other companies are doing is that they are offering to use some API, but calling an external API for every dozen million times. It is expensive, it takes time.
Manuel Lemos: Yeah.
Cesar Rodas: They got it right. So, IP2Location, they give you the possibility to just host that into your own server, so it is much, much faster.
Manuel Lemos: Exactly. I think I used it in the other system that is using site for presenting ads that are targeted to specific countries. So, if the user is in a certain country, it can see certain ads. And if he is from other country, he probably sees other ads. And that's one of the interesting purposes.
And now, mentioning the other sponsor... which is relatively new company, or at least as far as I knew... is Codenvy. I need to spell the name correctly because people might miss it because it does not have an E in the middle of the name.
Let me share the screen here.
This the page of that product. And what they do is basically provide development tools on the cloud, including an IDE which is the core of their product. And they can support many languages including JavaScript on the server-side with Node.js, PHP, Python, Ruby and so on... many other languages.
And I think this is very interesting, for instance, for companies that need to have their developers providing the code immediately on the Internet, so they can look at it instead of waiting for them to commit to repositories.
I think that's the scope of... I just realized about it recently and they were interested in sponsoring the site, thankfully. And welcome for them.
I would like to just bring to your attention. If you want to look at this IDE on the cloud, the correct way to spell it is Code and then Nvy. So, it's not Code Envy with an additional E. So it's C-O-D-E-N-V-Y.com.
Well, given that I would like to thank you, both these companies, IP2Location and Codenvy to sponsor the Innovation Award.
And other companies that may be interested in sponsoring also the Award, I would just like to let them know that if they sponsor the Award, they get free exposure to their products, no money is involved.
You'll just need to commit to provide an interesting prize for any developers that are nominated for the Innovation Award and pick their prize. So it must be an interesting prize for JavaScript developers.
And they will get plenty of exposure, not only in the Award pages but also in the pages of the packages of the author that picked their prize.
JavaScript Innovation Award Winners of July (42:35)
Manuel Lemos: So, given that, let's move on to the actual Innovation Award nominees this time of July 2003. And they were...
Cesar Rodas: 2013.
Manuel Lemos: Yes, sorry.
Cesar Rodas: Not a problem.
Manuel Lemos: That was many years ago.
[Laughter]
Manuel Lemos: I'm trying to increase the font here and what you can see is that there were six nominees. And I think we have time to talk about all of these six.
Cesar, which ones would you like to comment first?
Cesar Rodas: OK, I can't help myself. I will talk about things that I would like. So, first, let me see if I can share my screen. Let me see if I can just go there. Can you see it? Is it readable?
Manuel Lemos: Hang on.
Cesar Rodas: Manuel?
Manuel Lemos: Well, I'm trying to... No. What happened? Did you switch the... No? OK, you need to restart. You cannot minimize the window or else it will stop the screen sharing.
Cesar Rodas: Yeah.
Manuel Lemos: You need to pick the window, OK? Not the whole screen.
Cesar Rodas: OK, let me see. I don't see what I...
Manuel Lemos: Well, when you...
Cesar Rodas: OK, I'm just having something of a problem. So I would just mention them.
Manuel Lemos: Yes. What you can do is just go on the share screen window and pick the specific window of the browser that you want to show. Not the first one which is to show all your desktop.
Cesar Rodas: The thing is that I can't see... I choose the... OK, I think I will just mention the classes.
So the first class that I'm going to talk about is the TemplateJS. It was written by Franz Josef Brenner. I believe I'm pronouncing that correctly. He's from Austria. And basically, it's a template engine that is compiled into JavaScript. It seems very very interesting and the implementation is extremely simple. So I like both things.
Manuel Lemos: Actually...
Cesar Rodas: I like that particularly when you are working with... Yes?
Manuel Lemos: Oh no, I'm just mentioning that there are several other template engines. What I wanted to say is that this one was nominated because it does something different which is to take objects as variables on the template. Maybe I can show an example here. For instance, if you go to the example page, you pass...
I don't know if, is this is large enough? Oh, OK.
Well, you can pass objects as parameters. And then in the template, you can...
Cesar Rodas: Yes.
Manuel Lemos: You can put, for instance here, you can say 'dimensionX'. So it will just go on the template and pick the attribute dimension X. So this is different than the usual template engine that just takes individual values that are scalar. They are not objects, they are not properties of objects. So, this is what this class does.
It's new because there are many other template engines that are more simple. And I think this is probably more objective for the types of programming on which we use templates. Because you can specify properties and objects in the actual template. So, it would be more semantic, I think.
Sorry, I was not sharing the screen.
Cesar Rodas: Yeah.
Manuel Lemos: I talked a lot but I was not sharing the screen. You should have warned me.
[Laughter]
Manuel Lemos: What are you doing? Aren't you paying attention? That's a bit confusing because you need to select the right window.
Cesar Rodas: Yeah. It doesn't play nice with my Linux and my multiple desktops. I have like eight. So it didn't work.
Manuel Lemos: Yeah. And OK, let me just pick the right window here.
Cesar Rodas: So, shall we talk the second class or do you want me...
Manuel Lemos: No, I'm picking the right window here. That was the problem I was having. It was fading away because I was minimizing this. OK, can you see it now?
Cesar Rodas: I can see it.
Manuel Lemos: What I was saying before is that you pass objects as parameters and you can take properties of the objects. So, this an object that contains another object. This object here has a name and the dimension is to another object that has two properties, actually three.
Then, in the template, you can go here and say, I want to put a dimension X here, dimension Y here, and dimension Z here. This is the thing that this template engines does different. That's why it was nominated for the Innovation Award.
OK, I just wanted to comment on this because sometimes people complain, Wow, we just nominated a class for being innovative when in reality it does the same as others. No, it's never the case. It always has to be innovative. So, kudos to Franz Josef Brunner that actually this month submitted other classes and it was interesting. I hope he continues to do so.
So, which other class would you like to mention besides this one?
Cesar Rodas: I picked another template class which is the Contemplate.
Manuel Lemos: Oh, you like templates.
Cesar Rodas: Basically, it process some PHP and it make... Yeah, I don't like template itself. I like the...
Manuel Lemos: Template engines.
Cesar Rodas: ...process which runs in the middle which is from reading from one input.
Yeah, that. I don't like this. I don't like frontend things. I try to avoid them as much as possible.
But he took advantage of many things like PHP codes. It looks very much like JavaScript.
Manuel Lemos: Yeah.
Cesar Rodas: For instance, there is a project which is the PHPJS.org which basically they had implemented the whole, the library from PHP into JavaScript. Because JavaScript, it doesn't care about dollar signals, so all the variables they do make sense. So that was impressive.
The thing that I like about this class is that it gives you the possibility to use probably a couple of this that you may have into PHP.
Manuel Lemos: Right.
Cesar Rodas: And you could use those directly from the frontend or the backend using Node.js. And this class was written by Nikos M. He's from Greece. I don't know his family name, it's just M. I don't know what that could mean.
Manuel Lemos: Mysterious. M as mysterious.
Cesar Rodas: Yeah.
Manuel Lemos: He actually also published several other interesting classes and we'll get back to those. Just to mention, apart from what you said, this template engine, he also provided a PHP class that was submitted to the PHP Classes repository. And what this classes have in common is that they share the same template format.
So, the template format that I hope you can see... I don't know if this is large enough. Can you see it here? Is it large enough for you to read?
Cesar Rodas: I can see it.
Manuel Lemos: OK. So this is the template format. And you can take a look at it and it pretty much looks a lot like PHP.
Cesar Rodas: Yeah.
Manuel Lemos: What matters is that this template engine is developed on both PHP and JavaScript. So, if you have a PHP application, you can render your templates on the server-side with PHP or on the browser side.
And this is great especially for AJAX applications on which you are sending the content to the browser... I mean, the parameters and stuff... that you can use to pass to the template engine and it will render the template.
So you don't have to send the processed HTML to the browser. It can be processed on the browser side using JavaScript or at the server-side using PHP. So, that's why it was nominated. So I think this is a great idea. I have never seen anything like this. Definitely, it's from somebody that works with both PHP and JavaScript.
Other than that, I think it would be interesting if you could comment on another one and then I'll comment on the remaining three. So, which other class did you pick?
Cesar Rodas: I'm going to talk about the OPTICS class. This is about one thing that I'd like to do on my spare time, which is basically, I don't know what the OPTICS algorithms actually does, but it says that it is for finding points into a cluster.
A cluster is basically a group of similar things. Say, we do have a large amount of text and we want to cluster them. What the expected result will actually be is that all the similar text are grouped all together, say, about sports and science and things like that.
So, this algorithm, apparently it helps you group those points in the clusters. In case of text, those points, those will be words because those are the features. I haven't looked that further yet, but I will definitely download it and will start playing with it. Definitely. It will be very interesting.
Manuel Lemos: This pretty looks like one of those things that you like. I know that you enjoy studying economic papers and the implementation of algorithms in practice.
[Laughter]
Manuel Lemos: I remember that you developed many, many PHP classes that follow this pattern. And you feel free to send also your own JavaScript classes because I'm sure the JS Classes site audience will appreciate it.
Cesar Rodas: Yeah.
Manuel Lemos: Now, just to mention part of what you said. This is yet another class from Josef Brunner from Austria. As I mentioned before, he submitted several classes.
And this one is precisely for what you said, to take a look at the set of the point in a 2D space and cluster them... actually, group them... to find clusters. So all these points here are related. You could see they are part of the same group.
Part of this class also is to do something that will render the cluster in a canvas object. So not only it can apply the algorithm but see the results visually.
Cesar Rodas: Yeah. That is a very important thing. If you see a couple of numbers that may not make sense but when you see it in a canvas, that makes it much, much easier.
Manuel Lemos: Yeah.
And now moving on, it's my turn to mention the remaining classes. This month, we have six nominees. You mentioned three, I'll mention the other three, which are also really interesting. And it's just great because over time you can see that more and more innovative classes do things that are really special, really amazing.
And one of them is this one, JS Carousel. Let's share the screen here. Again, from Nikos M from Greece. This is really impressive. At least visually. It uses the Three.js library to render pictures.
You know those carousels that appear on Web pages usually are pictures that are put side by side and you can scroll them next to each other. So this one does the same except that it's in 3D space.
Let me see if I can show the live example. You will need to have your browser enabled with Web GL. I'm not sure if that is the case.
So, you can drag the mouse and can rotate. You can also click on a picture at the end and it scrolls the picture at the front. You can also use the mouse up and down to bring the pictures closer. And this is awesome. This is all at runtime. Well, apparently I have a relatively powerful machine with Quad i7. I don't know if this demands much CPU or it's just a matter of having an up-to-date 3D graphics card with Web GL support.
And this should work well in all machines because I assume since it works well on my Linux machine running on Chrome, it should run well on other machines running other OS, Mac OS or Windows.
I don't know if this requires a newer Chrome version. I don't think so. This probably has great support. And this really gives a great impression of what you can do.
It should also give other ideas what you can do in 3D. This is on top of the Three.JS library. And I think if you study that library, you can think of other interesting possibilities of applying 3D effects on Web browsers.
Cesar, have you tried these Three.js library on your developments?
Cesar Rodas: No. I don't do much frontend. But actually, I'm going to check that now because I don't use Chrome, I use Chromium.
Manuel Lemos: OK.
Cesar Rodas: That being said, that means that if it works in Chromium, it's should work that it should in every Chrome basically.
Manuel Lemos: Yeah.
Cesar Rodas: OK.
Manuel Lemos: OK. Then after it works, let me know.
Cesar Rodas: Sure.
Manuel Lemos: And anyway, moving on to the next nominee that I would also like to comment is basically something quite different as well, but for different purpose.
Let me share the screen here. And the name of this package is Automated Screenshot Diff and basically what it can do is to take screenshots of captures of Web pages and compare them so you can notice if there are any changes.
This could be, for instance, if you are testing a JavaScript application and you have two versions of a page that was generated by one version of your application. You can generate a screenshot for instance with CasperJS library. I think this is basically a headless browser, which is basically a browser that does not have a user interface. It's just meant to render pages of certain URLs, all done programmatically.
And with this, you can generate a screenshot. And what this package does... this one of Igor Escobar from Brazil... is to compare the screenshots.
And this is useful to detect eventual changes in your application due to bugs that may have broken something in the way the application should work and this is to help in testing your applications.
For me, I think this is very advanced programming. This is far, far beyond what the usual JavaScript programming used to be in the past, not just forms and AJAX and things. This is very advanced. Kudos to Igor Escobar for his contribution. I hope he can continue to send more contributions like this.
I don't know what you think but I was really impressed with this package. What do you think, Cesar?
Cesar Rodas: I think it is too impressive for several things. First, it is using this CasperJS, I believe. I don't know what that is but it looks... according to Wikipedia... pretty much like PhantomJS which we have been using, which is basically a headless browser.
Like you said before, you have some simple JavaScript that you can execute there. People are actually using it to run tests. Say, I want you to go and click there and I expect this. I don't do that, I will just go on a couple of Web sites, automate as screenshots basically and it works out of the box.
And the other thing that was impressive was that it compares images. That is not something simple. So, he passed on two complicated things. It's is really cool. As you said, this is completely non-standard thing. This is something that is really, really cool.
Manuel Lemos: Yeah, exactly. And one thing that I would like to comment regarding... Well, this is the Innovation Award and the results of the nominees comes from the votes of users.
Unfortunately, this package did not get many votes but that does not mean that it's not a sophisticated package. It just means that probably the users that voted on it were not aware what was the purpose and probably didn't realize that it's quite sophisticated. That's it.
Cesar Rodas: I guess with that, because it is not a standard thing, like you keep running from your browser or from Node.JS, you required to install a couple of things. That's why some people, they didn't vote for them. I would definitely just vote for that class. I mean I love it.
Manuel Lemos: Yeah.
Cesar Rodas: Yeah, basically that.
Manuel Lemos: OK. And now moving on to one final class that I'm going to mention here which is the MOD3 which is basically a library for modifying 3D objects that used to be done in a library for Flash called As3DMod.
And this one was again developed by Nikos M from Greece and this is also very sophisticated. I was trying to render an example here but for some reason, it was not rendering right now in my browser.
Anyway, you can see on this screenshot here for... This is a capture of what the library does, a 3D flip book. You have probably seen those flip book effects that emulate the turning of the page but this one goes farther and do it all in 3D perspective and such.
I'm going to try it once more if I can run the live example here. Well, for some reason, it's not working. But I have seen it before. So, it would have one flip right and flip left buttons. Fortunately, I cannot render it, but that's OK.
I think we have mentioned enough about this library. And hopefully, users will also find it interesting.
Conclusion (1:06:56)
Manuel Lemos: Practically, we have ended this podcast hangout and I would just like to thank you again Cesar for coming, helping on this hangout to comment on all the interesting stuff about the JavaScript world.
Usually, this would be co-hosted by Michael Kimsal, but he has been very busy and probably will be very busy until the IndieConf even that he's organizing every year. It'll take place sometime soon. So if you are interested and probably you'll still go in time to attend, it's indieconf.com and you'll find there Michael Kimsal and many other interesting speakers.
So on my part, thank you again, Cesar. And that should be all for now. Bye.
Cesar Rodas: OK, bye-bye.
[Music]
