DEV Community: Altaf Shaikh

How Building A Full Stack Application Helped me gained Industry Level Experience.

Altaf Shaikh — Sat, 07 Aug 2021 04:36:51 +0000

Hello Folks👋,

I Recently got Graduated🎓 in 2020, yep in the Pandemic. We all hit very hard by this Corona Pandemic and we all got stuck at home for very long. We all realize the Importance of Socializing, Fitness (Physically as well Mentally), Diet of course.

The Motive of writing ✍️ this article is to share the knowledge and skills I developed So Far during this Pandemic, which was a very great opportunity for me as well as for all of you to Use this time to become more productive like never before, tell me your story in the comment section, I will love to hear from you. Moving on When I was in the Final Semester of my college which generally runs between Nov 2019 To** June 2020**. I Got placed in the Tech Company from College Campus and that was my biggest achievement so far after getting rejected from Interviews and Aptitude Rounds.

So after that, I had nothing to do except my college Curriculum, and deep inside my mind I always wanted to do something like a startup, following my passion, or something out of the box. But I nor Find my passion nor I got any idea to start the Startup.

"One thing About me: So far from my 2nd semester to my 7th Semester, I Choose Python as my primary language in my sem 4 and I continue to use it to explore the Web Fundamentals, and From that, I developed strong technical skills in me, but there is always a scope for improvement"

Especially in India, We all have heard that our Computer Science and IT Engineering graduates don't have the right skills set and are not fit for the Job. And This taught was always in my mind and we have to do something to stand out from the crowd and become the best in our field.

But the question was How?? How we are going to get the right industry skills without really working on it. As our Curriculum is mostly theory Based so students have to put extra effort to work on their skills.

But there is one more problem that most students are willing to put effort into building their skills but they don't have the right guidance/mentorship. Because you can't learn something if you don't know what to learn and for self-learner, they have to put a lot of effort in research and after lots of trial and error they understand and figure out whats will be good for them, but not everyone can put so much of time and efforts, right??

Things are not clear when you are starting, you don't know what is right or what is wrong the only way to know is to try it out.

With all that said, We all know that we are living in the age of Google, what is not available on the internet, everything is available and that too for free. I repeat, For free.

You don't believe, right!! See this Website Teach Me Bro. I build this with a cost of Just Rs 95 that too with GST, As I wanted .com domain else that too I could get it for free. Spectacular right !!

If you still think, you have an Idea and you wanted to showcase that to the world but you don't have enough money to build the Website or Mobile App well, then I am sorry to say that you have not explored the internet very well.

Thank you so much if you are still reading the Post. Trust me your time will worth spending here. Let move ahead with ado.

TeachMeBro 🧑‍💻

With a mindset to get highly skilled at Web Development Skills, I thought to build a Blogging Platform where I will share my Knowledge and expose to the technologies to my juniors in their early stages with proper guidance & direction. Initially, my Only aim was this but later With Pandemic gave me to open up my wings more, lets discuss them later in the post.

But Hold on!! You were thinking there are a lot of platforms available to do blogging, why you are re-inventing the wheel and not reusing the existing Websites like

Blogger
Medium
Dev.to (I was not aware of such a site early)
*Hashnode *(I was not aware of such a site early)

But My Aim was to hone my Developing and Programming skills and I wanted to explore how these things are made and How one I can build the same.

I wanted to become an expert in Django Framework for that I need to explore the framework in-depth
I wanted to Get the Whole Idea of Developing a web application locally and with Continuous Integration and Continuous Deployment how I can seamlessly push code to production.
Wanted to Learn How to Rank The Website on google, how to optimized web pages for SEO
How to Architect and Design the Web App to Serve the Clients.
To Design Frontend UI to understand the Frontend Technologies better
To Get the 360 View of the application development, which will help me to become a better developer and problem solver, and System Designer.

So that's why I Decide to Build things from scratch to gain the fundamentals knowledge of web development not only theoretically but to experience it practically in a real-world scenario before working formally in any company. And Trust Me this helped he a lot in my JOB training, It made my foundation strong and I was able to Grasp thing quickly and this helps me to understand web fundamentals better and made me dive deep into it.

How did I Achieve All this?🤔

I Used Github Education Pack to build the TeachMeBro Project

What is Github Education Pack ? 👀

Github Education Pack is the most significant set of free tools and services brought to you by GitHub and its partners across the globe to the student at zero cost. From coding boot camps, logging service, code checkers, online IDEs, mass email service -- everything is available to students at no cost. Yes, you heard that right. Any student who is 13 or above years of age and enrolled in a school or college (institution) can get this. Sounds awesome right? Read on!

You can get a free domain with SSL enabled and host your websites/apps on the servers provided by AWS, Azure, or DigitalOcean. You can also launch your great application on the cloud using Bitnami. You can use Visual Studio from Microsoft for programming and host your servers using Windows Server.

How to get it?

Prerequisites:

Age: You need to be at least 13 years of age.
Email address: College-issued email address to verify your academic status.

Note: If you don't have access to a college email address, you can still verify yourself as a student by uploading a picture of your college id card, report card, and issued a certificate.

How to apply 🚀

Register for an account on Github if not already registered.
If you have already registered for an account previously just add your institution-issued email address in the Email settings section of your account.
Go to the Education Pack Section and log in with your GitHub account.
Click on Get My pack and fill in all the details as required about your usage of GitHub and your school/college details
Click on Submit My Application and wait for approval from the Github team. Approval duration is generally around 2-3 weeks.

What are the Benefits of the Github Education Pack? 🤑

Github Education Pack provides a variety of benefits from its partnerships with software companies across the globe. The pack offers almost >$200k worth of products and licenses for free to students. They are listed below:-

DataCamp: learn from the world’s top data scientists
MongoDB: $200 in MongoDB Atlas Credits, plus access to MongoDB Compass and MongoDB University including free certification.
Better Code Hub: Online source code analysis service which allows you to check your code with 10 software development guidelines and get immediate reviews and required improvements
Canva: With Canva, anyone can create professional-looking graphics and designs. Featuring thousands of templates and an easy-to-use editor. Free for 1 year.
ConfigCat: A feature flag and configuration management service where you can push releases to users without deploying new code. It is best suited for alpha-beta testing or soft launches.
Cryptolens: A cloud-based software licensing platform
Gitpod: It provides an automated and fast online IDE for GitHub
Frontend Masters: In-depth JavaScript, Node.js, and front-end engineering courses
Educative: Level up on trending coding skills at your own pace with interactive, text-based courses.
Icons8: Design resources including icons, UI illustrations, photos, and more
LogDNA: A log management platform having seamless integration with your platform and providing live monitoring and log tailing.
Name.com: A domain name registrar and web host providing one free domain to students with Privacy Protection and SSL certificate
Next.tech: Browser-based computing environments having no annoying IDE setup or building from prerequisite software
Phrase: A cloud-based localization service for translation APIs and enabling localization in your apps
PushBots: Scalable push notification system for mobile applications
SQL Smash: A better productivity plugin for SQL Server Management Studio
.TECH: It provides domains for your tech startup, business, event, community, or publication. Best suited for tech-based companies, providing them with a unique TLD suited for their purpose.
One Month: Learn HTML, CSS, JavaScript, and Python in just 30 days!
Termius: A cross-platform SSH client for desktop(Win, Linux, and macOS and mobile(iOS and Android).
TransloadIt: A file uploading and processing service to convert files from any type to any required format, be it images, videos, audios or text/docs.
Bootstrap Studio: A desktop app for creating responsive websites using the Bootstrap framework
Microsoft Azure: A set of cloud services by Microsoft to help you build, manage, and deploy applications by giving free credit to students to leverage the power of the cloud to run their development workloads
PomoDone: A Pomodoro time-tracking application to eliminate distraction, sharpen focus, and prevent burnout during your work-intensive hours using the Pomodoro Technique.
SymfonyCasts: Symfony and PHP video tutorials and code challenges
Algolia: A hosted search API that provides support for front-end and back-end frameworks and libraries
AWS Educate Program: A reliable, scalable, and inexpensive cloud computing service brought to you by Amazon Web Services plus free training, and collaboration resources
Datadog: cloud-based infrastructure monitoring
DigitalOcean: Simple cloud hosting built for developers with virtual private servers starting from as low as $5/month.Also has support for Kubernetes clusters.
Flatiron School: Web coding Bootcamp for launching developers
Heroku: A flexible, easy-to-use platform to deploy, run, and manage your apps with one-click deployment options for any framework plus integration with famous repository hosting services.
LambdaTest: An automated, live, and interactive cross-browser testing on 2,000+ real browsers and operating systems
Jetbrains: Student Licenses of professional desktop IDEs such as IntelliJ IDEA, PyCharm, and more.
Namecheap: Affordable domain registration, hosting, and management
Sendgrid: The world's largest cloud-based email delivery platform to attach to your applications
** Stripe:** A web and mobile payment APIs, built for developers
Thinkful: courseware and mentoring to launch your career as a developer
Travis CI: a continuous integration platform for open source and private projects
And Many More!!

Start your developer journey by exploring the pack here: https://education.github.com/pack

How long will it take to get my application reviewed?

The Github team manually reviews every request so that only genuine applicants get their packs. This process takes time, that's why it might be long before you get a response. If you have a college email which is already whitelisted by them, you can get it instantly.

If you have queries regarding their process or problem redeeming any benefits, you can contact them on their support email.

GitHub Education Pack Will give you everything you need to build a scalable application with the best standards.

What things I used From this pack ✨

Heroku - I used Heroku to host my application and the pack includes a Hobby Dyno which is enough to handle application load.
Godaddy: I used Godaddy to purchase the .com domain as in the pack no tool was offering a .com domain and which is fine.
NameCheap - provides free domain
DataCamp - to learn Shell Scripting and other courses.
Canva - I manage the Instagram page where I share tech posts, so for creating posts I used Canva
Bootstrap Studio - I learned this tool but never used it as I prefer to code.
And Other tools which provide learning content.

How I Applied SEO to the Website 🔍

Applying the best Search Engine Optimization (SEO) strategy was difficult with a lack of knowledge. I used the following sites and random searches on google to get things done.

Moz SEO Learning
Digital Marketing Course By Google - I didn't complete the whole course

Free Tools I used for SEO Analysis: 🔥

💡TIP: I think the best way to learn and apply SEO skills is to use the above tools and see the SEO report and from there you will know exactly whats needs to be done to fix the SEO of your Website.

My Learnings 🧠

Got Experienced in building responsive websites, Ranking web pages, SEO, Domain Ranking, User Authentication, Hosting the App with CI, CD process, Monitoring the Web app, Maintaining the App In Production, used Google Analytics, Adsense, Disqus & I learned to optimize static files for better user experience and also this project helped me to understand the core of CMS (Content Management System) system. Libraries used CK-Editor, Prism, Data Tables.

Also, I trained Students on Web Fundamentals by giving Internships under the community which I formed during the lockdown 🔒.

Takeaways🏆

You can take up any project and target the skills you want to build/improve
Googling is an Art. Asking the right set of questions will get you closer to what you want.
You can learn anything you want to learn, just use the Internet wisely.
Keep Learning and Keep Exploring.

Thanks to Github💯

I would like to thanks Github for providing free access to the best developer tools in one place so we can learn by doing and get hands-on experience with real-world tools

Github Education Pack helped me a lot in building the skills that I wanted to. And I hope with this blog you got aware of such opportunity.

Building A CRUD Application Using Node JS And MongoDB Atlas

Altaf Shaikh — Sun, 18 Apr 2021 06:41:01 +0000

Hello Folks!!

In this article, we will learn how we can use MongoDB database in Node JS using Mogoose library, which is a very popular library widely used in the Industries.

In this article we had used the MongoDB Cloud service called MongoDB Atlas, you can also use the MongoDB server running locally, the process remains the same.

What is Mongoose?

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

MongoDb VS SQL

MongoDB is a schema-less NoSQL document database. It means you can store JSON documents in it, and the structure of these documents can vary as it is not enforced like SQL databases. This is one of the advantages of using NoSQL as it speeds up application development and reduces the complexity of deployments.

Below is an example of how data is stored in Mongo vs. SQL Database:

Mongoose has great documentation, checkout the docs here to learn more about Mongoose.

Mongoose Terminologies

Collections

'Collections' in Mongo are equivalent to tables in relational databases. They can hold multiple JSON documents.

Documents

'Documents' are equivalent to records or rows of data in SQL. While a SQL row can reference data in other tables, Mongo documents usually combine that in a document.

Fields

'Fields' or attributes are similar to columns in a SQL table.

Schema

While Mongo is schema-less, SQL defines a schema via the table definition. A Mongoose 'schema' is a document data structure (or shape of the document) that is enforced via the application layer.

Models

'Models' are higher-order constructors that take a schema and create an instance of a document equivalent to records in a relational database.

Mongoose In Action

Referencing

So now, we will see a subtle difference between Mongoose Schema and Model, after that we will start working with mongoose and we will proceed further step by step explain each concept.

Mongoose Schema vs. Model

A Mongoose model is a wrapper on the Mongoose schema. A Mongoose schema defines the structure of the document, default values, validators, etc., whereas a Mongoose model provides an interface to the database for creating, querying, updating, deleting records, etc.

Don't Jump for coding right now, have some patience and for now just read the sections, in further section we will create and setup the project step by step : )

Creating a Mongoose model comprises primarily of three parts:

Referencing Mongoose
Defining the Schema
Exporting a Model

1. Referencing Mongoose

const mongoose = require('mongoose')

This reference will be the same as the one that was returned when we connected to the database, which means the schema and model definitions will not need to explicitly connect to the database, we will see database connection in the further section.

now, lets create a reference to Schema class from mongoose:

const Schema = mongoose.Schema;

Now let's move on to create our very own Schema.

2. Defining the Schema

const todoSchema = new Schema(
  {
    description: {
      type: String,
      required: true,
    },
  },
);

So here we have created an instance of Schema and named it todoSchema. The Schema takes object as a parameter, so we had passed an object and inside that we have a key called description and its value is again an object in which we had specified we need a field description of type "String", this type is in-built with mongoose you can refer more on official docs and also it is a required field so we had defined this with the key required and with a boolean value of true.

Lets add more field into the schema,

const todoSchema = new Schema(
  {
    description: {
      type: String,
      required: true,
    },
    completed: {
      type: Boolean,
      default: false,
    },
  },
  {
    timestamps: true,
  }
);

So similarly we had define a field called completed and it is of type Boolean and it hold a default value false.

And if you carefully looked at the structure we had passed a second parameter which is an object with a key timestamps so this second parameter is a configuration object in which we had only used an inbuilt feature of mongoose which adds to additional fields to every documents namely createdAt and updatedAt.

The following Schema Types are permitted:

Array
Boolean
Buffer
Date
Mixed (A generic / flexible data type)
Number
ObjectId
String

3. Exporting a Model

Finally, let's create the model using the Schema we had created and Export the model to use it in other modules where we need to interact with the database.

We need to call the model constructor on the Mongoose instance and pass it the name of the collection and a reference to the schema definition.

var Todos = mongoose.model("Todo", todoSchema);

And now finally let's export this model so that we can use this model throughout the project.

module.exports = Todos;

Now, we understand how we can define a schema and using schema how we can make our model. So this was the major part of the Mongoose model creation and now we have to make use of this model.

Next, we will see how to setup the project and start writing some code.

Creating an Application

So let's create a project folder node-mongoose and inside your project folder create a folder called models and inside that create a file called todos.js and paste below code into it and your todos.js model file should look like this:

// models/todos.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const todoSchema = new Schema(
  {
    description: {
      type: String,
      required: [true, "please enter task details"],
    },
    completed: {
      type: Boolean,
      default: false,
    },
  },
  {
    timestamps: true,
  }
);

var Todos = mongoose.model("Todo", todoSchema);

module.exports = Todos;

Previously we had implemented this model, if you haven't followed that checkout the Referencing Mongoose Section above, then you are good to continue this section.

Folder Structure:

node-mongoose
  - models
     - todos.js

Now, open a terminal in node-mongoose i.e root folder of your project and follow below steps:-

npm init -y
Create a file called app.js
Install express using npm install express
Install mongoose using npm install mongoose
Install dotenv using npm install dotenv
Create a file called app.js in root folder of your project
Now follow the steps in this blog and get the database url which will look like this : mongodb+srv://sample_user:<password>@my-sample-cluster-b3ugy.mongodb.net/<dbname>?retryWrites=true&w=majority
Create a .env file in the root folder
Add this line in the .env file with your password and database name DATABASE_URL=mongodb+srv://sample_user:<password>@my-sample-cluster-b3ugy.mongodb.net/<dbname>?retryWrites=true&w=majority
Also to ensure your database connection should not visible to other if you are storing your code on a service like Github. Create a .gitignore file and enter the file name .env inside it. So git will not keep track of this file.
Also add one more variable on new line inside .env file called PORT=3000

Your .env file should look like:

DATABASE_URL=mongodb+srv://sample_user:<password>@my-sample-cluster-b3ugy.mongodb.net/<dbname>?retryWrites=true&w=majority
PORT=3000

Your .gitignore file should look like

node_modules
.env

Now, lets import the packages we have install into the app.js file

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");

Now, lets load the environment variable

dotenv.config({ path: ".env" });
const PORT = process.env.PORT;
const dbURI = process.env.DATABASE_URL;

Now lets import the model todos we have created inside the models/ folder

//model
const Tasks = require("./models/todos");

now , lets create a database connection:

const connect = mongoose.connect(dbURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

connect.then(
  (db) => {
    console.log("Connected Successfully to Mongodb Server");

  },
  (err) => {
    console.log(err);
  }
);

Lets initialize the express app:

const app = express();

Lets add a middleware which converts the request body into json:

app.use(express.json());

Finally lets create a listener to accept incoming HTTP request on specific port:

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

Your Final app.js should look like this:

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");

dotenv.config({ path: ".env" });
const PORT = process.env.PORT;
const dbURI = process.env.DATABASE_URL;

//model
const Tasks = require("./models/todos");

const connect = mongoose.connect(dbURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

connect.then(
  (db) => {
    console.log("Connected Successfully to Mongodb Server");

  },
  (err) => {
    console.log(err);
  }
);

const app = express();

app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

Now we are good to go with basic CRUD operations.

Mongoose CRUD Operations

Mongoose has a flexible API and provides many ways to accomplish a task. We will not focus on the variations because that is out of scope for this article, but remember that most of the operations can be done in more than one way either syntactically or via the application architecture.

Create Record

Let's create a todo and save into our database:

let newTask = {
      description: "task added using create",
};

Tasks.create(newTask)
  .then((data) => {
      console.log(data);
   })
   .catch((err) => {
      console.log(err);
});

Firstly we had created a newTask object with description of a todo which is a mandatory field required to create a document in the database. Mongoose model has a create() method which is a promise and on successful we get the response in data and in-case of failure it is catched and error is displayed.

Find All Tasks

To get all the documents stored inside a collection.

//all tasks

Tasks.find({})
   .then((data) => {
       console.log("All tasks", data);
    })
    .catch((err) => {
       console.log(err);
 });

Find A Single Document or Record

Let's see how we can find a single document from the collection.

 //find with condition

  Tasks.find({ completed: false })
    .then((data) => {
         console.log("All tasks", data);
     })
     .catch((err) => {
         console.log(err);
    });

Update a Document

Let's modify the record by updating the status completed:false to completed:true

    Tasks.findByIdAndUpdate({ _id: req.params.id },{
            $set: {completed:true},
          },
          { new: true, useFindAndModify: false } //get updated result
       )
       .then((data) => {
         console.log("Updated todo data", data);
       })
       .catch((err) => {
         console.log(err);
       });

Delete a document from the collection

 //delete all tasks
     Tasks.remove({});

// delete specific task

    Tasks.findByIdAndRemove(task_id)
       .then((data) => {
         console.log("All tasks", data);
       })
       .catch((err) => {
         console.log(err);
       });

In the above example replace the task_id with the value of _id of a task in mongoDB databse which looks like 5a78fe3e2f44ba8f85a2409a

So we have seen all the CRUD operations namely, create, read, update, delete

Let's use them in our app.js file.

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");

dotenv.config({ path: ".env" });
const PORT = process.env.PORT;
const dbURI = process.env.DATABASE_URL;

//model
const Tasks = require("./models/todos");

const connect = mongoose.connect(dbURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

connect.then(
  (db) => {
    console.log("Connected Successfully to Mongodb Server");

    //all tasks
    Tasks.find({})
      .then((data) => {
        console.log("All tasks", data);
      })
      .catch((err) => {
        console.log(err);
      });

    // similary use all the other operation here

    // CAUTION: don't put all the operation together, use one operation
    // at a time
  },
  (err) => {
    console.log(err);
  }
);

const app = express();

app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

Now, run your server by using the following command:

first install,

npm install -g nodemon

then,

nodemon app.js

Congratulations !! We had learned the fundamentals of Mongoose and How we can use it in Node JS.

I hope this article helped you to understand the core idea : ) Do give a like to this article to motivate me to write more : D

Raw Engineering Interview Experience 2019

Altaf Shaikh — Tue, 23 Mar 2021 04:01:09 +0000

Hello all, this is another blog in which I am going to share my Interview Experience for the Raw Engineering Company Located at Virar. I attended this Placement Drive when I was In my Semester 7 of my Engineering Degree.

Round 1: Aptitude Exam

An Aptitude test was conducted in the Computer Labs. The test consisted of mostly technical questions based on HTML, CSS, JS, Networking, Database Management System, etc. The test had 40 odd questions segregated into 3 different sections. Also, the test consists of some basic level Quants questions.

Result: Cleared

Round 2: Personal Interview

The selected students were invited to the company premises in Virar, for the personal interview. Reporting time was at around 10 in the morning. After everyone had come in and had settled down, the interviews started. So I was interviewed by 3 interviewers. The Interview started with the simple question they told me to answer the question in a specific manner like First Tell me about yourself then your education details and then about your family background. so I answered all the questions one by one as they told me.

ProTip

Prepare the Tell me about yourself Question very nicely as it will be asked in every interview saying this from my past interview experiences and the answer to this question will either make your interview or you will get rejected. So be confident while answering this question.

So the next question was Do you know Javascript? ** I simply answer that I know only the basics of it and I am good at Python (so if you are good at something and confident enough to answer on it then go ahead and let the interviewer know about it). So they ask me some basic Javascript questions and then the other interviewer asked me, have you done any project on python, so I have built various projects on Python and some of them which I found good I have put that in my resume and I was well prepared to explain the project. So I choose my SEM V project on the topic **Virtual Personal Desktop Assistant (VPDA) basically it is kind of JARVIS with different names : ) so I explained the project and In that project, I have used REST APIs to remotely control the Jarvis via the web interface, why I am explaining this to you all because this made my Interview. So Let's see how I explained to them the flow of the web interface with the Jarvis(running locally) with the API and they told me can you draw the architecture of this web interface with API and also the API endpoints and I said yes and they provide me pen and paper and I draw the architecture and explained them and they were impressed : D, after that, they ask me more question related to REST API like the security of the API, etc.

After this, they test my problem-solving skills and for that, they have given me a puzzle to solve like cutting the cake into 8 pieces using 3 cuts. so I was not prepared for such questions but I was knowing the answer and I just recalled it and I explained it to them on paper.

After this, they asked me what is my final year project? so I answer them that my topic for the final year is Art Market Reformation using blockchain and I explained it and they started asking questions like why you are using blockchain to solve this problem and not the traditional client and server model and a few more questions on it.

Finally, they asked me what do you know about the company? Raw Engineering is a product-based or service-based company? Frankly, I was not knowing much about the company so I tried to make some answers but got failed to do so and I answered them wrong and I got uncomfortable then I said I don't know much about the company and nothing went wrong we had a conversation on that topic and they explained me about the company and their goals and lastly one important question that they asked me was, what are you comfortable with more, front end or back end? and I said Backend.

In the End, All the 3 interviewers made a handshake with me :) and keeping up the smile on my face I left the cabin.

Result: Cleared

I hope you liked the article and this will help you in your preparation and Don't forget to upvote this article below so that we can know you liked the article and also motivate us to bring more such contents :)

What is Open Source?

Altaf Shaikh — Tue, 23 Mar 2021 03:58:20 +0000

*Open source * is a term that originally referred to open source software (OSS). Open source software is code that is designed to be publicly accessible---anyone can see, modify, and distribute the code as they see fit.

Open source software is developed in a decentralized and collaborative way, relying on peer review and community production. Open source software is often cheaper, more flexible, and has more longevity than its proprietary peers because it is developed by communities rather than a single author or company.

Open source has become a movement and a way of working that reaches beyond software production. The open source movement uses the values and decentralized production model of open source software to find new ways to solve problems in their communities and industries.

So What is Closed Source Software?

Closed source software can be defined as proprietary software distributed under a licensing agreement to authorized users with private modification, copying, and republishing restrictions.

Or in layman terms, the source code is not shared with the public for anyone to look at or change. Closed source is the opposite of open source.

Closed source is actually the sort of arrangement that you would expect from most businesses, protective of their product and keen to maintain control over their brand and the user experience offered to their customers. Think Apple rather than Android, windows rather than linux.

Platforms used for collaboration:

Github: It provides hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.
Gitlab: GitLab is a web-based DevOps lifecycle tool that provides a Git-repository manager providing wiki, issue-tracking and continuous integration and deployment pipeline features, using an open-source license, developed by GitLab Inc.
BitBucket: Bitbucket is a web-based version control repository hosting service owned by Atlassian, for source code and development projects that use either Mercurial or Git revision control systems. Bitbucket offers both commercial plans and free accounts.

Popular Open Source Softwares:

Linux - Linux is a family of open source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds.
Android - Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets.
Git - Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows
Apache HTTP Server - The Apache HTTP Server, colloquially called Apache, is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation
Firefox - Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. Firefox uses the Gecko layout engine to render web pages, which implements current and anticipated web standards.
Python - The mission of the Python Software Foundation is to promote, protect, and advance the Python programming language, and to support and facilitate the growth of a diverse and international community of Python programmers.
VLC Media Player - VLC media player is a free and open-source, portable, cross-platform media player software and streaming media server developed by the VideoLAN project. VLC is available for desktop operating systems and mobile platforms, such as Android, iOS, iPadOS, Tizen, Windows 10 Mobile and Windows Phone.
LibreOffice - LibreOffice is a free and open-source office suite, a project of The Document Foundation. It was forked in 2010 from OpenOffice.org, which was an open-sourced version of the earlier StarOffice.
Atom - Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Atom is a desktop application built using web technologies.
TOR Browser - Tor is free and open-source software for enabling anonymous communication. The name derived from the acronym for the original software project name "The Onion Router".

Getting Started with Open Source:

Learn Basics of Git and Github from here

Hope you got to learn something new related to open Source : )

What is Hacktoberfest?

Altaf Shaikh — Tue, 23 Mar 2021 03:55:48 +0000

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and other companies.

Hacktoberfest is open to everyone in our global community!
4 valid pull requests must be submitted to public GitHub repositories.
You can sign up anytime between October 1 and October 31.

What do you need to do before making contributions?

Create a GitHub account (Sign up here)
Register for Hacktoberfest using your GitHub account (Register here)
Check if you have Git installed on your computer, if you don't then install it here

Participation details

Hacktoberfest is open to everyone in our global community. Whether you're a seasoned contributor or looking for projects to contribute to for the first time, you're welcome to participate.
Pull requests can be made in any GitHub-hosted repositories/projects. As long as the project is public and GitHub-hosted, your pull requests will count toward your participation.
You can sign up anytime between October 1 and October 31. Just be sure to sign up on the official Hacktoberfest website for your pull requests to count.

Participation rules

To get a shirt, you must make four pull requests (PRs) between October 1--31 in any time zone. Pull requests can be to any public repository on GitHub, not just the ones highlighted. The pull request must contain commits you made yourself. If a maintainer reports your pull request as spam, it will not be counted toward your participation in Hacktoberfest. If a maintainer reports behavior that's not in line with the project's code of conduct, you will be ineligible to participate. This year, the first 75,000 participants can earn a T-shirt.

Learn How to Contribute in Open Source:

https://www.digitalocean.com/community/tutorial_series/an-introduction-to-open-source

Some Open Souce projects to start contribute:

Explore More Opensource Projects eligible for Hacktoberfest 2020:

click on this text to find more opensource projects for hacktoberfest 2020

Some FAQS:

Q. What will you get if you participate in it ?

A limited edition T-shirt for FREE!

Q.What if I don't make at least four pull requests by midnight October 31?

As long as you registered for Hacktoberfest, you'll still get some free stickers in the mail. So it's still worth registering,

even if you're too busy to participate.

Q. I completed four pull requests. When will I receive my T-shirt?

T-shirts (or the option to plant a tree) will be awarded on a first-come, first-serve basis to the first 70,000 participants who successfully complete the Hacktoberfest challenge. We'll start sending out emails with more details on redeeming T-shirts throughout the month, so stay tuned.

Browser more faqs here

Global stats for Hacktoberfest 2019

61,871

CHALLENGE COMPLETIONS

483,127

PULL REQUESTS OPENED

154,767

PARTICIPATING REPOSITORIES

To Know more about open source checkout this article:

https://www.teachmebro.com/post/what-is-open-source

Top Code Editors

Altaf Shaikh — Tue, 23 Mar 2021 03:53:33 +0000

There are a lot of different editors and it largely boils down to personal preference. Most Python programmers use complex but extremely powerful IDEs (Integrated Development Environments), such as PyCharm. As a beginner, however, that's probably less suitable; our recommendations are equally powerful, but a lot simpler.

Our suggestions are below,

Code editor

Visual Studio Code

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.

Download it here

Gedit

Gedit is an open-source, free editor, available for all operating systems.

Download it here

Sublime Text 3

Sublime Text is a very popular editor with a free evaluation period and it's available for all operating systems.

Download it here

Atom

Atom is another popular editor. It's free, open-source and available for Windows, OS X and Linux. Atom is developed by GitHub.

Download it here

Why are we installing a code editor?

You might be wondering why we are installing this special code editor software, rather than using something like Word or Notepad. The first reason is that code needs to be plain text, and the problem with programs like Word and Textedit is that they don't actually produce plain text, they produce rich text (with fonts and formatting), using custom formats like RTF (Rich Text Format). The second reason is that code editors are specialized for editing code, so they can provide helpful features like highlighting code with color according to its meaning, or automatically closing quotes for you. We'll see all this in action later.

Soon, you'll come to think of your trusty old code editor as one of your favorite tools. :)

Introduction To The Command-Line Interface

Altaf Shaikh — Mon, 22 Mar 2021 09:53:46 +0000

In this blog, we will learn about the command-line interface in Windows, Linux, and Mac-OS and we will learn some basic commands and how to use them.

What is the command line?

The command line, also called the Windows command line, command screen, or text interface is a user interface that is navigated by typing commands at prompts, instead of using the mouse.
In the 1960s, using only computer terminals, this was the only way to interact with computers.
In the 1970s and 1980s, command line input was commonly used by Unix systems and PC systems like MS-DOS and Apple DOS.
Today, with graphical user interfaces (GUI), most users never use command-line interfaces (CLI).
However, CLI is still used by software developers and system administrators to configure computers, install software, and access features that are not available in the graphical interface.

Open the command-line interface. To start some experiments we need to open our command-line interface first.

Opening: Windows

Depending on your version of Windows and your keyboard, one of the following should open a command window (you may have to experiment a bit, but you don't have to try all of these suggestions):

Go to the Start menu or screen, and enter "Command Prompt" in the search field.
Go to Start menu → Windows System → Command Prompt.
Go to Start menu → All Programs → Accessories → Command Prompt.
Go to the Start screen, hover your mouse in the lower-left corner of the screen, and click the down arrow that appears (on a touch screen, instead flick up from the bottom of the screen). The Apps page should open. Click on Command Prompt in the Windows System section.
Hold the special Windows key on your keyboard and press the "X" key. Choose "Command Prompt" from the pop-up menu.
Hold the Windows key and press the "R" key to get a "Run" window. Type "cmd" in the box, and click the OK key.

Opening: OS X

Go to Applications → Utilities → Terminal.

Opening: Linux

It's probably under Applications → Accessories → Terminal, or Applications → System → Terminal, but that may depend on your system. If it's not there, you can try to Google it. :)

Prompt

You now should see a white or black window that is waiting for your commands.

Prompt: OS X and Linux

If you're on Mac or Linux, you probably see a $ , like this:

Prompt: Windows

On Windows, you probably see a > , like this:

Your first command (YAY!)

Let's start by typing this command:

Your first command: OS X and Linux

$ whoami

Your first command: Windows

> whoami

And then hit enter . This is our result:

$ whoami

altaf

As you can see, the computer has just printed your username. Neat, huh? :)

Use CLI commands with great attention!!! Wrong use can easily delete files or destroy your computer system completely.

Basics

Each operating system has a slightly different set of commands for the command line, so make sure to follow instructions for your operating system.

Current directory

It'd be nice to know where are we now, right? Let's see. Type this command and hit enter :

Current directory: OS X and Linux

$ pwd

/home/altaf

Note: 'pwd' stands for 'print working directory'.

Current directory: Windows

> cd

C:\Users\altaf

Note: 'cd' stands for 'change directory'. With powershell you can use pwd just like on Linux or Mac OS X.

Learn more about a command

Many commands you can type at the command prompt have built-in help that you can display and read! For example, to learn more about the current directory command:

Command help: OS X and Linux

OS X and Linux have a man command, which gives you help on commands. Try man pwd and see what it says, or put man before other commands to see their help. The output of man is normally paged. Use the space bar to move to the next page, and q to quit looking at the help.

Command Help: Windows

Adding a /? suffix to most commands will print the help page. You may need to scroll your command window up to see it all. Try cd /? .

List files and directories

So what's in it? It'd be cool to find out. Let's see:

List files and directories: OS X and Linux

$ ls

Documents                Pictures            Downloads        Public 

Music                         Videos              Desktop

List files and directories: Windows command-line

> dir

Directory of C:\Users\altaf

05/08/2014 07:28 PM <DIR> Applications

05/08/2014 07:28 PM <DIR> Desktop

05/08/2014 07:28 PM <DIR> Downloads

05/08/2014 07:28 PM <DIR> Music

...

Note: In powershell you can also use 'ls' like on Linux and Mac OS X.

Change current directory

Now, let's go to our Desktop directory:

Change current directory: OS X and Linux

$ cd Desktop

Change current directory: Windows

> cd Desktop

Check if it's really changed:

Check if changed: OS X and Linux

$ pwd

/Users/altaf/Desktop

Check if changed: Windows

> cd

C:\Users\altaf\Desktop

Here it is!

PRO tip: if you type cd D and then hit tab on your keyboard, the command line will automatically fill in the rest of the name so you can navigate faster. If there is more than one folder starting with "D", hit the tab key twice to get a list of options.

Create directory

How about creating a practice directory on your desktop? You can do it this way:

Create directory: OS X and Linux

$ mkdir practice

Create directory: Windows

> mkdir practice

This little command will create a folder with the name practice on your desktop. You can check if it's there by looking on your Desktop or by running a ls or dir command! Try it. :)

PRO tip: If you don't want to type the same commands over and over, try pressing the up arrow and down arrow on your keyboard to cycle through recently used commands.

Clean up

We don't want to leave a mess, so let's remove everything we did until that point. First, we need to get back to Desktop:

Clean up: OS X and Linux

$ cd ..

Clean up: Windows

> cd ..

Using .. with the cd command will change your current directory to the parent directory (that is, the directory that contains your current directory).

Check where you are:

Check location: OS X and Linux

$ pwd

/Users/altaf/Desktop

Check location: Windows

> cd

C:\Users\altaf\Desktop

Now time to delete the practice directory:

**Attention:** Deleting files using **del**, **rmdir** or **rm** is irrecoverable, meaning the deleted files will be gone forever!

So be very careful with this command.

Delete directory: Windows Powershell, OS X and Linux

$ rm -r practice

Delete directory: Windows Command Prompt

> rmdir /S practice

practice, Are you sure <Y/N>? Y

Done! To be sure it's actually deleted, let's check it:

Check deletion: OS X and Linux

$ ls

Check deletion: Windows

> dir

Exit

That's it for now! You can safely close the command line now. Let's do it the hacker way, alright? :)

Exit: OS X and Linux

$ exit

Exit: Windows

> exit

Cool, huh? :)

Pro Tip :

When you want to copy from the terminal or paste into the terminal instead of using the right-click option you can use a keyboard shortcut for copy and paste. To copy from terminal use ctrl + shift +c and to paste into the terminal use ctrl + shift + v. This will save your time. Cool!, huh? :)

Summary

Here is a summary of some useful commands:


Scenario(when u want to)	Windows Command	Command (Mac OS / Linux)	Description	Example
See which files are present in a directory	dir	ls	list directories/files	dir
Create a directory	mkdir	mkdir	create a new directory	mkdir testdirectory
Move a file or dir into other location	move	mv	move file	move c:\test\test.txt c:\windows\test.txt
Exit from the terminal	exit	exit	close the window	exit
Copy a file or dir into other location	copy	cp	copy file	copy c:\test\test.txt c:\windows\test.txt
Go inside a directory	cd	cd	change directory	cd test
See the full path of the current directory	cd	cd	show the current directory	cd (Windows) or pwd (Mac OS / Linux)
Delete a file from the system	rmdir (or del)	rm	delete a file	del c:\test\test.txt
Delete directory from the system	rmdir /S	rm -r	delete a directory	rm -r testdirectory
Check the usage of a command	[CMD] /?	man [CMD]	get help for a command	cd /? (Windows) or man cd (Mac OS / Linux)

I hope the article was helpful to you!

JavaScript Asynchronous Programming and Callbacks

Altaf Shaikh — Mon, 22 Mar 2021 09:50:27 +0000

Computers are asynchronous by design.

Asynchronous means that things can happen independently of the main program flow.

In the current consumer computers, every program runs for a specific time slot and then it stops its execution to let another program continue their execution. This thing runs in a cycle so fast that it's impossible to notice. We think our computers run many programs simultaneously, but this is an illusion (except on multiprocessor machines).

Programs internally use interrupts, a signal that's emitted to the processor to gain the attention of the system.

I won't go into the internals of this, but just keep in mind that it's normal for programs to be asynchronous and halt their execution until they need attention, allowing the computer to execute other things in the meantime. When a program is waiting for a response from the network, it cannot halt the processor until the request finishes.

Normally, programming languages are synchronous and some provide a way to manage asynchronicity in the language or through libraries. C, Java, C#, PHP, Go, Ruby, Swift, and Python are all synchronous by default. Some of them handle async by using threads, spawning a new process.

JavaScript

JavaScript is synchronous by default and is single threaded. This means that code cannot create new threads and run in parallel.

Lines of code are executed in series, one after another, this type of execution flow is also called as Blocking Code/Mode.

Blocking Code Example

Create a text file named input.txt with the following content -

No other lines will execute until the whole file is read.

Create a js file named app.js with the following code -

var fs = require("fs");

var data = fs.readFileSync('input.txt');

console.log(data.toString());

console.log("Program Ended");

Now run the main.js to see the result -

node main.js

Output:

No other lines will execute until the whole file is read.

Program Ended

Here, we can clearly see code of line are executed one after the other.

But JavaScript was born inside the browser, its main job, in the beginning, was to respond to user actions, like onClick, onMouseOver, onChange, onSubmit and so on. How could it do this with a synchronous programming model?

The answer was in its environment. The browser provides a way to do it by providing a set of APIs that can handle this kind of functionality.

More recently, Node.js introduced a non-blocking I/O environment to extend this concept to file access, network calls and so on.

Callbacks

You can't know when a user is going to click a button. So, you define an event handler for the click event. This event handler accepts a function, which will be called when the event is triggered:

document.getElementById('button').addEventListener('click', () => {

  //item clicked

})

This is the so-called callback.

A callback is a simple function that's passed as a value to another function, and will only be executed when the event happens. We can do this because JavaScript has first-class functions, which can be assigned to variables and passed around to other functions (called higher-order functions)

It's common to wrap all your client code in a load event listener on the window object, which runs the callback function only when the page is ready:

window.addEventListener('load', () => {

  //window loaded

  //do what you want

})

Callbacks are used everywhere, not just in DOM events.

One common example is by using timers:

setTimeout(() => {

  // runs after 2 seconds

}, 2000)

Handling errors in callbacks

How do you handle errors with callbacks? One very common strategy is to use what Node.js adopted: the first parameter in any callback function is the error object: error-first callbacks

If there is no error, the object is null. If there is an error, it contains some description of the error and other information.

fs.readFile('/file.json', (err, data) => {

  if (err !== null) {

    //handle error

    console.log(err)

    return

  }

  //no errors, process data

  console.log(data)

})

The problem with callbacks

Callbacks are great for simple cases!

However every callback adds a level of nesting, and when you have lots of callbacks, the code starts to be complicated very quickly:

window.addEventListener('load', () => {

  document.getElementById('button').addEventListener('click', () => {

    setTimeout(() => {

      items.forEach(item => {

        //your code here

      })

    }, 2000)

  })

})

This is just a simple 4-levels code, but I've seen much more levels of nesting and it's not fun. This nesting of call-backs is termed as a Call-back Hell problem in JS world.

How do we solve this?

Alternatives to callbacks

Starting with ES6, JavaScript introduced several features that help us with asynchronous code that do not involve using callbacks: Promises (ES6) and Async/Await (ES2017).

Thank You for reading the article, I hope you got to learn something new from it : )

Hosting NodeJs Application on Heroku Platform using Heroku CLI

Altaf Shaikh — Mon, 22 Mar 2021 09:36:58 +0000

In this blog, we will learn how to Host NodeJs Application on Heroku Platform using Heroku CLI. No need to leave your terminal or code editor, all from the terminal itself, huh?, pretty cool, right? Let's see how we can achive this.

Pre-requisite

Logging Into Heroku

Heroku login is required once. Enter below command in your terminal and follow up the prompt window and Authorize

heroku login

Specify the version of node

Add The version of Node.js to your package.json file:

"engines": {
    "node": "10.x"  // replace x with your node version like 10.16.2
},

Specifying a start script

create a Procfile file inside the root directory of the project and add the below code in it

web: node app.js

By default, Heroku will look into our package.json file under the scripts section and grab start command. Sometimes we won't have that defined or it will be different from what we want the server to execute. We can specify the exact command we want by creating a Procfile file.

Create Heroku App and Remote Repository on Heroku

Specify a unique name for your application, this name should be globally unique.

heroku create <app-name>

example:

heroku create todo-app-rest-backend-nodejs

Rename Your APP - Optional

If you got random app name or if you want to rename your Heroku app then use the below command to achieve it from the terminal itself.

heroku apps:rename <new-app-name> --app <old-app-name>

Build your app and run it locally - Optional

heroku local web

Deploying Code To Heroku

git push heroku master

Once the build and deployment is successful you will receive the url of the Hosted Application in your terminal.

If your Project has Environment Variables then Follow Below Along

Set a config variables on heroku app

Use below command for each environment variable to set all of your env variables and you are done.

heroku config:set <environment-variable-name>=<value>

Examples:

heroku config:set GITHUB_USERNAME=joesmith

heroku config:set PORT=3000

Congratulations!! You had successfully learned how to host the NodeJS application on Heroku Like a PRO

DEV Community: Altaf Shaikh

How Building A Full Stack Application Helped me gained Industry Level Experience.

TeachMeBro 🧑‍💻

How did I Achieve All this?🤔

I Used ** Github Education Pack ** to build the TeachMeBro Project

How to get it?

How to apply 🚀

What are the Benefits of the Github Education Pack? 🤑

How long will it take to get my application reviewed?

What things I used From this pack ✨

How I Applied SEO to the Website 🔍

My Learnings 🧠

Takeaways🏆

Thanks to Github💯

Building A CRUD Application Using Node JS And MongoDB Atlas

What is Mongoose?

MongoDb VS SQL

Mongoose Terminologies

Collections

Documents

Fields

Schema

Models

​Mongoose In Action

Referencing

Mongoose Schema vs. Model

1. Referencing Mongoose

2. Defining the Schema

3. Exporting a Model

Creating an Application

Folder Structure:

Mongoose CRUD Operations

Create Record

Find All Tasks

Find A Single Document or Record

Update a Document

Delete a document from the collection

Raw Engineering Interview Experience 2019

What is Open Source?

Platforms used for collaboration:

Getting Started with Open Source:

What is Hacktoberfest?

61,871

483,127

154,767

Top Code Editors

Code editor

Visual Studio Code

Gedit

Sublime Text 3

Atom

Why are we installing a code editor?

Introduction To The Command-Line Interface

What is the command line?

Opening: Windows

Opening: OS X

Opening: Linux

JavaScript Asynchronous Programming and Callbacks

JavaScript

Blocking Code Example

Callbacks

Handling errors in callbacks

The problem with callbacks

How do we solve this?

Hosting NodeJs Application on Heroku Platform using Heroku CLI

Pre-requisite

Logging Into Heroku

Specify the version of node

Specifying a start script

Create Heroku App and Remote Repository on Heroku

​Rename Your APP - Optional

​Build your app and run it locally - Optional

Deploying Code To Heroku

If your Project has Environment Variables then Follow Below Along

Set a config variables on heroku app

Examples:

I Used Github Education Pack to build the TeachMeBro Project

Mongoose In Action

Rename Your APP - Optional

Build your app and run it locally - Optional