New Web Browser Written in JavaScript - Lately in JavaScript podcast episode 45 - JS Classes blog

Contents

Introduction (00:20)

The jQuery Foundation (01:23)

Breach: JavaScript based Web Browser (4:49)

Add Motion Control to a Kiwi.js Game With the Leap Motion Controller (8:48)

Turning Drupal into the CMS for JavaScript Frameworks (14:40)

Ensure You Are Not Adding To Global Scope in JavaScript (23:13)

Detect Magic Numbers with Buddy.js (26:25)

JavaScript Innovation Award Winners of May 2014 (29:55)

JavaScript Innovation Award Rankings of 2014 (40:02)

Conclusion (43:45)

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/Hangout that we've been doing for almost five years. This is Episode 45.

This month, we have a regular set of interesting JavaScript topics. As always, I have here with me, Arturs Sosins, from the warm Latvia to help me comment about those topics. Hello, Arturs.

Arturs Sosins: Hello. Hello, JavaScript developers. Hello, world.

[Laughter]

Manuel Lemos: I can see you have been very happy with this participation. I don't know if you have your regular vodka or whatever is the typical...

Arturs Sosins: No, it's getting colder here every day. Nights are getting darker, so I'm clinging to every bit of happiness and optimism I have. So I'm happy.

Manuel Lemos: OK, that's good to know.

The jQuery Foundation (01:23)

Manuel Lemos: So we are going to start talking about several interesting topics. Let me share the screen here.

OK, the first topic here, I think it is interesting because many, many people are using the jQuery libraries not just the main jQuery, but other jQuery UI and mobile.

Here, this is the announcement of the jQuery Foundation. They say that this not just about jQuery library themselves, other libraries that are interesting to make the Web better, promote open standards and everything else.

They have here a jQuery Foundation mission and vision statement on this page.

I think it was interesting to mention just because many, many people are using jQuery. I'm not sure if this is to promote specific projects giving them more visibility somewhat like the Apache Foundation.

Arturs, did you follow this announcement? What did you get from this?

Arturs Sosins: I think basically, it's maybe not so much about libraries and what jQuery did, but it's more about coming together and learning things and doing things right in the standard way. Because, as we all know, there is a complete chaos and standardization even with the new HTML5 and CSS3.

And basically, I think yes, the (Not Just) jQuery Foundation is a step toward to bringing it together and clearing out the misinformation and learning from each other.

I think they also have lots of talks and conferences, and they're becoming more than just jQuery community.

Manuel Lemos: Yeah. That's good to know. Maybe because jQuery is just like itself, sort of create new sort of programming. They are not JavaScript programmers, they are jQuery programmers.

Arturs Sosins: True.

Manuel Lemos: So, whatever is on by the jQuery people, the people behind the jQuery libraries, not just John Resig, but also other contributors, it's good to promote good practices, good standards that minimize the effort to develop Web applications. Because, as you said, there are standard documents, but then there are different implementations that make things more complicated.

And now, with this initiative of jQuery Foundation to promote the good practice, to make Web development more friendly to developers in the sense that they do not need to know the differences between certain browsers' implementations, that seems to be a good thing.

Breach: JavaScript based Web Browser (4:49)

Manuel Lemos: Now, moving on to another topic, this is somewhat an unusual topic because it's about a browser that its said to be entirely written in JavaScript. It's called the Breach browser.

Actually, I downloaded it but I didn't try it. I downloaded it for Linux. That's what I use. I see a lot of JavaScript code but also saw lots of binary libraries... I mean precompile libraries. So, probably, this is not really entirely written in JavaScript. It's not entirely accurate.

But I think it is interesting, we already had headless browsers, basically browsers that do the function of accessing sites and retrieving the pages. It's just like regular browsers but they would not show any user interface.

But in this case, it's a browser with a user interface that is all in JavaScript.

Arturs Sosins: And the HTML and CSS?

Manuel Lemos: Of course, of course. If it was not that, it probably could not render anything. And, well, I don't know, what opportunities do you see with having a browser like this that is entirely made in JavaScript, Arturs?

Arturs Sosins: Well, firstly, as developer, I can only say, "Come on, that's one more browser to support and all those cross-browser mix-ups." But from the other point of view, each browser that every developer can create for themselves the way they want it.

So this probably mostly not for development but for personal use, with maximum customization from the skills that you already have, like you want to edit something, you write it an HTML file. And that should be as easy as Web developer does do it, so that should be not be a problem.

Manuel Lemos: Yeah, I was hoping... Well, I was thinking about other things. Like, for instance, if you want capture images from pages, you could always use a browser like this.

It would not be exactly like using some common browser because there may be eventual differences in the rendering engine but it will be useful to the site or something else to capture those pictures.

Probably has more controls over the picture that are captured from pages, not just the visible head could get the go feature. I think you can always do that with headless browsers like PhantomJS and others.

Maybe you can also have some control over tests, if that's what you want to do on pages. Although, it can always do that with Selenium on the existing browsers.

So maybe I'm missing something that could be interesting but anyway, we are just to talk about this, but it's relatively a new thing.

People that probably see other applications can immediately go there and check it out. We'll post the link in the Show Notes, but address of this new browser, Breach, is breach.cc.

Add Motion Control to a Kiwi.js Game With the Leap Motion Controller (8:48)

Manuel Lemos: So given that, let's move on to the next topic... OK, let me share the screen here... which is about the integration of LEAP motion controller with the library for game development called Kiwi.JS.

Actually, I did not know this library about LEAP Motion Controller. I have heard about it because it does something fantastic which is to allow you to sort of control your computer with gestures.

You do not need even to touch on the screen, just captures the movements of whatever is close and it's pretty cool.

So we have finally arrived to the future. This is not only a thing for science fiction movies like Minority Report. We now can manipulate the screen with your own hands.

Maybe it's not always as interesting as it looked in the Minority Report movie, but for instance, for games, you can... Well, as long as the game support interactions with this controller, you can use sushi sticks to play Angry Birds.

Arturs Sosins: Angry Birds, yeah.

Manuel Lemos: Well, as I mentioned, the integration with games, it is interesting and I think that's what this Kiwi.JS library is providing now.

Arturs Sosins: Actually, no. I think that LEAP motion controller has its own JavaScript SDK. And Kiwi simply uses it. Probably there is a plug-in of some sort, but I don't know if it would be it. Still, it's pretty interesting that you can create game in browser with such controller, that you can create awesome stuff here, I can imagine.

Manuel Lemos: Yeah, this is interesting because nowadays, people are using more and more mobile devices, not just phone, but also tablets, and this is for a desktop computers, right?

Arturs Sosins: Yeah.

Manuel Lemos: OK. Well, let's see what happens next, if it really picks up. This seems interesting. I have not seen real people, other than the other people that shows here in the videos of being advertised to actually use this in real world applications. But probably, it's too early.

In the future, there will be more and more applications that encourage more people to buy these devices. It would probably make more sense if these devices would actually come integrated in the future computers, notebooks or things like that. It's interesting, anyway.

Arturs, you sort of have been close with the game development world. What do you think of the possibilities of these devices? Is it something that you'll see being used feasibly or maybe you see certain difficulties there?

Arturs Sosins: Well, as you said yourself, then more and more people are getting used to the touch input devices like phones or tablets.

And now, there is a microconsole era like Ouya, Fire TV, where you again need to port your Touch UI into the controller-based UI, and it's a headache.

And if those microconsoles would come with such devices with motion, that would make it easy to port your touch-based games into basically any computer or console or microconsole if you want.

So if that would be needed in the future to do that, then this device could take off and, of course, lots of people would use it.

Manuel Lemos: Well, I don't know how it could work but maybe in the future, mobile and mobile phones and tablets can somehow integrate technology like this.

I don't know, I think there are some Samsung phones that you can somehow control without actually touching the screens. But anyway, the reason people are touching the screens is because they are closer to what they want to manipulate; probably it's not a big deal.

So, let's wait and see because this is still very new and we are probably not seeing all the applications this could have.

And same thing goes for other devices like Oculus Rift which is something very promising thing that even Facebook has acquired the company for a lot of money.

We don't know yet what are the plans for that. it's also another interesting way to interact with the screens.

You carry the screen in your head, and you can do many things, actually fulfilling that promise of virtual reality applications that started 20 years ago when the Web started becoming more popular.

Okay, let's wait and see what happens in that field.

Turning Drupal into the CMS for JavaScript Frameworks (14:40)

Manuel Lemos: Now, moving on to the next topic which is related with the a certain... I'm not sure if this is an initiative or this is a pledge.

Somebody is asking for a sort of headless Drupal. Drupal is a popular complete management system that is written in PHP, so it's basically a server-side application.

And this manifesto... As I said, I'm not sure if this is something that is already going on or it is just a pledge to Drupal developers to make it more somehow friendly to browser-side JavaScript libraries to be able to fetch the content in a way that they can manipulate it somehow.

That is what I got from this initiative. Arturs, did you look into this? What did you get from this?

Arturs Sosins: Yeah, it seems they are only thinking, discussing it, drafting the manifesto about what changes should be made to Drupal Core.

But yeah, basically, as you said, the idea is that the Core would be completely separated from the rendering and provide a REST API to display JSON representation of the pages.

So basically, there will be complete separation between the presentation in the core and the loading would probably be through AJAX calls. I don't know exactly what they want to accomplish with it, but the idea seems interesting.

Of course, it also provides lots of problems like search engine optimization since we all know, with AJAX, it's a pain usually.

Manuel Lemos: Yeah. That's an issue now, because what do they want to do with the content that they want to provide, they want to obtain from Drupal installations, is it to display as regular Web pages?

Or is it more to help editing the content somehow? Because content management systems are set up for the purpose of publishing content and often content needs to be exposed to the search engine, so the sites can get visibility and get more visitors that are looking for the content searching it on Google, for instance.

And if the content is displayed in JavaScript, it's problematic. Although, for instance, Google says that they index the content when it is served via JavaScript or updated via AJAX requests, in practice, it doesn't work very well.

Actually, it is interesting because just a couple of months ago, the content of the package pages on JSClasses and PHPClasses site, the layout was updated. It was changed to something more usable for users, make the content be presented in tabs.

And it seems since the moment that the updates was implemented, Google probably is not indexing very well that content, because they only considered the tab that is visible. Even though there is a tab to click on links to switch to other tabs, it's just like the other tabs do not exist.

So, this affected the rankings of the pages, and very quickly, I reverted that, changed at least for pages that are very well-ranked in search engines.

But it was a bit late because it lost good traffic, and did not recover or at least did not recover a great part of what was lost.

So if people start with the ideas of publishing, retrieving content via JavaScript, AJAX requests and displaying it dynamically or some other means that is not very well-supported by search engines like Google, you probably will have a hard time of having the content very well-indexed by Google.

So I'm not sure what is the idea here, because I can see considering using templates defined with JavaScript to render the content. And well, I don't know.

Arturs Sosins: It is actually an interesting concept, but for example, there will be one server with the content management system.

Somebody will manage the content and then it would be displayed for REST API. It means that anybody can create a separate website on the client side that would take information from there on display.

Manuel Lemos: Yeah.

Arturs Sosins: OK, maybe if you have a mobile app, then you could load the content dynamically for that in display.

Manuel Lemos: Yes.

Arturs Sosins: That is the idea, that you can have many different environments that could want to get the information or something like that.

Manuel Lemos: Yeah, that could be one purpose, like make it easier to render in different devices that probably cannot show the whole information that fits on a desktop or a notebook screen because it's smaller.

And the idea of having an API makes sense, but for the purpose of having the content indexed and be visible on search engines, I'm not sure if that is a good idea.

On the other hand, it could be just an alternative way to retrieve the content, not necessarily the content that will be displayed for regular desktop users, which is what Google will index.

Maybe it could be also to provide them better solution than what people call responsive design. In general responsive design is basically the same page is served, but part of the content is invisible.

That means that for mobile devices that have smaller screens, they still retrieve the same amount of HTML JavaScript and CSS, but only show part of the content. In that case, it may be a bit of waste of bandwidth, because part of the content is not going to be made visible...

Arturs Sosins: Another interesting way to apply it, it could be on the backend testing. Like you don't care about how it display, you just want to test the information fast if it's safe and correct and stuff like that.

Manuel Lemos: Yeah, that could be. But I think for that, they already have... I supposed, I'm not a user of Drupal, I supposed they have already good testing frameworks to evaluate that just for the PHP code that Drupal installations have.

Well, anyway, let's wait and see. Maybe this is something different that we are not understanding very well. So let's move on.

Ensure You Are Not Adding To Global Scope in JavaScript (23:13)

Manuel Lemos: So, another topic that I wanted to comment this month is about an interesting approach, a different approach for eventually capturing a bug that you may have caused by eventually you forgot to declare some local variable and it became global.

So there is this article here. Ensuring you are not adding to the global scope in JavaScript. The approach consist in counting global variables, as in if count global variables before and after you load certain code, you can detect that there is some difference.

And if the number of expected global variables that you add is not what it should be you can probably detect there is some declaration there that is not correct.

And this is an interesting alternative. Arturs, did you look into this?

Arturs Sosins: Yeah, basically it uses the trick that all the global variables are stored as properties of window, so it checks the amount of properties window had before executing the function after that.

So this approach could be easily used for unit tests to check if the function added anything to a global scope.

Manuel Lemos: Yeah.

Arturs Sosins: As the author says further, that you can achieve the same effect by using 'strict' because I think it usually raises whenever if you are not using var to declare the variable.

Manuel Lemos: That's interesting. I don't know, I do not use 'strict' but some sort of a... more errors start to popping up. And then, they are not really errors.

Now that you mentioned, maybe I should try to see what happens. Usually, I use tools like JSHint and JSLint to warn me about inadvertent declarations of global variables that should be local.

And it is useful because once in a while you forget to declare those. We are so used to languages that do not require to declare variable that we forgot that in JavaScript, you need to declare them to make them local. That's a burden that you have to put up with to avoid confusing variable that should be local with globals.

So, OK, this is an interesting approach for this problem that you may also want to check out. The purpose is basically the same that it could achieve with JSHint and JSLint but , OK, it's a different way to get to the same place.

Detect Magic Numbers with Buddy.js (26:25)

Manuel Lemos: So now, moving on to another topic, also somewhat unusual, which is about something that is called Magic Numbers.

Well, I've never heard of this, at least, with this name. But what they call Magic Numbers are basically constants that are used throughout your code and could be constant but, in reality, could be configuration values.

They are somehow hardcoded in your code. So with this library called Buddy.js, it analyzes your code and it finds the line where you are using those constants. In this case, numbers.

And if you use them to move those values to variables that would have constants, I don't think they are constants in JavaScript, right? Or at least before ECMAScript 6, because ECMAScript 6 is turning JavaScript into a language like the other languages with real classes and probably things like this. That's why I didn't check if ECMAScript 6 has constants.

Arturs Sosins: They said that constants is available in Node.

Manuel Lemos: OK, so, if you are using Node, you are fine. But if you are not using Node, you could use variable declarations and make your code... well it will not run faster because actually it turns the constant into a variable, so it still have to look up for the variables.

But at least, you can make your code more readable because you'll use meaningful names instead of constant numbers.

Arturs Sosins: Especially if you reuse a value, it is also much more manageable to have it all declared in one place.

Manuel Lemos: Yeah, that's true. If you use the same values several times throughout your code, it will be greater gain because your code will eventually become more readable in different places. So this is... Yes?

Arturs Sosins: The interesting thing about it actually that the Buddy.js somehow knows when you are using the value somewhere or where you are declaring it as a variable.

Because as you see from examples, in the first example, it found two magic numbers. In the second example, where you assign the value to variable, it found no magic numbers.

So it, basically, not only simply detecting values but it also knows when you are using them or like assigning them.

Manuel Lemos: Declaring. Yeah, it's a clever step. Well, if you're creating a whole problem to do this, they better do a better job than the grep command.

If you look at it, what they do is basically very similar to what grep does which is to show the lines that used the numbers in the code.

JavaScript Innovation Award Winners of May 2014 (29:55)

Manuel Lemos: OK, and well, with this, we move on to one of our regular sections on which we comment about the latest Innovation Award winners.

In this case, we're going to comment about the winners of May. They were voted in June, so in July the results come out. So we're already in August, so we can comment about them without influencing the results.

So Arturs, which ones would you like to comment?

Arturs Sosins: Let me try to share a screen. I don't know if Google Hangout will allow me to. I hope it does. This one, let me share. Does it... Yeah, it shows now.

So, first one I wanted to comment is the package by Stephen Chapman from Australia, and it's called dollar B.

The name is because he actually declares his variable as dollar B like the $ sign and B. And what it does, it basically stores the values about the window properties, like dimensions of the window and provides some methods to accessing mouse positions and it does it all in a cross-platform way and detecting the changes.

Yeah, basically, as we told before about the cross-platform problem and jQuery solves it, and basically the $B solves some specific portion of it.

As you can see in this example, here is example code that you can load different CSS files, based on different window resolutions that you might have all by checking $B values.

So that would be the first one I wanted to mention.

Manuel Lemos: Yeah, that's useful to write portable code and not need jQuery.

Arturs Sosins: Yeah, exactly. Thank you to Stephen Chapman.

Now, the next one I wanted to show is by Mark Rolich from Armenia. He provided an interesting way to display select boxes.

Basically, what he does, he transfers the select box to a table and also selectable table. Hope it's loading. Yeah, here we see it.

So, here is an example, a simple drop-down select. And we can also select it with this table. Here are the multiple values, you can hit control and select multiple values or you hit shift and it will behave like a normal drop-down box.

It just provides the different UI for that. And that's quite interesting. That could be used like for something like the calendar that you can easily transforms select box to a calendar or...

Manuel Lemos: It's probably useful in touch devices, because you can drag your finger from the header.

Arturs Sosins: Yeah, you can also drag it and it will automatically select all the traces, yeah.

Manuel Lemos: Try to use your fingers, you'll see.

[Laughter]

Manuel Lemos: You don't have a touch device?

Arturs Sosins: No, no. Unfortunately, no. OK, so yeah, that is an interesting use of the Select Dropdown Box by Mark Rolich. Thank you, thank him for that.

And the last one, I wanted to mention is a package by Andoitz Jordan Marmolejo. Right, no?

Manuel Lemos: I'm not sure.

Arturs Sosins: How do you not sure? I just thought this was...

Manuel Lemos: No, because, you know, in Portugal and Brazil, we'd talk portuguese and the spelling is not exactly the same thing.

Arturs Sosins: Yeah, really. I thought they're pretty different, the way they sound for me.

Manuel Lemos: Yeah, everyone makes that confusion.

[Chuckles]

Arturs Sosins: OK.

Manuel Lemos: We can understand Spanish. Actually, I think Andoitz is from Barcelona which they do not mix also a speaker, a different idiom which is Catalan and is not exactly Spanish. It's similar also to Portuguese but it's not the same.

But I would not risk to tell you for sure what is the correct spelling of his name. But I think you got it more or less right.

Arturs Sosins: OK. So what this package does, it implements an astar algorithm which is basically a Pathfinding algorithm.

It could take metrics of values where you can walk or where you cannot walk and it draws the table and you can find a way to it. We can refresh , it be generated random, the example generates randoms, so we can always see.

Yeah, it find the shortest paperweight and astar is pretty efficient even for... Can be used in JavaScript, as you see.

Manuel Lemos: Yeah, that's interesting.

Arturs Sosins: Thanks for this package to Andoitz. That would be about it.

Manuel Lemos: OK. This is great because this month, we have lots of nominees. Fortunately, the audience of JSClasses is growing and with it is also growing the number of interesting contributions.

And on my behalf, I'm going to comment another three packages. So we can comment on all of them. This month, we have time to comment. So the first one that I'm going comment...

Arturs Sosins: Now, it's your turn to tell his name.

Manuel Lemos: Yeah. No. The name it's the same.

[Laughter]

Manuel Lemos: Well, again, Andoitz has submitted yet another interesting package, it's good to know. As we're going to comment ahead, he's helping Spain to move ahead in the ranking of the Innovation Award by country, but we'll get back to that ahead.

So, for now, let me just comment on this package which is called JavaScript Query Terminal, which is basically online because there's so much you can run some server commands using AJAX.

Let me show you some screenshots. It's a bit small but I think you can see. Basically, it looks like a shell that you can find on many systems, shell like in Linux. Even Windows, it's somewhat similar but it looks more like typical Linux shell.

And you can run some commands on the server side. There must be some code that actually executes the commands and reads the responses, so this is an interesting console library that does the browser side part of the console system.

So, thank you for Andoitz also for yet another great contribution.

And the next package, I'm going to mention, this one, is from Thomas Bjork. He is from Sweden and has been submitting several interesting contributions, not just this month, but in the other months.

But, in this case, this JavaScript Tree Linked List, which is a data structure that is helpful to store the other keys of values that are arranged in a binary tree, so it provides all sorts of functions to traverse the tree of elements. So, congratulations to Thomas for his contribution.

And another package that I'm going to mention, this one is from Vallo Reima from Estonia. And this one is called JS Merge XML.

This is a bit somewhat unusual because most XML related applications are more to parse or to generate XML, but in this case, it allows to combine those functionalities and merge XML documents and even search them with XPath, expressions.

So this is an interesting events package to manipulate XML documents. So congratulations to Vallo for his contribution.

JavaScript Innovation Award Rankings of 2014 (40:02)

Manuel Lemos: Now, given that we mentioned all the nominated packages, let's see how are the standings of the Innovation Awards by country.

So, as I've mentioned before, Andoitz had been submitting great packages. And just considering the rankings so far, Andoitz is leading with 2 packages and 10 points, followed by Jimmy Bo from Canada with 3 packages and 7 points. Then, several other authors with just 1 package.

Next, we also look at the Innovation Award ranking by country. And thanks to Andoitz, Spain is leading currently with just the same 2 package that Andoitz has sent.

So the Innovation Award championship for the JSClasses site is still warming up. There is plenty of way to go, especially considering that in the latest month, there had been many more contributions and many more countries are participating.

So, for now, Spain is leading, followed right after by Italy with 3 packages and 8 points, then Canada with 3 packages and 7 points, followed by several other countries with 1 or 2 packages with less points. But let's wait and see how this goes in the coming months.

Arturs Sosins: Yeah. Basically, as Andoitz showed, it's not too late to participate. You can jump in and move your country to the first place in one single month.

So nothing is set in stones and it's all going on. Basically, if you want to secure your country's position, you should start participating now.

Manuel Lemos: Well, it's interesting that one country that I am not seeing here is Latvia. I don't know what happened in Latvia. Maybe a few people are enjoying the summer and not participating much. Do you have any idea?

Arturs Sosins: Yeah, well, you see, it would be as if it's Andoitz. One month and you're in the first place.

Manuel Lemos: Yeah, right. Well, at least in the past, Latvia used to be better ranked. There's a guy here, an all time Award winners, there was a guy here that is in fourth and even Latvia was well-ranked and at least in Top Ten with many packages.

Well, this ranking only started last year, so it does not take in account the previous years because there was no Innovation Award before.

Anyway, as I was mentioning, the championship for JavaScript Award, either individually or by country is still warming up and I hope it will start getting better. 

And if I evaluate from the number of packages that has been submitted lately, this could seem they can change a lot. So let's wait and see how this goes for the upcoming months.

Conclusion (43:45)

Manuel Lemos: Well, with this, we practically reached the end of this episode. It's a shorter one; there were not many topics to comment about as in the previous months, I don't know if it is because of the summer in the north.

Arturs Sosins: Of course.

Manuel Lemos: Yeah, everybody is on the beach. There is no time to program JavaScript. There are not many news in the JavaScript world.

So, let's wait and see for the coming months, if things get better. So, on my behalf, that is all for now. I don't know if you have any final remarks, Arturs.

Arturs Sosins: Yes. Enjoy the rest of summer, the rest of the months of summer, if you can. I already pretty basically lost my option to enjoy it, but still.

Manuel Lemos: Well, at least for me, there is no summer here because as you may see, I'm not wearing a coat because it start getting colder.

It's normal, but this year in Brazil, thanks to global warming, there's no warm over here. It has been relatively cold.

Just to say that probably global warming is not the right name to call this event in the weather. But that would be probably a topic for a totally different kind of Hangout. Here, we should be talking mostly about JavaScript.

And for now, that's all. Let's wait and see what the next month brings us of interesting to the JavaScript world. So, on my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]