teleren/devto huggingface dataset:
Basics of React JSX
Tags: programming, react, beginners
Published: 2021-02-15 05:39:18

# Some ReactJS' JSX basics you should know as a beginner 👇🏿
...
## Writing Expression in JSX.
Curly braces are used to wrap valid JavaScript expressions in JSX. This can either be an expression of number operations or a function call.

```jsx
// Variable expression
const guest = "John"
const greeting = <h1>Hello, {guest}!</h1>

ReactDOM.render(
    greeting, 
    document.getElementById("root")
);
```
In the example below, the result of a function call is written into the h1 tag.

```jsx
// Function call expression
function formatName(guest) {
    return guest.firstName + ' ' + guest.lastName;
}

const guest = {firstName: "John", LastName: "Doe"}

const element = (
    <h1>Hello, {formatName(guest)}!</h1>
);

ReactDOM.render(
    element, 
    document.getElementById("root")
);
```
## Using JSX in Expressions
JSX can be assigned to variables, used in conditionals and loops; accepted as arguments and returned from function calls. This is because, after compilation, JSX becomes mare JavaScript objects.

```jsx
function isUser(user) {
   if (user) {
       return <h1>hello, formatName(user)!</h1>;
   } else {
       return <h1>Hi! can I help you?</h1>;
   }
}
```
## Attribute in JSX
To specify attribute in JSX, you should use quotes for string values and curly braces for expressions. Don't use both for attribute values.

```jsx
const element = (
	<div ClassName="container">"Hello World!" is getting old.</div>
    <img src={imageUrl}></img>
);
```
## Having Children in JSX
JSX can have multiple children elements. Empty tags should be closed with a `/>` at the end.

```jsx
const user = {firstName: "John", LastName: "Doe"}

// Multiple element
const elements = (
    <div>
        <h1>Hello {formatName(user.firstName)}</h1>
        <h2>Good to see you here.</h2>
        <h3>Have a greet stay!</h3>
    </div>
)

// Empty element
const element = <input type="email" name="user-email" value={state.userEmail} />;
```
## No Injection Attacks in JSX
Malicious inputs are escaped in JSX. No input attack can be injected into the code, except explicitly set in the application. [Cross-site scripting(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks are prevented in JSX.

```jsx
const title = response.inputAttack
// This is safe
const element = <h1>{title}</h1>
```
## JSX is JavaScript Object.
A transpiler compiles JSX down to `React.createElement()` calls. When you write JSX, the `createElement()` method is called from the `React` object class under the hood.

The two examples below are identical:

```jsx
const element = (
  <h1 className="surprise">
    This is JSX!
  </h1>
);
```
```jsx
const element = React.createElement(
  'h1',
  {className: 'surprise'},
  'This is JavaScript object!'
);
```

## Summary
Let's look at some of the basics of ReactJS' JSX that's been covered so far.

* Writing expression in JSX
* Using JSX in Expression
* Attribute Expression in JSX
* Specify Children in JSX
* No Injection Attacks in JSX
* JSX is JavaScript Object
ERP Software Development and it's Benefits
Published: 2021-02-15 05:31:14

Now, you can manage your business with ease. Our reliable ERP developers are well-versed in rolling out management, tracking, and booking software, and bringing all your business operations into one single, simple, custom ERP solution. Bamboo Agile provides a full range of services from consulting to the release of your enterprise resource planning software. <a href="https://bambooagile.eu/solutions/ERP"> erp development services</a> and our development teams build solutions for personal and warehouse management, manufacturing, and logistics.

The Benefits of Having Custom ERP Software

- Process Automation

Using ERP’s development services increases your company’s overall efficiency. The ERP system will help you to eliminate manual operations, easily collect data, and streamline business processes within the company.

- Keeping All Data in One Location

ERP software allows you to aggregate all your data in one single location, helping to keep it consistent and up-to-date.

- Comprehensive Reporting

With ERP development services, every user of the system can generate customizable reports with ease. So, you can access and analyze data faster than ever to make important business decisions more quickly.
Really understanding the spread operator in JS.
Tags: javascript, webdev
Published: 2021-02-15 05:20:48

Through my programing journey, the spread operator was always one of things that I think I know but I really didn't know, ya know? So I have decided to write about it, you know when they say, you never really know what you know unless you try to teach someone else about it, that's exactly my intention so here we go! 

The spread operator to put it in simple words is an operator used for iterable objects, this means arrays, strings, a set object, allowing it to make a copy of everything inside that iterable object and literally spreads it without you having to type it all in. This is a life saver for those who have arrays with 5,000 pieces of information. 

*"Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected." (MDV web docs, online)*

Here are some example of what you can do with the spread operator.

    let array = [1,2,3,4]
    console.log(array) //1 2 3 4

    let duplicateArray = [...array]
    console.log(duplicateArray) //1 2 3 4

You can also add new items to the object 

    let newArray = [...duplicateArray, 5, 6]
    console.log(newArray) // 1 2 3 4 5 6

Concatenate

    let concatArray = [...array, newArray]
    console.log(newArray) // 1 2 3 4 1 2 3 4 5 6


I hope this helps, if you have any questions or suggest that I cover more in this blog please feel free to leave a comment! Thank you!!
5 things you need to get about working with Git
Tags: github, git, codenewbie, beginners
Published: 2021-02-15 05:02:54

Since being introduced in 2005 by Linus Torvalds (Creator of the Linux kernel). The distributed version control system, Git has been a staple of productivity for programmers. The open-source tool allows you to track and distribute versions of each file system in the programs you create. 

Here are some important things to know: 

### 1. How does it work? 

Git works in the background, directly with your file-system. We can initialize a new local repository for any new project on your computer. This will get you access to the Git commands that will allow you to do things like revisit older versions of your project or share copies of your code on a hosted platform.  

![git](https://dev-to-uploads.s3.amazonaws.com/i/i5xu7xgqc1itze2m2fu8.jpg)

### 2. You can use it with teams? 

A huge benefit of a version control system is the ability for several team members to clone copies of a codebase and work in isolation. Popular project management tools like Jira can make this process work well. 

![startup](https://dev-to-uploads.s3.amazonaws.com/i/04drux5tx8540h34kxic.jpg)

### 3. Where can you use Git? 

A local git repository can live on your computer but to really take advantage of git. You can publish your repository to one of several hosting platforms. Github is a very popular git repository platform that many teams utilize. 

![github repos](https://dev-to-uploads.s3.amazonaws.com/i/0vrf6wjcmajk2xed3wn1.png)

### 4. It may be used by potential employers 

Employees can get a gauge of how much coding you have done by checking your public repositories on Github. Each new commits you push provides an indication of your work progress and are represented by green squares on your profile. 

![github tiles](https://dev-to-uploads.s3.amazonaws.com/i/wmqdnpy9f7ykbces3l5s.png)

### 5. Useful commands 

Starting a new git project
```
$ git init
```

Stage any changes in your project
```
$ git add <your filename>
```

Commit project changes to Github
```
$ git commit -m "your helpful commit message here"
```

Publish local repository changes to Github
```
$ git push 
```

### Let's chat about Git

Now you know the gist of the version control system - Git. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with Git.

Happy Coding,
Terry Threatt
Auditing One of my Most Used Website
Published: 2021-02-15 04:50:27

Let's be real, there are so many moving parts to a website, and making the most accessible platform can be extremely challenging. However, accessibility is vital to the versatility of a website. Creating the most user-friendly interface for all browsing is essential. For those with disabilities and restrictions to their vision, these impairments are debilitating and difficult to deal with. Front-end web designers and website creators should put an extra amount of care and time into fixing common accessibility errors. 

On a different topic, I'm obsessed with good food. Whenever I'm traveling to a new city for the first time, one of the first things I do before I get there is research some of the dining options to see where I can get the best local food. Because of this, I religiously use the website Yelp.com to find the best options in the area. I decided to look more into this website's accessibility with the following auditing services...

First, I used the service *web.dev* to analyze the accessibility of Yelp. Web.dev does an excellent job of outlining a website's accessibility through categorized subjects. Yelp definitely needs to focus on their Development accessibility in order to improve their site, and web.dev shows these areas of improvement based on the level of power of an issue. 

Additionally, *Wave* and *Lighthouse* are both incredible Chrome extensions that allow you to run intricate reports outlining where a website lacks accessibility. I personally love the Lighthouse extension, as it shows pictures of the exact areas of your website, and does a great job "dumbing down" the language revolving around your accessibility issue.

To see a video of me using these services, go to this link: https://www.youtube.com/watch?v=7Nop3ELSdoc&feature=youtu.be
Introducing Asp.net core to new developers 
Published: 2021-02-15 04:29:57

BASICS

◇ Building block: The building block of every asp.net application is divided into 2 major layers : The runtime/infractures to hold the application and the code to run the application. 
Under the runtime/infrastructure we have:

• Operating system: this is either the Windows, Mac or Linux OS of your local machine. 
• Webserver: This is either the IIS, kestrel or docker webserver. They take the client request from the OS and send them to the appropriate app runtime.

• .Net runtime: This is where the .Net core application runtime sits. It comes automatically with the .net core SDK, and primarily provides infrastructure to run an existing code.
 Under the code layer we have:

• .Net and third party libraries: These codes are auto generated, and provide primitive types that supplement your code.
• Application code: This is your own developed code that gives identity and purpose to the application. 

◇ Creating a project

To create a project using visual studio You go to create new project 》asp.net core web application 》empty template.
 Asp.net core scaffolds some basic codes to help u get started. An example of these codes is the startup.cs class. This is the entry point of the application, and contains methods to setup the application. 

◇ Responding to HTTP requests.
 
Asp.net core makes use of middleware to process incoming http requests. These middlewares are functions registered in the configure() method of the startup.cs class. Each request entering the webapp request pipeline is passed from one middleware to another in the order in wish they are registered. An example of a middleware function is app.Usemvc()

◇ Serving static files.

Static files include html,css files. Static files are stored in a folder in the solution called wwwroot. For asp.net to serve a static file,a middleware which is app.UseFileserver() is registered. 

◇ Error handling.

Asp.net core displays the developer exception page when an error or exception is thrown. To display a more user friendly page on the browser in production mode, we add a middleware, app.UseExceptionHandler(), which takes a parameter that maps to the error page to display for the user.
Conceptos Basicos de EH
Published: 2021-02-15 00:44:31

<strong> Creación y gestión de usuarios </strong>

para saber que tipo de usuario soy

whoami 

primero para crear un usuario en home
tengo que realizar este comando en la carpeta de usuario home

mkdir brunito

useradd -d /home/brunito -s /bin/bash brunito

analizamos el passwd

cat /etc/passwd | grep "sh$"

ahora le voy asignar la contraseña a brunito

passwd brunito

ahora le vamos asignar privilegios y grupos a pepito

chown brunito brunito

y para los grupos

chgrp brunito brunito

otra forma mas rapida es desde chown

chown root:y3rb1t4 brunito 

en el directorio home

chown brunito:brunito brunito

si queremos migrar ahora solamente usamos estos comandos

su brunito 


<hr></hr>

Abusos de permisos SUID para escalar privilegios

¿ Como funcionan los permisos SUID?

https://www.luisguillen.com/posts/2017/12/como-funcionan-permisos-suid/





<strong> Explotación y abuso de los privilegios</strong>




<strong>Explotación y abuso de las Capabilities en Linux</strong>

con este comando accedo a todas las capabilities que estan en el sistema

getcap -r / 2>/dev/null

para sacarle la capabilities

setcap -r /usr/bin/python3.8

para ver si tiene capabilites

getcap /usr/bin/python3.8

para asignar capabilities

setcap cap_setuid+ep direccion de la capabilities






Material de Apoyo:

Creación y gestión de usuarios


Guia de creacion de usuarios en Linux

https://culturacion.com/como-crear-cuentas-de-usuario-en-linux/

Administracion de usuarios en linux

https://www.pedroventura.com/linux/administracion-de-usuarios-en-linux-crear-borrar-modificar-usuarios-y-grupos/




Capabilities - Linux Manual Page

https://man7.org/linux/man-pages/man7/capabilities.7.html

Linux Kernel capabilities - No solo de sudo vive root

https://www.incibe-cert.es/blog/linux-capabilities

https://gtfobins.github.io/
Cross-Validation for Time Series
Tags: datascience, python, machinelearning
Published: 2021-02-15 04:26:25

<span>Photo by <a href="https://unsplash.com/@markuswinkler?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Markus Winkler</a> on <a href="https://unsplash.com/s/photos/analytics?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

To estimate the performance of the machine learning model, we may consider using cross-validation (CV), which uses multiple (e.g. n) train-test splits and trains/tests n models respectively. 

There is a k-fold CV in scikit-learn, which splits data into k train-test groups, and it assumes that observations are independent. However, in time series there is a dependency between observations and it could lead to target leak in the estimation when k-fold CV is used.
For Time Series data I explored the following  cross-validation techniques:

**1) Scikit-learn's  Time Series Split.**
Here we use expanding window for the train set and a fixed-size window for the test data. 

Example of Indices Split:
TRAIN: [0 1 2 3 4 5 ] TEST: [6 7]
TRAIN: [0 1 2 3 4 5 6 7] TEST: [8 9]
TRAIN: [0 1 2 3 4 5 6 7 8 9] TEST: [10 11]
...


**2) Blocking Time Series Split.**
It's when we train and test on different blocks of data.
Example of the split:

TRAIN: [0 1 2 3 4 5 6 7 8 9] TEST: [10 11]
TRAIN: [12 13 14 15 16 17 18 19 20 21] TEST: [22 23]
TRAIN: [24 25 26 27 28 29 30 31 32 33] TEST: [34 35]
...


**3)Walk Forward Validation.**

a) we use the fixed-size(sliding) window for the train data and one observation ahead for the test.

Example of Indices Split:
TRAIN: [0 1 2 3 4 5] TEST: [6]
TRAIN: [1 2 3 4 5 6 ] TEST: [7]
TRAIN: [2 3 4 5 6 7 ] TEST: [8]
....

b) we use expanding window for the train data and one observation ahead for the test. Which is a variation of the scikit-learn's Time Series Split.

Example of Indices Split:
TRAIN: [0 1 2 3 4 5] TEST: [6]
TRAIN: [0 1 2 3 4 5 6 ] TEST: [7]
TRAIN: [0 1 2 3 4 5 6 7 ] TEST: [8]
....
HandsOn Microservices Tutorial - Episode 2 (Setting Up Local Infrastructure )
Tags: microservices, csharp, java
Published: 2021-02-15 04:20:51

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qwkaw7kjpoqgfhkmz4c5.png)

The second hands on Microservice episode is out. We get to setup our local environment and infrastructure prior commencing on the development work of our real world project.

Link :- https://cutt.ly/microservice-series-local-infrastructure-setup

Twitter Handle :- @EricNjue
Auditing lousalternator.com
Tags: webdev
Published: 2021-02-15 04:17:42

For this assignment, I choose to audit my dad's business's website... [lousalternator.com](http://www.lousalternator.com). I ran two reports, Lighthouse and WAVE. Before I ran these reports however I asked the owner of the website if they were happy with it. He stated that it was slow, but looked better than most other website options. He made these assumptions with no web development background. Based on these two reports three areas of the website that I believe should be improved are contrast, implementing HTTPS, and adding a description to the metadata. 

First relating to accessibility the contrast of the page is not high enough. The website includes only 4 colors: white, black, grey, and blue. The lack of contrast does not allow the significant difference between the background and foreground. Based on the WAVE report the element that creates the errors is light blue text against the white background. I suggest changing the color of the text to a dark blue or dark grey color. 

Second, relating to best web practices I suggest protecting this website with HTTPS. Even though you can not purchase anything on the site and cannot input any sensitive information it is still extremely important to protect the owners and users. This issue can be solved by obtaining a single certificate for a single secure origin. The article 'Secure your site with HTTPS' give good information on how to secure your website and issues after obtaining a certificate to avoid like blocking crawling and making sure the webserver supports SNI 

Third, relating to SEO, aka optimizing for search rankings, the website is missing an alternative text tag and missing metadata descriptions. These are important so that when the search engine returns a list of websites that lousalternator occurs as high as possible on the list. Both of these errors are very easy to fix just by adding alternative text to the image and inserting a description of the webpage in the metadata description. 

Overall the website scored well overall but bad in performance. These changes can easily be made to improve the quality of the website and possibly create more traffic to the site. 

Linked here is a video I made explaining this post and my design suggestions. 

{% youtube zD4J2EMDXqY %}

References
[Secure your site with HTTPS](https://developers.google.com/search/docs/advanced/security/https)
#Week 7/14 : 100 Days Of Code
Tags: devjournal, 100daysofcode
Published: 2021-02-15 04:16:00

---
series: 100 Days Of Code
---

# Day 43

I'm a little stressed about tomorrow - I promised to build a preliminary model. My model takes too much time to train and follows a data driven approach. Machine Learning isn't as simple as I thought 😂 - there's an intuition which can be developed only with practise. I read up more research papers [here](https://github.com/smrut1r/predictive-maintainance). 

I also did a few easy leetcode questions:
1. Floyd's Cycle Detection Algorithm
2. Right view of a binary tree

# Day 44

Yay and Ugh :( Visit got postponed to the day after. I didn't finish making the model. I made 1 more power BI visual which will help display the excel tables as it is. We can select particular rows and columns to display as we choose. Semester exams looming in the horizon.......How will I manage exams and ML models?😂

# Day 45

Started learning microcontrollers for semester exam. We have to learn about the 8051 microcontroller. Microcontrollers are single purpose devices with RAM,CPU,ROM,I/O and timer all on a single chip. There are soo many bock diagrams to learn by heart:(

I also made another visual using Tableau which shows a block diagram relationship of various entities.

# Day 46

Went to demo the model which didn't finish training. They are really nice, friendly and supportive people and gave me suggestions to improve my model.
1. Correct the window_length and other parameters to consider data for past 2 weeks
2. Make a new feature that will give the probability of equipment failure and test. This seems like a good suggestion. I wonder how we do that though? 
I have to get it done by day after.

The oil refinery is like science fiction. Everything's so beautifully constructed in perfect geometrical equilibrium with so much metal everywhere. It's very unlike what I imagined.

# Day 47

Learnt more about 8051 microcontroller. Checked out cumulative and exponential moving average. Agreed to take a session on a few coding problems...wait..did I just agree to do that? Meh! It cant be that hard.

# Day 48

Did more work on exponential moving averages. I selected 4 features and decided to take the percentage change of the features...I need to make a probability formula that would predict the failure.

# Day 49

I couldn't make a probability formula which accurately captures the relationship for failure. I'm exploring other options now. I came across an amazing python library sktime designed especially for working with time series. I loved it.

One major difference is the way you pass input into the functions of this library. Normally we pass dataframes as inputs. Here each row is the Dataframe is an array.
```
     X
[,,,,,] 
[,,,,,]
[,,,,,]
```

Until next time,
Bye!
@stratospher