Author: Manuel Lemos
Updated on: 2014-11-21
Posted on: 2014-11-21
Speech Recognition System with JuliusJS (20:31)
Improving Site Performance with the Navigation Timing API (23:06)
Download Size: 41MB Listeners: 2074
Introduction music: Riviera by Ernani Joppert, São Paulo, Brazil
RSS 2.0 feed compliant with iTunes:
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.
- Speech Recognition System with JuliusJS
Next, I have to introduce Arturs Sosins again from Latvia. Hello, Arturs. Do you need to introduce yourself or not anymore?
Arturs Sosins: Hello. Actually, I'm checking. I think I could setup the Third Lower, but I don't know why it's not working for you. But, either way, you introduced me, so everybody knows now. That's OK.
Many, many things that had been happening, we just cannot cover everything. We'll just pick a few interesting topics, starting from one that is related to a tool that I like and use regularly.
There is this article from I think it's Addy Osmani, right?
Arturs Sosins: Yeah.
Manuel Lemos: I was trying to confirm it, but for some reason the name of the author is not in this article for some reason.
Arturs Sosins: It's in the domain.
Manuel Lemos: Yeah, it's in the end. Exactly, also in the domain. Silly me, his own blog.
Basically, what he's talking about is about some library that I think he developed on top of JSHint, which is Lint. JSHint or JSLint, but they are calling it ESLint. It means ECMAScript Lint, so they've been changing the names of things.
Anyway, the tool is called FixMyJS, and it's actually by Josh Perez. Basically what it does... Node.js library, and it uses the JSLint results to fix your code automatically.
Arturs, did you check this, too? What do you think?
Arturs Sosins: The site actually was quite interesting, because I was seeing the things myself. JSLint can provide specific errors, specific charts, most basically on how to fix them, why wouldn't it fix it itself.
Manuel Lemos: Yeah, I think, at first, it seems like a useful tool, but at least for me, I like to go and see what warnings are up here and decide by myself if I should fix the code or not, because the sometimes the warnings are a bit too pedantic. I don't think I will fix exactly everything that is complained.
Despite that I can also silence some types of warnings. For instance, one warning that is a bit annoying, it appears, is that it's complaining that I'm mixing tabs and spaces, but I always use tabs for indenting. But probably, in other parts of the code, I have spaces. I'm not mixing tabs and spaces for indenting, so I typically would ignore those warnings, so I don't think there is nothing to fix in my code in that case.
Other than that, it's always interesting to learn if the complaints that appear by JSLint or JSHint are exactly from things that you formatted, not incorrectly or real bugs, maybe you meant something else and it's better for it not to fix your code.
Or at least, it could be usual to suggest, "Oh, this would be fixed this way," but actually not fix it, just show how it would fix it. Because sometimes we don't quite understand what the warning means. Sometimes, the warning is not very, very clear.
Anyway, it's a Node.js tool, and I think it's useful and simple to install using the NPM command and you can use it right away.
The article is a bit long, it talks mostly about hardware devices and things like that. For instance, this Ninja Sphere that I was not aware. It seems to be to connect several devices.
Arturs Sosins: Sure. Basically, the Ninja Sphere is like a hub for Internet of Things devices or also other devices that connect to it through WiFi. There, you have all the devices connected to the single place, and you can manipulate them in some way.
For example, you can connect the TV port through the Ninja Sphere and your phone, and then when your phone rings, you TV display notification. Your phone is calling somewhere in the other room, for example.
Manuel Lemos: Yeah, that's interesting.
Manuel Lemos: Exactly.
Arturs Sosins: As the article demonstrate, you can also write some parts of the application for the Pebble watch. There are also some libraries for Oculus Rift to render 3D graphics, actually using Three.js as a WebGL engine or Babylon.js for Internet Explorer.
Cylon.js is robotics frameworks that allows you to connect multiple robotic devices... or you control them on a Node.js server.
Manuel Lemos: Yeah.
Manuel Lemos: Yes.
Manuel Lemos: Yes, this is really interesting and for those that are enthusiastic about hardware devices, there are lots of possibilities to play and even to build interesting applications or variations of the uses for these devices.
This is really interesting. For those that are interested, I recommend to actually read this article because it's really, really, really covering many devices for different purposes.
Manuel Lemos: Next, let's talk about another topic. This time related about an article that recommends some best practices. It is interesting, it's not the first time that talked about articles that recommends best practices, but this article, I think it summarizes many recommendations that sometimes I wish all developers follow because it would make the code much more readable and easy to understand and eventually adapt and maintain.
So one of the first recommendation is to make it understandable, which is pretty straightforward, making the code readable. And if you can read the code as if it is English language, it would be much easy to understand.
Another recommendation is to avoid globals. This is just to avoid confusion, because often when you are using globals, probably you're taking chances of having some variables be changed on different context. So if you keep your variables local, as much as possible, there will not be such great chances of collisions.
And then, it goes on after this one, stick to a strict coding style. This is more to help other people that is reading your code. If you start with one coding style, you don't change it; or else, it makes it hard to read, and it recommends JSLint to fix your code and keep your code consistent using the same coding style.
Then, they recommend comments. This is something that probably I don't do much, because I often make my code as readable as possible. It says here that "Good code explains itself" is an arrogant myth, so I guess they are calling me arrogant.
Anyway, I do the best I can in terms of making my code readable, and only in a few rare cases, I use comments, when the situations are really not trivial, to understand just reading the code.
Avoid mixing with other technologies, this one of the recommendations that I did not quite understand what they mean. Arturs, did you look into this one? I wonder if you could figure what this means.
Manuel Lemos: Oh yeah, I see.
Arturs Sosins: ...that will help properties directly.
Manuel Lemos: So they mean that you should separate CSS from your code, because your code is for programming, CSS is for presentation.
Arturs Sosins: That's it.
Manuel Lemos: OK, I wish they could have put that more clear. Anyway, thanks for the explanation.
Next, use shortcut notations. Well, I understand what this means, that some code could be simpler. But, for instance, I don't think this here is as readable as this here.
Arturs Sosins: True. That's debatable.
Manuel Lemos: This is more like the Perl programmers' thinking style. They use telegraphic programming. You know when the times when there were telegrams. They use to save characters because it would be more expensive to send longer messages.
OK, I think you could put this 'var' declaration above but the rest, well, I think you could use the ternary operator. But other than that, I think this is more understandable that this. But OK, well, I got what they mean. Use shortcut notations just to save needless code that is probably going to be slower and take more time to write, I think.
Allow for configuration and translation. This is interesting because sometimes you need to have some flexibility in your code, and if you create options to change the things that will be changed to make your code adapt, that is great. This includes translations like adapting your application code in different language.
So, basically, that's it. They also have a second part here. Avoid heavy nesting, which can also enter in the complexity mattes that make your code less readable.
Optimizing loops, I'm not sure what they mean here.
Arturs Sosins: The bad habit is getting array length at iteration, so you better assign it to the variable and then use that.
Manuel Lemos: Oh, I see. Assuming that the array was not going to change in length, that's something that can be done. This is more like premature optimization, but OK. I don't think checking the length dynamically in the loop is going to hurt, but I got the point.
Keep DOM access to a minimum, yes, because sometimes people just think, "Oh it's just a one-function call," but inside it's a lot of code that is running in that function call. And for manipulating the DOM, some things are really complex inside.
Don't yield to browser whims, I'm not sure what this means. "Instead of relying on flaky browser behavior and hoping it works across the board," I think this is to avoid browser-specific behaviors.
Don't trust any data. I think this is related with security. You cannot assume that certain input data is in a specific format because sometimes people may abuse from some kind of security exploit.
Build on the Shoulders of Giants, I think this is meant to be re-use code of others.
Development code is not live code. Yeah, that's a wise advice. Well, however you are developing your code, you can perform many things at once. If you ship it, you must be sure that your code is working well, and probably only optimize it for production when you ship it, instead of using minified libraries sometimes. It's more useful to use non-minified libraries.
Well, I'm not sure if I follow all these practices. Arturs, do you follow all these practices, or maybe not some of them?
Arturs Sosins: Probably not all of them, but I think that everyone has their own sets of best practices to follow. That's why there are many articles about best practices.
Manuel Lemos: Yes, everybody wants to be a founder of a new religion, and so they dictate their own rules. Some rules are wise and they are commonly adapted everywhere, but others, not so much.
Speech Recognition System with JuliusJS (20:31)
Manuel Lemos: OK, let's move to the next topic. I'm going to try to talk again about a library. I'm afraid, I cannot demo. It's a Julius.js. It's a speech recognition library for the Web. I think I am not able to run this demo.
I tried it before; it worked. And when I realized it gets numbers. So let me try again because I'm not sure if my microphone is working. It's asking me for permissions, so I suppose it will listen to it.
One, two, three, four, five. Well, it seems to be working but not so accurately. It's still trying to guess what I'm saying. So it's more or less working but the idea is to have your application to recognize some words. I'm going to stop this because it's probably interfering with the microphone.
Arturs Sosins: Just leave it in the background.
Manuel Lemos: Yeah, just to see the rubbish that it's trying to recognize. It seems that, at least in this demo, it is configured to recognize only numbers. And so, everything else, it tried to match to a number, even if it did not say a number. But it seems to be interesting if you are looking for a library that you would like to use to recognize some words for your users to talk about.
If you want to listen to your user and recognize when he's swearing at your site, "Oh, this site is rubbish," you can present something that maybe it can be useful to keep your user calm and try to be more helpful and helping to do whatever he wants to do.
Arturs Sosins: They would need to accept the microphone permission.
Manuel Lemos: Yes, but once they do it, it will be working, I think. I think it probably needs to have permissions on each different page it starts to listen to the microphone, right?
Arturs Sosins: Yeah.
Improving Site Performance with the Navigation Timing API (23:06)
Manuel Lemos: OK, let's move on now and mention about an interesting API that I think it's been released for HTML 5, I think. I'm not sure. Let me share the screen here. Actually, the article about this API is about improving site performance with the navigation timing API.
And this API is basically to retrieve some timings about the activities. For instance, it starts loading until, I'm not sure, navigationStart, fetchStart, unloadtStart. So there are several timings that you can get from using this API.
There is even a diagram here that shows several things since Prompt to Unload, which may happen at the beginning. Well, I'm not sure. Or maybe it's Prompt to Unload previous page.
Arturs Sosins: Probably.
Manuel Lemos: Yeah. So, that's when it starts doing whatever it is it has to do to load the next page, So there may be some Redirect reading from App cache, then DNS lookups, TCP connections, and then Request, Start and End of Response, Starting processing, so there are several steps here, domLoading, domInteractive, domContentLoaded, domComplete. And then, Unload content event. It can even get the timing between when onLoad was called and when onLoad returns.
So this seems to be interesting for those that are very eager to optimize your performance, the loading of your pages. This can be very interesting. And it says about the browser support, it mentions here that it has been implemented already in Chrome 6. So it was quite a long time ago and I have to confess, I have not heard about this library until now.
Arturs, did you know about this API?
Arturs Sosins: No, not exactly. There is something similar in the Developer Tools that shows you the loading of different components, but it doesn't show the DNS lookup or app cache, or... loading events. So that would be great if something like that would be integrated in the developer tools in the browser.
Manuel Lemos: I think this can also be useful. For instance, when you develop your own performance tracking library, and for instance, if your page is taking two minutes to load, you probably can record that and send a notification to your server. Otherwise, you won't know what is going on, maybe checks problems that are only happening to certain users, and not when you test it by yourself. So this, I think, can be very interesting.
Manuel Lemos: Now, moving on to another topic, we are going to talk about another interesting tool that checks the compatibility of your code. So we just paste some code here, and I already pasted it in this text. I picked one of my libraries and then click on Check Compatibility. It starts issuing several reports about your code, tells about problems in your code that may cause compatibility issues.
Arturs Sosins: I think that's great.
Manuel Lemos: Yeah, this is interesting. I'm not sure what all these means. I have not looked into it. It says a non-support for 3.8. The use of array prototype index. It tells the first index of the URI undefined.
OK, this is the description of the function . It says that it may not work on 3.8% of the global browser share. Oh, this is good to know. If you have some problems with certain code that you have and somebody complains, now you know that maybe 3.8 of the global browser share that is complaining.
Arturs Sosins: That's awesome.
Manuel Lemos: Well, this is interesting. But it is only complaining about two functions, and I pasted a lot of code there. It says indexOf and AddEventListener.
Arturs Sosins: Well, it's not a link checker. It's a checker for compatibility.
Manuel Lemos: Exactly. Well, so, from all the code that I pasted there, it only gave two complaints.
Arturs Sosins: And it's great.
Manuel Lemos: I think so. Either I am an awesome coder or this tool is just showing part of the problems, or both. Or neither.
Manuel Lemos: I don't know, but this is an interesting tool. Anybody that is looking for compatibility check about your code, you're not sure if your code will run well on different browsers, now you have an interesting tool to let you know about what is going on.
Manuel Lemos: So now, back to another topic, this time it's about a new feature that is related with the JSClasses and the PHPClasses. We're going to talk about this right before we start talking about the Innovation Award, which is one of our regular sections.
This feature here is basically a recommendation system that was launched early this month. The idea is to help users that are looking for packages and sometimes, they search the site, and for some reason, they do not find the package they want, either because there are too many packages that are being suggested or probably none.
So what they do, they can go to the search page. I'll probably just demo this very quickly. Just put a search in here and start looking now. It was not a good example. And I entered there the text DOM. I take a lot at the results. I see lots of results.
And then, the site notices that I'm wanting too much at the results, and asks me if I want a recommendation, an advice, to choose a package about DOM. If I choose yes, I can go here and enter some details about what I'm looking for. So I can put the title here and summary for the problem and then, can enter the details of the problem.
And then, I would submit a request recommendation, then it will be listed. Eventually, the site will send a notification to authors that have packages related with my recommendation, and they would be notified to suggest a package related with the problem.
In this case, I'm searching for inside PHPClasses which is basically the same as JSClasses, except that PHPClasses has much more users. So here, it has already many, many recommendations. Like for instance, this one, there's a user that asks for sending emails fast, enter some details here.
He did not enter many details but he tried to describe the problem in a few words, and then there are several authors suggesting a package is for this purpose.
And then, they entered some comments. The author could take a look at those packages and with that, instead of spending a lot of time, looking for many other packages, he can take a look at recommendations.
Just this that appear, most recommendations do not take, most package requests do not take many recommendations because sometimes, there are not many package to recommend. But as you may see, there are plenty of recommendation requests here and this number here is the number of recommendations that there are so far.
So when there is a new recommendation, the person that asked for recommendation will get a new notification so he can come and take a look. Usually, the recommendations do not come right away. Unfortunately, not everybody is around the site every moment. It is interesting.
And then, for some packages that may not have any package to recommend. For instance, this one, somebody wanted support for use Redis. Redis class for use in OpenCart. There are no recommendations and then this request became featured.
And when a request becomes featured, there is a notification that goes to all authors interested to get featured recommendations, so they can eventually create a new package that addresses this problem.
Here there is a section with all recommendation requests that have been flagged as featured. Some of them already have recommendations, some were developed. For instance, this one was developed. An author that sent a recommendation developed this package right away. An author that got the recommendation request developed the package for this purpose, so it is great.
And once an author submits a package for a featured request, eventually there will be no other package that does the same, so the package will eventually nominated for the Innovation Award.
So this is a great way to get recommendations, get ideas for innovative packages. I think this is very cool. So far, there are plenty of things to make this better, to get more users to interact and send recommendations.
But what was done so far is getting great results. At least in PHPClasses that has much more users. As for JSClasses, not many, unfortunately, because it's much smaller site. There are not as many authors to send contributions.
Anyway, Arturs, you actually been testing this. What is your opinion about this system?
Arturs Sosins: I like it both as an author and as a user, because as a user, I can request the package with even some specific requests that I've already done, as you're showing. So I listed specific ways that I need from some components, and if anyone has one that they could give.
The same goes for you as an author. Like what happened to me in PHPClasses site, if someone looks for something similar to mine, I immediately get a notification when someone posted a request for similar class. So I can... my class and propose. Or if not, I could check out the Featured Request in here, as you said, to have ideas for interesting components that I could create.
Manuel Lemos: Yes, this is great. As you are mentioning, a request that you actually sent to the JSClasses recommendation system, and since nobody submitted a package before for all the purposes that you described here, it's a bit complex request, maybe it should be split in several request. I actually comment precisely that here below.
Just also to mention that authors that are interested to know more about this idea so they can determine if they have a package to recommend or maybe they could develop on, they can enter comments here and ask for clarification or maybe recommend, see if it is something that already there is a package for that purpose and depending on that recommended package.
Another aspect that I wanted to comment, probably it's more feasible in PHPClasses because there's many more recommendations. For instance, let's see a request that has many suggestions. There was one with three or four. Let's see, OK, for instance, this one, a good a simple MySQL wrapper. There are many people that can recommend MySQL wrapper. As you may see, these are recommendations. This is the author.
There is also the detail that if the person recommending the package is the author, this label will appear because the person that will read the recommendation must understand that if this author is not probably to be, "My package is the best." At least with this label, he knows. The person that has prefer recommendation will know that this package is from the author and take that in consideration, because several other authors will do the same.
Arturs Sosins: On the one hand, it may mean that author's opinion is biased towards the package. On the other hand, you can ask any set of question related to the package because the author is the one that could know any answer.
Manuel Lemos: Exactly, for instance, this author posted his recommendation, then you can enter a comment to ask more about any details about this package, if you want or add other comments.
Another interesting detail is that in front of the name, there is also the reputation. And this reputation takes in consideration the number of times that the author has recommended packages either from him or not.
So, in this case, I'm looking here. For instance, this author earn reputation points for recommending a package of his own. In this case, actually, he recommended twice. And one of the times, he got voted for a package of his own.
So authors accumulate reputation points as advisers, and this number here shows the adviser reputation points. So you can eventually take that in consideration to see what is probably the more reliable recommendation or not. So the more developers, users, recommend package to others, the more reputation they earn, so the more credible they become.
So well, that's the hope, that this system works like that. As you may see, this is very, very similar to sites that are typically are for question and answer, except in this case, all answers must be recommendations for packages that exist on the site.
Well, the system will still be evolved. There are plenty of other things to make the system more efficient to engage more users, but for now, that's the way it is and I hope people are enjoying it.
What do you think, Arturs?
Arturs Sosins: Sure. As PHPClasses demonstrated, lots of people are using it, and I hope that JSClasses, too.
Manuel Lemos: Now, it's time to actually talk about the nominees for the Innovation Award of JSClasses.
Arturs Sosins: Or PHP. Which ones first?
Manuel Lemos: First, we talk always of JSClasses because we just want to open more space for JSClasses to be promoted, since it is a much less popular site than PHPClasses.
So, Arturs, which ones would you like to comment from August? There are, wow, eight nominees, many nominees.
Arturs Sosins: Let me try to share the screen, if Google allows it.
Manuel Lemos: Yeah, we have to beg. Please Google, please Mr. Google, let me share the screen.
Arturs Sosins: Something like that. So, I don't know, do you see anything?
OK, the first one I wanted to mention is... It has an interesting name.
Manuel Lemos: If you can zoom...
Arturs Sosins: OK, let me try to zoom it. Better? More?
Manuel Lemos: No, it's fine.
Arturs Sosins: So, it's an interesting name. It's jQuery FSM, animate using Finite State Machines. Actually, not so complicated as it sounds because usually when you have an animations like define a movie clip probably or some timeline of the images and there are different animations like running, jumping.
And so, you are just looping in one animation and jump to another, and this one implements it in an easier way to, probably there should be an example, define states and from which states, animation can travel to the next state.
So, yeah, it's an interesting solution. What it does, it implements the things that's mostly jQuery animations, like fading and slide-down and stuff like that.
This class was developed by Emmanuel Podvin from France. He chose one book of choice by Packt for it. It is also a winner, great.
So, that's one of the ones I like. The other one that you would call probably somehow in PHP podcast, it was a bad thing, right?
Manuel Lemos: Yeah.
Arturs Sosins: Node.js or something.
Manuel Lemos: It's not the podcast. It is the scope.
Arturs Sosins: OK. So yeah, this class implements Node.js Background Jobs, that allows running background jobs using Node.js modules. It was developed by Thomas Bjork from Sweden. I don't know if he got something from... No, he did not request any prize.
Basically, what it does is that it generates a process on Node.js server, and you can connect to it through UDP or TCP and execute and retrieve information from them. So, it's like a parallel process to start as it... your server.
So now, on my behalf, I would like to also talk about a few classes. Let's start from this one.
The first one that I wanted to comment is also from Thomas Bjork, a great contributor. He has been sending some very nice objects. I don't know if we can... I think we can't call them classes yet, only ECMAScript 6. So for now, this is an object that happens to be a jQuery plugin that can load an image and use it as a favorite icon for a page.
This is interesting because you can do many interesting things. I don't know if it is this page. No, it's not this object, but I'm not sure where I see it now. Actually, it's this object. It can load multiple images to create Favicon animations.
So it can create a nice effect. You can see on your... Well, I cannot see it here because there is no example. I mean, no demo. Actually, no demo and no example. But it would be interesting to show the animation happening in the bar.
So another package that I wanted to comment is one that is complimentary to the other one that you mentioned from David Castillo. So he sent two packages. You mentioned one, I'll mention the other. It uses the Google Maps API to get the distance matrix to many locations, because I think, yes, that's right, there is a limit of 25 locations that you can request for API call.
He implemented a workaround that lets you get the distance matrix from many more locations. This is great because you can compute routes that involve much more locations than this limit. So kudos to David Castillo for his package.
Manuel Lemos: Now, regarding the Innovation Award ranking of 2014, so far we have Thomas Bjork that we mentioned, he's ahead with 4 packages and 15 point, then followed by David Castillo. We just talked about him, too, with 2 packages and 13 points, Pierre Fauque with 2 packages and 10 points.
Then, Andoitz Marmolejo is tied with also 2 packages and 10 points, then Emmanuel Podvin with 1 package and 8 points, Jimmy Bo with three packages and seven points, and then several authors with 1 package and 5 points.
Now, by country, you can see that France is ahead. Thanks, not only to contributions by Pierre Fauque, but there are others like Emmanuel Podvin that are contributing 4 packages and 19 points, and so far be ahead.
It is followed by Sweden with 4 packages and 15 points, all of them from Thomas Bjork, then, Mexico with 2 packages and 13 points from David Castillo, and then, Spain with 3 packages and 12 points of several authors, then Italy with 3 packages and 8 points, Canada with 3 packages and 7 points, India, 2 packages and 6 points, and then several other countries with only 1 package and less points.
So on my behalf, that is all for now. Bye.
Arturs Sosins: Bye.
You need to be a registered user or login to post a comment
Be One of Us!
Login Immediately with your account on:
No comments were submitted yet.