Using JavaScript to Automate Desktop Applications - Lately in JavaScript podcast episode 34

Recommend this page to a friend!
  Blog JS Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog Using JavaScript to A...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  


Categories: Site features, Lately in JavaScript podcast, JavaScript APIs

JavaScript dissemination is so wide by now that even desktop applications like PhotoShop are using it to let users create scripts to automate any sort of tasks.

This was one of the main topic discussed by Manuel Lemos and Michael Kimsal in episode 34 of the Lately in JavaScript podcast.

They also talked about the NoFlo project to implement Flow Based Programming in JavaScript, JavaScript basics that many developers are not using properly, dealing with time zone issues on the browser side, the JointJS for developing visual diagram editors and the Hammer.js library for dealing with multi-touch events, and IndieConf 2013 the upcoming independent developers conference.

Listen to the podcast, or watch the hangout video, or read the transcript here to learn more about this interesting JavaScript topics.

Loaded Article


Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript

Click on the Play button to listen now.

Download Size: 44MB Listeners: 2123

Introduction music: Riviera by Ernani Joppert, São Paulo, Brazil

View Podcast in iTunes

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)

Automating Photoshop with JavaScript scripts (1:35)

NoFlo: Flow Based Programming for JavaScript (8:49)

7 JavaScript Basics Many Developers Aren't Using Properly (15:17)

Dealing better with time zones (17:07)

Building custom Diagram Editors with JointJS (22:55)

Hammer.js Multi-touch Gestures Library (26:33)

Top Featured Classes (30:55)

JavaScript Innovation Award Winners of June 2013 (35:54)

IndieConf 2013 (44:24)

Conclusion (51:26)

Introduction (00:20)


Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast, hangout, whatever.

Manuel Lemos: Hello, Michael.

Michael Kimsal: Hello.

Manuel Lemos: How are you doing?

Michael Kimsal: Well, slightly distracted as you can tell.

Manuel Lemos: Yeah.

Michael Kimsal: Oh, and I'm trying to get my... See, sometimes, I have the screen here and I'm looking at it. And then, my eyes are right there and sometimes, it's over there. So, it looks like I'm over there, you know.

Manuel Lemos: Too many screens will kill you.

Michael Kimsal: Good morning.

Manuel Lemos: Too many screens will kill you.

Michael Kimsal: Yes.

Manuel Lemos: How are you doing?

Michael Kimsal: I'm all right. Mostly, yeah.

Manuel Lemos: You look tired.

Michael Kimsal: Oh, thank you.


Michael Kimsal: It's gray. I think that does it to you.

Manuel Lemos: Yeah, I did not get there yet. Well, I'm lying.

Michael Kimsal: After 20 years or something.

Manuel Lemos: Grey hair. There are some grey hairs on the side, but it doesn't get noticed yet.

Anyway, this is supposed to be a JavaScript Hangout, after a long struggle with Google Hangout and its new set of bugs that are preventing it to work properly.

Michael Kimsal: Hopefully.

Automating Photoshop with JavaScript scripts (1:35)

Manuel Lemos: I am aware that my camera will freeze anytime. So before that happens, let's try to move on to the usual set of topics that we try to cover every month, things that are interesting that had been happening in the JavaScript world.

Michael Kimsal: What you got for us?

Manuel Lemos: Yeah, I found several interesting topics. I've listed it in the event that I posted in Google hangouts event, I mean Google+ event thing. Well, I would like to start from the first one that I found there once I am able to open it.

Michael Kimsal: This is this article on Scripting Photoshop via JavaScript?

Manuel Lemos: Exactly.

Michael Kimsal: That could be...

Manuel Lemos: But I think that's...

Michael Kimsal: Stealing your thunder.

Manuel Lemos: Yes. No, it was awful because I was trying to figure wherever I put the screen to share it here. I found it now.

Michael Kimsal: Shall I read it? "You don't have to be an advanced programmer to be able to write scripts. I'm just a graphic designer, like most of you. But you should at least have a basic understanding of JavaScript and some experience with properties and methods to get the most out of this article."


Manuel Lemos: OK. That is the introduction.

Michael Kimsal: Now, that wasn't at the very top. That was in the middle. "Automation is useful in the work of every designer. It saves precious time on repetitive tasks and helps us solve certain problems more quickly and easily." OK.

Manuel Lemos: Now, back to the interesting...

Michael Kimsal: OK. I'm not just going to read the whole thing.

Manuel Lemos: No, please don't..


Manuel Lemos: We don't have the time. Although, I don't mind, we don't have the time.

Well, basically, this is just an initiative to use JavaScript. Well, it's nothing really new, which is to use it as scripting language for a desktop application. And the idea of scripting applications with some kind of scripting language that you can write some code is not very new. Michael, from what you told me, you had an Amiga computer.

Michael Kimsal: I did, many years ago. I never did the real scripting with it though. I know Rexx was a big thing there.

Manuel Lemos: Exactly. You're right.

Michael Kimsal: I'll tell you what this reminds me of. This reminds me of, and I remember, must have been 1998, going to a Linux user group in Washtenaw County... hello, Lugwash...

Somebody was giving a demonstration of scripting GIMP with I think it was Perl. I can't remember. I'm pretty sure it was Perl, might have been Python. And I remember some of the guys, they're saying, "Well, what would you need to do that for? There's no purpose in that."

Manuel Lemos: Yeah, that's silly.

Michael Kimsal: It was shocking to hear somebody say that at a Linux meeting. "Why would I need to script something? I got a GUI interface."

Manuel Lemos: It was just a naysayer.

Michael Kimsal: I guess so. He said "Nay" a lot of times.


Michael Kimsal: He did. Yeah.

Manuel Lemos: Yes, I can imagine the situation. They say "Nay, nay, nay. It's not my idea."

Michael Kimsal: Nay, nay, nay. Nay, nay. But it was a definitely an interesting... For me, it was an interesting demo and it was one of the first times my eyes were opened to what could be done with that.

And I'm not even sure the capabilities were all that advanced at that point. But the idea, I think, has merit. And obviously, people carried it forward. And now being able to do this to JavaScript, to be able to take all these JavaScript skills and all the books and tutorials out there and bring that into something as fundamental to people's jobs as Photoshop is pretty cool.

Manuel Lemos: Yeah. Well, I think it's a really cool idea. But now, that I mentioned the Amiga computer that had sort of scripting language called ARexx, It was based on something that IBM created many years ago called Rexx and A stands for Amiga, it was good.

It was not just a language for scripting an application from the outside. You could write some code in high level language. Very easy to learn somehow similar to JavaScript and others.

And it was not just scripting. It was also a means to make different applications communicate. For instance, when you have a...

Michael Kimsal: A male program.

Manuel Lemos: Well, some sort of application that you...

Michael Kimsal: A female program.

Manuel Lemos: OK.


Manuel Lemos: They could integrate two applications. For instance, you could have graphics program to generate some graphics and then have the graphics imported into a word processing program that would do some mail merge or something like that.

You could use ARexx in the same script to script both applications and make them communicate. So this idea of scripting Photoshop with JavaScript is only part of that concept making those applications communicate.

Are you on mute?

Michael Kimsal: No.

Manuel Lemos: OK. It's just that the audio is a bit a delayed.

OK, but anyway, I think the idea is interesting. I just wondered if it would be possible to do more than just scripting Photoshop and integrating scripts from other languages. Because this ARexx language would allow a script to actually communicate with applications.

It would not be exactly something embedded in the applications, like what it seems to be this Photoshop scripting with JavaScript.

Anyway, I think it's a good idea. It's not the first application that embraced with JavaScript. Although, from the top on my mind, I could not remember any other one. But I have seen this. I think in Linux, the KDE system has some sort of ...

Michael Kimsal: Yeah.

Manuel Lemos: ... communication similar to ARexx. I think there is something called DCOP.

Michael Kimsal: Yeah. But keeping it in the JavaScript theme, GNOME, GNOME Shell actually has tighter bindings with JavaScript or tighter connection to the JavaScript world.

Manuel Lemos: Yeah, I think that's a recent thing if I'm not mistaken... the GNOME Project embracing JavaScript, too.

Michael Kimsal: Yeah.

Manuel Lemos: OK, I think this starts to be a good trend. And I hope other applications embrace it as well.

NoFlo: Flow Based Programming for JavaScript (8:49)

Manuel Lemos: OK, now moving on to another topic. Now, I would like to also comment about an interesting project that I found out.

Let me share screen here.

Michael Kimsal: Is this NoFlo?

Manuel Lemos: Yeah.

Michael Kimsal: Or Noflojs?

Manuel Lemos: Yeah, are you trying to read the...

Michael Kimsal: It depends on where you emphasize it.

Manuel Lemos: Well, I have no idea. Because in the beginning, I was writing it with the W in the end and there is no W in the NoFlo name.

Michael Kimsal: Nope.

Manuel Lemos: Yeah, basically, there is a project on Kickstarter to fund this project, which is basically to develop some visual programming tools.

But it's a bit confusing for me. I'm not sure if this is some visual flow diagram editor and why it is related with JavaScript. They said it doesn't generate code, it just executes the diagrams.

Michael Kimsal: Given that there's no pictures on it for something that is a visual development... Well, this is a development environment, they say, but...

Manuel Lemos: Well, there are some pictures in here.

Michael Kimsal: No, there's pictures of code on that page. There's no pictures of anything substantial about "Here's what it would be," or "Here's what you get." But this is on Kickstarter and they've raised $90,000 so far with two weeks to go.

Manuel Lemos: Yeah.

Michael Kimsal: So, I think what you're doing is just giving them some more press and publicity.

Manuel Lemos: Yes, they probably should owe something.


Michael Kimsal: Yeah.

Manuel Lemos: I'm helping them make more money from this.

Well, it's interesting but it's still confusing me. If something takes too long to explain, I don't think...

Michael Kimsal: It's beyond Manuel.

Manuel Lemos: Well, not just Manuel. Probably beyond many people. I think simple things should be quick to explain. And right now, it's seems probably very visual but seems to be very abstract. I don't know.

Anyway, I would just want to bring this up because it just mentioned that it can be used to develop a JavaScript application, both on the browser side and on the server side with Node.js.

And they present it here, they talk wonders about this. But then, it's still not very concrete. Probably, once they start showing something, it will become more...

Michael Kimsal: Well, certainly the code is there. You can get it. But they're talking about doing an editor for it. So, it could be that once the Kickstarter's done in a couple of weeks, there will be more news on this. It might be something to check back with in a few months.

Manuel Lemos: Yeah. And this is already not a new thing. I think they announced it earlier and now they have this campaign on the Kickstarter.

Michael Kimsal: Well, the GitHub repos goes back two years. So, the core of it isn't new, but if they're trying to do an IDE on top of it, that's probably new.

Manuel Lemos: It is. One of the developers, this guy Henri Bergius... I'm not sure if I'm pronouncing his name correctly... I think his name is familiar from the PHP world but I forgot.

Michael Kimsal: I think from the Midgard Project.

Manuel Lemos: Right. That could be it.

Michael Kimsal: It could be, because it probably is. But I'm just going on memory, not that I've pulled up Wikipedia or Google or Bing.

Manuel Lemos: Yeah. Henri, if you are listening to this... that's what I say, please excuse us for not remembering correctly what is your PHP past.

And anyway, as I said, for the last two years, he has been working of this. Well, at least some demo other than the videos would be interesting to see. Maybe, we can get back to this later with a more concrete explanation of what this is and if this is interesting.

I read that it does not generate code. It's like executable flow diagram. They say that it's interesting because you can update the diagrams and you already update your program. You don't have to generate anything.

So how this integrate to JavaScript and Node.js, it's still a bit confusing.

Michael Kimsal: It's written on Node.js is what it sounds like, basically. Looking at the little I saw from the GitHub repo.

But it's sort of like an active Yahoo! Pipes. And I don't mean to trivialize it, but Pipes was a big deal when that came out several years ago and if you could bring more power and more of a standard expressive language to Yahoo! Pipes, I'm sure there could be a lot more to it than that.

Manuel Lemos: Yeah.

Michael Kimsal: But that could be at least part of it.

Manuel Lemos: Right. Right now, they are trying to get some funding for the project. The goal is $100,000. And then, there are subsequent goals to carry on the development, to have the possibility to develop applications for iOS  and Android.

I was trying to find where I have seen that information. It was somewhere in the Kickstarter project page but I couldn't find it.

Michael Kimsal: It's in the middle of the page.

Manuel Lemos: It's in the middle, as usual, to make it very hard to find.


Manuel Lemos: OK the idea is that. I just want to bring this stuff because it had some relation with Node.js.

7 JavaScript Basics Many Developers Aren't Using Properly (15:17)

Manuel Lemos: And well, now, we're going to carry with the next topic. I'm glad that my picture did not freeze yet.

Michael Kimsal: Yet.

Manuel Lemos: Yet.


Manuel Lemos: Better not wish it because it will get frozen soon.

The next topic is an article that I thought is interesting because it covers several very, very basic things about the JavaScript, things that I noticed that not everybody is aware.

I'm not going through all of them, but just mentions things that if you know about them, you'll probably be more a little more productive when you write JavaScript code.

Michael Kimsal: Sure.

Manuel Lemos: Basically, there are seven things I found interesting. The one mentioned here about the array prototype slice that can be applied to other objects that are not exactly arrays. But they look like some arrays and you can split the list of elements that they contain.

And eventually, that will save you a lot of code if you try to do it manually in pulling the elements of a non-array objects that acts like an array and then put it in a new object.

Michael Kimsal: Yeah.

Manuel Lemos: And well, there are seven tips here. I think they're all interesting and I recommend everybody to take a look at this article. Not a big deal but I found it useful.

Michael Kimsal: Too.

Dealing better with time zones (17:07)

Manuel Lemos: Well, now, carry on with the next topic which is about something that relates with a challenge that the great Michael Kimsal had...

Michael Kimsal: Hey, isn't that great?

Manuel Lemos: ... a few months ago.


Michael Kimsal: It's not great.

Manuel Lemos: What's not great? The challenge or Michael?

Michael Kimsal: No, he's not. Yeah, he's not great, probably. And I went through this...

Manuel Lemos: After all, was it a PHP problem or a JavaScript problem?

Michael Kimsal: This is a mix. This is going back to a year and a half. I had a problem about dealing with time zones.

And his point is "Stop asking your users what the time zones is." And yet, I think we have a bigger problem, if I remember it correctly, because what he's saying, the crux of the article is "Quit asking, don't ask users for a time zone, just...

Manuel Lemos: Assume...

Michael Kimsal: Just use relying on the time of the device. So, do everything in GMT and make all request AJAX using GMT. So just do everything in GMT and then, use getTimezoneOffset() on the device to calculate the difference so you can send that back.

I had a couple of problems with that. One major problem with that is that the assumption there is that somebody's timezone is set correctly on their computer.

But also, that assumes that the device that the person is typing on is the device that's sending the request. And we had situations where people were terminal server or... Yeah, there's a terminal server or I guess the term, remote desktop.

So somebody was in one city and they were using a terminal but it was sending a request to the server in another city or another state actually that was then sending the request to us. So, that the time zone on that server was telling us one thing but the request is coming from somebody at a different timezone.

Admittedly, it was weird. But I think the point of this article... I mean, it's well intentioned. I just don't think he's covering enough bases.

And time may be a bit hazy. It's been probably 18 months since I had worked on that. But it was more... Now, the other thing is that the JavaScript framework that we were working with was written by people that haven't fully taken it into account.

So, there was a lot of spread-around stuff. So even if we sent down one thing, none of us who inherited the code understood where we would set time zones in all places.

Manuel Lemos: Yeah.

Michael Kimsal: So, it was a mess. And I don't like timezone stuff.


Manuel Lemos: So, you got  the trauma on the timezone thing.

Michael Kimsal: Yes, I did. And I'm sorry to ramble so long.

Manuel Lemos: Yeah. So what you're saying, it won't help just to deal with things in GMT.

Michael Kimsal: You can.

Manuel Lemos: It will not address the problem that the device may not have the time set correctly at all.

Michael Kimsal: I think it's pretty likely the device has the correct timezone on it. Probably, nine times out of 10, that may be the case. That's just a number I pulled from thin air. But, probably most of the time for most of the users, that would be correct.

We have an added compounded situation that we're dealing with, that was not probably easy to be foreseen. And because we were not on site, it was a lot harder to debug what the heck was going on.

Manuel Lemos: Yeah.

Michael Kimsal: I mean, this is not  bad advice. I just think that if you're going to this trouble, you need to be even more aware of what's going on. Because there's still going to be some wrinkles that will catch you.

Manuel Lemos: For me, well, I never assume anything about the time. I don't  know if  you really needed to assume anything about the time of the browser side.

Michael Kimsal: Oh, if you're doing... You can. You may need to.

Manuel Lemos: You might just need to adjust, just for showing purposes, not exactly to take it as a reliable source of what is the time in the user machine.

Other than that, also on the server side, when I was  younger... and I used to be younger... I was not aware about these topics. I used to use the local time of the server side. And then, more recently, I started using UTC everywhere. UTC or GMT, I don't know if there's a difference.

Michael Kimsal: That's the same thing. It used to be called GMT, it's now UTC. There's a scientific difference between the two that doesn't affect anybody. But, we used to see GMT, now it's the UTC, yes.

Manuel Lemos: OK, that's what I used... UTC, whatever that is... for storing purposes. And if I want to show it in the user side what the correct time on his timezone is, I just adjust it according to some calculation which is a bit challenging because it's not the same during all the year, because of the daylight savings that may very throughout the time.

Well, anyway, this is just to give a tip to everybody that may have been having challenges, issues with times. And for now, we will leave the link to this article in the program show notes.

Building custom Diagram Editors with JointJS (22:55)

Manuel Lemos: So we can go to the next topic.

Michael Kimsal: Which is?

Manuel Lemos: Let me see.

Michael Kimsal: The diagram editor?

Manuel Lemos: Yes, exactly. About the Node.js. Well, I thought this is very cool and quite well developed. I mean, many, many features.

Michael Kimsal: Yes.

Manuel Lemos: I think it's better to show them to tell. Basically, we can see here is a diagram that you can edit some elements, their positions, the arrows that they may have links to them.

And the cool thing about this is that all this is programmable. If you want to develop your own visual editor, your visual diagram editor, you can configure all these things and integrate them with your JavaScript application with some handling of events.

I've just shown you a finite state diagram. Now, I'm going to show another type of  diagram which is different but it works by the same principles. You have elements that you can drag and they have connections within those elements.

Michael Kimsal: Yeah.

Manuel Lemos: And you can kill the connections if you want. So, if you want to develop a visual editor for some kind of application that you may have, this would be a great start because it already does a lot.

Michael Kimsal: Yeah. It is definitely impressive. And one thing I wish  they had is pricing on there. It is open-sourced but they say on the front page, "Hey, we're just two people, small two-man company. If you buy it, it will help us make this even better." Oh, actually, I'm wrong. I think what they're  saying is buy plugins for it.

Manuel Lemos: Yeah.

Michael Kimsal: Paper scroll.

Manuel Lemos: You can donate.

Michael Kimsal: Yeah, but they don't say enough about what the plugins, what's in it. Now, there's a video for it. I would prefer just screenshot or something. And they don't say what the pricing is. So, it's kind of hard to know if you'd want to do it.

Manuel Lemos: You can...

Michael Kimsal: You can pledge money.

Manuel Lemos: Yeah. You can pledge money but they do not say what is the amount they want to request. I think you define whatever is the amount and pay via PayPal.

Well, anyway...

Michael Kimsal: Yeah, anyhow.

Manuel Lemos: I thought it is interesting.

Michael Kimsal: Yeah, it's definitely an interesting visual project, certainly.

Manuel Lemos: Yeah, we'll never know if we'll ever need it for to develop a visual project. And probably, we have given up that project because it would take too long to build a diagram editor. 

And now, with this component, you can probably go ahead with your project because it does a lot of what you need.

Well, congratulations to the authors for sharing their work because I'm sure it was not a small amount of work.

Michael Kimsal: Yeah.

Manuel Lemos: Are you listening to me?

Michael Kimsal: I'm hearing you, yes.

Manuel Lemos: That's good. Because Hangout is telling me that they stopped my microphone. Because they thought I was typing somewhere else. So silly, the things that Google hangout say.

Hammer.js Multi-touch Gestures Library (26:33)

Manuel Lemos: Anyway, moving on with this hangout, the next topic is about multi-touch screens and libraries to handle multi-touch events.

And there is this Hammer.js, which is a library that will help you to handle multi-touch events. Well, touch events in general and then also, multi-touch.

I was trying to... Here it is. There is a demo called Event Log. It detects the touch events of me touching.

Michael Kimsal: There is a few that I can't seem to generate and that's because my browser is or my OS is capturing like swipe left, swipe right. But yeah, I was able to check or to do through the drags and the pinch and zooms are probably the biggest ones. To be able to capture is pretty cool.

Manuel Lemos: Yeah. Well, I happen to have a touch screen but it is not detecting the events as touch events. It's detecting them as...

Michael Kimsal: Clicks.

Manuel Lemos: As  mouse events. So I can drag the mouse but I can also touch different positions. And that's because, well, I'm on Linux and I think Chrome for Linux is not yet able to detect Touch events like in a mobile or a tablet device.

Well, anyway, I think this is useful because whether you are in a real touch device or not, you can use this library to simplify the process of handling touch events.

Michael Kimsal: Yeah.

Manuel Lemos: And you can see there are some actions and reaction to the touch events. Can you see my mouse pointer?

Michael Kimsal: Yes.

Manuel Lemos: OK.

Well, in the end, it doesn't matter if it is detecting the events as mouse events or real touch events.  But I thought this interesting.

And I also want to comment about another library that  actually mentioned a few months to go, Tutechie. I'm not sure how this is supposed to be pronounced.

It is a component by Jonathan Gotti. It is submitted to the JS Classes a few months ago. I think it is also somewhat similar. I don't know if it handles the multi-touch events because it allows simulation of touch events with the mouse events.

This probably is not able to simulate, I mean, handle multi-touch events. Well, anyway, this is another solution for similar problems, just probably not multi-touch but it is able to detect events like tapping or moving the swiping, zoom in and zoom out. Well, I thought zoom in and zoom out would be multi-touch events but I'm not sure if that's the case.

Well, anyway, this is just to reference something that can be useful. Personally, I would like to have some support to touch events in my site, because sometimes, that can be very useful.

For instance,  you have a listing with pagination. Instead on clicking on the tabs to change you pagination, you can just swipe to move on to the next page. It probably is better for users on small screens that do have to aim their fat hands in the tabs, which may be probably too small for them to click them correctly. And they can swipe, I think it would be a better solution for a more usable user interface.

Top Featured Classes (30:55)

Manuel Lemos: Well, as for topics for this hangout, we have practically reached the end of what I have planned.

Now, I just want to comment something about JS Classes that I implemented recently. It's not a big deal but I think it was interesting.

I'm going to share a screen for now. You should go to the home page.


Somebody's calling you.

Michael Kimsal: Carry on.

Manuel Lemos: As I was saying, you should go to the home page of JS Classes. On the left side, below there's a section that says Featured Classes. And these are the top classes that are receiving most users from search engines like Google.

It's a different type of ranking classes. It's not based on the actual users that downloaded them. But I wanted to implement this because Google supplies some information about what are the components, I mean the topics, that are most searched, that lead to visits to classes that exist on the JS Classes site.

And as you may see here on the left, there is even a number. In this case, it says number one. Then, there is an interrogation mark here.

Michael Kimsal: Yeah.

Manuel Lemos: Which means that the number of visits is not accurately defined so it's not possible to determined if this is number two or number three or number four. So there is some interrogation mark.

Anyway, the top packages that are getting more visits from search, from now on, they will be listed on the homepage as Featured Classes.

Michael Kimsal: So, this is not rolled out yet, but it will be soon?

Manuel Lemos:. No, this is already implemented on the site. And all the authors that published packages in the site were notified. I just did not make an  announcement on the site blog.

Michael Kimsal: I don't see it on my screen.

Manuel Lemos: Are you logged in?

Michael Kimsal: Yes.

Manuel Lemos: You need to be logged out.

For now, it only appears for non-logged users.

Michael Kimsal: OK.

Manuel Lemos: That's why.

Michael Kimsal: OK, got you.

Manuel Lemos: But this will appear also in the Top 10 pages.

Michael Kimsal: OK.

Manuel Lemos: It doesn't appear for logged users. It's just because I could not figure how to fit it on the layout for logged users, because there is some additional information. But I'll have to figure it out later.

Other than that, on the right side, there is also another list based on the principles called Featured Class Articles. These are class articles that have been getting visits from the search engines and in this case, Google.

When I say class articles, articles about classes that were published in the site. So, each class has it's own blog, so these are articles that published about these classes.

And for now, there's just lists four. If there are more articles that get also a noticeable amount of visits from the search engines, they will be listed here.

In the case of the Featured Classes on the left, it shows like up to 20. It doesn't show more because it will get the page even more loaded than it is already. Then, it will not serve any purpose. They're just to give an idea which are the top most visited packages from search engines.

Other than that, one thing that's not showing here is that once an author of a class makes it to the Top 20, he will get a notification by email saying, "Congratulations, you are the author one of the Top Featured Classes. I hope you continue to submit more great classes."

Well, that's just to encourage the authors to make even more great classes to the site, as well good articles about them. You may see that here on the right.

Well, that's just to mention something briefly and it's not really something important. It's just some recent development. It was not announced on the site blog. I thought it was not that important, but the authors that already published in the site were notified.

JavaScript Innovation Award Winners of June 2013 (35:54)

Manuel Lemos: So, moving on to one final section of this hangout on which we comment on the winners of the Innovation Award that goes on every month.

In this case, we're going to talk about the  winners. Actually, they were nominated in June and they were voted in July, then in August, the results came out.

They were not many packages published in June. Probably people were on vacation, but at least we have three  to comment about.

Michael, which ones would  you like to comment?

Michael Kimsal: I am trying to log in again. Log in here. Screenshare.

I think it's this one. Yeah, this is from... hope, I'm going to say this right... Toure Iliass from Benin, or Be-nin. Again, apologies if I get that wrong. That seems to be a country that I have not heard of.

But this is a jQuery plugin. This is actually the top voted one. A jQuery plugin that turn lists into collapsible trees, uses CSS styles to switch the presentation and collapse states.

There's couple of directories here. It's including jQuery, but then the actual min view, the code...

Oops, I am logged in. I'm logged in.

Manuel Lemos: Are you sure?

Michael Kimsal: You watch.


Michael Kimsal: OK. I'm logged in. So, you told me I was logged in.

Manuel Lemos: Yes.

Michael Kimsal: I'm going to log out.

Manuel Lemos: It goes to the single sign on the site and they need to wait for it to return.

Michael Kimsal: But I had done that once before.

So, that's it, in terms of the code. I don't know if you can see that too well.

Manuel Lemos: It's minified.

Michael Kimsal: Yeah, it really is not much. It's just converting the <ul>'s and <li>'s into open and close or related items that have open and close status.

It has... Whoops, not scripts. Ah, wrong. OK, so there's Styles. So there Styles, go along with the Tree Styles. Let me go back up, there we go. And then, it's just the basic example file which is  not minified. I don't have it running right now, but you can imagine, collapsible stuff.

I think I had seen minified code before but I was still expecting it to be a little bit bigger than what it was. But very tight and packed, does one thing, does it well.

Manuel Lemos: Yeah. Probably, it's not exactly something complicated. It's not. But given there were no other components in the site that did that before, that's why it was nominated.

Michael Kimsal: Well, I got to say that while something that's not complicated, if it's one last thing that I had to think of that's done and tested and works, it still makes it good.

I have to say dealing with trees in general, I've done it for years, and I still end up making, I forget something  and I get confused sometimes. So, it's still easy to let somebody else do it.

Manuel Lemos: Yeah.

Michael Kimsal: Well, thank you Toure for... I'm sure I'm not pronouncing this name right.

Manuel Lemos: Toure Iliass, I'm going to say.

Michael Kimsal: Probably, the national language over there is probably French. So, I suspect there is an accent there I just  missed. OK, but that's me guessing.

Anyway, on my part, I would like to comment on a couple of other classes. One of them is from Satyam Kumawat  from India. And this is basically another jQuery plugin to implement what is called Infinite Scrolling.

Basically, it just lets you trigger some AJAX requests to obtain content to show in a section of the page that we have scrolled to. And basically, it will... I'm not logged in either to show the code. Shame on me.

Michael Kimsal: Shame on you. It's pretty basic.


Manuel Lemos: Yeah.

Michael Kimsal: Looking at it here right now, it's pretty basic.

Manuel Lemos: Yeah.  What's basic? The log in?

Michael Kimsal: The code. No, the code. I'm saying...

Manuel Lemos: Are you telling me now that I'm basic?

Michael Kimsal: No, the code is basic. You're anything but basic.

Manuel Lemos: Thank you.

Michael Kimsal: You're extremely complex and a special snowflake.


Manuel Lemos: Well, basically this is a plugin that's not really very complicated. Because in great part, jQuery already does the AJAX thing, the requests that are sent out. And it is useful for people who are looking for solutions to implement the so-called Infinite Scrolling.

Michael, do you use Infinite Scrolling in your web sites?

Michael Kimsal: I don't use them in the websites that I do. I use it on Google+ of all places and other sites. I'm a consumer of it, but I have not built anything like that.

Manuel Lemos: Yeah, because there are some problems, I don't know. I see some people complaining about it. I don't know what is the matter. Maybe because when you go back and forth in the history, the forward and backward buttons, probably, sometimes, it does not figure very well where it was.

Michael Kimsal: I think it does work well for consumer type sites, public things, with people. A lot of the stuff I worked on tends to be more internal business type apps and lots of pagination works a lot better for what they wanted. It makes them feel like they're in Excel.

Manuel Lemos: Yeah, but a lot of people use these things. So, I lost that screensharing. I was trying to share. I don't even have a good idea when I lost the screen sharing. It is in there, right? I was trying to show the code. Now, again, I'm showing the code.

Well, anyway, this was one of the components.  Finally, there is another one. This one is very simple from Lucas Tiago de Moraes from Brazil.

He basically implemented something that is... Oh, I see many, many classes for this in  PHP but in this case, it's going to get on the process side which is to implement some sort of pagination. So you have to perform some calculations given the number of entries that you want displayed on the listing.

And with that, you also define the number of, limit the number of entries that you want to display. And this is a very, very simple component. It performs all the calculations that you need to do to get to the next page, the previous page.

And, this is just the calculations, not exactly showing the pagination links like many other components. But I think it's still useful because this calculations tends to be done over and over again in listings that need to be paginated.

Well, basically, with this one, we conclude this section on which we comment about the latest classes that were submitted in the Innovation Award.

This month was not exactly very productive. Probably, people were on vacation, but I hope now, they are returning. In the following month which was July, they had a rather good, a great  quantity of nominated classes and I hope it continues  to increase as people return from vacation and start submitting more components.

Other than that, we practically reached the end of this Hangout.

IndieConf 2013 (44:24)

Michael Kimsal: I'm going to share one thing, just briefly.

Manuel Lemos: I was about to ask about that.

Michael Kimsal: I'm just going to throw it out and just say we are opened up ticket sales a little bit ago. It was a little delayed from what I wanted but we have, I think right now, I think there's nine or 10 speakers selected on the site. There's another...


I'd like to be somebody calling right now. Thank you very much, you can just go to to get your tickets. No need to call.

And I think there's another four or five that I have confirmed with verbally and we'll be getting their stuff up in the next couple of weeks. So, we're finalizing up the sessions and the speakers and it's shaping up to be... dare I say... hopefully, a little bit better than last year. I don't want to say too much better just because last year was pretty darn good.

Manuel Lemos: yeah. And so, what kind of sessions do you have this year?

Michael Kimsal: Oh, goodness.

Manuel Lemos: I mean, topics?

Michael Kimsal: It's what's the usual mix of... There are some things that are a little bit more  on the business side, like how do you get  clients, how do you deal with the contracts. We're going to have some legal people there, some financial people to talk about it and some business-oriented people, sales coach and that sort of things talking about the business side.

Manuel Lemos: Yeah.

Michael Kimsal: Couple of techie sessions. We have, I think, there's Bermon Painter coming in. And he's actually fairly well-known in the UX area in Charlotte. He's going to be coming in talking about Sass, a big deep dive into Sass, as deep as you can get in a 45-minute session.

And there are some others that are a little bit more on the soft side... I shouldn't say soft side... but sort of the non-techie skills of public speaking. We've had somebody in the past kind of give small public speaking workshop. And he wasn't able to make it last year but we had a lot of people saying, "Where was that? Where was that?" So he's going to be coming back this year.

Things like that, like time management and public speaking, budgeting, financing or financials, contracts and getting clients. All those sorts of things  that if you're working for yourself as a Web guy, you're doing because you're a good Web guy. You already know how to do that. You know   how to connect to a database. You know how to write to a file. You know how to slap some HTML on the screen. And not dismissing frontend designs stuff, you know what I mean, but the  questions that I get are "How do you rate contracts?" So we're covering those sort of things.

Manuel Lemos: So, as usual, there are not many tech talks, just many about business.

Michael Kimsal: Yeah, a little bit more on the business side. There's still a few slots open. There may be a couple of techie-oriented one. We got at least one SEO talk and there may be a JavaScript talk or another CSS talk, something like that.

Because  that is the audience there, it's Web people. So some of them want to know something of that. But it's easier to get that sort of information than it is to get good face-to-face information about some of those harder-to-quantify skills.

Manuel Lemos: Right. Is it one or two days?

Michael Kimsal: It's one day. Saturday, November 23rd. So about three months from now.

Manuel Lemos: OK. Are there multiple tracks or just a single track?

Michael Kimsal: Three concurrent tracks. So, assuming that it's as it was last year, that will be seven hours plus lunch, so seven times three is 21 different sessions to choose from.

Manuel Lemos: Yeah. Just out of curiosity, how does people feel about that they're like "Oh, I cannot go to..."

Michael Kimsal: There's always a bit of that. It's two things. We have video in the past. Though, I generally not been able to get all the videos up. I have most videos from last year. I'll probably be putting more of those up over the next couple of weeks... or actually, probably, the next month or so.

So, we'll probably video those again to happen. But usually, there's a bit of overlap. We try not to schedule things that I think...

Manuel Lemos: About same topics.

Michael Kimsal: Yeah. Well, we may have the same general topic a couple of times. Client management, how do you deal with clients, techniques for dealing when you find a client, how do you deal with these sorts of things.

We'll probably have a couple of talks on those, from different people on different perspectives. There'll be a bit of that. So if you miss one, you go to the other.

It's a perennial problem of conference scheduling in general. So, we try to combat some of the most common topics. Or have that with some of the common topics being variations of those throughout the day.

Manuel Lemos: Right. So it will be in Raleigh?

Michael Kimsal: Yup, back in Raleigh again. And we shall see if we go out to another city next year.

Manuel Lemos: Yeah. Go on tour.

Michael Kimsal: Brazil.

Manuel Lemos: Michael Kimsal on tour.


Michael Kimsal: Yeah, we're going to go to Rio.

Manuel Lemos: Well, it's a large market for freelance developers. You'll never know.

Michael Kimsal: Maybe.

Manuel Lemos: What about the pricing? Have you already raised the prices or not?

Michael Kimsal: It's $99, one day.

Manuel Lemos: OK, but will you raise the prices as..

Michael Kimsal: No. No, that's not the plan. So we have done an early bird pricing in the past and then a higher price. And we're trying to keep it simple this year. It's one price.

Manuel Lemos: No rush for... They don't have to rush to get a good pricing.

Michael Kimsal: They should rush anyway. They should rush  regardless. Because it does help us determine food pricing and things like that, but yeah.

Manuel Lemos: That's the usual trick. They raise the price as the time goes just to encourage people to register early.

Well, anyway, we already know it will be a great event. Too bad, I can never make it. It's on a different part of the globe for me.

Michael Kimsal: Well, maybe you can make it next year.

Manuel Lemos: Yeah, probably.

Michael Kimsal: There's still 80 days left, 90 days left. You might be able to make it.

Manuel Lemos: Yeah. Well, I'd be in the US like next month, by the end of September. There will be a Google event, but it's a different part of the...

Michael Kimsal: Just stay around for a little bit.

Manuel Lemos: I'll just stay around for one and a half month.


Manuel Lemos: Just to upload the trip.

Michael Kimsal: Yeah.

Manuel Lemos: OK, well, it's always great to know about that event, because it's related to what many of the developers watching this Hangout do. They are freelance developers. It's great. We don't see many events with that focus.

Michael Kimsal: Correct.

Manuel Lemos: And I hope you can continue with these events for many, many years to come.

Conclusion (51:26)

Manuel Lemos: Well, with this, I would like to thank you again for coming, Michael.

Michael Kimsal: Thanks a lot.

Manuel Lemos: I heard that Obama is calling you to decide about a serious thing. He needs to have your opinion. You are very important person.

Michael Kimsal: That could be, That could be. And on that bombshell, can I say bomb?

Manuel Lemos: Yeah.

Michael Kimsal: OK.

Manuel Lemos: No, you cannot say bomb. No, it will trigger some NSA  events.

Michael Kimsal: Thank you.


Michael Kimsal: Someone's knocking on the door right now.

Manuel Lemos: Yeah. It's another type of bomb. Okay, NSA?

Michael Kimsal: OK.


Manuel Lemos: OK, I will not tie you any further because Obama has been calling you several times already. Thank you again for coming. On my part, that's all for now.

Michael Kimsal: OK.

Manuel Lemos: Bye.

Michael Kimsal: Adios.


You need to be a registered user or login to post a comment

Login Immediately with your account on:


No comments were submitted yet.

  Blog JS Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog Using JavaScript to A...   Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)