teleren/devto huggingface dataset:
Make a basic discord bot in discord.js
Tags: javascript, node
Published: 2021-05-25 18:28:13

## Creating the bot
Go to the <a href="https://discord.com/developers/applications">discord developer portal</a> and click on <b>create new application</b>. Now choose the name and click <b>create</b>. Now click on <b>Bot</b> and click <b>add bot</b>, next click <b>yes, do it</b>. 

## Inviting the bot  
To invite the bot, click on oauth2, then choose the bot scope now scroll down and give the bot the admin permission. Now copy the link and paste it into your browser and you will be able to invite it to any server you own. 

## Basic commands
Open up your text editor of choice and execute 
<code>
npm init -y && npm i discord.js 
</code>
Explanation: <code>npm init -y</code> creates our package.json and <code>npm i discord.js</code> installs the discord.js libary in order to interact with the discord api. 
Now create a file called <code>index.js</code> and paste in the following code:
<code>
var discord = require("discord.js"); // imports the discord.js libary
var client = new discord.Client(); // this is the main way we interact with the discord api   
client.on('ready', () => { // executes when the bot is online
    console.log("Bot online")
})
client.on("message", (msg) => { // executes on a new message
    if(msg.content === "!ping"){
        msg.reply("pong")
    }
})
client.login("your-token") // replace "your-token" with your bot token from https://discord.com/developers/applications
</code>
Now replace "your-token" with your bot token from the <a href="https://discord.com/developers/applications">discord developer portal</a>. Next, run the following command:
<code>
node index.js
</code>
You should see in the console: <code>Bot online</code> and if you send <code> !ping</code> in your discord server with the bot you'll see the bot reply with pong.

More tutorials coming soon!
Python One Liners Book Review
Tags: python, books, tutorial
Published: 2021-05-25 18:17:34

# Review Of Python One-Liners: Write Concise, Eloquent Python Like a Professional
In our [latest review](https://www.iceorfire.com/post/python-one-liners-book-review), we cover Christian Mayer's Python book on writing concise one-liners. Will you be able to up your Python game with this book?

# Support Me
If you find these posts helpful, please consider [buying me a coffee](https://www.buymeacoffee.com/z4F8QVS6w). Thanks!
COVID-19 Healthcare App Challenge - hack to help underserved communities 
Tags: hackforgood, hclocatorsdk, iqvia
Published: 2021-05-25 18:06:41

The pandemic has struck hardest among communities that were already struggling. Here’s your chance to do something about it.  If you’re a developer or know someone who is, enter the global COVID-19 Healthcare App Challenge to create an mHealth app that makes a difference for those who need it most. Register at https://healthcareappchallenge.devpost.com/ now to support a great cause!
Ways to Build a Mobile App - Hybrid Development
Tags: android, javascript, ios, webdev
Published: 2021-05-25 18:03:23

Hybrid development has been growing in popularity over the years. This methodology relies on web technology Javascript

With a hybrid app, you can write the code just once and deploy it on multiple platforms. Unlike low-level coding, you won't necessarily need to hire more than one developer. Any web developer who knows how to write Javascript should be able to create a hybrid app.

The same code can be used to deploy your app on Android, iOS, and other platforms.

React Native, Cordova on PhoneGap, lonic, and Titanium from Appcelerator are some of the most popular hybrid development tools on the market today.

You'll still have lots of custom control over your app with a hybrid build. But since you're using Javascript instead of native code, the performance will be slightly below low-level coding. Again, this won't matter for most apps. But if you're building a game or a similar type of app, hybrid development might not be the best choice for you.

Due to the low cost, quick development time, and flexibility of these apps, hybrid development is very appealing to businesses and entrepreneurs who want to get their app to market as quickly as possible without sacrificing quality.
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-05-25 18:02:19

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## A (truly) friendly reminder

Huge shoutout to @annaspies for acting as the coding therapist we all need with this reminder that taking time off is truly essential. Repeat after me: if _you can't pour from an empty cup and you can't code with a fried brain_. 

P.S. Extra shoutout to the gorgeous [Alvord Desert](https://traveloregon.com/things-to-do/destinations/parks-forests-wildlife-areas/the-alvord-desert/) in Oregon that Anna mentioned. I love it there!

{% link https://dev.to/annaspies/a-gentle-reminder-to-take-a-vacation-4ffn %}

## This isn't a popularity contest

... and thank goodness for that! In this article, @maureento8888 reminds us that the most helpful lists of dev resources don't just contain popular tools, they contain vetted ones that the author stands behind.

{% link https://dev.to/maureento8888/realistic-list-of-web-dev-resources-253c %}

## Allow us to console you...

The JavaScript `console` object has a number of methods that can be very useful for debugging —  @daryllukas outlines a few of them.


{% link https://dev.to/daryllukas/you-can-do-more-than-just-console-log-598a %}

## Brain candy

Reading helps us unlock fresh perspectives that improve everything we do... including software development. Appreciate the recommendations, @danytulumidis!

{% link https://dev.to/danytulumidis/3-books-that-will-improve-you-as-a-developer-2aam  %}


## Discipline is the only way forward

Ad you have it in spades, @chiaraintech! Congrats on completing this 50 in 50 challenge!


{% link https://dev.to/chiaraintech/50-projects-in-50-days-5-5-there-3fb2 %}


## A download on session storage 

A great primer on session storage from @arikaturika 🔥 

{% link https://dev.to/arikaturika/javascript-session-storage-beginner-s-guide-1i5e %}

## Don't compare yourself to fictional ideals ❤️ 

@codemouse92 came through with a helpful and detailed reminder that senior developers aren't all-seeing mystics. If you frequently compare yourself to more senior developers based on assumptions of what they are capable of, this is one goes out to you!

{% link https://dev.to/codemouse92/six-things-you-thought-senior-devs-did-but-we-don-t-3k6e %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Tech has a people problem
Published: 2021-05-25 17:36:03

You might have read that headline and thought I was going to talk about the shortage of people or the way that we cannot appear to train people up as required but this post is going to be far less complex than that.

It's less about people and more about men. It's small things, of which I have to admit I have done and still do when not being mindful. "Hey Guys", "what do you think about that guys" or "as you all know". Through to down right disgusting behaviour, watching a tech streamer where someone in the chat is suggesting that they should dress in a certain way, wear less or more revealing clothing. As you might guess, it was a female streamer. 

For a long period of my life I was always concerned about calling these things out, "It's just a bit of banter", "It's not meaning anything its just how they speak" or, possibly an even poorer excuse, "It's just cultural" all of which are just excuses for not speaking up and making a change for what is right, for how the world should be with everyone being given the respect and fairness that they all deserve despite their gender.

Everyone, in particular other men, this needs to be called out, never be afraid to speak out against these things, even the smaller things that might seem innocuous, call them out. The person might have just slipped into old habits, myself being a prime one for this, but thats still no excuse and unless told they cannot improve. You will often find that the simple act of mentioning will make the person correct themselves or bring out support from others around you.

If you are in any doubt as to the harm, pain, suffering this can bring feel free to have a conversation with your mother, sister, aunties, cousins ask them if they have ever been affected or experienced this behaviour and I'm pretty sure they will have at least one story to tell.

Think about the kind of world you would want your children, your nieces and nephews or your friends children to grow up in. Wouldn't it be great if people were just seen for who they are and what they bring to the world as opposed to objects or inferior.

Tech is the core of all business these days, how can we expect to build great things when we create a toxic environment for at least 50% of the population. Let's all stand with women to make the tech industry a positive and safe place to be. Let's further look to make all forms of diversity feel that tech is a positive and safe place to work and be around or we will find that our future will be very poor.
How Install WordPress with Docker
Tags: wordpress, mysql, docker
Published: 2021-05-25 17:06:54

### What you need in order to get this to work successfully.

- Docker
- Docker Compose

### Step 1:
This first thing that you need to do is to create a project folder to work in, and inside the project folder you create Docker Compose file.

Open a **Terminal** or **Command Prompt** inside the project directory and run the command below.
```sh
touch docker-compose.yaml
```

### Step 2:
Open the **docker-compose.yaml** file using a text editor of your choice.

### Step 3:
Write the code below inside the **docker-compose.yaml** file and save.

```yaml
version: '3.8'

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - '8080:80'
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wordpress:/var/www/html
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:
```

### Step 4:
Go back to the **Terminal** or **Command Prompt** shell that you opened earlier, and enter the command below.

```sh
docker-compose up
```
Docker Compose shall execute the script and install the WordPress and MySQL images from docker hub.
It will then go ahead and Spin up two containers, one for each image.

Wait for about 1 minutes after docker-compose shows **done** for both containers before you can load WordPress on your browser.

### Step 5:
Navigate to `http://localhost:8080` on your browser, and this is the page you should expect to see.

![Image](https://res.cloudinary.com/dgwsrfcyt/image/upload/v1621959797/README%20photos/WordPress_Installation_-_localhost_ojxb9s.png)


### Links:
Visit this [GitHub repository](https://github.com/omarageorge/wordpress_docker), it has everything you need.
Es6 Spread and rest operator in javascript
Published: 2021-05-25 16:40:34

Have you ever come across three dots such as …myVariable in a legacy code and wondered what in the world that is? Well you’re not alone bro. I’ve been there too. But don’t worry, what you saw was just another ES6 spread and rest operator that allows you copy or condense one or more iterables respectively into one variable.
 

In this article i would talk about ES6 spread and rest operator and how to use it to write a more readable code.

**Spread operator**

Before the Es6 spread operator, if we wanted to spread an array so as to combine them with another one, we would us the concat() array method to spread two arrays like so

```
const arr1 = [‘true’ , ‘false’];
const arr2 = [‘yes’ , ‘no’];
const addArr = arr1.concat(arr2)
console.log(addArr)
//Prints
[‘true’, ‘no’, ‘yes’, ‘no’]
```
But with the ES6 Spread operator all you need to do is
```
const arr1 = [‘true’ , ‘false’];
const arr2 = [‘yes’ , ‘no’];
const addArr = […arr1, …arr2]
console.log(addArr)
//Prints
[‘true’, ‘false’, ‘yes’, ‘no’]
```
You can also do the same with objects.
Lets say you have

```
const userData = {name: ‘kelechi’, age: 25, gender: ‘female’};
const userRole = {isAdmin: true, isLoggedIn : false};
const mySpread = {…userData, …userRole}
console.log(mySpread)
//Prints
{name: ‘kelechi’, age: 25, gender: ‘female’, isAdmin: true, isLoggedIn : false}
```

**Rest operator**

Even though rest operator has the same syntax as spread, they do the exact opposite thing. Strange right? Exactly. So say you want to bundle up different arrays as one variable, you should use the rest operator. While this explanation may seam daunting at first, i will use the ES6 destructuring assignment to show you how to understand it better.
in a nutshell, destructuring assignment is used to unpack the elements in an object to make it easier to access. You can read up more on java script destructing here.

```
const myData = [‘miss’, ‘kelechi’, 25, ‘female’, true];
const destructured = [title, firstName, …restData]
console.log(title) // miss;
console.log(firstName) //kelechi;
console.log(resData) //[25, female, true]
```

You see that we used the rest operator to access the rest of the data, ‘rest’ as the name implies.

In conclusion, spread operators are used to copy arrays in arrays or even objects into objects while rest operators allows you to bundle the rest of the elements in an array or objects in an element as one variable.
React Component Props example
Tags: react, component, props
Published: 2021-05-20 08:03:50

https://grokonez.com/frontend/react/react-component-props-example

React Component Props example

In this tutorial, we're gonna look at how to use React Component Props in a React example.

Related Posts:
- <a href="https://grokonez.com/frontend/react-helloworld-example">React Hello World example</a>
- <a href="https://grokonez.com/frontend/react-components-example">React Components example</a>
- <a href="https://grokonez.com/frontend/react-state-example">React State example</a>
- <a href="https://grokonez.com/frontend/react-note-application-react-example-with-react-props-state-example">React Note Application – React props and state example</a>

<!--more-->
<h2>I. React Component Props</h2>
When we need to pass immutable data to a component, we use <code>props</code>.
<h3>1. Props with Class Component</h3>
We use this syntax to pass <code>data</code> as a props <code>element</code> to a class template:
<pre><code class="language-javascript">&lt;MyClass element={data} /&gt;</code></pre>
To get data from props, use <code>this.props.data</code>.
For example:
<pre><code class="language-javascript">class NoteApp extends React.Component {
    render() {
        const jsaDescription = {
            'd1': 'Java/JavaScript Technology',
            'd2': 'Spring Framework'
        }

        return (
            &lt;div&gt;
                &lt;Header description={jsaDescription} /&gt;
            &lt;/div&gt;
        );
    }
}

class Header extends React.Component {
    render() {
        return &lt;h4&gt;{this.props.description.d1} - {this.props.description.d2}&lt;/h4&gt;;
    }
}</code></pre>
<h3>2. Props with Function</h3>
<pre><code class="language-javascript">class NoteApp extends React.Component {
    render() {
        const jsaTitle = 'Java Sample Approach';

        return (
            &lt;div&gt;
                &lt;Title title={jsaTitle} /&gt;
            &lt;/div&gt;
        );
    }
}

function Title(props) {
    return &lt;h2&gt;{props.title}&lt;/h2&gt;;
}</code></pre>
<h2>II. Practice</h2>
<h3>1. Overview</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/react-component-props-example-overview.png" alt="react-component-props-example-overview" width="683" height="420" class="alignnone size-full wp-image-11362" />

Using props, we will pass:
- <code>title</code> to <code>Title</code> element
- <code>description</code> to <code>Header</code> component
- <code>notes</code> array to <code>Notes</code> component, then each item of <code>notes</code> array to each <code>Note</code> component

More at:

https://grokonez.com/frontend/react/react-component-props-example

React Component Props example
gRPC llamadas asíncronas con FutureStub
Tags: grpc, java, asynchronous, nonblocking
Published: 2021-05-25 16:18:30

La documentación de gRPC nos muestra dos formas de realizar la comunicación con el servidor:

* _blocking/synchronous_
* _non-blocking/asynchronous_

Y el código (Java) generado para el cliente, se indican estos dos ejemplos de Stub.

```java
  blockingStub = RouteGuideGrpc.newBlockingStub(channel);
  asyncStub = RouteGuideGrpc.newStub(channel);
```

Con `asyncStub` debemos usar _StreamObserver_ para consumir la respuesta.

---
Sin embargo, dentro de las clases del tipo asíncrono tendremos la opción de usar el método **newFutureSutb**. Con él, adicionamos el control mediante _callbacks_.

El siguiente ejemplo, nos muestra este uso.

{% gist https://gist.github.com/edgargs/2d6fdc7909c5ac5c950a364d9784e928 %}


---
##Documentación
[Instantiating a stub](https://grpc.io/docs/languages/java/basics/#instantiating-a-stub)
WooCommerce Kassenseiten designen - Ultimate Addons for Elementor
Tags: wordpress, astra, elementor, woocommerce
Published: 2021-05-25 18:49:47

---
title: WooCommerce Kassenseiten designen - Ultimate Addons for Elementor
published: true
date: 2021-05-25 16:12:12 UTC
tags: Wordpress,astra,elementor,WooCommerce
canonical_url: https://j0e.org/woocommerce-kassenseiten-uae/
---

![WooCommerce Kassenseiten mit Ultimate Addons for Elementor anpassen](https://j0e.org/wp-content/uploads/2021/05/woocommerce-kassenseiten.png)

 Wenn du einen Online-Shop besitzt, weißt du wahrscheinlich schon, wie wichtig eine effektive Checkout-Seite ist. …

[WooCommerce Kassenseiten designen - Ultimate Addons for Elementor](https://j0e.org/woocommerce-kassenseiten-uae/)
Decorate Swagger DTO Descriptions for @ApiProperty() Dynamically?
Tags: nestjs, swagger, documentation
Published: 2021-05-25 15:50:39

Hello,

I am trying to figure out if there is a way to dynamically add descriptions to a Nest.js DTO @ApiProperty() decorator property.

Take this example for instance:

import { SomeDataFetchingClass } from '../some-dir/SomeDataFetchingClass';

export class SomeDTO extends AnotherClass {
  @SomePropertyOne()
  @ApiProperty({ description: 'I am a description set manually.' })

  @SomePropertyTwo()
  @ApiProperty({ description: SomeDataFetchingClass.fetchPropertyTwoDescription() })
}

The above example shows how I am trying to dynamically set the @ApiProperty() description property for @SomePropertyTwo().  I have created a class that fetches data from a remote api then returns a string to this description property.  The problem I'm running into is that when the nest.js project runs it's bootstrapping process I cannot seem to get the application to wait for the data fetching class to resolve with the remote data in order to populate the description prop.  

My question to the community would be:  Has anyone else successfully documented their swagger api documentation dynamically rather than setting each property's description value manually?  Any suggestions would be gratefully appreciated.

Thanks
Edit remote files with Vim
Tags: vim, linux, codenewbie
Published: 2021-05-25 15:39:59

[Vim](https://en.wikipedia.org/wiki/Vim_(text_editor)) is a text editor with a huge following. It's installed by  default on every Linux system and even on Mac OS X.

Vim is a tool that wants you to succeed. if you want something to happen, you can make it happen. It works completely by keyboard shortcuts. 
 
![vim editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7enhxyxmhku4cjrqo5cf.png)

It gives you the power to manipulate text at a fundamental level. you can operate on individual characters, words or lines of text this gives vim a really powerful interactive feel.

If you are new to vim, I recommend [these exercises](https://vim.is)

## Remote files with vim

I am often connecting to remote machines and editing config files. 

This was cumbersome, as I would have to use SFTP to copy files, manually updating the buffer when the file was modified on the remote machine. 

It was too easy to get distracted and lose track of what I was doing.


If you want to edit files on a remote server, try this command:

```
vim scp://you@remote_ip//path/file.txt
```

and change username to your username, your remote ip, the path and the filename.

```
vim scp://frank@192.168.2.7//home/frank/hello.txt
```

If you have vim open, you can also do `:e scp://you@remote_ip//path/file.txt`

You can use sftp too:

```
vim sftp://user@remote_ip//path/file
```

Change it with your username, remote ip and path to the file.

```
vim sftp://frank@192.168.2.7//home/frank/hello.txt
```

If you want to use the old unencrypted ftp protocol

```
:e ftp://[user@]machine/path/
```

Vim is relentlessly awesome. It does everything an editor should do and nothing it shouldn't. There are no gimmicks, no silly settings, no bloat. It just works. all the time. no exceptions.