teleren/devto huggingface dataset:
My Text-based Commandline Minecraft RPG (written in Python)
Tags: python, showdev
Published: 2022-07-17 23:22:03

I've been working on a text-based Minecraft RPG written in Python
It is currently a work in progress
The Github Repo is at https://github.com/fungamer2-2/Text-Minecraft-RPG-WIP

## About this project
You can explore, craft items, you can also find mobs. You can mine to get the materials to craft better items

## Exploring
When exploring, there is a 60% chance you will find grass, dirt, or wood. Wood is the only one of these that has a use at the moment, but I will add a use for them later on
There is also a chance that you will encounter a mob while exploring.

## Different types of mobs
Passive mobs: will not attack you, will flee whenever you attack
Neutral mobs: will only attack  if you attack them
Hostile mobs: 50% chance to immediately attack when encountered

## Day/Night Cycle
There is a day/night cycle in this game like in the actual Minecraft game. During the day, mobs will be mostly passive/neutral. The chance of finding a mob at night is greatly increased at night. Most night mobs are hostile.

##Crafting
You can craft items if you have the proper materials. Only the items which you have the components to craft will be shown. Just type in the name of the item to craft and it will be crafted, using the materials required.

##Mining
You can only mine if you have a pickaxe and it is the current took you are holding. There is also a chance you will encounter a mob while mining.

##Smelting
If you have a furnace in your inventory, you can smelt items, much like you can in Minecraft. Just select the item and a fuel source and wait.

##Conclusion
This game is still a work in progress. I would like to hear your feedback and suggestions!
Day 99: break
Published: 2022-07-17 23:03:07

Hi!
Today I took a break I wanted to advance on the node node and express course and I did for a few minutes and stopped and took a break for the rest of the day. Sunday had been a rest day lately as it should be anyway. Tomorrow will mark my 100th day a major milestone in this journey so let me save everything for tomorrow (nothing else to share anyway hahahah :) 

Signing off....
My talk at EuroPython 2022
Published: 2022-09-02 13:38:49

---
title: My talk at EuroPython 2022
published: true
date: 2022-07-17 22:31:31 UTC
tags: 
canonical_url: https://whitphx.info/posts/20220717-talk-at-euro-python-2022/
---

I presented a talk at EuroPython 2022 in Dublin.

The talk title was **“real-time browser-ready computer vision apps with Streamlit.”** It was on 14th July, and its description is linked below.[https://ep2022.europython.eu/session/real-time-browser-ready-computer-vision-apps-with-streamlit](https://ep2022.europython.eu/session/real-time-browser-ready-computer-vision-apps-with-streamlit)

Its contents were mainly based on the Medium post I wrote with a similar title, [“Developing Web-Based Real-Time Video/Audio Processing Apps Quickly with Streamlit”](https://towardsdatascience.com/developing-web-based-real-time-video-audio-processing-apps-quickly-with-streamlit-7c7bcd0bc5a8), but the talk contained live-demo, live-coding, and more storytelling introduction.

The live-stream archive that contains my talk has already published as linked below (this link is pointing to my talk time), while the edited version will be open later:

 <iframe src="https://www.youtube.com/embed/uVD6B8WLMTo?start=16118&amp;feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="EuroPython 2022 | Liffey Hall 2 | July 14" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; "></iframe> 

You can find my voice was so high-pitch and my hands moved randomly because I was so nervous, especially at the beginning… ironically, I could speck in such a high speed due to many practices I did 😂

![My picture at the talk](https://whitphx.info/static/b59a88cb81484af4b0a9d5eb55e618d9/828fb/me_talking.jpg "My picture at the talk")([@takanory](https://twitter.com/takanory) took this picture of me. Thanks.)

Regardless of that, I could successfully present all the contents as I planned and some people said it was informative nice talk which made me so glad.

It was nice that with this talk, I could (a bit) promote my OSS project that I’m dedicated to and have positive feedback.
Imitate lodash get method
Tags: javascript, programming
Published: 2022-07-17 17:05:15

---
title: Imitate lodash get method
published: true
description: 
tags: javascript, programming
//cover_image: https://direct_url_to_image.jpg
---

This afternoon I used `lodash.get` together with [`react-hook-form` to display error message in a form](https://react-hook-form.com/advanced-usage#ErrorMessages) and I got the idea I could try to implement `get` myself as some type of brain training. 

This implementation covers only use case when the path is string. Also I didnt cover  get's `defaultValue` param. 
I used the same `test` object as one used in [lodash documentation](https://lodash.com/docs/4.17.15#get).
Also this example wont return `undefined` when object's `key` is array, unlike `lodash.get`.

```js
const get = (unit, path) => {
  
  if (path === "") {
    return unit;
  }

  const pathList = path.split(".");

  return Array.isArray(unit)
         ?  get(unit[0], pathList.join("."))
         :  get(unit[pathList[0]], pathList.slice(1).join("."));
};  

var test = { a: [{ b: { c: 3 } }] };

console.log(get(test, "a.b.c"));

```
##Conclusion

This code is only for educational purpose. Edge cases are not covered here and it should not be used anywhere in production. So long.
How can I install Homebrew on MaOS?
Tags: tutorial, maco, apple
Published: 2022-07-17 22:17:03

First of all, let's understand what Homebrew is and what things he adds to our daily.

**What is Homebrew?**

> Homebrew installs the stuff you need that Apple (or your Linux system) didn’t.

Whit that we can easily install any package we are missing on our machine just using the terminal.

Let's go further and install it.

To install we only need to open `terminal` and past this line 

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

With the Homebrew installed to add new "things" you only need to run the command like this: 

```
brew install package-name
```

To know more about Homebrew visit their page [here](https://brew.sh/)
Terraform Cloud with VCS Workflow(Github)
Tags: terraform, aws, devops, cloud
Published: 2022-07-17 21:22:51

VSC integrations are a popular and, quite frankly, a useful tool that allow collaboration between many people. In this article we will learn how to add a Github integration to our Terraform Cloud.

It is assumed that you already have a Terraform Cloud account and an organization.

&nbsp;

Select your organization and click 'Setting' tab:
![Adding Github integration to Terraform Cloud pt1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr169oednfgwlogl5a7w.png)

&nbsp;

There will be a button 'Connect to version control':
![Adding Github integration to Terraform Cloud pt2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu0bj72mh1osqu5qikin.png)

&nbsp;
 
You will be presented with 3 options for your workflow. We are interested in 'Version Control Workflow':
![Adding Github integration to Terraform Cloud pt3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25lg09a9hov7q2dns5z4.png)

&nbsp;
 
I am interested in Github and that's what I will select:
![Adding Github integration to Terraform Cloud pt4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/equ50h2gqhbfi5amkaxd.png)

&nbsp;

After selecting your VCS provider you will see a popup asking you to grant permissions to Terraform Cloud to access your Github. Click 'Authorize Terraform Cloud':
![Adding Github integration to Terraform Cloud pt5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6u9yhy0l2li6gg9qjg5.png)

&nbsp;

If everything went well you will see a list of your repositories. 
![Adding Github integration to Terraform Cloud pt6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leutr7bfh7343mgq2g2y.png)

&nbsp;

I will select the repo that used for this blog series:
![Adding Github integration to Terraform Cloud pt7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwox2vxueudzpc4x5686.png)

&nbsp;

Then we will be redirected to a settings confirmation page. Important fields here are the 'Apply Method' and 'VSC Branch'. Once you have confirmed the settings click 'Update VSC settings' button at the bottom of the page:
![Adding Github integration to Terraform Cloud pt8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9r7vsz7j5kvgfy8iszw.png)

&nbsp;

After that you will a green success message text:
![Adding Github integration to Terraform Cloud pt9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfnumhwr28cnvpyay86m.png)

&nbsp;

This is it. You have now connected your Github account to Terraform Cloud! 
Thank you for reading and see you in the next article!
WPspace Review - Der preiswerte WordPress Hoster
Tags: wordpress, hosting
Published: 2022-07-18 13:18:43

---
title: WPspace Review - Der preiswerte WordPress Hoster
published: true
date: 2022-07-17 20:45:25 UTC
tags: WordPress,hosting
canonical_url: https://bloggerpilot.com/wpspace/
---

![WPspace WordPress Hosting](https://bloggerpilot.com/wp-content/uploads/2022/07/wpspace.png)

Auf das Review und den Speedtest vom WPspace WordPress-Hosting-Experten habe...

Der Original-Artikel erschien auf [WPspace Review - Der preiswerte WordPress Hoster](https://bloggerpilot.com/wpspace/).

WordPress ist eines der beliebtesten Content-Management-Systeme der Welt und wird von Millionen von Unternehmen und Privatpersonen weltweit genutzt. Die Einrichtung einer neuen WordPress-Website ist ein schneller, einfacher und effektiver Weg zu einer Online-Präsenz. WPspace ist ein führendes Unternehmen im Bereich WordPress-Hosting und bietet kostenlosen, fachkundigen Support, egal wo du dich auf deiner WordPress-Reise befindest.

WPspace ist ein Webhosting-Unternehmen. Seine Pakete und Preise sind erschwinglich. Außerdem gibt es eine 30-tägige Geld-zurück-Garantie. Außerdem bietet WPspace kostenlose SSL-Zertifikate, kostenlose Domainnamen und kostenlosen DDoS-Schutz.

WordPress Hosting Features

WordPress Hosting ist eine beliebte Website-Software. Mit ihr kannst du ganz einfach einen Blog oder eine Website erstellen. Es lässt sich mit einer Vielzahl von Themes, Plugins und Widgets integrieren. Außerdem gibt es Tausende von kostenlosen und kostenpflichtigen Themes.

WPspace ist für jeden geeignet. Von Bloggern bis hin zu Kleinunternehmern.

Zusammenfassend lässt sich sagen, dass WPspace drei verschiedene Preispakete sowie eine kostenlose Version anbietet und eine monatliche Gebühr verlangt. Die Preise reichen von 4,99 $ pro Monat bis 89,99 $ pro Monat. Der Blogbesitzer kann jeden Monat ein anderes Paket wählen oder bei der Verlängerung seines Abonnements ein anderes Paket auswählen. WPspace hat alle Funktionen, die man von einem guten Webhosting-Angebot erwarten kann. Es gibt einen 24/7-Kundenservice, einen kostenlosen Website-Builder, ein kostenloses SSL-Zertifikat, eine automatische WordPress-Installation mit nur einem Klick, 500 GB Bandbreite und vieles mehr. WPspace ist perfekt für alle, die ein hochwertiges Webhosting-Angebot benötigen.

~~~
Ubuntu ファイルマネージャーのサイドバーから Musics などを削除する
Tags: ubuntu, files
Published: 2022-07-17 20:43:06


## 問題

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

全く使わない Starred, Desktop, Music, Vidoes,

これらがファイルマネージャーこと Files アプリの貴重な
サイドバーを専有していて邪魔。

GUI 操作では引っ込められない。

## 解決策

https://askubuntu.com/a/433646

```php
Editing ~/.config/user-dirs.dirs 
and removing Pirtures/Music/Videos 
seems to remove them from the Places as well.
```
 
このファイルから削除すればいけるらしい。

開いてみる。

```php
vi ~/.config/user-dirs.dirs 

# This file is written by xdg-user-dirs-update
# If you want to change or add directories, just edit the line you're
# interested in. All local changes will be retained on the next run.
# Format is XDG_xxx_DIR="$HOME/yyy", where yyy is a shell-escaped
# homedir-relative path, or XDG_xxx_DIR="/yyy", where /yyy is an
# absolute path. No other format is supported.
# 
XDG_DESKTOP_DIR="$HOME/Desktop"
XDG_DOWNLOAD_DIR="$HOME/Downloads"
XDG_TEMPLATES_DIR="$HOME/Templates"
XDG_PUBLICSHARE_DIR="$HOME/Public"
XDG_DOCUMENTS_DIR="$HOME/Documents"
XDG_MUSIC_DIR="$HOME/Music"
XDG_PICTURES_DIR="$HOME/Pictures"
XDG_VIDEOS_DIR="$HOME/Videos"
```

~/.config/user-dirs.dirs を開く。

DESKTOP や DOCUMENT の実際の場所との関連付けのようだ？
とりあえず影響がなさそうな Music の行を消してみる。

これだけでは Files からは消えなかった

https://askubuntu.com/a/452322

このあと、~/.config/user-dirs.conf を作成し

enable=false を書き込んで再ログインする。

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

すると邪魔だった Music が消えた！やった！
Shuffle lines in .csv files
Tags: bigdata, dataengineering, csv
Published: 2022-07-17 20:31:22

A tool to automatically Shuffle lines in .csv files

![SHUFFLE CSV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4imjak8nebknpbkbz2i.png)
 

https://github.com/Wittline/csv-shuffler
Mongodb Lessons
Published: 2022-07-17 20:22:13

This week i learned about mongodb, different commands that can be used in the mongodb shell (mongosh). for example;
`show dbs` //for showing databases
`use <name_of_database>` //to switch to a specific database
`show collections` //displays collections in the database 
`db.user.insertOne({"name": Jack})` //inserts one document to user collection
`db.user.find({})` //to retrieve all documents in the user's collection
How to Build A BMI Calculator in React JS - useState Hook & Conditionals | Beginner
Tags: react, bmicalculator, reactjsbeginner, javascript
Published: 2022-07-17 20:18:31

######Build A BMI Calculator in React JS – use State Hook & Conditionals.
To make this beautiful react js bmi calculator which is totally beginner friendly.
###Download Source Code
💥Check it out [Link] (https://ziontutorial.com/how-to-build-a-bmi-calculator-in-react-js-usestate-hook-conditionals/)
![How to Build A BMI Calculator in React JS - useState Hook & Conditionals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yxpn4gu0ke0ax654pfq.png) 
To create this Beautiful BMI calculator using ract js . First, you need to create and changes in these three files which are App.js , index.js, and one index.js File. After creating these files just paste the following codes into your file. You can also download the source code files of this BMI calculator from this download [Link](https://ziontutorial.com/how-to-build-a-bmi-calculator-in-react-js-usestate-hook-conditionals/).

Lets start with CSS of this application this make our application looks beautiful just follow the below code to make this form stylish   

#Index.css 
```
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.container {
  box-shadow: 0px 0px 12px #ccc;
  border-radius: 8px;
  padding: 3rem;
}
input {
  width: 100%;
  font-size: 1.2rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 8px;
}
.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}
.center {
  text-align: center;
  margin: 24px 0;
}
p {
  margin: 10px 0;
}
.img-container {
  text-align: center;
}
.img-container img {
  height: 200px;
}

```
####App.js ( Magical part | logic of this application )
For App.js part just go to this site [Link](https://ziontutorial.com/how-to-build-a-bmi-calculator-in-react-js-usestate-hook-conditionals/)  and just make this form or bmi calculator working by just writing its magical part
Share your ideas that never made it to production
Tags: webdev, css, javascript, discuss
Published: 2022-07-17 19:57:41

Got any ideas buried in your git history that never made it to production?

Give it a chance in the spotlight; Throw it in a codepen or just talk about it in the comments below!

---

Here's my contribution:

> Prior to the launch of augmented-ui v1.0.0 in 2019, early builds of the website's introductory animation also featured this 3D CSS animation behind it. The background animation was removed for performance reasons but still exists in the commit history. 💜

> Hopefully [this codepen](https://codepen.io/propjockey/full/VwXPGMP) helps give life to the idea that couldn't make it to production ~

> [![Gif Capture of pre v1 augmented-ui intro animation featuring a 3D CSS animation in the background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vd5lp7h0ldcng4a6v7f.gif)](https://codepen.io/propjockey/full/VwXPGMP)

// [Jane Ori](https://twitter.com/jane0ri)
Getting Started with Data Visualization in React using Chart.js
Published: 2022-07-17 19:49:36

I recently developed a CRUD application with React, and one of the unique features I wanted to add was a way to visualize the data used in the application as a line chart and bar chart. In my research, I found that there are several libraries specifically designed for React to accomplish this instead of directly using [D3.js ](https://d3js.org/). Some of the libraries I considered include: 

- [Victory](https://github.com/FormidableLabs/victory)
- [REAVIZ](https://github.com/reaviz/reaviz)
- [react-vis](https://github.com/uber/react-vis)
- [react-chartjs-2](https://react-chartjs-2.js.org/)

After some experimentation, I found that react-chartjs-2 was the easiest for me to grasp. react-chartjs-2 is a set of React components for [Chart.js](https://www.chartjs.org/).

I found these two videos incredibly helpful for getting started with Chart.js:

{% embed https://www.youtube.com/watch?v=RF57yDglDfE %}

{% embed https://www.youtube.com/watch?v=Ge6PQkpa6pA %}

In my case, I needed to use `fetch` to access the data from a JSON file, and pass it into the `data` property. I used this video as a guide: 

{% embed https://www.youtube.com/watch?v=qZ17lr6Vn94 %}

And I used these two component examples to model my display for the data:

- [Line Chart](https://react-chartjs-2.js.org/examples/line-chart)
- [Bar Chart](https://react-chartjs-2.js.org/examples/vertical-bar-chart)
styled-components
Tags: react, css, javascript, beginners
Published: 2022-07-17 19:19:13

A couple nights ago, I was working on a project that I'm building in React.

Making sure I'm referencing class names correctly and importing CSS files in the right places was something I've done before. This time, none of my styles were applying and I'd done all the troubleshooting I could. So I hit up Google and look up "styling in React". Very broad search terms, I know, but it helped me find _styled-components_. 

**What is `styled-components`?**

In short, styled-components allow you to write CSS in JS files. 

I'd never used styled-components before, and I only remembered hearing about it very briefly.

First, I had to install the styled-components package. To do so I ran: 

`npm i styled-components`

Then, I got to work on my `Footer.js` file. 

The `Footer` component came out like this: 

```
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const SiteFooter = styled.footer `
  position: fixed;
  background-color: #8FBB99;
  bottom: 0;
  width: 100%;
`

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: "white",
}


function Footer() {
  return (
    <SiteFooter>
      <Link to="/contact" style={linkStyle}>
        Contact
      </Link>
    </SiteFooter>
  )
}

export default Footer;
```

And voila! We have a footer 🎉


![Very basic footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go2obh6hys8v8s40yl6e.png)

By importing `styled` from the `styled-components` package, I am able to create a React component that will render the selected HTML element.

Let's say I wanted to make a `div` that is a red square. Styled-components allows me to reference the red square as a component that I might name ... `RedSquare`.

```
const RedSquare = styled.div`
    width: 100px;
    height: 100px;
    background-color: red;
`
```

In `SiteFooter`, you'll notice that the CSS is written inside of back ticks - these are _tagged template literals_. An easy way to think of tagged template literals is like a function. 

**Benefits of using styled-components**

A footer was a great reason for using `styled-components` because it requires minimal styling.

Since I've handled all the styling in the component itself, I don't have to search through files for the class-name and make changes. Styling, markup, and logic are all in one file and makes for a smooth developer experience. 

This has been quite the unlock in my deep dive into React! 

_What are your favorite things about React?_
How to get TypeWriter Effect In ReactJS
Published: 2022-09-09 06:05:20

---
title: How to get TypeWriter Effect In ReactJS
published: true
date: 2022-07-17 19:17:06 UTC
tags: 
canonical_url: https://rayanabid.hashnode.dev/how-to-get-typewriter-effect-in-reactjs
---

Hey everyone. Hope you all are well. Recently when I was working on my portfolio site which you can checkout at rayanabid.com, I wanted to get a typewriter effect that I saw on most sites. So I thought I might as well share it as I found this method very easy and useful to implement.

Also on a side note, If you speak urdu/hindi then you can wacth this instead if you prefer video format [youtube](https://www.youtube.com/watch?v=2N-PhKF-uVk&t=6s&ab_channel=RayanAbid).

So this is the effect we will try to achieve in this article.

![ezgif-2-084d5d5721.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1658084660728/gk7WDRuW5.gif)

So to get this effect. You only need to be sure of two things.

1. You need to have a react project setup.
2. You need to install this [package](https://www.npmjs.com/package/typewriter-effect)

Open this [link](https://www.npmjs.com/package/typewriter-effect) and paste this command in your terminal

`npm i typewriter-effect`

After that this package will be installed on your react project.

Now we just have to import this component in our JSX file. like this

`import Typewriter from 'typewriter-effect';`

Once you have imported it you can use it in your return statement.

```
<Typewriter
  options={{
    strings: ['Hello', 'World'],
    autoStart: true,
    loop: true,
  }}
/>

```

You can replace the strings array with any text you want.

and viola your typewriter effect is ready.

Now you can add this to your projects as well.

Please do share your thoughts as well. and checkout the repo on [github](https://github.com/RayanAbid/yt-react-typewriter)

Bye for now.