DEV Community: Midas/XIV

Federated Learning

Midas/XIV — Tue, 30 Jul 2024 19:45:08 +0000

Flower is the framework to do distributed machine learning training jobs in a privacy-enhancing way.
For some reason if all data cannot be shared, you would have to train a model in a distributed way without having to collect all the data centrally. Instead of moving data to the training process, you can move the training to the data in different centers, then you can collect all the model parameters and centralize it, not the raw data itself. this way you can benefit from all the data across all hospitals without ever needing to raw data to leave any place.

Why FL

data is naturally distributed, for example in governments data is distributed across many governments. Data might be sensitive, volume of data might be too high, regulations on data, data practicality.

When a model is trained without certain datatypes, it not only fails to predict the scenario correctly, but predicts it incorrectly which may be harmful.
it is impossible to centralize data, a large amount of data is unused as it is sensitive.

How does a federated tuning system works.

architecture; global model => server => clients.
server there's is usually no data, but there can be test data to check global models

global model sends initial parameter to server which passes it to all the clients.
role of server is to coordinate the training on the clients,

FL Algorithm

initialization:
server initializes the global model.
Communication round:
for each communication round
Server sends the global model to participating clients
Each client receives the global model.
Client training and model update:
for each participating , client trains on local data, client sends it's locally updated model to the server.
Model Aggregation
Server aggregates the models received from all clients using aggregation algorithm ( for fedAvg [strategy])
Convergence Check
if convergence criteria are met, then we end this process else we go again.

federated learning is an iterative process, clients train the model and the server aggregates model updates.

How to tune a federated system.

[entire chapter was for configuring the server and client, the hyper parameters you can pass to the flower framework.]

A common way to aggregate the model, is to average the weights.

what's data privacy in federated learning.

Privacy enhancing technologies , PETs for short. Fredarated learning in itself is a data minimizing solution, by preventing direct access to data, but exchange between client and server can lead to potential privacy leaks.

3 types of attacks

Membership inference atttack -> try to infer participation of data smaples.
Attribute inference attack -> Infer unseen attributes of the training data.
Reconstruction attack -> infer specific training data samples

Malicious server was able to reconstruct data using the model updates sent be client. ( not exact same, but quality is close )

here comes differential privacy ?
DP protects individual privacy during data analysis.
It obscures individual data by adding calibrated noise to query results which ensures that the presence or absence of any single data point does not significantly impact the outcome of the analysis.

Adding minor noise to a sensitive dataset which could potentially be in the dataset.

The level of privacy protection ?
if we remove a single data point and retain the model (M2), how different is it form the original model (M1). the models M1 and M@ are indistinguishable to a certain degree, this is quantified by the level of privacy protection we aim to achieve.

Central DP and local DP.
Clipping, bounds the sensitivity and mitigates the impact of outliers; This is the maximum amount the output can change when a single datapoint is added or removed.

Noising, Add calibrated noise to to make the output statistically indistinguable.

In central DP the central server is responsible for adding noise to the globally aggregated parameters.
In local DP, each client is responsible for performing DP, this needs to be done before sending the updated model to the server.

it takes a lot of time for convergence and more time needs to be spent on rounds.

How to discuss bandwidth ?

bandwidth requirement for a frederated learning system: The server sends the models to the client to update but when the client sends back the compressed model.

(model_size_out + model_size_in ) * cohort_size * fraction_selected * number_of_rounds

To reduce bandwidth usage
reduce update size:

Sparsification: if the gradients to be communicated are below a certain threshold, you skip the update. This is likely towards the end of the cycle where the updates are not very drastic.
Quantization is to reduce the number of bits to represent scalar, this reduces the size further.

communicate less

Use pre-trained models, we may not need to train every single layer and only communicate modified layer.
Train more epochs locally and send the model to server later. This may cause a delay in convergence as the models diverge more and more with each round that it does not pass to the server.

Discord Bot in Typescript hosted on Heroku

Midas/XIV — Mon, 13 Jul 2020 20:26:37 +0000

Hey guys! been a long time since I wrote an Article on Dev!
for the last few months I have been trying to develop using Typescript and host my own apps.

Since Glitch.me decided to ban pinging services like Uptime Robot which was commonly used to host Discord bots along with Glitch. So It was the perfect opportunity to practice my Typescript on this Bot and host on Heroku.

So here's a short and detailed article on how you can setup your own discord Bots written in typescript.


Add Discord Bot to your Server	Code your Bot	Deploying Bot on Heroku

➡️ STEP 1: Add Discord Bot to your Server

Screens	Steps
	1. Open Discord developers portal Click `New Application`
	2. Give your BOT a new name and click `Create`
	3. Customize your bot by giving an Image and description.
	4. Under the `Bot` tab, click `Add Bot`
	5. Set `Icon` and `Username`
	6. Go to `OAuth2` tab. Tick the `bot` checkbox under scopes. You can customize your BOT by setting the Bot Permissions. Note changing the permissions updates the `link` that'll be used to invite your bot to your server.
	Inviting Your Bot when you open the link from the step above, in a new tab you'll see the following page and now you can add the bot to any of your server

find detailed steps here

STEP 2: Code your Discord Bot

Get your Bot's token, for this you must go back to the developer portal, select your bot and go to the Bot tab, there you can find your Bot's token.
The simplest way to code your bot would be to fork this repo and then work on bot-template branch.
alternatively you can clone the repository specifically the bot-template branch.

   $ git clone -b bot-template --single-branch https://github.com/MidasXIV/hive-greeter.git

Next create an .env file in the root of the repository and add your token like so:

   token=TOKEN_WHICH_YOU_GOT_FROM_DISCORD

the .env file takes in key and value pair so here the key is token, if you wish to give a different token name then make sure you update the same in src/sonfig/secrets.ts file, as it looks for the "token" key.

   export const DISCORD_TOKEN = process.env["token"];

Now it's time to install and build the project

   $ npm install
   $ npm run start

you can view the NPM SCRIPTS in the package.json file, running the start command should build project and run the bot on http://localhost:5000/; you can modify the port in src/index.ts file.

On Successfully building and running the project you'll see

   Server started on port 5000
   Hive Greeter has started

You should now be able to see your Bot online in your discord Server.

To get you started the template consists of two commands greet and time to test your bot, go to any text channel of your server and type in > greet, you'll see your bot reply as such
To Add more commands you must add a new class in src/commands folder taking into reference greetCommand.ts file, then you should export the class using the src/commands/index.ts file so you can easily import it from your src/CommandHandler.ts.
You can update the "prefix" ( > ) of the bot from the src/config/botConfig.ts file.

➡️ STEP 3: Deploying Bot on Heroku

Install Heroku Cli
login with your Heroku account credentials when you run

   $ heroku login

Now create an app with name your-app-name by running:

   $ heroku create your-app-name

add a Git remote named heroku pointing to Heroku:

   $ git remote add heroku https://git.heroku.com/your-app-name.git

Integrating Heroku with GitHub, This step is required if you plan on automatically deploying your bot every time you push changes to a GitHub repository. (detailed steps here)

Select your app from the Heroku Dashboard.
Go to Deploy tab of app,
- Enabling GitHub integration: To configure GitHub integration, you have to authenticate with GitHub. You only have to do this once per Heroku account.
- App Connected to Github: you have to select the repository with your Bot.
- Automatic deploys: When you enable automatic deploys for a GitHub branch, Heroku builds and deploys all pushes to that branch.

Testing your setup, This step is not required, but it's highly recommended. You should build your application locally to test if you've set up it correctly.

$ heroku local

The Heroku CLI will now run your app at http://localhost:5000/; if no errors are encountered, you're on the right track!

Go to Settings tab of app to set your discord bot token in config vars section.
Deploying your bot Upon reaching this step you should have:
- developed a functioning Discord bot
- setup your repository for Heroku deployment

If all goes well, you can now deploy your app to Heroku by running:

   $ git push heroku master

Note: If you have setup Automatic Deploys, you'll able to deploy your app with every commit to your master branch.

On completion of the above steps Heroku Cli will give you a link to your hosted app something like this:
https://you-app.herokuapp.com. Most often than not you'll run into issues with your first deployment as might have some dependencies in dev-dependencies or some config issues.

if you run into any issues run

heroku logs --tail

find detailed steps here

If you come across any issues, please do let me know in the comments down below :)

you can find the repository here:

MidasXIV / hive-greeter

Discord bot created using Typescrit and Discord js hosted on Heroku


Add Discord Bot to your Server	Code your Bot	Deploying Bot on Heroku

STEP 1: Add Discord Bot to your Server

Reveal Steps

Screens	Steps
	1. Open Discord developers portal Click `New Application`
	2. Give your BOT a new name and click `Create`
	3. Customize your bot by giving an Image and description.
	4. Under the `Bot` tab, click `Add Bot`
	5. Set `Icon` and `Username`
	6. Go to `OAuth2` tab. Tick the `bot` checkbox under scopes. You can customize your BOT by setting the Bot Permissions. Note changing the permissions updates the `link` that'll be used to invite your bot to your server.
	Inviting Your Bot when you open the link from the step above, in a new tab you'll see the following page and now you can add the bot to any of your server

find detailed steps here

STEP 2: Code your Discord Bot

Reveal…

View on GitHub

Object Oriented Programming : for self taught developers.

Midas/XIV — Sat, 11 Jan 2020 14:51:00 +0000

Hey guys so I've been reading about design patterns and I had a lot of difficultly picking it up.
I later realized it might be because my primary language of choice is JavaScript which is a functional programming language.
Even though JavaScript did provide classes in ES6 update, I personally never got around using it and now that I have finally switched to TypeScript I had an inventive to learn about Object Oriented Programming.

So in a nutshell the first step to learning Design Patterns would be to understand Object Oriented Programming. So here's a short excerpt which made me realize what is Object in Object Oriented Programming and i think this would make a great start to my next series which is going to be about "Design Patterns in TypeScript". ( GitHub repo link at the bottom of the article )

How do people do things ?

Let’s say that you were an instructor at a conference. People in your class had another class to attend following yours, but didn’t know where it was located. One of your responsibilities is to make sure everyone knows how to get to their next class.

If you were to follow a structured programming approach, you might do the following:

Get list of people in the class.
For each person on this list:
1. Find the next class they are taking.
2. Find the location of that class.
3. Find the way to get from your classroom to the person’s next class.
4. Tell the person how to get to their next class.

To do this would require the following procedures:

A way of getting the list of people in the class
A way of getting the schedule for each person in the class
A program that gives someone directions from your classroom to any other classroom
A control program that works for each person in the class and does the required steps for each person

Doubtful you’d follow this approach

I doubt that you would actually follow this approach. Instead, you would probably post directions to go from this classroom to the other classrooms and then tell everyone in the class, “I have posted the locations of the classes following this in the back of the room, as well as the locations of the other classrooms. Please use them to goto your next classroom.” You would expect that everyone would know what their next class was, that they could find the classroom they were to go to from the list, and could then follow the directions for going to the classrooms themselves.

What is the difference between these approaches?

In the first one—giving explicit directions to everyone — you have to pay close attention to a lot of details. No one other than you is responsible for anything. You will go crazy!
In the second case, you give general instructions and then expect that each person will figure out how to do the task him-self or herself.

Shifting responsibility from yourself to individuals . . .

The biggest difference is this shift of responsibility. In the first case, you are responsible for everything; in the second case, students are responsible for their own behavior. In both cases, the same things must be implemented, but the organization is very different.

What is the impact of this?

To see the effect of this reorganization of responsibilities, let’s see what happens when some new requirements are specified.

Suppose I am now told to give special instructions to graduate students who are assisting at the conference. Perhaps they need to collect course evaluations and take them to the conference office before they can go to the next class. In the first case, I would have to modify the control program to distinguish the graduate students from the undergraduates, and then give special instructions to the graduate students. It’s possible that I would have to modify this program considerably.

However, in the second case—where people are responsible for themselves. I would just have to write an additional routine for graduate students to follow. The control program would still just say, “Go to your next class.” Each person would simply follow the instructions appropriate for himself or herself.

Why the difference?

This is a significant difference for the control program. In one case,it would have to be modified every time there was a new category of students with special instructions that they might be expected to follow. In the other one, new categories of students have to be responsible for themselves.

There are three different things going on that make this happen.
They are:

The people are responsible for themselves, instead of the control program being responsible for them. (Note that to accomplish this, a person must also be aware of what type of student he or she is.)
The control program can talk to different types of people (graduate students and regular students) as if they were exactly the same.
The control program does not need to know about any special steps that students might need to take when moving from class to class.

The Object-Oriented Paradigm

The object-oriented paradigm is centered on the concept of the object. Everything is focused on objects. I write code organized around objects, not functions.
The advantage of using objects is that I can define things that are responsible for themselves.
Objects inherently know what type they are. The data in an object allow it to know what state it is in and the code in the object allows it to function properly (that is, do what it is supposed to do).

This Object	Is Responsible For
Student	Knowing which classroom they are in Knowing which classroom they are to go to next. Going from one classroom to the next Instructor. Telling people to go to next classroom
Classroom	Having a location
Direction giver	Given two classrooms, giving directions from one classroom to the other

In this case, the objects were identified by looking at the entities in the problem domain. I identified the responsibilities (or methods)for each object by looking at what these entities need to do. This is consistent with the technique of finding objects by looking for the nouns in the requirements and finding methods by looking for verbs, this technique to be quite limiting. but, it is a way to get us started.

The best way to think about what an object is, is to think of it as something with responsibilities. A good design rule is that objects should be responsible for themselves and should have those responsibilities clearly defined. This is why I say one of the responsibilities of a student object is knowing how to go from one classroom to the next.

Working with objects in the example.

Writing the “Go to the next classroom” example using an object-oriented approach is much simpler. The program would look like this:

Start the control program.
Instantiate the collection of students in the classroom.
Tell the collection to have the students go to their next class.
The collection tells each student to go to their next class.
Each student:
1. Finds where his next class is
2. Determines how to get there
3. Goes there
Done.

Object-Oriented Terminology

Term	Definition
Abstract class	Defines the methods and common attributes of a set of classes that are conceptually similar. Abstract classes are never instantiated.
Attribute	Data associated with an object (also called a data member).
Class	Blueprint of an object—defines the methods and data of an object of its type.
Constructor	Special method that is invoked when an object is created.
Encapsulation	Any kind of hiding. Objects encapsulate their data. Abstract classes encapsulate their derived concrete classes.
Derived class	A class that is specialized from a superclass. Contains all of the attributes and methods of the superclass but may also contain other attributes or dif-ferent method implementations.
Destructor	Special method that is invoked when an object is deleted.
Functional decomposition	A method of analysis in which a problem is broken into smaller and smaller functions.
Inheritance	The way that a class is specialized, used to relate derived classes from their abstractions.
Instance	A particular object of a class.
Instantiation	The process of creating an instance of a class.MemberEither data or method of a class.
Method	Functions that are associated with an object.
Object	An entity with responsibilities. A special, self-contained holder of both data and methods that operate on that data. An object’s data are protected from external objects.
Polymorphism	The ability of related objects to implement methods that are specialized to their type.
Superclass	A class from which other classes are derived. Contains the master definitions of attributes and methods that all derived classes will use (and possibly will override).

Here's the GitHub repo I've begun to maintain regarding my learning experience of Design Patterns. It would be awesome to have some contributions in terms of setting up issue templates and what not as I don't have experience doing so.

MidasXIV / Design-Patterns-in-TypeScript

Elements of Reusable Object-Oriented Software

Design Patterns in TypeScript

Creational Design Patterns | Structural Design Patterns | Behavioral Design Patterns

In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.

This article assumes you are reasonably proficient in at least one object-oriented programming language, and you should have some experience in object-oriented design as well. You definitely shouldn't have to rush to the nearest dictionary the moment we mention "types" and "polymorphism," or "interface" as opposed to "implementation / inheritance”
But I'll try to keep the literature as simple as possible.

Don't worry if you don’t understand

…

View on GitHub

Note : the only intent of this article is to raise awareness about the book and maybe point to concepts self taught programmers maybe unaware of.

This is a short excerpt from the book Design Patterns Explained Book by Alan Shalloway and James R. Trott.

Happy coding :D.

ES6 Promise | Promise.all | Promise.race | Promise.allSettled

Midas/XIV — Sat, 26 Oct 2019 11:36:52 +0000

Promise State Definitions

State	Definition
Fulfilled	When a promise is resolved successfully
Rejected	When a promise failed.
Pending	When a promise is “neither fulfilled nor rejected“.
Settled	Not really a state but an umbrella term to describe that a promise is either fulfilled or rejected.

Hey guys ! Once again I'm back with an indepth video were we discuss ES6 Promises. I know that async/await is the new way people prefer to deal with async code but I think it's always good to know about callback functions, promises, and promise methods.

Also In this video we take a look at Promise.allSettled( ) method which is part of ECMAScript 2020 and can be used in the latest release of Node.js.

In this video we'll have a look at how to convert a request which uses callback functions to request that returns a promise. We'll have a look at how to avoid callback hell by promise chaining.
We'll then have a look at promise methods like: Promise.al(),Promise.race(),Promise.any(),Promise.allSettled(),

For those of you who don't use node.js this is a basic template to follow along.
Code Pen : https://codepen.io/midasxiv/pen/RwwoxvX
Make sure you view the 'console' somewhere in the bottom left.

Video Index:

01:44 - Request Package. ( node.js )
03:30 - Request Callback function.
06:10 - Promise Constructor / Convert callback to promise. (pure JavaScript )
11:20 - Promise Chaining & Promise.then()
12:43 - Promise.catch() & Promise.reject()
14:23 - Promise.all()
17:30 - Promise.race()
19:30 - Promise.any()
19:30 - Promise.allSettled()
22:00 - Outro

If you liked the content checkout my youtube channel.
YouTube video :

JavaScript Destructuring | All you need to know

Midas/XIV — Sun, 13 Oct 2019 20:27:49 +0000

Hey guys, so I've been continuing to look into ES6 features and just absolutely essentials things to know in JavaScript, like IIFE, "use strict", closures, hoisting, etc and I keep avoiding a certain topic as it straight up looks intimidating and confusing, for example:

var pokemon =  {
    id: 25,
    name: 'Pikachu',
    type: ['electric'],
    ability: {
      primary: 'Static',
      hidden: 'Lightning Rod'
    },
    moves: ['Quick Attack', 'Thunderbolt', 'Iron Tail', 'Volt Tackle'],
    competative: [
      { weakness: ['Ground'] },
      { resistance: ['Flying', 'Steel', 'Electric'] }
    ]
  };

var returnMoves = function({moves}){
  return moves;
}

var returnAbilities = function({ability}){
  return ability;
}

console.log(returnMoves(pokemon));
// ["Quick Attack", "Thunderbolt", "Iron Tail", "Volt Tackle"]
console.log(returnAbilities(pokemon));
// { hidden: "Lightning Rod", primary: "Static" }

as you can see we're passing the same object (pokemon) argument to two different functions and we get completely different outputs.

So let's get started; "Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables"-MDN, so let's start with a few basic example.

Lot of code ahead !

1. Basic Array Destructuring

(() => {
    "use strict";
    let pokemonTypes = ['electric', 'flying', 'fire', 'grass'];
    let pikachu, pidgey, charizard, venusaur;

    // pikachu   = pokemonTypes[0];
    // pidgey    = pokemonTypes[1];
    // charizard = pokemonTypes[2];

    // Skipping Values and default values.
    [pikachu, , charizard, venusaur = 'NONE'] = pokemonTypes;

    console.log(`Pikachu   - ${pikachu}`);     // electric
    console.log(`Pidgey    - ${pidgey}`);      // undefined
    console.log(`Charizard - ${charizard}`);   // fire
    console.log(`Venusaur  - ${venusaur}`);    // grass

})();

So we'll start with array destructuring, so let's say we need to get the values of the array into individual variables the simplest way to do this is write variable = Array[index] but when we have multiple assignments it can make the code slightly verbose.
So to destructre the array we first declare variables in our case pikachu,pidgey,charizard then we simply write these variables within box brackets and assign it the whole array like so:

[pikachu, pidgey, charizard] = pokemonTypes;

as you'll notice we have 4 array members but only 3 variables, does that mean charizard gets the last two values ? fire and grass. ( being a pokemon fan this would be kinda sick especially if it had levitate or something ) but that is not the case, charizard only receives the corresponding member which fire. So to receive the "rest" of the members the destructuring assignment has something called the "Rest element", it is as follows :

[pikachu, pidgey, ...hackedCharizard] = pokemonTypes;

So now hackedCharizard becomes the rest element which means it recieves the rest of the elements after the second member of the array giving it value fire and grass. the rest element must be the last element, if it is not you'll get an error.

Now let's say we wish to skip one of the members of the array we can do this by simply skipping the variable in it's place as follows.

[pikachu, , ...hackedCharizard] = pokemonTypes;

So we skipped pidgey, if we checkout the value of pidgey it would give us undefined. we can also give our variables default values in case the array doesn't have a member corresponding to it.

let pokemonTypes = ['electric', 'flying', 'fire'];
[pikachu, pidgey , charizard, venusaur = 'NONE'] = pokemonTypes;
//['electric','flying','fire','NONE'] 

pokemonTypes = ['electric', 'flying', 'fire','grass'];
[pikachu, pidgey , charizard, venusaur = 'NONE'] = pokemonTypes;
//['electric','flying','fire','grass']

But when we have an array member to assign it a value, it overrides our default value.

I think that's all there is to array destructuring, if I missed anything let me know, I'll gladly update.

2. Swapping two variables using Destructuring.

let a = 34, b = 89;

console.log(`OLD - a :: ${a} | b :: ${b}`);  // OLD - a :: 34 | b :: 89`

// Swap two variables
// let temp = a;
// a = b;
// b = temp;

// Destructuring assignment

[a,b] = [b,a];

console.log(`NEW - a :: ${a} | b :: ${b}`); // NEW - a :: 89 | b :: 34

So another cool use of destructuring is to swap variable values, we simply write the variables in box bracket on the LHS and write the variables we want in order you require in RHS.
This can also be done with 3 variables or any number.

3. Basic Object Destructuring.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
};
let { type, name, moves } = pokemon;

console.log(`Name      :: ${name}`);
console.log(`Type      :: ${type}`);
console.log(`moves     :: ${moves}`);

When destructuring an object we write the variables in curly bracket instead of the box bracket, also notice how we can write the variables in any order this is because the variable name is the exact same as the property of the object. Checkout the next section for some advanced usage.

4. Naming Variables & Nested Object Destructuring.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
};
let {
    type,
    name: MXIV,
    moves,
    ability: {
        primary: primaryAbility,
        hidden: hiddenAbility
    },
    moves: [firstMove, , lastMove]
} = pokemon;

console.log(`Name      :: ${MXIV}`);
console.log(`Type      :: ${type}`);
console.log(`moves     :: ${moves}`);
console.log(`ability   :: ${primaryAbility}`);
console.log(`ability   :: ${hiddenAbility}`);
console.log(`1st Move  :: ${firstMove}`);
console.log(`last Move :: ${lastMove}`);

In this section we'll mainly try to rename the variable and also do nested destructuring. To do this we must write the variable name then the custom variable like so.

let { name: MXIV } = pokemon;
console.log(`Name  :: ${MXIV}`);  // pikachu

when you rename the variable we can no longer use the original variable in our case we can no longer use "name" but only "MXIV".

Next let's try to destructure nested properties, to do this we must write the property then colin then curly brackets and then the nested property name, to give this a custom variable name we simply write the property name then colin and finally the custom variable name, like so:

let { ability: {
        primary: primaryAbility,
        hidden: hiddenAbility
    }
} = pokemon;

console.log(`ability   :: ${primaryAbility}`);  // Static
console.log(`ability   :: ${hiddenAbility}`);   // Lightning Rod

5. Difference between Array and Object Destructuring.

let arr = [10, 20];
let one, two;
[one, two] = arr;

console.log(`${one} ${two}`);

let obj = { prop1: 'mxiv', prop2: 'UAE' };

let name, location;
({ prop1: name, prop2: location } = obj);

console.log(`${name} ${location}`);

In case of array destructuring we can declare our variables without assigning them immediately, but when you try to do the same for objects, you wont be able to do the same.

let obj = { prop1: 'mxiv', prop2: 'UAE' };

let name, location;
// { prop1: name, prop2: location } = obj //gives error

// you need place the assignment in round brackets
({ prop1: name, prop2: location } = obj);

6.- Filtering arguments to functions using Destructuring

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": [
        "Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"
    ],
    "competative": {
        "weakness": ["ground"],
        "strengths": ["water", "flying"],
        "resistances": ["electric", "flying", "water", "steel"]
    }
};

const getWeakness = ({competative:{weakness:isWeakTo}})=>{
    return isWeakTo;
};

const getStrengths = ({competative:{strengths:isStrongTo}})=>{
    return isStrongTo;
}

const getResistances = ({competative:{resistances:isResistantTo}})=>{
    return isResistantTo;
}

const getMoves = ({moves})=>{
    return moves;
}

const stat = ({name = 'NOT DEFINED' , competative:{weakness}})=>{
    return `${name} is weak to - ${weakness}`;
}

console.log(`Weakness    :: ${getWeakness(pokemon)}`);
console.log(`Strengths   :: ${getStrengths(pokemon)}`);
console.log(`Resistances :: ${getResistances(pokemon)}`);
console.log(`Moves       :: ${getMoves(pokemon)}`);

console.log(stat(pokemon));

This is self explanatory , the idea is that sometimes you just don't have all parameters to a function and instead of making the call by passing in empty parameters or null, it's better to use destructuring and assign a default value right in the argument definition.

7. Filtering response from an API call using Destructuring.

let pokemon = {
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
};

const getAbilities = ({ability})=>{
    return ability;
}

let {primary:primaryAbility} = getAbilities(pokemon);
let {hidden:hiddenAbility} = getAbilities(pokemon);
console.log(primaryAbility);
console.log(hiddenAbility);

Once again one of the best usage of destructuring, I didn't want to make an API call but in the above example the getAbilities() function returns an object with hidden and primary ability. You can directly filter them instead of writing response.property or response.property.nestedProperty

8. For of iteration using Destructuring.

let pokemons = [{
    "name": "Pikachu",
    "id": 25,
    "type": "electric",
    "ability": {
        "primary": "Static",
        "hidden": "Lightning rod"
    },
    "moves": ["Quick Attack", "Volt Tackle", "Iron Tail", "Thunderbolt"]
}, {
    "name": "Charizard",
    "id": 6,
    "type": "fire",
    "ability": {
        "primary": "Blaze"
    },
    "moves": ["flame thrower"]
}];

for (let {name,type,moves,ability:{primary:primaryAbility}} of pokemons) {
    console.log(`${name} is type ${type}`);
    console.log(`has moves ${moves}`);
    console.log(`Primary Ability is :: ${primaryAbility}`);
    console.log();

}

So the main thing to know here is the difference between "for of" and "for in" when we use "for of" we get the value of the array member rather than the index.

let arr = [10,20,304,50];
for( let i in arr) { console.log(i); } // 0 1 2 3
for( let i of arr) { console.log(i); } // 10 20 304 50

So in our case in place of "i" we have our destructuring assignment.

This is greatly inspired by a post I saw on Facebook on a page called Coding with Daniel; I would personally have never thought of using destructuring in such a way.

Scopes Hoisting Closures | Tricky Interview questions

Midas/XIV — Fri, 04 Oct 2019 15:23:20 +0000

The following will be a short explanation, along with some solutions, of popular JavaScript questions that tends to get asked in developer interviews. In this post we'll be taking a look at some
tricky questions in the topic of scopes hoisting and closures in JavaScript.

So before we start lets just get an overview of these terms.

Scope is determining where variables, functions, and objects are accessible in your code during run-time.
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
Closure gives you access to an outer function's scope from an inner function.

Question 1

var variable = 10;
(()=>{
   console.log(variable);
   var variable = 20;
   console.log(variable);
})();

can you guess the output ? to help you the output is one of these.

10 20
undefined 20
20 20

the correct answer is undefined 20 because of something called hoisting.
so javascript views the above snippet as something as follows:

var variable = 10;
(()=>{
   var variable;
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

javascript leaves the variable assignment ( variable = 20 ) as is and takes the variable declaration ( var variable; ) to the top of the "function scope".
hence the variable is never initialized before the first console log.

So a quick backstory until ES2015 or ES6 variables couldn't be declared using anything other than var. So in the above case if we use let. let's see what we get.

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   let variable = 20;
   console.log(variable);   // 20
})();

this gives us a reference error as "hoisting" does happen in 'let' and 'const' but it's not the same as using 'var'; variables declared using 'let' and 'const' enter something called 'the temporal dead zone' which simply means you cannot use those variables before they're defined, and if anyone's wondering if the top variable is changed to let it'll simply give us an error saying re-declaration of variable.

Question 2

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

once again the options are :

10 20
undefined 20
20 20

the answer to this one is pretty simple, 10 and 20 this is because of "closures" as the first console log gets its value from the variable described outside its scope.

Now that we covered the basic topics it's time for some advanced questions.

Question 3

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
var variable = 30;
console.log(variable);

the options to this questions:

undefined 20 30
10 20 30
undefined 20 10

The answer to this one is also pretty simple 10 20 30 but here's how javscript interprets the snippet. The first and the last declaration both undergo hoisting but in the same scope.

var variable;
variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
variable = 30;
console.log(variable);

Question 4

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   var variable = 20;
   console.log(variable);   // 20
})();

console.log(variable);
var variable = 30;

This question is definitely one of the trickier question as all the declarations undergo hoisting.
The options are:

undefined 20 30
10 20 30
undefined 20 10

So I'm sure people are going to have a hard time with this one. So you make think the answer is undefined 20 30 but here's how the program is interpreted:

var variable;
variable = 10;
(()=>{
   var variable;
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();
console.log(variable);
variable = 30;

after looking at the above snippet I'm sure its quite evident the answer would be undefined 20 10

Question 4

var variable = 10;
(()=>{
   console.log(variable);   // undefined
   variable = 20;
   console.log(variable);   // 20
})();

console.log(variable);
var variable = 30;

here's a small variation of the above question.
the options are

undefined 20 30
undefined 20 10
undefined 20 20
10 20 20
10 20 30
10 20 10

quite a lot of options this time!
The core idea behind this question is how the first and third declaration undergo hoisting and the second variable because of 'closure' is able to change 'variable'. The answer to this question is 10 20 20

Final question

var variable = 10;
(()=>{
   variable_3 = 35;
   console.log(variable_3);
   var variable_3 = 45;
   variable_2 = 15;
   console.log(variable);   // 20
})();

console.log(variable_2);
console.log(variable_3);
var variable=30;

There are no options for this question, Let me know the answers below :D.

"use strict"; in javascript

Midas/XIV — Tue, 24 Sep 2019 20:32:01 +0000

Hey guys, so full disclosure; I have been working as a product engineer and I had the task to quickly prototype a feature and a long story short I basically asked a few of the other members for help since I couldn't get a certain POST request to work right, and after a few hours in and since all of them said the way the POST request was being made is pretty much right, I decided to debug the application and by this moment the application was extremely complex and branched.
So just when I was about to begin, one of my coworkers asked if he could checkout the code and as i scrolled to the POST request i realized I had misspelled a variable and my coworker saw that and that's when he told me about "use strict" so that's pretty much when I took a moment to read up about it and thought it's something that everyone starting JavaScript should definitely know.

The "use strict" directive was new in ECMAScript version 5 (around since 2011) and forces a program (or function) to work under a “strict” operating context. It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. With strict mode on it is easier to detect JavaScript silent errors as they would throw an error now. This makes debugging much easier and the chances of developers making mistakes is reduced. Most modern browsers support strict mode except Internet Explorer 9.

so why exactly is "use strict" a string ?

If an older browser saw the "use strict" string it would consider it as a string and simply ignore it executing without enabling the strict mode as it is just a string Internet Explorer 9 will not throw an error even if it does not understand it, in a new browser when it sees the keyword used strict it then knows to turn itself into strict mode operating.

enabling strict mode !

Strict mode can be used in two ways

used in global scope

// Whole-script strict mode syntax
'use strict';
var v = "Hi! I'm a strict mode script!";

used in functions

// not strict
function strict() {
    // Function-level strict mode syntax
    'use strict';
    return "Hi!  I'm a strict mode function!  ";
}
// not strict

"strict mode"; reports errors on the following:

Using a variable, without declaring it.
Using an object, without declaring it.
Using reserved keywords as variable names.
Deleting a variable (or object) is not allowed.
Deleting a function is not allowed.
Duplicating a parameter name is not allowed.
The word eval cannot be used as a variable.
For security reasons, eval() is not allowed to create variables in the scope from which it was called.

Examples

Using variable / object without declaring it. ( helps is you misspelled a variable )

'use strict';
var uniqueValue = 23;
uniquValue = 17;         // this line throws a ReferenceError due to the 
                                    // misspelling the variable

unknownValue = 25;      // this line also throws a ReferenceError as variable is not declared

Would result in a new global variable (as in unknownValue and uniquValue) created, and uniqueValue would remain untouched. Under strict mode, assigning a value to an undefined variable will throw a ReferenceError.

Using reserved words to declare variables. ( future proof your code )

var let = 24;
console.log(let) // will output 24

"use strict";
var let = 24;
console.log(let) // will raise an error

Keywords reserved for future JavaScript versions can NOT be used as variable names in strict mode.
These are: implements,interface,let,package,private,protected,public,static,yield.

Deleting variables, object, functions in strict mode raises error.

"use strict";
var variable = 23;
var obj = { 'name':'mxiv' };
function func(p1, p2 ) {
    console.log("Hello");
}
delete variable; // will raise error
delete obj; // will raise error
delete func; // will raise error

Function arguments cannot be deleted and have same name.

"use strict";
function func(p1, p2 ) {
    console.log("Hello");
    delete(p1); // raises error
}

function func2(p1,p1) { // raises error
    console.log("hey");
}

Eval restrictions.

eval('var variable = 2;');
console.log(variable); // displays 2 as the variable is leaked out of the eval function.

when strict mode is used eval does not leak variables declared in the expression passed to it.
hence for security reasons in strict mode eval is not allowed to create variables in the scope from which it was called this brings us to the end of this article.

DEV Community: Midas/XIV

Federated Learning

Discord Bot in Typescript hosted on Heroku

➡️ STEP 1: Add Discord Bot to your Server

STEP 2: Code your Discord Bot

➡️ STEP 3: Deploying Bot on Heroku

MidasXIV / hive-greeter

Discord bot created using Typescrit and Discord js hosted on Heroku

STEP 1: Add Discord Bot to your Server

STEP 2: Code your Discord Bot

Object Oriented Programming : for self taught developers.

How do people do things ?

What is the difference between these approaches?

Shifting responsibility from yourself to individuals . . .

Why the difference?

The Object-Oriented Paradigm

Working with objects in the example.

Object-Oriented Terminology

Term

Definition

Abstract class

Defines the methods and common attributes of a set of classes that are conceptually similar. Abstract classes are never instantiated.

Attribute

Data associated with an object (also called a data member).

Class

Blueprint of an object—defines the methods and data of an object of its type.

Constructor

Special method that is invoked when an object is created.

Encapsulation

Any kind of hiding. Objects encapsulate their data. Abstract classes encapsulate their derived concrete classes.

Derived class

A class that is specialized from a superclass. Contains all of the attributes and methods of the superclass but may also contain other attributes or dif-ferent method implementations.

Destructor

Special method that is invoked when an object is deleted.

Functional decomposition

A method of analysis in which a problem is broken into smaller and smaller functions.

Inheritance

The way that a class is specialized, used to relate derived classes from their abstractions.

Instance

A particular object of a class.

Instantiation

The process of creating an instance of a class.MemberEither data or method of a class.

Method

Functions that are associated with an object.

Object

An entity with responsibilities. A special, self-contained holder of both data and methods that operate on that data. An object’s data are protected from external objects.

Polymorphism

The ability of related objects to implement methods that are specialized to their type.

Superclass

A class from which other classes are derived. Contains the master definitions of attributes and methods that all derived classes will use (and possibly will override).

MidasXIV / Design-Patterns-in-TypeScript

Elements of Reusable Object-Oriented Software

Design Patterns in TypeScript

ES6 Promise | Promise.all | Promise.race | Promise.allSettled

Promise State Definitions

Video Index:

JavaScript Destructuring | All you need to know

1. Basic Array Destructuring

2. Swapping two variables using Destructuring.

3. Basic Object Destructuring.

4. Naming Variables & Nested Object Destructuring.

5. Difference between Array and Object Destructuring.

6.- Filtering arguments to functions using Destructuring

7. Filtering response from an API call using Destructuring.

8. For of iteration using Destructuring.

Scopes Hoisting Closures | Tricky Interview questions

Question 1

Question 2

Question 3

Question 4

Question 4

Final question

"use strict"; in javascript

so why exactly is "use strict" a string ?

enabling strict mode !

"strict mode"; reports errors on the following:

Examples