teleren/devto huggingface dataset:
A Quick Look at the map() Method in JavaScript 
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:33:31

The `map()` array method in JavaScript manipulates an array and returns a **new** array with the altered data.

## Example 1

Let's say we have an array of objects called dogs

```javascript
const dogs = [
  {
    name: "Scruffy",
    breed: "Labrador",
    age: 3,
    likes: ["being a good boi", "walks"],
  },
  {
    name: "Shandy",
    breed: "Bulldog",
    likes: ["sticks", "treats"],
  },
]
```

Let's say we want a new array from dogs showing just the dog breeds available.

```javascript
const breeds = dogs.map(dog => dog.breed)
// [ 'Labrador', 'Bulldog' ]
```

We `map` over dogs and for each dogs available we add the breed to our **new** array.

## Example 2

In this example we want to return a new array of objects, of each dogs name and what the dogs likes.

```javascript
const nameAndLikes = dogs.map(dog => {
  return {
    name: dog.name,
    likes: dog.likes,
  }
})
/*[ 
    { 
    name: 'Scruffy', 
    likes: [ 'being a good boi', 'walks' ] 
    },
    { name: 'Shandy',
     likes: [ 'sticks', 'treats' ] 
     }
  ] */
```

This time we set the keys we want and then set the values to `dog.name` and `dog.likes`. Remember this returns a **new** array and doesn't alter the original.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
A Quick Look at the find() Method in JavaScript
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:33:20

```javascript
(╯°□°)╯ .find()
```

`find()` is used to find an element that returns `true` depending on the condition we have.

```javascript
const myArr = [1, 4, 6, 9]

const useFind = myArr.find(el => el === 4)
// 4
```

In the example above we use `find()` to return the element thats `===` to 4.

However `find()` returns the **first** element it finds.

```javascript
const myArr = [1, 2, 3, 4, 5, 6]

const useFind = myArr.find(el => el > 2)
// 3
```

In this example we used a larger array and used `find()` to return an element `>` than 2. Even though the array contains more elements greater than 2 it still returned 3. This is because it returns the **first** element that is `true`.

## Finding Specific Values

`find()` can be useful when you want a specific id from an array of objects.

```javascript
const goodBoys = [
  {name: 'spike'},
  {name: 'winston'},
  {name: 'scruffy'}
]
const findDog = goodBoys.find(el => el.name === 'spike')
// { name: 'spike' }
```

This time we use `find()` to return us 'spike'.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
A Quick Look At Hoisting in JavaScript
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:33:07

Hoisting is a tricky one. Here is the most basic explanation I can possibly think of for it.

## Explained

Essentially allows you to use functions and variables before they have been created.

When JavaScript is first read the JavaScript compiler takes all of your functions and put’s them to the top. So you can technically use a function before it exists.

## Example 1

```javascript
hoisty()

function hoisty() {
  console.log("hoisted!!!")
}
// hoisted!!!
```

The function `hoisty()` is declared at the top of our file. Above the declaration. Due to **hoisting** however the function `hoisty()` is taken to the top of the file when it gets compiled.

## Example 2

```javascript
hoisty()

function hoisty() {
  console.log(addNums(3, 7))
}
// 10
function addNums(a, b) {
  return a + b
}
```

In this example we declared the function `addNums()` at the bottom of our file. Yet the function `hoisty()` still passed 3, 7 into `addNums()` with the answer 10 being logged to the console.

## Note

Hoisting only works on functions with the function key word `function hoisty()` not with arrow syntax `const hoisty = () =>`.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
The setTimeout() method in JavaScript
Tags: javascript, webdev, beginners
Published: 2020-10-21 11:32:52

If you want to run something once after a set time use `setTimeout()`

## Set Timeout

`setTimeout()` is a window method available to us. It takes two things:

- A callback function
- Time in milliseconds

```javascript
setTimeout(() => {
  console.log('1 second!');
}, 1000);
// '1 second!'
```

In the example an _anonymous_ function `() =>` is passed in. The time in **milliseconds** is passed at the very end `}, 1000)`. `1 second` is printed to the console **after** 1 second has passed once the rendered.

You can also pass a function into `setTimeout`.

```javascript
const oneSec = () => {
  console.log('1 second');
};
// '1 second'

setTimeout(oneSec, 1000);
```

The function `oneSec()` is ran **after** 1000 milliseconds.

`setTimeout()` is a good way for understanding the `asynchronous` nature of JavaScript. See the example below.

```javascript
const oneSec = () => {
  console.log('1 second');
};

setTimeout(oneSec, 1000);
console.log('Me first!');
// 'Me first!'
// '1 second'
```

In the example `Me first!` is printed to the console. before `1 second` even though the setTimeout is written before the `console.log`. The code will call `oneSec` after 1000 milliseconds but in the mean time it continues to read the rest of the code. This is why it's called a `callback` function.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
Using some(), every() and Object.values to check values from within an object
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:32:26

Often you want to check if a value is within an object. Heres a way we can do this with `some()` `every()` and `Object.values()`.

## Object.values

`Object.values` is used to create an array from the values in an Object. You pass an object into `Object.values` and it returns an array of the values.

```javascript
const stock = {
  meat: 5,
  fruit: 10,
  cheese: 6,
}
const valueArray = Object.values(stock)
// [ 5, 10, 6 ]
```

## some()

`some()` returns true if one thing passes the test depending on the condition passed in. If not it will return false.

```javascript
const stock = {
  meat: 5,
  fruit: 10,
  cheese: 6,
}
const enoughStock = Object.values(stock).some(el => el >= 6)
console.log(enoughStock)
// true
```

```javascript
const kidsParty = {
  suzy: 29,
  bill: 4,
  tim: 2,
  sally: 5,
  ming: 3,
}
const isAdultPresent = Object.values(kidsParty).some(el => el >= 18)
console.log(isAdultPresent)
// true
```

## every()

`every()` returns true or false depending on the condition if every thing passes the test depending on the condition.

```javascript
const nightclub = {
  dave: 26,
  sally: 23,
  mike: 17,
  lucy: 18,
}
const isOldEnough = Object.values(nightclub).every(el => el >= 18)
// false

if (!isOldEnough) {
  console.log("Check every ID")
}
```
## Let's connect
[Twitter](https://twitter.com/davidbell_space)
Announcing the MQTT Essentials E-Book
Tags: startup, news
Published: 2020-10-21 11:01:59

In January 2015, the first [MQTT Essentials](https://www.hivemq.com/mqtt-essentials/) blog post went online. We wanted to make it easy for everyone to get started with MQTT, the de-facto protocol of the Internet of Things, without having to read the entire specification. We published twelve blog posts explaining core concepts, features, and other essential information about MQTT. When MQTT 5 was released in 2018, it was almost our duty to publish the [MQTT 5 Essentials Series](https://www.hivemq.com/mqtt-5/) and keep everyone up to date with the amazing new features of the most feature-rich update to the protocol.

Today, we are excited to announce that we’ve just released our very first [E-book](https://www.hivemq.com/download-mqtt-ebook/)! As we still see a lot of interest in those two blog series, we thought it would be a great idea to bundle these popular blog posts into one source - the [MQTT Essentials E-book](https://www.hivemq.com/download-mqtt-ebook/). The idea is to have one single document that provides a comprehensive overview of MQTT facts and features for beginners and experts alike.

The [E-book](https://www.hivemq.com/download-mqtt-ebook/) is divided into two sections:

* MQTT Essentials - the ultimate Kickstart for MQTT Beginners
* MQTT 5 Essentials - a technical deep dive into new MQTT 5 features

**We hope, our E-book will help you gain a deep understanding of the lightweight MQTT protocol which is indispensable in IoT today.**

We have also created a [video series](https://www.hivemq.com/blog/mqtt-essentials-video-series) on our YouTube Channel about the MQTT Essentials for those who prefer video format.

Currently, we see a lot happening in the MQTT-world and believe this is just the beginning. Over the next few years, we expect massive growth in MQTT adoption across all industries, including manufacturing, automotive, critical infrastructure, logistics, smart cities, etc. HiveMQ will continue to provide high-quality content which helps developers understand and adopt MQTT for their IoT applications.
Turn Objects into arrays
Tags: javascript, webdev, beginners
Published: 2020-10-21 11:32:12

Make an array of an objects Keys.

`Object.keys` - Creates an `array` of keys from an `object` passed in.

```javascript
const fruit = {
  apples: 5,
  oranges: 10,
  lemon: 7,
  grapes: 3,
}
const fruitKeys = Object.keys(fruit)
// [ 'apples', 'oranges', 'lemon', 'grapes' ]
```

## Make an array of an objects values

`Object.values` - Creates an `array` from the values from an `object` passed in.

```javascript
const fruit = {
  apples: 5,
  oranges: 10,
  lemon: 7,
  grapes: 3,
}
const fruitValues = Object.values(fruit)
// [ 5, 10, 7, 3 ]
```

## Make an array from an array keys and values

`Object.entries` - Creates an `array` from the keys and values from an `object` passed in.

```javascript
const fruit = {
  apples: 5,
  oranges: 10,
  lemon: 7,
  grapes: 3,
}
const fruitEntries = Object.entries(fruit)
/* [ [ 'apples', 5 ],
  [ 'oranges', 10 ],
  [ 'lemon', 7 ],
  [ 'grapes', 3 ] ] */
```

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
Using Promise.all with Async/Await to get data from multiple endpoints
Tags: javascript, beginners, webdev
Published: 2020-10-21 11:31:55

Sometimes you want to get some data from several different API endpoints. In this example I will be using the Star Wars API to get information about some characters. See below.

```javascript
const urls = [
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/2",
  "https://swapi.co/api/people/3",
  "https://swapi.co/api/people/4",
]
```

Begin with an outline for the function. Do this so you can easily visualise what's happening. I use a _try/catch_ block as it’s easily to see what’s going on.

**Try/Catch**

- Try - ‘Do this.’
- Catch - ‘Can’t do the _try_? Then do this instead.

```javascript
const fetchData = async () => {
  try {
  } catch (error) {}
}
```

For this the _catch_ block will console log the error with a message if the _try_ fails.

```javascript
const fetchData = async () => {
  try {

  } catch (error) {
    console.log(‘ERROR’, error)
  }
}
```

The serious business happens in the _try_ block below.

```javascript
const fetchData = async () => {
  try {
    const response = await Promise.all(urls.map(url => fetch(url)))
    console.log(response)
  } catch (error) {
    console.log("Error", error)
  }
}
```

- We create a variable `response` for holding our data.
- Using the keyword _await_’. **Await** - ‘Go do this for me and come back.’
- **Promise.all** method is used to tell the function to go and do **all** of the urls from our `urls` array. One at a time.
- Using **.map()** array method to _iterate_ over our array.
- We then pass each url into the `fetch()`. Seen as `url => fetch(url)`

Logging the response you will see the _promises_ have been fulfilled. Each url is hit. However we want the data in a format we can use. So there's one last thing to do. We must make the response a **JSON** object.

```javascript
const fetchData = async () => {
  try {
    const response = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    )
    console.log(response)
  } catch (error) {
    console.log("Error", error)
  }
}
```

Notice above we added `.then(res => res.json()`. We use _.then_ for chaining. Taking the response or 'res' which is returned once 'fetched'. Convert the response to **JSON** which we can use.

## Code for you to try

```javascript
const urls = [
  "https://swapi.co/api/people/1",
  "https://swapi.co/api/people/2",
  "https://swapi.co/api/people/3",
  "https://swapi.co/api/people/4",
]

const fetchData = async () => {
  try {
    const response = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    )
    console.log(response)
  } catch (error) {
    console.log("Error", error)
  }
}
fetchData()
```

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
A quick look displaying data in React with Hooks and map()
Tags: react, beginners, webdev
Published: 2020-10-21 11:31:27

`map()` takes an array manipulates the array and returns a **new** array of the manipulated data.

Using the `map()` array method in React is the standard for React apps.
In the example below there is some hard coded state called _doggos_ which is an _array_ of _objects_. Obviously in a proper app the state likely would of come from a database and not hard-coded data.

```javascript
import React, { useState } from "react"

export const App = () => {
  const [doggos] = useState([
    { name: "Spike" },
    { name: "Winston" },
    { name: "Shandy" },
    { name: "Fluffy" },
  ])

  return (
    <div>
      <ul>
        {doggos.map(dog => (
          <li key={dog.name}>{dog.name}</li>
        ))}
      </ul>
    </div>
  )
}
export default App
```

In the example it takes the _doggos_ array and for each dog returns the dog name as a `<li>`. You can see this as `<li key={dog.name}>{dog.name}</li>`. You'll notice a key is added to each list item `key={dog.name}`. This is because each list item requires and **individual key property** in React. For the key value use something you know will be individual like an ID. There are helpful libraries out there such as **uuid** which can help for this.

## Let's connect
[Twitter](https://twitter.com/davidbell_space)
Side Projects
Tags: learning, beginners
Published: 2020-10-21 11:28:13

We are all learning, all the time and this is especially true in development as the landscape constantly shifts and changes, reacting to newly released libraries and languages.

##Keeping up
I find that this is the hardest part. I needed a way to get the knowledge into my head (and stay there) as fast as possible, so I can build on that when the next new thing came along.

In my case, I needed to move on from .net framework and onto .net core, knowing that Blazor was on the horizon and fast approaching. The cliche "Practice, practice, practice" is a cliche for good reason - it is overused, but not without solid reasoning.

If you can learn one thing, no matter how big or small and practice using it until it becomes part of your development repertoire, without you even having to think (too much) about it, you will start to build on that small thing until it becomes a big thing. The best way to practice? Doing it.

##Ideas
Side projects son't have to be giant, multi multifaceted applications with perfect UI's or with a well thought out UX - unless of course a well thought out UX is what you're trying to achieve - they can be tiny modular things which are designed to solve an imaginary problem using the solution your currently learning. And yes, more than likely you will end up with a commit history running into pages and pages as you experiment and try different things and that's ok! Learning new things isn't just about finding out what does work but what doesn't as well, and in the safety of a side project you can do whatever you like!

Go on... practice.
How is the voice chat implemented in the game chat system? (1)
Tags: github, devops, webdev, ios
Published: 2020-10-21 10:54:21

1. Should it be developed based on a third-party SDK?
Many game developers choose third-party SDKs for development in order to keep up with the progress and get their products to market quickly. 

Chat Platform SDK and API Features

There are several features that distinguish a good Chat SDK from a great one. The best Chat SDKs for Android and iOS will have certain features which will set them apart in the market.
There are some of the best API providers for Android, iOS and Web Apps listed below:

Top 4 Chat, Audio & Video Chat API & SDK Providers for Enterprise Business in game chat.
a. MirrorFly — (USA & India)
A Complete Messaging, Video & Voice Calling Solution. 
MirrorFly Chat Platforms Highlight Features are Include:
100% Customizable Solution
Data Channel
Screen Sharing
Video Conferencing

b. ZEGO.im——（China)
Building stable and high-quality streaming services for real-time audio and video communications.
Zego voice and video Chat API & SDK Features are Include:
Multi-industry and multi-scenario application, all devices adaptation
100% Customizable Solution
Screen Sharing
Data Channel
Voice Calling
Enterprise Communication SDK
Group Chat
Live Broadcasting API

c.  SendBird — (USA)

Leading Chat API & Messaging SDK
Sendbird Messaging API & SDK Highlight Features are Include:

Push Notifications
Typing Indicators
Send & Receive Structured Media
Auto-Thumbnail Generation
d. Smooch — (Canada)

Embeded Chat SDks for iOS, Android & Web
Smooth Chat Application APIs Highlight Features are Include:

Native SDKs
Real-time push notifications
Roles and identities
Creating Apk for React Native Project
Tags: android, reactnative, apk, expo
Published: 2020-10-21 11:27:47



>APK (Android Application Package) - An app file for Android which is present in the package format used as a standalone app.

### Set up

To start, we need to eject the expo environment from the project. Write the following command in the command prompt:

```bash
expo eject
```

- Now, we need to run the command:

 ```bash
 expo build:android 
 ```

- Further, the following permissions will be asked; follow the steps below:

```bash
? Would you like to proceed? Yes
√ Choose the build type you would like: » apk 
```

The build will then start taking place. While it might take some time, you can monitor your build by following the link given under "You can monitor the build at" with all the necessary details about the build. 

Happy Learning! 👩🏻‍💻
YouTube Video | Year End Counter with SnowFlakes 
Tags: youtube, javascript, webdev, showdev
Published: 2020-10-21 11:20:32

As we all are waiting for 2020 to end and it’s time of the year, when it will snow in sometime in some part of the world. So, let’s create a year end counter with snowflakes animation background in JavaScript.

{% youtube 9FCJaRa0LkA %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | PokeDex with Vanilla JS
Tags: youtube, webdev, showdev, javascript
Published: 2020-10-21 11:18:28

In this video, we are going to create a PokeDex with Vanilla JavaScript.

{% youtube tJwXVcgm-KM %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Beginners Program
Tags: beginners, hacktoberfest, hackerrank, opensource
Published: 2020-10-21 10:28:55

If you are an absolute beginner, learning basic language only.

A list of questions that you can follow for starting coding, (hackerrank).

C++ : https://www.hackerrank.com/domains/cpp

JAVA : https://www.hackerrank.com/domains/java

Python : https://www.hackerrank.com/domains/python

Data Structures : https://www.hackerrank.com/domains/data-structures

Algorithms : https://www.hackerrank.com/domains/algorithms

I find these most helpful for beginners, if you have done this level. You must practice on Leetcode.

Go to this link, select different topics and difficulty level : https://leetcode.com/problemset/all/?topicSlugs=array&difficulty=Easy

#Something for open source
- Everyone has heard of Gsoc when it comes to open source. To be true it's not easy if you are really a beginner. But the another program "Hacktoberfest" , the yearly event of october where one can participate who is really a beginner. If even learning the git/github or like how to make contributions you can sign-up for the program. It gives swags too which might be a motivation for a beginner.
YouTube Video | Indian State Details Search app
Tags: javascript, webdev, showdev, youtube
Published: 2020-10-21 11:16:47

In this video, we will build a simple web app that searches a JSON file, containing Indian states details. It uses the Fetch API, Async/Await, Regex and high order array methods.

{% youtube ZA4N65iWOZQ %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Setting up Visual Studio Code for Azure Functions
Tags: azure, serverless, vscode, azurefunctions
Published: 2020-10-21 11:15:59

{% youtube -2HIcfxyT-c %}

## Tools to download 
- Visual Studio Code 
https://code.visualstudio.com/

- .NET Core 3.1 
https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install

- VSCode Azure Functions extension
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions

- Azure Functions Core Tools
https://docs.microsoft.com/azure/azure-functions/functions-run-local#v3
Hannes Mehnert on MirageOS and OCaml: “Functional programming is about better code maintenance and program understanding”
Tags: interview, programming, computerscience, functional
Published: 2020-10-21 11:11:31

Our backend engineer, Pavel Argentov, traveled to Marrakech, Morocco to attend the ninth MirageOS retreat, which was held from March 13-19, 2020. The goal of the event is to bring both experienced and brand new MirageOS users together to collaborate and sync various MirageOS subprojects, start new ones, and help each other fix bugs.

MirageOS is a library operating system that constructs unikernels for secure, high-performance network applications across a variety of cloud computing and mobile platforms. The code can be developed on Linux or Mac OS X and then compiled into a fully standalone, specialized unikernel that runs under a Xen or KVM hypervisor.

At the event, Pavel spoke with Hannes Mehnert, the co-author of MirageOS and host of the event, about his work with MirageOS and OCaml. He gave us some details about his contributions to MirageOS and why he joined the project. He also explained the benefits of functional programming and why he was initially drawn to it. In addition, he broke down the potential, and limitations, of MirageOS and OCaml and gave us some information on new developments and what’s to come. We’ve included the full transcript of the interview below, so you can get the latest info, straight from the best source.

The Interview: https://evrone.com/hannes-mehnert-interview