DEV Community: Unnati Bamania

I build a Github Dark Theme inspired Portfolio

Unnati Bamania — Sun, 05 Sep 2021 07:37:08 +0000

I always wanted to build a unique portfolio for myself and was inspired by a lot of portfolios. Right since my first year of engineering I've build more than 6 portfolios but nothing was ever eye catchy and satisfying. Finally I came across some unique and eye catchy portfolios. I stumbled upon the idea of building one by using the Github Dark Theme.

One of them is Nitin's VS Code theme

The tech stack that I've used is:

NextJS
Tailwind CSS

Tools used:

Notion
I've integrated Notion for storing the data of the contact form.
If you want to integrate Notion to your contact forms please do refer to this article
Integrate Notion in your contact form
react-github-calendar
You can show your github heat map using the above library.

Github Dark Theme Portfolio

If you want to visit the live website you can visit to the following link:

https://unnatibamania.me

The source code for this project is as follows:

unnati2000/portfolio

I would love to listen from you

If you have any suggestions or critics please do share your thoughts. I would love to make improvisations in this project. If you feel there was a need to add some more features please do share your thoughts in the comment section below.

Advanced functionality with functions in JavaScript

Unnati Bamania — Tue, 01 Jun 2021 13:29:07 +0000

Right since 2015, EcmaScript6 has brought many advancements in JavaScript coding practices. A lot of modern stuff is included in JavaScript, which enhances the coding experience and makes writing code easier. Some of the features include spread operator, maps, sets, generators, and a lot more. Let’s explore these features in greater detail.

Spread operator

Spread operators is a new function in JavaScript ES6 version. The spread operator allows an iterable to expand in places where zero or more arguments are expected. It is represented using the ... syntax. It makes shallow copies of objects in JavaScript. You can use the spread operator to concatenate two or more arrays, expand them, calculate the sum of all elements or copy an array.

Consider the following piece of code,

let arr = [1, 2, 3, 4];

function x(){
  console.log(arr);
}
x.apply(null, arr);

Here, you need to use the apply function to print it in the same way. Using the spread operator, the same functionality can be achieved with:

function x(){
  console.log(...arr);
}

Closures

The closure is a function bind with its lexical environment. In simpler terms, a closure is a function inside a function that returns some value.
Consider this simple example,

function outerFunc(){
  let val = 2;
  function innerFunc(){
    console.log(val);
  }
  innerFunc();
}  
outerFunc();

The function outerFunc creates a local variable called val and there's a function named innerFunc inside outerFunc. Since inner functions have access to the outer functions, the innerFunc has access to the variables of outerFunc as well.

So, when you try to print the value of variable val, it will give you output as 2.

Iterators and generators

Iterators and generators are two different concepts but they're used in similar ways. They're used to iterate through arrays and objects in JavaScript.
Iterators are like advanced loops that can be paused and Generators are functions that can be paused and can return multiple values.

Iterators

Here is an example of an iterator

function fruitIter(fruits){
  let index = 0;
  return {
    next: function(){
      return index < fruits.length ? { value: fruits[index++], done: false } : {done: true}
    }
  }
}

const fruitsArray = ["Mango", "Banana", "Grapes"];

const fruits = fruitIter(fruitsArray);
console.log(fruits.next().value); // output: Mango

When the array fruitsArray is passed in fruitIter function, the index is initialized to 0, then it goes into the next function and checks whether the index is greater than fruitArray’s length and returns an object while incrementing the value of the index.

This is how iterators work. If we call the function using fruit iterator again, it will print its value (Banana). If you're done iterating through fruitsArray, the status done will change to false and the value will be undefined.

Generators

Generators are similar to Iterators but they return multiple values. These values are called yield values. Generator functions are written using the function* syntax. * denotes that it is not a normal function but a generator.
Here is an example of generators:

function* printFruits(){

  yield "Mango";
  yield "Banana";
  yield: "Grapes";
}

 const fruit = printFruits();
 console.log(fruit.next()); // Output: { value: "Fruit", done: false }

In this example, yield is the iterator, and when you call the function sayFruit and print fruit.next(), it gives you an object where you get the value and the done status which denotes whether all values are iterated through or not.

Maps

A map is an object that holds key-value pairs. Any object reference type or a primitive can be used as a key or value.

How can you create maps?

const mp1 = new Map();
const key1 = "String",
      key2 = {},
      key3 = function(){}

 // setting map values by key
 mp1.set(key1, "Key 1");
 mp1.set(key2, "Key 2");
 mp1.set(key3, "Key 3");

You can create a map using the new Map() syntax. The key can be of any type: String, Number, function, or object. We use the set keyword to store key-value pairs into the map.

Other functionality with maps

// Get values by keys
console.log(mp1.get(key1);  // Key1

// Get size
console.log(mp1.size) // 3

Iterating through maps

// using for loop
for(let [key, value]of mp1){
    console.log(`${key} -> ${value}`);

 // iterating through keys
 for(let key in mp1.keys()){
    console.log(key);
 }
}

 // iterating through values
 for(let value in mp1.values()){
    console.log(value);
 }
}

Sets

A set is an array that holds unique values in it. You can add anything inside a set: an object, number, boolean, etc.

const s = new Set();

// add values
s.add(2);
s.add(true);
s.add("String");
s.add({name: "sheep"});

// get count
console.log(s.size);

// delete an item
s.delete(2);

Check for value in set

console.log(s.has(2)); // true
console.log(s.has(100)); //false
console.log(s.has({name: "sheep"})); // false

In the above code, if you check whether object {name: "sheep"} exists in the list, then it will return false even though it does exist in the set. This is because object type is nonprimitive in JavaScript. Although both these objects are the same, they point to different memory locations. Hence, that statement returns a false value.

Iterating through sets

for(let x in s){
  console.log(x);
}

Best VS code extensions used for web development

Unnati Bamania — Sun, 02 May 2021 10:46:24 +0000

VS Code is one of the best and lightweight code editors. The dark theme and variety of extensions that very developer-friendly. This article mentions best vs code extensions which can help developers to coder faster and cleaner.

Thunder Client

Say bye to Postman once you've installed this extension. This extension helps to make API calls on VS code. All you've to do is go to the extension section and install the thunder client extension. You'll find a small electrifying icon on the left-hand side. Click on it and you're good to go.

Markdown All in One

It would be nice if your complete markdown, which includes auto-preview, shortcuts, autocomplete, were managed by a single extension. With this extension, you can have a live preview of your markdown, and using shortcuts like ctrl+b and ctrl+i makes preparing markdowns less excruciating.
For live preview use command ctrl + shift + k + v.

Prettier

Developers are most often troubled by the commas and colons or by adjusting the code properly. Prettier code extension manages the code format and aligns it properly so that the code looks pretty.

CSS Peek

CSS Peek extension is a handy extension to check for CSS code while typing HTML tags. When you hover over the class name and hit control then you get the CSS code of that class. On clicking on the class it will take you the code on the CSS page.

Live Server

This server helps to reload the page after saving the code. While previewing the saved code you need not refresh the page manually. It reloads the page and shows to output for recently saved code.

Emmet

Most of the time it's boring to write the complete HTML tag with head and title and other tags within the head tag. Emmet extension gives the initial code for HTML pages. When you type

!+tab

You get the initial code.

Auto Rename Tag

This is a very powerful and useful extension for web developers. It auto-completes the ending tag same as the starting one and vice versa. This extension is also useful for React applications.

There are a lot of other VS code extensions which are very handy if you know any please do mention them down in the comment section.

Some libraries you can use with Vanilla JS

Unnati Bamania — Sun, 18 Apr 2021 11:55:49 +0000

Never underestimate the power of simplicity. It's hard to imagine the application of concepts like push real-time notifications, using databases, having a rich text editor with Vanilla JS. But you can do a lot with it. Here are some examples of their libraries that make Vanilla JS somewhat impeccable. I will try to embellish each library with its features and other attributes concerning its documentation.

Pushjs

I've been breaking my head all around to find the best tutorials for implementing the push notification feature. But Pushjs made my work painless. The documentation is easy and beginner-friendly.

All the effort that you need to take is to create an HTML file in a folder.
The next step is followed by the installation part. Either install it using the npm package manager or using Github download the zip file. After downloading, unzip the folder and copy-paste push.min.js and serviceWorker.min.js into your project directory.

Code for index.html

<body>

    <script src="push.min.js"></script>
    <script src="serviceWorker.min.js"></script>

    <script>
        function start() {
            Push.create("Hello from Unnati!", {
                body: "Here's your push notification demo",
                icon: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg',
                timeout: 4000,
                onClick: function () {
                    window.focus();
                    this.close();
                }
            });
        }
    </script>
    <h1>Push notification implementation</h1>
    <h3>Click on this button to view notification</h3>

    <a href="javascript:void(0)" onclick="start()">Start</a>

</body>

EditorJS

Next, the amazing library on the list is Editor Js. We need text editors in our project quite often, hence EditorJs is one of the simple and captivating libraries. You can use it with Vanilla Js, ReactJs, and other frameworks. Making your text bold or italics or adding a heading, has it all. Just quickly run through the documentation and you'll get a clear gist of this library. Let's come to the coding part. Again, you can either install it using the npm package manager or use its cdn.

index.html

<body>
    <h1>Enter your content here</h1>

    <div id="editorjs"></div>

    <button id='button'>Save article</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="index.js"></script>
  </body>

index.js

try {

  var editor = new EditorJS({
    holderId : 'editorjs',
    placeholder: 'Let`s write an awesome story!',
    autofocus: true,

  });

  editor.isReady
    .then(() => {
      console.log("Editor.js is ready to work!");
    })
    .catch((reason) => {
      console.log(`Editor.js initialization failed because of ${reason}`);
    });

  const btn = document.getElementById("button");

  btn.addEventListener("click", function () {
    editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });


  });
} catch (reason) {
  console.log(`Editor.js initialization failed because of ${reason}`);
}

After installing if your try to import editorjs it will give an error, you need to make some configurations for import to work. Hence, you use the above code for reference.
It can also help you to save your write-up material.
You get a lot of options for configuring your editor like adding headers, lists, embed.

import Header from '@editorjs/header';
import List from '@editorjs/list';
import MyParagraph from 'my-paragraph.js';
const editor = new EditorJS({

  tools: {
    header: Header,
    list: List,
    myOwnParagraph: MyParagraph
  },
  defaultBlock: "myOwnParagraph"
})

Howler.js

You must've used audio and video tags in your projects. Howlerjs, is here to enhance your experience. The documentation explains the code well. Here's the reference piece of code which gives you a basic idea of HowlerJS

<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

Reveal.js

Ever wondered one day you'll be able to create presentation slides using Javascript. Reveal.js, made it possible. This is an amazing library that I would like to add to the list. You can install it using npm package manager or navigate to Github and download zip and include the files in your project folder. Create an HTML file and fetch all the CSS and javascript files.

<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">

Javascript files

<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
     Reveal.initialize({
    hash: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
</script>

For the slides part.

In index.html inside body tag create a div with id name reveal and nest another div with id name slides. Inside the nested keep adding the section div depending upon the slide requirement.

<div class="reveal">
  <div class="slides">
   <section>
    <h1>Slide 1</h1>
    <h3>This is an amazing library</h3>
   </section>
  <section>
   <h1>Slide 2</h1>
   <h3>You can just play around with a lot of stuff</h3>
  </section>
  <section>
   <h1>Slide 3</h1>
   <h3>That's it for the slide Show</h3>
   </section>
  </div>
</div>

ChartJS

Presentations and displaying graphical charts go hand in hand. Javascript has a stunning library Chartjs where we can represent data using these charts. It includes bar graphs, pie diagrams, dot diagrams, and a lot more.

Here's the sample code for the pie chart

 var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

There are a lot of other popular and useful libraries which can be used with Vanilla Js. That's it for this post. If you know more stunning libraries like these please do mention them in the comment section below.

Read data from Gmail using Node JS

Unnati Bamania — Sun, 11 Apr 2021 10:41:35 +0000

I've struggled a lot with this topic. Finally, after a lot of searches and referring documentation, I'm finally writing this article. I hope it helps everyone. In this article, the code will be written in NodeJS. This app will include 2 parts, the first is creating and setting up a project on google console and the next is the coding part.

1) Creating a project on Google Console

Open https://console.developers.google.com/ website and you need to create a project. On the top left corner, there will be a list of your previous projects or option select a project.
A modal will pop up. Select on the option NEW PROJECT.

select -> NEW PROJECT Enter a project name and create the project

2) Enable Gmail API

Ensure that you've selected that project, then in the search box search Gmail API. Enable Gmail API.

3) Configure Project

You need credentials but before creating credentials you need to configure credentials. On the left-hand side, you'll find OAuth consent Screen. Click on it.

User Type -> External
Enter app information ie, app name, supporting email, developer contact information.
Scope page save and continue
Test User Tab: Click on add user and you can add up to 100 emails. Add your email for testing. Save and continue.
Finally, after setting up, click on Credentials.

4) Create Credentials

After landing on Credentials, on the top click on CREATE CREDENTIALS. Click on OAuth client ID. Select your application type. As we're using NodeJS, it is a web application. Add URI's as
http://localhost:3000. Create and you'll get your credentials.

Now comes part two, the coding part

5) Code set up:

Go to this page, Node JS quickstart.

Copy Paste the sample code and then copy-paste in a file named index.js.
In the folder, where you created this file, the terminal add the command

npm init

and initializes

package.json
You need to install some dependencies with the command

npm i googleapis cheerio mailparser js-base64 open
Go to google developers console in your project. Navigate to the credentials part. In OAuth 2.0 Client IDs, you'll find a small download icon, download your credentials file from there and add to your folder where you've created this project. Name this file as

credentials.json
Run your code in your terminal. When you run for the first time, you'll get something like this

Authorize this app by visiting this url: https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fgmail.readonly&response_type=code&client_id=479559853488-050lms0ffusprdhh938s954q0s36kg4i.apps.googleusercontent.com&redirect_uri=urn%3Aietf%3Awg%3Aoauth%3A2.0%3Aoob
‍Enter the code from that page here:

Click on that URL and enter the code.
Now, in order to be able to manage the labels of the messages, you need to change the initial scope from gmail.readonly to gmail.modify.

const SCOPES = ['https://www.googleapis.com/auth/gmail.modify'];

Delete token.json from your working directory.

One error that some of you might get. The reference code has credentials.installed but it should be credentials.web. When you check the file, credentials.json you'll find everything is inside web object. So, if you get that error just check your creddentials.json file once and replace installed accordingly.

function authorize(credentials, callback) {
  const {client_secret, client_id, redirect_uris} = credentials.installed;
...
}

If you're facing any other issue regarding app verification then navigate to verification process and follow them.

6)Final Output:

Then, go to the listLabels function and add the label id in the console log.

functionlistLabels(auth) {  
  ...      
    labels.forEach((label) => {        
      console.log(`- ${label.name} : ${label.id}`);      
    });  
  ...}

Finally, run the application by using the command

npm run server

to authorize the app again and update the access permissions. You should be able to see the label list but now each label with its corresponding id.

Now, to read mail box,

function listMessages(auth, query){
  query = 'unnatibamania8@gmail.com';
  return new Promise((resolve, reject) => {    
    const gmail = google.gmail({version: 'v1', auth});
    gmail.users.messages.list(      
      {        
        userId: 'me',  
        q:query,      
        maxResults:5     
      },            (err, res) => {        
        if (err) {                    reject(err);          
          return;        
        }        
        if (!res.data.messages) {                    resolve([]);          
          return;        
        }                resolve(res.data);  

                         getMail(res.data.messages[0].id, auth);
      }    
    );  
  })
}

Here, the function listMessages takes 2 parameters auth and query, you can call this function

fs.readFile('credentials.json', (err, content) => {
  if (err) return console.log('Error loading client secret file:', err);
  // Authorize a client with credentials, then call the Gmail API.
  authorize(JSON.parse(content), listMessages);

});

after console logging res.data.messages, you'll get threadId and id. Pass the id into getMail function.

function getMail(msgId, auth){
  console.log(msgId)
  const gmail = google.gmail({version: 'v1', auth});
  //This api call will fetch the mailbody.
  gmail.users.messages.get({
      userId:'me',
      id: msgId ,
  }, (err, res) => {
    console.log(res.data.labelIds.INBOX)
      if(!err){
        console.log("no error")
          var body = res.data.payload.parts[0].body.data;

          var htmlBody = base64.decode(body.replace(/-/g, '+').replace(/_/g, '/'));
          console.log(htmlBody)
          var mailparser = new Mailparser();

          mailparser.on("end", (err,res) => {
              console.log("res",res);
          })

          mailparser.on('data', (dat) => {
              if(dat.type === 'text'){
                  const $ = cheerio.load(dat.textAsHtml);
                  var links = [];
                  var modLinks = [];
                  $('a').each(function(i) {
                      links[i] = $(this).attr('href');
                  });

                  //Regular Expression to filter out an array of urls.
                  var pat = /------[0-9]-[0-9][0-9]/;

                  //A new array modLinks is created which stores the urls.
                  modLinks = links.filter(li => {
                      if(li.match(pat) !== null){
                          return true;
                      }
                      else{
                          return false;
                      }
                  });
                  console.log(modLinks);

                  //This function is called to open all links in the array.

              }
          })

          mailparser.write(htmlBody);
          mailparser.end();

      }
  });
}

Final Output

Don't read all the messages all together it might crash the application. Hence, I've read only 1 mail at a time. You can just play around with the code and find a lot of other stuff!
I hope this article helps.

Opportunities for women who code

Unnati Bamania — Sat, 03 Apr 2021 17:36:41 +0000

It's quite evident that there is a lack of women coders in the tech industry and the statistics reveal this. Women are trying to come up with technical skills and compete in this industry but the number is still less. Hence a lot of tech platforms and companies have come up with programs that provide opportunities for coder women to grow in this industry.

Google Women Technical Scholarship

Google offers three scholarships under Google's Women Techmakers Program namely:

Women Techmakers Scholarship for Computer Science,
Women Techmakers Scholarship for gaming in partnership with Stadia
Women Techmakers Irish University Scholarship

The scholarship is provided region-wise: Asia Pacific, North America, and Europe, the Middle East, and Africa.

https://www.womentechmakers.com

You get the following perks if you get selected:

Retreat: All the scholars from different countries will gather at one place and collab on different projects.
Community bonding period: Sharing rooms with different people from different countries and sharing ideas.
Academic Scholarship: Get an academic scholarship of $1000.
Goodies: Swags, stickers, bottles, and other stuff.
Training: They train you for an interview and plan an 8 monthly road map for students.

AmazeWow

If you're a female candidate and looking for an SDE role at Amazon then this program is for you. Every year Amazon conducts this program, especially for female candidates.
Amazon offers internship and full-time software development opportunities to female candidates through the Amazon WoW program.
Roles and responsibilities:

Should be able to grasp the details of the current project and its architecture.
Should be a team player.
Design code for real-world problems.
Deliver high-quality software in an agile environment

Selection Process

Screening
Online Test
Interview round

WomenWhoCode

It is a nonprofit organization dedicated to inspiring women to excel in technology careers. They provide skills and opportunities for women who need to stay in their career and make it to the top. Their program is the 20 countries, 60 cities, and 50,000 members. A lot of women joining this program have made their successful careers in the tech industry.

check out their website:
Women who code

Red Hat

If you've contributed to any open source then this is the best platform for you to show your contribution. You can nominate yourself on their website. After nomination, they shortlist the women in open source award winners.
Red Hat

Goldman Sachs Global Scholarship and Mentorship Program

This program provides a scholarship and mentorship to the women coders. You also get financial aid from them. This is a six months program where industry experts train you and make you industry-ready.
Goldman Sachs

Western Digital

Western Digital provides a $1 million scholarship every year. As a scholar, you can get a $5000 scholarship. They generally support women. This platform is really good for applying.
Western Digital

Google conference and Scholarship

If you're attending some international Scholarship based on technology or some seminar. Then you can apply for google conference and scholarships, which provides a chance to attend a lot of technology conferences and boost your network where you'll meet people with high expertise in the tech industry.

Women in today's time are capable of handling multiple things. Although their ratio in the tech industry is less there are a lot of opportunities and platforms that encourage them to make their career in this field. What are your thoughts on this? Please do mention them in the comment section below.

Tips to build an awesome portfolio

Unnati Bamania — Mon, 29 Mar 2021 19:03:21 +0000

I've often heard students pursuing their degrees saying, "I wish I could have learned this". When applying for a job, companies have a brief look at your portfolio. Not only companies but also universities providing courses post-graduation have look at an individual's portfolio. Hence, it is essential to focus on your portfolio and build one which will stand out from the rest

Learn new skills and build projects

Continuous learning is the minimum requirement for success in any field. Keep learning new skills at regular intervals. Suppose you're interested in web development or app development then start with its basics, build some basic projects and go for advanced learning and build advanced projects. As you see yourself progressing, start building projects which are based on real-life problem-solving. If you're stuck somewhere never hesitate to ask for help. You'll grow as you keep learning by making mistakes and improving. For learning new tech skills you can refer Udemy
Coursera Udacity

Apply for internships

Experience matters a lot
After learning some skills and building personal projects it's time for working on some ongoing projects. You can start applying for internships in companies. Internships are the best way to gain industry experience. You might have to appear for an interview and some test rounds. Internships can be paid and unpaid depending upon the companies.

Start Freelancing

As a developer, you can start freelancing. As a student, it will help to generate extra revenue and help you to enhance your skills. Start with small projects, build them properly. Once you're confident enough then go for building medium and advanced-level projects. Freelancing will definitely add value to the portfolio. Projects built as a freelancer shows your confidence and proficiency in that skill.

Write blogs

Along with outstanding coding skills a developer must have good writing skills. Being a content write gives you an additional advantage over other candidates. Writing blogs is really good practice. Content writing is an amazing mind exercise.
Writing content is a test of your creativity. Writing a weekly blog will enhance your writing skills and help you to maintain a blog page. Maintaining a blog page is a really helpful and add-on for a portfolio.

Publish research paper

If you're in college and doing some kind of research on some project or topic you should publish your own research paper. If you're applying for further studies in some top universities then this is really helpful. This is an extra point which will attract universities and companies. Your portfolio will look diverse and will stand out from the rest.

Join a social service committee

Joining a social service committee shows your concern towards society. You're not secluded in your own world, instead, it shows that you're also bothered about your society. This becomes helpful for future studies when you're applying to some top universities. If they have a look at your portfolio then the social service factor is advantageous.

Hence, I would end this post by saying there are a lot of other factors, but these are the ones that I found to be prominent. If you some other factors then please do share them. Please do put down your thoughts in the comment section below.

Amazing CSS libraries for your next project

Unnati Bamania — Wed, 24 Mar 2021 10:23:27 +0000

I've often heard this, 2020 is the era of flying cars but front-end developers are still struggling with positioning divs. Sounds funny but it's true. The solution to many problems like these is a must. Hence, here goes the list of the top 10 CSS frameworks which you must use at least once in your projects. These libraries will enhance your web design, coding experience and help you to outshine your resume.

Materialize CSS

Materialize CSS is a responsive front-end framework created by Google in 2014. It uses a famous 12-column grid for responsive design. This framework is quite commonly used. Developers use the very popular Material-UI with ReactJS mostly for designing.

Why use Materialize CSS?

Variety of features: If you're really a fan of Google's Material design then you must choose this framework. It also provides a lot of
Easy to use: Their documentation is the best guide and tutorial. One can follow along and learn easily. All the complex features are designed and coded in a simple form hence reducing the coding time.

Grid System in Materialize CSS

<div class="row">
   <div class="col s1">1</div>
   <div class="col s1">2</div>
   <div class="col s1">3</div>
   <div class="col s1">4</div>
   <div class="col s1">5</div>
   <div class="col s1">6</div>
</div>

Bulma CSS

Bulma is a relatively new framework and considered to be one of the best CSS frameworks to work with. According to the statistics, it ranked 5th in the category of best CSS framework in 2020. It attracts developers by the simplicity of its designs and variation in the components which is something different when compared with older frameworks.

Why use Bulma CSS?

Pure CSS, no JS: It has its component in pure CSS. If you wish to add it to your project, all you need is one CSS file and no JS file.
Easy to learn and versatile: It has thorough documentation hence developers don't need to seek various tutorials. Bulma comes with typography, forms, buttons, tables, and much more. This contributes to a solid foundation and high versatility of the framework

Box

<div class="box">
  I'm in a box.
</div>

Titles

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

Tailwind

Tailwind is a low-level CSS framework and a customizable CSS framework. Unlike Bootstrap that creates generic-looking UIs, Tailwind allows you to customize your designs and create a unique look and feel.

Why use Tailwind CSS?

Customizable: It gives you a lot of freedom to customize their components. Unlike other best frameworks of CSS, Tailwind doesn't tell you what your website should look like.
Greater Development Speed: Since tailwind almost eliminates the big step of having to write CSS, the development speed increases by manifold.

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    The feature you've all been waiting for.
  </p>
</div>

<button
  class="bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-50"
>
  <!-- ... -->
</button>

Bootstrap

Bootstrap is one of the extremely popular CSS frameworks. As it is easy to use and beginner-friendly it is the choice of most web designers. Its current version is Bootstrap 5. It is also supported by Sass and Less. Its powerful grid system, badges, buttons, card components, navbars, alerts, and simple designs make it popular, and developer-friendly. Bootstrap also provides a wide variety of themes that can be used in projects.

Why use Bootstrap?

Powerful responsive design: Bootstrap provides a powerful and responsive grid system that is easy to use and understand.
Low Learning Curve: It is one of the best frameworks for web beginners. The best part is, it has well-formatted documentation and a lot of tutorials hence it becomes easy for developers as well.

Positioning in Bootstrap

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Grid System in Bootstrap

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Foundation

Foundation is a widely used CSS framework. Foundation is a way more sophisticated framework. It is very flexible and easily customizable. Facebook, eBay, Mozilla, Adobe are some of the companies that use Foundation. The best part about Foundation is it gives freedom for developers to show their creativity and customize components.

Why use Foundation CSS?

More Uniqueness: It allows you to customize your site such that it doesn't look like other sites on Foundation.
More than just UI components: It is very flexible and responsive. And it is much more flexible than Bootstrap. The developers have included an advanced responsive image system, form-validation, right-to-left support, responsive embeds.

Grid system in Foundation

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

Semantic UI

Semantic UI is also a responsive front-end framework. It has 3000+ Theming variables and 50+ UI components. It is also integrated with third-party libraries which are React, Angular, Ember, etc.

Why use Semantic UI?

Friendly Class names: Semantic UI is ** human-friendly HTML** Its class names are very readable and friendly.
Pretty LayoutsL Semantic UI has 3000+ amazing theming variables. Hence, it becomes easy for developers to select a theme and build projects.

UI Kit

UI Kit is a lightweight CSS framework. When you need a minimal design then a UI kit is the best framework for you. It is simple, clean, and elegant.

Why use UI?

Minimalism: UI Kit helps developers to create a modern, simple, and clean design.
Modular: Developers can select different designs and components without damaging the overall style of the site.

References and Credits

I've used Bootstrap, Materialize, Tailwind, and Bulma CSS in my projects. Which one is your favorite or you would like to use in your upcoming projects? Please do mention down in the comment section below

Crack your MERN interview with these questions

Unnati Bamania — Thu, 18 Mar 2021 07:06:47 +0000

MERN stack is one of the most powerful and in-demand web stacks in 2021. MERN is a free and open-source JavaScript software stack for building dynamic websites and web applications. MERN stack is basically based on JavaScript.

Here goes the list of top companies that use MERN stack for their development

Refer to this link

If you want to land up in some companies like these then you need to crack their interviews.
Hence, here goes the list of some important questions asked in the interview on the MERN stack.

MongoDB

What do you understand by NoSQL databases? Is MongoDB a NoSQL database? explain.
What is the difference between MongoDB and MySQL?
What is “Namespace” in MongoDB?
What is sharding in MongoDB?
How can you see the connection used by Mongos?
Does MongoDB support primary-key, foreign-key relationship?
If you remove an object attribute, is it deleted from the database?
In which format MongoDB represents document structure?
While creating Schema in MongoDB what are the points need to be taken into consideration?
Mention what is Objecld composed of?
Explain what is GridFS in MongoDB?
Does MongoDB provide a facility to do text searches? How?
What is a covered query in MongoDB?

NodeJs

How does Node.js work?
Explain callback in Node.js.
Why is Node.js Single-threaded?
What is NPM?
Explain the concept of middleware in Node.js.
What are the different types of HTTP requests?
Why is Node.js preferred over other backend technologies like Java and PHP?
What does event-driven programming mean?
What is an Event Loop in Node.js?
What are the two types of API functions in Node.js?
What are streams in Node.js?
What is the purpose of module.exports?
What is REPL in Node.js?
What is piping in Node.js?
What is the buffer class in Node.js?

ReactJS

What is React?
What is JSX?
What is the difference between Element and Component?
What are Pure Components?
When to use a Class Component over a Function Component?
What is the difference between state and props?
Why should we not update the state directly?
What is the difference between HTML and React event handling?
How to bind methods or event handlers in JSX callbacks?
What is the use of refs?
How to create refs?
What is Virtual DOM?
How Virtual DOM works?
What is the difference between Shadow DOM and Virtual DOM?
What is reconciliation?
What is context?
What are children prop?
What are fragments?
What is the purpose of getSnapshotBeforeUpdate() & lifecycle method?
What are React Mixins?
What is the difference between super() and super(props) in React using ES6 classes?

Credits and References

One has to be strong with basics and understand the concepts properly. Some amount of preparation and research will do. If you like to add on some resources or questions please do mention them in the comment section below.

Crack your next coding interview with these topics

Unnati Bamania — Tue, 02 Mar 2021 12:48:56 +0000

The interview is the first interaction of the candidates with the company. The company should put its best foot forward so that even unsuccessful candidates will have good things to say about the company. When it comes to the coding interview, one has to ready with projects and excellent problem-solving skills. This article can help help you ace the interview. It contains some most commonly asked and must-do practice problems for you.
One must practice and solve a lot of Data structures and algorithms questions.
Here goes the list of questions that are mostly asked in interviews:

Array:

Subarray with given sum and some other examples
Missing number and variants
Kadane's algorithm
Trapping the rainwater (Google Interview)
Stock buy and sell
Chocolate distribution problem

String:

Permutations and combinations of a given string
Anagram
Implementation of atoi
Longest common prefix

Linked List:

Reverse a linked list
Detect & remove a loop
Nth node from the end and its variants
Merge 2 sorted Linked List
Pairwise swapping
Intersection point in the linked list

Stack and Queue:

Parenthesis checking and its variants
Next greater and smaller element
Maximum subarray of size k
Celebrity problem
Stock Span problem

Tree:

Diameter of Binary tree
Number of leaf nodes
Height is balanced or not
Check for BST
Maximum path sum

Hashing:

Sort elements by frequency
Zero sum subarray
Largest subarray with sum zero
Common elements
Smallest window in a string containing all the characters of another string
Check duplicates
Check occurrences

Graph:

Dijkstra's algorithm
DFS & BFS
Topological sort
Find whether a path exists
Minimum cost path
Floyd-Warshall
Alien Dictionary
Snake and Ladder problem

Greedy:

Huffman decoding
N meetings in one room
Coin piles
Maximise Toys
Minimum spanning tree
Shop in a candy store

Dynamic programming:

Knapsack problem and variants
Minimum operations
Minimum number of coins
Longest common substring
Minimum number of jumps
Path in a matrix
Minimum sum partition
Count the number of ways to cover a distance

Divide and Conquer:

Quicksort
Merge sort
Kth element in 2 sorted array
Sum of the middle element of 2 sorted array
Search in a sorted array

Backtracking:

N-Queen problem
Solve the sudoku
Rat in a maze problem
Generate an IP address

These are the frequently asked DS and algorithms and their questions. There are other topics and questions which are also asked during interviews.

Topics are as follows:

Doubly Linked List
Circular Linked List
Bit manipulation
Heap
Recursion
Searching
Sorting
Hashing
Matrix
Mathematics

It is really difficult to put down everything in one article. And very long content makes any article boring.

Some important concepts which one needs to study

Number Theory
Mathematics
Puzzles
Sliding window technique (Very prominent and an essential topic)
Prefix Sum
Bit and its manipulation techniques

Data structures and algorithms are fun if you practice and play with them. Once you gain mastery then they become your companion in the coding journey and make it like heaven.

Here we come to the resources part

Some of the important sites for practicing DSA for interviews:

These are the best sites for practicing data structures and algorithms.
That's it for this post.

Some projects to build your resume!

Unnati Bamania — Mon, 18 Jan 2021 13:14:43 +0000

Projects are the identity of every web developer. Every web developer must build some projects which should be there on resume so that the resume can stand out. Here are some projects that I've mentioned which can help you build your resume and will definitely get attracted to any company. Along with the projects I've also mentioned the features from basic to advanced which can impress any interviewer or company. So ensure that you've these projects listed on your portfolio using the tech stack you're most comfortable with.

1) Your portfolio website

This is best representation of your skills and designing sense. Make sure that the design you choose or build is attractive, unique and eye catchy. Your portfolio must contain some tricky and amazing animations. If possible you can also make a toggleable light and dark scheme types template.

Features

Swiper
Particlejs
Freepic & vectorstock
Some CSS animations for card and button

Some animation links.

check this

2) Blog Page

Blog page can be one of useful projects to develop your skills and a good beginner-intermediate project. You can also host it as your own blog page or convert it to a forum.

Features:

Authentication
Google or FB Oauth
Rich text editor for content
Post can be either text or photo or both
Multiple image upload
Upvote, downvote, comment on the post
Save posts which we want to
Like, edit, delete comment
Report facility, not very complex, if that post has more than x reports then delete it.
Follow unfollow user
Add tags and posts under them
Sort posts according to trends
Search bar with query params

3) Ecommerce

Ecommerce is the classic example which give developers a chance to build mini amazon. If someone wants to try online payment system then this is the best platform to do so. Along with that there are a lot of features which can implemented.

Features:

Authentication
Email verification or phone number verification
Authentication should contain roles admin, seller, buyer
Forgot password
Admin panel to keep watch on app
Buyer can add, delete, update products
Images of product display using light box
In stock/ out of stock feature
Generate user address using an API with the help of password entered by user
Discount feature
Add, remove from cart
History of user orders
Check while adding if out of stock or not
Payment option online/ offline
Filtering options on basis of price and other attributes
Rating item only if buyer buys it
Simple and appealing UI

Check this

4) Social Media

One of the popular project for resume. Its one of the favorite for most of the developers. It will have most the features and application that a web developer needs to implement.

Features

Very attractive and simple UI
Authentication using email & oauth
Email verification
Forgot password
CRUD operations on a post
Saving post
Like & comment on post
User can like the comment
Report some post, comment or user
Follow unfollow user
Make account private or public
Chat application using socket.io
Filtering posts based on likes, comments
Adding some new feature if possible
hashtag implementation

check this
code for the above app

5) Real Estate

If you are very curious to implement something related to maps then this project is for you. Every web developer must try this.
You can take inspiration from Housing.com and magicbricks.com

Features

Authentication with all above mentioned features
Dealer can add property and location as well
You can use google maps, location and other APIs for this.
Adding property should contain all the features
If possible can add a short video feature
Pagination for displaying properties
For user, authentication will be same as mentioned above with verification
Advanced filtering and sorting for user
Saving the property
Searching advanced filter or google maps or simply by entering location
Chat application using socket.io

Some other projects:

Resume builder app

You can make a web application which can make resume using templates. Build your own custom template. Some can be paid some for free.

E-Learning Platform

This is also one of the coolest projects to make your resume shine. You can add video lectures as an instructor. Make courses either paid or for free. You can use Amazon S3 cloud to store video. Use a heat map to target the progress of students who enroll in your course.

Simple chat application

If you want the basic and best implementation of socket.io then this is what you must build.

Web games

You can build various games as web application.
One of the classic example is Doodle Cricket
Doodle cricket

Reminder app

This app is very useful personal app. Specially for ones who're really forgetful. Setting reminder of any task at particular time.

There are a lot of other projects. Build something unique of your own and that will give you intense happiness and satisfaction. Try new stuff. May be it can lead to a new and successful start up or fetch you a tag of pro developer.

Javascript: The trend!

Unnati Bamania — Sun, 17 Jan 2021 10:21:36 +0000

If you’re curious about programming in 2021 and still confused with programming languages. Please read this article completely.
JavaScript is one the most trending and fast-growing languages in 2020.

Just have a look on this annual survey of Stack overflow. Results say that 70% developers use JavaScript.
Done with all analytical parts. Now as a developer student or a learner how can one start with JavaScript. Let’s run through and quick and short guide on how to begin with JavaScript.

The Basics:

Like every other programming language, one has to learn all the basics like data types, variables, loop, conditional statements, array methods, string methods etc.

Data types in JavaScript:

Number
String
Boolean
Undefined

LOOPS:

The loops are as follows:

for loop
while loop
forEach loop

CONDITIONAL STATEMENT:

Conditional Statements are used to check conditions. The syntax mostly involves if else statements and switch statements, ternary operators.

ARRAY:

Arrays are the special variables which can store more than one value at a time.

Some important Array functions in JS:

Push: Add element to end
Pop: Delete element from end
Delete: Delete an element from index
Splice: insert in between by deleting some elements
Concat: concatenate 2 array
Slice: Getting data from some index to other index
Sort: Sorting array
Reverse: Reversing the order of array

STRING:

Some of the important String methods:

IndexOf: Gets index of a word in array
Slice: Gets content from one index to other
Search: Gives the index of given word
Substr: Gets the substring from specified index
Replace: replaces a word
Split: splits by the given character

Functions & advanced array methods:

Functions in JavaScript are declared with the keyword function

Arrow Functions:

One of the most popular JS topics. It is a very powerful method.
It allows us to write short syntax.

Some of the advanced array methods:

Filter: Mostly used to remove some data by mapping it in a function
Map: Maps the array with function
Reduce: Mostly used with accumulator to perform mathematical operations

OOP (Object Oriented Programming):

JS supports OOPs methodology.

Some terms related are:

Class: Structure for creating objects
Constructor: It is a function called by itself when objects are declared.
Inheritance: When one class inherits the properties from other class. The keyword extends is used there.
Instance: It is a kind of variable of class. It is declared by using new class_name()

DOM Manipulation:

With HTML DOM you can change or manipulate any HTML element in JavaScript
We can access HTML elements using document keyword in JS.

DOM METHODS:

getElementById: selects element with specified id
querySelector: selects element with any id, class or tag name
getElementByClassName: selects elements with specified class name.

There are a lot other DOM methods but mostly used ones are specified here

Event Listener:

We can add event listener to perform some action when something is done. For example, start timer when button is clicked hence we can can add click event listener to it.

click: on clicking the element following function runs.
mousemove: Following action takes place when mouse moves.

There a lot of other event listeners only some are mentioned here.

JavaScript has a lot of other powerful concepts to learn like closures, iterators, generators. It also supports asynchronous methodology using callbacks, promises, async & await. Some other topics to explore are AJAX and JS JSON.

Some Vanilla JS DOM manipulation projects:

Beginner Projects:

Simple calculator
Form validation
Api fetch
Spock and rock.

Intermediate projects:

Quiz
Hangman
Typing game
Speech text reader
Unit converter
Navbar animations
Bookkeeper.

Advanced projects:

JS game
Drag and drop

Tutorial references:

Conclusion:

There’s a lot more you can do with JS. There are a lot of frameworks for front and back end development. Frameworks like NodeJS, ReactJS, VueJS, AngularJS and a lot more. One can opt to become a MERN/MEAN/MEVN stack web developer. One of the coolest guide by Nitin Ranganath MERN Stack Guide on MERN stack technology.
If you want to build mobile applications React Native is there to fulfil that demand as well. Alright, now comes desktop applications, you can also build desktop applications using Electron JS. I agree ML is the future, here you’ve tensorflow JS for ML and AI. Now you see the scope of this programming language. I hope JS is your choice for programming in 2021.