What to Expect From jQuery 3.0 - Lately in JavaScript podcast episode 49 - JS Classes blog

Contents

Introduction (00:20)

jQuery 3.0: The next generations (1:41)

7 Principles of Rich Web Applications (6:07)

5 functions of the Console object you didn't know (15:57)

Running Robots From Your Browser With Cylon.js (17:44)

Mozilla Introduces the First Browser Built For Developers: Firefox Developer Edition (20:53)

Embed JavaScript inside an image file (26:50)

JavaScript Innovation Award Winners of September 2014 (31:15)

JavaScript Innovation Award Rankings of 2014 (35:34)

Conclusion (38:05)

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. This is episode 49, and after a long time struggling again with Google Hangouts, finally, I think we got started. I'm Manuel Lemos, and once again, I have here with me, Arturs Sosins from Latvia.

How are you doing, Arturs?

Arturs Sosins: Hello. Kind of cold actually, the winter is coming.

Manuel Lemos: I thought you were going to say we're tired of struggling with the Google Hangouts system.

Arturs Sosins: Well, most struggling is on your end. You don't have a Lower Third, it doesn't show your camera. But at least now, you can be thankful that you're not an elePHant, you know.

Manuel Lemos: Yes, that's the good part. This time we have as a mascot, totally unrelated with JavaScript, but it's also about PHP Classes because it's the brother site of JSClasses that is promoting this hangout. This time, we have the elePHPant.

jQuery 3.0: The next generations (1:41)

Manuel Lemos: But we are here to talk about the latest happenings in JavaScript world, and we are going to start right away with some news about jQuery 3.0.

Basically, it doesn't say what is the most important information people wanted to know, which is basically when it will be released, but they mentioned a few things about what they plan to do in this version of 3.0.

They plan to have two versions. One called compat and the other is regular one. The compat one is made to include code or whatever is necessary to make it work with the old browsers.

Well, old browsers does not mean those very old. It means IE8, Opera 12, Safari 5. They don't even mention Chrome or Firefox because most people have already upgraded to the latest versions.

Other than that, they mentioned that if you are going to develop a platform on which you are certain what the browser will be like... for instance if you are developing for instance, mobile applications based on PhoneGap or Cordova... they encourage you to use the regular jQuery 3.0.0.

Other than that, both versions will provide the same public API, so it will be no trouble to switch between one version and the other. So I think it is to make people... developers... happier, so they'll not need to deal so much with the difference between the libraries.

Arturs, have you been following this news about jQuery 3? Have you been using jQuery in your application somehow? What are your thoughts about this?

Arturs Sosins: I think it's hard to find a JavaScript frontend developer that will not be using jQuery in one way or another. Yeah, of course, I've been using it and been following it. I think the main point of the article is to calm the users because there was a concern that jQuery second version deprecated some older browsers and what will be in the future, how developers could handle the older versions.

This article answer the question that there would be a compatibility version that would reuse the base code from the jQuery first version, and like the main version that would reuse the code from jQuery second version.

It answers the question, this answers uncertainty what would the developer do to support older browsers. So It think that was the main point.

Manuel Lemos: I think it's good because since many people use jQuery, they'll be always interested to know what would be eventually new features or new improvements of the latest version, just because they'll always want more and better things. I think most people that are already using older jQuery versions are quite happy and probably are not so concerned about the new features, which this article from what I read does not tell much, right?

Arturs Sosins: No. It basically says it would have the same API and nothing much newer, nothing that would break compatibility also.

Manuel Lemos: And since it also doesn't answer the question what will be their expected release date, so there is not much to announce for now.

7 Principles of Rich Web Applications (6:07)

Manuel Lemos: Given that, let's move on to the next topic, which is related with an article I found interesting. It's called 7 Principles of Rich Web Applications. Basically, it is just common sense about the way things should work. Let's take a look at each one of them.

The first one says, "Server rendered pages are not optional". Actually, it mentions that server rendering is not about SEO; it's about performance.

I supposed they are talking about the fact that if you try to push some HTML templates and start rendering them on the browser side, it would eventually take more time than if you are the server that would serve the HTML already rendered. Personally, that's something that we...

Arturs Sosins: Also, the AJAX request basically would be the same as the solution, that the server no need to render it, no need to provide data to be processed in the client side.

Manuel Lemos: They are also are mentioning here "HTTP 2.0 PUSH of resources". I think that is something that is not yet widely spread, so that's why they say in the future.

And the second point... let's see, it's always go back and go forth... "Act immediately on user input". This particularly says it all, just to make your application responsive. Not responsive in the sense of adapting to different screens. That would be interesting but adaptive to the user input, so if the user X pushes a button, he expects something to happen immediately, not ten seconds later.

Just because your application is busy, it should show a sign that it is busy, so the user know what is going on. This is terrible especially on slow devices, for instance, mobile devices that are either old or slow for some reasons.

Some applications become very unresponsive, and we don't if you did not touch the screen hard enough or it is just the application that is not acting responsively. Now, this should be pretty obvious.

The next one is the "React to data changes". This is to be responsive, but not responsive regarding the user input, but rather information changes status of something that your application depends.

Arturs Sosins: Yeah, for example, the company I work for provides real-time analytics, so if you open the dashboard, you want to see the data displayed immediately when it's updating things in the database.

Manuel Lemos: Yeah, and...

Arturs Sosins: It's something like that.

Manuel Lemos: Exactly. This is as important as the previous points.

The next one is that it says, "Control the data exchange with the server". This is to provide user-friendly handling of errors and other stuff. Sometimes, your application depends on connecting to the server to obtain some information when for some reason the network is not working very well. Maybe you should tell that there are some difficulty to connect, rather than waiting forever not telling anything to the user. Well, I think with that, I think that's it.

And the next one, "Don't break history, enhance it". This is regarding Web applications dealing with back buttons. Sometimes, the user does not click on buttons to leave a certain page. He just clicks on Back and your application should be able to deal with this.

For instance, when it returns to a page that is in certain state, it is important to use the pushState history, so if the user shares anything in the previous page, it should go back exactly to what the page was.

They mentioned here, history pushState precisely because of what I said.

Arturs Sosins: But you can actually make much more. For example, there could be some kind of configuration like a table where you have some sort of filter data and you can also persistently save these as settings, so when the user gets back to it, there are also like there. Or there was an example about scrolling position. You can enhance it further, if you want.

Manuel Lemos: Right. In certain cases, the browsers are able to preserve the scroll position but in others, it could be too much because probably, you switch some tabs to become visible or not. That changes its composition, and if you are not able to restore the tabs that were visible or not, probably it will become confusing to the user.

So the next point is to "Push code updates". I'm not sure about this, but I think this refers to when you were improving your application, probably some JavaScript code or even CSS code will change and your application should work in such a way that it should actually push the right version.

Personally, I use that technique. Actually, I've been using it lately, not all the time, but when it is... Let's check it here. Let me show the package page. For instance, I put the number. Let me show. I put the timestamp as parameter, some of the URLs. Hoping for the right... This is a bit... I'm not sure if I can put this one here. This is not very readable. But OK, I think you can see it here.

I put timestamp parameter to make sure that next time, your browser loads this JavaScript... This is actually a static file, but I put this parameter that does not mean anything but just order the browser to not keep loading the old version from cache or something like that.

I use this form of versioning just to make sure that if some user was using an old version that... as a newer version, since the URL would be different, it won't load the old version anymore from the cache. I think that's what it means here.

Arturs Sosins: Most probably, I guess.

Manuel Lemos: OK, the next point... "Predict behavior", just call it "Negative latency". It means that not only you need to react immediately, but if you can react with anticipation, anticipate what the user will do, what your application will be greatly much more usable.

I think the obvious is the recommendation is quite great. They are just common sense. Personally, I agree with all of them. What about you, Arturs?

Arturs Sosins: Yes. Most of them, I think, are... I don't think you could apply them for any cases, but mostly it enriches user experience if you follow them, yes.

5 functions of the Console object you didn't know (15:57)

Manuel Lemos: Yeah. Now, moving on to the next topic. There is an article here, I found it curious because it talks about the console object, which at least for me have not only been using that function console.log just to load some debug information to the browser console and what is going on.

But they are mentioning here, this article "5 functions of the Console object you didn't know". This certainly applies to me, I didn't know any of these functions... assert, table, profile, group and time.

I don't know, were all these functions available since a long time ago or are they more recent? Arturs, were you aware of these functions?

Arturs Sosins: Yeah, I think I saw something like that, some article before, but I didn't pay attention, and actually, I wish I would knew some of them before. Like console.table could be a real time-saver when you want to see what's inside the object, and stuff like 'profile' or 'time' are also probably used in the browser tools like Developer Tools. It's probably something similar, used in certain ways. I usually use it for the same purpose but yeah, you can also do some custom debugging using these methods. So they're actually quite nice to see.

Running Robots From Your Browser With Cylon.js (17:44)

Manuel Lemos: Yeah. So given that, let's move on to the next topic, which is about something that you should be more familiar than I, which is about something that we actually were showing in the last episode because it was related with hardware that can be controlled with JavaScript. In this case, it's Cylon.js.

Arturs, you seem to have been playing with some devices that can benefit from Cylon.js. What is your experience?

Arturs Sosins: Yes, I am participating in one side project that tries to develop a controller to control other smart devices. We were looking for different frameworks to use and Cylon.js was one of the ones we found. Actually, it was quite great.

At that time, I had this Fourier device, so I needed to make it working with our controller, and yeah, I used the Cylon.js. it was really easy to set up and to start working with it. The only problem was that at that time, it was like a Node.js server side, so if you want to control it from the browser, I would have to create a Web site connecting to the Node.js and try some data input. But as now I see from this article, you can actually browserify it and run it from the browser directly which is even better.

As I see, later, they will also provide the PhoneGap example so you could also control this devices from the app in your phone which also runs JavaScript. So yeah, JavaScript everywhere and Cylon.js is the best framework for the robotics. It controls lots of devices. You can look at the platforms. There are lots of devices listed there, and if you're into robotics and into JavaScript, then that's the way it go.

Manuel Lemos: So, if I want to try, this a framework with drivers for different devices, right?

Arturs Sosins: Yeah. They are called drivers, but it's like a wrapper to read the API that device understands.

Manuel Lemos: It sounds great. For those that want to play with hardware, this sounds like a great framework.

Just to mention it a bit more than we mentioned in the previous episode, there is this article here "Running Robots From Your Browser With The Cylon.js". It's not a very long article like the previous one, but it should give you an idea how simple it is to make it work, to integrate with this framework.

Mozilla Introduces the First Browser Built For Developers: Firefox Developer Edition (20:53)

Manuel Lemos: So now moving on to the next topic, now let's talk something relatively new. I have not tried it yet, so I hope I'm not misunderstanding it. Basically, it's what Mozilla is calling Firefox Developer Edition.

I tried to look at the available information. I did not try it in practice. My first impression, this is basically what Chrome already has, and probably with a few more things. From what I could understand, those few more things are like, for instance, what they call the WebIDE.

Let me open the page.

It's all in Portuguese here because it insist that I want things in Portuguese. Let me put in English and zoom it. It has several built-in add-ons, if I call them so. It mentions WebIDE Responsive Design View.

This is something interesting. It seems to be very similar to one thing that Chrome has introduced recently. I find it very useful because it lets you try your Web pages in different resolutions to see how your responsive site is handling it well or not.

Then, there is Valence... develop and debug your app across multiple browsers and devices with this powerful extension. I'm not sure. I think it is to try your applications in practice. In different browsers, right? Or is the web IDE. I'm not sure, because these extensions or whatever they are called seem to be connected with each other.

Arturs Sosins: Yes, they are.

Manuel Lemos: I don't know.

Arturs Sosins: They are. They are components of the browsers. I've also installed one to try it out, to see how it is, while we were fighting with the Google Hangout. You can see on the screen that here is the IDE.

I would probably prefer better a more simpler text editor. But here, you have a whole project so you need to a project manifest to make it work, so if I want to convert my existing kind of Web pages, I would need to create such project manifest. Probably, could also add files here... no, it doesn't seem that I could add files here.

Manuel Lemos: Where are those files? Are those on the server or did it...?

Arturs Sosins: No, those are local files. That's one of the problems that I found out, actually. I don't know, how would you manage a project that is with a backend, which is tied to the backend.

Manuel Lemos: That is the purpose. Maybe the extensions that you just did for developing, not for deployment.

Arturs Sosins: Probably yes, so you can just write frontend here and then edit with... combine it with the backend. But maybe it is that you could actually, yeah, easily run it, and you can select runtimes. It's not...

There is also some kind of simulator, I did not install it yet. It can also connect to other users on your computer. So remotely connect to them and check on them and debug or work on them as a browser. So that's the cool feature. That's what they call I think the Valence.

Manuel Lemos: Yeah. So in practice, it is all there. It is not a separate thing.

Arturs Sosins: Yeah, it's all at the browser.

Manuel Lemos: They also have a Web Audio Editor, Page Inspector, Web Console, JavaScript Debugger, Network Monitor, Style Editor. This is more or less things that already existed in Developer Tools of browsers since quite some time ago.

But I thought it was interesting because it was mentioned that you could actually see how it would look on different devices, different apps of OS like iOS, Android, and even Firefox OS, which even though that they have their own site to promote, of course. But I could not get exactly if it were just an emulation or they're trying to load it in Web views of those browsers of those platforms. Maybe it's an emulation of basic methods.

This is interesting. I suspect that we probably will talk more about this in the future package of the Lately in JavaScript podcast, because it's always interesting to know more about these improvements in Developer Tools.

Embed JavaScript inside an image file (26:50)

Manuel Lemos: Moving on, we're going to talk now about an interesting article that is much unusual which is talking about how you can embed JavaScript inside of pictures.

These all sounds cannot for a good thing, probably. But if that keep about security matters, because if you can inject JavaScript on a picture file, maybe you can mislead some vulnerable system to believe that an image is type of files it can handle and that the system can be tricked to interpret it as a JavaScript rather than a picture.

What they mentioned here is basically that, for instance, the View Format starts with GIF89a and then... This is the header of the file. It's binary, so right after, there is some X and some bytes that define the size of the picture. They can use this combination to define, for instance, the width. This when considered as individual characters, there will be the / and the * which are used in JavaScript, of course, and many languages to start a comment.

That means that whatever comes after that is interpreted as a comment, and after the end of the comment, they can put some code like assignment of some value, and treat them as a variable. Then, that will come some code that would be used on malicious purpose.

So for instance, if you inject a script pack that loads the URL of a picture which in reality is JavaScript, you can be injecting malicious JavaScript in a web page. Of course, this is an hypothetical scenario on which you have a vulnerable application that could be exploited with things like this.

I could not fully imagine a real scenario on which his was exploited, but I remember sometime ago, some singular exploit was implemented in PHP. So the problem was not in PHP, but the way people use certain PHP commands.

For instance, they want to serve a picture that was uploaded by user to the server, instead of using some file reading command, they use script-inserting commands like 'include' or 'require', and this is bad because those commands were not for those purposes.

But there are people that do not know exactly what they are doing because they are not very mature as developers. They could also benefit from this kinds of exploits of putting comments and then replacing the code that could activate some exploit that could, for instance, steal data from the server.

But that was on PHP side. On the JavaScript side, I cannot fully imagine possible scenario that's going to be exploited, but I'm sure somebody already thought of that. Just be aware that do not do stupid things like confusing pictures with JavaScript code.

JavaScript Innovation Award Winners of September 2014 (31:15)

Manuel Lemos: So now, moving on to the next topic, now, it's time to talk about the Innovation Award of the JavaScript 2014. We are going to start talking about the winners of September. Actually, there are not many nominees as before. There were just three, and those got tied with the same votes, so all of them won.

OK, let's talk about them. Arturs, please go ahead and talk about what you thought were the most interesting.

Arturs Sosins: Let me try to share it first. The first one is Format.js class, developed by Pierre from France. What it does, it returns the date, format it according to your country's specifics.

I was interested in how he actually do it, because there is no general rule how you could generate it, and he just stores the formats for different countries and sites, so he has this information. If you need it, it's a handy class that extends the date object, then you can format the date to any specific country that you need.

Pierre got one downloadable e-book of choice by O'Reilly for this class.

The second one, is JS Webcam class... let me load it here... developed by Elger van Boxtel. What it does, it uses the API to retrieve pictures or video from your computer's webcam. Basically, it can retrieve binary data and then, display it for example in the web site data URLs. It's also a really neat package.

Elger got one book of choice by Packt for this class.

Manuel Lemos: On my behalf, I would like to talk about the remaining one which is a package for a somewhat unusual purpose. I mean, unusual for most types of applications that you would find on the Web... JavaScript BIC Validator.

This BIC standard is a format for defining codes for containers that are transported with products around the world in ships or maybe trucks. This one is a package developed by Sameer Semna from India.

What it does, it validates the code because a BIC code has certain conventions. It can take the code, compute the check digit and verify if it was correctly formatted. It is an interesting package for people that, for some reason, need to deal with containers that are transported around the world.

For this award, Sameer picked a prize, which in the case was one year of Codenvy Developer hosted cloud IDE premium plan. I hope he's enjoying this cloud IDE.

For the Innovation Award of this month, we have talked about all winners.

JavaScript Innovation Award Rankings of 2014 (35:34)

Manuel Lemos: Now, let us see how is the ranking of the Innovation Award winners of 2014. Individually, Thomas Bjork from Sweden continues to lead with 4 packages and 15 points, followed by David Castillo (2 packages and 13 points), and now followed by Pierre FAUQUE with 3 packages and 12 points, then, Andoitz Jordan Marmolejo from Spain with 2 packages and 10 points; then, several others with one or more packages but less points.

By country, so far, France is leading now with 5 packages and 21 points, followed by Sweden (4 packages and 15 points), then Mexico (2 packages and 13 points), Spain (3 packages and 12 points), Italy with 3 packages and 9 points, Canada (3 packages and 7 points), India with 2 packages and 6 points. Then, there are several other countries with only one package and less points.

Unfortunately, this month, we have less nominees, so there are not so many people sending packages to participate in the award. Previously, I mentioned that JSClasses had a boost in traffic from Google because there are some recovery of some Google algorithms. But then, it dropped again for some reason that I am not sure what happened. What happens is that, unfortunately, many new packages are sent by new users, and if the site gets less new users, it also gets less new packages. So let's see if in the future things recover.

Many sites are being affected by Google algorithm fluctuation, not just JSClasses and others. To a certain point, also PHPClasses, but PHPClasses is much more popular. Let's see if things improve in the future. Anyway, for now, I hope the current users keep sending great packages, so we can keep talking about them.

Conclusion (38:05)

Manuel Lemos: OK, with this, we practically ended this podcast. It was quite long because we tried to record several things at the same time with all the hassles of Google Hangouts. But finally, it reached the end.

I'd like to thank you, Arturs, again for the time and patience of recording yet another Hangout that should be even less than one hour; it took more than two hours. But I think we made it with some audio breakups or not. We reached the end.

So on my behalf, that is all for now. Just one thing before I leave. I'm not sure yet if there will be a recording next month because I'll be traveling, probably spending Christmas in my home country, Portugal.

I'll try to see if I can record it from there, but in fact, I cannot promise there will be time to do it. Maybe there will be no recording, but if there will be a recording it will be posted in the usual places.

So now, that's all for this episode. Bye.

Arturs Sosins: Bye.

[Music]