muthunce.blogspot.com

Swap object keys and values

noreply@blogger.com (Unknown) — Tue, 23 Aug 2022 12:37:00 +0530

// Write a function that takes an object as argument

// Somehow, the properties and keys of the object got mixed up

// Swap the Javascript object's key with its values and return the resulting object

function

myFunction ( obj )

{

return

}

myFunction({z:'a',y:'b',x:'c',w:'d'})

Expected

{a:'z',b:'y',c:'x',d:'w'}

myFunction({2:'a',4:'b',6:'c',8:'d'})

Expected

{a:'2',b:'4',c:'6',d:'8'}

myFunction({a:1,z:24})

Expected

{1:'a',24:'z'}

Multiply all object values by x

noreply@blogger.com (Unknown) — Tue, 23 Aug 2022 12:34:00 +0530

// Write a function that takes an object (a) and a number (b) as arguments

// Multiply all values of 'a' by 'b'

// Return the resulting object

function myFunction( a, b )

{

return

}

myFunction({a:1,b:2,c:3},3)

Expected

{a:3,b:6,c:9}

myFunction({j:9,i:2,x:3,z:4},10)

Expected

{j:90,i:20,x:30,z:40}

myFunction({w:15,x:22,y:13},6)

Expected

{w:90,x:132,y:78}

Sum object values

noreply@blogger.com (Unknown) — Tue, 23 Aug 2022 12:31:00 +0530

// Write a function that takes an object (a) as argument

// Return the sum of all object values

function myFunction( a ) {

return

}

myFunction({a:1,b:2,c:3})

Expected

myFunction({j:9,i:2,x:3,z:4})

Expected

myFunction({w:15,x:22,y:13})

Expected

Dynamic Dependent Dropdown in React JS

noreply@blogger.com (Unknown) — Tue, 1 Feb 2022 07:51:00 +0530

cascading dropdown in react js; Through this tutorial, you will learn how to create a cascading dropdown or dependent country state city dropdown list in React JS using Web/REST APIS.

A cascading dropdown is a group of dropdowns where the value of one dropdown depends upon another dropdown value. Child dropdown values are populated based on the item selected in the parent dropdown.

In this populate dropdown based on another dropdown+react will show you how to create a dynamic cascading dependent country, state, city dropdown list using react js with the web apis.

Country State City Cascading Dependent Dropdown in React JS

Follow the below steps and implement dynamic cascading country state city dependent dropdown in react js using REST APIs:

Step 1 – Create React App
Step 2 – Install Axios and Bootstrap 4
Step 3 – Create Cascading Dropdown Component
Step 4 – Import Component in App.js
Step 5 – Add Css

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios and Bootstrap 4

Then execute the following command to install axios and boostrap 4 library into your react app:

npm install bootstrap --save

npm install axios --save

And import bootstrap.min.css file in src/App.js.

Step 3 – Create Cascading Dropdown Component

visit the src directory of your react js app and create a cascading dependent dropdown component; which is named Cascading.js. And add the following code into it:

import React, {Component } from 'react'
import axios from 'axios';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import './App.css';
export class CascadingDropdown extends Component {
constructor(props) {
super(props)
this.state = {
StateId: '',
CountryId: '',
CountryData: [],
StateData: [],
CityData: []
}
}
componentDidMount() {
axios.get('http://localhost:3000/countries-list').then(response => {
console.log(response.data);
this.setState({
CountryData: response.data
});
});
}
ChangeteState = (e) => {
this.setState({
CountryId: e.target.value
});
axios.get('http://localhost:3000/get-states-by-country?CountryId=' + e.target.value).then(response => {
console.log(response.data);
this.setState({
StateData: response.data,
});
});
}
ChangeCity = (e) => {
this.setState({
StateId: e.target.value
});
axios.get('http://localhost:65173/get-cities-by-state?StateId=' + e.target.value).then(response => {
console.log(response.data);
this.setState({
CityData: response.data
});
});
}
render() {  
return (  
<div>  
<div class="row" className="hdr">  
<div class="col-sm-12 btn btn-info">  
Cascading Dropdown in ReactJS  
</div>  
</div>  
<div className="form-group dropdn">  
<select className="form-control" name="country" value={this.state.CountryId} onChange={this.ChangeteState}  >  
<option>Select Country</option>  
{this.state.CountryData.map((e, key) => {  
return <option key={key} value={e.CountryId}>{e.CountryName}</option>;  
})}  
</select>  
<select className="form-control slct" name="state" value={this.state.StateId} onChange={this.ChangeCity} >  
<label for="company">State Name</label>    
{this.state.StateData.map((e, key) => {  
return <option key={key} value={e.StateId}>{e.StateName}</option>;  
})}  
</select>  
<select className="form-control slct" name="city" value={this.state.CityData}  >  
{this.state.CityData.map((e, key) => {  
return <option key={key} value={e.CityId}>{e.cityName}</option>;  
})}  
</select>  
</div>  
</div>  
)  
}  
}  
export default CascadingDropdown  

If you want to learn how to create country state city rest apis; So, You can checkout out how to create country state city rest api in node js express with MySQL database.

[Window Title] Update Available [Main Instruction] A new version of Sublime Text is available, download now? [Download] [Cancel]

Step 4 – Import Component in App.js

import above created component like Cascading.js file in src/App.js file:

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import CascadingDropdown from './Cascading' 
function App() {  
return (  
<div className="App">  
<CascadingDropdown/>  
</div>  
);  
}  
export default App; 

Step 5 – Add CSS

Now, open the app.css file and add the following CSS classes:

.dropdn  
{  
margin-left: 250px;  
margin-top: 20px;  
margin-right: 250px;  
padding: 30px;  
}  
.slct  
{  
margin-top: 20px;  
} 

Conclusion

Cascading dropdown in react js; Through this tutorial, you have learned how to create a cascading dropdown or dependent country state city dropdown list in React JS using Web API.

3 Ways to Copy Objects in JavaScript

noreply@blogger.com (Unknown) — Fri, 28 Jan 2022 13:42:00 +0530

Summary: in this tutorial, you will learn how to copy objects in JavaScript, including shallow copy and deep copy. To copy an object in JavaScript, you have three options:

Use the spread (...) syntax
Use the Object.assign() method
Use the JSON.stringify() and JSON.parse() methods

The following illustrates how to copy an object using three methods above:

const person = {
    firstName: 'John',
    lastName: 'Doe'
};


// using spread ...
let p1 = {
    ...person
};

// using  Object.assign() method
let p2 = Object.assign({}, person);

// using JSON
let p3 = JSON.parse(JSON.stringify(person));
Code language: JavaScript (javascript)

Both spread (...) and Object.assign() perform a shallow copy while the JSON methods carry a deep copy.

Shallow copy vs. deep copy

In JavaScript, you use variables to store values that can be primitive or references. When you make a copy of a value stored in a variable, you create a new variable with the same value. For a primitive value, you just simply use a simple assignment:

let counter = 1;
let copiedCounter = counter;
Code language: JavaScript (javascript)

And when you change the value of the copied variable, the value of the original remains the same.

copiedCounter = 2;
console.log(counter); 
Code language: JavaScript (javascript)

Output:

However, if you use the assignment operator for a reference value, it will not copy the value. Instead, both variables will reference the same object in the memory:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
let copiedPerson = person;
Code language: JavaScript (javascript)

And when access the object via the new variable (copiedPerson) and change the value of its property (name), you change the value of the property of the object.

copiedPerson.firstName = 'Jane';
console.log(person); 
Code language: JavaScript (javascript)

Output:

{
    firstName: 'Jane',
    lastName: 'Doe'
}
Code language: CSS (css)

A deep copying means that value of the new variable is disconnected from the original variable while a shallow copy means that some values are still connected to the original variable.

Shallow copy example

Consider the following example:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = Object.assign({}, person);

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway'; // connected
copiedPerson.address.city = 'Mountain View'; // connected

console.log(copiedPerson);
Code language: JavaScript (javascript)

In this example:

First, create a new object named person.
Second, clone the person object using the Object.assign() method.
Third, change the first name and address information of the copiedPerson object.

Here is the output:

{
    firstName: 'Jane',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

However, when you show the values of the person object, you will find that the address information changed but the first name:

console.log(person);
Code language: JavaScript (javascript)

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'Amphitheatre Parkway',
        city: 'Mountain View',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

The reason is that the address is reference value while the first name is a primitive value. Both person and copiedPerson references different objects but these objects reference the same address objects.

Deep copy example

The following snippet replaces the Object.assign() method by the JSON methods to carry a deep copy the person object:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
};


let copiedPerson = JSON.parse(JSON.stringify(person));

copiedPerson.firstName = 'Jane'; // disconnected

copiedPerson.address.street = 'Amphitheatre Parkway';
copiedPerson.address.city = 'Mountain View';

console.log(person);
Code language: JavaScript (javascript)

Output

{
    firstName: 'John',
    lastName: 'Doe',
    address: {
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}
Code language: CSS (css)

In this example, all values in the copiedPerson object are disconnected from the original person object. In this tutorial, you have learned how to copy objects in JavaScript using either shallow or deep copy.

Why use Redux? A tutorial with examples

noreply@blogger.com (Unknown) — Thu, 27 Jan 2022 17:46:00 +0530

https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/#:~:text=The%20way%20Redux%20works%20is,actions%2C%20store%2C%20and%20reducers.

Editor’s note: This React Redux tutorial was last updated on 28 January 2021 to include a section on Redux middleware and remove outdated information.

With the number of tools and libraries out there for web development (a JavaScript library was probably released before you finished reading this), it might not be the wisest thing to jump on every new one without really understanding its benefits or why you should use it.

Redux isn’t new, but it remains quite popular. In this tutorial, we’ll show you what Redux is, why you should use it, and how it works.

First, we’ll review the basics of Redux and how it functions. Then we will see how using Redux can help you in your app by using a simple but practical component.

We’ll cover the following in detail:

We don’t just write about Redux, we talk about it too. Listen now:

Or subscribe for later

What is Redux?

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.

While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It’s lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.

With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.

If you’re just getting started with Redux, the video below is a great resource for beginners.

When to use Redux

Lately one of the biggest debates in the frontend world has been about Redux. Not long after its release, Redux became one of the hottest topics of discussion. Many favored it while others pointed out issues.

Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming; but that depends upon the architecture decisions.

One simple answer to this question is you will realize for yourself when you need Redux. If you’re still confused as to whether you need it, you don’t. This usually happens when your app grows to the scale where managing app state becomes a hassle; and you start looking out for making it easy and simple.

What is state management in Redux?

State management is essentially a way to facilitate communication and sharing of data across components. It creates a tangible data structure to represent the state of your app that you can read from and write to. That way, you can see otherwise invisible states while you’re working with them.

Most libraries, such as React, Angular, etc. are built with a way for components to internally manage their state without any need for an external library or tool. It does well for applications with few components, but as the application grows bigger, managing states shared across components becomes a chore.

In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult.

For instance, in React, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components.

Here’s a simple example of a login component in React. The input of the login component affects what is displayed by its sibling component, the status component:

class App extends React.Component {
  constructor(props) {
    super(props);
    // First the Parent creates a state for what will be passed
    this.state = { userStatus: "NOT LOGGED IN"}
    this.setStatus = this.setStatus.bind(this);
  }
  // A method is provided for the child component to update the state of the
  // userStatus
  setStatus(username, password) {
    const newUsers = users;
    newUsers.map(user => {
      if (user.username == username && user.password === password) {
        this.setState({
          userStatus: "LOGGED IN"
        })
      }
    });
  }
 
  render() {
    return (
      <div>
        // the state is passed to the sibling as a props as is updated whenever
        // the child component changes the input
        <Status status={this.state.userStatus} />
        // this method is passed to the child component as a props which it
        // uses to change the state of the userStatus
        <Login handleSubmit={this.setStatus} />
      </div>
    );
  }
});

Remember, this data is not needed by the parent component, but because its children need to share data, it has to provide a state.

Now imagine what happens when a state has to be shared between components that are far apart in the component tree. The state has to be passed from one component to another until it gets to where it is needed.

Basically, the state will have to be lifted up to the nearest parent component and to the next until it gets to an ancestor that is common to both components that need the state, and then it is passed down. This makes the state difficult to maintain and less predictable. It also means passing data to components that do not need it.

It’s clear that state management gets messy as the app gets complex. This is why you need a state management tool like Redux that makes it easier to maintain these states. Let’s get a good overview of Redux concepts before considering its benefits.

How Redux works

The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another.

There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it’s to be used. We’ll be implementing a similar example to the login component above but this time in Redux.

Actions in Redux

Simply put, actions are events. They are the only way you can send data from your application to your Redux store. The data can be from user interactions, API calls, or even form submissions.

Actions are sent using the store.dispatch() method. Actions are plain JavaScript objects, and they must have a type property to indicate the type of action to be carried out. They must also have a payload that contains the information that should be worked on by the action. Actions are created via an action creator.

Here’s an example of an action that can be carried out during login in an app:

{ 
  type: "LOGIN",
  payload: {
    username: "foo",
    password: "bar"
  }
}

Here is an example of its action creator:

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "foo",
      password: "bar"
    }
  }
}

As explained earlier, the action must contain the type property and then the other payload to be stored.

Reducers in Redux

Reducers are pure functions that take the current state of an application, perform an action, and return a new state. These states are stored as objects, and they specify how the state of an application changes in response to an action sent to the store.

It is based on the reduce function in JavaScript, where a single value is calculated from multiple values after a callback function has been carried out.

Here is an example of how reducers work in Redux:

const LoginComponent = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.username) {
                  return user;
              }

              if (user.password == action.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
default:
          return state;
      } 
};

Reducers take the previous state of the app and return a new state based on the action passed to it.

As pure functions, they do not change the data in the object passed to them or perform any side effect in the application. Given the same object, they should always produce the same result.

Store in Redux

The store holds the application state. It is highly recommended to keep only one store in any Redux application. You can access the state stored, update the state, and register or unregister listeners via helper methods.

Let’s create a store for our login app:

const store = createStore(LoginComponent);

Actions performed on the state always return a new state. Thus, the state is very easy and predictable.

Now that we know a little more about Redux, let’s go back to our login component example that was implemented earlier and see how Redux can improve the component.

class App extends React.Component {
    render() {
        return (
            <div>
                <Status user={this.props.user.name}/>
                <Login login={this.props.setLoginStatus}/>
            </div>
        )
    }
}

With Redux, there’s one general state in the store, and each component has access to the state. This eliminates the need to continuously pass state from one component to another. You can also select the slice from the store for a particular component; this makes your app more optimized.

Redux middleware

Redux allows developers to intercept all actions dispatched from components before they are passed to the reducer function. This interception is done via middlewares.

Building on the example Login component discussed in the last section, we might want to sanitize the user’s input before it reaches our store for further processing. This can be achieved via Redux middleware.

Technically, middlewares are functions that call the next method received in an argument after processing the current action. These are called after every dispatch.

Here’s what a simple middleware looks like:

function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}

This might look a little overwhelming, but in most cases, you might not need to create your own middleware since the huge Redux community has already made a number of them available. If you feel middleware is required, you will enjoy it because it gives you a lot of power to do tons of great work with the best abstraction.

Why use Redux?

When using Redux with React, states will no longer need to be lifted up. This makes it easier for you to trace which action causes any change.

As you can see in the example above, the component does not need to provide any state or method for its children components to share data among themselves. Everything is handled by Redux. This greatly simplifies the app and makes it easier to maintain.

This is the primary reason why you should use Redux, but it’s not the only benefit. Take a look at the list below for a summary of what you stand to gain by using Redux for state management.

Redux makes the state predictable

In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable and is never changed. This makes it possible to implement arduous tasks like infinite undo and redo. It is also possible to implement time travel — that is, the ability to move back and forth among the previous states and view the results in real time.

Redux is maintainable

Redux is strict about how code should be organized, which makes it easier for someone with knowledge of Redux to understand the structure of any Redux application. This generally makes it easier to maintain. This also helps you segregate your business logic from your component tree. For large scale apps, it’s critical to keep your app more predictable and maintainable.

Debugging is easy in Redux

Redux makes it easy to debug an application. By logging actions and state, it is easy to understand coding errors, network errors, and other forms of bugs that might come up during production.

Besides logging, it has great DevTools that allow you to time-travel actions, persist actions on page refresh, etc. For medium- and large-scale apps, debugging takes more time then actually developing features. Redux DevTools makes it easy to taker advantage of all Redux has to offer.

Performance Benefits

You might assume that keeping the app’s state global would result in some performance degradation. To a large extent, that’s not the case.

React Redux implements many performance optimizations internally so that your own connected component only rerenders when it actually needs to.

Ease of testing

It is easy to test Redux apps since functions used to change the state of pure functions.

State persistence

You can persist some of the app’s state to local storage and restore it after a refresh. This can be really nifty.

Server-side rendering

Redux can also be used for server-side rendering. With it, you can handle the initial render of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered in HTML and sent to the clients.

Implementing Redux in your app? Track Redux state and actions with LogRocket

Debugging React applications can be difficult, especially when there is complex state. If you’re interested in monitoring and tracking Redux state for all of your users in production, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.

Conclusion

We have discussed the major features of Redux and why Redux is beneficial to your app. While Redux has its benefits, that does not mean you should go about adding Redux in all of your apps. Your application might still work well without Redux.

One major benefit of Redux is to add direction to decouple “what happened” from “how things change.” However, you should only implement Redux if you determine your project needs a state management tool.

why recursion occurs in reverse?

noreply@blogger.com (Unknown) — Thu, 20 Jan 2022 13:05:00 +0530

 function func(n) {
    	if(n > 0) func(n-1) 
    	console.log(n)
    }
    
    func(10) // 1,2,3,4,5,6,7,8,9,10

    // while I was expecting 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

Recursion does happen backwards because it has to meet your base case in order to exit.
 Every time it does not meet your base case the current running function is put in call stack (in JS).
 In you case func(n-1 gets called and previous func is put in call stack. Once your base case is met, 
your funcs that are in call stack start to continue running (from leftover line -> console.log). 
Since the nature of stacks is Last In First Out (LIFO), you functions run in reverse.

function func(n) {

   console.log(n) //output 3 2 1

   if(n > 0)

      func(n-1) 

   console.log(n) //output 1 2 3

}

func(3) //Taking small digit for quick explanation

NFT பற்றி நீங்கள் தெரிந்துகொள்ள வேண்டிய தகவல்கள். NFT... டிஜிட்டல் உலகில் மாற்ற முடியாத டோக்கன்! புதிய தொழில்நுட்ப ஆச்சர்யம்! பல கோடிகள் புரளும் மார்க்கெட்!

noreply@blogger.com (Unknown) — Thu, 23 Dec 2021 12:01:00 +0530

கடந்த சில மாதங்களுக்கு முன்பு பீபிள் (Beeple) நிறுவனத்தின் 5000 புகைப்படங்கள் அடங்கிய டிஜிட்டல் ஆர்ட் (digital art) ஒன்று 500 கோடிக்கு விற்பனையானது. அதே போல, டிவிட்டர் நிறுவனத்தின் நிறுவனர் ஜாக் டார்ஸியின் முதல் ட்வீட் 2.9 மில்லியன் டாலருக்கு விற்பனையானது.

இரண்டு மாதங்களுக்கு முன்பு அமிதாப் பச்சன் தன்னுடைய முன்கதைகள், தன்னுடைய ஆட்டோகிராப்-வுடன் கூடிய படத்தின் போஸ்டர்கள், மேலும் பல பரிசுகளை என்.எஃப்.டி (N.F.T)-யாக விற்பனை செய்யப்போவதாக அறிவித்திருந்த நிலையில், கடந்த மாதம் தனது பிறந்தநாளன்று கமல்ஹாசனும் என்.எஃப்.டி-யில் களம் இறங்கப்போவதாய் அறிவித்திருந்தார். தனது 62 வருட திரை வாழ்க்கையில் நிகழ்ந்த எண்ணற்ற விழாக்களில் தனக்கு கிடைத்த எண்ணற்ற பொக்கிஷங்களை ஒரு தனியார் நிறுவனத்துடன் இணைந்து என்.எஃப்.டி-யாக விற்பனை செய்யப்போவதாக அறிவித்திருந்தார்.

கமல்ஹாசனைத் தொடர்ந்து சன்னி லியோன், சல்மான் கான் என்று இந்திய சினிமா நட்சத்திரங்கள் என்.எஃப்.டி-இல் காலடி எடுத்துவைக்கத் துவங்கிவிட்டனர். ஏ.ஆர். ரகுமான் கூட தன்னுடைய `ராக்ஸ்டார்' படத்தின் பாடல்களை NFT-ல் விடப்போவதாய் ட்வீட் செய்திருந்தார்.

தற்போதைய சூழலில், கிரிப்டோவின் மவுசு நாளுக்கு நாள் அதிகரித்துக்கொண்டிருக்க, அதன் கூடவே சேர்ந்து இலவச இணைப்பாய் என்.எஃப்.டி-ன் மதிப்பும் அதிவேகமாய் அதிகரித்துக்கொண்டிருக்கிறது.

Non Fungible Token என்பதே NFT-ன் முழு விரிவாக்கம் ஆகும். இதில் Fungible என்றால், ஒரு பொருளுக்கு மாற்று என்று அர்த்தம். அதாவது, இப்போது நான் ஒரு ப்ளூ சட்டை வைத்திருந்தால், நாளை அதே போல வேறு ப்ளூ சட்டை வாங்கிக்கொள்வேன். இதில் இந்த ப்ளூ சட்டை என்பது Fungible product. ஆனால், நான் எத்தனை ப்ளூ சட்டை வாங்கினாலும் அது என் முதல் ப்ளூ சட்டை போல வராது. அது ஏதோ ஒரு வகையில் சிறப்பானதாகத்தான் இருக்கும். அது மாதிரியான் என் முதல் ப்ளூ சட்டைதான் Non Fungible product.

உதாரணத்திற்கு `24' படத்தில் வில்லன் சூர்யா ஒரு டைம் மெஷின் வாட்சைத் தேடிக் கொண்டிருப்பார். அப்போது அந்த வாட்ச் போலவே ஒரு விளம்பரம் கொடுத்து, இந்த வாட்சை தேடிக் கண்டுபிடித்து கொண்டு வந்துகொடுத்தால் அவர்களுக்கு 10 கோடி என்று அறிவித்திருப்பார். இதில் பலர், அதே போல வாட்சை டிசைன் செய்து எடுத்துக்கொண்டு வந்திருப்பார்கள். அது எல்லாமே அந்த வாட்சின் டூப்ளிகேட். அதனால் அது Fungible. ஆனால், ஹீரோ சூர்யாவிடம் மட்டுமே உண்மையான டைம் மெஷின் வாட்ச் இருக்கும். அதுதான் Non Fungible.

அந்த ஒரிஜினல் வாட்சை வாங்க வில்லன் சூர்யா எவ்வளவு வேண்டுமானாலும் பணம் கொடுப்பார். எவ்வளவு வேண்டுமானாலும் ரிஸ்க் எடுப்பார். அதே போலத்தான் எந்த ஒரு பொருளின் ஒரிஜினல் மதிப்பு எப்பவுமே எல்லாருக்கும் ஸ்பெஷல்தான். அதை அதிக விலை கொடுத்து வாங்க யாராவது தயாராக இருப்பார்கள். ஆனால், அதை நேரடியாக பிசிக்கலாக (physical format) வாங்காமல் இ-ஃபார்மேட்டில் (e-format) வாங்கினால், அதுதான் டோக்கன்.

உதாரணமாக, மோனாலிஸா புகைப்படம் மிகவும் விலை மதிப்பு மிக்கது. அதன் உரிமையை நான் 10 கோடி கொடுத்து வாங்குகிறேன் என்று வைத்துக்கொள்வோம். இப்போது அந்த புகைப்படம் பலரிடம் இருக்கும். ஆனால், அதனுடைய உரிமை (ownership) என்னிடம் மட்டும்தான் இருக்கும். நான் அந்தப் படத்தின் உரிமையாளர் என்று ப்ளாக்செயினில் பதிவாகி இருக்கும். அதை யார் வேண்டுமானாலும் எப்போது வேண்டுமானாலும் பார்த்துக்கொள்ளலாம். ஆனால், பயன்படுத்த முடியாது. அப்படி பயன்படுத்தினால், அதற்குச் சொந்தக்காரன் என்கிற முறையில் எனக்குக் கட்டணம் செலுத்த வேண்டும்.

என்.எஃப்.டி குறித்து பாடிய ஒரு பாட்டை என்.எஃப்.டி-யிலேயே விற்றார் எலான் மஸ்க். இந்த என்.எஃப்.டியைப் பொறுத்தவரை, எது வேண்டுமானாலும் விலை போகும், அதற்கான மதிப்பு இருக்கிறதா, இல்லையா என்பதை எல்லாம் தாண்டி. உதாரணமாக, ஒரு பாகிஸ்தான் மீம் 51,530 டாலருக்கு விலை போனது. ஆனால், அது வெறும் ஒரு மீம் தான். அதே போல, நியான் கேட் (Nyan cat) எனும் மீம் வீடியோ 4 கோடி டாலருக்கு விற்பனை ஆகியுள்ளது.

ஒரு பாட்டு அல்லது மீம் அல்லது ஒரு படைப்பு இந்த அளவுக்கு விலை போவதை எப்படிப் புரிந்துகொள்வது என்று கேட்கிறீர்களா? இதோ இந்த விளக்கத்தை அவசியம் படியுங்கள்.

பொதுவாக, பொருளாதாரத்தில் மூன்று விதமான பொருள்கள் உள்ளன. Normal Goods, Giffen Goods, Veblen Goods என்பதே அந்த மூன்று வகை பொருள்கள். இதில் நார்மல் குட்ஸ் என்பவற்றின் விலை ( price ) அதிகரிக்கும்போது தேவை (demand) குறையும். தக்காளி விலை ஒரு கிலோ ரூ.100 எனில், ஒரு கிலோ வாங்குவதற்கு பதில் அரை அல்லது கால் கிலோ வாங்குவது இதற்கு உதாரணம்.

ஆனால் Giffen மற்றும் Veblen goods-யைப் பொருத்தவரை விலை (price) அதிகமானாலும் தேவை (demand) குறையாது. இதற்கு உதாரணமாக, அரிசி அல்லது தண்ணீரை சொல்லலாம். அரிசி விலை அதிகரித்தாலும், நாம் சாப்பிடுவதற்காக அதை வாங்குவது குறைவதே இல்லை.

Veblen goods என்பவை ஆடம்பர பொருள்களில் அடங்கும். உதாரணமாக, ரோலக்ஸ் வாட்ச். இதன் விலை எவ்வளவுதான் ஏறினாலும், அதை வாங்குபவர்கள் வாங்கிக்கொண்டுதான் இருப்பார்கள். அதே போலத்தான் என்.எஃப்.டி.யும்.

இதன் விலை என்னதான் பொருளின் மதிப்பைவிட ஆயிரம் மடங்கு அதிகமானாலும் ஒரு குறிப்பிட்ட மக்கள் இதை வாங்கிக் கொண்டுதான் இருப்பார்கள். அதனால் இதற்கு Demand அதிகமாகிக் கொண்டே போகிறது. அதனால் விலையும், மதிப்புமே அதிகரிக்கிறது.

என்.எஃப்.டி என்பது இந்த மூன்று வகையிலும் வரக்கூடிய ஒரு வஸ்து என்றே சொல்லலாம். ஆனாலும், என்.எஃப்.டி.யின் விலை பெருமளவில் சரிய அதிக வாய்ப்புள்ளது என அதில் பணம் சம்பாதித்த பீப்ஸ் நிறுவன இயக்குநரே சொல்கிறார்.

இந்த என்.எஃப்.டி பெரும்பாலும் பணம் அதிகம் உள்ளவர்கள் செய்யும் அவசியமில்லா முதலீடு போல கருதப்பட்டது. ஆனால் நாளடைவில் எல்லாரும் என்.எஃப்.டி-யில் களமிறங்க, சாதாரண மக்களும் தற்போது இதில் ஆர்வம் காட்டத் துவங்கியுள்ளனர். ஒரு நாள் மக்கள் இதை வாங்குவதை நிறுத்திவிட்டால் என்.எஃப்.டி-யின் தேவை கண்டிப்பாக குறைந்து, விலையும் குறையும் என்பதில் சந்தேகம் இல்லை.

ஆனால், இந்தியாவில் தற்போது சினிமா நட்சத்திரங்கள் மூலம் காலடி எடுத்துவைத்துள்ள என்.எஃப்.டி-க்கு மற்ற நாடுகளை போல வரவேற்பு கிடைக்குமா என்பதைப் பொறுத்திருந்துதான் பார்க்க வேண்டும்.

இந்திய மென்பொருள் நிறுவனங்களுக்கும் வெளிநாட்டு மென்பொருள் நிறுவனங்களுக்கும் இடையே வேலை மற்றும் வாழ்க்கையில் உள்ள வேறுபாடு என்ன? - corporate culture in the Indian software industry compared to Western countries

noreply@blogger.com (Unknown) — Sun, 5 Dec 2021 11:31:00 +0530

பத்து வருடங்கள் இந்திய நிறுவனங்களிலும், 4+ வருடங்களாக அமெரிக்க நிறுவனங்களிலும் பணியாற்றிய(பணியாற்றி வருகிற) அனுபவத்தில் எழுதுகிறேன்.

இந்தியாவில் மென்பொருள் சேவை நிறுவனங்களே அதிகம். நீங்கள் இந்தியாவில் மைக்ரோசாப்ட், கூகிள் போன்ற பெரிய ப்ராடக்ட் நிறுவனங்களில் முயற்சித்தால், உங்களுக்கு இந்த பதில் பொருந்தாது. ஏனெனில் இவை உலகெங்கிலும் ஒரே operating model/perks உடன்தான் இயங்கிவருகிறன.

இந்திய மென்பொருள் நிறுவனங்கள்

நேர்முகம்

பெரும்பாலும் 2 தொழிற்நுட்ப சுற்றுகள் மட்டுமே. ஒரு சுற்றில் Lead/Architect வகை நபரும், அடுத்த சுற்றில் மேலாளர்/சீனியரும் கேள்வி கேட்பார்கள். பெரும்பாலும் நீங்கள் skills என பட்டியலிடுபவையிலிருந்தே கேள்விகள் வரும். FAQs, Design Principles படித்து சென்றால் நிச்சயம் எளிதாக கடப்பீர்கள். நன்றாக பயமில்லாது உரையாடும் திறன் வேண்டும். இதற்குபிறகு HR சுற்று, verification நடக்கும்.

சம்பளம் (Compensation and Benefits)

இந்திய மார்கெட்டில் பெரும்பாலும் உங்கள் வருட அனுபவம் * 1.5 லட்சம் என்பது standard. 10 வருடம் எனில் குறைந்தது 15 லட்சம் வாங்கலாம். அதுதவிர பெருநகரங்களில் வாழ allowance, PF, Gratuity என்பவை கிடைக்கும். இந்த 15 லட்சம் என்பது minimum மட்டுமே. நீங்கள் நல்ல tech stack இல் இருப்பின் ஆண்டு அனுபவம் * 2.5 லட்சம் என்றுகூட பெருக்கிக் கேட்க முடியும், நான் கேட்டிருக்கிறேன்.

நீங்கள் managerial cadre எனில், முந்தைய நிறுவனத்தில் இருந்ததைவிட ஒரு level above முயல முடியும். நீங்கள் manager எனில், senior manager க்கு apply செய்யலாம். ஒரு நிறுவனத்தில் இருந்து இன்னொரு நிறுவனம் சென்றால் 20–40% hike எதிர்பார்க்கலாம் சராசரியாக.

வேலை வாழ்க்கை (work life)

பெரும்பாலும் 8 மணிநேரம் மட்டுமே வேலை செய்து வெளியேற முடியாது. உங்கள் டீமில் 10 மணிநேரம் இருக்கிறார்கள் எனில் நீங்களும் இருந்தாக வேண்டும். ஒருவாரத்தில் 60 மணிநேரம் வேலை கொடுப்பது, ஆன்ஸைட் கால் எடுக்க சொல்வது, வேலை இருப்பின் சனி/ஞாயிறு வரசொல்லுவது இதெல்லாம் எழுதப்படாத விதி.

Timesheet இல் வாரத்தில் 40 மணிக்கு மேல் log செய்ய விடமாட்டார்கள் சில கஞ்ச மேனேஜர்கள், நம்ம மக்களும் appraisal க்கு பயந்து, அல்லது அடுத்த level செல்ல என 40 மணிநேர சம்பளம் வாங்கிக்கொண்டு, 60 மணிநேரம் வேலை செய்வார்கள். ஒரு 20% நிறுவனங்கள் overtimeக்கு பணம் தரலாம்.

நான் இந்தியாவில் இருந்தவரை காலை 7 மணிக்கு வெளியேறி, இரவு 8.30 க்குதான் வீடு வருவேன். பலநாள் cab service பயன்படுத்தி 11–12 க்குகூட வந்ததுண்டு (இலவசம்தான்).

திருமணம் ஆனவர்/குழந்தை இருக்கிறது எனில் கொஞ்சம் சலுகை கிடைக்கும்.

நம்நாட்டு கலாசாரமே நம்மை பெரியவர்களை மதிக்க கற்றுக்கொடுப்பதால், பெரும்பாலும் hierarchical மனநிலை உண்டு. உங்களைவிட 2 வருடம் சீனியர் என்றால்கூட நிறைய மரியாதை எதிர்பார்ப்பார்கள், மாற்றுகருத்தை பார்த்து பதவிசா சொல்லவும், arrogant, not a team player என்றுவிடுவார்கள். ஜாக்கிரதை!

நோட்டிஸ் பீரியட்/அப்ரைஸல்

அப்ரைஸல் வருடம் ஒருமுறை, 10%,5%,3% என்று பக்கெட்கள் வைத்து இருப்பார்கள் சம்பள உயர்வுக்கு, Bell curve படி நிறைய பேர் 3% தான் வாங்குவர். Promotion இருந்தால் அதிகம் கிடைக்கலாம்.

நோட்டிஸ் 6 வாரங்கள், இதை நீங்கள் பேசி 4 வாரமாக குறைக்க முடியும்.

அமெரிக்க நிறுவனங்கள்

நேர்முகம்

கோடிங் சுற்று- அல்காரிதம் எழுதவேண்டும். Geeksforgeeks, Hackerrank, Leetcode இதில் search/sort/tree/linked list என 15 நிமிடத்திற்குள் solve செய்ய கற்றுக்கொள்ளுங்கள்.

தொழிற்நுட்ப சுற்றுகள்- 2–3 இருக்கும். உங்கள் பழைய project இல் இருந்து துவங்கி, எதை எப்படி implement செய்தீர்கள், design decisions, security architecture இதெல்லாம் உங்களுக்கு தலைகீழாக தெரிய வேண்டும். முந்தைய நாள் website இல் தேடி ஒப்பித்தால் போதாது.

மேலாளர் சுற்று- இவர் ஒரு challenge கொடு்த்து அதை எப்படி தீர்ப்பீர்கள் என கேட்பார். உதாரணமாக ‘என் தளத்தில் 20000 பயனர் இருக்கிறார்கள், நாளை 1 லட்சம் பேர் பயன்படுத்த வேண்டும் எனில் என்ன செய்ய வேண்டும்?’ Scalability/High availability/on prem/cloud இதுபற்றி தெரிந்து இருக்க வேண்டும்.[1]

Non technical round- நீங்கள் நிறுவன கலாசாரத்திற்கு செட் (culturally fit) ஆவீர்களா என பார்ப்பார்கள், கொஞ்சம் சாதுர்ய புத்தி வேண்டும்.

இவை எல்லாம் முடிந்தால் offer கிடைக்கும்.

சம்பளம் (compensation and benefits)

Salary/Benefits negotiation எழுத்துபூர்வமாகவே நடக்கும். முதலில் ஒரு சம்பளம் நிர்நயம் செய்து, நீங்கள் நிராகரித்தால், எவ்வளவு எதிர்பார்க்கிறீர்கள் என email மூலம் வினவுவார்கள், budget/interview performance பொறுத்து hire/no hire decision கிடைக்கும். சமயத்தில் ஒரேநாளில் முடிந்த நேர்முகத்தேர்விற்கு வாரகணக்கில் salary negotiation நடப்பதுண்டு. வேறு ஆஃபர் வாங்கி இருக்கீங்களா என்பார்கள். வாங்கியிருந்தால் ஈடுசெய்வார்கள்.

சம்பளம் தவிர Discounted stocks அல்லது Restricted Stock Units கிடைக்கும்.

உதாரணமாக நான் level 1 performer எனில், வருடம் 30 stock எனக்கு இலவசமாக நிறுவனம் கொடுக்கும். அதை விற்க நான் 2–3 வருடம் காத்து இருக்க வேண்டும். இதை vesting period என்பார்கள்.

Joining bonus என்றும் ஒன்று உண்டு, நீங்கள் கேட்ட சம்பளம் கொடுக்க முடியாவிடில் one time joining bonus ஆக கொடுத்துவிடுவார்கள். இதுதவிர health insurance, ரிடையர்மன்ட் benefits என பட்டியல் நீளும்.

Work life

8 மணிநேரம் மட்டுமே. அதிகநேரம் வேலை செய்தால், ஒன்று compensatory off கொடுப்பார்கள் அல்லது overtime pay கொடுப்பதுண்டு. Software Release/Patching போன்ற இரவுநேர பணி (night out) இருந்தால், மதியம் சீக்கிரமே அலுவலகத்தில் இருந்து வீடு சென்றுவிடலாம்.

இந்தியா போல hierarchy கிடையாது. ஊமையாக இருந்தால்தான் எதிர்விளைவுகள் இருக்கும். நான் என் Vice President வரை ஜாலியாக அரட்டை அடித்து எதிர்கருத்து சொல்வேன், சிரித்துகொண்டே கவனிப்பார்கள். பேர் சொல்லியே அழைப்பார்கள் எவ்வளவு சீனியர் எனினும். Ego clash வந்தால் HR வரை செல்லலாம், HR என்பவர் மேனேஜரின் ஊதுகுழலாக இருக்கமாட்டார்.

At will employment என்பர், நீங்கள் நினைத்த அன்றே வேலையை விடமுடியும், அவர்களும் ஒரேநாளில் உங்களை தூக்கலாம். பெரும்பாலும் 2 வாரம் notice period. அவ்வளவுதான்.

முடிவாக

இந்தியா ஒரு மக்கள்தொகை மிகுந்த நாடு. Engineers அதிகம், எனவே கொஞ்சம் மரியாதைகுறைவாக, taken for granted ஆக நடத்துவதாக தோன்றும். வெளிநாடுகள், முக்கியமாக western countries இல் கடுமையான சட்டங்கள், குறைவான மக்கள்தொகை, hire process இல் உள்ள சிக்கல்களால், மனிதர்களை மனிதர்களாக நடத்துவது உண்டு. இந்தியாவில் ஒரு நிறுவனத்திற்கும், பணியாளருக்கும் சண்டை/வழக்கு எனில், அதை lost cause என்பார்கள், அந்த பணியாளரால் ஒன்றும் செய்யமுடிவதில்லை. மேற்கில் வழக்கே வந்துவிடக்கூடாது என நினைப்பார்கள், அந்தளவு சட்ட பாதுகாப்பு உண்டு.

நம்நாடும், corporate களை ராஜா மாதிரி நடத்தாமல், பணியாளர்களுக்கான சட்டதிட்டங்களை கடுமையாக்க வேண்டும், அதற்கு ஊழலற்ற நிர்வாகம் வேண்டும், அதுவே காலத்தின் தேவை!

Internet of things ( IOT) என்பது பணம் கொட்டும் துறையா?

noreply@blogger.com (Unknown) — Wed, 10 Nov 2021 09:50:00 +0530

இது 1990 களின் நடுவில், மென்பொருள் எழுதுவது பணம் கொழிக்கும் துறையா என கேட்பதை போல. அப்போது துறையில் இருந்த நபர்களுக்கு மட்டும் அதன் மகத்துவம் ஓரளவு புரிந்திருக்கும். ஆனால் அவர்கள் கூட மென்பொருள் இவ்வளவு தூரம் அனைத்து இடத்திலும் நுழைந்திருக்கும் என எதிர்பார்த்திருப்பது சந்தேகமே.

அதேபோல IOT துறையும் தற்போது ஆரம்ப கட்டத்தில்தான் உள்ளது. இதில் industry standard என open protocol கள் இப்போதுதான் மெதுவாக உருப்பெற்று வருகின்றன. இதன் சில சிக்கல்களையும், அதற்கு எதிர்பார்க்கும் தீர்வுகளையும் இங்கு முன்வைக்கிறேன்.

இந்த IOT சேவைகளை சில வருடங்களுக்கு முன்னர்தான் Apple, Amazon, Google போன்ற நிறுவனங்கள் தங்கள் platform-ல் ஒரு பகுதியாக கொண்டுவந்துள்ளனர். இவர்கள் பெரும்பாலும் பொதுமக்களின் அன்றாட பயன்பாட்டை மனதில் கொண்டு உருவாக்கியுள்ளனர். அதாவது Business to Consumer மாடல்.

ஆனால் IOT யின் பயனை பல நிறுவனங்கள் ஆரம்பத்திலிருந்தே அனுபவித்து வந்துள்ளனர். இன்டர்நெட் டில் இணைக்காமல், தங்களுடைய லோக்கல் network-ல் வைத்து இந்த நிறுவனங்கள் பயன்படுத்தி வந்த பல automation களை தற்போது இன்டர்நெட் first என கொண்டு வந்து IOT என்கிறோம்.

இதில் பல வருடங்களாக Crestron, Control4, Lutron என சில niche நிறுவனங்கள் இயங்கி வருகிறார்கள். இவர்களுடைய தொழில்நுட்பத்தைத்தான் நமது IT நிறுவனங்கள் பெரும்பாலும் customize செய்து, அதில் data collection, Machine Learning என சேவை வழங்குகிறார்கள். அதாவது Business to Business மாடல்.

ஆனால் இதில் உள்ள பல sensor-கள் மற்றும் centralised control system கள் கணினியுடன் தொடர்புகொள்ள, இன்னமும் Serial & Parallel ports, VGA, RJ2 connector, USB, IR, Bluetooth 2.0 போன்ற outdated தகவல் பரிமாற்ற protocols களை பயன்படுத்துகிறார்கள். இதனால் தற்போதைய எந்த கணினி, மொபைல் operating system களும் இந்த industrial sensors & controllers களுடன் நேரடியாக தொடர்பு கொள்ள முடியாது.

தற்போது மலிவான Raspberry Pi யில் கூட High throughput wireless streaming வந்துவிட்ட இக்காலத்தில் அந்த out dated communication protocol களை விட்டு விரைவில் வெளியேற வேண்டும். ஆனால் Backward compatibility என்ற பெயரில் outdated protocols கொண்ட சாதனங்களை நமக்கு விற்று, ICU வைத்து பணம் கறப்பதை போல கறந்து வருகிறார்கள். இந்த தேவையில்லாத ஆணிகளை(பழைய protocols/ports) பராமரிக்க வேண்டிய காரணத்தினால்தான் centralised IOT controller சாதனங்கள் யானை விலை குதிரை விலையில் உச்சத்தில் இருக்கின்றன!.

என்னைப்போன்ற DOS to Windows 95 பயனர்கள் இதை அனுபவித்திருப்பார்கள்; அந்த காலத்தில் ஒரு mouse வாங்கினால் கூட அதற்கு device driver தனியாக இன்ஸ்டால் செய்தால்தான் பயன்படுத்த முடியும். அப்போதெல்லாம் பிரிண்ட்டர்கள் வாங்கும்போதெல்லாம் அதன் டிரைவர் தனியாக இன்ஸ்டால் செய்தால்தான் Windows & Mac இயங்குதளம் அடையாளம் கண்டு கொள்ளும். அதுவும் Linux பயன்படுத்துபவர்கள் device டிரைவர் கிடைக்காமல் படும்பாடு சொல்லி மாளாது. ஆனால் தற்போது அனைத்து பிரிண்டர் தயாரிப்பாளர்களும் ஒரு common open standard பின்பற்றுகிறார்கள். அனைத்து இயங்குதளங்களும் தானாகவே பிரிண்டர்களை அடையாளம் கண்டுகொள்கின்றன.

இப்படி முக்கிய computing platform கள் அனைத்தும் IOT சாதனங்களை தானாகவே அடையாளம் கண்டுகொள்ள ஆரம்பிக்கும்போதுதான் அது mainstream ஆகிவிட்டது என சொல்ல முடியும். தற்போது IOT என்ற பெயரில் பயன்படுத்தப்படும் பல sensorகள், controller கள் நேரடியாக கணினியுடன்/இணையத்துடன் தொடர்பு கொள்வதில்லை. அதற்கென கணினியுடன் தொடர்பு கொள்ள ஒரு இடைத்தரகர்/interface செய்யும் சாதனங்கள் கொள்ளை விலையில் விற்கப்படுகின்றன. இதற்கு ஒரு முக்கிய காரணம் அந்த சாதனங்களுக்கு mass production இல்லை, அதே சமயம் அப்படி mass production செய்யுமளவிற்கு அந்த control சாதனங்கள் தொழில்நுட்பத்தில் மேம்பட்டவையும் அல்ல.

இந்த இடைத்தரகர்/interface வேலை செய்யும் IOT சாதனங்கள் ஒழிய வேண்டும். இந்த விஷயத்தில் நிறுவனங்களை விட பொதுமக்கள் விரைவில் புதுமையை/மேம்பட்டதை தேர்ந்தெடுப்பார்கள். காரணம் பொதுமக்களுக்கு Legacy Problem என்பது பொதுவாக இருக்காது. இதற்கு Raspberry Pi போன்ற மலிவான ஒரு general purpose device வைத்தே கிட்டத்தட்ட அனைத்து சென்சார்களையும், கண்ட்ரோலர்களையும் இணையத்தில் இணைக்க முடியும். இதற்கு ஒரு robust software எழுதினால் அதைவைத்து Crestron, Control4 போன்ற நிறுவனங்களின் பல லட்சம் விலையில் விற்கும் இடைத்தரகர்/interface சாதனங்களை replace செய்ய முடியும்.

முக்கியமாக IOT consultant கள் வழக்கமான crestron, KNX போன்ற legacy eco system களில் training எடுத்துக்கொண்டு, அவர்களின் விலை உயர்ந்த centralised control device நம்மை வாங்க வைத்து அதை நமக்கு configure செய்து தந்து சம்பாதிக்கிறார்கள். இதை தவறென்று சொல்ல முடியாது. தற்சமயம், ஒரு complete IOT package வேண்டுமென்றால் இந்த legacy நிறுவன தயாரிப்புகளை நாடி செல்ல வேண்டிய நிலைதான் உள்ளது. Amazon, Apple, Google போன்றவைகள் இன்னமும் ஒரு complete solution என்ற நிலையை அடையவில்லை.

IOT யை பயன்படுத்துவது என முடிவெடுத்த பிறகு, இந்த backward compatibility என்ற வார்த்தைக்கு மட்டும் நாம் மயங்கி விடக்கூடாது. எனக்கு அதெல்லாம்(backward compatibility) வேண்டாம், லேட்டஸ்ட் ஆக வெறும் வயர்லெஸ், USB C, HDMI போன்ற protocols வழியே மட்டும் சென்சார்களும் கண்ட்ரோலர்களும் பயன்படுத்திக்கொள்கிறேன் என முடிவெடுத்துவிட்டால், உண்மையில் நமக்கு விலையும் குறையும், சேவையும் சிறப்பாக இருக்கும். ஆனால் இது IOT consultant களுக்கு மகிழ்ச்சியானதாக இருக்காது. அவர்கள் நமக்கு configure செய்ய, பெரிதாக lecture கொடுக்க எதுவும் இருக்காது.

ஒருகாலத்தில் லிப்ட் இயக்குவதற்கு தனியாக லிப்ட் operators இருப்பார்கள். ஆனால் இன்று லிப்ட் தானாகவே சமத்தளத்தை அறிந்து சரியாக நிற்கும் என மேம்பட்ட பிறகு, வெறும் பட்டனை அமுக்குபவர்களுக்கு எதற்கு தனியாக சம்பளம் என அவர்களின் பணி வழக்கொழிந்துவிட்டது.

அதுபோல ZigBee, Matter போன்ற நவீன protocols/standards உள்ள சாதனங்களை நாம் தேர்ந்தெடுக்க பழகிவிட்டால், IOT consultant கள் நமக்கு backward compatibility என்ற பெயரில் பரிந்துரைக்கும் விலை உயர்ந்த Centralised controller சாதனங்கள் தேவைப்படாது; நம்மிடம் ஏற்கனவே உள்ள Google, Apple, Amazon சாதனங்களே போதுமானது.

அதாவது இன்று Windows, Mac, iOS, Android களின் built-in printer menu அனைத்து பிரின்டர்களையும் கையாள்வது போல; ஒவ்வொரு பிரிண்டரின் தனித்தனி software installation வழக்கொழிந்துவிட்டது. அதாவது ஒவ்வொரு IOT சாதனத்திற்கும் தனி செயலி, அல்லது தனி connecting interface device/port என்பது வழக்கொழிந்து computing platform களின் அடிப்படையாக IOT சாதனங்கள் மாற வேண்டும்.

IOT யின் பயன், உபயோகம் பற்றி அறியாதவர்களுக்கு இந்த IT consultant கள் தேவைதான். ஆனால் இந்த backward compatibility என்ற அர்த்தமில்லாத obsession மட்டும் இல்லாமலிருந்தால் அனைவரும் பயன்படுத்தும் வகையில் IOT யின் விலை இருக்கும்.

இதில் நாம் தெரிந்து கொள்ள வேண்டியது, IOT eco system இன்னமும் mature ஆகவில்லை என்பதும், தற்சமயம் முழுமையான package என்பது costly & inefficient என்பதும்தான்.

தற்சமயம் இந்த mainstream platform நிறுவனங்களான Amazon, Apple, Google, Microsoft போன்ற நிறுவனங்கள் தங்கள் நிறுவனத்தின் voice assistant, Home control app களுடன் இணைக்க வெளிப்படையான Software Development Kit களை வெளியிட்டு வருகிறார்கள். இனிமேல் இந்த Open API களுடன் இணைக்காமல் ஒவ்வொரு IOT நிறுவனமும் தனியாக ஒரு App வைத்துக்கொண்டு அவர்களின் சாதனத்துடன் மட்டும் தனித்தவில் வாசிப்பது முடிந்த வரை குறைய வேண்டும்.

இது விரைவில் நடந்தேறி Industrial மற்றும் home automation சென்சார்/கண்ட்ரோல் சாதனங்களை இந்த common/open API களுடன் தொடர்புகொள்ளும்படி தயாரித்தால் அதில் நாம் first mover advantage பெற வாய்ப்புண்டு. ஒவ்வொரு IOT சாதன நிறுவனமும் தனியாக நம்மை ஒரு app டவுன்லோட் செய்ய சொல்வது ஒவ்வொரு பிரிண்ட்டருக்கும் டிரைவர் சாப்ட்வேர் இன்ஸ்டால் செய்வது போல ஆகும்.

ஆனால் துரதிருஷ்டமாக இப்படி சென்சார்கள் கண்ட்ரோலர்கள் hardware தயாரிப்பிற்கு நாம் சீனாவை நம்பியே உள்ளோம். Manufacturing-ல் இப்படி சென்சார்கள், கண்ட்ரோலர்கள் மற்றும் general purpose low cost CPU விற்கு நாம் முக்கியத்துவம் தந்தால் சிறப்பாக இருக்கும். அப்படி செய்யாவிட்டாலும் கூட சீனாவே IOT சாதனங்கள் தயாரிப்பில் கோலோச்சினாலும் நாம் Cloud Computing-ல் Snowflake எனும் நிறுவனத்தின் பிசினஸ் மாடலை பின்பற்றலாம்.

Cloud Computing துறையில் Snowflake எனும் நிறுவனம் cloud சேவை வழங்குபவர்கள் யாரென்பதை பற்றி கவலைப்படாமல்(Cloud Service provider agnostic) ஒரு unified முகத்தை வாடிக்கையாளர்களுக்கு வழங்குகிறது. அதாவது நாம் தனித்தனியாக AWS, Azure, Gcloud என multi cloud development செய்வதற்கு பதிலாக, Snowflake நிறுவனத்தின் சாப்ட்வேரில் கிளவுட் பணிகளை ஒருமுறை செய்தால் போதும், அங்கிருந்து AWS, Azure அல்லது Gcloud என எந்த சேவையில் வேண்டுமானாலும் நமது சௌகர்யப்படி இந்த மூன்று சேவைகளையும் இணைத்து கூட deploy செய்து கொள்ள முடியும்.

அதுபோல நாம் சென்சார்கள், கண்ட்ரோலர்களுக்கு அமேசான், ஆப்பிள், Google மற்றும் microsoft நிறுவன API களுடன் இணைந்து பணியாற்றும்படி unified சாப்ட்வேர் தயாரித்தால், IOT யின் பயனை விரைவாக platform independent ஆக பெற முடியும். அதாவது இந்த புதிய சாப்ட்வேர் தான், IOT hardware சாதனங்களை அனைத்து கிளவுட் மற்றும் computing platform களுடன் இணைக்கும் புதிய இடைத்தரகராக/interface ஆக அமையும்.

இப்படி ஒரு நிலை வரும்போது, நமது வீடு, அலுவலகம், சாலைகள் அனைத்தும் context/situation விழிப்புணர்வு கொண்டவையாக மாறத்தொடங்கும். பல விரயங்கள், விபத்துக்கள் குறையும். வாழும் சூழல், ஆரோக்கியம் மேம்படும். நமது இப்போதைய வாழ்க்கை கற்காலத்தை போல அப்போது தெரியும். இந்த மாற்றத்தில் பங்கு பெரும் IOT value chain-ல் உள்ள அனைவர்க்கும் நிச்சயம் நன்றாக பணம் சம்பாதிக்க வழி உருவாகும்.

E-Commerce Development Essentials

noreply@blogger.com (Unknown) — Fri, 1 Oct 2021 11:01:00 +0530

Introduction

Since the dot com boom, e-commerce has meant big business for all involved. Amazon, eBay, and Etsy all used the technology to their advantage, while PayPal, Stripe, and Shopify have positioned themselves as integral components to the fabric of the internet, providing services that make buying and selling on the internet simple and frictionless for the shopper and the merchant. 

If you are considering setting up your own e-commerce offering, there is a lot you need to consider, and this Refcard will help you navigate these options. You should first gather the requirements for your online store and decide which features are essential. From there, build or buy decisions will become clearer. Alternatively, you may be looking to build your own platform for others to use; if that’s the case, this will act as a resource, highlighting the necessary steps involved.   

This Refcard is broken up into five key sections: 

Build or Buy — An overview of common approaches to building e-commerce applications. 
Overview of e-Commerce Architectures — A high-level view of various components of the e-commerce system. 
Utilizing Third-Party Services — An examination of third-party services that can be used to create hybrid e-commerce offerings focused on payment services, chatbots, and recommendation engines.
APIs for e-Commerce Platforms — An assessment of five APIs provided by the most popular e-commerce solutions.
Open-Source Alternatives — A list of several open-source e-commerce solutions that allow the flexibility and freedom to deploy your own service.

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 2

Build or Buy

There are three main options available that include using an existing off-the-shelf solution, taking parts from existing services to build a hybrid offering or taking the leap to building it all yourself.   

The following table will help you balance the pros and cons of each approach:

Approach	Pros	Cons
Off-the-Shelf Solutions Use a proven e-commerce platform to avoid any development work. The most straightforward and fastest approach to get selling.	Hosting and security are the provider’s concern Inventory management will be included Proven features and simple setup  Quick startup time	You will need to pay for the service  Limited customization options Recovery from service outages is not in your control
Hybrid Best of both worlds. Customize parts of the system but leverage an existing platform or set of services. This is the approach that will suit most.	Bring in the services that you don’t want to implement  Better customization options to help differentiate from other online stores	Multiple systems to manage  Service costs
DIY Build your own system from scratch — with all the benefits and drawbacks of full ownership. Recommended only if creating a platform or marketplace is part of your strategy.	Full creative and technical control  Lower, or no, service costs	You will need to work hard to build a feature set to match existing services  Responsibility for entire system Scaling concerns Cost of development Delay in time to retail

Of all the options listed above, the DIY option is by far the riskiest if you are building an offering that you expect to scale. As well as all the functional considerations, the non-functional requirements such as security and scalability become critical.

As you are building something that deals with cash, expect your system to get the attention of hackers. Make sure to put a significant amount of investment into securing your system and make frequent penetration tests part of the product development cycle once the initial implementation is built. 

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 3

Overview of E-Commerce Architecture

Any e-commerce system is composed of multiple complex parts. Each module is focused on either the shopper or the merchant. The following diagram looks under the hood of a typical e-commerce platform, highlighting both the functional and non-functional requirements:

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 4

Utilizing Third-Party Services for Your Architecture 

Now that we have outlined core components of the system, let’s look at how each part might be implemented using existing services available. Note that for complete implementations, you might want to skip this section and move to the Paid e-Commerce Platforms part of this card. This list is by no means exhaustive but looks to capture the most popular solutions available. All services listed here have a developer API available, meaning that integration between systems is possible. 

You will find some of the categories we listed earlier are not covered here. In the case of Order Management, Product Catalog, and Shopping Cart, these are the core services provided by the larger e-commerce platforms and separating out those services does not make huge business sense. 

Another example is Account Management for customers. In all three cases, if you were not using a central e-commerce system, you would likely build them yourself, powering it all through a database. This is one of the caveats of hybrid architectures; unless you are willing to build some parts from scratch, you will need to consider one of the large e-commerce players.

Billing and Invoice Systems

For both the shopper and merchant sides of the business, a single service can suffice, managing everything from checkout to billing and invoicing. The services listed below are considered the premium players in online payments and provide numerous permutations of services and integrations. 

In the case of all the services listed below, payment details are stored by the provider, reducing risk and exposure to fraud.

Service	Description
Stripe	Fast becoming one of the internet's most popular payment services, Stripe prides itself in being developer first, with client and server libraries available for all platforms, and pre-built integrations into platforms such as Shopify, WooCommerce, and NetSuite. Detailed analytics and reports are available for merchants.
PayPal	One of the original payment providers, PayPal provides a basic Smart Payments integration, along with additional features for shipping changes, advanced look and feel, refunds, and dispute handling. Customization of checkout pages is also available for merchants. A complete set of REST APIs are available, covering anything you need for a payment system.
Square	As well as providing an e-commerce platform, Square unsurprisingly provides a complete payment service that integrates with everything from WooCommerce and Magneto to Wix and Wordpress. This all works with the physical Square terminal, a point-of-sale device. Full developer APIs also exist to accept payments and create and track orders.

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 5

APIs for e-Commerce Platforms

If the prospect of building an entire e-commerce application appears daunting, but you still want to maintain some creative control, there are a number of approaches that you can take. Using SDKs and APIs, you can integrate with existing platforms, saving yourself infrastructure headaches.  

Rather than needing to build your own infrastructure for an e-commerce application, you can leverage a number of different APIs and SDKs from established platforms. With these APIs, you can integrate and extend the built-in features of the platform.

This chart looks at the developer API functionality that is exposed across five of the most used e-commerce platforms: 

	Shopify	WooCommerce	Wix	SquareSpace	Magneto
API Type
REST	⬤	⬤	⬤	⬤	⬤
GraphQL	⬤	⬤			⬤
Specialized Access			Velo
API Categories
Inventory	⬤		⬤	⬤	⬤
Orders	⬤	⬤	⬤	⬤	⬤
Products	⬤	⬤	⬤	⬤	⬤
Profiles / Users	⬤	⬤	⬤	⬤	⬤
Transactions	⬤		⬤	⬤	⬤
CRM			⬤		⬤
Cart	⬤		⬤		⬤
Analytics	⬤
Extras
Webhooks	⬤	⬤	⬤	⬤
Open Source		⬤			⬤

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 6

A Look at Open-Source Alternatives

If you wish to have the option of full control over your store, without needing to consider any third-party platforms, but want to avoid building the architecture from scratch, you should investigate some open-source e-commerce libraries. It’s notable that PHP has been the most popular language for open-source platforms. Along with WooCommerce and Magneto, the following are some of the most used open-source alternatives:

Product	Description	Language
Shopizer	Includes shopping cart, product catalog, search, checkout, administration, and a REST API. Includes a CloudFormation stack for deploying on the AWS cloud.	Java
OpenCart	Allows management of multiple stores from a single administration backend, with a large feature set, mobile and SEO friendly. Additional modules and themes are available in the OpenCart marketplace and include a REST API.	PHP
PrestaShop	With an Addons Marketplace full of templates for e-commerce sites and additional modules for metrics and checkouts, this is one of the best open-source options out there.	PHP

This is a preview of the E-Commerce Development Essentials Refcard. To read the entire Refcard, please download the PDF from the link above.

Section 7

Conclusion

This Refcard has highlighted the considerations and components of an e-commerce system, and it’s clear that it’s far from trivial. Online shopping has never been more popular, and there are a huge variety of paid and open-source choices if you want to build your system.

The gains can be great for those who roll out their own solutions; however, it is not an undertaking for the risk-averse with the associated security and data privacy concerns. A hybrid approach is likely to suit most entrants, with each of the major platforms offering customizations to differentiate your store from the competition.

Most Trending Tech Stacks for Web Development

noreply@blogger.com (Unknown) — Wed, 29 Sep 2021 07:56:00 +0530

Top Stacks for Software Development in 2021

A technology stack refers to the to-be-used frontend, backend, and database. Both frontend and backend can be divided into language and framework components. The backend is for server-side communication, and the frontend is the consumer's side of the software. Let's discuss some popular tech stacks that can be a part of your upcoming web and app development project.

MEAN Stack

The MEAN is one of the top tech stacks that technology experts prefer to develop complex mobile and responsive web apps. It consists of MongoDB, Express, Angular, and Node and is controlled by a single language. It is a fantastic combination of the database, framework, and web server. The combination is superb for developing scalable and quick apps. It has JavaScript as a single language that avoids multiple issues in web development. It consists of document database MongoDB, Node.js web framework Express(.js), client-side JavaScript framework Angular(.js), and JavaScript web server Node(.js).

Companies using MEAN stack: Accenture, Fiverr, Onkore Inc., Raindrop.io, Sisense, UNIQLO, and Vungle.
MEAN Pros: Cost-effective, switches between client and server quickly, excellent for real-time web apps, highly flexible, open-source, and time-saving.
MEAN Cons: Lack of widespread support and security exploits.

MERN Stack

The MERN stack consists of MongoDB, Express, React, and Node. It is almost identical to MEAN. It exchanges Angular with React. The best features of this stack are the integration of React, robust library, and the ability to use code on browsers and servers concurrently. With full-stack development (backend and frontend) possibilities, MERN is the 2nd most popular web technology stack. The MERN technology stack is open-source, and it has an extensive suite of testing tools.

Companies using MERN: Facebook, Instagram, Forbes, Tumblr, and startups

MERN pros: Cost-effective, easily switch between client and server, open-source, UI rendering, and performance
MERN cons: Lower productivity and not a fit for big-scale apps

MEVN Stack

Like MEAN and MERN, the MEVN stack is a newer technology used for frontend development. It consists of MongoDB, Express, Vue.js, and Node. It has Vue.JS as an open-source framework that developers use to build user interfaces. Vue is fast and easy to learn.

Companies using MEVN stack: Grammarly, 9GAG, Gitlab, Behance, Wizzair.
MEVN Pros: Faster backend development with MVC architecture, platform-independent, faster, easy to learn, use of JavaScript on all development levels, and efficient development.
MEVN Cons: Lack of support from a larger community and lack of plugins

LAMP Stack

When it comes to having time-tested web development stacks, the LAMP stack matters the most. It comprises Linux, Apache, MySQL, and PHP. LAMP is an old classic industry standard that is open-source and free to use.

Linux (Operating System), Apache (HTTP server), MySQL (Relational Database Management), and PHP (Programming Language) stack are superb for web development. It runs on all operating systems efficiently and makes a website performing, flexible and cost-efficient. Developers prefer the LAMP stack for its simplicity, stability, and power. This platform is still famous for customized web and app development in 2021.

Companies using LAMP stack: WordPress, Facebook, Wikipedia, Tumblr, and Slack
LAMP Pros: Dynamic, entirely open source, reliable, and easier digital documentation access to users
LAMP Cons: Performance issues on high-traffic sites and challenging to make all components work together

Serverless Stack

Serverless Technology Stack is the first choice of all startups, SMEs, and big billion enterprises due to its ability to handle scalability issues. It makes cloud infrastructure management when it comes to developing apps on the Cloud. Serverless computing platforms are cost-effective for end-users with the "pay as you use" feature. The enterprise gets charged only when their apps run on the server. Google App Engine was the first abstract platform for serverless computing. AWS Lambda from AWS is the best example of a serverless stack.

Companies using Serverless stack: Netflix, Zalora, Coca-Cola, Codepen, and Nordstrom
Serverless stack pros: Lower costs, enhanced scalability, fewer things to worry about, and emphasis on user experience
Serverless stack cons: Vendor lock-in, complex, and not suitable for long-term assignments

Ruby on Rails

Ruby on Rails (RoR) or Rails is a developer-responsive web development stack. This open-source and object-oriented stack is ideal for developing lightweight apps and completing projects fast. It helps developers increase flexibility. It is simply one of the top technology stacks with 45,000+ GitHub stars. Created by David Heinemeier Hansson, the RoR surprises all with CoC (Convention over Configuration) and DRY (Don't repeat yourself) features.

Companies using Rails stack: Airbnb, Bloomberg, GitHub, Fiverr, Yellow Pages, Shopify, and Twitter.
Rails stack pros: Time-efficient, huge community, libraries, helping tools, and strong standards
Rails stack cons: Flexibility shortage, performance, and continuous evolvement.

Useful VSCode Extension

noreply@blogger.com (Unknown) — Tue, 18 Aug 2020 12:34:00 +0530

Beautifyhookyqr.beautify

HookyQR

5,244,774

Repository

License

v1.5.0

Beautify code in place for VS Code

EditorConfig for VS Codeeditorconfig.editorconfig

EditorConfig

2,433,280

Repository

License

v0.15.1

EditorConfig Support for Visual Studio Code

ESLintdbaeumer.vscode-eslint

Dirk Baeumer

10,405,873

Repository

License

v2.1.8

Integrates ESLint JavaScript into VS Code.

GitLens — Git superchargedeamodio.gitlens

Eric Amodio

6,089,051

Repository

License

v10.2.2

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

Prettier - Code formatteresbenp.prettier-vscode

Prettier

7,856,118

Repository

License

v5.1.3

Code formatter using prettier

Template Literal Editorplievone.vscode-template-literal-editor

plievone

24,050

Repository

v0.9.0

Use Ctrl+Enter to open ES6 template literals and other configured multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).

ES6 features

noreply@blogger.com (Unknown) — Fri, 9 Aug 2019 22:09:00 +0530

 Arrow Functions
Classes
Enhanced Object Literals
String interpolation
Destructuring
Default
Spread
Spread + Object Literals
Rest
Let
Const
For..of
Unicode
Modules & Module Loaders
Set
WeakSet
Map
WeakMap
Proxies
Symbols
Inheritable Built-ins
New Library
Binary and Octal
Promises
Reflect
Tail Call Optimization


Map

Maps are a store for key / value pairs. Key and value could be a primitives or object references.

Let’s create a map:
let map = new Map(),
    val2 = 'val2',
    val3 = {
      key: 'value'
    };map.set(0, 'val1');
map.set('1', val2);
map.set({ key: 2 }, val3);console.log(map); // Map {0 => 'val1', '1' => 'val2', Object {key: 2} => Object {key: 'value'}}


Set

It’s a collection for unique values. The values could be also a primitives or object references.
let set = new Set();set.add(1);
set.add('1');
set.add({ key: 'value' });console.log(set); // Set {1, '1', Object {key: 'value'}}



WeakMap

WeakMaps provides leak-free object keyed side tables. It’s a Map that doesn’t prevent its keys from being garbage-collected. We don’t have to worry about memory leaks.

If the object is destroyed, the garbage collector removes an entry from the WeakMap and frees memory.



Keys must be objects.



It has almost the same API like a Map, but we can’t iterate over the WeakMap collection. We can’t even determine the length of the collection because we don’t have size attribute here.

The API looks like this:
new WeakMap([iterable])WeakMap.prototype.get(key)        : any
WeakMap.prototype.set(key, value) : this
WeakMap.prototype.has(key)        : boolean
WeakMap.prototype.delete(key)     : boolean



let wm = new WeakMap(),
    obj = {
      key1: {
        k: 'v1'
      },
      key2: {
        k: 'v2'
      }
   };wm.set(obj.key1, 'val1');
wm.set(obj.key2, 'val2');console.log(wm); // WeakMap {Object {k: 'v1'} => 'val1', Object {k: 'v2'} => 'val2'}
console.log(wm.has(obj.key1)); // truedelete obj.key1;console.log(wm.has(obj.key1)); // false




WeakSet

Like a WeakMap, WeakSet is a Seat that doesn’t prevent its values from being garbage-collected. It has simpler API than WeakMap, because has only three methods:
new WeakSet([iterable])WeakSet.prototype.add(value)    : any
WeakSet.prototype.has(value)    : boolean
WeakSet.prototype.delete(value) : boolean






WeakSets are collections of unique objects only.



WeakSet collection can‘t be iterated and we cannot determine its size.
let ws = new WeakSet(),
    obj = {
      key1: {
        k: 'v1'
      },
      key2: {
        k: 'v2'
      }
   };ws.add(obj.key1);
ws.add(obj.key2);console.log(ws); // WeakSet {Object {k: 'v1'}, Object {k: 'v2'}}
console.log(ws.has(obj.key1)); // truedelete obj.key1;console.log(ws.has(obj.key1)); // false

test

Generators

Functions in JavaScript, as we all know, “run until return/end”. Generator Functions on the other hand, “run until yield/return/end”. Unlike the normal functions Generator Functions once called, returns the Generator Object, which holds the entire Generator Iterable that can be iterated using next() method or for…of loop.

Every next() call on the generator executes every line of code until the next yield it encounters and suspends its execution temporarily.

1. Default Parameters in ES6

var calculateArea = function(height = 50, width = 80) {
// write logic
...
}

2. Template Literals in ES6

var name = `Your name is ${firstName} ${lastName}.`

3. Multi-line Strings in ES6

let poemData = `Johny Johny Yes Papa,
Eating sugar? No, papa!
Telling lies? No, papa!
Open your mouth Ah, ah, ah!`

4. Destructuring Assignment in ES6

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

6. Arrow Functions in ES6

The fat arrows are amazing because they would make your this behave properly, i.e., this will have the same value as in the context of the function— it won’t mutate.

$('.btn').click((event) => {
this.doSomething()
});

7. Promises in ES6

var asyncCall = new Promise((resolve, reject) => {
// do something async
resolve();
}).then(()=> {
console.log('Yay!');
})

8. Block-Scoped Constructs Let and Const

function calculateAmount(boolVal) { 
   let amount = 0;   if(boolVal) {
      let amount = 1; // scope of this amount ends with next closing bracket
   }   return amount;
}
console.log(calculateAmount(true)); // output: 0

9. Classes in ES6



class Profile {   
   constructor(firstName, lastName = '') { // class constructor
      this.firstName = firstName;
      this.lastName = lastName;     
   }  
    
   getName() { // class method       
     console.log(`Name: ${this.firstName} ${this.lastName}`);    
   } 
}let profileObj = new Profile('Kavisha', 'Talsania');
profileObj.getName(); // output: Name: Kavisha Talsania

10. Modules in ES6

In ES6, there are modules with import and export operands.

export var userID = 10;
export function getName(name) {
...
};

React lifecycle and hooks

noreply@blogger.com (Unknown) — Tue, 23 Jul 2019 14:00:00 +0530

Angular project folder structure

noreply@blogger.com (Unknown) — Mon, 22 Jul 2019 14:00:00 +0530

“Change Detection”?

Change Detection means updating the view (DOM) when the data has changed.

Change Detection is done in two steps

Update the application model (developer);
Reflect the state of the model in the view (Angular).

If we take a todo application, represented by the graphic above. We have a fairly simple application that has a TodosComponent managing a list of TodoComponent. If we modify this list, by changing the value of the first item of the todos’ list (in yellow), we will have the following flow:

The developer is making changes to the model (like a component’s bindings);
Angular’s change detection kicks in to propagate the changes;
Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;
If Yes, it will update the component;
Angular updates the component’s view (DOM).

The way Angular runs the change detection by starting from the top and continuing until it reaches the bottom, makes the system more predictable and more performant.

Angular Change Detection Strategies

Angular provides you two Change Detection Strategies, the default one and the onPush.

ChangeDetectionStrategy.Default

By default, Angular has to be conservative and will checks every time something may have changed, this is called dirty checking.

ChangeDetectionStrategy.onPush

With onPush, Angular will only depend on the component’s inputs, events, markForCheck method, or the use of the async pipe in the template, to perform a change detection mechanism and update the view.

Subjects

In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer

Example 2

Observable wrapped in a subject, causing shared execution

Angular switch map and merge map

Rx js debounce and total

diff between observable and subject

weekset and set

Angular change detection

array fill

Javascript datatype

noreply@blogger.com (Unknown) — Sat, 13 Jul 2019 21:37:00 +0530

Understanding objects - Data Property Attribute

configurable - for delete

Understanding objects - DefineProperty

Array Iteration method : Filter

Understanding Objects

Understanding Objects - Accessor Property

Understanding Objects - Accessor Property definedproperty Get and Set

Creating objects

Arrays Introduction

Arrays Introduction - conversion method (toString())

Array Stack Data structure methods

Array Queue Data structure methods

Array Reordering methods : sort and callback to compare function

Array manipulation methods - Array copy using concat

Array manipulation methods - using Slice and splice

Array Iteration methods : map and foeach

Array Iteration methods: Filter

Array Iteration methods: every and some

Array reduction methods : reduce

Array reduction methods : reduce - nested array to flat array - find unique char

Date and RegEx Objects

Prototype Inheritance

HTTP Methods

Singleton

Call, Bind, Apply

Promise in Javascript

Custom mybind

Finding an Object's Size in JavaScript

Array Flat and Array Fill

Closure:

protected, encapsulated
access inner function thorough outer function

3 Ways to Clone Objects in JavaScript

Remove Array Duplicates in ES6

Javascript: Using reduce() to find min and max values?

const ArrayList = [1, 2, 3, 4, 3, 20, 0];
const LargestNum = ArrayList.reduce((prev, curr) => {
      return Math.max(prev, curr)
});
const MinNum = ArrayList.reduce((prev,curr)=>{
      return Math.min(pre,curr)
});
console.log(LargestNum);
console.log(MinNum);


Count number of occurrences for each char in a string

// The string
var str = "I want to count the number of occurances of each char in this string";

// A map (in JavaScript, an object) for the character=>count mappings
var counts = {};

// Misc vars
var ch, index, len, count;

// Loop through the string...
for (index = 0, len = str.length; index < len; ++index) {
    // Get this character
    ch = str.charAt(index); // Not all engines support [] on strings

    // Get the count for it, if we have one; we'll get `undefined` if we
    // don't know this character yet
    count = counts[ch];

    // If we have one, store that count plus one; if not, store one
    // We can rely on `count` being falsey if we haven't seen it before,
    // because we never store falsey numbers in the `counts` object.
    counts[ch] = count ? count + 1 : 1;
}
Shorter answer, with reduce:
let s = 'hello';
[...s].reduce((a, e) => { a[e] = a[e] ? a[e] + 1 : 1; return a }, {}); 


// {h: 1, e: 1, l: 2, o: 1}

Factory vs Abstract factory design pattern

var mybind = function( fn, b ) {

return fn.bind(this, b);

};

var concat = function(a, b) { return a + " " + b;}

var good = mybind(concat, "good");

console.log(good("night"));

Redux

noreply@blogger.com (Unknown) — Tue, 11 Jun 2019 13:08:00 +0530

css3 box model

noreply@blogger.com (Unknown) — Mon, 27 May 2019 11:42:00 +0530

Kodai FM

noreply@blogger.com (Unknown) — Tue, 21 May 2019 20:27:00 +0530

read data from excel using python pandas

noreply@blogger.com (Unknown) — Fri, 8 Mar 2019 10:36:00 +0530

from __future__ import print_function
import pandas as pd
import threading, paramiko, os, time
import mysql.connector
import re
import datetime as dt
from dateutil.relativedelta import relativedelta
import json
import subprocess
import sys
from collections import OrderedDict
from json import loads, dumps

xls = pd.ExcelFile("C:\Users\kmuthuk2\Desktop\stable_scripts.xlsx")

sheetX = xls.parse("Sheet1") #2 is the sheet number

print (sheetX.columns)
var1 = sheetX['Script Name']

myresult_cvs = OrderedDict()
for i in range(100,165):
output2=""
print (i,var1[i]) #1 is the row number...
cmd = 'find ./ -name '+var1[i]
connection.send_shell(cmd)
time.sleep(10)
output=""
if connection.shell.recv_ready():

output = connection.shell.recv(50000).decode(encoding='utf-8', errors='ignore')
output=output.strip().replace(cmd,"")
output=PROMPT_REGEX.sub("",output)
output=output.strip().split("\n")
print ("output {}".format(output))
if (len(output)==2):
cmd_cvslog = 'cvs log '+output[1]
test_full_path = output[1]
elif (len(output)==3):
cmd_cvslog = 'cvs log '+output[2]
test_full_path = output[2]
else:
cmd_cvslog = 'cvs log '+output[0]
test_full_path = output[0]

print ("i is {}".format(i))
print ("cmd_cvslog {} ".format(cmd_cvslog))

connection.send_shell(cmd_cvslog)
time.sleep(15)

if connection.shell.recv_ready():
output2 = connection.shell.recv(50000).decode(encoding='utf-8', errors='ignore')
output2=output2.strip().replace(cmd_cvslog,"")
output2=PROMPT_REGEX.sub("",output2)
#output2=output2.strip()
print ("output2 {} ".format(output2))
result=re.findall(CVSLOG_REGEX,output2)

print('this is result')
print(result)

result = result[0]

print('this is result[0]')
print(result)

date_regex = r'date:\s+([^;]+?);'
mydate = re.findall(date_regex,result)
print(mydate)
myresult_cvs[test_full_path]=result

print ("^"*25)

print ("^"*25)
#connection.shell.flush()

print ("myresult_cvs {}".format(myresult_cvs))
print ("myresult_cvs {}".format(loads(dumps(myresult_cvs))))

Reminder using python ToastNotifier

noreply@blogger.com (Unknown) — Thu, 13 Dec 2018 16:35:00 +0530

import schedule
import calendar
import time
import os
from win10toast import ToastNotifier
from datetime import datetime
from datetime import date

def job_test():
print("job2: Train time ..."+datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Test",msg="Test time"+datetime.now().strftime('%H:%M'))

def job():
print("I'm working job...", "Hello "+datetime.now().strftime('%H:%M'))
#os.system("Cricket_score.py")
#toaster = ToastNotifier()
#toaster.show_toast(title="Time alert",msg="Hello "+datetime.now().strftime('%H:%M'))
today = date.today()
last_day = last_day_of_month(today.year, today.month)
if today == last_day:
print("billpayment ...", datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Last day for Bill Payment ",msg="Last day for Bill Payment \n "+datetime.now().strftime('%H:%M'))

def job1():
print("job1: Lunch time..."+datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Lunch time",msg="Lunch time"+datetime.now().strftime('%H:%M'))

def job2():
print("job2: Train time ..."+datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Train time",msg="Train time"+datetime.now().strftime('%H:%M'))

def job4():
print("job4: Time alert with Cricket_score...", datetime.now().strftime('%H:%M'))
#os.system("Cricket_score.py")

def social():
print("social: Social time...", datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Social time ",msg="Social time "+datetime.now().strftime('%H:%M'))

def billpayment():
today = date.today()
print "today", today
last_day = last_day_of_month(today.year, today.month)
print last_day
if today == last_day:
print("billpayment ...", datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Last day for Bill Payment ",msg=" Last day for Bill Payment \n "+datetime.now().strftime('%H:%M'))

def last_day_of_month(year, month):
""" Work out the last day of the month """
last_days = [31, 30, 29, 28, 27]
for i in last_days:
try:
end = datetime(year, month, i)
except ValueError:
continue
else:
return end.date()
return None

def tutkal_booking():
print("tutkal_booking: Time alert for Tutkal Ticket booking...", datetime.now().strftime('%H:%M'))
toaster = ToastNotifier()
toaster.show_toast(title="Tutkal Ticket booking ",msg="Tutkal Ticket booking "+datetime.now().strftime('%H:%M'))

Restart task-bar
----------------------
taskkill /f /im explorer.exe && start explorer.exe

Python selenium launch browser

noreply@blogger.com (Unknown) — Thu, 13 Dec 2018 16:33:00 +0530

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.firefox.firefox_profile import FirefoxProfile
from selenium.webdriver.firefox.firefox_binary import FirefoxBinary
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

import time

def main():

category_id = int(input("Enter the category id: "))
platform_id = int(input("Enter the platform id: "))
build_id = int(input("Enter the build id: "))
result_list = raw_input("Enter the result_list: ")
query = "(db.results.category_id=='%d')&(db.results.platform_id=='%d')&(db.results.build_id=='%d') &(db.results.result_list.contains('%s'))" %(category_id, platform_id, build_id, result_list)
print query

options = webdriver.ChromeOptions()
options.add_argument("user-data-dir=C:\\Users\\abckmuthuk2\\AppData\\Local\\Google\\Chrome\\User Data") #Path to your chrome profile
browser = webdriver.Chrome(executable_path='C:\\Python27\\Scripts\\chromedriver.exe')

url = "https://smtuvbu-tools-ha/rm-auto-tracker/appadmin/select/db"
#driver = webdriver.Firefox(executable_path=r'C:\Users\abckmuthuk2\geckodriver\geckodriver.exe', firefox_profile=profile)
browser.get(url)

time.sleep(5)
if browser.find_element_by_name('password'):
u = browser.find_element_by_name('password')
u.send_keys('web2py')
s = browser.find_element_by_name('login')
s.send_keys(Keys.RETURN)
time.sleep(5)
k= browser.find_element_by_name('query')
k.send_keys(query)
s = browser.find_element_by_xpath("//input[@value='submit']")
s.send_keys(Keys.RETURN)
time.sleep(5)
s = browser.find_element_by_value("submit")

if __name__ == '__main__':
main()

jquery json keys sort

noreply@blogger.com (Unknown) — Tue, 28 Feb 2017 13:18:00 +0530

Remove duplicate characters from string

noreply@blogger.com (Unknown) — Tue, 9 Aug 2016 11:01:00 +0530

function nonRepeaters(s) {

  var h={};

  return s.split("").

    map(function(c){h[c] |= 0; h[c]++; console.log(c); return c}).

    filter(function(c){console.log(h[c]);return h[c] == 1}).

    join("");

 }



nonRepeaters("abcab")

output :

a
b
c
a
b
2
2
1
2
2

"c"