teleren/devto huggingface dataset:
NativeBase
Tags: nativebase, react, reactnative, beginners
Published: 2020-06-04 04:05:52

It’s an open source framework to build React Native apps over a single JavaScript codebase for Android and iOS. So for make it easier, I am using Native Base. This helps you to build world-class application experiences on native platforms using pre built component for both Android and iOS.

Without Native base, we have to write separate component for Android and iOS manually. For Beginner, NativeBase prove to be huge time saver.

<h3>Integrating Native Base to App:</h3>

Install native-base:-

```terminal
$ npm install native-base –save
```

And Then we can use the native-base component easily.

To know more about native base and it’s components please check: https://docs.nativebase.io/

**For Font Icons:**

If you want to use font icons in app, then we have to use NativeBase custom fonts that can be loaded using loadAsync function.

Copy below snippet into index.js:

```react
constructor() {
   super();
   this.state = {
     isReady: false,
     isConnected: true
   };
 }

async loadFonts() {
   await Expo.Font.loadAsync({
     Roboto: require("native-base/Fonts/Roboto.ttf"),
     Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
     Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf")
   });
   this.setState({ isReady: true });
 }

componentWillMount() {
   Amplitude.initialize(AMPLITUDE_KEY);
   this.loadFonts();
 }

render() {
   if (!this.state.isReady) {
     return <Expo.AppLoading />;
   }
```

After using above snippet, We can use custom font into App.

Thanks for reading this article ♥

I hope you would find these article useful. Feel free to ping me in comment section or <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Redux
Tags: redux, javascript, beginners, react
Published: 2020-06-04 04:04:55

Redux is a predictable state container for JavaScript apps. Need to understand the basic three principle. Here, you don’t need to use Babel or a module bundler to get started with Redux. (It integrates with reducer and action.)

When do you need to integrate redux with app:

1. You have reasonable amounts of data changing over time
2. You need a single source of truth for state
3. You find that keeping all the state in a top-level component is no 
   longer sufficient

**Installation:**

```terminal
$ npm install –save redux
```

There will be some more packages which we need to install for the React bindings and the developer tools.

```terminal
$ npm install –save react-redux
```

```terminal
$ npm install –save-dev redux-devtools
```

<h3>Actions:</h3>

Actions are payloads of information that send data from our application to our store. They are the only source of information for the store. We send them to the store using store.dispatch()

(It’s an object that tells the reducer how to change data. It has only one requirement, it must be have type: property)

Here, is an example:

```react
export const FETCH_PRODUCTS_LIST_SUCCESS = 'FETCH_PRODUCTS_LIST_SUCCESS';

export const fetchProductSuccess = products => ({
 type: FETCH_PRODUCTS_LIST_SUCCESS,
 payload: products
})
```

<h3>Reducer:</h3>

It specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.(It’s a function which returns some data. )

Here, is an example:

You will be importing FETCH_PRODUCTS_LIST_SUCCESS from `actions`.

```react
import {
 FETCH_PRODUCTS_LIST_SUCCESS
} from '../actions/productAction'

const initialState = {
	loading: false,
        isCartEmpty: true,
        products: []
}
```

You will be handling actions here:

```react
export default function productReducer (state = initialState, action) {
	switch(action.type) {
		case FETCH_PRODUCTS_LIST_SUCCESS:
                return {
                    ...state,
                    loading: false,
                    isCartEmpty: true,
                    products: productList
                 }
                default:
                   return state
         }
}
```

Thanks for reading this article ♥

I hope you found this blog helpful, If you have any question please reach out to me on <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Two City Scheduling
Tags: greedy
Published: 2020-06-04 03:55:58

---
title: Two City Scheduling
published: true
description: Easy Problem
tags: greedy
---

There are 2N people a company is planning to interview. The cost of flying the i-th person to city A is costs[i][0], and the cost of flying the i-th person to city B is costs[i][1].

Return the minimum cost to fly every person to a city such that exactly N people arrive in each city.

**Example 1:**

``` 
Input: [[10,20],[30,200],[400,50],[30,20]]
Output: 110
Explanation: 
The first person goes to city A for a cost of 10.
The second person goes to city A for a cost of 30.
The third person goes to city B for a cost of 50.
The fourth person goes to city B for a cost of 20.

The total minimum cost is 10 + 30 + 50 + 20 = 110 to have half the people interviewing in each city.
```

The question is a bit tricky, with only one test case

## **Algorithm:**

#### Approach 1:

1. Compute the cost of sending every person to City A

	The cost will be 10 + 30 + 400 + 30 = 470

2. Compute the difference if a Person is sent to City B

	1. D1 -> 20 - 10 = 10
	2. D2 -> 200 - 30 = 170
	3. D3 -> 50 - 400 = -350
	4. D4 -> 20 - 30 = -10

	If the last two persons are sent to City B instead of City A, you can save maximum, as those are the persons costing more to City A

3. Sort the diff

	D3, D4, D1, D2

4. Now pick N persons which has least diff and send them to City B
5. Add the diff cost to the total

	470 + (-350) + -(10) = 110

## Code

``` js
/**
 * @param {number[][]} costs
 * @return {number}
 */
var twoCitySchedCost = function(costs) {
    let res = 0
    let diff = new Array()
    for (let i = 0; i < costs.length; i++) {
        res += costs[i][0]
        diff.push(costs[i][1] - costs[i][0])
    }
    diff.sort((a, b) => a - b)
    for (let i = 0; i < costs.length / 2; i++) {
        res += diff[i]
    }

    return res
};
```

## Approach 2:

1. The intuition is to send maximum saving to City A and rest of them to city B

	

	1. D1 -> 10 - 20 = -10
	2. D2 -> 30 - 200 = -170
	3. D3 -> 400 - 50 = 350
	4. D4 -> 30 - 20 = 10

2. Sort the arrays based on the difference cost between city A and city B
3. Send first N persons to City A and the next N to city B

## Code:

``` js
/**
 * @param {number[][]} costs
 * @return {number}
 */
var twoCitySchedCost = function(costs) {
    costs.sort((p1, p2) => (p1[0] - p2[0]) - (p1[1] - p2[1]))
    let res = 0;
    let N = costs.length / 2;
    for (let i = 0; i < N; i++) {
        res += costs[i][0]
        res += costs[N + i][1]
    }
    return res
};
```
Must have apps (Developer Edition)
Tags: developer, github, productivity, webdevlopment
Published: 2020-06-04 03:40:24

1. GitHub (ios & android)
There's no need to recall benefits of using git GitHub is the Instagram for Developers.It let's your monitor all your repositories from your phone
2. Google Tasks (ios & android)
A simple way to plan your day planning your day ahead of time could not only makes you more productive but also lets you find where majority of your time was spent 
I recommend to use it along with any of your favorite Time tracking app
3. Dribble (ios & android)
Its a great place to get ideas for your UI be careful while choosing one
...
Adding more soon
Black Lives Matter: Help Match my Donations 💜
Tags: blacklivesmatter, help, news
Published: 2020-06-04 03:14:55

---
title: Black Lives Matter: Help Match my Donations 💜
published: true
description: I am currently working Full-Time running fundraisers for individual #BlackLivesMatter chapters.
tags: BlackLivesMatter, help, news
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ee7qtgj0bu5q0k8hjuxy.png
---

*In solidarity with my Black brothers and sisters, I will not post anything work or tech related at least till end of week.*

<mark>I am currently working Full-Time running fundraisers for individual **Black Lives Matter** chapters.</mark> 

- **NY:** https://www.gofundme.com/f/Black-Lives-Matter-SpeakUp
- **Atlanta:** https://www.gofundme.com/f/Black-Lives-Matter-Atlanta


--- 

##(1) What is the background story behind these campaigns?

For too long, our country has accepted the continued mistreatment of Black people in the US. **It’s wrong, disgusting and shameful.** It shouldn't take a world-wide crisis for humanity to finally pay a bit more attention. 

**The time to act is now.** A very simple and extremely effective way that anyone can help is by giving a donation to a reputed organization that will help during this crisis. As we all know, money is always needed for causes like this. 


##(2) Who are the Beneficiaries?
I have set up each of these fundraisers so that your donations to these campaigns go directly to BLM. 


**'New York Black Lives Matter'** chapter 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bv5cqretqoex12o5co7y.png)

**'Greater Atlanta Black Lives Matter** chapter
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/peqozjuh1iocchwypqqn.png)


## (3) Why isn't there a Seattle BLM fundraiser set up yet if you are based in Seattle?

I knew someone would ask that! 😂 

It is because --believe it or not!-- the Seattle BLM group  doesn't seem to be registered as a Non Profit 501(c)3 yet. I spent 48 minutes trying to find an EIN number for them and finally decided they must not have it set up yet.  *(I mean.. I even called the IRS to see if an agent could help me out.)* Not to mention that their own main org website does NOT list Seattle among the Chapters: https://blacklivesmatter.com/chapters 

👉🏽👉🏽 But if I am wrong PLEASE CORRECT ME, and I would LOVE to run something for the Seattle chapter too!

As it stands, you can see that even GoFundMe comes up blank when you search for Seattle chapter.

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

Thus, in the absence of supporting the Seattle chapter, I am running individual fundraising campaigns for individual BLM chapters.


##(4) What do you hope this money is used for?
**First** of all, it is going straight to BLM and I leave it up to them to use it as they see fit!

**Second**, it is my hope that this donation can be a help toward raising bail funds for all our brave protestors. This is a great way to oppose the unlawful arrests and rounding up of people.



Stay safe. 
-Alejandra y Canela 💜
Migrating existing code to a new password hashing algorithm
Tags: security, tutorial
Published: 2020-06-04 03:00:28

I maintain the [node-argon2](https://www.npmjs.com/package/argon2) and oftentimes people are afraid to use it due to having a codebase using another password hashing algorithm (e.g. PBKDF2, bcrypt) and how would it be to migrate to Argon2.

Even though the procedure below uses **bcrypt** and **Argon2** as examples, it works to migrate between any two (or more) password hashing algorithms, as long as you can determine what algorithm a given hash uses. In this case, bcrypt hashes start with `$2`, and Argon2 hashes start with `$argon2`.

The idea behind it would also work for any language, not only Javascript, once you grasp it.

---

If your database uses another hash function for passwords, you can gradually migrate to Argon2 to improve security. To do that, you need to rehash your user's password as they log in.

Suppose we want want to migrate from [bcrypt](https://www.npmjs.com/package/bcrypt), with the following code:

```js
import bcrypt from 'bcrypt'

router.post('/login', async ctx => {
  const { email, password } = ctx.request.body
  const user = await User.findOne({ email })
  
  const match = await bcrypt.compare(password, user.password)
  if (!match) {
    throw new Error('Unauthorized')
  }
  // user is authorized
  ...
})
```

You need to branch before checking the user password and verify what function the current password uses. Then, proceed to update if the password is still using the previous function.

```js
import argon2 from 'argon2'
import bcrypt from 'bcrypt'

router.post('/login', async ctx => {
  const { email, password } = ctx.request.body
  const user = await User.findOne({ email })
  
  // bcrypt hashes start with $2a$ or $2b$
  // argon2 hashes start with $argon2i$, $argon2d$ or $argon2id$
  if (user.password.startsWith('$2')) {
    const match = await bcrypt.compare(password, user.password)
    if (!match) {
      throw new Error('Unauthorized')
    }

    // rehash password with argon2 and save to database
    user.password = await argon2.hash(password)
    await user.save()
  } else {
    const match = await argon2.verify(user.password, password)
    if (!match) {
      throw new Error('Unauthorized')
    }
  }
  // user is authorized and password is updated
  ...
})
```

And you're done! Your passwords will be gradually updated to use Argon2.
4 Steps Integrate Microsoft Graph with Azure Bot Services
Tags: azurebotservices, microsoftgraph, microsoft365, microsoftazure
Published: 2020-06-04 02:19:01

---
title: 4 Steps Integrate Microsoft Graph with Azure Bot Services
published: true
description: 4 Steps Integrate Microsoft Graph with Azure Bot Services
tags: Azure Bot Services, Microsoft Graph, Microsoft 365,Microsoft Azure
cover_image: http://img.youtube.com/vi/wXtRFtBr_1I/0.jpg
---
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/wXtRFtBr_1I/0.jpg)](http://www.youtube.com/watch?v=wXtRFtBr_1I)

**Sign Up for M365 Developer Program**
https://developer.microsoft.com/en-us/office/dev-program

**Setup for Microsoft Graph Postman Collection**
https://github.com/microsoftgraph/microsoftgraph-postman-collections

**Source Code**
https://github.com/cheahengsoon/MicrosoftGraphBotSharePoint

**YouTube Channel**
https://www.youtube.com/c/engsooncheah
IT Support Là Gì? Công Việc Của Một IT Support Là Gì?
Published: 2020-06-04 01:54:33

Trong thời đại công nghệ thông tin, sự tăng trưởng mạnh của các ứng dụng công nghệ cũng như các nền tảng công nghệ đòi hỏi con người không ngừng cập nhật và tiếp thu những xu hướng mới. Cùng với đó,những người làm trong ngành IT cũng không ngừng nâng cao bản thân và xuất hiện những công việc mới để đáp ứng xã hội về công nghệ. IT support ra đời với mục đích hỗ trợ cho khách hàng, chia sẻ bớt công việc với team. Vậy IT Support là gì? Công việc của họ như thế nào?
http://laptrinhvacongnghe.com/it-support-la-gi/
1 Month, 1 Team, 1 Project #AlloCrew
Tags: react, symfony, redux
Published: 2020-06-04 01:12:35

Lien Github : https://github.com/Largenty/AlloCrew
site: http://18.212.18.87 (messagerie instantanée désactivé pour le moment)

Projet de fin de formation.

Présentation du projet : https://www.youtube.com/watch?v=Pyy9spKwy_M&feature=emb_title

AlloCrew est une plateforme de mise en relation entre créatifs destinée au monde de l'audiovisuel, du Broadcast et du cinéma. Nous sommes ici pour mettre en relation les membres et faciliter leurs recherches d'emploi. Avec AlloCrew, vous trouverez des annonces qui VOUS correspondent.

Tech :
CSS home made, SCSS & SASS, REACT JS, Symfony, REACT-REDUX and NODE JS,
Do devs dream of electric docs?
Published: 2020-06-04 00:44:47

I had a dream last night. 

I was going through a big specs file handed to me by a really talented PM. Features were perfectly described and segmented into small, manageable tasks. 

But here is the best part: after I completed coding Feature 923, I could create a section within my code, enclosing it between comments like "Start:Feature 923" and "End:Feature 923"... and the IDE presentad a link from that code to my specs document automatically, letting other developers (or me next monday haha) easily find which parts of the codebase made that feature work. 

Does anyone know of a way to make my dream come true?
SQUAWK AI (pt 1)
Tags: python
Published: 2020-06-04 00:34:19

I have now been developing SQUAWK AI for a couple weeks and it is already useful!

SQUAWK AI is an artificial intelligence designed for social media marketing. All a user will have to do is input the type of product, brand, and product name and BOOM! A social media post is created using the popular hashtags and the provided information.
Announcing gatsby-remark-liquid-tags
Tags: gatsby
Published: 2020-06-04 00:04:42

Liquid tags on Gatsby Blogs enabled with [`gatsby-remark-liquid-tags`](https://github.com/dillionmegida/gatsby-remark-liquid-tags)

This tool has actually been around for a while, but I decided to announce it here, being the place I got the inspiration from.

When creating posts here on DEV, you'll usually want to embed services from other sources such as codepen, youtube, tweets and so on. You'd do this with liquid tags (`{% %}`). I created this tool to help serve the same purpose on Gatsby blogs (with few other services that DEV does not have, like google slides).

Not all embed services are supported currently. You can find a list of the supported services [in this file](https://github.com/dillionmegida/gatsby-remark-liquid-tags/blob/master/src/SERVICES.md)

## How it works

Basically, the package parses every line in each markdown post using [unist-util-visit](https://github.com/syntax-tree/unist-util-visit) and replaces the liquid tags lines with the associated services. For example:

```md
Here's the codepen you can practice `flex` with:

{% codepen codepen-url tab=js %}

And a youtube video example:

{% youtube 343ad4343 %}
```

I wanted to make services to be in form of URLs (and not partial values, like the hash for youtube) but that would mean, people coming to use the package from DEV, would have to learn a new syntax.

So I tried to maintain the syntax as used here.

## Contributions

[Pull requests](https://github.com/dillionmegida/gatsby-remark-liquid-tags/pulls) and [issue reports](https://github.com/dillionmegida/gatsby-remark-liquid-tags/issues) are welcome. I'd appreciate much support from contributors as I would like more services added. One problem I'm experiencing currently is performing asynchronous operations before replacing the tags appropriately. Any help here would be appreciated.

I'd also appreciate feedbacks from users of this tool.

Thanks for reading, and using the package : )
Automation for Identity Experience Framework is now open-source !!!
Tags: opensource, automation
Published: 2020-09-10 05:49:06

---
title: Automation for Identity Experience Framework is now open-source !!!
published: true
date: 2020-06-04 00:00:00 UTC
tags: OpenSource,Automation
canonical_url: https://www.loginradius.com/engineering/blog/opensource-Automation-for-identity-experience-framework/
---

We're delightfully announcing the open source automation suite to test all the standard authentication cases of LoginRadius Identity Experience Framework.The details have been given below. Link to the repository: https://github.com/LoginRadius/idx-auto-tester/ About LoginRadius…

   
[Read On](https://www.loginradius.com/engineering/blog/opensource-Automation-for-identity-experience-framework/)
Convert HTML to Markdown
Tags: csharp, markdown, dotnet
Published: 2020-06-04 06:53:15

---
title: Convert HTML to Markdown
published: true
date: 2020-06-04 00:00:00 UTC
tags: csharp, markdown, dotnet
canonical_url: https://www.owain.codes/blog/posts/2020/june/convert-a-html-blog-in-to-markdown/
---

After a discussion with a fellow developer on Slack one evening (Cheers Nik!), I found I had a side project to play with. I have been trying to do som... [Continue reading](https://www.owain.codes/blog/posts/2020/june/convert-a-html-blog-in-to-markdown/)
87/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-06-03 22:52:16

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

Today learn about make rules on firebase,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
An Amazon Alexa Skill
Tags: octograd2020, devgrad2020
Published: 2020-05-20 18:00:50

## A Fun Project
Two years ago, I was in a team of 3 for a hackathon at school. We created an Amazon Alexa skill called BitterSweet Sounds that plays songs to enhance the bitter or sweet tastes in food that a user eats. We were inspired by [this study](https://onlinelibrary.wiley.com/doi/abs/10.1111/j.1745-459X.2009.00267.x). 

Upon invoking the skill ("Open BitterSweet Sounds"), the user specifies a food that they want to hear music to (e.g, "I am going to eat <food>" or "I made <food>", etc.). Alexa then lists the ingredients of the given food and asks the user to choose an ingredient to enhance the flavor of. The user then selects an ingredient and a matching song begins to play. 

Aligning with other research, the associations between flavor and music are listed below:
- Sweet: rich tones, upbeat, high-pitched, flute, piano
- Bitter: deep tones, low-pitched, somber, brass

## Link to Code
{% github KMVarma/BitterSweetSounds %}

## How we built it
We used Python, AWS, and Alexa for this project. We used AWS to store music files and a JSON file for the language model for Alexa. The code that did the grunt work was the serverless AWS lambda function. It was my first time coding in Python and everyone's first time working with Amazon Alexa, so we definitely had a lot of challenges getting everything set up and debugging. Thanks to the really helpful mentors and teamwork, we ended up with something that we could demo!

## Additional Thoughts
We recognize that this project ended in an early phase. Future steps that we thought of include using a search API to find ingredients in a given food, using image recognition to identify food, incorporating other sensory stimuli with lighting and color, and adding the other flavors (sour, salty, umami).

[Final Note]: It's bittersweet to look back at this project as an awesome learning experience, but I am super excited to graduate! Congrats to all of the other graduates out there!!
Aprendendo na Next Level Week #1
Tags: beginners, html, css, javascript
Published: 2020-06-03 22:46:22

# O que é a Next Level Week?

O NLW ([Next Level Week #1](https://nextlevelweek.com/inscricao/1)) é uma semana criada pela [Rocketseat](https://rocketseat.com.br/) onde iremos desenvolver uma aplicação do zero e assim poder descobrir na prática novas ferramentas e conceitos. A semana começou no dia 1º de junho e vai até o dia 07 de junho.

# Meu aprendizado

Estudo HTML, CSS e JS todos os dias e estou sempre aprendendo algo novo. Nessa semana eu estou podendo colocar na prática todo esse aprendizado. O bom é que a gente aproveita pra treinar novas habilidades e ainda constrói um projeto para colocar no portfólio. Pra quem não tem muita experiência que nem eu é algo de muita importância.

# O projeto

[O projeto que estamos construindo se chama Ecoleta.](https://github.com/dauryellen/ecoleta-nlw-starter) Ele é um marketplace de coleta de resíduos que ajuda as pessoas a encontrarem pontos de coleta de forma eficiente. 

![Imagem da página inicial do projeto Ecoleta](https://dev-to-uploads.s3.amazonaws.com/i/dkgqindg18uvoqqz5i07.png)

Até o momento foi utilizado HTML, CSS e JS na construção desse website. Mas com certeza virá mais por aí.