teleren/devto huggingface dataset:
Creating a New React App
Tags: react, commandprompt, webdev
Published: 2021-03-22 16:04:05

In this post, I'll be taking you through a simple way to set up a new React App.

First, you'll need to install Node.js. If you're not sure if you have it you can check using Command Prompt or Terminal.

If you've never use the Command Prompt or Terminal before, it is an application which will already be installed on your computer. To find it on a PC, go to the start menu and begin typing 'Command Prompt' - it will display in the menu. To find it on a Mac, go to Spotlight and begin typing 'Terminal' - the icon will display.

To check if you have Node.js type 'node -v' in the terminal and press enter.

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

If Node is already installed on your machine, the version will be displayed in the line below. 

If you don't have Node installed, you can download it from <a href="https://nodejs.org/en/download/">here</a>. Download and install the LTS version. Once you have Node installed, you can create a new app using npm.Back in the Terminal, navigate to the folder in which you want to create your app. If you've not done this in the Terminal before, preface the path with 'cd'. For example, if I wanted to navigate to a folder called GitHub in my Documents folder, I would type 'cd documents/GitHub'.

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

This will take me to 'C:/Users/laura/Documents/Github.

Next, type 'npm install -g create-react-app'.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ma8z2c185okp498s395.png)

Then, type 'create-react-app my-app'. The 'my-app' part of this command is the name of your app so you can call it whatever you like. Press enter, this may take a couple of minutes while npm creates the files.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iu53iwur143oqg1m9rc.png)

Navigate to your new app by typing 'cd my-app' (or whatever you've called your app).

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

Enter 'npm start'. This will open your app in a local server. 

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

To begin with, it will display the default React App which will look something like this -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/noslodi5sd4x20h8gayl.jpg)

Open up the folder holding your app files either in file explorer or in your Text Editor. Go to the 'src' folder - you can delete all of the files in this folder.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4a8ov5orvevpcznx8yqs.jpg)


In the public folder, you will find an 'index.html' file. You can either keep this file or replace it with your own but it is set up with a root div and has some useful meta tags already set up so I tend to keep it.

You can then create new a new index.js file in the 'src' folder and begin building your app from there.
Building my first website
Published: 2021-03-22 15:19:58

I got through phase 2 learning Ruby Sinatra and I just finished my final project, building out a CRUD. I decided to make my website theme on anime. The user can create a new post by searching up a anime name and then add there review, current eps and there rating. They then can either edit there post or delete it. I watch a lot of anime, so I though it be cool to be able to make a list of all the anime's that I have seen in the past and that I'm currently watching. 

What I have learned from going through this phase was, I have a better understand on how databases work and how to use them. Using Active Record with Ruby really helps take a lot of stress out of having to write out all the sql. I also got a better understanding on url paths GET and POST with PATCH And DELETE. I will be moving into Ruby on Rails in my next phase which will really help take a lot of the set up out that I had to do with Sinatra.
Proposing a new way to write JavaScript.
Tags: vscode
Published: 2021-03-22 15:07:39

I created a VSCode extension that uses a lot of the ideas here check it out: [VSCode Deno Notebook (Denote)](https://dev.to/reggi/vscode-deno-notebook-48kp).

> **TLDR**: Want to make a VSCode extension that abstracts away the filesystem and allows you to focus on writing individual functions. 

NPM and Node.js changed the way we write JavaScript, we think of the familiar hierarchy in files and folders. I think that this leads to really chaotic code, and hard to understand folder structures. 

Rails wasn't the first to be highly opinionated about folder structure, but it did lead to things being pretty easy to pickup and understand.

JavaScript is not rails, JS can be used for many different application that break the MVC mold. 

I have a supreme frustration and anxiety about composing code. I would love to never think about where my code lives again. I don't need to know what file a piece of code belongs in. 

My idea is to use a VSCode extension to abstract away where the code lives and allows you to focus on just writing the individual parts, the functions.

I put to together how I see this vision in a mockup here:

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

The idea is that an entire project is a set of nested functions.

Each function appears in a box. You have tabs on how you can interact with that code, they could include test, which would "flip" the function code to a callback function to test the code. Another tab is "example" which would take the function and pop it into an example, hitting a "run" button would allow you to execute it directly in the terminal.

A "publish" tab could allow an author to fill in NPM package data and publish that function directly to NPM.

## Organization

> I've put up a demo of what the folder / file structure would look like. https://github.com/reggi/isolation-project 

One method I've thought about is that each "function" can have a name in the screenshot `Example.HelloWorld`. The function is stored where in the file system and added as a static method to the `Example` class, created by the extension. 

In addition to this, you could also add it to other "namespaces", for instance `Greeting.HelloWorld`. If you add this, the `this` type would automatically change to be `this: Example | Greeting`. Now sibling methods can easily access the function as `this.HelloWorld`.

Posted this idea on StackOverflow:

[Using VSCode text editor within webview?](https://stackoverflow.com/questions/66748836/using-vscode-text-editor-within-webview)

This is the early steps of this idea, please let me know if this interests you reach out on twitter https://twitter.com/thomasreggi.
React - Side pane
Tags: javascript, react, component, showdev
Published: 2021-03-22 14:43:43

Hello there, fine devs ! First post and first NPM package released into the wild :rocket::tada:. In this article, I will present to you this new package: 

{% github RomainCoudour/react-side-pane no-readme %}

# Motivation :fire:

This little project started at [Aitenders](https://www.aitenders.com/) as a more modern and nicer way to display data and propose additional actions to our users.

I am a full-stack dev working at [Aitenders](https://www.aitenders.com/) and we have several features that display a lot of data and often request multiple user interactions. The way we did things at first resulted into a bloated, non-fluid, definitely not user friendly and high cognitive complexity views. At that point, we decided to revamp our views to be more user-first. We decided to add a side panel to our component collection as an nice alternative to display data. Facing the lack of 'compliant' solution, I developed one.

What differs from another side panel lib is that we handle the overlapping of side panels/side panes. And at the moment, this package is mostly a react-right-side-pane :smile: (yup, it's a right-to-left only pane for now).

Thanks to [Aitenders](https://www.aitenders.com/) for letting me open-sourcing this component.

# Live demo :rocket:

{% codesandbox react-side-pane-giu40 runonclick=1 %}

# Limits and open-sourcing :heart:

This package is built upon React Portals and React Transition Group. Which means you will need React >= v16.6.0. It is not supported on IE (any version). Regarding Portals, we will see at usage if we need to bring in an alternative. Everything you need is in the README.md.

I am well aware that is not going to revolutionize the world but nonetheless I am proud of my little package :smile:. The repository is only at its beginning so if you want to contribute or if you are confronted to any limitation, feel free to fork or open an issue.

Hope you will like it as we do at [Aitenders](https://www.aitenders.com/). Feedbacks and comments are more than welcome.
See you out there !
SomeThing About CSS - Some CSS Things I Learnt
Published: 2021-03-22 14:25:43

Small-Small Things Like

1. **Box Shadow** 
2. **Good Font**
3. **Border**
4. **Border Only on One Side**
5. **Hover Effect**
6. **Transitions**
7. **Transform**
8. **Filter: Grayscale**

can Actually Make your UI Look Really Good

Few Things I Learnt (I will made more)

**Making Div At Center (From Left Right) Mostly Used in Container**
```css
.container {
    margin: auto;
    width: 500px;
}
```
I tried building a simple VS Code extension
Tags: vscode, extension, whatsapp, codereview
Published: 2021-03-22 14:22:15

I tried building a simple VS Code extension and published it on the Visual Studio Marketplace. You can install it for your VS Code too.

WhatsApp Code is a VS Code extension which can be used to send your code snippet directly from VS Code to friends via WhatsApp for quick help. There might be(surely) a few(lot of) bugs in this, but do try it out and give your feedback for the extension. I'd love to hear more about the features that can be added to it and may be we can work on it together too.

Link - https://lnkd.in/dfZb2FD
How WooCommerce Helps You To Grow Your e-Commerce Store
Tags: woocommerce, ecommerce, development
Published: 2021-03-22 14:15:05

The world of e-commerce has evolved to an extent that lets businesses of all scales implement high-end e-store functionalities with plugins, extensions, universally compatible source-code, etc. in a matter of seconds. WooCommerce is one such open-source plugin built for WordPress websites that augments the functionalities of a basic eCommerce store. Since its inception, 2.3 million e-commerce stores across the globe are reaping the benefits of WooCommerce, according to a survey. It drives true authenticity with simplicity yet highly flexible features. In this blog, we talk about some of the prominent advantages that businesses are leveraging with this plugin:

**What does WooCommerce do?**

WooCommerce offers basic store functionalities pre-packed in a bundle from the plugin repository of your development dashboard. It also includes available loads of extensions that offer incredible functions right out of the box.

**Benefits of WooCommerce**

Following are some of the basic features and advantages that a WooCommerce plugin offers you:

**Feature-rich Shopping Interface**

The WooCommerce plugin lets retailers tailor a customer-centric checkout process that helps provoke the buying conscience of the customer. 

**Integrated Payment Gateways** 

WooCommerce offers retailers the freedom to accept cash, direct bank transfer, and popular wallets and major credit cards and other alternative payment mean. It also lets retailers configure popular payment gateways like Stripe with the help of a Setup Wizard.

**GPS and Automated Taxing**

WooCommerce offers you the ability to activate geolocation whenever you like. It also lets you set up automated taxes. Your products will show the right price,  with taxes for your customers, from everywhere in the world. 

**Seamless Checkout Process**

Woocommerce lets retailers control the checkout processes from start to end. In case, you prefer to sell in certain geolocation you can set up your flow URLs, while also enabling guest checkout as well as a secure checkout.

**Range of supported currencies**

A range of acceptable currencies in the modern era gives customers the freedom to pay via the medium that they’re most comfortable with.

**Redirect Cart- Adds Flexibility To The Cart**

WooCommerce lends CMS websites a hassle-free transition from product page to cart page once all products are added. It is touted to have reliable indexing techniques backed by data science and can cater to over 12,500 technology products, including e-commerce.

The wooCommerce plugin helps streamline eCommerce in the ever-competitive & dynamic eCommerce industry. However, entrepreneurs need to avail [website design and development services](https://www.datamatics.com/digital/digital-experience/web-development) with the right expertise to make the entire endeavor attuned to customer satisfaction and retention. So, get started with your brand new online store and watch your sales boom.
RXJS in consistents in 3 things
Published: 2021-03-22 14:09:04

<i>3 things only for me</i>
RXJS is library javascript making async calls and implements a callback, and a lot of type in rxjs, but I'm going to share just I know it there are three things in rxjs 
 
<ol>
<li>Observable</li>
<li>Data Types, Observer, Schadulers, Subject</li>
<li>Operators</li>
<ul>
<li>Array method</li>
<li>map</li>
<li>filter</li>
<li>reduce</li>
</ul>
</ol>

in three things above will help us in data Streams


<i>Thanks</i>
<i>Correct Me If I Wrong</i>
why you should not be too quick at judging people by their GitHub activity stats ?.
Published: 2021-03-22 14:13:29

Hello,

I am a supporter of the opensource movement and I truly admire people like Eddie Jaoude, Matt Cowley and all other open-source maintainers who work hard every day so that we could have awesome software! 🙏 I strongly encourage everyone to be active in the open-source world and make meaningful contributions. If you are new to the open-source world, make sure to follow Hacktoberfest! With this post, I aim to raise awareness and show you why you should not be too quick at judging people by their GitHub activity stats as they can be easily manipulated.
https://creditcardsupportx.com/menards-credit-card/
https://creditcardsupportx.com/qvc-credit-card/
https://creditcardsupportx.com/lord-and-taylor-credit-card/
thanks
jackyjoy
📣 Free Weekend at Vue School!
Tags: vue, javascript
Published: 2021-03-22 14:12:01

We’re unlocking [The Vue.js 3 Masterclass](https://vueschool.io/free-weekend/) to watch for free. Learn how to build a real-world application from scratch with our signature course and explore the latest Vue 3 features.

The course is worth $329 and it will be free for a weekend only (27th - 28th March 2021)! 

Reserve your spot today! You’ll also get access to an exclusive discount 👇
https://vueschool.io/free-weekend/
Método forEach - JavaScript
Tags: javascript, tutorial, webdev, beginners
Published: 2021-03-22 14:05:13

O método **forEach()** executa uma dada função em cada elemento de um array.

---

## **Parâmetros**

**callback -** Função passada como referência, será executada a cada elemento do array. Esta função pode receber 3 argumentos.

&emsp; **element -** O elemento que está sendo processado no array. 

&emsp; **index -** O índice do elemento atual que está sendo processado no array. (Opcional)

&emsp; **array -** O array para qual **forEach** foi chamada. (Opcional)

---

### Sintaxe

```jsx
numbers.forEach(functionCallback);
```

---

## **Retorno**

O método **forEach()** sempre retornará **undefined**.

---

## Exemplo

Imprimindo o valor e o index de cada elemento

```jsx
const numbers = [10, 6, 8, 19, 18, 20];
function printNumber(number, index) {
	console.log(`Index: ${index}  |  Value: ${number}`);
}

numbers.forEach(printNumber);
// logs:
// Index: 0  |  Value: 10
// Index: 1  |  Value: 6
// Index: 2  |  Value: 8
// Index: 3  |  Value: 19
// Index: 4  |  Value: 18
// Index: 5  |  Value: 20
```

<a href="https://www.notion.so/elianbecali/forEach-e3fe1b304dce4e11b3aed9b57a01fba1" target="_blank">Método forEach | Notion
</a>
<a href="https://www.youtube.com/watch?v=dZCZ-vZa1Xk" target="_blank">Método forEach | Youtube
</a>
Finding a remote job you love. What makes it so hard?
Tags: discuss, startup, remote, watercooler
Published: 2021-03-22 14:01:33

Hey everyone!

There are tons of remote job boards, yet I believe all of these websites have a fundamental problem. None of them provide accurate, in-depth information about the companies that put up the listings.

There's no way I can compare:
- great remote companies that I never heard of
vs.
- popular companies that are only partially remote

At best, all I have is a brief description of what the company does and a link to their website.

Rather, I want to know:
- whether a company truly hires globally
- how long & how effectively have they been working remotely
- what kind of remote perks do they offer
- what kind of remote culture do they have

The amount of time you spend on researching remote companies is huge.

**What is your biggest problem with remote job boards right now?**
Help Wanted: Do you have a Chromebook and want to contribute to DEV?
Tags: opensource, help, a11y, frontend
Published: 2021-03-22 14:01:28

The Forem team recently opened an accessibility issue that requires a Chromebook for further investigation. 
This issue highlights a problem where content that is animated from an `opacity: 0` is not read by the ChromeVox screen reader. ChromeVox is the built-in screen reading software for Chromebook.

Before a team member takes this issue, we wanted to open it up to the community for contributions. 

We would love help from anyone who is interested in accessibility and has a Chromebook available for testing. 

## Details:
- This is a [good first issue](https://github.com/forem/forem/labels/good%20first%20issue) if you have never contributed to open source before. 
- A potential solution is already included in the issue
- By helping us with this issue, you will help make Forem more accessible!

If this sounds like something you would like to work on please comment on the issue in GitHub👇.
{% github https://github.com/forem/forem/issues/12939 %}

We would be happy to answer any questions you have there!
Get Kontent Project ID from the Management API key
Tags: jwt, api, decode, webdev
Published: 2021-03-22 14:00:03

*It is possible to parse out Kontent Project ID out of the [Management API Key](https://docs.kontent.ai/reference/management-api-v2#tag/API-key-scope-and-validity). That means no more necessity to ask for two keys for your Kontent tools.*

Do you develop any Kontent tool using [Management API](https://docs.kontent.ai/reference/management-api-v2#tag/API-key-scope-and-validity) and still ask for both - Project ID and Management API key? Following lines will help you to improve your UX as well as cleanout your code.

The management API key is just a [JWT token](https://tools.ietf.org/html/rfc7519) containing the payload (in between header with signature). So you could decode it i.e. by using [JWT.io](https://jwt.io/), And as a payload, you could see this:

```json
{
    "jti": "b6a9ee86bfdc41c89f20048c3baaba04",
    "iat": "1612535158",
    "exp": "1958135158",
    "project_id": "06c2b8951700013e5f3160283aff1100",
    "ver": "2.1.0",
    "uid": "usr_0vMrpCH2TkOK5oK3y3bKNS",
    "aud": "manage.kenticocloud.com"
}
```

The `project_id` could be used to identify the project with one modification. It is necessary to add dashes on appropriate places to respect the [GUID format](http://guid.one/guid).  

To do all of that, the code would end up looking like that (or any other language alternative) - or you just use a library like [jwt-decode](https://github.com/auth0/jwt-decode). But it is always good to know what they do.

```javascript
const managementApiKey = "ew0KICAiYWxnIjogIkhTMjU2IiwNCiAgInR5cCI6ICJKV1QiDQp9.ew0KICAianRpIjogImI2YTllZTg2YmZkYzQxYzg5ZjIwMDQ4YzNiYWFiYTA0IiwNCiAgImlhdCI6ICIxNjEyNTM1MTU4IiwNCiAgImV4cCI6ICIxOTU4MTM1MTU4IiwNCiAgInByb2plY3RfaWQiOiAiMDZjMmI4OTUxNzAwMDEzZTVmMzE2MDI4M2FmZjExMDAiLA0KICAidmVyIjogIjIuMS4wIiwNCiAgInVpZCI6ICJ1c3JfMHZNcnBDSDJUa09LNW9LM3kzYktOUyIsDQogICJhdWQiOiAibWFuYWdlLmtlbnRpY29jbG91ZC5jb20iDQp9.aEqGajw7e9m13lnID0z9PBCL0MytqYlvoYg_rwPfEJo";

const payloadBase64 = managementApiKey.split('.')[1];
const payloadBase64Cleared = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(
    atob(payloadBase64Cleared)
    .split('')
    .map((c) => 
        ('%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
    )
    .join('')
);

const payloadObject = JSON.parse(jsonPayload);

const projectIdWithoutDashes = payloadObject.project_id;

const projectId = 
    `${projectIdWithoutDashes.substr(0, 8)}-\
${projectIdWithoutDashes.substr(8, 4)}-\
${projectIdWithoutDashes.substr(12,4 )}-\
${projectIdWithoutDashes.substr(16, 4)}-\
${projectIdWithoutDashes.substr(20)}`

console.log(projectId);
```

> If you want to play with it - [check out this Codepen](https://codepen.io/simply007-the-sasster/pen/xxRvNoX).

*...and of course, I invalidated the showcased API key 🤞*
Run a Program(like App Server) like a SystemD Service
Published: 2021-03-22 13:59:45

A Very Simple Example of a SystemD COnfigured Service.
Inorder to run a Program like a Service in Background in 2 SImple Steps


Step1: Create a File inside Dir
`/lib/systemd/system/`
wiith Extension as `.service`

Step 2: Add the Service Details and Behaviour Etc like creating a Setting File to Tell SystemD what to do

```
#Section 1
# Provide Details like Description and After is Requried by Your Service i.e if it requires a Interface then below After is Helpfull.
[Unit]
Description=A Simple Poster App ( A Very Cheap Posting System like Twitter) User can Create Post, Delete Post, View Other Posts etc
Documentation=https://app.poster.com
After=network.target

# Section 2 
# ENV Variables can be created here
# Very VVV IMP `WorkingDirectory`
# Most Obvious Command How to Start the Program `ExecStart`
# `Restart` if the Program crashes due to some reason u have a failover.
# User Optional and Depending on Requirement.

[Service]
Environment=NODE_PORT=81
Type=simple
User=root
ExecStart=/usr/bin/node /usr/local/src/apps/app.poster_v2/app.js
WorkingDirectory=/usr/local/src/apps/app.poster_v2
Restart=on-failure

## When and Where this Service should Start
[Install]
WantedBy=multi-user.target
```


Example:
```

#File Content
[Unit]
Description=A Simple Poster App ( A Very Cheap Posting System like Twitter) User can Create Post, Delete Post, View Other Posts etc
Documentation=https://app.poster.com
After=network.target
 
[Service]
Environment=NODE_PORT=81
Type=simple
User=root
ExecStart=/usr/bin/node /usr/local/src/apps/app.poster_v2/app.js
WorkingDirectory=/usr/local/src/apps/app.poster_v2
Restart=on-failure
 
[Install]
WantedBy=multi-user.target
```
Do you know the scroll-snap-type CSS property ??
Tags: css, tutorial, dev
Published: 2021-03-22 13:37:53

The CSS scroll-snap-type property allows you to lock the viewport on certain elements or locations after the user has finished scrolling. I venture to say that this will be the future (or already is the present) of the slides.

For example: A user browsing a photo gallery probably doesn't want to scroll halfway through an image - they probably prefer the image to "snap" to the right position while scrolling.

I will leave a [Codepen Link](https://codepen.io/bernardxf/pen/BapBJGw) for better viewing.

##References:
[CSS-TRICKS](https://css-tricks.com/almanac/properties/s/scroll-snap-type/)
[Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type)
[Caniuse](https://caniuse.com/?search=scroll-snap-type)