Forem: Ashish Mehra

Image upload via buffer

Ashish Mehra — Thu, 29 Nov 2018 12:27:11 +0000

I'm using buffer in Node.js for image upload in cloudinary but cloudinary doesn't have any option for image transformation for buffer upload.

Is there is any package which have the ability to resize image by reading buffer and return buffer back after resizing it.

IOS & Android API Oauth implementation in Node.js

Ashish Mehra — Thu, 29 Nov 2018 05:42:46 +0000

I'm new in mobile API's development & I have to integrate fb oauth in my API for both ios and android.Is this is correct way to implement fb oauth in API ?

Destination Charges in stripe

Ashish Mehra — Wed, 24 Oct 2018 07:54:37 +0000

Here is the link of stripe documentation for creating destination charges
https://stripe.com/docs/connect/destination-charges

// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
var stripe = require("stripe")("sk_test_############");

stripe.charges.create({
  amount: 1000,
  currency: "usd",
  source: "tok_visa",
  destination: {
            account: "{CONNECTED_STRIPE_ACCOUNT_ID}",
          },
}).then(function(charge) {
  // asynchronously called
});

What CONNECTED_STRIPE_ACCOUNT_ID is ? and how I suppose to retreive it ?

[Entry] Photo Fight Application

Ashish Mehra — Sat, 12 May 2018 11:22:16 +0000

What I built

This is a simple live photo polling application which updates the chart in real time and also the count of votes in homepage. This application has admin panel which allows admin to start and stop the competition.

Admin Login :
email : admin@admin.com
password : 123456789

PUSHER CHANNELS:

I'm using 3 channels in my application :

Home Channel for updating the homepage vote counts.

Admin Channel for updating the poll chart of the admin page.

User Channel for informing the owner of a photo when the competition starts or ends.

Demo Link

https://photo-fight-app.herokuapp.com/

Link to Code

https://github.com/mashish584/photo-fight-app

How I built it

I used :

Express JS for creating the backend of this application.
mLab for for hosting Mongo Database.
Cloudinary for hosting image files.
Pusher API for notifications and live updates.
Heroku for app deployment.

Additional Resources/Info

I learned Pusher, Woaah.

Special thanks to Dev.to team for this contest, Zan Markan for clearing my doubts and Traversy Media for short and simple pusher tutorial intro series.

Is this is the right way to notify the particular user with PUSHER?

Ashish Mehra — Fri, 04 May 2018 01:44:07 +0000

https://stackoverflow.com/questions/19366545/using-pusher-api-notify-particular-user

CSS 3D cube

Ashish Mehra — Thu, 19 Apr 2018 16:28:24 +0000

In this short tutorial, I will show you how easy it is to create a 3d cube with CSS.

HTML

Here In HTML file, we have a parent div which have an id of a wrapper and a child div with a class of cube. And At last, we have six child div which represent 6 phases of a cube.

<div id="wrapper">
  <div class="cube">
    <!--Front-->
    <div></div>
    <!--Back-->
    <div></div>
    <!--Left-->
    <div></div>
    <!--Right-->
    <div></div>
    <!--Top-->
    <div></div>
    <!--Bottom-->
    <div></div>
  </div>
</div>

CSS

In CSS, first of all, we set a style for our parent div by targeting it's id #wrapper and style for our child div by targeting it's class .cube.

For wrapper, we set its width and height equal to 300px and margin to 100px auto to place the div in the center of the page and 100px off from the top.

For a cube, we set it's position to relative and width and height equal to 150px. And we also apply some degree of rotation on both X and Y axis to make it look like as a 3D object.

#wrapper{
  width:300px;
  height:300px;
  perspective:700px;
  -webkit-perspective:700px;
  margin:100px auto;
}

.cube{
  position:relative;
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(-38deg);
}

In above two styles, we have 2 new properties which allow us to create a 3D space in a browser.

Perspective create 3d space in our browser.Lower the value higher the 3d depth will be.

We're using transform-style which is common property but we set its value to preserve-3d which will set all the children of .cube in 3d space.

Here comes the final part of 3D cube we're making.

.cube div{
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(0,0,0,0.1);
}

Here, first of all, we're targeting all the child div's and setting the position of all those div's to absolute and after that we're setting the height and width of a div as 100% which is equal to (150px * 150px).

Placing the child div on Z'axis

Right now we have all those child div's over each other in same Z-axis.The best part of 3d space is that it allows us to place an item on differnt Z-axis.

This is how Z'axis looks like:

Now let's do some CSS work for setting the position of each child to make a cube.

.cube div:nth-child(1){
  transform:translateZ(75px);
  background:#237A57;
}

.cube div:nth-child(2){
  transform: rotateX(180deg) translateZ(75px);
  background:#005AA7;
}

.cube div:nth-child(3){
  transform: rotateY(-90deg) translateZ(75px);
  background:#DA4453;
}

.cube div:nth-child(4){
  transform:rotateY(90deg) translateZ(75px);
  background:#a8c0ff;
}

.cube div:nth-child(5){
  transform: rotateX(90deg) translateZ(75px);
  background:#fc4a1a;
}

.cube div:nth-child(6){
  transform:rotateX(-90deg) translateZ(75px);
  background:#f7b733;
}

Here we're targeting each child div with pseudo selector called nth-child and passing the position of div we want to style.

We just set the Z-axis of all the div to 75px which is the half of width of our cube i.e. 150/2 = 75px. And after setting up Z-axis for all child elements we're also placing each div using rotateX and rotateY in correct position on Z-axis to form a cube.

If you don't give a Z-axis value to the child div's than all those div's will rotate on same Z-axis(0 by default) which will create an image shown above.

MY PEN :

Avoid boolean values comparison with "==" in JavaScript

Ashish Mehra — Sat, 14 Apr 2018 03:22:51 +0000

All of us use "==" daily for performing the comparison in JavaScript to execute particular code block only when certain condition meets.

But do you know how "==" actually works in JavaScript?

In JavaScript "==" compare number values instead of boolean values by performing implicit coercion.

Here is a simple example :

 const a = 10;

 if(a == "10"){
     console.log("Woo! Condition is true.");
 }

In above block of code we're comparing string value of "10" with a integer value of const variable a which is 10.
So here, JavaScript will first perform implicit coercion on non-number type value i.e. "10" and will convert it into a number and then perform comparsion.

Why you should avoid comparison of boolean values with "=="?

We are now aware of the fact that "==" compare integer value type not boolean type.So comparing boolean values with "==" will not give desired result to you every time.

Examples of Wrong Implementation for value check :

Example 1

const a = 10;

if(a == true){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

Number equivalent of true is 1.
False : 10 is not equal to 1.

Example 2

const a = "1";

if(a == true){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

Number equivalent of true is 1 and a is 1.
True : 1 is equal to 1.

Examples of Correct Implementation for value check :

Example 1

const a = 10;

if(a){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

True : Because the boolean equivalent of a is true.

Example 2

const a = "1";

if(a){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

True : Because the boolean equivalent of a is true.

Example 3

const a = "";

if(a){
    console.log("Condition is true.");
}else{
    console.log("Condition is false.");
}

False : Because the boolean equivalent of a is false.

Conclusion

Try to avoid using boolean values comparison with "==". It will work for you in many cases but it is not a right way to perform a condition check.