teleren/devto huggingface dataset:
E2EE and privacy in mobile messengers, by @vixentael
Tags: security, cryptography, encryption, privacy
Published: 2021-04-13 10:48:52

>*Do you know that all popular messengers, like Signal, WhatsApp, Messenger, and Telegram use end-to-end encryption?* 

But still, in terms of privacy and data security, they provide not all the same level of your information protection. And yes, **messengers can still collect and sell your data.** 
 
How's that possible? Which messenger to use? 

Get 2 minutes pro explanation by [Anastasiia Voitova](https://www.linkedin.com/in/anastasiiavoitova/) aka [@vixentael](https://twitter.com/vixentael), Head of customer solutions at [Cossack Labs] (https://www.cossacklabs.com/).

---
Watch the full video on [YouTube] (https://www.youtube.com/watch?v=CqsrA4eeGSs&ab_channel=CossackLabs). 
Give respects to [@vixentael](https://twitter.com/vixentael) and follow [@Cossack Labs] (https://twitter.com/cossacklabs) on Twitter.
Get through the [slides here](https://speakerdeck.com/vixentael/e2ee-equals-security-equals-privacy).🐬
{% speakerdeck ba7464de4e2e46aa9aff6154ee8b1a89 %}
Kotlin – Encode (Decode) File/Image to Base64
Tags: kotlin, encode, decode, base64
Published: 2021-04-13 10:48:19

Kotlin – Encode (Decode) File/Image to Base64

https://grokonez.com/kotlin/kotlin-encode-decode-fileimage-base64

For some purpose like transfering an image through RestfulAPI or saving an image to a DataBase, We need Encoder (Decode) the image to Base64. In the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will guide you how to use <strong>Kotlin</strong> language for converting.

<!--more-->
<strong>Note</strong>: Prepare an Image at folder 'C:\\base64\\image.jpg'
<h2>I. Kotlin Encode File/Image to Base64</h2>
<pre><code class="language-java">
fun encoder(filePath: String): String{
    val bytes = File(filePath).readBytes()
    val base64 = Base64.getEncoder().encodeToString(bytes)
	return base64
}
</code></pre>
<h2>II. Kotlin Decode Base64 to File/Image</h2>
<pre><code class="language-java">
fun decoder(base64Str: String, pathFile: String): Unit{
	val imageByteArray = Base64.getDecoder().decode(base64Str)
	File(pathFile).writeBytes(imageByteArray)
}</code></pre>
<h2>III. Full Sample</h2>

More at:

Kotlin – Encode (Decode) File/Image to Base64

https://grokonez.com/kotlin/kotlin-encode-decode-fileimage-base64
Kotlin List – zip() + zipWithNext()
Tags: kotlin, list, zip, zipwithnext
Published: 2021-04-13 10:42:56

Kotlin List – zip() + zipWithNext()

https://grokonez.com/kotlin/kotlin-list-zip-zipwithnext

In the tutorial, we will show how to use zip() and zipWithNext() methods of Kotlin List collection.

<!--more-->
<h2>I. zip() method</h2>
<h3>1. zip()</h3>
Use below method signatures:

<pre><code class="language-java">
infix fun <T, R> Iterable<T>.zip(
    other: Array<out R>
): List<Pair<T, R>>
infix fun <T, R> Iterable<T>.zip(
    other: Iterable<R>
): List<Pair<T, R>>
</code></pre>

-> Returns a list of pairs built from elements of both collections with same indexes. List has length of shortest collection.

Sample:

More at:

https://grokonez.com/kotlin/kotlin-list-zip-zipwithnext
How to spot and fix Django ORM anti-patterns
Tags: python, django, sql, vscode
Published: 2021-04-13 10:32:59

A demonstration of how to optimize Django ORM by seeing how it makes SQL queries under the hood.

I use the open source [AppMap extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=appland.appmap) to record the code and SQL execution of an application test case, and then display that information as a graphical execution trace.

The graphical display of code and SQL shows how the ORM works behind the scenes.
✔||🤢 Commit or Vomit | code style
Tags: html, webdev, programming, discuss
Published: 2021-04-13 10:28:14

Photo by <a href="https://unsplash.com/@oskaryil?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Oskar Yildiz</a> on <a href="https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
```html

<some-component class="complicated div"
  [title]="'test'"
  subtitle="test div"
  [color]="divColor"
>
  <ul>
    <li *ngFor="let item of list"
      class="list-item"
    >
      <span i18n>list item</span>
      {{item}}
    </li>
  </ul>
</some-component>

```
### What do you think of the presented code style?

❤: Commit (something I could commit)
🏷: Vomit (I'd never commit this)
🦄: I like your post please continue this series!

Let's vote! 😊
Kotlin List reduce(), reduceIndexed(), reduceRight(), reduceRightIndexed() methods example

Tags: kotlin, reduceindexed, reduce, list
Published: 2021-04-13 10:28:12

https://grokonez.com/kotlin/kotlin-list-reduce-reduceindexed-reduceright-reducerightindexed-methods-example

Kotlin List reduce(), reduceIndexed(), reduceRight(), reduceRightIndexed() methods example

In the tutorial, <a href="https://grokonez.com">Grokonez</a> will show you how to work with Kotlin List methods <code>reduce()</code>, <code>reduceIndexed()</code>, <code>reduceRight()</code>, <code>reduceRightIndexed()</code>.

<!--more-->
<h2>I. Kotlin List reduce methods</h2>
<h3>1. reduce()</h3>
<code>reduce()</code> accumulates value starting with the first element and applying [<strong>operation</strong>] from left to right to current accumulator value and each element.

Method signature:
<pre><code class="language-java">
public inline fun <S, T: S> Iterable<T>.reduce(operation: (acc: S, T) -> S): S
</code></pre>

Practice:

<pre><code class="language-java">
val intList = listOf(1, 2, 3, 4, 5, 6)
var intResult = intList.reduce { acc, it ->
										println("acc = $acc, it = $it")
										acc + it }

println(intResult)
/*
	acc = 1, it = 2
	acc = 3, it = 3
	acc = 6, it = 4
	acc = 10, it = 5
	acc = 15, it = 6
	21
*/
</code></pre>

More at:

Kotlin List reduce(), reduceIndexed(), reduceRight(), reduceRightIndexed() methods example

https://grokonez.com/kotlin/kotlin-list-reduce-reduceindexed-reduceright-reducerightindexed-methods-example
Work on web some function do not work in device
Tags: reactnative, expo
Published: 2021-04-13 10:20:36

Mine react native app work in the web browser (react native + expo) but in android device, fetchCopiedText returns "null" and convertStr breaking app. I can see any error output to find what breaks the code. In a web browser, everything works fine.

```import React, { useState } from "react";
import { SafeAreaView, StyleSheet, TextInput, Button } from "react-native";

import Clipboard from "expo-clipboard";

const Cyr = () => {
const [text, setText] = useState("");

const copyToClipboard = () => {
Clipboard.setString(text);
console.log(text);
};

const fetchCopiedText = async () => {
const text = await Clipboard.getStringAsync();
setText(text);
};

const clearAll = () => {
setText("");
 };
 const convertStr = () => {
setText(
  text
    .replace(/x/g, "xx")
    .replace(/y/g, "yy")
    .replace(/t/g, "tt")
    .replace(/\.([^\s\d])/g, ". $1")
    .replace(/\,([^\s\d])/g, ", $1")
   );
  };

  return (
  <SafeAreaView>
  <Button title="copy" onPress={copyToClipboard} />
  <Button title="paste" onPress={fetchCopiedText} />
  <TextInput
    style={styles.input}
    onChange={(e) => setText(e.target.value)}
    value={text}
    multiline
    selectable
  />
  <Button title="clear all" onPress={clearAll} />
  <Button title="U Cyr" onPress={Ucyr} />
</SafeAreaView>
 );
 };

 const styles = StyleSheet.create({
  input: {
   height: 300,
   width: 400,
   margin: 12,
   borderWidth: 1,
 },
 });

export default Cyr; ```
Loading a large json file into elixir's ETS (Erlang Term Storage) Cache using Jaxon
Tags: elixir, cache, jaxon, json
Published: 2021-04-13 10:19:58

> [Original article: https://kdnanmaga.xyz/how-to-load-a-large-json-file-into-elixir-ets-cache/](https://kdnanmaga.xyz/how-to-load-a-large-json-file-into-elixir-ets-cache/)

Elixir's ETS cache is an in-memory data store that can be accessed across processes. It can be used to build lookup tables such as geocoders, translators etc. in web applications.

For an application I was building, I had to load a large dataset (~500k rows) of geocodes into an ETS table before the webserver endpoint starts. This data can be shared across all the processes that handle incoming requests.

## First attempt: Load the file and then parse
At first, I attempted loading the file into memory, then parsing it with Jason and...
```
# here my json is one single root object with key-value pairs
def load_file(filename, tablename) do      
  :ets.new(tablename, [:named_table])
  with {:ok, body} <- File.read(filename), {:ok, json} <- Jason.decode(body),
  do: load_from_map(json, tablename)
end

defp load_from_map(parsed_map, tablename) do
  :ets.new(tablename, [:named_table])
  for {k,v} <- parsed_map do
    :ets.insert(tablename, {k,v})
  end
end              
```
It worked, but it took quite a while and hogged quite some RAM. My machine with 4GB RAM froze for about a minute.

## Streaming to the rescue
At this point, I thought there could be a better way to do this, may be something that doesn't involve reading the entire file into memory. That's when I found [Jaxon](https://github.com/boudra/jaxon), a streaming JSON Parser. So now the file is opened as a stream and the JSON is parsed as the stream is being read. Pretty neat right?
```
# here my json is an array of objects {"k":<key>,"v":<value>}
def load_file(filename, tablename) do      
  :ets.new(tablename, [:named_table])
  filename
  |> File.stream!()
  |> Jaxon.Stream.from_enumerable()
  |> Jaxon.Stream.query([:root, :all])
  |> Stream.each(fn (kv) -> :ets.insert(tablename, {kv["k"],kv["v"]}) end)
  |> Stream.run()
end
```

At first this didn't seem to work and I was disappointed until I realized I my JSON wasn't pretty and was just a single line. I generated a multi-line pretty JSON and voila! It worked!

> Find me on twitter: [@xqzkio](https://twitter.com/xqzkio)
Introducing Motif Graph Visualization Platform
Tags: showdev, javascript, datascience, discuss
Published: 2021-04-13 10:08:14

We just released a demo version of [Motif graph visualization platform](https://www.cylynx.io/motif). Feel free to try out the [demo](https://demo.cylynx.io).

We created the tool to help analyst and investigators visualize connected data - mainly around blockchain and financial transactions. I think graph visualization solutions should be more accessible to business users and analyst and took Kepler.gl as an inspiration when creating Motif. The idea is to be backend agnostic and let you use your preferred language/tools while speeding up data discovery and collaboration.

Here are some feature highlights:
- Neo4j integration
- Multiple layout options
- Group edges
- Time series filtering
- Filter and search panels

There's a jupyter integration on the way as well. Would love to hear your feedback about it and if there's sufficient interest we even plan to open source the graph explorer.
Java 8 - BiConsumer interface
Published: 2021-04-13 10:06:24

##What is Bi-Consumer interface ?

Bi-Consumer interface is one of the functional interfaces that Java 8 provides. It is present in java.util.function package.

It is quite similar to consumer interface, just that it accepts two parameters.

```
    @FunctionalInterface
    public interface BiConsumer<T,U>
```
Since it is a functional interface it has only one method definition . That method is called Accept.

We all know functional interfaces can have default methods also . So here we have a default method called andThen .

##What are the methods of the Bi-Consumer interface ?

####Accept :

`void accept(T t,U u)`

The accept method accepts two input parameter and performs a user defined operation on them.

####AndThen :

  ` default BiConsumer<T,U> andThen(BiConsumer<? super T,? super U> after)`

The andThen method takes in a Bi-Consumer as an input and it runs it after the Bi-Consumer it is called upon.

##Let us look at few examples !!!!!! 

First lets look at the example of accept method . It accepts two values and performs given operation on them .


```
    Class BiConsumerExample{

        public static void main(String[] args){

              BiConsumer<String,String> consumer= (s,s1)->System.out.println(s+"

                "+s1);

              consumer.accept("Hello","World");

        }

   }

   o/p = Hello World
```

Now let us look at an example of the andThen method of the BiConsumer interface.

```
Class BiConsumerExample{

        public static void main(String[] args){

              BiConsumer<String,String> consumer1= (s,s1)->System.out.println(s+" "+s1);

              BiConsumer<String,String> consumer2= (s2,s3)->System.out.println(

               s2.toUpperCase(),s3.toUpperCase());

              consumer1.andThen(consumer2).accept("Hello","World");

        }

   }

     o/p :

     Hello World

     HELLO WORLD

```

Let us look at above example. 

First we are creating one consumer called consumer1 which takes in two strings and just prints them. 

Next we are creating one more consumer called consumer2 which takes in two string converts the strings to uppercase and then prints the strings.

Next we want to make consumer1 run first and then we want to make consumer2 run. 

So we do `consumer1.andThen(consumer2)` which achieves that .

Next we need to pass some input to perform this operation so we make use of accept method of consumer as below .

`consumer1.andThen(consumer2).accept("Hello","World");`



Note: Kindly correct me in any info that is wrong on above blog . I am happy to learn .

Also kindly have a look at my blog :)

[https://praveen075.blogspot.com/2021/04/introduction-to-java-8-in-laymans-terms_13.html]

Thank you
What is CSS min max, actually?
Tags: todayilearned, css, html, beginners
Published: 2021-04-13 09:22:51

When I have started building an entire website or any section of a web page, CSS min-width / max-width / min-height and max-height are very useful things for me as a frontend developer. But I have seen lot's of newbies gets confused quickly in CSS min-max properties. 

So in this article, I'm going to clear your all doughts and confusions about CSS min max.

Prerequisites
- basic HTML | CSS knowledge
- calm mind

> NOTE: To understand min-max you must have to understand the CSS width property.

### what is the CSS width property?
CSS width property is used to give specific width or area of an element, which starts from 0px of the x-axis and at the "your defined"px area. which look like this 

CSS width property is used to give specific width or area of an element, which starts from 0px of the x-axis and at the "your defined"px area. which look like this 

![CSS width example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao86owrlklnf9e0j96je.png)

In this picture, you can see that we have used a car image on the web page and the car width is starting from 0px and ends at 18px (it's just an example, not a real desktop size).

I hope now you are very much familiar with the CSS width property.

---

[![CSS course eduonix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az71k2lp2eeyll27izng.png)](https://www.eduonix.com/css-bootcamp-master-in-css-including-css-grid-css-flexbox/UHJvZHVjdC0xMzE1MDIw)

---

### what are CSS min-width and max-width?
CSS min-width is used to set the minimum width of an element and max-width is used to set the maximum width area of an element. let's understand with a real-life example.

{% codepen https://codepen.io/atulcodex/pen/WNRMbpd %}

In this codepen example, you can see that we have created a div that has a ".box" class(red border) and in this box, we have used a car image that is responsive and 100 character paragraph. This box element's min-width is 300px and max-width is 600px now when we check this web page in different media screens then it will break or will show a scroll bar in less than 300px width screen and look proper in more than 600px. like this

![Responsive css min max](https://i.ibb.co/ZKSP7qX/Min-Max-responsive.gif)

The same rules are also working with min-height and max-height. If you are still not sure about it, So I recommend open this link https://codepen.io/atulcodex/pen/WNRMbpd and replace min-width and max-width with min-height/max-height. And share some snapshots of your result or output in the comment section.


[![Atul - Buy Me A Coffee](https://media.giphy.com/media/7kZE0z52Sd9zSESzDA/source.gif)](https://www.buymeacoffee.com/atulcodex)
Docker commands with simple PHP example
Tags: docker, php
Published: 2021-04-13 09:19:53

# Docker Commands

1.docker –version

This command is used to get the currently installed version of docker
	
2.docker pull

docker pull <image name> - This command is used to pull images from the docker repository(hub.docker.com)

3.docker run

Usage: docker run -it -d <image name> - This command is used to create a container from an image

4.docker ps

This command is used to list the running containers

5.docker ps -a

This command is used to show all the running and exited containers

6.docker exec

docker exec -it <container id> bash - This command is used to access the running container

7.docker stop

docker stop <container id> - This command stops a running container

8.docker kill

docker kill <container id> - This command kills the container by stopping its execution immediately. The difference between ‘docker kill’ and ‘docker stop’ is that ‘docker stop’ gives the container time to shutdown gracefully, in situations when it is taking too much time for getting the container to stop, one can opt to kill it

9.docker commit

docker commit <conatainer id> <username/imagename> - This command creates a new image of an edited container on the local system

10.docker login

This command is used to login to the docker hub repository

11.docker push

docker push <username/image name> - This command is used to push an image to the docker hub repository

12.docker images

This command lists all the locally stored docker images

13.docker rm

docker rm <container id> - This command is used to delete a stopped container

14.docker rmi

docker rmi <image-id> - This command is used to delete an image from local storage

15.docker build

docker build <path to docker file> - This command is used to build an image from a specified docker file

## Docker Php Application Example

A Dockerfile is a text document that contains commands that are used to assemble an image

1.Create a directory

```mkdir php-docker-app```

2.Create a Php File

```
<?php  
    echo ?Hello, Php?;  
?>  
```

3.Create a DockerFile

```
FROM php:7.0-apache  
COPY . /var/www/php  
```

4.Create Docker Image

``` docker build -t php-docker-app .  ```

Which will create the docker image

5.Run the Docker image

docker run php-docker-app

We can see that our docker image is running and output is shown to the browser. This image is running on the local host.
Nginx configuration example for NodeJS app
Published: 2021-06-17 08:29:31

---
title: Nginx configuration example for NodeJS app
published: true
date: 2021-04-13 09:09:09 UTC
tags: 
canonical_url: https://boobo94.github.io/devops/nginx-configuration-for-node/
---

Here is a simple example of how you can setup an nginx file to run a nodejs app. The lines which have the coment `# managed by Certbot` in the end are added automatically by Certbot.

```
# save this file in /etc/nginx/conf.d/your_file.conf
limit_req_zone $binary_remote_addr zone=one:10m rate=50r/s;

map $request_method $limit {
    default "";
    POST $binary_remote_addr;
}
# Creates 10mb zone in memory for storing binary ips
# Use this zone to limit the login route only 1 request per minute
limit_req_zone $limit zone=login_zone:10m rate=1r/m;

server {
    server_name YOUR_IP_OR_DNS;

    # Limit the payload size
    client_max_body_size 10M;

    location / {
        # proxi the public port (https - 443) to the local port of the app (in this case 8000, but use yours)
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        # forward the real ip
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $remote_addr;
        # use the limit zone created previously to limit at maximum 50 requests per second (line 2)
        limit_req zone=one burst=10 nodelay;
    }

    location /auth/login {
        # Creates 10mb zone in memory for storing binary ips
        limit_req zone=login_zone;
        proxy_pass http://127.0.0.1:8000;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/YOUR_IP_OR_DNS/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/YOUR_IP_OR_DNS/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = YOUR_IP_OR_DNS) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;
    server_name YOUR_IP_OR_DNS;
    return 404; # managed by Certbot
}

```
Online Tic Tac Toe with Firebase
Tags: showdev, firebase, javascript, react
Published: 2021-04-13 09:04:04

I created a Tic Tac Toe algorithm in JavaScript that can be used to play the game anywhere. By anywhere, I mean you can use this algorithm (which is warped in a JavaScript class) in React, Angular, React Native and even in web console. 
[Wanna try?](https://tic-tac-toe-fin.netlify.app/)
### How it works
You just need to define a new `class` and you can use `methods` of class to play the game.
Here's an example
```javascript
let game = new GameBoard(PLAYER_ONE, PLAYER_TWO);
```
Here, `PLAYER_ONE` and `PLAYER_TWO` refers to the name of players that will be playing the game. Now, when you have defined a new class. You can play the game by calling different methods. For example, in console, you can do this
![Game execution in web console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd639hiwudjh4gudyc4d.png)

So, now you just need to create the interface and perform actions with `game` and it will return the results. It can be implemented anywhere where JavaScript code can be executed. Right?
You can use this to create your own version of game. [Here's the code](https://github.com/MuhammadWasif/tic-tac-toe-champ/blob/main/src/lib/game.js). Just import the class and start implementing functions.

### Implementation with Firebase
So, I decided to use this along with Firebase to create an online version of this game. 
It works like this:
- You create a room.
- Share your room ID with your friend.
- Your friend joins the room and both of you can now play the game.
- Yes. You can also chat 😃!

Behind the scene, it is simple. I used **Firebase Real-time Database** for this. the `game` variable will result in an object that contains the information about the status of the game. It has properties for who's turn it is, what's the status of board and who is winning. 

The program just keeps storing this object on Firebase after every turn. While, on the other hand, it keeps reading the data in real-time and shows the changes to the other player.
```javascript
firebase.database().ref(roomID).on('value', (snap) => {
    const dataFromServer = snap.val();
    // just use above object to show values on UI
});
```
As the `game` object has every data in it, it will indicate winner, loser, turn and everything else. The program just needs to update the data from Firebase remote server to player's local device.

Chat also works with the simple terminology. But I used **Firestore** for this purpose. You can see the code on GitHub. It's pretty simple.

I would love it if someone reviews my code and find a bugs in it 💫.
{% github muhammadwasif/tic-tac-toe-champ %}

Don't forget to give it a star. Here's the deployment link
[https://tic-tac-toe-fin.netlify.app/](https://tic-tac-toe-fin.netlify.app/)