A collection of tech essays and notes.

notes

Set Define OFF

18 July 2022

The SET DEFINE command changes the prefix character used to mark substitution variables. You can use SET DEFINE to turn variable substitution off.

SET DEF[INE] {OFF | ON | prefix_char}

Define is a SQL*Plus client variable. It is NOT a database level setting.

When you start SQL*Plus, variable substitution will be on by default, and the default prefix character is an ampersand. If you are running a script that uses ampersands in text strings, you may want to change the prefix character to something else. If your script doesn’t use substitution variables, you may find it easiest to turn the feature off.

References

Oreilly

essay

How JS code is executed.

5 July 2022
JavaScript code execution involves a sequence of steps managed by the JavaScript engine, primarily through the use of the call stack and execution contexts...
notes

Motivation for fragments

3 April 2022

A common pattern is for a component to return a list of children. In the below example when Column component is rendering the HTML will be invalid as a div is coming in the middle of the table. Whenever we are using Fragments, we can avoid that.

Take this example React snippet:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

would need to return multiple elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of , then the resulting HTML will be invalid.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

results in a output of:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
notes

Keyed Fragments

2 April 2022

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}
notes

Fragments

1 April 2022

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Short Syntax

Here is the shorter syntax you can use for declaring fragments. It looks like empty tags:

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

Motivation for fragments in React.

notes

TYPE Attribute

2 March 2022

The %TYPE attribute lets use the datatype of a field, record, nested table, database column, or variable in your own declarations, rather than hardcoding the type names.

You can use the %TYPE attribute as a datatype specifier when declaring constants, variables, fields, and parameters. If the types that you reference change, your declarations are automatically updated.

This technique saves you from making code changes when, for example, the length of a VARCHAR2 column is increased. Note that column constraints, such as the NOT NULL and check constraint, or default values are not inherited by items declared using %TYPE.

notes

undefined and not defined in JS

22 February 2022

undefined

undefined is a property of the global object. That is, it is a variable in global scope. The initial value of undefined is the primitive value undefined.

A variable is ‘declared’, it has its own placeholder (memory is allcoated) but not having the value of itself ‘defined’ hence ‘undefined’. Until the variable has assigned a value, the ‘undefined’ fills that particular placeholder and ‘undefined’ is itself a datatype.

Not Defined

This case comes in error where js engine neither find that particular variable nor its placeholder and cannot find the variable in 1st phase of context (Memory allocation context)

JS is loosely typed language, this means that JavaScript will figure out what type of data you have and make the necessary adjustments so that you don’t have to redefine your different types of data.

References

MDN

notes

Intersection Observer API

20 February 2022

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Syntax to create Intersection Observer API

const observer = new IntersectionObserver(entries => {
console.log(entries)
})
References

MDN Web Docs
webdevsimplified

notes

Pure functions

20 February 2022

A pure function is a function which:

Given the same input, always returns the same output and the Produces have no side effects.

Preoperties

  • No random values
  • No current date/time
  • No global state
  • No mutation of parameters

Benefits

  • Self-documenting
  • Easily testable