teleren/devto huggingface dataset:
React Native 1 requisitos/instalacion
Published: 2020-06-08 21:53:04

Set-ExecutionPolicy AllSigned

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

choco install -y nodejs.install python2 jdk8

descargar android studio https://developer.android.com/studio con  
 (agregamos android virtual DEVICE)

no importaremos ninguna configuracion al instalar este

hacemos una instalación CUSTOM asegurándonos de tener :
 (Performance intel HAXM y Android Virtual DEVICE,SDK platform)

asignamos 512 ,1024 , 2048.... en ram 

Al terminar la instalación configuracion->->->

SDK Platform ->android9.0 ->tickear intel x86 atom_64_system image

SDK Tools  ->android SDK build tools -> 28.0.3 

aplicar para instalar los nuevos elementos


VARIABLES DE ENTORNO (Android Home y Platform Tools)

agregar nueva variable del sistema :
ANDROID_HOME
F:\SDK-android-componentes (ejemplo)

editar  path  agregando una linea mas que contiene:

F:\SDK-android-componentes\platform-tools
Using Axios Request Interceptor
Tags: axios, http, 100daysofcode, javascript
Published: 2020-06-08 21:31:44

### What is Axios Request Interceptor?

Axios Request Interceptor is a method in the promise-based HTTP client that allow you to run your code or modify the request before the actual call to the endpoint is made.

A simple use case is if you want to check whether certain credentials are valid before making a request, you can do this with a request interceptor. Or if you need to attach a token to every request made, instead of duplicating the token addition logic at every axios call, you can make an interceptor which attaches a token on every request that is made.

To demonstrate, I want to switch between two baseUrl depending on if it is available or not.

### Base Code:

```javascript
import constants from "constants";
import axios from "axios";

const { apiUrl } = constants;

export default axios.create({
  baseURL: apiUrl,
});
```
### With request interceptors:

```javascript
import constants from "constants";
import axios from "axios";

const { apiUrlOne, apiUrlTwo} = constants;

//create instance
const app = axios.create();

//check if endpoint is available
const isAvailable = async () => {
  const res = await fetch(apiUrlOne);
  if (res.ok) {
    return apiUrlOne;
  }
  return apiUrlTwo;
};

app.interceptors.request.use(
  async (config) => {
    const conf = config;
    const url = await isAvailable();

    //update the request baseURL
    conf.baseURL = url;

    //return the request configurations
    return conf;
  },
  (error) => Promise.reject(error)
);
```

This is just a demonstration on how to use the Axios request interceptor. Cool yeah!. Learn more at [axios docs](http://axios-js.com/docs/index.html#Interceptors)
💡 Natively detect changes in ambient light.
Tags: javascript, html, webdev
Published: 2020-06-08 21:19:37

Use ambient light events to modify how your site works depending on light intensity.

This could be used to switch to a night mode interface or mute all the sounds when in a dark environment.

Lights off, Lights on!

[Demo Site](https://lightbulb-event.netlify.app/)

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

---

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ambient Light Events</title>
    <style>
        * {
            margin: 0px;
        }
        #bulb {
            width: 100%;
            height: 100vh;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }
        .on {
            background-color: white;
            background-image: url("lightsOn.png");
        }
        .off {
            background-color: black;
            background-image: url("lightsOff.png");
        }
    </style>
</head>
<body>
    <div id="bulb" class="on"/>
    <script>
    var bulb = document.getElementById('bulb');
    if ('ondevicelight' in window) {
        window.addEventListener('devicelight', function(event) {
            var bulb = document.getElementById('bulb');
            if (event.value < 50) {
            bulb.classList.add('off');
            bulb.classList.remove('on');
            } else {
            bulb.classList.add('on');
            bulb.classList.remove('off');
            }
        });
    } else {
        console.log('devicelight event not supported');
    }
    </script>
</body>
</html>
```

As of June 2020 this feature is only available behind a feature flag on Firefox. It can be activated by navigating to "about:config" and toggling the device.sensors.ambientLight.enabled flag to true. 

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

[Ambient Light Events - MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Ambient_Light_Events)

---

If you enjoyed this little snippet you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Password generator using python
Tags: python, random, tutorial, beginners
Published: 2020-06-08 21:10:05

Hello, today we will make a simple password generator program using python.
first, we will import random and make 2 new variables:
<pre>
import random 
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-+=!@#$%^&*"
length_of_pass = int(input("num of letters:"))
</pre>
Second, we will define a function that has one parameter called "num",
Inside the function we will make a new empty variable called password , After that we will loop in the range of "num" using "for loop", Inside the loop we will we will use the random module and add the result to password, outside the for loop we will return password:
<pre>
def pass_generator(num):
    password = ''
    for i in range(num):
        password += random.choice(chars)
    return password
</pre>
The last thing we will call the function with the parameter "length_of_pass".
the whole code: 
<pre>
import random 
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-+=!@#$%^&*"
length_of_pass = int(input("num of letters:"))
def pass_generator(num):
    password = ''
    for i in range(num):
        password += random.choice(chars)
    return password
print(pass_generator(length_of_pass))
</pre>
Don't forget to follow me!
Thanks for reading.
What's the most popular programming language?
Tags: dataviz, go, java, python
Published: 2020-06-08 21:08:23

---
title: What's the most popular programming language?
published: true
description: 
tags: dataviz, go, java, python
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sk9vwt14tvti1qhmoa05.png
---

Inspired by the article about [the popularity of Go](https://dev.to/pavanbelagatti/why-is-go-so-damn-popular-among-developers-2d6h) I wanted to check what is currently the most popular programming language.

I opened up Google Trends and entered a few languages that I alreay considered as popular.

![C# vs Java vs JavaScript vs PHP vs Python](https://dev-to-uploads.s3.amazonaws.com/i/sk9vwt14tvti1qhmoa05.png)

You can only enter 5 terms in Google Trends so here is another round of slightly less popular languages (comparing to Java as it holds the reference point of 100% on the previous chart).

![Go vs Java vs Ruby vs Rust vs Swift](https://dev-to-uploads.s3.amazonaws.com/i/s2lej01adhfxwwny35y2.png)

I was aware that Python is popular because of its usage for machine learning, but I'm quite surprised that Python has moved into the lead recently. I'm also shocked how fast Java is loosing popularity. Over last 5 years the interest in search for Java dropped by 55%.

There is also the old good [Tiobe Index](https://www.tiobe.com/tiobe-index/) which gives a bit different perspective.

![Tiobe Index](https://dev-to-uploads.s3.amazonaws.com/i/h1hkdxt1lty1wf5j2xsb.png)
 
It also shows a gradual, although a much slower decline of Java and an increasing popularity of Python. What I don't understand is the top position of C language in the Tiobe Index. Can anyone explain?
Vite - No Bundle Setup for Vuejs, React and Preact
Tags: vue, react, preact, vite
Published: 2020-06-08 20:57:43

* Hey Developers! I have uploaded a video for introducing vite-no bundle setup tool for vuejs, react and preact.

{% youtube moa9lr7MfoA %}

-----
### Install Vite:

* Installing vite for vue template can be done by following command:

```
$ npx create-vite-app <app-name> 
```

* Also, for react and preact, vite can be used to install those framework templates:
```
$ npx create-vite-app <app-name> --template=react
 
$ npx create-vite-app <app-name> --template=preact
```
### Getting Started:
* To install the dependencies and run the application, do follow the following commands:

``` bash

$ cd <app-name>

$ npm install

$ npm run dev

```
### Just Do

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

* If you like this post and my youtube video, then do subscribe my youtube channel **Vuelancer**

Thank You!
#002 Docker vs Virtual Machine
Tags: docker, devops, tutorial
Published: 2020-06-08 20:53:54

# Introduction
this is part 2 from the journey it's a long journey(360 day) so go please check part 1 , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

# What is virtual machine?

![vm](https://i.ytimg.com/vi/gc4TcShBu88/maxresdefault.jpg)

Let's take an example we have a machine running mainly mac OS , let's say I see an app that run only on windows .

So should I go and buy a new PC for this ? simply no , you can install an vm tool such as vagrant , virtualbox , vmware ... 

vm tool let you run an image of an Operation System on top of your existing OS without colliding two OS togetger.

it run on a layer called Hypervisor which is divided to 2 parts , part 1 run directly on your physical hardware (such as v-hyper) and run on virtual hardware (such as vmware , virtualbox).

# Virtual Machines and apps

![space-wasted](https://www.howtogeek.com/wp-content/uploads/2017/06/ximg_594fe42b45594.png.pagespeed.gp+jp+jw+pj+ws+js+rj+rp+rw+ri+cp+md.ic.V9Uxz-HiPP.png)

let's say we need to run 4 apps on our server , every app should be in his own VM , every VM os size vary let's say it will take 800 MB/App for just a fresh install , so with simple Math 800*4 =  3200 MB ~= 3 GB .

that's a lot of space as we see , even when they are fresh OS nothing installed on them.

we talk about space what about resources such as CPU and ram ?

basically every VM will take resources from the server which is a big waste and cost more money.

# Docker...

![dockerVSvm](https://stalk-calvin.github.io/img/20170415vd/docker.png)

Here came the role of Docker so he help with this problem there is no os layer here as we see in the picture it run on Docker Daemon directly so it doesn't take a huge space or resources and can run quite fast in milliseconds.

each App here is called an container , every container have his own setup and they are lightweight so we save resources.

We can control them using docker to communicate with those containers.



# Which is The best then?

simply use a VM when you need to isolate a complete system (example each customer get an vm) and Docker to isolate apps.
Week 3: My First Project + New Series
Tags: career, webdev, webcomponents, beginners
Published: 2020-06-08 20:48:22

After wrapping up the first couple of weeks in my virtual internship, I got a basic understanding of web components. Throughout that time, I created my first web component, which I illustrated in my first entry. Since writing that post, I added some details to my web component like social media icons using scalable vector graphics (SVG). Once I felt satisfied with the design, I published it to NPM so other developers can use my web component. 

Below is what my updated web component looks like. You can see the added social media icons that is linked to a users respectable social media pages. 

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

For more information here is the GitHub repo:
{% github saracunn/bio-card %}

Now, as I am more familiar with web components and web development, I am eager to start working on a real project to directly impact HAXcms. The first assignment I have been given is to build a better left-hand menu. This is an in-depth project so I will be creating a separate series where I walk you through what I am doing such as learning about the problem, conducting research, creating mockups/wireframes, implementation stages, etc. I will still be regularly updating the “My Virtual Career” series, as well as writing in my new series. If you are interested in the user interface or user experience then I recommend checking that series out so you can follow along my journey from start to finish. I am excited to start this new task, so let’s work!

View my first post in my new series, "UX/UI Menu Fix"
{% link https://dev.to/saracunn/ux-ui-menu-fix-initial-research-analysis-155c %}
Elastic container and persisting
Tags: elasticsearch, docker
Published: 2020-06-08 20:46:52

Spent quite some time trying to persist data of elastic container to the host machine. Here is how to do it finally -

```
elastic_db:
        container_name: elastic_db
        image: elasticsearch:7.6.2
        ports:
            - "9200:9200"
        environment:
            - discovery.type=single-node
            - "ES_JAVA_OPTS=-Xms400m -Xmx400m"
        volumes:
            - ./elastic-volume:/usr/share/elasticsearch/data:rw
```

I have mapped the host folder **elastic-volume** over here. Give permissions to the folder so that it can be written into.

Hope this helps someone! :D
how to handle a multitenant data warehouse?
Tags: datascience, database, dataengineering
Published: 2020-06-08 20:31:00

Hi,

I'm a very noob in the topic, and I actually want to know how to handle a multitenant data warehouse (each customer has a unique schema or a global schema that abstract different type of information in data)? 

Which tools I would use? I was thinking in Delta Lake from DataBricks, but I don't know if it's ok for my needs...

Any suggestion?
usando GoogleMAP en REACT + GoogleApiWrapper
Tags: react, googlemap
Published: 2020-06-08 20:22:06


         
<h5>creado con el fin de reutilizarse en futuros proyectos :)</h5>

<h2>1 Mapa Basico en React</h2>
Crear la aplicacion

     npx create-react-app my-app

Ingresamos a la carptea e instalar google map react

     npm install --save google-maps-react


dentro creamos un componente X.js que incluirá el mapa y otros datos
{% raw %}
     import React, { Component } from 'react';  //basicos
     import { Map, GoogleApiWrapper } from 'google-maps-react'; //de google

     export class Mapa extends Component {

         render() {
             return (
                 <Map
                     style={{ width: '100%', height: '100%' }}
                     initialCenter={{ lat: -18.4745998, lng: -70.2979202 }}
                     zoom={14}
                     google={this.props.google}
                 >

                 </Map>
             );
         }
     }
     export default GoogleApiWrapper({
         apiKey: 'miapikeypersonal'
     })(Mapa);
{% endraw %}

exportamos el componente X.js en  App.js 

yarn-start y ya podemos ver el contenido 

<h2>2 MARK en google map</h2>

importar elementos necesarios

       import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

agregar una marca en el mapa
           {% raw %}

        <Marker position={{ lat: -18.4745998, lng: -70.2979202 }} />
         
   {% endraw %}
100 Days of SwiftUI — Day 18
Tags: 100daysofswiftui
Published: 2020-06-08 20:19:16

---
title: 100 Days of SwiftUI — Day 18
published: true
date: 2020-06-08 20:18:48 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-18/
---

Wow, it's already the [18th day](https://www.hackingwithswift.com/100/swiftui/18). Nearly one fifth is done! 🥳🥳🥳

Today I reviewed the small app we built as a first project using SwiftUI, there as little exam and then there were three challenges to solve. Those were about changing the UI slightly and they didn't take a lot of time — I was a bit surprised. But Paul already mentioned, that there will be a lot more to cover in future projects. I'm looking forward to it!

<!--kg-card-end: markdown-->
js-coroutines passes 100 GitHub stars, gets own website, API docs, typings + more examples
Tags: webdev, javascript
Published: 2020-06-08 20:12:00

> js-coroutines gives you the power to run your Javascript processes like sorts, compression and JSON operations while your web app stays fully interactive at 60fps

js-coroutines has been a bit of a rollercoaster, from an idea sparked by a dev.to article a couple of weeks ago to a fully fledged library and a key part of my daily toolkit!

As the repo has passed 100 stars I decided to give it a proper home, with better examples and descriptions, API docs - complete but in need of some more examples over time.

The new site also has additional explanations and examples of how to get the most from this library.

Thanks for all of your feedback and comments. I'll now get back to some different kind of posting haha....

See [js-coroutines.com](http://js-coroutines.com)
Redis container and persisting
Tags: redis, docker
Published: 2020-06-08 20:08:47

Spent quite some time trying to persist data of redis container to the host machine. Here is how to do it finally - 

```
redis_db:
        container_name: redis_db
        command: bash -c "redis-server --appendonly yes --requirepass <password>"
        image: redis
        ports:
            - "6379:6379"
        volumes:
            - ./redis-volume:/data
```

Here I have mapped the host's redis-volume folder with the /data folder of the redis container. Once done you will be able to find files called **appendonly.aof** and **dump.rdb** inside it. You will be able to see these files inside your container at /data as well. To see that use 

```
> docker ps
> docker exec -it <containerId> bash
# cd /data
```

When you start your container **up**, you will find a line like so - 

**redis_db      | 1:M 08 Jun 2020 19:58:58.987 * DB loaded from append only file: 0.000 seconds**

Also, change the persmissions of the host folder to a writable one.

Hope this helps someone! :D
A Facebook crawler was making 7M requests per day to my stupid website
Tags: facebook, php, digitalocean, app
Published: 2020-06-08 20:06:28

---
title: A Facebook crawler was making 7M requests per day to my stupid website
published: true
description: A Facebook crawler was making 7M requests per day to my stupid website
tags: facebook,php,digitalocean,app
---

I own a little website I use for some SEO experiments. Of course there's some content and a facebook sharing button for every post. The website is so little it runs on a "single controller" PHP app + a 400kb SQLite db, but can generate thousands of different pages.

Everything is hosted (together with a bunch of other websites) on a cheap DigitalOcean machine + free cloudflare plan for some caching. One of those websites has some alerting and it started to alert me about being down.

After some investigations I've found out the problem... [the Facebook Crawler](https://developers.facebook.com/docs/sharing/webmasters/crawler/)

**That crawler was making more than 7M requests per day** (with a peak of 300req/second) to that website.

Their doc was not helping on how to block the bot.

* og:ttl -> ignored 
* robots.txt -> ignored 
* HTTP 429 -> ignored

I had to block the user-agent using [cloudflare](https://cloudflare.com) rules.

If there's someone working on that crawler here on dev.to, **please stop ignoring basic Internet netiquette about crawlers**. 

Next time you could hit someone on AWS. And then they'll probably ask you to pay the bill ;)
Changelog: Updated Mod Tooling
Tags: changelog, meta
Published: 2020-06-08 20:00:43

Over the past few months, we've been working especially hard on improving our community moderation tools. These upgrades have largely been driven through sessions with our existing community mods, many of whom generously offered their time to participate in feedback sessions with @lisasy!  Having talked directly with these mods, we’re excited to show off some of the new changes based on their feedback.

As a first note, this post is **most relevant to our amazing community moderators**.  These are trusted members of the DEV Community who have heightened privileges to help us keep the platform safe and constructive.  More information about our community mod program is available [here](https://dev.to/community-moderation).

Before this change, finding and using the community mod actions wasn’t all that intuitive.  You had to click the small “MODERATE POST” button alongside the article title.  Now, moderators will have a more seamless experience, as they can open up the actions panel directly while reading a post:

![example of mod actions panel](https://i.ibb.co/ScYPQtm/2020-06-08-15-19-13.gif)

DEV community moderators are able to::
- Slightly boost the visibility of a post with the thumbsup reaction
- Slightly lower the visibility of a post with the thumbsdown reaction
- Flag rule-breaking users and content directly to DEV Staff
- Adjust the tag(s) of the post (if they're a [tag moderator](https://dev.to/tag-moderation))
- Add an experience level to the post (to help with feed relevancy)

Most of these actions were already available to moderators, but the whole experience should now be a whole lot more seamless.  The thumbsup and thumbsdown rating adjustments are relatively gentle — no single positive or negative reaction will determine a post’s ultimate success.  It’s simply a way for trusted users to help ensure that high-quality content on DEV has a better chance at being visible across the platform, while reducing the likelihood that low-quality content ends up in the feed.

**One important thing to note is that this change will not rollout site-wide all at once. So, if you're a moderator, you might not see the button for all posts.**

Personally, I'm excited to continue working with the mods, and to build tools that make their life easier. They do an amazing job, and it’s largely thankless work. They help ensure that DEV remains an inclusive and positive space, and I really want to make sure they have a great experience as they help support all of us.

As always, let us know if you have any questions or comments.

Happy coding!

**Big shout out to my teammates @msarit, @jacobherrington, and @lisasy for working on this together!**
Advice for a solo developer?
Tags: discuss
Published: 2020-06-08 19:51:27

After 1.5 years working on a small (2-3 dev) team, I am now the only developer and will likely be flying solo for a few months. 

This is going to force me out of my comfort zone, as I'll have to move from being primarily backend to fullstack. 

Any advice for how to thrive as a solo dev would be appreciated! :)