teleren/devto huggingface dataset:
Sutoribukku - Manga App UI Design⚡ 
Tags: ux, design, ios, android
Published: 2020-09-28 16:52:53

**Sutoribukku is a Manga App UI design** (_includes some amazing posters of the most watched animes ever, so that you can get it easily_ 😜) 

* Find screen designs of the app below 📱 -

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ibvgvy4e0vs1v0ey3h18.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b8h8imh5g6eq8bm3byle.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1pcvgk8h5x08l26utsnc.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eyuss84ncd41dok6l4i0.png)

_If you wants to see the `core of the design` then click on the link given below and find the repository to give you all about the UI._

* [GitHub Repository](https://github.com/Singh-Shivani/Sutoribukku) 


**And yes, if you wants to show your creativity with this design then you are free to do it! I have provided the Figma file in the repository with proper instructions to import it and use it at your end, check it out for everything you're curious about.**


🤓 _I'm also a Flutter Dev and a Web Dev, wants to see my projects?_
* check this out for all the projects - [Github Profile](https://github.com/Singh-Shivani/)


If you liked this design and wants to see more designs by me, then just star the repository!⭐

Keep designing!🤩
"Reading mode" for i3
Tags: i3, grayscale, linux
Published: 2020-09-28 16:42:34

---
title: "Reading mode" for i3
published: true
description: Creating a grayscale/desaturation filter for i3wm
tags: i3, grayscale, linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tu1v0vkg1981c13mtumf.png
---

After reading about the [benefits of using your phone in grayscale mode](https://www.nytimes.com/2018/01/12/technology/grayscale-phone.html), I wanted to try it on my computer too.

## Grayscale mode in the browser

I started by creating a userstyle with the following content:

```css
html {
    filter: grayscale() !important;
}
```

this actually worked great! It is blazing fast on most websites, and it's even applied to things like videos!

The problems started to arise when I realized that on websites that my laptop is getting louder than usual when I'm using websites that are already somewhat resource-intensive, like YouTube. Besides, there was a noticeable framerate drop in videos!

I tried several of the already existing browser plugins that aim to implement this, but they had the same performance issues.

That's not a price I wanted to pay for this feature.

## Compton GLX shaders

When I was setting up `compton` as my compositor for i3, I noticed that it has a weird flag that I'm not using:

```
--glx-fshader-win SHADER
  GLX backend: Use specified GLSL fragment shader for rendering window contents. See compton-default-fshader-win.glsl
  and compton-fake-transparency-fshader-win.glsl in the source tree for examples.
```

I have no idea about how shaders work, but I figured if it can be used in `compton-fake-transparency-fshader-win`, it might be useful for a color filter too.

After Googling some examples, I figured something like this should work for a shader:

```c
uniform sampler2D tex;

void main() {
   vec4 c = texture2D(tex, gl_TexCoord[0].xy);
   float y = dot(c.rgb, vec3(0.299, 0.587, 0.114));
   vec4 gray = vec4(y, y, y, 1.0);
   gl_FragColor = mix(c, gray, 0.95);

}
```

I chose to drastically desaturate the image rather than turning it completely grayscale. This way, colors are displayed in a very very subtle way.

I passed that shader to `compton --glx-fshader-win`, and it works!

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

Not only I haven't experienced any performance drop this way, but as an added benefit, I now have a reading mode in my entire OS, not just the browser. I can even play games in grayscale mode!

I created this shell script so that I can easily turn it on and off through keybinding.

```bash
#!/usr/bin/env bash

 #Define shader
GRAYSCALE=$(cat <<-END
uniform sampler2D tex;
void main() {
   vec4 c = texture2D(tex, gl_TexCoord[0].xy);
   float y = dot(c.rgb, vec3(0.299, 0.587, 0.114));
   vec4 gray = vec4(y, y, y, 1.0);
   gl_FragColor = mix(c, gray, 0.95);
}
END
)

# Restart compton with the selected mode
killall -q compton
if [[ $MODE == "grayscale" ]]; then
   compton "$@" --glx-fshader-win "$GRAYSCALE" --backend glx
else
   compton "$@"
fi
```

You can grab that script from GitHub:

{% github kantord/compton-grayscale-reading-mode %}
Published my first react library (A custom react hook)
Tags: react
Published: 2020-09-28 16:37:59

---
title: Published my first react library (A custom react hook)
published: true
description: A custom react hook for handling infinite scroll.
tags: react
---

I have made a simple yet powerful hook for loading more data as you reach end of the scroll. (Only web)

Link : https://www.npmjs.com/package/react-use-load-more
Promise.race()
Tags: javascript, promises, asynchronous
Published: 2020-09-28 16:31:53

`Promise.race()` resolves whenever one of the promises resolves. If there are multiple promises, the first promise that gets resolved will be returned.

```js
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => { resolve('one'); }, 500);
});

const promise2 = new Promise((resolve, reject) => {
  resolve('two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "two"
```

If an empty array is passed, it'll be in forever pending state.

`Promise.any()` has a similar behavior. But unlike `.any()`, `.race()` will return the first fulfilled or rejected promise value. `.any()` returns fulfilled values only.
How important is privacy to you in choosing a cloud provider?
Tags: cloud, discuss, security, privacy
Published: 2020-09-28 16:27:06

Hi community! How do you choose your cloud provider? Is security and privacy an issue, and if so, are you more concerned with outside parties accessing your work, and/or privacy breaches at big cloud providers like Google Cloud?

I'm interested in your take as ... 

- a freelancer
- or as part of the company where you work
ActiveRecord Associations 
Tags: ruby, codenewbie, womenintech
Published: 2020-09-28 16:14:16

Active Record associations are a convenient way to declare methods through different models, from your database to columns and tables.
These examples are based on my last sinatra project with Flatiron School.
```
class Pet < ActiveRecord::Base
    belongs_to :user
    end 
 ```

 - This is displayed as a singular.
 - Sets up a one on one connection with another Model, in this 
   case PETS to USER
 - Uses a foreign key user_id
 
##METHODS ADDED BY BELONGS_TO##

  ```
.association=(associate)
```
 The association= assigns to associate (user) object to the 
(pet) object which means extracting the primary key (user_id) from my table and setting the foreign key to the same value.

| Pets          | User          |
| ------------- |:-------------:|
| user_id       | username      |
| name          | password      |
| age           |               |  
|notes          |               |

This table above is an explanation of how my tables are a ONE to ONE relationship as the record contains exactly one instance of another Model.

 ``` 
.build.association(attribute={})
```
  This association returns a new object of the associated type. The object will be an instance from the passed attribute and the link through this object's foreign key will be set but 
NOT SAVED.

```
.create_association
```
This association returns the new object of the associated type. It will be instantiated from the passed attributes,then linked to the object's foreign key, and finally be set. Once it passes validations it will BE SAVED.

##HAS_MANY :PETS

```
class User < ActiveRecord::Base 

    has_many :pets
end 
```

This is called the collection method and returns a relation of all the associated objects(pets). If there are no associated objects it will return an empty relation.

``` 
.collection(object)
``` 
This method makes the collection contain only the supplied objects by adding and deleting as appropriate. The changes are persisted to the database.

```
.collection.build(User.pets.build)
```
This method returns a single or an array of new objects of the associated type. The objects will be instantiated from the passed attributes and then linked through their foreign key which will be created but NOT SAVED.

```
.collection.create(User.pets.create)
```
This method will create a single or an array of new objects. The objects will be instantiated from the passed attributes, and then linked to the foreign key. Once it passes validations IT WILL BE SAVED.

Happy Coding!
Unifying data with Hasura GraphQL Engine & Azure functions 
Published: 2020-09-28 16:08:47

---
title: Unifying data with Hasura GraphQL Engine & Azure functions 
published: true
description: Hasura turns your existing database into a magical GraphQL API that you can easily extend with a little Serverless.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i3m35ktexoc4a2g9682l.jpg
---
GraphQL is one of the newer and more fascinating paradigms for web APIs. The idea is that instead of trying to build APIs which return data for every scenario, you build a generic set of APIs which can return exactly what the frontend developer needs. Essentially, GraphQL gives the frontend developer the ability to query the database in the way that they need without having to implement new endpoints.

Now that sounds great and all, but if you're like a lot of developers, you already have a set of APIs, a mountain of technical debt that you inherited from previous developers, and a disparate system of relational databases. Sometimes it feels like you will never get to play with the new toys.

Trust me. I know that feeling so very, very well.

The folks at Hasura have been hard at work solving this problem for GraphQL. Hasura is a system that you stand up in front of your database. It then allows you to expose data in that database as a GraphQL API. No new services needed.

But as you know, getting just the data is only half the battle. If only life were just that easy. Often, you need an API that actually does something. Perhaps it performs some sort of calculation on the data set or even runs it through a machine learning model. Hasura lets you hook into the calls made to the API, handle them with custom code and then return custom data as part of the results set.

In this session at [CREATE : Serverless](https://createserverless2020.splashthat.com/), I'll be speaking with Allison Kuntz from Hasura on how Hasura works, why it makes GraphQL easy, and how you can extend any API call with a little Serverless.

See you there!

Add Create : Serverless to your calendar 👉 [https://createserverless2020.splashthat.com/](https://createserverless2020.splashthat.com/)
Update on EuroPython Ask Me Anything
Tags: europython, organisers, events, conferences
Published: 2020-09-28 16:08:29

Besides having an AMA here on DEV, see:-

{% link https://dev.to/europython/europython-ask-me-anything-4co8 %}

EuroPython also hosted a video call. The video is now up on https://www.youtube.com/watch?v=AWYiK0G0JNE but you can view it below.

{% youtube AWYiK0G0JNE %}

Covering aspects on what went well or not to use again, etc. Tips galore and if you have any questions or tips to share, let us know.

Enjoy!
Daily Challenge #293 - Name the Operations
Tags: challenge
Published: 2020-09-28 16:07:10

---
title: Daily Challenge #293 - Name the Operations
published: true
series: Daily Challenge
description: From a string of numbers without symbols, name the operations taking place. 
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---

You'll be given a string with numbers as input. The first two numbers are the operands, while the last three are the result of the operation. 

Available operations include:
- addition
- subtraction
- multiplication
- division

###Example

For string: `9 4 5 20 25`

Your function must return: `subtraction, multiplication, addition`

Because: 

```
9 - 4 = 5         subtraction
4 * 5 = 20        multiplication
5 + 20 = 25       addition
```

###Tests

Good luck!

***
_This [challenge](https://www.codewars.com/kata/5b5e0c0d83d64866bc00001d) comes from hubencu_st on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Closures in JavaScript
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-09-28 15:49:18

# Closures

- Closures are the functions defined inside a function.
- For example: In the code below, _innerFunction_ is a closure.

```js
function outerFunction() {
  function innerFunction() {
    let text = "I am a closure";
    return text;
  }
  let text = "I am an outer function";
  return text;
}
```

---

## Making closure accessible from outside the functional scope

- Invoking _outerFunction_ will return a text _"I am an outer function"_.
- We can invoke the _innerFunction_ inside the _outerFunction_.
- But how can we invoke the innerFunction from the global scope?
- In order to do so, instead of returning a text in _outerFunction_, we can return the _innerFunction_ itself as below:

```js
function outerFunction() {
  function innerFunction() {
    let text = "I am a closure";
    return text;
  }
  return innerFunction;
}
```

- Now we have access to the _innerFunction_.

```js
// invoking outerFunction to get access to _innerFunction_
console.log(outerFunction()); // returns [Function: innerFunction]
// This shows we have access to the _innerFunction_
```

- If we invoke _outerFunction_, with two parenthesis, we can see the variable text defined inside _innerFunction_ returned as below:

```js
console.log(outerFunction()()); // return "I am a closure"
```

---

- We can have closures penetrating deep inside a function.
- For example:

```js
function addition(num1) {
  var addition2 = function (num2) {
    var addition3 = function (num3) {
      return num1 + num2 + num3;
    };
    return addition3;
  };
  return addition2;
}

console.log("3 + 3 + 3 = ", addition(3)(3)(3)); // returns 9
console.log("4 + 5 + 6 = ", addition(4)(5)(6)); // return 15
```
Smallest KMP
Tags: codenewbie, cpp, computerscience, challenge
Published: 2020-09-28 15:39:22

<b>PROBLEM STATEMENT</b>
Reorder the characters of S in such a way that P occurs in the resulting string (an anagram of S) as a substring.
Note: A string B is a substring of a string A if B can be obtained from A by deleting several (possibly none or all) characters from the beginning and several (possibly none or all) characters from the end.

Input: 
akramkeeanany
aka
Output:
aaakaeekmnnry

<b>APPROACH</b>
Let's assume the given string be S and it's given substring be P.
Using the hashing technique, store the occurrence of both S and P in separate hashtables. Now, remove the occurrence of S's hashtable from P's hashtable. It will give all the characters apart from that present in the P string. 
To make it more clear, see the code given below:

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

Now, make a new empty string "str" and append all the characters from the modified hashtable, it will give the string having characters different from those in P.

There are three orders in which we can place P in Str:
<b>Case 1:</b>
When P's first character is smaller than Str's first character,
here, we can place p before str.
<b>Case 2:</b>
When P's first character is smaller than some middle character in str, then we can P just before the character, which is strictly greater than P's first character.
<b>Case 3:</b>
When P's first character is the largest one, then we have to place P after str.

<b>Another Most Important Case</b>
When P's first character equals to some character in str, here we have two options, we can place P before that character or after that character, here we will make two string for both the cases and compare which one is larger.

<b>CODE IMPLEMENTATION: </b>



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


Happy Coding :)
dependencies, devDependencies y peerDependencies

Tags: node, react, webpack
Published: 2020-09-28 15:36:11



## 1. dependencies:


Las bibliotecas dentro de dependencies son aquellas que el proyecto realmente necesita para poder trabajar en producción.
Estas dependencias están todas o parte de su código en los paquetes finales cuando generamos el bundle de el proyecto.


- ejemplos: react, lodash, classnames etc.


## 2. devDependencies:


Las librerías dentro de devDependencies son las que necesitamos **durante el desarrollo**


- ejemplos:
  - bibliotecas de formato de código: eslint, prettier, ...
  - bundlers: Webpack, gulp, rollup, ...
  - babel y todos sus complementos
  - todo lo relacionado con las pruebas: jest, enzime, react-testing-library, ...
  - otros: storybook, react-styleguidist, husky, ...


## 3. perDependencies


Si deseamos crear y publicar nuestra propia biblioteca para que se pueda usar como dependencia, también necesitamos peerDependencies.
Dentro de peerDependencies podemos indicar qué versiones de algunas de las librerías importantes son necesarias.


- ejemplo: imaginemos que tenemos el proyecto web-site-a y creamos la librería react-components-a los dos comparten la librería react, entonces para asegurarnos de que las versiones correspondan en nuestra librería react-components-a tendremos react como una peerDependency


- ejemplos de bibliotecas que normalmente colocamos en peerDependencies: react, react-dom, styled-component, etc


## TL;DR:


Las dependencies y devDependencies se utilizan para marcar la diferencia entre las bibliotecas que estarán (o no) en nuestro paquete final. peerDepenmdencies son útiles si queremos crear y publicar nuestra propia biblioteca
Status check-ins - Can it be better?
Tags: productivity, remote, saas, slack
Published: 2020-09-28 15:34:34

Hi product teams,

Do you have multiple people working on your projects?
Status check-ins are a good way to keep track on team's progress and understand roadblocks.

I hope you are already doing this.

We want to help managers in noting down teams' progress and prepare reports. Our aim is to make difficult things easy.

We are taking a survey to understand your requirements.
https://vyshnavsdeepak.typeform.com/to/Lo7KbFIy

We need five minutes of your time and would be extremely grateful if you could tell us your opinion.

Thank you
Vyshnav
Speech Recognition in Python
Tags: python
Published: 2020-09-28 15:22:10

##Installing Speech Recognition Packages in Python
There are many voice recognition packages exist on PyPI. Some of them are:

1. apiai

2. assemblyai

3. google-cloud-speech

4. pocketsphinx

5. SpeechRecognition

6. watson-developer-cloud

7. wit

In this blog, we will primarily focus on SpeechRecognition Module.

SpeechRecognition Library
$ pip install SpeechRecognition
This will install the Speech Recognition Package in Python. Now, we can use this package and its function for speech recognition. And can move a step further in our Voice Assistant Creation.

Speech Recognition will use our machine’s microphone to recognize the speech and convert it to string. We will have to install PyAudio for this purpose.

When we pip install pyaudio , error occurs, so this time we will install pyaudio by downloading and then installing using pipwin.

Download PyAudio .whl file from the link. Change the directory to the downloaded file.

##PyAudio whl install
```
$ pip install .\PyAudio-0.2.11-cp39-cp39-win_amd64.whl
```
One more work around is first install pipwin then install pyaudio using pipwin.
```
$ pip install pipwin
$ pipwin install pyaudio
```
The necessary packages for Speech Recognition have been installed. Now we can code the speech recognition in python.

##Speech Recognition in Python
```
import speech_recognition as sr

recognizer = sr.Recognizer()
with sr.Microphone() as source:
    print("Listening...")
    recognizer.adjust_for_ambient_noise(source)
    audio = recognizer.listen(source)
    try:
        print("Recognizing...")
        query = recognizer.recognize_google(audio)
    except sr.UnknownValueError:
        print("Could not understand audio")
    print(query.lower())
```
Let’s understand the code line by line.

First of all import the speech_recognition library, in this case, we have imported it as an alias as the original name of the import is quite long.

##Recognizer class in Speech Recognition Library
Recognizer instance
```
recognizer = sr.Recognizer()
```
After importing, the first step is to create an instance of the Recognizer present in the speech_recognition library.

Now the recognition variable that contains the speech recognition instance of the Recognizer will be used to call any function in it.

Read the whole post [Python Speech Recognition](https://hackthedeveloper.com/speech-recognition-python/) from the original Post.
Reduce a part of manual work of copying and pasting in excel
Published: 2020-09-28 15:34:08

So, while copying and pasting the syllabus into the excel sheet, it was annoying to separate the lines, again and again, everything was coming in one line after copying and pasting

So the program separates it into rows, just by copying the syllabus into a the ‘syllabus.csv’ file

Here's the link to a program,
https://github.com/chicken-biryani/paragraphtoexcel

PS: I am sure there's another better way of doing this, but I didn't know at the time (or now).
Motion Detection OpenCV Python
Tags: python, opencv
Published: 2020-09-28 15:30:51

We make use of Motion Detection technology in our daily life. This feature is used in CCTV Cameras to detect any kind of motion in the video frame. In this blog, we are going to make a motion detection script using OpenCV in Python.

##Steps for Motion Detection OpenCV Python
1. Capturing Real-time video from a camera or Reading recorded video.
2. Read two frames from the video source.
3. Find Out the Difference between the next frame and the previous frame.
4. Apply Image manipulations like Blurring, Thresholding, finding out contours, etc.
5. Finding Area of Contours to detect Motion.
6. Drawing Rectangle on the Motion Detected Areas.
7. Showing the video in the window.

Learn all the above steps for [Motion Detection OpenCV Python](https://hackthedeveloper.com/motion-detection-opencv-python/) from the original post.
Mouse Events OpenCV Python
Tags: python
Published: 2020-09-28 15:27:15

##Mouse Events OpenCV Algorithm
Import Packages
```
 import numpy as np 
```
NumPy for manipulation in Color matrix.
```
import cv2 as cv
```

Computer Vision for reading and showing images and image manipulation.
```
from matplotlib import pyplot as plt
```

Matplotlib for data visualization. (Optional)

##Read and Show Image for Mouse Events OpenCV
```
img = cv.imread(‘./img/sea.jpg’)
```

cv.imread() function is an OpenCV function in Python that makes it easy for the computer to read images. It takes one argument i.e the image source in the form of Absolute or Relative Path.
```
cv.imshow(‘image’, img)
```

##Set Mouse Callback in OpenCV
Next Step is to setMouseCallback() function. It takes two parameters:

The Window name on which the image is being shown
A Callback function that will process the image and will return output on some mouse events.
```
cv.setMouseCallback(‘image’, click_event)
```

Read the whole post [Mouse Events OpenCV python](https://hackthedeveloper.com/mouse-events-opencv-python/) from the original Post.