teleren/devto huggingface dataset:
Steam Proton Is Great
Tags: watercooler, games, linux
Published: 2020-02-08 15:02:15

My (awesome) fiancé picked me up a copy of [Disco Elysium](https://zaumstudio.com/) for my birthday recently (she's *really awesome*).

I've always kept a [Windows 10](https://www.microsoft.com/en-us/windows/get-windows-10) installation around specifically for games.  Cross platform support has increased dramatically since I started using Linux, but there have always been a handful of (usually AAA) titles that I want to play which require Windows.  I know, I know, I'm a terrible Linux zealot.

I've used [Wine](https://www.winehq.org/) before, as well as the wrapper [PlayOnLinux](https://www.playonlinux.com/en/), but had generally experienced that as an activity unto itself.  Some games did work, but there was a lot of configuration and tweaking involved.  While there's a part of me that enjoys that process for the sake of it, there's an even bigger part of me that just wants to play my games.  It gets old.

Steam recently released [Proton](https://www.protondb.com/).  Proton is also a wrapper around Wine, but (apparently) there's a lot more engineering involved here too.  I had initially sort of written it off as "just another Wine tool" but now having used it, I'm completely sold.

Y'all, it works *perfectly*.

I was originally disappointed when I enabled the Proton option on the Linux client because most of my games weren't showing up.  They have a curated set of games that Valve has specifically given a seal of approval.

However, the tool *does* run on anything you've got.  You just need to specifically opt in:

![settings screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5hps8b6dpjwd7uecg734.png)

With that checked, you can attempt to run even non-Valve-ordained titles through Proton.

Disco Elysium worked fine out of the box with the default audio and graphics settings.  The only problem is that it would crash every 45-ish minutes.  The fix was adding an option to the launch configuration:

![launch options](https://dev-to-uploads.s3.amazonaws.com/i/1f1b0y4qn4ixi1eeyqvj.png)

Esync is a [Proton tool](https://www.protondb.com/help/improving-performance) that attempts to reduce the CPU overhead of running games in Wine, but apparently it doesn't play nice with this game.  I haven't had a single crash since, and do not experience performance problems.  I can play this brand new Windows-exclusive game exactly as intended by the developer without having to leave Linux, ever, and my configuration phase consisted of a single web search and a single config option to set.

Welcome to the future, I guess!

Also, Disco Elysium is fantastic.  It's even better than I thought it would be.  If you're into role-playing games and looking for a completely fresh take on the genre, look no further.  It's like a pen-and-paper RPG that takes place inside your wacky messed-up character's head - combat is replaced by dialogue, and it's hilarious, philosophical, depressing and beautiful all at once.  Cannot recommend enough.

*Photo by Raphaël Biscaldi on Unsplash*
You gotta try the react-redux hooks!!
Tags: react, javascript, redux
Published: 2020-02-08 15:00:22


Readers, if you're using Redux in a React project, you have to try these react-redux hooks. You will love them!

Look at the old way:

```jsx
const UserComponent = (props) => {
  return (
    <div>
      {props.profile.name}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    profile: state.userReducer.profile,
    auth: state.authReducer.auth
  }
}

export default connect(mapStateToProps)(UserComponent);

```

And the hooks way:
```jsx
import { useSelector } from 'react-redux';

const UserComponent = (props) => {
  const profile = useSelector(state => state.userReducer.profile);
  const auth = useSelector(state => state.authReducer.auth);
  
  return (
    <div>
      {props.profile.name}
    </div>
  )
}

export default UserComponent;

```

## The same goes for dispatching an action. 

Before hooks:
```jsx
const UserComponent = (props) => {
  const login = () => {
    props.login();
  }

  return (
    <div>
      {props.profile.name}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    profile: state.userReducer.profile,
    auth: state.authReducer.auth
  }
}

function mapDispatchToProps(dispatch) {
  return {
    login: () => dispatch(userActions.login),
    logout: () => dispatch(userActions.logout),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(UserComponent);
```

After:
```jsx
import { useSelector, useDispatch } from 'react-redux';
import userActions from './actions';

const UserComponent = (props) => {
  const profile = useSelector(state => state.userReducer.profile);
  const auth = useSelector(state => state.authReducer.auth);
  const dispatch = useDispatch();
  
  const login = () => {
    dispatch(userActions.login);
  }

  return (
    <div>
      {props.profile.name}
    </div>
  )
}

export default UserComponent;

```

You HAVE to try these hooks! That's all. Enjoy your weekend 😀😀
Icon for bookmark, save...
Tags: discuss, design
Published: 2020-02-08 14:20:50

Many sites have functionality for saving links or articles. You can bookmark tweets, save instagram photos, and of course save articles on DEV to read them later.

![Save disk](https://dev-to-uploads.s3.amazonaws.com/i/o9heo1bus21ge5vufatw.png)

Couple days ago we've been debating internally about symbol for "SAVE" action on DEV, wondering how many people nowadays actually know what the icon above means. Do you know what it is? Is it too meta or is it actually perfectly on brand? And the most importantly: do you feel old now 👴😆?
Intro to SwayDB
Tags: scala, memory, persistent, storage
Published: 2020-02-08 13:57:21

---
title: Intro to SwayDB
published: true
description: A description of the post
tags: scala, memory, persistent, storage
---

[SwayDB](https://swaydb.simer.au) is an embeddable persistent and in-memory key-value store/database.

Here I will try to demonstrate on how to create a `Map` in Scala and play with some basic APIs to do simple CRUD operations.

# Creating a Map
You can ignore `Nothing` and `Bag.Less` for now which will explained in future posts.
```scala
import swaydb._ //swaydb's APIs
import swaydb.serializers.Default._ //default serialisers

val map = memory.Map[Int, String, Nothing, Bag.Less]().get //create a memory map

```
Similarly a persistent `Map` can be created by replacing `memory.Map` with `persistent.Map` and providing a folder name. 

```scala
val map = persistent.Map[Int, String, Nothing, Bag.Less](dir = "target/myMap").get
```

# Basic Put & Get

```scala

map.put(key = 1, value = "one")
map.get(key = 1) //returns Some("one")

```

## Expiring & Updating data 

```scala
//put and expire after 1 hour
map.put(key = 2, value = "two", expireAfter = 1.hour) 
//updates value but leave the expiration unchanged.
map.update(key = 2, value = "two updated")
//returns expiration deadline.
map.expiration(key = 2) 
```

## Remove/Deleting data 

Batch removes both keys. 

```scala
map.remove(keys = Seq(1, 2))
//return true - Map is now empty.
map.isEmpty 
```

[Run on Scastie](https://scastie.scala-lang.org/simerplaha/eXfalgt2RNmBG3cXxe4uKQ/3).

Done!
Learn nodejs using grandjs framework crash course
Tags: node, webdev, javascript, grandjs
Published: 2020-02-08 13:51:13

---
title: Learn nodejs using grandjs framework crash course
published: true
description: 
tags: nodejs, web development, javascript, grandjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pxfn00w8lpex1i3438qf.png
---

Hi All,

It's Grandjs again, now you can learn grandjs fundamentals and basics for building amazing, scalable, flexible web applications using nodejs.

Here is the first grandjs course on Youtube, hopefully, enjoy!


{% youtube Y3bCFqdeq3k%}

Whatch on youtube:
https://youtu.be/Y3bCFqdeq3k
[Tutorial] Instalando, configurando e inicializando o Git no Linux
Tags: git, linux, braziliandevs, github
Published: 2020-02-08 13:50:03

Para instalar o Git no Linux, digite no terminal:

```
$ sudo apt install git
```

- o símbolo **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- o **sudo** é o comando que dá permissões de super usuário temporariamente; assim é possível fazer a instalação de programas.

- o **apt** do inglês, *Advanced Package Tool*, em português, Ferramenta de Empacotamento Avançada; é a ferramenta que nos ajuda na instalação, atualização e desinstalação de programas, entre outras funções.

- o **install** é o comando de instalar, indicando ao apt o que fazer.

Verifique se a instalação foi feita corretamente digitando:

```
$ git --version
```

Você receberá o retorno da versão instalada.

Antes de começar a usá-lo é preciso fazer as configurações iniciais. Assim,

```
$ git config --global user.name seu_nome_aqui
```

Insira seu nome no local marcado; *seu_nome_aqui*.

Em seguida:

```
$ git config --global user.email seu@email.com
```

Insira seu email no local marcado; *seu@email.com*.

Configurando o editor padrão:

```
$ git config --global core.editor nano
```

No meu caso, estou usando o **nano**.

Para verificar as suas configurações:

```
$ git config --list
```

Caso queira que as configurações sejam feitas apenas no diretório (não global) indicado, basta retirar dos comandos a flag **--global**. Assim:

```
$ git config user.name seu_nome_aqui
$ git config user.email seu@email.com
$ git config core.editor nano
```

Para inicializar o git no diretório desejado (caso ainda não o tenha feito), vá até o local onde você deseja fazer o controle de versionamento.

```
$ cd /home/seu_usuário/seu_repositório
```

- o comando **cd** serve para mudar de diretório/pasta; em seguida digite o caminho até a pasta.

e digite

```
$ git init
```

A partir de agora, os arquivos serão rastreados pelo **Git**.
Do you do coding challenges like adventOfCode?
Tags: discuss
Published: 2020-02-08 13:36:21

There are various coding challenges, the most popular one around here is for sure [#adventofcode](https://dev.to/t/adventofcode).

**Do you do other coding challenges / solve training problems besides that?**

For example a newsletter like [DailyCodingProblem](https://dailycodingproblem.com).
Daily Developer Jokes - Saturday, Feb 8, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-08 13:00:18

---
title: "Daily Developer Jokes - Saturday, Feb 8, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Feb%208%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125999cc4b1.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: What are clouds made of?

___A___: Mostly linux servers.
 -->
Dependency cycle detected in React component index file
Tags: help, react, javascript
Published: 2020-02-08 12:56:33

Hi all. Wondering whether someone could help me understand and resolve a dependency cycle in my React project.

I decided to use an index.js file to handle my component exports. The file structure of my components folder looks ike this:

components
├── ComponentA
│   └── ComponentA.jsx
├── ComponentB
│   └── ComponentB.jsx
└── index.js


Here are the files involved in the dependency cycle:

```javascript
// index.js
import ComponentA from "./ComponentA/ComponentA"; // <-- Eslint: 'Dependency cycle detected.eslint(import/no-cycle)'
import ComponentB from "./ComponentB/ComponentB";

export { ComponentA, ComponentB };

```

```javascript
// ComponentA.jsx
import { ComponentB } from "../index";
// ... rest of component ...
export default ComponentA;

```

In 'index.js', eslint is detecting a dependency cycle for ComponentA. I've tried to work out why this is and how to fix it but no luck so far. I know it must be something to do with ComponentA importing ComponentB, and then them both being imported and exported in index.js.

The app still runs fine but I don't want to ignore this linting issue. I would be really grateful for any help in understanding and fixing this.

Thanks in advance

Daniel
I want to add delay to my menu when pictures are changing. How is it possible?
Published: 2020-02-08 12:51:52

{% stackoverflow 60126849 %}

  // menu toggler clikc event
  $(".menu-toggler").click(function() {
    $(this).toggleClass("menu-toggler-close");
    $(".nav").fadeToggle();
  });
  $(".nav").click(function() {
    $(".menu-toggler").removeClass("menu-toggler-close");
    $(".nav").fadeOut();
  });
  $(".nav > ul").click(function(e) {
    e.stopPropagation();
  });

  $(".nav > ul > li > a").hover(
    function() {
      var dataIndex = $(this).data("index");

      $(".nav").css(
        "background",
        "url('images/nav" + dataIndex + ".webp') center center / cover"
      );
    },
    function() {
      $(".nav").css("background", "rgba(0, 0, 0, 0.8)");
    },
jQuery
Published: 2020-02-08 12:51:16

  // menu toggler clikc event
  $(".menu-toggler").click(function() {
    $(this).toggleClass("menu-toggler-close");
    $(".nav").fadeToggle();
  });
  $(".nav").click(function() {
    $(".menu-toggler").removeClass("menu-toggler-close");
    $(".nav").fadeOut();
  });
  $(".nav > ul").click(function(e) {
    e.stopPropagation();
  });

  $(".nav > ul > li > a").hover(
    function() {
      var dataIndex = $(this).data("index");

      $(".nav").css(
        "background",
        "url('images/nav" + dataIndex + ".webp') center center / cover"
      );
    },
    function() {
      $(".nav").css("background", "rgba(0, 0, 0, 0.8)");
    },
Blackboxing js libraries
Tags: javascript, chrome, beginners
Published: 2020-02-08 12:31:14

Say, we have this html:
```html
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<div>
  <button id="btn">click me</button>
</div>
<div>
  <span class="applicant_name">John</span>
  <span class="applicant_name">Jason</span>
  <span class="applicant_name">Eric</span>
  <span class="applicant_name">Steven</span>
  <span class="applicant_name">Albert</span>
  <span class="applicant_name">Elin</span>
</div>
```

And this javascript code for the html:
```javascript
$(function() {
    $('#btn').on('click', () => {
        $('.applicant_name').each((index, element) => {
	        console.log($(element).text());
        });
    });
});
```
JS fiddle: [https://jsfiddle.net/shuNaka/bcma3q2j/](https://jsfiddle.net/shuNaka/bcma3q2j/)
We want to debug it, so we press F8 after opening the developer tool on Chrome, but it always stops in a library or jQuery, not in my code.
<img src="https://1.bp.blogspot.com/-KPDoDwBZbJY/Xj6fo1kW2hI/AAAAAAAABas/qwqgbbtxsf4EvF7GBcGTfDxkIMsmhjj7wCLcBGAsYHQ/s1600/Screenshot%2Bfrom%2B2020-02-08%2B20-46-23.png"></img>

I want to debug my code, not these libraries. What can I do?

### Blackboxing
We can ignore these libraries by [blackboxing](https://developer.chrome.com/devtools/docs/blackboxing) those on Chrome.

Open the developer tool by pressing F12 and open "Setting".
<img src="https://1.bp.blogspot.com/-O1kmCKA1EuU/Xj6iWk2GPRI/AAAAAAAABbM/UMs53iZ02q044FZvZoqUBbx9caIp54lSgCLcBGAsYHQ/s1600/Screenshot%2Bfrom%2B2020-02-08%2B20-56-53.png"></img>

Then click on the "Blackboxing". You can add patterns of javascript file names to ignore during debugging.
<img src="https://1.bp.blogspot.com/-joMp2Kh075k/Xj6m5T-csWI/AAAAAAAABbo/EPjrSlwsedwDIPhYj83uEIbTZMDwFgEZwCEwYBhgL/s1600/Screenshot%2Bfrom%2B2020-02-08%2B21-16-57.png"></img>

Or you can simply right-click on the source panel. Then you can blackbox the selected javascript file.
<img src="https://1.bp.blogspot.com/-DP-FJMobxxY/Xj6ncjA_MtI/AAAAAAAABbw/L_9625Sji0gUrJb8c210kDFxlm0yt0g_ACLcBGAsYHQ/s1600/Screenshot%2Bfrom%2B2020-02-08%2B21-14-35.png"></img>

Blackboxed files are ignored even if you hit F8 so that we can debug only the files we want. So I can debug only my code like this:
<img src="https://1.bp.blogspot.com/-e2AYJHpeVFQ/Xj6pIA04CXI/AAAAAAAABb8/B-ZsC1JFexI032LHSo4Zf8vuEEay6dmjwCLcBGAsYHQ/s1600/Screenshot%2Bfrom%2B2020-02-08%2B21-26-40.png"></img>
You can pause at the code like the image above on the jsfiddle by hitting F8 and clicking on the "click me" button at the same time many times. You must do it after blackboxing.


[This stackoverflow](https://stackoverflow.com/questions/17931571/freeze-screen-in-chrome-debugger-devtools-panel-for-popover-inspection) might be interesting too.

You can use the blackboxing for the "debugger" command too.
JSON - JavaScript Object Notation
Tags: json, javascript, object, notation
Published: 2020-02-08 12:16:07

# JSON

## JavaScript Object Notation

**Objects In JavaScript**

- Object Literal:
  A JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly braces.

```javascript
const person = {
  name: "mohammed",
  lastname: "Alaoui",
  age: 26
};
```

**JSON: JavaScript Object Notation**

- What Is JSON ?

- **JSON** Data Representation format.
- **JSON** is a lightweight format for storing and transporting data.
- **JSON** is often used when data is sent from a server to a web page.

**Why Use JSON?**

- Commonly used for API & Configs.
- Lightweight & easy to read/Write.
- Integrates easily with most languages.

**How To Write JSON?**

1. Use Key/Value Pairs.
2. Use double quotes around key.
3. Use only specified data types.

```json
{
  //objects
  "name": "Salah", //string
  "age": 22, //numbers
  "isStudent": true, //booleans
  "friends": [
    //arrays
    {
      "name": "friend1",
      "age": 0.5 //floating numbers
    },
    {
      "name": "friend2",
      "age": -45, //signed numbers
      "isStudent": false
    }
  ],
  "salary": null //and null
}
```

**Data types**

- Object.
- Numbers: 0, -5, 25.6,33.
- String: text.
- Boolean: true or false.
- Array.
- Null.

**JavaScript function for JSON**

- JSON.Parse()

Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
We use **JSON.parse()** to convert text into a JavaScript object:

```javascript
var object = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
```

**JSON.Stringfy()**

Now Imagine we have to send this object to the web server again:
We use the JavaScript function **JSON.stringify()** to convert it into a string.

```javascript
var myJSON = JSON.stringify(object);
```
My Experience so far with Tailwind CSS
Tags: lowlevel, utilityclasses, tailwindcss, independentcss
Published: 2020-02-08 12:04:55

---
title: My Experience so far with Tailwind CSS
published: True
description: What I've learnt so far from my Tailwind CSS learning curve
tags: Low-level, Utility Classes, Tailwind CSS, IndependentCSS.
---

Tailwind is a low-level CSS framework that allows you to build a custom website from scratch without necessarily needed to write any CSS.

below are the highlights of my experience so far from  Tailwind CSS learning curve:

1. Its highly customizable
2. Fun to learn and practice
3. Improves my design skills and in-depth understanding of the design system
4. Provides all the building blocks needed to build a bespoke design
5. Ability to translate any design into a running code faster like never before.

with Tailwind CSS I've been able to flex my muscle and gain confidence day in day out as I traverse my frontend path.
P2P search with yacy.net - the next goog ?
Tags: p2p, search, java, openjdk
Published: 2020-02-08 12:01:57

Just come across https://yacy.net/ thanks to 

{% link https://dev.to/jrswab/peer-to-peer-our-only-hope-2jnp %}

and 

* https://opensource.com/article/20/2/open-source-search-engine
* https://opensource.com/article/20/2/yacy-search-engine-hacks

which OpenJDK should I use to run yacy ?
* https://adoptopenjdk.net/
* https://www.azul.com/downloads/zulu-community/ 
* IcedTea 

seems to work fine with the xubuntu default jdk

how to start yacy
```
# DATA=/opt/yacy/DATA /opt/yacy/startYACY.sh
# tail -f /opt/yacy/DATA/LOG/yacy00.log

```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zgs1g13bs3l6hzwa6ou9.png)
Fix your Epson Printer Offline troubleshooting
Published: 2020-02-08 12:01:00

Recently, I came across the Epson printer offline issue at the time I switched on the printer. Without taking much time I got in touch with the technician group and shared the problem I was facing. They asked me a few questions like the Epson model, internet connection, etc, and answered me with an effective solution. I followed as per their guidance and was able to rectify the printer offline issue. Thus, if you are also facing this issue you can also contact the experts for help. They are available all round the clock, 24*7. You will simply have to dial the toll-free number. Once you get connected with the professionals just tell them the Epson printer offline problem you are facing. The expert will revert you the solution with proper steps and wait until you configure the steps they guided. Just make sure to provide the correct background details regarding your printer.

https://www.epsonprintersupportpro.us/blog/epson-printer-offline-issue/
Sending posts from WordPress site to your Telegram channel
Tags: wordpress, php, telegram, web
Published: 2020-02-08 11:20:45

---
title: Sending posts from WordPress site to your Telegram channel
published: true
description: I'm gonna show you how to send WordPress posts to a telegram channel
tags: wordpress,php,telegram,web
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fj5u0eb17h85ycwmwsi4.jpg
---

Hi! I'm gonna show you how you can send a message (WordPress post) to a Telegram channel. All you need is a public Telegram channel and a bot. The last one you can create via **BotFather** in Telegram.

Steps:
1. Create a public channel and a Telegram BOT (via BotFather).
2. Remember the bot token.
3. Add the bot to administrators of previously created channel.


At the final step you should add the following code to your `functions.php`:

```php

function telegram_send_message( $new_status, $old_status, $post ) {
  if( $new_status == 'publish' &&  $old_status != 'publish' && $post->post_type == 'post') {
    $apiToken = "TOKEN";
    $data = [
      'chat_id' => '@channel_name',
	  'text' => "\nRead more: " . get_permalink($post->ID)
	];
   $response = file_get_contents("https://api.telegram.org/bot$apiToken/sendMessage?" . http_build_query($data) );
  }
}
add_action( 'transition_post_status', 'telegram_send_message', 10, 3 );
``` 
> **Note**: Do remember to replace `TOKEN` with your actual bot token and `channel_name` with the name of the channel.

Now, all the new posts will be also published in your Telegram channel.