teleren/devto huggingface dataset:
Upgrade your JSON Endpoints with GraphQL
Tags: javascript, graphql, tutorial
Published: 2020-05-31 08:44:25

GraphQL is awesome and you can save a lot of time while developing frontend (No callback hell) and I am going to teach you how to convert a RESTful API endpoint into a GraphQL endpoint in a very easy way. This could be your boilerplate for your already existing JSON endpoints. For this example I am choosing https://coronavirus-19-api.herokuapp.com/countries/ endpoint. However I am not covering deep concepts in GraphQL.

## Prerequisites:
      1/ REST endpoint (https://coronavirus-19-api.herokuapp.com/countries/{country}).
      2/ NodeJS. (graphql-yoga and good old node-fetch).


Let’s look at the basic structure of the endpoint.

https://coronavirus-19-api.herokuapp.com/countries/usa
Returns:
![JSON](https://dev-to-uploads.s3.amazonaws.com/i/rdmhniwwrg8c770gcfzw.png)

Now we know the API can accept a country(usa,india,germany.., etc,.) in the end to spit out data of that particular country.

Now we know for sure all the endpoints have a certain structure, this in GraphQL is similar to schema which are those objects that you can fetch from a service so it is clear we can query countries to obtain data from the JSON endpoint.

We are using the graphql-yoga from (https://www.npmjs.com/package/graphql-yoga) and we will modify the example they have here.(also has a hello world example).


We need to write anything in the endpoint to its data type. For example 
"country":"USA" will become country: String and the rest are clearly integers so its Int.

Congratulations you have done the first steps to convert a JSON’s endpoint to a GraphQL schema.

![Convert to schema](https://dev-to-uploads.s3.amazonaws.com/i/gmhbaku203toj0sagk72.jpg)
 
Now we are going to write the resolver for GraphQL. Resolvers are responsible for giving you the data from a remote endpoint. Essentially they are your query handlers.        

We have to supply a name for the query and arguments it can accept and in our case its the country and has type String. 

![Query and Resolver](https://dev-to-uploads.s3.amazonaws.com/i/0rtfh6m8ynw766l6nsq8.jpg)



Now it looks good and we can check out on localhost:4000

![GraphQL Playground](https://dev-to-uploads.s3.amazonaws.com/i/geahul1fez02ylj9abfx.png)
Success you have made it. Now we can use GraphQL on any front-end frameworks using the https://www.npmjs.com/package/apollo-boost. 

Here is the github repo of this post. https://github.com/peopledrivemecrazy/json-to-graphql

Enjoy.
Install git 2 on CentOS7
Tags: git, CentOS7
Published: 2020-05-31 08:36:35

The default git version is 1.18, how to upgrade it to git 2?
```
yum install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

sudo yum remove git*

sudo yum -y install  git2u-all
```

OK, it's done. Check the version now:
```
$ git --version
git version 2.16.6
```

Ref: https://ius.io/setup
https://computingforgeeks.com/how-to-install-latest-version-of-git-git-2-x-on-centos-7/
Experimental research on Cloud-Container-Workflow
Tags: cloud, container, java, devops
Published: 2020-05-31 07:59:13

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

Recently I have been doing experimental research on CloudSim: it is a simulator for Cloud Computing that writed by java and I have worked a long time on the other extensions of the Cloudsim like ContainerCloudSim and WorkflowSim.

That is all just for you:
https://medium.com/@arman.riazi.science
I Made it with ❤️ for you
ssh ผ่าน squid proxy ไป aws
Published: 2020-05-31 07:33:14

... สวัสดีครับ วันนี้ผมจะมาพูดถึงเรื่อง network ที่ทุกๆที่ มักมีท่าแปลกๆให้ access เข้าระบบ แบบนั้นแบบนี้ก็ว่ากันไป "เพื่อความเหมาะสม" ทาง security หรืออะไรก็ตามแต่ และสิ่งที่ตามมาคือทีม infra หรือ developer อย่างเราๆ นี่สิทำงานยาก เ_ี่ยๆ ..
... เรื่องมีอยู่ว่า.. "ย้ำนะครัช ว่านี่เหตุการณ์สมมติ" ใครที่คิดเยอะ! ขอผ่านได้เลยครับ...
... มี server อยู่บน aws แต่มีบาง account หรือ vpc หรือ subnet ที่ไม่ให้เชื่อมต่อ internet หรือทำการ remote เข้าไปใน zone พิเศษได้ พูดง่ายๆคือ ไม่ยอมให้ ssh remote กันง่ายๆ ไม่ยอมให้ client รีโมทตรงๆ ต้องผ่านสักอย่างมาก่อน จะ vpn ,Bastion host หรือ proxy หรืออะไรก็ได้ แต่ห้ามรีโมตตรงๆ .. ทางทีมได้ทำการปรึกษากัน และก็ได้ข้อตกลงว่า หากจะ remote ssh ไปล่ะก็ ให้ผ่าน proxy เท่านั้น เพราะขาที่เป็น aws จะ allow ให้เฉพาะ Proxy มันจะคร่าวๆดังภาพ

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/05eambqwa3l0atm3m0w2.jpg)

โอเคร เราลองมา test กัน ในที่นี้ผมจะ สมมติ ให้
VM-Proxy 10.11.0.11 คือ Proxy (Squid proxy) 
EC2      172.31.31.213 คือ Private ip ที่เราอยาก ssh ไป

และ กำหนดให้ VM-Proxy สามารถไปหา EC2 ได้(มันต่อ Private Link)
1. เริ่ม Install Squid Proxy ( Centos7 )
```
$> yum update -y
$> yum install squid
$> systemctl start squid
$> systemctl  enable squid
```
2. edit config squid
```
$> vi /etc/squid/squid.conf
เพิ่ม 
acl internet src 10.109.10.101  # <== จะ Allow ให้ ip ไหนใช้ proxy ได้บ้าง เพิ่มบรรทัดนี้ พวกนี้ อันนี้เป็น ip เครื่องผมคนเดียวก็ใส่ /32 ไป
acl localnet src 172.16.0.0/12	
acl localnet src 192.168.0.0/16

และ
acl SSL_ports port 443
acl SSL_ports port 22           #ssh  <== ตรงนี้
acl Safe_ports port 80		# http
acl Safe_ports port 21		# ftp
acl Safe_ports port 22          # ssh/sftp <== กับตรงนี้

```
จากนั้น ก็ Restart service 

```
$> service squid restart
```
เป็นอันเสร็จสิ้น  

จากนั้นลอง ssh ด้วย command
```
$> ssh -oProxyCommand='nc -X connect -x 10.11.0.11:3128 %h %p' ubuntu@172.31.31.213
```
เหตุการณ์ทั้งหมด เป็นเรื่องสมมติ หวังว่าหลายๆท่านจะนำไปประยุกต์ใช้งานได้ครับ
83/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-05-31 07:21:24

day 83/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about firebase instane add data, get data, Streambuilder
https://github.com/triyono777/100-days-of-code/blob/master/log.md
JavaScript Sort Array of Objects by Value
Tags: javascript
Published: 2020-05-31 07:02:30

Ever had an array of objects and needed to sort them based on a specific value?
This is an issue everyone will run into very often, imagine a price list of any table list.

## JavaScript Sort Array of Objects by Value

Let's start with the following array of objects:

```js
var products = [
  {
    color: 'white',
    price: 10,
    name: 'Basic T-shirt'
  },
  {
    color: 'red',
    price: 5,
    name: 'Cheap T-shirt'
  },
  {
    color: 'black',
    price: 50,
    name: 'Exclusive T-shirt'
  }
];
```

So, seeing this list, we already have a quick two options, we want to sort based on color and price.

How do we now sort this based on the values?

We can use the `sort` manipulator for `Arrays`.

```js
products.sort((a, b) => (a.color > b.color ? 1 : -1));
```

As you can see a straightforward function, it will sort based on color and replace values until it's done.
You can think of this function as a manual `if...else` loop, but then all done for you.

As for the price we can do the following:

```js
products.sort((a, b) => (a.price > b.price ? 1 : -1));
```

## Sorting on the second parameter

So let's say we want to sort on color, but if the color is the same, we want to sort on price.

```js
var productsPrice = [
  {
    color: 'white',
    price: 10,
    name: 'Basic T-shirt'
  },
  {
    color: 'white',
    price: 5,
    name: 'Cheap T-shirt'
  },
  {
    color: 'black',
    price: 50,
    name: 'Exclusive T-shirt'
  }
];

productsPrice.sort((a, b) =>
  a.color > b.color ? 1 : a.color === b.color ? (a.price > b.price ? 1 : -1) : -1
);
```

So the same setup, but we are using the callback function to check if the color is the same, we then need to check on price as well!

You can have a play with the following Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="wvKVPPJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript Sort Array of Objects by Value">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/wvKVPPJ">
  JavaScript Sort Array of Objects by Value</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
create \\
Published: 2020-05-31 06:55:16

Can any one help on below this? iam using windows 10

D:\test\react>npx create-react-app myreactapp

Creating a new React app in D:\test\react\myreactapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


> core-js@2.6.11 postinstall D:\test\react\myreactapp\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.6.5 postinstall D:\test\react\myreactapp\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.6.5 postinstall D:\test\react\myreactapp\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ react-dom@16.13.1
+ react-scripts@3.4.1
+ react@16.13.1
+ cra-template@1.0.3
added 1626 packages from 751 contributors in 195.115s
Beware of Mutation in Spread & React Hooks and How Can You Fix It
Tags: javascript, react, lodash, mutation
Published: 2020-05-31 06:17:56

## Shallow copy

We can use spread operator to clone objects. But beware that it only does a shallow clone: you get a new copy of the top level variables, but the nested objects are still pointing to the same pointer.

This shallow copy may cause unexpected mutations. Let's illustrate that in an example.

## Understand with an example

Let's create a nested object `a`, and clone it to `b` using spread operator:
```javascript
> a = { foo: 1, bar: { a: 2 } }
{ foo: 1, bar: { a: 2 } }
> b = { ...a }
{ foo: 1, bar: { a: 2 } }
```

Now let's set `foo` to 2 for the clone:
```javascript
> b.foo = 2
2
```

and look at the values of `a` and `b` now:
```javascript
> a
{ foo: 1, bar: { a: 2 } }
> b
{ foo: 2, bar: { a: 2 } }
```

See `b.foo` is updated to 2, while `a.foo` remains "untouched".

Now, what if we update the value for `foo.bar.a`?
```javascript
> b.bar.a = 3
3
```

Let's look at the values of `a` and `b` now:
```javascript
> a
{ foo: 1, bar: { a: 3 } }
> b
{ foo: 2, bar: { a: 3 } }
```

Wow, how come `a.bar.a` value has changed???
That is because in object `b`, the `b.bar` is sharing the same pointer of `a.bar`, so these two values will change together, surprising mutation if we were not aware of this.

## React Hooks

The shallow copy happens to the React Hooks `useState`, too.

Using the example above:
```javascript
a = { foo: 1, bar: { a: 2 } };

const [obj, setObj] = useState(a);

const b = { ...obj };

b.foo = 2;
b.bar.a = 3;
setObj(b);

// You will get:
// obj = { foo: 2, bar: { a: 3 } }
// and a will be mutated to:
// a = { foo: 1, bar: { a: 3 } }
```

React Hooks only do a shallow copy, so beware of the mutation.

## Fix with Lodash

There is a simple fix: use `lodash` `cloneDeep`:

```javascript
import { cloneDeep } from "lodash";

a = { foo: 1, bar: { a: 2 } };

const [obj, setObj] = useState(cloneDeep(a));

// or instead of spread operator
//   const b = { ...a };
// call cloneDeep instead:
//   const b = cloneDeep(a);
```

Unexpected mutation could cause unexpected data pollution and very hard to debug. Using `lodash` `cloneDeep` will ensure there is no "cross-contamination" of your variables, and it is simpler than setting up `Immutable`.
Are my Component Names Too Long? Vue.js Component Naming Best Practices
Tags: vue, naming
Published: 2020-05-31 05:43:13

When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components.

## What is too long?

Jane Manchun Wong from Facebook has gathered [data from more than 3000 components in the Facebook React codebase](https://twitter.com/wongmjane/status/1250726774884859905). Her results are that the mean length of a component name is 27 characters: `ImA27CharacterComponentName`. And the longest component name counts **66 characters.** She also gives two examples for some very long component names.

```bash
CometSearchTypeaheadInternalLayoutInlineStrategyWithScrollableView
CoronavirusCommunityHelpCometRequestOfferHelpCreateDialog
```

On the one hand, we should always strive to keep our code short and concise. On the other hand, we read more code than we write. Therefore, **it is critical to quickly understand what a component does rather than to save a few milliseconds while writing the code.**

That is why I argue that you should **worry much less about your component names getting too long and instead focus on getting them right.** It's more important to stick to some general rules and best practices when choosing the names for your components.

## Best practices

The official Vue.js style guide provides us with a comprehensive list of recommendations for how to name our Vue.js components. You might notice that even in the examples, some of the component names are getting quite long.

- [Base component names](https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended)
- [Single instance component names](https://vuejs.org/v2/style-guide/#Single-instance-component-names-strongly-recommended)
- [Tightly coupled component names](https://vuejs.org/v2/style-guide/#Tightly-coupled-component-names-strongly-recommended)
- [Order of words in component names](https://vuejs.org/v2/style-guide/#Order-of-words-in-component-names-strongly-recommended)
- [Full-word component names](https://vuejs.org/v2/style-guide/#Full-word-component-names-strongly-recommended)

## Wrapping it up

**Don't worry about your component names becoming too long!** Instead, focus on coming up with descriptive names and rigorously follow the best practices I mentioned above. In the long run, it pays off.
Faster NPM installs with NPM CI
Tags: node, javascript, web
Published: 2020-06-19 20:53:51

---
title: Faster NPM installs with NPM CI
published: true
date: 2020-05-31 05:00:00 UTC
tags: nodejs,javascript,web
canonical_url: https://coryrylan.com/blog/faster-npm-installs-with-npm-ci
---

When developing NodeJS applications or using NodeJS for Web Development, we often have to install and reinstall dependencies via NPM. Depending on the number of dependencies, this can get slow and tedious to wait on. When we install a single dependency, we typically will run something like:

```
npm install some-package
```

When we run this command, NPM will add it to the `package.json` if not already there and install the package to the `node_modules` directory. When using NPM locally, we will also get a `package.lock` file that will track all dependencies and transitive dependencies used.

Typically it is best practice to **not** source control our `node_modules` but only the `package.json` and `package-lock.json` files. When another developer clones the repository, they will run `npm install` to install the same listed dependencies.

In theory, this workflow is ideal, but often this is not the case. Many times we need to delete and reinstall packages that may be corrupt or our of date. We often see a command like the following used:

```
rm -rf node_modules && npm install
```

This command works but is a bit of a brute force way to update and reinstall dependencies. Instead, we can use `npm ci`. When we have an existing project using NPM and Node. To install or reinstall dependencies, we can run the following:

```
npm ci
```

NPM CI is a command designed for installing dependencies in an automated CI environment. It will delete the `node_modules` directory automatically and reinstall all of our dependencies. NPM CI typically is faster than `npm install`. NPM CI requires an existing `package-lock.json` file. Instead of resolving the dependencies in the `package.json` it uses the lock file directly, which speeds up the install time. Here is an example of the install time differences:

```
// example repo: https://github.com/vmware/clarity/tree/master/packages/core

npm install - 42.116s

npm ci - 24.629s
```

If `npm ci` finds a difference between the listed dependencies between the `package.json` and the `package-lock.json` it will exit with an error. The standard `npm install` will however update the `package-lock.json` file if a difference is found. Using `npm ci` helps ensure that the packages installed are the same every time, providing consistency between installs and CI builds.

Using `npm ci` is useful if you need to simply install or reinstall your `node_modules`. If you need to add an individual dependency, you will still need to use `npm install`. For my day to day workflows, I have found that using `npm ci` works well for most of the time, I use NPM and Node.
Quick Start with Tailwind css for new project
Tags: tailwindcss, postcss, css
Published: 2020-05-31 04:34:54

---
title: Quick Start with Tailwind css for new project
published: true
description: step by step installing tailwind for new Project
tags: tailwindcss, postcss, css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eu76ikasnh4xm7yejyfo.jpg)

#1# create a package file
_npm init -y_

##2# Install Tailwind via npm
For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm or refer to [tailwind official website](https://tailwindcss.com/docs/installation/)

Using npm
_npm install tailwindcss_

Using Yarn
_yarn add tailwindcss_

###3# Create your Tailwind config file
If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

_npx tailwindcss init_
This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
_module.exports = {_
  _theme: {},_
  _variants: {},_
  _plugins: [],_
_}_

####4# Process your CSS with Tailwind
Using Tailwind with PostCSS
create a file called _'postcss.config.js'_ and add the following:
Generally this means adding Tailwind as a plugin in your postcss.config.js file:

_module.exports = {_
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
_}_

#####5# Add Tailwind to your CSS
Create a folder  called _CSS_ and add a file called _tailwind.css_. 
Use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

_@tailwind base;_
_@tailwind components;_
_@tailwind utilities;_

######6# Finally
-Go to package.json file and under *script* change test script to _"build": "postcss css/tailwind.css -o public/build/tailwind.css"_
-Now run _npm run build_ 
a new folder with public and sub-folder build having tailwind.css file will be created.
-Create a new file called _index.html_ inside the public folder. 
Boom💥💥💥
#40daysofHybridCloud (Day-1)
Tags: cloudcomputing, aws, openstack, azure
Published: 2020-05-31 03:32:54

###*#Day1*

Toady I have learned about basics of Cloud that is mainly cloud can be divided into two parts:- 
* Public cloud (AWS)
* Private cloud (OpenStack) 

* Q .Here the question arises why cloud is used ? *
> Cloud is used as we all own that every company can not own big infra of their business like thousands of Terra bytes for storage and RAM which is required as basics of any start-up company and if somehow they are able to do so also then managing it is a big problem in itself which leads to heavy investment on the resources which they not need at the first place.
so they turned to companies like AWS , Mircosoft Azure , GCS etc
service called as IaaS(Infrastructure as a Service).

Cloud store data is three format that are(STAAS):- 
* Object
* File 
* Block 

Focusing on Block storage as per now we have consider one example of each public(AWS) and private(OpenStack).
* In AWS as storage of data in Blocks and is done by EBS(Elastic Block Storage).
* Same process can be acheived in OpenStack and it is called Cinder.

Now coming to practical aspect we all know that for running any program we need a 2 things :
1. Hardware(Hard disk , RAM and CPU)
2. Operating System

Hardware infrastructure is already provided by companies like amazon (AWS) but we ourselves need to install an OS on the top of the service and resources provided by AWS.

We will take an example of AWS , In AWS we have a service which allow us to establish our OS called EC2 (Elastic Compute Cloud).

**Now I will show you how to install OS in AWS :-**
- Create an free account on AWS (valid for 12 months)

- Login with your Account.

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

- Click on EC2 services.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2oki0o93fofs4ka1g6h.PNG)
  
- Click on Instance (as OS is also known as instance in AWS).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1x38h291t37zskrmjf02.PNG)

- Fill up the details and type of OS you required like Name , RAM , Storage , ENI(elastic network interface) also called network card so that you can access it later from network.

- At last you will be requiring a key that is one time use and can be created in the process or separately by clicking on Key pair in Network and security tab.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/32j9jc75ycy69olv92fb.PNG)


 - Here you can see an example of OS provisioned on AWS. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3xn4zymizf4mtpjzxm55.PNG) 
   
 


that all for today !! 

Happy Learning :)
Dicas rápidas - React para Iniciantes
Tags: react, reactnative, beginners
Published: 2020-05-31 03:30:20


Hoje vou apresentar um padrão que é bastante comum para quem usa react em suas aplicações. Estamos acostumados a misturar muitas coisas quando iniciamos em react e por vezes é só falta de maturidade. Quero apresentar hoje o padrão **Presentational** e **Container** components.   

## Componente de apresentação

O componente de apresentação **(Presentational Component)**,  nada mais é que um componente responsável pela parte de visualização(render), ele recebe dados advindos de outro componente(container do mesmo) e renderiza esses dados.  

```js
import React from "react";

const Presentational = ({ data }) => (
  <ol>
    {data.map((item) => (
      <li key={item.id}>
        <p>{item.name}</p>
      </li>
    ))}
  </ol>
);

export default Presentational;
```

## Componente de container

É o "cabeça" da história, pois ele é o responsável pela lógica. Ele carrega os dados, trata do estado e passa os dados para o componente de apresentação. 

```js
import React, { useState, useEffect } from "react";

import Presentational from "./Presentational";

function Container() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    await fetch("https://jsonplaceholder.typicode.com/users")
      .then((resp) => resp.json())
      .then((json) => setData(json));
  }

  return (
    <div>
      <Presentational data={data} />
    </div>
  );
}

export default Container;
```

**Para pensar:** Se fôssemos pensar em **MVC**, o componente de apresentação seria a **View** e o componente container seria o **Controller**. 

É isso! Até a próxima :) qualquer dúvida, sugestão ou crítica, é só comentar abaixo.