teleren/devto huggingface dataset:
How to get all WordPress posts from the WP API in just two steps
Tags: wordpress, javascript, api, gutenberg
Published: 2020-04-07 11:26:54

Hello Everyone ✋
On my work, I was building a Gutenberg block to get all the posts and make with them a slider very simple thing 😝 but the problem starts when I was trying to show all posts on a dropdown where the client can choose the posts that want to show on the slider.

So if you have a case similar to me the code below will work just fine.

The first thing we will need to make a simple request and get the total amount of posts from WordPress.


       fetch('https://example.com/wp-json/wp/v2/posts?per_page=10', {
        }).then((response) => { 
            getAllPosts(response.headers.get('X-WP-Total'));
        });



The second thing for sure we will need to create the <code>getAllPosts</code> function which is going to request all posts.


    const getAllPosts = (allPosts) => {

     fetch(`https://example.com/wp-json/wp/v2/posts?per_page=${allPosts}`)
      .then((response) => {
        return response.json();
     })
     .then((posts) => {
      console.log(posts);
     });

    }


Now you can check your console to see if all the posts are present.
<hr/>
If you have any questions, comments or feedback to improve, please just leave a comment 🙂
Customize titleBar in VS Code
Tags: vscode, todayilearned
Published: 2020-04-07 11:20:51

To open your user and workspace settings, use the following VS Code menu command:

+ On Windows/Linux - File > Preferences > Settings
+ On macOS - Code > Preferences > Settings

You can also open the Settings editor from the Command Palette (Ctrl+Shift+P) with Preferences: Open Settings or use the keyboard shortcut (Ctrl+,).

Go to "Appearance" and clic on Edit in settings.json". Add the next settings.

```javascript
{
	"workbench.colorCustomizations": {
		"titleBar.activeBackground": "#ff2c70",
		"titleBar.inactiveBackground": "#ff2c70cc",
		"titleBar.activeForeground": "#fff",
		"titleBar.inactiveForeground": "#fff000cc"
	} 
}
```
Thats all, you have customized your editor on VS Code.
Angular Builder to Run source-map-explorer
Tags: opensource, angular
Published: 2020-04-07 11:08:49

Recently at [ng-conf](https://www.ng-conf.org/) Angular Team Lead [Igor Minar](https://twitter.com/IgorMinar) used a tool called [source-map-explorer](https://www.npmjs.com/package/source-map-explorer) to analyze the bundle, I used and liked it as well.
I thought of adding this tool as a command using Angular Builders API and came up with [@ngx-builders/analyze](https://www.npmjs.com/package/@ngx-builders/analyze) no configuration just use ng add and ng run.

The source code is open source and available at https://github.com/ngx-builders/source-map-analyzer

You can refer my tweet 
{% twitter 1246861985901211654 %}


You can send any suggestions on the repo by raising issues or PR, also if you liked it please give a star.
Using the functional updates pattern with React hooks
Tags: react, hooks
Published: 2020-04-07 11:02:29

---
title: Using the functional updates pattern with React hooks
published: true
date: 2020-04-07 11:02:00 UTC
tags: react, hooks
canonical_url: https://www.emgoto.com/react-functional-updates/
cover_image: https://www.emgoto.com/react-functional-updates-dev.png
---

The functional updates pattern can be used whenever you need to **update state using the previous state.**

For example, if you were storing in state the number of times a button was clicked, you might do it by referring to the previous `count` state:

```jsx
const App = () => {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(count + 1)}>
            Click
        </button>
    );
};
```

Instead of doing `count + 1`, you can pass in a function to `setCount`:

```jsx
<button onClick={() => setCount(prevCount => prevCount + 1)}>
    Click
</button>
```

## What's the benefit of using functional updates?

In the above example, there's no immediate benefit to using this pattern (that I know of). However if you were setting state inside of a `useEffect` hook:

```jsx
useEffect(() => {
    setCount(count + 1);
}, [setCount, count]);
```

Since `count` is a dependency, each time `count` was changed by `setCount`, `useEffect` would be called again causing an infinite number of re-renders.

Using the functional updates pattern in this case makes sense:

```jsx
useEffect(() => {
    setCount(prevCount => prevCount + 1);
}, [setCount]);
```

* * *

If you have any better use cases that you can think of, I'd love to hear about them!

Thanks for reading!

## References

[https://reactjs.org/docs/hooks-reference.html#functional-updates](https://reactjs.org/docs/hooks-reference.html#functional-updates)
Team up TwilioHackaton?
Tags: twiliohackathon, android, python
Published: 2020-04-07 10:58:09

Still undecided on what to make so I am currently still searching for people for my team on multiple networks. 

My idea is to make either a dashboard or some communication app with alerts for elderly any way any other idea is appreciated.
The description for the hackathon you can find here: 
https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8
and there are many useful posts in the tag #twiliohackathon 

Who want to apply to join the team just comment on the post or send a message.
Check if a list contains a value in RCPTT
Tags: rcptt, eclipse, list, loop
Published: 2020-04-07 10:54:25

This post will focus on how to iterate over a list to check whether it contains a given element.

###Using *each*
The ECL command <code>each</code> is the one of most used commands in RCPTT. It is very useful because it makes the code clean, simple and much more readable in comparison with the command <code>loop</code>. However, we have to take into account that it doesn’t support breaks. That is, we are forced to go through all elements of the list even if it is not necessary, for example when we have found the target element before reaching the end of the list.

In the following example, we return a value if the list contains the specified element. Afterwards, we check whether the number of returned values is greater than 0 in order to return true or false.
```
proc itemExists [val items -input] [val targetItem] {
	$items | each [val it] {
		if [$it | eq $targetItem] {
			bool true
		}
	} | length | gt 0
}
```
###Using *loop*
The command <code>loop</code> supports a kind of break using <code>recur</code> which is another command. Basically, we invoke <code>recur</code> to continue the execution of the loop. We are allowed to use variables and modify them when iterating.
```
proc itemExists [val items -input] [val targetItem] {
	loop [val index 0] [val max [$items | invoke elements | invoke size]] {
		if [$index | lt $max] {
			if [$items | get $index | not-eq $targetItem] {
				recur [$index | plus 1][$max]
			} -else {
				bool true
			}
		} -else {
			bool false
		}
	} | equals true
}
```
As you can see above, the code is too complex in comparison with the previous one and make sure that the list is not empty since it fails when running <code>$items | invoke elements</code>.
Why MySQL?
Published: 2020-04-06 02:10:33

MySQL is a structured query language relational database system designed to handle large amounts of data at high speeds, in all types of conceivable scenarios. Battle tested and used by organizations large and small to manage their digital information. It is flexible and integratabtle into most established applications. It's an extremely useful database system.

MySQL uses queries for retrieving a piece of data from a table in a database. 

Let's look at the SELECT keyword as it is one of the many queries you can make in MYSQL.

>SELECT * FROM users WHERE name = 'John' AND age < 30;

The select key word can be used to get values stored in the database. Other query keywords can be used to narrow down your search.
MySQL employs a Shared-Nothing Architecture. In this format, each node where a value is stored is independent of other nodes, giving the data structure a powerful durability. If a node fails in some way, or part of a query fails for example, the rest of the program and subsequent information is not affected and can still run. 

MySQL also offers a query caching feature. A query itself will be stored in a table alongside its resulting value in a cache. When tables receive multiple identical queries the value can be returned when matching query is received, rather than reading and running another query operation. This increases speed and performance and works best when working with tables that do not fluctuate too much. This speed is kept when scaled upwards because of the unique relational nature of MySQL. This technique is one of the many reasons MySQL is a great choice for creating and managing your databases.
Android 11: Behaviors, Innovative Features & APIs
Tags: android, devops, javascript, mobile
Published: 2020-04-07 10:47:38

Before starting discussion on Android 11, let me clear that if you are not a developer and looking for these features in your handset, it is time to wait. Android 11 is not ready for early adopters to try, this is only an initial preview which is majorly developer facing and not intended for daily or consumer uses. Adding to this preview builds are available for Google Pixel 4 / 4XL, Pixel 3a / 3a XL, Pixel 3 / 3 XL, and Pixel 2 / 2 XL only.

We can bifurcate new updates into three sections:

Behavioural Changes
Privacy & Security
Innovative Features & APIs

Read more here :https://medium.com/@rlogicaltech/android-11-behaviors-innovative-features-apis-4029be06e1ae
กาแฟดีๆหากินได้ที่บ้าน
Published: 2020-04-07 10:32:04

ผมกินกาแฟมานานแต่ไม่ได้สนใจศึกษาอะไรมามากนักจะมีก็แต่พวกคำคมที่พูดแล้วดูเท่ห์ๆเช่นนิยมของกาแฟ "*__ร้อนเหมือนนรก ดำเหมือนปีศาจ หอมเหมือนสาวบริสุทธิ์__*" อะไรแบบนั้น ส่วนรสชาติผมกินกาแฟดำมาตั้งแต่สมัยเรียนจบใหม่ๆ เหตุผลตอนนั้นเพราะเราไม่ได้สนใจรสชาติการแฟสนแค่คาเฟอีนในกาแฟ การกินเอสเปรสโซ่ช็อตเดียวหรือสองช็อต เป็นเรื่องปรกติของผมเพราะจบไว เป่าๆๆให้เย็นลงหน่อยก็ยกซดจบ ถามว่าอร่อยไหมก็ไม่ขมปี๋ แต่กินได้อย่างมากก็มีน้ำชาหรือน้ำเย็นต่ออีกหน่อยนึง ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/80pkzufg466m41607lwx.jpg) ผมเริ่มสนใจเรื่องรสชาติกาแฟมาเมื่อ 5-6 ปีก่อนจากกระทู้นึงในพันทิปที่มีคนมาโพสต์ว่าไปกินกาแฟพรีเมียมร้านนึงแล้วรสชาติเปรี้ยวมาก ผิดหวังมากทำไมไม่เข้มขมเหมือนที่เคยกิน จากนั้นก็มีคนมาคอมเมนต์ว่ากาแฟมันมีรสเปรี้ยว ที่มันขมๆเพราะการคั่ว จากกระทู้นั้นทำให้ผมเริ่มสนใจกาแฟและเริ่มลองกินหลายๆแบบ รวมทั้ง ColdBrew ที่ทำจนการเป็น Product ขายจริงจังอยู่พักใหญ่ๆเลิกขายไปเพราะ Lazada ปิดร้านเนื่องจากมี Order แล้วไม่ได้ส่ง เพราะลืมเข้า Sallercenter Lazada 
   ผ่านมาหลายปีจนเมื่อปลายปีที่แล้วความสนใจเรื่องการสกัดกาแฟแบบ มอคค่าพอท ก็ทำให้กลับมาจริงจังมากขึ้นลามไปถึงการคั่วแวะเวียนไปโรงคั่วหลายที่ จนพอเข้าใจการคั่วกาแฟมากขึ้น เลยตั้งใจจะเขียนเรื่องกาแฟสั้นๆที่สรุปจากความรู้ที่มีให้อ่านกัน 

###1. กาแฟขมคือการแฟเลว
   * เมล็ดกาแฟแห้งก่อนคั่วจะไม่มีรสชาติอมดูจะจืดๆเมื่อเอามาคั่วจะแบ่งการคั่วคร่าวๆเป็น 3 อย่างคือ คั่วอ่อน คั่วกลาง และคั่วเข้ม ตามการไหม้ของเมล็ดกาแฟ คั่วเข้มจะมีความขมมากที่สุด เมล็ดกาแฟก่อนคั่วที่เรียกว่่าสารกาแฟหรือ Green Bean แต่ละแหล่งจะมีกลิ่นแตกต่างกันการคั่วเข้มจะทำให้กลิ่นหายไปหมดเหลือแต่กลิ้นไหม้และมีรสชาติขม ดังนั้นกาแฟดีที่มีกลิ่นพืเศษแพงๆจึงไม่มีใครเอามาคั่วเข้มเด็ดขาด นอกจากเรื่องกลิ่นแล้วเรื่องรสชาติก็เป็นอีกเหตุผลนึง กาแฟเป็นเบอรี่และกรดผลไม้ในตัว เมื่อคั่วอ่อนถึงกลาง รสเปรี้ยวจะยังคงอยู่สกัดแบบเอสปรสโซ่ออกมาจะไม่ขม ส่วนกาแฟถูกๆที่ไม่มีกลิ่นอะไรพิเศษนิยมเอาปนๆกันคั่วเข้มๆ ขมๆเข้าไว้ เวลาขายก็โฆษณาว่าเข้มข้น

###2. แล้วทำไมกาแฟขมถึงขายได้  
   * เนื่องจากกาแฟถูกเอาไปชงขายผสมน้ำตาล นม ในเมนูเย็นดังนั้นกาแฟจึงต้องขมๆไว้ก่อนเพื่อยังให้ได้รสชาติกาแฟ อันนี้เลยเป็นที่มาว่าร้านการแฟแบบแมสมากๆอย่าง อเมซอน สตาร์บัค เวลาสั่งเอสเปรสโซร้อนรสชาติมันถึงได้ขมปี๋ พอเราเริ่มสกัดกาแฟกินเองเลือกการคั่วแบบอ่อน-กลางกินจนติดแล้วจะกลับไปกินกาแฟขมๆแบบนั้นไม่ได้อีก

###3. อยากกินกาแฟดีๆทำอย่างไร
   * เบื้องต้นต้องบอกก่อนว่ากาแฟดีๆควรเริ่มจากการกินกาแฟร้อนแบบไม่ผสมอะไรเลยจะเป็น อเมริกาโน หรือ เอสเปรสโซ่ ก็ได้ เพื่อให้เข้าถึงรสชาติกาแฟ ถ้ายังกินแบบใส่น้ำตาลหรือผสมนมจะแยกกาแฟดีๆได้ยาก
   * สกัดกาแฟกินเองที่บ้านจะเป็นดริป หรือ มอคค่าพอท หรือเครื่องเอสเปรสโซ่ก็ได้ ดริปจะง่ายและใช้อุปกรณ์น้อยกว่า ทำได้ทันที
   * หาที่สั่งเมล็ดกาแฟ ซึ่งต้องเป็นคั่วอ่อน หรือคั่วกลาง เท่านั้นและสำคัญสุดต้องสั่งแบบที่คั่วแล้วแต่ยังไม่บด เหตุผลคือเราจะได้เห็นเมล็ดว่าเป็นเกรดไหน เมล็ดกาแฟมีการคัดเกรดก่อนคั่วเมล็ดเต็มๆไม่หํกไม่แตกไม่บิ่น เป็นเป็นเกรดสูง การสั่งแบบบดแล้วจะทำให้ไม่รู้ว่าเป็นเกรดไหน เมล็ดเล็กๆแตกๆหรือไม่

###4. กาแฟอร่อยรับรู้เฉพาะตน 
   * หลังจากสกัดเอง กินเอง ลองกาแฟหลายๆตัวแล้วเราจะพบความอร่อยของเราเองในแบบที่เราชอบ เวลาเรากลับไปกินกาแฟตามร้านแบบแมส เราก็จะพบว่าสกัดกินเองที่บ้านอร่อยกว่าเยอะร้านแบบนั้นเหมาะสำหรับถ่ายรูปโชว์เท่านั้นเอง
[Git] How do I merge featured branch into master, when master have already be edited (e.g. bug fixes)
Tags: git, help
Published: 2020-04-07 10:29:49

![Flowchart](https://i.imgur.com/q6rQIKUl.png)

I want to totally **replace** master, actually. But I would rather release / tag the stable code on GitHub first.

Is it about rebase, that I haven't tried?

I also haven't tried stash.

This also raises some general questions,

- Where do you usually draw a flowchart? (I used PowerPoint, but it seems unprecise...)
- How do you usually upload for dev.to?
Why React’s Model is successful
Tags: react, javascript
Published: 2020-04-07 10:06:49

Throughout the history of React there have been many ways to describe what it does that makes its programming model successful and for sure there are multiple aspects to it, but let's have a look into its foundation — components.

One of the most important characteristics for building large software is its maintainability and the most scalable mental framework for maintainability is the ability to delete and replace pieces of the system. So what makes React so special about code removal?

## Props
Props are the main way for a React component to receive information. It is its standard input interface. Props are pretty much the same to a React component as arguments are to a function, but with a small but important difference — components are automatically “subscribed” to the latest version of props and are getting executed automatically by React.

Another interesting detail about props is that they can contain any data type, which can be used as a backchannel for communication. For example, by calling a function a child component received over props, it can communicate back to the parent component.

## Children
Children is a mechanism that gives React components 2 abilities: composition and nesting. What I mean is a particular kind of composition — the ability to render a component A inside of component B without component B knowing anything about component A. This can be achieved as well using props, in fact, “children” is a special key in props, but that’s an implementation detail. What’s important is that it enables nesting:

`<ComponentA><ComponentB /></ComponentA>`

## Elements
React elements is generally speaking a platform-agnostic description of renderable nodes. It’s a spec that component returns to React and describes components React needs to initialize and what props and children they will receive.
The fact that we usually use JSX to describe elements or even that JSX is transpiled to a `React.createElement()` function call is just another implementation detail.

---

React has created a system that allows a component to receive data, express what needs to be rendered in return and allows it to get composed. This is the foundation and the main reason why React’s approach to building user interfaces scales — each component implements the same interface and can be replaced. In addition, the fact that React application is a tree, by replacing a single component you are able to replace an entire subtree it renders, giving you the ability to replace large building blocks at once.

It’s not about VirtualDOM, JSX, hooks, state, context, performance or pure functions. Even though they are all important, they are just implementation details.
Handling errors in React using Error Boundary
Tags: javascript, react, reactnative
Published: 2020-04-07 09:08:59

Error Boundary concept is introduced in React 16 to handle javascript errors and display a fallback UI.

Create a new react application by running below command inside your terminal:

```bash
yarn global add create-react-app
create-react-app react-error-boundary
cd react-error-boundary
```

Open `App.js` file inside your favourite editor and replace everything with the below content:

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

export function App() {
  const [counter, setCounter] = useState(0);

  if (counter === 5) {
    throw new Error("Counter is reached at its maximum value :)");
  }

  return (
    <>
      <p>{counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Add</button>
    </>
  );
}
```

Let's see what happens if we create a build and serve the application from there:

```bash
yarn run build
serve -s build
```

Upon running `serve` command two URLs will appear inside your terminal open one of them inside your browser. If you keep pressing on the `Add` button it will increase the value of the counter variable and after a while when counter values reache 5 your application will become unresponsive and following will happen:

![Demo1](https://imgur.com/jSez3Ox.gif)

To handle the above issue create a new component and you can name it anything you want but I will rename it to `ErrorBoundary` and after creating the file put following content inside of it:

```js
import React, { Component } from "react";

export class ErrorBoundary extends Component {
  state = {
    error: null,
    errorInfo: null
  };

  componentDidCatch(error, errorInfo) {
    this.setState({
      error,
      errorInfo
    });
  }

  render() {
    // If there are no errors render
    // the child components
    if (!this.state.errorInfo) {
      return this.props.children;
    }

    // Display custom UI if there are errors
    // in our application
    return (
      <div>Something went wrong</div>
    );
  }
}
```

Lets open `index.js` and wrap `App` component with our `ErrorBoundary`:

```js
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { ErrorBoundary } from "./ErrorBoundary";

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById("root")
);
```

We have to create a new build again and restart the build server:

```bash
yarn run build
serve -s build
```

Open the link which is appeared inside your terminal after running `serve` command.

![Demo2](https://imgur.com/5mXUmPF.gif)
I Need a Task Manager -- what do you recommend?
Tags: watercooler, help
Published: 2020-04-07 09:40:50

Hey there,

I've been looking for a task manager for quite a while now, but I can't find anything that fits all my needs. They always miss something.

What I need:
* Create/List tasks
* Dependency between tasks
* Label tasks
* Import tasks from other services _(ie: Github, GitLab, etc...)_
* Export tasks
* Create lists _(ie: notes from a meeting)_
* Create reminders
* Create periodic reminders _(ie: change chair too standing desk, drink water, etc...)_

> I could give up some features if it's missing one or two.

Do you use a task manager or now of any good ones?
Logging like a PRO in javascript
Tags: javascript, node
Published: 2020-04-07 09:07:41

Inside JavaScript there is a built-in function `JSON.stringify` which converts any variable into json string.

The syntax is:

```js
JSON.stringify(value, replacer, space)
```

1. value 	- Any variable you want to convert into JSON string
2. replacer - This method will be called on each item of the variable
3. space 	- Number of spaces you want to add to each item of the variable

The second and thrird arguments are optional.

Lets have a look at the following example:

```js
const users = [
  {
    name: 'John',
    isActive: false,
  },
  {
    name: 'Jane',
    isActive: true,
  },
];
console.log(JSON.stringify(users, null, 2));
```

Upon running above code you will get the following output:

![Output](https://i.imgur.com/XHjhC50.png)
JavaScript array methods
Tags: javascript, node
Published: 2020-04-07 09:06:59

There are many javascript array mehthods but we will discuss only the following:

* Map
* Reduce
* Filter
* Some
* Every

### Map

This method will executes the callback function on each element of the array.

```js
array.map((item, index, array) => {}, thisValue)
```

Now lets have a look at the usage of the `map` method:

```js
const names = ["John", "Jane"];
const greetings = names.map((name, index) => {
    console.log(index);
    return `Hi, ${name}`;
});
console.log(greetings);
```

Executing above code will output the following:

```json
0, 1
[ "Hi, John", "Hi, Jane" ]
```

### Reduce

This method will reduce the array into one element.

```js
const numbers = [1, 2, 3];
const total = numbers.reduce((total, currentValue) => total + currentValue);
console.log(total);
```

Executing above code will output the following:

```json
6
```

### Filter

This method will extract all the elements from the array which passed the provided condition inside call back function.

```js
const users = [
  {
    name: 'John',
    isActive: true,
  },
  {
    name: 'Alice',
    isActive: false,
  },
  {
    name: 'Bob',
    isActive: true,
  },
];

const activeUsers = users.filter(user => user.isActive);
console.log(activeUsers);
```

Executing above code will output the following:

```json
[
  {
    "name": "John",
    "isActive": true
  },
  {
    "name": "Bob",
    "isActive": true
  }
]
```

### Some

This method will return `true` if one element passed the condition otherwise it will return `false`.

```js
const users = [
  {
    name: 'John',
    isActive: false,
  },
  {
    name: 'Alice',
    isActive: false,
  },
  {
    name: 'Bob',
    isActive: true,
  },
];

const isOneUserActive = users.some(user => user.isActive === true);
console.log(isOneUserActive);
```

Executing above code will output the following:

```json
true
```

### Every

This method will return `true` if all elements passed the condition provided inside callback function otherwise it will return `false`.

```js
const users = [
  {
    name: 'John',
    isActive: false,
  },
  {
    name: 'Alice',
    isActive: true,
  },
  {
    name: 'Bob',
    isActive: true,
  },
];

const isAllUserActive = users.every(user => user.isActive === true);
console.log(isAllUserActive);
```

Executing above code will output the following:

```json
false
```
The Ultimate Git Tutorial Part 6: Stashing Changes
Tags: git, productivity, beginners, github
Published: 2020-04-07 08:43:45

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

I'm releasing a full series covering the use of Git from the very beginning! This series will cover everything from cloning, pulling, branching, merging, and so much more. Here's the sixth video in the series - stay tuned for more to come very soon!

{% youtube -QKlyw_Q2uw %}

Happy coding!