teleren/devto huggingface dataset:
Responsive design in React
Tags: react, responsive, breakpoints
Published: 2021-05-09 16:33:55

Hi, I'm Ayc0, maintainer of the library [`@blocz/react-responsive`](https://www.npmjs.com/package/@blocz/react-responsive) that aims to provide easy utils in React to handle Responsive design.

If you want to learn more about it, you can check this post:

{% link https://dev.to/ayc0/blocz-react-responsive-v3-is-out-6hi %}

This article will tell you how **not** to use this library.

## When not to use `@blocz/react-responsive`

Often, I get people asking me how to use `@blocz/react-responsive` to handle different display at different screen sizes, or on mobile.
Usually my answer is: use plain **CSS and media queries**.

CSS is my go-to method when I want handle responsive design:
- it's easy `@media (max-width: Xpx)`
- it's static and doesn't require JS to run (more efficient for the end user)


## Then why did you create this library if you don't recommend it?

I do recommend it, but not for all use-cases.

1. `@blocz/react-responsive` was developed to allow developers to **render different components** depending of viewport size.
For instance, you want to render a dropdown option on desktop and a floating button action on mobile and you already have both components developed.

2. The second use-case was to be able to have breakpoints that could be used at the same time in the JS and in **CSS-in-JS**, that you can set top level in your app and re-use in an easy way.

## To sum up

If you just need to change how a component looks depending on the viewport size, you should use plain CSS. But if you need a finer control in your JS, you can look at ways to do that in JS and why not give a try to `@blocz/react-responsive`.
Introductory Post
Published: 2021-05-09 16:17:14

Welcome to my blog post.

In this post, I'll introduce myself and help the folks reading this to better understand me.

Hello all, I'm Himanshu Goyal from India.

My actual journey with software began with a simple "Hello World!" program which I wrote while starting Computer Science and Engineering as my undergrad degree. Now, it's been approx 7 years and I can say that I have fallen in love with the software world.

My skills and work experience in respective are as follows :
Java - 3 years
Spring Boot - 3 years
Git - 2 years
Spark - 1/2 year
GCP - 1/2 years
Reactjs - 1/2 years


I have approx 3 years of work experience which started for working with Navis LLC, a software company that makes logistic software focusing on shipping terminals. I have experience in building products with team ownership and individual ownership as well.

Currently, I'm working for PayPal. Being the fathom of the payment industry, I have exposure to working in bigger teams and managing time across the globe. I have worked on various technologies ranging from backend technologies, big data technologies, and frontend technologies like Reactjs. In PayPal, I have responsibilities to deliver projects as a team member and also individually.

Apart from this, I have created some side projects of which I am proud of creating a back-end for a website ground-up.

I have contributed to open source as well for Exercism and  SpoutBreeze.

When the pandemic hit, I understood the freedom and the power of working remotely, eliminating the barrier of discrimination, and providing immense opportunities to everyone with the right skillset and mindset.

I have a quick learning potential for technologies and a keen eye for detail.

I have gone through the profile of [Jonathan Sterling](https://www.toptal.com/resume/jonathan-sterling) which seems very inspiring and motivating.

Thanks!
GCP DevOps Certification - Pomodoro Eleven
Tags: googlecloud, devops, sre, certification
Published: 2021-05-09 16:15:45

# Data processing SLI's

There is a high likelihood that you'll be working working with a platform that works with user provided or user generated information to provide a service.

Google recommend four different types of SLI's for that use case:

* Freshness
* Correctness
* Coverage
* Throughput

Let's review each of them, much along the similar lines of previous blogs Google uses the term "valid", this time in regards to the data and "proportions" to reflect things as percentages.

## Freshness

The data "freshness" can be considered as the proportion of valid data updated more recently than a give threshold. 

Given that definition an implementation requires making two choices, which of the data this system processes are **valid** for the SLI, and, when the timer for measuring the freshness of the data starts and stops.

![Image showing freshness calculation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0klxy1y45naa2fh7is0q.png)

## Correctness

When speaking of data correctness its important to note that users often have independent ways of validity checking data from your systems. As a result its important to consider an SLI for data correctness to ensure trust with your users.

The data "correctness" can be considered as the proportion of valid data producing correct output. 

Given that definition an implementation requires making two choices, which of the data this system processes are **valid** for the SLI and how to determine whether the data is "correct".

![Correctness of data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq3s2gn532hdyss7hesb.png)

## Coverage

A coverage SLI is useful for scenarios when users have an expectation of when the data will be made available for them.

Data "coverage" can be considered as the proportion of valid data processed successfully. 

Given that definition an implementation requires making two choices, which of the data this system processes are **valid** and whether the piece of data was processed successfully.

![Coverage SLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66suuvj3b6gtw1p2pu0k.png)

## Throughput

Throughput SLI's for data are useful in scenarios where a latency SLI might not be right. EG. If the latency throughput varies a lot (peak times versus quiet times) then maybe a data throughput SLI might be applicable.

Data "throughput" can be considered as the proportion of time where the data processing rate is faster than a threshold.

For this SLI to work you have to turn an event into a portion of time. IE. How long did that one event take to process. Such as Bytes per second. 

Any metric that scales at the same rate as the cost of processing should work for tracking the SLI. EG. Big data file to process would need longer time or more processing power.
Enable to Use Emmet with Tab on VSCode
Tags: emmet, vscode
Published: 2021-05-09 16:03:50

At some point, I lost the functionality that allows me to use Emmet with the `Tab` key.


## Enable to use Emmet with Tab key
Preference > Settings
Search `emmet` > Edit in `setting.json`

Add the following line.

```json
"emmet.triggerExpansionOnTab": true,
```
Angular CLI shortcuts for generating components 
Tags: angular, angularcli, junior
Published: 2021-05-09 16:02:56


Sometimes when we need to create a new element, we copy a component and paste renaming the files instead of using the proper command of angular CLI.

I think is important to follow the right approach and use the angular CLI commands because in this way, take it for sure
that you will speed up your times.

For that, I will share with you, what I use the most.

| element | command | short way |
| --------- |:---------:| -------:|
| Component |  ng g component nameComponent | ng g c nameComponent |
| Service | ng g service nameService | ng g s nameService |
| Enum | ng g enum nameEnum | ng g e nameEnum |
| Interface | ng g interface nameInterface | ng g i  |
| Module | ng g module nameModule | ng g m nameModule  |
| Guard | ng g guard nameGuard | ng g g |
| Pipe | ng g pipe namePipe | ng g p |

Also, we can indicate some options:

<strong>--flat</strong> -> with this we can generate the element without create a new directory.
<strong>--inline-style </strong> or <strong>-is</strong> -> avoid generate the css file
<strong>--inline-template</strong> or <strong>-it</strong> -> avoid generate html file
<strong>--skip-tests</strong> -> avoid generate spec file
JAVA Basics #9 - Casting
Tags: java, programming, tutorial, beginners
Published: 2021-05-09 16:02:07

In this article we are going to focus on casting and type conversions and also on 'Math' class.

#Casting
##Implicit Casting
Examine the following code.
```Java
short y = 1;
int z = y + 2;
System.out.println(z);
```
Notice that the data types of 'x' and 'y' are different in the above code. Can you guess the output? Will this execute and give the accurate answer, or will this give an error?
Well you will notice that this gives the accurate answer. That is because 'x' is of type 'short' which is of size 1 byte. And 'y' is an integer which is of size 4 bytes. Therefore, any variable that can be stored in a 1 byte can easily be store in 4 bytes. Because of that, this code runs just fine. This is called **IMPLICIT CASTING**. Java does this casting automatically.
> byte -> short -> int -> long -> float -> double

###Task
Try the below code and examine the output.
```Java
package com.company;
public class Main {
    public static void main(String[] args) {
        int y = 1;
        short z = y + 2;
        System.out.println(z);
    }
}
```

##Explicit Casting
In most of the frameworks which are used to built user interfaces, user inputs are taken as strings. In such a case assume that user inputs a number and you want to add 100 into it. However, the number user inputted is a string. So how can you add 100? This is where you want to use 'explicit casting'. Arithmetic operations are only performed in between compatible types. Therefore, first you need to 'explicitly' convert the user input into an integer and then proceed. Look at the code given below.
```Java
String userInput = "167";
int intInput = Integer.parseInt(userInput) + 100;
System.out.println(intInput);
```
The above code will first convert string `userInput` into an integer, and then will add another 100 into it.

#Math Class
'Math' is another predefined class in java. Let's see what methods we do have in that class.

You can easily round off numbers by using `round` method as shown below;
```Java
int x = Math.round(20.4F);
System.out.println(x);
```
This will give output as 20.

You can also compare numbers and get maximum and minimum out of them.
```Java
int maxNum = Math.max(10, 20);
int minNum = Math.max(10, 20);
System.out.println(maxNum);
System.out.println(minNum);
```

You also can generate a random number with the help of 'Math' class. Check this code;
```Java
double randNum = Math.round(Math.random());
System.out.println(randNum);
```
The above code will generate a floating point number between 0 and 1. But you can change that range as you wish. For example you can get a number between 0 and 100 by using the following line;
```Java
int randNum2 = (int) Math.round(Math.random() * 100);
System.out.println(randNum2);
```
In here since I have used `(int)` the floating point number is converted as an integer. Which means, you will get an integer in the range [0, 100].

There are many more predefined methods in 'Math' class. Explore and practice those as well :)
Part 2 - How to utilise tools to create pixel perfect designs.

Tags: webdev, css, html, web
Published: 2021-05-09 15:51:38

Part 1 Link - https://dev.to/pixelperfectpage/how-to-create-pixel-perfect-web-pages-2fop 

In part 1 of this series, we have looked at how to create a pixel perfection manually setting the Anchor & Dimensions. This page explores how we can use tools can be used to create pixel perfect screens in much less of a time. 

How to build this mockup using https://pixelperfect.page/app. Step by Step walkthrough 

##Mockup 
![Mockup ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/halbfscmd6b79m4sz4v0.png)


##Walkthrough Video
{% youtube 3xAoJ-j9O-I %}
My Dev Journey: Week 1
Tags: javascript, codenewbie, beginners, bootcamp
Published: 2021-05-09 15:37:26

So I've just finished my first week at Northcoders, it was introduction week. This is going to be my recap of what I've learnt.

Check me out on [GitHub](https://github.com/fearneyork).

## What I've learnt this week

This week has covered a lot of the same content as in the pre-course materials, but this definitely helped solidify the knowledge. It also gave room for everyone to ask questions and acclimatise to remote learning and how the tutors at NC teach. Here's a selection of some of the topics that have been covered this week, and the things that I found particularly interesting!

###Version Control and starting to learn how to pair program.
 - I'd only used Git and GitHub by myself before, so getting to learn alongside another student, getting to know the process of working collaboratively and other people at the same time was really useful.

###Functions and Execution Context.
 - I found this super interesting because knowing how the code is run and computed has made it clear why some facets of JS behave the way they do.

###Understanding Errors!
 - Again super interesting because learning to read what the error message is telling you, solves half of the problem for you (in most cases 😅).

###Regular Expressions! 💜
 - Before this, I found RegEx daunting in that at face value it doesn't immediately make sense, but taking a deeper dive into what makes it work with a tool like RegExr has removed the worries I did have.

###Array Methods 
 - They're just really fun to use. 😅

###Lastly, my favourite thing
 - How much more comfortable I've become using my terminal!

## Resources I've found useful this week!

- [MDN](https://developer.mozilla.org/en-US/) - as always.
- [Devdocs.io](http://devdocs.io) - the breadth of easily accessible info here is incredible!.
- [regexr.com](http://regexr.com)  - getting to grips with the basics of Regular Expressions would be a lot harder without somewhere to sketch ideas out and see them work.
- The Northcoders tutors - there won't be a week go by of these posts where this won't stand. But I can't understate how useful it is to have multiple people to hand at all times! A real luxury.
Produce Credit for Teams
Published: 2021-05-09 15:35:48

<sub>Photo by <a href="https://unsplash.com/@jakobowens1">Jakob Owens</a> on <a href="https://unsplash.com/s/photos/movie">Unsplash</a></sub>

First, i have seen [Scott Hanselman 's video](https://www.youtube.com/watch?v=-oaikJCR6ec) on how to use OBS to send content to your OBS.

Then, i have seen [Rob Farley 's video](https://www.youtube.com/watch?v=JbRZoAqA1rw) on how to use Powerpoint animation with OBS.

I was eager to produce the same.

## Installation

We will need 
- [OBS](https://community.chocolatey.org/packages/obs-studio)
- [OBS Virtual Cam](https://community.chocolatey.org/packages/obs-virtualcam)

```Powershell
choco install -y obs-studio
choco install -y obs-virtualcam
```

Virtualcam will helps us send the content casted by OBS on Teams (by selecting the virtual cam in the device selection).

## Producing credits

In order to produce credits, it will use Powerpoint.
I can create a slide with a background filled with the color used by the Chroma Key (generally green), add text, and add an animation on the text to create the moving credits.

Then, i can either present the powerpoint (using the preview button in powerpoint), or generate a video (through File > Export > Create a Video), and present the video.

![Export video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ypmc1zlv044qv3w1jz9.png)

## Present it
In OBS, you can create the scene by:
- adding the credit Source (either Window Capture or Media Source)
 - adding the Chroma Key Effect (right click on the Source > Filters then click on + button and Chroma Key) with Green color
![Chroma Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iop5k5iiudjb6j9gknh4.png)
- Add a Display Capture if you want
- Then cast it on the Virtual Cam, by Going to Tools > Virtual Cam and then press Start
- select the virtual Cam in Teams in device Selection



Hope this helps !
How to create a dot loading animation
Tags: html, css, beginners, codenewbie
Published: 2021-05-09 15:16:54

***Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create dot loading animation using HTML & CSS***

###Common Query###
1. Dot Loading Screen
2. How to create a loading animation
3. How to create an animated loading screen

**See Also:-** 
1. <a href="https://blog.stackfindover.com/how-to-create-animated-share-button-with-tooltip-animation/">Animated share button with tooltip</a>
2. <a href="https://blog.stackfindover.com/awesome-water-ripple-effect">How to create water ripple effect</a>

###How to create dot loading animation step by step###
First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:#1###
**Add below code inside index.html**

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

<head>
  <meta charset="UTF-8" />
  <title>How to create Dot Loading Animation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="loader-outer">
    <div class="loader">
      <span class="dot dot-1"></span>
      <span class="dot dot-2"></span>
      <span class="dot dot-3"></span>
      <span class="dot dot-4"></span>
    </div>
  </div>
</body>

</html>
```
###Step:#2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background: #000;
}

.loader>span {
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border-radius: 50%;
  position: relative;
  margin: 0 5px;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-1 {
  animation: anim 1s linear 0s infinite;
}

.dot-2 {
  animation: anim 1s linear 0.25s infinite;
}

.dot-3 {
  animation: anim 1s linear 0.50s infinite;
}

.dot-4 {
  animation: anim 1s linear 0.75s infinite;
}

@keyframes anim {
  0% {
    top: 0;
  }

  50% {
    top: 15px;
  }

  100% {
    top: 0;
  }
}
```
###How to create dot loading animation video output###
{% youtube JvKqVJyBVXQ %}

###How to create dot loading animation Codepen output###

{% codepen https://codepen.io/stack-findover/pen/BaWNdgr %}
Nginx HTTP Basic Authentication(Kimlik Doğrulama) Kurulumu
Tags: nginx, linux, http, authentication
Published: 2021-05-09 14:56:44

Aşağıdaki paketlerin kurulumunu gerçekleştirin.

Ubuntu;
~~~javascript
sudo apt install nginx apache2-utils
~~~

Redhat/CentOS;
~~~javascript
yum install epel-release nginx httpd-tools
~~~

Nginx “**/etc/nginx/sites-available/sites.conf**” altındaki kaynak konfig dosyası “**/etc/nginx/sites-enabled/sites.conf**” altında link’li olduğunu düşünerek, Yapılandırma şekli aşağıdaki gibi yapılabilir.

İlk önce aşağıdaki komutları yürütün,
~~~javascript
- mkdir /www/sites/indexpage
- mkdir /www/sites/files
- mkdir /www/sites/files/exclude
- echo “Welcome to nginx” > /www/sites/indexpage/index.html
~~~

Ardından **sites.conf** aşağıdaki gibi yapılandırın.

~~~javascript
server {					###Şifresiz olarak index sayfası gelmesi için yapılan konfigürasyon
        listen 80 default_server;
        server_name "";
      
	location / {
            root /www/sites/indexpage;
            index index.html index.htm;
        }

	location /files {			###/www/sites/files içerisine kullanıcı ve şifre ile erişim sağlamak için yapılan konfigürasyon
	    satisfy all;    
	
	    root /www/sites/;
	
	    auth_basic "HTTPS Basic Auth Server";
	    auth_basic_user_file .htpasswd;
	}

	location /files/exclude { 	###exclude klasörü için şifresiz erişim sağlamak için yapılan konfigürasyon
	    alias /www/sites/files/exclude;
	}

}
~~~

**Basic auth** için kullanıcı ve şifre oluşturma(kullanıcı adı **fatlan**)
~~~javascript
sudo htpasswd /etc/nginx/.htpasswd fatlan
~~~

 Kullanıcıları görmek için(şifreler hash’li görüntülenecektir),
~~~javascript
cat /etc/nginx/.htpasswd
~~~

Son olarak yapılan konfig'lerin geçerli olması için;
~~~javascript
sudo systemctl reload nginx
~~~
The Dev.to writing tips ✍🏽🚀
Tags: watercooler, discuss, writing, tips
Published: 2021-05-09 14:47:45

Photo by [Karolina Grabowska](https://www.pexels.com/@karolina-grabowska) from Pexels.

---------------------------------------

Hi there, awesome people on the internet.

Today I want to make a compilation of the best writing tips according to Dev.to writers.

I start on the comment section. 😉
Block chain In a Nutshell
Published: 2021-05-09 14:45:45

Before understanding what is blockchain lets try to understand what a distributed database is. A distributed database is a collection of multiple interconnected databases, which are spread physically across various locations that communicate via a computer network. 
A blockchain is similar to distributed databases that maintain a continuously growing list of chronologically ordered records, called blocks. These blocks are linked using encryption techniques which contains a link to connect each block to its previous block, a timestamp, and transaction data. It is like a decentralized, distributed and public digital ledger.
Blockchains are mainly used to record transactions across many computers so that the record cannot be altered without the alteration of all subsequent blocks because the whole chains link depends on data in the nodes(blocks).

#Why is Blockchain Popular?
Suppose one of us is transferring money to a friend from his/her bank account. He/ She would log in to online banking and transfer the amount to the other person using their account number. After the transaction is completed, the bank updates the transaction records of both persons. Even though this seems simple. These transactions are highly vulnerable.
These types of transactions can be tampered very quickly. Blockchain technology was created essentially to overcome problems of this nature.

So How Does Blockchain Protect These Transactions?
How exactly does Blockchain technology work?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jdd24k8vq6r13s5d16q.jpg)


Blockchain is a combination of three leading technologies:
1. Cryptographic keys (Asymmetric and Symmetric Cryptographies).
2. A peer-to-peer network containing a shared digital ledger.
3. A means of computing, to store the transactions and records of the network.

Cryptography keys consist of two keys those are Private key and Public key. These keys help in performing successful transactions between two parties. Each individual has these two keys, which they use to produce a secure digital identity reference. This secured identity is the most important aspect of Blockchain technology. In the world of cryptocurrency, this identity is referred to as ‘digital signature’ and is used for authorizing and controlling transactions
The digital signature is merged with the peer-to-peer network; a large number of individuals who act as authorities use the digital signature in order to reach a general agreement on transactions, among other issues. When they authorize a deal, it is certified by a mathematical verification, which results in a successful secured transaction between the two network-connected parties. 
So, to sum it up, Blockchain users employ cryptography keys to perform different types of digital interactions over the peer-to-peer network.
Solving Merge Conflicts with Pycharm
Tags: git
Published: 2021-05-09 14:26:57

Hi everyone! Today I show you how you can solve merge conflicts in Pycharm. Take care and stay healthy! :)

{% youtube hAj_gBUxVT8%}

➤ Timestamps
0:00​ Intro
0:15​ Provoking a conflict
1:15​ Solving the conflict

Find me also here:
➤ https://www.instagram.com/lumarycodes/​
➤ My Blog: https://lumarycodes.wordpress.com/