teleren/devto huggingface dataset:
React Native
Tags: modules, reactnative, quickstart
Published: 2020-04-07 16:12:27

# Quick Start
*References:*
- React Native Cli
https://github.com/react-native-community/cli#documentation
- Stylesheet
https://reactnative.dev/docs/stylesheet


### Prerequisites
```bash
brew install node
brew install watchman
sudo gem install cocoapods
# Install in the project root rather than globally [Recommended]
npm i react-native --save-dev
npm i ios-deploy --unsafe-perm --save-dev
```

### Init a project
```bash
npx react-native init AwesomeProject
# Using a specific version
npx react-native init AwesomeProject --version X.XX.X
# Using a specific template
npx react-native init AwesomeTSProject --template react-native-template-typescript
```

### Starts Metro Bundler (Ref: [Metro](https://facebook.github.io/metro/))
```bash
npx react-native start
```

### Run on simulator
*(Require Metro Bundler)*
```bash
npx react-native run-ios
npx react-native run-android
```

### Run on simulator/device without Metro Bundler (Production build)
```bash
npx react-native run-ios --configuration Release
npx react-native run-ios --configuration Release --device
```

### Remove unused plugin from pod
```bash
# Install clean:
$ sudo gem install cocoapods-clean

# Run deintegrate in the folder of the project:
$ pod deintegrate

# Clean:
$ pod clean

# Modify your podfile (delete the lines with the pods you don't want to use anymore) and run:
$ pod install
```
---
# Modules
### Navigation
React Navigation
https://reactnavigation.org/

### File upload/download
rn-fetch-blob
https://github.com/joltup/rn-fetch-blob

### File picker
react-native-document-picker
https://github.com/Elyx0/react-native-document-picker

### File system
react-native-fs
https://github.com/itinance/react-native-fs

### Sound player
react-native-sound
https://github.com/zmxv/react-native-sound
react-native-sound-player
https://github.com/johnsonsu/react-native-sound-player

### Icon
react-native-vector-icon
https://github.com/oblador/react-native-vector-icons

### Sortable view
react-native-sortable-list
https://github.com/gitim/react-native-sortable-list
react-native-draggable-flatlist
https://www.npmjs.com/package/react-native-draggable-flatlist
Leetcode marathon and day 1 
Tags: python, beginners
Published: 2020-04-03 20:11:13

I was never a big fan of classical interview-tasks. Like, find the minimal size sub-array multiplied elements of which give a number sum of digits of which is a palindrome. 
But these tasks for better or for worse are part of interviewing culture. And if I ever want to work in a big company (and currently not only big companies are using "smart" problems for an interview process) I probably will need to learn how to solve them. Or at least don't freak out I see them. 
So I decided to participate in the Leetcode marathon. The marathon started on the 1st of April with compatibly easy tasks and during the month they suppose to be more complicated. 

I'm a Python developer so all the tasks I'm going to implement in Python. 

The first task was to find the first day was the following: 

Given a non-empty array of integers, every element appears twice except for one. Find that single one.

Note:

Your algorithm should have a linear runtime complexity. Could you implement it without using extra memory?

A straightforward solution would be to go through the list and create a second structure one where we'll have numbers from the list and number of their appearances. With Python dictionary might be a good structure for it because we can search quite fast. 

But authors of the problem definitely wanted something else. I was thinking about some mathematical expression, to multiply every number on something and take a sum or something. But I didn't come up with a nice mathematical formula, but I remembered about the [XOR](https://en.wikipedia.org/wiki/Exclusive_or) function. This binary function is only 1 when values are different. For integers comparison representations of values bit by bit. It means that for equal numbers we will have always 0 as a result. 
It means that full function will look like:

```
class Solution(object):
    def singleNumber(self, nums):
        res = nums.pop(0)
        for i in nums:
            res = res ^ i
        return res
```
Build small-sized apps using ProGuard
Published: 2020-04-04 19:39:52

It's important to enable proguard in our project, so if a question arises in the form "should all android apps enable proguard?" I will say yes.
Because you will build a small-sized app, unused code removed and all identifiers changed to protect from decompiling apk.

###What is ProGuard
ProGuard is a tool that shrinks, optimizes and obfuscates code, it is readily available as part of the Android Gradle build process and ships with the SDK.

###Why Proguard

1: it gets rid of unused code
2: it renames identifiers to make the code smaller,
3: it performs the whole program optimizations.

###Note: 
However, when you create a new project using Android Studio, shrinking, obfuscation, and code optimization is not enabled by default. That’s because these compile-time optimizations increase the build time of your project and might introduce bugs if you do not sufficiently
So, it’s best to enable these compile-time tasks when building the final version of your app that you test prior to publishing. To enable shrinking, obfuscation, and optimization, you will include the following in your project-level build.gradle file.

How to Setup Proguard

```

android {
    buildTypes {
        release {
            // Enables code shrinking, obfuscation, and optimization for only
            // your project's release build type.
            minifyEnabled true

            // Enables resource shrinking, which is performed by the
            // Android Gradle plugin.
            shrinkResources true

            // Includes the default ProGuard rules files that are packaged with
            // the Android Gradle plugin. To learn more, go to the section about
            // R8 configuration files.
            proguardFiles getDefaultProguardFile(
                    'proguard-android-optimize.txt'),
                    'proguard-rules.pro'
        }
    }
    ...
}


```

Conclusion: 
When you use ProGuard you should always QA your release builds thoroughly, either by having end-to-end tests or manually going through all screens in your app to see if anything is missing or crashing.
also, some Libraries include Proguard/R8 guide to help protect some of the classes created to avoid missing classes example Retrofit
Daily Developer Jokes - Saturday, Apr 4, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-04 12:00:09

---
title: "Daily Developer Jokes - Saturday, Apr 4, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Apr%204%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b2d77d4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What's the second movie about a database engineer called?

___A:___ The SQL.
 -->
What are YOU gonna do?
Tags: positive, thinking, planning, action
Published: 2020-04-04 14:53:55

---
title: What are YOU gonna do?
published: true
description: When people are whining and complaining about how tough life is, I ask myself, 'what are YOU gonna do about it?'
tags: positive, thinking, planning, action
---

When people are whining and complaining about how tough life is, I ask myself, 'what are YOU gonna do about it?'
Twiliohackathon Project - Pay for twilio services with cryptocurrency
Tags: twiliohackathon, node, vue, python
Published: 2020-04-04 18:04:37

**Edit: unfortunately I didn't organize my time to do it properly(study, exams), but when I get more free time I will finish it anyway, as this would be a great example of using twilio and my API I think, sorry for not finishing it in time. I will update this post anyway.**
## What I want to build

I want to create an application which will allow using twilio APIs by paying for usage with cryptocurrency. Currently due to COVID-19, sometimes it's not that easy to manage paper money or fiat money. I think in that situation internet money(cryptocurrencies) help a lot. 
There will be a graphical interface to select twilio service(I will start from SMS), where user will be prompted to pay for usage in cryptocurrency first, and then they will be able to use the API endpoint. Probably if all goes right I will also write a small API wrapper for any twilio endpoint, not sure yet.
How will the price be calculated? Using twilio pricing API I am going to take the price USD value, and use that for invoice creation, the payment work is handled by my API(so it is also an example integration with other APIs).


## Demo Link
 https://twilio-crypto-payments.now.sh/
I started from setting up production deployment for being able to share the progress

## Link to Code
{% github https://github.com/MrNaif2018/twilio-crypto-payments %}

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I am using Vue.js with it's Nuxt.js framework(for PWA and other nice things), as UI framework I am going to use Vuetify.js, and as backend server I am going to use integrated Nuxt.js server.
The [payment API](https://github.com/MrNaif2018/bitcart) is in Python, but the purpose of this application is integrate twilio API with the payment API.
I am going to use Twilio Pricing API, Programmable SMS, Programmable Video etc. Not sure yet, ideally it would be a wrapper around all twilio APIs.

## Screenshots

### Day 1
![](https://github.com/MrNaif2018/twilio-crypto-payments/raw/master/screenshots/day1.png)


## Additional Resources/Info
I will be posting progress reports there

#### Day 1
I started with create-nuxt-app with vuetify.js template
Then I decided to setup deployment first, to see the progress live.
I have found out that there is a hosting for SSR apps - now.sh, using `nuxtjs/now-builder` and after some issues(`process.env.npm_*` not accesible), I have set it up.
Then I've cleared up layouts, and added my favourite day/night mode switch and automatic switching to night mode between 8 pm and 6 am (:
Then I have added first input fields, and telephone input.
Not sure yet which twilio phone number to use, maybe will make a select of available numbers.
From investigating a little bit I think that I will use nuxt [serverMiddleware](https://nuxtjs.org/api/configuration-servermiddleware/) for handling http POST IPN requests from payment API, and for fetching data from trello(so not exposing secrets to client).


More progress coming soon.
Any early feedback welcome!
Preventing Machine Downtime by Predicting it Beforehand
Published: 2020-04-05 01:33:37

Link: https://blog.joshsoftware.com/2018/04/27/predicting-manufacturing-downtime-to-ensure-business-success/

For the past few months, I have been observing the growth of the manufacturing sector in India, and how the contribution of the manufacturing sector to the India’s gross domestic product (GDP) will increase from the current levels of ~16% to 25% by 2022.
Relative Path to Virtual Env with VS Code
Tags: vscode, python, virtualenv
Published: 2020-04-05 20:17:03

---
title: Relative Path to Virtual Env with VS Code
published: true
description: Setting a python interpreter for a virtual environment that didn't exist off the project root was hard to figure out.  Hopefully this article makes it easier.
tags: vscode,python,virtualenv
---
Given there is nothing to do outside the house these days, I thought I would fill some time this weekend and hack on some python code.  The code I wanted to work on was a small side project located in a directory that was not the project root.  Visual Studio Code calls this the ${workspaceDir}.

The utility I wrote had a small set of dependencies and I organized them into a virtual environment.  A virtual environment in the directory of the code I wrote; so again it's off the top level project directory.  The problem I ran into was that Code didn't recognize this virtual environment since (I believe) it is not directly in the workspace directory.  ![alt text](https://github.com/hulquest/my-stuff/blob/master/img/vs-code-relative-pythonpath-default.png?raw=true "Code doesn't find my python virtualenv")

This isn't an insurmountable problem for sure but finding the answer proved to be more difficult than I thought.  So I am writing an article to unify the information I found in separate corners of the internet.

The image above is produced when you search for the "Python Interpreter" command.  To add the virtualenv in a subdirectory, I had to edit the workspace settings.  You can do this by typing F1 followed by "workspace setting".  This will open properties dialog. ![alt-text](https://github.com/hulquest/my-stuff/blob/master/img/vs-code-pythonpath-selection.png?raw=true "How to edit Workspace properties in Code")

There are many properties to chose from and this is where I ran into trouble.  Exactly which setting will allow me to configure a relative python virtualenv?  Searching for _python.pythonPath_ is the silver bullet in this case.  Once found, you can enter the full or relative path to your python virtual environment. ![alt-text](https://github.com/hulquest/my-stuff/blob/master/img/vs-code-relative-python-path.png?raw=true "Setting a python virtualenv not at the top level of the project.")  You'll notice I annotated the picture with red and green arrows.  The red arrow indicates the top level project directory while the green is the subdirectory that contains the python virtualenv directory called _venv_.
Why Redis is Single-Threaded
Tags: misc, redis
Published: 2020-04-09 16:23:36

---
title: Why Redis is Single-Threaded
published: true
date: 2020-04-06 14:06:00 UTC
tags: Misc,misc,Redis
canonical_url: https://coderscat.com/why-redis-is-single-threaded
---

Redis is designed to run in a single thread, but the performance is excellent, why?

## 4 reasons for Redis is single-threaded

1. **CPU is not bottleneck** : All operations of Redis are memory-based, and CPU is not the bottleneck of Redis. In most cases, the bottleneck of Redis is most likely the size of machine memory or network bandwidth. If we want higher performance, with single-threaded Redis, we could use a cluster(multiple processes) solution.
2. **Concurrency** : Parallelism is not the only strategy to support multiple clients. Redis uses `epoll` and event-loop to implement a concurrency strategy and save much time without context switching.

1. **Easy to implement** : Writing a multi-threaded program can be harder. We need to add locks and sync mechanism for threads.

1. **Easy to deploy** : Single-threaded application could be deployed on any machine having at least a single CPU core.

## Concurrency vs. Parallelism

As for the difference between **concurrency** and **parallelism** , please refer to [this presentation](https://talks.golang.org/2012/waza.slide#1) from Rob Pike:

> Concurrency vs. Parallelism
> 
> Concurrency is about dealing with lots of things at once. Parallelism is about doing lots of things at once.
> 
> Not the same, but related.
> 
> Concurrency is about structure; parallelism is about execution.
> 
> Concurrency provides a way to structure a solution to solve a problem that may (but not necessarily) be parallelizable.

We can use an analogy of the restaurant waiter:

#### What is concurrency

A waiter can provide service to several customers while he can only prepare dishes to only one customer at a time.

Because there will be some intervals between the dishes provided by the kitchen, one waiter could usually handle when the number of customers is less than 5.

#### What is parallelism

Suppose the kitchen could provide dishes for 20 customers at a time. If the number of customers is too large for one waiter, we need more waiters. In this scenario, multiple waiters are working at the same time; we call it **parallelism**.

The post [Why Redis is Single Threaded](https://coderscat.com/why-redis-is-single-threaded) appeared first on [Coder's Cat](https://coderscat.com).
Time limit excedeed error for large values
Published: 2020-04-06 07:20:42

I have been given x and k, where x is the number of factors of a number A, and k is the number of prime factors of A. Given x and k, I have to find out whether such an A exists.
For example 
```
INPUT : 4 2 
OUTPUT : 1
```
Since 6 is a number that has 4 factors 1, 2, 3, 6 out of which 2 are prime(2, 3).
Also it is given that x and k can have any values between 1 and 10^9.
Here is my code for the same : 
```
long long int x, k;
scanf("%lld%lld", &x, &k);
         
int ans = 0;
                
bool stop = false;
    
for(long long int numbers=1; numbers<pow(10, 9) && !stop; numbers++)
{
    long long int noOfFactors = 0, noOfPrimes = 0;
    for(long long int a=1; a<=numbers && !stop; a++)
    {
        if(numbers%a == 0)
        {
            noOfFactors += 1;
            if((isprime(a)) == 1)
            {
                noOfPrimes += 1;
            }
         }
     }
     if(noOfFactors == x && noOfPrimes == k )
     {
         ans = 1;
         stop = true;
     }
     else ans = 0;
}   
printf("%d\n", ans);
     
```
Where isprime(x) returns 1 if x is prime else 0. 

But while running the program, it shows TLE error.
Can anyone help me out in optimising this algorithm, or if any other method exists, can you just explain it to me ?
Any help in optimising this algorithm or using another method would be kindly appreciated.
9 ways to level up your browser devtool skills
Tags: webdev, css, javascript, browsers
Published: 2020-04-09 23:56:49

This is a list of amazing things that browsers can help you with while developing web applications.

# 1. Colors

Wondering 🤔, What is the `hex` code for that `rgb` value? Chrome provides an easy way to get it. Open `DevTools` and `shift + click` on the color(swatch) to see their corresponding `hex | rgb | hsl` value. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1m465xm6bqfgc1w0keya.gif)

---

# 2. Animation

Wondering how to tweak the animation? Use the animation editor in the devtools. 

> You can choose animation timing from a set of pre-defined functions. 

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

You can slow down the animation and play with it to understand/debug how it works.

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

---

# 3. Shadow Editor

Shadows are tricky. Master box/text-shadow using the inline editor. 

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

---

# 4. Command tool 

Chrome provides `Command tool` to access files / actions. Use `Cmd` + `Shift` + `P` inside the `Dev tools` to open the `Command tool`.

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

---

# 5. Coverage

Check your CSS coverage. 

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

> Open Command tool and search for `coverage`.

---

# 6. Rendering

Wondering about the FPS, Layout / Paint in the page.

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

> Open Command tool and search for `rendering`.

---

# 7. Emulate dark mode

Use the emulator to switch between dark and light mode.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3h3cmoqlsbzi1vtiiscl.gif)

---

# 8. Sensors

If you are creating an application that requires location based user experience, then you can use the sensors to change the location. 

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

> To open sensors, press `cmd` + `shift` + `p` and then type sensors to open the `show sensors`.

---

# 9. Short cut keys :) 

Go straight to Address/Search bar using `cmd` + `L`. 

Navigate through the tabs using `ctrl` + `tab`

Navigate tabs with the tab numbers `ctrl` + `num-key`.  
Go to the last tab using `ctrl` + `1`.
Go to the last tab using `ctrl` + `9`.

---

Discussions [🐦 Twitter](https://twitter.com/sendilkumarn) // [💻 GitHub](https://github.com/sendilkumarn) // [✍️ Blog](https://sendilkumarn.com/blog)

If you like this article, please leave a like or a comment. ❤️

---
Typescript Learnings 001: Object Destructuring
Tags: typescript, webdev
Published: 2020-04-07 11:37:22

---
title: Typescript Learnings 001: Object Destructuring
published: true
description: Learning Typescript with TK
tags: typescript, webdev
canonical_url: https://leandrotk.github.io/tk/2020/04/typescript-learnings/001-object-destructuring.html
series: Typescript Series
---

This is part of my series on [Typescript Learnings](https://leandrotk.github.io/tk/2020/04/typescript-learnings/001-object-destructuring.html), where I share micro posts about everything I'm learning related to Typescript.

And it was first published at [TK's blog](https://leandrotk.github.io/tk/2020/04/typescript-learnings/001-object-destructuring.html).

It's a common feature to destructure objects in JavaScript. For example, imagine we have a `Person` object. It looks like:

```javascript
const person = {
  firstName: 'TK',
  age: 24,
  email: 'tk@mail.com',
  isLearning: true
};
```

And when we use it, sometimes we want to destructure the object to get the attributes.

```javascript
const { firstName, age, email, isLearning } = person;
```

In Typescript, it works the same way. But with types. So let's type the attributes. At first I thought I could add the type after each attribute. Something like:

```typescript
const { firstName: string, age: number, email: string, isLearning: boolean } = person;
```

But it actually doesn't compile that way. We don't specify a type for each attribute, we specify the object type. We could add this way:

```typescript
const {
  firstName,
  age,
  email,
  isLearning
}: {
  firstName: string,
  age: number,
  email: string,
  isLearning: boolean
} = person;
```

Or we could have a `Person` type (or interface) to handle these types.

```typescript
type Person = {
  firstName: string,
  age: number,
  email: string,
  isLearning: boolean
};
```

And use it in the object destructuring:

```typescript
const { firstName, age, email, isLearning }: Person = person;
```

Implementing a `type` is cool because we could also use it in the `person` definition:

```typescript
const person: Person = {
  firstName: 'TK',
  age: 24,
  email: 'tk@mail.com',
  isLearning: true
};
```

### Resources

- [Beginner JavaScript Course](https://BeginnerJavaScript.com/friend/LEANDRO)
- [ES6 Course](https://ES6.io/friend/LEANDRO)
- [StackOverflow: Types in object destructuring](https://stackoverflow.com/a/39672914/3159162)
- [JavaScript Course by OneMonth](https://mbsy.co/lFtbC)
FormData issue in Angualar 6 and codeignter
Published: 2020-04-06 15:57:11

Hi guys I am MEAN Stack developer and I am just got stuck on formData things I always getting empty oject at server end. I don't know what the issue, I have written my backend in Codeigniter

const formData=new FormData()
formData.append("file",this.getFile)
formData.append("email",this.email)

this.http(url,formData).subscrible(res=>{console.log(res)},err=>{console.log(err)})


I am getting on server like this 

print_r($_POST); print_r($_FILES); but its giving empty array