DEV Community: Deepak Gupta

Smart Contracts & Their Limitations

Deepak Gupta — Wed, 16 Nov 2022 10:11:54 +0000

In recent years, the use of blockchain technology has exploded. An innovation that drove the large-scale adoption of blockchain is Smart contracts and the Ethereum virtual machine. Let’s dive into what smart contracts are in general.

A smart contract is code distributed and stored across a peer-to-peer network that can be called to execute logic and store information. The term smart contracts was coined because of their nature; they are public, immutable, self-enforceable, self-verifying, and any actors interacting with the contracts are agreeing to the outcomes.

Although the concept of smart contracts is quite old, it wasn’t until Ethereum’s virtual machine that smart contracts as they are known today sprung to fruition.

The introduction of smart contracts has revolutionized what is possible beyond a simple ledger on the blockchain: derivatives, automated market makers, NFTs, identity security, GameFi, and more.

Improved forks of the EVM (Ethereum Virtual Machine) have been developed over time, but the core functionality of smart contracts has relatively stayed the same. This is great for composability across various chains and networks, but the limitations of smart contracts are also apparent throughout the web 3 space.

Smart Contract Limitations

Deprecated Logic

It is possible to use existing logic on the chain via delegation and libraries, meaning existing logic does not have to be redeployed on the chain. This is an amazing feature of the EVM and reduces development costs. However, breaking version changes, changing standard implementations, and gas-efficiency improvements frequently render old libraries obsolete. Since different chains don’t generally share the same state, logic must be deployed on each chain that an actor wants to interact with. More than 60% of smart contracts never see any real use.

Gas and Size Restrictions

Ideally more and more complex logic can be added to the chain over time, building a diverse support network; yet progress has been disappointingly slow. Some logic is also not viable to store on chain due to the sheer file size of the solution.

This is a problem both for the actor that deploys or uploads the contract, as they must effectively pay for the nodes to store the code forever; and whenever the contract is interacted with, as more complex code requires more opcodes which also accrues gas costs. Gas prices and the cost of the chain’s underlying denomination make deploying logic to the blockchain expensive and reliance on low-level calls can be greatly impacted by chain congestion.

Automation

Another big limitation of smart contracts is their lack of autonomy: all events on the blockchain are triggered by an externally owned account (EOA). Contracts can interact with other contracts but typically need explicit integration logic in their code and can only do so when instructed to by an EOA.

Data

Lastly, Data is another limitation of smart contracts. Any information on the network (if public) is reliable and inexpensive, but all other data can only be introduced by an EOA which introduces a host of security issues.

Stay tuned for the next article where we will learn how various protocols are tackling these problems and working to provide solutions.

Javascript features you might not know in 2019-2020

Deepak Gupta — Wed, 25 Sep 2019 14:01:22 +0000

Private Class field👇

Until ES6, we were not able to declare private properties directly. Yes there were ways like underscore convention (_propertyName), closures, symbols, or WeakMaps.

But now private class fields use a hash # prefix. Let’s learn it by an example.

class Test {
  a = 1;          // .a is public
  #b = 2;         // .#b is private
  static #c = 3;  // .#c is private and static
  incB() {
    this.#b++;
  }
}
const testInstance = new Test();
// runs OK
testInstance.incB();
// error - private property cannot be modified outside class
testInstance.#b = 0;

Note: There’s no way to define the private function as of now, although a TC39 stage 3: draft proposal suggests using a hash # prefix on names. 🤞

String.matchAll()👇

If I have a string, with a global regular expression which has many capturing groups, I often want to iterate through all groups. Currently, my options are the following:

String.prototype.match() with /g— If we use .match() with a regular expression whose flag /g is set, you get all full matches for it in an Array.
String.prototype.split() — If we use a split string and regular expression to specify the separator and if it contains at least one capture group then .split() returns an Array in which the substrings are interleaved.

The issues with the above approach are that they only work if /g is set on regular expression and the property .lastIndex of a regular expression is changed each time a match happens. This makes using the same regular expression at multiple locations risky.

The matchAll() help resolve all above. Let’s check out the definition and usage

Given a string and a regular expression, .matchAll() returns all results matching a string against a regular expression, including capturing groups.

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
let array = [...str.matchAll(regexp)];
console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

Note: .matchAll() returns an iterator, not a true restartable iterable. That is, once the result is exhausted, you need to call the method again and create a new iterator.

Numeric Separators👇

If you have struggled to read a long sequence of number, this is where your search end.

Numeric Separators allow the human eye to parse quickly, especially when there are lots of repeating digits:

1000000000000 -> 1_000_000_000_000
1019436871.42 -> 1_019_436_871.42

Now it’s easier to tell that the first number is a trillion, and the second number is in the order of 1 billion.

It also works on other bases, for example:

const fileSystemPermission = 0b111_111_000;
const bytes = 0b1111_10101011_11110000_00001101;
const words = 0xFAB_F00D;

You can also use the separator in the fractions and exponents:

const massOfElectronInKg = 9.109_383_56e-31;
const trillionInShortScale = 1e1_2;

Note: Parsing the _ separated integer can be tricky as Number('123_456') gives NAN whereas parseInt('123_456') gives 123.

BigInt’s👇

BigInts are a new numeric primitive in JavaScript that can represent integers with precision larger than 2⁵³–1. With BigInts, you can safely store and operate on large integers even beyond the safe integer limit for Numbers.

BigInts correctly perform integer arithmetic without overflowing. Let’s understand by an example:-

const max = Number.MAX_SAFE_INTEGER;
// 9007199254740991
max+1;
// 9007199254740992
max+2;
// 9007199254740991

We can see that max + 1 produces the same result as max + 2 .

Any calculation on integers outside the safe integer range (i.e. from Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER) potentially loses precision. For this reason, we can only rely on numeric integer values within the safe range.

Therefore, BigInts came to existence, BigInts can be created by adding the n suffix to any integer literal. For example, 123 becomes 123n or the global BigInt(number) function can be used to convert a Number into a BigInts.

Let’s revisit the above example with BigInts

BigInt(Number.MAX_SAFE_INTEGER) + 2n;
// 9007199254740993n
typeof 123n
// "bigint2"

Note: Numeric separators are especially helpful with BigInts, for eg:

const massOfEarthInKg = 6_000_000_000_000_000_000_000_000n;

BigInts support the most common operators. Binary +, -, , and * all work as expected. / and % work, and round towards zero as needed.

(7 + 6 - 5) * 4 ** 3 / 2 % 3;
// → 1
(7n + 6n - 5n) * 4n ** 3n / 2n % 3n;
// → 1n

Note: One gotcha is that it’s not allowed to mix operations between BigInts and Numbers

Locale String with BigInt👇

The toLocaleString() method returns a string with a language-sensitive representation of the BigInt.

let bigint = 123456789123456789n;

// German uses period for thousands
console.log(bigint.toLocaleString('de-DE'));
// → 123.456.789.123.456.789

// Arabic in most Arabic speaking countries uses Eastern Arabic digits
console.log(bigint.toLocaleString('ar-EG'));
// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩

// India uses thousands/lakh/crore separators
console.log(bigint.toLocaleString('en-IN'));
// → 1,23,45,67,89,12,34,56,789

// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
// → 一二三,四五六,七八九,一二三,四五六,七八九

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(bigint.toLocaleString(['ban', 'id']));
// → 123.456.789.123.456.789

GlobalThis Keyword👇

JavaScript’s variable scopes are nested and form a tree whose root is the global scope and the value of this keyword is a reference to the object that “owns” the currently executing code or the function where its looked at.

To read more about this keyword and global scope read my below articles

Usually to figure out the global this we use a function like

const getGlobalThis = () => {

  // in webworker or service worker
  if (typeof self !== 'undefined') return self;

  // in browser 
  if (typeof window !== 'undefined') return window;

  // in Node.js
  if (typeof global !== 'undefined') return global;

  // Standalone javascript shell
  if (typeof this !== 'undefined') return this;

  throw new Error('Unable to locate global object');
};
const theGlobalThis = getGlobalThis();

The above function does not cover all cases when we need global this value.

In the case of use strict the value of this is undefined.

When we form a bundle in the javascript it usually wraps under some code that might differ the global this.

In Standalone javascript engine shell environment, the above code will not work.

To solve the above problem globalThis keyword is introduced which returns global this object in any environment at any time.

Note: The global object is now considered a mistake that JavaScript can’t get rid of, due to backward compatibility. It affects performance negatively and is generally confusing.

Promise.allSettled()👇

If you are wondering what’s promise is in javascript then check out this — JavaScript Promises: an Introduction.

A little gist, a promise is JavaScript’s way of promising you that work will be done (or might fail if the work could not be completed).

The new method returns a promise that resolves after all of the given promises have settled i.e either resolved or rejected, with an array of objects that each describe the outcome of each promise.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected"

This is different from the Promise.all as it rejects as soon as a promise within the iterable object rejected.

Below is the comparison of current supported promises method

Dynamic Import 👇

This one is crazy before we dive into it, let’s first see what static import is.

Static import only accepts a string literal as the module specifier and introduces bindings into the local scope via a pre-runtime “linking” process.

The static import syntax can only be used at the top-level of the file.

import * as module from './utils.mjs';

A static import enables important use cases such as static analysis, bundling tools, and tree-shaking.

But what about

import a module on-demand (or conditionally)
compute the module specifier at runtime
import a module from within a regular script (as opposed to a module)

This was not possible until dynamic imports — import(moduleSpecifier) returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.

<script type="module">
  (async () => {
    const moduleSpecifier = './utils.mjs';
    const module = await import(moduleSpecifier)
    module.default();
    // → logs 'Hi from the default export!'
    module.doStuff();
    // → logs 'Doing stuff…'
  })();
</script>

Note: Use static imports for initial paint dependencies, especially for above-the-fold content. In other cases, consider loading dependencies on-demand with dynamic import().

Stable Sorting — (Consistent and reliable result now)👇

By Stable in the algorithmic sense means: does it preserve the order or otherwise “equal” items?

Let’s understand by an example

const people = [
  {name: 'Gary', age: 20},
  {name: 'Ann', age: 20},
  {name: 'Bob', age: 17},
  {name: 'Sue', age: 21},
  {name: 'Sam', age: 17},
];

// Sort people by name
people.sort( (p1, p2) => {
  if (p1.name < p2.name) return -1;
  if (p1.name > p2.name) return 1;
  return 0;
});

console.log(people.map(p => p.name));
// ['Ann', 'Bob', 'Gary', 'Sam', 'Sue']
// Re-sort people by age

people.sort( (p1, p2) => {
  if (p1.age < p2.age) return -1;
  if (p1.age > p2.age) return 1;
  return 0;
});

console.log(people.map(p => p.name));
// We're expecting people sorted by age, then by name within age group:
// ['Bob', 'Sam', 'Ann', 'Gary', 'Sue']
// But we might get any of these instead, depending on the browser:
// ['Sam', 'Bob', 'Ann', 'Gary', 'Sue']
// ['Bob', 'Sam', 'Gary', 'Ann', 'Sue']
// ['Sam', 'Bob', 'Gary', 'Ann', 'Sue']

If you’re getting one of the last three results, then you’re probably using Google Chrome, or maybe one of an assortment of browsers that do not implement Array.sort() as a “stable” algorithm.

This is because different JS engines (across different browsers) taking different routes to implementing sort, Also, some javascript engine use stable sort for short array but for long array uses unstable sort.

This lead to inconsistent in sort stability behavior and a lot of confusion. This is why in the development environment everything related to sort seems to work but in the production environment, we start to see something else due to the varying size of array the sort was tested on.

Note: There are 3rd party libraries, I heartily recommend Lodash, which has stable sort

But this has been resolved now, we have a stable sort on most of the browsers. The syntax remains the same.

Since this article has a lot to digest and try-test features, we will continue with the more new feature in the next one.

Note: This article was originally published on overflowjs.com

Please consider entering your email here, if you’d like to be added to my email list and follow me on dev.to to read more article on javascript and on GitHub to see my crazy code.

Thank you !

Object detection using Tensorflow.js

Deepak Gupta — Tue, 27 Aug 2019 18:32:08 +0000

A new article is published on overflowjs.com around detecting an object in an image using tensorflow.js two models imagenet and coco-ssd.

The first part of the article talks about making the UI with react.js to upload the image and select the model from which the detection should happen.

The second part of the article makes an endpoint in node.js using tensorflow.js to detect the object in the image passed.

Read full article - https://overflowjs.com/posts/Image-Object-Detection-Using-TensorFlowjs.html

Github code link for UI- https://github.com/overflowjs-com/image_object_detction_react_ui

Github code link for Backend- https://github.com/overflowjs-com/image_object_detection_tensor_api

Happy coding!

Angular 8 - Getting Started In 2019

Deepak Gupta — Sun, 25 Aug 2019 15:48:53 +0000

Just found a nice read on Getting Started With Angular 8 - https://overflowjs.com/posts/AngularJS-Getting-Started-In-2019-Part-1.html

The article explains

What is Angular 8?
How it is different from Angular 3.0?
Help you Setup environment to run Angular?
Help you make a hello world app and see on localhost server.

Hope it helps someone starting with it.

Happy coding

Understanding Architecture of Angular 8

Deepak Gupta — Wed, 21 Aug 2019 18:41:54 +0000

Just found a nice read on Understanding Architecture of Angular 8 - https://overflowjs.com/posts/Angular-Understanding-Architecture-Part-2.html

The article explains

Modules
Components
Services and Dependency Injection
Component Communication - Parent to Child Component and Child to Parent Component

Hope it helps someone starting with it.

Happy coding

Javascript - Generator - Yield/Next VS Async-Await

Deepak Gupta — Tue, 20 Aug 2019 17:07:32 +0000

Generator (ES6)-

Functions that can return multiple values at a different time interval, as per the user demands and can manage its internal state are generator functions. A function becomes a GeneratorFunction if it uses the function* syntax.

They are different from the normal function in the sense that normal function run to completion in a single execution whereas generator function can be paused and resumed, so they do run to completion but the trigger remains in our hand. They allow better execution control for asynchronous functionality but that does not mean they cannot be used as synchronous functionality.

Note: When a generator function is executed it returns a new Generator object.

The pause and resume are done using yield&next. So let's look at what are they and what they do.

Yield/Next-

The yield keyword pauses generator function execution and the value of the expression following the yield keyword is returned to the generator's caller. It can be thought of as a generator-based version of the return keyword.

The yield keyword actually returns an IteratorResult object with two properties, value and done. (Don’t know what are iterators and iterables then read here).

Once paused on a yield expression, the generator's code execution remains paused until the generator's next() method is called. Each time the generator's next() method is called, the generator resumes execution and returns the iterator result.

pheww..enough of theory, let's see an example

function* UUIDGenerator() {
    let d, r;
    while(true) {
        yield 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            r = (new Date().getTime() + Math.random()*16)%16 | 0;
            d = Math.floor(d/16);
            return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
    }
};

Here, UUIDGenerator is a generator function which calculates the UUID using current time a random number and returns us a new UUID every time its executed.

To run the above function we need to create a generator object on which we can call next().

const UUID = UUIDGenerator();
// UUID is our generator object
UUID.next() 
// return {value: 'e35834ae-8694-4e16-8352-6d2368b3ccbf', done: false}

UUID.next() this will return you the new UUID on each UUID.next() undervalue key and done will always be false as we are in an infinite loop.

Note: We pause above the infinite loop, which is kind of cool and at any “stopping points” in a generator function, not only can they yield values to an external function, but they also can receive values from outside.

There is a lot of practical implementation of generators as one above and a lot of libraries that heavily use it, co, koa, and redux-saga are some examples.

Async/Await (ES7)

Traditionally, callbacks were passed and invoked when an asynchronous operation returned with data which are handled using Promise.

Async/Await is the special syntax to work with promises in a more comfortable fashion which is surprisingly easy to understand and use.
Async keyword is used to define an asynchronous function, which returns an AsyncFunction object.

Await keyword is used to pause async function execution until a Promise is fulfilled, that is resolved or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

Key points:

Await can only be used inside an async function.
Functions with the async keyword will always return a promise.
Multiple awaits will always run in sequential order under the same function.
If a promise resolves normally, then await promise returns the result. But in case of rejection, it throws the error, just if there were a throw statement at that line.
An async function cannot wait for multiple promises at the same time.
Performance issues can occur if using await after await as many times one statement doesn’t depend on the previous one.

So far so good, now let's see a simple example:-

async function asyncFunction() {

  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("i am resolved!"), 1000)
  });

  const result = await promise; 
  // wait till the promise resolves (*)

  console.log(result); // "i am resolved!"
}

asyncFunction();

The asyncFunction execution “pauses” at the line await promise and resumes when the promise settles, with the result becoming its result. So the code above shows “i am resolved!” in one second.

Generator and Async-await — Comparison

Generator functions/yield and Async functions/await can both be used to write asynchronous code that “waits”, which means code that looks as if it was synchronous, even though it really is asynchronous.
A generator function is executed yield by yield i.e one yield-expression at a time by its iterator (the next method) whereas Async-await, they are executed sequential await by await.
Async/await makes it easier to implement a particular use case of Generators.
The return value of Generator is always {value: X, done: Boolean} whereas for Async function it will always be a promise that will either resolve to the value X or throw an error.
An async function can be decomposed into Generator and promise implementation which is good to know stuff.

Please consider entering your email here, if you’d like to be added to my email list and follow me on dev.to to read more article on javascript and on GitHub to see my crazy code.

If anything is not clear or you want to point out something, please comment down below.

Thanks :)

OpenCV and Node.js - Image processing

Deepak Gupta — Wed, 14 Aug 2019 18:02:04 +0000

A new article is published on overflowjs.com around creating the image filters using Node.js and OpenCV.

The article discusses creating REST endpoint for below stuff:-

Smoothing Filters (Some filters and algo’s for it)
Thresholding Filters
Finding contours in the image

Read full article - https://overflowjs.com/posts/Image-Processing-OpenCV-and-Nodejs-Part-3.html on overflowjs.com

Github code link - https://github.com/overflowjs-com/image_app_opencv_api_part3

Happy coding!

Image Processing - Making Custom Filters - React.js - Part 2

Deepak Gupta — Tue, 06 Aug 2019 05:45:56 +0000

A new article is published on overflowjs.com around creating a UI for applying filters on images from scratch.

The article discusses the below points.

Smoothing Filters (Some filters and algo’s for it)
Thresholding Filters
Finding contours in the image

Finally, the use of a live camera to capture some images from the webcam and applying filters

Read full article - https://overflowjs.com/posts/Image-Processing-Making-Custom-Filters-Reactjs-Part-2.html article on overflowjs.com

Here is the live app link of UI (may take time to load for the first time ) - https://peaceful-reef-69295.herokuapp.com/

Github code link - https://github.com/overflowjscom/image_app_image_processing_opencvviawebcam_part_2

Happy coding!

Image Processing In React.js (Part 1)

Deepak Gupta — Mon, 22 Jul 2019 12:10:57 +0000

Ever wonder how to create a cool filter like Instagram and other app's.

Check out - https://overflowjs.com/posts/Image-Processing-In-Reactjs-Part-1.html article on overflowjs.com and you will have a good start to understand how to create image filters.

This is the live version of the app created - https://cryptic-sierra-27182.herokuapp.com/

Happy coding!

Google India — Phone Call Interview Question (Software Developer)

Deepak Gupta — Wed, 17 Jul 2019 17:39:03 +0000

Before I tell the question, for which you are here, this interview was for a software developer position and mostly working around javascript.

Note: I am still in the process of interviews so not sure if I will able to make it to a face to face interview 🤞, Wish me luck.

The interview lasts for 25 min on a phone call out of which 2–3 min were taken by the interview to explain the responsibilities of the role and later she asked around 12 questions which were a mix of my resume, basic data structure, algorithm, and analytics.

Note: I write articles around javascript concept, Nodejs, React, React-native, GraphQl, System Architecture — @ http://overflowjs.com
Feel free to check out and improve on your skills or comment to cover any topic of your choice.

So, let’s start 👇

Tell me about yourself?
What technologies you have worked on?
Why I switched so frequently in the past 3 years?
Have you done any system design from scratch?
Worst case scenario of quicksort and when will worst case occurs?
Worst case scenario of merge sort and when it will occur?
Which is faster quicksort or merge sort, when and why?
What are Hash tables and how is it different from a dictionary?
What is a balanced binary search tree? Why they are called balanced?
In javascript, the resolution is done by value or by reference and why?
How will you solve or approach to problem 2 raise to power 24?
Any question for me?

Note: Comment down below if you want to me write the answer to these question👇

At last, she told me to wait for a week as she will pass on the answer to the team and will revert back with the feedback.

Hope the above question help someone looking out for some idea around the Google phone call interview question.

Happy Coding ❤️

Understand Vue.js via making a CRUD App

Deepak Gupta — Sat, 13 Jul 2019 19:26:08 +0000

A new article just got published on overflowjs.com regarding making a CRUD app using Vue.js

Here is the link of the article - https://overflowjs.com/posts/Vuejs-Making-CRUD-App-Part-3

The working version of the app is live at - https://unruffled-goldstine-e8478d.netlify.com/login, feel free to check it out.

Here is Github repo - https://github.com/overflowjs-com/blog-frontend-auth if you want to check the code.

Thanks!

Do you know proxy in javascript?

Deepak Gupta — Tue, 09 Jul 2019 16:13:41 +0000

Proxy seems to be a less famous javascript feature and but it holds a lot of power if implemented.

We can use it for validation, value correction, tracing property accesses, warning about unknown properties, negative Array indices, data binding, accessing a restful web service (method calls), revocable references, monitoring async functions, type checking and much more.

Here is a link of good read - https://overflowjs.com/posts/Proxy-In-Javascript-2019

Have a nice read!