Getters, Setters, and reactive objects in javaScript

In vuejs it is possible to create reactive objects, by default this is the case with the data object of a vuejs instance. When I make a change to a property of the data object that will trigger an update to the view that uses that data object. So then there is this binding between state and view where a change to the state object of a system will automatically update a view that renders that state.

However this is not so much a post on vuejs but core javaScript itself, with that said it might be a good idea to dive deep down into how reactive objects work when making a framework like that of vuejs. The key javaScript feature behind reactive objects in vuejs is the Object.definePropery method and the use of javaScript getters and setters.

In ECMA-262 R5 spec javaScript forward getters and setters where introduced as a way to have control over how properties are actually rendered to a result each time the property is accessed, or set by way of some kind of assignment. Each time a property is set with the assignment operator in the form of an equals sign, a setter function can be defined for the object. This setter function will be called and it is the return value of this setter that will end up being the final value assigned to the object. In the body of this setter function other things can be done, such as triggering the update of a view. On top of setters there are also getters, which are more or less the same thing as setters only they will fire each time a property is accessed.

One way of thinking about getters and setters is that they can be thought of as event handlers of sorts where each time a property of a object is accessed the getter function is called, and the value that is returned by the getter is what will be used for the value of that property.

So in this post I will be writing a bit about javaScript getters, but I suppose I will also have to touch base on setters, and other related topics like the Object.definePropery method.

Read More

vue compile render function from a template

In vuejs there is the vue compile global api method that can be used to compile a template string into an object that will contain a render function of that template in string form. The render function of the object that is returned by the Vue compile method can then be used as the render option of a vuejs instance.

If you are not familiar with render functions just yet it might be a good idea to read up on them, same goes for simple static vue templates also. However the general process that I follow thus far is that I always start out with a static template, and if for some reason I need to switch to a render function I do so. I can not say that I use the compile method that much thus far, however I do often use render functions that I write manually.

Read More

vue observable

When making a vuejs project there might end up being situations in which I might want to make an object observable, or reactive. When it comes to making a vue data object such an object is observable to begin with at least when it comes to the top level of the object. However this might not always end up being the case when it comes to nested objects in the data object, and it is also not the case when it comes to an object that is outside of a vuejs instance compleatly.

In some situations I might have to do something to make sure that nested objects in the data object become observable when I add them to the data object. When it comes to those kinds of situations I might want to go with the vue set method. However what if I want to make a plain old object outside of a vuejs instance completely observable? Well one way is the use the vue observable Global API method.

So this will be a quick post on using the vue observable global API method, and in the process of doing so I guess I will end up touching base the the subject of reactivity using vuejs also. There is also taking a moment to get into the vanilla javaScript feature that is used to make reactive objects possible when it comes to understanding getters and setters in plain old javaScript by itself.

Read More

The JS Array filter method

So in native javaScript there are a number of prototype methods that can be used off of any instance of an native javaScript array. One such method is the js array filter method than can be used to create a new array from an array with a whole bunch of elements filtered out. The logic that is used to filter out elements can be defined in the body of a function that is passed to the array filter method.

The js array filter method is just one of many methods that a javaScript developer should be aware of in the native array prototype, alone with many other such methods in other prototype objects. So the js array filter method is often used with or in replacement of other methods like array map, and array forEach.

Read More

Linux redirection of standard output to a file

One thing that comes up for me often when working something out with one or more Linux commands is to have a way to write the standard output of what happens to a file rather than the console window. I guess if I wanted to I could just copy and paste the output to a text editor, but there must be a more professional way to do it in the command line right?

When it comes to piping I guess I could pipe the output alone to a text editor such as nano, but there is another option called Linux redirection where I would not need to bother with an editor.

So in this post I will be writing a thing or two about redirection in Linux. and how it can be used with, or as a replacement to a Linux pipeline of two or more commands to and editor.

Read More