Author: Manuel Lemos
Last month viewers: 2
Manipulate Arrays and Objects with Excel-like Formulas using FormulaJS (26:35)
Language Syntax Highlighting with PrismJS (29:00)
Download Size: 37MB Listeners: 2344
Introduction music: Riviera by Ernani Joppert, São Paulo, Brazil
RSS 2.0 feed compliant with iTunes:
Note that the timestamps below in the transcript may not match the same positions in the video because they were based on the audio timestamps and the audio was compacted to truncate silence periods.
Arturs Sosins: Hello. I'm actually... It's midnight here, in between the days, and I'm glad to be in this special podcast because 42 is a special number - all science fiction fans should know it - because 42 is the answer to all questions.
Manuel Lemos: Really? Damn, I'm not a science fiction fan. What is it all about? Damn, I'm not a nerd enough to know about it. Now you need to explain it.
Arturs Sosins: Yeah, well, basically there was a book where there was a simple computer and everyone was asking different questions to it and the only answer it gave was 42.
Manuel Lemos: What is that book? I remember something but I forgot.
Arturs Sosins: It was Isaac Asimov's but I don't remember its exact name right now.
Manuel Lemos: Interesting. Is there a movie about that?
Arturs Sosins: I doubt it but well, maybe.
Manuel Lemos: I'm pretending to be Generation Y. We don't read books, we just watch movies.
Arturs Sosins: I'm supposed to be that generation now.
Manuel Lemos: So we are switching. You read books and I watch videos.
Game Graphics with CutJS (1:47)
Manuel Lemos: Today, we have several interesting topics to talk about, varied subjects. And I'm going to start talking precisely, one about a game engine.
Let me share the screen here if I'm finding the right window. Let's see. OK, this is supposed to be the one.
Arturs, have you been playing 2048?
Manuel Lemos: I guess.
Arturs Sosins: I even reached the 2048 well.
Manuel Lemos: Yeah. Well, I reached once. But still even after 2048, you just can't stop playing that, that's bad because we have work to do.
With this CutJS library, it seems to be an eventual solution for creating games like this. I found it very straightforward and here is an example. Let me increase the font here. They give an example to a very simple game which define the basic view box where you'll be presenting your game.
You can attach elements of the canvas that will appear on a web page. I did not study this enough in depth to comment on it in full, but it seems very straightforward.
Arturs, did you try this library? What did you think?
Arturs Sosins: Well, actually, from now and then, I need to create some demo games for some company startups. Usually, when they request it on web platform, HTML 5 and Canvas, I try to pick out different engine over time so I could try them out.
Recently, I was working with CreateJS and PhaserJS. And all of these engines that I tried, they actually work really similar to ActionScript. You have a stage, you have a sprite for grouping, bitmap objects. So, most user that are familiar with ActionScript could really be into it and develop it.
But when I checked out the CutJS, then it seems it's far away from the Flash ActionScript paradigm and it's more like a natural way of how we would develop a game in JavasScript.
Manuel Lemos: So, what's the... I did not get what the difference is. Is it chained-calling style?
Arturs Sosins: Actually, yeah, including chained-calling style and, you know, like in ActionScript, there are pre-reserved names that objects are usually called like bitmap ,as I said, there's a stage for sprites for grouping. But here, there are images here, there you can use CSS selectors.
Manuel Lemos: Right. So in your opinion, which approach is better? It's the jQuery style or the ActionScript style?
Arturs Sosins: Oh, it's hard to say as I'm used more to ActionScript style because all the frameworks mostly use it. Then, it might be harder for me to get in and I'm actually already not used to look at such codes.
As you see, there are many callbacks and chains and it's already hard for me to read also once I was writing the same code myself. So it's just a preference of how you code.
But... yes, go on.
Manuel Lemos: For me, it looked very straightforward and probably you'll be more productive to develop games using this approach. But again, I'm not an expert. You probably know that thing better.
Here in this screen that I'm showing, it's an Asteroids type game, which at least for me, it brings back a lot of good memories. This is one of the first games I've ever played.
And it seems to be pretty easy to develop games with this library. Well, I'm not a very good player, but OK, I haven't trained for this game for a long time. I only have trained 2048 and Candy Crush.
Manuel Lemos: OK, well, this is just to mention this library. Anybody that is interested in developing games might be interesting.
This may be interesting for my son but lately, he has been convincing himself that he should learn about programming because that's the way he's going to assure that his future would be around games.
I'm not sure if he's really that inspired, but we'll never know what will be his future. At least, I've been helping him to go through the Code Academy because he's not fluent enough with the English. But he seems to be enjoying.
Arturs, you also have a son. How old is he?
Arturs Sosins: Oh, he's only four years old. But when he was born, I was thinking that around five years old, he might already know C or something, but well... Now, I'm lowering my expectations.
Manuel Lemos: Yeah. Let him enjoy his childhood, please.
Manuel Lemos: My son, when was seven, he wanted to write a blog about games and reviews, because he was really excited about what others were doing. He was seeing it on the Internet and YouTube channels about games.
But then, the idea passed; he no longer is interested. And I already told him that if he wants to pursue a career on games, he has to learn about programming. So he's pretty convinced, but that's just because it's better than going to school.
Manuel Lemos: OK, let's move on with the next topic, with this Hangout on which I like to comment about an interesting article because it talks about an unusual topic - let me increase the font here - which is the call stack size. What is the call stack size? It is basically...
Arturs Sosins: How many functions deep you can go into calling each other.
Manuel Lemos: Yeah, could be a recursively or not. Sometimes, you have called your functions too much because probably you are using some technique that requires recursion or maybe functions calling themselves.
And the guy presents the results. If you are using Node.js, the limit is 11,000 something, Firefox, 50,000, Chrome, 10,000. Well, given these numbers, what are they useful for? Does that mean that if you want to develop some application, you should be concerned to never call functions more than these number of times?
I think most people is not even concerned about that because they do not call their code that deep. I don't know. What do you think, Arturs?
Arturs Sosins: Well, I remember once, was kind of doing it when I was trying to generate random words based on some dictionary using recursion. Then I had to remake it both with making up, which was much more uglier solution but it worked.
So yeah, there are sometimes some algorithm that requires you go really deep and try many combinations recursively.
Manuel Lemos: So you exceeded the...
Manuel Lemos: Yeah, well. Well, I don't know. It depends on the language. But if you are using like C or C++, I don't know if there is a limit specific to the language. I think it depends on OS configuration, right?
Arturs Sosins: Yeah.
Manuel Lemos: Yeah. Well, I don't know, this is just a comment about this topic because it is unusual, not necessary, maybe useful.
OK, now, if you didn't know there is a limit, now you know. Then, you figure if that information is useful or not.
Arturs Sosins: Actually, the main topic here is in ECMAScript 6, there kind of will be no limit or, basically, the limit will be increased because how it all goes underneath. It would jump instead of go in other function. I know exactly how it would work but the idea is that there virtually will be no limit.
Manuel Lemos: Yeah. Well, if there would be no limit, then it will be a non-issue. That it's useful to understand how important is this information. Well, for now, we'll know that in this environments, you have limits even if the feature don't have them.
The first is about the equal sign.
Arturs Sosins: Can I first comment about the author? In the first paragraph, he is writing that he is coming from C# and I have lots of friends... Well, not in this, I mean, a little lower from equality.
Manuel Lemos: Those are whiners. They are always complaining. They never did assembly language. They will complain about sorcery.
Manuel Lemos: Well, yeah, anyway, the seven topics, let's just review them very quickly. The first one is about the equal sign. It can be = for assignment, == for comparison, and === to accurate comparisons.
Arturs Sosins: Now, you can imagine what C# user would compare number to a string and they are equal. It's like heads exploding.
Manuel Lemos: Oh, no, that has a blasphemy, you can't do that. You are from the hell.
Manuel Lemos: Never mind. We also have that in PHP and there are other...
Arturs Sosins: All weakly typed languages basically.
Manuel Lemos: Yeah, most of them have these differences and nobody will die of that. Then, talking about the dot notation and the bracket notation, which is basically the same approach as accessing an object to an array.
So the index will be used to access the property or the array element. It's just the same thing. So here, person["firstName"] is the same.
Arturs Sosins: Again, there are languages that completely do not have associative arrays. They have an objects, like map objects or something that are different.
Manuel Lemos: Right.
Arturs Sosins: That's why it ends up...
Manuel Lemos: So they complain because they don't know that.
Manuel Lemos: Okay, then, talking about function context.
Arturs Sosins: Function context is complete sorcery.
Manuel Lemos: Right.
Arturs Sosins: Yeah, you should...
And then, if you use this operator inside, it may lose context. It may no longer refer to the original object that you think you are manipulating. And you have to pass copies of the object to that private functions.
And this is really messy. Personally, I hate it. I think in ECMAScript 6, the object-oriented approach will be more like in the other languages if you use ECMAScript 6 you won't go through this confusion. But, well, I can understand why the guy is saying that you should know about it.
And there are other things about function context. We are not going to go too much in detail in commenting all of this. But it's just to say that it's complicated enough. So far you have to think all the time every time you use this thing.
And then, it talks about function expressions, function declarations, which is another thing that's going to be confusing because it can...
Arturs Sosins: Storing function the variable is.
Manuel Lemos: Yeah, right. Variable is just a space. How do you store function which is code in a variable, I don't know. It's a reference to the actual code somehow.
Then, again, something related about named function and anonymous function which is basically the same way of viewing the question of the functions to be assigned to a variable or to be declared.
Then, it talks about Immediately Invoked Functions, which is something also weird... I never used it myself but I noticed some developers like it, which is declaring a function, an anonymous function and call it right away.
Arturs Sosins: Well, most common usage I think, if you are creating a script that should be dynamically rolled into the web page, it should call itself automatically when it's rolled. So that is the way to go. There is no other way.
Manuel Lemos: Yeah, it's a sort of encapsulating a global function and not call it global because all the variables it uses inside are sort of private. Well, as long as they're declaring with var.
Well, this is just a mania. Personally, I do not use it myself, but I don't have anything against whoever use it. It makes a bit the code unreadable, but OK, you pass the code to a beautifier and it becomes better. But it's still weird for those that are not used to it.
And finally, it talks about the typeof operator and toString prototype for objects. They are not exactly the same thing. I don't know why you would confuse one thing with the other or maybe it's not really talking about confusion. I don't know. I don't know what I got from this.
Manuel Lemos: Oh, really. They put in brackets. I understand.
Arturs Sosins: I think I did it myself, at first.
Manuel Lemos: I see. First you said, I've seen some developers. Ah, no...
Arturs Sosins: I know, I still see them on some code, yeah, but I think I even did it myself.
Manuel Lemos: Right, right. Those beginners, those amateurs.
Manuel Lemos: OK, but now moving on to another topic, this one is more like an opinion from a developer. I'm not sure if he's kidding or is serious because he swears a lot.
Well I did not read this article in-depth but skimming it, I realized that the author is not very pleased with the complexity that certain frameworks add to the software development.
They are supposed to be simplifying things. Then, they complicate things because internally, if you try to study the code, you have a hard time to understand.
Arturs Sosins: Yeah.
Manuel Lemos: Well, that's my opinion. I don't know what you think. But what I have seen in these frameworks and that's another reason that I avoid them. Not that they are not useful, it's that, for instance, if you want to understand something inside, probably to see if you understand anything or if it is a bug, you get lost.
Except that in the real world, sometimes - actually often - you do not code just for yourself, you code for others. I mean others that eventually will use and maintain your code later, so they still need to understand it and probably certain approaches are more complicated than they should be and they are not helpful.
But OK, still I don't know if the author is kidding or being very serious. What I know is that he had a lot of comments. I did not go through the comments but it is always interesting to see that these articles exists, even if they are not being too serious.
What did you think, Arturs?
Arturs Sosins: Well, I actually have kind of mixed feelings about the article. On one point, I think there are two type of languages, the languages that provide the whole environment like Java and lots of classes or like C# and .NET.
But, on the other hand, if you see those frameworks that are out there and they are used in production, there is a huge book, a thick book, for every other frameworks.
So, basically, it seems like everyone try to encapsulate everything. And so, it grows out proportions and for newcomers, it is impossible to come in the already existing frameworks. There are lots of books to read and try to do something. So, they are complicating things by themselves.
Manuel Lemos: Right. Then, for certain dependency, if you want to use a package, you need to use a lot of other packages and everything gets even more confusing than it already is, and it is not helpful.
And if you say something to those developers, they say 'Oh, we are an inferior of developer. You don't understand my beautiful design patterns. You need to go to school if you've ever been there.'
Manuel Lemos: Well, never mind. I don't know, each one has his own style and it's none of our business to judge each other's styles, but we can't help having an opinion.
Arturs Sosins: Yeah.
Manipulate Arrays and Objects with Excel-like Formulas using FormulaJS (26:35)
Manuel Lemos: OK, that's one interesting topic. Now, moving to another topic, this time about another unusual library which is, basically - it's called FormulaJS - an attempt to implement Excel-like formulas to, in this case, applied to objects and arrays, rather than spreadsheet cells.
So, I don't know if this is really, really useful. But OK, it's a library, it's a set of functions for that purpose, manipulate objects and arrays somehow. It's not a small one.
Arturs Sosins: Basically, they claim to do everything that you can do in Microsoft Excel. So, it's sort of a framework to create your own spreadsheet or even spreadsheet framework again.
Manuel Lemos: Right. Except that it is not a spreadsheet, it's just arrays and objects.
Arturs Sosins: No, you read them from the spreadsheet and... Basically, you create your own UI based on this framework.
Manuel Lemos: Well, the UI is probably the whole application. It is much more than just these formula functions. But, OK, I got the analogy. It's somewhat unusual. I don't know if it is that useful.
Arturs Sosins: It's enterprise.
Manuel Lemos: Yeah, and it has... Right, exactly. No, I don't think it's this is enterprise. Actually, it should be the opposite. It's quite straightforward. It has lots of functions to manipulate many things.
Well, in the end, it's still a framework. I didn't see any... I was wondering if I could see some example code in practice, but all these seems to be global functions, right?
Arturs Sosins: Yeah.
Manuel Lemos: Yeah, I don't know if global functions is the way to go because there could be collisions. Well, anyway, this is just to mention something that I found. Clearly, it's not exactly something that will be useful to everybody.
Language Syntax Highlighting with PrismJS (29:00)
Manuel Lemos: Now, let's move on to another topic, which is about one library. I think there are several libraries of this type. In this case, it is a library for syntax highlighting.
Arturs Sosins: Yeah, well, this library presents itself not like syntax highlighting for specific language but a framework to develop syntax highlighting for a specific language.
Other than that, there is a problem with the PHP syntax highlighting itself. It is already not very convenient, because what it does, it starts inserting tags in the middle of the text to do the necessary coloring.
The size of the source code, when using syntax coloring, all the HTML tags, it takes a lot of HTML. For instance, if you want to display a large PHP file, it would take too much time to download because it would be...
Arturs Sosins: That would be another problem.
Arturs Sosins: It can be extended to many languages also.
Manuel Lemos: Exactly. And I think it can be extended, right?
Arturs Sosins: Yeah, yeah.
Manuel Lemos: To support different syntaxes. Well, this is great. I am looking forward to use this in PHPClasses and JSCLasses sites.
I think this is not the only solution for this purpose. But I do not recall any other library at the moment. I know there are others. But, well, OK, this is just to mention this, actually, very briefly to say it is useful for this purpose.
So this time, we are going to talk about the nominees for winning the Innovation Award in February. They were voted in March and then in April, the results came out.
Now we can comment about any of these five packages. Well, let's comment about all of them. Arturs, which one would you like to comment?
Arturs Sosins: Let me start with the winner. Let me screenshare it first, maybe. So, the winner is Raul from Brazil, who provided the package that can embed the webcam stream, the stream from your webcam into the webpage. It can also handle microphone audio. Unfortunately, I can't show it in example because my webcam stream...
Manuel Lemos: Oh yes, it's taken by the podcast.
Arturs Sosins: Well, at least I think so. But once I screenshared, maybe it will work. Let me try. Let me try it.
Manuel Lemos: Let's see what happens.
Arturs Sosins: No, it does not seem to allow me anything. So probably Google Hangout is...
Manuel Lemos: Probably there is some error and you don't see anything.
Arturs Sosins: Yeah, but I can show basically the code. The code is simple. You'll create video object and then we populate it.
Manuel Lemos: Yeah.
Arturs Sosins: So, basically, you can embed the live stream and do whatever you want with it, as an example, as a mirror. Create a mirror app for example. So, it's one of the HTML 5 features which is great and Raul has wrapped it in reusable as component.
Manuel Lemos: Yes, that's interesting. I cannot demo it as well, but when I tried it, it prompted the user to authorize the access code in the hardware.
And it worked pretty well, at least in the browsers that support it. Well, at least in Chrome. I don't know if all versions of other browsers support it because it's regular HTML 5 objects.
Arturs Sosins: Even the old Opera that I'm still using still supports it.
Manuel Lemos: Yeah, even Opera. Even Opera. Opera is awesome.
Arturs Sosins: Yeah, it is.
Let me try to demonstrate here. Of course, you don't see anything here but if you look at the source, you will see that we encode this raw JS files script and now the others are listed under some variables.
Manuel Lemos: Yeah.
Arturs Sosins: It provide duplicated loading. Basically, if you inspect the element, you will see that all the scripts are loaded in the in the head and added.
So if you are using, you are creating some kind of web app that does not know what would you want in the runtime and maybe if you weren't specific... One specific functionality needs to load specific script. Basically, that's the way to go. And Jino provided the component, basically.
Manuel Lemos: Right. And this could be useful for making the initial page loading lighter because you can load libraries dynamically. You can load them later after the page has loaded.
This is somewhat similar to RequireJS, right?
Arturs Sosins: Yeah, I think they are all quite similar. To the functionality, there is nothing much to add.
Manuel Lemos: Yes.
Arturs Sosins: So, another one is Alessandro Vernassa from Italy. Basically, what he provided is a class to save your field web forms offline.
Let me... I think I even already saved one here. Yeah.
At first, I thought that it would preserve the field form even if I did not submit it. Like I can go back and see all the data I filled, but it actually saves the HTML file. You can see, I almost filled the form here.
Manuel Lemos: Yeah, that's somewhat unusual. I don't know what would be the use cases for this, but it's interesting because when it's saved, it's actually saving the web pages again. But this time, it will have the values of the inputs already filled in.
So, that is why it is saving whatever you entered there. So it is interesting. Kudos to Alessandro Vernassa for his submission.
Now, on my behalf, I would like to comment about the remaining two packages. Let me share the screen here.
So, it's just hover the mouse on the top of the images and it shows the pictures in full size, just hovering the mouse. This is interesting for users that sometimes, probably, they are too dumb and do not realize they need to click on the pictures to see them.
And this way, the picture is displayed in full size immediately and the user does not have to think too much. So, it's interesting, just an example of improving usability of gallery pages for every kind of users.
Arturs Sosins: There are lots of post customizations available and stuff, so it's a full-blown thing.
Manuel Lemos: Right. This package was developed by Michael Milev from Bulgaria. I suspect that's not the right way to spell this name, but I hope he can excuse us.
Anyway, moving on, the next package I wanted to comment about is this one, jQuery Toolkit, basically another package from Jonathan Gotti from France. He was one of the winners of the Innovation Award of the year last year.
And it is an interesting library for creating widgets on which it takes properties for those widgets from CSS classes, I mean the attribute that it defines there.
And this is an interesting approach. Let me see if I can show you an example of the code. So, here is an example page. And then...
Arturs Sosins: I don't get it.
Manuel Lemos: It's too small?
Arturs Sosins: No, it's just too unreadable.
Manuel Lemos: Oh, because it's not formatted very well.
Arturs Sosins: Yeah.
Manuel Lemos: Well, I can't... Wait, it's not the way to increase this. I can increase it but probably it doesn't help.
Anyway, what matters is that this part here, it can define behaviors. I think this is it from what I understood. It can define behaviors for this and actually this is probably just part of the example because...
Manuel Lemos: Yeah, it's not defined here. Well, here is more of an example of how it looks like. Or it defines some elements and it defines plugins to be attached to certain elements using jQuery. So, well, this is a bit abstract but I think it was enough to explain what it was.
So, it's somewhat a different approach to things. Well, probably, this example here is easier to explain. There is a CSS class here that determines the properties of plugins to apply to this image element in this case. And I think this is to apply a resizer for an image. And so this small... these are the properties.
Arturs Sosins: It usually provide properties making some object configuration to the plugin. Then, in this case, it could really go from CSS properties. Yeah, that's an interesting solution.
Manuel Lemos: Yeah, well, as long as it doesn't clash with existing CSS styles, actual CSS styles.
Arturs Sosins: Yeah.
Manuel Lemos: Well, I think that's to avoid clashing. That's why there is this sticker prefix here.
Arturs Sosins: Correct, yeah.
Manuel Lemos: Yeah, OK, this is an unusual approach to do something similar to other solutions but it's innovative because it follows a different approach. And you have defined the properties here. And over here, you defined what those properties need, small and zoom.
OK, that's interesting. Kudos to Jonathan for his submission.
Manuel Lemos: Now, finally, we're going to comment a bit about the rankings. As you may see here, this month, the winner was Raul from Brazil. But over here, we already have the rankings of the year.
So, by authors, so far who's going ahead is Jimmy Bo from Canada. And then, well, this is just the top ten. There are other nominees here.
And on the right side, there is a ranking by countries. And this already includes the winners of March, because we are one month behind. So far, Italy is leading.
Arturs Sosins: Canada.
Manuel Lemos: Tied with Canada, with two packages each, so they're earned 6 points so far. And this is very soon in the year. Many packages have been submitted, many innovative packages.
And over the year, I'm sure, the Innovation Award championship by countries will start heating up as more countries get involved and other authors of the same countries send more contributions to be nominated as innovative and they start gathering more points to the Innovation Award.
So far, we don't have many packages but we are already are seeing some winners that are standing out like Jimmy Bo from Canada, that is helping - alone so far - Canada to go ahead, tied with Italy. So let's wait and see.
I do not see here anybody from Latvia. I don't know why.
Arturs Sosins: I'm giving them a head start, you know.
Manuel Lemos: Oh, I see, right.
Manuel Lemos: Well, I suspect you are resting from your victory in the past year. That's not the case of, for instance, Franz Brunner from Austria who also was another winner, as well as Jonathan Gotti. They did not rest, unlike those people from Latvia.
Manuel Lemos: So, let's see if things start warming up and then next month, we'll get back to talk again, comment about the progress of these rankings.
Many packages have been submitted lately which is great. Many of them are innovative. And I hope next month, we have more interesting comments about these rankings to comment on, depending on how it progress.
Manuel Lemos So, basically, we have reached the end of this Hangout. I would like to thank you again, Arturs, for coming.
Arturs Sosins: Sure.
Manuel Lemos: I don't know if you have any final remarks. Anything else you would like to comment?
Arturs Sosins: Yeah, well, I can only say that I hope that our podcast answered all your questions. And if not, then it's 42.
Manuel Lemos: Oh, OK.
Manuel Lemos: I was wondering if 42 was related with '84. 1984 is another book, another movie.
Arturs Sosins: That's something else, probably.
Manuel Lemos: Well, the answer is half.
Well, on my behalf, that is all for now. So bye.
Arturs Sosins: OK, bye.
You need to be a registered user or login to post a comment
Be One of Us!
Login Immediately with your account on:
No comments were submitted yet.