teleren/devto huggingface dataset:
Implementing Ethical AI
Tags: machinelearning
Published: 2021-12-26 15:43:02

This year, I've been educating myself on how to build ethical AI (machine learning models).  To that end I've read a number of books in the areas of bias, cognition, models and more.  My reading recommendations are shown below.


![Ethical AI Recommended Reading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jlmbkjk30e2q3hh6was.png)


Also, I've collected academic papers, bias detection tools and other resources in a GitHub repo (https://github.com/lynnlangit/learning-ethical-ai/blob/main/README.md).  Shown below are the sections on 'tools' from this repo


![Ethical AI Tool List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydlw50csuhtlf6c3ry77.png)

As I continue to learn about this topic, I'd be interested to hear from you.  What have you read or used to improve the ethics of your machine learning models?  Feel free to comment here or to submit PRs to my GitHub repo.
Server Backend
Tags: jwt, express
Published: 2021-12-26 15:38:30

**JWT:** 

- What is JSON Web Token?
JSON Web Token (JWT) is an open standard that characterizes a conservative and independent way for safely communicating data between parties as a JSON object. This data can be checked and trusted in light of the fact that it is carefully marked. JWTs can be marked utilizing confidential (with the HMAC calculation) or a public/private key pair utilizing RSA or ECDSA.

- How do JSON Web Tokens work?
In verification, when the client effectively signs in utilizing their certifications, a JSON Web Token will be returned. Since tokens are accreditations, extraordinary consideration should be taken to forestall security issues. As a general rule, you ought not to keep tokens longer than required.
At whatever point the client needs to get to an ensured course or asset, the client specialist ought to send the JWT, ordinarily in the Authorization header utilizing the Bearer composition. 

The substance of the header should resemble the accompanying:
          **Approval: Bearer <token>**

This can be, in specific cases, a stateless approval component. The server's ensured courses will check for a legitimate JWT in the Authorization header, and on the off chance that it's present, the client will be permitted to get to secured assets. Assuming the JWT contains vital information, the need to question the data set for specific tasks might be diminished, however, this may not forever be the situation.
In the event that the token is sent in the Authorization header, Cross-Origin Resource Sharing (CORS) will not be an issue as it doesn't utilize treats.

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

- What is Express?
Express gives an insignificant connection point to assemble our applications. It gives us the apparatuses that are needed to fabricate our application. It is adaptable as there are various modules accessible on npm, which can be straightforwardly connected to Express.
Express was created by TJ Holowaychuk and is kept up with by the Node.js establishment and various open-source donors.
ExpressJS is a web application structure that furnishes you with a straightforward API to fabricate sites, web applications and back closes. With ExpressJS, you want not to stress over low-level conventions, processes, and so forth

We have set up the turn of events, presently the time has come to begin fostering our first application utilizing Express. Make another document called index.js and type the accompanying in it.

`var express = require('express');
var app = express();

app.get('/', function(req, res){
   res.send("Hello world!");
});

app.listen(3000);`

Save the document, go to your terminal and type the accompanying.
nodemon index.js

This will begin the server. To test this application, open your program and go to http://localhost:3000 and a message will be shown as in the accompanying screen capture.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3pbvbcdesyspwhek1u2.jpg)
5 Free React Courses To Learn In 2022, If You're Just Starting Out.
Tags: react, career, 100daysofcode, webdev
Published: 2021-12-26 15:36:29

1:  Learn React for free

11 hour-long course, completely free from @bobziroll . 
It contains 140+ interactive coding challenges and 9 projects! Best to begin with.

[https://scrimba.com/learn/learnreact](https://scrimba.com/learn/learnreact)

2: 30 days of react
Beginner friendly and easy to understand with projects.

[https://github.com/Asabeneh/30-Days-Of-React](https://github.com/Asabeneh/30-Days-Of-React)

3: The Beginner's Guide to React

No BS, React only course, working with a single HTML file through all the 28 lessons. @kentcdodds is my favorite teacher in the React community. Check out his other courses, newsletter, etc you won't regret it.

[https://egghead.io/courses/the-beginner-s-guide-to-react](https://egghead.io/courses/the-beginner-s-guide-to-react)

4: Develop Accessible Web Apps with React 
The instructor is an expert in creating accessible React applications. This course will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

[https://egghead.io/courses/develop-accessible-web-apps-with-react](https://egghead.io/courses/develop-accessible-web-apps-with-react)

5:  Build a Web App with React

A free, 5-part video course with interactive code examples that will help you learn React from glitch. 
[https://blog.glitch.com/post/react-starter-kit](https://blog.glitch.com/post/react-starter-kit)

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time
PropTypes in React

Published: 2021-12-26 15:18:31

Props and prop type are important mechanisms in react.props which means “properties” props usually send data from one component to another component in react.If components send wrong data it will show errors and bugs.We pass different type of props like string,number,array,function,objects.When props are passed to a React component, they are checked against the type definitions configured in the propTypes property. When an invalid value is passed for a prop, a warning is displayed on the JavaScript console.``
Use bootsrap modal in angular
Tags: angular
Published: 2021-12-26 00:35:38

Hello

How i ca use modal bootrspa in angular. Show javascript error  ".modal is not a function" when use '  $('#myModal').modal('toggle');' inside typescript

Code:
angular.json
` "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng-auth",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [              
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"              
            ]
          },`

package:
`{
  "name": "ng-auth",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@auth0/angular-jwt": "^4.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap": "^3.3.6",
    "jquery": "^1.11.1",
    "rxjs": "~6.4.0",
    "save": "^2.4.0",
    "tslib": "^1.14.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}`

thx
JavaScript Week-4 Day-4
Published: 2021-12-26 15:11:05

## context API: The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.

## JSX : JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code)

## HOOKS: Hooks are JavaScript functions, but they impose two additional rules:

Only call Hooks at the top level. Don't call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don't call Hooks from regular JavaScript functions.

## custom hooks: Custom Hook is a JavaScript function which we create by ourselves when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.

## State-props: Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component.

## What is the use of PropTypes?
PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.




**Performance Optimization Techniques for React Apps**
1. Using Immutable Data Structures.
2. Function/Stateless Components and React.
3. Multiple Chunk Files.
4. Use React.
5. Avoid Inline Function Definition in the Render Function.
6. Throttling and Debouncing Event Action in JavaScript. 
7. Avoid using Index as Key for map.

## Scope: Scope determines the accessibility of variables to JavaScript. The two types of scope are local and global:

Global variables are those declared outside of a block

Local variables are those declared insides of a block
 

## What is hoisting in JavaScript?
In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution.
24th weekly post, cladding interface. Also, 2022?
Tags: typescript, serverless, css
Published: 2021-12-26 15:10:38

## Items of the week

- **TypeScript** - a main distinction between interface and type aliases is that declaration merging is possible for interfaces, e.g. new fields can be added to an existing interface with an additional declaration of the said interface. This is documented in the [official TypeScript handbook](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces).

- **Serverless** - CLAD is a model to think about Serverless security - Code, Library, Access, and Data. One useful perspective is to treat each function as a perimeter to be secured instead of a single application. Got that from chapter 3 of [Serverless Security](https://www.goodreads.com/book/show/53324854-serverless-security).

- **On the week 51 of 2021**, we saw that the introduction of `:has()` CSS pseudo-class support in Safari Technology Preview Release 137, more details in [the release note](https://developer.apple.com/safari/technology-preview/release-notes/).

This is weekly bite-sized post on web app development from JavaScript to UX and technology in general, started in July 2021, with this one being the last post of the year. Not sure if this is something I want to continue into 2022 but there’ll definitely be change in the format and frequency at the very least, hopefully for the better. Thank you for reading and have a great new year ahead!
Word Concatenation
Tags: 100daysofcode, algorithms, java, programming
Published: 2021-12-26 14:52:52

# Description

Given a list of unique strings `words`, return the number of words that are concatenations of other words in the list. You can reuse words when concatenating and concatenate any number of times.

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `words`
- `m ≤ 100` where `m` is the max length of a string in `words`

## Example 1

### Input

```
words = ["news", "paper", "newspaper", "binary", "search", "binarysearch"]
```

### Output

```
2
```

### **Explanation**

```
"newspaper" is concatenation of "news" and "paper". "binarysearch" is concatenation of "binary" and "search".
```

---

## Example 2

### Input

```
words = ["cc", "c"]
```

### Output

```
1
```

### **Explanation**

```
"cc" is a concatenation of "c" and "c".
```

---

# Intuition

1. create a dictionary
2. look up substring in this dictionary

# Implementation

```java
import java.util.*;

class Solution {
    private final Set<String> DICTIONARY = new HashSet<>();
    public int solve(String[] words) {
        Collections.addAll(DICTIONARY, words);
        int ans = 0;
        for (String word : words) {
            if (isConcatenation(word, 0)) {
                ans++;
            }
        }
        return ans;
    }

    private boolean isConcatenation(String wordStr, int wordCount) {
        int n = wordStr.length();
        if (n == 0) {
            return wordCount > 1;
        }
        for (int i = 1; i <= n; i++) {
            String prefix = wordStr.substring(0, i);
            if (DICTIONARY.contains(prefix)
                && isConcatenation(wordStr.substring(i), wordCount + 1)) {
                return true;
            }
        }
        return false;
    }
}
```

## Time Complexity

- Time: O(n^2)
- Space: O(n)
Moving to create-react-app ver 5.0.0
Tags: react, createreactapp, upgrade
Published: 2021-12-26 14:48:44

I hate it when someone changes the ways things have been done, and then does not give enough information to move to the new way :(. Create React App has just done this with the upgrade to version 5.0.0

If you try create-react-app with an older version 4 installation you get the very helpful message:

`You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
yarn ...`

So I naturally went ahead and did the uninstall :(

`npm uninstall -g create-react-app

up to date, audited 1 package in 488ms

found 0 vulnerabilities`

It didn't uninstall the old version, it just did an _audit_ instead. (I assume there are dependencies installed on the version 4 library.

I tried to reinstall create-react-app and flushing the cache - both with and without the -force option. I could not get a new project created. 

Finally I had to force install the latest version
`npm install create-react-app@latest
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages, and audited 70 packages in 9s

4 packages are looking for funding
  run `npm fund` for details

3 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.`

And finally I could successfully do a create-react-app.

PS. Yes, I did do a fix on the vulnerabilities.
Styled Text Package
Tags: german, flutter, beginners
Published: 2021-12-26 14:33:50

Keine Anwendung kommt ohne Texte aus. Diese Texte zu formatieren ist dementsprechend eine immer wiederkehrende Aufgabe. Flutter hat dafür ohne Zweifel gute Bordmittel. Aber wenn es darum geht größere Textmengen zu bearbeiten wird es rasch aufwendig.

[amazingsoftworks](https://pub.dev/publishers/amazingsoftworks.com) hat für diese Problemstellung eine interessante Package veröffentlicht.
[styled_text](https://pub.dev/packages/styled_text) ermöglicht das Formatieren eines Textes, ähnlich wie man es aus Html kennt. Das heisst, es werden Tags verwendet:

```Dart
class TextKonserve extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StyledText(
      text: '<italic>Dies ist ein</italic> <bold>Test !</bold>',
      tags: {
        'bold': StyledTextTag(
            style: TextStyle(
          fontFamily: 'Raleway',
          fontSize: 20.0,
          fontWeight: FontWeight.w700,
          fontStyle: FontStyle.normal,
          color: Colors.red,
        )),
        'italic': StyledTextTag(
            style: TextStyle(
          fontFamily: 'Raleway',
          fontSize: 20.0,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.w700,
        ))
      },
    );
  }
}
```
Im Code oben ist das Prinzip schön zu sehen. **text:** enthält die zu formatierende Zeichenkette.**StyledTextTag** übernimmt dabei ein **TextStyle** Widget, welches die eigentliche Formatierung enthält.

Wer auf die [Beispiel](https://pub.dev/packages/styled_text/example) Seite der Entwickler surft, findet eine Vielzahl von Einsatzmöglichkeiten. Erwähnen möchte ich hier, das auch das Einbinden von Icons möglich ist, oder die Verwendung von Texten, die über mehrere Zeilen gehen. Es lohnt sich auf jeden Fall die Package zu testen!

Bis bald ! 😀

Photo by <a href="https://unsplash.com/@maxchen2k?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Max Chen</a> on <a href="https://unsplash.com/s/photos/text?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Let's Talk About Cloud Security
Published: 2021-12-26 14:18:04

---
title: Let's Talk About Cloud Security
published: true
description: Cloud Security
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Let's Talk About Cloud Security

There are certainly some new things about how security should be done in the cloud, the goals principles remain the same but there are a  number of new considerations that should be taken into place, the fact that a number of aspect relating to infrastructure are no longer within your control brings about a whole new approach that should be taken in cloud security. The cloud brings a whole new set of challenges and risk, but none the less the essence remains the same. The various pieces and parts of cloud security ranging from IAM (Identity and Access Management) to storage security, network security and other threats like DDOS (distributed denial of Service) intrusion detection systems, API Security etc. Just as the Cloud bring new set of Capabilities and Advantages it as brings about new frontiers of threats as well. These would require that we be more agile ie learn fast from incidences, both from internal and external as well adapt fast. But also moving slowly just enough to absorb and observe changes with the minimal impacts in case of a damage or where we find that our responses wasn't the most appropriate.

Zero Trust Based Model.

the security landscape is quite vast such that in one's architecture there can be so many points of failure and risks such that IAM alone requires sufficient security approach. Identity and Access Management is simply based on the identifying a user and limiting user access to only what resources they need access to and what they can do in such resource such as view only, edit/execute, create and delete etc. We can even go further to restrict from where a user can access a resource and when. Azure's PIM (Privileged Identity Management) serves just this. A common case is that a request from an external source would most likely not be trusted but that from an internal network would be trusted but instead in the zero trust based model all request from within network most be authenticated and access is only allowed based on roles assign to such devices or resources within the network. This protect on incidence such as when a network as being infiltrated and a device has being compromised, this help prevent situation that occur from a threat crawling to other parts of a network or alleviated privileges.


for opinion and suggestions reach me at:
thekubernetesengineer@gmail.com
Docker Compose - PostgreSQL
Published: 2021-12-26 14:08:27

Bom dia meus sqlizers👋(significa amantes de SQL para os desavisados, o mundo às vezes parece grande demais não é mesmo?), gostaria de compartilhar um script para rodar o postgreSQL usando docker-compose e acho que pode ajudar quem quer algo bem simples só botar para rodar e uma dashboard bonitinha para olhar os dados e fazer algumas queries também; Sem muita enrolação bora pro código: 

```yml
version: '3'

services:
  database_postgres:    
    image: postgres:latest
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_USER: username
      POSTGRES_DB: database_name 
    volumes:
      - ${HOME}/postgres-data/:/var/lib/postgresql/data    
      
  pgweb:
    container_name: pgweb
    restart: always
    image: sosedoff/pgweb
    ports:
      - 8081:8081
    links:
      - database_postgres:database_postgres
    environment:
      - DATABASE_URL=postgres://username:password@database_postgres:5432/database_name?sslmode=disable
    depends_on:
      - database_postgres
```

### Explicando um pouco mais

Sobre o serviço **database_postgres** nada muito novo sobre o sol, só algumas variáveis para inicializar o banco com o usuário de forma correta, mas o pulo do gato está em _volumes_ ali eu garanto que uma pasta vai ser criada na pasta home no caso a inicial do usuário e nela que vão ficar os dados do banco então se por acaso você der um `docker-compose down` seus dados não são perdidos, não é o suficiente para colocar seus sistemas em produção mas é uma mão na roda algumas horas 😂.

Na parte da dash que é o serviço **pgweb** tem duas partes legais além da url de conexão que é colocada como variável de ambiente, que é o link que é criado entre os serviços basicamente estou colocando um alias para que o container da dash `pgweb` possa acessar o serviço `database_postgres` pelo nome `database_postgres` que é o mesmo inclusive, deixando tudo em casa. O _depends_on_ é somente para ele não subir antes do banco dados para evitar que ele dê crash já que se ele subir antes ele não vai achar o banco de dados.

Então depois de dar um belo `docker-compose up` já é possível acessar sua bela dashboard pela url `http://localhost:8081/` e fazer suas queries ou só visualizar seus dados pelo navegador sem instalar mais nada.

Bem por isso é só, espero que sirva de ajuda para alguém e qualquer dúvida os comentários estão aí pra isso 🤙