teleren/devto huggingface dataset:
Discuss: What's your preferred way of creating a React app?
Tags: discuss, javascript, react, webdev
Published: 2020-06-11 05:52:31

Whenever I start a new React project I mostly use to `create-react-app`. But I've seen a lot of people default to Gatsby or Next.js.

If you do use something other than cra what is your motivation and what tools make your life easier? Any best practices you think React devs should follow while using them?
Fixing VSCode terminal font
Tags: vscode
Published: 2020-06-11 05:43:56

I just noticed that my vscode terminal window was having font issues.  Especially obvious when it shows the git branch.  Those little squares don't look right...

Take a look...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nwscrms1g3e7oadjzusx.PNG)

It's super easy to fix though.  Download a powerline font (I like 'Cascadia Code PL') and install it on your machine. 

Now all you need to do is add the following line to your vscode settings.json...

```
"terminal.integrated.fontFamily": "Cascadia Code PL"
```

And hey presto...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tgl1xymnynoaswmmqb07.PNG)

If vscode gives you any errors like 'terminal only supports monospace fonts' then you can try 'MesloLGM Nerd Font'.

Laters
Typography and its jargons
Tags: css
Published: 2020-06-11 05:35:29

While learning about Typography and building [the site](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/typography), I learn few things I didn't know.

- [Letter Case (aka case)](https://en.wikipedia.org/wiki/Letter_case): The difference of upper case vs. lower case in any written language.  
  Letter Case is neat concept and very foreign concept to me.  When I first learn English, I was surprised that there are two versions (upper and lower case) for every letter in alphabet.

`text-transform` and `line-height` help with readability.

- `text-transform` is css property that converts casing of text.  

```css
header {
  // transforms love -> Love
  text-transform: capitalize;
}
```

- `line-height` property, use unitless ratio value for responsiveness.  It is ratio of font size to `line-height`.

```css
footer {
  line-height: 1.5;
}
```

- [Two types](https://www.w3schools.com/cssref/pr_font_font-family.asp) of font-family: 
  1. `<family-name>` - may not preset in your computer
    ex: "times", "courier", "arial"
  2. `<generic-name>` - preset in your computer so use this as a fall-back.  [Do not use quotes](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) for generic names.
    ex: serif, sans-serif, cursive, fantas, monospace

- In order use to locally save fonts: import it in stylesheet using `@font-face` style rule and place it on top of your css file.  

   Syntax on how to refer to font-face locally saved and [find your fonts at fontsquirrel](https://www.fontsquirrel.com/):

```css
@font-face {

  // name of font
  font-family: "Lovato";

  // relative link where your font is saved and its 'format'
  src: url(downloaded-fonts/Lovato.woff2) format('woff2'), 
       url(downloaded-fonts/Lovato.tff) format('truetype');
}
```

- Web Open Form Format(WOFF) and Web Open Form Format 2(WOFF2) are future of fonts.  True Type Font (TTF) is [more widely used](https://wp-rocket.me/blog/guide-web-font-optimization/).
Design and Anatomy of a Push Notification
Tags: design, ios, android, pushnotifications
Published: 2020-06-11 05:10:57

Hello 👋

I originally posted this on [the OneSignal blog here](https://onesignal.com/blog/push-notification-design-anatomy/).

Push notifications are supported across Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge... the list goes on.

However every OS deals with notifications slightly differently. In this post I break down the nuances of push notification design.

If you’re a designer you’ll also find [this push notification UI kit for Figma](https://www.figma.com/community/file/852038744760148547) useful.

![Figma](https://dev-to-uploads.s3.amazonaws.com/i/c6uo1cnnowbn7j53nwy5.png)
How to set up a React app using Parcel
Tags: react, parcel, javascript, webdev
Published: 2020-06-11 05:02:43

# What is Parcel? 

* Parcel is a web app bundler that enables you to get up running  with zero configuration 

* Unlike other bundlers like Webpack, Parcel doesn’t require you to write a lot of code just to get started 

* It offers blazing fast performance  because it utilizes multi core processing where others work off of complex and heavy transforms

# Cool features 😎
* 📍 Error logging => provides highlighted syntax in the code when it encounters an error
* 🔥 Hot module replacement (HMR) => automatically updates modules as you make changes in develop
* ✂️ Code splitting => uses the import() syntax to split up your bundle
* 💻 Automatic transforms => code is automatically transformed using Babel, PostCSS, and PostHTML

## 🔥 And many more! 

# Alright, let’s get started! 🏁

![Homer Simpson saying yay](https://media.giphy.com/media/xT5LMQ8rHYTDGFG07e/giphy.gif)



### Create a new NPM (or with your preferred package manager) app 


```bat
mkdir my-awesome-app
cd my-awesome-app
npm init
```

#### 🔥 npm init will ask you a bunch of questions, if don’t want to answer them, tack on the -y at the end: npm init -y

### Let’s install the dependencies 📦
* React 
* Babel 
* Parcel

```bat 
npm install --save react
npm install --save react-dom
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
npm install --save-dev parcel-bundler
```
### Create a .babelrc file
```bat
{
 "presets": ["@babel/preset-react"]
}
```

### Create a index.html file 
```html
<!DOCTYPE html>
<html>
    <head>
        <title>🍕</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>
```

### Create a index.js file 
```jsx
import React from "react";
import ReactDOM from "react-dom";

function App () {
 return <h1>This is my amazing app</h1>
}

const mount = document.getElementById("app");
ReactDOM.render(<App />, mount);
```

### Add the entry point to our package.json
```bat
"scripts": {
  "start": "parcel index.html",
},
```

```bat
npm start
```

#### We’re done! We can view our app on http://localhost:1234 

![done](https://media.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif)

# Now go out and build that todo app!

![just kidding](https://media.giphy.com/media/xUOxffg5IPRSXRKmK4/giphy.gif)


cover image from: https://www.woolha.com/media/2018/09/using-parceljs-bundler-for-building-reactjs-application-1200x627.jpg
steps to learn a programming in a best way 
Tags: programming, newbie, steps, beginners
Published: 2020-06-11 04:51:08

here is a list of steps that you should follow before jumping into programming:
<ol>
    <li>basics of your operating system</li>
    <li>command-line</li>
    <li>basics of any programming langauge</li>
    <li>algorithms & data structures</li>
    <li>version controls (e.g: git)</li>
</ol>

I just knew why it's important to know **where to start?** after I've spent three years of coding. because there ain't no one to guide me and I was a student of electronic engineering.
Week 1-2
Tags: startup, javascript, obie
Published: 2020-06-11 04:33:03

Phew! I really don't have time to write updates. It's just not in me I guess 🤷

We've been grinding away. There are so many moving parts to Obie.

Some highlights include:
- creating in-app drip notifications when onboarding new users
- weekly quotas and reset on a schedule
- managing and fixing bugs in the core Obie product
- managing and fixing bugs in Obie's NLP

It's been busy! But we're about to cross the finish line. Like the old saying goes: "It takes 10% of the time to finish 90% of the product... and 90% of the time to finish the last 10% of the product."
React Native Share code
Tags: reactnative
Published: 2020-06-11 04:06:18

Hey Guys,

I have a query in my mind that can i use some(Not the whole react native app) react native component in my web app (Not the whole react native app).

Like if i have an app with 5 components and i want to use 3 out of that 5 components in a web app.

I know we can use "react native web" to share code between app and web but as per my understanding we can't share specific components.
Restaurando configurações do terminator
Tags: tutorial, terminal, ubuntu
Published: 2020-06-11 03:52:56

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

Recentemente me deparei com um erro no meu terminator e resolvi criar o meu primeiro post aqui.

# O que é o terminator?
Ao contrário do que todos pensam - vide imagem inicial do post - terminator é um terminal para alguns sistemas operacionais (incluindo ubuntu) que nos dá alguns poderes. Entre eles:

 - Split de terminais
 - Maior flexibilidade nas configurações
 - Muitas outras coisas

# Afinal de contas, qual o problema?

Hoje tentando fazer umas configurações, reparei que escrevi o script para iniciar de forma errada
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zhxh1o4wcicmgnpu2l1d.png)

Com isso o terminal nunca mais iria iniciar corretamente e aparecer na tela, já que o comando está errado.


Para isso abri o terminal padrão do ubuntu e deletei todas as configurações do terminator da seguinte forma:
`rm ~/.config/terminator/* -rfv`

Com a instrução acima, removemos todas as configurações, e com isso podemos prosseguir com as nossas configurações tranquilamente.

# Conclusão
Esta remoção descrita acima foi muito importante para mim, já que trabalho bastante com este terminal. Espero que sirva para mais alguém, qualquer dúvida ou sugestão só deixar nos comentários.

Abraços
How to make requests over Tor?
Tags: python, tor, computerscience, stem
Published: 2020-06-11 03:05:39

To make requests over Tor using Python3, we are going to be utilizing a Python controller library for [Tor](https://www.torproject.org/) called [Stem](https://stem.torproject.org/).

In order to do so, you need to install the stem package for your OS.

* For [MacOS](https://www.apple.com/macos/catalina/) : `pip3 install stem` in a python3 venv ( recommended ).

* For [Ubuntu](https://ubuntu.com/) : `sudo pip3 install stem` in a python3 venv ( recommended ).

```python
from stem import Signal
from stem.control import Controller

with Controller.from_port(port = 9051) as controller:
    controller.authenticate(password='your password set for tor controller port in torrc')
    print("Success!")
    controller.signal(Signal.NEWNYM)
    print("New Tor connection processed")
```
However, you're not done yet. You might get this error :
`get this error: error(61, 'Connection refused').`
It's because Port 9051 is not open on your machine yet. 
To fix this issue, you'll need to edit your [torrc file](https://www.torproject.org/docs/faq.html.en#torrc) and uncomment the corresponding lines.

```
ControlPort 9051
## If you enable the controlport, be sure to enable one of these
## authentication methods, to prevent attackers from accessing it.
HashedControlPassword16:<your_password>
```
To generate your password, run :
```
tor --hash-password "<new_password>"
```
where `<new_password>` is the password that you want to set.

And you're done with **Making Requests over Tor**.

Note : To run the `tor` commands, you need to have `tor` package installed. For MacOS, it can be easily installed using `brew install tor`.
Question1 : Decryption
Tags: javascript
Published: 2020-06-11 02:43:05

```
'   + -- + - + -   '
'   + --- + - +   '
'   + -- + - + -   '
'   + - + - + - +   '
```
Output Condition : String

```
let result = '';
let arr = 
['   + -- + - + -   ', 
'   + --- + - +   ', 
'   + -- + - + -   ', 
'   + - + - + - +   '];

for(let elements of arr) {
    let binary = elements.replace(/ /g, '').replace(/\+/g, '1').replace(/-/g, '0');
    let decimal = parseInt(binary, 2);
    result += String.fromCharCode(decimal);
}
```
1. Remove all the empty spaces in the string.
2. Convert '+' into '1' and '-' into '0'.
3. Convert the string into number by using parseInt() from binary to decimal.
4. 'UTF-16 Code Unit' into String by using String.fromCharCode().

Methods:
 replace()
 parseInt(string, radix) 
 String.fromCharCode()
Sharing their calendars!
Tags: career, productivity
Published: 2020-06-11 02:40:24

I have often wondered on the reason behind having a sharable calendar link in any calendar app!

I always thought it's because you have have the capability to share the calendar with another person or team member and they'd know what's what!

I have always found this extremely pressing when talking about something to that effect with someone in any firm/organisation. Everyone wants to feel important, nobody want's to talk about work or at least it seems that way. I have found it to be the case in all the firms and organisations I have worked in the past. It takes a toll on a person who kind of likes a cut out slot in each day for work to be assigned/allocated/tagged whatever. The thing is that it's monotonous, yes! It's not fun, I agree! 

I think a work around to an issue like this can be to have some variable time adjusted to each slot each day depending on a few factors like, did you take a shower or did you eat a healthy meal. 

Just thinking out loud, I don't know if there are any rules around that, not anymore anyway!
Day 10: #100DaysofCode - ActiveRecord and a Database
Tags: ruby, codenewbie, 100daysofcode, womenintech
Published: 2020-06-11 02:39:58

<a href="https://soundcloud.com/neo-soulfood/dwele-ode-to-slick-and-in-love"> Song of the day </a>

<center><h1> <b>C</b>reate </h1> 
<h1> <b>R</b>ead </h1> 
<h1> <b>U</b>pdate </h1> 
<h1> <b>D</b>elete </h1> </center>

We've already covered how to <a href="https://dev.to/sincerelybrittany/day-9-100daysofcode-activerecord-and-a-database-6de">create and read(find) </a> data within a database while using ActiveRecord. 

Now, you will need to update and delete that data. Once again go into ``tux`` or ``rake console`` and lets use the data from my last post to update and delete(destroy) from our database. 

```
a = User.create(username: username= "Ashley")
b = User.create(username: username= "Bob")
c = User.create(username: username= "Carla")

p = Post.create(title: title= "first title", content: content="this is content")
p2 = Post.create(title: title= "second title", content: content="this is content too")
p3 = Post.create(title: title= "third title", content: content="this is content")
```

<h3> Update </h3>
```
user = User.find_by(username: 'Ashley')
=> #<User:0x00007f9ad6395080 id: 1, username: "Ash">
user.update(name: 'Ash')

```

You can also link the methods on one line to update the database, like this: 

```
User.find_by(username: "Carla").update(username: 'Carly')
```

Or what if you wanted to update the first post to be updated and assigned to a particular user? You would update it by doing the following: 

```
p2.user = a

```

Yup, it is that simple, you have to set the user of the second post to ``a`` (Ashley) and now the post has a user. ActiveRecord makes it that simple to do. 

<h3> Delete </h3>

For some reason, delete and destroy always make me nervous when dealing with databases. However, it is something we need to know how to do for storage reasons and because many times you will not need information anymore. 

To delete a user from our simple example, we run one of the following: 

```
User.find(2).destroy
User.destroy(2)
```

You can also specify what you want to delete, for example:

```
Post.where(content: "this is content").destroy_all
```

Now that we have covered the basics of CRUD using ActiveRecord we can move on to setting up our application and views. 

Check out my <a href="https://github.com/SincerelyBrittany/100DaysofCode"> #100DaysofCode Github Repo </a>
Mobile Touch Hover Event & Disable Text Selection, Copy, Cut, Paste
Published: 2020-06-11 02:30:59

No matter what is the reason for disabling user-selection on your app, if you have come to that step, this is the right place to learn how to that with CSS

```
<!DOCTYPE html>
  <html>
    <head>
      <title>Title of the document</title>
      <style> 
        .not-user-selectable { 
          -webkit-user-select: none; 
          -webkit-touch-callout: none; 
          -moz-user-select: none; 
          -ms-user-select: none; 
          user-select: none;    
          color: #cc0000;
        } 
      </style>
    </head>
    <body>
      <p>I am a selectable text. You can select me.</p>
      <div class="not-user-selectable">I am an unselectable text. My 
      text selection is disabled.</div>
    </body>
</html>
```

For handling pressed state in mobile, we can use `:hover` css selector. When you try to use in mobile UI the `:hover` will negate desktop functionality and use the tap behavoir.

```
&:hover {
    background: green;
}
```
VolumeStat Chrome Extension
Tags: chrome, extension
Published: 2020-06-11 02:13:31

---
title: VolumeStat Chrome Extension
published: true
description: 
tags: chrome, extension

---

So you are on Netflix, the volume is just right; then you switch to YouTube it is slightly lower so you increase it, hours later you switch back to Netflix only to have your ears blasted. Lots of things are nerve wracking, Netflix shouldn't be one of them. I made a Chrome Extension that automatically resets volume to your desired setting.

Since I'm not a web developer and this is my first extension, I learnt a lot from building it.The extension icon is made by [https://www.flaticon.com/authors/photo3idea-studio](photo3idea_studio) from [https://www.flaticon.com/](www.flaticon.com). The source code is on [Github](https://github.com/imaculate/VolumeStat). Enjoy!
Is the constraint layout not available in the latest android studio version ?
Tags: android
Published: 2020-06-11 02:03:47

I have downloaded the latest android studio 4.0 and I am unable to find the constraint layout in the SDK manager. Is it merged with another package now ?

Going a different direction, I tried adding the layout with the help of this tutorial: https://developer.android.com/training/constraint-layout

I had a 7s error, I'll have to see it again if I have maven repo declared!
 
If So, I have the following packages installed, I just need a tick on this, 

Packages Installed:
- SDK build tools 30
- Android Emulator
- Android SDK Platform Tools
- Google play services
- Google web driver
- HAXM installer


many thanks.

Note: I didn't know there is a 90 min delay between posting two questions on some of these much sought after forums.
Como instalar a última versão LTS do NodeJS no Ubuntu
Tags: instalar, node, lts, ubuntu
Published: 2020-06-11 01:15:12

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

O interpretador de texto de JavaScript **NodeJS** certamente é uma das melhores ferramentas para quem quer desenvolver para web e mobile. No entanto, um dos problemas que novos usuários de Ubuntu poderão se deparar é com a instalação padrão do Node pelo terminal que instala uma versão mais antiga do que a já publicada.

Porém, utilizando o Personal Package Archive podemos resolver esse problema. Então, siga os 3 passos a seguir e não perca mais tempo para começar o seu projeto:

#Adicione o Node.JS PPA

**Última Versão LTS:** Aqui você pode settar a instalação da ultima versão LTS do NodeJS na versão 12.X. Abra o terminal do Ubuntu e execute:

`sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -`

#Instale o Node.JS através do apt-get

Agora com a versão para download configurada, podemos executar a instalação normalmente:

`sudo apt-get install nodejs`

#Verifique a versão do NodeJS e NPM

Perfeito. Provavelmente tudo certo para rodar. Podemos conferir a versão instalada.

O NodeJS vem por padrão com o gerenciador de pacotes NPM instalado. Então além de verificar a instalação correta do NodeJS, você também pode verificar que o NPM foi instalado:

`node -v`
*Output Esperado:* **v.12.14** ou maior

`npm -v`
*Output Esperado:* **v.6.12** ou maior

---
Se este link lhe foi útil, deixe seu ❤️.
Just Got The 4 Week Streak On DEV🙌
Tags: watercooler, discuss
Published: 2020-06-11 01:08:31

#Hi Dev!, I Just Got The 4 Week Streak Sticker!!!🎉
Just got the four week posting sticker, and it is very cool indeed. What stickers have you gotten? Write about it in the comments, if you have a sticker that most people don't write about how you got it.
How to fix errors with w3schools' website when viewing offline
Tags: w3schools, javascript, learning, education
Published: 2020-06-11 00:49:45

---
title: How to fix errors with w3schools' website when viewing offline
published: true
description: Remove addition information that are added to w3schools webpages
tags: w3schools, javascript, learning, education
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8kzgxo610hapgzumvlx5.png
---

If you wondering how to fix errors you see in the examples box when you view the w3schools site ien offline mod. The solution might be simpler than you think.


Normally your downloaded page comes in two forms, the html itself and the folder that contains the files.

![How the downloaded page looks like on your file explorer](https://dev-to-uploads.s3.amazonaws.com/i/bimcwcy6yxx9hub8xp88.jpg)

1. Go inside the folder that contains the files
2. Locate the ``w3schools_footer.js``
3. Delete it


Bam you page has no errors now.

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

Goodluck.
Just a little boy trying learn for his own.
Tags: beginners, webdev
Published: 2020-06-11 00:48:35


I'm from México in a little town and I tried to learn about web deveolpment but frecuently I feel stuck. Maybe it's normal but I dont't meet people that really likes programming,just they do for pass the exam. ): 

I really appreciate if someome can help me in something or give me some advices.
Love meet new people and can be better if loves develop. Also I could improve my English. Jaja
Move an Ubuntu window to another workspace
Tags: ubuntu, linux, tips, tricks
Published: 2020-06-11 10:34:37

---
title: Move an Ubuntu window to another workspace
published: true
date: 2020-06-11 00:00:00 UTC
tags: ubuntu, linux, tips, tricks
canonical_url: https://solrevdev.com/2020/06/11/move-an-ubuntu-window-to-another-workspace.html
---

Last night I decided to pull the trigger and upgrade from [Ubuntu 19.10 (Eoan Ermine)](http://releases.ubuntu.com/19.10/) to [Ubuntu Focal Fossa 20.04](http://releases.ubuntu.com/focal/)

A fairly smooth upgrade all in all.

I did have to re-enable the .NET Core APT repository using the following command:

```powershell
sudo apt-add-repository https://packages.microsoft.com/ubuntu/20.04/prod
```

I also discovered a neat shortcut to move programs from one workspace to another:

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>Arrow key</kbd>

![](https://i.imgur.com/rAeIM3K.png)

I hope this will soon become muscle memory 💪 !

Success 🎉