ankit blog

Learning Ruby and Rails

Thu, 12 Dec 2019 10:00:00 GMT

WHAT IS RUBY -

Ruby is a dynamic, open source, object oriented and reflective programming language. Ruby is considered similar to Perl and Smalltalk programming languages. It runs on all types of platforms like Windows, Mac OS and all versions of UNIX. It is fully object oriented programming language. Everything is an object in Ruby. Each and every code has their properties and actions. Here properties refer to variables and actions refer to methods. Ruby is considered to follow the principle of POLA (principle of least astonishment). It means that the language behaves in such a way to minimize the confusion for experienced users.

Ruby Installation

for install ruby and setup your system visit - https://rubyinstaller.org/downloads/ As of JAN 18,2020 I have installed (Ruby+Devkit 2.6.X (x64) for windows) stable version and most gems support available

Creating hello ruby program

use any text editor use below code and open terminal/command propmt to run file name is helloruby.rb , helloruby is any name (you can give name what you like) and .rb is ruby extension i.e which defines its ruby file same like we use .js or .java puts “Hello Ruby”; puts in ruby is same as console.log in javascript and system.out.println in java we can also use print in ruby like print “Hello Ruby” this also works,but doesn’t add new line. above is helloe ruby program , save this file , open command prompt/terminal in working directory and write below command to run

ruby helloruby.rb

Getting Started

Clone repo.

Github Link - https://github.com/AnKiTKaMbOj18

git clone https://github.com/AnKiTKaMbOj18/LearnRubyWithExamples.git

Remove .git folder and setup a new one

rm -rf .git && git init

Now push to whatever repo you want!

12 reasons why ReactJS has taken over the world -

Tue, 19 Nov 2019 10:00:00 GMT

ReactJS is an open-source library created and maintained by facebook. Right now it has more than 60.000 stars on Github and the surrounding community is getting bigger and bigger. Many well-established companies or fast developing startups have decided to use it in order to provide responsive and modern user interfaces by taking advantage of its powerful features.

So let’s see why ReactJS has become so popular during last 2 years:

ReactJS is the view layer in our applications and it does this job really well without trying to achieve anything more.
It is JavaScript after all. When writing code in ReactJS we don’t have to do that much react-ish things or extend custom objects constantly and dive for hours into documentation because we don’t remember this method or that. Sounds familiar right? This is definitely not the case with ReactJS. We can use latest JavaScript goodies by transpiling our code with the tools we prefer like webpack, browserify, rollup, babel etc
Learning curve is not that stiff. Most of developers can create a small prototype within some hours during their very first attempts with it. This is a huge benefit since developers don’t feel overwhelmed and companies can definitely avoid spending a fortune to educate their employees.
It is quite non-opinionated so we are free to choose the tools and technologies we prefer to use with it. We can still start with ES5 or jump straight away to ES6 syntax. We can use TypeScript or Flow to add typechecking into our codebase or we can simply avoid doing so. We can use whatever tool we like to implement async requests like fetch, axios, superagent etc. We can use experimental features with babel like property initializer syntax, object rest / spread transform and many more. Too much freedom right?
All these help ReactJS developers in becoming faster much more familiar and comfortable with JavaScript itself and all new features it offers. Nowadays, JavaScript evolves rapidly so this is extremely beneficial for every engineer individually. Getting better and better as a ReactJS developer means you are really getting stronger with JavaScript itself too. I am sure some of you have spent tons of hours in the past to learn a JS framework / library and now that it has faded you feel sad about all these hours you devoted mastering it right? This is definitely not the case here.
ReactJS plays really well with the most famous state management libraries out there such as Redux, Flux and MobX. Once again developers are free to choose the right tool for the right job and build a super-responsive user interface that can scale really well without writing volumes of spaghetti code.
ReactJS offers its own typechecking mechanism through PropTypes. By using them we can catch lots of bugs early enough. Many developers are using JavaScript extensions like Typescript or Flow to typecheck the whole application but if we don’t want to add some extra complexity in our codebase PropTypes can do the job quite well.
Components can easily get unit-tested so by definition we deliver well-structured, more safe and robust code. This is so important for a professional project!!! Unit testing is not a painful process for ReactJS since there are tools like Jest & Enzyme that make TDD a breeze. Enzyme gives us the opportunity to test our components as units with its shallow-rendering API or even in full-rendering state while Jest has introduced snapshot testing for ReactJS components.
Despite the fact that it is not built on top of Web Components technologies such as HTML Imports, HTML Templates, Shadow DOM etc it brings us as closer as possible to Web Components concept compared with any other library / framework out there. In ReactJS we can create small, abstracted and reusable pieces of code with specific markup, logic and styling. JSX syntax might look awkward at first but it helps us integrating html code into our components. For scoped styling we need to apply CSS Modules pattern and use a modern bundler such as webpack or browserify. It is quite common to create a library of custom components in a ReactJS project and reuse them at will globally. This makes development and debugging much faster.
Teams collaboration is hell better because of ReactJS. All this modular system that is enforced, helps developers to split tasks easier and avoid overlaps and side-effects. Even web designers with average JavaScript coding skills can create small components, apply some dedicated styling and then share them with the rest of the team for further development.
Server Side Rendering by combining a NodeJS server and ReactJS helps us build even more complex applications by pre-rendering the initial state of our ReactJS components. Because of SSR we can tackle common issues of Single Page Applications such as problematic indexing by crawlers, faster initial loading etc. We can still keep using solid state management tools like Redux as we discussed above and provide an awesome user experience.
Functional Programming has gained lots of traction during last years and ReactJS because of its Purely Functional Views is the ultimate representative in frontend world. In functional programming a “pure function” is one that does not change anything outside its scope and returns always the same output if the same input is given without any side-effects. The functional approach guides the developer to decompose a program into small functions, which are then combined to form an application. ReactJS stateless components act like pure functions while composition is highly enforced instead of inheritance to reuse code between components.

Is JavaScript synchronous or asynchronous? What the hell is a promise?

Mon, 30 Sep 2019 07:03:47 GMT

We, the people, like structure. We like categories and descriptions and putting everything we know into tidy little boxes. This is why I found JavaScript so confusing at first. Is it a scripting or a programming language? Is it used on the front or back end? The wonderful (read: awful) thing about JavaScript is that, most of the time, it’s a little bit of both. JavaScript has evolved so much over the years that it’s slippery to categorize. Today, I’m just going to dive into whether JavaScript is synchronous or asynchronous, and what workflow looks like under the hood.

JavaScript is Synchronous

Spoiler: at its base, JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time. That’s not the entire story, though!

What if you have to make an expensive database request? You don’t want to be twiddling your thumbs while ol’ PG and Postgres grab those 800 songs you need for your music library. Synchronous code makes a programmer’s life very difficult, so the JavaScript community developed some great workarounds. When you hear folks say that JavaScript is an asynchronous language, what they mean is that you can manipulate JavaScript to behave in an asynchronous way. It’s not baked in, but it’s possible! Here are a few ways to make that happen:

Asynchronous Callbacks

The earliest and most straightforward solution to being stuck in the synchronous world was asynchronous callbacks (think setTimeout()). Let’s use a database request as an example: asynchronous callbacks allow you to invoke a callback function which sends a database request (and any other nested callbacks) off to your app, where it waits for the response from the database, freeing up the rest of your code to continue running.

React - why we need to bind class components

Tue, 20 Aug 2019 15:11:55 GMT

While working on React, you must have come across controlled components and event handlers. We need to bind these methods to the component instance using .bind() in our custom component’s constructor.

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event) {
    // your event handling logic
  }
  render() {
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
ReactDOM.render(<Foo />, document.getElementById('app'));

In this article, we are going to find out why we need to do this. I would recommend reading about .bind() here if you do not already know what it does. Blame JavaScript, Not React Well, laying blame sounds a bit harsh. This is not something we need to do because of the way React works or because of JSX. This is because of the way the this binding works in JavaScript. Let’s see what happens if we do not bind the event handler method with its component instance:

class Foo extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(event) {
    console.log(this); // 'this' is undefined
  }
  render() {
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
ReactDOM.render(<Foo />, document.getElementById('app'));

If you run this code, click on the “Click Me” button and check your console. You will see undefined printed to the console as the value of this from inside the event handler method. The handleClick() method seems to have lost its context (component instance) or this value. How ‘this’ binding works in JavaScript As I mentioned, this happens because of the way this binding works in JavaScript. I won’t go into a lot of detail in this post, but here is a great resource to understand how the this binding works in JavaScript. But relevant to our discussion here, the value of this inside a function depends upon how that function is invoked. Default Binding

function display() {
  console.log(this); // 'this' will point to the global object
}
display();

This is a plain function call. The value of this inside the display() method in this case is the window — or the global — object in non-strict mode. In strict mode, the this value is undefined. Implicit binding

var obj = {
  name: 'ankit',
  display: function() {
    console.log(this.name); // 'this' points to obj
  },
};
obj.display(); // ankit

When we call a function in this manner — preceded by a context object — the this value inside display() is set to obj. But when we assign this function reference to some other variable and invoke the function using this new function reference, we get a different value of this inside display() .

var name = 'uh oh! global';
var outerDisplay = obj.display;
outerDisplay(); // uh oh! global

In the above example, when we call outerDisplay(), we don’t specify a context object. It is a plain function call without an owner object. In this case, the value of this inside display() falls back to default binding. It points to the global object or undefined if the function being invoked uses strict mode. This is especially applicable while passing such functions as callbacks to another custom function, a third-party library function, or a built-in JavaScript function like setTimeout . Consider the setTimeout dummy definition as shown below, and then invoke it. // A dummy implementation of setTimeout

function setTimeout(callback, delay) {
  //wait for 'delay' milliseconds
  callback();
}
setTimeout(obj.display, 1000);

We can figure out that when we call setTimeout, JavaScript internally assigns obj.display to its argument callback . callback = obj.display; This assignment operation, as we have seen before, causes the display()function to lose its context. When this callback is eventually invoked inside setTimeout, the this value inside display() falls back to default binding.

var name = 'uh oh! global';
setTimeout(obj.display, 1000);
// uh oh! global

Explicit Hard Binding To avoid this, we can explicitly hard bind the this value to a function by using the bind() method.

var name = 'uh oh! global';
obj.display = obj.display.bind(obj);
var outerDisplay = obj.display;
outerDisplay();
// ankit

Now, when we call outerDisplay(), the value of this points to obj inside display() . Even if we pass obj.display as a callback, the this value inside display()will correctly point to obj . Recreating the scenario using only JavaScript In the beginning of this article, we saw this in our React component called Foo . If we did not bind the event handler with this , its value inside the event handler was set as undefined. As I mentioned and explained, this is because of the way this binding works in JavaScript and not related to how React works. So let’s remove the React-specific code and construct a similar pure JavaScript example to simulate this behavior.

class Foo {
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(this.name);
  }
}
var foo = new Foo('ankit');
foo.display(); // ankit
// The assignment operation below simulates loss of context
// similar to passing the handler as a callback in the actual
// React Component
var display = foo.display;
display(); // TypeError: this is undefined

We are not simulating actual events and handlers, but instead we are using synonymous code. As we observed in the React Component example, the this value was undefined as the context was lost after passing the handler as a callback — synonymous with an assignment operation. This is what we observe here in this non-React JavaScript snippet as well. “Wait a minute! Shouldn’t the this value point to the global object, since we are running this in non-strict mode according to the rules of default binding?” you might ask. No. This is why: The bodies of class declarations and class expressions are executed in strict mode, that is the constructor, static and prototype methods. Getter and setter functions are executed in strict mode. You can read the full article here. So, to prevent the error, we need to bind the this value like this:

class Foo
{
	constructor(name)
	{
		this.name = name
		this.display = this.display.bind(this);
	}
	display()
	{
		console.log(this.name);
	}
}
var foo = new Foo('ankit');
foo.display(); // ankit
var display = foo.display;
display(); // ankit
We don’ t need to do this in the constructor, and we can do this somewhere
	else as well.Consider this:
		class Foo
		{
			constructor(name)
			{
				this.name = name;
			}
			display()
			{
				console.log(this.name);
			}
		}
	var foo = new Foo('ankit');
foo.display = foo.display.bind(foo);
foo.display(); // ankit
var display = foo.display;
display(); // ankit

But the constructor is the most optimal and efficient place to code our event handler bind statements, considering that this is where all the initialization takes place. Why don’t we need to bind ‘this’ for Arrow functions? We have two more ways we can define event handlers inside a React component.

Public Class Fields Syntax(Experimental)
class Foo extends React.Component{
  handleClick = () => {
    console.log(this);
  }

  render(){
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
ReactDOM.render(
  <Foo />,
  document.getElementById("app")
);
Arrow function in the callback
class Foo extends React.Component{
 handleClick(event){
    console.log(this);
  }

  render(){
    return (
      <button type="button" onClick={(e) => this.handleClick(e)}>
        Click Me
      </button>
    );
  }
}
ReactDOM.render(
  <Foo />,
  document.getElementById("app")
);

Both of these use the arrow functions introduced in ES6. When using these alternatives, our event handler is already automatically bound to the component instance, and we do not need to bind it in the constructor. The reason is that in the case of arrow functions, this is bound lexically. This means that it uses the context of the enclosing function — or global — scope as its this value. In the case of the public class fields syntax example, the arrow function is enclosed inside the Foo class — or constructor function — so the context is the component instance, which is what we want. In the case of the arrow function as callback example, the arrow function is enclosed inside the render() method, which is invoked by React in the context of the component instance. This is why the arrow function will also capture this same context, and the this value inside it will properly point to the component instance. For more details regarding lexical this binding, check out this excellent resource. To make a long story short In Class Components in React, when we pass the event handler function reference as a callback like this

<button type="button" onClick={this.handleClick}>
  Click Me
</button>

the event handler method loses its implicitly bound context. When the event occurs and the handler is invoked, the this value falls back to default binding and is set to undefined , as class declarations and prototype methods run in strict mode. When we bind the this of the event handler to the component instance in the constructor, we can pass it as a callback without worrying about it losing its context. Arrow functions are exempt from this behavior because they use lexical thisbinding which automatically binds them to the scope they are defined in.

For Javascript Asynchronous and Synchronous difference visit: https://medium.com/@ankitkamboj18/is-javascript-synchronous-or-asynchronous-what-the-hell-is-a-promise-302ee008dfcd For more Follow: https://medium.com/@ankitkamboj18 157

ES6 (Javascript) : Iterators

Sun, 02 Jun 2019 23:46:37 GMT

Iterators:

In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination. More specifically an iterator is any object which implements the by having a next() method which returns an object with two properties: value, the next value in the sequence; and done, which is true if the last value in the sequence has already been consumed. If value is present alongside done, it is the iterator’s return value. Once created, an iterator object can be iterated explicitly by repeatedly calling next(). Iterating over an iterator is said to consume the iterator, because it is generally only possible to do once. After a terminating value has been yielded additional calls to next() should simply continue to return {done: true}. The most common iterator in Javascript is the Array iterator, which simply returns each value in the associated array in sequence. While it is easy to imagine that all iterators could be expressed as arrays, this is not true.

Arrays must be allocated in their entirety, but iterators are consumed only as neccessary and thus can express sequences of unlimited size, such as the range of integers between 0 and Infinity. Here is an example which can do just that. It allows creation of a simple range iterator which defines a sequence of integers from start (inclusive) to end (exclusive) spaced step apart. Its final return value is the size of the sequence it created.

Example:

function makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let nextIndex = start;
    let loopCount = 0;
    let returned = false;
    const rangeIterator = {
        next: function() {
            var result;
            if (nextIndex <= end) {
                result = {
                    value: nextIndex,
                    done: false
                }
                nextIndex += step;
                loopCount++;
            } else /* final value already returned */ {
                result = {
                    value: loopCount,
                    done: true
                }
            }
            return result;
        }
    };
    return rangeIterator;
}
let it = makeRangeIterator(1, 10, 2);
let result = it.next();
while (!result.done) {
    console.log(result.value); // 1 3 5 7 9
    result = it.next();
}
console.log(“Iterated over sequence of size: “, result.value);

React Hooks

Sun, 10 Mar 2019 10:00:00 GMT

React Hooks-When would I use a Hook? What is a Hook? Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!

Line 1: useStatelets us keep the local state in a functional component.

Line 4: Inside the Examplecomponent, we declare a new state variable by calling the useStateHook. It returns a pair of values, to which we give names. We’re calling our variable count because it holds the number of button clicks. We initialize it to zero by passing 0 as the only useState argument. The second returned item is itself a function. It lets us update the countso we’ll name it setCount.

Line 9: When the user clicks, we call setCount with a new value. React will then re-render the Examplecomponent, passing the new count value to it.

import { useState } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
return (

<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button></div>
);
}

You can also find this at below. Medium - https://medium.com/@ankitkamboj18/reactjs-hooks-v16-6-3-96ae1b41290

Getting Started

Clone Github repos.

Github Link - https://github.com/ankitkamboj18

Remove .git folder and setup a new one

rm -rf .git && git init

Now push to whatever repo you want!

ankit blog

Learning Ruby and Rails

WHAT IS RUBY -

Ruby Installation

Creating hello ruby program

Getting Started

12 reasons why ReactJS has taken over the world -

Top 5 JavaScript Interview Questions I Wish I Knew

Q1: Explain equality in JavaScript

Q2: What does “use strict” do?

Q3: Explain Null and Undefined in JavaScript

Q4: Explain Values and Types in JavaScript

Q5: What is let keyword in JavaScript?

Is JavaScript synchronous or asynchronous? What the hell is a promise?

JavaScript is Synchronous

Asynchronous Callbacks

React - why we need to bind class components

ES6 (Javascript) : Iterators

Iterators:

React Hooks

Getting Started