teleren/devto huggingface dataset:
Debugging in React + Redux chrome extension
Tags: react, redux, debug, chromextension
Published: 2020-01-09 09:16:20

Often, the basic setup for Redux DevTools Extension is not enough. I ran into this problem while trying to debug a redux store in my chrome extension. Here are the steps I followed to address this problem:

Step 1: Follow instructions from [here](http://extension.remotedev.io/) to install the Redux Dev Tools chrome extension.

```javascript
npm install -- save-dev remote-redux-devtools
or
yarn add remote-redux-devtools --dev
```

Step 2: Assuming a basic store set up without any sort of middlewares, configure your project to use it.


```javascript
import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';

import rootReducer from './reducers';

const store = createStore(rootReducer, devToolsEnhancer());

export default store;
```

Now we’re ready to debug.

***

Open extension popup by clicking on its icon. Right-click on the opened extension window and choose <b>Inspect</b>. This will open Chrome Developers Tools and will keep your extension window open until you close the devtools.

![image1](https://user-images.githubusercontent.com/30471808/72053720-7a497c00-32bf-11ea-9617-2d01135afe7f.jpeg)

Right-click on the extension window again and choose <b>Open Remote DevTools</b> under <b>Redux DevTools</b>.

![guide](https://user-images.githubusercontent.com/30471808/72053861-c7c5e900-32bf-11ea-89fc-ab4d919b7403.jpeg)

This will open Remote Dev Tools that will connect to your Redux store in a moment.

![redux store](https://user-images.githubusercontent.com/30471808/72053927-e926d500-32bf-11ea-8efd-44f4f9b5fbf8.png)

Now you’re ready to debug 😊👏.
JavaScript: Transforming arrays using map
Tags: javascript, functional
Published: 2020-01-09 09:12:38

If you’ve done even the most basic coding in JavaScript, I’m sure at some point you’ve used a for loop to iterate an array.

This works just fine, but did you know that Array.prototype (the base array object) contains a number of functions that make performing common tasks based on array iteration more concise?

One such function is map, and map is used to transform an array based on a transformation function. Let’s look at an example using a for loop, then I’ll show you the same thing using map, and I’m sure you’ll agree it’s nicer.

Let’s say we want to transform all the strings in an array to uppercase. Using a for loop we could do:

```javascript
const list = ['javascript', 'ruby', 'java'];
const allCapsList = [];
for (let i = 0; i < list.length; i++) {
  allCapsList.push(list[i].toUpperCase());
}
// allCapsList ['JAVASCRIPT', 'RUBY', 'JAVA']
```

The same code when using map would be:

```javascript
const list = ['javascript', 'ruby', 'java'];
const allCapsList = list.map(item => item.toUpperCase());
// allCapsList ['JAVASCRIPT', 'RUBY', 'JAVA']
```
As you can see, map makes things much more concise. It removes all of the iteration logic, so you can focus on the transformation you want to perform. As you can see this means less code is required for the same result.

So let’s break down the map function.

It takes as it’s argument an iterator function. That function will be called for each element in the array in turn. The iterator function should return the result of transforming the current array element in some way (uppercasing it in our example).

The return value of map will then be a new array, with every element of the original array transformed by the iterator function. Note that the original array map is called on will *not* be modified. The transformed elements end up in a new array. It is what we call a pure function.

I’ve only used one argument for the iterator function, the current element in the array for this iteration, but the iterator can take up to 3 arguments:

* element: The current element in the array
* i: The current numerical index of the array
* array: The entire array map was called on (list in our example)

Map is simple. Use it next time you want to transform an array. Give it a go and you’ll never go back to using loops to do this, I promise.

Liked this? Then you'll love my mailing list. I have a regular newsletter on JavaScript, tech and careers. Join over 5,000 people who enjoy reading it. [Signup to my list here](https://wellpaidgeek.ck.page/signup).
[Video] Asynchronous tasks in Django with Django Q (Part 2)
Tags: django, python, webdev, redis
Published: 2020-01-09 09:04:03

---
title: "[Video] Asynchronous tasks in Django with Django Q (Part 2)"
published: true
description: "Learn how to use Django Q for offloading asynchronous tasks in your Django applications."
tags: django, python, webdev, redis
series: "Django Q"
canonical_url: https://youtu.be/fBigjO0Pjek
---

**Django Q** is a scheduler and a task queue for Django. In this series you'll learn how to use Django Q in your Django applications for queuing long-running tasks.

In this episode: 

- preparing the Heroku project
- installing Django Q

Enjoy!

{% youtube fBigjO0Pjek %}
The best get better all the time 💫
Tags: agile, saas, productivity
Published: 2020-01-09 08:54:20

Every team’s continued success is up to how much they keep improving their people, processes and product/s.

Continuous improvement can be difficult for even the most refined and experienced of teams and this can be due to many things; time constraints, execution, following through on actions and so on. 

We’re building a platform that helps teams practice continuous improvement seamlessly within your iterations so you can deliver only the best value for our customers.

Starting with a [free retro tool](https://www.bebetter.team), the team at Better have lot’s of plans  to help make your team keep on improving, such as automation and integrations, so stay tuned over the coming months.

In the meantime, we’re always happy to hear your feedback, so please let us know what you think so far and what you’d like to see next!
Hello, Blog!
Tags: testpost, helloworld
Published: 2020-01-20 03:50:50

---
title: Hello, Blog!
published: true
date: 2020-01-05 04:55:32 UTC
tags: testpost, helloworld
canonical_url: https://fa7ad.postach.io/post/hello-blog
---

Once again, I’ve switched blogging platforms.

  

I’ve switched between {WordPress, Ghost, Jekyll, Medium, Hexo} and now this is Postach.io (or dev.to)

  

So...

Hello, World!

  

Lets try to make a bunch of "Hello, world" programs in as many languages as I can 🙃

  

Let’s start with my favourite language, JavaScript

  

```
console.log("Hello, world")
```

Or,

```
document.write('Hello, world')
```

  

Onto the next few language

  

C

```
#include <stdio.h>

  

  

int main() {

 printf("%s", "Hello, world");

 return 0;

}
```

  

C++

```
#include <iostream>

int main() {

 std::cout << "Hello, world" << std::endl;

 return 0;

}
```

  

Go

```
package main

import "fmt"

  

  

func main() {

 fmt.Println("hello world")

}
```

  

Back to some concise syntax

  

Python

```
print("Hello, world")
```

  

Haskell

```
main::IO()

main = putStrLn "Hello, world"
```

  

ReasonML

```
Js.log("Hello, world");
```

  

Now, the piece de resistance,

My least favourite ones

  

Java

```
public class HelloWorld {

 public static void main (String[] args) {

 System.out.println("Hello, world");

 }

}
```

  

C#

```
using System;

  

namespace HelloWorld {

 class Program {

 static void Main(string[] args) {

 Console.WriteLine("Hello, world");

 }

 }

}
```

  

PHP

```
<?php

echo "Hello, world";
```

  

  

That’s about all I could think of. This post is nothing but a test to see what a blog post looks like.

  

Peace ✌️

  

 ![](https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/eff98a79-f6ea-46d2-8a0d-2bc05d0afae8/51a24f2a-6a3a-44f8-b6e9-547f6c0862b4.gif)
Decentralized WebNet
Tags: blockchain, react, javascript, heroku
Published: 2020-01-09 08:36:57

### Blockchain : The mind behind the project

The project focuses on using the idea of blockchain to create a social website network where the client has the ability to create , view and tip any post on the ethereum network . Blockchain is a trending topic and the idea of how it provides a secure way to store the personalized information using sha256 and other encryption algorithms and proof of work algorithms all combined together , it's just amazing . This project however doesn't work on the main ethereum network but on the ropsten test network in metamask . Wondering now what Metamask is ? You sure should .

### Metamask , Truffle ,  Infura and Ganache CLI

The Ethereum site provides certain frameworks to work with so that the transactions that actually happens are easily kept tracked of in the blockchain . To begin with , I have used **truffle** which does the necessary setup to write contracts , migrations and test for your blockchain to work with . It creates your project  using **truffle init** . The truffle migrations are used to compile and deploy the contracts written . The test have been written in javascript using **chai** & **mocha** . The test in truffle works asynchronously , hence makes use of **async** & **await**. Moving to metamask , it is a chrome extension that connects your blockchain to the frontend and allows the client to perform transaction , you can import accounts by providing the private key . Metamask also offers the option of various test network and provides the feature to add your personal local network . This local network can be used for testing purpose and it is the done using Ganache-CLI . 

Now new term Ganache !! Well , Ganache provides you a quickstart that gives you 10 free accounts with 100 ether in each , this is fake ether and not real ether , you can't use it in the **main ethereum network**. Last but not the least , what is Infura !! Infura was used in this project so that I was able to deploy the blockchain created to the ropsten network . It can be used to connect to the other test network and the main ethereum network as well. 

### Web3 and React

Web3 and React were majorily used to connect the blockchain to the front-end to provide an easy manner for the client/user to interact with the blockchain . Web3 is majorily used to loadBlockchainData and access the functions within the contract. 

### Heroku 

Heroku was used in this project to deploy the entire project . 

### Links 

Even though there are a minor issues within the project , I will love to know your review on it .

1. [Devfolio Link for Project](https://devfolio.co/submissions/decentralized-webnet)
2. [Dweb-Net Website](http://dweb-net.herokuapp.com/)
Implementation of insertion sort algorithm in Javascript
Published: 2020-01-09 08:35:45

Insertion-sort is one of the most common sorting algorithms used by computer programmers to sort their data. It takes an input which is a sequence of n finite set of numbers , then a permutation (reordering) is applied to the sequence, such that the element with index[n] in the sequence is less or equal to the element with index[n+1] or vise versa .

The numbers we wish to sort are called keys(elements), due to the fact that the inputs are a sequence, the n numbers are going to come to us in a form of an array. before i propose to you a pseudo code and its implementation, i will introduce an analogy of sorting a hand of cards to better illustrate how the algorithm works.

lets say you have 5cards all are face-down, you pick the first card and you turn it face up, then you have to pick another card and turn it face up (insertion) so that you have a degree of comparison (2-cards), you iterate the process till all cards are face up and sorted.

Lets consider the following pseudo code from chapter 2 of the book titled introduction to algorithms by Cormen et al

```
for j = 2 to A.length
   key= A[j]
   i= j-1
   while i>0 and A[i]> key
    A[i+1]=A[i]
    i=i-1
A=[i+1] = key
```

The design approach used for its implementation in javascript is an incremental approach, and it looks something like this.

```javascript
var A = [3,1,9,5,4];
for (let index = 0; index < A.length; index++) {
const key = A[index]
let i = index -1;
while (i >= 0 & A[i]> key) {
A[i+1] = A[i]
i = i-1;
A[i+1] = key
}
// console.log(key);
}
console.log(A);
//Sort Ascending
```


To sort in descending order you only need to change the A[i]>key comparison sign to <. It is of paramount to note that the following code does the same as the above code.

```javascript
var A = [3,1,9,5,4];
A.sort(function(a,b){
return a-b;
})
console.log(A)
```
If you would like me to share more information with you, you can direct message me on twitter .
Collab Lab Week 4 - Wednesday
Tags: collablab
Published: 2020-01-09 08:34:41

Met up to pair with Mike again today. We definitely [made progress](https://github.com/the-collab-lab/tcl-3-smart-shopping-list/pull/53/commits/33d6d90b3e869e4c54eae7342e8c67bb19c96617). We used dummy data to test the normalize and check for matches functions. We ended up using Mike's code that was previously written for that. No RegEx! No need to reinvent the wheel.

I think we will use the [Context API](https://reactjs.org/docs/context.html) to save the shopping list data and check that list for duplicates before adding a new item to the database.

I have a technical screen tomorrow. It's done by pair programming, so I feel like I got some good practice in today.
{% twitter 1215174201541193728 %}
Why Should You Care About Loose Coupling?
Published: 2020-01-09 08:26:05

Have you ever been in a situation where a change in your application has caused a strange bug in a completely different part of your application? Or have you at least experienced an API breaking?

You can reduce the chance of these problems by having different parts of your application know as little as possible about each other as possible. This an architectural design called loose coupling.

A loosely coupled application is also a lot easier to split into smaller services if you ever need it. This will be helpful if you ever consider splitting your monolith into microservices.

I have found it a bit hard to find some good practical examples on how to build a loosely coupled application. So here are a few tips you can follow to make your application more loosely coupled.

Folder structure http://tradevenue.se/
Imagine you have a folder structure like this

With a folder structure like this, you need to open several folders to understand how each of the features works. And when the list of features increases, I find it hard to navigate, since I am forced to have several folders open at once. Although most of it is irrelevant at the given moment since I am usually working on only one feature at a time.

And also if we ever want to split this into several services, we have to sort through several different folders to connect the parts we need.

An alternative way is to group the folders by feature, like this.
Deploy Prometheus + Grafana to Kubernetes by Helm 3
Tags: kubernetes, grafana, prometheus, helm
Published: 2020-01-09 08:09:57

---
title: Deploy Prometheus + Grafana to Kubernetes by Helm 3
published: true
description: Deploy Prometheus + Grafana to Kubernetes by Helm 3
tags: kubernetes, grafana, prometheus, helm
---

Make your own Prometheus + Grafana in kubernetes cluster and start monitoring it in some minutes😌

## Add repository of stable charts

Helm3 has not default repository.


```bash
helm repo add stable https://kubernetes-charts.storage.googleapis.com
```

## Install prometheus-operator

```bash
helm install my-prometheus-operator stable/prometheus-operator
```

## Show pods

```bash
kubectl --namespace default get pods -l "release=my-prometheus-operator"
```

## Show Grafana UI


```bash
kubectl port-forward $(kubectl get pods --selector=app=grafana --output=jsonpath="{.items..metadata.name}") 3000
```


Open it http://localhost:3000/
Convert translate message calls to a single json language file
Published: 2020-05-07 23:56:55

---
title: Convert translate message calls to a single json language file
published: true
date: 2020-01-09 07:37:07 UTC
tags: 
canonical_url: https://dcblog.dev/convert-translate-message-calls-to-a-single-json-language-file
---

 ![Convert translate message calls to a single json language file](https://dcblog.dev/assets/images/blog/laravel-framework/convert-translate-message-calls-to-a-single-json-language-file.png) 

Laravel supports using the **\_\_()** call to setup locale for your pages ie in a blade file you may have a title called Dashboard. To make it translatable you would use:

```php
{{ __('Dashboard') }}
```

This will default to the given text if the config/app.php file's locale is set to en, if its set to another language Laravel will look for a the lang.json file in the resources folder, if one is not found then the given message will be used. 

You have to manually create the language files yourself which can be time-consuming.

This package: [https://github.com/vemcogroup/laravel-translation](https://github.com/vemcogroup/laravel-translation/blob/master/README.md) provides the ability to automate the lang file process!

Install it with composer:

```php
composer require vemcogroup/laravel-translation
```

Publish the config:

```php
php artisan vendor:publish --provider="Vemcogroup\Translation\TranslationServiceProvider"
```

This generated a config file to config/translation I'll stick with the defaults for this post.

Now all you need to do is run:

```php
php artisan translation:scan
```

This will scan your .php and .vue files (you can add others in the config) looking for matching functions the defaut is to look for \_\_() functions. All matches are added to resources/lang/en.json

This is very useful as can write your text in english using the \_\_() syntax and generate a single language file for any translations needed, perfect!
Dave Cheney #golang pop quiz
Tags: go
Published: 2020-01-09 07:17:52

What is the output for this program?

Source: https://twitter.com/davecheney/status/1215006731610124288


```golang
package main

import (
	"fmt"
)

func isEven(v int) bool {
	if (v % 2) == 1 {
		goto false
	}
	return !false
false:
	return false

}

func main() {
	fmt.Println(isEven(2020))
}
```
Tips for Using Froala Drag Between Blocks Features
Published: 2020-01-09 06:16:24

Froala Editor is a lightweight WYSIWYG HTML Editor which helps developers and designers to add images between blocks. Froala has Drag & Drop smart feature which provides the ease of adding images, resizing, adding content and much more.

Give it a try by visiting https://bit.ly/2sOoGUN

#WYSIWYGHTMLEditor
Open Source Creator Series, Part 1: Licensing Fundamentals
Tags: opensource, licensing, diy, bootstrap
Published: 2020-01-09 05:58:40

At any given moment, thousands of developers around the world are creating new open source software – to solve a problem that has no good existing solution or to scratch a technical itch. Regardless of what originally motivated the project, as it matures, you'd likely want more and more people or companies to use it. Getting adoption, however, requires much more than good engineering. (It's a tough but recognized truth that the best technology doesn't always "win".)

Today, we are launching the "Open Source Creator Series" to help **you** – the technology creators – understand and bootstrap some of the essential **non**-technical elements of building a successful project, which are likely not in your area of expertise or comfort zone. 

The first topic we will explore is "licensing fundamentals" by Heather Meeker, who's the preeminent open source licensing expert, wrote one of the definitive books on the topic "Open Source for Business", and is a [partner](https://oss.capital/#team) at OSS Capital.

(In future posts, we will discuss topics like: product marketing, capital efficiency, building community, technical writing and documentation, etc. Comment below if you have topics you'd like us to cover.)

Below is a video slide presentation by Heather on open source licensing fundamentals. Although the presentation is mostly speaking to the needs of corporate adopters, knowing how companies approach adoption and licensing is critical, because the policies they follow will drive adoption rates of your creation, and ultimately determine its future potential and impact.

Understanding how they understand licensing and compliance is just as important, if not more, as your own point of view on how your creation ought to be used.

Heather also explains how corporate adopters balance the risk and reward of adopting open source software, and identifies their pain points in following the requirements of open source licenses.

Ultimately, the licensing model is supposed to serve the development model of open source, not vice-versa. Software adoption is both a technical and a business decision. Licensing is a part of it, but so is total cost of ownership (TCO), sustainability and supportability, etc.

We hope this material from Heather helps you grasp open source licensing fundamentals and put the topic in proper context, as you continue building your creation.

*Please note: This presentation does not constitute legal advice and does not create an attorney-client relationship. The principles presented here may not apply to the facts of your situation.*

{% youtube gF4b1TA5Q5w %}

###Resources:###

 - Heather Meeker's Book, "Open Source for Business"
 - Link to slides in the video
I'm a professional React developer, and here's how I set up React/Node.js/GraphQL Microservices on AWS using Terraform. #4
Tags: react, node, webdev, javascript
Published: 2020-01-09 05:40:35

**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!)_

In a previous video series, I built a classifieds app with a microservices architecture using React, Node.js, GraphQL and Docker; you can find the dev.to article on that [here](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-set-up-react-node-js-microservices-using-docker-and-graphql-20gk).

Now, I'm deploying that application onto [AWS](https://aws.amazon.com/) using [Terraform](https://www.terraform.io/), and this is part 4 of that tutorial.

I hope you enjoy!

{% youtube QfZGh_vZk-M %}

Happy coding!

Full source code: [https://github.com/parkroolucas/microservices-demo](https://github.com/parkroolucas/microservices-demo)
Me, Myself and Irene
Published: 2020-01-09 05:22:55

# Watch me grow 

Hey everybody, this is my first post on this platform. My hope is to document my learning all in one place and figured this would be a great place for that.

I'm working at present as a data manager and I'm really feeling that I need to add many more strings to my bow, so I have enrolled in a 10 week part time data scientist role here in Vancouver and it starts in 2 weeks. So I have dived into prepping for it since the new year. I'm excited to get hands on with assignments and projects that hopefully will help me gain a better understanding of what all this data collection is for.

The course will predominately use python for programming which is great as I know the community for this language are awesome. I hope to ask lots of questions on the topic and read the many great posts on the subject here.

Thanks in advance as I know I will be helped out a lot on my way, and hopefully down the line repay that to other newbies.