How Can Browser based JavaScript Can Be Abused to Perform DDOS Attacks to Your Servers - Lately in JavaScript podcast episode 55 - JS Classes blog

Contents

Introduction (00:20)

JavaScript Based DDOS Attacks (1:10)

Enhance Your JavaScript Debugging with Cross-Browser Source Maps tutorial (7:27)

Embedded Javascript on the Tessel for Building a Modular Security Camera (9:58)

Microsoft Visual Studio Code Editor (12:31)

ManifoldJS (20:47)

What's New in io.js 2.0? (25:45)

Io.js Joins Node.js Foundation (30:10)

How Googlebot Crawls Javascript (31:25)

Tell your readers how long they'll need to get through all your text (39:54)

Polymer 1.0 Released (43:31)

Create a Google Maps alternative with PHP and MySQL using the Leaflet library (45:46)

Book Review: PhoneGap 3.x Mobile Application Development Hotshot (47:07)

JavaScript Innovation Award Winners of March 2015 (51:07)

JavaScript Innovation Award Rankings of 2015 (58:01)

Conclusion (59:53)

Contents

Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript

[Music]

Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast. This is episode 55, I think. As always, I have here with me, Arturs Sosins, that is very happy probably because it's very warm in his country.

Hello, Arturs.

Arturs Sosins: Yeah, you could say that, but not by your standards, I think. It's quite changing here.

Manuel Lemos: Yeah, here it's getting colder and colder.

Arturs Sosins: In the winter, right?

Manuel Lemos: No, it's not yet winter. It's already very cold. Very relatively cold. Like 16 degrees or something. And so, I guess, by the time we reach July or August, it will be even colder.

JavaScript Based DDOS Attacks (1:10)

Manuel Lemos: Anyway, we are here to talk about JavaScript, so let's move on with the usual set of interesting topics, things that had been happening in the JavaScript world in the latest times.

I'm going to start precisely with an interesting article that talks about something important which is security attacks, in this case started from JavaScript code. In this article that was posted on the blog of CloudFlare, they are concerned because CloudFlare is a provider of content delivery network.

So they're sort of intermediate serving content of different sites in a way that will be faster for the users. But when you serve pages, you may serve as well JavaScript, so they are talking here about the types of attacks that may happen.

So basically, in this attack, they mentioned how distributed denial of service attack could work in JavaScript. So they show here some code that will create a flood of requests for images with different URLs, so the server would not cache the request. So, in this case, it would send 100 requests per second, which could be already bad.

But then, they moved on and talked about what they call Shared JavaScript Compromise, which is basically a way to replace some good JavaScript with an attack JavaScript on a compromised server.

Then, they talked about something. I was not aware about this, in the script tag, you can have some parameters that define an integrity key and a cross-origin policy. So they also mentioned here that for this to be useful, you need to have some headers in your page that define the Cross-Origin Resource Sharing policy.

So in this case, if you are retrieving this code from this URL... they mentioned here jQuery... it would check the integrity by performing... computing the sha256 to see if it gives this number, this hash value. If not, it is not safe, so it would not load it.

Then they continued talking about man-in-the-middle attacks, which would not be attacking a compromised server but rather put a server in the middle, which could be somewhere in your network... like for instance, your ISP... and would replace a good JavaScript with a bad one which would perform the attack.

Well, this is a type of attack that could happen. The good thing is that they mentioned this. I was not aware about this.

Arturs, did you know about this integrity checks that you could enforce in your code?

Arturs Sosins: I think that it's actually something quite new and probably not yet working in any browsers. As you have mentioned, it's under development for Chrome and Firefox, but yeah, the need for it...

As you mentioned, as you said, a simple JavaScript could send 100 request per second to another web site. Imagine, if all of your traffic from your Web site, every user sends 100 requests per second and even more, I think it's described if there, you're using external dependency which is used by lots of lots of web sites, and it gets modified somehow, then yeah, it's a problem.

So this kind of check kind of makes sense. Actually, I'm surprised why did not introduce something like that before. They could have done it.

Manuel Lemos: I don't know, but maybe since they are content delivery network, maybe they could actually alter the JavaScript... I mean the HTML to put those integrity check values.

Arturs Sosins: I have used CloudFlare quite intensively on all my web sites. They did do a good job by not only providing the CDN, but also caching and preventing some bugs or attacks. And there are options where you can allow them to modify your JavaScripts to improve speed, usability, minify them. So, probably, they could also do integrity checks.

Manuel Lemos: Well, I'm a bit worried about using cross... I mean, content delivery network sites because I don't know what they can do to alter the behavior of the sites. So some things could not work, but OK, I think this is interesting. Maybe the plan is for them to implement that additional check if you have configured your account to let them do that.

Enhance Your JavaScript Debugging with Cross-Browser Source Maps tutorial (7:27)

Manuel Lemos: OK, now moving on to another interesting article about something that I also was not aware which is what they call Source Maps. The problem is that, for instance, if you have debug some code and sometimes you are using the...

Arturs Sosins: Production version?

Manuel Lemos: Which is minified.

Arturs Sosins: Yeah.

Manuel Lemos: And then, you have the problem that when you want to debug it, you can't read your own minified code.

Arturs Sosins: Yeah. That's a common problem.

Manuel Lemos: So they are talking here about something called Source Map which basically defines where the debugger can find the non-minified version of your code. So you can debug a cleaner version.

This is interesting.

Arturs Sosins: I think basically you will be debugging the clean, original version. It will replace your current source code or unmap it or map to your original source, so you will see everything by continuing your original code. Or at least I expect it to be like that.

Manuel Lemos: Yeah.

Arturs Sosins: An interesting part is that they showed UglifyJS, one of the most common minifiers used out there is already accepting the parameter source map which one does add a comment to your minified JavaScript that would link to the Source Map of your code. So it seems to be already a widely generally available feature.

Manuel Lemos: Well, if browsers understand this control, they might as well prettify the code again without needing a source map. Anyway, probably the line numbers would not match what you have in your development environment.

Arturs Sosins: Yeah, well, some variable names would not match because they are also renamed to a smaller one. It would be hard to understand.

Manuel Lemos: Anyway, if you use the minified version, the line numbers are different. The variable names are probably different too, so you already have that problem. But for debugging purposes, at least, you try the version that is readable.

Embedded Javascript on the Tessel for Building a Modular Security Camera (9:58)

Manuel Lemos: OK, this is interesting. So now, let's move on to another interesting topic that I found out here. But I think you, Arturs, know better than me about this because from what I understood, you had been playing with hardware, right?

Arturs Sosins: Yeah, a lot.

Manuel Lemos: This is interesting. So this is an article that talks about building a security camera using Tessel. So for everybody else that doesn't know what is Tessel, can you care to enlighten us about it?

Arturs Sosins: I don't know if anybody knows what is Arduino. Tessel can be something similar, basically. It's a hardware. It's a chip that you can extend throughout by different additional components like sensors or cameras and stuff like that, and difference in text so it runs embedded Node.js. So you can write your apps on it, your operational code on it in JavaScript.

Manuel Lemos: Yeah, this sounds interesting, but although it compare to Arduino-based solutions that already also use Node.js.

Arturs Sosins: I think Arduino uses some kind of its own C++ Code, but I think apart from the language, they should be on the same level basically.

What this article actually describes is an interesting way to set up some of the hardware to use accelerometer sensor to use temperature sensor in the cameras, so it takes pictures only when there is a spike in the temperature.. maybe something is burning or is a movement, or I think there was also light. So the camera will only take pictures when something is happening that you did not anticipate or something like that.

You can actually program it in quite small amount of code in JavaScript, and that seems to be awesome.

Manuel Lemos: Yeah. Well, for those that enjoy playing with hardware, it can be an interesting solution. I was looking at the examples, then at the end, I realized that the source code is in CoffeeScript.

Arturs Sosins: Yeah.

Manuel Lemos: And then you need translate to JavaScript so it can run it on Node.js. OK, everybody has their own preferences.

Microsoft Visual Studio Code Editor (12:31)

Manuel Lemos: So, now moving on talking about something that seems to be the sign of the times, which is that Microsoft has released a code editor, a Visual Studio version that works also on Linux and Mac, right?

Arturs Sosins: Yes, and it works with JavaScript, also with JavaScript.

Manuel Lemos: Yeah, that's the example we show here. It is interesting. I have downloaded it, but I could not understand much about what are the great advantages other than the novelty of Microsoft developing for Linux and Mac.

Arturs Sosins: So what I did really was for JavaScript.

Manuel Lemos: For JavaScript, I just use a regular text editor.

Arturs Sosins: Then, the novelties would be standard features like IntelliSense, like it would say to you beforehand what suggest new methods and variables and stuff like that. But actually I was kind of keen on to trying WebStorm IDE for some time, but still I didn't. I don't know, probably it's so easy.

But when I saw this, I saw a video and they sold me on a couple of things, apart from IntelliSense, which is quite great in Visual Studio. This IDE is not project-based but folder-based. You open folder, it parses all the files so it knows all the dependencies and what is what and knows all the objects and stuff. And it was great.

There were a couple of things, I think, features like you could hover on the object and it would display its implementation in the popup and stuff like that.

What I did not like, for example, I was using it for Node.js project, and I had to include the comment to reference to Node.js function, definition or something like that, so IntelliSense could understand that it's a Node.js environment.

Basically, what it means is that I need to modify source code with comments to do that, so they would know it's Node.js. So I need to commit the source code, modified source code to repository used by many other developers with an IDE-specific comment, which I don't know.

It just does not seem right to me. So if anyone would use different IDEs and would require different comments, it would be a mess.

Manuel Lemos: Yeah. Well, I tried to use it, but the parts that you mentioned I could not...

Arturs Sosins: Yeah, well, you opened only single file, right? You should open a folder.

Manuel Lemos: Do I have to open a folder, right? OK, let's open a folder here very quickly. I don't know if you can see what I'm showing.

Arturs Sosins: I see only IDE.

Manuel Lemos: Oh, OK, because it's in a separate window. So, OK, let's open this and OK. I opened a folder and it found like three files. There is some... It is complaining, I don't know why.

Arturs Sosins: It's probably expecting JavaScript only files, not HTML. But what happens if you switch to JS file?

Manuel Lemos: JS file, it shows...

Arturs Sosins: Are we... location?

Manuel Lemos: Yeah, because I wrote. When I write it, everything is OK. Although I debug this, for instance...

Arturs Sosins: It would also debug it, I think.

Manuel Lemos: Would I debug a HTML page? No?

Arturs Sosins: I don't know. I didn't get that far yet. I just tried so all the syntax and stuff like that. Basically, you can put a break point in your JavaScript and then probably press a 5 or a 7 to build it.

Manuel Lemos: OK, just because you said so, I could not see that happening. I can split the windows. Maybe that's because I am not doing something... Oh, debugging.

Arturs Sosins: Yeah, but you're not in debugging mode yet. Try to press Play, but in the interval...

Manuel Lemos: Where is the play?

Arturs Sosins: The green arrow, on top. Yeah, does it work?

Manuel Lemos: Please set up launch.

Arturs Sosins: Yeah, you need to probably provide a configuration.

Manuel Lemos: Only Node and Mono applications can be debugged with Visual Studio Code.

Arturs Sosins: That's your problem. I was using JS, and that's why it worked better.

Manuel Lemos: OK, call me when you can debug real webpages. It shouldn't be hard, I think. Anyway, this is Version 1, so I cannot complain I think.

Wait a minute, I have a... Oh, close folder. I have a Node.js project. Let's see if this...

Arturs Sosins: Do you have also Node.js installed?

Manuel Lemos: I have.

Arturs Sosins: Then, it should be OK, I think.

Manuel Lemos: Yeah, but I don't know how hard. OK, OK. So here goes. This is ... Can you see it?

Arturs Sosins: Yeah. So try to click on the process that you have there, under... OK, you can try to run.

Manuel Lemos: Please set up the launch file to divide. Where is the... Please set up the launch application.

Arturs Sosins: Launch application. Here it is, type node program.js, you need to change the program to the script you are going to run, that was test or something like that.

Manuel Lemos: Oh, this is the launch thing.

Arturs Sosins: Yeah.

Manuel Lemos: So what do I need to do here?

Arturs Sosins: Probably change a program from AppJs to the script that you are going to launch. So it's the main file that you are going to run, AppJS, usually. In your case, it was something else I think.

Manuel Lemos: In my case, it is this one.

Arturs Sosins: Yeah.

Manuel Lemos: OK. So I should go there and change the app here.

Arturs Sosins: Not PHP I think, but...

Manuel Lemos: No, it's not PHP.

Arturs Sosins: Yeah, it's your... PHP.

Manuel Lemos: No. Oh, I see. I copied some comments from... This is lame. OK, let's copy this, and put it there, right?

Arturs Sosins: Yeah.

Manuel Lemos: Just put it. Do I need to save it? It's automatic?

Arturs Sosins: No, no. In the program of JS you place that... Yeah, this one.

Manuel Lemos: End.

Arturs Sosins: You have an extra S there.

Manuel Lemos: OK.

Arturs Sosins: Yeah, it might probably...

Manuel Lemos: Is this all?

Arturs Sosins: Yes. Try to run it, though.

Manuel Lemos: I need to put some parameters here because this is a script to test...

Arturs Sosins: Oh, OK, yeah.

Manuel Lemos: After an email validation component that I wrote. Now, I go there and go. Cannot open debug because Mono version is required. I probably don't have Mono installed.

Arturs Sosins: Oh, you're on Linux.

Manuel Lemos: OK, no. Mono is for Linux but I don't have it installed. OK.

Arturs Sosins: Yeah.

Manuel Lemos: Let's assume it work. Other than that, we'll get back some other day.

ManifoldJS (20:47)

Manuel Lemos: OK, let's move on with another topic and this one is interesting because I did not know about this project, and it is called ManifoldJS. It is the simplest way to create hosted apps across platforms and devices. So the idea is you basically can turn any site into a Web app without having to...

Arturs Sosins: A native app. Well, yeah...

Manuel Lemos: A native app, right?

Arturs Sosins: You can...

Manuel Lemos: A Web app

Arturs Sosins: It is a native app that runs a webview or something like that, probably.

Manuel Lemos: This is interesting. So if I go here, it can generate... if you ever have a site, you can turn it into an app. I know many people that will like this. Basically this thing that I need to define many things here, so I can't try it. But what if I go there and put manifoldjs.com as parameter? Would it work? Maybe. Did they...

Arturs Sosins: No. No.

Manuel Lemos: We're creating a site that cannot be used as an example.

OK, but then they have also the Deploy.

Arturs Sosins: Yes, so you can create in Windows App. Anything Android and iOS app need a host.

Manuel Lemos: Android?

Arturs Sosins: Yeah.

Manuel Lemos: This is interesting. I like this. I just need more time to try it. So basically, you take your site and have some definitions that you can make it work, more or less smoothly.

Arturs Sosins: But as you see, you can also enter the data that you would declare in manifest. You could also enter jQuery here in form when you first generate button and also provide you form to enter your data.

Manuel Lemos: Where?

Arturs Sosins: Well, you just type in at the same manifoldJS or PHP Class and pick one then get started. And now, there is a form create where you can enter name, short name, icon, URL. It would be the same as using Web Manifest, I think.

Manuel Lemos: OK, so you can...

Arturs Sosins: You can enter additional information and put next steps so you would proceed creating the app. You need to select more stuff.

Manuel Lemos: Member, member value.

Arturs Sosins: I don't know really.

Manuel Lemos: Well, I guess we need more time to try this.

Arturs Sosins: Oh, it's already building something.

Manuel Lemos: I clicked to build a package to see if it would work.

Arturs Sosins: And then, it got to charge you.

Manuel Lemos: I don't know. Usually, there is a tab here named pricing.

Arturs Sosins: Yeah, it seems to be it's open-source and I don't see any pricing, so probably free.

Manuel Lemos: Well, it's taking some time. Let's leave it running, maybe. We can get back to it later.

Manuel Lemos: OK, next topic is about some news we already talked in previous months about io.js, which basically is a fork...

Wait, there is a prompt here. You can see it but it tells me to save manifoldJS to a zip file. Oh, this is interesting. It generated... Oh, wow. It generated... Let me show you at least what it generated.

I guess this is it. This is the folder that it generated. Unfortunately, I can't zoom in. This is a window. So it generated project files for Chrome and Cordova, Firefox, Web Manifest, Windows 10.

Arturs Sosins: We can use this projects to generate real apps. Great. No Android, so we probably need something additional to do that.

Manuel Lemos: No, you have Cordova.

Arturs Sosins: Yeah, that's right. That makes sense.

Manuel Lemos: So it generates an index file which connected to the...

Arturs Sosins: That's fast.

Manuel Lemos: No, we don't see it because it's in a different window but OK. It's just an HTML file. And the manifest.json is also what we've seen in the other window.

Arturs Sosins: OK.

Manuel Lemos: OK, I'll take a look at this later.

What's New in io.js 2.0? (25:45)

Manuel Lemos: So moving on to the next topic, I was saying about io.js. There is a version 2.0.

I'm not really following the io.js development, but it cover here some important features in this new release. So I thought I will talk about it, because it's started showing things that we covered before that seem to belong to ECMAScript 6, namely classes. Oh, it sure looks like PHP and other things like variable lists of parameters, and other things.

So I thought this is interesting because this is finally moving on to a more manageable type of JavaScript.

Arturs Sosins: Yeah, basically for those who don't know, don't remember io.js, that's a fork from Node.js by some of the Node.js maintainers that disliked the way that Node.js had developed. It was slow, and so they forked it and created io.js, adding their own code, commits, improving it, adding new features like ECMAScript 6 support, as you see. In all the benchmark that I see, io.js is much more efficient, better performance than Node.js.

Manuel Lemos: Because the things that I'm missing more on Node.js, because it's too based in JavaScript, regular JavaScript is that... At least I think ECMAScript is going to have that await keyword that you no longer have to use callbacks to write to your code that will happen after certain synchronous operation finishes, right?

Arturs Sosins: Yeah.

Manuel Lemos: Well, I don't know if io.js already supports that.

Arturs Sosins: Oh, it was not mentioned as its features, but they are saying that it supports ECMAScript 6. And actually, with this version, io.js 2, second version, I know lots of Latvian JavaScript, lots that started with JavaScript that used Node.js, that are actually now moving to io.js, because of the better performance in ECMAScript 6. So, it gained in popularity.

So with that, without the callback hell, it would be a great advantage. And if they can run asynchronous code without that problem, it will be a great step to move on and some people say threaten the popularity of PHP. But I think popularity of PHP is tied more to WordPress and things like that. Nobody is going to switch WordPress to...

Arturs Sosins: To no alternative, to Node.js.

Manuel Lemos: ... to Node.js because they won't read those thousands of plugins that exist.

Anyway, for PHP, we don't have that yet, but you have the HHVM which is the virtual machine that powers the Hack language of Facebook. The Hack language already has that construct await for something that can be asynchronous, and you can sort of emulate parallel threads and make things more efficient.

Arturs Sosins: More node.js-y.

Manuel Lemos: Yeah. Well, anyway, this ties to the next news. Let me close some windows here that are confusing stuff. One, two, three. OK.

Io.js Joins Node.js Foundation (30:10)

Manuel Lemos: And this is interesting because it's related. It's that io.js is moving to the Node.js Foundation with a merge in progress. So, they are going to join the Foundation that Node.js people created, which seems like redundant because if they are going merge they will be the same thing after all, I think.

Arturs Sosins: And it means we won't have to move to io.js because we wouldn't be using already improved Node.js based on the io.js, or something like that. I hope so.

Manuel Lemos: Yeah, and this is interesting because in the end, they were just separated just for awhile, and then they got back just like we mentioned in the other month. So there isn't much to say about this.

How Googlebot Crawls Javascript (31:25)

Manuel Lemos: So let's move on to the next topic, which is related with an article that tells about how Googlebot nowadays crawls JavaScript. This is an article from Search Engine Land.

Basically, what they say is something that we already commented in the past, is that Google is able to not only crawl JavaScript files, but also run them, too... eventually render the parts of the pages so it knows how to index those pages.

So this is interesting. Nothing really new that I didn't know, but not everybody knows that, for instance, if you have links on the page, and those links are generated with components that generate dynamic menus, Google is able to crawl those.

Arturs Sosins: Yes, so it can crawl all DOM, generated DOM elements. It could crawl all the links in Chrome, but it still does not solve the issue of AJAX requests, I think.

Manuel Lemos: It can solve the issue of Ajax requests because if you have links that have those URLs that use hash fragments, I think it can...

Arturs Sosins: Is it more appropriate now?

Manuel Lemos: Yeah.

Arturs Sosins: But my question is, if I click on the link that changes HTML pushState and load new content, will Google know to reindex that Web page?

Manuel Lemos: Well, in reality, they can render the page considering that you are passing those hash fragments in the URL. So, your code that loads your pages and checks what is the hash value, in front of the hash value, Google will be able to consider that and render the page differently.

Of course, if your pages can only load after sequences, many clicks probably will not get there. But anyway, this is just to say that Google can find, sometimes, links that are available only if you have JavaScript.

OK, this is not really so important.

[Silence]

Arturs Sosins: Oh, you're back.

Manuel Lemos: Hello.

Arturs Sosins: He's in back.

Manuel Lemos: Yes. I don't know why it dropped. Anyway, what was the last part?

Arturs Sosins: About io.js. Oh, no, about Googlebot crawl.

Manuel Lemos: So did you listen anything the read remaining library?

Arturs Sosins: No. we do not talk about yet. At least, I did not heard it. The last thing was about Googlebot. So we can start with remaining probably.

Manuel Lemos: But did I conclude anything about...?

Arturs Sosins: No, I don't think so.

Manuel Lemos: So let's start with the Google crawl, pretend that I didn't...

Now, let's move on with related topic, specifically this time related with Google, specifically how Googlebot crawls JavaScript these days. We have mentioned this before in the past. Basically, there is this article that tells that Google not only can crawl pages of JavaScript but also can execute at least part of JavaScript to eventually render and find links, and they're considered in terms of indexing the pages.

There is nothing really new about this. This is just an article that explains how it works, just to say that Google can interpret redirects, links, and content that is sorted dynamically as well as metadata and page elements.

Arturs Sosins: I was actually reading on the article, and there are lots of interesting things. It seems that Google can also emulate mouse or something like that, because well, firstly, it also follows links that are on the quick attributes or on the events for the links.

So it's not maybe in the href attribute but at least they're some kind of event or link. Also, the parts that were hidden or generated only on mouse movements or like mouse over or mouse out, it also trigger them, and probably those links. So really, it seems like Google is emulating mouse behavior to execute these events, to follow these links, so it seems to be quite impressive.

Manuel Lemos: Yes. This is interesting for those that are concerned about how Google can or cannot crawl. And there are doubts about to see if they can follow links that would load content using AJAX. Basically, it seems they can do that, but I don't know if they will index those contents with different URLs, which can be retrieved from the pushState URLs.

Well, OK, this is just to mention that they can do that.

Tell your readers how long they'll need to get through all your text (39:54)

Manuel Lemos: So now, let's move on talking about a library that I found interesting. This is basically a library that can tell the user about a certain article how much the user has read so far and gives estimates about what he remains to be read, how long it will take.

So there is a demo here. You can show the article, simply put in the beginning, it will show you like...

Arturs Sosins: Can you show the screen?

Manuel Lemos: Oh, right. Sorry, I forgot to do that important part.

OK, now you got it. So this is the page. We can do the demo. It's supposed to show this to me. Maybe I should reload this because I have it loaded before. OK, it shows it then. An estimate tell me it's 12 minutes and 46 seconds. I don't know where it takes that value. Huh?

Arturs Sosins: Do we have such time to read it? I think it's usually scrolling faster.

Manuel Lemos: Yeah, I don't know where... I don't think this text, you take that much, but if you scroll it will give you an estimate until you reach to the end.

And this is interesting because it reminded me of the Kindle app, which also has that feature of showing how much remains to be read until the end of chapter or the end of the book and shows an estimate in terms of time.

Arturs, do you read Kindle books? Have you noticed that feature?

Arturs Sosins: No. I usually prefer real books, instead of e-books.

Manuel Lemos: You are old-fashioned.

Arturs Sosins: Yeah, I'm really old-fashioned.

Manuel Lemos: You like to wait for the books to come.

Arturs Sosins: No, if I'm reading books, it's something I do to relax from the computer, from the tablet or something like that. So I don't like to combine it with the tablet.

Well, I have to a couple of books on the Kindle, on the iPad, but I did not enjoy it as well as reading a real book.

Manuel Lemos: Oh, really? What did you miss? The smell of the paper.

Arturs Sosins: Yeah. I don't know. It's hard to explain, but it's not the same.

Manuel Lemos: Nowadays, I only read books in the Kindle app. I read them in my mobile phone. I don't have a tablet. I think tablets are too big. You cannot carry them in your pocket.

Arturs Sosins: Yeah, I bet.

Manuel Lemos: So I put in my mobile phone and it fits well in the pocket and I can read it anywhere. The size of the text is appropriate. You can always increase the font if it's too small, and it has been good.

So you are not familiar with Kindle app?

Arturs Sosins: No. Well, I think it's a different system feature there. They have the old one with... it's black and white, so I don't know what type it's running for.

Manuel Lemos: It works at least as long as you buy the books from Amazon, because I tried to read some other book from other source. I had to download, install it directly into the device and did not show the estimates.

Polymer 1.0 Released (43:31)

Manuel Lemos: OK, anyway, let's move on to another topic. This time, we are going to talk about the release of Polymer. Polymer is a library by Google which is in the Version 1.0, basically allows you to define components for your pages like new tags, HTML tags, and define their behavior. They can behave according to user events, how they are rendered and installed.

Arturs Sosins: It maybe... We don't think... I actually checked it also a bit. It took me something similar to jQuery UI Library providing all the components and is extendable, with lots of plugins. But in this case, instead of querying DOM elements to modify, you use it by specifying new HTML tags. As you said, creating custom components.

So, as you see on my screen, here is the code you provide in your HTML, and here is how it look like for the end user... ready, custom-made components to be ready to use in your web site. So basically, Polymer is about. There seems to be several categories, like core elements or UI elements or e-commerce elements, stuff like that.

Manuel Lemos: Yeah, but does this work on all browsers nowadays? That's the question.

Arturs Sosins: I have heard that they are using some Shadow DOM Show feature, so like recreate them on other browser, but I don't think it work on all of them.

Manuel Lemos: Yeah, it could be interesting to know. Anyway, this is the version 1.0. Probably, if it doesn't work now in other browsers, probably it will work later.

Create a Google Maps alternative with PHP and MySQL using the Leaflet library (45:46)

Manuel Lemos: Now, so moving on with another topic, this time we are going to talk about an article, related with Leaflet library, which is basically a library for mapping or generating maps. And this article title is "Create Google Maps alternative with PHP and MySQL using Leaflet library".

So, this is a complete application with server-side code implemented in PHP, and it has some JavaScript code that will set up maps and deal with interaction in JavaScript using the Leaflet library.

This library is interesting because you can use alternative source of maps without paying the Google fees like the OpenStreetMap, and what was the name of the other one?

Arturs Sosins: Mapbox.

Manuel Lemos: Mapbox, right. So this is interesting. Anybody that was looking to develop a mapping application, with Leaflet, and was not aware, this article could be interesting.

Book Review: PhoneGap 3.x Mobile Application Development Hotshot (47:07)

Manuel Lemos: Another topic that may be interesting. It is related with something we already mentioned today, which is a review of PhoneGap mobile application development book.

This book, I have reviewed it, and it talks about hybrid mobile applications using Apache Cordova or PhoneGap which is basically a derivation of Apache Cordova. It's practically the same. There are few differences. The book tells about the differences.

I was studying this because I'm planning to develop an app with some partners and I was interested to know if PhoneGap could be used to gain some speed and do not have to study about developing native mobile code, mobile application code, for its platform.

This is interesting... What?

Arturs Sosins: What are your conclusions? Could it be used like that?

Manuel Lemos: Yes, for the type of application that we are planning, it can be used. It can't be used for every other purpose because sometimes you need to interface with the native features.

But nowadays, PhoneGap or Apache Cordova comes with plugins that provide interfaces with those native features. You will need to know a bit about the differences because there are plugins that are specific to certain platforms, and those plugins do not exist for other platforms. But more and more, it is feasible to develop all sorts of applications.

Of course, if you need to take advantage of the performance of mobile device, probably hybrid applications are not the way to go because they render inside a web view, right?

Arturs Sosins: Yeah.

Manuel Lemos: And so, there are probably other approaches to develop faster code. Not that it would be faster to develop. We have talked about, for instance, NativeScript recently. It does not use a WebView. It just develop native applications using JavaScript and CSS, not HTML pages.

Other than that, there are certain concerns, like the look and feel must be as close as possible to the native look and feel of the application. So if you are concerned about that, either use some library that tries to emulate the native look or feel as close as possible. Or probably, some users will find it a bit hard that your application looks different in their own devices.

But I don't think every user is that picky. Some users might find it odd, and also the book covers about some concerns of having your applications being accepted in each app store.

I talked a bit about that in the review, so if you want to know more, there will be a link in the Show Notes for you to read the review and figures using PhoneGap, Apache Cordova would be a way to go.

JavaScript Innovation Award Winners of March 2015 (51:07)

Manuel Lemos: So with this, we are going to move on with the next section on which we comment about the Innovation Award, first of JS Classes. OK, let me share the screen here. So we are going to start talking about the winners of the Innovation Award edition of March, which were voted in April and in May, the results come out.

So since we have already posted the results, we can talk about these packages. Arturs, which packages would you like to comment first now?

Arturs Sosins: OK, let me comment on first one is Adblock Detection for Google AdSense, developed by Suresh Kumar from India. What this package does, it tries to check if there any JavaScript elements in your web page that are trying to load AdSense, because if they are not there, then probably there were stripped out by an Adblock.

This package also reports it to Google Analytics. So inside, Google Analytics, you can see how many visitors of your website have enabled ad blocking and disabled AdSense. So you can see how many of your visitors can see your ads, and then you may try to think of other ways to monetize this.

So that's why I really like this package from Suresh.

Manuel Lemos: Yeah, it can be useful for knowing which users are presenting Adblock. There are some users, not many, probably like 10% of the users use Adblock. They don't like ads. It's OK, it's their option. They are not supporting those that produce content and need the money generated by the ads. But OK, that's a different discussion.

Anyway, in the case of this class, it is useful, as we described, to at least know if Adblock is being used to detect blocking of AdSense ads.

Arturs Sosins: Yeah, as I said, you can try thinking about other monetization methods.

Suresh Kumar got one book of choice by Packt for this package.

Second package I want to comment on is JavaScript HTML5 FileReader, which basically uses not like a standard HTML file input, but try to use HTML5 FileReader API to retrieve contents of the file.

So it would provide even more than if you use file input, you usually simply upload it, but with it, you can use the same file input to read the file in the same web page without even yet uploading it. So you could provide display of thumbnail of the image you are going to upload or display contents of it.

I recently also used a similar app I was developing, so I tried to create addition, and this package would simplify the work that you would need to check availability or all these files.

So it was developed by Andras Toth from Hungary, and he got downloadable e-book of choice by O'Reilly for this package.

Manuel Lemos: I also would like to comment on a couple of other classes. Let me share screen here. Classes objects, and this one again is from Suresh Kumar from India. He has this class, Browser Specific CSS, which uses a clever trick in the same page. You can use different CSS sets of definitions depending on the type of device that they use.

So he defines certain styles. It's probably better to look at the code very quickly. We don't have much time. Oh, I forgot to log in because I was in another machine.

OK, here we go. So this is class. Oh, it's minified. You're not going to see much. I have to un-minify it. Let's see. I don't know if there's a non... Yeah, he did not provide a regular class, but it defines some sets of styles, and depending on the platform, it will match the names of the styles with the type of browser.

If you are in Windows, if you are in... As you may see here, so depending on the browser, you can have styles that match the different browser and use JavaScript to achieve this effect, and it was quite interesting.

Now, moving on, the other class that I wanted to mention is one called Encyclopedia. This is not very trivial to understand. It's from Ryan Silalahi from Indonesia. He provides an interface to access I would say a large set of value pair of objects but it employs a trick to minimize the loading of everything into a large object. So it can load small objects that provide access to parts of a bigger object, which could be an encyclopedia with names and their respective meanings.

JavaScript Innovation Award Rankings of 2015 (58:01)

Manuel Lemos: About the JavaScript, let's see how it is going, the Innovation Award ranking for 2015. Sharing screen here again. Well, so far, this includes already the winners of April because the results come out.

So far, Andras Toth is leading with three packages and ten points, followed by Suresh Kumar that raised also to the first place again with three packages and ten points. Then, Gianluca Zanferrari with one package and seven points, Jackson Knowlton (one package and six points), Stephen Chapman (one package and four points); then several other authors with one package and three points.

By country, the rankings are still pretty much the same, except that instead of names of authors, we have countries because there is only one author per country. Unlike PHP Classes, JS Classes is not as popular, but we still quite have a nice collection of packages.

The first one is Hungary with three packages and ten points. The second one... well, actually, tied... is India with also three packages and ten points; then Netherlands with seven points; United States, also with seven points but two packages. Then follows Australia with one package and four points and several other countries with one package and three points.

Conclusion (59:53)

Manuel Lemos: With this we have practically ended this podcast. I would like to thank you again, Arturs, for coming. I know you are going on vacation but I think you'll be back before the next podcast, right?

Arturs Sosins: Yeah, I should.

Manuel Lemos: OK, that's good to know. So on my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]