teleren/devto huggingface dataset:
System Design: SSL, TLS, mTLS
Tags: distributedsystems, architecture, tutorial
Published: 2022-09-20 12:10:19


Let's briefly discuss some important communication security protocols such as SSL, TLS, and mTLS. I would say that from a _"big picture"_ system design perspective, this topic is not very important but still good to know about.

## SSL

SSL stands for Secure Sockets Layer, and it refers to a protocol for encrypting and securing communications that take place on the internet. It was first developed in 1995 but since has been deprecated in favor of TLS (Transport Layer Security).

### Why is it called an SSL certificate if it is deprecated?

Most major certificate providers still refer to certificates as SSL certificates, which is why the naming convention persists.

### Why was SSL so important?

Originally, data on the web was transmitted in plaintext that anyone could read if they intercepted the message. SSL was created to correct this problem and protect user privacy. By encrypting any data that goes between the user and a web server, SSL also stops certain kinds of cyber attacks by preventing attackers from tampering with data in transit.

## TLS

Transport Layer Security, or TLS, is a widely adopted security protocol designed to facilitate privacy and data security for communications over the internet. TLS evolved from a previous encryption protocol called Secure Sockets Layer (SSL). A primary use case of TLS is encrypting the communication between web applications and servers.

There are three main components to what the TLS protocol accomplishes:

- **Encryption**: hides the data being transferred from third parties.
- **Authentication**: ensures that the parties exchanging information are who they claim to be.
- **Integrity**: verifies that the data has not been forged or tampered with.

## mTLS

Mutual TLS, or mTLS, is a method for mutual authentication. mTLS ensures that the parties at each end of a network connection are who they claim to be by verifying that they both have the correct private key. The information within their respective TLS certificates provides additional verification.

### Why use mTLS?

mTLS helps ensure that the traffic is secure and trusted in both directions between a client and server. This provides an additional layer of security for users who log in to an organization's network or applications. It also verifies connections with client devices that do not follow a login process, such as Internet of Things (IoT) devices.

Nowadays, mTLS is commonly used by microservices or distributed systems in a [zero trust security model](https://en.wikipedia.org/wiki/Zero_trust_security_model) to verify each other.


---

_This article is part of my open source [System Design Course](https://github.com/karanpratapsingh/system-design) available on Github._

{% github karanpratapsingh/system-design %}
Android App Internal Testing On Google Play Console
Tags: mobile
Published: 2022-09-20 12:00:18

Today it has become simple to develop your own apps, test, and publish the app on Google Play store using the specific tools and features. Before a new version of your app is made public it's a good choice to have it tested within your testing teams.

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

In this article, we’ll learn how to test Android apps via Google Play Store. Note that there are different types of testing tracks available which are listed below but I will be discussing **_Internal Testing_** because deployment is much faster than the other tracks.
- Internal Testing
- Open Testing
- Closed Testing

For more insight about setting up an open, closed, or internal test, refer to the [Play Console Help documentation](https://support.google.com/googleplay/android-developer/answer/9845334?hl=en&visit_id=
637989170271487669-1265562062&rd=1).

Google play console provides Internal Test to create releases for testers which is great for quick iteration during development, catching bugs early, and getting fast feedback from your team. The key is to directly distribute a test version of your app to a group of users. This could be product managers, QA, designers, or whoever can identify issues and give early feedback in your development process. With the Internal test track, multiple lists of testers (100 testers) can be created, which you assemble by email address (Google email account).

Testers don’t need a special app or permissions to install your test builds with the internal test track. The first time you deploy, it may take up to 48 hours. However, after that, your builds will be available to your testers within a few minutes fast and easy. All they need is a link, which you’ll find in the Play store Console.

![playstore-link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yymu0lyecd509084fdn1.png)

After accessing the link, users can access the pre-released app via Google Play Store. If users have opted into pre-release testing, they can always see the latest build in Google Play Store.

![google-play](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk1g2ofyhgd8pf3ocolh.jpeg)

## Conclusion

With the Internal Testing track, Google PlayStore provides a simpler app distribution system straight from the development phase, gets feedback from groups of testers, integrates policy checks, takes advantage of services like Pre-Launch reports and creates a CI/CD pipeline.
Envn
Tags: node, opensource
Published: 2022-09-20 11:52:25

💨 Envn is a zero-dependency module that loads environment variables from a .env file into `process.env`.

![Envn](https://badgen.net/npm/dt/envn) ![Envn](https://badgen.net/npm/v/envn)
![Envn](https://badgen.net/npm/license/envn) ![Envn](https://badgen.net/npm/node/envn)

# Install
```js
$ npm install envn
// or via Yarn
$ yarn add envn
```

# Usage
```js
const envn = require('envn');
```

# Methods && Examples
```js
const config = {
  // prefix of start name of env or any file contains environnement variables
  prefix: '.env',

  // default: process.env.NODE_ENV
  // developement | production | test -> this will load file .env.developement
  mode: 'developement'
}

// Envn method loads variables into process.env and also returns an object
envn(config?: Object) : Object

// env file example
REDIS:
  API_KEY=xxxx
  
console.log(process.env.REDIS_API_KEY);
```

### Notes
- [Examples of .env file](.env.production)

# License
Released under the MIT license
Débuter avec Angular 14: #2 Afficher la valeur d'una d'une variable avec le data binding
Tags: angular, typescript, javascript, frontend
Published: 2022-09-20 11:29:31

---
title: Débuter avec Angular 14: #2 Afficher la valeur d'una d'une variable avec le data binding
published: true
description: Dans cette partie, nous allons voir ensemble les bases d'Angular
tags: angular, typescript, javascript, frontend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

## Un composant
Dans l'ame de chaque Framework frontend, que ce soir React, Vue, peu importe le nom et qui a inventé le framework. Le coeur de tout est le "Composant".

Je vais explorer ce qu'est et comment écrire un composant, puis modifier un peu le template (l'affichange).

Dans l'ame de chaque application se trouve le principe de la Todo-list: un "Item" que je peux:
- Multiplier (liste)
- Modifier (edition)
- Supprimer
- Visualiser

Je remplace "Item" par "Musique" ca devient Spotify
Je remplace "Item" par "Champion" ca devient BlitzGG ou OPGG
Je remplace "Item" par "Video" ca devient YouTube
Etc...

Je vais aller voir ce qui se passe dans le fichier `app.component.ts`

Petite info, plutot que de chercher dans les dossiers en cliquant un peu partout, je prefere utiliser `command + p` sur Mac et `crtl + p` sur windows pour rechercher des fichiers dans Vual Studio Code, je dis ca je dis rien.

```ts
// Import de l'annotation Component
import { Component } from '@angular/core';

@Component({
  // Comment je l'instancie dans mon html: <app-root/>
  selector: 'app-root',
  // Où se trouve son affichage
  templateUrl: './app.component.html', 
  // Où se trouve son style
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Juste pour tester
  // Un attribut `title`
  title = 'my-app';
}
```

Avant de lancer le serveur de developpement, je veux que tu remplaces le contenu de `app.component.html` par ceci:

```html
<h1>Hello world!</h1>
```

C'est parti!
```bash
npm start
```
Dans mon navigateur, je visite [http://localhost:4200/](http://localhost:4200/).

J'ai ca du coup:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq12xb6vcdporsnce216.png)

Amuse-toi à modifier le contenu du fichier `.html` pour voir comment ca réagit.

## Concept clè: Le data binding
Si je traduis literalement mon anglais de ouf, ce serait "liaison de donnée", mais qu'est-ce donc.

Tu te rappelles que dans mon fichier `app.component.ts` j'avais:

```ts
// ...
export class AppComponent {
  // Ma donnée
  title = 'my-app';
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7uenl7kqnnij5nv7sll.jpg)

Le data binding se fait via l'utilisation des doubles 🥸🥸 moustaches comme ceci:

```html
<h1>{{ title }}</h1>
```

Je remplace et je constate:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xkkxchk271pkrpb5qwt.gif)
React hooks and Business Logic
Tags: typescript, react, functional
Published: 2022-09-20 11:41:14

## Overview

hooks can use `map`.
It is a very lightweight library. There are no dependencies.

https://www.npmjs.com/package/@bird-studio/use-map

## Use case

### with `useSWR`

```ts
import useSWR from "swr";
import type { SWRResponse } from "swr";
import { useMap } from "@bird-studio/use-map";

type MainRes = {
  value: string;
};

// Easy to test because it does not use hook
const businessLogic = (p: SWRResponse<MainRes>) => {
  if (p.data.value === "foo") {
    return {
      ...p,
      data: {
        ...p.data,
        isFoo: true,
      },
    };
  }
  return {
    ...p,
    data: {
      ...p.data,
      isFoo: false,
    },
  };
};

const useMain = () => {
  const res = useMap({ useHook: () => useSWR("/main", fetchMain) })
    .map(businessLogic)
    // Can be continuous.
    .map((v) => v).value;
};
```

### with `useQuery`

```ts
import { useQuery } from "@apollo/client";
import { useMap } from "@bird-studio/use-map";
import { QUERY } from "./QUERY";

// Easy to test because it does not use hook
const reducer = (p) => {
  if (p.loading) {
    return {
      type: "loading",
    };
  }

  if (p.error) {
    return {
      type: "error",
      ...p,
    };
  }

  if (p.data) {
    return {
      type: "success",
      data: p.data,
    };
  }

  return new Error("🤬");
};

const useMain = () => {
  const res = useMap({ useHook: () => useQuery(QUERY) }).map(reducer).value;
};
```
Neon toggle button - CSS - A step-by-step guide
Tags: css, html, webdev, design
Published: 2022-09-20 08:39:18

![Neon toggle button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs8ea9cdgk48fr4o4el8.png)

## <u>HTML</u>
For HTML we need two elements. A toggle class and a circle inside toggle.

```html
<div class="toggle">
    <div class="circle"></div>
</div>
```

## <u>CSS</u>
For CSS, first we'll style toggle class. We'll set position to relative and 40x20 pixels.

We'll set border radius to 20px and border to dark grey as if button is off.

Then we'll set cursor to pointer and transition.

```css
.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border: 1px solid #444;
    border-radius: 20px;
    transition: .2s;
    cursor: pointer;
}
```
      
For circle, first, we'll create a circle by setting width and height to 20px and border radius.

Now we'll set background color to transparent, position to absolute, left, with margin of 2px.

We'll add transition and border same as at "toggle" class.

Lastly, we'll set box sizing to border box, which means that the width and height includes paddings and borders along with content, which means that the actual size of circle is 14x14 plus 1 pixel of border on each side.

```
.circle {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: transparent;
    position: absolute;
    left: 0;
    margin: 2px;
    transition: .2s;
    border: 1px solid #444;
    box-sizing: border-box;
}
```
      
On hover, we'll set "toggle" border and box shadow to neon purple, and transition, so that this change is smooth.

```css
.toggle:hover {
    border-color: rgb(217, 176, 255);
    transition: .2s;
    box-shadow: 0 0 50px rgb(217, 176, 255);
}
```
      
As for circle, on toggle hover, we'll move it to the right by 20px and set transition.

We'll also set border and box shadow to neon purple.

Here we'll add two shadows, one inset and one out.

```css
.toggle:hover .circle {
    left: 20px;
    transition: .2s;
    border-color: rgb(217, 176, 255);
    box-shadow: 0 0 30px rgb(217, 176, 255),
        inset 0 0 10px rgb(217, 176, 255, 0.2);
}
```
      
And that is it.

You can find video tutorial and full code [here](https://designyff.com/code/neon_toggle_button).

Thank you for reading. ❤️
Bringing worldwide potential leaders from the largest companies to Devoxx Morocco 2022!
Tags: javascript, java, webdev, programming
Published: 2022-09-20 11:37:23


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb6g837mj348qvfekolr.jpg)
Each year, Devoxx Morocco brings together top industry leaders to share their knowledge with the developer community 🚀
👉🏻 Check our speakers line-up for the 9th edition: https://lnkd.in/eDCiCFXM
What is Virtual Desktop Online?
Published: 2022-08-09 10:59:11

Virtual Desktop Online is a technology related to deploying and managing virtual desktops using virtual machines. Virtual Desktop Online hosts desktop environments on the main server and makes them available to end users on demand.

How does Virtual Desktop Online work? 
In Virtual Desktop Online, a hypervisor partitions a server into [windows virtual machines](https://www.clouddesktoponline.com/what-is-windows-virtual-desktop-wvd/) that host virtual desktops that users access remotely from their devices. Users can access these virtual desktops from different devices or locations, and all processing carries place on the host server. Users correlate to desktop instances via a connection broker. A connection broker is a software-based gateway that acts as an intermediary between users and servers. 
Virtual Desktop Online is either persistent or non-persistent. Each type has different advantages.

Persistent [Virtual Desktop Online](https://www.clouddesktoponline.com/) saves changes even after a connection reset, allowing users to connect to the same desktop every time and personalize their desktops as needed. In other words, desktops in persistent VDI environments behave like personal physical desktops.
In contrast, non-persistent VDI, where users connect to generic desktops and changes are not saved, is typically simpler and cheaper because there are no custom desktops to persist between sessions. Non-persistent VDI is commonly used in organizations that have many task workers or employees performing limited repetitive tasks and do not need customized desktops.

Conclusion 
 Hosted virtual desktops don't take up a lot of space in your office. This feature is a good option for many small businesses with compact office spaces. His hosting provider, Apps4rent, not only helps set up virtual desktops but also maximizes the availability of virtually hosted desktops.
How Dogfooding Our Own SAAS Product Got Us Our First 20 Customers
Published: 2022-09-20 11:18:43

We at Proxies API have clients who have used our Rotating Proxies Service for all sorts of web crawling use cases.

Since we are a Rotating Proxy Service that developers use to scale their web crawling, our ideal audience is developers. So we are always on the lookout for opportunities to help developers—especially developers who are involved in web scraping web crawling projects.

So we need to know when someone asks a question about anything to do with Web crawling/Web Scraping or Data Mining technologies.

So we have built our little web crawler behind the scenes to Quora and other social networks like Twitter, Facebook, Linkedin, Google News for people needing help with these technologies.

Since we started doing this, this is one of our primary drivers of traffic, which happened by merely finding and answering questions online about these topics on time.

Since we started this internal crawler, we have detected about 500 places across Quora, Linkedin, Facebook, Twitter, Reddit, etc. where we can add value.

Our bot returns a database of these opportunities like below for us daily, and its fun to watch everyone on the team try to take a crack at answering/helping them.

It has prompted many interesting discussions and knowledge sharing and research sessions amongst the team.

We have already posted about 110 answers in various places in a systematic way. Sometimes, these questions inspire an in-depth blog post on our blog as well. We even got some people from Quora who directly reached out and became our customers, plus we are helping them set up their entire crawling infrastructure!

We also feel like we have a pulse on the pain points that our potential customers face and have grown to have real empathy for them by just actively looking to help in any way we can.

The author is the founder of Proxies API, a proxy rotation api service.
Ghost Podcast Themes
Published: 2022-09-20 11:15:54

Pidkast is a [premium Ghost theme](https://themeix.com/product/category/ghost-themes/) created for Podcast by themeix. It is a modern, clean, and fully responsive Ghost theme that works on all devices and screen sizes. It has many features that other Ghost themes do not have. All of the theme's sections are responsive and adapt to any device or screen size.

## Ghost Podcast Theme Features 

Ready for Ghost 5.x
2 Modern And Unique Homepage Layout
Podcast Page design with Audio Player
Responsive & Retina ready
Clear Blog Layout.
Modern Ui & Unique Design
Well Organized Layers
Multiple Footer variation
Multiple blog page variation
Fully Responsive podcast template 
Fully Customization Possible 
Google Web Fonts (FREE)

[Download Pidkast](https://themeix.com/product/pidkast-ghost-cms-theme-for-podcast/)
HTML TAGS
Published: 2022-09-20 11:09:39

1.What is HTML Tag?
- Image result for what is html tag
 An HTML tag is a piece of markup language used to indicate 
 the beginning and end of an HTML element in an HTML document.
2.What are the types of HTML Tags?
- These are mainly classified into Two Types:-   
        a)Based on their structure
        b)Based on their usage

a)Based on their Structure it`s further classified into two types:
        i)Opening and Closing Tags
       ii)Self-Closing Tags
i) Opening and Closing Tags: These have an opening tag and closing tag.if a tag is opened it should definetely closed.
Example:

`<div></div> `


ii) Self-Closing Tags: These have only one Tag,It will be closed at the end of the opening tag(No seperate tags are Required).
Example:

`<input type="" >`

b)Based On Their Usage it`s further classified into two types:
        i)Block Level Tags
       ii)Inline Level Tags
i)Block Level Tags: The Elements which occupy the whole Available space bound by the tags and these tags start in new line.
Example:

`<div></div>`

ii)Inline Level Tags: The Elements which only occupy the necessary space bound by the tags and these are doesn`t need to start in a new line.
Example:

`<span></span>`


3.Some most used HTML Tags: 
-> Div tag
-> Heading tags
-> Paragraph tag
-> break tag
-> span tag
-> image tag
-> anchor tag
-> table tag
-> pre(preformatted) tag
-> form tag
-> input tag
-> textarea tag
-> select tag
-> button tag


                          --Thank You--
Sains Komputer - Kata Pengantar
Tags: computerscience, beginners
Published: 2022-09-20 11:09:32

## Daftar Isi
   * [Kata Pengantar](#kata-pengantar)
   * [Daftar Pustaka](#daftar-pustaka)

## Kata Pengantar

Dalam dua tahun belakangan ini saya telah mempublikasikan beberapa tulisan mengenai teknologi dan informasi, tepat sejak saya mulai cukup aktif menulis kembali di internet. Saya memiliki misi di sini, yaitu membagikan hal-hal bermanfaat dari segala sesuatu yang saya baca, dengar, pahami, ataupun alami sendiri. Menurut saya, dari pada berbagi terdapat beberapa bagian dari kebahagiaan hidup. Visi saya jelas, sebagaimana tertuang di dalam Pembukaan Undang-Undang Dasar Republik Indonesia 1945 alinea keempat, yaitu mencerdaskan kehidupan bangsa. Namun dalam prosesnya, saya merasa sangat perlu mewawas diri.

Saya ingin ikut berpartisipasi mengubah pandangan soal sains komputer itu begitu rumit, sehingga orang-orang saya tidak akan lagi beralasan gagap teknologi yang mengakibatkan tertinggalnya mereka dari negara-negara eropa. Yaitu dengan menghadirkan bacaan yang mudah dipahami. Namun, tulisan-tulisan saya selama ini terlalu prosais dan tidak lugas, sehingga malah menyulitkan untuk dipahami.

Saya ingin ikut berpartisipasi mendorong minat baca, sehingga orang-orang saya tidak akan lagi terlalu cerewet di media sosial yang mengakibatkan kurang produktifnya mereka dibandingkan negara-negara tetangga. Yaitu dengan menghadirkan bacaan yang menyenangkan. Namun, tulisan-tulisan saya selama ini selalu tematik dan tidak terstruktur, sehingga malah menyulitkan untuk dirujuk kembali.

Saya ingin ikut berpartisipasi menyebarluaskan ilmu pengetahuan seluas-luasnya. Yaitu dengan menulis dalam bahasa Inggris. Namun, saya menyadari kemudian bahwa orang-orang saya masih belum memiliki kemampuan berbahasa Inggris mumpuni, sehingga malah mengaburkan visi saya.

Berangkat dari hal-hal di atas, saya berharap tulisan-tulisan saya ke depannya dapat diperbaiki sebaik-baiknya sehingga mendukung kesuksesan visi dan misi saya.

## Daftar Pustaka

- https://nasional.tempo.co/read/1488872/gagap-teknologi-dan-infrastruktur-bayangi-digitalisasi-sekolah
- https://www.kominfo.go.id/content/detail/10862/teknologi-masyarakat-indonesia-malas-baca-tapi-cerewet-di-medsos/0/sorotan_media
- https://www.ef.co.id/epi/regions/asia/indonesia/