teleren/devto huggingface dataset:
Complete React Native one View
Tags: reactnative, completereactnative, javascript, mobileappdevelopment
Published: 2021-07-13 01:54:50

React Native is a great javaScript library in which we can make android, ios mobile app with a single code base. Here i will explain all the basic concept for learning react native. This will be a brief introduction of all the topics of react native.

## Install of React-native-cli
first we will see how we can install the react-native in your system. We will work react-native-cli in the whole article.

```
npm install -g expo-cli
```

## Create React Native App
```
expo init firstProject
```

## Run React Native App

```
expo start
```



## Basic Components of react Native
Here we will describe some of the basics components of react native like *View, Text, Image, TextInput, ScrollView, StyleSheet*

**View**
View in react native is div like tag. View is the fundamental component for building UI. View is the container that supports layout with flexbox, style, touch handling and accessibility.

```
import React from "react";
import { View, Text } from "react-native";

const ViewShow = () => {
  return (
    <View>
      <View>
      <Text>Box One</Text>
      </View>
      <View ><Text>Hello World!</Text></View>
      
    </View>
  );
};

export default ViewShow;
```

**Text**
Text support nesting, styling, and touch handling. text show the written content on the app.


```
return (
    <View>
      
      <Text>welcome to stupid Progrmmer </Text>
      <Text>Thanks for reading </Text>
      
    </View>
  );
```

**Image**
In react native we can show image with the help of uri & require
uri -> for url
require -> for system image

```
return(
<View>
<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400t.png'}}
   style = {{ width: 200, height: 200 }}
   />
<Image source = {require('C:/Users/MyDir/Desktop/NativeImage/logo.png')} />
</View>
);
```

**TextInput**
React Native provide well defined method to take text as an input through touchable keypad.

```
import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const TextInputExample = () => {
  const [text, onChangeText] = React.useState("Useless Text");
 

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        placeholder="write some text"
      />
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

export default TextInputExample;
```

React Natve also provide some basic keypad type functionality like numeric keypad, email-address, default and many more
It's my Birthday! Ask Me Anything about GitHub, DevOps, Azure DevOps (Live Q&A)
Tags: devops, github, azuredevops, live
Published: 2021-07-13 01:38:50

Hey folks, __it's my Birthday__! 🥳

To celebrate, I hosted a live _Q&A_/_Ask Me Anything_  with questions about __DevOps__, __GitHub__, __Azure DevOps__, and Myself?

{% youtube a9cpkf7ZMeA %}

[Link to the video: https://youtu.be/a9cpkf7ZMeA](https://youtu.be/a9cpkf7ZMeA)

Thanks so very much again for your support and see y'all there!

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>

{% youtube a9cpkf7ZMeA %}
Javascript and Ruby on Rails Project
Tags: javascript, ruby, codenewbie
Published: 2021-07-13 00:58:32

For my 4th project I had to build an app using Ruby On Rails for the backend and Javascript for the frontend. I wanted to create an app that would solve a real life problem. When I am working, I often have to go buy materials from Home Depot or other hardware stores and sometimes I misplace the receipts. I decided to build an app that let me track the materials I buy for any job. 

##Features
This app let me create a location. Once a location is created the app lets me create a receipt for this location. Once the receipt is created then I can add items with a price to the receipt. The app will calculate the total of all items in the  receipt: Locations have receipts => receipts have items.

This app uses vanilla Javascript and Webpack. I  used fetch to enable edit and delete functionality in the database. For the database, I used SQL using Activerecord and Ruby on Rails.

##Lessons learned
Javascript is a powerful programing language with many libraries and frameworks that I'm interested in learning. To mention some of them React, Redux, Angular and Vue. I learned a lot working on this project. Building an app with Javascript and Ruby is easier than I thought thanks to all the geniuses who contributed to those libraries that make the job easy. I learned how to make HTTP requests using the Fetch API. I remember years ago I took a Javascript class, and I had to use XMLHttpRequest to make requests. It was complicated and more manual so using fetch is a lot easier. I also got a better understanding of using classes and I improved a lot.

##Conclusion
I liked working with JavaScript and I want to learn more about it. I can go to homedepot.com, click on an item and view more information about that item. To someone that doesn't know programming, it may seem like magic but now I understand that it is JavaScript doing work. Even though I enjoy working on the backend, I want to continue learning about JavaScript and all that it can do.
Using MySQL with Docker
Tags: mysql, docker
Published: 2021-07-13 00:48:48

---
title: Using MySQL with Docker
published: true
description: how to use MySQl with Docker
tags: 
- mysql
- docker
canonical_url: https://luturol.github.io/docker/mysql/Using-MySQL-with-Docker
---

## Using MySQL with Docker

What you need to have installed:

 - Docker

> With you want to learn more about Docker, you can check my blog post about it by [clicking here](https://luturol.github.io/docker/Docker-101)

## Downloading [MySQL Image](https://hub.docker.com/_/mysql)

```docker
docker image pull mysql:5.7
```

## Run a container

```docker
docker run -e MYSQL_ALLOW_EMPTY_PASSWORD=yes -v folderForVolume:/var/lib/mysql mysql:5.7
```

**Change folderForVolume for a path from a folder to create the volume**.

### What this command does

It will initialize your container and show you the logs while is initializing, so you can track if some errors appear in the console log.

**-e** will add MYSQL_ALLOW_EMPTY_PASSWORD environment variable with the value **yes**. With that, you can enter in mysql without a password.

**-v** will create a volume with the container to share some data between your pc and the container. With this, you will be able to create another container with the same data without losing any tables or queries. 

## Entering the container

1. You need to get the container ID from your mysql container.

    ```docker
    docker container ls
    ```

1. With the container Id, now you can enter using the following command:

    ```docker
    docker exec -it containerID bash
    ```
    
    It will enter inside the container with a bash terminal executing.

1. Enter MySQL

    ```bash
    mysql
    ```

    If it works, then will show in the console that you are inside the mysql. To test just execute a ```show databases``` to check.

## References

- [MySQL docker image](https://hub.docker.com/_/mysql)
- [Como rodar MySQL com Docker?](https://www.youtube.com/watch?v=S9BbUxmFaQI&ab_channel=AluraCursosOnline)
Evolving From Dev to CEO w/ Stephen Magill
Tags: ceo, devops, leadership, culture
Published: 2021-07-13 00:16:33

The most prolific companies of our time are run by former developers. 

That’s why on this week's episode of [Dev Interrupted](https://devinterrupted.com/podcast/evolving-from-dev-to-ceo/) we bring in former-developer-turned-CEO, Stephen Magill of Muse.dev, to chat about what it takes to make the jump from developer to business leader.

#**Listen to the full episode**
{% spotify spotify:episode:2nFKZF3l9Ir2LcvlHzaqJ6 %}

#**Episode Highlights include:**
* Why more companies are being led by former developers
* The pros and cons of having a technical vs communication background
* What Stephen wishes he knew before taking on a leadership role
* Great advice for developers who aspire to become business leaders

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
First Steps
Tags: firstpost, ruby, javascript, programming
Published: 2021-07-13 00:08:26

As of today, I have completed the Flatiron School Software Engineering curriculum. after working hard, passing all my portfolio project reviews, and learning so much from knowing nothing. It is time for me to venture beyond the classroom and explore the rest of the world.
Following this new interest, I plan to develop more apps and seek work in the software industry.
Even though I am nervous, I am also eager to broaden my comfort zone and grow beyond what I was able to achieve in the past eight months 
Here is to that first step to push those boundaries. Here is one such example. My weekly posts will cover what applications I'm developing and help me continue to learn how to talk about coding and software development.
How to see the free disk space in Linux?
Tags: resource
Published: 2021-07-13 00:00:00

---
  title: How to see the free disk space in Linux?
  published: true
  tags: Resource
  date: Tue Jul 13 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/see-free-disk-space-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-7372c97c53971178ee7e7f05f8234aab.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/see-free-disk-space-linux)
  
To see the amount of free disk space, you can use the `df` command in Linux.

```bash
# Shows the amount of free disk space
df
```

Once you execute the `df` command on the terminal in Linux, you can see an output like below,

![free disk space using the df Linux command](https://melvingeorge.me/_next/static/images/df-command-linux-33ff1766a04c501bc84fa2fcbe205d1e.png)

From the above output you can see the:

- `Used` space on a particular disk
- `Available` space on a particular disk
- and `Capacity` used on a particular disk in percentage.

See the above code live in [repl.it](https://replit.com/@melvin2016/see-free-disk-space-in-linux#main.sh).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Meus repositórios de suporte para Desenvolvimento Web
Tags: github, help, showdev, beginners
Published: 2021-07-12 23:54:34

Olá pessoal

Hoje resolvi iniciar minhas contribuições sobre o desenvolvimento Web na plataforma DEV.

Estou compartilhando a minha sequência de repositórios que utilizo para determinadas áreas da programação. Todos eles foram criados para facilitar a busca por sites relacionados à área definida no repositório através do conceito de [Inventário de Recursos](https://dev.to/matthewrungwe/a-developer-s-resource-inventory-561e).

Espero que possam ajudá-lo nessa caminhada. Segue abaixo:

obs: **Estão todos em Inglês**

Suporte de Ciência de Dados:

{% github BrunoComitre/data-science-resource-inventory %}

Suporte para Programação Front-End:

{% github BrunoComitre/front-end-resource-inventory %}

Suporte para Desenvolvedores Web:

{% github BrunoComitre/dev-support-resource-inventory %}

Suporte de Linguagem de Programação Python:

{% github BrunoComitre/python-resource-inventory %}

Suporte de Segurança voltado a conhecimentos Python e técnicas de segurança:

{% github BrunoComitre/security-resource-inventory %}

Suporte Containers Docker:

{% github BrunoComitre/docker-resource-inventory %}

Suporte de Ciência da Computação:

{% github BrunoComitre/computer-science-resource-inventory %}

Por hoje é isso. Simples  e objetivo para perder a vergonha de escrever..Contribuições sempre serão bem vindas e logo mais retornarei...

***
**OBRIGADO!**

Conecte-se comigo:
[LinkedIn](https://www.linkedin.com/in/brunocomitre/)
[Github](https://github.com/BrunoComitre)

Nos vemos em breve!

Agradecimentos Imagem: [Adi Goldstein](https://unsplash.com/photos/mDinBvq1Sfg)
How to run a .exe without opening a prompt in Windows
Tags: tutorial, productivity, windows
Published: 2021-07-12 23:25:56

Link to original article (recommended): https://gabriellazcano.com/blog/how-to-run-a-exe-without-opening-a-prompt-in-windows/

## Introduction
I was doing a Golang Shortcuts application and I wanted to run my program in the background without having a prompt in my taskbar all the time.

After investigating I found out this can be achieved by calling the .exe from a .vbs file is a pretty easy way of accomplishing this. You just have to create an object shell and run the .exe with these parameters.

## VBS File

```
Set Shell = CreateObject("WScript.Shell")
Shell.Run "C:\users\dirofyourexecutable.exe", 0, False
```

Shell.Run receives the path of your executable, an integer indicating the appearance of the programs window, and a boolean indicating whether the script should wait for the program to finish executing.

You can check all the available settings for intWindowStyles

## Run on start
If you wanted to run this file when Windows Starts you just have to paste it in the Startup folder located in "C:\Users\[username]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup" or just type startup in the explorer bar
How to Inject Javascript to a Site From Chrome Extension
Tags: javascript, beginners, webdev, codenewbie
Published: 2021-07-12 23:23:04

Link to original article (recommended): https://gabriellazcano.com/blog/how-to-inject-javascript-to-a-site-from-chrome-extension/

## Introduction
I was watching a Twitch streamer struggle trying to do this. So I thought it might help someone out there.

You can inject javascript code into any site with a chrome extension, with this you can do many things. Like creating new elements and adding them to the DOM or managing events of certain elements, what you can do in your application you can do it when injecting it.

## Manifest version 3
If you want your script to run on a set of pages you have defined, the manifest for your chrome extension which is needed for it to work (you can have a look a the documentation), needs to have some additional elements. content_scripts and host_permissions

Both the matches and host_permissions should specify match patterns. In this example inject.js only runs whenever the site is google.com, and you have permissions in all the urls.

```js
{
    "name": "inject",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": ["*://*.google.com/*"],
            "js": ["inject.js"],
        }
    ],
    "host_permissions": ["<all_urls>"],
}
```

This is an example of the code that can be injected. You can add event listeners, get and add elements from the DOM as I mentioned before.
```js
function init() {
    const el = document.createElement("input")
    el.setAttribute("type", "checkbox")
    document.body.appendChild(el)
    el.addEventListener("click", (event) => {
        console.log(event.target.checked)
    })
}

init()
```
How I set up a brand-new React app
Tags: beginners, react
Published: 2021-07-12 23:11:52

### Create your first branch and push it the right way
The first thing I do with a new app is to create a new git branch to work on so I'm not pushing to main. I never know what I'm going to do first, so I just call it "first". Yes, I know that's basic of me. Type the following into your terminal: `git checkout -b first` or `git checkout -b whateveryouwannacallit`.

Ok, so you've checked out a new branch called first. Once you're ready to make your initial push of the branch first to git, make sure you use the command `git push -u origin first`. The added `u` sets up tracking information so that during future pushes, you can do git pull without having to specify the remote or the branch.

### Remove Unnecessary Cruft
There's a bunch of files in your automatically-created new app that you don't necessarily need. Some people delete them but I just move them to a new folder I create called "DELETE" juuuuust in case I need them at some point down the road. They include the following:

remove from `public` directory:
* favicon.ico
* logo192.png
* logo512.png
* manifest.json
* robots.txt

remove from `src` directory:
* App.test.js
* logo.svg
* reportWebVitals.js
* setupTests.js

Once I'm done, my directory looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7lkeoe53q8alp2spz2y.png)

### Helpful Dependencies
* [React-Bootstrap](https://react-bootstrap.github.io/) makes it super easy to build screen layouts with their [Grid System](https://react-bootstrap.github.io/layout/grid/) of Containers, Rows, and Columns. It also has a ton of [components for common UI widgets](https://react-bootstrap.github.io/components/alerts/) like Alerts, Breadcrumbs, Buttons, Forms, Modals, Navbars, and on and on. Install it with 
```javascript
npm install react-bootstrap bootstrap@4.6.0
```
* [React Router Dom](https://reactrouter.com/web/guides/quick-start) makes it easy to create static and dynamic (and bookmarkable) pages. Install it with
```javascript
npm install react-router-dom
```

### Easy-Peasy ReadMe
At some point, fill that `README` with useful content by visiting [MakeAReadMe.com](https://www.makeareadme.com/) which provides handy Read Me templates.
The CSS object-fit property
Tags: codepen
Published: 2021-07-12 22:20:51

<p>Shows the effect of object-fit cover on an image which needs to fit into a container with a different aspect ratio. Also compares between object-fit:cover and background-size:cover - results are similar - but not exactly the same. </p>

{% codepen https://codepen.io/danield770/pen/XYjZvN %}
How to filter Documents in Cloud Firestore - #100DaysOfCode - Day 15
Tags: 100daysofcode, flutter, firebase
Published: 2021-07-12 22:08:09

## Introduction

This post is part of my 100DaysOfCode series. In this series, I write about my 100DaysOfCode journey. My aim for this challenge is become proficient in flutter and firebase by building an Agriculture Management Information System.

## Recap

On Day 13 we discussed how to pass data from a child widget to a parent widget.

##Overview 

In this post, we will discuss how to filter documents in firebase before making it a stream.

## Filtering Documents in Firebase

In context of our Agriculture Management System, we want a stream of all farmer documents, farmer documents within the same region as the current user only and farmer documents within the same district as the current user only.

First we created a `getFarmerWhereFieldEqual()` method in my `FarmerService()` class. 

 ```Dart
  Stream<QuerySnapshot<FarmerServiceModel>> getFarmersWhereFieldEqual(
      {required String field, required String condition}) {
    return farmerRef
        .where(
          field,
          isEqualTo: condition,
        )
        .snapshots();
  }
```
This method accepts a string called field which specify the field to be filtered in the farmer document. It also accepts a string condition that specify what value the field need to be equal to.


### Filtering Documents by Region

```Dart
class RegionFarmerCommand extends BaseCommand {
  RegionFarmerCommand(BuildContext c) : super(c);

  Stream<QuerySnapshot<FarmerServiceModel>> run() {
    var condition = userModel.currentUser.region;
    farmerModel.regionFarmers = farmerService.getFarmersWhereFieldEqual(
        field: 'region', condition: condition);
    return farmerModel.regionFarmers;
  }
}
```
We created a `RegionFarmerCommand()` that gets the current user region by calling `userModel.currentUser.region`. We then call the `farmerService.getFarmersWhereFieldEqual();` to get a stream of farmers within the same region as the current user. This stream is stored in the `farmerModel.regionFarmers` property for future use and returned.

### Filtering Documents by District
```Dart
class DistrictFarmerCommand extends BaseCommand {
  DistrictFarmerCommand(BuildContext c) : super(c);

  Stream<QuerySnapshot<FarmerServiceModel>> run() {
    var condition = userModel.currentUser.district;
    farmerModel.districtFarmers = farmerService.getFarmersWhereFieldEqual(
        field: 'district', condition: condition);
    return farmerModel.districtFarmers;
  }
}
```

This method is exactly like the RegionFarmerCommand().run() except that we get the current user district and filter on the district field.


### Wrap Up

In this post we discussed how to filter documents in firebase before before making it a stream. 

## Connect with me

Thank you for reading my post. Feel free to subscribe below to join me on the #100DaysOfCodeChallenge or connect with me on [LinkedIn](https://www.linkedin.com/in/curtlycritchlow/) and [Twitter](https://twitter.com/CritchlowCurtly). You can also [buy me a book](https://www.buymeacoffee.com/curtlycritchlow) to show your support.