Joined November 2012
·
Me 180x180

Jose Jesus Perez Aguinaga

Front-End Engineer, UX & Interactions Designer, Full-Stack Javascript Developer, Head of Web @Centralway at Centralway
Front-End Engineer, UX & Interactions Designer, Full-Stack Javascript Developer, Head of Web @Centralway
Centralway
·
Switzerland
·
·
·

@edrandall My bad, forgot that coderwall doesn't put published date (or I can't see it). I published this article around Sept. 2013

Posted to Using source maps for Stylus today over 1 year ago

@bushwazi Since I'm using as a module, I'm currently specifying it through the package.json as I put in the tip. If you want to install it through command line, simply use npm install https://github.com/sidorares/stylus@sourcemaps

@felixcriv Yes! AngularJS is a boss level in our lovely front end javascript game. I would recommend you some of those fancy course programs you find online to work as a cheat engine. Saludos back!

@eisaksen I haven't checked it up, but I know for sure that that's what the AngularJS team is going to move to (if they haven't already). I haven't checked e2e tests in a long time because they are taking forever; I'm really looking for faster alternatives.

@srobertson You are not the only one :) I have really skilled coworkers that are well versed in programming that struggle with AngularJS. I always point them to the Egghead videos for most of their doubts. That site plus the Mastering AngularJS book is more than enough to just get in track with AngularJS. Good luck!

@eisaksen Indeed. Karma is pretty much all you need for unit testing. For e2e checkout Protractor, as the AngularJS team is moving there.

@jasonroos

  • You are correct, silly me, should had done a !isPrime.cache first.
  • You are correct again! I learned afterwards the !! trick and have been using it afterwards. Thanks for the pointer.
  • Not a bad idea, although that may end up making your function to look up through the Object's Prototype Chain. That might have a some drawbacks in time consuming functions or complex objects. Have you checked maciejsmolinksi alternative?

@maciejsmolinski I like it! Have you seen Addy Osmani's article on Memoization? Might be even a way to go deeper!

Posted to Why never use new Array in Javascript over 1 year ago

@zaus Impressive work right there. Thanks for the demonstration! On why arguments.callee vs naming the function, I think it was because when I was coding the example I was using an anonymous function. My bad!

I think I'm more open today about new Array than some time ago. I think my fear is that in this Javascript world were people are not always aware or the usage of new or Function constructors, this code can be a pitfall easily avoidable. For instance, to "clean" an array, you don't do array = [] as might be logical, but array.length = 0. Oh Javascript.

Finally, unless you are doing iterative pushing, the difference in terms of performance won't kill anybody. Bugs that confuse people due non-VM oriented code, however, can turn a Dev into a serial killer.

@jasondavisfl Sadly I'm not positive it can work on a Windows machine... #!/usr/bin/env ruby. Do you have something like cygwin working on your computer? Are you able to run Ruby?

Posted to AngularJS: Scroll Animations over 1 year ago

@vohof Aha! True. The directive performs the function every time the user scrolls. Since the user can scroll all the way down (in the case of the ball, all the way to the left) in a single scroll, then the directive performs this only once. The same way, if the user scrolls it reeeallly slow, the function is performed many, many times.

How do we solve this? There are two possible ways. The first one is to create a relationship between the "distance" the user scrolls and the amount of "scrolls" it performs in that distance. Let's call it "scroll speed". In the directive function, calculate that through a function and then pass it to your function the same way I'm passing the direction.

The second way is through step based scrolls. Your element has a finite height (or width, in the case of the ball). You can divide this dimension in the amount of steps you want the animation to be performed. Then, when the user scrolls, calculate at which percentage of this dimension the user is going to finish its scroll. E.g. if I scroll to the 50% of my element, then I want to perform 50 times the function given that I assigned a total of 100 times. This is useful for timeline functions, where you only need maybe 3 or 4 animations to be performed: if the user performs scrolls within the range of 0-25% your element's dimension, perform one step animation; 25-50% second step and so on.

IMHO, unless you really need something quite specific, use this directive as a trigger and THEN control your animation with a different mechanic (e.g. timeouts, intervals). I usually always return true after the first function call to dismiss the triggering for the rest of the scrolling.

Cool! Best of lucks :) There has been many improvements on Geolocation over the last years. I think the coolest/scariest part is the fact that you can get a user Geolocation with the proper permissions without asking him/her again on a chrome extension. Maybe should you could use in the future for your projects.

Posted to Modern Front-End Workflow over 1 year ago

Why would you want to create something front-end-ish from scratch?

Posted to Modern Front-End Workflow over 1 year ago

Give Yeoman and Brunch a try :)

@darragh Yep, Seiichi Yonezawa wrote a nice tip about how to use it. I think it's still around Coderwall, but somehow it's not longer there. Might check the cache

@reneruiz Vagrant is a virtualization tool. Helps you manage Virtual Machines (VM) provided by Virtual Box in order to provide development environments, so you don't have to install packages directly in your workstation. Other benefits include provisioning and the ability to replicated production environments.

Posted to Why never use new Array in Javascript over 1 year ago

@creationix My, my, I did a bad test with a new Array. You are right, they behave in the same way objects do (stored by reference not by value). Pardon my mistake good sir.

In the other hand, I stand to my words: new Array is a no no. Not only because of performance, but because of readability. Multiple constructors can confuse the heck out of developers! Since Javascript syntax allows having as many arguments as we want, we would need to write extra code in order to check which function you are calling (IDE's or Code Editors can't read the prototype of the function and guess you are calling it wrong, like in Java or C++). We already have native functions with multiple optional parameters, do we really need to have our own code with ugly splices to arguments when same behaviour is expected?. The fact that the behaviour is incredible different by just adding one extra parameter is just nonsense! "If you put one parameter with value N, I create an array of length N, while if you put two, I create an array of length 2 with those two parameters as values". Woot? I would bet my magic mouse that somewhere someone is head-butting his desk because of this.

We don't need to allocate memory in Javascript. That doesn't mean that we don't care about it in Javascript. We just do it by our own ways. If you most optimal implementation of a code relies in a language feature instead of programming strategies, whenever you move from one language (add southpark meme), "You are going to have a bad time".

For instance, take this tail recursion implementation of Array.prototype.map

Array.prototype.map = function (callback, thisArg) {
var self = this, acc, i, tail_map;

acc = [];
i = 0;

tail_map = function(c, a, r, i) {
    if(self[i]) {
        r[i] = c.call(a, self[i], i, self);
        return arguments.callee(c, a, r, ++i);
    } else {
        return r;
    }
}

return tail_map(callback, thisArg, acc, i);
};

77% faster and no need to use new Array. The code is language agnostic (other than the use of call, callee or this, but you can use a named function for that) so you don't have to worry what the heck Python/Ruby/Haskell/Erlang/Scala/Clojure/PHP/Java/Dart/Groovy/Go/Scheme/Lisp/R mean when you do new Array: They all agreed that [1,2,3] is an array/list of 3 elements.

Posted to Why never use new Array in Javascript over 1 year ago

@creationix You are right, arrays created whether with new Array or [] are instances, which should make them behave as object (being stored by reference). However, this is not the case. Javascript handles Arrays in a different way it handles complex objects (Object, Function) or primitive/native ones (Number, String, Boolean). I have yet to find a way to define how Javascript manipulates Arrays, which might explain why things like the arguments variable behaves the way it behaves.

Still, I fail to see why would I use new Array(number) for a storage purpose solution (which is the reason why arrays were created by). Quick and dirty solutions like dvdotsenko's ones with the placeholders are nice usage of a tool for specific scenarios, but that's as much as I can say about that combination.

@stevefrost I actually prefer self; I am a little kid who was spoiled with python at some point of my life :)

@eallam That's correct! That's pretty much the reason why this.king works if we use king = this.king instead of var king = this.king in the last example of that section. It's stored in the window object!

Posted to Why never use new Array in Javascript over 1 year ago

@jamesxli Well, the thing is that new Array returns an object, not an actual array. You can have Array operations, but it's not a native array type. Try new Array(1,2,3) === [1,2,3]. For me, it's more misleading the fact that when I type new Array I get an object.

We don't really replace classes in Javascript, we only extend prototypes. We can do it even on run time (not a good idea, but it's possible). For instance, let's say we want to add the Array the famous foldr function and we wrap that in a specific "class" called superArray.

function superArray() {
Array.call(this);
var self = this;
this.foldr = function(fun, acum, arr) {
    if(arr.length)
        if(arr.length === 1) return fun(arr[0], acum);
        else return fun(Array.prototype.splice.apply(arr, [0,1])[0], self.foldr(fun, acum, arr));
    else return acum;
};
}

Now, if we have already created an object with our class "Array", we can overload the internal [[proto]] property to have fun.

var b = new Array(1,2,3,4);
b.prototype; // returns []
b.__proto__ = new superArray();
b.foldr(function(x, y){ return (x+y); }, 0, b) // returns 10

This is not recommended (it's a non standard and I think it's going to be dropped on Harmony), but it's possible, because Javascript holds a reference to the object's prototype, something that it's not possible in other languages. The proper way is to overload the prototype of the class we are calling.

superArray.prototype = new Array();
superArray.prototype.constructor = superArray;

This allows us to have our extended methods (from our new class) without removing the prototype chain (which changing [[proto]] does).

Posted to Your first SPDY app over 1 year ago

Awesome. I get (from cache) quite often from other applications without using SPDY, which I'm going to assume is the work of the browser. In this case, are we leveraging that task to our server instead of to the browser?

Posted to One line browser notepad over 1 year ago

@jakeonrails Quoting @jessereese01, this is very clever, I dig it. Smallest html5/css/js editor competition anyone?

Posted to 2's Complement in Javascript over 1 year ago

This should have more likes, reminding me of good ol' times at CS 101.

Posted to Why never use new Array in Javascript over 1 year ago

@dpashkevich True indeed! It just brings all sorts of bugs. My favorite one was in a code some friends were having problems with, it looked something like this:

var hasStarted = new Boolean(false);
if(hasStarted || isViewProfile || isViewUsers ... ) { ... }

It had a lot of other flags and OR's and never thought that the hasStarted was actually being evaluated as an object. Gotta love that silly language.

@mutahhir Glad to know you enjoyed it, was worried I made it too tedious. Thanks!

Posted to End of the world countdown over 1 year ago

Timezone? ;)

Nice! Looks almost the same in Erlang

fizzbuzz(N) ->
  [fizz_or_buzz(X) || X <- lists:seq(1, N)].
fizz_or_buzz(X) ->
  case {X rem 3, X rem 5} of
    {0, 0} -> fizzbuzz;
    {0, _} -> fizz;
    {_, 0} -> buzz;
    {_, _} -> X
  end.

Noted, I'll add it up as soon as I get some good tags for it. Thanks!

@wyuenho Assuming Maria got pregnant by deity overnight, you never know! I also wonder what triggered you to figure out this information.

So, how old am I again?

Posted to Top Javascript Docs/Tutorials/Books over 1 year ago

@dpashkevich Dankeschön! Updated the list.

Posted to Top Javascript Docs/Tutorials/Books over 1 year ago

@dpashkevich typos, typos everywhere. Fixed, thanks!

Posted to Batch import into Parse.com with cURL over 1 year ago

@bklimt Ah, thank you, I indeed saw that, but the problem is that you need to structure your json file in differente individual objects wrapped around a requests array. Chances are that all my objects will have the same REST method, so why putting it anyway? I wish it could just take a single array (no need to wrap) and import it inside my class without the dibbi-dibba-biddi.

Achievements
14,972 Karma
964,861 Total ProTip Views