Forem: Sayuri

Customise Cursor

Sayuri — Wed, 12 Jan 2022 07:28:08 +0000

Here's some context before we start.

Got inspired to customise the typical cursor we all use. Googled, researched, watched videos but found nothing worthwhile.

So here's an article on building your own fancy cursor.

Here's what we are building today.

Custom Cursor - Watch Video

Let's Begin:

Here's the overview:

The fancy cursor you see above is nothing but 2 divs styled in a way to appear like a ring & a dot.
Track the position of the original cursor.
Displace your customised cursor as per the position of the original cursor.
And finally, hide the original cursor.

Yes, it is that simple.

The `CustomCursor` Component:

Reverse Engineering it.

We will be importing our CustomCursor Component in the app.js in the following manner:

import "./App.css";
import CustomCursor from "./components/customCursor";

function App() {
  return (
    <div className="App">
      <CustomCursor />
       {/* Rest of your code */}
    </div>
  );
}

export default App;

Now, let's build our component.

Track the position:

Firstly, we need to track the position **of our original cursor and hence we will displace our custom cursor with respect to the **position tracked.

Use the mousemove event listener to grab x & y co-ordinates of the original cursor.
Store them in a state variable using useState. Here we are naming it position.

const [position, setPosition] = useState({ x: 0, y: 0 });

 useEffect(() => {
 document.addEventListener("mousemove", (event) => {
      const { clientX, clientY } = event;
      setPosition({ x: clientX, y: clientY });
    })
 })

clientX & clientY are the X & Y Position Coordinates extracted from event

Tip: console.log to check if you are able to access the co-ordinates

Build a Basic Custom Cursor:

Create a div(will style it as desired later).
Displace it using the positionstate variable(extracted from the event listener above).
- To move the div around we'll use top & left CSS properties combined with position:fixed
- position:fixed will remove the div from the normal document flow.

<div style={{ left: position.x, top: position.y, position:fixed}}>
  Cursor
</div>

Put the pieces together and you'll get a cursor like this 👇

Basic Custom Cursor - Watch Video

That's some good progress. Let's keep going.

Style the Custom Cursor:

It's time to beautify our cursor. Use all of your creativity and design a fancy cursor.

I'll just be styling the divs to appear like a ring & dot

Here's how the jsx looks like.

<div className="cursor ring" style={{ left: position.x, top: position.y }} />
<div className="cursor dot" style={{ left: position.x, top: position.y }} />

And here's the CSS styling.


.cursor {
  position: fixed;
}

.ring {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(165, 160, 160, 0.808);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  will-change: width, height, transform, border;
  z-index: 999;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: rgb(100, 94, 94);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
  transition-duration: 10ms;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

And there we are! We have a beautiful custom cursor followed by the original cursor.

Custom Cursor

Hide the Original Cursor

We are almost done.

We just have to hide the original cursor.

It's quite simple. Here's how we do it.

html {
  cursor: none;
}

That's all! We are done.

Now you can see a beautifully customized cursor with a smooth transition.

Final Cursor - Watch Video

Here's the code altogether.


function CustomCursor() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    document.addEventListener("mousemove", (event) => {
      const { clientX, clientY } = event;
      setPosition({ x: clientX, y: clientY });
    });
  }, []);

  return (
  <>
  <div className="cursor ring" style={{ left: position.x, top: position.y }}/>
  <div className="cursor dot" style={{ left: position.x, top: position.y }}/>
  </>
  );
}

Hope you found this valuable.

A huge shoutout to my friend Udit , The customised cursor on his portfolio got me inspired to build one.

PS: Don't just stop here, as you now know the technique go ahead and use your creativity to the fullest to design a fancy cursor.

Tip: Try adding animations on the click of the mouse.

That's it from my side today. Let me know your thoughts in the comment section.

If you liked the article give it a thumbs up.

Hope you enjoyed it, and if you did, consider supporting me 👇. It will make my day :)

%[https://www.buymeacoffee.com/sayurikamble]

Send Mails Programmatically with Sendgrid

Sayuri — Sun, 22 Aug 2021 06:36:27 +0000

Giving a little bit of background, I am working as an intern and was asked to build a portal that would send a bunch of emails at once.

And honestly, I had no idea how to do it. One of my teammates suggested looking into SendGrid.
I've spent quite some time learning and debugging & so thought of sharing my knowledge through this article. Hope this saves you some frustration and time.

In this article, we'll learn how to send email via SendGrid step-by-step through our NextJs Application.

PS: You'll be able to follow, even if you haven't worked on NextJs.

So without wasting any time
let's jump right into it.

Creating a SendGrid Account:
- Signup: Certainly, the first step would be to signup. Enter email & password and let's quickly move onto the next step
- Fill in details: In this step, SendGrid requires us to fill in some primary details.
- Domain VS Single Sender Authentication: After completing basic registration steps and confirming your email you would see this screen
If you have a domain want to send emails through your domain then go ahead and
Click on Domain Authentication and complete the necessary steps.

Or else Click on Single Sender Verification and let's look into the sender's verification in
our next step.
- Single Sender Verification: The Process is pretty straight forward but here are few fields to understand:
  - From Name: This name would appear as the sender's name.
  - From Email Address: We will use this address to send emails.
  - Reply To: This email address will receive all the replies.
Note: From Email Address & Reply To can be the same email address as well.
- API KEY: Now, it's time to get our API KEY. Go to Settings > API Keys & Click on Create API Key.
Select Full Access, Name your Key anything you want, this name for your reference
and has nothing to do with our code ahead.

Make sure you maintain a copy of the API Key somewhere, as SendGrid won't let us access
the API key again.
- Dynamic Template:
  So, this is one of the most interesting parts, creating our own custom beautiful template.
  Let's send professional templated emails.
  
  Navigate to Email API > Dynamic Templates, Click on Create a Dynamic Template
  enter any name of your choice (I have named it demo).
  
  Your screen should look like this 👇
  
  Here you'll see Template-ID, we will need this later in our code.
  
  Click on Add Version > Blank Template > Code Editor (Refer to the GIF below)
  
  I usually prefer designing a template from scratch, but you can select Sendgrid Email
  Design for some pre-designed templates and then edit in the code-editor environment.
  
  Tip: You'll also find many pre-designed templates on the internet.
  
  SendGrid Demo | Hashnode Blog - Watch Video
Let's look into Dynamic Variables:
Notice how username is wraped into {{ }} --> {{username}}.
These are called Dynamic Variables/Iterators. These variable are not static and changes from mail-to-mail.
So, when we are coding we must take care of these dynamic variables.
We will talk about this more, later in the article.

That's it for the SendGrid Account Part. Now let's write some code and see the magic to happen.
Let's get into coding:

Firstly, let's create a file and name it mail.js.

PS: I have this file in my *utils * folder.

Setting up the sendgrid API Key: To be able to send mails via SendGrid, we need to provide the Sendgrid API Key which we kept aside initially.

Here's how we do it 👇

      const sgMail = require("@sendgrid/mail");
      sgMail.setApiKey(process.env.SendGrid_API);

You should have your Sendgrid API Key in a .env file.
Your .env file should look like this 👇

       SendGrid_API = "YourApiKey"

Make sure your SendGrid API Key is not exposed or pushed to any version control
repository like (GitHub, Bitbucket, etc)

SendGrid is quite conscious about security and exposing your API Key would result in
temporary suspension of your SendGrid account.

The Logic for sending mails:

Firstly, let's take a look at the minimum needed code to send an email through SendGrid.

  const msg = {
   to: 'recipient@example.com', // Change to your reciver's email
   from: 'youremail@example.com', //mail from which you want send mails
   subject: 'Lets learn to send mails programmatically ',
   text: 'Here goes your body content',
   html: '<strong>Can send temeplated mails too!</strong>', // optional
 }  
 sgMail
 .send(msg)
 .then(() => {
   console.log('Email sent')
  })
 .catch((error) => {
   console.error(error)
 })

Now, let's understand the above code.

SendGrid requires us to pass an object, here it is named as msg

The object should primarily contain:

to : Reciever's / Recipient's email address.
from: Your email or the email from which you want to send mails.
subject: The subject of your mail.
text: The content of your mail.

Then we invoke the send function provided by SendGrid and pass in the msg object.
Then we chain it with .then & .catch as it returns a promise.

That's it! Run this file and see the mail land receiver's mailbox.

You are done! But there's one shortcoming here. It is very difficult to add complexity or custom
functionality to the above code.

Don't worry. We have a come around for the same.

Creating Email class : So, we are creating a class named Email. Even if we aren't coding in Object Oriented Programming approach, constructing a class would help us achieve reusability and would make things easier to handle. Also, it gets handy to add custom functionalities.

Also, Now we are using an HTML/CSS template to make our email look impressive.

Here's how we do it 👇

     export default class Email {
     constructor() {
       this.to = "recievers@gmail.com";
       this.name = "Reciever Name";
       this.fromEmail = "yourmail@gmail.com";
       this.fromName = "Your Name";
      }

      async sendMails() {
        const mailOptions = {
        to: this.to,
        from: {
          email: this.fromEmail,
          name: this.fromName,
          },
        templateId: "YourTemplateID", // Here goes your template-Id
        dynamic_template_data: {// dynamic data = which changes mail-to-mail
        username: this.name, // username would always be different     
      },
    };

     await sgMail.send(mailOptions).then(() => {
       console.log("Sent");
       }, console.error);
     }
  }

Here are few points to understand:

templateId: Put in your Template-Id here. SendGrid makes it extremely easy to send templated
emails. Simply put in the ID of the Template which you want to use.
dynamic_template_data: This object contains dynamic content and iterators which have a
reference to the iterators in your templates.

So here's how our mail.js should overall look 👇

     const sgMail = require("@sendgrid/mail");
     sgMail.setApiKey(process.env.SendGrid_API);
     export default class Email {
     constructor(user) {
       this.to = "recievers@gmail.com";
       this.name = "Reciever Name";
       this.fromEmail = "yourmail@gmail.com";
       this.fromName = "Your Name";
      }

      async sendMails() {
        const mailOptions = {
        to: this.to,
        from: {
          email: this.fromEmail,
          name: this.fromName,
          },
        templateId: "YourTemplateID", // Here goes your template-Id
        dynamic_template_data: {// dynamic data = which changes mail-to-mail
        username: this.name, // username would always be different     
      },
    };

     await sgMail.send(mailOptions).then(() => {
       console.log("Sent");
       }, console.error);
     }
  }

Creating a route:
I have named my file sendmails.js, feel free to name it according to your preferences.

   const router = express.Router();
   const Email = require("../utils/mail")

   router.post("/", async (req, res) => {
   try {
      await new Email().sendMails();
      res.status(200).json({
      message: "check your mail",
   });
   }catch (err) {
      console.log("err", err);
   }
  });

  module.exports = router;

Let's go through the above code step-by-step.

Firstly, let's not forget to import our Email Class --> const Email = require("../utils/mail")
Now, let's write a post request.
Then we invoke the .sendMails() method on our Email Class.
And finally we send a jsonmessage with a 200 status.
Lastly, we add a catch block for logging errors if any.

Making an API Call:

This is the last step, after this, you can start sending emails from your program/app!

Now, we have everything in place and well set up.

We just need to make an API Call.

Here's how we should do it 👇

      async function sendMails() {
       try {
           const ress = await axios.post(`/api/sendmails`, {}));
        } catch {}
      }

That's it. You are done!

Go check your inbox and take a look at your stunning templated mail.

This is how we can send emails, but don't settle here. This is the simplest and the most straightforward way.

I would recommend you to go ahead take a deep dive into SendGrid Official Docs and build amazing applications.

That's it from my side today. Let me know your thoughts in the comment section.

If you liked the article give it a thumbs up.

Hope you found value, and if you did consider supporting me here

Introduction to Functional Programming

Sayuri — Wed, 24 Feb 2021 10:46:50 +0000

In Functional Programing, we want express our whole program in terms of functions.
Functional Programing is Declarative. Which means we focus more on ** what to do ** instead of How to do

First lets understand why Functional Programming is so important.
Functional Programming enables us to

Write re-useable code.
Debug easily.
Read better.

Functions are 1st Class Citizens
because functions can be :

Assigned to variables.
Can be added to objects and arrays as well .
Sent to other functions as a argument.
Can be Returned from other functions.

Let's get right into it.

Non Functional Way

let name = "Sayuri" ;
let message = "Hey, fellow devs, I am " ;
console.log(message + name)

---> Hey, fellow devs, I am Sayuri

Functional Way

function message(name) {
    return "Hey, fellow devs, I am " + name ;
}

message("Sayuri")

---> Hey, fellow devs, I am Sayuri

--> Pure Functions

A Pure Function is a function which,
Given the same input, will always return the same output.

A Pure Function :

Takes in at least 1 parameter.
Return Something (A value or a function).
Does not mutates any arguments.

Not Pure

let name = "Sayuri" ;

function message(){
    console.log("Hey, fellow devs, I am " + name )
}

The above code is not pure because

--> It is not taking name as an parameter.
--> It's dealing with something in the global scope.
--> Also it not having a return value.

Pure Functions have no side effects which means it cannot alter anything outside the function.

Pure Function

function message(name) {
   return "Hey, fellow devs, I am " + name
}

Higher Order Function

A higher order function is a function that takes a function as an argument, or returns a function or does both.

const greet = function takeName (name){
    return function message(msg){
        return msg  + name 
    }
}

greet("Sayuri ")("Hey, fellow devs, I am ")

--> Hey, fellow devs, I am Sayuri

Immutable Code

Immutability means can't be changed.

Mutation --> (Bad)

const code= [ "Javascript", "Python", "React" ]
code[ 2 ] = "Node"
console.log(code)

--> [ "Javascript", "Node", "React" ]

Immutation

const code = [ "Javascript", "Python", "React" ]
const code2 = code.map(lang=> {
  if(lang=== 'Python') {
    lang= 'Node';
  }
  return lang;
});

console.log(code2)

--> [ "Javascript", "Node", "React" ]

Last but not the Least
Do not Iterate using for or while/loops --> Use Map, Reduce, Filter etc.

Let me your thoughts.