Posts

I have been using Vue and Vuetify quite a bit and absolutely loving it. The combination alongside some of the backend Javascript frameworks (like AdonisJS, Strapi) make web app building fast and fun. In this post let’s take a look at how we can dynamically style elements by using data to drive styling. An Example with Data tables One of the common factors in all my data-driven applications is the data table. Looking back one of the primary factors for choosing Vuetify may be its powerful data table. I just need to supply a dataset and with the power of Vue, I have a super user-friendly table. ...

A few node packages have been causing me pain lately. Who knew that my Windows 10 addiction can get me into trouble with node? There are, of course, multiple ways to solve the node problem on Windows. Do not use the offending package :). If there is no support for Windows, your great program does not get written using the specific package. Hell, yeah. Use NVM to juggle between node versions and check whether the problem goes away. I did something similar when using strapi-js. I could not get it to work on Node 10 or 11. ...

A spread operator (...) provides a quick way to expand a Javascript object or array. Array or object is a collection of values. Accessing individual values within the array will require one to use a loop. const fruits = ["orange", "apple"]; for (let i = 0; i < fruits.length; i++) { console.log("fruit: ", fruits[i]); } /* output fruit: orange fruit: apple */ With the advent of the spread operator, the above operations become easier and more readable. Array can now be ‘destructured’ with a single statement. ...

Scope of a variable refers to the visibility of that variable. Since the visibility of a variable also determines whether it can be referenced in a valid way, scopes are said to define the ’life time of a variable’. Scopes in Javascript can be global to the program, or local to the specific block and function. Before going further, a couple of lines on the basics Javascript is an interpreted language, but runs code using a compiler + interpreter engine combo. So, this is the normal execution of the program - ...

Operator precedence includes unary, increment, basic arithmetic, logical and assignment operators - roughly in that order. The precedence can be remembered by BEUDMASLAS. brackets exponent unary & prefixed increment / decrement division multiplication addition subtraction logical assignment suffixed increment / decrement Not quite exciting as BODMAS or PEDMAS (math, anyone?) and as it turns out - you would not even have to remember it :). An outline with examples is below. ...

New operator is used to initialize objects and create a new instance of the object. You would have seen new used in the object context in an earlier post. The usage is something like the below - let worldExists = new Boolean(false); console.log(worldExists); // [Boolean: false] worldExists is an object that has a value of type ‘boolean’. Refer the post linked above to know the difference. Since everything (almost) is an object, new works very similarly in its use cases. ...

Rest parameter enables you to signify an ‘infinite’ parameter to a function. ... serves two purposes in Javascript - Spread operator - know what spread operators can do Rest parameter for a function Rest parameter just tells Javscript that there can be zero or infinite parameters for the function. The elements are available as an array within the function. const getSum = (...nums) => { console.log(nums); // [ 2, 3, 6 ] }; getSum(2, 3, 6); Or, you could do partial parameters.. ...

assign method of an object allows us to merge two objects quickly. const name = { name: "earth" }; const position = { position: 3 }; const planets = Object.assign(name, position); console.log("planets: ", planets); // { name: 'earth', position: 3 } You can also use Object.assign to quickly copy objects. const third = { name: "earth", position: 3 }; const livePlanet = Object.assign({}, third); console.log("livePlanet: ", livePlanet); third.position = 3.14; console.log("third: ", third); // { name: 'earth', position: 3.14 } console.log("livePlanet: ", livePlanet); // { name: 'earth', position: 3 } If you do not provide the empty object to assign, only a reference is copied and not the object itself.

Property descriptors define property behaviour. They are attributes of the property. Everything is an object in Javascript. Yes, I know - except those pesky things called primitives on which objects are built. We saw some (quick discussions on objects and properties)[/objects-and-props-in-javascript/] before - but I wanted to outline the descriptors further. You can see it yourself using a simple statement. let apple = { color: "red", size: "big" }; console.log(Object.getOwnPropertyDescriptor(apple, "color")); // { value: 'red', writable: true, enumerable: true, configurable: true } This is telling me what I could potentially do with color property other than seeing the value. ...

Currying is a technique of splitting functions with one or more arguments into a sequence of functions that are invokable with predefined arguments. In other words, you can split fn (a,b,c) into fn(a)(b)(c). That was not quite helpful - let us see an example. let getSquared = (x, y) => { return x * y; }; let getSquared = getProduct.curry(2); console.log(getDouble(3)); // 9 Before you rush to your editor to introduce this in your project know this - it may not work as-is in your JS installation. Either you need to install a package that supports currying or write one yourself. ...