Data such as API keys or Database URI or any key from cloud services like AWS or Google Cloud are counted as secrets and are not to be exposed under any circumstance.

We need to learn about 2 things in order to keep our secrets unexposed i.e.

• dotenv or .env
• .gitignore

dotenv

dotenv is a npm package, it helps us store secrets in a separate file called .env

• Run npm i dotenv from the root of the project to install the package.
• import and configure dotenv package in your project require('dotenv').config();. Make sure to require it at the very top of your app.js file so that it can be used throughout the project.
• Create a .env file in your root and add all the secrets in this file as shown below:

API_KEY=anyApiKey
SECRET_KEY=YOURSECRETKEYGOESHERE # comment
SECRET_HASH="something-with-a-#-hash"

You must use double quotes when reserved keywords like hash are appearing in the secret.

• Finally, you can use these secrets anywhere in your project by using process.env.API_KEY.

you just got to add your variable name after process.env.

//import and configure dotenv at the very top of your file.
require('dotenv').config();

app.get((req, res) => {
      const apiKey = process.env.API_KEY;
      const secretKey = process.env.SECRET_KEY;
      const secretHash = process.env.SECRET_HASH;
      console.log(`Secrets stored in .env file are ${apiKey} and ${secretKey} and ${secretHash}`);
});

.gitignore, exclude unwanted files from git tracking.

Now once you have your secrets in place you need to make sure that these variables must not appear in your commit history. Whenever you commit a change git saves all the newly added files and lines of code. We can ignore tracking of these files by following the steps below:

• Create a .gitignore file in the root of your project.
• Add the file or folder name you want to ignore.

/node_modules
.env

Adding .env in the .gitignore file tells git to ignore this file and any changes made to this file. Thus, making your secrets real secrets. Likewise by adding /node_modules git will ignore the whole folder.

How to run your apps without uploading .env file to the cloud or hosting platform?

Every hosting provider has a tab called Variable where you can add the secrets and your app will have access to them.

You don't need to upload .env file anywhere, we use the .env file to access and store our secrets separately in our local environment and to safeguard them while uploading code to remote repos.

If this article was helpful please consider following me on Instagram or GitHub. If you wish to find more such articles in your inbox please consider subscribing to my newsletter. Your appreciation is my fuel 😌.

Get all the required secrets from Google Developer Console.

Before doing anything in our code we have to first create a project in the Google Developers Console.

Create Project.

Rename the project.

Configure the OAuth consent screen in the Test Mode.

You may need to verify your website to make it work in production mode as test secrets are only valid for 7 days.

• Select User Type as External and click CREATE.

• Fill only the mandatory fields for now as we want to stay in the test mode.

• Make no changes to the Scopes, click SAVE AND CONTINUE.

• Enter the email address you want to send automatic emails from.

• Check the Summary and click BACK TO DASHBOARD.

Create Credentials.

• Navigate to the Credentials tab on the sidebar and click on + CREATE CREDENTIALS and OAuth client ID.

• Fill all the mandatory fields and set Authorized redirect URIs to https://developers.google.com/oauthplayground.

• Copy your Client Id and Client Secret to a safe place as we will use them later.

Authorize API

• Head over to https://developers.google.com/oauthplayground and fill in the recently generated Client Id and Client Secret in the OAuth 2.0 configuration shown below.

• fill in https://mail.google.com in the Authorize API's field and click Authorize API's.

As you hit Authorize API's button, Google will ask you to verify your Gmail Id. Make sure to verify the Id you entered as the Test User while configuring the consent screen.

• Click on Exchange Authorization code for tokens and copy the Refresh token from here.

We don't need to copy the Access token from here as it is not permanent and keeps on expiring. We will generate an Access token on the fly as and when needed from our node app.

Create a .env file in the root folder of your project and include all the secrets listed below in the same format.

you have to install and configure dotenv package to make this work. If you are not sure what that is, please check the installation guide here!

CLIENT_ID="clientIdFromGoogleDeveloperConsole"
CLIENT_SECRET="clientSecretFromGoogleDeveloperConsole"
REDIRECT_URI="https://developers.google.com/oauthplayground"
REFRESH_TOKEN="refreshTokenFromGoogleDeveloperConsole"

Create a form with the post method.

<form action="/submit" method="post">
      <input type="text" name="name" placeholder="Your Name" id="name">
      <input type="email" name="email" placeholder="Email" id="email">
      <textarea name="message" rows="6" id="message" placeholder="Message"></textarea>
      <button type="submit">
</form>

Install the required packages

Run the following command from the root of your project to install googleapis and nodemailer npm packages.

npm i googleapis nodemailer

Configure oAuth2Client using the secrets stored in the .env file.

const oAuth2Client = new google.auth.OAuth2(process.env.CLIENT_ID, process.env.CLIENT_SECRET, process.env.REDIRECT_URI);

oAuth2Client.setCredentials({ refresh_token: process.env.REFRESH_TOKEN});

Handle post request and write the function to send emails

The form we created recently will send a post request to our server with the required form data, we will store this form data in Javascript constants.

app.post("/submit", (req, res) => {
       const sender name = req.body.name;
       const senderEmail = req.body.email;
       const senderMessage = req.body.message;
});

We will now write a function that takes senderName, senderEmail, senderMessage as parameters.

• Create a try-catch block inside the function
• In the try block generate the ACCESS_TOKEN on the fly using the oAuth2Client.getAccessToken();
• Create a transport using nodemailer.createTransport({});
• Create an object mailOptions with the following key-value pairs.

  const mailOptions = {
      from: "",
      to: "",
      subject: ``,
      text: ``,
    }
  

• Use transport.sendMail(mailOptions); to send the email.
• Catch the error if any in the catch block.

This is how the function must look after putting everything together.

async function sendMail(senderName, senderEmail, senderMessage){
  try{
    const ACCESS_TOKEN = await oAuth2Client.getAccessToken();
    const transport = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        type: 'OAuth2',
        user: 'developersonline.org@gmail.com',
        clientId: process.env.CLIENT_ID,
        clientSecret: process.env.CLIENT_SECRET,
        refreshToken: process.env.REFRESH_TOKEN,
        accessToken: ACCESS_TOKEN,
      },
    });

    const mailOptions = {
      from: "Bot <developersonline.org@gmail.com>",
      to: "hello@tusharkhatri.in",
      subject: `${senderEmail} sent you a message`,
      text: `Message from ${senderName}: ${senderMessage}`,
    }

    const result = await transport.sendMail(mailOptions);
    return result;


  }catch (error) {
    return error;
  }
}

Call the function. ✌️

app.post("/submit", (req, res) => {
       const sender name = req.body.name;
       const senderEmail = req.body.email;
       const senderMessage = req.body.message;

       sendMail(senderName, senderEmail, senderMessage)
       .then(result =>  console.log("Message Sent"))
       .catch(error => console.log(error.message));
});

If this article was helpful please consider following me on Instagram or GitHub. If you wish to find more such articles in your inbox please consider subscribing to my newsletter. Your appreciation is my fuel 😌.

Dart is one such programming language that developers vouch for. In this article, we will be discussing Dart, a programming language developed by Google developers in 2011.

What is Dart?

Dart is a high-level, interpreted programming language that lets you build mobile, server, desktop and web applications. Some people even consider it to be an alternative solution to Javascript. Though the first version of Dart was available by mid-autumn, its popularity grew when Flutter (ideal choice for many for cross-platform development) was released in 2017.

A major difference that Dart has from other programming languages is that it comes with its own package manager known as Pub; developers can use these packages to build Dart and Flutter apps.

If you’ve heard of Dart, but still not sure about its key benefits, read on:

1. Easy to learn language

Dart is a fairly easy language to learn, and Google developers have put in a tremendous effort in the documentation part. With its Java-like syntax, developers with OOPS background can quickly plunge into programming if they know the basics. Dart also allows for easy editing as they can test small sections of code even if the complete application is not ready yet. Dart is fairly easy to grasp, modern, functional, flexible and competitive. The ecosystem is simple, understanding the terminologies, the proper tools and SDKs for the language is easy, and accessing the frameworks and libraries is easier. If a developer is familiar with any programming language, not just necessarily an OOP language, they can intuitively start using Dart.

2. Comes with good documentation

Developers find that Dart is a good first programming language to learn because it has an excellent introduction and very good documentation. Getting started is also easy; just type the Dartpad url, and you can get started. More and more people have switched to Dart, thanks to its simple syntax, excellent community support, easy features that guides developers when they are in the training process.

3. High performance factor

Applications run in Dart run faster than in other programming languages. And features like JIT compilation and AOT compilation add to the performance feature of Dart. JIT compilation or Just in Time compilation helps you to enable hot reloads, while AOT or Ahead of Time compilation helps with fast startup and better execution of the app.

4. Dart syntax is clean

Dart looks almost similar to Java as it has clean syntax. So developers can pick up the code easily, but there is a chance they could get confused with many Dart language features.

5. Excellent tooling support

The programming language has incredible tools to support app development.

While looking at the advantages, you must be aware of the drawbacks as well, so as to help make a wiser decision.

6. Can compile to self-contained snapshots

This feature is possible with other languages, but it is fast and simple with Dart. The Dart scripts can compile to self-contained snapshots on its own, i.e without requiring any other programs or libraries

7. Can write the first program without installation or configuration

Dart comes with DartPad, a very simple interface, eliminating the need of installation or configuration. Just write the code, and click on Run command to execute the code. There is support for libraries, but it’s restricted to basic level.

8. A good support for the programmer

Programmers can opt to treat Dart as an ordinary, dynamically typed language, especially if they do not want to deal with type systems at all. So Dart is an optionally typed language. Developers can also benefit from the extra documentation that comes along with the type annotations in the code. Dart alerts the programmers about possible type inconsistencies and oversights and not errors. These alerts are calibrated to support the developers.

9. More type-safe than Javascript

If you compare Dart with Javascript, the former has a few advantages in certain aspects. For example, Javascript is not a type-safe language. It is only during the run-time, will you see the programming errors. On the other hand, Dart supports both strong and loose prototyping, where you can see the programming errors during compilation. So it is more type-safe than JS.

10. Dart is portable

There is no need for any specific hardware configurations or architecture for running Dart, as it functions on any operating system and in all web browsers.

Tools that integrate with Dart:

• Dart Webdev — This is a framework for building web apps
• Angular Dart — Acts as an alternative to WebDev
• Aqueduct — Is a multi-threaded server-side framework
• Flutter — Google’s Cross-platform mobile UI framework

Familiarize yourself with some risks as well

There are some disadvantages to Dart that you must be aware of:

The Dart is still developing

That’s not exactly a risk, but it is important that you know that things won’t be documented correctly and there is a chance the API will change at any time.

Absence of native support

In order to see the complete demo of Dart’s capabilities, the developers have to bring it to users’ browsers for lack of browser support. So they have to provide native support for all the browsers they are targeting the application to work.

It is not easy to find a Dart programmer sometimes

Since Dart is a fairly new program, there aren’t many developers around, yet. So if you look for a Dart programmer, or a job that requires such a programmer, you may find the search to be hard.

So, Dart wasn’t as popular as React Native until Flutter was introduced. When Flutter became popular, Dart also became popular, almost as popular as React Native. And this combination is used by big brands like Google Ads, BMW, Tencent, Groupon, eBay etc. A good choice when businesses need to make cross-platform apps, perfect for startups, small projects, big brands, etc.

With Dart in the picture, you can write a web client, mobile app and backend in the same language, database applications and scripting and all the things you love about Java and C#. There are some stark differences between Dart and C#, but it is a favourite choice among developers, as it is a multi-platform, general purpose language.

Backed by Google, Dart is a good choice for command-line applications, is scalable across projects, amazingly similar to Javascript. Though a simple language, Dart has enough features to build complex applications as well, using modern paradigms. So if you are planning to use both Flutter and Dart in building your applications, it would be a good choice.

If the above information was helpful in any way please consider following me on GitHub and subscribing to my newsletter . 🙂👏

Thanks,
Tushar Khatri

Difference Between PX, EM, REM, and %

let me make it simple for you:

16px = 1em = 1rem = 100%

If you are here to know about the conversion formula. 16px is generally the base size, and I’m considering 16px as the base size here:

pixels to convert ÷ 16 = em

For example, If you are willing to convert 40px to em and the base size is 16px then:

40÷16 = 2.5em

Now If you are still with me probably you want to learn about the core differences between these two.

Core Difference:

I will talk about rem later in this blog, for the time being, consider em and rem as the same units. So basically, px is a static unit but em, and % are dynamic units, let us understand this by an example.

Let me create an index.html file and link it with a CSS file

I will define the size of the text in the paragraph tag in pixels using CSS.

.container {  
  padding: 40px;  
}

p {  
  font-size: 20px;  
}

and the output looks something like this:

Now let’s head over to the chrome://settings/appearance and change the font size to very large.

Now you will notice that the size of the Paragraph tag is not increasing even if we change the default font size and this is because pixel is a static unit and it stays as it is until we zoom in on the web page using Ctrl and +.

Did you notice something unusual? I can see something changing its size. Oh! it is the h1 tag, now all this is happening because the size of the h1 tag is pre-defined in em, and as I told you em is a dynamic unit.

It is considered better to design your website using dynamic units as it helps people with visual impairments to scale up the text and makes your website much more reliable. % is also a dynamic unit. Which one you will use? well, it is up to you now.

What is rem?

Let me be quick. Let’s take an example:

index.html

<!DOCTYPE html>  
<html lang="en" dir="ltr">  
  <head>  
    <meta charset="utf-8">  
    <title>The Difference Between PX, EM, REM, %</title>  
    <link rel="stylesheet" href="css/styles.css">  
  </head>  
  <body>  
    <div class="container">  
    <p>Lorem ipsum dolor sit amet</p>  
    </div>  
  </body>  
</html>

css/styles.css

body {  
  font-size: 2em;  
}

.container {  
  padding: 40px;  
}

p {  
  font-size: 3em;  
}

In the above example, we have defined font size as 2em for the body and 3em for the paragraph tag. Now the sum of 2em and 3em is 5em and this is what is gonna be displayed on the web page.

Even though the 2em is crossed out, it still applies! making it a total of 5em.

so, rem stands for root em, and using rem we can override the size defined for the body instead of inheriting it.

body {  
  font-size: 2em;  
}

.container {  
  padding: 40px;  
}

p {  
  font-size: 3rem;  
}

After making the above changes the paragraph will have a font size of 3em only.

If this article was helpful please consider following me on GitHub and subscribing to my newsletter. Your appreciation is my fuel. Namaste guys🙏.