teleren/devto huggingface dataset:
5 cool Perl/Raku or Programming links
Tags: perl, raku, mysql, go
Published: 2022-02-16 10:43:00

#### 1. [Nice testimonial about Perl](https://youtu.be/FQXjLG0DjPo) 

#### 2. [Go perf from version 1.2 to 1.18](https://benhoyt.com/writings/go-version-performance/)

#### 3. [An ode to ruby](https://blog.yboulkaid.com/2022/01/10/ode-to-ruby.html)

#### 4. [RDBMS genealogy](https://hpi.de/fileadmin/user_upload/fachgebiete/naumann/projekte/RDBMSGenealogy/RDBMS_Genealogy_V6.pdf)

#### 5. [Pragmatic Perl interviews](http://pragmaticperl.com/interviews-book/pragmaticperl-interviews-a4.pdf) 

I wish you a pleasant reading! :grin:

### BONUS :smile:
#### 6. [Perl cheat sheet](https://www.pcwdld.com/perl-cheat-sheet)
Trying Streamyard for various things
Tags: streaming, production
Published: 2022-02-16 10:35:40

Up until now, I've been doing the following

* Streaming: zoom -> OBS -> Youtube
* Podcast: zoom -> FCP -> audio/video -> podcast host/Youtube

Having 2 PyLadies collab events hosted by PyLadies Paris and PyLadies Munich on separate occasions via their [Streamyard](https://streamyard.com/) accounts, Mick and I decided to sign up on this platform.

After briefly playing around the features (limited but very useful and already miles ahead of doing everything on OBS), we saw we can broadcast a video, so I uploaded a small video and it bounced back saying that it allows max 15 Mbps and only allows mp4 files.

Found a solution, but first had to check something so I don't make a mistake:

![get right bit rate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulifg13d847ng3hzqun0.png)
 
Next, I used [Handbrake](https://handbrake.fr/) (it's free) and convert my **.mov file** (output from [Final Cut Pro](https://www.apple.com/final-cut-pro/), which I use to cut all my videos) to an **.mp4 file**. 

Before you do anything on Handbrake, click on **Video** tab, and click on **Average Bitrate (kbps), and replace default `6000` with `14000`.

![Video Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgxwwlq60xnyralq5he9.png)

Go back to **Summary** tab.

![Summary Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dygqql51wt1no3c0bnfu.png)

I opted for the preset **Fast 1080p30** and the format output to **MP4**.

Choose your destination to save the rendered file to at the bottom of the dialog.
 
That's is, hit that green play button up top to get the video converted.

🚨 Now you noticed why I didn't use `15000` instead of `14000` for my bit rate in Handbrake.

I did try that and when I uploaded to Streamyard, it still complained I was over. 

The following screenshots is my converted video with 14 Mbps bit rate.

Opened Quick Time on my Mac.

![Quick Time - opening Movie inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc27axbgfxrjmben3peg.png)
 
Clicked on **Show Movie Inspector** from the menu.
 
![Quick Time - Movie inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri819ww0uavyjfawmg80.png)
 
Click on **Video Details** and it will drop down more information. 

![Quick Time - Movie inspector - Video Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v56v3voxlg6f7gthwov6.png)

As you can see it's a bit over `14000`, so that's why my video with `15000` bit rate failed to upload on Streamyard.

So with Streamyard, I hope to use this for

* Streaming on PyLadies Dublin
* Suggest to use it for the new podcast recordings with my co-producer
* Record tutorials for Coding Grace
* Small workshops for Coding Grace

We will see what other tricks we can come up with using Streamyard. 🥰
Retrieve the current price for an crypto currency
Tags: go, programming
Published: 2022-03-10 07:11:27

---
title: Retrieve the current price for an crypto currency
published: true
date: 2022-02-16 10:11:00 UTC
tags: Go, programming
canonical_url: https://defer.cc/b/coinbase-api/
---

You can use this to retrieve the current price for an crypto currency. I used this in another project and thought it will make sense to publish this as an own package.

## How to use it [#](#how-to-use-it)

```
import "https://github.com/mnlwldr/coinbase"
```

## Usage [#](#usage)

```
response, err := Get("SHIB-EUR")
fmt.Printf("%.7f\n", response.Amount)
```

## Output [#](#output)

```
0.0000253
```

[![Go Reference](https://pkg.go.dev/badge/github.com/mnlwldr/coinbase.svg)](https://pkg.go.dev/github.com/mnlwldr/coinbase)
Create Cool React Image Gallery
Tags: javascript, webdev, tutorial, react
Published: 2022-02-16 10:08:58

Image gallery is one of the most important parts of any website. Today I want to show you how to create a responsive image gallery with React.

**Step 1**
Firstly we need some images to display in our gallery. For this we will use [Lorem.space](https://lorem.space/) website to get random placeholder images. You can choose any category you want but I will go with shoes 👟.
We will create an array that will contain URLs of our images. For this tutorial I will use three images but of course you can have more images if you want.

```javascript
const images = [
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=8B7BCDC2"
  },
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=500B67FB"
  },
  {
    url: "https://api.lorem.space/image/shoes?w=400&h=400&hash=4F32C4CF"
  }
];
```
**Step 2**
After that we will create a functional React component for our app:

```javascript
export default function App() {
  return (
    <div
      style={{
        flexDirection: "row",
        display: "flex",
        justifyContent: "center",
        alignContent: "center"
      }}
    >
    </div>
  );
}
```
We will use React style prop to center our div.
**Step 4**
In our gallery we want to have one main image and two secondary images that will have less opacity. In order to do that we need to create a component for our image:

```javascript
const Image = ({ src, setMainImg, mainImg }) => {
  const [opacity, setOpacity] = useState(0.6);
  const [srcUrl, setSrcUrl] = useState(src);

  return (
    <img
      src={srcUrl}
      alt="new"
      height="250"
      width="250"
      style={{ opacity: opacity }}
      onMouseOver={() => {
        setOpacity(0.8);
      }}
      onMouseOut={() => {
        setOpacity(0.6);
      }}
      onClick={() => {
        setMainImg(srcUrl);
        setSrcUrl(mainImg);
      }}
    />
  );
};
```
The Image component will receive 3 props: `src` - URL of the image, `setMainImg` - hook to manage app state and `mainImg` - URL of the main image. We want to change the main image on click. To do that we use `onClick` prop. And also we want to change the opacity of the secondary image on hover. We can do this with the use of `onMouseOver` and `onMouseOut` props.
Also in our App component we will specify the initial value of the main image URL and the state management function with the `useState` React hook:

```javascript
const [mainImg, setMainImg] = useState(images[0].url);
```
That's it! You should be able to see something like this:
![React Image Gallery Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv8pe8kdk36xad057xlj.png)

You can view a live demo of the image gallery on my [CodeSandBox](https://codesandbox.io/s/react-image-gallery-pji1e?file=/src/App.js:358-412)

Thank you for reading and happy coding!😊!
Setting up for connect fetching local API or http React Native IOS / MacOS
Published: 2022-02-16 10:00:42

Some of you maybe got confused, why the API doesn’t work and get error when try to connect to local API or maybe http instead https.

It because by default React Native cannot connect to API with http request, it's should be https

To solve this problem, you need a bit setup on plist file

first go to folder 
**ios > {your file name} > info.plist**

for example
**ios > FashionApp > info.plist**

after that you copy this file

```
<key>NSAppTransportSecurity</key>
<dict>
     <key>NSExceptionDomains</key>
     <dict>
         <key>NSExceptionAllowsInsecureHTTPLoads</key>
         <true/>
	 <key>localhost</key>
	 <dict>
	     <key>NSExceptionAllowsInsecureHTTPLoads</key>
	     <true/>
	 </dict>
     </dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
</dict>
```

Block this section on plist file, and **delete** it. After that, you **paste** from your copying before

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deqqw225cj2ecin7deir.png)

Success, now you can connect with http or local host without get any errors.
If you have any question, feel free to ask me on
email : charismakurniawan@gmail.com
instagram : charismaaji
How often do you build 'essential but non-core' features?
Tags: saas, ux, design, discuss
Published: 2022-02-16 09:36:48

How often do you build 'essential but non-core' features for your #SaaS product?

For e.g. features like login, user profile, dashboard etc. are essential for user flow but not the 'core' USP of your product.

Would you use any plugins / pre-packaged solutions to handle these features?


![Essential and Core features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob9r6mrvf3kq2ocpq7zd.jpg)
How to Develop Android App using Kotlin
Published: 2022-02-16 09:35:48

The Android operating system is used by over a billion devices worldwide, and the number of Android apps being created each year is growing explosively. As native android apps are developed using the Kotlin framework the importance of Kotlin rises exponentially for android app development.  

Kotlin language has been designed to make it easier for the developer to build great Android apps that are easy to maintain and scale. Developing an android app with kotlin is a little complicated task for beginners or first-time app developers.  

Now to develop an android app in kotlin it is important to hire dedicated kotlin developers that have the relevant experience and necessary skills required. Now how do you hire one?  

**WebClues Infotech** has a pool of talented kotlin developers ready to be hired. Being a web & mobile app development agency they offer whatever is best for their clients be it the service or the developer.  

Kotlin has changed the way Android app development was done during the last few years. Well, this is where their expert Kotlin developers come to your benefit with their stand apart skills and solid exposure across multiple Kotlin projects that they finished every since Kotlin was launched.  

With a flexible working model a company can choose to hire developers on hourly, part-time, and full-time basis depending on the project requirements. They help their clients with a highly flexible hiring model and fully transparent pricing leaving no scope of dissatisfaction or communication gap. They offer one of the most competitive pricing to hire Kotlin developers in India. 

I hope the post helps you in developing an android app using kotlin with the help of expert developers at WebClues Infotech.
npx create-react-app error
Tags: react
Published: 2022-02-16 09:30:39

Today, I want make a react app with react cli:

```bash
npx create-react-app react-dapp
```

Suddenly, this error comes:

```bash
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support the global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/
```

 

**After some googling, several solutions appeared.**

- ***Solution 00***
    - If you want to reinstall the create-react-app globally
        - using `latest` command
            
            ```bash
            npm install -g create-react-app@latest
            ```
            
        
        OR, if you already know which package version you’ll need to install
        
        - for example, create-react-app version `5.0.0`
            
            ```bash
            npm install -g create-react-app@5.0.0
            ```
            
    - If you want to reinstall the create-react-app on the designated folder,
        
        go to the folder, open terminal, type:
        
        ```bash
        npx create-react-app@latest {project name} --use-npm
        ```
        

***In most cases, the above solution didn't always straight working.*** 

***Try some of the options below:***

- ***Solution 1***
    
    try to uninstall and reinstall it first.
    
    ```
    npm uninstall -g create-react-app
    ```
    
- ***Solution 2***
    
    If you run this in an older create-react-app version, try this to clear the npx cache:
    
    ```bash
    npx clear-npx-cache
    ```
    
- ***Solution 3***
    
    if you got the error:
    
    ```bash
    sh: 1: node: Permission denied
    ```
    
    on the root folder, you can type:
    
    ```bash
    npm config set user 0
    npm config set unsafe-perm true
    ```
    
- Lastly, if you have broken npm/ yarn packages, go to the main folder and try to remove node_modules.
    
    For me, as I’m using Linux I just pressed `ctrl + alt + t` and typed:
    
    ```bash
    sudo rm -rf node_modules
    ```
    
    After that run this command if you are using yarn
    
    ```bash
    yarn install
    
    ```
    
    If you are using npm run this command
    
    ```bash
    npm install
    ```
    
    And check the solutions above, try from up to bottom.
My go-to docker-compose setup for Python development
Tags: python, docker, beginners
Published: 2022-02-16 09:29:50

I've been using docker-compose instead of venv module for Python development for a while. Here is my go-to setup, please feel free to give me some suggestions and comments!

---
#### Folder Structure

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5izvw8jvs6haifkkilub.png)
#### Dockefile
```dockerfile
# base image
FROM python:3.10

# install packages
RUN apt-get update \
    && apt-get upgrade -y
RUN apt-get install -y \
    vim \
    curl \
    pandoc \
    texlive-xetex \
    texlive-fonts-recommended \
    texlive-plain-generic

# create user and home directory
RUN useradd -m -d /home/devuser -s /bin/bash devuser
USER devuser

ENV PATH=/home/devuser/.local/bin:$PATH

# upgrade pip and install python packages
RUN /usr/local/bin/python -m pip install --upgrade pip
COPY requirements.txt .
RUN pip3 install --no-cache-dir -r requirements.txt
```
#### docker-compose.yml
```yaml
version: '3.8'
services:
  jupyterlab:
    container_name: jupyterlab
    build: .
    ports:
      # for jupyter lab
      - 8888:8888
    volumes:
      - ./src:/home/devuser/src
    working_dir: /home/devuser/src
    command: jupyter lab --port=8888 --ip=0.0.0.0
```
And then just `docker-compose up -d --build`, you'll have your docker container up and running!
To get the url or token for jupyter lab, simply run `docker logs jupyterlab`

This is how I like to setup my Python environment for data processing-related project.
Soft skills for the modern world
Tags: engineering, systemsthinking, datascience, softskills
Published: 2022-08-17 09:09:36

---
title: Soft skills for the modern world
published: true
date: 2022-02-16 09:28:27 UTC
tags: engineering,systemsthinking,datascience,softskills
canonical_url: 
---

For data scientists and engineers, soft skills for the modern world are not the old [Trivium](https://www.oxfordreference.com/view/10.1093/oi/authority.20110803105813319) — rhetoric, logic, and grammar. My view on the set of skills that allow you to navigate complexity in the modern world, common for engineers, architects and data scientists:

- Systems Engineering (Thinking) — the ability to identify and select own system of interest, the operational environment, emergent properties, processes and lifecycle. See INCOSE material and ISO 42010.
- The ability to identify domains, stakeholders, concerns and their needs/requirements. See INCOSE material, IEEE 15288:2015 and NIST standard for Cyber-Physical Systems.
- The ability to formulate a hypothesis with supported measurements (see “Feynman on Scientific Method”)
- Stakeholder management: To work through conflicting goals and requirements — Theory of Constraint (Thinking Tools), see a lot of material in the TOC community by E.Goldratt, E.Schragenheim and many others. For a short introduction, see Clark Ching “Bottleneck Rules”.
- Conflict resolution technical — i.e. metal shall be soft and hard. See TRIZ with variations — Triz+, BioTRIZ.

The above requires the base ability to work productively within a given time — GTD/Superfocus/Pomodoro, and work with long text — Zettelkasten, which leads to identifying and building taxonomy and ontology of own concepts.

When focused on old Trivium, you can’t build complex systems or organisations (a system of systems), and you can’t make a good decision based on well-sounded arguments, to quote a conversation with one of my friends.

- Friend: “Agile/DevOps is a method of delivering things faster/better/cheaper. Would you like it?
- Me: Of course, yes.
- Friend: And I didn’t say anything meaningful until now.

Building complex and fruitful systems require precise communication and shared goals. Let’s focus on building complex, valuable, ethical systems.
Spring Boot(v.2.3.1 and above) + Elasticsearch
Published: 2022-02-16 09:28:24

If you are like me who have spent endless hours trying to connect ElasticSearch with Spring Boot with no luck yet, this is for you!

There are probably hundreds of tutorials out there but none of them explicitly describe on how to configure a Spring Boot (versions 2.3.1 and above) with Elasticsearch.

Both, Elasticsearch and Spring Boot have been constantly rolling out newer versions, better than the previous ones at the same time making it painstakingly difficult to manage compatibility issues.

Most of the tutorials and examples on Stackoverflow and the Internet are based upon an older version of SB wherein it is necessary to define a RestHighLevelClient

Even the official documentation of Elastic recommends using a RestHighLevelClient with Spring.

All of the above makes sense with a older version of Spring Boot or if you are using a Spring web application with a separate configuration for Spring Data Elastic.

Since v2.3.1, in order to configure Elasticsearch with your SpringBoot application, all you have to do is add the following dependency-

```
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>

```
That’s it. Spring Boot provides a default ElasticsearchRestTemplate. ElasticsearchRestTemplate is part of release 4 of Spring Data ES which provides out of box support for CRUD operations on ES.

Example to add documents to an index named products —

```

IndexQuery indexQuery = new IndexQueryBuilder()
        .withId(productDocument.getProductID().toString())
        .withObject(productDocument)
        .build();
return elasticsearchRestTemplate.index(indexQuery, IndexCoordinates.of("products"));
```
That’s all!

There’s no need of creating another RestHighLevelClient or managing any other version specific dependencies to make this work.

More information on ElasticsearchRestTemplate can be found on the Spring official ES doc [here](https://docs.spring.io/spring-data/elasticsearch/docs/current/api/org/springframework/data/elasticsearch/core/ElasticsearchRestTemplate.html).

Hope this helps!
Connecting MySQL Server in Windows Machine From WSL
Tags: database, linux, python, beginners
Published: 2022-02-16 09:27:39

## Connecting MySQL Server in Windows Machine from WSL
Originally published at [dataqoil.com.](https://dataqoil.com)

What does this mean? In simple sentence, how do we connect to a MySQL server which is hosted in Windows from WSL. It might sound easy but let me tell you, IT IS NOT!!!!

I was trying to connect (from WSL) to my local MySQL which was installed on Windows Machine while using Airflow because my Airflow was installed in WSL. But it took me long to figure out the best way to do it. I hope it helps you too.

### MySQL Client in WSL
First install MySQL client in WSL using below command which can be seen once we type `mysql` in WSL terminal.

```shell
sudo apt install mysql-client-core-8.0     # version 8.0.27-0ubuntu0.20.04.1, or
sudo apt install mariadb-client-core-10.3  # version 1:10.3.31-0ubuntu0.20.04.1
```

For me, I did first one.

### Find IPv4 Address of WSL
* Go to Settings -> Network and Internet -> Status -> View Hardware and connection properties. **Look for the name vEthernet (WSL)**. It will usually be on the bottom.
* My looks like below. But I've shaded the addresses.

![](https://q-viper.github.io/assets/wsl_mysql/ipv4_address.png)

![](https://q-viper.github.io/assets/wsl_mysql/ipv4_wsl.png)



Now try to connect to MySQL from WSL using below command:

```shell
mysql -u wsl_root -p -h 172.24.xxx.xxx
```

Please remember that in above command xxx is just a placeholder. Also, `root` is just a username that we tried to login with. **We will get an error right now with above command and we will fix it.**

### Making New User in MySQL to make a Call from WSL

```sql
CREATE USER 'wsl_root'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'wsl_root'@'localhost' WITH GRANT OPTION;
CREATE USER 'wsl_root'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'wsl_root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;
```

In above query, 
* `wsl_root` is a name of user that we will use from WSL. `localhost` is a address where MySQL is and `password` is password. :)
* We have granted all privileges to that user and it will be just another admin.

### From WSL
Now running the command `mysql -u wsl_root -p -h 172.24.xxx.xxx` and giving password after it asked, we could connect to the MySQL server.

## References
* https://stackoverflow.com/questions/1559955/host-xxx-xx-xxx-xxx-is-not-allowed-to-connect-to-this-mysql-server