The js array join prototype method can be used to join all elements of an array into a string. When doing so a string can be given as the first argument that is used as a separator between each element in the array. This is of course just one of many such methods that a javaScript developer should be aware of when it comes to what there is to work with in the array prototype object. It is a good idea to become familiar with these methods as it will save time that would otherwise be spent having to look for or write some kind of user space option for joining elements of an array together into a string.

One of the great things about the js array join method is that it has been part of javaScript for a real long time. So no need to bother with polyfills with this one, it will even work in browsers as old as IE 5.5. Even so there is still a join method in lodash anyway, but when it comes to that it would seem that is just there for the sake of consistency as the lodash join method is just a wrapper method for the native array join method. So the lodash join method is not one of the most compelling methods in lodash to warrant a need to continue using it when it comes to the so called safety net aspect of using lodash at least.

So this will just be a quick post on the js array join method as well as some quick related topics that might come up in the process of doing so such as the Object.toString method that is used to define what the string value of an object should be.

Read More

The js valueOf Object prototype method is a way to define what the number primitive value of an object should be. This is a way to define a function for a single object, or a Class of Objects that will be called when the object is used in an expression where the object will be teated as a number in the expression.

So because the valueOf method is part of the main Object prototype object there is a default valueOf method that will be used for all objects when there is a need for javaScript to convert an object to a number value. However it is often required, or at least a good idea, to define a custom valueOf method for an Object or Class of Objects.

When making my own valueOf method the method should return a number value rather than a string value, and I should take care to make sure that this is the case. A string value would be more appropriate when it comes to making a custom toString method for an Object or class of Objects when making a prototype object. With that said yes the toString method is the String equivalent of the valueOf method that should return a number value. The two methods can, and should be used as the standard way of returning string and number values of an object.

In this post the focus will be more so on the vlaueOf method, and how this can come into play and be useful when making certain modules and frameworks.

Read More

When starting any kind of canvas project that will involve a user interface I often want to get a canvas point that is relative to the canvas element rather than the window object. To do this I just need to attach a touch or mouse or touch event to the canvas element to get the position of a pointer event relative to the window for startes. Then I can also use the get bounding client rect method in the body of the event hander off a reference to the canvas element to get a set of values that include the offset values from the upper left corner to the browser window. Once I do that I can use the object returned by the get bounding client rect method to adjust the client x and y values of the event object in the mouse or touch event handler to get the desired canvas element relative position.

So a get canvas relative position method of sorts has become a usual suspect of sorts along with things like the distance formula, and bounding box collision detection when working out a new canvas project without using some kind of framework that might abstract away this functionality along with all kinds of other things. With that said it is a good idea to look into a framework or two to help keep you from wasting time with stuff like this, but if you really must do everything from the ground up then these things just need to get worked out as you built your own canvas framework, or vanilla javaScript canvas project.

There is a bit more to how to go about getting a canvas relative position when it comes to how to go about making methods that will work with just mouse events, just touch events, or both in most situations. When it comes to touch events there is the potential at least to do things with multi touch, however in my experience thus far I avoid getting into that and just make solutions that work well with a mouse or a touch device.

Also there is working out a more comprehensive input controller, or input handler of sorts that will work well with mouse, multi touch, and keyboard events. However that all might be a bit off topic, for now in this post I will be taking a look at a few examples of how to go about just getting a canvas relative mouse or touch position with client side javaScript and a canvas element.

Read More

The lodash pull method can be used to remove one or more values from an array using the same value zero method as a way to make comparisons. This method is a kind of convenience method in place of using lodash remove with the lodash eq methods for example which would have the same end result. There are a number of other lodash methods such as filter and reduce that can also be used to preform similar tasks without mutating an array in place and will allow a little more flexibility in how equality is detected when it comes to using an operator or method other then that of the Same Value Zero compliant lodash eq method.

It is not to hard to do the same thing that the lodash pull method does with vanilla javaScript, that is as long as you are aware of the native methods that are used to do the same kind of task. In any case I will be going over the lodash pull methods alone with lodash remove lodash eq and vanilla javaScript methods that do the same thing. In addition to this as with my many other posts on lodash I will be taking a quick look at some vanilla javaScript examples that will also preform similar actions to that of the lodash pull method.

Read More

This will be a general post on the JSON.parse method. The JSON.parse method is a native javaScript built in way to parse a JSON string into a workable object, at least on all modern platforms that support this method. The JSON parse method is a is then an inversion of the JSON stringify method is for turning a workable object into a JSON string.

If you are new to javaScript a JSON string is a data interchange format that is often the default solution for such a thing in a javaScript environment. However the standard is not used with javaScript alone, the format is often used in many other programing languages because of its close relationship to the web. There are of course other options when it comes to data interchange, or data serialization, but getting into that would be off topic.

The use of the method is fairly straight forward just call the method off of the JSON object and pass a JSON string to parse into an object, the returned object is then the workable object from that json string. The JSON.stringify method works in a similar way, only the first argument passed should be the object that I want to convert into a JSON string.

There are still a few additional things a javaScript developer should be ware of such as browser support, what happens when an invalid string is passed, and some additional related methods and features. So in this post I will be touching base on some additional things to work with when using JSON parse such as the try catch statement. So in this post I will be going over they very basics, but also any additional things to look out for when working with JSON.parse, and JSON in general.

Read More