Custom events in client side javaScript

In client side javaScript there is the custom event constructor that can be used to create my own events that can be attached to html elements. I then in my own code define the conditions that will be used to trigger these kinds of custom events by calling the dispatch event method of the element that I attached a handler for the custom event.

There are a number of other ways of creating custom events when it comes to using a framework like phaser and threejs, often such frameworks have a system for creating user defined events for various kinds of things that happen in such frameworks, as well as additional user space code that will run on top of them. There are also ways of doing this in a nodejs environment when it comes to the events module which would be the node built in way of how to go about making user define events in a sever side javaScript environment. However there is also the idea of making a core JavaScript solution that will work in the browser as well as node also.

In this post I will be mainly focusing on the ways to go about making custom events in just plain old vanilla client side javaScript in a web browser. This will also include some examples where I am making my own system in core javaScript which can then be used in any javaScript environment. The basic process is similar to what needs to happen when simulating a built in event such as a click event on a div element for example. Make sure there is an event handler attached to the element in question for the event, create an event object for the event, and then call the dispatch event method of the element and pass the event object to that method.

Read More

Git reset command basic examples and more

The git reset command can be used to undo the last comment in a git folder, and much more than just that. When called with no additional arguments it can be used as a way to unstage what has been staged for committing using the git add command. However with additional arguments it can be used as a way to make what is called a soft reset, as well as also a hard reset. This is a command that I do find myself using now and then, so it is worth taking a moment to write a quick post on it.

Read More

Canvas layers the basics and more

In html 5 canvas there might come a time in which canvas layers should be used as a way to make it so I do not have to render everything all over again over and over again. Canvas layers often might refer to having more than one canvas element in a container element, with them all positioned on top of each other in a certain z index order. In that type of situation I can render only things that are changing, and leave any other static layers alone.

Canvas Layering can be helpful when there is a lot going on in the canvas project, and it is not necessary to repaint everything on the same frame tick. So then the use of laying can help create a situation in which things that only need to be updated on each frame tick are updated. In addition static things that only need to be rendered once, by way of an event, or at a lower rate can be rendered at there lower or higher rates.

There are many was to go about increasing the efficiency of a canvas project, but layering might be a good starting point. Take a moment to think about what is going on in your project, are there things that are being redrawn on each frame tick that do not need to be redrawn each time? If so then take a moment to look into layering as an option for helping to increase FPS by using canvas laying as a way to reduce workload.

Read More

lodash last method and other ways to get the last element in an array in javaScript

The lodash last method is an array method that can be used to get the last element in an array. On thing about the lodash last method is that this method will not mutate the source array that is given when compared to other similar methods such as the array pop method in the native javaScript array prototype that will not just give the last element in an array, but also remove that element from the source array to which the pop method is called off of. So even though this last method might prove to be very simple, it does something very simple in a specific way, and other methods might also again do a very specific kind of something in a slightly different kind of way.

So then the act of getting the last element in an array is a fairly simple task, so the lodash last method is not a great example of why javaScript developers should bother with lodash. Still in this post I will be taking a look at the _.last method in lodash as well as other options when it comes to getting the last element in an array with just plain old vanilla javaScript by itself. So this will of course not just be a post on the lodash last method alone, as that would not be much of a post as there really is only so much to write about with this one.

Read More

lodash repeat method

This post is on the lodash repeat method which is a string method that is just a quick way of creating a new string that is a product of repeating another given string a number of given times. This is something that comes up now and then when working with projects, and it is kind of nice to have a quick convenience method in place to save me the trouble of having to do this myself each time.

There are however a number of other lodash methods that can also be used to preform this kind of task and not just with strings. Also it is not to hard to just do the same thing vanilla javaScript style so lets look at more than one solution for repeating a string a number of times when it comes to just using native javaScript by itself also.

Read More