teleren/devto huggingface dataset:
Passing methods through props
Tags: react, javascript
Published: 2019-11-04 12:25:48

---
title: Passing methods through props
published: true
description: How to pass a React class component method to children components
tags: reactjs, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20190924-passing-methods-props.jpeg
---

## How to pass a React class component method to children components

To add a method to a class component we simply create an identifier inside the class definition and assign a function to this identifier.
We typically assign an arrow function to the identifier that represents the name of the method.
Here's an example. We add the `toggleItem()` method to the `App` class component:

```js
class App extends React.Component {

  toggleItem = itemId => {
  }

}
```

But how do we pass this class method down the chain of components?
Say we need to use this method in a child component. We use the props object for this purpose.
In this example we have a `GroceryList` component that is a child of `App`.
When we mount `GroceryList` inside `App`, we also pass the `toggleItem` prop to it, that is set to the class method in the parent component referenced with the keyword `this`:

```js
<GroceryList
  groceries={this.state.groceries}
  toggleItem={this.toggleItem}
/>
```

If we have to pass `toggleItem()` further down to a child of `GroceryList`, we can reference the same identifier but in this case we need to reference it via props, because it was passed to `GroceryList` from `App` through the props object:

```js
// Inside GroceryList:

{
  props.groceries.map(item => {
    return (
      <GroceryItem
        item={item}
        key={item.id}
        toggleItem={props.toggleItem}
      />
    )
  })
}
```

We have seen a way for a child component to call a method defined in a parent or grandparent component.
How do I make paging with ordering by different columns ?
Tags: sql, database, postgres, webdev
Published: 2019-11-04 19:06:59

I need to sort out two sets of data. The order rules are followed by first `the column "id2" is null or not`. 

After sorting out, One set of data should be ordered by the column `dt2` when the column `id2` is null. The other should be also ordered by the column `dt3` when the column `id2` is not null. 

The tricky part is to combine two sets of data together.
I know ...`union all`... but how?


### Basic setup

```sql
-- create table

create table MyTable
(
	id bigint,
	id2 bigint null,
	dt2 date null,
	dt3 date null
)

-- insert value
insert into MyTable (id, id2, dt2, dt3) values 
(1, null, '2019-10-01', '2019-11-01'),
(2, null, '2019-09-05', '2019-11-02'),
(3, 1, '2019-10-12', '2019-09-28'),
(4, 2, '2019-10-02', '2019-10-28'),
(5, 3, '2019-09-30', '2019-11-03')


```


### Approach

1. divided by two different sets by `row_number()...over()`
2. `order by` its column 
2. `union all`
3. select and `offset...fetch next ... rows only`


```sql
select id, id2, dt2, dt3 from
(
	select id, id2, 1 as idc, dt2, dt3, row_number() over (order by dt3 desc) as rnum 
	from MyTable
	where id2 is null 
	union all
	select id, id2, 2 as idc, dt2, dt3, row_number() over (order by dt2 desc) as rnum
	from MyTable
	where id2 is not null
) as m
order by m.idc, m.rnum -- order by
offset 0 -- 0 is the skip count
fetch next 2 rows only -- 2 is the page size
```

> idc as a maker to tell whether id2 is null or not.

Thanks for your reading ~
Basics of the command line
Tags: commandline, terminal
Published: 2019-11-07 07:28:19

The command line interface is what developers use to navigate around their directories and manipulate files. This skill is critical for developers because it allows for greater control over your system, whether it's using npm to install packages and ruby gems, using git, or using it for direct control over your files. 

In this short lesson, it's assumed that you are either running a Mac or Linux based OS. They are almost 100% the same, and the commands I'm going to show you are definitely no different. Open up the terminal on your computer and we'll get started. 

###General structure

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vz8x1o42juv4qyhv2a59.png)

As you can see, this is the general structure of a command. What we need to look at here is the command, option, and argument. The command is the action taking place on the specific argument. Options are there to give additional instructions to the command, such as forcing a delete if there may be complications.

Whenever you see you a dollar sign with some text, this means that it's a terminal command, and whatever text comes after the the dollar sign is what you're going to type into the terminal.

###$ whoami

>$ whoami

This command displays the username of the current user.

###$ pwd

>$ pwd

This command is going to show you which directory you're currently in/accessing. It stands for "Primary working directory." 

###$ ls

>$ ls

This command allows you to list all the files of the directory you're accessing. 

###$ cd

This stands for "Change Directory", and it is how we maneuver around our system. If you wanted to go to a specific folder, you need to type out the path of the folder you want to go to, like so:

>$ cd /Users/Dan/Desktop/

If you knew your desired location was in this directory's parent directory, you can type:

>$ cd ..

If the directory is in the directory that you're accessing, you can type:

>$ cd ./[dir_name] 

###$ touch

>touch example.txt

This command allows you to create a file inside of the directory you're accessing. The file type needs to be specified.

###$ rm

>$rm example.txt

User giveth, and user taketh away. This is the remove command. It is able to delete a single or multiple files at once. In order to remove an empty directory, you can use rmdir, like so:

>$rmdir dir_name

If you wanted to remove non-empty directories, you can use rm with two options: -r(recursive) and -f(force):

>$rm -rf dirname
Call Github GraphQL API using c#
Tags: csharp, dotnet
Published: 2019-11-04 22:47:08

---
title: Call Github GraphQL API using c#
published: true
description: How to call Github GraphQL API using c# without dying while trying?
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6a7no3eqj2hwh604w5ta.png
tags: #csharp, #dotnet
---
***
*Welcome!* Spanish articles on [LinkedIn](https://www.linkedin.com/in/mpetrinidev/). You can follow me on [Twitter](https://twitter.com/mpetrinidev/) for news.
***

## GraphQL API V4

You can perform a request to any Github resource through the REST API (v3) or the new GraphQL API (V4). The advantage of using the last one is you can replace multiple REST requests with a single call to fetch the data you specify.

Through a Youtube video, I'll show how to call Github GraphQL API using c# without dying while trying.

_The sample covers the basis the get the login username (our account)_


### Endpoint

The REST API (v3) has numerous endpoints but the GraphQL API has a `single endpoint`:

> https://api.github.com/graphql

This endpoint remains constant no matter what operation you perform


### Authentication

To communicate with Github, you will need an OAuth token with the right scopes.

To create a personal token you can follow the steps in this page:

> https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line

#### Basic Authentication

We need to send the `personal token and the username` as basic authentication header in our request

```cs
string basicValue = Convert.ToBase64String(Encoding.UTF8.GetBytes($"{Configs.GithubAccount}:{Configs.PersonalToken}"));

httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", basicValue);
```

#### User-Agent header

All API requests must include a `valid User-Agent`. Request with no User-Agent header will be rejected so we need to add: 

```cs
httpClient.DefaultRequestHeaders.Add("User-Agent", "MyConsoleApp");
```

### HTTP Method

In GraphQL, you will provide a JSON-encoded body whether you are performing a query or mutation, so the HTTP verb is `POST` 

### Youtube video

{% youtube xSU1Sr_eYOQ %}


#### Github GIST

{% gist https://gist.github.com/mpetrinidev/dca981d2dfbc3ecf21b040829a2c0b8d %}
SEO urls for Opencart multi vendor pages on seller side
Tags: opencartmultivendorextension, opencartmultiseller, opencartmultivendor
Published: 2019-11-05 10:20:00

Opencart multi-vendor marketplace extension turns any Opencart Store into an Amazon-style marketplace. Our Opencart Marketplace extension has over 50+ features. Our feature-rich extension is the one-stop-shop where developers, teams or organizations can discover and acquire as well as offer multiple Vendors to sell their products and manage them from their personal dashboard, avail online payments, shipping gateways, 18+ language, give post-sales services, customer ratings, vendor profile and more on your marketplace extension. To know more about our extension, try our live demo now!

If you want to remove the link “purpletree_multivendor” from Purpletree multivendor sellers side pages. You can remove it by using the SEO URL. SEO URL will replace “purpletree_multivendor” with a multivendor that’s mean purpletree_multivendor works as multivendor. Opencart SEO provides various ways for improving the search engine ranking of a store. Let’s fix this.

Go to Admin > System > Settings > Edit > server tab > select Use SEO URLs “Yes” then save.

After using the SEO URL on your site if any other type of error occurs, so this means that you don’t have an htaccess file in your Opencart.
As you can see in the screenshot the “purpletree_multivendor” does not appear on Purpletree multivendor pages.

If your issue is still not solved or facing some other kind of problem-related to Purpletree multivendor, please raise a ticket with us from https://www.helpdesk.purpletreesoftware.com/.﻿
For more details please visit Purpletree Opencart Multivendor marketplace
Need a Suggestion
Tags: react, tutorial, opensource
Published: 2019-11-05 17:37:16


Hey Guys,
I have started learning React, and want to have a better learning experience with the developer community also. Therefore I am deciding on creating a React Tutorial Series here on DEV, where I will be explaining each React concept in detail, though I will also be learning at the same time. Also will be sharing some cool resources that will help in enhancing the React skills.

**So I just wanted the green signal from my beloved DEVIAN's if they will support  me in my cause?**

######Cover Image: Photo by Emily Morter on Unsplash######
What do you wish your clients understood better?
Tags: watercooler
Published: 2019-11-05 22:46:29

It's great to be hired as an expert, but sometimes it helps when clients have a vague concept of what the hell you're talking about.

For me, it's why they should look after their own domains, rather than letting their web companies handle it.

And maybe just a little bit about how SEO works.

What's yours?
Sero.Mapper presentation
Tags: csharp, opensource, mapper, lightweight
Published: 2019-11-06 03:57:03

I made **Sero.Mapper**, a simple lightweight alternative to AutoMapper, to help you write and organize MANUAL type transformations.

It's available via NuGet.

For more information and examples, please refer to the [github page](https://github.com/Agnael/Sero.Mapper).
How to Hire Senior Java Developers Using an ATS?

Tags: java
Published: 2019-11-06 06:33:41

Java is the most widely used programming language around the world. Every application possible uses Java nowadays. You need to find a java developer who can produce quality code and make your application neat and clean and easy to use.

You can define your criteria to measure the performance of your candidates and choose the best one amongst them. To do so, you can use a recruitment tool - Applicant Tracking System that can make your work even easier.

Here is the best way to find a senior java developer for your firm using an ATS - Applicant Tracking System.

Define Your Required Skills

If you want to grab the candidates exactly according to your requirements, you need to define your required skill set. You can configure these skills into your ATS and find the exact matching skills into the candidates. You can mention these skills in your Job Description as well.

Here are some of the important skills that every java developer should have:

1) OOP Concepts
2) Core Java Concepts
3) Desktop App Development Skills
4) Knowledge of Latest Java Versions
5) J2EE

Pre-screening Questionnaire

Pre-Screening questionnaires are one of the best tricks to know more about the theoretical knowledge of a candidate before going with a practical round of an interview.

You can pre-define certain basic questions to see if your candidates can fulfill your requirements with his answers or not. You can send these questions to your candidates using an ATS and have their answers directly stored in the system.

Workflow Customization

ATS allows you to have your own workflow and customize it according to your job titles. If you are looking for a Senior Java Developer, you can customize your workflow for your requirements.

Knockout Screening Questions

Knockout Screening would be very effective while recruiting a developer. You can set some questions and pre-define their answers into the system. If your candidate does not give you the pre-defined correct answer, he will automatically get the Rejection Mail.

So these were some of the ways you can hire a senior java developer using an ATS. You can even use your customized skill set that can help you to utilize your candidate database to the core.

Summary:

Here we mentioned the effective way to hire the java developer using an Applicant Tracking System that reduces your hiring time, cost and effort as well.
Welcome Thread - v47
Tags: welcome
Published: 2019-11-06 14:51:22

---
title: Welcome Thread - v47
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![pug waving](https://media.giphy.com/media/3oKIPsx2VAYAgEHC12/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Questions about Ruby?
Tags: ruby
Published: 2019-11-06 19:32:00

Good Afternoon Everyone,

I'm an aspiring self-taught developer who would really love to learn ruby and rails. I'm on the fence about learning it because I keep hearing contradicting statementing about the language. I have a few questions, and any help, knowledge, or advice would be greatly appreciated. 

1. What are some resources to learn ruby & rails? most of the information I've found is old/outdated.
2. Is the job market really as bad as people say for ruby devs?
3. Is there a roadmap that I should follow when learning ruby & rails?
4. Do I need to know JS before learning Rails?
5. On average how long do you think it would take to go from beginner to proficient in this language? 

Thank you again for any help.
#200in4days, Update 2
Tags: 200in4days, boardgame, crowdsourcing
Published: 2019-11-17 07:16:02

---
title: #200in4days, Update 2
published: true
description: What does not succeed could be a stepping stone for later improvements.
tags: 200in4days, boardgame, crowdsourcing 
---

Earnings: 0€ 

So far I have made nothing extra. Oh well.

Things I have done, however

- started a few conversations on dev.to
- made a bunch of new followers
- started a crowdsourcing project for a poetry book, which is something I have put off for a while anyway and I like creative projects too
I'm not linking to it here because it is in Estonian.
Docker + VMware on Windows: the easy way
Tags: docker, devops, windows
Published: 2019-11-17 12:54:39

> **August 2020 Update**: now that VMware Workstation can run with Hyper-V installed, there's a better alternative to running Docker on Windows 10. Check out [this guide](https://docs.docker.com/docker-for-windows/wsl/) for more information.

Docker is one of the most useful tools for a developer nowadays, but setting it up on a Windows machine can be really painful, specially if you don't want to enable Hyper-V and prefer to use another hypervisor such as VMware Workstation.

Fortunately, there's an "easy" way to do exactly that with [Chocolatey](https://chocolatey.org/), the self-proclaimed package manager for Windows. Let's get started!

First of all, we need to open a Powershell window with administrative privileges and run the following command to install the Docker CLI and the VMware Docker machine driver:

```
PS> choco install docker-cli docker-machine-vmware
```

As Docker is runtime-agnostic, we can create a custom Docker machine running inside a VMware VM instead of using Hyper-V and then connect that instance to the Docker CLI. Let's create the Docker machine:

```
PS> docker-machine create --driver=vmware default
```

This command will take a few minutes. After it's done, make sure it was successful by listing the available Docker machines:

```
PS> docker-machine ls

NAME      ACTIVE   DRIVER   STATE     URL                          SWARM   DOCKER     ERRORS
default   -        vmware   Running   tcp://192.168.142.136:2376           v19.03.5
```

Great, we're almost done! The final step is to tell the CLI to use this machine for any Docker-related commands:

```
PS> docker-machine env | Invoke-Expression
```

And that's it! Docker running on Windows using VMware Workstation instead of Hyper-V. Keep in mind you'll need to start the Docker machine and connect it to Docker CLI every time you boot your device:

```
PS> docker-machine start default; docker-machine env | Invoke-Expression
```


---

Last but not least, here are some relevant URLs you can visit to learn more:

- [Docker machine VMware driver](https://github.com/machine-drivers/docker-machine-driver-vmware)
- [Docker machines documentation](https://docs.docker.com/machine/get-started/)
Setting up a dev environment for Vue with Parcel and Babel
Tags: vue
Published: 2019-11-17 14:22:39

To set up a dev environment for Vue with Parcel and Babel it's very easy. First, you create a project folder named `vue1`. Inside of it you initialize a project with `npm init -y`. Then you install Parcel, Vue and Babel in that order (Parcel before Vue) with `npm i parcel-bundler parcel-plugin-clean-dist vue @babel/core @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props`. Then you edit your `package.json` file and add the following:
```javascript
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
```
Finally, you edit a '.babelrc' file:
```javascript
{
  "presets": ["@vue/babel-preset-jsx"]
}
```
That's it, you are good to go! 
Now you develop.
You can create a folder named `src` with the following contents:
--|src
&nbsp;&nbsp;&nbsp;&nbsp;--|components
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--app.js
&nbsp;&nbsp;&nbsp;&nbsp;--favicon.ico
&nbsp;&nbsp;&nbsp;&nbsp;--index.html
&nbsp;&nbsp;&nbsp;&nbsp;--main.js
`index.html` file will be as follows:
```javascript
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <title>my app 🥳</title>
</head>
<body>
  <div id="app"></div>
  <script src='main.js'></script>
</body>
</html>
```
`main.js` file will be as follows:
```javascript
import {App} from './components/app'

new App({
  propsData: {
    name: 'Vue.js'
  },
  el:'#app'
})
```
And `app.js` will be as follows:
```javascript
import Vue from 'vue'

export const App=Vue.extend({
  props:{
    name:String
  },
  render(){
    return (
      <div>Wellcome to {this.name}</div>
    )
  }
})
```
To start dev server you run `npx parcel src/index.html` and browse to `localhost:1234` to see your Vue app in action with life reloading.
To build your app you run `npx parcel build src/index.html`. This will create `dist` folder with output files in it that you can deploy into a hosting service.
Alternatively, you can write scripts `start` and `build` in `package.json` as `parcel src/index.html` and `parcel build src/index.html` and run them with `npm start` and `npm run build`.
Arcology Roguelike Lifestream E4
Tags: livestream, gamedev, unity3d, roguelike
Published: 2019-11-17 14:35:42

# Episode 4: Procedural General

I start out the video by fixing my error from the previous video and getting random room templates to display.

I continue the video by creating a number of additional Room Templates. I then also use a basic *Context Free Grammar* to create an algorithm for creating logic Levels.

The video ends with me generating a random level, that while not *perfect* is a pretty decent start for the Game.

{% youtube gccDhjEGXeI %}
Web Design references
Tags: webdev, design
Published: 2019-11-18 14:48:04

Ok, so you have an incredible idea to start developing a new project but you find yourself spending hours and hours trying to achieve a good looking layout but you feel like your ideas are never professional enough.

This is my mood in every single personal project I want to develop. I feel like I don't have a method and/or references to build something actually good looking (needless to say I don't have a background in design).

What references, resources, blog posts, etc etc etc help you guys to design your own layouts?
Feeling hopeless and discouraged
Published: 2020-03-27 20:38:47

TL:DR Im feeling very discouraged and left wondering if given the economic downturn that I should even bother with my plan, because my assumption is that no one will want to hire self taught people anymore, hope some self taught guys could weigh in on this.

Any chance a self taught guy can get a job as a full stack web dev in the current state of the world? To get an idea of where I am at and what I plan to do, I have already completed my first front end project using html/css+grid/JS(es5 but still learning fundamentals just to wrap my head around it) and will implement PHP in the form section in the next day or 2.

Since I am laid off and have a shit load of time on my hands because who knows when restaurants will re-open (Line Cook). The plan is then to simultaneously take a more advanced css/sass course as well as App Academy Open to learn some CS fundamentals, the MERN stack and SQL (I want to learn React over Angular or Vue and I might skip the ruby and rails section for now), after that I figure I should get at least rough understanding of c#.net and java just so I have a more lucrative skill set.

Is this a good strategy? I started to learn to code this September with C++ to learn Unreal as a hobby so I could specifically get into game sound design, but after having made a bunch of small terminal apps/coded in unreal/ made my first web project, I'm now just ironically in love with coding lol.......and now realizing how it may be my best chance to stay employed in the future.

I should mention that outside of the day job I was a freelance and in house audio engineer for years (mostly mixing/mastering), so I have a pretty solid foundation in not only using both Windows/Mac and JACK based applications in linux so Im not a total noob with computers/software.
I'm LOOKING FOR A CONTRIBUTOR PLEASE
Tags: laravel, vue, collabs, php
Published: 2019-11-18 18:43:36

---
title: I'm LOOKING FOR A CONTRIBUTOR PLEASE
published: true
description: I'm creating a Slack clone with laravel and nuxt.js
tags: #laravel,#vuejs,#collabs,#php
---
I'm creating a slack clone with laravel  with nuxt.js a vue js server side framework 
https://github.com/dimer22zhc/Slack-Clone-Nuxt-And-Laravel

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lb29gk0bjwqh0g7kri0b.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/woykn1h0wi24bhn0kxza.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nlo0s0nknj1adrp8d9im.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8tzjwvsicu6wcd25hpw9.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2m7ut2mdq58zokcobi1q.png)