Object Destructuring

const person = {
name: “Sumon”,
roll: 123,
group: “IT”
}

var {name, group} = person;

console.log(name); // Sumon
console.log(group); // IT

Assignment without declaration:
A variable can be assigned its value with destructuring separate from its declaration.

var name, roll;
({name, roll} = {name: “Sumon”, roll: 1});

console.log(name); // Sumon
console.log(roll); // 1

Assigning to new variable names:
A property can be unpacked from an object and assigned to a variable with a different name than the object property.

const person = {
name: “Sumon”,
roll: 123
}

const { name: firstName, roll: classRoll } = person;

console.log( firstName ); // Sumon
console.log(classRoll); // 123

Default values:
A variable can be assigned a default, in the case that the value unpacked from the object is undefined.

const {a = 5, b = 10} = {a: 8};

console.log(a); // 8
console.log(b); // 10

Assigning to new variables names and providing default values:
A property can be both 1) unpacked from an object and assigned to a variable with a different name and 2) assigned a default value in case the unpacked value is undefined

var {a: aa = 5, b: bb = 10} = {a: 8};

console.log(aa); // 8
console.log(bb); // 10

Rest in Object Destructuring:
Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.

const person = {
name: “Sumon”,
group: “IT”,
city : “Dhaka”,
county: “Bangladesh”
}

let {name, group, …rest} = person

console.log(name); // Sumon
console.log(group); // IT
console.log(rest); // { city: ‘Dhaka’, county: ‘Bangladesh’ }

Array destructuring

var number = [1, 2, 3];

var [one, two, three] = number;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

Assignment separate from declaration
A variable can be assigned its value via destructuring separate from the variable’s declaration.

var one, two;

[one, two] = [10, 18];
console.log(one); // 10
console.log(two); // 18

Default values
A variable can be assigned a default, in the case that the value unpacked from the array is undefined.

var name, roll;

[name=”Sumon”, roll=18] = [“Mahmud”];
console.log(name); // Mahmud
console.log(roll); // 18

Swapping variables:
Two variables values can be swapped in one destructuring expression.

var a = 5;
var b = 8;

[a, b] = [b, a];
console.log(a); // 8
console.log(b); // 5

Assigning the rest of an array to a variable:

var [one, …rest] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(one); // 1
console.log(rest); // [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

JavaScript Destructuring was originally published in Oceanize Lab Geeks on Medium, where people are continuing the conversation by highlighting and responding to this story.

In this post i will describe different type of array functions. You should learn all array method to improve your JavaScript skill. I will try to make easy way to learn different type of array method.

forEach()

The forEach() method calls a provided function once for each element in an array, in order. forEach() does not execute the function for array elements without values.

Syntax
array.forEach(function(currentValue, index, arr))

Example:
var array = [1,2,3,4,5];
array.forEach(function(currentValue, index, arr){
console.log(“Current value: “+ currentValue + “ Index: “ + index + “Array: “ + arr);
})

filter()

The filter() method creates an array filled with all array elements that pass a test (provided as a function)

Syntax
array.filter(function(currentValue, index, arr))

Example:
const array = [32, 33, 16, 40];
const result = array.filter(function(age) {
return age >= 18;
})

console.log(result); // output will be [ 32, 33, 40 ]

map()

The map() method creates a new array with the results of calling a function for every array element

Syntax
array.map(function(currentValue, index, arr))

Example:
const array = [1,2,3,4,5];
const newArray = array.map(function(value){
return value + 2;
})

console.log(newArray); //Output will be [ 3, 4, 5, 6, 7 ]

sort()

This method used to arrange/sort array’s item either ascending or descending order

const arr = [1, 2, 3, 4, 5, 6];
const alpha = [‘e’, ‘a’, ‘c’, ‘u’, ‘y’];

// sort in descending order
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: [‘a’, ‘c’, ‘e’, ‘u’, ‘y’]

reduce()

The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total).

Syntax
array.reduce(function(total, currentValue, currentIndex, arr))

Example
const array = [1,2,3,4,5];
const newArray = array.reduce(function(a,b){
return a + b;
})
console.log(newArray); // Output will be 15

some()

This method check if at least one of array’s item passed the condition. If passed, it return ‘true’ otherwise ‘false’.

Syntax
array.some(function(currentValue, index, arr))

Example
const array = [1,2,3,4,5];
const newArray = array.some(function(num){
return num > 3;
})

console.log(newArray); // Output will be true

every()

This method check if all array’s item passed the condition. If passed, it return ‘true’ otherwise ‘false’.

Syntax
array.every(function(currentValue, index, arr))

const array = [1,2,3,4,5];
const newArray = array.every(function(num){
return num > 3;
})

console.log(newArray); // Output will be false

concat()

The concat() method is used to join two or more arrays.

Syntax
array1.concat(array2, array3, …, arrayX)

Example
var hege = [“Cecilie”, “Lone”];
var stale = [“Emil”, “Tobias”];
var children = hege.concat(stale);

console.log(children); // Output will be [ ‘Cecilie’, ‘Lone’, ‘Emil’, ‘Tobias’]

Thank you very much for reading my post.

JavaScript Array Functions was originally published in Oceanize Lab Geeks on Medium, where people are continuing the conversation by highlighting and responding to this story.

JavaScript is one of the most popular languages which claims to feature “First Class Functions. JavaScript meets the bellowing points for first class function feature.

1. A function can be stored in a variable
2. Function can be stored in an Array
3. Function can be stored as an Object Field or Property
4. We can create function as needed
5. We can pass function as an arguments
6. We can return function from another function
7. Function can be stored in a variable

function sum(a, b) {
return a + b;
}

var total = sum
console.log(total(10+2)); // Output will be 12

2. Function can be stored in an Array

function sum (a,b){
return a+b;
}

function div (a,b){
return a/b;
}

var arr = [1, 2, 3, sum];
arr.push(div)
console.log(arr) //[ 1, 2, 3, [λ: sum], [λ: div] ]

3. Function can be stored as an Object Field or Property

var user = {
name: “John”,
age: 24,
print: function () {
console.log(‘Hi’);
}
};

console.log(user); //{ name: ‘John’, age: 24, print: [λ: print] }

4. We can create function as needed

var multiply = 5 * (function () {
return 5
})();
multiply; //output will be 25

5. We can pass function as an arguments

function functionOne(x) {
console.log(“Hi “ + x);
}

function functionTwo(name, callback) {
callback(name);
}

functionTwo(“Sumon”, functionOne); // Hi Sumon

6. We can return function from another function

function add() {
var counter = 9;

return function(){
counter += 1;

return counter;
}
}

var result = add();
var number = result;

console.log(number()); // output will be 10
console.log(add()()); // output will be 10

Tank you very much for reading this post.

JavaScript First Class Function was originally published in Oceanize Lab Geeks on Medium, where people are continuing the conversation by highlighting and responding to this story.

Mailtrap is a fake SMTP server for testing emails sent from the development and staging environments without spamming real customers or flooding your own and team members inboxes. It is designed to catch your test emails. Mailtrap emulates the process of sending, so we won’t deliver your emails to a real user. We just keep them for you to test and optimize your HTML email campaigns.

In this post we will share how to set up your account, easy and fast, as well as guide you through the testing process.

To create an account, visit https://mailtrap.io

You can sign up throw Gmail account, GitHub account or providing email and password. Once you’ve logged in to your account, you will get to the home page:

Open your inbox: click on the Demo Inbox. Here you will see SMTP credentials.

You can also use one of the popular framework config: CakePHP, Ruby on Rails, Symfony, Zend Framework, Django, JBoss, etc.

Choose your preferred option to see an example of how to integrate Mailtrap into your application:

Configure your development environment with appropriate Mailtrap settings and send your first test message. Go to your inbox and see your first message that sent your application.

Mailtrap offers multiple helpful options for email content verification and debugging.

HTML tab demonstrates how your message might look in the recipient’s mail client.

HTML Source tab provides you with the HTML markup

Text tab shows the plain text of your message.

Raw tab you can review the raw email data, as received from the SMTP relay. If the raw data exceeds 300 KB, you will be given the option to download it as .eml file.

Analysis is another important and highly demanded feature. In this tab Mailtrap offers spam check results and provides recommendations on how to decrease spam score, if any issues were found. same tab you will also find a Blacklists Report: Mailtrap checks whether your IP or domain has been listed in any of the commonly used blacklists. It shows resources which have been queried.

Check HTML tab to find a list of HTML/CSS properties, which might cause issues with rendering your message in specific email clients.

Reference:

Mailtrap Getting Started Guide - Mailtrap Blog

https://mailtrap.io/faq

Thank you very much for reading. Hope help this post.

Setting up Mailtrap for Email testing was originally published in Oceanize Lab Geeks on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. CSS Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage

Inline, for text

Table, for two-dimensional table data

Positioned, for explicit position of an element

Reference:

https://www.w3schools.com/css/css3_flexbox.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox

2. CSS Transitions

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

To create a transition effect, you must specify two things:

· the CSS property you want to add an effect to

· the duration of the effect

Reference:

https://www.w3schools.com/css/css3_transitions.asp

3. CSS Custom Properties (Variables)

Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes ( — ) and is case sensitive!

The syntax of the var() function is as follows:

var(custom-name, value)

Reference:

https://www.w3schools.com/css/css3_variables.asp

4. CSS Box Sizing

The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

Without the CSS box-sizing Property

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

Reference:

https://www.w3schools.com/css/css3_box-sizing.asp

5. CSS Multiple Columns

The CSS multi-column layout allows easy definition of multiple columns of text — just like in newspapers.

Reference:

https://www.w3schools.com/css/css3_multiple_columns.asp

Amazing CSS properties was originally published in Oceanize Lab Geeks on Medium, where people are continuing the conversation by highlighting and responding to this story.