teleren/devto huggingface dataset:
Updating State of Parent from Child component in React Native
Published: 2020-10-31 08:19:18

Components are basic building blocks of a Web App. Every Popular Javascript Frameworks nowadays follow the Components paradigm which helps in code reuse-ability and abstraction of a feature.

>This blogs covers the communication of state between Parent and child component with the help of a Search Screen Example.

In the following Example
* SearchScreen is the Parent Component.
* SearchBar is the Child Component.

Lets start with SearchScreen.js
```
import React, { useState } from "react";
import { Text, StyleSheet, View } from "react-native";
import SearchBar from "../components/SearchBar";//Importing Child Component
const SearchScreen = () => {
  //Setting up the State Variables
  const [term, setTerm] = useState("");

  return (
    <View>
      {/* Passing the State variable from SearchScreen to SearchBar */}
      <SearchBar
        term={term}
        onChangeTerm={(newTerm) => {
          setTerm(newTerm);
        }}
      />
      <Text> The Search Term Entered: {term}</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default SearchScreen;
```
Within the SearchScreen component `[term, setTerm]` are state variables which are passed as props to the child component SearchBar. 

SearchBar.js

```
import React from "react";
import { TextInput, StyleSheet, View } from "react-native";
import { Feather } from "@expo/vector-icons";

const SearchBar = ({term,onChangeTerm}) => {
  return (
    <View style={styles.background}>
      <Feather name="search" style={styles.iconStyle} />
      <TextInput
        autoCapitalize="none"
        autoCorrect={false}
        style={styles.inputStyle}
        placeholder="Search"
        value={term}
        onChangeText={onChangeTerm}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  background: {
    marginTop: 10,
    backgroundColor: "#909090",
    marginHorizontal: 15,
    height: 50,
    borderRadius: 10,
    flexDirection: "row",
  },
  inputStyle: {
    flex: 1,
    fontSize: 18,
  },
  iconStyle: {
    fontSize: 35,
    marginHorizontal: 15,
    alignSelf: "center",
  },
});

export default SearchBar;

```

Within the SearchBar Component the  `{term,onChangeTerm}` props passed from the parent are directly accessed through  Destructing the props Object. 

>TextInput element where the user enters the Search Term, `value` attribute on TextInput element contains the text entered by the user which is mapped to the state variable term and `onChangeText` event reads the user input and calls the onChangeTerm method.

The end result would be like

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

Thats All Folks 😀 

Thank you for your time.
MySQL charset
Tags: mysql, php, sql
Published: 2020-10-31 07:30:50

I don't know is it the correct place to ask this types of question? 
BTW, I have a problem with charset "utf8mb4" of MySQL I have built a website and everything is working fine except Arabic Language here is the case:
I can update and insert new Arabic record on my table through PHP script, when I  open workbench or BDeaver I get this character "ØµØ¨ÙˆØ±" which is == "صبور", but on my  website I get the correct result, It sound like encrypt and decrypt process.
Here is the opposite, when I update this record through MySQL I get my name  which is "صبور" but when I fetch this name on my website I get question mark  == "?????"
Any help would be big help thank you in advance
Free React Landing Page Templates!
Tags: react, gatsby, javascript, startup
Published: 2020-10-31 07:04:20

Having an attractive, functional website is crucial for businesses - startups in particular, to achieve that all important positive first impression. At Startup Landing, we know specially well how difficult and resource consuming it can get to build your own website 'just right'. That's why, we have brought you our own collection of absolutely free React landing page templates!

Yes, you read that right - these free React landing page templates are not only cost any money, but also utilize Next JS and Gatsby JS making them super fast, SEO friendly and also secure. They are also fully responsive and optimized across all devices and platforms.

👉 Check it live here: https://startuplanding.redq.io/
👉 Check it on Github: https://github.com/Startup-Landing/Startup-Landing
👉 Check it on Producthunt: https://www.producthunt.com/posts/startup-landing

That's not all! 

Every week, we'll be adding new templates to suit different product niches and you'll be bound to find something that fits your needs perfectly. That's a Startup Landing guarantee!
JavaScript quick tips: Array.copyWithin()
Tags: javascript
Published: 2020-10-31 07:01:17

`Array.prototype.copyWithin()` does a copy (shallow) of the selected elements within the same array, to a specified index.

To copy value in index 3 to index 1

```js
const myArray = [1, 2, 3, 4, 5];
myArray.copyWithin(1, 3, 4); // [1, 4, 3, 4, 5]
```

To copy all values from specified index to the end to a given index

```js
const myArray = [1, 2, 3, 4, 5];
myArray.copyWithin(1, 3); // [1, 4, 5, 4, 5]
```
hello world
Published: 2020-10-31 06:55:48

"unspoken feelings are unforgettable"
andrey tarkovsky

My romance with the computer started early. Entering commands into the MS DOS command portal, tapping with my chubby little fingers, not sure what was happening because it felt like magic. Next came the Logo Turtle, an early digital music production program called Sessions, Oregon Trail, Myst, Riven, X-Wing, and a little known (but wildly entertaining) game called Wrath of the Gods in which the lo fi pixelated player must inhabit the roles of various Greek heroes and amble about the Grecian countryside slaying Medusa, stealing the Golden Fleece, defeating the Minotaur and sleuthing his way between the clashing rocks. 

I took a class from a woman in college where we read PKD, Margaret Atwood, Ursula K. Le Guin and William Gibson all year long. She had a background in Medieval Literature, and her lectures tied Beowulf to Ridley Scott and back to Sappho. My excitement for futurism intensified.

When I learned about Luigi Russolo, the Futurist movement of the early 20th century, and their intonarumori, the mechanical ancestors of the analogue and digital synthesizers we use today, I felt a yearning to dig my fingers into a machine and to use that as my instrument. 

I installed the program called Ableton Live on my Macbook, and when I opened it up it looked like a foreign language with a foreign alphabet. I had no idea how anything worked. Almost all of the terminology was new to me. There were dials, filters, inputs, outputs, dithering settings, amplitude adjustments, volume, gain ... I felt the weight of having so many choices, but more than anything I felt inspired that this elegant machine would aid me in my quest to make something beautiful. I just had to learn the rules, and solve the puzzle.  

I felt that same way when I started learning how to code, sort of a majestic curiosity. I started to notice and think about how Bach's contrapuntal techniques and numerical symbols which he used to create his musical compositions of exquisite beauty are not unlike the languages and techniques we use today to commune with our machines. It sparked in me a longing to learn programming in much the same way I'd felt compelled to learn to make music, an intangible desire to collaborate with this object imbued with such deeply creative potential. At the root of my desire to code is my reverence for and curiosity about the systems we use to organize our selves, our thoughts, our ideas, our feelings, to express ourselves in this world. I seem to find systems of self-expression endlessly mysterious and engaging.
Progressive Image Loading dengan BlurHash
Tags: blurhash, progressiveimageloading
Published: 2020-10-31 06:55:24

[BlurHash](https://blurha.sh) adalah sebuah representasi dari placeholder gambar dalam bentuk string singkat (sekitar 20-30an karakter per gambar).

Kebanyakan dari website yang biasa kita akses biasanya menggunakan background dengan warna tertentu sebagai placeholder hingga image selesai di-load, dan biasanya juga menggunakan placeholder yang sama untuk semua image. Paling sering biasanya yang digunakan adalah background dengan warna abu-abu.

Dengan menggunakan BlurHash, kamu bisa membuat placeholder yang unik untuk setiap image. Karena BlurHash sendiri adalah dalam bentuk string singkat seperti ini `LEHV6nWB2yk8pyo0adR*.7kCMdnj`, jadi bisa ditempelkan langsung ke file html jika menggunakan static html atau bisa dikirim dengan API bersamaan dengan link gambar aslinya jika gambar yang ingin di-load bersifat dinamis.

Dari hash tersebut kemudian di-decode menjadi gambar blur yang merepresentasikan aslinya

![BlurHash](https://dev-to-uploads.s3.amazonaws.com/i/uj3p4biqxr4zh18vuwid.png)

Di akun [github](https://github.com/woltapp/blurhash) resminya, terdapat berbagai implementasi untuk berbagai platform. Saya sendiri membuat [implementasi](https://github.com/armedi/rescript-blurhash) yang bisa digunakan pada file html biasa tanpa harus ada javascript sama sekali.

Cara menggunakannya sangat simpel, cukup dengan memasang script berikut di html

```html
<script src="https://unpkg.com/rescript-blurhash@0.3.2/dist/production.min.js"></script>
```

kemudian di setiap image tambahkan attribute `data-blurhash` seperti ini

```html
<img
   src="https://blurha.sh/assets/images/img1.jpg"
   data-blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
   style="width: 269px; height: 173px"
/>
```

Maka otomatis gambar akan menampilkan placeholder berupa versi blurnya terlebih dahulu hingga gambar tersebut selesai di-load.

Oh iya, untuk melakukan encoding kamu bisa menggunakan website resmi [blurhash](https://blurha.sh/) atau menggunakan salah satu dari berbagai implementasinya tadi.

Sebagai demo saya menggunakan gambar kategori produk dari [tokopedia](https://www.tokopedia.com/) dimana aslinya tokopedia menggunakan placeholder background berwarna abu-abu. Demo bisa kamu lihat dengan klik [link ini](https://bl.ocks.org/armedi/raw/0e41317e31ce8567dc47c27126cd9166/). Untuk melihat bagaimana blurhash diload mungkin kamu perlu [mensimulasikan slow network](https://developers.google.com/web/tools/chrome-devtools/network#throttle) pada devtools di browser terlebih dahulu dan kemudian lakukan hard reload.

Kodenya bisa kamu liat [disini](https://gist.github.com/armedi/0e41317e31ce8567dc47c27126cd9166)

![BlurHash](https://dev-to-uploads.s3.amazonaws.com/i/m3mv7waccalqftmtg1vl.gif)
Managing a Django Project with Poetry
Published: 2020-12-03 17:12:01

---
title: Managing a Django Project with Poetry
published: true
date: 2020-10-31 00:00:00 UTC
tags: 
canonical_url: https://rasulkireev.com/managing-django-with-poetry/
---

Poetry is relatively new packaging and dependency manager. It makes it very easy to upload libraries to [PyPI](https://pypi.org/), manage dependencies visually, and has a couple of handy features. Today, I'm not going to do a deep dive into how [Poetry](https://python-poetry.org/) works and all its features. Today I just want to focus on configuring a [Django](https://www.djangoproject.com/) project.

## 1. Install Poetry

```bash
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -
```

## 2. Create a Directory for you Django Project

```bash
mkdir django_poetry_example && ls django_poetry_example
```

## 3. Initiate a Poetry Project

```bash
poetry init
```

You will be asked to confirm the information about your project. You can skip through most of it.

![Poetry Init](https://rasulkireev.com/assets/static/poetry_init.cd61fdf.02d3f24e444ee33cc2ed0480e0f26c9f.png)

## 4. Add the Necessary Dependencies
Run `poetry add django`. Poetry will add django to the pyproject.toml file under the dependencies section. A virtual environment will also be created for you.

## 5. Start you Django Project
```bash
django-admin startproject django_poetry_example .
```

## 6. Working on your Django Project
When you need to run any python function (for example, `python manage.py createsuperuser`) you have two options.

1. You can leverage poetry run, which will run against the current project's dependencies. The command will be this:
`poetry run python manage.py createsuperuser`

2. You can activate the virtual environment with a poetry shell command. Now you can run python commands, as is. They will be run with dependencies you have installed.

## Bonus. Export dependencies to a requirements.txt

If you need to have the requirements.txt file with all the dependencies, you can run poetry export -f requirements.txt --output requirements.txt. If you have configured a CI/CD job that auto deploys your project, you can add this function as a step, which will generate the updated version on each update.

## Bonus II. Video
If you prefer a more visual approach, I have made a video that shows how to start a Django project with Poetry.

https://youtu.be/-c8DASfFNZM

If you have any feedback, please let me know on [Twitter](https://twitter.com/rasulkireev/status/1322499651732385792).
My first hacktoberfest experience
Tags: hacktoberfest
Published: 2020-10-31 04:51:31

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
Hi, my name is William dos Santos Teixeira, i am 22 years old, i live in Brazil and i'm a student of software engineering at IFAM - Instituto Federal do Amazonas.
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

I really like Python and things related to task automation. I had already developed some personal projects and worked in some volunteer work but my experience with open source projects was very different and interesting.

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
At first I was very nervous and I didn't know how to contribute, I didn't think there was much I could do. After a lot of analyzing repositories on Github I found some interesting projects that I could contribute to. First I read the README of these projects and some pull requests to better understand the objective, after I felt safe I tried to solve some issues. I had a little difficulty with git but after a few hours I had a little practice.

### Contributions


<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
Contribui com dois projetos muito interessantes, na minha opinião:

1 - [Tithiwa](https://github.com/Tithibots/tithiwa)
A chatbot for whatsapp with Python and selenium. I applied a lot of what I knew about Python, absorbed a little bit of environment settings in this project. I had a little difficulty expressing myself as it was the first project but the people were really nice to me.
2 - [algorithmshacktoberfest2020](https://github.com/Knackie/algorithmshacktoberfest2020)
A set of widely used algorithms that have been implemented in popular languages. I used a lot of logic here and had the opportunity to apply some concepts that I learned at the university.

### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->

The community was very welcoming, which helped me a lot to lose my fear of contributing. I shared my point of view with my classmates and some teachers who encourage me to participate in more activities like this. I hope to learn more to be able to contribute to more projects.
Day 40 of #100DaysOfCode: Node.js Express Logging (Export and Rotate Files)
Tags: node, javascript, logging, webdev
Published: 2020-10-31 06:34:01

## Introduction
This post is the note for Node.js Express logging. 
* Use [pino](https://getpino.io/#/), [express-pino-logger](https://github.com/pinojs/express-pino-logger) to generate the log file 
* Use [Logrotator](https://www.npmjs.com/package/logrotator) to separate log files when the log file becomes too large

### Step 1. Install packages 
```
npm install -s pino express-pino-logger logrotator
```

### Step 2. Add middlewares to the server 

```javascript
//Export the log files under logs folder
const logger = require("pino")('./logs/info.log');
const expressPino = require("express-pino-logger")({
  logger: logger
});
app.use(expressPino);

var logrotate = require('logrotator');

// use the global rotator
var rotator = logrotate.rotator;
// check file rotation every 5 minutes, and rotate the file if its size exceeds 1 mb.
// keep only 10 rotated files and compress (gzip) them.
rotator.register('./logs/info.log', {schedule: '5m', size: '1m', compress: true, count: 10});

rotator.on('error', function(err) {
  logger.error('oops, an error occured!');
  //console.log('oops, an error occured!');
});

// 'rotate' event is invoked whenever a registered file gets rotated
rotator.on('rotate', function(file) {
  logger.info('file ' + file + ' was rotated!');
  //console.log('file ' + file + ' was rotated!');
});
```

That's it!


## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
* Twitter bot: https://twitter.com/ALayman84368087
Styling React Components
Tags: react, beginners, tutorial, webdev
Published: 2020-10-31 06:32:01

There are two primary ways to style a React Component.
1. Inline CSS with ``style`` prop.
2. External CSS with ``className`` prop.

##**``style`` prop**
In HTML you pass CSS as a ``String``.

```html
<p style="margin-top: 10; color: red;">Something went wrong.</p>
```

In React, you have to pass CSS as a ``Object``.

```html
<p style={{marginTop: 10, color: "red"}}>Something went wrong.</p>
```

> In the React ``{{`` and ``}}`` is actually a combination of JSX express and an Object express.

> In React the property name of the style prop is ``camelCase`` instead of ``kebab-cased``.

##**``className`` prop**
In HTML you apply a class name to an element using the ``class`` attribute.

```html
<p class="error-message">Something went wrong.</p>
```

In React you apply a class name to an element using the ``className`` attribute.

```html
<p className="error-message">Something went wrong.</p>
```

My name is **Bipin Rajbhar** and I am a software engineer at [QuikieApps](https://www.quikieapps.com/), and you can follow or connect to me on [Twitter](https://twitter.com/Bipin_1598) and [Linked In](https://www.linkedin.com/in/bipinrajbhar1598/)

**Resources**
[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
[Epic React](https://epicreact.dev/)
Travel Brasil Smartcontract on XinFin XDC Network.
Tags: blockchain, xinfin
Published: 2020-10-31 06:27:16

Let travel in Brasil, and store the data on XinFin XDC Network. This was just a trail #Smartcontract deployed on XDC Network successfully. 

Transaction Hash: https://explorer.xinfin.network/tx/0xe698051fe303e9a5d5dd7bc9998b673e3cb098a15800da5c60ae6a3bf432dcbf
Singapore Tech Community Stance on Harassment
Tags: community, harassment, safety, singapore
Published: 2020-10-31 06:25:10

# Harassment in the Singapore Tech Community

Members of the Singapore Tech Community, I would like to touch on the sensitive issue of harassment (including sexual harassment) in the community. Unbeknownst to many of us, this has been happening in Singapore for a while. It is not something that only plagues our western counterparts. It is happening within our shores.

As a leader in the community, I have personally received messages from members of the community who have experienced harassment. In the past few instances of receiving the complaints, we (myself along with other community leaders in the [SingaporeJS](https://www.meetup.com/Singapore-JS/), [SingaporeCSS](https://singaporecss.github.io/) and [JuniorDevSG](http://juniordev.sg/) meetup groups) have banned individuals from our meetup group activities. The culprits were notified and removed from all chats and user groups pages.

However, this does not mean the individuals have repented or the harassment has stopped. New people are being targeted.

# Zero Tolerance Policy

Which prompts me to make this statement: **We have a zero tolerance policy on harassment of any kind**.

If we receive reports of harassment of members in our community, we will take action to exclude the culprit from further activities in order to ensure that our community remains a safe space for our members.

For the affected community members, we do not want you to suffer in silence. If anyone asks questions or says inappropriate things that make you feel uncomfortable or unsafe, please inform us. We want to help you, and if need be, take action against these bad actors in our community. And if necessary, legal recourse - for example, [Protection from Harassment Act](https://irblaw.com.sg/learning-centre/protection-from-harassment/).

# Ways of Reporting

You can email the report to report@engineers.sg or @miccheng on Telegram. Your identity will be kept secret.

You should also speak to the Admin of the group chats where you and the culprit are in. The culprit might also be targeting other members in that group.

# Safe Community

We want the Singapore Tech Community to be a diverse and inclusive place, where everyone can feel safe in sharing knowledge and growing together in our craft.

Thank you for doing your part. 🙇‍♂️

# Useful Links

- [Singapore CSS - Code of Conduct](https://singaporecss.github.io/code-of-conduct/)
- [Singapore JS - Code of Conduct](https://github.com/SingaporeJS/talk.js/blob/master/code-of-conduct.md)
- [JuniorDevSG - Code of Conduct](https://github.com/JuniorDevSingapore/meetups/blob/master/code-of-conduct.md)