teleren/devto huggingface dataset:
Oracle Database on Docker for Development
Tags: docker, database, devops
Published: 2022-06-29 00:49:30

 ![Oracle Database on Docker for Development](https://res-5.cloudinary.com/dgoa5llvh/image/upload/q_auto/v1/ghost-blog-images/poster.jpg)

Setting up _Oracle Database_ for development in docker is very easy - it also runs in WSL2.

Let's use the **oracleinanutshell/oracle-xe-11g** image. [https://hub.docker.com/r/oracleinanutshell/oracle-xe-11g](https://hub.docker.com/r/oracleinanutshell/oracle-xe-11g)

### Running Oracle Database on Docker

Run the following commands in your terminal.

```bash
#pulls the images from docker hub
docker pull oracleinanutshell/oracle-xe-11g

#runs the image using port forwarding 
docker run -d -p 49161:1521 oracleinanutshell/oracle-xe-11g
```

_Pull and Run Oracle XE 11g_

The output should be something like this.

![Oracle Database on Docker for Development](https://res-3.cloudinary.com/dgoa5llvh/image/upload/q_auto/v1/ghost-blog-images/docker-run.png)

### Set up a new user and configure the tablespace

With the Application running in the background let's create a new Oracle User and set up the appropriate tablespace and grants.

Get the running container Id and attach it running `bash`.

```bash
docker exec -it 82 bash
```

Type `sqlplus` to open SQLPlus in the terminal.

```bash
sqlplus
```

Connect using the _username_ and _password_ below.

```bash
Database Information

hostname: localhost
internal port: 49161
sid: xe
username: system
password: oracle
```

![Oracle Database on Docker for Development](https://res-5.cloudinary.com/dgoa5llvh/image/upload/q_auto/v1/ghost-blog-images/sqlplus.png)
_Connected at SQLPlus_

Run the following commands to set up the new user and tablespace.

```sql
CREATE TABLESPACE TSD_USERDB LOGGING DATAFILE 'TSD_USERDB.DBF' SIZE 200M AUTOEXTEND ON NEXT 200M MAXSIZE 400M;

CREATE TABLESPACE TSI_USERDB LOGGING DATAFILE 'TSI_USERDB.DBF' SIZE 200M AUTOEXTEND ON NEXT 50M MAXSIZE 400M;

CREATE USER USERDB IDENTIFIED BY PASSWORD DEFAULT TABLESPACE TSI_USERDB QUOTA UNLIMITED ON TSD_USERDB QUOTA UNLIMITED ON TSI_USERDB;
```

_Setup tablespace_

Then run the necessary grants.

```sql
GRANT CREATE SESSION TO USERDB;
GRANT CREATE PROCEDURE TO USERDB;
GRANT CREATE VIEW TO USERDB;
GRANT CREATE TABLE TO USERDB;
GRANT CREATE SEQUENCE TO USERDB;
GRANT CREATE TRIGGER TO USERDB;
```

_Setup permissions_

### Connect using SQL Developer

Connect using the recently created user to manage your database.

```bash
Database Information

hostname: localhost
port: 49161
sid: xe
username: USERDB
password: PASSWORD
```

![Oracle Database on Docker for Development](https://res-1.cloudinary.com/dgoa5llvh/image/upload/q_auto/v1/ghost-blog-images/sql-developer-connection.png)

All done here. If you like it subscribe for more content.
Twitter Logo | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-06-29 00:36:53

In today’s tutorial, I finished creating a Twitter Logo with CSS. This is a staple that we all use. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are CSS inspired. You can check them out [here](https://codepen.io/rembertdesigns).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/GRxRQza %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Learning curve & the impostor syndrome
Tags: programming, beginners, career
Published: 2022-06-28 23:41:04

The world of technology is really amazing, right? The amount of still unimaginable things that we humans can create, automate simple everyday tasks no matter how silly, request and receive information in seconds, have you noticed?

In this huge world, we can learn many things any second just by typing whatever we want.
But is it really that easy to learn and master ANYTHING?

Every subject has a learning curve, it can be a short period of time and it can be a long time without end, and at some point in our lives we all go through the stage of imposter syndrome. If you don't know what this is, I'll explain it quickly:

Imagine you've been studying any programming language for months, so you want to meet other programmers to share knowledge. After a while you're not feeling comfortable with your own knowledge, you feel like you've been wasting the last few months to learn nothing, it seems like everyone is better than you at everything... and out of nowhere, you start to feel as the worst person of the world and all you can think is - "I'm a fraud"

Have you ever felt something like this?

Here's the thing, you're not and you were never a fraud. Everyone has had that moment: "I'm the smartest person alive" and of course the classic "Oh my God, how did I miss this, I'm so dumb."

The amount of time one person needs to learn a subject is completely different from another. Each person has their own way of processing, collecting and knowing how to use information, but hey don't get it twisted, be sure that you are learning the right thing, we usually learn from mistakes!

Patience is key when learning new things, sometimes you may need to review something again and that's ok! So hey, whenever you feel useless and wasting time, please don't forget, everything is a work in progress, so don't stop just because you couldn't handle something today, you'll be able to do it tomorrow, maybe you just need to breathe a little.
Como instalar o hardhat
Tags: ethereum, web3, solidity, tutorial
Published: 2022-06-28 23:34:00


[Link do projeto no github](https://github.com/viniblack/criando-primeiro-smart-contract)

Neste tutorial, apresentaremos o passo a passo de como criar um smart contract usando o VS Code.
Como exemplo, criaremos o nosso próprio token.

## Requisitos mínimos
- [VS Code](https://code.visualstudio.com/download) >= v.1.64
- [Node.js](https://nodejs.org/en/download/) >= v.12.0

## Instalação
No terminar do VS Code:
1 - Vamos criar o `package.json` com uma configuração base
```
npm init -y
```

2 - Vamos instalar o `hardhat` como dependência de desenvolvimento.
```
npm install --save-dev hardhat
```

3 - Vamos fazer a configuração do `hardhat` no projeto
```
npx hardhat
```
Esse comando irá te fazer algumas perguntas para saber que tipo de projeto você deseja criar
```
What do you want to do?
┗ Create a basic sample project
```
Onde você deseja criar o projeto do Hardhat
```
Hardhat project root
┗ Enter
```
Se deseja criar o arquivo `.gitignore`
```
Do you want to add a .gitignore? 
┗ Y
```
Se deseja compartilhar as informações do seu projeto com o Hardhat
```
Help us improve Hardhat with anonymous crash reports & basic usage data?
┗ N
```
Se deseja já instalar as dependências do projeto
```
Do you want to install this sample project's dependencies with npm (@nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)?
┗ Y
```
Após execurtamos esses comandos o hardhat vai ter criado uma um projeto base para nós conseguirmos trabalhar

![Arquivos criado até agora](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxmgr1pf6cx05dhc98ru.png)

## Conclusão
Esse post é o primeiro post da série de posts "Criando o seu primeiro smart contract com testes unitários"

---

### Vamos trocar uma ideia ?
Fique a vontade para me chamar para trocarmos uma ideia, aqui embaixo está meu contato.

https://www.linkedin.com/in/viniblack/
My Solution to TOP Fundamentals Part 3 Problems
Tags: javascript, beginners, tutorial
Published: 2022-06-28 23:20:18

## These are my answers that I came up with for The Odin's Project exercises using arrow functions.

- 1. Write a function called add7 that takes one number and returns that number + 7.

```
const add7 = (num) => num + 7;
```

- 2. Write a function called multiply that takes 2 numbers and returns their product.

```
const multiply = (x, y) => x * y;
```

- 3. Write a function called capitalize that takes a string and returns that string with only the first letter capitalized. Make sure that it can take strings that are lowercase, UPPERCASE or BoTh.

```
const capitalize = (str) => {
let firstLetter = str.slice(0,1);
let restOfStr = str.slice(1,);
return `${firstLetter.toUpperCase()}${restOfStr}`;
}
```
- 4. Write a function called lastLetter that takes a string and returns the very last letter of that string.

```
const lastLetter = (str, n) => {
let theLastLetter = str.slice(-1,);
return theLastLetter;
}
```
Event Bubbling
Tags: javascript, eventbubbling
Published: 2022-06-28 18:41:06

## Referência
Você já reparou no comportamento de uma garrafa ou copo de refrigerante? Percebeu como as bolhas se deslocam do fundo até o topo do copo?

![soda bubbling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5vycbng9luttpkyac7t.gif)

O event bubbling no javascript funciona de maneira similar, quando alguma ação ou interação com o HTML é feita por um componente filho, o evento que é causado por efeito colateral é propagado como uma "bolha" até o elemento pai, que lida com o mesmo.

## Prática
Podemos observar os seguintes elementos:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <div onclick="alert('elemento pai')">
      FORM
      <div onclick="alert('elemento filho')">
        DIV
        <div onclick="alert('elemento neto')">P</div >
      </div>
    </div>
  </body>
</html>
```
Ao clicarmos no _elemento neto_ temos o efeito bubbling e o evento será propagado e acionado nos demais elementos ancestrais, ou seja, ocorrerão três alertas:

alerta 1 “elemento neto”

alerta 2 “elemento filho”

alerta 3 “elemento pai”

Como essa propagação só ocorre entre os ancestrais, esse movimento nos três elementos só funciona partindo do elemento neto. Caso o clique seja aplicado no elemento filho, a propagação trará o seguinte resultado:

alerta 1 “elemento filho”

alerta 2 “elemento pai”

Podemos verificar o comportamento:

{% codepen https://codepen.io/julianepires/pen/NWyQzdx %}

## Interromper Propagação
Para que a propagação seja interrompida, devemos utilizar o stopPropagation. Assim, quem lidará com o evento será o próprio elemento e não chegará aos elementos ancestrais.

Podemos observar então esse comportamento:
{% codepen https://codepen.io/julianepires/pen/OJvJjxQ %}

Ao clicarmos no elemento filho, a propagação não irá ocorrer para o elemento pai porque foi interrompida, o mesmo não ocorrerá para o elemento neto pois a propagação só funciona para elementos ascendentes.

Também podemos observar que, após o clique no elemento neto, o evento se propaga para o elemento filho e para nele, interrompendo a propagação.

É isto!

Para mais informações, aqui fica o artigo de inspiração [eventBubbling Javascript](https://javascript.info/bubbling-and-capturing)
I wonder whether you are a proper stakeholder.
Tags: productivity
Published: 2022-06-28 23:11:50

Working on a project requires a lot of resources. The difficulty of gathering resources is secondary to developing a product concept. This problem makes the basis that a project requires three or more stakeholders who are relevant to the objectives of a product, but they are ready in terms of resources such as money and infrastructure.

Quoting to the Project Management Institute, the failure of a project is usually caused by a lack of project sponsors. The project sponsor is the main stakeholder who provides a lot of resources and advocacy from the very beginning of the project until the project is completed. However, in a project, there is not only a project sponsor. But several other stakeholders need to be identified by:
1. Ask your project sponsor and business analyst for a preliminary list of stakeholders.
2. Interview specific people on your team to gain knowledge about stakeholder groups.
3. If you want to engage a larger audience, hold workshops.
4. Also, provide a survey for all stakeholder teams working remotely.
5. The most important thing, of course, is to review the project documentation. From here, you will know a lot of information, such as the business processes and organizational structure of the project being worked on.

Don't let the list of stakeholder names spread across multiple documents; make it a primary copy. This document is called the Stakeholder Register, in the form of a table like this.

![Stakeholder Register](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1pe4s0gecmp063fjssn.png)
 
The list of stakeholders is then made into a map by considering the strengths and interests in this project.

![Matrix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxcv2psn1dhiyd8rtsxr.png)
 
After mapping all existing stakeholders, it's time to make an engagement plan between existing stakeholders using the Stakeholder Engagement Assessment Matrix.

![Assessment Engagement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mp83e0czze21zfoh4uu.png)
 
This table will map each stakeholder at which level, complete with the desired level of transformation of these stakeholders. To make changes to a level that is below the Neutral level, you can do it in two ways, namely:
1. We identify the reason for resistance. It could be a concern about losing control over the process or being fearful about learning new systems.
2. Find ways to minimize concerns and maximize opportunities.

Well, that's the way to manage stakeholders in a project. Let me know if you have several questions to be clarified in the comment section below!
TipTap image resize extension
Tags: react, opensource, npm
Published: 2022-06-28 23:09:36

We've worked on various projects which made use of the [TipTap text editor](https://tiptap.dev/). It's an opensource editor with quite a few extensions and built-in options.. However (for us), it's missing one important feature... Image resizing!

That's why we made a script that extends the normale image module and adds the resize feature. We will explain how to install and maybe change some looks to your liking.
(sorry Vue and other frameworks, React only for now)

## Installation
Run `npm i tiptap-imagresize` or `yarn add tiptap-imagresize`
After that import the `ImageResize` module where you initialise your editor. If the image module exists replace it with the `ImageResize` module, otherwise just add it.
```ts
const editor = useEditor({
        extensions: [ StarterKit, ImageResize],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })
```

## Options
Since I try to make this post as simple as possible i will only cover the resize icon..
You can alter it by adding the configuration function to the `ImageResize` extension. I will use React-icons as example on how to use your own icon for the resize icon.
```ts
import {GrBottomCorner} from 'react-icons/gr'

const editor = useEditor({
        extensions: [ StarterKit, ImageResize.configure({resizeIcon: <GrBottomCorner/>})],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })
```
Simply passing content in the `resizeIcon` will render anything you want in the corner.

## Styling
Since there are quite a few options to solve the styling part I gave the general (S)CSS that's used in our [repository/readme](https://github.com/breakerh/tiptap-image-resize). I will also include it below.
If you work with scss or css files you can use either of the codes below.. For `styles` or other solutions you will have to convert this css to that or create your own styling for it.

### SCSS
```scss
.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
    .resize-trigger {
      position: absolute;
      right: -6px;
      bottom: -9px;
      opacity: 0;
      transition: opacity .3s ease;
      color: #3259a5;
    }
    &:hover .resize-trigger {
      opacity: 1;
    }
  }
```

### CSS
```css
.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
 }
.image-resizer .resize-trigger {
  position: absolute;
  right: -6px;
  bottom: -9px;
  opacity: 0;
  transition: opacity .3s ease;
  color: #3259a5;
}
.image-resizer:hover .resize-trigger {
  opacity: 1;
}
```

## That's it!
That's all you need to get this working! Miss something or found some issues? [Let me know in my repository](https://github.com/breakerh/tiptap-image-resize) and I will try to respond a.s.a.p!

Good luck all of you!
Find the Average of a Given Array of Numbers
Tags: foreach, forloop, reduce, arrays
Published: 2022-06-28 23:07:11

---
title: Find the Average of a Given Array of Numbers
tags: ["foreach", "forloop", "reduce", "arrays"]
created: 2022-28-06
---

## Find the average of all numbers in a given array

Let's say we wanted to write a function that calculates the average of all grades (including yours). We can do this in many different ways in JavaScript, but in this demo I will be showing you how to find the average using Higher-Order Functions and the "for" loop.

### forEach loop

The forEach() method executes a provided function once for each array element.

```js
const yourGrade = 88;
let classGrades = [
    87, 68, 94, 100, 83,
    78, 85, 91, 76, 87
];

// push `yourGrade` to the end of classGrades
classGrades.push(yourGrade);
console.log(classGrades);

function average(array) {
  // initialize value of `sum`
  let sum = 0;
  // capture the length of the array
  let arrayLength = array.length;
  // loop through the array via forEach
  array.forEach((grade) => {
    return (sum += grade);
  });
  // formula to calculate average: sum / arrayLength
  return Math.round(sum / arrayLength);
}
const avg = average(classGrades);
console.log(avg);
```

### for loop

The `for()` loop iterates a specified amount of times, and does "something" that many times.

```js
const yourGrade = 88;
let classGrades = [
    87, 68, 94, 100, 83,
    78, 85, 91, 76, 87
];

console.log(classGrades);

function average(array) {
  // initialize value of `sum`
  let sum = 0;
  // capture the length of the array
  let arrayLength = array.length;
  // iterate over the array
  for (let i = 0; i < array.length; i++) {
    // add each element to the `sum`
    sum += array[i];
  }
  // formula to calculate average: sum / arrayLength
  /* since we are not pushing our grade to the array
   using `array.push()`, we need to do a little bit of algebra
   to add ourselves to the list */
  return Math.round((sum + yourGrade) / (arrayLength + 1));
}
const avg = average(classGrades);
console.log(avg);
```

## reduce

The `reduce()` method is quite similar to the `forEach()` method, but requires a lot less coding. :)

```js
const yourGrade = 88;
let classGrades = [
    87, 68, 94, 100, 83,
    78, 85, 91, 76, 87
];

// push `yourGrade` to the end of classGrades
classGrades.push(yourGrade);
console.log(classGrades);

function average(array) {
    // action to do for every value
  const avg =
    array.reduce((previousValue, currentValue) =>
    previousValue + currentValue) / array.length;
  return Math.round(avg);
}
const avg = average(classGrades);
console.log(avg);
```
Day 81: Time management replan
Published: 2022-06-28 22:55:00

Hi!
With new flow that I'm currently working in I noticed that it's becoming harder to manage the work assignments, personal learning, personal life or even tracking progress so I now think a Time management replan to replan how I use my time in different daily chores. time tables and routines doesn't usually work on me but I think I don't have much of a choice in this case as there are a lot to do and not much time available so I will be working on that as well
Today I fixed the issues that were in the authentication flow features and started working on dashboards I was just researching about firebase `getCurrentUser` and `onAuthStateChanged` functions that I plan to use tomorrow to create private routes
that's it for today

signing off...
Mini challenge: PHP
Tags: php, quiz
Published: 2022-06-28 22:27:36

Hello, coders! :computer:

Here's another quick quiz.
Using PHP, how would you extract `878` from the string below?

```php
$confFile = '/etc/nginx/sites-enabled/878.test.mysite.com.conf';
```

{% details View my solution %}

Here’s a possible solution that leverages type juggling.

```php
$confFile = '/etc/nginx/sites-enabled/878.test.mysite.com.conf';
$number = (int) basename($confFile);
```

`basename` removes everything before the rightmost `/` and returns `878.test.mysite.com.conf`.
Then by taking advantage of PHP’s type juggling we convert that string to an int and are left with `878`.
{% enddetails %}

Happy coding! :keyboard:
Simplified Kubernetes Cluster Deployment: Accelerate Your Setup on Debian 10/11
Tags: kubernetes, docker, ansible, tutorial
Published: 2022-06-28 21:53:51


After a long absence, I'm back on the platform with a new tutorial about a kubernetes cluster deployment on X environments with a Master and X workers.

This tutorial does not necessarily require a lot of knowledge in kubernetes or ansible. Since the script executes everything for you.

You just have to fulfill the prerequisites for the proper functioning of the script.

## Prerequisites
You can view / clone my work from my Github directory: https://github.com/ArsNQ/deployKubernetes

- OS : Debian 10 / 11.
- Have ansible installed on your computer.
- Have 4 machines (1 Master / 3 nodes) Can also run with 1 master & 1 node, etc...

## Changes to make to run the ansible script.
First, if you haven't copy/paste your rsa.pub keys on the remote servers. You can use the **join.sh** script, which allows through a pem or ppk key to deploy your rsa key.

In a second step you must fill the **hosts** file with the information between < ... >.

And thirdly you have to fill in the **--apiserver-cert-extra-sans=<ip_address>** at the following path **"/setMaster/tasks/main.yml"**

## Launch ansible script.
You must go to the **root** of this folder, and run the following command:
```bash
ansible-playbook -i hosts playbook.yml

. <-------------- HERE -------------->
├── README.md
├── hosts
├── installDocker
├── installKubernetes
├── join.sh
├── playbook.yml
├── setMaster
└── setWorkers
```

And if you had followed the steps that I indicated to you, you should have the following result !!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emudbamp8dyqqmnueqpe.png)
 
I hope this article will help you and see you soon!
Google Ads Logo | Pure CSS
Tags: codepen, css, tutorial, showdev
Published: 2022-06-28 21:48:40

In today’s tutorial, I finished creating a Google Ads Logo with CSS. This is a Google Ads Logo using `keyframes` to move the the ball to the end of a line. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are CSS inspired. You can check them out [here](https://codepen.io/rembertdesigns).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/oNqNpYx %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)