Improving the User Experience with Special JavaScript Components - Lately in JavaScript podcast episode 38 - JS Classes blog

Show notes

Download Size: 54MB Listeners: 969

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

• Asynchonous Templating with Nunjucks

• JavaScript state machine supporting most UML 2 features with Steelbreeze

• Zoom anything on page with Zoomerang

• Execute actions typed by the user as text in a Web page with Genie.js

• Hide Your Page Header Until You Need It using Headroom.js

• Using Composer to Install JavaScript, CSS and Images Under the Web Document Directory

• Podcast about PHP Security

Read the podcast transcript

Introduction (00:20)

[Music]

Manuel Lemos: Hello. Welcome to the Lately in JavaScript Hangout. From now on, all these recordings will be called Hangout. No more podcasts because we audio and we have video. And this time again, I have here Arturs Sosins.

Hello, Arturs. How are you doing?

Arturs Sosins: Hello. I'm actually doing quite awesome in this evening sitting in a cozy home, where it is warm. I have a JS Classes-based PHP elePHant with me to keep me warm.

[Laughter]

Manuel Lemos: It's always great to have a JS Classes elePHant. That doesn't sound quite right but OK.

[Laughter]

Manuel Lemos: Well, it's great to know that it's very warm in your country now. Because over here, it has been warm but it started raining, so it's more pleasant actually right now, because it has been hell in the latest days.

Asynchonous Templating with Nunjucks (1:22)

Manuel Lemos: Well, anyway, let's move on with this podcast. We have several interesting topics, as always, to talk about. And we'll be doing a sort of review of several libraries and other things that are happening that occurred in the latest weeks, latest month.

And I'm going to start here with a library that is actually unusual. I have not seen this yet. It is basically a library named Nunjucks. Nunjucks, I think, that's the right way to spell it.

And it seems to be for processing templates asynchronously. And I say it seems because I was not quite sure what it does in practice. Here, it says a singular templates can be paused in the middle of rendering and is resumed later.

This sounds interesting because it's not usual but I could not quite figure exactly the way it works. I can see here in the examples that you can have a template here and then you can configure some views with this template and add some filters with callback functions.

So I supposed that sometime in the process, this callback function is called to render this template. They call it filter here but I'm not sure if this filter or it would a template, a mark, because that's what we have here, I'm not sure.

Arturs, did you understand well how this works?

Arturs Sosins: Basically, it seems that those markers are the ways to call some JavaScript function to modify the object and print it in this specific format or something like that. For example, if you have a user objects, and we assign it to some key format name, then we add this format name as a filter and a callback function for this object.

So basically, when the parser probably finds the format name key, it calls the callback, close the filter and modifies the object to present the name the way we intend it to.

So, basically, it generates, not generates, it calls the different JavaScript callback functions based on the placeholders. If you look for example further, there are some examples where it can also even render as other HTML files, which also may include templates and, it could work asynchronously.

Manuel Lemos: Yeah, for instance, I'm looking here and it says addfilter for some name called... and it has assigned a callback function that basically it calls... It seems to be a call to a database access library. It seems to be a value that is not obtained immediately because there is a callback function here that is called probably when it succeeds or fails.

Arturs Sosins: Yeah, it runs from database.

Manuel Lemos: So this db.get does not read... It's just for computing some value because it does not seem to assign any result to the written function of this. So I'm not sure how this works in practice, probably there is some other step that actually assigns the values to the template marks. I don't know.

Well, anyway, we just wanted to mention it here because it seems interesting and innovative. Sometime ago in the PHP Classes, I remember having talked about how to take advantage of asynchronous calls to process data from a database.

For instance, if you have a database call to retrieve data to fill in some templates, I mean some values of a template, you could have it be retrieved from the database in multiple queries. And asynchronously, it would be able to render the template in parallel with the database queries. So, the result would eventually be faster. I'm not sure if this would work well in practice.

Anyway, the idea in that article was just to talk about asynchronous programming because it...

Arturs Sosins: Because this template is actually not something you see every day.

Manuel Lemos: Yeah, exactly. Well, at least for many of us that a great part of the time are not really working with JavaScript on the server-side. It's more on the browser-side. But I think this probably can also be used on the browser-side. For instance, with the template values that are retrieved from the server using AJAX calls, I think. That could be an interesting use case.

JavaScript state machine supporting most UML 2 features with Steelbreeze (8:07)

Manuel Lemos: Well, anyway, this is just to mention briefly about this library. So now, we are now going to move on to a different library. Also not very usual, at least in my point of view.

It is called Steelbreeze. Steelbreeze is a library for processing states and transitions of state machines. I also had a hard time trying to figure out how exactly this works, because looking at the example here... I'm trying to zoom it a bit to make it more clear... we can see there is this diagram of what seems to be a state machine. And then, there's some sample codes.

I take it that the sample code here is actually what calls the library, because it defines some states and series of states, composite states, simple states, final states.

Arturs Sosins: Yeah, actually, as you see I think that new Region means it's the actuate state machine. So var controller is a state machine. Then, you define all the states and in the end, you utilize the machine.

Manuel Lemos: Right. Then, it defines transitions between the states. So I suppose there should be something that would actually start the state machine engine.

Arturs Sosins: Basically, when you utilize it and it probably goes into some default or first initiated state. And then, from it, you can travel to other states. And I think that in the about page, that is exactly what the example shows.

Manuel Lemos: Yeah. Well, maybe this is just part of an example. That it is not a full example. Anyway, here, you can see. At the top, you can see it animated. You can click on Play and it will start.

And then, you can see that it seems to be running in the running state, so you can click on these buttons to move to other states. If we click on Flip, it will go to the flip state.

Arturs Sosins: Yeah. As for the view, you can go on with...

Manuel Lemos: Flip state.

Arturs Sosins: Yeah.

Manuel Lemos: And the only way to go to another state is to have some action, to click on Flip again. Right? And then, it goes back to 'running'. And from 'running', you can click it to pause, stop or flip again.

Well, this is what was defined here by this code below. It's just an example. How it is used in practice is still a bit abstract but I think it...

Arturs Sosins: Actually, I read one article lately that describe using state machines in the game implementation. For example, your character could be running to the left, to the right, jumping. But to jump, he needs to touch the ground. So basically, there should be a state that he's touching the grounds or not and these could be parallel with the state machine design.

And so, it actually might be easier to implement than you implement an if case and if statements or something else. That it might be easier to implement the state machine. So that could be one of the usage.

Manuel Lemos: Oh, that makes sense for those kinds of applications. There are also applications to use the state machines, which are for instance, parsers. Parsers also can use state machines to make it more efficiently. But usually, there are tools to generate the parsers so you don't have to bothered to understand how it works internally as a state machine.

Anyway, this is just to mention another interesting although a bit abstract library.

Zoom anything on page with Zoomerang (12:25)

Manuel Lemos: So we are going to move on to another interesting library. Hopefully, much simpler to explain. This one is actually called Zoomerang and it's explained by showing a demo. Basically it zooms anything that is on a screen. So you click here. It zooms some elements. Click a word, it zooms another element.

Oh, wait, I clicked on a link.

[Laughter]

Arturs Sosins: It comes in the link?

Manuel Lemos: So the author is a bit exhibitionist because he just wanted to show that he has a Google Glass, just totally unrelated with the library. But zooming is what it is for, just to put certain elements on the page in more evidence.

Arturs Sosins: That is quite an interesting idea.

Manuel Lemos: There are some things that are not zoomable. Well, this can be interesting to improve user interface. It's that they have small things on the screen and when you click them, they become larger and ...

Arturs Sosins: Like disclaimers.

Manuel Lemos: Yeah.

[Laughter]

Manuel Lemos: But disclaimers are usually hidden by scroll bars, not small print. Well, it depends.  But that's the common practice.

Execute actions typed by the user as text in a Web page with Genie.js (13:56)

Manuel Lemos: So now, moving to another interesting library. This one is something that I almost skipped. But then, I looked again and for some reason, I decided to give it some attention, because it seems more interesting that it looked initially.

Basically it is a library called GenieJS which allows you to type actions that you want to do for instance on the site and probably you are not able to figure how to do them.

So here, it says control space. And it is interesting because it lets you type some words.

Arturs Sosins: Type dark.

Manuel Lemos: Yeah. For some reason, it already have entered lamp. So it was not me. So when you type lamp you can see several actions that you can do this page.

Arturs Sosins: Choose the dark.

Manuel Lemos: You can dark and you almost do not see it but it changes the menu entries to dark because it fades away. But now, bringing it up, it appears.

Arturs Sosins: Like I said, it actually also filters in what state you are. Basically, if you're in dark, then you can almost like write. It's more...

Manuel Lemos: Yes.

Arturs Sosins: Sophisticated.

Manuel Lemos: That's a good point. I have not noticed that detail. There is probably some reason. There is probably some way to do that, probably some way to define which options appear depending on the current...

Arturs Sosins: Exclusive.

Manuel Lemos: Oh, you can make the lamp fast.

Arturs Sosins: It fades fast, but OK. Small, also.

Manuel Lemos: OK. And there are many other actions. I just...

Arturs Sosins: You need apostrophe I think to see other actions.

Manuel Lemos: Yeah, that's what is written there. So if you click on apostrophe, it shows all the possible actions so you can review them all.

And this interesting precisely to improve usability. Lately, I have been a  bit concerned about improving the usability of JS Classes and PHP Classes pages, specifically the package pages, because some people had been rightfully complaining about the pages that too cluttered and they're probably not being able to find the information they are looking for.

So, I am starting sort of redesign for those pages, not just in terms of presentation but also in functionality. I know that some people, when they look at the page, they could not find what I think they should. They probably leave or at least stare at the pages for awhile until they give up.

And the idea is probably to provide things like this, that when the user seems to be wondering, it probably shows some prompt or some flashing on the screen to hint the user to click here or do this or do that.

Arturs Sosins: Or make an assistant of it.

Manuel Lemos: Exactly. That's the point. When you are in a certain page, there are not many types of actions that you can do. But if the user cannot figure exactly what are the actions that he wants to do and he really cannot go anywhere he wants, he'll leave the site.

And the user is lost, is frustrated, and that's not the way user interface should work. So some usability is in order.

There are things that I have in mind to tackle that problem but I have not yet figured the whole solution. I have not the whole picture of things. I'm trying to think of a user interface that does not require the user to scroll because if the user needs to scroll, he already becomes annoyed because of scrolling too much to find something that he wants.

It means that what he wants should probably at the top, not at the bottom or some other different page, different position of the page.

And I also am thinking about making things, as much as possible, touch-enabled. As much as sites like this tend to be used more by desktop users, if you make them ready for touch devices, I think users enjoy them better. Because, often, touch is the best way to interact when they are using those devices that probably do not have a real keyboard like mobile and tablets.

But well, this is just an idea. I don't know if you have any ideas.

Arturs Sosins: But actually, you need a responsive design and you need to design, create it with a mobile first approach. So you first concentrate on the content, what should be displayed,  minimal content what should be displayed. For mobiles, that's additional stuff too he sees, and monitors and some stuff and such.

Manuel Lemos: Right. Well, that probably makes sense with many sites but developers do not tend to use much their mobile devices when they are developing. What I meant about making it touch-enabled is to, for instance, if you have a list of files that have sub-directories like the package pages, you probably could swipe to move on to the subdirectories or back to the parent directory.

But well, this is just some idea. There is nothing certain. I'm just evaluating possibilities. And if you or anybody else has any idea, certainly we'd like to listen because sometimes I'm too much over it and probably cannot see what is evident for others that are not over this site all the time.

Well, anyway, this is just to comment regarding this library that seems to be probably useful to make sites more usable when users are not sure what to do and how to do it.

Hide Your Page Header Until You Need It using Headroom.js (21:17)

Manuel Lemos: Anyway, moving on to the next topic. Another interesting component that I found here. It's called Headroom.js and it's basically to make your top menu show and hide according to the way you are scrolling your pages. So let me increase the font here.

Here, you see the menu region at the top. And if you scroll, after a while it disappears. So there seems to be a certain rule to make it disappear depending on the scroll level. So when the menu disappears, the visible part of the page becomes larger.

And as you go back to scroll up, it shows the menu again, because you probably want to see something that is in the menu and it would take a part of time to scroll all the way up to top level page.

So this seems to be interesting. I don't if you have seen this before, Arturs. How did you find it? Do you think it's... I have seen things like this in several sites. Google Plus is something like that.

Arturs Sosins: It serves one definite purpose since it's very small. So if you exactly need this functionality, that is actually cool library. You can scroll down to show the options.

What else you can set there? For example, the offset, the tolerance, how many pixels you should scroll before the state changes for Pins and Unpins. Then, you change class names so on and rely on different callbacks. And as you see, it also works with plain JS or jQuery or AngularJS. So the author actually talked about it.

Manuel Lemos: Right. It seems to be an independent library but it provides means to be integrated with other common libraries. So I found this interesting.

JavaScript Zeitgeist 2013 (23:25)

Manuel Lemos: Now, we are going to move on to something that I have not yet announced in the site at the time of this recording but will announce soon. So I thought I could anticipate here in the recording since the actual Hangout will only be published in a few days after it is transcribed.

So, what I'm talking about is an initiative that was started several years ago and it is called the JavaScript Zeitgeist.

You probably remember that every year Google publishes what we call the Google Zeitgeist which is basically to look back at the top trending searches of the previous year. So, they usually publish it in December, but here in JS Classes and also the PHP Classes site, I waited until January so I can have a full year. 2013, in this case.

So the way this work is that it computes the top searched keywords and then it builds a ranking that only shows the Top 100 keywords that became relevant, so excluding the keywords that were relevant in the previous years.

So, as you may see here, you can see there is a list of Top 100 Keywords. There is also a tag cloud which is probably it seems a bit hard because tag clouds have gone out of fashion, but OK, this was something that was not changed.

Arturs Sosins: It's so 2013.

Manuel Lemos: No. It's not even '13. It's like 2007 or something, or probably older.

Well, anyway, this year was just an update. Nothing did really change in the other items or even the presentations. You still see the tag cloud here. It's still useful because it highlights some keywords more than others depending on how frequent they were.

So here in the ranking, you can see there is a number here which is obviously the number in the Top 100 ranking. And apart from the keyword, there is a rank here which is the number of ranking based on the overall ranking of searches.

In this case, the first one appears in the 330 position. And this means that in this year, 2013, there were 329 other keywords that were more searched than this. And this appears first because that's the first from our keywords that did not feature in the previous years.

As you may see here below, above, you can click on other tabs to see what were the top trending searches in the previous years. In the case of JS Classes, it was started in 2010 because that's when the site was created.

But in the PHP Classes, it was created in the year 1999, but the search engine was only introduced in the year 2000. So you see all the years up to the year 2000 for PHP Classes.

Anyway, before somebody get the wrong idea, this is based on searches done on JS Classes site, not on Google. The Google Zeitgeist  is about the searches on Google and the JavaScript Zeitgeist is about the searches in 2013.

Anyway, looking at these searches, l have not yet done an analysis like I did in PHP Classes already, which is to group all these keywords according to topics. But looking briefly here at this ranking, I can see that some keywords are not exactly about what all JavaScript developers are looking for.

They are more about searches that very specific JS Classes users. And it is even interesting to notice that this probably will be reviewed and filtered again. But in some cases, we even see people searching for PHP components, which is not something that you'll find in this site which is more of JavaScript.

Anyway, looking at the searches in general, I can see that a great part of the searches are about specific libraries like D3. D3 is a library that became popular in the latest times. I don't know when it was launched for the first time, but this rankings seem to reflect that this year, there had been more people searching for it.

And there are other libraries that you can look here and people seem to have been looking for them.

Arturs Sosins: Actually, I think the most valuable things from the JavaScript Zeitgeist is for other authors to see what other members, what classes would they want to see.

For example, if you look at the top, the first one is Event.js. It probably could be a library. It could be some kind of wrapper for events because it's hard to handle them cross browser. For example, some libraries for booking systems, convert HTML to image. Well, I would like see one, I would like to use one, if someone would make it. Probably iBand, would be some kind of verification form.

Basically, there are lots of things that you can look at as an author and say, Yeah, I could try making it, it could be fun. Like Windows Phone 8, because I think they have whole JavaScript API available for Windows Phone 8.

Manuel Lemos: Yes, that's interesting because especially the keywords for which there are no results in the site. Those represent opportunities for instance for somebody to create innovative component and submit to the site and have it popular because some people are looking for them and they know that already.

And other than that, you mentioned Windows Phone 8, which you can think it as a trending topic because people are searching for components related with Windows Phone 8.

You can see there are other searches for specific technologies. For instance, push state is about...

Arturs Sosins: HTML 5.

Manuel Lemos: HTML 5 Push state management of the browser history, probably for AJAX applications. And some keywords also seem very interesting. They reveal very interesting trends in what people are looking for.

For instance, you can see here in position seven, biometric. And I think people are looking for biometric authentication solutions. I don't know if it is possible to do it in JavaScript but at least, people are looking for them.

Then, below, you can also see names that are related with bar code generators like in line 13 and code in 28 seem to be for about barcodes. Below you'll also see screen share. People are looking for solutions to share screens probably with others.

And they'll also see here Huffman Compress. Huffman is a popular algorithm for compressing archives, probably zip or tar.gz and archives on such format. People seem to be looking for components like that that probably do not exist.

And it is interesting, here below again, biometria is the Portuguese word for biometric. So people are searching the site for the same things in different languages, which is interesting.

Arturs Sosins: People are also searching for authors. For example, 83 is Mark Rolich, which I think is an author.

Manuel Lemos: Where do you see that?

Arturs Sosins: 83, 8-3.

Manuel Lemos: Oh, 83, the position. I was looking for the number in the keywords.

Arturs Sosins: Yeah.

Manuel Lemos: Oh, exactly. Well, anyway, let me tell you a bit of a secret. In general, I feel that this list by some keywords that probably are distracting. Probably, in this case, probably Mark Rolich himself is searching for his own classes in the site and probably did it many times. So nothing against that, but sometimes, it's not exactly what most people would like to see in the top searches.

So you also see some searches for PHP things. So, this is not yet the full version. This is just a reminder that I was still reviewing this list to filter those that probably are not very revealing.

Arturs Sosins: One thing I noticed is actually that this year the searches are accepted also with keywords of two letters. I think that was a limitation last year, that you could only...

Manuel Lemos: No, no. Actually, that's a limitation of the search engine to provide the results. But the keywords are recorded regardless if there are results. Usually, these are the keywords used by authenticate users because anonymous users sometimes are robots that are spamming the search engines.

So, before those filters, you would find a lot of odd things. Sometimes, there are people with malicious intentions trying to spam the JavaScript Zeitgeist  just to show up.

Well, I already did this work of filtering for the PHP Zeitgeist but I did not complete it for JavaScript because it was not yet published at the time of the recording of this Hangout.

Well, anyway, I just wanted to just give another view what you can expect but in the next days. Probably even before this hangout was published, you'll see the results already filtered to not show so much of these odd searches that probably are unrelated with this site.

Well, anyway, this is just to give an idea about what is this JavaScript Site Guide. I hope it is useful. The main idea of the initiative is to tell people what technologies JavaScript developers had been looking for. So you can probably also study them if they are that relevant.

And there is a second purpose that is less obvious, which is to help developers that are trying to participate in the JavaScript Innovation Award to get some ideas of probably interesting components that they could develop and for is there is not yet a solution. So that is a sort of a hint for all those that are trying to participate and engage more on this.

Using Composer to Install JavaScript, CSS and Images Under the Web Document Directory (37:27)

Manuel Lemos: So, basically, we covered about this. And now, we're going to move on to a topic about something recent that was developed. It is somewhat related with PHP but it is also related with JavaScript which is also related with JavaScript, which is basically related with a feature that was introduced last month which is to support Composer as a means to install packages.

For those not yet familiar with Composer, Composer is a PHP application that can retrieve packages from repositories and install them in your project environment, could be in production, could be in your development environment. And the problem is that by default, Composer has this limitation of only allowing to install all packages inside the directory named vendor/. And usually, Composer also generates some code that can act as autoloader for PHP Classes.

But if you have an application with the so called assets files, it can be JavaScript files, CSS files, images and so on, you probably need to have those files installed in different directory which is under your website document root. You could install it in htdocs depending whatever is called your document root of your site.

So what is new with that presented in this article that I'm showing is some plugins, actually, one plugin that I have developed and published on the PHP Classes site that allows to install asset files. You can define some rules in your project.

I'm showing here an example. This your typical composer.json file. You define some packages that you need. For instance, you can install the package from JS Classes called Fast Content Loader. It will, by default, install it in the vendor directory. But then, there is an extra section here that defines where your asset files go.

Basically, it defines some actions that can be performed. In this case, it just says that the target for JavaScript files will be, in this case, web/js and this would be you web document root.

For instance, if you have a document root of your site, there's a directory web in the js directory. It would put your JavaScript files taken from the package that you can enumerate here. So it will copy the JavaScript files from this package, in this case, fast content loader.

And this is something that I have talked a lot in this article and also in the Lately in PHP Hangout. I've talked a lot about it. I've been talking with Cesar Rodas which is one of the contributors of PHP Classes and JS Classes that has asked for PHP Classes and JS Classes support Composer.

Composer is a tool that is becoming very popular in the PHP community. And it made perfect sense to support it in PHP Classes and JS Classes.

Arturs Sosins: That actually was quite an interesting incident. I've tried converting one of my mine in JS Classes to Composer and so the Twitter... My Twitter account is hooked to my JS Classes site and it posted automatically on Twitter and I actually got a lots of favorites and retweets. So I think there are really many, many users who enjoyed Composer.

Manuel Lemos: Oh really?

Arturs Sosins: Yeah. They're basically friends of Composer and everyone who use it.  Yeah, it's getting really popular.

Manuel Lemos: Right. That is a bonus feature. The PHP Classes and JS Classes site have this feature implemented, one of the details of the whole feature is that you are awarded reputation points every time you add any of your packages to the Composer repository.

You can add one package or it's up to you. And you are encouraged to have as many as possible. So, when you add your packages to the site's Composer repositories, there is also a social notification.

If you have attached Twitter and Facebook account, it will also post a message in your timeline saying that you added your packages.

And it is interesting to know. I did not know what was the repercussion of that. So, it is interesting that you're telling me that other people had been favoriting your tweets when you automatically post that you have added your package to the repository.

Arturs Sosins: That was quite interesting, yeah.

Manuel Lemos: Well, I think Composer does not yet have a great popularity because it's mostly a command line tool. A great part of the developers still use Windows. I say still because it has been lowering over time but Windows is still a dominant platform even in the development environment, like...

Arturs Sosins: What's that supposed to mean? Even for development environment?

Manuel Lemos: Well, because in the server environment, most people do not use Windows. That's what  I mean.

Arturs Sosins: OK.

Manuel Lemos: So, in the development environment...

Arturs Sosins: You got your way out of this one, OK.

Manuel Lemos: Well, what I mean is that most people, like I said, about 80%... That is in the PHP Classes, in JS Classes statistics. It shows like 80% are using Windows. Because that's the environment that they feel more comfortable, that's natural.

And the point here that I wanted to make is that Composer probably is not very popular as it could be because it's still a command line tool. Once there is a more Web-based interface to make it work, probably it will become more popular.

But it's still interesting to notice that you are getting lots of people happy for...

Arturs Sosins: Attention.

Manuel Lemos: ... for you having added your packages to Composer. And that's an additional way to get attention for your packages too, not just the Composer thing.

Well, anyway, regarding this, I mentioned that one of the actions, actually, the only action for now that this plugin for Composer does, is to copy files to a certain directory with a certain filename pattern, in this case, ending in .js. But you can define now the patterns, other target directories.

In the future, it will support other asset installation actions. It could be for instance, minifying JavaScript files or CSS files. It could be optimizing images so they take less space. Could be for instance creating sprites from a set of images, which is also a common asset installation action.

Arturs Sosins: Which is actually a first PHP Class for which I think I got some high place in the Innovation Awards.

Manuel Lemos: Oh, yeah. You mean in PHP Classes, right?

Arturs Sosins: Yeah.

Manuel Lemos: That is interesting because lots of people want to do that because it can make your site more efficient.

Arturs Sosins: True.

Manuel Lemos: You download one image instead of many images.

And the way this plugin works is that you no longer have to ship, pre-process the files. You no longer have to ship minified JavaScript files or CSS files. The plugin does it at the installation time. You don't need it until you're actually using it in the site. So it does it at the installation time.

Arturs Sosins: You could actually probably have also two kinds of settings, for your development environment which provides unminimized files and for deployment, right?

Manuel Lemos: Well, the way it is now, you can define any actions arbitrary to any files that you want, because you define your own patterns. You can define your own actions. As I mentioned, for now, it only supports the copy action. But in the future, it will support other actions. It's just that this package is very recent.

It has a great great acceptance, much greater than I thought. Everybody, not everybody, but many people are desiring that Composer provides this feature built-in. I don't know if it will provide some feature being exactly like this because there are many nuances, there are many details that people may want or not. But it's still a desired feature.

And this package is available in the PHP Classes site and it does not require authentication. So if you are using it to install your environment, you do not need the username and password to retrieve the package. It's available for anonymous users. That's because some users tend to complain because at least for some packages, there is this requirement to be an authenticated user.

But still, this plugin also addresses that problem of having authentication done automatically. You can define a file name auth.json that contains your authentication credentials. So when you use this plugin with Composer, it no longer asks for your username and password if you have defined it in your auth.json file.

So this basically addresses several important needs. And probably this feature will be really made built-in in Composer because it really has great demand and I think it should be made built-in. It shouldn't be necessary for an add-on to implement this feature because you need to load the add-on just to use it and if it is made available built-in it could be much, much better. So, it's one less...

Arturs Sosins: Much easier.

Manuel Lemos: It's one less package that you need to install.

Anyway, I just wanted to go back a bit to another detail that I wanted to mention. It's that other than this action that this plugin supports for installing files, you can extend, create a package, a class, that extends the AssetInstaller class that is provided by this package. So it implements new types of actions.

You can read your own parameters from the extra section, extra assets section that I showed here. And you call this function.

Arturs Sosins: Yeah. Basically, you can edit it and just use any actions that you might need, like if you want to talk a bit.

Manuel Lemos: Yeah, if you want to have... With actions, for instance, Cesar Rodas said that he probably wants to concatenate all JavaScript files...

Arturs Sosins: That could be one.

Manuel Lemos: ...to create a new one.

So you can implement a new action that does your custom package installation action - I mean, file installation action to generate those things exactly the way you want. So you are not limited to the built-in installation action that this class provides.

And lots of people told me that they love this possibility even if they are not going to implement their custom actions now. It's great to know that they can extend it and do not depend on the author, which in this case is me, to support whatever they want to support in the installation actions.

Well, basically, this is it. I think this is a useful feature. I don't know. What do you think, Arturs? Do you think this is something that you'll probably use? Do you see other people using it?

Arturs Sosins: Yeah, basically, while main projects mostly consist of PHP backend and some CSS JavaScript frontend, then if you divide it all in logical modules and publish them in JS Classes and PHP Classes, you can have a full deployment system.

Basically you run one script and it takes all the scripts it needs to build your Web app or Web site from single call from  multiple Web sites, that's actually quite awesome, yeah.

You can probably also define additional sections from other Composer repositories that are not PHP and JS Classes. Some codes that are not OOP-based so you can fully create the full system that you need to use.

Manuel Lemos: Right. You can do that already. There was one thing that I wanted to mention. I'm glad you brought that up. It's that the way this plugin is defined, it does not depend on you having certain structure or certain files inside your package.

For instance, if you want to use a JavaScript package from JS Classes that has some files in there, you do not have to have any files inside that package that defines where the JavaScript files should go on your project.

This is something that I noticed. There are other asset installers. Mine is not the first. Actually, I have seen several of them. There was one developed by Stephan Hochdoerfer. I'm sure I'm not pronouncing his name correctly. I hope you can excuse me.

But he has been very helpful. He gave a lot of insights about how to extend Composer using plugins. I look a lot at his code to learn how to do it. Actually, I spent more time learning than developing.

And he had already a package to install assets. But the way it worked, it sort of seem to depend on the package that you want to start who have already some composer.json files inside and define the rules.

And when you are installing a package from a third party, probably those files do not exist in there because it's the criteria of some other developer. And the way that I defined this plugin, you define your own criteria to install the JavaScript files of those packages.

If you have multiple assets packages to install, you can even implement different actions for different packages. So it's quite flexible and I hope it addresses already the needs of many developers.

Arturs Sosins: Yes. Basically, if you're using different libraries and then you have some kind of the good JavaScript code that uses some of this libraries together, you probably won't be submitting it into JS Classes. Because it's not a package, it's actually a code that does something and you will course it somewhere else. But in this deployment system, you could actually also grab it from somewhere else like from GitHub. Probably, from raw GitHub or I don't know.

Manuel Lemos: I don't know if you can grab it directly from GitHub. But it's possible that Composer allows to that, but like you said, it's true. You are not required to download all your packages from a specific repository. And given that, you can make the best of your projects with components of different sources. And I think that is great because it's very flexible as I mentioned.

Well, anyway, about this, we have already covered it fully and there is not much more to say about it.

JavaScript Innovation Award Winners of September 2013 (56:24)

Manuel Lemos: So we are going to move on to one final section on which we cover the Innovation Award nominees.

And this time, I need to apologize for having made a mistake last month and having skipped the winners. Instead of talking about the winners of September, I talked about the winners of October. I made that confusion. So my apologies to the winners of September.

So, to repair my mistake, we are going to go back. Instead of talking over the winners of October, which we already did, let's talk briefly about these nominees of September.

Arturs, do you have any preference about these components that you would like to mention?

Arturs Sosins: Well, I think we've already talked about secStore.js. So we can just mention what it does. Basically, what it does, it allows you to increase information you store in your local storage with a AES encryption.

Manuel Lemos: If you can show it in your screen while you talk, it would be probably interesting to some people.

Arturs Sosins: OK. No, unfortunately, I did not set it up. Maybe I can show it from the JS Classes.

Manuel Lemos: Yes. Do you have multiple monitors?

Arturs Sosins: Yeah. So it's kind of hard to...

Manuel Lemos: OK.

Arturs Sosins: ...It should be increased now.

Manuel Lemos: Yeah, it's OK now.

Arturs Sosins: Basically, we talked about it before. But just to mention again, it's actually a jQuery plugin that encrypts information that you are storing in a local storage or cookies.

And so, we also talked about I think that as one of the vulnerabilities would be where would you store a key, for instance, which was an interesting question, we didn't have an answer for it yet. But well, basically, just to be reminded what was it about.

Manuel Lemos: Yeah.

Arturs Sosins: And this came from author Jason Gerfen from the United States.

Manuel Lemos: Yes. We also had a whole podcast practically dedicated to PHP security and by then, we also talked about this component. As you mentioned, there is this question.

Well, if you are using encryption, you also need to use a key to encrypt and decrypt. So where is your key installed? Probably the key comes from the server only during the request to actually store and retrieve date in the security storage. But then, it's not stored anywhere.

Arturs Sosins: Or user provides it as a password authentication message at the time...

Manuel Lemos: Right, exactly.

Arturs Sosins: ...information is asked.

Manuel Lemos: In any case, I think it shouldn't be stored anywhere, or else, it's not really secure.

OK. Other than that, there are also a couple of other classes. One is JS Rulers Guides from Mark Rolich. And this somewhat unusual but it looks like Photoshop. You can place some guides to align things on screen.

Arturs Sosins: Let me maximize it to show you.

It looks something that could be used between Web developer and designer to make everything aligned by the lines, and to check if everything aligns. I know sometimes I have this problem where the designer I work with tells me, "Well, can't you see that this logo should be on or two pixels down." But I usually don't see it. I need to zoom in, move closer to my monitor and to check, maybe put a ruler on my monitor to see if they aren't aligned.

So, this kind of component would actually be quite useful to check it, to draw the lines. The only way you need to wait to inject it and things...

Manuel Lemos: Well, I don't know, but this probably is part of a larger solution that probably includes things like dragging and dropping elements on a page and then use those lines to snap the objects so they become aligned to whatever are the line.

Arturs Sosins: Yeah, there was actually a JS Measure package from also the same author.  So, yeah, that's probably a combination of packages that provide a much greater UI to design a web site and to check the design.

Manuel Lemos: Well, I suspect that he's doing a Photoshop killer on the Web.

Arturs Sosins: That would be cool.

Manuel Lemos: Yes, I suspect we can expect more interesting packages like this from him. So, congratulations to him. It's somewhat unusual and that's why it was nominated for the Innovation Award.

And finally, we have now the package from Shijo Thomas from India. And this one is jQuery plugin to sort elements on Web pages inside a certain container. The container can have different elements. I don't know if the documentation shows an example of this.

Arturs Sosins: Basically, I just opened an HTML file which is an example and it basically shows a table with a table row elements and you can see there are different attributes. So, basically, you can sort by these attributes the table rows or probably the other HTML elements.

And the code is basically something like you provide a  configuration, what you want to sort by which properties, what kind of sort (alphanumeric or some others, ascending, descending), set it to some parent table and sort its all children elements in the same way.

Manuel Lemos: Right. well, this is typically meant to sort tables. But the way I got it is that it can sort any types of element inside the container. So it could sort a whole rows but it can sort also divs and other stuff.

Arturs Sosins: And so on.

Conclusion (1:04:02)

Manuel Lemos: Yeah. Well, basically with this, we conclude this section of the Innovation Award. I hope the next time, we'll get back to the regular order of nominations and do not make mistakes of skipping months like I did the last month.

And also, I hope we can have more classes to talk about. We didn't have many innovative components in JS Classes but I hope from now on, we have more to talk about. I know in the following month, we have more to talk about. So let's wait and see what will the contributors submit to the site.

So, with this, we practically ended the podcast. I don't know if you have any final remarks.

Arturs Sosins: Yeah, well, just wanted to wish probably a happy New Year, everyone.

Manuel Lemos: A bit late but it's still in time.

Arturs Sosins: Yeah, it will even be more late when they see it. But still, I haven't had the chance before.

Manuel Lemos: Yeah, exactly, this month, the Hangout was slightly delayed because precisely because I was focused on...

Arturs Sosins: Celebrating?

Manuel Lemos: Not exactly. I was focused on launching that Composer-related feature of installing assets. But now that it's done, we have finally recorded it. I hope next month we can record it sooner. It will not be that delayed anymore.

So on my behalf, that is all for now. Bye.

Arturs Sosins: Bye.