React is one of the most in-demand web technologies to learn in 2021, and has a very large community, and lots of jobs too.

What is React?

In case you don’t have any prior knowledge about React and decided to read this article, this section is for you.

React is a Javascript library popularly used by new-age frontend web developers. It is a great choice for creating smooth user interfaces and front-end development of web and mobile applications.

What makes React so popular is that it’s easier to grasp than other frameworks and libraries — which is good for beginners. It is also because of its blazingly fast performance with help of Virtual DOM.

Other Javascript frontend libraries and frameworks include Angular, Vue, jQuery, etc.

When to learn React?

One should start learning React (or any other Javascript library or framework for that matter), after having clear fundamentals and good control over HTML, CSS, and vanilla Javascript.

It is recommended to learn and have experience with Javascript first, because React is built upon it, and you should definitely build some projects using pure vanilla Javascript.

Most interviews or coding rounds for front-end developer roles ask candidates not to use any libraries or frameworks and test their skill in using pure Javascript.

Top Javascript projects using React

The below projects are ordered based on their difficulty and complexity level, with beginner-friendly projects being covered first, and then gradually we would move onto some advanced projects.

You will find each of these projects (and more) in Crio Projects Hub. All projects available in Crio Projects Hub are methodically explained in a step-by-step manner and will guide you to complete the projects on your own. The best part about these projects is that they are absolutely free!

Dive in and find out which project you will be working on first :)

Project 1: Rat in a Maze

Difficulty: Beginner
Time required: 10 hours

This is a simple React web app, which displays all the possible ways a rat can navigate its way out of a square maze while avoiding all the obstacles which come in its way.

It is an interesting project to challenge your problem-solving skills as it visualizes the famous Rat in a Maze problem.

While building this project, you will extensively apply important programming concepts such as Recursion and Backtracking, as well as get hands-on with the basis of React.

Project 2: Markdown Editor

Difficulty: Beginner
Time required: 5 hours

Markdown is a way to style text on the web, which has its own way of writing or a “syntax”. Many people write blog posts, jot down their thoughts, or create notes for a subject using markdown.

You might’ve encountered markdown files while creating a repository on GitHub and creating the README.md file to describe that repo.

This is a web application that can be used to create and edit Markdown files.

It is a simple and fun project to implement and gain a deeper understanding of creating custom hooks, and working with Context API and React markdown.

Project 3: Resume Builder Web Application

Difficulty: Beginner
Time required: 15 Hours

Have you ever wanted to automatically generate resumes by using amazing templates? Or considered working on a project to build your own resume?

If so, this is your opportunity to grab the idea and start building a handy solution.

In this project, you’ll get to create multi-step forms using React, styling the components using Material UI (a UI library), and learn some basics of Node.js, used on the server-side.

Project 4: Online Code Editor

Difficulty: Intermediate
Time required: 35 Hours

This is a great project for frontend developers to showcase their skills and in turn, build something useful for the community.

In this project, you will build an online code editor that works exactly like codepen. It’s a great project to understand how codepen works and also highlight valuable skills in your resume.

Project 5: 450 DSA Tracker

Difficulty: Intermediate
Time required: 40 Hours

As a developer, you might have been solving DSA (Data Structures and Algorithms) problems, and you might have also experienced the need for a checklist or a tracker for tracking your progress.

If you relate to this, the 450 DSA tracker is just what you need to build.

As you build this project, you’ll learn about IndexedDB, building custom context APIs, creating custom hooks, and Typescript.

Project 6: Slack clone using React

Difficulty: Advanced
Time required: 80 hours

If you’re an advanced developer looking for a challenging and noteworthy project, this one is for you. Building a clone of a popular messaging and collaboration app such as Slack will help you grow relevant skills such as React-Redux, Firebase fundamentals, website hosting, and more.

As you finish developing this project, you’ll be able to flaunt a messaging app that is functionally similar to Slack. This is a great project to include in your resume and impress interviewers with your work.

Project 7: Amazon clone using React

Difficulty: Advanced
Time required: 100 Hours

Nowadays, new businesses and well-established ones too, convert their commerce to e-commerce as that provides a more accessible platform for trading goods and conducting business with customers.

For some businesses, e-commerce is the sole source of income.

As more businesses are shifting online, the demand for developers with a knowledge of building e-commerce websites is growing in the tech industry. This project is your first step to building an entire e-commerce application all by yourself.

By the end of this project, you’ll end up with a clone of the famous e-commerce platform Amazon, while also learning more about Firebase, Stripe payment gateway integration, Context API, React Router, and Deployment of a React App.

By the end of building all these projects, you’ll have a better understanding of React, more confidence in yourself about building things on your own, and great projects to showcase on your resume! If you’re excited to build any of these projects, these projects come with a step-by-step guide. Head over here to know more.

7 Projects You Can Build to Learn React in 2021 was originally published in Dev Genius on Medium, where people are continuing the conversation by highlighting and responding to this story.

Python is one of the most popular languages in today’s world, and it is also most in demand, along with Javascript. This is simply because of its easy-to-learn syntax, user-friendly internal APIs and libraries, and also because it runs on all major operating systems like Windows, Linux, and iOS.

What makes it useful?

Easy to Understand

Python was created in 1989 by Guido Van Rossum and stresses the DRY principle (Don’t Read Yourself), which has made it a more readable language. Many people are introduced to the programming world through Python simply because of its easy-to-understand syntax, which is very close to English.

High-Level Language

Python is a High-Level Language like Javascript and Java, which reduces the developer’s effort as we don’t need to remember its system architecture, or manually manage memory allocation.

Portable

A Python program written on a Linux-based system can run on a Windows machine, or any other major OS and vice versa. This makes it a highly portable language.

Extensible

Python is also an extensible language, which means you could use Python in other languages like Java, which makes the code reusable.

Open Source

Python is an open-source language, which means it is freely available to everyone, anyone can have a look at its internal code and implementation. Also, anyone from the developer community can make changes to the language and improve its features.

Huge Collection of Libraries

As it comes with a vast collection of libraries, Python finds its use in a variety of applications including web browsers, databases, image manipulation, data science, artificial intelligence, and many more.

Where is Python applied?

As told earlier, Python is one of the most in-demand languages and has many applications in the real world. The most popular use cases are listed here:

Web Development

Python is one of the most used languages in the web world, thanks to frameworks and libraries like Django and Flask, which make application development a lot faster and easier. These frameworks provide security, scalability, and convenience out of the box, which is very commendable when compared to building an application from scratch.

Major organizations like Instagram, Pinterest, Udemy, and Coursera all use Django for their web applications.

Artificial Intelligence (AI) and Machine Learning (ML)

Python is the most preferred language for developing ML and AI applications, simply because it has a huge collection of libraries such as Tensorflow, Keras, etc, which make it convenient to use Machine Learning algorithms, using a simple syntax. The huge community supporting the language also helps a lot.

Top companies like Netflix, Google, and Facebook all rely on Python for ML and AI applications.

Data Science and Visualisation

When it comes to data science, Python again shines here with the help of its multiple libraries like Pandas, Numpy, etc. These libraries help in extracting valuable information from data. Furthermore, data visualization libraries like Matplotlib help a data scientist to visualize the data through charts and graphs.

Again, the top companies which use Python for ML and AI, naturally use it for data science applications as well.

Web Scraping

Python also comes in handy when we need to scrape or pull a large amount of data off websites, which could be used for creating a dataset or used in processes such as job postings, price comparison, sports score analysis, etc.

Beautiful Soup is a useful package used for web scraping.

Desktop Apps

Python is also used for developing desktop applications. Using libraries like Tkinter, Kivy, PyQT, etc we can develop interactive interfaces.

DropBox desktop client uses Python.

Game Development

Python is also used for developing video games using libraries such as Pygame, Panda3D, and Soya3D. However, Python performs poorly when there is a requirement for high-speed 3D rendering, which is limited by Python’s speed and memory constraints.

Games like Battlefield 2, The Sims 4, Vega Strike, and World of Tanks have been developed using Python.

Image Processing and Graphic Design

Surprisingly, Python also finds itself to be useful in Image Processing, Graphic Design, and even Computer Generated Imagery (CGI). It is used to build popular imaging software such as GIMP, Inkscape, and Scribus. Even Maya, Blender, and 3ds Max use Python.

A very popular use case of Python in the CGI world is that of Industrial Light and Magic, the studio which has created the FX for Star Wars and Star Trek.

Robotics

Python is pretty popular in the world of robotics, be it in development using Raspberry Pi hardware, or finding its use in Robotic Process Automation (RPA).

An industrial example of Python being used in robotics is in the development of robotic arms which can be used in tandem, developed by companies like Rozum Robotics.

Automation

When it comes to repetitive tasks, automation is generally the solution to get out of the boring loop, and what better than Python. There is almost no end to tasks which you could automate.

For example, Python scripts can be used to automate the deployment of applications, i.e. in DevOps. Another example where it could be used for personal interest is to respond to emails or get notified when your favorite pair of headphones on an e-commerce website are on sale.

Education Industry

Due to its easy-to-understand syntax, Python is generally the first language that people use to get into programming. It is also being adopted in middle and high school syllabi as it is easier for children to understand code in Python. Even analysts who have been working with just Excel and SQL can learn and get trained in Python to fully utilize its data processing capabilities.

We’ve had a look at all of the major use cases of Python in the real world, and also the companies using it. It is a must-have skill, as it has created a lot of jobs, and it would be in demand for years to come.

Top 10 Real-World Applications of Python was originally published in The Pythoneers on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a programmer, or a computer science student, you might’ve heard or know something about the terms which are shown above. Actually you should have knowledge about these if you claim to be working in the software development or computer science field. Also, there is a chance that you might not have fully understood when and where all these features are applied in real life. This article focuses on the application of the most used programming paradigm — Object Oriented Programming, in real world problems.

So, Object Oriented Programming(OOP) is a programming paradigm(philosophy), which is based on the concept of “objects”, which can contain data, in the form of fields, and code, in the form of procedures.

There are four basic principles of OOPs: Encapsulation, Abstraction, Inheritance, Polymorphism, which will be discussed in the following sections.

I took part in Crio.do’s #iBelieveInDoing July challenge, in which we got to take part in some of their Micro-Experiences/Bytes focused on application of OOPs. I would recommend you all to go through that experience for some hands-on learning.

Here is a link to my previous article in the challenge on System Design: https://medium.com/@jaidev.bhui/a-high-level-view-of-cloud-computing-and-system-design-e56122326454

Let’s Get Started with OOP principles!

We’ll be taking the example of a chat app like Whatsapp.

Encapsulation

the action of enclosing something in or as if in a capsule.

As the definition says, enclosing something in a capsule, the meaning of encapsulation in OOPs is quite intuitive, just like the other OOP principles.

Encapsulation is, containing all important information inside of an object, and only exposing selected information to the outside world. Attributes and behaviors are defined by code inside the class template. It helps in emulating real world objects/entities.

For Example, If we are writing code for a messaging app, we would have a message class, which would contain all the information about a particular message being sent, like — receiver, sender, message content, message id — and all it’s methods inside a single entity.

As we can see, all the attributes of the message are “encapsulated” together inside a bundle(class).

Encapsulation helps by:

• Providing Security: to access any information about a message object we would have to go through the public getter and setter methods (setSender, setReceiver, getSender, getReceiver).
• Protecting developers from common mistakes: Only public fields & methods accessible, so developers don’t accidentally change something dangerous.
• Protects IP: code is hidden in a class, only public methods are accessible by the outside developers

What is the drawback if we don’t use encapsulation? — Duplication of code. Low maintainability. Inconsistent behavior. Difficult to test. Possible inappropriate access/modification from external methods.

Abstraction

the quality of dealing with ideas rather than events.

Going by the definition, this is exactly what a software or a product needs to have, for a better user experience, to be more user friendly.

What we mean by abstraction is, to hide all the complexities and implementations from the users, to make it easier for them to use it.

For example, if the user is driving a car, they don’t need to know how the clutch, brake or accelerator are working, but they are able to use them, to drive the car.

Similarly in our chat app, the user doesn’t need to know how the message is being sent to the receiver, they just need to push the send button, and the work is done. Hence, this focuses on the “idea” of sending a message, and not on the “event” or “implementation” of sending it.

Another practical example of abstraction can be the Java Virtual Machine(JVM) — your code can use the exact same java methods irrespective of whether your code will run on Linux or Windows or any other OS. Underneath, a lot of things will change depending on the OS, which the user doesn’t need to know.

Why Abstraction is helpful:

• Hide complex details from user
• To the implementers(programmers) of the class, it is useful since it provides them with the flexibility to change things as long as the method signatures don’t change

What is the drawback if we don’t use abstraction? — Low maintainability because responsibilities are not clearly differentiated. Higher Complexity with larger code bases because many objects interact with others and it becomes difficult to add functionality without impacting others.

Inheritance

the action of inheriting(traits).

Just like you inherit genes, features, traits from your ancestors, it is possible to inherit attributes, methods, data from one class to another.

Inheritance further strengthens the emulation of real world entities.

In our chat app, if we were to add some new features, like sending images or voice messages with the current code base, we would have to add new attributes particular to these new features, like image metadata, resolution, etc.

Now, we could add those attributes as shown above, but this makes the code less maintainable, like if there was a need to add another feature we would have to add another attribute, which would be present with empty values in other message types, like there is no role of audio duration in text messages, so such information has no use for text messages, and similar case can be made for images.

Also, we would have to create many different getter and setter methods in the same class for different type of messages.

So, to make this code easier to understand, develop and maintain, we should use inheritance.

We will create a base class Message and then extend that to different message type classes:

By extending the Message class, we can use all its fields in the child classes. This is helpful as all the message types have some common fields like sender and receiver.

Inheritance is useful:

• It helps separate out common functionality and fields so that they can be reused across many other classes cleanly.
• Avoids code redundancy.

Polymorphism

a feature of a programming language that allows routines to use variables of different types at different times.

Polymorphism means to have a function with same name performing a different task.

For example, in calculating area of a shape, for Circle it means pi*radius*radius, while for a rectangle it is length*breadth, similarly, in terms of speaking, for dogs it means to bark, while lions roar, cats meow, and so on.

Polymorphism is designing objects to share behaviors. Using inheritance, objects can override shared parent behaviors, with specific child behaviors. Polymorphism allows the same method to execute different behaviors in two ways: method overriding and method overloading.

Method Overriding/Runtime Polymorphism: child class provides its own implementation of the method defined in the parent class.

Method Overloading/Static Polymorphism: methods of same name, from the same class having difference in number and types of parameters.

Now in our app, let’s say, we don’t want to use the functionality provided by some of the methods in the base class, and want to implement our own functionality, by also not renaming the methods since that would mean changing all the client code that is presently invoking that method.

We would use Method Overriding, since we want our own implementation of the methods defined in the parent class.

In the base class, we are checking for validity of a message. Now, for Text Message it would be in terms of length, Image Message it would be in terms of its size. So, we should override this method to our needs in the child classes.

In the case of our app, currently there are only default constructors(taking no arguments), but if the clients of this class want to set it to some default value of their choice, we would need to use Method Overloading:

Note: This form of method overloading is restrictive in Python since if you have two methods with the same name, only the second method definition holds good. The first one cannot be used.

So to give you a better idea, here is an example of Method overloading in Java:

Now, when an Object of class Message is made, if we provide the parameters inside the constructor, the new constructor would run, and set the values given.

Why to use polymorphism:

• Presents the ability to perform different actions using the same method signature.
• Keeps code cleaner.

Conclusion

Object Oriented programming requires thinking about the structure of the program and planning at the beginning of coding. Looking at how to break up the requirements into simple, reusable classes that can be used to blueprint instances of objects. Overall, implementing OOP allows for better data structures and reusability, saving time in the long run.

All of this was part of the various “Bytes” by Crio, in which I had to #learnbydoing.

I definitely learned a lot after completing this Micro Experience, and think that Crio is doing a great job in this period of stress and the situation created by the covid pandemic, by creating such an interactive online learning experience.

References

• https://crio.do/
• https://www.geeksforgeeks.org/
• https://www.freecodecamp.org/
• https://www.educative.io/blog/object-oriented-programming

Applying OOP in Real World Applications was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

No, not the literal cloud, but the trending tech word, which means the on-demand availability of computer system resources, especially data storage and computing power, without direct active management by the user.

Look, if you’re a budding developer (like me), who’s curious about the web, how web hosting works, what to do after buying a domain name, looking forward to getting into System Design, or even what happens after typing www.google.com in your browser, this article might push you in the right direction.

Crio.Do: The Game Changer

Crio.Do is really a game changer, when it comes to online learning platforms. Their Micro Experiences provide hands-on learning to developers, in a well structured, well documented way, with loads of reference materials. I would highly recommend you all to take part in at least one of their micro experiences.

They distribute the learning experience into modules, making it easier to grasp concepts in a well structured manner. And there is a debrief after each module, where you’re asked some questions, based on the learning done.

I took part in Crio.Do’s #IBelieveinDoing challenge over the last weekend, and completed the amazing System Design Micro Experience, which is the main purpose of me even being here, typing this article.

QReview is another ME (Micro Experience) which was a part of this challenge, which focuses more on REST API calls, and working on the backend of a food review mobile app, which I had completed when I was part of the Crio Launch program.

But this article focuses more on the System Design ME, so we’ll go ahead with that.

Let’s Start

Let’s get on with the main subject of the article, which is to get a high level understanding of System Design.

I’ll follow the same modular plan created by Crio, consisting of 4 modules.

Module 1: Host a webserver in cloud

You might’ve heard of AWS, Google Cloud Platform, Azure and other cloud platforms. So, what these platforms do is, they provide you with computer system resources, especially data storage and computing power on demand.

Virtual Machine(VM) is nothing but a virtual environment that functions as a virtual computer system with its own CPU, memory, network interface, and storage, created on a physical hardware system (located off- or on-premises).

So, instead of buying a physical machine, you can use these VMs to do anything you want in cloud. The primary advantage is that they are pay-per-use. So, if you want a big VM today and a smaller VM tomorrow, that is totally possible!

Now, to use that Virtual Machine as a server, we would require an HTTP server, so we need to install Nginx on the VM, which is a web server which can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. An alternative can be Apache server.

If you now go to the browser and type in the public IP address, you can see that now anyone in the world can access your server. (Provided the firewall allows these connections).

Module 2: Host your site in a domain

So, now you can access your server, job’s complete, right? Not quite.

What if you wanted your friend to see your website, you would have to send him/her these seemingly random numbers(IP address), which can be forgotten easily. You don’t remember Google’s IP address when you want to access it, right?

So, you need a domain name, a placeholder which points to the IP address of your server, so you don’t need to remember these random numbers, but just the name that’s pointing to it, which can be as simple as www.google.com.

You can buy any domain name, and then add your server’s IP address to the A field.

Now, when we enter www.google.com in our browser, what happens is, it is getting resolved to the IP address of one of google’s many servers. The system used for resolving this name is DNS.

The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.

After you enter the domain name, there are name servers (NS) which resolve this to the IP address, and your browser sends an API GET request to the server, which further responds with HTML data(which you see being rendered in the browser), or JSON/XML data, etc.

Module 3: Fun with Load Balancers

Now that your website server has a name, you’re done, right?

Still no.

What if your website gets famous and everyone in the world tries to access it? Would your servers be able to handle the “load”? What if your server goes down?

So, we need to scale our system to cater the increasing demands of the users.

Scalability is the property of a system to handle a growing amount of work by adding resources to the system. We can either scale horizontally (add more machines, more servers), or scale vertically (add more computing power, memory, resources to the existing machine/server).

Big companies like Facebook, Google, Twitter, all use horizontal scaling, as they have multiple servers around the world.

Here is a fun representation from Bunmi Sowande’s blog on blog.turbonomic.com.

Okay, now we have our servers ready (horizontal scaling), but how would the users be directed to all these new servers?

We use something called Load Balancers to solve this problem.

A load balancer is a device that acts as a reverse proxy and distributes network or application traffic across a number of servers. Load balancers are used to increase capacity (concurrent users) and reliability of applications.

Load Balancers can be Software based or Hardware based, they can also be classified on the basis of what layer in the OSI Model they work on.

From AWS:

Application Load Balancers are used to route HTTP/HTTPS (or Layer 7) traffic. Network Load Balancers and Classic Load Balancers are used to route TCP (or Layer 4) traffic.

Load Balancers act as a traffic cop, which sit in front of our servers and route client requests responsibly. This is carried out in a manner in which, every user has a smooth surfing experience, and such that a single server doesn’t get overworked.

Now even if one of our servers goes down, Load Balancer can handle it.

Module 4: Scale your server performance with CDN

You might’ve used Facebook, Twitter or Instagram. There are hundreds of millions, or even billions of users. Now if such a huge user-base is requesting data, there would be a lot latency, and a lot delay in the server delivering the data to your browser or device, depending on your location.

But there doesn’t seem to be a huge delay (not considering your network speed).

This is caused by caching.

Cache is a hardware or software component that stores data so that future requests for that data can be served faster.

There is something similar happening here, with the help of a CDN (Content Delivery Network).

To minimize the distance between the visitors and your website’s server, a CDN stores a cached version of its content in multiple geographical locations (a.k.a., points of presence, or PoPs). Each PoP contains a number of caching servers responsible for content delivery to visitors within its proximity.

There is another interesting thing, if we update the main servers, the cached resources, won’t be updated immediately, like in case of Facebook comments, where such an immediate consistency of data is not important, we can wait and update the cached instances some time later.

But what if it was a banking system? It would definitely cause problems, as one server would show different information from another server. So, here Immediate Consistency of data is required.

So, I hope some of the questions you had earlier, are solved now, or that now you have a better understanding of how the web architecture works at a high level.

All of this was part of the System Design ME by Crio, in which I had to #learnbydoing.

I definitely learned a lot after completing this Micro Experience, and think that Crio is doing a great job in this period of stress and the situation created by the covid pandemic, by creating such an interactive online learning experience.