teleren/devto huggingface dataset:
React - TypeError: this.state.<arr>.map is not a function when using map to render an element
Tags: react, javascript
Published: 2020-04-24 19:33:39

**tl:dr** Check the function in your constructor that implements the adding of an item to an array, references the array it is adding to as prepending, rather than appending, the method. 

In short, does your code look like this:

```javascript
submitMessage() {
  this.setState({
    messages: this.state.input.concat(this.state.messages),
    input: ''
  })
```
*Instead of the correct:*
```javascript
submitMessage() {
  this.setState({
    messages: this.state.messages.concat(this.state.input),
    input: ''
  })
```
Don't be me, array first, item second.... 

The purpose of this post was to bore the correct usage of Array.prototype.concat() & Array.prototype.push() in to my porous mind, whilst simultaneously, hopefully, helping another Array-method-challenged soul avoid some futile debugging time on their react app. 

Having spent too long debugging this same issue twice now, it felt right to write a quick post to stop others from potentially doing the same. 

Better yet ??..... Avoid the above possibility of getting the order wrong altogether and use the ES6 spread operator instead:

```javascript
submitMessage() {
  this.setState({
    messages: [...this.state.messages, this.state.input]
    input: ''
  })
```
✌️
Solving Financial Fraud Detection with Machine Learning Methods
Tags: machinelearning
Published: 2020-04-24 14:30:27

![Financial Fraud Detection – Machine Learning Techniques](http://perfectial.com/wp-content/uploads/2020/04/fraud-01-scaled.jpg)

For decades, financial organizations used rule-based monitoring systems for fraud detection.

These legacy solutions were deployed in SQL or C/C++. They were attempts of the engineers to transfer the knowledge of domain experts into sequel queries, which would typically end up being long, convoluted, and extremely brittle.

And whenever they tried to change parts of these fraud detection systems later, to update a threshold or something, it led to the breaking of the entire codebase.

This prevented banks from fighting fraud effectively – the criminals would just come up with new ways around alert triggers in their weak, rule-based platforms.

So now many financial firms have abandoned their legacy tools to try and solve fraud detection with new-age machine learning solutions, and more still are planning to follow suit in the future.

ML algorithms can process millions of data objects quickly and link instances from seemingly unrelated datasets to detect suspicious patterns. They’re one of the only tools left that can help banks and FinTechs keep up with new defrauding schemes, which are growing increasingly sophisticated.

But it might be unclear for someone who’s not a data scientist which algorithm to opt for to help their company identify illicit transactions. In this post, we’ll describe a few popular choices.

The post [Solving Financial Fraud Detection with Machine Learning Methods](https://perfectial.com/blog/fraud-detection-machine-learning/) appeared first on [IT Consulting Company Perfectial](https://perfectial.com/).
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-04-24 19:30:47

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Baking bread...or whatever else that may spark joy 😄

![cat-baking-bread](https://media.giphy.com/media/O5hoOqZtdwzoQ/giphy.gif)

Happy Friday!
Configure a Web Server with Ansible Playbook
Tags: ansible, devops, linux, tutorial
Published: 2020-04-24 19:27:39

If you ever need to configure an army of servers, then Ansible playbooks are your best friend. Playbooks are YAML files that contain desired state of the "hosts", the remote machines that Ansible controls. In this tutorial, we are going to create a playbook that sets up a web server on a virtual machine. This virtual machine is a managed node for Ansible, and you can see [how to set it up in this other tutorial](https://dev.to/tuvannguyen/quickstart-ansible-with-virtual-machines-5ep8). 

# Write the webpage
This is just a very simple html page that we'll write on the local machine. Name it index.html. Later on, this file will be transferred to the managed node. 

```
<header>
 <h1>Hello World. I am an nginx application. Thanks for visiting me!</h1>
</header>
```

# Write the Playbook
The web server we'll be using is Nginx. We will write a simple playbook that tells Ansible that the managed host should have nginx installed and running. We communicate this by writing tasks, a task being the unit of action in Ansible. Tasks related to installation use the yum module for the package manager of CentOS on the virtual machine. The third task adds the index.html file from the local machine to the managed node. Then in the fifth task, we open tcp port 80 so that we can access the webpage from the local machine's browser. The final task starts the nginx service.

```
#nginx.yml
---
 - hosts: 192.168.56.3
   user: root
   tasks:
    - name: Add epel-repo
      yum:
       name: epel-release
       state: present

    - name: Install Nginx
      yum:
       name: nginx
       state: present

    - name: add index.html file
      template:
       src: ./index.html
       dest: /usr/share/nginx/html/index.html

    - name: allow all access to tcp port 80
      firewalld:
       port: 80/tcp
       zone: public
       state: enabled

    - name: Start Nginx
      service:
       name: nginx
       state: started
```

# Testing
Now we can run the playbook and test the web server from the local machine or control node. 
```
ansible-playbook nginx.yml
curl 192.168.56.3:80
```
You can also view the webpage by going to `192.168.56.3:80` on your web browser.

And that's all you need to do to set up the web server. After using Ansible for a while, consider getting a That Was Easy button for every time you can sit back and let Ansible do all the work for you.
Understanding Kubernetes: part 11 – Resources's Requests & Limits
Tags: kubernetes, devops, docker, beginners
Published: 2020-04-24 19:01:58

---
title: Understanding Kubernetes: part 11 – Resources's Requests & Limits
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zbbhujtdo7a7u90gsaon.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with Resources requests and limits.

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

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Motivation to ride a bike
Tags: bike, mountain, motivation
Published: 2020-04-24 18:54:25

My favourite is the mountain bike. I always love to ride. There are various options to ride on mountains. 
You always require motivation to drive these bikes. I love <a href="https://geeky-toys.com/best-mountain-bikes-under-500-dollars/">mountain biking </a>and it is the best.
Motivation is something which helps you to keep active, keep focused, keep directed, keep dedicated towards your goals. Goals are up to your choice.
You maybe want to be successful in your career. You maybe want to lose your weight. You maybe want to learn the business. You maybe want to join the best digital marketing institute.

Nevertheless, it’s difficult to stay motivated. Living an average life or living a great life is a matter of choice. The issue is we are not conscious whether we’re living an ordinary life or great life.
I have found three types of people in my life who achieve their goals as per their way.

As mentioned earlier, it helps to accomplish our goals. But, self-motivation and organization motivation are two different things.
Self-motivation is focusing on ourselves, focusing on physical, financial goals, etc. Organization motivation involves the motivation of employees, workers to increase productivity without incremental cost, to develop efficient and effective operation work cycle. Organization motivation motivates employees and increases team productivity. It also helps the organization to be more profitable and successful. Motivation can help you overcome the most challenging circumstances and emerge as a prosperous person.

Motivation is easy to get but hard to maintain. I have discovered only one way to maintain motivation that is making it a habit.
Habits can create cohesiveness. Reading motivational books, listening to great people every day can help motivation to be a habit.

You need to have certain motivation to achieve the goal in life.
Git Commit ID Explained.
Tags: git, dailydose, giteveryday, letslerantogether
Published: 2020-04-24 18:39:04

>Ever wondered about a Git Commit ID ?
(A super long SHA1 Hash String 😅)

- A Git commit ID is an SHA-1 hash of every important thing about the commit.
- It stores :
    * The content of commit as a BLOB.
    * Commit date.
    * Committer's name and email address.
    * Log message.
    * The ID of the previous commit(s). 

>* Try it out to find more information about a Git Commit ID.
  - `$ git cat-file commit <commit_id>`
Not Finished Yet, but Here's the Idea! Twilio Hackathon Project Update
Tags: devjournal, twiliohackathon, javascript, codenewbie
Published: 2020-04-24 18:22:54

_This post was originally published on April 24, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Wowza. Whatta Friday. Overall, I made some major progress on learning how to implement Twilio with my app. After a bit of trial and error, I was sooo elated when the programmed messages started coming through to my phone.

I'd started with SMS alerts with Twilio, but seeing as that I'm in France and it's just easier to use Whatsapp for me (for testing), I ended up just going with Whatsapp functionality. At the end of the day, the app will still do what I want it to do, regardless of how the message is delivered.

And...I suppose now's as good a time as any to announce *what* my actual app is (since I haven't unveiled it yet!).

Behold.... WELLBEAN! It's an app that helps users stay connected to loved ones by sending them automated suggestions about who to reach out to on any given day. 

Just a simple reminder can help plant the seed of connection and cultivate a sense of social well-being.

Once it's fully functional, I'm super excited to use it for myself to help me stay in contact with friends and loved ones during this crazy time.

Happy weekend, friends!
Are You Doing COVID-19 Research?
Tags: life, cicd, covid19, devops
Published: 2020-04-24 18:28:23

---
title: Are You Doing COVID-19 Research?
published: true
date: 2020-04-24 18:13:14 UTC
tags: life,ci/cd,covid-19,devops
canonical_url: https://greenido.wordpress.com/2020/04/24/are-you-doing-covid-19-research/
---

![](https://greenido.files.wordpress.com/2020/04/screen-shot-2020-04-24-at-11.10.02-am.png?w=1024)

“World War II was the defining moment of our parents’ generation. In a similar way, the COVID-19 pandemic—the first modern pandemic—will define this era.” – Bill Gates said it in his [last post yesterday](https://www.gatesnotes.com/Health/Pandemic-Innovation).

One of the interesting aspects of his observations is the need to collaborate our efforts on treatments, vaccines, testing and contact tracing.  
We all want to help fight Covid-19. At JFrog we are helping developers be more productive with their work by harnessing the power of [DevOps best practices (and tools)](https://dev.to/jfrog/continuous-software-updates-4m0e).   
Are you working on IoT to medical devices?   
Here is [one example](https://jfrog.com/swampup-resources/implementing-modern-ci-in-an-iot-medical-project/) on how to improve your process to ship better code in a faster way.

There are many more [examples](https://greenido.wordpress.com/tag/ci-cd/) like that but bottom line, we want to help any organization that is fighting Covid-19.    
You can apply here: [https://jfrog.com/covid19/](https://jfrog.com/covid19/)

### What is FrogCare program?

FrogCare is JFrog’s way of giving back and helping where we can. In this case, FrogCare is focused on providing DevOps tooling to qualifying organizations or projects that are fighting the novel coronavirus (COVID-19). If your project or company qualifies, you’ll get access to world-class DevOps tools from JFrog free of charge. Hosted on AWS, you’ll have gratis access to [JFrog Artifactory](https://jfrog.com/artifactory), JFrog [Xray](https://jfrog.com/xray) for DevSecOps and JFrog [Pipelines](https://jfrog.com/pipelines/) for cloud-native CI/CD orchestration and management.

### Is It Free?

It’s free, yes. We just want to help where we can. If you’re approaching your limits, we’ll get in touch with you to give you some tips on how to keep your storage or transfer costs down, or explore other options with you – but don’t worry. This isn’t a sales exercise.

Wish to learn more? Check the conversation I had with Alan Shimel from Devops.com

{% vimeo 408626528 %}


Last but not least, if you wish to help with active projects, check this [https://helpwithcovid.com/](https://helpwithcovid.com/)

Be safe!
Is request latency a problem when you develop your mobile app?
Tags: android, ios, discuss, architecture
Published: 2020-04-24 18:03:52

Hello guys! 

I've got a few questions towards mobile apps developers. 

- Is the performance of your app requests an issue? More specifically, how is the response time when you have to query a database in your server-side?
  
- If so, have you implemented any cache solutions? Which ones? 

- What would you think about a REST API providing a high-performance cache 'as-a-service' offering? (serverless, all your app would do is a single API call) 

Our team is playing around this idea, but we are not quite sure it is relevant enough to build a product for it. 

Any input is **highly appreciated**. I can provide further details if you want to discuss this.
How To Access Dev Tool On Mobile Browsers
Tags: devtool, webdev, javascript, 100daysofcode
Published: 2020-04-24 18:01:43

Recently, I was working on a side project with some friends. Unfortunately my PC had been damaged during the covid-19 pandemic and I couldn't get to fix it because of the lock-down, so I had to resort to coding on my mobile phone 🤦🏾‍♂️.

Somehow, my code works perfectly offline, but for some reasons, it did not go well online 🤒
And of course I'll be needing dev tool to access the console and check for errors.

Some minutes of googling later, I discovered it's very much possible to access the dev tool on mobile browsers with [Eruda](https://github.com/liriliri/eruda) 🎉

## Below is how you can do open the dev tool on chrome mobile browser

### Step 0

Bookmark your current page by clicking the star ⭐ symbol from the chrome menu.

After doing this, you should see a toast message `Bookmarked` with an **edit** button:

![IMG_20200424_180749_459.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1587748816902/LEpaA4VKZ.jpeg)

Click the `edit` option and change the bookmark details to the following:
#### Name:
Mobile Dev Tool
#### URL (copy and paste code below):
```javascript
javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();
```

### Step 1

* Visit the web page you want to inspect
* Enter the keyword **Mobile Dev Tool** into the search bar(you should see the page we bookmarked before with the url starting with javascript:...) click on the URL

![Dev Tool On Android - Eruda](https://cdn.hashnode.com/res/hashnode/image/upload/v1587748875203/PYxyCoMrV.jpeg)
* Wait for 3 Seconds for the Eruda icon to appear like below

![DevTool on Android - Eruda](https://cdn.hashnode.com/res/hashnode/image/upload/v1587747755477/H1U8b6v7-.jpeg)
* Click on the icon to open your dev tool 

![Dev Tool On Android - Eruda](https://cdn.hashnode.com/res/hashnode/image/upload/v1587748366757/uOLm6sZ6W.jpeg)

* Enjoy! 🎉

____

### Here's what you can do with the Eruda dev tool
* View javascript console
* Inspect element
* Track Ajax requests
* View website source files
* Change CSS directly from web page
*  And other awesome features 

## Conclusion
Eruda is an open sourced javascript package publicly hosted on github [here](https://github.com/liriliri/eruda) and contributions are welcomed.
If you'd found this article useful, c'mon show some love and share with your friends 🤗


Finally, I share and retweet tech stuffs on Twitter too follow me [@asaolu_elijah](https://twitter.com/asaolu_elijah)

Thanks for reading ❤️
Comic: Agent vs Agentless, and The Anarquist Tool
Tags: devops, beginners, ansible, comics
Published: 2020-04-24 17:50:12

---
title: Comic: Agent vs Agentless, and The Anarquist Tool
published: true
description: In this comic, we'll discuss why configuration management tools are often complex in nature, and why Ansible is a viable alternative to automate your infrastructure setup.
tags: devops, beginners, ansible, comics
series: Configuration Management 101
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8hnbcxj9ie9mnc6ewtzh.jpg
---

In this comic, we'll discuss why configuration management tools are often complex in nature, and why Ansible is a viable alternative to automate your infrastructure setup.

![comic - agent vs agentless](https://dev-to-uploads.s3.amazonaws.com/i/vn405vh2qhd06uxgzntj.jpg)

Transcript:

> Configuration Management Tools can be complex, and some will require more setup work than others. That is because these tools deal with **system states**. They're not "just scripts".
Most configuration management tools require an agent installed on the remote server you want to control. The agent will provide information about that system and execute instructions from a controlling server. While this creates a tight control over the nodes, it can greatly complicate the initial setup of your fleet, also when adding a new server.
There's one tool, however, which does things differently. It doesn't require specialized software to be installed on nodes. It uses **SSH** to communicate and manage hosts from a controller machine. This tool is called **Ansible**. Ansible is free and open source.

[Ansible](https://ansible.com) is a configuration management that doesn't require any specialized software to be installed on the machines you want to control. For that reason, and because it uses YAML for defining provisioning script, it is a great tool to get started with configuration management, and it can be used to manage from small to very large infrastructure environments.

Some of the most important characteristics of Ansible are:

- Python-based
- Agentless nature, uses SSH
- Idempotent behavior
- Uses YAML files to define automation
- Sequential execution of tasks
- Batteries-included: hundreds of built-in modules
- Templating system (Jinja2)
- Can be extended in any programming language able to return JSON

### Learn More about Ansible

In this webinar, I talk about Ansible and present a live demo deploying a LEMP + Laravel application to remote servers.

{% youtube EVsqdS8kWSQ %}

Ansible Tutorials:

- [How to Install and Configure Ansible on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-ansible-on-ubuntu-18-04)
- [Configuration Management 101: Writing Ansible Playbooks](https://www.digitalocean.com/community/tutorials/configuration-management-101-writing-ansible-playbooks)
- [How to Use Ansible: A Reference Guide](https://www.digitalocean.com/community/cheatsheets/how-to-use-ansible-cheat-sheet-guide)
Birds-eye view on Spring-Boot Microservice CI/CD using Gitlab, Dockerhub, AWS
Tags: springboot, microservices, gitlab, aws
Published: 2020-04-24 17:22:32

Below image will give you a clear view of what is exactly happening.

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

Link to a more clear direct image https://dev-to-uploads.s3.amazonaws.com/i/4q4ubws5onoi1m8g2gvl.png


If you need more detailed explanation please reach out to me :)
React Modal Manager Context
Tags: react, javascript, webdev
Published: 2020-04-24 17:17:55

In case your modal __open/close/update logic__ sucks - grab & use this modal manager context.
```jsx
import * as React from 'react'

export const ModalManagerContext = React.createContext({
  handleOpenModal: () => {},
  handleCloseModal: () => {},
  handleChangeModalData: () => {},
  handleUpdateModalData: () => {},
  isOpen: false,
  modalData: {}
})

const ModalManagerContextProvider = ({ children }) => {
  const [modalState, handleChangeState] = React.useState({
    isOpen: false,
    data: {}
  })

  const handleOpenModal = (data = {}) => {
    handleChangeState(prevState => ({
      isOpen: true,
      data: {
        ...prevState.data,
        ...data
      }
    }))
  }

  const handleCloseModal = () => {
    handleChangeState({ isOpen: false, data: {} })
  }

  const handleChangeModalData = (data = {}) => {
    handleChangeState(prevState => ({ ...prevState, data }))
  }

  const handleUpdateModalData = (data = {}) => {
    handleChangeState(prevState => ({ ...prevState, data: { ...prevState.data, ...data } }))
  }

  return (
    <ModalManagerContext.Provider
      value={{
        handleOpenModal,
        handleCloseModal,
        handleChangeModalData,
        handleUpdateModalData,
        isOpen: modalState.isOpen,
        modalData: modalState.data
      }}
    >
      {children}
    </ModalManagerContext.Provider>
  )
}

export default ModalManagerContextProvider
```
Check this 🍬 as well: [React click outside hook](https://dev.to/max_frolov_/react-click-outside-hook-1264).

More tips and best practices on my [twitter](https://twitter.com/max_frolov_).

Feedback is appreciated. Cheers!