teleren/devto huggingface dataset:
HOW TO BLUR A BACKGROUND IMAGE IN REACT-NATIVE
Tags: reactnative
Published: 2020-01-09 11:48:04

 This is quite different from my react article because even though both are Facebook technologies and bear the name react, they are not really alike. So lets go ahead and write some magics now, hope your fingertips are ready for some abracadabra.

So lets have some Views and Text but before doing that, we will first import our ImageBackground or Image from react-native like below

<prev>
```javascript
   import {ImageBackground, View, Text} from 'react-native';
```
</prev>

Then lets go ahead and write the following tags and elements

<prev>
```javascript
   <ImageBackground source={require('your picture')}>
      <View>
	 <Text> CSS Tricks </Text>

	 <Text>You can style your Text and View as you deem fit</Text>
      </View>
   </ImageBackground>

```
</prev>

Now, lets import StyleSheet and write the CSS below.

<prev>
```javascript
   import {ImageBackground, View, Text, StyleSheet} from 'react-native';

   const styles = StyleSheet.create({
	ImageBackground: {
		flex: 1,
		width: null,
		height: null
	},
        container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba( 0, 0, 0, 0.6 )'
	},
   }
```
</prev>

You set the backgroundColor of your View using alpha style.That's the trick, if you use opacity on the container, both the texts will be affected.Look at the full code below

<prev>
```javascript
import React, { Component } from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';

class Trick extends Component {
	render() {
		return (
			<ImageBackground source={require('your picture')} style={styles.ImageBackground}>
				<View style={styles.container}>
					<Text style={styles.text}> CSS Tricks </Text>

					<Text style={styles.text}>You can style your Text and View as you deem fit</Text>
				</View>
			</ImageBackground>
		);
	}
}

export default Trick;

const styles = StyleSheet.create({
	ImageBackground: {
		flex: 1,
		width: null,
		height: null,
	},
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
	},
	text: {
		color: 'white',
		fontSize: 24
	}
});
```
</prev>

Different from React right?, hope it solves your problem. Thanks
Assign CA Cert to Android's /system directory for HTTPs decryption
Tags: softwaredevelopment, testing, tools, android
Published: 2020-01-09 12:36:44

---
title: Assign CA Cert to Android's /system directory for HTTPs decryption
published: true
date: 2020-01-09 11:47:36 UTC
tags: software development,testing,Tools,android
canonical_url: https://esabook.wordpress.com/2020/01/09/assign-ca-cert-to-androids-system-directory-for-https-decryption/
---

Based on my device lab where tested on Android Virtual Device API v16 – v29, use GAPPs or not.  
The main goal is to quickly give a affirmative detail to BE team, when any error occurred.  
Fast way for bug spot inspections at production app. Occurred at BE side?, network call, FE logic, or else.

{% gist https://gist.github.com/esabook/1b5e8ae79f07fe4713042dd698c38ea2 %}
<figcaption><a href="https://gist.github.com/esabook/1b5e8ae79f07fe4713042dd698c38ea2" rel="nofollow">https://gist.github.com/esabook/1b5e8ae79f07fe4713042dd698c38ea2</a></figcaption>

![](https://esabook.files.wordpress.com/2020/01/screenshot_1578566733.png?w=150)<figcaption>Device Android version 9</figcaption>

![](https://esabook.files.wordpress.com/2020/01/download_app.gif?w=1024)<figcaption>Download app from Google Play</figcaption>

![](https://esabook.files.wordpress.com/2020/01/annotation-2020-01-09-172238.png?w=1024)<figcaption>Test Cert with proxy: connect</figcaption>

![](https://esabook.files.wordpress.com/2020/01/action.gif?w=1024)<figcaption> <em>Test Cert with proxy: decrypt</em></figcaption>
[TypeScript] Implement valueOf method in Enums
Tags: typescript, enum
Published: 2020-01-09 11:43:30

Enums in Typescript don't have valueOf method, which returns an enum element from its string representation. This article explains how we can add valueOf method to Enums. Note that the implementation suggested in this article uses namespace as we cannot add arbitrary methods to Enums.

##### Numeric Enum

Numeric Enums, which assign incremental numbers to their elements, support reverse mapping . Therefore valueOf method can be implemented with `Enum[string]`.

However we need to use one of the following expressions as  `Enum[string]` produces a type error which says "Element implicitly has an 'any' type...".

* `Enum[string as keyof typeof Enum]`
* `(<any>Enum)[string]`

###### Implementation Example

```typescript
/* Numeric Enum */
enum Color { Red, Green };

// toString()
Color.Green.toString(); // => '1'
Color[Color.Green]; // => 'Green'

// valueOf()
namespace Color {
  export function valueOf(str: string) {
    return Color[str as keyof typeof Color];
  }
}
const str = 'Green';
Color.valueOf(str); // => NumericEnum.Green
```

##### String Enum

String Enums, to which we can assign arbitrary string representations to their elements, don't support reverse mapping (*). Therefore we need to prepare a map object for reverse mapping by ourselves.

###### Implementation Example

```typescript
/* String Enum */
enum Color { Red = 'red', Green = 'green' };

// toString()
Color.Green.toString(); // => 'green'

// valueOf()
namespace Color {
  const reverseMap = new Map<string, Color>();
  Object.keys(Color).forEach((s: string) => {
    const e = (<any>Color)[s];
    reverseMap.set(e.toString(), e);
  });
  export function valueOf(str: string) {
    return reverseMap.get(str);
  }
}
const str = 'green';
Color.valueOf(str); // => StringEnum.Green
```

\* Enum elements can be retrieved by their key names just like numeric enums, but not by strings that are assigned to enum elements.

```typescript
let str = 'Green'
Color[str as keyof typeof Color]; // => Color.Green
str = 'green'
Color[str as keyof typeof Color]; // => undefined
```

##### Reference

* [Enums - TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/enums.html)
* [Enum with static functions - TypeScript Deep Dive](https://typescript-jp.gitbook.io/deep-dive/type-system/enums#wotsuenum-with-static-functions)
* [How do I convert a string to enum in TypeScript? - Stack Overflow](https://stackoverflow.com/questions/17380845/how-do-i-convert-a-string-to-enum-in-typescript)
* [Reverse-Mapping for String Enums - Stack Overflow](https://stackoverflow.com/questions/44883072/reverse-mapping-for-string-enums)
* [#20813 Iterating on a string enum - GitHub](https://github.com/Microsoft/TypeScript/issues/20813)
Are Connected Cars a requirement or an unwanted luxury?
Tags: security, gps
Published: 2020-01-09 11:13:42



After food, shelter, and clothing, the basic need of the 21st century is the internet. Nowadays, we use smartphones, smartwatches, smart speakers and more, the internet has become the part of devices of our daily life. In the future, internet access will also be measured like fuel efficiency and engine power.

IoT (Internet Of Things) is the fastest growing technology which integrates the internet to the device or equipment to make life easier.
For example, If your AC at home is connected to the internet, you can operate it from anywhere with your smartphone instead of remote control.
This was just a glance at how the internet is important to us. Here, we will discuss one of the emerging technology connected to the internet which is Connected Cars.

Understand Connected Cars
A device in an automobile which connects to different devices with each other in the vehicle or other devices, networks or services in other cars, home or offices is known as connected cars.

As per experts, these cars are an emerging idea in IoT which means it has an internet connection and is mostly equipped with wireless LAN. It can process its performance and service along with ensuring passenger’s comfort using sensors and the internet.

These cars track fleet mileage and fuel usage along with other important data. It provides the driver with shorter routes and details regarding driving behaviour.

Back to History
The idea for the Connected Car was brought in the market by General Motors in 1996 with OnStar. The system was designed for getting emergency help during accidents. A call was delivered to call center for the driver’s help.

It was first worked with voice then it added a cellular system to share GPS positioning for help. After OnStar’s success, other automakers came up with similar safety features available in the paid version after the free trial.

Then in 2001, remote diagnostics was introduced in the car. In 2003, the introduction of vehicle reports, route navigation, and network access device was considered to be a great change. Then in 2007, Continental introduced data-only telematics which used to collect data from the car for the user. Afterwards, in 2014, Audi A3 offered 4G LTE WIFI Hotspot access and became the first to do so. Then General Motors became the first mass deployment of 4G LTE.

In the UK, ‘The AA’ was the first to introduce breakdown detection in connected cars. This car was known as Car Genie which would not only generate alerts on car health issues but also directly phone calls for customer help to prevent breakdown.

A European start-up “Stratio Automotive” in 2017 provided predictive intelligence in 10,000 vehicles to enable fleet operators for better managing and maintenance of their fleet.

Segments of Connected Cars
We can further categorize Connected Cars into 8 segments, which are;
Read Further at: https://medium.com/@sophieroy602/are-connected-cars-a-requirement-or-an-unwanted-luxury-be8df5de742b
New webinar - Building Tetris in Elixir 
Tags: webapps, webinar, elixir
Published: 2020-01-09 11:11:45

---
title: New webinar - Building Tetris in Elixir 
published: true
description:Learn how to build Tetris purely with Elixir and LiveView, no JavaScript required. 
tags: webapps,webinar,elixir
---

Last year, Sandesh Soni developed a fully playable version of Tetris in Elixir using Phoenix LiveView and OTP. It's a great example of what can be done in Phoenix LiveView without any JavaScript, the game looks slick and captures the charm of the original. In this live coding demonstration, Sandesh will build a new and improved version of the game as you follow along. You'll learn some great tips and tricks for Phoenix LiveView and OTP, as well as learning how to build the game in real time.

Register at https://www2.erlang-solutions.com/tetris4 and even if you can't make the live webinar, you'll be sent a recording at a later date.
📚 Reading Snippets [28 => Git]
Tags: beginners, git
Published: 2020-01-09 10:47:30

A commit is a wrapper for a specific set of changes. The author of a commit comments what they did in a short commit message. 

Before you <i>commit</i> you will want to get an overview of the changes you have made so far. In Git, <i>"status"</i> command is used to list the changes performed since the last commit. 

<kbd>Source:<a href="https://www.git-tower.com/learn/git/ebook/en/command-line/basics/basic-workflow#start">Git</a></kbd>
Common Issues in Migrating from Jest and Enzyme 2.x to 3.x and How to Fix Them
Tags: javascript, react, testing, tutorial
Published: 2020-01-09 10:30:38

Last year I had a task to migrate our React application from 15.4 to 16.9 (yes, it's about time) and unit tests broke along with a few other outdated packages.

Here are two of the issues I most frequently encountered and solutions on how to fix them (all credit goes to the fine people of the Internet):

**1. Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.**

If you are too lazy to read the [migration guide](https://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html) written by the folks over at Enzyme, essentially the library now runs in an ["Adapter system"](https://stackoverflow.com/a/55345750). You just have to install the adapter for your version of React.

Since our app now runs on React 16.x, I needed to install the `enzyme-adapter-react-16` adapter:
```
npm install enzyme-adapter-react-16
```

and then configured it to my test:
```javascript
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

/*
* unit test code goes here
*/
```

**2. Cannot find module 'react/lib/ReactTestUtils'**
This library is very old, it was deprecated 5 years ago. To fix this, I used the  `react-test-renderer/shallow` renderer in place of `ReactTestUtils` to shallow render a component.

Install the package:

```
npm install react-test-renderer
```

Then, I replaced the renderer with the utility functions from the new library.

**OLD CODE**
```javascript
describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = TestUtils.createRenderer() // from this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})
```

**NEW CODE**
```javascript
describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = new ShallowRenderer() //to this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})
```

Happy coding!
Devise gem force confirmation on email change and remove old email
Tags: uncategorized
Published: 2020-01-09 10:32:02

---
title: Devise gem force confirmation on email change and remove old email
published: true
date: 2020-01-09 10:26:18 UTC
tags: Uncategorized
canonical_url: https://ziatechblog.wordpress.com/2020/01/09/devise-gem-force-confirmation-on-email-change-and-remove-old-email/
---

Default behavior of devise when `confirmable` in model and `reconfirmable` in `devise.rb` are enabled is that **it does send a reconfirmation email email if email is changed, but it does not remove/replace previous email and does allow users to still login through old email while new email’s confirmation is pending.**

_I am on rails 6.0.2, Devise 4.7.1 for the record._

### Problem?

This is a bit odd behavior for some scenarios, like when users are being controlled by admins(lets say in tenants), **sometimes we want to enforce email change and reconfirmation when admin changes the email** of any user. I could not find any official solution for this issue, and i had to go with monkey patching.

### Solution:

For this, i had to overwrite a method in my user model:

```
  # overwirte from /devise/models/confirmable.rb to force email re-confirmation for email changes
  def postpone_email_change_until_confirmation_and_regenerate_confirmation_token
    @reconfirmation_required = true
    self.unconfirmed_email = email
    # self.email = self.email_was
    self.confirmed_at = nil
    self.confirmation_token = nil
    generate_confirmation_token
  end
```

And voila, this replaces old email completely and forces a confirmation of that new email before users can continue using the system.

_It took me a couple of hours to come to this solution after finding no official solution for this seemingly simple usecase, so logging for my record as well as for community. Happy coding!_
How Blockchain wallet works?
Tags: blockchain, webdev, python, php
Published: 2020-01-09 10:23:41

What is block chain wallet?
Block chain wallet is a program that allows monitoring and conducting crypto currency between two wallet addresses which can be accessed using private and public key. Both key will be in Hash format. A hash is a string of numbers and letters, produced by hash functions.

Transactions are being recorded on the block chain in crypto wallets. If someone wants to send you crypto currency, it means they are assigning blocks to your block chain wallet.

How blockchain wallets work?

Blockchain is an digital database which keeps an unchangeable record of data operations. Group of these operations called “blocks”. Here is general flow of how it works:

If someone want to send money using crypto wallet. Transaction is represented as block.

The Blocks which is broadcast to every party in network.
Those in the network approves the transaction is valid or not.
If block is valid, it will be assigned to receiving crypto wallet
Received block is permanent and unalterable.
Commit the transaction

Type of Wallet

Here is overview of different type of crypto currency wallets:

Mobile wallet – A wallet which run from the smartphone application.
Web based wallet – A Web based wallet is hosted on any VPS or real device. Sometime it is called as hot wallet or web wallet.
Desktop wallet – A wallet which run from the desktop devices. Safer compared to mobile and web wallet.

Hardware wallet – Required dedicated hardware to hold crypto currency. USD sticks can be used for this wallet. This kind of wallet require internet to perform transaction and it will be offline after transaction commit successful.
Coin wallet – Wallet which only work for specific coin.

Top 10 Crypto Currency

1. BitCoin
2. BitCoin Cash
3. LiteCoin
4. Dogecoin
5. Ethereum
6. BAT
7. NEO
8.Ripple XRP
9. Steller (XLM)
10. Cardano (ADN)

Top 5 Crypto wallet name

1. Uphold – Mobile & Web based wallet
2. Atomic Wallet – Desktop Client wallet
3. Ledger Nano S Wallet – Hardware based wallet
4. Ledger Nano X Wallet – Hardware based wallet
5. Trezor One Wallet – Hardware based wallet

VIBIDSOFT offering crypto currency wallet development services. Contact Us at inquiry@vibidsoft.com for more information.
HOW TO BLUR A BACKGROUND IMAGE IN REACT
Tags: react, css
Published: 2020-01-09 10:20:10

The first time I tried this, I used opacity on the image but it didn’t work like I wanted, the styling made even the overlay texts to be opaque by taking the same opacity styling with the image. And so I went into finding a solution for this and after long trials, searches, Stack Overflows, I finally stumbled unto the answer and yeah it’s kind of a trick, CSS tricks actually.

Lets create a js file and inside it have two divs, and some heading tags like below

<prev>
```
  <div className="container">

      <div>
        <h1> CSS Tricks </h1>
        <h5>
          You can now style the second div and 
          heading tags as you see fit
        </h5>
      </div>

  </div>
```
</prev>

That would be enough for now, then we head over and create a css file and start writing the magic

<prev>
```css
  .container {
	position: relative;
	color: white;
    /*Note, you can change the color to your choice depending on your 
    image and what color blends with it*/
}

.container::after {
    content: "";
	opacity: 0.8;
	background: rgb(26, 31, 41) url("your picture") no-repeat fixed top;
	background-blend-mode: luminosity;
    /* also change the blend mode to what suits you, from darken, to other 
    many options as you deem fit*/
	background-size: cover;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: -1;
    height: 500px;
}

```
</prev>

This is it. The little css that will suite your web image displays...Below is the full code image

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ubbyu3ijbh167vg37d1l.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ht9buq07nzfs8tozc7jo.png)

Hope this article meets you well and be a solution, Thanks.
JS warmup exercises... one-liner edition
Tags: javascript, exercises
Published: 2020-01-09 10:04:43

There was a post I saw recently that promised a few minutes worth of entertainment... solving 30 javascript interview warmup exercises!

The thing is, after hundreds of lines of code the author only managed to get through the first 10 exercises. As someone who interviews devs and reviews other people's code on a regular basis, it triggered me to solve the exercises but using only one-liners... what can I say, I believe coding exercises should be fun!

```js
//1. write a function that reverses a string
const strReverser = str => [...str].reverse().join('');
 
//2. Write a function that filters out numbers from a list
const filterNums = arr => arr.map(Number).filter(e => !isNaN(e));

//3. Write a function that finds an element inside an unsorted list
const findElement = (arr, x) => arr.indexOf(x);

//4. Write a function that showcases the usage of closures
const closureMultiplier = a => b => a * b;
 
//5. What is a Promise? Write a function that returns a Promise
const promiser = f => new Promise(function(resolve, reject) { resolve(f); });

//6. Write a function that flattens a list of items
const flattener = arr => arr.flat(Infinity);

//7. Write a function that finds an element inside a sorted list
//same as 3

//8. Write a function that accepts two numbers a and b and returns both the division of a and b and their modulo of a and b
const divMod = (a, b) => [a / b, a % b];

//9. Write a function that computes the fibonacci number of N
const fibonacci = n => n <= 2 ? n : fibonacci(n-1) + fibonacci(n-2);

//10. Write a function that accepts a string and returns a map with the strings character frequency
const freqMap = arr => arr.reduce( (acc, val) => { acc.set(val, acc.get(val)+1||1); return acc }, new Map());
```
React Calculator, powered by Concent!!
Tags: react, concent
Published: 2020-01-09 10:01:47

I see this bro's post.
https://dev.to/vinodchauhan7/react-calculator-18l5

And try a beautiful way to rewrite it, completely separate UI and logic!
https://codesandbox.io/s/react-calculator-8hvqw

{% codesandbox react-calculator-8hvqw %}

Welcome to know more about [Concent](https://github.com/concentjs/concent),
a predictable、zero-cost-use、progressive、high performance's enhanced staate management solution, born for build large and high performance react app。


By the way: attention the `ICtx` I marked in code, with jsdoc type annotation, you can click and see any details you want, of course, you can easily change it to ts code.
Blockchain PoC Development
Tags: blockchain, poc
Published: 2020-01-09 09:52:43

<a href=https://www.somish.com/blockchain/proof-of-concept-development> Blockchain PoC Development</a>

Blockchain proof of concept is a straw-man design for gauging the applicability of blockchain technology on an idea. Before investing in a PoC, try and seek answers to the following questions.

1. Are you sure about the technical & economic feasibility of your decentralization idea?
2. Do you have clarity on choosing a public blockchain v/s a permission blockchain with enough research?
3. Have you thought about node orchestration?
4. Does your idea involve multiple non-trusted parties?
5. How many transactions per second do you envision for your project?

Just some questions that should be answered prior to PoC development.
An app I built now has 10,000 acquisitions!!
Tags: career, uwp, productivity, csharp
Published: 2020-01-09 09:28:24

In 2019, I released a new app called Nightingale, the RAM-friendly REST client for developers. It uses 50MB while other REST clients use 500MB. And today, I'm pleased to share that Nightingale surpassed 10,000 unique acquisitions! 

Incredible milestone, and I'm humbled by everyone's feedback and support. Can't wait to see what milestones will be broken in 2020! 🎉

If you're a developer, check out Nightingale here: https://www.microsoft.com/en-us/p/nightingale-rest-api-client/9n2t6f9f5zdn