teleren/devto huggingface dataset:
👨🏻‍💻 How to solve the Z-index issue Within 1 minute😲😲
Tags: css, react, javascript, beginners
Published: 2020-05-02 10:18:01

Welcome Developer to my blog post, This post is more beneficial to the frontend developers as this tool work with the frontend stuff, but yes it always helps to have the knowledge about what tools are your front-end developers friend using. 

so my dear frontend developer friend, I know that you make the Designs of the awesome website with the help of the HTML and CSS and make them interactive with the help of javascript. but things don't always work as we want. 

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

I am going to share one tool inside the chrome dev tool that you can you while debugging the next issue for the Z-index. 

Z-Index: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8p1su8r00nzhzisldjmb.gif)

Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. We use Z-index with absolute or relative positions. When elements overlap, z-order determines which one covers the other.

You must have used this one property while making any design and sometimes the Div which you want to show on the top not display whether you give it the Z-Index of 1000000. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h611falshy9emt16hswi.jpeg)

Don't keep hit any try with giving the random number. use the following tool to check where your div element is positioned. you must be frustrated while doing this 

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

keep calm and 
1) open Chrome Dev tools 
2) Click on three dots on the right-hand side and open more tools and select layer 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ioevqihznuy6cyq9wfu6.png)
now you get the following screen 

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

There are three options available under the console text,

1) The first mode is pan mode this used to drag the given window inside the layer window

2) The second mode is Rotate mode, you can use this mode to rotate the window and to see how the elements are positioned,

3) and the third one is used to reset the 1st and 2nd settings.

open the devtool if you are reading this post from your laptop or pc and give it a try. you can see how the elements are positioned on any website. there are more two options play with them also 

Next week I am going to publish a new post with all the secret tips and tricks for the chrome dev tools. follow me if you want to be notified when it posted.  

Thanks for reading ❤ and if you want to read more stuff like this then follow me, Thanks

If you are on Twitter, can you follow me there as well? I post these kinds of stuff there as well. => <a href="https://twitter.com/kushal_js?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @kushal_js</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

{% twitter 1703431207676227934 %}
The best websites of the Tor Deep Web Network
Tags: deepweb, darkweb
Published: 2020-05-06 17:31:03

---
title: The best websites of the Tor Deep Web Network
published: true
date: 2020-05-02 10:03:47 UTC
tags: deepweb, darkweb
canonical_url: https://www.ma-no.org/en/seguridad/the-best-pages-of-the-deep-web-onion-deep-web
---

We already talked about Deep Web more than a year ago, explaining that to open Deep Web (or rather Dark Web) sites you need total and undetectable user anonymity and access to the "onion" network.The Dark Web is much smaller than the Deep Web and is composed mainly of sites where illegal information can be found at high levels.Those who visit these sites are not located (even if it is easy to make mistakes and leave a clue online even in the onion network so I don't do too many experiments).Underwater websites wich domain name ends with the .onion suffix… !

[Reaf full article](https://www.ma-no.org/en/seguridad/the-best-pages-of-the-deep-web-onion-deep-web)
Adding our own custom methods in JavaScript prototype class 
Published: 2020-05-02 10:01:45

I have a question regarding JavaScript.

is this good practice to add our own method in prototype class

like I have added my own custom method in String prototype class like this 

```
String.prototype.mirror = function () {
  let str = this.toString() ;
 return str.split('').reverse().join('')
}
```


and now i am using my own method with any string value like 

"hello".mirror() 
"olleh"
SIGNAL for Covid-19
Tags: engineerai, sachindevduggal, sachinduggal, covid19
Published: 2020-05-02 09:54:04

**Abstract**

In this position paper, we describe an approach to detecting and mitigating the spread of contagion across a large population. In light of the recent developments around the spread of the SARS-CoV-2 virus across multiple continents and geographies and the mortalities induced by the resultant disease, Covid-19, we believe that detecting, warning and arresting the spread of a contagion in a large population is one of society’s grand challenges. In this paper we present the blueprint of an end to end system that we believe is what is required to tackle such a societal challenge. This framework has been designed to operate at the level of an entire population such as a city, a state or even an entire nation. We believe this framework can equip decision makers, public health experts and governments with rich information and insights that can enable them to deploy the appropriate testing and vaccination schemes to eradicate the contagion from our societies.

**Preamble**

Early warning system for contagious disease spreading where testing is limited or logarithmic / not available and spread is exponential.
Assumption: Communication traces obtained by mobile phones are a good proxy of physical interaction network

**Trade offs:**

Coverage vs Sensitivity vs Specificity
Cost (prediction) vs error % (deaths)
Better to have more false positives than optimise costs (ie false negatives)
Invasiveness vs Effectiveness

Read full article [https://medium.com/@aliamalhotra/sachin-dev-duggal-engineer-ai-signal-for-covid-19-8beb3b27b5c2](https://medium.com/@aliamalhotra/sachin-dev-duggal-engineer-ai-signal-for-covid-19-8beb3b27b5c2)
Learn Python: strings
Tags: python, strings, tutorial, beginners
Published: 2020-05-02 09:30:51

---
title: Learn Python: strings
published: true
description: Introduction to strings in Python
tags: python, strings,  tutorial, beginners
series: [Learn Python]
cover_image: https://images.pexels.com/photos/4050296/pexels-photo-4050296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
---

# strings
A string can be declared using either single`'` or double`"` quotations. 
```python
### A string with double quotation
my_string1 = "Hello, Rishi"
### A string with single quotation
my_string2 = 'Hello, Rishi'
print(my_string1)
print(my_string2)
```
![](https://i.imgur.com/JlUGp5D.png)

### Using single`'` and double`"` quotations

Both single`'` and double`"` quotations can be used while declaring a string.
```python
### A string with mixed quotations
string_mixed = "Hello, Rishi: 'You are amazing'!"
print(string_mixed)

string_mixed2 = 'Hello, Rishi: "You are amazing"!'
print(string_mixed2)
```
![](https://i.imgur.com/RCDSuFG.png)

### Escaping single`'` and double`"` quotations
To use the same quotations within the string declaration, an escape character `\` needs to be used.
 ```python
 ### A string with mixed quotations using an escape character
string_mixed3 = "Hello, Rishi: \"You are amazing\"!"
print(string_mixed3)

string_mixed4 = 'Hello, Rishi: \'You are amazing\'!'
print(string_mixed4)
```
![](https://i.imgur.com/6Z7Too0.png)

### Multi-line strings  - Double Quotes
Multi lines string starts and ends with triple double-quotations `"""`.
This triple double-quotations `"""` can be used for long comments within a python code.
```python
### Multi-line strings - Double Quotes

multiple_lines = """Hello,

My name is Rishi.

Welcome.
"""
print(multiple_lines)

"""Hello,

This is a 
very 

long comments.
"""
```
![](https://i.imgur.com/ADoNBC7.png)

###  Multi-line strings - Single Quotes
Multi lines string starts and ends with triple double-quotations `'''`.
This triple double-quotations `'''` can be used for long comments within a python code.
```python
### Multi-line strings - Single Quotes

multiple_lines = '''Hello,

My name is Rishi.

Welcome.
'''
print(multiple_lines)

'''Hello,

This is a 
very 

long comments.
'''
```
![](https://i.imgur.com/gRcUZDd.png)

### Adding a string to another string
```python
### Adding a string to another string

greet = "Hello"
name = "Rishi"

print(greet + name);
print(greet + ' ' + name);
```
![](https://i.imgur.com/pTT3PYc.png)


### Adding a string to a number!!! Wait? 😕
Before adding a string to a number, we need to convert it first using `str()`.
 ```python
### Adding a string to a number!!! Wait?
greet = "Hello"
number_as_string = str(2020)
float_as_string = str(0.12345)

print(greet + number_as_string);
print(greet + ' ' + number_as_string);
print(greet + ' ' + float_as_string)
```
![](https://i.imgur.com/L97NQNR.png)

<hr>
{% replit @rishiabee/learnpystrings %}
ngtsc(Angular latest compiler) compilation overview
Tags: angular, typescript, javascript, webdev
Published: 2020-05-02 09:12:21

Here is a step by step overview of the compilation steps done by Angular compiler(ngtsc)

1. Create the ts.Program
2. Scan source files for top-level declarations that have trivially detectable @Component annotations. This avoids creating TypeChecker.
3. For each such declaration that has a templateUrl or styleUrls, kick-off resource loading for that URL and adds the Promise to a queue.
4. Get diagnostics and report any initial error messages. At this point, the TypeChecker is primed.
5. Do a thorough scan for @Component annotations, using the TypeChecker and the metadata system to resolve any complex expressions.
Wait on all resources to be resolved.
6. Calculate the set of transforms that need to be applied.
7. Kick-off Tsickle emit, which runs the transforms.
8. During the emit callback for .d.ts files, re-parse the emitted .d.ts and merge in any requested changes from the Angular compiler.

> Detailed article on the whole process soon. Up until then read about the [typescript compiler](https://dev.to/ajitsinghkaler/typescript-compiler-an-overview-5f42) it will really help you what the terms in the article mean and Angular compiler is itself a typescript compiler + some transformations.
Beginner's Guide to Caching
Tags: beginners, webdev
Published: 2020-05-02 09:05:33

We want our apps to run fast. One way to achieve this is through caching.

## Client cache

We can cache data on the client. For example, we can cache responses from API calls on the browser. Then, we can leverage this cached data to provide a smoother experience for the user by displaying cached information while we make network requests to update the cache.

## Server cache

We can cache data on the server as well. When a request is made, we can first check if the data exists in the cache. If it does we can return the data immediately, and if it's not, we query the database and cache the data for next time.

## Content Distribution Network

CDNs cache static content such as images, videos, or websites. When a request is made for a specific asset, CDN will first check if it is available locally before querying the server.

## Maintenance

There are two types of cache maintenance we need to do. First, we have to make sure that the cache stays in sync with its persistent storage. Second, we have to decide what to do when the cache gets full.

### Invalidation

When data is modified in persistent storage, how do we update the cache? We have some options:

1. Update the cache first (Write-back cache)

2. Update the cache second (Write-around cache)

3. Update the cache and persistent storage at the same time (Write-through cache)

There are pros and cons to each option making tradeoffs between speed and data consistency. 

For write-back cache, we risk data integrity for speed. For write-around cache, we risk cache miss and speed for data integrity. For write-through cache, we sacrifice speed (have to write twice) for data integrity.

### Eviction

Since we don't have unlimited amounts of cache, we have to make a decision on what to do once our cache is full. Some of the cache eviction policies we can implement are the following:

1. Least Recently Used (LRU)
2. Least Frequently Used (LFU)
2. First In First Out (FIFO)
3. Last In First Out (LIFO)

## Conclusion

Caching can happen both on the client side and the server side and also for application data and for static assets. We have to make sure that the cache is up to date with data and also make sure we are using our limited space efficiently.
Learn Python: Numbers
Tags: python, tutorial, beginners, numbers
Published: 2020-05-02 08:39:57

---
title: Learn Python: Numbers
published: true
description: Introduction to Numbers in Python
tags: python, tutorial, beginner, numbers
series: [Learn Python]
cover_image: https://images.pexels.com/photos/4050296/pexels-photo-4050296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
---


# Numbers

### Integer

```python
i_am_an_integer = 2020 
print(i_am_an_integer)
```
![](https://i.imgur.com/8BTh4Be.png)

### Float
```python
i_am_a_float = 20.123456  
print(i_am_a_float)
```
![](https://i.imgur.com/xj9Rotc.png)

### Arthmetic Operations
```python
maths_operation = 6 + 5 - 4 * 3 / 2
print(maths_operation)
```
![](https://i.imgur.com/Q3tfXX9.png)

#### Division
Division always returns a `float`.
```python
float_division = 48 / 2 
print(float_division);
```
![](https://i.imgur.com/lufFCO8.png)

```python
float_division2 = 49 / 3 
print(float_division2);
```
![](https://i.imgur.com/UTi14BY.png)


#### Integer Division
To do `integer` division, we must use: `//`.
```python
integer_division = 50 // 2 
print(integer_division);
```
![](https://i.imgur.com/ILPGcnB.png)

```python
integer_division2 = 49 // 3 
print(integer_division2);
```
![](https://i.imgur.com/pNyhh6T.png)

### Modulus | Remainder
```python
remainder = 17 % 5;
print(remainder)
```
![](https://i.imgur.com/TpdefvJ.png)

<hr>
{% replit @rishiabee/learnpynumbers %}
My Git Rebase Workflow
Tags: git, github, tutorial, beginners
Published: 2020-05-02 08:19:26

This is my workflow when contributing to code. First I create a branch to implement a specific feature:

```
git checkout -b some-feature
```

Once I make changes, I commit and push:

```
git add .
git commit -m "Some changes"
git push -u origin some-feature
```

Sometimes, I need to update my branch with changes that happened on master. To get the latest changes on master and replay my changes on top, I run the following command:

```
git pull origin master --rebase
```

There are pros and cons of rebasing master instead of merging master. We will have a cleaner commit history (no merge commits) with rebasing. However, some claim that merges are better because it does not rewrite history like a rebase.

When we try to push after rebasing, we'll get a warning since the local branch's history has been changed. While its dangerous to do so on the master branch, we can just force push our changes to our feature branch.

```
git push origin some-feature --force
```

I prefer rebasing over merging for two main reasons. First, I can have clean commit messages. Second, it's easy for me to visualize in my head: rebasing is just putting my changes after all of the latest changes on master.
Worth of Computer Science
Tags: covid, corona, situation, computerscience
Published: 2020-05-02 08:02:29

People think "What IT people do?" Read till the end
**Because of IT people**
The whole world is in Corona crisis but IT people are working from home.
Because of IT people, All banking systems continue to function.
Because of IT people, The stock trading system continues as it is
Because of IT people, All hospitals are functioning because of websites and softwares
Because of IT people, ATM software works 24 hours a day to keep it running smoothly,
Because of IT people Internet, phone services are running because softwares that IT people manage.
Because of IT people, You get uninterrupted Updates on all the news channels because of the news softwares
Because of IT people, All entertainment channels are functional because of softwares. Facebook WhatsApp etc. Social media is functioning efficiently today because of IT people.
Because of IT people, Pharmaceutical software are running and managed by IT researching software is made by IT people, All lab test reports are made.
Because of IT people, The software that manages the power grid are maintained by IT. There is nothing in the world today that does not require computers and softwares
*Salute to life saving doctors, nurses, salute to police, cleaners, salute to millions of subsistence farmers.*
*And the All IT guy working behind the scenes* 
Alhamdulillah  🙂
Comments
CRUD de usuarios en NodeJS: Parte 1
Tags: node, apirest, serverjs, express
Published: 2020-05-02 08:02:03

En este conjunto de publicaciones, voy a mostraros cómo haría yo el CRUD (Create, Read, Update y Delete), en otras palabras, todo el flujo y acciones posibles para la entidad de Usuario en nuestro servidor de NodeJS. Todas estas acciones se ejecutarán mediante API Rest, con lo cual te recomiendo tener a mano el programa de [Postman](https://www.postman.com/) para poder hacer las llamadas a las apis. Bueno, vamos manos a la obra.

Primero tenemos que instalar [node.js](https://nodejs.org/), para ello vamos a su web oficial en la cual encontraras los ejecutables o comandos para instalarlo según el SO que tengas. Cuando acabe la instalación, si abres el terminal de tu equipo y ejecutas el siguiente comando, podrás ver la versión de Node que tienes instalada en tu máquina.

    $ npm -v

Una vez confirmes que node se ha instalado correctamente, vamos a crear una carpeta para alojar todo el código del proyecto, por ejemplo rest-server, y dentro de la carpeta ejecutaremos:

    $ npm init

Esto nos generará el fichero package.json, encargado de gestionar las dependencias de nuestro proyecto. Este fichero también contiene información del autor, nombre y descripción del proyecto. 

A continuación vamos a crear el fichero server.js, que será el fichero encargado de levantar nuestro servidor express, pero antes debemos crear una carpeta llamada server y dentro de ella creamos el server.js. 

Después ejecutamos el comando para instalar express en nuestro proyecto, le añadimos --save para que guarde la dependencia en nuestro package.json, y así siempre que ejecutemos el *npm install* nos instalará esa dependencia:

    $ npm install express --save

Ahora toca picar código en nuestro fichero server.js, que deberá contener lo siguiente:

```javascript
const express = require('express');

const app = express();

app.listen(3000, () => {
    console.log(`Escuchando en el puerto 3000`);
});
```

Ahora si nos colocamos en la raíz de nuestro proyecto y ejecutamos, desde nuestra terminal, el comando:

    $ node server/server.js

Veremos que aparece el siguiente mensaje en nuestra terminal: *Escuchando en el puerto 3000*. Esto quiere decir que nuestro servidor de NodeJS está levantado.
A tour to Git Commit Showcases
Tags: git, opensource, beginners, techtalks
Published: 2020-05-02 07:51:46


{% youtube VCP36k5OqDs %}



# Never-Blink

<p align="center">

</p>

## 1. 🎉 Introduction



Randomly connect to a player around the world and challenge him/her. Remember not to blink!


## 2. 📜 Implementation

### 1. Project structure

```
.
├── backend
│   ├── __init__.py
│   ├── detect.py
│   └── shape_predictor_68_face_landmarks.dat (detect model)
├── package.json
├── requirements.txt
├── server.py
├── src
│   ├── app.jsx
│   ├── index.js
│   ├── play.jsx
│   └── start.jsx
├── static
│   └── bundle.js
├── templates
│   └── index.html
└── webpack.config.js
```

The project uses `react` as our frontend framework, and uses `peerjs` to communicate between clients. At the backend, we use `flask` to host the server. For the connection between clients and server, we use `socketio` to implement real-time data transfer.

<img src="https://raw.githubusercontent.com/ByronHsu/Never-Blink/master/assets/structure.png" width="500px">

### 2. Game State

It uses the notion of [Finite State Machine](https://zh.wikipedia.org/wiki/%E6%9C%89%E9%99%90%E7%8A%B6%E6%80%81%E6%9C%BA) to design our game state. The circle is the state. The text in the top of each box is the event causing state transition, and the text in the bottom of each box is the action taken when an event occurs. The logic looks quite simple here, but it is not that easy to implement. For more detail you can check [play.jsx](./src/play.jsx) or [server.py](./src/server.py).

<img src="https://github.com/ByronHsu/Never-Blink/blob/master/assets/gamestate.png?raw=true" width="500px">


3. Start and Enjoy

Go to `https://0.0.0.0:3000`

`0.0.0.0:3000` does not work, remember to add `https`.

## 4. 🚧 Problem

1. Because the detector is too slow and weak, we can not endure too many clients. Therefore, we do not deploy it to a public server now. We plan to train a robust and fast model in the future.
2. When restarting, the old media connection listener will be called again. So we remove restart temporarily.

## 5. 📖 Reference

1. Environment setup: https://github.com/rwieruch/minimal-react-webpack-babel-setup
2. Simple P2P WebRTC package: https://github.com/peers/peerjs
3. Socket-io: https://socket.io/docs/client-api/
4. Flask-socketio: https://flask-socketio.readthedocs.io/en/latest/
5. Blink detector: https://github.com/dilawar/eye-blink-detector
6. Material UI: https://material-ui.com/


 **To know even more interesting showcases**
 
go to https://medium.com/@VikasPandey121/a-tour-to-git-commit-show-56d37e6afc03

To join Git Commit Show 2020 visit http://gitcommit.show/
How to parse JSON in Swift 5 (with Codable)
Tags: ios, xcode, swift, json
Published: 2020-05-02 07:47:15

---
title: How to parse JSON in Swift 5 (with Codable)
published: true
description: 
tags: ios, xcode, swift, json
---

Parsing `JSON` it's a task that you will need to implement almost in every project that interacts with a `REST API`.

For this example, we are going to use `Twitter API` to get statuses class.
```
{
"created_at": "Wed Oct 10 20:19:24 +0000 2018",
"id": 1050118621198921728,
"id_str": "1050118621198921728",
"text": "To make room for more expression, we will now count all emojis as equal—including those with gender‍‍‍ and skin t… https://t.co/MkGjXf9aXm",
"lang": "en",
"user": {
		"id": 6253282,
		"description": "The Real Twitter API. Tweets about API changes, service issues and our Developer Platform. Don't get an answer? It's on my website.",
		"url": "https://t.co/8IkCzCDr19",
		"name":"Twitter API"
	}
}
```

**JSONSerialisation**
We have the native option which is to use the `JSONSerialisation` class method `jsonObject(with:options:)` which returns a value of type `Any`. Then you will most probably cast it in `[String:Any]` in order to access the keys and after getting the value of a specific key you should cast it again.

```
if let statusesArray = try? JSONSerialization.jsonObject(with: data, options: .allowFragments) as? [[String: Any]],
    let user = statusesArray[0]["user"] as? [String: Any],
    let username = user["name"] as? String {
    // Finally we got the username
}
```


[**Continue reading on my personal blog**](https://www.rockandnull.com/how-to-parse-json-in-swift-5/)
What would you put in your porfolio to get a  first job as Junior developer?
Tags: career, hiring, beginners
Published: 2020-05-02 07:27:03

Hello there, hope this post find you well!
I would love to hear your valuable opinon abut what should I have in my portfolio to be able to get a job as junior dev. I've started coding only recently and I feel a bit confused when choosing on wich tecnology to focus on.. Thanks in advance for your advice, I apreciate your help. 

Happy weekend,
Mattia