Contents
Introduction (00:20)
Node.js Contributor Dropping it for Go language (0:49)
Executing Single Instructions on Multiple Data (SIMD) in JavaScript (13:36)
Building Native Mobile Apps in JavaScript using NativeScript (17:45)
Faster Page Navigation and Updates using YouTube SPF Framework (21:22)
Detect, Undo And Redo DOM Changes With Mutation Observers (28:03)
A first-person engine in 265 lines (31:14)
Event Tracking with Google Analytics using Boba.js (33:51)
JavaScript Innovation Award Winners of April 2014(37:49)
The New User Interface of the Package Pages (47:02)
JavaScript Innovation Award Rankings of 2014 (59:08)
Conclusion (1:01:09)
Contents
Listen or download the podcast, RSS feed
Watch the podcast video
Read the podcast transcript
Download Size: 53MB Listeners: 551
Introduction music: Riviera by Ernani Joppert, São Paulo, Brazil
RSS 2.0 feed compliant with iTunes:
http://www.jsclasses.org/blog/category/podcast/post/latest.rss
Watch the podcast video
Note that the timestamps below in the transcript may not match the same positions in the video because they were based on the audio timestamps and the audio was compacted to truncate silence periods.
Show notes
Read the podcast transcript
Introduction (00:20)
[Music]
Manuel Lemos: Welcome to the Lately in JavaScript podcast hangout. This is episode 44 and as always, I have here Arturs Sosins from the warm Latvia.
Hello, Arturs.
Arturs Sosins: Yeah, very warm. We can even swim in 18 degrees water, so it's really warm to us.
Manuel Lemos: That's for brave people from Latvia that are used to face very cold temperatures.
Node.js Contributor Dropping it for Go language (0:49)
Manuel Lemos: And, well, this month, as always, we have several interesting topics, things that happened in the JavaScript world.
We are going to start precisely about one piece of news, about a contributor of the Node.js community that sort of made a commotion. Or maybe not, I'm not sure.
Let me share the article here. Let me see now, is it large enough though.
TJ Holowaychuk, he has been a contributor of many Node packages for Node.js for many purposes.
Basically, he made a statement, wrote an article in his blog just telling the world why he switched from Node.js to Go.
And this seems to be a recurring topic. Many complaints about not just Node.js specifically but also the way things are done in JavaScript, lots of complaints about the very same thing. Many things that we've talked of previously several times here, the callback hell, and other problems that he mentioned here that are more specific to Node.js.
But I can see several times he mentioned callbacks. Callbacks, callbacks, callback sucks. Seven ways to say that callbacks suck.
[Laughter]
Manuel Lemos: And this seems to be yet another complaint, that people are sort of making an effort to like the callback way to deal with asynchronous programming.
Arturs, have you looked into this? What were your impressions about these complaints? Isn't this a deja vu situation?
Arturs Sosins: Yeah, really. We really talked about that lots of times especially the callback hell. I don't know, from his perspective, he's managing Node.js code for production and needed to write lots of code just to handle some specific cases that, by his opinion, were supposed to be handled by the language or environment itself. And probably, he's right.
But on the other hand, I can't say much about Go, if it is superior to Node.js or to JavaScript as a language. Because Go is actually something I haven't tried, not even in production, didn't even play with it right. I know I think Google created the Go language, right?
Manuel Lemos: Yes, I think it was from somebody from Google. I just don't know exactly because, to be honest, I didn't check much about the Go language.
What I learned basically, very similar to JavaScript, because JavaScript is also very similar to Java in many cases, it also supports untyped variables and stuff. But the only thing that I really notice that could be different is that they have the so-called Goroutines.
Let me share some screen here. And they basically, I don't know if this is large enough. Let me try to increase.
And as you may see here, this is very similar to something that we mentioned recently. You can define function here and just call the Go, use the Go command, and it will call this function to execute. I think it is in parallel.
I don't know if it creates separate thread or it is something that is executed in parallel but in the same thread. But this is what I've heard. It would be a way to implement parallel processing with Go.
And what I mentioned is that we have seen this recently about the Facebook Hack language which is a sort of a fork of the PHP language but things like this, it's also possible to call code that is executed in parallel.
The way it is executed is sort of mysterious because we are not sure if it is all running in the same thread and with some magic, you get a way to wait for the parallel procedures to execute. Because it says there is a sync package that provides useful primitives. I did not go there.
Arturs Sosins: Can you run the code that was shown before?
Manuel Lemos: Yeah, I think I can run. And what it does, I think it just calls some server here. It executes this code on the server because it's not a browser-side thing.
Arturs Sosins: But are there "World" and "Hello" like consecutive? There is always "World Hello" or whatever. Oh, you see, there is a...
Manuel Lemos: Yeah.
Arturs Sosins: Yeah, OK. It seems so.
Manuel Lemos: Yeah, and...
Arturs Sosins: So they are not overlapping.
Manuel Lemos: I'm not sure. Is it supposed to run like five times and display the...
Arturs Sosins: The first one is Hello?
Manuel Lemos: This is seems to mean that it's all executed in parallel, so it does not guarantee that the order will be like that.
Arturs Sosins: Yeah, that was the one that's checked, yes.
Manuel Lemos: I could not understand much why it printed many times Hello. It's supposed to print...
Arturs Sosins: No, it should print both.
Manuel Lemos: Go say... OK, I see. I just thought this is going to run once. But anyway, it seems to be in order. It executes one or the other. So this suggest when it calls the sleep function here, it gives the processor back to any other code that is running. So, maybe this is not really parallel processing, just collaborative multi-tasking on which one task gives the CPU a way to another task when it is not using the CPU.
So when you call this sleep function, it will wait for a period of time and then give the CPU back to another task that is running it and so on because that's why it seems to be synchronous here. I mean, it executes one statement after the other.
OK, this doesn't matter. What matters is it is more pleasant than the callback hell.
[Laughter]
Manuel Lemos: There is a sleep function which means that you can pause the execution for awhile and you don't have to use callbacks for intervals. Well, this is definitely much more pleasant programming than the callback hell. We have said that many, many times.
And so, it's practically the same as what Facebook Hack does, except that this is not compatible with any JavaScript, while Facebook Hack is compatible with PHP. So if you have PHP Code libraries, you can use them right away with Facebook Hack, while here if you have JavaScript libraries, you have to port them to Go.
Arturs Sosins: And you also can't just take Go and create a Web app at front end because I don't think it runs a browser as simple like that. It needs some kind of its own environment, so the virtual machines execute. So, I think it would be mostly a backend. I think Google engine supports Go, so basically, it's competitive to Node.js but...
Manuel Lemos: You mean Hack engine?
Arturs Sosins: Yeah.
Manuel Lemos: Well, I didn't check but I was not sure about that. I know that nowadays, they even support PHP...
Arturs Sosins: Oh, really?
Manuel Lemos: ...in the AppEngine. Yeah, that's like in the other year. They announced it in 2013.
Arturs Sosins: Yeah, so Google was the last one to implement PHP support. All the other services are first to implement PHP support. OK, that is interesting.
Manuel Lemos: Yeah, they've been delaying if for five years. But we mentioned that in the past year, we mentioned it in the PHP podcast, because it was like when Google finally decided that they could not ignore a language that is present in 75% of the Web servers.
[Laughter]
Arturs Sosins: Yeah, even Google got it.
Manuel Lemos: It's not just PHP, it's WordPress. The first thing that they made an effort to make it work well in the AppEngine was WordPress. But that's OK, that's a different topic. That's the PHP world.
The only thing that we're talking about that is related with PHP is about the support for parallel programming or something similar to that. What Go seems to implement is very similar to Facebook Hack.
And so, the technology here, the conclusion here is that people sort of been making a huge effort to tolerate the callback hell. I've said it many times, but people from the Node.js are very stubborn. They think all has to be done the callback way.
Well, I don't know. I don't know if it is possible to make a Node.js work with a goroutines. I have not even read anything from anybody that would claim that is possible or not.
But I think whoever is concerned about this, if it is possible to make it look like that, they'll probably make an effort because you can see that's not something technically impossible. Maybe they have to change something out of their internals, but probably, it's something that is feasible.
Well, anyway, this is just to mention about this topic. I don't think it is that important. It's just yet another developer complaining about the callback hell. Probably an important developer for the Node.js and maybe just saying that Node.js needs to improve or else, we'll all move to Go.
I don't think they want to waste all the effort they have done on Node.js, all the libraries, all the packages that are making them productive to just to switch to another language. Maybe it's just to make a statement to motivate the core Node.js developers to wake up and move on, because the way it is not very pleasant, not very productive.
Executing Single Instructions on Multiple Data (SIMD) in JavaScript (13:36)
Manuel Lemos: OK, next topic, we're going to talk about something that is also... I think we have commented something about this, which used to take more advantage over the existing hardware.
Let me share the screen here. Well, this is an article about SIMD, which is a way to execute complex instructions with a single command. And this is very suited to, for instance, operations matrices and other...
Arturs Sosins: Any mathematical calculations, basically.
Manuel Lemos:
Arturs Sosins: Especially the floating point, I think.
Manuel Lemos: Right. And these are very useful for instance for games or any engines that need to form complex calculations. Although, nowadays, at least for JavaScript, there are OpenGL libraries that could be used to manipulate graphics with the underlying hardware. But I think in this case, from what I got, is to use the main CPU.
Arturs Sosins: Or GPU.
Manuel Lemos: Oh, well, I'm not sure about if they use of GPU but if they use it, it's probably transparent. They don't have to be concerned. And they even show here some...
Arturs Sosins: Benchmarks.
Manuel Lemos: ... some examples of how much this library made it possible to accelerate like four times a Mandlebrot fractal. So, this is basically to make it more efficient to perform complex operations that deal with large amounts of data at the time, like for instance, data from matrices.
So, this is just to mention that if you need a really faster performance, you can use this. I'm not sure if this is a library or is it some runtime extension that you need to use. This was really not clear for me. I don't know, what did you get?
Arturs Sosins: If you remember, there is a thing called Emscripten, your favorite one. And I don't know if it was the same developer or if they were somehow tied together. But Emscripten uses subset of JavaScript, Asm.js, which basically executes instructions on the lower level.
And this would be the explanation of how they seem to achieve it, basically. It's either similar subset of JavaScript or maybe the same API that they are using for the different processes of CPU or something.
But basically, it shows it how there could be a lower level. It's like a subset of JavaScript but it's a lower level, so the subset's making it faster. It's kind of hard to grasp at first, but yeah, that's how it works. So, using some kind of direct APIs for CPU or GPU processing.
Manuel Lemos: Yeah, so, can we use this on the browser or is it a Node.js thing?
Arturs Sosins: No, no. I think it's browser-specific because I don't think Node.js does any rendering but I think it's mainly meant to be used for WebGL or stuff like that, rendering. Probably, also calculations without rendering could be done. But maybe I think it's a browser access to a lower level of hard drive.
Manuel Lemos: Useful things like fractals.
[Laughter]
Arturs Sosins: Yeah, also that.
Building Native Mobile Apps in JavaScript using NativeScript (17:45)
Manuel Lemos: OK, well, moving on the next topic. Talking about a library from the Telerik. I think these company is a developer of .NET components, if I'm not mistaken. And they announced the native script library which is a cross-platform framework for the native mobile applications, so you can use it to develop applications that run the same on Windows phone, Android and iOS systems.
We have here a diagram. I'm not sure what, I think the diagram here just includes what is in the middle native script. And the rest, it's just what it integrates, with not that you will be able to program those parts with native script.
And this seem interesting although it seems yet another attempt to simplify the development of mobile applications for multiple platforms.
For now, it's beta but you can request access to the beta. So this can be interesting if you are looking forward to develop applications for these platforms. I don't know, Arturs, you are more used to the native mobile application development. What did you get from this proposal?
Arturs Sosins: Well, basically, there were always different solutions. Some were simply showing WebView in the app, showing your mobile app for the WebView. Basically, how it is in the browser that was I think jQuery Mobile, Kindle, Wii UI.
And there were hybrid applications which usually, it fills something from the WebView but could also access some kind of native stuff like native APIs that was the PhoneGap which is now Cordova, I think.
And there were some players that try to combine native UI from mobile applications, Titanium does this. And I think that Windows 8 even had the whole JavaScript API available for all the components they have and they provided it themselves.
So the native script here seems to be combining all of these together in one single layer that could be used with any of the technology and frameworks I mentioned. So it's like combined API to all of these options. Seems something like that to me.
Manuel Lemos: Well, yeah, just to let people know about this, this is yet another option to consider. They say they make you get the available beta but it was not even clear for me if it was Open Source or maybe not.
Arturs Sosins: I know they will be selling some kind of licenses. I've read it somewhere mentioned but it was not yet available for sale. It's not also production-available.
Faster Page Navigation and Updates using YouTube SPF Framework (21:22)
Manuel Lemos: OK, for now, it's what we have and whoever is interested may check it out. So now, moving on to another interesting library. In this case, it is a library from YouTube. It's called SPF. Let me zoom it here.
Arturs Sosins: No, can't see anything.
Manuel Lemos: Does it show to you already, no?
Arturs Sosins: No.
Manuel Lemos: OK. OK, is it showing now?
Arturs Sosins: Yeah, yup.
Manuel Lemos: Well, this is called SPF, Structured Page Fragments as they call it. Basically, it's a framework to handle the navigation of pages that can be updated in fragments. So you can load your page much faster, then you replace fragments of the page instead of loading it in full all at once and I have to wait for the whole page to load.
And it seems that they have been using this on YouTube and it is interesting. I don't know if this would be useful to generate pages that are friendly with the Google indexing, because, obviously, this is meant to be friendly with the users but sometimes it's not very very friendly with the search engines that try to crawl the pages but they don't find the whole content.
This ties to a topic that last month I have updated the user interface for the package pages on PHPClasses and JSClasses. And after a week, I could noticed that the search engine have dropped the ranking of the pages because probably they have not found all the content there, because all the content now is in tabs. And it switched the tab and some contents are loaded dynamically.
But most of the content is on the page already. It was not even that. So the search engine seemed to only index the content that is visible to the user on the first load. If it is not visible right away, they probably ignore it and that is not very good.
So what happens is that I had to revert very quickly to the whole user interface for users that are not logged, because the users that are logged, they can benefit from the new user interface that is much faster, much better in terms of letting the user know where to find the things they want. But for some reason, Google did not like it, so I had to revert it for awhile and figure if it is possible to fix anything.
Anyway, talking about this library. It is not really something new. Probably the thing that made me notice is that it is from YouTube, so it's from Google.
Well, this somehow reminds me the way that Facebook also does the page updates. They usually load first the skeleton and then they fill the sections of the page gradually. And it feels much faster because the user doesn't have to actually start seeing something.
Sometimes, certain sections take a little while to appear but they end up appearing sooner or later and the user does not have to be stalled, can interact already with parts of the pages, while the rest is still loading.
I don't know if there is anything else interesting to say, Arturs. Anything else that you noticed to be relevant?
Arturs Sosins: Well, yeah, I think I've heard about it some long, long time ago, when they started doing it. And there was a blog post that it was really reducing the loading the time and freeing server resources, it was more efficient and faster.
Anyway, recently, we started noticing that they switched all the YouTube, to something like that because my Opera, old Opera, can't handle it anymore. So I can no longer access it from a newer Google or Opera browsers. That does an interesting fact.
Yeah, I don't know about search engine optimizations but YouTube is Google. They might pump in the information directly to engines somehow from a secret API or something or using any of the methods we discussed on previous podcasts like PushState or other Ajax-like SEO engine, optimization engine.
Manuel Lemos: Well, I don't know about them. But at least this implementation of the new user interface of PHPClasses, JSClasses, I have used HTML pushState so you can move on to sections of that page and it updates the URL to some hash that identifies that section.
But in theory, Google would be able to crawl that, but in practice, probably taking it as a separate page. Or maybe, it's not crawling it well at all. I don't know, I still have to figure. But for now, I have reverted it to the old clumsy user interface that is all in a single page and everything is visible.
Arturs Sosins: Yeah, but it's quite still a mystery.
Manuel Lemos: Yeah, well, from what I see, in YouTube, they don't update the URL for even when you are in the same page. So it's probably not so much about navigation. It's more about page loading, split it in multiple sections. Well, that's what it seems to be.
Detect, Undo And Redo DOM Changes With Mutation Observers (28:03)
Manuel Lemos: Anyway, let's move on to another topic on which we comment about this article, about something that was not familiar that it exists. They call it mutation of servers. And they are used to sort of listen to changes in your page, events that affect the DOM page elements.
I'm trying to share the screen here. Can you see it now?
Arturs Sosins: Yeah.
Manuel Lemos: OK, so, this is basically a way to see if parts of your document or your page has been changed. And I think this is mostly useful when you have online editors that are basically parts of the page that is being composed by the user typing text, copying and pasting parts of the document.
Since it is all done asynchronously by the user, it's not that you have to write code to implement things like copying and pasting so user can change the document and you don't know when it is changed unless you have something to observe changes in the DOM.
So this API which seems to be part of the HTML5 specification, at least one part is for that purpose, you can listen to events that process changes. And they have an example here how you can use it. I'm just not sure if many browsers support this API.
Arturs Sosins: As I'm looking at it right now. Here is the table. Seems that, well, the latest versions should support it, even Internet Explorer 11, Opera with Webkit Engine, and Safari. It seems that the newer versions support it, but I don't know if there is any kind of fall backs or quirks to make it work in other browsers, probably not.
Manuel Lemos: So, if you are running an old browser, you have to figure what to do. You have to figure some other way to listen to changes in your document if you need them. Well, this is just to mention something.
I'm not sure if this is a recent API. I did not find, I think it is about HTML 5, but I could not find exactly where it came from. Well, anyway, it's just for you to take a look and notice if you have any good purposes for this.
A first-person engine in 265 lines (31:14)
Manuel Lemos: OK, well, moving on now, I'm going to talk about another library that is interesting because it is claimed to be useful for building first-person games.
It's an engine that they developed in 265 lines. So you can sort of create the basics of a game that you can have your player viewing as first person. It can even run a demo. I don't know if it is...
Arturs Sosins: So can you walk?
Manuel Lemos: Yeah, OK. Can you see this?
Arturs Sosins: Oh, yeah, now you're moving.
Manuel Lemos: Yeah. Well, I don't know. Do you see these vertical lines?
Arturs Sosins: It seems to be a rain, rain in the way.
Manuel Lemos: Yeah, that's what I thought, but it's a bit odd of a rain, but OK, it's an attempt. Though it looks like rain. It doesn't stop raining.
Arturs Sosins: Oh, it seems like a real hand.
Manuel Lemos: That's why it's only has 265 lines, because it's all the same. It's always raining. Well, it's nice. It's just so you could see that you could develop these things in JavaScript in your browser. I don't know what are the requirements if you need to have OpenGL-enabled browser.
Arturs Sosins: Yeah, WebGL, right. I think, yes. Most probably, it's not simply canvas drawn. It would be really, really slow.
Manuel Lemos: Yeah, I think.
Arturs Sosins: So probably, you won't be able to play it on mobile phones yet.
Manuel Lemos: Yeah, and it has several functions for you to define maps and things like that. It's probably good for my son that likes first-person shooters. Or maybe not. He likes to...
Arturs Sosins: Play them?
Manuel Lemos: He likes to play them, not exactly program them. But OK, this is just a suggestion for something that can be useful, not exactly for you to develop.
Arturs Sosins: To create business applications.
Manuel Lemos: Right, exactly.
Event Tracking with Google Analytics using Boba.js (33:51)
Manuel Lemos: OK, moving on now, we're going to talk about a library that is somehow useful for applications that you need to integrate to Google Analytics. Probably, you need to generate some events and it's funny that they call it Boba. Boba means dumb in Portuguese. Maybe there is a reason behind that name.
Arturs Sosins: I can't find the author's name so I don't know if he is a Portuguese or not.
Manuel Lemos: Probably he's a Brazilian because they are very funny, always trying to make jokes. Anyway, sometimes, boba means like it's very simple.
Arturs Sosins: Yeah, that could do it.
Manuel Lemos: And that could be the explanation for the name, but still we don't know where the name came from.
Anyway, the idea of this library is just for you to track, help tracking events. You can define the events that you want to track and use some callbacks. For instance, you can watch the clicks and probably detect where the clicks that the user clicks go, what pages they were going.
I don't know if this would be able to check click events on, for instance, ads because ads are displayed inside the iframes and iframes from different domains, they do not allow you to peek about details of the event and so, that happen on those iframes.
So maybe at least you can track clicks on links that are on the current page, not inside any iframes. So I think this would be useful for special purposes. For instance, if you want to know the user that are visitors of our page, where did they go, did they go, did they left the site for another site or left the current page in the same site.
OK, Arturs, you have worked with Google Analytics. I don't know if this is something that really adds some value to the Google Analytics library or just a wrapper to do mostly the same.
Arturs Sosins: It provides kind of advantages. First one that there are different Google Analytics API, there was an older version. Now it's a newer version and this library seems to be working with both of them, so it's easier to transition.
Probably, if there would be a newer version, I would support it also. So transiting the code from the Google Analytic version would be easier with that. It provides some kind of predefined scenarios where you will want to track some events with clicks, you don't need a lot of the boilerplate codes. It's much more compact and easier to understand.
And it is a jQuery. So if you're a jQuery user and you are used to lots of jQuery stuff like jQuery events, receiving chaining probably. Basically jQuery API, so, yeah, this one's also for you. It would be much easier to use than original Google API.
Manuel Lemos: So this is for jQuery programmers.
Arturs Sosins: Yeah, not for JavaScript programmers.
Manuel Lemos: That's very different.
JavaScript Innovation Award Winners of April 2014(37:49)
Manuel Lemos: OK, well, this is mostly it. Now, we are going to move on to our regular sections on which we comment about the JavaScript Innovation Award nominees.
And this month, we're going to talk about the nominees of April. So they were voted on May and then in June, the results came out. So now, we can comment about all of them. There were four nominees. Arturs, which one would you like to comment?
Arturs Sosins: Yeah, first one which I would like to comment is Robert Haddad from Jordan and what he created is a jQuery plugin, that's a point, which can display charts and bars.
Let me try to show you demo. Yeah, basically, here is an example which shows the usage. You can define lots of parameters, provide values and colors and titles and basically, it's all generated here.
Let me try to check, for example, I don't know if it would work correctly.
Yes, basically, they're drawn on Canvas. Let's go and check. It's probably kind of right way to do it, not with HTML elements but just want to check. Yeah, so basically this is a small jQuery plugin that can draw charts.
Manuel Lemos: Yeah, that is interesting although it's simple because you can display bar charts in DIVs. That means that you do not rely on Canvas. Well, nowadays, all browsers support Canvas but if you were concerned that somebody with Internet Explorer 6 is still using your site and they do not support Canvas, libraries like this can be still be useful.
OK, what other package?
Arturs Sosins: Yeah, the second one I wanted to mention is I think it's Jimmy Bo, we can call him. I think that was a pseudonym or something maybe. He's from Canada and what he created is a simple, simple package that enables you to create animations from CSS sprites, basically from image sprites. There was a simple example, like here we can see simple animation.
Let me try to place some code. So here you can see. I don't know if you really see much from there, but basically, you load the file and then you can define multiple animations from it by taking specific coordinates of the CSS sprite and you can create separate animations from it and play them back. Yeah, so it's done all the CSS changes, so it should be all-browser available.
So yeah, thank you for Jimmy Bo.
Manuel Lemos: Yes, it's really neat, that library, because if you aren't to game development, you can already develop very simple games using sprites and that way, the sprites can actually do all the animation positions of your characters and you just need to define with a few lines of code how the different positions of the animations are played to display the whole animation, depending where your character goes.
So this seems to be very neat and could be a good starting point to develop at least simple 2D games.
OK, on my behalf, I would like to mention also a couple of classes.
Let me share the screen here.
The first one I would like to comment is about this one, JavaScript Advanced Table by Andras Toth from Hungary. Well, basically, this is a package that lets you display the tables.
Now, as you may see, using the new user interface, it's very easy to show any screenshot. Since the author provided the screenshots here, you can see here a screen of this package in action. It allows you to display the tables and even filter the rows that you want to show by searching from some records.
And all this is done dynamically. And you can even edit some fields in place, which is very neat because it provides them much better user interface. They use...
Arturs Sosins: So it's like a simple Excel.
Manuel Lemos: Well, I think you can put it that way. It seems to be interesting because it does something that was trying to figure out what I wanted to do which is to fix the header rows so you can scroll them.
And to do this in a web page, it's not trivial. I thought it was just a matter of fixing the header rows but you have to do some tricks to show the rest of the rows aligned with the headers.
Anyway, this is a full solution for displaying editable tables and so it's a great package from Andras. Kudos to him for his contribution.
And the other package that I wanted to mention is a package from Matteo Hertel from the United Kingdom.
While I'm showing this package, I'm also trying to show the new user interface of the JSClasses and PHPClasses site. Now, when there are screenshots, it's much easier to try to show the things.
And if you want to see for instance why this package was nominated, you can just click on the Reputation tab and it shows right away the Innovation Award comment.
Here, in this reputation tab, you can just see why it is nominated as well as other details that pertain to the reputation. Things like how many files, of the percentage of the file that were imported from version control repositories because using version control repositories is good practice, so this is allotted as a reputation factor as well as other aspects like user downloads, the ranking and also visits that this package got from users coming from Google.
Anyway, about this package, this is a package that can simplify the building of user interfaces than can be either modal or so called toast. It is very useful and you can add dynamically elements as needed.
I was trying to show you a demo but the author did not provide an example, so I cannot show you much. Anyway, this is to be useful package and innovative, so kudos to the author for this contribution. Anyway, while...
Arturs Sosins: Now, I can stop using Alert and try to use something more fancy.
Manuel Lemos: Oh, yeah, right.
The New User Interface of the Package Pages (47:02)
Manuel Lemos: Anyway, as I mentioned, I was trying to show as much as possible about the new user interface. As you might see, it's much more fluid.
You can go directly to the tabs and show the code and things very quickly. You don't have to go to separate pages as before. And the last tab there is, for instance, links to other pages. In this case, there is even a link here that goes to a demo page which is in a separate page. But if this author added this link as a demo link, it would appear...
Arturs, I think you have added some demos to your packages, right?
Arturs Sosins: Maybe, I don't remember.
Manuel Lemos: Let me search for packages from yourself. You don't recall. I think you did but I'm not sure.
Arturs Sosins: Yeah, I was trying it out. Let me try to remember what it could be. I can, maybe, try to do it now.
Manuel Lemos: OK, it would need to be approved.
Arturs Sosins: OK, I think there was...
Manuel Lemos: OK, there is one here which is the one from the Gestures.
Arturs Sosins: OK, yeah.
Manuel Lemos: As you can see, there's a Demos tab but it's funny because for some reason this doesn't work inside iframes.
Arturs Sosins: It does. It just for some reason it has a smaller hit rate so try it more to the left.
Manuel Lemos: To the left?
Arturs Sosins: Yeah, somewhere up. Yeah. For some reason it detects a smaller boundary, but I would need to check that more. I don't know why it detects. In a normal browser it takes normal boundaries.
Manuel Lemos: Well, anyway, this is just enough to demonstrate that you can... Oh, it's a triangle, it looks like a triangle.
[Laughter]
Arturs Sosins: You just can't draw.
Manuel Lemos: Yeah, I can draw but it said it is a triangle. Well, anyway, it's a square. Now, it looks like a square.
[Laughter]
Arturs Sosins: Try a circle.
Manuel Lemos: A circle, there it is!
Well, anyway the point here is that you can show demos of your packages inside of the page, you don't have to leave them. But it shows an icon that you can make the demo link.
Arturs Sosins: Yeah, now it works.
Manuel Lemos: It works in separate page but for some reason, I don't know maybe the offset of the iframe is confusing your package.
Arturs Sosins: Oh yeah, true that's possible.
Manuel Lemos: That is a good thing for you to fix.
[Laughter]
Manuel Lemos: Anyway, you can try it here. You don't leave the page. That was the point that I was trying to make. You can do many things that got much better.
For instance, if you want to see the ratings, you can click here. It even lights some sections in showing the rating and showing the details of the ratings. This one got 78% and it shows the percentage of details that were rated by the users, utility, consistency, documentation is on tab. You have examples, have videos. This is interesting, you can go to the screenshot and see some videos in action.
This is a screenshot of it. Oh, it works. Now, it's trying to load. For some reason, it's slow. That's interesting.
Arturs Sosins: Because it's YouTube. It still loads part of the page or something.
Manuel Lemos: No, something. Just because I wanted to demo this, it doesn't show.
Arturs Sosins: That's the rule. If you're doing something, it won't work.
Manuel Lemos: And it's trying to load and it doesn't want to go there. I hope it's not a bug.
[Laughter]
Manuel Lemos: Let me try and see if this is a problem. I know this package has a video somewhere. If I go to screenshots, again, videos. Oh, it's not loading for some reason. Maybe it's a bug that I just introduced. Yeah, because it can show the screenshots.
OK, it's not working, let's get back to the topics here. Anyway, the point is just to show you that now, the user interface is much better. You can go directly to the package files. You can show the package files and go back, do not leave the page.
Anyway, Arturs, what did you think about these improvements? You somehow helped by giving feedback about the user interface. Does it somehow fill your desires to make the user interface better or do you think there is still things that could be improved?
Arturs Sosins: Well, when you display everything in one page, then it seems to be really cluttered and now basically, all the relevant information is displayed on the first page to determine if you want to download and try to use it.
And you can easily navigate from the tabs if you want more information. So it's like providing new steps to test and try the package till you decide if you want to download it and that's I think the main reason for the site, for usage of this site.
So that's I think an improvement because I myself download lots of packages and try out different libraries. It is the first place where I go when I need some kind of JavaScript library. So, I use it mostly as a user, not as an author, and for users, I think that this UI is much better.
For improvements, yeah, there could be some. For example, playing videos.
Manuel Lemos: Yeah. That's probably a bug, something that was changed recently.
Arturs Sosins: But new user interface will need to sometimes get used to for user who have used the sites a lot. I myself needed to get used to it, but once you get used to it, you feel it's better. It's more like natural, you would better understand what, where and how to put it.
Manuel Lemos: Right. This was released a couple of weeks ago. After that, there was a few improvements. For instance, when you go to the ratings page, now the ratings form appears and you can rate it right on the page and do not need to leave it here.
Also, the ratings were simplified. In the past, there was a pulldown menu for each option now, you just click on a radio or something. Then, you submit it and it submits and still stays in this page, and then you can close it to go back.
The same for downloads. I mean, in case you installed Composer, you can show some details here about installing the packages.
There were a few other minor improvements that were just pending to be done on this update.
Arturs Sosins: Just wanted to mention that you can also click on the zip to download on the tab without opening it. It's the function I use really a lot, especially when I'm re-downloading packages that I already know about. You can simply click on the zip on top and it will start downloading automatically.
Manuel Lemos: Right, for users that for some reason are not used to these changes in the user interface, they may probably not realize that this is a tab and when you click on a tab, it shows all the possibilities to install packages. And with clicking on the zip link, you go directly to the download or the package without even having to switch to the tab.
Well, this is just to mention what was done and I hope the users are enjoying it. One thing that I noticed that probably has the side effect of making this easier is that now, users seem to be rating more packages that in the past, because for that it is already a good...
Arturs Sosins: Yeah, that's actually true. I also noticed the spike of ratings on some packages.
Manuel Lemos: That's good because it helps other users to figure which other package that are more appreciated and that is one goal.
But hopefully, I will invest on other things that will encourage the users to rate more packages because that helps the other users to find the packages that are more interesting, so they do not lose so much time evaluating packages that are not very well-appreciated.
That was one of the complaints, the users have to download, test the package to figure that the package is not very good and if they can see some ratings, some comments, they can see it already.
Let me see if I can show you an example, because the comments when they are made public, they become forum threads of the package. For instance, in this case, this user rates this package, not sure, not sure because he did not find any documentation. So it is already good feedback because the author needs to provide some documentation.
And then, when you go to the reputation, you can see the user comments right below here. Oh, this user did not find the documentation example so he write it like this.
Arturs Sosins: Only that does not mean much because he was upset for not finding docs, but it also means that you also won't be able to find the docs.
Manuel Lemos: Right. So the users will know that this package may be useful but it doesn't have documentation. But then, other users can comment after that and it shows the user comments in reverse order.
Arturs Sosins: Yeah, they can help each other to solve out the issues.
Manuel Lemos: Yes. And if there are improvements, other users will rate it better and the comments eventually will appear there. And this is useful to reduce the time that the users will take to evaluate packages that probably are useful or not.
JavaScript Innovation Award Rankings of 2014 (59:08)
Manuel Lemos: Well, this is just to mention these improvements, but before we end this podcast, I just would like to mention about the rankings of the Innovation Award in the year.
So far, as you may see here, for now, the ranking here is already considering the nominees of May. The ranking so far is being lead by Andoitz Jordan Marmolejo from Spain, followed by Jimmy Bo from Canada.
So somehow, Andoitz passed Jimmy Bo that was leading the other month. Andoitz have two packages and Jimmy Bo, three, and then they were followed by several other authors with just one package. That is the ranking by author so far in 2014.
And by country, also the contributions by Andoitz also helped Spain to move to the front. They have already same amount of points because it's just Andoitz that so far has contributed, but others can come and contribute to submit more packages that make his country go ahead.
So Spain is followed by Canada and then Italy, also with two packages. This only accounts so far till the nominations of May, so it's still very early. It's not very clear who's going to lead because there are not many nominated packages being considered. But I think, this can become more interesting as we move on towards the end of the year.
Conclusion (1:01:09)
Manuel Lemos: Well, basically, that's it. We practically ended this podcast. For some reason, or for the usual reasons, my webcam disappeared, so my image no longer appears. But OK, that's...
Arturs Sosins: Maybe you are ashamed.
Manuel Lemos: Yeah, that's more of ashamed for using Google Hangout. It was working well since the beginning but then it stopped for some reason, and go and figure why it does that.
Anyway, this is an interesting podcast. We practically reached the end. And so, on our behalf, that is all for now. Bye.,
Arturs Sosins: Bye.
[Music]