teleren/devto huggingface dataset:
How To Set Up Jupyter Notebook with Python 3 on Ubuntu 20.04
Tags: datascience, python
Published: 2021-08-07 15:36:41

---
title: How To Set Up Jupyter Notebook with Python 3 on Ubuntu 20.04
published: true
description: Jupyter Notebook is an essential software used by data scientists, it lets you create and share interactive code, visualisations, and more.
tags: datascience, python
canonical_url: https://www.milindsoorya.com/blog/how-to-Set-up-jupyter-notebook-with-python-3-on-ubuntu-20.04
//cover_image: https://direct_url_to_image.jpg
---

## Introduction

An open-source web application, [Jupyter Notebook](http://jupyter.org/) lets you create and share interactive code, visualisations, and more. It is an essential software used by data scientists. It is often used for working with data, statistical modelling, and machine learning.

If you are using windows the best way to setup Jupyter Notebook is by using [Anaconda](https://www.anaconda.com/products/individual).

By the end of this guide, you will be able to run Python 3 code using Jupyter Notebook running on your system.

## Prerequisites

In order to complete this guide, you should have a Ubuntu system with non-root user with sudo privileges configured.

## Step 1 — Set Up Python

update the local `apt` package index and then download and install the packages:

```bash
sudo apt update
```

Next, install pip and the Python header files, which are used by some of Jupyter’s dependencies:

```bash
sudo apt install python3-pip python3-dev
```

## Step 2 — Create a Python Virtual Environment for Jupyter

Upgrade pip and install the package by typing:

```bash
sudo -H pip3 install --upgrade pip
sudo -H pip3 install virtualenv
```

The `-H` flag ensures that the security policy sets the `home` environment variable to the home directory of the target user.

With `virtualenv` installed, we can start forming our environment. Create and move into a directory where we can keep our project files. 

```bash
mkdir ~/ml_projects
cd ~/ml_projects
```

Within the project directory, we’ll create a Python virtual environment. 

```bash
user@pc:~/ml_projects$ virtualenv houseprices_env
```

it will install a local version of Python and a local version of pip. We can use this to install and configure an isolated Python environment for Jupyter.

Before we install Jupyter, we need to activate the virtual environment. You can do that by typing:

```bash
source houseprices_env/bin/activate
```

## Step 3 — Install Jupyter

> Once the virtual environment is activated, use `pip` instead of `pip3`, even if you are using Python 3. The virtual environment’s copy of the tool is always named `pip`, regardless of the Python version.

```bash
(houseprices_env) user@pc:~/ml_projects$ pip install jupyter
```

## Step 4 — Run Jupyter Notebook

You now have everything you need to run Jupyter Notebook! To run it, execute the following command:

```bash
(houseprices_env) user@pc:~/ml_projects$ jupyter notebook
```

Now the notebook should open automatically in your browser. If it is not opening you can manually copy the URL from the terminal it will usually have a port number of 8888.
How reduce code in React
Tags: help
Published: 2021-08-07 15:13:05

How can reduce code in React , don’t writing it several time?
function App(){
const [name1,setName1]=useState('');
const [name2,setName2]=useState('');
var arr2=['A','D'];
function naM1(){
setName1(arr2[0]);
}
function naM2(){
setName2(arr2[1]);
}
return(
<div>
{arr2[0]}<button onClick={naM1}>BTN</button> <br></br>
{arr2[1]}<button onClick={naM2}>BTN</button><br></br>
<h2>---------ADDED ITEMS-------------</h2>
<h3>{name1} </h3>
<h3> {name2} </h3>
</div>
);
}
NodeJs Session with restful Api
Published: 2021-08-07 14:58:25

Hello Guys 
I Need some explanation in this requirements It is said that i will use (session,jwt )authorization and authentication 
in  
i know both and ask to do a restful API and I try to use session in restful API and didn't work and didn't seen any implementation of this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kswnh27icfv35rbdu4n4.png)
DATA TYPES - C
Published: 2021-08-07 14:48:12

Defined by the values it can assume, a data type is basically a data item wherein a set of operations can be performed by using a programming language. The function a data type is to specify the type of data being it an integer or a floating or a character or more. Broadly, there are 2 data types that supports C - programming language and they are namely :-

1) Basic/Primary Data Type
2) Derived Data Type

BASIC/PRIMARY DATA TYPE
The basic data type is further assessed as integer - based data type and floating point - based data type, character - based data type and void. The memory size capacity of the these data types ranges from 32 bit to 64 bit OS.

As stated earlier, the function of a data type is to specify the type of data a variable could hold. For example, if the variable is 'y' then it will be declared as int (integer - based data type). Integer type are used to store 'whole numbers'; floating types are used to store 'real numbers'; character types are used to store 'character values'; basically 'void' type means no value but it generally used to specify the type of function which returns nothing.


DERIVED DATA TYPE
It is easy to understand derived data types if one has understood the primary data types as it is simply a common a combination or all grouped together and more complex. Some of the derived data types are :-

1) Array
   An array can store up to a fixed sequential collection of elements but under a condition that they are all of the same data type.

2) Structure
   A structure basically creates a certain data type which can be used to combine different types of items into a single one.

3) Union
   A union is a group of variable of potentially different data types placed in the same memory location.

4) Pointer
   A pointer is a variable whose value is actually the address of another variable and the user has to declare a pointer before using it to store any variable address.
React Native layout properties!
Published: 2021-08-07 14:06:48

# A simple guide with examples for React Native layout properties! 
**Content**

 
- flexbox
- Shadow Prop Types IOS

# flexbox

### alignContent

**Types**

1. flex-start
2. flex-end
3. center
4. stretch
5. space-between
6. space-around

**Description**

- determine how should children's components be aligned along the primary axis of their container.

**Examples**
![1_cC2XFyCF_igp20Ombt4wBw.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628333864742/XyYxV7Qqm.png)

 ### alignItems
**Types**
1. flex-start
2. flex-end
3. center
4. stretch


**Description**

- determine how should children's components be aligned along the secondary axis of their container.

- Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.


**Default**

- stretch	

**Examples**

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628334992022/U6VlHEXNd.png)


### alignSelf

**Types**

1. auto
2. flex-start
3. flex-end
4. center
5. stretch

**Default**

- auto	

**Description**
- alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent.

**Examples**
![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628335767512/ka5nbgELL.png)


### Flexwrap

**Types**
1. wrap
2. nowrap


**Description**

Controls whether items are forced on a single line or can be wrapped on multiple lines.

**Examples**

![1__7v4uQhSsuCn1cfeOMVfrA.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628339239367/Aa9ZHYcBY.png)



### Position

**Types**
1. relative
2. absolute

**Description**


- position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.


**Default**

- relative	

**Examples**

![7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628338837747/vtP7ugUka.png)


# Shadow Prop Types IOS


<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
shadowColor
</td>
<td>
customColorPropType
</td>
<td>
Sets the drop shadow color
</td>
</tr>

<tr>
<td>
shadowOffset
</td>
<td>
customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )</td>
<td>
Sets the drop shadow offset
</td>
</tr>

<tr>
<td>
shadowOpacity
</td>
<td>
number
</td>
<td>
Sets the drop shadow opacity (multiplied by the color's alpha component)</td>
</tr>

<tr>
<td>
shadowRadius
</td>
<td>
number
</td>
<td>
Sets the drop shadow blur radius
</tr>


</tbody>
</table>



Thanks for reading!

Let's connect on [Twitter](https://twitter.com/KakarZahab)
How to fix Controller input in Steam Remote Play Together
Published: 2021-08-07 14:05:04

<sub>Photo by <a href="https://unsplash.com/@msdancingclown">Alina Prokudina</a> on <a href="https://unsplash.com/s/photos/gamepad">Unsplash</a></sub>

Ok, this time it's not technical, but it has bothered me for a long time.

I found this [guide](https://www.reddit.com/r/linux_gaming/comments/li5snu/guide_steam_remote_play_together_fix_remote/) stating all Steam has to be started in Big Picture mode in order to avoid this bug !

Hope this helps !
🚀 boost your tmux productivity with 🎯 targeted
Tags: cli, linux, tmux
Published: 2021-08-07 14:03:04

---
tags: ['cli', 'linux', 'tmux',]
series: tmux
title: 🚀 boost your tmux productivity with 🎯 targeted
canonical_url: https://waylonwalker.com/tmux-start-application/
published: true
---

Hold on to your hats folks, we are going to start adding some rocket fuel to your tmux.  We are going to configure tmux to open applications you need on a regular basis  in an instant.

Scripting tmux to open up specific applications can be intimidating your first time.  It can be tricky to get it to start in the right directory.  If you are trying to assign applications to a keybinding it can be easy to mess up and have weird things happen every time your `~/.tmux.conf` gets sourced.

## Open htop in an above split

I used this one for a number of years to take a quick peek into my systems performance while a memory intensive task was running.

``` bash
bind -n M-t split-window htop \; swap-pane -U
```

> 🗒️ note that the `swap-pane -U` will make the htop split active immediately

## Open htop in a popup

With the new tmux popup windows I really like the flow of just peeking at htop in a popup and jumping back into what I was doing.  It can have a more consistent look, and not mess with the window layouts.

``` bash
bind -n M-t popup -E -h 95% -w 95% -x 100% "htop"
```

## Open an application in the current directory

One thing that can be tricky is getting apps that need to be in a specific directory started in the directory that you want. Here are two examples I use to open `vifm` or `gitui`. 

``` bash
bind -n M-e split-window -c '#{pane_current_path}' vifm . .\; resize-pane -Z;
bind C-k split-window -c '#{pane_current_path}' 'gitui'\; resize-pane -Z;
```

> 🗒️ note that `split-window` takes in a -c flag before the application you
> want to run to specify the startup directory.

## Open a popup in a specific directory

I've been converted over to using popups for these as well.  I'll admit that the workflow of creating a new full screen window may have been better, but this can be a bit less jarring, espessially if you have anyone following along with what you are doing.

``` bash
bind -n M-e display-popup -d '#{pane_current_path}' -E vifm
bind C-k display-popup -d '#{pane_current_path}' -E 'gitui'
```
Be sure to check out the full YouTube playlist and subscribe if you like it.

[![tmux playlist on youtub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4cgo76y53s1hwykajo1.png)](https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr)

{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}

> Also check out this long form post for more about how I use tmux.
Nuovo servizio per dove si può viaggiare per turismo
Tags: covid, viaggi, turismo, vacanze
Published: 2021-08-07 14:00:31

Se anche tu trovi sempre più difficile capire dove si può viaggiare per turismo, prova questo nuovo servizio che ti permetterà di controllare (con informazioni aggiornate in tempo reale) in quali paesi è concesso spostarsi liberamente.

https://www.possopartire.it/

Il sito è stato sviluppato con React App mentre il Backend service è stato sviluppato in Rust e la comunicazione avviene attraverso API GraphQL.
quit
Tags: youtube, quit, byzero
Published: 2021-08-07 13:36:58

![Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnyatnbnu84s9gbqekwk.png)

{% youtube HtHanqdMrGM %}

Hallo Leute,

am 08.01.2018 hat dieser Kanal das Licht der Welt erblickt. Seitdem ging das Thema dieses Kanals von Musik zum Gaming, spezifischer: Minecraft. Es ging so weit, dass ich die 200 Abonnenten erreichen konnte, was eins meiner Ziele war.

Nach 3 erlebnisreichen Jahren voller Freude, ist es nun an der Zeit um Abschied zu nehmen.
Da mir die Zeit fehlt und ich nur noch wenig Motivation habe weiterzumachen, werde ich mich zurückziehen.

Vielen Dank für die gemeinsame Zeit, die ich mit euch verbringen durfte. 
Wie heißt es so schön: 
"**Man sieht (hört) sich immer zweimal im Leben.** "

**byZero**
Can anyone help me to find the problem in my angular project's ``` mat- spinnar ``` is not loading properly?
Published: 2021-08-07 13:12:44


My <mat-spinnar> is not showing the loading process. Here is my code:
```
<div class="container" 
            fxLayout="row"
            fxLayout.sm="column"
            fxLayout.xs="column"
            fxLayoutAlign.gt-md="space-around center"
            fxLayoutGap="10px"
            >
            <mat-card *ngIf="dish" fxFlex>
                <mat-card-header>
                    <div mat-grid-avatar></div>
                    <mat-card-title>
                        <h3>{{dish.name|uppercase}}</h3>
                    </mat-card-title>
                </mat-card-header>
                <img mat-card-image src={{dish.image}}  alt={{dish.name}}/>
                <mat-card-content>
                    <p>{{dish.description|lowercase}}</p>
                </mat-card-content>
            </mat-card>
            <div fxFlex [hidden]="dish">
                <mat-spinner><h4>Loading ... Please Wait </h4></mat-spinner>
            </div>

            <mat-card *ngIf="promotion" fxFlex>
                <mat-card-header>
                    <div mat-grid-avatar></div>
                    <mat-card-title>
                        <h3>{{promotion.name|uppercase}}</h3>
                    </mat-card-title>
                </mat-card-header>
                <img mat-card-image src={{promotion.image}}  alt={{promotion.name}}/>
                <mat-card-content>
                    <p>{{promotion.description|lowercase}}</p>
                </mat-card-content>
            </mat-card>
            <div fxFlex [hidden]="promotion">
                <mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4>
            </div>

            <mat-card *ngIf="leader" fxFlex>
                <mat-card-header>
                    <div mat-card-avatar></div>
                    <mat-card-title>
                        <h3>{{leader.name|uppercase}}</h3>
                    </mat-card-title>

                </mat-card-header>
                <img mat-card-image src={{leader.image}}  alt={{leader.name}}/>

            </mat-card>
            <div fxFlex [hidden]="leader">
                <mat-spinner></mat-spinner><h4>Loading ... Please Wait </h4>
            </div>

</div>
```
PHP: Operador lógico xor
Tags: php, braziliandevs
Published: 2021-08-07 13:09:23

Recentemente esbarrei em uma palavrinha em um código por aí. Na hora não entendi bem o que era... Era o operador xor.

Estava estudando e vi a explicação desse operador que, pelo menos pra mim, não é muito comum.

O que vi era mais ou menos assim:

```php
if ($isValue1 xor $isValue2) {
  // code
}
```

O operador xor é utilizado para quando você precisa que somente um dos valores seja positivo. Vejamos primeiramente o and e o or...

```php
$value = 1;

// retorna true, pois o value é igual a 1 e menor que 2
if ($value === 1 and $value < 2) {
  // code
}


// retorna true, o value não é igual a 2, mas é menor que 2
// ele entra na segunda expressão
if ($value === 2 or $value < 2) {
}

// lembrando que também poderia ser usado o && e ||, daria no mesmo

if ($value === 1 && $value < 2) {
  // code
}

if ($value === 2 || $value < 2) {
  // code
}
```

O xor, no entanto, aceita somente uma das verificações:

```php
$value = 1;

// retorna false, pois as duas expressões são verdadeiras
// value é igual a 1 e value é menor que 2
if ($value === 1 xor $value < 2) {
  // code
}

// retorna true, pois a primeira expressão é negativa
// e a segunda positiva
if ($value === 2 xor $value < 2) {
  // code
}

// assim como o or e o and, 
// você também pode utilizar o acento círcunflexo (^)

if ($value === 1 ^ $value < 2) {
  // code
}

if ($value === 2 ^ $value < 2) {
  // code
}
```

Fiz uma tabelinha pra explicar melhor:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z2rhud9tf3v7qhnvqhj.png)

--------

Bem, espero que isso possa te ajudar de alguma maneira. Tem coisa que parece besteira quando a gente aprende, mas que pode ajudar de mais no dia a dia :)
Software Dev Weekly Update #2: AJAX & APIs
Tags: javascript, api, beginners, webdev
Published: 2021-08-07 12:50:44

We covered AJAX (AJAJ), APIs, and Prototypes. Below is a simple/practical example of utilizing the TVMAZE API to get TV show information based on user input and displaying images of the first 10 results.

We used the Postman tool to test using different headers and get an easy visual of the data sent back.

I also spent time on a programming learning app called [SoloLearn](https://www.sololearn.com/home). The [JavaScript course](https://www.sololearn.com/learning/1024) presents you with quick challenges and I focused on the Conditionals and Loops section. It's been a great way to practice concepts and helps the info sink in!

![TV Show API Demo](https://i.imgur.com/yyiuL8n.gif)

###JavaScript
```javascript
  
//This function makes the API data request for whatever search we input and also clears the images when a new search is performed
const form = document.querySelector('#searchForm');
const displayArea = document.getElementById('requestImages');
form.addEventListener('submit', async function(event){
    event.preventDefault();
    displayArea.innerHTML = '';
    const searchTerm =  form.elements.query.value;
    const config = {params:{q:searchTerm}}
    const response = await axios.get('https://api.tvmaze.com/search/shows', config);
    makeImages(response.data);
    form.elements.query.value = '';
})

//This function filters out just the medium image URLs and appends them to the page (and only if a medium image is availale) and clears the search box after submission
const makeImages = function(shows){
    for(let result of shows){
        if(result.show.image){
            const tvShowImage = document.createElement('IMG');
            tvShowImage.src = result.show.image.medium;
            displayArea.append(tvShowImage);
        }
    }
}
```

###HTML
```HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>TV Show Search App</h1>
    <form id="searchForm">
        <input type="text" placeholder="TV Show Title" name="query">
        <button>Search</button>
        <div id="requestImages"></div>
    </form>
    <script src="TV_Show_Search_App.js"></script>
</body>

</html>
```
---
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/RealNerdEthan), [LinkedIn](https://www.linkedin.com/in/ethan-goddard-a4376952/) and [DEV](https://dev.to/realnerdethan) for more!
How to choose good looking fonts for your website
Tags: webdev, design, codenewbie, 100daysofcode
Published: 2021-08-07 12:44:45

Here is a guideline for choosing good looking fonts for your website or web app. Generally we choose fonts based on how they look to us, what we feel is appropraite, irrespective of fonts personality. The correct way to go about it, is to choose according to the personality of Typeface to which that font belongs, here it goes :- 

We have 5 major typefaces in which most fonts can be categorised. Based on the intention of website, we choose fonts whose typeface personality matches with intention of our website.

1. **Serif** - 
     * Old Style - For Refined, Classical look. Eg. - Restaurants.   (Body, Paragraph text).
     * Modern Type - For Fashion, Luxury, Serious, Refined look. - (Headline text)
     * Slab - Mechanical, Strong - (Headline text).

2. **Sans-Serif** - 
 * Most versatile, cover wide-range of personalities.
 * Can be used for Modern, Serious, Neutal look.

3. **Display** - 
  * Strong Personality.
  * Used for Big Headline

4. **Script** - 
  * Based on Handwriting
  * Only Headline text.

5. **Monospace** -
  * All letters have equal spacing
  * Readability, Computer code.

These are the personality types one must looke into when choosing fonts for their website.

Do look into fonts **About** section at the bottom of every fonts page. You will get to know what is the purpose of the font and for what kind of elements the font can be used.

If anyone has any suggestions on improving the article, you are most welcome to leave a message. I will be sharing more tips about fonts, colors and more design related knowledge that every web developer, designer must know. Thanks!