teleren/devto huggingface dataset:
What is React?
Published: 2022-11-17 14:07:20

ReactJS is an open-source JavaScript library made by Facebook's Jordan Walke to make UIs for both web and versatile frameworks. Respond was first utilized in 2011 on Facebook's newsfeed. In 2012, it was utilized on Instagram, and in 2013 it was made accessible to people in general. Respond is best for applications that change their information rapidly and powerfully. It can show the pieces of the UI that are changing without re-delivering the entire page. This makes the client experience a lot quicker. In the event that you are as yet considering what's really going on with Reactjs, how about we go through the prologue to ReactJS and its connected viewpoints.

## Spa vs Mpa

The distinction among SPA and MPA is that MPAs ties down each page profoundly. Thusly, it requires greater investment and work to keep up with the security; subsequently, page stacking time is more.

SPAs secure endpoints quicker, however the security level is low. SPAs by and large depend on JavaScript. This makes them defenseless against being gone after by cybercriminals as a result of the information not being ordered for security.

SPAs are viewed as more "current" and sensitive to the present lithe advancement needs.

In any case, this doesn't imply that MPAs don't work out. Have you at any point utilized Amazon? The world's biggest Web based business site? Amazon is a MPA and this really implies that at whatever point you demand new happy, the page needs to reload once more. This is viewed as ordinary design, yet it's still exceptionally significant and is utilized with extraordinary outcomes.

MPAs are the most ideal for complex sites that don't need a continuation of approach. For example on Amazon, you don't need your page to remain the equivalent when you need to see an item or class. So in the event that you are considering building, suppose an exceptionally huge Web based business webpage, then, at that point, you ought to choose a MPA design.

Yet, pause! That is not by any means the only thing you ought to consider prior to pursuing the last choice. There are others also.

## Angular vs React

Is Precise better than Respond? Rakish is better compared to Respond in the event that your application is venture grade and you really want to consolidate complex functionalities like moderate, single-page, and local web applications. Be that as it may, Respond represents considerable authority in making UI parts and can be utilized in any application, including single-page applications.

To be Continued Soon...
💻ANSIBLE Auto Configure your server for Nginx|Reactjs and Laravel|php env on ONE click👆
Tags: ansible, playbook, automation, server
Published: 2022-11-17 14:04:09

##_Let setup the ansible:_
you need one "**MASTER**" and multiple "**SLAVE**" node to control the slave configuration.

### Important
- its an configuration management tool, also open-source.
- we used "YAML" for scripting language.
- it implement worker on "push management" model.
- one "Master" configure multiple servers "nodes".
- it communicate agent/nodes throw "**SSH**" method.
- script are called "**PLAY BOOKS**".
- the machain where ansible is installed called "**ANSIBLE SERVER**".
- the set of commands to be executed in nodes/client called " **MODULE**"
- metadata of servers or agent/nodes/clients called "**Inventory**"
- inventory default location will be --> `/etc/ansible/host`

##How to connect master and slave
create an **SSH-KEY** and paste the same in all slave servers.
So, you connect with all different nodes through **IP** with same private-key.

##How To Install
```
apt install ansible
```
##How To Create Inventory

```
[servers]
server_1  ansible_hist= 1.112.113.114

[all=vars]
ansible_python_interpreter = /usr/bin/python3
```
##How To Check/Verify Inventory

```
ansible-inventory --list -y 
ansible-inventory --list -y -i [(inventory)--> /etc/ansible/host]
```
##How To Ping Agent/Nodes

ping the all nodes
```
ansible all -m ping -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem

```
OR
```
ansible all -m ping -u root
```
_####some use full command to get nodes info####_

```
ansible all -a "free -h" -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem

ansible all -a "uptime" -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem

ansible all -a "df -h" -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem
```
##How To Create Play-book.yml
[](blogpage)https://www.trainwithshubham.com/blog/ansible-playbooks

```
	- name: This playbook will create a file
	  hosts: all
	  become: true
	  tasks:
	   - name: creating a file
	     file:
	     path: /home/ubuntu/testdemo2.txt
	     state: touch
```
```
	- name: This Playbook will create a user
	  hosts: all
	  become: true
	  tasks:
	   - name: Create a user Shubham
	     user: name=shubham
```
```
	- name: This playbook will install Docker
	  hosts: all
	  become: true
	  tasks:
	   - name: Add Docker GPG apt Key
	     apt_key:
	     url: https://download.docker.com/linux/ubuntu/gpg
	     state: present

	   - name: Add Docker Repository
	     apt_repository:
	     repo: deb https://download.docker.com/linux/ubuntu focal stable
	     state: present
	   - name: Install Docker
	     apt:
	     name: docker-ce
	     state: latest
```

##How To Upgrade-all Server by(_command_)
```
ansible all -m apt -a "upgrade=yes update_cache=yes cache_valid_time=86400" --become  -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem
```
##How To Run Playbook.yml
```
ansible-playbook playbook.yml -i [(inventory)--> /etc/ansible/host] --private-key = ~/.ssh/ansiblekey.pem 
```
Creating a simple Linked List In C programming
Tags: datastructures, programming, c
Published: 2022-11-17 14:00:57

**Linked Lists** are list of elements in which the various elements are linked together. Data in a linked list are stored in a **linear manner**. The Data are placed in **nodes** and the nodes are connected in a specific desired fashion.
**Node** is a container or a box which contains data and other information in it. In a list a node is connected to a different node forming a chain of nodes.
The first step in making a linked list is making a node which will store data into it.
**C program for a Linked List**
We first create a structure named node which stores an integer named data and a pointer named next to another structure (node).
```
struct node
{
    int data;
    struct node *next;
};
```
We then make two nodes (structure named node) and allocating space to them using the `malloc` function.

```
struct node *a, *b;
    a = malloc(sizeof(struct node));
    b = malloc(sizeof(struct node));
```
We then set the values of data of the nodes a and b.

```
    a->data = 10;
    b->data = 20;
```
We then store the address of b in the next variable of a. Thus, next of a is now storing the address of b or we can say the next of a is pointing to b.Since there is no node for the next of b, so we are making next of b null.

```
    a->next = b;
    b->next = NULL;
```
We then Print to see the output

```
printf("%d\n%d\n", a->data, a->next->data);
```
Below is the Combined Code


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjrswjzdz4pcrvyhl8rc.png)
How to copy files to remote server through SSH Tunnel using ngrok and rsync (quick-note)
Tags: commandline, linux, reversetunnel, rsync
Published: 2022-12-10 21:40:22

---
title: How to copy files to remote server through SSH Tunnel using ngrok and rsync (quick-note)
published: true
date: 2022-11-17 14:00:00 UTC
tags: commandline,linux,reversetunnel,rsync
canonical_url: https://diegocarrasco.com/how-to-copy-files-to-remote-server-through-ssh-tunnel-using-ngrok-and-rsync/
---

```
rsync -av -e "ssh user@0.tcp.eu.ngrok.io -p port" path_from_copy :path_to_copy --progress

```

_Important_: don’t forget the `:` before the second path.

In case you want to Watch the destination folder size in real time, open another terminal windows, ssh to the server, cd to the folder in question and type:

```
watch "du -h --max-depth=1"

```
Day40 of #100DaysOfCode
Tags: 100daysofcode, nextjs, javascript, webdev
Published: 2022-11-17 13:59:10

Super brainfried just watching Prismic tutorial.

I guess it’s different when the framework/tool is new and the documentation is confusing and there’s not a lot of tutorial on Youtube. 😂

It’s totally different when it’s NextJS that is popular and so many people are covering it on Youtube.

I guess I need to attack this from a different angle. I do have a much better understanding on how it works but feel like I need to learn more before I can try it with my current project. Wish me luck 😭
Adding Continuous Integration
Tags: opensource, javascript, github, beginners
Published: 2022-11-17 13:57:19

This week, we are going to have out Lab 9 in **OSD600**. Similar to the Lab 8, Lab 9 is about to improve our _SSG_ within GitHub. We are doing so by implementing **_Continuous Integration_** or CI. 
Continuous integration (CI) is the practice of automating the integration of code changes from multiple contributors into a single project. It's a key practice, allowing developers to frequently merge code changes into a central repository, where builds and tests are then run.

###Procedure
**Part 1**
I have had practice using CI doe to one of my other classes that being **CCP555**. So I understood what I was doing for the most part. It didn't take long in all honesty, due to it being that GitHub does the majority of the work for you.

Though I was stuck on what to use for a while. Did I want to hardcode it automatically for the default branch using `$default-branch` or did I want it to run in my `main` branch (which is also my default)`. So I just opted to just use `main` as the branch within the CI.

In order to check whether this had worked or not, I decided to push split of my `mdFileConverter()` function into its own file. From there, I created several tests for it as well. I then pushed the new test files to see whether it would pass the **CI** lo and behold they passed without issue.

**Part 2**
Moreover, for this Lab 9 we need to test other people's CI as well. I found my partner [Neil](https://github.com/NeilAn99) via Slack. Personally I didn't do much, I just created a test to test whether an parse was undefined or not, and one to see if her config file could parse **one** specific file and not a folder of files. I also used experience from a previous commit during release 0.3 where the owner was asking to create tests.

####Thoughts
This lab overall, is a simple lab, though I would not call it a bad thing. With this lab it can be extremely useful, and an extremely powerful tool that can apply to a variety of situations. This allows programmers to build on one project simultaneously on a project while checking for any errors. An extremely versatile and useful tool to any programmers
223. Leetcode Solution in JavaScript
Tags: javascript, beginners, challenge
Published: 2022-11-17 13:35:58

```javascript
/**
 * @param {number} ax1
 * @param {number} ay1
 * @param {number} ax2
 * @param {number} ay2
 * @param {number} bx1
 * @param {number} by1
 * @param {number} bx2
 * @param {number} by2
 * @return {number}
 */
var computeArea = function(A, B, C, D, E, F, G, H) {
    var areaA = (C-A) * (D-B);
    var areaB = (G-E) * (H-F);

    var left = Math.max(A, E);
    var right = Math.min(C, G);
    var top = Math.min(D, H);
    var bottom = Math.max(B, F);

    var overlapArea = 0;
    if (right > left && top > bottom) {
        overlapArea = (right -left) * (top - bottom);
    }

    return areaA + areaB - overlapArea;
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/rectangle-area/
How to deal with negative feedback at work
Tags: career, softskill, management
Published: 2022-11-17 13:35:03

Are you not good when it comes to dealing with negative feedback at work?

I was just like you - sometime I would fight back or get emotional. Occasionally I still do! It wasn't helping my career of course, so I had to come up with a better approach.

So I did come up with an algorithm for working with negative feedback - which I describe in this video

As always - follow me for more tech career tips

{% embed https://youtu.be/ur4gRH-rPRI %}
Fix: ethers.getContract is not a function Hardhat Solidity
Tags: web3, testing, solidity
Published: 2022-11-17 13:30:45

When you are trying to run a Solidity contract with `hardhat run scripts/deploy.js` you may experience getting the error **"ethers.getContract is not a function"**.

To fix the error **"ethers.getContract is not a function**, ensure you install the package by running `yarn add --dev hardhat @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers` on your project terminal.

Open your terminal and run the following command:

```
yarn add --dev hardhat @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers
```

> If the **"ethers.getContract is not a function"** error is not resolved, or a new error emerges, try updating your `scripts/deploy.js` to the latest codes.

Assuming I have the following `MyName.sol` contract:

```
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MyName {
    function name() public pure returns(string memory) {
        return "Jeremy Ikwuje";
    }
}
```

My deploy scripts will look like this:

```solidity
const hre = require("hardhat");

async function main() {
  const MyName = await hre.ethers.getContractFactory("MyName");
  const name = await MyName.deploy();

  await name.deployed();

  console.log(await name.name());
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});
```
Saving this script as `scripts/deploy-name.js`, I will then go ahead and run the command below:

```
 npx hardhat run scripts/deploy-name.js
```
That should work!

## Conclusion
When trying to run a Solidity contract with `hardhat run scripts/deploy.js` you may experience getting the error **"ethers.getContract is not a function"**. To fix the error, ensure you install the package by running `yarn add --dev hardhat @nomiclabs/hardhat-ethers@npm:hardhat-deploy-ethers ethers` on your project terminal. If a new error emerges, try updating your `scripts/deploy.js` to the latest codes on the documentation.
O quão bom você é na sua linguagem favorita?
Tags: programming, career
Published: 2022-11-17 12:53:17



![Homem no topo da montanha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8w40aeim061qrnpe5g7.jpg)



Nos últimos anos aprofundei meus conhecimentos em JavaScript e recentemente me surgiu uma dúvida: Como saber se sou realmente bom em JavaScript? 

A questão não é se sou um bom desenvolvedor ou programador, mas até onde cheguei em uma determinada linguagem.

## A resposta...

A resposta para isso é “depende”, depende do seu parâmetro de comparação, porque ele vai determinar o que você considera “bom”.

No entanto, podemos usar uma analogia e comparar o aprendizado de uma linguagem de programação com o aprendizado de uma idioma falado.

O sonho de todo estudante de idiomas é pronunciar e conhecer as palavras de um determinado idioma como os falantes nativos, no entanto, nem mesmo os falantes nativos conhecem todas as palavras ou todas as maneiras pelas quais uma frase pode ser montada. 

Mas na maioria das vezes que um falante nativo ouve ou lê palavras em seu idioma, ele as reconhece rapidamente, mesmo sem saber o que elas realmente significam.

Voltando ao mundo das linguagens de programação, acredito que um programador alcançou um bom nível ou “nativo” em uma determinada linguagem sempre que, ao ver algo novo nessa linguagem, não se sente “confuso” ou “perdido”, ou seja, mesmo que não saiba exatamente o que está acontecendo, você deve ter uma noção básica e se sentir confortável.

## Conclusão

Atualmente, gosto de pensar assim porque simplesmente não é necessário definir níveis. 

Nós podemos testar esse raciocínio ao olhar para um bloco de código em uma linguagem desconhecida e depois olhar para outro na nossa linguagem favorita, obviamente suas habilidades podem fazer você compreender os dois códigos, mas ao olhar para um bloco de código em uma linguagem desconhecida parecerá que você não está falando em seu idioma nativo, mas sim em um outro idioma.

Deixe um comentário para que eu saiba se você concorda ou não comigo!

Obrigado por chegar até aqui!
Code Journal 11-17-22
Tags: react, redux, udemy, vscode
Published: 2022-11-17 12:20:29

Day 4 of working through the React/Redux w/CircleCI, AWS, Terraform course. I'm not sure if this is the best use of my time at this current point but a lot of the job postings have mentioned terraform and circleCI so I thought I'd brush up on it. This is a hefty course. I'm watching the videos at 2X speed while I code and I've barely cracked 25% of the course. But it's a marathon not a sprint I suppose. It's interesting to work in Redux since I've only really been familiar with UseContext while building my LV Black Jack Pro App. But the instructor (Uzochukwu Eddie Odozi) is very knowledgable so I'm happy to learn from him.
Introducing regroot🌱 : A recruitment platform.
Tags: atlashackathon22, mongodb, nextjs, javascript
Published: 2022-11-17 12:17:06

Hey Everyone,
I'm so excited to participate in the MongoDB Atlas Hackathon 2022 on DEV. I've decided to document the development of my project submission for this Hackathon.

## Introducing Regroot 
Regroot is a jobs/internships listing website aimed at startups and growing tech companies. It will also be a pathfinder to better jobs for people who have suffered from ongoing mass layoffs.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzle1862ccfryi2wr0s5.png)



## MVP Kickstart
- Job/Internship Search with the help of Atlas Full Text Search.
- Employers can list jobs/internships.

## Future Roadmap
- Users can create their own public profiles/portfolio.
- Community feed and forums.

## Proposed Tech Stack

- Next.JS (API & Frontend)
- MongoDB (Database)
- NextAuth (Authentication)
- TailwindCSS and Flowbite React (Styling)


## Development
I'm trying to develop the basic MVP and the extra features within 2 weeks and will be documenting my process through articles. Thanks for checking this out and let me know your thoughts about this project.
How to convert text into image with svg tag
Tags: webdev, javascript, tutorial, svg
Published: 2022-11-17 12:16:44

[Original post](https://arnosolo.github.io/blog/how-to-convert-text-to-image-with-svg-tag.html)

Convert text into image with svg tag. The text is centered and able to wraps automatically.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spsmnaj2kr8tzg34851s.png)

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 125">
    <foreignObject width="200" height="125" x="0" y="0">
        <div class="h-full flex justify-center items-center">
            <p class="text-16px text-center">
                YOUR_TEXT_HERE
            </p>
        </div>
    </foreignObject>
</svg>
```

viewBox means that the canvas starts at (0,0) and has a length and width of 200 and 125

foreignObject allows HTML elements to be placed in SVG
div flex layout is used to center the text, if you are not familiar with this atomized style, you can take a look at tailwind css. This example is using unocss
A better way to pass parameters to functions
Tags: webdev, javascript, beginners, tutorial
Published: 2022-11-17 12:12:08

[Original link](https://arnosolo.github.io/blog/smart-functionparameters-in-javascript.html)

If a function requires 4 arguments, then we need to pass in 4 arguments, even if the middle argument is not needed in some cases. So can you pass in a few parameters if you need a few parameters? Yes, you will know after reading this article.

```ts
// 👎 Ordinary way of passing parameters
printTodo('Learn Swift', undefined, undefined, ['learning']);
```

```ts
// 👍 Pass in only the parameters needed
printTodo({title: 'Learn Swift', tags: ['learning']});
```

Ordinary way
```ts
function printTodo(
    title = 'Untitled',
    content = '',
    isDone = false,
    tags: string[] = [],
) {
    console.log(`Title: ${title}`);
    console.log(`Content: ${content}`);
    console.log(`Tags: ${tags.map(tag => `#${tag} `).join()} \n`);
}

printTodo('Learn Swift', undefined, undefined, ['learning']);
```

Pass in only the parameters needed
```ts
interface Todo {
    title?: string;
    content?: string;
    isDone?: boolean;
    tags?: string[];
}

function printTodo({
    title = 'Untitled',
    content = '',
    isDone = false,
    tags = [],
}: Todo = {}) {
    console.log(`Title: ${title}`);
    console.log(`Content: ${content}`);
    console.log(`Tags: ${tags.map(tag => `#${tag} `).join()} \n`);
}

printTodo({title: 'Learn Swift', tags: ['learning']});
printTodo();

```
How did you monetize your first app?
Tags: mongodb, motivation, mobile
Published: 2022-11-17 12:06:00

Hello,

I wanted to make my first app for Android which is a game.
I have some questions that you can answer if you can.
How did you monetize the first app you made for mobile phones?
If your app's income was only through advertisements, would you be satisfied with its income? Are you not disappointed with the continuation of the activity?

Sincerely,

Saeed
Video: Accelerate Transformer inference with AWS Inferentia
Tags: deeplearning, aws, mlops, hardware
Published: 2022-11-21 16:57:01

---
title: Video: Accelerate Transformer inference with AWS Inferentia
published: true
date: 2022-11-17 11:56:56 UTC
tags: deeplearning,aws,mlops,hardware
canonical_url: https://julsimon.medium.com/video-accelerate-transformer-inference-with-aws-inferentia-bb054d792772
---

In this video, I show you how to accelerate Transformer inference with Inferentia, a custom chip designed by AWS.

Starting from a [Hugging Face](http://huggingface.co) BERT model that I fine-tuned on AWS Trainium (https://youtu.be/HweP7OYNiIA), I compile it with the Neuron SDK for Inferentia. Then, using an inf1.6xlarge instance (4 Inferentia chips, 16 Neuron Cores), I show you how to use pipeline mode to predict at scale, reaching over 4,000 predictions per second at 3-millisecond latency 🤘

{% youtube un0WsUtGwVA %}