DEV Community: Atharva Kamble

JavaScript Package Manager — Yarn vs NPM

Atharva Kamble — Sun, 10 Oct 2021 12:19:41 +0000

JavaScript Package Manager — Yarn vs NPM

A package manager is a collection of software tools that keeps track of what computer program is installed on your computer and allows you to easily install, upgrade to newer versions, or remove computer programs that you previously installed. As the name suggests, package managers deal with packages, distributions of software, and data in archive files. It helps to create project environments and easily import external dependencies.

Two of the most popular package managers among JavaScript (and Node.js) developers are npm and Yarn.

What is npm?

npm (Node Package Manager) is a package manager for the JavaScript programming language. npm is the default package manager for the JavaScript runtime environment Node.js. It consists of three components: the website to manage various aspects of your npm experience, Command Line Interface (CLI) to interact with npm via the terminal, and registry to access an extensive public database of JavaScript software.

What is Yarn?

Yarn (Yet Another Resource Negotiator) and is a package manager just like npm. It was developed by Facebook in 2016 and is now open-source. The intention behind creating Yarn was to address some of the performance and security shortcomings of working with npm

So as now you got the basic idea about npm and yarn, Let’s compare npm - Yarn similarities and differences.

‍

1. Installation

Installing npm seems much easier than that of Yarn—npm comes already bundled with your Node.js installation, so there’ll be no need to install it.

Yarn is available as an npm package. So, you can install it by running the following command on the terminal:

npm install --global yarn

2. Managing dependencies

Yarn and npm have nearly the same ways of managing dependencies. They both provide the package.json file in their project’s working directory. This file keeps all the relevant metadata associated with the project. It assists in managing the project’s dependencies version, scripts, and more. Both the package managers store dependency files into the node_modules folder and auto-generate Lock files (package-lock.json in npm and yarn.lock in yarn).

3. Performance

One of the main differences between NPM and Yarn is how they handle the package installation process. Yarn installs packages in parallel. Yarn is optimized to fetch and install multiple packages simultaneously. If you install five packages, and two of them take a long time to install, Yarn will go over and install the packages side by side.

On the other hand, NPM would install each package one at a time. It fetches every package independently. This means that if you install a list of five packages, NPM will perform a serial installation process. Parallel installation is one of the reasons why Yarn beats NPM in Performance.

4. Security

While Yarn was initially regarded as more secure, the npm team has made commendable comebacks with the introduction of significant security improvements. If you try installing code with a known security vulnerability, npm will automatically issue a warning. Also, a new command, npm audit, has been introduced to assist you in recursively assessing your dependency tree to identify anomalies.

On the other hand, Yarn checks behind the scenes and ensures that you’re not downloading rogue scripts or stuff that can conflict with your project dependencies. Security is one of Yarn’s core features.

5. Fetching packages

npm: npm fetches dependencies from the npm registry during every ‘npm install‘ command.

Yarn: yarn stores dependencies locally and fetches from the disk during a ‘yarn add‘ command (assuming the dependency(with the specific version) is present locally).

6. License Checker

npm: npm doesn’t have a license checker that can give a handy description of all the licenses that a project is bound with due to installed dependencies.

yarn: Yarn has a neat license checker. To see them, run yarn licenses list.

7. Popularity‍

Choosing a widely adopted technology can help you get faster when experiencing any implementation challenges. Since Yarn is newer compared to npm, many people are much skeptical about using Yarn over npm because it is much older. However, with time, Yarn is gaining more popularity than npm

‍

A Detailed Roadmap to be a Full Stack Developer in 2021

Atharva Kamble — Sun, 10 Oct 2021 12:19:16 +0000

A Detailed Roadmap to be a Full Stack Developer in 2021

1. What is Full Stack Development?

Becoming a full-stack web developer seems to be a daunting task, especially if you are entirely new to the field of coding. As a beginner, you might think that you have a whole lot to learn within a short period.
The languages, frameworks, libraries, and databases, along with everything else required, are considered to be a list of tools for full-stack web development. The easiest way to begin any work is to strategize with a roadmap. A roadmap is the best way to kick-start your attempt to become a full-stack web developer.
Your objective should be to learn the bare minimum skill-set required so that you can start experimenting and honing your learned skills. Once you have mastered the basics, you can go ahead and learn full-stack technologies, which will give you an edge over others. Follow a structured path and equip yourself steadily rather than trying to learn the entire web development spectrum.

2. Scopes of a Full Stack Developer

According to the United States Bureau of Labour Statistics, there will be 8,53,000 open job roles for Full Stack Developers by 2024. The multi-dimensional job role will provide you with umpteen job opportunities as companies always optimize resource costs. The year 2021 is considered the best time to build your career as a Full Stack Developer. Companies are looking to hire professionals who know all the layers of an application and can take full leadership of a project.

As a Full Stack Developer, you will be one of the highest-paid professionals. As the demand for skilled Full Stack Developers increases, the companies are willing to pay handsomely to those with the right skillset and diverse field knowledge. According to a survey by Indeed, the average salary for a talented Full Stack Developer is more than the average salary of any other software developer in the industry. Your salaries would vary depending on your expertise and experience.

Let's find out more about Full Stack Developers.

3. Where to Start?

Full Stack Development is no easy task, so many starters may find it very imposing. The reality is that it would be much easier if you start specializing in either Frontend or Backend and then learning about the other one on the way. That being said, if you have the heart. Nothing is going to stop you from learning full-stack development.

The best place to start is by learning a relevant programming language to its core. Understand concepts profoundly and bring them under your command.

4. Things to learn

It is always good to make a roadmap of what you should learn to start by avoiding confusion or wasting time. Some of the critical things that a full-stack developer should know are as follows.

Choosing a Tech Stack
Backend
Frontend
Database
Version Control

4.1 Choosing a Tech Stack

Every company follows its tech stack. The choice of a stack for a full stack web developer depends on the individual goals, performance expected from the application, company requirements, etc.

Over the years, some tech stacks have become popular, thanks to their extraordinary capabilities and easy-to-use features.

A tech stack comprises frontend technology, backend technology, and database management technology.

4.1.1 Some popular Tech Stacks:

4.1.1.1 MERN stack

Want to master full stack web development? Then dig right into this one!

MongoDB: A NoSQL Database that stores data in binary JSON format (called BSON).
Express: A backend web application framework for Node.js used for designing and building web applications quickly and easily.
React: A JavaScript library that is used for building user interfaces.
Node.js: A server-side JavaScript runtime environment.

4.1.1.2 LAMP stack

You may start with this old school tech stack, but do not wind yourself up too much around this one ;)

Linux: Open-source operating system that is the foundation for this stack model.
Apache: A web server that delivers web content through the internet. One of the popular HTTP clients on the web
MySQL: An open-source database that the scripting language can query to construct a website.
PHP: A Server-side open-source scripting language.

4.1.1.3 MEAN stack

Want to develop robust applications? Then try this one out.

MongoDB: A NoSQL Database that stores data in binary JSON format.
Express: A backend web application framework for Node.js used for designing and building web applications quickly and easily.
Angular.js: A framework for building single-page client applications using HTML and TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
Node.js: A server-side JavaScript runtime environment.

If you are just getting started, JavaScript-based tech stacks are relatively fun and easy to learn compared to their counterparts like Java or Python.

You can always dig into Python-based frameworks (Django/Flask) or Java-based frameworks (Spring/Spring Boot) once you know the functional elements required for full-stack development. The requirements vary, but the essence is pretty much the same.

4.2 Backend

The back-end is the code that runs on the server, receives client requests, and contains the logic to send the appropriate data back to the client. The back-end also includes the database, which will persistently store all of the data for the application.

This type of web development usually consists of three parts:

A server
An application
A database.

Code written by backend developers communicates information from the database to the browser.

4.2.1 Backend Frameworks

Developers need a back-end framework so that an application can be created. It is the script side of a dynamic application. A lot of options are available for back-end frameworks.

Express: Express.js is a framework used as a web application for Node.js. It is a module of NodeJS. It can be used for apps based on servers that will listen for client connection requests. It can be used for single-page, multi-page, and hybrid web applications. It is fast, easy to use, and assertive.
Django: Django is a high-level Python web framework that follows model-template-view architecture. It is used to simplify the creation of complex, database-driven websites. It is fast and promotes a clean design.
Ruby on Rails: Ruby on Rails is a server-side web application framework based on the Ruby language. It provides default structures for databases, web services, and web pages. It uses model-view-controller architecture. This is comparatively hard to learn as you have to learn multiple and independent concepts.

4.3 Frontend

This is the client-side part, i.e., the part of the website with which a user sees and interacts. A developer needs to get creative and innovative with graphics and designs for this part. UI/UX is a challenging task in itself and a crucial task.

The main technologies required for frontend development are HTML5, CSS3, and JavaScript (ES6). For the real bang, you need to use jQuery, Angular, ReactJs, etc., like libraries/frameworks to make your website trendy!

4.3.1 Frontend Frameworks

Using a framework to construct your website’s front-end has many advantages (and is pretty easy to boot!). These are packages containing pre-written, standardized code in files and folders. They give you a base to build on while still allowing flexibility with the final design.

4.3.1.1 JavaScript frameworks

AngularJS: This is a structural framework for dynamic web apps. The JavaScript-based open-source web framework is maintained by Google and a community of corporations and individuals. They address challenges in a single-page application. It allows the usage of HTML as the template language. Its data-binding and dependency reduce the amount of coding required substantially.

ReactJS: A JavaScript library maintained by Facebook and a group of companies as well as individual developers. React is optimal for fetching fast-changing data that needs to be recorded. It is used for building user interfaces for single-page applications. It allows users to create reusable UI components.

VueJS: This is yet another open-source JavaScript framework for single-page applications and UIs. It is very compact in size and high in performance. The best option for new coders, it offers hand-picked the choicest features of other frameworks like Angular and React. It is known as the most approachable framework today.

4.3.1.2 CSS Frameworks

Bootstrap: An initiative by Twitter, Bootstrap takes credit for introducing responsive design on a large scale. It was the first framework to promote the philosophy of “mobile-first.” No longer was designing for smaller screen sizes a separate project in itself; all you needed to do was include the relevant Bootstrap classes, and the design would automatically adjust for different screen sizes.

Bulma: Bulma is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time. Its attractiveness lies in a strict, CSS-only approach (there are no JavaScript components) and smart defaults, which many developers with a good eye for design have a problem with when working with Bootstrap.

Tailwind CSS: Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. The beauty of tailwind is that it doesn’t impose design specification or how your site should look; you bring tiny components together to construct a unique user interface. Tailwind takes a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

4.4 Databases

To store and retrieve data, we need a database, right? There are two types of databases - relational and non-relational (SQL v/s NoSQL).

Developers should be familiar with both types of databases such as MySQL, PostgreSQL, MongoDB, Cassandra. Additionally, knowledge of caching options such as Redis, Memcached, and Varnish is an absolute plus!

Some Databases:

MySQL, SQLite, Postgres - These are Relational Database management systems, and the data is stored in table-like schemes. This is good for storing business data. These use SQL
MongoDB, Cassandra, Apache storm, Sphinx - These are the NoSQL databases. Their only commonality is that they do not use a relational database scheme. This type of database covers a wide range of technologies and can be used to find key-value DB, graph DBs, streaming DBs, etc.,
VoltDB and MemSQL - These are a new kind of database, the NewSQL. They follow the relational scheme, but instead of disks, they use memory. The advantage is that they outperform the traditional RDBMS, but the limited amount of memory is definitely a downside to this type of database.

4.5 Version Control

Every product/application goes through many versions and revisions before being compiled and deployed. A version control system should be learned and used like GitHub (popular), GitLab, Apache Subversion.

Using version control is a common practice and one of the good habits for a developer to have.

Git - If you’re looking for a widely used modern version control system to fit your needs, Git is a great option. It is actively maintained and open-sourced, created by the same founder of the Linux operating system. Each developer with a working copy of the code can easily access the full history of the changes, making it easy to edit and restore the code. Git is one of the most high-performing, flexible, and secure among any back-end developer skills list.

4.6 Some Additional skills to possess

SSH- Secure shell protocol is used to operate network services securely over an unsecured network. SSH provides a secured remote login from one computer to another. It ensures the privacy and integrity of data.
HTTP/HTTPS- HyperText Transfer Protocol (HTTP) is the protocol used by the world wide web. It defines how messages are transmitted and how actions are taken by web servers and browsers when responding to commands. HTTPS is the secured version of HTTP. Here, the communication protocol is encrypted using Transport Layer Security. It ensures protection against man-in-the-middle attacks and eavesdropping.
Linux command- line basic-Although it is not mandatory that you possess this skill, it is good to know about Linux. It is not necessarily easy or hard to learn. Linux makes the job easier and saves a lot of time by organizing items on the backend.
Data structures and algorithms- Data structures are different ways of storing data, while an algorithm is a generic approach methodology to solve a problem or requirement. Every programmer needs to be familiar with these concepts. These are not core skills, but the more intuitive you are, the easier it is to solve issues or add requirements. The impacts are felt in the efficiency, scalability, and performance of an application. As a full-stack developer, these courses will help you immensely.

5. Final Note on becoming a Full-Stack Developer

Full-stack software development has seen a surge in almost every large and small organization in recent years. This roadmap lets you know all the basic and intermediate skills required to become a successful full-stack developer. The more skills you gain, the more your profile gets noticed. Engineering graduates can opt for such courses who are looking for better career growth and a good salary.

Get to know more about: Frontend Development Backend Development

‍

Frontend Developer - Complete Roadmap in 2021

Atharva Kamble — Sun, 10 Oct 2021 11:51:39 +0000

Frontend Developer - Complete Roadmap in 2021

1. What is Frontend Development?

‍Front-end web development, also known as client-side development, is the practice of producing HTML, CSS, and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front-end development is that the tools and techniques used to create the front-end constantly change. Hence, the developer needs to be aware of how the field is constantly developing.

The objective of designing a site is to ensure that when the users open up the site, they see the information in a format that is easy to read and relevant. This is further complicated because users now use a large variety of devices with varying screen sizes and resolutions, thus forcing the designer to consider these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform), and different devices (cross-device), which requires careful planning on the side of the developer.

2. Scopes of a Front-end Developer

Front-end development is what you would refer to as the client-side of development. Front-end development is all about analyzing designs and codes as well as debugging applications. The front-end or client-side development objective is to provide your users with a seamless experience of using a website.

It is all about managing and making better what users would see first in their web browsers. In other words, front-end development is responsible for managing the design as well as the look and feel of a website. Simply put, Front-end Developers are always in hot demand.

Overall, the future looks bright for anyone who wants to become a front-end developer. The latest studies predict that by 2020, there will be a deficit of approximately 1 million developers in the United States alone. The rest of the world will have it even worse, according to similar studies.

According to the United States Bureau of Labor Statistics, Web developer employment in the US is projected to grow 15% from 2016 to 2026. The rate is much faster than the average for all other occupations.

Although these numbers seem incredible, it’s not so surprising if you pause and consider the times. Increased Internet usage, especially in the mobile field, means a greater need for user interfaces, which means more front-end developer jobs. Web development is a field whose potential is tied closely to the Internet’s popularity, and the latter is surging with no signs of letting up. If you want to go where the jobs are, then look no further.

Please stick with us to find out the important things a front-end developer should know about.

3. Where to Start?

To be a successful Front-end Developer. Some important skills are required.

Since the front-end developer is the rock star of website/app development, they need a well-stocked personal toolbox. So a front end developer skills include the need to:

Be proficient in coding languages such as HTML, CSS, JavaScript, and jQuery
Be experienced with Web frameworks(e.g., Angular.js, React.js)
Be experienced with graphic design applications (e.g., Adobe Illustrator)
Understand the principles of SEO
Have excellent skills in problem-solving
Be proficient in communicating with team members, bosses, and clients
Have good interpersonal skills

Regardless of learning how to code and create websites and applications, the most important part is constantly trying to improve. Obviously, there are basic technical skills required. Some of us have a better predisposition for learning it than others but let’s not forget that working hard and practicing usually pays off.

4. Things to learn?

Required skills vary depending on the position and the project they are going to work on. Some companies need just basics but with solid experience; others are searching for real Prodigies, front-end developers who are also pretty good in UI and UX design.

4.1 Programming Languages to Learn:

4.1.1. HTML5 and CSS

Hypertext markup language (HTML) and cascading style sheets (CSS) are a website’s nuts and bolts. While HTML gives structure to web pages, CSS helps style the HTML elements with the color, fonts, typeface, and more.

Mastering HTML5 and CSS is a MUST. Honestly, not having it at fingertips is unacceptable for a front-end developer. HTML, the key structural component of any website, together with CSS, the styling part, already allows you to build some basic websites and applications. However, to make it interactive, you need JavaScript! But without knowing HTML and CSS, it won’t be possible to implement into the website or app.

4.1.2. JavaScript

This client-side programming language lets you add interactive features to a website, including polls, slideshows, and forms. It also offers support for dynamic elements, including, but not limited to, page animation, scrolling, audio, and video.

4.2 Frameworks

Frameworks are prewritten code modules for common website elements like login and search interfaces. They’re easy to incorporate and are reusable.

4.2.1. JavaScript Frameworks

Depending on the team you are going to work with, or on the project, most likely, there will be given a framework you should be familiar with. Knowing the language itself is one thing, but knowing how to work within a framework is an additional skill, and you can’t do much without it, especially if you want to create some real project for a client. The most popular are Angular, React, and Vue.js - getting familiar with one of them is a big plus.

4.2.1.1. React.js : React is a front-end open-source JavaScript library used to create interactive UIs (User Interfaces), which helps improve the speed of applications. It is one of the simplest frameworks to learn and was developed by Facebook to resolve the code maintainability issues due to constant addition and improvements. It is still maintained by Facebook and other individual front-end engineers.

‍4.2.1.2. Angular.js : Angular is a modern TypeScript-based, open-source framework and one of the top-rated software development tools. Angular features Directives allow developers to program special behaviors of the DOM, making it possible to create rich and dynamic HTML content. Angular has a Hierarchical dependency injection function, which makes code components highly testable, reusable, and easier to control: it helps to define code dependencies as external elements decoupling components from their dependencies.

4.2.1.3. Vue.js : Vue is one of the beginner-friendliest frameworks, coming with well-elaborated documentation and a supportive community. Vue has an extensive choice of tools, such as end-to-end testing tools, plugin installation systems, browser debugging tools, server renderer, state manager, and others.

4.2.2 CSS Frameworks

Like JavaScript frameworks but for CSS - optimizing the workflow. It is better for a developer to know them because you can get the same results in less time and less typing. Another important aspect is a responsive design - sites and apps that work great on each device and size are a must-have in 2019. Knowing how to convert a website from a static to responsive one is essential but saving some time by using frameworks that have it already built-in is even better. Win-win.

Some examples are given below:

4.2.2.1. Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. Bootstrap is considered to be one of the best CSS frameworks due to its responsive design. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. They have an extensive set of documentation, examples, and demos to get you started quickly with responsive web development.

4.2.2.2. Tailwind CSS

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. It comes with classes equipped to build custom UI designs directly in the users’ markup. Unlike Bootstrap, where you get pre-designed components that can be used as a base for further development, Tailwind does not come with a predefined template, but it allows you to incorporate your style quickly.

4.2.2.3. Bulma

Bulma is a modern CSS framework based on flexbox. It provides responsive design and mobile-first UI components and has a modular structure to import only the stuff you want to include in your web design. Bulma offers a flexbox-based modern grid system.

4.3 Tools

4.3.1 Web Browser

A web browser is a software used to retrieve, present, and traverse information on the WWW. Typically, browsers run on a desktop or laptop computer, tablet, or phone, but as of late, a browser can be found on just about anything (i.e., on a fridge, in cars, etc.).

The most common web browsers are (shown in order of most used first):

Chrome
Safari
Internet Explorer (Note: not Edge, referring to IE 9 to IE 11)
Firefox
Edge

With developer tools (which you open in a browser), you can play around with each website element. Why is it important? Because without actually changing anything in the code, you can check how those changes would influence the website or an app while having it open in the browser. It also helps when you search for bugs and weak points.

4.3.2 Design Tools

Being able to have a basic understanding of image manipulation, create graphical components, retouch images, design user interfaces, or just set up certain information using graphics, illustrations, and/or images for your website is a huge bonus. It speeds up your productivity, and better gives you value whether you work professionally at a company or startup, you actively freelance.

Given below are some useful Design tools:

Adobe Photoshop
Adobe Illustrator
Adobe XD
Adobe InDesign

4.4 Web performance optimization (WPO)

A slow-loading website can reduce user engagement drastically. Website performance optimization techniques help ensure faster loading times through automation tools.

For example, Grunt automatically optimizes images and makes page components lighter depending on the device without compromising website functionality.

4.5 Search engine optimization (SEO)

Search engine optimization is the practice of increasing traffic to a website organically through search results.

Generally, there is a separate team to supervise SEO practices. However, knowing the basics can help you determine where to place titles, meta descriptions, and text on a website so search engines can easily find them.

4.6. Version control using Git:

In software engineering, version control (also known as revision control, source control, or source code management) is a class of systems responsible for managing changes to computer programs, documents, large websites, or other collections of information. Version control is a component of software configuration management.

4.6.1. Git

If you’re looking for a widely used modern version control system to fit your needs, Git is a great option. It is actively maintained and open-sourced, created by the same founder of the Linux operating system. Each developer with a working copy of the code can easily access the full history of the changes, making it easy to edit and restore the code. Git is one of the most high-performing, flexible, and secure among any back-end developer skills list.

5. Soft skills

5.1. Problem Solving

Dealing with a project and each small task is an everyday struggle of a front-end developer, but the issues are solved step by step, together with the team. However, if something doesn’t work on the website, the front-end dev has to rectify it! Solving the problems and making it all work should be the mindset of each professional developer.

5.2. Teamwork

As it was mentioned above, good communication is key! Teamwork is usually a part of the front-end developer’s everyday life. Even if you work as a freelance dev, you’ll have to communicate well with the clients and work with them on the project to some extent. Knowing how to handle teamwork, support other developers, and ask for advice when needed make the workflow smoother, and in the end, you deliver the end product faster.

5.3. Good Communication

Breaking the sitcom stereotype about developers, you need to be good at communication. First of all, the work between UI/UX designers, front- and the back-end has to go smoothly to finish a project. Of course, in agile software houses, you also get a project manager who helps with the information flow and a SCRUM master to help with the process. Still, without some basic interpersonal skills, it won’t be that easy to work with others. Effective communication is necessary when you work with other people. What is also important is the ability to state and communicate what you have in mind - writing documentation that others can read and understand is highly appreciated.

A final note on becoming a Front-end Developer

Regardless of learning how to code and create websites and applications, the most important part is constantly improving. There are basic technical skills required. Some of us have a better predisposition for learning it than others but let’s not forget that working hard and practicing usually pays off. Regarding soft skills, even if you are not a fan of talking with people, communication is key when you need to deal with a project for a client, so it is worth working on some of those. Still, as in every job type and company you will work for, those are more flexible.

‍

Best CSS frameworks to Check Out in 2021

Atharva Kamble — Sun, 10 Oct 2021 09:43:44 +0000

Best CSS frameworks to Check Out in 2021

‍Introduction

A CSS framework is a library allowing for more accessible, more standards-compliant web design using the Cascading Style Sheets language. In much simpler words, a CSS framework is a collection of CSS stylesheets that are ready-to-use and are used by UI developers to make their jobs easier. You can write CSS for your pages on your own, but that requires you to write hundreds and thousands of lines of code which is time-consuming. That is where CSS Frameworks take their place. They’re tailored for use in common situations, like setting up navbars and are often expanded upon by other technologies such as SASS and JavaScript.

In this article we will take a look at some of the best CSS frameworks of 2021 and help you choose the one that best suit your needs.
‍‍

1. Bootstrap

Developed and Maintained By – Twitter

‍Statistics:

GitHub Stars: 152k
Release Date: August 19, 2011

‍Top companies using this:

‍Pros:

Offers lots of examples and a pre-set layout to get you started with.
It is a 100% responsive framework, and responsiveness is a crucial factor due to which people choose Bootstrap over its competitor.
The most commonly used CSS framework with broad community support.
Easy to learn and implement.
Excellent JavaScript components with custom CDN.
Maintained by a community of hundreds of developers, ensuring stable releases and long-term support.

‍Cons:

Bootstrap has been extensively used which could potentially imply that all websites look the same.
The build size of CSS projects is large due to so many modules being loaded in Bootstrap.
Bootstrap 4 relies on jQuery for many of its interactive features which makes it difficult to with JavaScript frameworks like React or Vue.

‍2. Tailwind CSS

Tailwind is a utility-firstCSSframework for rapidly building custom user interfaces. It comes with classes equipped to build custom UI designs directly in the users’ markup. Unlike Bootstrap, where you get pre-designed components that can be used as a base for further development, Tailwind does not come with a predefined template, but it allows you to incorporate your style quickly.

Developed By – Adam Wathan

‍Statistics:

GitHub Stars: 45.1k
Release Date: November 2, 2017

‍Top companies using this:

Pros:

Tailwind operates on a lower level by providing a developer with a set of CSS helper classes.
Tailwind allows you to create your own custom components that you can reuse throughout your projects.
It comes with a menu of predesigned widgets to build your site with.
More productivity and smaller package size.

Cons:

There is a steep learning curve to Tailwind and is not best suited for less-experienced developers.
Complex animations are hard to achieve with Tailwind alone.

‍3. Bulma

Bulma is a modern CSS framework based on flexbox. It provides responsive design and mobile-first UI components and has the modular structure for you to import only the kinds of stuff that you want to include in your web design. Bulma offers a flexbox-based modern grid system.

Developed By - Jeremy Thomas

Statistics:

GitHub Stars: 44k
Release Date: January 24, 2016

Top companies using this:

Pros:

The syntax of Bulma is quite simple and easy to use.
It comes with a clean and modern design.
Bulma comes with naming conventions that are easy to use and remember.
Bulma doesn’t include JavaScript features which makes it easy to be integrated with JavaScript Frameworks like React or Vue.

Cons:

Bulma comes with a distinct style and if it is overused, we may end up with similar looking websites as in the case of Bootstrap.
Does not have a huge development community like bootstrap.

‍4. Foundation CSS

Foundation is yet another one of the best CSS frameworks. Foundation calls itself‘The most advanced responsive frontend framework in the world.’It is a sophisticated frontend CSS framework that includes HTML, CSS, SASS, and JavaScript. Foundation is developed with a mobile-first approach and is highly responsive, best suited for large web applications that need a design host.

Developed By – ZURB

Statistics:

GitHub Stars: 29.1k
Release Date: September 2011

Top companies using this:

Pros:

Easy to understand and readable code.
It is not just a CSS framework but a complete front-end framework loaded with useful tools.
Provides many optional modular JavaScript components and plugins like tooltips, alerts, carousels, dropdown, placeholder, cookies, etc.
It is updated constantly to support the newest features such as grids with flexbox support.

Cons:

It has several features and is inherently more complicated than other frameworks.
Foundation features depend on JavaScript, jQuery or Zepto, therefore, making it not suitable for React and Angular projects.

5. Materialize CSS

Materialize CSS is a responsive front-end framework based on the material design with collections of UI components with minimal effects on which users can easily attract. It is known for its responsiveness. It is created with CSS, JavaScript, and HTML for web design and mobile app development. Because of its features, it is suited for less experienced developers. Animations are used throughout the framework to provide visual feedback to users in a way that’s easy for developers to work with.

Developed By – Alvin Wang

Statistics:

GitHub Stars: 38.6k
Release date: 1.0.0 (September 9th, 2018)

Top companies using this:

Pros:

The documentation of Materialize CSS is very comprehensive and pretty easy to start with.
Materialize’s components page includes cards, buttons, navigation, and many more added features.
There are a number of color palette options with an excellent selection of user icons.
It offers great user experience and interactions. It also easily integrates JavaScript plug-ins.

Cons:

Even though it has an active community, it is a small and independent project with no corporate support.
You need to have basic knowledge of HTML, JavaScript, and CSS to make good use of it.

‍

Backend Developer - Complete Roadmap in 2021

Atharva Kamble — Sun, 10 Oct 2021 09:39:38 +0000

Backend Developer - Complete Roadmap in 2021

1. What is Backend Development?

Backend development refers to the server-side of an application and everything that communicates between the database and the browser. The primary responsibilities of a backend developer are making updates, changes and monitoring a site's functionality. This type of web development usually consists of three parts:

A server
An application
A database.

Code written by backend developers communicates information from the database to the browser.

2. Scopes of a Backend Developer

A backend web developer is responsible for server-side web application logic and integrating the work of frontend web developers. Backend developers usually write web services and APIs used by frontend developers and mobile application developers. Backend developers are always in hot demand because they are responsible for maintaining and monitoring what is happening off-screen. It designs database schemas, writes backend logic, creates Backend APIs, etc.

That being said, there are some crucial technologies that every Backend Developer must know about. Please stick with us until the end of the article to know more about them.

3. Where to Start?

To be a successful backend developer. You need to know the following:

A programming language like JavaScript, Python or PHP
A Web Framework
A database like SQL or MongoDB
Version Control using Git
Some important non-technical skills

Before we dig into these skills, let's first discuss backend development in its broader context. While frontend developers manage the visible parts of a website, such as the design or functionality of its display, backend programmers dedicate their time to designing, fixing, and altering the aspects of a software application or information system that a typical user never sees. They serve as the wizards to the tech sector's Oz, crafting the core features and components of the programs that drive consumers' digital experiences.

When a user requests the system through a front end (i.e., consumer-side) framework, it's a backend developer's responsibility to ensure that a program can deliver any requested data or information. These developers have other duties, too. They maintain core databases, manage application program interfaces (APIs), and test and debug backend processes to ensure that a program functions smoothly and effectively at all times.

Sound complicated? It is. But if the prospect of picking apart the nuts and bolts of an application and learning how to make it run better thrills you, there's no better time to take on the challenge. With the world's growing social and economic reliance on digital channels, employers need talented backend developers more than ever.‍‍

4. Things to Learn

The majority of backend developers have at least some formal training, and many have bachelor's degrees in computer science or advanced mathematics. As one writer for CareerExplorer explains, "Compared to frontend developers, backend developers may have to do more abstraction — they could be data mining, writing abstract algorithms, and so forth."

Though requirements vary between jobs, backend developers will need to have a passing familiarity with several technical languages and programs, if not a command of them. These essential backend developer skills include but are not limited to Python, Java, SQL, NoSQL, and Git.

There are countless routes an aspiring development professional can take to hone their skill set. As mentioned above, a four-year degree is a standard option. However, if you're unable to commit the time or funds necessary to complete an undergraduate study — or you already hold a degree in another field, you might want to consider alternative education solutions such as coding boot camps to learn web development, which can teach technical skills that backend developers need, in a short period and at a reasonable cost.

At the end of the day, whichever educational route you take is less important than the technical and non-technical skills you acquire to build a career in backend development. Let's now look at the backend development skills in more depth.

4.1. Programming Languages to choose from:

First and foremost, Developers generally have to be trained in any of the programming languages available for backend development. This is the most important part of being not just a backend of any developer. Some examples are given below:

4.1.1. Python

While it has nothing to do with the snake that inspired its name, Python is one of the premier languages used in development today. In 2019, a study conducted by Stack Overflow deemed Python the "fastest-growing major programming language" in the world above Java and second only to Rust in likeability rankings. A full 41.7 percent of the report's 90,000 respondents said that they used Python in 2018.

The language's popularity is well-earned. It handles simple and complex web projects with equal ease and has been deployed across various fields, from healthcare to finance to travel. Well-known industry giants such as Spotify, Instagram, Disqus, and Dropbox have built their applications using Python's syntax.

The reason behind Python's popularity is simple: It supports multiple programming styles and provides excellent data visualizations. With Python, developers can use procedural, functional, and object-oriented programming approaches with equal ease. The language's support for expansive data libraries makes visualization easy and development speedy. Plus, Python is relatively easy to learn.

As a tech writer for Django Stars noted on the subject: "The simplicity of the syntax allows you to deal with intricate systems and ensure that all the elements have a clear relationship with each other. Thanks to this, more newbie coders can learn the language."

Of all the skills that back end developers must have, Python tops the list.

4.1.2. Java

First, let's get one thing out of the way: Java is not JavaScript. While the two have similar names — and did, during the Netscape era, briefly intersect — they are incredibly different. To borrow a quote from tech journalist David Diehl, "The evolution of the two languages took such wildly different paths from [Netscape] that the common joke is that Java is to JavaScript as ham is to a hamster."

Simply put, Java is a general-purpose programming language for application development, while JavaScript is applied primarily to incorporate animation and interactivity into websites. The two do have similarities; both can run on a browser or server, for example. However, they are vastly different in their capabilities and execution.

Java is primarily intended for back end development. A more robust system, Java, is typically written in an Integrated Development Environment (IDE) before being compiled in bytecode or low-level code that can be read by a software interpreter rather than human developers. JavaScript, in contrast, can typically be executed in its original syntax via a JavaScript engine. Generally, Java is capable of handling more robust programming tasks than its frontend counterpart.

Java is a beneficial skill for backend developers; it's a high-performance language that supports object-oriented programming and can run in any system that supports a Java Virtual machine.

4.1.3. PHP

PHP, or Hypertext Preprocessor, is one of the most common and usable server-side languages in the development sector. Unlike Python or Java, PHP is a scripting language, which means that it interprets scripts — i.e., programming instructions — at runtime to automate routine processes or improve performance for an application.

According to statistics shared by Guru99, over 20 million websites and applications have been developed via PHP. For a good reason: PHP is open-source, has a gentle learning curve, and is cost-effective because most web hosting servers already support the language by default. As a bonus, it also offers built-in support for the popular relational database MySQL (see below).

While PHP might not be a critical skill for backend developers if they know other major programming languages, having familiarity with it would undoubtedly make an aspiring programmer more marketable.

4.1.4. Web Development Trifecta(JavaScript, CSS, HTML)

This list of backend developer skills would be incomplete without three fundamental programming languages: HTML, CSS, and JavaScript. While these languages are more often used on the front end, they're still valuable skills for backend developers. After all, the three determine everything a visitor sees, from a page's text to images to scrolling drop-down menus.

So, what are these languages?

HTML: HTML is the most fundamental building block of the Internet. It determines the structure of web pages when working in conjunction with the other two languages.
CSS: This language determines how elements will be rendered on a webpage and standardize display across all browsers.
JavaScript: This language is most commonly used as a scripting language for web pages but can also be used in non-browser elements, like Adobe Acrobat.

The three languages work together for frontend development and form a website design from the frontend perspective. They provide direction and information on the style and content of a website, as well as how users interact with it.

You may be wondering why these frontend skills are essential for a backend developer. The truth is, there isn't a clear distinction between the two career paths. Even when developers focus exclusively on frontend or backend development, there will be some overlap in the skills required for both web development specialties. Moreover, companies like to hire developers with multidisciplinary skills; versatility is the major reason cross-functional "full-stack" developers can be so attractive in the hiring pool.

That said, not all companies will need multi-specialty programmers. While full-stack developers can be helpful for companies with thin resources and can't justify separate back and frontend teams, many larger companies have separate divisions for their developers and require back-end-specific professionals.

4.2. Backend Frameworks to choose from:

Backend frameworks are the libraries of server-side languages that aid in building the server configuration of any website. It is essential to use the right technology to develop websites or seriously affect your application usage.

4.2.1. Node.js & Express.js

Node.js has been one of the biggest game-changer since its release. More prominent companies like Uber, Medium, PayPal & Walmart switched their tech stack to Node.js. You can make powerful applications with Node.js, such as real-time tracking apps, video and text chat engines, social media apps, etc. And learning Node.js is becoming one of the hottest skills for developers. Before starting to work in Node.js, Make sure that you have a clear & concise goal of what you want to build with Node.js; otherwise, you will give up on the learning path. Keeping a goal will help you focus on learning the essential skills on the top instead of figuring out whether you need to learn them or not.

Express.js, also known as Express, is a Node.js web application framework and open-source software available under the MIT license. It is used for building APIs and web applications and is considered a standard Node.js server framework.

Express is a MEAN stack backend component along with the AngularJS frontend framework and MongoDB databases. Express is viewed as one of the best web application development frameworks.

4.2.2. Django

Django is a leading open-source backend framework based on Python, which follows the model view controller (MVC) pattern. Django is suitable for the development of sophisticated and feature-rich database-driven websites. Hence, it is considered one of the best backend web development frameworks.

This backend framework facilitates optimal pluggability, reduced coding, more excellent reusability, and faster development. It uses Python for all its operations and provides an optional admin interface to help create, read, update, and delete operations. Django is utilized by many renowned websites such as Disqus, Mozilla, and The Washington Times.

4.2.3. Laravel

Laravel is an open-source PHP web framework for developing Symfony-based web applications that follow the Model View Controller (MVC) architecture. It offers a modular packaging system equipped with a dedicated dependency manager. Laravel is rated as one of the best web frameworks.

Laravel also provides its users with multiple ways of accessing relational databases along with application maintenance and deployment utilities. Laravel has an MIT license and has a source code hosted on GitHub.
4.3. Databases to Choose From:

Generally, there are two types of databases to choose from based on your requirement: Relational databases and Non-Relational Databases.

A relational database is a type of database that stores and provides access to data points related to one another. Relational databases are based on the relational model, an intuitive, straightforward way of representing data in tables. Each row in the table is a record with a unique ID called the key in a relational database. The columns of the table hold attributes of the data, and each record usually has a value for each attribute, making it easy to establish the relationships among data points.

Non-relational databases (often called NoSQL databases) are different from traditional relational databases in that they store their data in a non-tabular form. Instead, non-relational databases might be based on data structures like documents. A document can be highly detailed while containing a range of different types of information in different formats. This ability to digest and organize various types of information side-by-side makes non-relational databases much more flexible than relational databases.

4.3.1. SQL

Technology might get outmoded quickly, but SQL seems to be an exception to the rule. Since being ruled an industry-standard language by the American National Standards Institute (ANSI) in 1986, SQL, or Structured Query Language, has empowered backend developers to access and manipulate relational databases as needed. SQL allows programmers to insert and delete records quickly, file queries against a database, create new tables and store procedures in a database, and even establish permissions on those tables and procedures. If you ever need to deal with relational databases — and if you're a backend developer, there's little doubt that you will — you need to know SQL.

If you want to familiarize yourself with the language, try an open-source platform like MySQL. Named for creator Mondy Widenius's daughter My and offered by Oracle, MySQL provides free access to SQL database source code. It's also reasonably easy to use, as it can be installed on desktops and servers. It also runs on platforms including but not limited to Linux, Windows, and UNIX.

That said, SQL isn't the only type of language used to manipulate databases. In 1998, developer Carl Strozz introduced the concept of a NoSQL language. NoSQL's name is a point of contention for programmers. While some believe that the term stands for non-SQL, others insist that it means not only SQL. In any case, a NoSQL language communicates with databases that store information through means other than a relational table.

The decision to use SQL or NoSQL depends entirely on a developer's needs. Both work well; as programmers for MongoDB explain in an overview on the subject, "A common misconception is that NoSQL databases or non-relational databases don't store relationship data well. NoSQL databases can store relationship data — they store it differently than relational databases do."

As such, backend developers would do well to have both skills in their repertoire.

4.3.2. MongoDB

MongoDB, developed by MongoDB Inc., is a cross-platform database program. It is categorized as a NoSQL database program that stores data in JSON-like documents.

MongoDB, a distributed database at its core, provides high performance, scalability, and flexibility in querying and indexing data. It is easy to integrate with applications as the document model can map objects in the code. It provides drivers for major languages, and there is also a lot of professional support available.

The MongoDB Community Edition is free and open-source, while the MongoDB Enterprise Edition is for commercial purposes and has more advanced features.

4.4. Version control using Git

4.4.1. Git

If you're looking for a widely used modern version control system to fit your needs, Git is a great option. It is actively maintained and open-sourced, created by the same founder of the Linux operating system. Each developer with a working copy of the code can easily access the entire history of the changes, making it easy to edit and restore the code. Git is one of the most high-performing, flexible, and secure among any backend developer skills list.

4.5. Non-Technical Skills

While there are many technical skills a backend developer needs, there are some useful non-technical ones.

4.5.1. Communication

Establishing well-honed communication skills means you'll find it easier to collaborate, whether with other backend developers or with the frontend developers who are working on the same projects. Communicating also helps when working with business leaders and other professionals who do not have the same background in development and programming.‍

A Final Note on Becoming a Back End Developer

A career in backend development is an excellent option for those interested in programming and passionate about technology. As you work toward deciding what career path you want to take, you'll also be deciding what your educational path looks like.

Remember, there are various ways you can gain the backend developer skills you need to be successful. You can choose a formal degree program or opt for a coding boot camp to learn web development. The best educational path depends on your needs, whether you're looking for a variety of topics or want more specialized training that you can complete in a shorter period.

‍

Popular Resources to Learn TypeScript!

Atharva Kamble — Fri, 08 Oct 2021 08:44:25 +0000

Popular Resources to Learn TypeScript!

TypeScript is a language that aims at easing the development of large-scale applications written in JavaScript. TypeScript adds common concepts such as classes, modules, interfaces, generics, and (optional) static typing to JavaScript. It is a superset of JavaScript: all JavaScript code is valid TypeScript code, which You can add seamlessly to any project. The TypeScript compiler emits JavaScript.

The 5 free resources to learn TypeScript are as follows:

‍‍

1. Getting started with TypeScript

Getting started with TypeScript is a beginner's guide to TypeScript. It covers all the essential factors like TypeScript origin, syntax, interfaces, classes, etc. Readers will get a brief idea of what TypeScript is and how it works.‍

Created by Andrew Chalkley.

‍‍2. TypeScript Deep Dive

An eBook that serves as a deep dive into what TypeScript is and how it works. In this eBook, you can not only learn but also understand every aspect of typescript. How it came to be and where you should use it. It is an impressive Gitbook for both beginners and advanced developers. It also serves as a reference and will help users for tests and interviews.

Created by Basarat.

‍3. TypeScript Quick Start

Official TypeScript documentation that contains everything about TypeScript. It is a fantastic guide for everything TypeScript-related. It is also well written and updated.

Created by TypeScript Devs.

‍4. Learn X in Y minutes where X=TypeScript‍

This website conveys the idea of TypeScript in a very engaging and exciting manner. The users are presented with blocks of code. The comments of the code are the actual lessons. Reading through the comments will make us understand what each piece of code does.

‍Created by Philippe Vierick.

‍5. Clean code concepts of TypeScript

An article that educates readers about the rules they should follow to generate clean code in TypeScript. The article has over 4.6K GitHub stars. Clean coding is a necessary factor in programming and should be followed by all the development team members. This article helps beginners in TypeScript to generate clean and readable code.

Created by mheob.

‍

26 Must-Know Git Commands in 2021

Atharva Kamble — Fri, 08 Oct 2021 07:27:50 +0000

26 Must-Know Git Commands in 2021

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. It's a system that tracks changes to our project files over time. It enables us to record project changes and go back to a specific version of the tracked files, at any given point in time. This change history lives on your local machine and lets you revert to a previous version of your project with ease in case something goes wrong. Git makes collaboration easy. Knowing how to use Git is one of the most important skills for any developer nowadays - and it's definitely a great addition to your resume!

Here we will look at some of the git commands to get you started with git.

Check your Git configuration

The command below returns a list of information about your git configuration including user name and email.

git config –l

Setup your Git username

git config --global user.name "your-name"

Setup your Git user email

git config --global user.email "your-email"

Cache your login credentials in Git

You can store login credentials in the cache so you don't have to type them in each time.

git config --global credential.helper cache

Initialize a Git repo

The first step to creating your git repository is initializing it. You can initialize a git repo for a new or existing project using the following command:

git init

Add a file to the staging area

The next step is to add the files in the project to the staging area. You can add a file using the following command:

git add <filename>

To add all the files in the current directory, use the following command:

git add .

Check a repository's status

This command will show the status of the current repository including staged, unstaged, and untracked files.

git status

Commit changes in the editor

The common way to commit changes made to your repo is with the –m option which lets you specify a shot summary for your commit message.

git commit -m "your commit message here"

You can add and commit files in one step using the following command:

git commit -a –m "your commit message here"

See your commit history in Git

To see your commit history for the current repo, use the following command:

git log

To see your commit history including all the files and their changes, type:

git log –p

Remove tracked files from the current working tree in Git

git rm filename

Rename files in Git

git mv oldfile newfile

Ignore files in Git

Create a .gitignore file and commit it.

Rolling back commits

Use the below command to roll back the last commit:

git revert HEAD

To revert an old commit in git:

git revert commit_id_here

Create a new branch in git

Branch allows teams to work on the same code base in parallel. If you want to add some functionality to a branch without changing the actual code, you can create a branch and if your team likes the changes, you can merge the two branches together. To create a new branch, use the command below:

git branch branch_name

Switch to a newly created branch

git checkout branch_name

Delete a branch

git branch –d branch_name

Merge two branches in git

git merge branch_name

Show the commit log as a graph

git log –graph –online

Add a remote repository

git add remote https://repo_here

See all remote repositories

git remote –v

Push changes to a remote repo

When all your work is ready to be saved on a remote repository, you can push all changes using the command below:

git push

Pull changes from a remote repo

If other team members are working on your repository, you can retrieve the latest changes made to the remote repository with the command below:

git pull

Fetch remote repo changes

This command will download the changes from a remote repo but will not perform a merge on your local branch (as git pull does that instead).

git fetch

Merge a remote repo with your local repo

If the remote repository has changes you want to merge with your local, then use the following command

git merge origin/main

Push a new branch to a remote repo

git push -u origin branch_name

Clone a git repository

The git clone command is used to download the source code from a remote repository. When you clone a repo, the code is automatically downloaded to your local machine. To clone a git repo, use the following command:

git clone <https://url-of-the-repository>

‍

23 Must-Know Linux Commands for Beginners(in 2021)

Atharva Kamble — Thu, 07 Oct 2021 19:37:33 +0000

23 Must-Know Linux Commands for Beginners(in 2021)

Linux is an entire family of open-source Unix operating systems that are based on the Linux Kernel. This includes all the most popular Linux-based systems like Ubuntu, Fedora, Mint, Debian, etc. More accurately, they're called distributions or distros. Linux seems a bit hard to use and understand for people coming from Windows or macOS, and most people give up on using Linux because they are unaware of the commands and shortcuts that Linux provides. Knowing the useful commands and their proper usage can significantly speed up your work on Linux than if you were using other operating systems.

In this article, we will look at some frequently used Linux commands.

1. ls command

The ls is the list command in Linux. It will show the complete list or content of your directory. You can pair it with several options to get different results. Ls with no option list files and directories in a raw format where we won't be able to view details like file types, size, modified date and time, permission and links, etc. Some of the most common options are listed below:

ls -l: shows file or directory, size, modified date and time, file or folder name and owner of the file, and its permission.
ls -a: List all files, including hidden files starting with '. '.
ls -lh: List files in human-readable format.
ls -r: List files in reverse order.
ls -R: Recursively list sub-directories.

2. cd command

cd stands for change directory. You can use the cd command to navigate through Linux files and directories. It requires either the full path or the directory's name, depending on the current working directory that you're in.

If you want to go to a subdirectory of the directory you are in, type cd followed by the directory name.

If you want to go to a directory outside the current directory, for example, from /home/user/downloads to /home/user/photos, you have to give the absolute path of the directory like 'cd /home/user/photos. There are also some shortcuts to navigate quickly:

cd .. to move one directory up.
cd to go straight to the home folder.
cd- to move to your previous directory

3. PWD command

PWD command is used to find the path of the current directory. It will return the absolute path, which contains all the directories from the root that starts with a forward slash. An example of an absolute path is /home/user.

4. rmdir command

rmdir command allows you to delete empty directories.

5. rm command

rm command allows you to delete directories with contents inside them. The options that can be used with rm are:

rm -i: will ask before deleting each file.
rm -r: will recursively delete a directory and all of its contents.
rm -f: will forcibly delete files without asking.

6. touch command

touch command allows you to create a new blank file with the given file name.

Usage:

touch hello.js will create a file called hello with the extension .js in your current directory.
touch home/user/documents/hello.html will create the given HTML file in the Documents folder.

7. cp command

cp command lets you copy files from your current directory to your desired directory.

Usage:

cp hello.js /home/user/documents will copy the hello.js from the current directory to the documents folder.

8. mv command

mv command is used to move files the same way the cp command is used to copy files. But it can also be used to rename files.

Usage:

To move files: mv hello.js /home/user/documents will move the hello.js from the current directory to the documents folder.
To rename files, type: mv oldname.ext newname.ext

9. cat command

cat is one of the most frequently used commands in Linux. Cat is short for concatenate. Cat is used to concatenate and print the contents of files. Cat command allows us to create single or multiple files, view contents of a file, concatenate files, and redirect output in terminal or files.

Usage:

Display contents of a file

cat /etc/passwd: will show the contents of passwd.

View contents of multiple files in terminal

cat test test1: will show the contents of the test and test1 in the terminal.

Create a file

cat >test2: will create a file test2. It then awaits input from the user. Write in the desired text and press CTRL+D to exit.

cat with a redirection operator

cat test > test1: We can redirect the standard output into a new file else existing file with '> '. Existing contents of the test1 will be overwritten by the contents of the test file.

Appending standard output with a redirection operator

cat test >> test1: Appends an existing file with '>> '. Here, the contents of the test file will be appended at the end of test1 file.

10. locate command

locate command in Linux is used to find the files by name. An alternative to locating is find. But, the difference between both commands is that locate command is a background process and searches the file in the database whereas find command searches in the filesystem. The locate command is much faster than the find command.

If you cannot find a file with locate command, then it means that your database is out of date, and you can update it with the "updatedb" command.

Syntax: locate [OPTION]... PATTERN...

Usage:

locate sample.txt: will search for sample.txt.
locate “.html” -n 20: will show 20 results for the searching of file ending with .html.
locate -c [.txt]: will count files ending with .txt and display the result.
locate -i SAMPLE.txt: Ignore Case Sensitive Locate Outputs. This command is configured to process queries in a case-sensitive manner. It means SAMPLE.TXT will show a different result than sample.txt.

11. find command

Similar to the locate command, using find also searches for files and directories. The difference is, you use the find command to locate files within a given directory.

To find files in the current directory use, find . -name notes.txt
To look for directories use, / -type d -name notes.txt

12. grep command

The grep filter searches a file for a particular pattern of characters and displays all lines that contain that pattern.

Syntax: grep [options] pattern [files]

Usage:

grep -i "Unix" file.txt: Performs a case-insensitive search in the given file and returns the lines that contain the word Unix.
grep -c "Unix" file.txt: Display the number of lines that match the word Unix.
grep -w "Unix" file.txt: By default, grep matches the given string/pattern even if it is found as a substring in a file. The -w option to grep makes it match only the whole words.
grep -n "Unix" file.txt: show the line number of the file with the line matched.
grep "^unix" file.txt: Matches the lines that start with the given string.
grep "os$" file.txt: Matches the lines that end with the given string.

13. sudo command

sudo stands for "superuser do!". If you prefix "sudo" with any Linux command, it will run that command with elevated privileges. Elevated privileges are required to perform specific administrative tasks.

14. df command

df command is used to get a report on the system's disk space usage. It is shown in percentage and in KBs. To get the report in MBs, type df -m.

15. du command

the du command is used to find the disk usage of a file or a directory. The disk usage summary is shown in disk block numbers instead of KBs.

To see it in bytes, KBs, and MBs, add the -h argument to the command.

16. echo command

echo is a command that outputs the strings it is being passed as arguments. It is a command available in various operating system shells and typically used in shell scripts and batch files to output status text to the screen or a computer file, or as a source part of a pipeline.

Syntax: echo [option] [string]

Some options of echo command are mentioned below:

Input a line of text and display on standard output:

echo Hello User

echo value of a variable:

x=5

echo The value of x is $x

Using option' \b '— backspace with backslash interpreter '-e 'removes all the spaces between.

echo -e “This \bis \ba \btest \bmessage”

Output: Thisisatestmessage

Option' \t '— horizontal tab with backspace interpreter '-e 'has horizontal tab spaces. You can use \n or a combination of \n and \t in the same way where \n inserts a new line.

echo -e “This \tis \ta \ttest \tmessage”

Output: This is a test message.

17. zip command

ZIP is used to compress files to reduce file size and is also used as a file package utility. The zip program puts one or more compressed files into a single zip archive, along with information about the files (name, path, date, time of last modification, protection, and check information to verify file integrity).

Syntax: zip [options] zipfile files list

Usage:

Creating a zip file:

zip myfile.zip filename.txt

-d option removes the file from the zip archive.

zip –d filename.zip file.txt

-u option is used to update the specified list of files or add new files to the existing zip file.

zip –u filename.zip file.txt

-r option is used to recursively zip the files in a directory.

zip –r filename.zip directory_name

-x option is used to exclude the specified files while creating the zip.

zip –x filename.zip file_to_be_excluded

18. help command

<command-name> --help lists all the available commands in the terminal. You can use '-h' or '–help' (help has two hyphens here) option with any command to get help for that specific command.

19. whatis command

whatis <command-name> shows a single-line description for the given command.

20. man command

man <command-name> shows the manual page for the given command.

21. tar command

"tar" stands for tape archive, which is used by many Linux/Unix system administrators to deal with tape drives backup. The tar is the most widely used command to create compressed archive files that can be moved easily from one disk to another or machine to machine.

Syntax:

tar [options] [archive-file] [file or directory to be archived]

Options:

-c : Creates Archive

-x : Extract the archive

-f : creates archive with given filename

-t : displays or lists files in archived file

-u : archives and adds to an existing archive file

-v : Displays Verbose Information

-A : Concatenates the archive files

-z : zip, tells tar command that creates tar file using gzip

-j : filter archive tar file using tbzip

-W : Verify an archive file

-r : update or add file or directory in already existed .tar file

Usage:

Creating an uncompressed tar Archive using option -cvf:

tar cvf file.tar *.c — This will create a tar file called file.tar, the Archive of all .c files in the current directory.

Extracting files from Archive using option -xvf :

tar xvf file.tar

gzip compression on the tar Archive, using option -z:

tar cvzf file.tar.gz *.c — This command creates a tar file called file.tar.gz, the Archive of .c files.

Extracting a gzip tar Archive *.tar.gz using option -xvzf:

tar xvzf file.tar.gz

Creating compressed tar archive file in Linux using option -j:

tar cvfj file.tar.tbz example.CPP — This command compresses and creates archive files less than the gzip size, but it takes more time to compress and decompress.

Applying pipe to 'grep command' to find what we are looking for:

tar tvf file.tar | grep “text to find”

tar tvf file.tar | grep “filename.file extension”

22. gzip command

gzip <filename> creates and extracts gzip archives. You can use its gzip -d <filename> to extract gzip archives.

23. unzip command

unzip <archive-to-extract.zip> unzips a given zip archive. You can use unzip -l <archive-to-extract.zip> to view the zip file's contents without extracting it. It's the same as you using an archive program to extract zip archives in GUI.
‍

19 Must-Have Visual Studio Code Plugins of 2021 for Web Developers

Atharva Kamble — Thu, 07 Oct 2021 19:35:58 +0000

19 Must-Have Visual Studio Code Plugins of 2021 for Web Developers

Visual Studio Code is one of the most widely used code editors in the developer community. And one of the reasons for its popularity being the number of extensions available to make development easier. From extensions that make learning how to code painless to functional extensions that make development processes more efficient, there's something for every kind of developer.

Here, we will discuss some of the most useful Visual Studio Code plugins that could help speed up your development process.

1. Settings Sync

Settings sync is a plugin that allows you to sync your VS Code settings, themes, file icons, key bindings, etc., to GitHub. This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VS Code environment on new devices or having to manually set up everything again.

Go to the link and read the instructions to properly configure your VS Code editor to take advantage of the plugin.

2,635,278 installs

Average Rating: 4.6 out of 5.

2. Prettier

Prettier is an opinionated code formatter. Prettier is one of the best code formatters available. It comes in handy when you are working on a project and sharing your code with the team; everyone will have the same code format. It makes for easier readability and efficient coding. You can set your code to be formatted on every save by properly configuring prettier.

14,140,068 installs

Average Rating: 3.7 out of 5.

3. ESLint

ESLint is a tool for identifying and reporting patterns found in ECMAScript/JavaScript code, intending to make code more consistent and avoid bugs. In simple words, ESLint helps you fix errors in your code and also format it. ESLint statically analyses your code to quickly find problems.

15,643,858 installs

Average Rating: 4.4 out of 5.

4. Visual Studio IntelliCode

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript, and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. It helps developers and programmers with intelligent code completion suggestions.

It comes with default support for Python, TypeScript/JavaScript, React, and Java.

12,581,106 installs

Average Rating: 4 out of 5.

5. Icons

Icons help you identify files and folders more easily and helps you differentiate between different file types by looking at the file icon. It gives a more pleasant look and feels to the native boring editor. There are different types of icons available in the market. You can choose to apply a minimalistic look to the editor or go crazy with the icons, as there are many icon packs to choose from. Listed below are some popular icon packs:

6. Remote - SSH

The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your own machine.

Develop on the same operating system you deploy to or use more extensive, faster or more specialized hardware than your local machine.
Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
Access an existing development environment from multiple machines or locations.
Debug an application running somewhere else, such as a customer site or in the cloud.

4,201,807 installs

Average Rating: 4.3 out of 5.

7. Live Server

The live server plugin lets you launch a local development Server with live reload feature for static & dynamic pages. You don't have to worry about reloading your webpage manually in your browser after writing your code. The live server takes care of it. You have to properly configure it to work correctly. Every time you save your code, it reloads the webpage for you. This saves you a lot of time and makes development more straightforward.

13,643,332 installs

Average Rating: 4.4 out of 5.

8. Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes a webpack with a babili-webpack-plugin to detect the imported size. Importing hefty packages can affect the user experience. This extension helps you with that. When the import is too large, Import Cost warns you by displaying the size in red. You can configure what size should be considered small, medium, or large.

1,205,738 installs

Average Rating: 3.8 out of 5.

9. JavaScript (ES6) code snippets

This extension is a must-have for every JavaScript developer. It provides code snippets, and it comes with pre-built support not just for JavaScript ES6 but also for Typescript, ReactJS, Vue, and HTML.

5,877,947 installs

Average Rating: 4.8 out of 5.

10. Auto Rename Tag

Renaming a particular tag can be tricky when there are hundreds of lines of code within a single tag and when there are many nested tags. Auto Rename Tag is a super helpful VS Code extension for web developers. As the name suggests, Auto Rename Tag renames the second tag as the first one is updated and vice versa. This extension helps you not only with HTML but also with React because of JSX.

6,119,516 installs

Average Rating: 3.3 out of 5.

11. Debugger for Chrome

Debugger for chrome is a VS Code extension developed by Microsoft, and it allows you to debug your JS code in VS Code. You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.

It helps to detect errors earlier in the development process, gain helpful information on data structures, and allow straightforward interpretation.

8,352,266 installs

Average Rating: 4.2 out of 5.

12. Docker

The Docker extension is developed by Microsoft, making it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

9,990,340 installs

Average Rating: 4.7 out of 5.

13. DotENV

It's pretty common to configure Node.js applications using environment variables. And, one of the most popular modules for managing environment variables is dotenv. The DotENV extension for VS Code adds convenient syntax highlighting when editing a .env file.

18,97,756 installs

Average Rating: 4.7 out of 5.

14. ES7 React/Redux/GraphQL/React-Native snippets

This is for advanced developers who are now working with JavaScript frameworks such as React and other technologies compatible with its production and complex applications. With the help of this snippet, you can easily create class-based components, functional components.

3,222,181 installs

Average Rating: 4.3 out of 5.

15. Git Graph

Git Graph lets you view a Git graph of your repository and efficiently perform Git actions from the graph. You can also configure it to look the way you want. You can display the local and remote branches, perform git actions, compare two commits, and a lot more with this handy tool.

1,537,777 installs

Average Rating: 5 out of 5.

16. GitLens

GitLens is an open-source extension for Visual Studio Code created, developed, and maintained by Eric Amodio.

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

GitLens is robust, feature-rich, and highly customizable to meet your needs.

10,103,571 installs

Average Rating: 4.8 out of 5.

17. npm Intellisense

npm Intellisense is a Visual Studio Code plugin that autocompletes NPM modules in import statements.

3,295,873 installs

Average Rating: 4.6 out of 5.

18. Path Intellisense

Path Intellisense is a Visual Studio Code plugin that autocompletes filenames. This helps in reducing the time taken to type the file paths and also helps in reducing errors related to wrong paths.

5,133,441 installs

Average Rating: 4.8 out of 5.

19. WakaTime

WakaTime is an open-source VS Code plugin for metrics, insights, and time tracking automatically generated from your programming activity. You can see the time spent on each programming language, find the time you spent per feature/commit, and you can get fully automatic reports via email.

475,008 installs

Average Rating: 4.4 out of 5.

‍

Best UI Frameworks for React.js

Atharva Kamble — Thu, 07 Oct 2021 19:35:22 +0000

Best UI Frameworks for React.js

React (also known as React.js or ReactJS) is a free and open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React is a prevalent Front end framework with over 172k stars on GitHub. There is a growing range of support libraries that helps us customize our UI components efficiently.

Here we will look at some of the best React UI Frameworks that you can adopt in your project.

The comparison made here is based on user reviews from the following trusted sources:

GitHub
npm.js
StackShare
Stackoverflow

1) Ant Design - The world's second most popular react UI framework

It is an enterprise-class UI design language with a set of high-quality React UI components. It is one of the best React UI library for enterprises. It offers many polished components that could be used to build an entire application. The documentation is extensive, with tons of examples, and stays up to date.

To find the examples of websites built on Ant Design, go here.

Developed By: Ant Design

Statistics:

GitHub Stars: 73.4k
11,749 websites use ANT Design

Top companies using this:

Pros:

Internationalization support for dozens of languages,
Powerful theme customization, and Typescript support.
Ant design is supported by modern browsers and Internet Explorer 11.
Enterprise look and feel.
High quality icons.

2) Material UI - React UI components for faster and easier web development.

Material-UI is the most popular React UI framework that provides Google Material Design out of the box. Material design takes inspiration from the physical world and textures while keeping the actual UI elements to a minimum.

See the full showcase of public apps using Material UI here.

Developed By: Hai Nguyen

‍Statistics:

GitHub Stars: 70k
193,907 websites use Material-UI

Top companies using this:

Pros:

Automatic color changes.
Switch between RTL and Non-RTL
Integration with Design Kits like Figma, Sketch and Adobe XD.
A wide range of helpful components are available, like app bars, auto complete, badges, buttons, cards, dialog boxes, icons, menus, sliders and more.
Material-UI also offers React themes and templates, so you can have a custom color theme for your app.

3) React Bootstrap - The most popular front-end UI framework rebuilt for React.

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. React Bootstrap is one of the oldest React UI libraries and has grown steadily with React itself. While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap.

Developed By: Mark Otto, Jacob Thornton

Statistics:

GitHub Stars: 19.7k

Top companies using this:

Pros:

Bootstrap’s grid system allows fully responsive series of containers, rows, and columns for your layout.
Choose between dozens of components, including badges, carousels, toasts, and jumbotrons.
The React component model gives us more control over form and function of each component.

4) Semantic UI React - The official plugin for Semantic UI

Semantic UI React is the official plugin for Semantic UI. The library boasts a collection of over fifty components, including segments, progress bars, transitions, pagination, and more. However, despite all of its unique features, if you do not have hands-on experience in JavaScript, you may find the library a bit complex.

Developed By: Jack Lukic

Statistics:

GitHub Stars: 12.4k

Top companies using this:

Pros:

Impressive customization and theming capabilities.
Zero traces of any jQuery code, simplifying the application development.
Wide collection of over 50 UI components for developers.
Complete SUI component definition support.
Simple declarative component APIs vs brittle HTML markup.

5) Chakra UI - Simple, Modular & Accessible React UI Components for your React Applications

Chakra UI provides a set of accessible, reusable, and composable React UI components that make it easy to create websites and apps. Chakra UI components are built on top of a React UI Primitive for endless composability. The community of Chakra UI is very active. You will get all the help required whenever you feel stuck.

Developed By: Segun Adebayo

Statistics:

GitHub Stars: 19.6k

Top companies using this:

Pros:

Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props.
Most components in Chakra UI are dark mode compatible.
Chakra UI components follows the WAI-ARIA guidelines specifications.
You can use the same react component as much as you want and customize it for further use.
Chakra UI library provides you modular react UI components that help in writing clean and optimal code.
This library does not require any heavy set up to implement and is simple and easy to use.

6) Blueprint - A React-based UI toolkit for the web

Blueprint is a newly open-sourced design system implemented as a collection of composable React components and optimized for desktop applications. This is not a mobile-first UI toolkit.

Developed By: Palantir

Statistics:

GitHub Stars: 18k

Top companies using this:

Pros:

The React UI libraries has over forty components optimized in particular for complex data-dense interfaces for desktop applications.
Contains many useful components like breadcrumbs, buttons, callouts, cards, dividers, navbars, tabs, tags, and much more.
The library supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge.

7) Grommet - Focus on the essential experience

Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. Grommet is a component library designed for responsive, accessible, and mobile-first web projects. It even has a list of SVG icons.

Developed By: Hewlett Packard Enterprise

Statistics:

GitHub Stars: 7.4k

Top companies using this:

Pros:

It embraces atomic design methods and allows for keyboard navigation, screen reader tags, and more.
Powerful theming tools which lets you tailor the component library to align with your color, type, and layout needs. You can even control component interaction.
Tailor composite components.
Flexible layouts.

8) Evergreen - React UI Framework by Segment

Evergreen contains a set of polished React UI components that work out of the box. It features a UI design language for enterprise-grade web applications.

Developed By: Segment

Statistics:

GitHub Stars: 10.9k

Top companies using this:

Dashboard, Stack

Pros:

Evergreen contains a set of polished React UI components that work out of the box.
Evergreen features a UI design language for enterprise-grade web applications.
Evergreen has over 30 components which include buttons, filepickers, select menus, spinners, side sheets, tables, and more.
They offer a figma library, and they are working on patterns for handling “Error Messages” and “Table Layouts”.

9) Fluent UI - Microsoft UI Kit for Web, Mobile & Desktop App Development.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications. It has Web Components and native libraries for iOS, macOS, Android, and Windows.

Developed By: Microsoft

Statistics:

GitHub Stars: 11.8k
97 websites use Fluent UI
Weekly Downloads on NPM: 53,498

Top companies using this:

Microsoft

Pros:

It has components for building forms and lists but also offers very specific ones like a PeoplePicker for example.
Good default styling capabilities without any code.
Good flexibility and ability to customize the look and functionality of the components.

10) Rebass - React primitive UI components built with styled-system.

Rebass is one of the best grid libraries that provides UI components, leaving the developer to focus only on page development. Rebass offers documentation on recipes for common use cases like grids, navbar, and image cards.

Developed By: Brent Jackson

Statistics:

GitHub Stars: 7.4k
Weekly Downloads on NPM: 65,779

Top companies using this:

Pros:

First-class support for theming & full compatibility with Theme UI.
Quick, mobile-first responsive styles with array-based syntax.
Flexbox layout with the Box and Flex components.
Minimal footprint at about 4KB.
Best-in-class developer ergonomics with Styled System props.

‍