teleren/devto huggingface dataset:
Uploading files in react native
Tags: reactnative, react, frontend, mobile
Published: 2021-06-29 06:29:32

I've been working with react native for one year now, and I really love it.
Today was the first time I had to upload files to our back-end server.
Normally when I encounter something I don't know my first instinct is to search for it in the official documentations unfortunately I couldn't find anything helpful.

## Without using third party library: 

#### Prepare file as form data:

If you picked a file using document picker,image picker or camera and you pass it down as file object.

```
const data = new FormData();
  data.append('file', {
    name: file.name,
    type: file.type,
    uri: Platform.OS === 'ios' ? 
         file.uri.replace('file://', '')
         : file.uri,
  });
```
Notice that on ios you need to prefix file path with 'file://' to be able to access files.

#### Upload the file to the server as Post request with proper headers:

* _Using Axios_ :
```
await Axios.post("https://upload-service-url", data, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});
```
* _Using fetch_ :
```
await fetch("https://upload-service-url", {
  method: "post",
  body: data,
  headers: {
    "Content-Type": "multipart/form-data; ",
  },
});
```


## Using react-native-fs library:

[Library repo](https://github.com/itinance/react-native-fs)
This nice library give you access to native files system so you can manipulate files and directories.

Why to use this library if I can do it without library? 
I would say the main reason is to have the ability to show determinate progress indicator using the progress callback


```
import { uploadFiles, DocumentDirectoryPath } from "react-native-fs";

var files = [
  {
    name: "file",
    filename: "file.jpg",
    filepath: DocumentDirectoryPath + "/file.jpg",
    filetype: "image/jpeg",
  },
];

uploadFiles({
  toUrl: "https://upload-service-url",
  files: files,
  method: "POST",
  headers: {
    Accept: "application/json",
  },
  //invoked when the uploading starts.
  begin: () => {},
  // You can use this callback to show a progress indicator.
  progress: ({ totalBytesSent, totalBytesExpectedToSend }) => {},
});
```

## Important note:

If you are using react native debugger to try inspecting network requests and you get errors from back-end service.
It is because currently the debugger does'nt suppot the formData as mentioned in there documentations under 'Limitations'
[react-native-debugger](https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md)
Azure Function and .NET 5: How to get EventData for Event Hub input binding
Published: 2021-06-29 06:27:41

How binding works in .NET 5 version of Azure Function changed slightly compared to last version. In this article, I explain how you can get ``EventData`` for Event Hub input binding.

# Get Event Hub message content

This is template code and you can see the message comes in as string array.

```csharp
using System;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Extensions.Logging;

namespace eventhubbinding
{
    public static class eventhubtriggerdemo
    {
        [Function("eventhubtriggerdemo")]
        public static void Run([EventHubTrigger("samples-workitems", Connection = "")] string[] input, FunctionContext context)
        {
            var logger = context.GetLogger("eventhubtriggerdemo");
            logger.LogInformation($"First Event Hubs triggered message: {input[0]}");
        }
    }
}
```
input argument contains message from EventHub.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx6i4d135hdhw0bvg1wf.png)
 
# How about EventData?

We can get EventData from FunctionContext. I don't feel this is ideal way to obtain data, but we can get it anyway.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x2u8l2no4snlqc0lsms.png)
 
There is a GitHub issue for this as well.
https://github.com/Azure/azure-functions-dotnet-worker/issues/283

# Summary

I hope we can switch signature from string[] to EventData like we did in previous version, but this is how it works for now.
How to implement an address search with Angular and Google Maps
Tags: googlemapapi, javascript, typescript, angular
Published: 2021-10-28 17:01:29

---
title: How to implement an address search with Angular and Google Maps
published: true
date: 2021-06-29 06:20:49 UTC
tags: googlemapapi,javascript,typescript,angular
canonical_url: https://kevinkreuzer.medium.com/how-to-implement-an-address-search-with-angular-and-google-maps-32a2df09f8e9
---

[![](https://cdn-images-1.medium.com/max/1950/1*j7Ghm1gem6ZBEk9g-Zcl3A.png)](https://kevinkreuzer.medium.com/how-to-implement-an-address-search-with-angular-and-google-maps-32a2df09f8e9?source=rss-6cd4fff6b841------2)

With more than a billion monthly users, Google Maps is one of the most used/known applications. Since Angular version 9, it’s also…

[Continue reading on Medium »](https://kevinkreuzer.medium.com/how-to-implement-an-address-search-with-angular-and-google-maps-32a2df09f8e9?source=rss-6cd4fff6b841------2)
Engineering Managers, you need to fix this (fast)
Published: 2021-06-29 06:10:45

I know this is almost a cliche at this point, but I need to vent. Most coding interviews are absolutely terrible. After having attended a few last week, here are three things I complete hate about them. Engineering managers, I hope you're listening. 

1) You’re testing my memory not my engineering skills
There’s a reason why there are SO many memes about lifting code from stackoverflow, or a library from Github and it’s because engineering a solution HINGES upon being able to know exactly what problem you’re trying to solve and being able to articulate it well to a fellow engineer (or describe it on a google search). So when you make me code on a bloody google doc, and forbid me to google stuff, you’re basically testing my memory and not my engineering skills. That brings me to point 2

2) The work that most companies do is derivative
I’ve been around enough to know this. Most companies don’t really do any R&D and straight up use libraries and lines of code from places all over the internet. And that’s fine. In other words, original work is rare. Of course, that doesn’t mean that you shouldn’t look for originality in a candidate. It just means that you need to be reasonable when interviewing someone. Please be reasonable.

3) Provide the right tools for an interview 
A coding interview is a high-pressure situation that is made worse by forcing a candidate to use tools that don’t remotely resemble the IDE that an employee would use on the job. Yes, people are still making us use Google Docs to write code. Would you give a chef a microwave during his cooking interview? 

That’s where I am at the moment. Despite having enough experience and a more than reputable track record of work, I am NOT someone who can quote algorithms from memory. I will never be that person. What I feel I’m good at, however, is being able to think of a solution at a decent level of abstraction, but I’m punished for not knowing the right syntax, or remembering an algorithm to its finest details.

Something has to change.
Whatsapp Chatbot
Tags: python, nlp
Published: 2021-06-29 06:08:18

Check out a python package I published, can automate your whatsapp chat with any contact
pip install whatsappchatbot

checkout the blog and repo for full description:
Repo:[Link](https://github.com/maxsanwal/whatsappChatbot)
Medium:[Link](https://seemantsingh.medium.com/annoying-friend-develop-a-whatsapp-chatbot-7c5a98ab3ac7)
Adding Comments to Code: Python
Tags: computerscience, python
Published: 2021-06-29 05:19:46

Writing good comments in code helps other programmers understand how it works. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n63hg7o0l0ivxjiulysy.png) 

Below is an example of bad comments in code. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhrgfdk0cqazi73zuzv5.png)

The downside to so many comments is it makes your codebase very long and at times hard to read. So it's up to you to find a good balance. 

Let me know what you think in comments below.
Voice Search with JavaScript (Web Speech API)
Tags: javascript, tutorial, webdev, speechrecognition
Published: 2021-06-29 04:29:56

## Background Introduction
The technique of allowing a computer to recognize and respond to the sounds produced in human speech is known as speech recognition.

It was initially presented in 1952 at [Bell Laboratories](https://en.wikipedia.org/wiki/Bell_Labs) and could only identify numbers, not words. Speech recognition has progressed beyond only identifying numbers to understanding text, grammers, and even detecting noise a few years later.

This technology was created as a replacement for typing on a keyboard; all you have to do is speak to your computer, and your words will appear on the screen.

## Getting Started
In this video, we use the Web Speech API in order to build a Voice Search feature. In the first few minutes, we create an HTML Google Search Form and we then proceed to exploring the Web Speech API and using JavaScript to implement the Voice Search feature!
Download the starter file via [github](https://github.com/learnwithchristopherglikpo/voice-search) in order to follow along with the video.


{% youtube Pu_Rl3M299k %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Day 10 of #100DaysOfCode!

Tags: codenewbie, beginners, javascript, 100daysofcode
Published: 2021-06-29 04:25:38

<h2>Today's progress</h2>
I worked on the `sort()` method from freeCodeCamp.

<h2>What I learned</h2>
The `sort()` method changes the position of elements in an array in ascending order *(A-Z)* and returns in the original array.

Here's an example using the `sort()` method on an array of names.

```javascript
let names = ["Jack", "Christian", "Robin", "Billy", "Terry", "Michael"]

names.sort();

console.log(names)
//output: ["Billy", "Christian", "Jack", "Michael", "Robin", "Terry"]
```

You'll see that the array of names is now in alphabetical order.

Simple enough, right? When it comes to strings, yes. But not numbers. Numbers are a little trickier and requires an additional function to work with.

####Working with numbers

When it comes with working with numbers. The `sort()` method does not order them properly. Here's an example.

```javascript
let numbers = [12, 1, 5, 3, 23]

numbers.sort()

console.log(numbers)
//output: [1, 12, 23, 3, 5]
``` 

Now, obviously that does not look like a sorted array of numbers. This is because `sort()` sorts elements alphabetically. 

The above example does in fact work applying that `A=1, B=2, C=3, D=4, E=5`

Applying the alphabet to the numbers. The above example would look like this and you will see that the numbers are `alphabetically` sorted. 

```javascript
//  ["AB", "A", "E", "C", "BC"]
let numbers = [12, 1, 5, 3, 23]

numbers.sort()

console.log(numbers)
// ["A", "AB", "BC", "C", "E"]
//output: [1, 12, 23, 3, 5]
```

But of course we do not want our numbers to be sorted alphabetically but rather from smallest to largest.

####Solving the issue with numbers

In order to help solve the `sort()` method issue with numbers. We need to use it with a `compare function`. Where it will compare *two* sets of elements `compareFunction(a, b)`.

Here are some following rules worth noting when working with `sort()`:

1. if `compare(a,b)` is less than zero, the `sort()` method sorts *a* to lower index than *b*. Meaning, *a* comes first.

2. if `compare(a,b)` is greater than zero, the `sort()` method sorts *b* to a lower index than *b*. So, *b* will come first.

3. if `compare(a,b)` returns zero then the `sort()` method considers both *a* and *b* to be `equal` and the position of the elements remain unchanged.


Using the same array of numbers from earlier. Let's go ahead and use the `sort()` method along with the `compareFunction(a,b)`

```javascript
let numbers = [12, 1, 5, 3, 23]

function sortNumbers(arr){
    return arr.sort(function(a, b){
        if(a > b) return 1
        if(a < b) return -1
        return 0;
    })
}

console.log(sortNumbers(numbers));
//output: [1, 3, 5, 12, 23]
```

<h2>Simply put</h2>
Using `sort()` method can be a useful tool to sort elements in an array in ascending order. However, its important to note that when using `sort()` that it orders elements alphabetically and that elements are compared as *strings*. This is where the `compare function(a,b)` comes in to properly compare elements and returning the value that meets the condition.
Lolin D32 板子的 EN 腳不是你以為的 reset 腳
Tags: d32, esp32, lolin, reset
Published: 2021-06-29 04:17:42

大部分的 ESP32 控制板上都有一個 EN 腳, 連到 ESP32 晶片上的 reset 腳, 只要將這個腳接地, 就會讓 ESP32 重置。不過要注意的是, 如果你用的是 Lolin D32, 那麼板子上的 EN 腳並不是接到 ESP32 晶片上的 reset, 而是[接到板子上 ME6211 這顆 regulator 的 CE 腳](https://www.wemos.cc/en/latest/_static/files/sch_d32_v1.0.0.pdf)：

![EN 腳](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds57ghn97ahna65zvm2d.png)

如果你看 [ME6211 的 datasheet](https://datasheet.lcsc.com/szlcsc/Nanjing-Micro-One-Elec-ME6211C33M5G-N_C82942.pdf#page=6), 會發現 CE 腳低電位時, 會關閉 regulator, 就不會供電給 ESP32 了。如果你把 Lolin D32 的 EN 當成別的板子的 EN 拿來控制 reset, 實際上不會 reset, 而是關閉給 ESP32 的電源, 造成莫名其妙的結果。Lolin D32 板子上有單獨的 reset 腳, 是真的接到 ESP32 晶片的 reset, 需要時就該使用這隻腳, 不要用錯。
Wicked PDF is incompatible with ViewComponent
Published: 2021-06-29 04:16:18

Issue https://github.com/github/view_component/issues/288
PR: https://github.com/github/view_component/pull/358

How to solve:

# config/application.rb
```
config.view_component.render_monkey_patch_enabled = false
```

# Update view
```
= render(ViewComponent.new)
```
to
```
= render_component(ViewComponent.new)
```
AWS Auto Scaling Groups
Tags: aws, devops, cloud, beginners
Published: 2021-06-29 04:14:44

Last article we studied how to load balance our servers so that we can make them more reliable but adding servers manually still make our system brittle. At any time the load on our servers may increase. So, we need to set our servers in such a way that servers are added and removed automatically. This is what auto scaling groups are used for in AWS.

## What is an Auto Scaling Group?

In the cloud you can create and get rid of serves very quickly and we don't know what kind of a load will be on our server. So, in order to ensure an optimum number of server quantity we use auto scaling groups. ASG adds EC2 instances and removes EC2 instances according to need. ASG automatically registers new EC2 instances as and when needed on the load balancer. It can also detect unhealthy instances and add new servers replacing them. This leads to cost savings and a robust system architecture. 

## How does an ASG work?

In an ASG we give a minimum capacity, a maximum capacity and a preferred capacity. Our ASG starts from a preferred quantity and add or remove servers according to need. It registers all of them under a load balancer so that we can still take the advantage of one common DNS for all our servers, plus traffic is automatically balanced across our servers.

In the next article we will see how to create a robust architecture in our EC2 instances using our load balancers and auto scaling groups.
Making Telegram Bots using Python(Pyrogram)
Tags: python, telegram, pyrogram
Published: 2021-06-29 04:10:42

Hello Buddies, Let's make a Telegram Quote Bot using Pyrogram and python-arq today.

**Pre-requisite knowledge:**
1. Basic Python Programming
2. Basic Knowledge about Telegram bots.

Let's start:

First go to [@BotFather](https://t.me/BotFather) and create a new bot and Take its bot token. 

Then go to [@ARQRobot](https://t.me/ARQRobot) and make a API KEY.

**Install these Required Python Packages using** `pip3 install -U <package name>`:

- `pyrogram`
- `TgCrypto`
- `python-arq`
- `aiohttp`

We need python version greater or equal to 3.9.0 to run this. So if you have python version lower than this. Upgrade it first.

Now let's Setup the Clients

![Clients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw43gc409g9j09qnv6bc.png)

This is how we will setup the clients for the quote bot.

Now let's define how to Quotify

![Defining Quotely](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pugoz4gu3rtc2awis709.png)

We have defined how to quote

Now let's take on the how to setup the command for using the quote function

![Command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx650appr91shy5n0ekd.png)

We setup `q` as the command, and pyrogram takes `/`as the default handler

Now we are going to setup that it takes input only when we reply to a text message with the command.
For that we are going to use this:

![reply_to_message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyu1co6u3mte8k5dboja.png)

Now let's check what the user gave with the command, if it's 'r' we will quote the message with the message being replied too. If its an integer we are goin to 
quote the given number of messages from the replied message

![taking r or int](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emgqjczxa65j3ps7ydaj.png)

Now the else: part

![Else](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smh0660g7u3j43vtrm5f.png)

Quoting done! Oh but we didn't even started the bot.

![run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3684562zaqjqv59a9rwi.png)

Add this in the end to run the bot else it won't even run. Now save the file named `bot.py`

Now to run and test the bot we will do 
`python3 -m bot.py`
Overview of Syncfusion Flutter Charts
Tags: flutter, charts, widget, syncfusion
Published: 2021-06-29 03:31:25

Get an overview of the Syncfusion's [Flutter Charts widget](https://www.syncfusion.com/flutter-widgets/flutter-charts "Flutter Charts widget"). This video shows the chart types such as cartesian, circular, sparks, pyramid, funnel and out of box features available in the Syncfusion flutter charts package. It also explains how to go through the tutorial videos, supported platforms, where to download Syncfusion [flutter Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) packages, and how to contact the Syncfusion Support team.

**Product overview**: https://www.syncfusion.com/flutter-widgets/flutter-charts
**Demo - Web**: https://bit.ly/3caH7GO
**Demo - Android Play Store**: https://bit.ly/3cAX75x
**Demo – Apple App Store**: https://apple.co/2vP4aVa
**Examples – GitHub**: https://bit.ly/3suhTbj
**Documentation**: https://bit.ly/2Qtvume

{% youtube JAAnmOfoqg8 %}
Bootsnap Load wrong libruby in docker
Published: 2021-06-29 03:23:55

Today I mess up by switch ruby version back and fort that cause bootsnap fails to load the correct libruby. Base on the error, Bootsnap tries to load libruby.so.2.7 while I use ruby 2.6.5,

I try to update bootstrap, remove container, image but still fail. hik :(

So finally, I got it works by remove docker volume.

```
docker volume rm <your volume name>
```
What is the Scope Chain in JS? 
Tags: javascript, beginners
Published: 2021-06-29 03:11:06

####What is scope?
Scope is the context in which variables and functions can be accessed. If you can access or use a certain variable or function then it is within its scope.

####What is a lexical environment?
The lexical environment is the local memory plus the lexical environment of its parent. These explanations are really confusing so let's use an example to simplify things.

```js
function outer() {
  var a = 10;
  inner();
  function inner() {
    console.log(a); //10
  }
}
outer(); //10
console.log(a); //a is not defined
```
As you can see the last *console.log(a)* prints *a is not defined* because the variable *a* is not within its scope. However, the console.log(a) that is inside *function inner()* prints 10 even though *variable a* is not within the same scope (*variable a* is in the local memory of function *outer* not *inner*). This is possible because *variable a* is in function *inner's* lexical environment. We have to understand how the call stack works to see how this is possible. 

Let's review the JS execution context. First, before the code even runs JS creates a global execution context. There, it allocates memory to function *outer()*. Once a function is invoked, JS pushes it into the call stack. In this case, outer was invoked and is pushed in the call stack as you can see in the snapshot below. It goes through the same process and allocates memory to variable *a* and copies the function *inner*. Then function *inner* is pushed into the call stack because it was invoked.

Now, where does the lexical environment come into play here? 

For every execution environment, JS first looks in its local memory to see if a variable exists. If it doesn't exist there it goes up to its parent's environment to see if the variable exists there. It continues this process all the way up to the global execution environment and if it doesn't exist there it returns *null*. This ability to look at its parent's local memory all the way up to the global execution context is the scope chain because it can access all the variables in its parent's local memory.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic4nzx6e3btwmgrwje4o.png)
 
Don't take my word for it. Let's actually run the code to see if it really does what I'm claiming it to do. I put a debugger on line 5 to see the code at that point in time. You can see that I highlighted the scope on the right in yellow and the call stack in orange. In terms of scope it can access local, outer, and global. Where it says closure is the scope of the function *outer* as you can see in parenthesis the name outer. 

You can also see that the call stack has outer, inner, and global execution contexts.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnx65tcwba7wb38mlk18.png)
How To Scrape Amazon Product Data
Published: 2021-06-29 02:18:48

Amazon, as the largest e-commerce corporation in the United States, offers the widest range of products in the world. Their  product data can be useful in a variety of ways, and you can easily extract this data with web scraping. This guide will help you develop your approach for extracting product and pricing information from Amazon, and you’ll better understand how to use web scraping tools and tricks to efficiently gather the data you need.

##**The Benefits of Scraping Amazon**

Web scraping Amazon data helps you concentrate on competitor price research, real-time cost monitoring and seasonal shifts in order to provide consumers with better product offers. Web scraping allows you to extract relevant data from the Amazon website and save it in a spreadsheet or JSON format. You can even automate the process to update the data on a regular, weekly or monthly basis.

There is currently no way to simply export product data from Amazon to a spreadsheet. Whether it’s for competitor testing, comparison shopping, creating an API for your app project or any other business need we’ve got you covered. This problem is easily solved with web scraping.

Read the full article on Scraper API's blog: [How To Scrape Amazon Product Data](https://www.scraperapi.com/blog/how-to-scrape-amazon-product-data/)