DEV Community: tejesh p

new Operator in Javascript

tejesh p — Mon, 13 Jul 2020 03:56:13 +0000

The new keyword does the following things:

Step 1: Creates a blank, plain JavaScript object;
Step 2: Links (sets the constructor of) this object to another object;
Step 3: Passes the newly created object from Step 1 as the `this` context;
Step 4: Returns this if the function doesn't return an object.


var obj = {
normal: function() {
    this.privatefunction = function() {
        console.log('inside privatefunction', this)
    }
  }
}


var norm = obj.normal() // does nothing
norm.privatefunction() // throws TypeError:
// Cannot read property 'privatefunction' of undefined


var newNorm = new obj.normal()
newNorm.privatefunction() // inside privatefunction normal {privatefunction: ƒ}

The newNorm variable of normal function instantiated with new keyword is able to call privatefunction without an error because of Step 4 (Returns this because normal function returns undefined)

NodeJS require() vs fs.readFileSync to read JSON files

tejesh p — Thu, 14 May 2020 06:10:39 +0000

you can read json files either using require('filename.json') or fs.readFileSync('filename.json')

If the JSON file is static, require() is better because require() caches the file. On the other hand, if the JSON file changes, fs.readFileSync is better because reads the file every time and hence useful when the contents of the JSON file have to be re-fetched.

Also, do note that when using fs.readFileSync, additionally you have to do JSON.parse after reading the content.

// using require directly to read json
let data = require('./file.json')

// using fs module to read json
const fs = require('fs')
let data = JSON.parse(fs.readFileSync('file.json', 'utf-8'))

DataList element for auto-completion in Input Text and for ticks in Input Range

tejesh p — Fri, 08 May 2020 04:54:31 +0000

One of the underrated HTML element is <datalist>

When user types in <input type="text"/>, the easiest way to show auto-complete suggestions is by using <datalist> HTML element.

<input type="text" list="cakes">

<datalist id="cakes">
  <option> Red Velvet Cake</option>
  <option> Genoise Cake </option>
  <option> Chiffon Cake </option>
  <option> Yellow Butter Cake </option>
  <option> Devil’s Food Cake </option>
</datalist>

To the input field, add the list attribute with value as id of datalist element.

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/VwvXpwB

Interestingly, datalist element can be used with range input type to add ticks on slider.

<input type="range" min="0" max="1" step="0.01" list="slider-ticks">

<datalist id="slider-ticks">
  <option>0</option>
  <option>0.25</option>
  <option>0.5</option>
  <option>0.75</option>
  <option>1</option>
</datalist>

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/MWaVpeJ

In chrome browser, while moving the slider, you can observe the locking like effect when the slider is close to the ticks? Nice, isn't it?

Text wrapping in Vega JS Charts (SVG and Canvas)

tejesh p — Wed, 06 May 2020 12:08:00 +0000

Creating a Bar Chart using Vega JS library is shown here.
https://vega.github.io/vega/tutorials/bar-chart/

The sample data in the above tutorial has alphabets as Labels. In real-world, data labels can be long. For example, a bar chart showing sales of various products.

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "Meat and Seafood", "amount": 28},
        {"category": "Milk and milk products", "amount": 55},
        {"category": "Ice cream", "amount": 43},
        {"category": "Cereals and Breakfast Foods", "amount": 91},
        {"category": "Nuts and seeds", "amount": 81},
        {"category": "Seasoning and spices", "amount": 53},
        {"category": "Sweets, candy, chocolate", "amount": 19},
        {"category": "Thin crispy breads", "amount": 87}
      ]
    }
  ],

Replacing with above product data in the example tutorial would render the below bar chart.

A simple way to remove the overlapping of labels is to rotate the labels by an angle.

  "axes": [
    { "orient": "bottom", "scale": "xscale", "labelAngle": -45 },
    { "orient": "left", "scale": "yscale" }
  ],

To rotate x-axis labels, labelAngle property is used in the code snippet.

The labels no more overlap with neighboring labels but are overlapping with bars.

text type mark documentation mentions about a solution to wrap text.

*text property*

The text to display. This text may be truncated if the rendered length of the text exceeds the limit parameter. 
For versions ≥ 5.7, a string array specifies multiple lines of text.

When x-axis vega config is written such that labels text is an array, each item in the array is rendered in a single line.

  "axes": [
    { "orient": "bottom", "scale": "xscale",
      "encode": {
        "labels": {
          "update": {
            "text": {"signal": "split(datum.value, ' ')"}
          }
        }
      }

    },
    { "orient": "left", "scale": "yscale" }
  ],

By default, vega gets the labels on x-axis from the field mentioned in definition of xscale. To transform the labels, encode block is used.

split(datum.value, ' ') results in an array and each item in the array is on a single line.