teleren/devto huggingface dataset:
5 Reasons to use Node-js along with React-js
Tags: webdev, javascript, node, computerscience
Published: 2021-05-03 17:21:21

Always been wondering how and why do we use node js along with react js? Well same here but I can list down the very needed five reasons every web developer thinks about before starting their work on building a website. 

P.S: Trying not to make this post boring because React can never be boring that too plus node it is just going to be dope :fire:. So what are we waiting for? Let's get right into it. 

##1) Helps in maintaining high server load
Yeah you heard it right, having node with your react project makes it super easy for the server to maintain server requests as node can handle multiple server requests, on top of that it helps in maintaining the server load balance.

---

##2) Helps in maintaining dynamic website
Dynamic websites are those websites that have to maintain a real-time database, and to manage those kinds of websites "react+node" helps a lot, in short your problem for the front-end plus back-end can be resolved using these two combos for sure. 

---

##3) Helps in creating single page applications easily
Single page applications like Gmail, Facebook can be easily made using node and react. Here react provides a very interactive UI/UX whereas the node provides a very simple back-end model. 

---

##4) Helps in building JSON for your APIs
JSON files stands for JavaScript object notation, it helps in transmitting data between website and a server. APIs are used in programming an application, as a developer you have to talk to the users for certain inputs and also with the program application to give specific output for that input. Now node helps in creating reusable code and this code gets shareable using react.

---

##5) Helps while creating MERN stack applications
The web applications that use mongoDB, express.js, react.js and node.js. Using this we can create applications like e-commerce websites, banking websites and many more. React plus node will help us in building such applications with ease.

---


Ending this post with a reminder to take care of yourselves and keep coding :heart:
Make PowerShell Look like ZSH
Tags: tutorial, customizepowershell, customizeterminal
Published: 2021-05-03 17:12:57



#Customize PowerShell Same as ZSH



##Make it look and feel like zsh from Linux or macOS in Windows 10.



####Step-1 : Install PowerShell latest version from [Here.](https://github.com/PowerShell/powershell/releases)

* Download PowerShell .msi installer based on you Windows 10 architecture.
* Install it. For more details refer Microsoft Documentation [Here.](https://docs.microsoft.com/en-us/powershell/scripting/install/installing-powershell-core-on-windows?view=powershell-7.1)


####Step-2: Install A Font of Your Choice From [Nerd Font.](https://www.nerdfonts.com/) I am using DejaVuSansMono Nerd Font.

* Download and Extract the zip file then select all fonts and right click on them select Install.

* After that search PowerShell in Windows Search Bar and Run as Administrator make sure you are in System32 when PowerShell is Run as Administrator.

* Now right click on PowerShell Icon on top left corner and select properties.

* Now go to Font and find and select the nerd font that you install and apply it.

* Now Close and Restart PowerShell as Administrator.



####Step-3: Now The Important Step. Go to [Oh-My-Posh](https://ohmyposh.dev/docs/pwsh) and Inside PowerShell part of Installation Documentation. Refer Documentation Carefully.

* Run Command As Administrator: (Refer Documentation Installation part [PowerShell](https://ohmyposh.dev/docs/pwsh#installation)

> Install-Module oh-my-posh -Scope AllUsers

* Then Run This Command As Administrator: 

> Import-Module oh-my-posh

* After That Run This Command:

> Get-PoshThemes

* Look from the list which style you like and note down the Theme name. For e.g. I am going with Theme "Nu4a".



####Step-4: Refer This [Microsoft Documentation](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_profiles?view=powershell-7.1) for setting up profile.

* Run This Command As Administrator:

> notepad $PROFILE.AllUsersAllHosts

* Then if you see an option create a file then click create and then paste below command in notepad.

> Set-PoshPrompt -Theme {Theme Name}

> e.g. Set-PoshPrompt -Theme Nu4a

* Then Save it and restart PowerShell. You will see your PowerShell Change Now. Make Sure You apply the Nerd Font otherwise the theme will look weird.

Now Your Power Shell Looks and Feels just like ZSH.

You read the Documentation from Oh My Posh to do much further customization of all types of terminals. Read it [Here](https://ohmyposh.dev/docs/)

Thank For Reading.
Tell Me What Customization were you able to do I would love to know ?
How to implement Dependency Injection in Node.js with Example
Tags: node, injection
Published: 2021-05-03 16:58:25

https://grokonez.com/node-js/implement-dependency-injection-node-js-example

How to implement Dependency Injection in Node.js with Example

Dependency Injection is one form of Inversion of Control technique that supports the Dependency Inversion principle (the last one of SOLID Principles - decoupling software modules). In this tutorial, we're gonna look at way to implement Dependency Injection pattern in Node.js.

<!--more-->
<h2>Dependency Injection Overview</h2>
What is the problem with tightly coupled modules?
We may end up hardwiring multiple modules. It's difficult to change a module later, so we may need to refactor a lot of code.
=> How we can avoid writing highly cohesive and tighly coupled modules?

The Dependency Inversion principle said that:
<div class="jsa-quote">High-level modules should not depend on low-level modules.</div>
So, how we understand this sentence:
- Modules don't connect to each other directly, but using interfaces/references to the modules. High-level module will use low-level module via that interface/reference. We call low-level module "dependency".
- Dependency is instantiated before being passed (or injected) to other modules as parameters.

We can implement Dependency Injection in Node.js by 2 ways:
- <em>Constructor Injection</em>: Dependency is injected to a class via constructor method of the class. This is the common way.
- <em>Setter Injection</em>: Dependency is injected to a class via setter method of the class.

For example, we use <code>config()</code> method as the setter method to inject <code>logger</code> to <code>AnyClass</code>:
<pre><code class="language-javascript">class AnyClass {

    config({ 
        logger 
    }) {
        this.logger = logger;
    }

    doSomething(amount) {
        this.logger.write(...);
        // ...
    }
    // ...
}

module.exports = new AnyClass();
</code></pre>
Then, if we want to use a <code>logger</code>, we initiate it before injecting:
<pre><code class="language-javascript">const AnyThing = require('./AnyClass');
// const logger = require('./logger-console');
const logger = require('./logger-file');
AnyThing.config({
    logger
});</code></pre>
Now we can use <code>AnyThing</code> without caring about <code>logger</code> details. This provides us a loose-coupling, reusable modules with different dependencies (<code>logger-console</code> or <code>logger-file</code>).
<h2>Implement Dependency Injection in Node.js</h2>
<h3>Inject Dependency</h3>
We create a <code>Bank</code> class that has <code>config()</code> method (setter method) with property called <code>logger</code>, <code>logger</code> is like an interface to plug-in any logger module.
<em>Bank.js</em>


https://grokonez.com/node-js/implement-dependency-injection-node-js-example

How to implement Dependency Injection in Node.js with Example
Inject Properties from Properties File using @ConfigurationProperties Annotation
Published: 2021-05-03 16:57:54

https://grokonez.com/spring-framework/inject-properties-from-properties-file-using-configurationproperties-annotation

Inject Properties from Properties File using @ConfigurationProperties Annotation

This tutorial will show you the better way to handle properties using <strong>@ConfigurationProperties</strong> Annotation.

In previous article, we have learned about <a href="https://grokonez.com/spring-framework/spring-core/inject-properties-from-properties-file-using-value-annotation">using @Value annotation</a> to inject properties from properties file. This approach has disadvantage that if we wanna change any property, we have to update all files which referenced it.

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technology</h2>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE (It's OK if you use Eclipse)
<h2>II. Overview</h2>
<h3>1. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2016/10/configproperties-structure1.png" alt="configproperties-structure1" width="694" height="371" class="alignnone size-full wp-image-1565" />

- In the project, we use a separate configuration properties classes annotated with <strong>@ConfigurationProperties</strong>, so property values can be bound to structured objects conveniently.
With this approach, when we wanna find or change the handling properties object, we just notice a separate component class. In this example, it is class <strong>AppicationProperties</strong>.

- For configuration class of the whole application (<strong>AppConfig.java</strong>), we should enable class above by using <strong>@EnableConfigurationProperties</strong> annotation.

- To get environment properties value, we create a Service and inject <strong>AppicationProperties</strong> object and use getter methods easily.
<h3>2. Step to do</h3>
- Create Maven project
- Add Dependencies & Plugins
- Add Properties File
- Create Properties Class
- Create Configuration Class
- Create a Service
- Create MainApplication Class
- Run Application &amp; Enjoy Result
<h2>III. Practice</h2>
<h3>1. Create Maven project</h3>
- Open <strong>Spring Tool Suite</strong>, on <strong>Menu</strong>, choose <strong>File</strong> -&gt; <strong>New </strong>-&gt; <strong>Maven Project</strong>.
- Check <strong>Create a simple project</strong>, choose Workspace Location and click <strong>Next</strong>.
- Fill all fields in Artifact group box, then click <strong>Finish</strong>.
<h3>2. Add Dependencies & Plugins</h3>
Open <strong>pom.xml</strong>, add:

More at:
https://grokonez.com/spring-framework/inject-properties-from-properties-file-using-configurationproperties-annotation

Inject Properties from Properties File using @ConfigurationProperties Annotation
CLI parser for Ink js 
Tags: typescript, beginners, node, opensource
Published: 2021-05-03 16:52:23

I recently stumbled upon [ink](https://github.com/vadimdemedes/ink#getting-started), and really liked it. Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps.

for CLI parsing we can use any libraries out there, but all the libraries accept `string` for the help text. I really wanted a library that would be light and also help render ink components, so as to leverage the beautiful `ink` library. So I am currently working on https://github.com/Souvikns/ink-cli-parser where users can pass ink component is a help string. 

```tsx
import parser from './index';
import React, { FC } from 'react';
import { Text, Newline } from 'ink';

const Help: FC<any> = () => {

    return <>

        <Text backgroundColor="greenBright" bold color="white" > USAGE </Text>
        <Newline />
        <Text>$ cli-command {"<command>"} [options]</Text>
        <Newline />
        <Text backgroundColor="cyanBright" bold color="white" > COMMANDS </Text>
        <Newline />
        <Text><Text color="cyanBright">new</Text> creates a new file</Text>
        <Text><Text color="cyanBright">duplicate</Text> duplicates a existing file</Text>
        <Newline />
        <Text backgroundColor="yellowBright" bold color="black" > OPTIONS </Text>
        <Newline />
        <Text><Text color="yellowBright">--random</Text> prints random data</Text>
        
    </>
}

let cli = parser(Help);

console.log(cli)
// {inputs: [], flags: {h: true}}

```

> Do check it out any thoughts are welcomed.
Database & DBMS!💥💥
Tags: database
Published: 2021-05-03 16:43:33

#Database :

 💥The database sometimes referred to as an electronic database, is an organized collection of logically related data that is stored in an efficient manner so that it can be easily accessed managed 💥, and updated. Let's divide the whole definition into parts and understand it 💥in an easier way:

#Organized Collection:

Data should be arranged in such a way that the user can easily process the data when required. Example: If we have some details about Computer specifications, then we can represent the specification in two ways:

#Unorganized Data: 

Lenovo35000i58, HP55000i34. The computer specifications are provided here like its brand name, price generation, and RAM but they are unorganized and it is not easy to process them. Here, you can't identify the difference between the generation of the computer i.e i5, and its RAM i.e. 8GB. So, we have to organize the data.

#Organized Data:

 Lenovo/35000/i5/8, HP/55000/i3/4. Here, we have made a separation between each specification so that it can be easily distinguished and processed. Here, we can see that the generation and RAM of the system are separated by "/" and this helps us in distinguishing between the two features.


#Logically Related Data

Logically related data means that the data should be relevant in some context. Example: If we are going to make a database for a customer then the database may include customer name, contact number, age, past orders, address, email id, etc. All this information is in the context of the customer. But the information like the number of siblings of the customer is out of context and logically not related to the customer database, though this information is related to the customer, we shouldn't include this data in our database.



###VS


#DBMS - Database Management System

The software which is used to manage the database is called Database Management System(DBMS). It provides us with an interface or a tool, to perform various operations like:



#creating the database
#manipulating the database
#storing and retrieving the data from the database
#deleting data from the database, etc

Thank you:)
April: Forem Twitch Events Roundup 👾
Tags: opensource, meta
Published: 2021-05-03 16:42:35

In April, Nick Taylor and I had the privilege to speak with 3 awesome guests. This is a round up of all the wonderful guests who joined us and a special pair programming episode where Nick taught me how Cypress is set up in Forem. .

## Walkthrough Wednesday with Maggie Appleton
{% youtube QeGDcK1neoU %}
Nick and I chatted with Maggie Appleton about [egghead.io](https://egghead.io/), art, anthropology, [digital gardens](https://github.com/MaggieAppleton/digital-gardeners), and more. 

**Places to follow Maggie:**
http://maggieappleton.com
https://twitter.com/Mappletons

## Pair Programming with Nick and Christina
{% youtube Xm-nCsTObkE %}
Nick and I talked about how Forem is set up with Cypress end-to-end testing. We also showed how to make custom commands in Cypress and why you might want to.

**Some of the links mentioned in the stream:**
[Forem end-to-end docs](https://docs.forem.com/tests/e2e-tests/)
[Cypress documentation](https://docs.cypress.io/guides/overview/why-cypress)
[Making your UI tests resilient to change by Kent C. Dodds](https://kentcdodds.com/blog/
making-your-ui-tests-resilient-to-change)
[Forem’s use of Cypress in GitHub](https://github.com/forem/forem/tree/master/cypress)
[Cypress Rails](https://github.com/testdouble/cypress-rails)
[Test Automation University](https://testautomationu.applitools.com/)

## Walkthrough Wednesday with Jason Lengstorf
{% youtube dXr0iJE10tQ %}
We were joined by Jason Lengstorf, host of [Learn with Jason](https://www.learnwithjason.dev/) and VP of Developer Experience at [Netlify](https://www.netlify.com/). 

We talked [Jamstack](https://www.netlify.com/jamstack/), serverless, and Nick and Jason used serverless functions on Netlify to quickly set up an API to grab DEV posts with the [DEV API](https://docs.forem.com/api/).

**Where to follow Jason:**
https://www.jason.af/
https://twitter.com/jlengstorf

##  Pair Programming with Jhey
{% youtube AqTP9SX4nAU %}
We were joined once again by Jhey! This time we tackled creating an overlay(or scene) and animation for the Twitch Channel. Check out the Sloan the sloth animation we created with [ComfyJS](https://github.com/instafluff/ComfyJS) and [GreenSock](https://greensock.com/). 

**Where to follow Jhey:** 
https://jhey.dev/links/

Thanks to all our viewers who joined the streams and chatted with us this month! 

Be sure to follow the [ThePracticalDev Twitch](https://www.twitch.tv/thepracticaldev) channel to check out all the great guests we have joining us every Wednesday this month. 


**Our May guests currently include:**
- [Jerome Hardaway](https://twitter.com/JeromeHardaway), developer at Microsoft and founder of [Vets Who Code](https://twitter.com/vetswhocode)
- [Aisha Blake](https://twitter.com/AishaBlake) and [Pachi Carlson](https://twitter.com/pachicodes), Developer Relations Engineers at New Relic and [the Relicans](https://www.therelicans.com/). 
- [Meg Gutshall](https://twitter.com/meg_gutshall), Software engineer. Always smiling. Spanish speaker. Book junkie.
Stop struggling with git, finally!
Tags: beginners, 100daysofcode, git, programming
Published: 2021-05-03 16:41:32

Maybe you are new to coding and want to start your #100DaysOfCode challenge, or you are an experienced software developer and your biggest secret is, that git can be frightening to you. **WE GOT YOU!**

There's a full [learning path](https://docs.microsoft.com/learn/paths/intro-to-vc-git/?WT.mc_id=java-10007-sakriema) that will guide you through git at your pace, for free.

The [MS Learn Path](https://aka.ms/az-learn) consists of three modules.

1. The first module is an [introduction to version control and git](https://docs.microsoft.com/learn/modules/intro-to-git/?WT.mc_id=java-10007-sakriema) in particular. It's setting the base for this learning path by ensuring the local execution and usage of git commands. You'll be guided through commands and all the basics of git. It's a *learning by doing* exercise.
![Intro to git module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1vxho48i0z0ytar6aq1.png)

2. In the [second module, **Collaborate with Git**,](https://docs.microsoft.com/learn/modules/collaborate-with-git/?WT.mc_id=java-10007-sakriema) you'll learn how git helps you to better work together. First, we configure our access to a git repository, then you'll create a pull request by using a fork. All within the command-line tool of your choice!
![Collaborate with Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9hid6benkho0t8n6kxp.png)

3. The [third module, **Edit code through branching and merging in Git**,](https://docs.microsoft.com/learn/modules/branch-merge-git/?WT.mc_id=java-10007-sakriema) teaches you all you need to know about branches and merges.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jg2w5vuwt7nmgr5ezzk.png)

After you finish this [learning path](https://docs.microsoft.com/learn/modules/intro-to-git/?WT.mc_id=java-10007-sakriema), you'll receive a batch you can share. But more importantly, you can easily start working together, and don't forget to add a new skill to your CV! 😉

Did you finish this learning experience? Please share your batch in the comments! I am also interested in your feedback.

Finally, do you know other great resources to learn git for free? Please share them in the comments as well or join the discussions on Twitter. 💜

{% twitter 1388080769898356743 %}
Using React to Design a Minimalistic Link with an Icon
Tags: react, typescript, ux, tutorial
Published: 2021-05-03 16:36:41

I wanted to create my own link component to showcase my social media because a lot of the ones I found online just didn't fit my aesthetic. 👽🧞
> Recently I wanted to update my portfolio website. It had been almost two years since I had updated it. I had come a long way from simple HTML+CSS+JS Apache Server websites. I had learned several stacks and technologies over this period, and I wanted to put a lot of this knowledge to use by putting it into a site that reflects me.

## Designing
There isn't much to talk about here. I just let my creative juices flow and spent a _solid_ hour on [Figma](figma.com). I was able to design the following:

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmkbrmzdbfvlihcbqgbn.png)

> If you are wondering about specifics, I used the [Inter font](https://rsms.me/inter/) and the [Feather Icon library](https://feathericons.com/).

## Implementation

For the demo, I used TypeScript, React, and CSS for my stack. Here is the final result:

{% codesandbox minimalist-link-component-hdfqt %}

> I made minor changes along the way such as adjusting the color of the description under the title.

## Technicalities

This component is super responsive. No really, go on the embedded CodeSandbox project, view it in another window, and watch it beautifully align the links as you resize the window. 🏗

I also purposely designed the link to be **chunky** so it feels comfortable to tap on a smaller screen.

These are the possible props for the link component:

```typescript
type LinkBadgeProps = {
  icon: ReactNode;
  title: string;
  desc: string;
  link: string;
  color?: string;
};
```
Everything is quite self-explanatory, however, something to note is that color, which can be hex or RGB, is not needed. It'll just default to `#111`.

## Conclusion

Overall, I am happy with how it turned out. Feel free to use this component in any way, just give me credit :).

Well, that's it. Thanks for reading my post and consider following me on Instagram [@nabeelahmed_](https://www.instagram.com/nabeelahmed_/).

~ Nabeel Ahmed
Infinitely loop over an array
Tags: javascript, codenewbie, beginners
Published: 2021-05-03 16:21:57

```js
const loopOverArray = (arr) => {
  let index = -1;

  const getNextElementFromArray = () => {
    index++;
    const nextIndex = index % arr.length;
    return arr[nextIndex];
  };

  return getNextElementFromArray;
};

const getNextElement = loopOverArray([1, 2, 3]);

console.log(getNextElement()); // 1
console.log(getNextElement()); // 2
console.log(getNextElement()); // 3
console.log(getNextElement()); // 1
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files