teleren/devto huggingface dataset:
JSX in React
Published: 2023-01-23 14:43:15

JSX in React is used to create DOM elements in JavaScript in an efficient way.

JSX is an extension for JavaScript and describes the look of the user interface. It allows us to define React elements using syntax that looks similar to HTML. In JSX, an element’s type is specified with a tag. The tag’s attributes represent the properties. The element’s children can be added between the opening and closing tags.

```
import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  const firstName = 'Shawn'
  const lastName = 'Smith'
  return (
    <h1>Hello {firstName} {lastName}!</h1>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />); 
```
 This code is some simple JSX. We have a first and last name variables declared; Then we are creating a h1 tag that would display this information by writing the variables in curly braces inside of the tag. 

You can put any valid JavaScript expression inside the curly braces in JSX. It will pull in the constant firstName into the HTML written. This output will render the message “Hello Shawn Smith” on the web page.


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

In vanilla JavaScript we would use `document.createElement()` to create pieces of our DOM in JavaScript which was a messier process than what we have access to with JSX in React.  


links: https://reactjs.org/docs/introducing-jsx.html
1- What are the types of data in R Programming?
Tags: tutorial, programming, beginners, rprogramming
Published: 2023-01-23 14:39:30

--- series: R Programming for Scientific Research ---

We recommend to you install and use the latest version of [R](https://cran.r-project.org/bin/windows/base/) and   [RStudio IDE](https://www.rstudio.com/products/rstudio/download/). 

The common R data types for research are numeric, factor, and character.

#### Numeric
```
a <- c(-1, -3, 0, 5, 7, 8, 4, 6.3, 10) 
```

- "<-" is assignment operator
- "c()" function combines values into a vector or list.
- We can get help about functions by using question mark and the name of the function, for example:
```
?c()
```
#### Factor
```
drink_vector <- (c('milk', 'water', 'juice'))
drink_vector
# [1] "milk"  "water" "juice"
drink_factor <- factor(drink_vector)
drink_factor
# [1] milk  water juice
# Levels: juice milk water
```
#### Character
```
d<-c('Hellow world', 'R is fun!')
d
# [1] "Hellow world" "R is fun!" 
```
#### Create dataframe:
```
a <- c(1, 3, 5, 7)
b <- c(2, 4, 6, 8)
df<-data.frame(a, b)
df
```
Add a column with $ operator
```
df$new_column <- c(1, 2, 3, 4)
df
```
Add a column with cbind function
```
df <- cbind(df, new_new_column = c('a', 'b', 'c', 'd'))
df
```
View df as table in RStudio
```
view(df)
```
Get names of dataframe
```
names(df)
```
Display the Structure of the dataframe
```
str(df)
```
Summary
```
summary(df)
```
<blockquote>
<p>If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>
</blockquote>
To get full video tutorial and certificate, please, enroll in the course through this link:
https://www.udemy.com/course/r-for-research/?referralCode=B6DCFDE343F0592EA61A
2- What are the functions in R Programming?
Tags: tutorial, beginners, programming, rprogramming
Published: 2023-01-23 14:37:07

--- series: R Programming for Scientific Research ---

A function is a collection of statements combined to do a specific task.

Basic syntax of an R function:

function_name <- function(arg_1, arg_2, ...) {
   Function body 
}

#### Built-in Function: 
For example: max(x) maximum of the elements of x, min(x) minimum of the elements of x, plot(x) plot of the values of x

The list of built-in functions is available at: https://cran.r-project.org/doc/contrib/Short-refcard.pdf
```
max(20, 77, 85, 12)
# 85

min(20,77, 85, 12)
# 12

a <- c(-1, -3, 0, 5, 7, 8, 4, 6.3, 10)
plot(a, col='darkgreen')
```
If a function is not available in the list of built-in functions you can use functions in packages or create it.

#### User-defined function
R user can create user-defined function.

For example: create a function to convert mile to km:
```
mile2km <- function(mile){
  km <- mile * 1.60934
  return(km)
}
mile2km(20)
# 32.1868
```
Define myMean function:
```
myMean <- function(n){
  mean = sum(n)/length(n)
  return(mean)
}

myMean(a)
# 4.033333

myMean(c(10, 50, 20))
# 26.6667
```
Create a function without an argument:
```
multiply_function <- function(){
  for (i in -5:5){
    print(i*i)
  }
}
multiply_function()
'''
[1] 25
[1] 16
[1] 9
[1] 4
[1] 1
[1] 0
[1] 1
[1] 4
[1] 9
[1] 16
[1] 25
'''
```
<p>If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>

To get video tutorial and certificate, please, enroll in the course through this link:
https://www.udemy.com/course/r-for-research/?referralCode=B6DCFDE343F0592EA61A
MarkMap Correction
Published: 2023-01-23 14:34:40

The code in the demo of markmap library from https://markmap.js.org/ does not follows the grammar of Typescript. We need to correct some errors for it.

Code in markmap-hooks.tsx:
` import React, { useState, useRef, useEffect } from 'react';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

const transformer = new Transformer();
const initValue = `# markmap

- beautiful
- useful
- easy
- interactive
`;

export default function MarkmapHooks() {
const [value, setValue] = useState(initValue);
// Ref for SVG element
const refSvg = useRef<any>(null);
// Ref for markmap object
const refMm = useRef<any>(null);

useEffect(() => {
// Create markmap and save to refMm
if (refMm.current) return;
refMm.current = Markmap.create(refSvg.current);
}, [refSvg.current]);

useEffect(() => {
// Update data for markmap once value is changed
const mm = refMm.current;
if (!mm) return;
const { root } = transformer.transform(value);
mm.setData(root);
mm.fit();
}, [refMm.current, value]);

const handleChange = (e:any) => {
setValue(e.target.value);
};

return (
<React.Fragment>
<div className="flex-1">
<textarea
className="w-full h-full border border-gray-400"
value={value}
onChange={handleChange}
/>
</div>
<svg className="flex-1" ref={refSvg} />
</React.Fragment>
);
}
`
I didn’t fix the error in markmap-class.tsx and used it as component so the code from index.tsx is different:
`import React, { useState } from 'react';
import { render } from 'react-dom';
import MarkmapHooks from './markmap-hooks';
import './style.css';

function TryApp() {
  const [type, setType] = useState('hooks');

  const Component =  MarkmapHooks ;
  return (
    <div className="flex flex-col h-screen p-2">
      <Component />
    </div>
  );
}

export default TryApp;
`
Why you can't go wrong with AWS as student
Tags: aws, beginners, programming
Published: 2023-01-23 14:32:01

6 months ago I have started my work as an AWS Cloud developer. Before this, I had close to zero knowledge of Cloud. So if you are a student, be smarter than me and start learning it right now.

## 1. It's BIG
At your university, you probably learn many different things, and you still know that's not all of it. You hear about so many specializations, different skills, different techs. So if you heard about something, there is quite big chance that AWS already has a solution for it. 
It doesn't really matter what you are planning to do after university - AWS for sure has some tool for you. Here are some examples:
- Would you like to do backend? - check serverless approach with Lambda.
- Front-end dev with React? - have you heard about static hosting on S3?
- Network Admin? - AWS got all you want - DNS/Routing/VPC.
- How about mobile dev? - You can be interested in Amplify!
- Machine learning/AI? - SageMaker has a lot of tools for you.

Still not sure? You probably faced a problem where you had to install a Linux machine for some school project. With AWS EC2, you can run it with 1 command in less than a minute! 

## 2. It's universal 
You know that learning programming is not about learning a programming language - it is about learning how to solve problems. With AWS, you can do the same. Probably, it's even easier. You don't really have to learn any syntax. You just have to start using it. What's even more important, there are not so many cloud providers. If you learn something in AWS, you will definitely catch it in different cloud platform. Also, due to the huge movement toward cloud computing, more and more applications rely on Cloud. Even if you don't use the cloud, there is quite big chance that someone in your team is using it. Wouldn't be nice to know what they are talking about?

## 3. It's impressive 
We all know multilingual people. It's truly impressive when someone starts to talk in fluent Spanish while his first language is German. Same goes with AWS, especially if you are not applying for DevOps work. Imagine recruiting React Dev who has AWS skills in his CV. It might not be so useful for this project, but if your applicant had learnt the basics of AWS, he can definitely manage his daily duties.  

## 4. It's better paid 
Are you earning a good salary as Python Dev? You can earn more by being Python Dev in Cloud. Currently, cloud positions have the highest salary in all IT industry. Check the stats.
Remote Desktop Connexion - How to use 2 out of 3 screens?
Tags: tutorial
Published: 2023-01-23 14:32:00

With the huge augmentation of remote work, it's more common to work with the Remote Desktop Connexion. But, the usage of this tool can be embarassing if you have multiple screens and don't want to use all of them.

Today, we will see how to use *(for example)* only 2 out of 3 screens.

---
## 1 - Define the base configuration
To be able to choose on which screens we want to use the Remote Desktop, we first need to **create a Remote Desktop configuration were we want to use "all the screens"**.

## 2 - Update the configuration
Open the previously created configuration file with a notepad *(or any other text editor)*.

Then, check if you see the parameter `selectedmonitors`

If not, add the following line :

```
selectedmonitors:s:0,1,2
```

This parameter will defined which screens will be used when you are using the Remote Desktop Connexion. But the screens are selected with their id.

## 3 - How to get the ids
To retrieve the ids, you just need to execute the following command in a Terminal:
```bash
mstsc /l
```

A pop-up will open with the ids of the screens  and their coordinates.
![](https://websetnet.net/wp-content/uploads/2021/01/image-3.png)

In this example, 2 is in the middle. 0 is on its left *(due to its negative x coordinate)*, and 1 is on its right.

Now, you can just update once again the configuration file and define only the screens you want to use in the future.

---

## Links
- Microsoft documentation about mstsc command : https://learn.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2012-r2-and-2012/cc753907(v=ws.11)

---
I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
3- Dealing with packages in R Programming
Tags: programming, tutorial, beginners, rprogramming
Published: 2023-01-23 14:31:37

--- series: R Programming for Scientific Research ---

R packages are combinations of functions and data sets created as extensions to R. While, library in R indicates the place where the package is held.

#### Install packages
```
install.packages('ggplot2') # ggplot2 is An implementation of the grammar of graphics in R
```
To install more than one packages together
```
install.packages(c("dplyr", "devtools", "foreign")) 
#dplyr package is a grammar of data manipulation
#devtools package is a combination of package development tools
#foreign package used for read data stored by other statistical software such as Minitab, S, SAS, SPSS, and Stata.
```
You can also install packages from RGui: Packages> Install package(s)
 
and from RStudio from: Tools>Install Packages

#### Call packages
Before using any packages you have to load them using library function.
```
library(ggplot2) # to load functions from the package we have to call it.
```
#### Remove packages
You can remove any packages that you do not need:
```
remove.packages("ggplot2") # for remove a package
```

#### Update packages
Check old packages that need an update
```
old.packages()

# for update all packages
update.packages()
```
<p>If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>

To get full video tutorial and certificate, please, enroll in the course through this link:
https://www.udemy.com/course/r-for-research/?referralCode=B6DCFDE343F0592EA61A
4- Import your data to R Programming
Tags: tutorial, beginners, programming, rprogramming
Published: 2023-01-23 14:28:30

--- series: R Programming for Scientific Research ---

Mainly researchers use .csv, .txt, .sav, and .xlxs format files.

R base functions for importing data: read.table(), read.delim(), read.csv(), read.csv2()

Download  [data](https://github.com/Azad77/py4researchers/blob/main/data/columbus.csv)  used in this tutorial.
#### Reading a local file
```
data <- read.csv("D:/R4Researchers/columbus.csv") 
data
View(data) # to view data as table
# symbol in R used to write comment.

# For reading delimited tab separated file:
data1<- read.delim(file.choose())

# Read comma (",") separated values:
data2<-read.csv(file.choose()) # to choose file from directory

# Read semicolon (";") separated values:
data3 <- read.csv2(file.choose())

table<- read.table("D:/R4Researchers/columbus.csv", header=T, sep=";")
View(table)

delim = read.delim("D:/R4Researchers/columbus.csv", header=T, sep=";")
View(delim)
```

Call function from libraries to read files:

```
library(readr)  # for read_csv
library(knitr)  # for kable
library(curl)
```
#### Reading an online file 
```
df <- read.table("https://s3.amazonaws.com/assets.datacamp.com/blog_assets/test.txt", header = FALSE)
df

df1 <- read.table("https://s3.amazonaws.com/assets.datacamp.com/blog_assets/test.csv", header = FALSE, sep = ",")
df1

df2 <- read.csv("https://s3.amazonaws.com/assets.datacamp.com/blog_assets/test.csv", header = FALSE)
df2

df3 <- read.csv2("https://s3.amazonaws.com/assets.datacamp.com/blog_assets/test.csv",  header= FALSE)
df3
```
<p>If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>

To get full video tutorial and certificate, please, enroll in the course through this link:
https://www.udemy.com/course/r-for-research/?referralCode=B6DCFDE343F0592EA61A
Best Thing About React- Components
Published: 2023-01-23 14:20:52

React Offers Reusable Components
Components in ReactJS are independent, reusable bits of code. You may provide input if required (called props), and the component will return a rendered HTML element. You can use them as a primary JavaScript function or a class component, a JavaScript class that uses a render method.

Each React component that you have developed can be reused in other parts of the app, or you can create wrapper components that provide structure and reusability. You can keep creating wrapper components using existing ones and in the end, you have a root component that is your application.

Generally, system upgrades with reusable components often lead to lots of complications as every change can affect other component’s work. But in React, managing updates is easy for developers because all the components are isolated, and change in one doesn’t carry forward to others.
Complete beginner, overwhelmed, excited, clueless.
Tags: beginners, career, motivation
Published: 2023-01-23 14:15:05

Today I decided I will start my journey. My journey to looking into coding and what that entails. However, as a teacher I know that coming into something completely unknown is extremely terrifying. A simple Google search shows millions of paths and I struggle to know where to begin in this field. But first things first.. What are my long term goals? Then I can work a path on how to get there. At least my organising/planning skills can finally be utilised into something productive outside the education system. 

- Longest term goal: Developer. (Very broad but until I know the branches of the industry, this will work for now).

- Long term goal: Enter a junior developer role. 

- Short term goal: Apply and complete a junior developer bootcamp (qa.com)

- Shortest term goal: Create CV, research bootcamps and find self-taught opportunities online, blog process.

So here I am completing 1 task: blog. Next, working on this CV.

In my overwhelmed state, I know that each small task helps toward the goal even if it branches out to a million other things. I hope to trust my instincts, the advice of others and the internet to help me through. I look forward to seeing my journey progress even if it becomes cringe-y in 10 years time. Have to start somewhere!
5- Data exporting using R programming
Tags: tutorial, beginners, programming, opensource
Published: 2023-01-23 14:10:49

--- series: R Programming for Scientific Research ---

#### Create data:
```
data <- c(1977, 1979, 2013, 2014,'', 2015)
```
#### Save data as "csv" format comma separated:
```
write.csv(data, 'created_data.csv') 
```
#### Save as semicolon(;) separated csv file:
```
write.csv2(data, file='data_semicolon.csv')
```
#### Save data as txt file:
```
write.table(data, file= 'data.txt', sep = '\t', row.names=T) # \t is tab
```
#### Save as RData:
If we have a, b, c, d, and e objects we can save them as RData then reload it in the new session
```
a<- c(5)
b<- c(-1)
c<- c(15)
d<- c(55)
e<- c('NA')
save(a, b, c, d, e, file='test.RData') # Rdata is used to save multiple R objects
load('C:\\Users\\Azad\\Documents\\test.RData')
```

#### Save an object to rds file:
```
saveRDS(data, 'firstData.rds')
# Restore it
rds_data <- readRDS("firstData.rds") # Rds is used to save a single R object
```
#### Save workspace: 
The workspace is your current R working environment and includes any user-defined objects (vectors, matrices, data frames, lists, functions).
```
save.image(file='workspace_2021.RData')
load('workspace_2021.RData')
```
#### Compressing and saving files:
```
write.csv(data, file = bzfile('data_ziped.csv.bz2'))
```
<p>If you like the content, please <a target="_blank" href="https://www.youtube.com/channel/UCpbWlHEqBSnJb6i4UemXQpA?sub_confirmation=1">SUBSCRIBE</a> to my channel for the future content</p>

To get full video tutorial and certificate, please, enroll in the course through this link:
https://www.udemy.com/course/r-for-research/?referralCode=B6DCFDE343F0592EA61A
Postman Data Driven Testing with CSV file
Tags: postman, testing, api, javascript
Published: 2023-01-23 14:02:23

Data-driven testing is a powerful technique for automating the testing process with Postman. By using a CSV data file, you can run the same test multiple times on different datasets, saving time and reducing the amount of code needed. In this tutorial, I will show you how to import a CSV file into Postman and use it for data-driven testing.

### Requirements:

- Basic knowledge of Postman and JavaScript
- A CSV data file as a source for your test

### Prepare your CSV data file

The first step is to prepare your CSV data file. Make sure the column names match the variables you will use in your tests. In this case, we have columns for User ID, Title, and Body. Each row should contain data for one test case.


![csv file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9yy3ljxr2a8z91a1n7z.png)


### Create a new request and set up your test
To create a new request in Postman, click on the "New" button and select "Request." In the request, you can set up your test by using variables from the CSV data file. For example, you can use the `userid`, `title`, and `body` variables in the request body to send different data for each test case.


![Postman Test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gijddmv8fpoplycaudzs.png)

### Create a collection
To organize your requests, add the request to a collection in Postman and then click on 'Run Collection' button.

### Import CSV Data file
To use the data from your CSV file, import it into the Postman collection by clicking on 'Select File' button. This will map the data from the CSV file into a table. Make sure the mapping is correct before proceeding.


![Preview data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jli4i05rmhd3h76uf8zi.png)

### Run the collection
With the collection set up and the CSV data imported, you can now run the collection by clicking on the 'Run Collection' button. This will automatically run each request in the collection, using the corresponding data from the CSV file for each test.

![CSV Test Run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9sl7zpj11t31apufd63.png)

---

#### Check out the video below for a detailed explanation
{% youtube Hwmdq1fpbUA %}

---

By using a CSV data file in Postman, you can easily perform data-driven testing and automate your testing process. This technique can save you time and effort by allowing you to reuse the same test with different data sets.

---

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
[Join Academy](https://bit.ly/3Vcqv69)

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

Thanks for reading!
Getting started with low code app development
Tags: lowcode, nocode, appdevelopment, webinar
Published: 2023-01-23 14:02:19

Accelerate your internal tooling initiatives with low code. 

Learn from experts on getting started with low code. 

Register for the live masterclass now and start your low code journey today!

Date: January 24th 

Time: 11:30 PM IST | 12PM CT

Register here > https://www.dronahq.com/getting-started-with-low-code/
My Coding Journey
Published: 2023-01-23 13:57:14

Harvard's University introduction to computer science is a good platform to start your coding journey. Here at Harvard University I've learnt the following: 

- C programming language             

- python

- SQL

- HTML

- CSS

I've also gained a hand full of experience from freeCodeCamp using HTML and CSS to build things like Cat Photo App, Cafe Menu, Set of Colored Markers, and a Registration Form. I've also learnt: Typography by building a Nutrition Label, CSS-Box model by building Rothko Painting, Accessibility by building a Quiz, CSS pseudo-selectors by building a Balance Sheet, CSS flexbox by building a Photo Gallery, Intermediate CSS by building a picasso Building.

In addition to the above I've completed two certification projects by building a Survey Form and a Tribute Page **and still learning.**

Am still on my journey to becoming a seasoned Front-end Developer and probably a full stack at the end of the day.

_The journey of a thousand miles begins with a step.__