**AS** you are already reading this blog, I assume you’re new to coding.



Tell me one thing, did you start coding all at once? I guess not. At first, you may have had no idea where to start. It is intimidating to focus on things you have no idea about.



You would have gone through a series of thoughts and a dilemma of whether-to-start-or-not. You would have asked your friends in the coding field for some advice or suggestion, or have gone online searching for answers you so desperately needed. After giving much thought, you would have made up your mind to go further in coding.



In the long run, the first step we take is the most important one. And the simplest one too. Once we get set to the task, things start getting complex.



For someone belonging to the software field, it is their birthright to choose the programming career, but for others, it takes a great deal of effort to even think about it.

If you’re the latter one, here are a few things you must know before you start coding. I’m quite positive that they will be helpful for you-



## 1. Coding is Not an Easy Task!



>The very first lesson you should learn that coding is not easy. If it were, everyone will be doing it.



It’s not an understatement to discourage or discredit your ability. It’s a fact that’s necessary for everyone to understand before choosing the path of programming.



However, once you get to know the basics of coding, it becomes easier. You start to enjoy coding. But let me tell you one thing that you must not confuse yourself with this presumption that just because you now know the basics of coding, you are done.



It’s way too long until you get to that position.



Installing new languages and frameworks day-by-day is an exhausting and equally annoying task. There are just too many plugins, add-ons, tools and libraries, and is a mountainous work for a newbie coder. Consider the frustration when you’ve got an overwhelmingly enormous number of things to learn, but have no idea where to start and what to do.



The first lesson you need to learn as a developer is patience. Yes, you will need to keep a great deal of patience because sometimes you’ll get stuck on a single piece of code, and it might take weeks till you get anywhere near to understand its logic.

## 2. Find A Source of Motivation!


Stick to the reasons why you thought to start coding at first.



There will be times you’ll desperately want to get rid of all the coding trouble and seek comfort. At that time, you would need to remind yourself why did you begin at first?



As you will be working on your own, this motivation requires being coming from your inner self. It is the motivation that will keep you driving and will push you to move every time you stumble upon some trouble.



Once you are set to your task, you can’t let anything get in your way. You require discouraging every kind of demotivated thought from your mind and keep your mind completely aligned to the task at hand.



Occasionally take a break, let yourself revere your progress. Think about everything you’ve learned and how very far you have come onto the path of coding.

## 3. Continuous learning is the only salvation!


Coding is a process, not a destination where you can reach quickly by fastening your pace. It doesn’t happen at once; it is a serious business, and it takes time.



For a programmer, there is always scope for learning. If you don’t keep up, well, you will be left behind and the technology will be stretched too far.



So, you see? A programmer needs to learn new things regularly, for all time. You can’t stop. You have a lot to learn. Consistent learning is a vital part of being a programmer.



There will times when you might become passive and boring, but you need to head start strong, no matter how many difficulties lie in your path, you must go ahead.



If you skip some fundamentals either because they don’t seem very important or because they are complex to understand, it will cost you in the future.



Let me tell you a story of mine- From the moment I set my eyes upon the chapter ‘complex numbers’ for the first time, I realized that I was afraid of it and not going to understand it. It seemed so complex, literally. So, I decided to skip it for all time. In almost every exam, questions from this topic used to poke me, but I didn’t dare pay any heed to them. But while pursuing my engineering degree, I realized that it was a big mistake. I could no longer ignore it. It was now a significant part of every subject.



Similarly, a simple concept of coding cannot be skipped. You must not let yourself skip it. All the basic operations and procedures in coding are far too important to skip.

## 4. Set Small Goals and Thrive to Get Them!


Personally, I think that sticking to a short-term goal is the best way to ensure the most beneficial outcome. When I restrain myself to a particular task to be done by the end of the day, I put my best efforts to make sure that it is done by the end of the day.



If the road is long and difficult, split it up into smaller roads. It makes the invisible and seemingly-impossible task into a visible and possible one.



Set a goal from day-1, however small it might be. It will set boundaries that you can easily cover in the given time. At the end of the day, you will have a great feeling of accomplishment, it will inspire you to move further with another set of goals.



You need to hone your skills every single day and go deeper and deeper into them. Only then you’ll truly understand the entire scope of coding.

## 5. Choose a Language to Learn!


You require choosing one of the core languages which will help you understand coding basics and logic. My advice? Stick to the fundamental.



The language, you choose, must help you learn the low-level core concepts like loops, statements, procedures, data encapsulations, function calling, and how to apply logic. And above all, it must be easy enough to understand and grasp. After all, it’s your very first language.



There is no shortage of such languages, meeting all these requirements. For instance, Python will be a very good choice to start with. It’s just a little more than simple English, so would be easy enough for you on your first try.



On the other hand, if you want to take a challenge at the very first step of your journey to coding, well, you can start with C++.



However, the concepts are all the same. Whatever you may choose will serve the same purpose.

## Summary


Coding is not just a job, it's a lifetime learning experience. A coder has a completely different perspective about everything. Once you get started to code, your mind revolves around logic and interpretation of code. It gives you a distinct way to analyze things that occupy our lives.



So, get your collars up and ready yourselves to enter into an altogether different world of coding!!



I hope you enjoyed reading this blog. If you did, well, I would be glad. It is the whole purpose of writing, isn’t it?



[5 Reasons Why Every Developer Should Write Blogs??](https://habilelabs.io/blog/reasons-why-every-developer-should-write-blogs)



Now that you’re all set to the path of coding, it will do you good to some writing as well.



Thanks for Reading!!

medium_things-you-must-know-before-start-coding.jpg

small_things-you-must-know-before-start-coding.jpg

thumbnail_things-you-must-know-before-start-coding.jpg

5 Things You Must Know About Coding!

Recently, Team React working alongside with Babel has come up with a new feature in the latest React release 17 offering a new JSX in-built transform.



JSX is the Syntax Extension of JavaScript. It looks like HTML but, in fact, is an extension to JavaScript. It is an inline markup language to create React elements and used to describe what UI should look like.



>React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

In this blog, we’ll be discussing the benefits of new JSX transform and how to use it. Let’s get going-



## Why JSX Transform?



As browsers don’t support JSX, it comes down to the compilers like Babel or TypeScript to transform JSX into regular JavaScript which is understood by browsers. However, this need will be overcome by the introduction of new transform which will automatically compile the JSX source code without having to rely upon the typical compilers.



The main benefits of the new JSX transform are:


- It enables you to use JSX without having to import React.
- The compiled output relatively improves the bundle size.
- It lights a path for future improvements where you’ll have only a few concepts to learn React.


Now let’s see how the new transform differs from the older one -


## Old vs New JSX Transform



If you recall using JSX, you would know that we need a compiler (like Babel or TypeScript) to run the JSX code in the browser. These compilers transform this JSX into _React.createElement_ calls.



Let’s suppose your code looks like this -


```
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
```

The compilers convert it into regular JavaScript, such as:


```
import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}
```

Your source code is not exactly changing in any way, only it’s been converted in the form that the browser can understand.



However, there are certain limitations of this approach, e.g.-



- As the compiler is calling the React.createElement function; there is, of course, ‘React’ you will be conferring to. You will have to import React first so that the JavaScript knows what to do with the compiled code.
- Also, there are certain performance limitations with React.createElement.


However, the new transform solves these issues by introducing two new entry points to use React that can directly be used by the compiler without having to transform the JSX code to React.createElement. Though it’s not a big deal to insert import React from ‘react’ command every time at the top of the JSX files, it is a huge cause of irritation for experts.



But, no more! The new JSX transform in React 17 imports the special functions from these entry points automatically and calls them.



Let’s take an example of the source code -


```
function App() {
return <h1>Hello World</h1>;
}
```

The new compiled code will look like this -


```
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
```

So, you see? You no longer need to import React. But mind it, you might still need to import React in case you are going to use Hooks or other exports.

## How to Upgrade to the New JSX Transform??



If you don’t want to upgrade your existing JSX transform, that’s fine, you’ll not face any trouble using the old transform. But if you do wish to switch to the new JSX transform, here are the prerequisites you will need -



- React version that supports the new transform (currently it’s v17 RC but soon it will be backported to previous versions like v16.x, v15.x, and v14.x)
- A compatible compiler



In order to leverage the new transform, you need to make some changes in the tools you’re using, such as -



- Upgrade Next.js to version 9.5.3 or above
- Make sure that your Create-React-App is updated to v4.0 (in Beta currently)
- Update Gatsby version to v2.24.5 or above
- Upgrade TypeScript to v0.126.0 or above.


If you’re using Babel setup, upgrade it to v7.9.0 or above. If you’re using @babel/plugin-transform-react-jsx, update it as -


```
npm update @babel/core @babel/plugin-transform-react-jsx
or
yarn upgrade @babel/core @babel/plugin-transform-react-jsx
```

If you’re using @babel/preset-react, update it as –


```
npm update @babel/core @babel/preset-react
or
yarn upgrade @babel/core @babel/preset-react
```

Now, update the babel configuration as given under -


```
// If you are using @babel/preset-react
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
// If you're using @babel/plugin-transform-react-jsx
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
```

And that’s it. You got it right.



## Removing Unused React Imports



As React will no longer be in scope while you use JSX, it leads to having a lot of imports in your code that are not necessary anymore. Though it does no harm to let them hang around, you can get rid of them at any moment.



You do not have to remove each and every import manually and separately; all you have to do is to use an automatic script called codemod, such as:


```
npx react-codemod update-react-imports
```

It will remove all the unused imports at once and change all the by-default imports resulting from _import React from ‘react’_ to destructured named imports. If you’re using hooks instead, _codemod_ will convert it to a named import. For instance, _React.useState_ will change to _useState_ and _import { useState } from ‘react’_ command will be added at the top. Also, _codemod_ will aid you with upgraded and future versions of React for supporting ES Modules.



I hope this blog was helpful for you!



Thanks for reading!!

Introducing New JSX Transform- All You Should Know About!

medium_introducing-new-jsx-transform-all-you-should-know-about.jpg

small_introducing-new-jsx-transform-all-you-should-know-about.jpg

thumbnail_introducing-new-jsx-transform-all-you-should-know-about.jpg

**W**riting is an art that opens up your mind. Everyone should write once in a while. But you need not be a writer to write something. Anyone can write at any time.



However, for those who wish to be a good writer, it’s a long way but, mind it, it’s not tough. It takes deliberate practice for years along with lots of reading and writing to emerge as a good writer.



But as the developers are our technical warriors, it is necessary for them to often write to share this knowledge. It opens up their mind to broader aspects of programming.



In this blog, I will emphasize the benefits of writing for developers. They need not write perfectly, but they must write once in a while.



Writing and Programming are far too different things. Writing is about creativity and programming is about logic and science. But both have one common thing- structure and syntax. The basis of both writing and programming is the structure of the creation.

While programming is not required for writing, writing is undoubtedly an important tool in programming. Let’s see how writing can be of great assistance for developers-



## Better Communication



Among many benefits, the first and foremost one is the obvious improvement and enhancement in the writing and communication skills of the developer.



Programming is not only about writing code. It also includes collaborating, debating, presenting your ideas, communicating with your peer, client, manager, boss, etc.



Writing will help you sharpen your vocabulary, debating skills, and speaking out your ideas aloud.



Knowing something is far easier than explaining it. To explain things, you need to speak up your mind. And to speak up your mind, you must know how to articulate thoughts into words.



That’s where writing helps.



To convert your thoughts into words.



If you don’t know how to do that, you should start with something very simple. Don’t think about what you’re writing, just write whatever it is in your mind. There will be plenty of time to edit it later.



This skill will provide you an upper hand everywhere. With every blog you write, you are getting better. You will realize that you are no more conscious of speaking up in a meeting, no more afraid of giving a presentation in front of the whole office.



Whether you’re writing an important email or communicating with a client from afar, your writing skills will aid you everywhere.



Earlier while you were worried about how to write, now you will be thinking about how to write better. This is the power of writing.


## Better Documentation



>Writing documentation improves the design of your code. Talking through your API and design decisions on paper allows you to think about them in a more formalized way.



Documenting things is a part of every developer’s job whether it is to explain a project, its database, and APIs, or the management part. They regularly require to explain their work in the documentation or a helping guide that makes sense to the users. It makes writing even more important for them.



When you release your code, it’s a wonderful feeling when people use it. But it needs a detailed explanation of every piece to save everyone from the frustration of its complexity. This is where ‘documentation’ plays its role.



Documentation is the process of ‘postmortem’ of the code. It means to explain each and everything about it and answering all the Why-s, What-s, and How-s questions.



It’s up to you how much thought you give to it. The better you are at writing, the better you’ll be able to document your code.

## Learning Experience



Technical writing is a completely different aspect of writing. While it takes creativity and imagination in normal writing, an extra factor known as _‘technical knowledge’_ is required to write technical blogs.



Though writers can write about everything. But wouldn’t it be better, that someone who has raw knowledge about the subject shares his thoughts about it, rather than a conventional writer who learns about it from multiple platforms and then re-writes the same thing?



When you write, you learn things. When I write about technical topics, I learn about them which I couldn’t have otherwise.



I remember my childhood, my teacher used to say in our class that if you can’t learn things, write them down. Writing is the best way to learn. So, I used to write down the paragraphs, I couldn’t memorize.



This was about the writing part. Now let’s discuss the research part.



While researching on a topic, a writer comes across many different topics, opinions, facts, etc., and gets to know extra things besides the topic.



Now and then, when we find some interlinks about the topics, we were looking for but couldn’t exactly put a finger at and think “oh, right! I can also include this thing in my blog.”



So, you see? While writing a blog, we come across many different dimensions of a topic, some of them we find too fascinating, and can’t resist writing about them.

It is called learning.

When we write, we are not trying to impress the audience with our language, rather we try to communicate with them, we share our ideas through the writing.

## Sharing Knowledge



Your experience with programming can provide guidance to young developers through your blog.



Remember the time when you just entered into your career as a greenie developer. You read so many articles to guide you about the right tools, technologies, techniques, direction,



The greatest help was either from senior developers or a step-by-step guide shared by someone through his blog. When was the last time you read a blog about something that was a big help in your project?



Well, it wouldn’t be available if the other person hasn’t thought about sharing his work. Now, would it??



In this era, Google has been an inseparable part of our lives. Every one of us uses Google every day multiple times to know about things.



But it isn’t Google that manifests this information on itself and tells us about things like some magic, rather the people that make themselves time to write down their experiences and knowledge to their best and upload this information on it.



>“Write what should not be forgotten.” — Isabel Allende



Your knowledge is your legacy.



You might think your work isn’t that important to be published, but you never know who might be in need of just what you do. Your blog can help them in some way.



Or you can share the mistakes you made in your career, what they cost you, and how did you overcome them. Don’t you think that everyone should learn a lesson from your experience?

## Make an Online Presence


You may practice blogging for many reasons as we have already discussed, but it is also a great way to gather an audience. It helps you make an online presence, which further helps you to get involved with the developer community, connect with other developers and writers.



Having a portfolio of your work throughout the years is something that can be proved a milestone to your career. Your potential clients and recruiter can learn about your life’s work and skills through your blog.



For freelance developers, the consistent online presence will promote you and get you a big hand over huge career opportunities.



Tell me one thing, which is better- to have a resume claiming that you have an expertise in ReactJS or pointing towards your blog where you have a number of blogs explaining your consistent progress in ReactJS throughout these years? I guess, you agree with me if I chose the latter.



Yes. Telling about your work is not as impressive as showing it.



Your blog will be your virtual resume, you can attach its link in your resume or bring it up to the interviewer. In any case, it is more likely that you get the job than other candidates.



## Summing Up


Some developers claim to be too busy to write, others don’t find it much beneficial. Well, I hope I was able to inspire you a little bit to start writing.



You should write whenever you can, once a week or twice a month, as you find suitable, and I’m certain that when you will look back after a year or so, you’ll be grateful that you started writing at that time.



If you liked my blog, then don’t forget to hit some claps 👏.



Thanks for reading and keep writing!!

5 Reasons Why Every Developer Should Write Blogs?

medium_5-reasons-why-every-developer-should-write-blogs.jpg

small_5-reasons-why-every-developer-should-write-blogs.jpg

thumbnail_5-reasons-why-every-developer-should-write-blogs.jpg

“A word after a word after a word is power.”

**N**ot quite yet! It’s a long way path for WFH to catch up with open office culture, let alone overcome it.



But there is no denying that it is going to be an important part of our work culture from now on.



During these pandemic times, one thing we have learned for certain so far is we can work from home effectively and efficiently, which rules out the need for an office in the future.



There are many companies that have already added new WFH policies for their employees, allowing them to opt for WFH if they wish. It may take a while longer for more and more companies to implement it for long-term operations.



The concept of work we have always believed to be the only one now has another counter option. It is time to envision a grand change in the future of work.



This COVID-time-duration has taught all the business leaders that there is no risk in letting their employees work remotely, in fact, it may augment their productivity.

This blog is about discussing the future of work. So here we go-



## Gradual Shift from Open Office Culture to Work-from-Home



It’s been more than 6 months since the Covid-19 pandemic forced us all to cease our outdoor activities and limit ourselves to our homes. In such a case, it was necessary to take extreme measures and every company, whether small or large, switched their businesses online.



What started as a welcome and convenient solution during the crucial and uncertain times of Covid-19 for most of the companies, has quickly turned into a massive global experiment.



It opened a new and very possible alternative for present open office systems in the form of Remote Working.



As you have heard many times that _“A crisis leads to new inventions”_, the coronavirus pandemic lighted a torch and triggered us to sail to the path of digitization.



Here are some accounts that prove that there is a great chance that WFH can be a part of the new normal in the upcoming years-


>* Amazon has extended its WFH to January 2021, until further notice.

>* Facebook has extended its WFH period to July 2021 and is planning to allow it permanently.

>* Google and Microsoft allowing WFH​ till the end of the year.

>* Salesforce has also given its employees the WFH option for the rest of 2020

>* Twitter saying​ that employees can WFH permanently if they wish.

Let’s check out the reports of several surveys predicting the future of work-



## Predictions about WFH Post Covid-19



>The COVID-19 pandemic presents an urgent need to support workers and provides a unique opportunity to assess systems that support work away from the office while enhancing wellbeing. This will have a lasting impact beyond COVID-19.



The predictions regarding the future of work are the results of various surveys and research from the experts given, as under-



- _According to a survey conducted with 317 CFOs and financial leaders in the USA, 74% of them are planning to move their on-site workplace to remote work._
- One of the biggest factors behind this shift is the huge cost-saving accounted for by WFH and now knowing better, they would implement it to a greater level.
- The funds that were used in real-estate before will now be invested in the new WFH policies, employees' well-being, and to buy technical and collaboration tools necessary for remote work.
- Not only the companies but also the employees are finding WFH very beneficial in financial terms, reducing the demand for an open office.
- The very satisfying fact for those who don’t find WFH exciting is- the open office culture will not be cut off completely. It will become more flexible. The remote working will progress alongside commuting.



Earlier, only a few selected companies were allowing remote work for the employees but, from now on, we will see that it has been adopted by almost every sector.

## Pros & Cons of Working from Home



While there are many perks and advantages of remote working, the list of its downsides is not short as well. Let’s have a look-


### Pros:


- Fewer expenses, more saving
- Work-time Flexibility
- Comfortable workspace
- More time with family
- Less Stress
- More independence


### Cons:



- Various distractions at home
- Increased Isolation
- Internet connectivity issues
- Disturbed Work-life balance
- No office gatherings and festival celebrations
- Zero Socializing
- No Work life at all
- Lack of motivation
- Unhealthy lifestyle
- Harder collaboration


## A Boon or Bane??



How can we conclude on ourselves whether it’s a bane or boon? It’s all about perceptions.



For me, it’s not exactly a bane or boon but a necessity of the situation. And there are many who will agree with it. It works both ways. It’s a boon for some and a bane for others.



It is an effective solution for some like IT & software, digital marketing, eCommerce, social networking companies, etc. On the other hand, some like BPOs, small businesses, and mini firms are struggling to keep up.



It will be an amazing chance to work staying at home, saving lots of money and time, having real & healthy meals, having your family around all the time, etc.



It is very fine and good for a short time period or on a part-time basis. But the reality hit when it gets extended for a long-term period, working full-time, every day, for months, extending to a few years to forever.



You will get irritated with it after a while. It will kill your activeness and turn you into a lazy person.



This is not something we are looking forward to? Are we now?

## Are You Ready for It??


![future-of-work-is-work-from-home_1.jpg](https://backend.habilelabs.io/uploads/future_of_work_is_work_from_home_1_c8d80385cf.jpg)


Many will say ‘Yes’. But then, many others will not.



While work from home is going to be a big relief for single mothers, going-to-be mothers, sick person, always-having-health-issue kind of person, married employees, etc. Those who used to commute regularly for long distances and spend what? 30 min, 1 hour, 2 hours, even more? Well, they will be highly pleased as well.



But others might not like it.



Consider working from home forever!! Your life will shrink to waking up late, lots of eating, working from your desk or bed (oh yes, many people do that though they will not say it), and lots of sleeping, unless, of course, you have that spirit to wake up early even when you’ve time to sleep more.



Well, I’m not fascinated with this idea of staying at home all the time, not at all.



The office gives us an else place to work, connect with people, socialize, make friends, and enjoy the professional life.



So, the best step will be ‘letting them opt for where do they want to work, office, or home?’


## Final Words


Now that we have an office space, we are dreaming about having a permanent WFH facility, and when it will be done, we would yearn for these times. It’s human nature. We always want what we don’t have and once we get it, we criticize it and want back what we had earlier.



My point?? Enjoy what you have. It is _necessary_ (and with emphasis on ‘necessary’) to have a separate personal and professional life. Don’t you think? Well, you can tell me what do you think through comments.


Happy Reading!!

Future of Work - Is ‘Work from Home’ going to be the new normal?

medium_future-of-work-is-work-from-home_feature.jpg

small_future-of-work-is-work-from-home_feature.jpg

thumbnail_future-of-work-is-work-from-home_feature.jpg

Future of Work- Is ‘Work from Home’ going to be the new normal?

**I**t’s not been very long since Gatsby came around. Strictly, 3 years. Its beta version was first released in 2017. And in such a short time period, it has gained a strong community and an enormous fan base.



As Gatsby is known as a mixture of some wonderful tech like React and GraphQL, if you’ve worked with them before it would be a fun experience for you to try out Gatsby and if you don’t, well then, it will be another benefit, you will learn a great deal about them.



Without knowing React and GraphQL, you might face difficulty learning Gatsby. But this is how everyone feels right before learning something new. Take it as a chance to learn them both without actually learning them.



So instead of learning one new technology, you would end up learning 3 of them. Excellent. Isn’t it?



Here, I’ll try to make it clear why it is worthwhile to try out Gatsby. We’ll discuss its features, specialties, working, ecosystem, and more. I hope that this blog, along with my ardent regards to Gatsby, will help you make up your mind.

## What is Gatsby?



>“Gatsby is a React-based, GraphQL powered, open-source framework for creating static websites and apps.”



In simple terms, it is a combo pack of all the best parts of ReactJS, GraphQL, Webpack, and other popular frontend-development tools and comes forth with a fantastic solution that every developer would love.



One of the best things about Gatsby is that it makes use of ReactJS which is the best tool today and this fact adds weight to its credibility.



It uses static rendering and precompilation features, resulting in faster page loads, code splitting, lazy loading, resource optimization, etc.



When I told one of my developer friends about Gatsby, he didn’t give it much thought but when I forced him to have, at least, a look at it, all he said was ‘wow’. He just loved it.



Probably, you would also have the same thoughts for it but wait until you give it a try. You will not believe its extraordinarily high speed.



## Why Gatsby?


>“It is a static PWA (Progressive Web Apps) generator. You get the code and data splitting out-of-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.”



Gatsby is a modern and updated version of the traditional Content Management System (CMS) like WordPress. It is way more secure than WordPress which has a long way to catch up with it. Also, the build process is much faster than other CMS platforms.



If you step back, you’d know that you need LAMP setup before going to access or start working on WordPress while these whole setups are covered in Gatsby by-default.



On the point of security, other traditional CMS applications expose the APIs and services to the public which increases the risks. But Gatsby serves static files by CDN which isolates all the API microservices and 3rd party API’s, reducing the risk of attacks.



- Automated code-splitting, lazy-loading, image optimization, prefetching resources, etc.
- Rich ecosystem with over 2000 plugins
- Gatsby Cloud for Faster Build
- Incremental build approach
- SEO-friendly apps/sites
- High security
- Faster performance


It is 2.5 times faster than other traditional static frameworks and extremely safe due to static rendering.

## How Gatsby Works?


Gatsby uses a completely different approach than what we’ve seen in Single-page Applications. In contrast to SPAs where APIs requests are made at runtime, Gatsby works a step ahead.



Gatsby gets all the data fetching and sourcing is done at the build-time only. This data, then, creates static HTML, CSS, and JavaScript files through static rendering, leading to faster site response. This is what makes everything more secure and fast in Gatsby.


![gatsby-a-blazing-fast-static-site-generator_1.jpg](https://backend.habilelabs.io/uploads/gatsby_a_blazing_fast_static_site_generator_1_3617ef938b.jpg)


With the serverless approach and no reachable database, the risk of DDOS and malicious attacks reduces drastically as the attack-surface doesn’t exist.



## Gatsby Cloud



The custom-built cloud infrastructure of [Gatsby Cloud](https://www.gatsbyjs.com/cloud/) increases the performance of your sites up to 1000 times with the features like incremental build and intelligent caching.


![gatsby-a-blazing-fast-static-site-generator_2.jpg](https://backend.habilelabs.io/uploads/gatsby_a_blazing_fast_static_site_generator_2_ebbe1f6b91.jpg)


The main purpose of the Gatsby Cloud is to minimize the efforts that we have to make at the time of the project setup.



Its four main features are the key to its superpowers-



- **Cloud QuickStart:** It helps beginners and non-technical users to use it in their projects quite easily.
- **CMS Integrations:** It has the plugins for about 389 CMS and APIs, thus, provides CMS compatibility.
- **Real-time Preview:** Gatsby provides you a real-time preview of your live code. You can see the changes made on the site immediately.
- **CI/CD Solutions:** It uses the new ‘Builds and Reports’ CI/CD solutions that will dramatically increase the build speed and report the common errors with feedback, resulting in the better site performance.

## Gatsby Ecosystem



Gatsby has a thriving ecosystem with a diverse plugin system, themes, starters and not to mention, Recipes. It has all the tools for building modern and feature-rich websites -



- Plugins for seamless integration
- Themes for effortless configuration
- Recipes for automation of build tasks


Let’s discuss them in detail -


### [Gatsby Plugins](https://www.gatsbyjs.com/docs/plugins/):



The Plugin system of Gatsby aims to make Gatsby flexible and extend its functionalities.



They can be installed directly via the npm registry and are used to implement Gatsby APIs.



The Gatsby ecosystem has many types of plugins that are used for various purposes including responsive images, SEO, data sourcing, support for TypeScript and SASS, Google Analytics, and so on.



In short, they can be used to -



- Add external data
- Transform it into JSON format (from other formats) using gatsby-transformer-json
- Add themes and 3rd party APIs.
- Add support for TypeScript and Material UI to your site using gatsby-plugin-typescript and gatsby-plugin-material-ui respectively.


And so much more.



The list is too long to write here and yet more plugins will be added with new functionalities in the time to come.



You can install a plugin simply via npm-install like any other node.js packages.



### Gatsby Themes:


_“Gatsby Themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites.”_



The Gatsby Theme abstracts out the default site configuration into a single installable package. You can update them, compose another one, or swap them for a more compatible theme anytime you want.


![gatsby-a-blazing-fast-static-site-generator_3.jpg](https://backend.habilelabs.io/uploads/gatsby_a_blazing_fast_static_site_generator_3_a9af52796d.jpg)

### [Gatsby Recipes](https://www.gatsbyjs.com/docs/recipes/):



Recipes were added recently in Gatsby. They act as a tool to automate some common build tasks such as creating layouts/pages and installing and setting up plugins.



The purpose behind inventing Recipes was to make the site-building process easier for developers by assigning a simple recipe for some specific tasks. Now, they don’t have to tolerate the pain to go through the whole tutorial just for some simple tasks.



Not only Gatsby contain some built-in Recipes but also presents the prospect of creating your own custom Recipes.



To get started with Recipes, first, you need to install the latest version of Gatsby, as given below -


```
npm install -g gatsby-cli@lates
or
npm install gatsby@latest
```

Then, select a recipe as shown below -


![gatsby-a-blazing-static-site-generator_4.gif](https://backend.habilelabs.io/uploads/gatsby_a_blazing_static_site_generator_4_9ce11bc7a5.gif)


This is it. If you want more details, you can check out its fantastic documentation and tutorials. Whether you want to build your first Gatsby app or website, here is everything you need -



[Gatsby.js](https://www.gatsbyjs.com/docs/)


## Last Words:



Gatsby is a wonderful choice for technical and non-tech users alike. You should try it out!



Considering its scope, it has a very bright future ahead. The Gatsby team seems to be working on it continuously and tirelessly. If you check out its [official page](https://www.gatsbyjs.com/blog/), you’ll see that even now they’re making further additions to it.



Thanks for reading!! (I’m looking forward to your claps👏😋)

Gatsby- A Blazing Fast Static Site Generator

medium_gatsby-a-blazing-fast-static-site-generator_feature.jpg

small_gatsby-a-blazing-fast-static-site-generator_feature.jpg

thumbnail_gatsby-a-blazing-fast-static-site-generator_feature.jpg

Cloud, Recipes, Plugins, Themes, and much more!!

**F**lutter was built by Google in 2017 to provide a platform for developers to create scalable and faster applications that would run on both Android and iOS devices. It is an SDK that works on Dart language.



But the interesting thing is, it’s easy for React Native developers to build native applications with Google Flutter. Even those who understand only the basics of React Native can easily make their way to Flutter development.

In this blog, we’ll see what makes Flutter easy for JavaScript developers and learn about its basic concepts-



## Overview about Flutter



>“Flutter is Google’s portable UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop for Android and iOS from a single codebase.”



It is free, open-source, and works with the existing code. It is built with C, C++, Dart, and Skia (a 2D rendering engine). It ships with a React-like framework (flutter flux).



It is different from other native-app-building frameworks in many ways, such as -



- It has its own set of UI components, called widgets. The performance of the Flutter applications is limited by the quality of these widgets.
- Instead of using WebView or OEM widgets, like other native frameworks, it uses its rendering engine (Skia) to draw UI components (widgets).
- Also, it only uses a little potion of C and C++ code, most of the other things are implemented in Dart.



The Flutter engine implements and renders Flutter’s libraries, UI components, graphics, animation, network Input/Output, plugins, and compiles toolchains on both Android and iOS.



The Flutter Architecture is based upon a layer-system with a series of independent libraries, each one depending upon the underlying layer.


![google-flutter_1.jpg](https://backend.habilelabs.io/uploads/google_flutter_1_f4079320f4.jpg)



All the layers are designed in such a way that no specific one has the privilege to access the layer beneath and every part of the framework level is replaceable.



#### The Flutter SDK consists of:



- A heavily optimized 2D rendering engine
- React-like framework
- High-quality Material Design and Cupertino (iOS-style) widgets
- Dart DevTools for performance debugging (currently in beta phase but will be activated soon)
- Interop and plugin system
- Integration test APIs

Now that you’ve got a basic understanding of Flutter, let’s move further into more details about Flutter flux and Dart language-



## What is Dart?



Dart is the modern, concise, general-purpose, and object-oriented programming language, developed by Google, that Flutter uses in building its applications.



Do you know that not many developers know about Dart??



Yes. That’s true.



Although it has a strong presence in the developer’s community, it is ruled out by mainstream languages like JavaScript and Java.



Today’s developer finds his comfort in these mainstream languages and they don’t want to leave or replace them and this is why Dart remains almost untouched by the developer’s world.



But it doesn’t imply that it is not understandable or suitable, rather it is a simple and easy-to-understand language for JavaScript developers as it is also based upon the object-oriented (OOPs) approach.



Whether you’re building a web app, mobile application, or server-side app, Dart is the solution for all.



The reason why the Flutter Team chose Dart of all languages is that while the team evaluated several languages based on four primary parameters, they found Dart most effective over all others.



While some languages met some criteria, Dart, not only, fulfilled all the parameters but also fitted best as per their assessment.



These four parameters are -



- Object-oriented language
- Developer productivity
- High and predictable performance
- Faster allocation


Also, Dart is an easy-to-get-on-with language with some amazing features like:



- Ahead-of-Time (AOT) C-style syntax compiled into native.
- Support for interfaces and abstract classes.
- Optional transcompilation into JavaScript.

## Flutter Flux-



>“A Dart app architecture library with unidirectional data flow inspired by RefluxJS and Facebook’s Flux.”



Flutter Flux is a modified form of [RefluxJS](https://github.com/Gusto/refluxjs) but, instead of React, it works for Flutter.



The main function of flutter flux is to implement a unidirectional data flow pattern which consists of _Actions, Stores, and StoreWatchers_. You can see their functions in the image below-


![google-flutter_2.jpg](https://backend.habilelabs.io/uploads/google_flutter_2_4c2497c0c3.jpg)


## Dart vs JavaScript



While React Native uses JavaScript to develop high-quality, cross-platform applications, Flutter is supported by Dart language. Nonetheless, it is very similar to JavaScript and thus, easy-to-learn for JS developers.



- **Entry Point:** While in JavaScript, one has to define an entry point whereas, Dart has a predefined **main()** function that serves as the entry point.
- **Printing to console:**


```
// In JavaScript
console.log('Hello world!');
// In Dart
print('Hello world!');
```

- **Assigning Variables:** Unlike JavaScript, you must either explicitly type the variable name or it should be inferred automatically.
- **Null or zero value:** Values of 1 or any null-objects are considered ‘True’ in JavaScript but in Dart, only the Boolean _true_ is considered ‘True’.
- **Functions:** Both JavaScript and Dart have similar functions, they only differ in their declaration.
- **Asynchronous Programming:** While JavaScript uses <u>_Promise_</u> object to represent the resulting value and success/failure of an asynchronous operation, Dart makes use of **_Future_** object to do this.


## How to Import Widgets?


In Flutter, everything works around widgets. Now, let’s understand what exactly are the widgets-


>“Widgets are the basic building blocks of an app’s user interface.”



Widgets can define all the structural and stylistic elements of the applications in the form of buttons and font/color schemes respectively.



Unlike React Native, where one needs to import each component, Flutter imports the whole packages. For example- to use iOS widgets, import the Cupertino library, for more basic widgets, you can even write your own widget library. See below -


```
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package: /my_widgets.dart';
```

## Get Started with Flutter


Flutter can directly be installed from [here](https://flutter.dev/docs/get-started/install).



To create an app with Flutter, you need to fulfill any one of the given requirements-



- Use the flutter create command from CLI and make sure to have Flutter SSDK in the PATH.
- Get the Dart plugins installed and use an IDE with Flutter


On the other hand, we use _create-react-native-app_ command in React Native to create an app.


```
// Flutter
$ flutter create <projectname>
// JavaScript
$ create-react-native-app <projectname>
```

A simple “Hello, World!!” app in Flutter


```
// Flutter
import 'package:flutter/material.dart';
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}
```

To get into more details, refer to this link -


[Write your first flutter app](https://flutter.dev/docs/get-started/codelab)



## Summary:



Flutter provides an excellent alternative for building native mobile applications. But why would a JavaScript developer consider it when he has the excellent choice of React Native??



This is due to its in-built UI components (widgets) that cease the need to import third-party libraries, which is very unlikely in React-Native.



Furthermore, the applications built by Flutter render excellent performance, and with no interpreters required for code compilation, they start quickly.



Still, Flutter is fairly in its starting years and has a long way to go. In the meantime, many features and updates will be added to it.


Thanks for reading!!

Google Flutter - From the Perspective of a React Native Developer

medium_google-flutter_feature.jpg

small_google-flutter_feature.jpg

thumbnail_google-flutter_feature.jpg

And why every JavaScript developer should try it!!

Google Flutter- From the Perspective of a React Native Developer

**C**certainly, you would have heard about Bill Gates, Sundar Pichai, Steve Jobs, Jeff Bezos, Mark Zuckerberg, and Elon Musk. The best entrepreneurs this world has ever seen.



These are the self-made billionaires of our time who lead this world toward the new future of business and entrepreneurship.



These are the people who dared to challenge their ordinary lives and went on to do something extraordinary and made a life-changing positive impact on the world. It would not be wrong to say that this planet would be a different place if these living-legends were not here.



From inventing the computing world to AI, Google to Apple, connecting people through online social platforms to online shopping, to building a station in space. They actually changed the world. They turned everything from ancient to modern. This world owes them a lot.

Here are some lessons we all can learn from these players of the entrepreneurship world -



## 1. Learn Something Everyday



And go to bed a little wiser than you get up.



While Warren Buffet was a leaning machine, Bill Gates read a lot of books. It is fascinating that he has given himself a treat in the form of 2-weeks’ vacation every year in his entire career, only for reading.



If you’re not-so-smart person but are always excited and hungry to learn something, you have a very bright future.



All of these leaders are voracious learners, their child-like curiosity is amazing. They are very active to learn new things, anything at all.



It doesn’t matter what you are learning about, what matters is that you are learning and getting a little wiser than you were yesterday.

## 2. Follow Your Dreams



>“It is important to follow your dreams and heart. Do something that excites you.”   Sundar Pichai



It’s like ‘getting the kick’. Some people try different things just to find their ‘kick’, the work which excites them most.



When you work on something that excites you, time flies away, you would wonder where did it go. It was only a few minutes ago since you started working and it’s already evening.



Until you find something like this. Don’t stop pursuing and don’t settle with anything.



“The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.” This is a precious lesson we can learn from Steve Jobs.



Either do what you love or love what you do, these are the only ways when one can do great things.

## 3. Money Doesn’t Define Your Achievements



Steve Jobs once said in an interview that -



>“Being the richest man in the cemetery doesn’t matter to me. Going to bed at night saying we’ve done something wonderful, that’s what matters to me.”



Amazing things are done by those who focus upon the impact their efforts will have on the society and not upon the amount of money they’ll make from it.



The world is not devoid of rich people, but not all of them made a difference to society, let alone the world.



If your goal is money, you can achieve money, but it takes more than that to make a difference.



Your aim should be far greater than ‘making money’.



Elon Musk went to every length in the path to pursue his passion, to make his dreams come true, not for his personal gain, but to do something big to benefit the society and the whole world.

## 4. Don’t Lose Your Values



>“Success is a lousy teacher. It seduces smart people into thinking they can’t lose.” -Bill Gates



And when one starts thinking that he can’t lose, at that very instant he loses everything he achieved.



Don’t let your mind drown your values and inner voice. They will not make you more successful, but they would, most certainly, make your achievements worthwhile.



Don’t let your success make you selfish and arrogant, but wise, humble, and calm.


## 5. Dream Big, Start Small


Always dream big.



But to pursue that dream, start with setting small and short-term goals to reach a certain level.



Once you have reached the first step towards your dream, its time to make a strategy for the second step. And again, set many small goals to achieve the big one. And so on.



In order to start a big business, one has to start with a start-up. Your business idea might be marvelous, but you cannot establish a big empire directly. You will have to start with your laptop only. Then, with a team of 3-members and so on.



While Zuckerberg started from zero-level and ended up building a huge global empire, Musk also set a great example of thinking big. He pursued the path of a whole new field of aerospace and automobiles with the dream of making something valuable for the world.

## 6. Be Ready to Take Risks



>“In a world that’s changing really quickly, the only strategy where you’re guaranteed to fail is not taking any risk and not changing anything.” -Mark Zuckerberg



Everything has a price. Success doesn’t come for free. It takes years of hard work, sacrifices, huge risks, determination to stand during difficult times, and tenacity to start over again.



To win, sometimes you have to play a gamble and take a big risk. One cannot always be sure about winning. That’s how success works, either you would win or lose. There is no in-between.



However, the biggest risk is not taking any risk.



And not only in business but in life as well, we sometimes have to sacrifice something in order to achieve another.



## 7. Failures Teach Us a Lot, Listen!!



>“Wear your failure as a badge of honor. You might fail a few times, but that’s Ok. you end up doing something worthwhile which you learn a great deal from.”- Sundar Pichai



Our failures prepare us to achieve a greater aim. They tell us ‘yeah bro, you’re doing great, but you need to change your strategy’.



When you struck hard with failure, some people stay back and never again try to stand, but some stubborn and determined people attack back and try again and again until they win. Only the latter kind of people make it to their destination.



In this 21st century, everything moves at a rapid pace that everyone has to move faster, otherwise they will be left behind. And in moving faster, it is very likely to break things and make mistakes.



In fact, it is necessary to make mistakes. If you are not making mistakes, you are not learning enough.

## Last Words:



For all those young entrepreneurs who aim for the greater good, these lessons would help you make your way forward. In fact, these are life lessons for everyone that will guide you in your difficult times.


Send us your response to our blog. Reach out to us to send your suggestions and requests.


Thanks for reading our blog!!

7 Lessons to Learn from the World’s Top Entrepreneurs

medium_lessons-to-learn-from-the-worlds-top-entrepreneurs_feature.jpg

small_lessons-to-learn-from-the-worlds-top-entrepreneurs_feature.jpg

thumbnail_lessons-to-learn-from-the-worlds-top-entrepreneurs_feature.jpg

Our work culture revolves around a few pre-defined factors like discipline, productivity, output, decorum, efficiency, etc.



We often hear that the office is all about working strictly for 8 to 10 hours a day. But, for how many hours do we actually work??



There is always a little room for walking-in talk, coffee-room talk, whispered conversations, going-to-the-break chat, a few waves of laughter, and giggles.



Most employees find it helpful in a way to throw away their stress and when they return, they work more efficiently.



In a survey, it was found that a common employee remains productive for a maximum of 5 to 6 hours, and the rest of the time dissolves somewhere between these little distractions.

## Is it bad?


Not at all.



However, it depends upon perceptions, which vary from person to person and company to company.



While traditional thinking can consider it a bad thing, having its employees decreasing their working hours and thus, productivity. But modern companies agree with this approach that having a little fun at the workplace can have a huge positive impact on one’s productivity.



A little distraction can do a lot better.


Why so?? Let’s check out here -



## Daily Dose of Inspiration!


![small-distractions-can-boost-efficiency_1.jpg](https://backend.habilelabs.io/uploads/small_distractions_can_boost_efficiency_1_f1e0021b77.jpg)


Inspiration is the key to all good work. One always finds inspiration from various sources or things in his surroundings like nature, books, and people.



But when you work in a traditional workspace, you seldom get the chance to admire the beauty of nature, there are no books or magazines as well, all that remains is ‘People’.



So, you need to find your daily dose of inspiration from your colleagues and having coffee together, laughing, and chatting with them is the inspiration that can greatly enhance your mood and distract your mind from something that’s bothering you.



When we’re distracting ourselves through conversing or joking around, it is like filling a void before returning to the work and once that void is filled your only focus remains on your work.

## Less but Productive Hours⌚


![small-distractions-can-boost-efficiency_2.jpg](https://backend.habilelabs.io/uploads/small_distractions_can_boost_efficiency_2_4afe8c4f9a.jpg)


**_“It is not enough to be busy, so are the ants. The question is: What are we busy about?”

– Henry David Thoreau_**



Being busy does not necessarily mean being productive. Some people act as busy to be acknowledged by his superiors for promotion.



What do you prefer, being working the whole day and get the job done or working for 5 hours effectively and get the job done?? In any case, the job is getting done ultimately.



Another important thing to be highlighted here is when a person is actually busy, he/she avoids all kinds of distractions and focuses only on the work.



## Fun Leads to Encouragement!


![small-distractions-can-boost-efficiency_3.jpg](https://backend.habilelabs.io/uploads/small_distractions_can_boost_efficiency_3_3ca5d0fce6.jpg)



We are always being said that ‘office is not the place for fun. If you want to have fun, then go home’.



A little fun, talk, or laughter are considered unprofessional behavior in many companies.



Let’s take an example from my experience.



Well, not exactly from my own experience, but some of my friends have told me stories about their workplaces.



One of them said- “The environment at my office is deadly. Like we are in the presence of Professor Snape (I guess, you know him!!) in a classroom, yeah, a complete pin-drop silence.”



Another one said- “I cannot forget this dreadful feeling that whenever any one of us started having a conversation even in whispers, the whole office used to gawk at us like we were caught in some criminal activity.”



This seems to be a little robotic behavior rather than normal human nature.



But, do you ever wonder what an employee would do in such an environment? Being fed up for so long, he would curse such a life and job out of frustration and will probably ‘quit’.



There is another better practical approach -



If you want your employees to stay longer, then give them something worth staying for. They get ‘work’ everywhere but an environment which they love will be the last thing they would want to leave.


## Better Teamwork and Collaboration!


![small-distractions-can-boost-efficiency_4.jpg](https://backend.habilelabs.io/uploads/small_distractions_can_boost_efficiency_4_2b84069515.jpg)


Collaboration is a necessity for every organization. A friendly and relaxed environment leads to better communication among employees which further enhances teamwork.



While a junior employee might hesitate before asking something to a senior employee in a traditional workplace, you’ll see more openness in this relaxed atmosphere. This increases friendliness among the team members.



It does not imply that there is no respect for senior designations, it simply means that there is no shyness from reaching out to your superiors and having a clear conversation which in turn builds trust between both sides.



## Happy Employees, Happy Workplace 😀!


![small-distractions-can-boost-efficiency_5.jpg](https://backend.habilelabs.io/uploads/small_distractions_can_boost_efficiency_5_4a62a38b9c.jpg)


>According to a survey conducted by Andrew Oswald at the University of Warwick in October 2015, a happier individual is 12% to 20% more productive than an average control group.



When you’re in a happy mood, it reflects in your work.



>It is said that ‘the best work is when you enjoy it’. This way you don’t have to do the typical ‘job’, you’re just enjoying yourself.



This lightness will motivate everyone at the workplace and make it ‘a healthy environment’ for work as well as health.



Since everyone is happy, you will see that people are not rushing to go home, instead stay longer than usual. It’s not necessarily about having fun, but a relaxed and easy-to-go frame of mind that we find admirable.



This relaxed atmosphere will lead to greater productivity. It creates a learning environment in which people are more willing to learn new things. You’ll see that those silent-ones, who usually kept their distance, are now opening up and sharing their ideas.

## Final Words:




Youngsters always lookout for something to invest their potential along with having fun. This way they do their best.



Let me ask you this question, what type of workplace would you prefer?? One where people are working with happy and smiling faces or the one where people are sinking into their laptops, staring at the screen with disgruntled and sad faces?



Thank You for reading!

How small distractions can actually boost your efficiency at the workplace

medium_small-distractions-can-boost-efficiency_feature.jpg

small_small-distractions-can-boost-efficiency_feature.jpg

thumbnail_small-distractions-can-boost-efficiency_feature.jpg

How small distractions can actually boost your efficiency at the workplace?

Now that you are reading this blog, we can assume that you’re most likely familiar with the term ‘webpack’. Right?



Well, it’s been almost a decade now, since the concept of ‘Module Bundling’ has been around. The first-ever bundler, i.e. RequireJS popped up in the year 2009 and then a few more names were added in the list but the one that caught the most attention was ‘Webpack’.

Here in this blog, we’ll discuss and understand its basic concepts so that you become confident enough to give it a try-



## What is Webpack?



Webpack is a static module bundler for JavaScript applications (both ESM & CommonJS) which bundles multiple resources and files, not only the script but also assets like images and styles, into a single bundle.



It is a JavaScript library, built and designed by Tobias Koppers, that runs only on NodeJS version >=8.x.



>“Webpack provides a powerful and rich API for customization that allows one to use webpack for any stack while staying non-opinionated about your development, testing, and production workflows.”



While processing your applications, it builds a dependency graph that maps all the modules and libraries you need for the project and generates a bundle of them.



#### Key features & functionalities -



- Rich plugin interface
- Multiple caching levels
- Code splitting
- Incredibly fast on incremental compilations
- Browser compatibility
- Supports most of the existing libraries
- Out-of-box support for ES2015+, CommonJS and AMD modules
- Reduces the bundle size
- Reduction in runtime size
- Highly modular plugin system
- Static code analysis
- Cache friendly
- Tree Shaking (Dead code elimination)
- Hot module replacement


![webpack_1.jpg](https://backend.habilelabs.io/uploads/webpack_1_705a5bcd7f.jpg)


## How it works?



When webpack processes your applications, it creates a dependency graph that contains all the necessary modules needed in the application and then, packs them together in a few small bundles (often one!) to be loaded by the browser.



Simple enough, isn’t it??



>“The ultimate goal of webpack is to unify all different sources and module types in a way that’s possible to import everything in your JavaScript code, and finally produce a shippable output.”

Before moving further, you need to understand some of its core concepts, i.e.


### [Entry:](https://webpack.js.org/concepts/entry-points/)


Every Webpack setup contains one or more entry points that decide which module to be used by webpack to start building the internal dependency graph. Webpack figures out the other modules that depend upon the entry point whether directly or indirectly.



By default, the value of entry point is _./src/index.js_, but it can be changed to any file of your choosing, for example -


```
module.exports = {
entry: './path/to/my/entry/file.js'
};
```

### [Output:](https://webpack.js.org/concepts/output/)


As the webpack creates bundle files, now the question is where to put these bundles. These created bundles are written on disk and named at the output point.



The main output file is written as _./dist/main.js_ and other generated files can be added to the _./dist_ directory. The location of output is same as that of the entry point.



You can also specify an _output.filename_ in your configuration to use for the output file, as given here-


```
const path = require('path');
module.exports = {
entry: './path/entry/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'webpack_bundle.js'
}
};
```

In this example, we have used the _output.path_ and _output.filename_ to tell webpack the bundle name and the location we want it to be put at. So, webpack emits the final bundle at _dist/webpack_bundle.js_.



### [Loaders:](https://webpack.js.org/concepts/loaders/)



Webpack can only process JSON and JavaScript files so, you’ll need a way to import other types of files. That’s when ‘Loaders’ play their role.



It gives webpack the ability to import _.css_, _.svg_ and other files and process them- which starts with downloading _loaders_. For example, to import _.css_ and .svg files, we’ll install _css-loader_ and _svg-inline-loader_ respectively -


```
npm install css-loader --save-dev
npm install svg-inline-loader --save-dev
```

Now, we will add them to our webpack configuration -


```
// webpack.config.js
const path = require('path');
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: 'css-loader' }
]
}
}
```

#### Loaders, basically, have two properties in the configuration, that are -



- **Test:** The test property determines which file(s) should be transformed.
- **Use:** The use property specifies which loader will be used for that particular file.



Not only loaders allow to import different file types but also do a lot of other things such as running transformations on the code. These transformations are made in the individual files before they turned into bundles.


### Plugins:


Plugins are a very important part of the webpack ecosystem. While loaders transform certain module types, plugins handle other tasks that loaders cannot, like asset management, bundle optimization, and injection of environment variables.



A webpack plugin is a JavaScript object that works on an apply method, which, when called by the compiler, gives access to the entire compilation lifecycle. Unlike loaders, plugins perform their tasks after the generation of bundles.



_“You can consider plugins as a more free, powerful, and less-restrictive version of loaders.”_

#### Let’s take an example of HtmlWebpackPlugin -



As we know that webpack is known for its ability to generate a single bundle out of multiple individual files that we can further use inside the main index.html page.



Here, HtmlWebpackPlugin generates an index.html page, place it inside the directory where the bundle was put and references the newly generated bundle by including a <script> tag automatically.



We can install it from npm, as given under -


```
npm install html-webpack-plugin --save-dev
```

Now, we create a plugins array in the configuration to use the plugin -


```
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
```

This was just one example, webpack provides many other plugins for different purposes.

### Mode:


There are basically three mode-configurations namely, _development_, _production_ or _none_. These modes enable the optimization options respective to each mode. The details are given in the below image-


If not mentioned specifically then it takes _production_ as default value-


```
module.exports = {
mode: 'production'
};
```

![webpack_2.jpg](https://backend.habilelabs.io/uploads/webpack_2_8bd5b4fcf9.jpg)



In short, the whole process starts with webpack grabbing the entry point at ./app/index.js to create the dependency graph. It transforms the code as mentioned in the loader and adds it to the bundle. The final bundle is relocated at the output point, i.e. dist/index_bundle.js.


## Why Webpack?



Before webpack, running JavaScript on web browsers was an issue. No, it wasn’t impossible, just difficult. Either you could create a script for each functionality, which was hard to scale, or you could choose to use a big .js file to store the entire code, which was a big problem in terms of size, readability, and management. Webpack solved this problem by providing IIFEs for large projects.



- **Immediately invoked function expressions (IIFE’s):** With IIFE, you can concatenate your project files together safely, no matter how big they are.
- **Automatic Dependency Collection:** Unlike Task Runners, you don’t need to declare all dependencies manually with webpack. It works automatically and builds a dependency graph according to the application-needs of modules and what is being imported in the script.
- **ECMAScript Modules (ESM):** As modules are becoming more and more like an official feature in ESM, bundling being more popular among developers and faster than the incomplete-bowser-support feature, preferred for these module implementations.
- **[Code Splitting:](https://webpack.js.org/guides/code-splitting/)** It is yet another compelling feature of webpack that reduces the load timing. It enables you to split up your code into multiple small bundles, called ‘chunks’, that can be loaded either on-demand or parallelly.



Though CommonJS is a good solution for NodeJS projects, there are many problems with it, such as- no browser support, slow loading, no live bindings, synchronous module resolution, and no module support, thus came into role were bundlers like webpack.



In order to get started with webpack, you would need to install two packages, i.e. webpack, webpack dev server and webpack CLI -


```
npm install webpack webpack-dev-server webpack-cli --save-dev
```

## Wrap Up:



It’s like a boon to have something like webpack which not only takes care of application performance and load times but also keeps adding or improving new features to deliver a wonderful experience to its users and their projects.



After reading about bundling, its worth to know how to achieve the same high performance with unbundled development in another blog.



Happy reading📖!!

Introduction to Webpack — Why do we need it?

medium_webpack_feature.jpg

small_webpack_feature.jpg

thumbnail_webpack_feature.jpg

Mapping and bundling of the required modules through dependency graph!

**As** a developer, you know that the deployment of code is a tedious and unpleasant job. You would give it days to deploy in a perfect manner only to turn out that you messed up again. But then, we’re humans not computers and we make mistakes.



So why not use automation, instead, for faster and safer code deployment?



Infrastructure as Code (IAC) is one such approach that makes it possible to automate the deployment process. The idea behind this concept is to define, manage, and provision your infrastructure by writing it in script form.



It lets the computers do the automation and the developers do the coding, each one doing what they are best at and making the deployment process faster, easier, and more productive.



There are many tools for IaC available out there like Ansible, CloudFormation, Puppet, and [TerraForm](https://www.terraform.io/docs/).



Each one of them is open-source, manages the infrastructure, and works with various cloud providers (except for CloudFormation). All are well documented and equally feature-rich.

However, we’re going to learn basics about Terraform like what it is, how it works, and why you should choose it over the other IaC tools-



## Overview About Terraform



Created by HashiCrop, Terraform is an open-source, third-party IAC (Infrastructure as Code) automation tool for building and managing infrastructure in files in a safe and efficient manner.



It uses HashiCrop Configuration Language (HCL) to define the infrastructure in high-level configuration syntax. Also, it renders an execution plan which lets you see the changes before you apply them.



>“Terraform does not abstract the underlying providers, instead allowing users to leverage the differentiating features with a consistent workflow.”



With multi-cloud automated provisioning and enhanced workflow, it secures the infrastructure with encrypted variables thus, reducing risks and increasing productivity.


![terraform_1.jpg](https://backend.habilelabs.io/uploads/terraform_1_5c0f4e716d.jpg)


While all the IAC tools do the same job, the slight differences between their properties make it even more difficult to choose any one of them. However, considering several points in favor of Terraform, we can help you make this choice easy for you.

#### Lets’ check out some of the key features of Terraform -



- IaC (Infrastructure as Code) for productive results
- Built-in functions and string interpolations
- Single workflow over multiple providers
- Execution plan to see changes before applying
- Declarative configuration files
- Reuse configurations
- Platform agonistic (liberty to use any Cloud provider services)
- Resource graph
- Workspaces for organizing infrastructure
- In-built state management
- 160+ providers



## How Terraform Works?



Let’s see how Terraform works -


![terraform_2.jpg](https://backend.habilelabs.io/uploads/terraform_2_ff8633e6e8.jpg)


- **Write Infrastructure in Code:** Users define the infrastructure in code (configuration files) in a simple, human-readable HashiCrop Configuration Language (HCL). Either they write them or borrow from the public module registry.
- **Managing Configuration Files:** Then, the user stores these configuration files in the version control system (VCS) repository and connect it to the Terraform workspaces.
- **Reading infrastructure configuration files:** [Terraform CLI](https://www.terraform.io/docs/cli-index.html) reads these files and determines an execution plan for changes which is later applied and provisioned.
- **Automatic Provisioning:** While making any changes in the VCS, the Terraform Cloud will execute the plan in the workspace connected to it.
- **Plan Review:** The Terraform UI reviews the plan for final accuracy and then it is applied to provision the infrastructure.

## Terraform Cloud



>“Terraform Cloud is a free to use SaaS application that provides the best workflow for writing and building infrastructure as code with Terraform. It performs Terraform runs to provision infrastructure, either on-demand or in response to various events.”



It offers the best workflow that is responsible for remote terraform execution, version control integration, cross-workspace data sharing, remote-state management, and command-line integration.



With [Terraform Cloud](https://www.terraform.io/docs/cloud/index.html) you can collaborate and work together as a team, which means if you make any changes your team will be able to see them. It has been designed to work with your VCS (Version Control System) provider directly.



#### Further [features of the Terraform cloud](https://www.terraform.io/docs/cloud/overview.html) are -



- Easy access to shared state and secret data
- Access controls for approving changes to infrastructure
- Private registry for sharing Terraform modules
- Policy controls for governing the contents of Terraform configurations
- Share infrastructure code



In order to get started with Terraform and connect with your team, you would need to [create a Terraform cloud account](https://app.terraform.io/signup/account).

## Terraform or CloudFormation?



There are a few reasons (and good ones!) developers prefer to Terraform over [CloudFormation](https://aws.amazon.com/cloudformation/). Top of them is the specific limitation of CloudFormation to work only over AWS which rules out the options of using any other Cloud providers.



As AWS itself developed CloudFormation, it explains this limitation. But it also limits the developer to the solutions and bug fixes offered by AWS only. Also, CloudFormation code is generally redundant which makes it more vulnerable to errors and difficult to manage large-scale infrastructure.



On the other hand, Terraform is the right tool to manage infrastructure at a grand-scale. It gives you flexibility over structuring your projects at your ease. The inbuilt state management feature enables the developers to keep track of the infrastructure.



Though CloudFormation supports nested stack arrangement, it takes a lot of effort to store the whole code in a giant-sized file in a repository, whereas with Terraform you can split and save them as you want.



You don’t have to presume that Terraform is all good and wonderful, it has its own limitations like limited reusability & module support, but overall, it is worth learning and making a move with it.



For further details about Terraform, refer [here](https://github.com/hashicorp/terraform).


This blog was a small effort to give brief insights about Terraform and how would it be a good choice of tool for your project requirements. I hope you find it satisfactory.

See you the next week with something new, till then- Happy Reading!!

medium_terraform_feature.jpg

small_terraform_feature.jpg

thumbnail_terraform_feature.jpg

A shift to multi-cloud infrastructure!

Beginner’s Short Guide to Terraform

**T**he developer’s world, today, is quite rich with the diverse and colorful collection of web frameworks. And the list is ever-growing!



Frameworks like Angular, React, Node, Vue, Ember, Preact, Mithril, and so, so many more are, as wonderful as one can hope for. However, some are less better than others and some are just ‘the best’.



Recently, a new JavaScript framework has come into the light, holding the potential to give a tough competition to these awesome frameworks- Svelte.



Though it’s been a few years since Svelte came around, originally in 2016, it is still considered as “new”. But the big difference was seen when the latest version- Svelte 3, was released earlier this year. It seems to have caught the attention of the developer community.

Let’s check out what has made the folk so talkative about this new approach of building reactive user-interfaces -



## What is Svelte??


This is the question rather hard to answer. Even the creator of this framework, Rich Harris, seemed to be skeptical about its nature- what Svelte truly is? At first, he made us believe that it was a UI Framework, unlike other frameworks. But then he says that he didn’t realize what Svelte until very recently when its 3rd version was released.



Well, let’s hear out what exactly he has to say -



>“I had you believe that Svelte was a UI framework — unlike React and Vue, etc. because it shifts work out of the client and into the compiler, but a framework nonetheless. But with Svelte 3 around the corner, it’s time to come clean about what Svelte really is. Svelte is a LANGUAGE. Specifically, it is an attempt to answer this question: what would it look like if we had a language for describing reactive user interfaces?”



In simple words, Svelte is a component-based JavaScript reactive user-interface framework, implemented in TypeScript.



It is an entirely different framework that holds that power to surprise you, which is a big statement, I guess, after having used React, Vue, Angular, and other wonderful frameworks for so long.


## Svelte - A framework with NO framework??



What does that even mean?



Frameworks move the complexity of the code around, discard all the finicky implementation details, and make the code easily manageable- by using virtual DOM diffing technique.



What makes the React.js framework so wildly powerful is that it helps in managing the complexity of your thoughts and concepts, not the code.



Svelte, on the contrary, compiles the components into ideal JavaScript module during build time that you write using CSS, HTML, and JavaScript. That’s why it is also called the ‘framework without framework’.



This makes Svelte fast. Really fast, faster than React.js, faster than Vue.js, Angular.js- as much fast as Vanilla.js itself. It gives close competition to Inerno.js which is, so far, the fastest UI framework in the whole world.



There are some limitations as well, though. We’ll discuss them in the later sections of the blog.

## Journey of Svelte — From Version1 to Version3



Svelte first set foot in the world of developers in the year 2016 with its very first version. Though v1 was just an approach to test a hypothesis that- a purpose-built compiler could generate rock-solid code that delivered a great user experience.



The v2 was another step with upgraded features and stirred up the things a little bit but didn’t receive much acknowledgment. However, the release of version 3 received a significant reaction.



Team Svelte worked really hard after version 2 was out to make something grand out of version 3. And it has. With its outstanding performance, ease of use, small bundles, compiling, cybernetically enhanced apps, etc. Svelte-3 is an upgraded and intelligent extension.



## React vs Svelte



At present, React.js is the most popular JavaScript Framework and for many good reasons, indeed. But we are living in the technical era which requires us to move on, get better and better.



React introduced the concept ‘virtual DOM’ and this was the part that made React this much attractive and popular in the first place. But this ‘virtual DOM diffing’ couldn’t make React as much reactive as Svelte.



Hang on! This means that the ‘virtual DOM’ isn’t as fast as is claimed to be, is it?? Well, it is not the case. It is usually faster when compared with less efficient frameworks.



Svelte, being a compiler, compiles the components itself rather than relying upon ‘virtual DOM’ to update the browser DOM. This course improves the performance of the code and makes it fully ‘reactive’.

## What Makes SvelteJS Different?



The regular frameworks are used to write declarative state-driven code, they do extra hard-work in using virtual DOM diffing technique in order to change the declarative code into DOM operations. It may waste a lot of time and money.



It was assumed that the ‘virtual DOM’ makes a framework work faster, which makes it debatable how Svelte manages to be faster without using it.



Svelte is less a framework and more a tool that compiles the code components at the _build_ time instead of _runtime_ and lets you load a single bundle.js file to render your app. Which means, no virtual DOM, no framework to load at runtime, and faster speed.



Svelte creates applications with smaller bundle sizes compared to other web frameworks.



The words of Jeff Delaney, creator of AngularFirebase.com, about SvelteJS are quoted as follows-



>“I can confidently say that Svelte has been the easiest JavaScript component library to learn and start putting to use in a productive way.”

## Pros & Cons



Further, we’re going to discuss some of the pros and cons of Svelte-


### Pros -



- More Work in Less Code
- No Virtual DOM
- Built-In Style Encapsulation
- Declarative Transitions
- Code compilation at build-time
- Faster speed and great performance
- CSS-in-JS Library
- Reactive Components
- Effective Code Splitting
- Small application bundle size
- Typescript-support (Added earlier in the new release)


Though Svelte has rather impeccable features, it lacks various important functionalities. It is not completely ready for production, not yet. Let’s check out its cons-



### Cons -



- Slow at removing elements
- No DevTools to debug applications post-compilation
- Incomplete third-party component libraries


Team Svelte is working on these cons and we can expect another big release soon, removing these flaws and uplifting the [features](https://www.npmjs.com/package/svelte)



## Summary:


No matter what type of software you intend to build, Svelte will oblige you with its extraordinary and out-of-box functionalities. It’s a lot faster than the other frameworks, or in better terms ‘the fastest existing JS framework’.



However, it’s nowhere near finished, there is a long way for Svelte to go. While React and other frameworks are on the peak of popularity, Svelte has just begun. Of course, it cannot surpass these frameworks but can surely offer an _alternative_ to them in the time to come.



Reach out to [HabileLabs team](https://www.habilelabs.io/about/), if you are wondering which organization to connect to in order to get your project completed on the best possible terms in the whole market.



Thanks for giving your invaluable time to this blog!!

Svelte- A Magically Fast JavaScript Framework

medium_svelte_feature.jpg

small_svelte_feature.jpg

thumbnail_svelte_feature.jpg

A framework with NO framework!!

**W**ith so many outstanding frameworks available out there like Next.js, Express.js, Koa, Hapi, or Fastify, why would you go for something new and different? Or the better question- why would you choose Nest.js, over these widely-used, well-known, and ‘usual’ frameworks, you’re quite used to.



Well, I know just the right answer to this question.



Perhaps, you want the development process to complete quickly and efficiently by using the boilerplates and controllers. Maybe you want to build scalable and easy-to-maintain apps. Or, you just want to choose a convenient and effective framework to work with.



In either way, it turns out that Nest.js might fulfill all these needs.

In this blog, we’ll get to know the beginner’s basics about NestJS and its properties that separate it from the pool of other Node.js frameworks-



## What is Nest.js?



>“A progressive Node.js framework for building efficient, reliable, and scalable server-side applications.”



NestJS is an open-source Node.js backend framework, based on Express.js, that takes advantage of both TypeScript and JavaScript.



It was first designed and launched by Kamil Myśliwiec for the development of server-side applications. At present, NestJS has around 23k stars on GitHub and the average rate of weekly npm download is about 180k.



NestJS is compatible with progressive JavaScript and built with TypeScript and combines elements of these three concepts-



- OOP (Object Oriented Programming)
- FP (Functional Programming)
- FRP (Functional Reactive Programming).


Some magnificent properties of Nest are-



- **Extensibility:** Flexibility to use other libraries
- **Versatility:** Adaptive ecosystem that is fully-fledged for all types of server-side applications.
- **Progressiveness:** Brings JavaScript features and design patterns into the Node community.



Nest.js is very similar to Angular.js in many ways, it will not seem strange for those who’ve worked on Angular before. Like angular, NestJS comes with its own dependency injection container, a utility that seems forgotten in other frameworks. The architecture and syntax also match with that of Angular.

## Building Blocks of Nest.js



Given below are the building blocks of Nest applications, there are more of them but these 3 are the most important ones. Let’s get a quick look at them-



### [Controllers](https://docs.nestjs.com/controllers)



“Controllers are responsible for handling incoming requests and returning responses to the client.”



It receives specific HTTP requests that come into your application and the routing mechanism controls which controller will receive which request. It, then, formulates a proper response to go out.



- A basic collector is created with the use of classes and decorators.
- Each controller has different routes to perform different operations.


![why-choose-nest-js_1.jpg](https://backend.habilelabs.io/uploads/why_choose_nest_js_1_a1c4c73fde.jpg)


### [Providers](https://docs.nestjs.com/providers)


Providers are but a fundamental concept. It can be a repository, service, or helper.



- A provider is a plain JavaScript class with an @Injectable() decorator that can inject dependencies.
- These injections have a lifetime (scope), i.e. when the application shuts down, so does its providers.



The purpose behind designing these providers was to _“abstract all forms of complexity and logic to a separate class”_.


![why-choose-nest-js_2.jpg](https://backend.habilelabs.io/uploads/why_choose_nest_js_2_921587e558.jpg)

### [Modules](https://docs.nestjs.com/modules)



A module is a class with a **@Module()** decorator that organizes the application structure components.



Each application has a root module that is used to build the application graph that further resolves the dependencies and relationships between provider and module.



This decorator sends metadata to Nest.js required to determine which components, controllers, or other resources will be used in the application code and group them together into a single set. Each module encapsulates a closely related set of capabilities.



![why-choose-nest-js_3.jpg](https://backend.habilelabs.io/uploads/why_choose_nest_js_3_14a9c29415.jpg)


## Why Nest.js?



There are many reasons that make Nest.js preferable over other NodeJS frameworks, some of them are -



- Compatibility with TypeScript
- Support Monorepo
- Made for monoliths and microservices
- DevOps support ready
- Powerful CLI
- Built-in support for microservices & transport layers
- Dependency injection container
- Easy database interaction
- Building GraphQL interfaces easily
- Framework adaptive nature
- Domain-driven development
- Angular based folder structure
- Built-in Exception Filter
- Use of third-party modules
- Built-in inversion of control

We’ll understand some of these features in more than one line, you should have a look here -


### Architecture & CLI that You May Fall in Love With



Through years of updates and upgrades, JavaScript has now become the most popular language for developing frontend and backend web applications in the world of programming (Thanks to Node.js). And is the mainstay of the creation of some amazing frameworks such as Angular and React.



However, it doesn’t help to have a large stack of libraries, superb tools, and helpers, the main problem remains intact, that is- Architecture flexibility.



But, Nest.js with its out-of-box microservice architecture (similar to Angular.js), makes developer’s life a lot easier and happier by enabling them to build scalable, loosely coupled, highly testable, and easily maintainable applications.



If you are having second thoughts about whether or not Nest is for you or not, you should check out the Nest CLI- A Command Line Interface (CLI) is the tool that assists in multiple ways- from helping in initialization and development to maintenance of the Nest applications.



Not only the Nest CLI assist in project scaffolding and building applications for production but also embodies best-practice architectural patterns. Also, it supports monorepo.



You can install the Nest CLI and set up a new project using the following command -


```
$ npm i -g @nestjs/cli
$ nest new project-name
```

### Framework Independence


Under the hood, Nest uses powerful HTTP server frameworks like Express and is also compatible with other frameworks such as Fastify.



Nest makes use of a framework adapter to achieve this framework independence that works as a proxy middleware to carry out some library-specific implementations.



Though Nest uses Express to solve some design issues, Fastify can do the same thing with better results and faster speed. In order to migrate to Fastify from Nest, you just have to choose the built-inFastifyAdapter.



First, you need to install this package -


```
$ npm i --save @nestjs/platform-fastify
```

Now, you can use the FastifyAdapter, as follows -


```
import { NestFactory } from '@nestjs/core';
import {
FastifyAdapter,
NestFastifyApplication,
} from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
```

### Built-in Exception Filters



One of the great features of Nest.js is- it contains a built-in exception layer that handles all those exceptions that were not caught by the application code and sends an appropriate response to the request.



In case of an unrecognized exception (neither HttpException nor its inherited class), this built-in exception layer generates the following response to the request -


```
{
"statusCode": 500,
"message": "Internal server error"
}
```

**Note:** A standard (and most common) set of exceptions are defined by Nest.js, inherited from the base _HttpException_, any other exception will be considered ‘unrecognized’.



![why-choose-nest-js_4.jpg](https://backend.habilelabs.io/uploads/why_choose_nest_js_4_2771a2ae14.jpg)

## Get Started with NestJS



In order to get started with Nest.js, you need to make sure that you’ve got the supported version of Node. Hit node -v to check which version of Node is installed in your system, if it’s not equal to or higher than v10.13.0, update the existing version.



### To set up the project -


```
#With Git (Install the TypeScript starter project)-
$ git clone https://github.com/nestjs/typescript-starter.git project
#Install the JavaScript starter project-
$ git clone https://github.com/nestjs/ javascript-starter.git project
$ cd project
#install dependencies and start the server-
$ npm install
$ npm run start
#Manually create the project with npm (or yarn)-
$ npm i --save @nestjs/core @nestjs/common rxjs reflect-metadata
```

To get more practical information, click [here](https://docs.nestjs.com/). 



I hope this blog will be a help for you. If you found it insightful, you must give Nest.js a fair chance and make a go for it.



Feel free to share your views with us, we’ll be glad to hear from you.



Thanks for reading!!

Insights for the enthused minds!

Want to know more

How we build pillars to achieve heights

Want to join us ?

Let’s fill the gaps with IT