teleren/devto huggingface dataset:
💡 TIL: Listen for a right click with "contextmenu"
Tags: javascript, react, typescript, beginners
Published: 2020-08-27 03:44:31

TIL: If you want to listen for a right click in JavaScript you can use the `contextmenu` event.

Example with `.addEventListener`:
```
btn.addEventListener(`contextmenu`, ()=>{})
```


In React with JSX:
```
<Button onContextMenu={()=>{}}/>
```


I always used to check some key code or another event property ... 🤣
"FOOT IN THE DOOR" what "code" can get out into web design fastest/ best?
Tags: javascript, python, java, kotlin
Published: 2020-08-27 03:39:23

what position, 
is best to look for, when your proficient in a certain language? what do people look for?
what language can get you a stable "foot in the door" ...vs.... "ehh, "see how you like it",

im not really liking frontend that much because of how many variations... to a button there is. 
BUT i do like seeing interactions, 
unless, if you can't see it, i like where it can be caught to "make it work" sooner.
#100DaysOfCloud | Day 2
Tags: 100daysofcloud, aws, kubernetes
Published: 2020-08-27 03:29:11



What Did I learn -

Kubernetes is essentially a container management console or orchestration module that can deploy thousands of containers with one command and perform rolling updates and can scale up and down, similar to an application load balancer in AWS (You can use an ELB in EKS). It manages decisions, scheduling, and configs of the worker nodes, worker nodes deploy pods that contain our clusters. 
You can run EKS with a serverless option with managed EC2 Clusters, primarily for stateful or long-running app like a web server. Alternatively, you can run a serverless option with Fargate, this is for short-lived or stateless processes, preferably for volatile services. You can store your images in Elastic Container Registry, Artifactory, or Docker Hub. 
Primary tools with Kubernetes are ```eksctl & kubctl``` Tools to create, delete, and get info about clusters.


What Did I Do -
I created a CodeStar Project utilizing the HTML EC2 Template. From here I set my IDE environment as cloud 9 so I could work from the browser. From here I went to CodeCommit Repositories, went into the Webpage folder, and made an adjustment to the Index.html file. From here I watched the execution push my change from the ApplicationSource in CodeCommit, to Build the new export in CodeBuild, generating and executing the change in CloudFormation to Deploying the new change in CodeDeploy.



For tomorrow -
Well since I didn't get to my hands-on with the Minecraft/Dockercraft server I mentioned yesterday due to the CodeStar app build I will have that lab tomorrow.
Mapping out your Projects
Tags: productivity, agile, management
Published: 2020-08-27 03:10:53

I've been kicking around in my head the basic way I do project management for non-software stuff and I think it has some interesting applications in software development.

I usually start with some kind of todo list but rarely is that sufficient for mapping out the work of non-trivial projects. I think that's because work very often has dependencies and order of completion isn't merely driven by anyone's opinion-based priorities. To encode the concrete dependencies I've started building little flow-charts to capture what things need to be done, their status and in what order.
Here's an example from my treehouse project:

![Treehouse Project Flowchart](https://dev-to-uploads.s3.amazonaws.com/i/zn0n4hipscpdi7v3gg9k.png)

This particular chart has been really useful because I have a small workforce (my kids and some of their friends) and I need to give them concrete things to do that are within their skills.

Working alone, I can just reevaluate what the next step is myself and that works a lot of the time but I've found it hard to list off all the remaining tasks that are unblocked on the job site. I share the chart with the kids and they can just pick up anything green, or if they can't decipher it I can break things down as needed.

I think this kind of diagram is good for answering these questions:

1. What can be done now?
2. What is in progress?
3. What is blocking progress towards completion? (e.g. do we need to buy materials or complete dependent tasks)
4. What has been completed?
5. What are our next major goals and what do we have to do to achieve them?

It doesn't show time spent, complexity, HR allocation, or estimation. However I can look at it and see that potentially half a dozen people can work on the project simultaneously without conflict. I can also use this graph to create a disposable work list for the day and I have to wonder is that really a better model than a persistent work list (kanban or scrum board). I can see what blockers can be prioritized to maximize utilization or work toward specific milestones. 

Give this exercise a shot the next time you have a non-trivial project and I'd love to hear how it goes.
Docker basic concepts
Tags: docker, database, 100daysofcode
Published: 2020-08-27 02:58:51

Docker helps us to manage the services of our applications (Databases or another external service). We can use to create isolated systems in our machine, this means a service doesn't interfere in other services or in our server. The services in our machine are called by images, images are services available to us,  containers are instances of these services, are isolated of the rest of our server, containers expose one port to communicate with our machine, we communicate with a container mapping one port of our machine to one port of container, then we have a way to communicate with container.

## How to install a new image on docker

Firstly we define which service we use on our application, in this case I will use Postgres. Searching for Postgres Image on google we find the site called by [https://hub.docker.com/_/postgres](https://hub.docker.com/_/postgres) , there you can find a more detailed tutorial, but basically is possible to download a docker image with the following command:

```bash
docker run --name database -e POSTGRES_PASSWORD=docker -p 5432:5432 -d postgres
```

Analizing each pice of the comand above, we got:

- docker run ⇒ Create and start a new container with the specify image.
- —name database ⇒ Setting a name to our container.
- -e POSTGRES_PASSWORD=docker ⇒ Setting environment variables, postgres_password is required for you to use the PostgreSQL image.
- -p 5432:5432 ⇒ Mapping [Host port] : [Container port]
- -d ⇒ Start container in background
- postgres ⇒ Name of the image

After creating our container, how if all is working as we expected? The command docker ps, show all containers running at the moment. If you want to see all containers instead only running you do it using docker ps -a.

# References

[http://dockerlabs.collabnix.com/docker/cheatsheet/](http://dockerlabs.collabnix.com/docker/cheatsheet/)

[https://hub.docker.com/_/postgres](https://hub.docker.com/_/postgres)
[PT-BR] Join SQL, quando usar?
Tags: sql, dml, database, join
Published: 2020-08-27 02:29:22

Hello pessoas, como vão? Nesse post eu irei falar sobre os tipos de joins (junções) existentes no SQL e qual cenário usar cada um deles. Na maioria das vezes estou sempre esquecendo até como faz um update e corro para o Google. Bom, vamos lá.

##**O que é o Join?**##

Basicamente, o join é a combinação de tabelas através de colunas em comum nessas tabelas (Primary Keys e Foreign Keys, prometo um dia falar disso).


##**Tipos de Joins**##

Existem três tipos de junções:

- **Inner Join**: busca os dados se estiverem presentes nas duas tabelas.
- **Outer Join**: aqui, são de três tipos.
     - **Left Outer Join**: busca os dados se estiverem presentes na tabela da esquerda.
     - **Right Outer Join**: busca os dados se estiverem presentes na tabela da direita.
     - **Full Outer Join**: busca os dados se estiverem presentes em qualquer uma das duas tabelas.
- **Cross Join**: um produto cartesiano de ambas tabelas, cruzamento de tabelas.

##**Tabela Pessoa**##

![Imgur](https://i.imgur.com/bC8LCHa.jpg)

##**Tabela Endereço**##

![Imgur](https://i.imgur.com/5JXvFoS.jpg)

##**Sintaxe**##

**Inner Join**

```SELECT * FROM pessoa p
INNER JOIN endereco e on p.idpessoa = e.idpessoa```

![Imgur](https://i.imgur.com/aQYpmfy.jpg)

Um detalhe aqui, o *inner* é opcional. Isso de acordo com a documentação, ok? O legal é sempre especificar qual tipo de junção está fazendo, caso faça apenas *join*, o padrão é *inner*.



**Left Outer Join**

```SELECT * FROM pessoa p
LEFT OUTER JOIN endereco e on p.idpessoa = e.idpessoa```

![Imgur](https://i.imgur.com/3y4Ry1w.jpg)

**Right Outer Join**

```SELECT * FROM pessoa p
RIGHT OUTER JOIN endereco e on p.idpessoa = e.idpessoa```

![Imgur](https://i.imgur.com/aoXxedx.jpg)

**Full Outer Join**

```SELECT * FROM pessoa p
FULL OUTER JOIN endereco e on p.idpessoa = e.idpessoa```

![Imgur](https://i.imgur.com/GW87EfU.jpg)

Gente, outro detalhe aqui: o *outer* também é opcional, tá bom?
*Left Join* e *Left Outer Join*, são a mesma coisa.

-- uma observação, eu fiz os exemplos no MySQL e ele não suporta o **FULL JOIN**, então tive que fazer um **UNION** (falarei sobre isso em outro post) para poder simular o Full Join, sorry.

**Cross Join**

```SELECT * FROM pessoa p
CROSS JOIN endereco e ```

![Imgur](https://i.imgur.com/lGEkIun.jpg)


**Mas Gabriela, o que é esses *p*, esses *e*, que você está colocando em frente ao nome das tabelas?**
Bom, isso são os alias (apelidos) que dei as tabelas para que não seja necessário estar sempre digitando o nome inteiro da tabela. 

**Tá, e esse *idpessoa*, por que você usou ele?**
**idpessoa** é a chave primária da tabela *pessoa*. Na tabela *endereço*, o idpessoa é uma chave estrangeira que faz referência a tabela de pessoa, sendo assim, usado para fazer as junções entre as tabelas.

**Gabi, quando eu devo usar cada um desse ai?**
Tudo vai depender dos dados que você quer buscar e onde você vai buscar esses dados.


Então, até o momento é isso. Dúvidas, sugestões fiquem sempre à vontade para falar :)
Why Ethereum Diamonds Need A Standard
Tags: solidity, ethereum, smartcontracts, blockchain
Published: 2020-08-27 02:15:55

[EIP-2535 Diamonds](https://eips.ethereum.org/EIPS/eip-2535) encapsulates some good ideas and a pattern for developing flexible smart contract-based applications. 

The EIP explains the pattern and how it works. And it standardizes certain things. But *why*?

I think the reasons why diamonds need standardization deserves more attention. And it is an area that people and developers can help with.

Standardization is needed to make the diamond pattern more useful and fulfill its design.

Specifically standardization is needed for these two things:

1. Transparency
2. Interoperability

## Transparency

A key feature of the Diamond Standard is transparent upgrades on blockchains. The Diamond Standard used to be the [Transparent Contract Standard](https://eips.ethereum.org/EIPS/eip-1538). There is an [interesting article about it that covers transparency](https://coinjournal.net/news/erc1538-future-proofing-smart-contacts-and-tokens/).

A diamond provides at least two kinds of transparency:

1. Realtime transparency, using the diamond loupe.
2. Historical transparency using the DiamondCut event.

The diamond loupe enables people to see what functions and facets a diamond currently has. This is standardized so that tools can be made to show people what functions and facets a diamond has. There is a many to many relationship here.  There can be many diamonds.  There can be many (or multiple) client software programs that show diamonds. Standardizing the loupe functions makes this many to many relationship possible. Standarizing the loup functions encourages software to be developed that makes diamonds more transparent.

The `DiamondCut` event is emitted any time any function is added/replaced/removed on a diamond. This is standardized so that multiple software programs can be developed that can show all upgrades to all diamonds on a network, thus making diamond upgrades transparent. 

Etherscan has expressed some interest in supporting diamonds and I think there will be more interest in creating diamond transparency tools and user interfaces as more projects use the Diamond Standard. 

Check out https://louper.dev/ which is a user interface that can work for all diamonds.

## Interoperability

The `diamondCut` function adds/replaces/removes any number of functions on a diamond in a single transaction. This function is standardized so that multiple tools can be made to create diamonds and upgrade upgradeable diamonds. This enables someone with diamonds to migrate or use different tools, or have more choice of tools, for upgrading or creating diamonds.

Various tools have been created for creating, deploying, upgrading and viewing diamonds. See the [Tools section of Awesome Diamonds](https://github.com/mudgen/awesome-diamonds#tools).

I expect more tools to be created.
Technique Two Pointers and memoization.
Tags: 100daysofcode, javascript, algorithms, interview
Published: 2020-08-27 02:14:55


Coding Problem:  Given an array of numbers and an index i, return the index of the nearest larger number of the number at index i, where distance is measured in array indices.

## Example:
For example, given `[4, 1, 3, 5, 6]` and index `0`, you should return `3`.

## Conditions:
1) If two distances to larger numbers are the equal, then return `any one of them`.
2) If the  array  at i doesn't have a nearest larger integer, then return `null`.

## Extra:
* Follow-up: If you can preprocess the array, can you do this in constant time?


## Problem solution: 

 1) Technique: Two Pointers(in this case not order array)
 
 ```js   
const findNearestLarger = (idx, arr) => {

    const value = arr[idx], len = arr.length;

    //Two pointers start with the same value
    let [down, up] = [idx, idx]

    while (up < len || down >= 0) {
              ++up;
            --down;
        //  condition 1
        if (down >= 0 && arr[down] > value) { return down }
        if (up < len && arr[up] > value) { return up }
    }
    // condition 2
    return null;
 }

```

### Extra O(1) with preprocessing and memoization:


```js

function dynamic() {

    let cache = new Map();
    let ant_arr = [];

    const preprocessing= findNearestLarger; 


    return function nearestLarger(idx, arr) {

        // Compare previous arr with new arr received
        if (JSON.stringify(ant_arr) === JSON.stringify(arr)) {
            //Follow-up: If you can preprocess the array,
            // can you do this in constant time?
            return cache.get(idx);

        } else {

            // Update the new matrix for the first time
            ant_arr = arr;
            //Preprocessing
            for (let i = 0; i < ant_arr.length; i++) {
                cache.set(i, preprocessing(i, ant_arr));
            }
            // result
            return cache.get(idx);
        }

    }
}


```

### Simple test:

```js

let arr = [4, 1, 3, 5, 6];
let idx = 0; // you should return 3.

let fastNearestLarger = dynamic();

console.log(fastNearestLarger(0, [4, 1, 3, 5, 6]))

```
You can check  
 <a href="https://github.com/difo23/interviewQuestAnsJS" target="_blank"> code </a> by @difo23
Implement in a modern language: 10 PRINT CHR$(205.5+RND(1)); : GOTO 10
Tags: challenge
Published: 2020-08-27 02:08:14

A very popular 1 liner program for Commodore 64 was the one from the title. You can read more about it here: https://10print.org/

It basically printed randomly the / and \ characters. Although the program was very simple the effect looked as a very detailed maze.

The challenge I'm proposing you is to implement this effect in a modern programming language (JavaScript, Python, Lua, C++, C#, Java, Swift, etc.). Your choice!

P.S. For reference please check this JavaScript implementation:
https://codeguppy.com/code.html?t=commodore_patterns
Pass parent's async data  to child component in NuxtJS
Tags: nuxt, vue
Published: 2020-08-27 02:07:41

One solution that passes data to a child component as props and gets another async data with the props.

**parent component**
```
<template>
  <Selector :user-id="userId"/>
</template>

<script>
import Vue from "vue";
import Selector from "~/components/Selector.vue";

export default Vue.extend({
  components: { Selector },

  data() {
    return {
      userId: undefined
    };
  },

  async fetch() {
    this.userId = await this.$asios.$get("http://example.com");
  }
});
</script>
```

The parent component passes `userId` as props.

**child component**
```
<template>
  <p v-if="user">{{ user.name }}</p>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: {
    userId: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      user: undefined
    };
  },

  watch: {
    userId() {
      this.getUser();
    }
  },

  methods: {
    async getUser() {
      if (!this.userId) {
        return;
      }

      this.user = await this.$asios.$get("http://example.com/get_user");
    }
  }
});
</script>
```

After the child component get a `userId` with `watch()`, it requests an async user data.
Customize File Input Element Using JavaScript & CSS
Tags: html, css, javascript
Published: 2020-08-27 01:48:02

There are numerous ways to customize the file input element in HTML. In this post, we are going to make the file input element more attractive using JavaScript and CSS.

# HTML
We are going to use one <svg></svg> element to show an icon and one <span></span> to show selection text inside a <label></label> along with <input type='file'/> to design the input element. So the label is the container for SVG icon and span text. This is how our HTML code looks like:

```
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
<label for="file-1">
	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
		<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
	</svg> 
	<span>Choose a file...</span>
</label>
```

# Final Output

![Customize File Input Element Using JavaScript & CSS](https://mushfiqweb.com/wp-content/uploads/2020/08/b21AsVXH5b.gif)



Read full article: [Customize File Input Element Using JavaScript & CSS](https://mushfiqweb.com/customize-file-input-element-in-your-own-way/).
Styling html with materializecss custom classes
Published: 2020-08-27 01:32:23


"Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components help in constructing attractive, consistent, and functional web pages and web apps, while adhering to modern web design principles such as browser portability, device independence, and graceful degradation."

**examples:**
* [Github of examples](https://github.com/3Mustard/materializecssTutorial)
* [Github of website designed with materialize](https://github.com/3Mustard/website-template-materializecss)

**Setup** 
* add links to the materialize stylesheet, javaScript and google font images found [here](https://materializecss.com/getting-started.html)

**Why I enjoy using it**
* opinionated about how elements should look and behave according to design principles followed by google
* beautiful design with out of the box custom class
* easy to use
* supports responsive design 
* plenty of documentation 
* ruby gem for additional quick implementation 
* open source

**Example of usage**
* Adding a class provided by materialize like "container"
```<div class="container">anything in a class container has custom margins</div>```
Scope in JavaScript
Published: 2020-08-27 01:27:29


**Global Scope**

Contains variables declared outside of any functions 

```
let myCat = "Akira"

function feedCat(){
  console.log(`${myCat} was fed.`) //Akira was fed
}
```

the function feedCat has access to the variable myCat because it was declared in global scope.

**Local Scope**

Variables defined within a function

```
function printName(){
  let name = "Matt"
	console.log(name) //Matt 
}

console.log(name) //Uncaught ReferenceError: name is not defined
```

name is declared in the function printName and cannot be accessed outside of it.

**Block Statements**

let and const declared in blocks(if,switch,for,while) support the declaration of local scope
vars do not.

```
function myFunction() {
    var a = "first Value"
    let b = "first Value"
    const c = "first Value"
    d = "first Value"
    if (true) {
      var a = "second Value"
      let b = "second Value"
      const c = "second Value"
      d = "second Value"
    }
    // what will each statement log to the console?
    console.log(a) //second value
    console.log(b) //first value
    console.log(c) //first value
    console.log(d) //second value
}
```

let and const support local scope in block statements, console.log is called outside of the if block so it has no idea what the values of b and c are within that block. 

var does not support local scope in a block statement so when if (true) is evaluated and var a is assigned "second value" it overwrites var a = "first value"

d is a global variable and so it can be accessed and changed anywhere in our code.
How do I activate a Wildcard SSL certificate with Let's Encrypt on an AWS Lightsail Bitnami WordPress multisite Installation? 
Tags: aws
Published: 2020-08-27 01:12:58

Hi Team, 

I am running a multisite Wordpress Bitnami installation on an AWS Lightsail instance. Does anyone know how I can activate a Wildcard SSL certificate with Let's Encrypt for this instance? 
I have the ssl activated for the individual sites, but I would like for it to be activated across the network of sites. 

Thank you for your time and help.
#30DaysOfCJS: Enabling Web Developers to Build the Future of the Web
Tags: community, web, standard, tc39
Published: 2020-08-27 00:10:37

---
title: #30DaysOfCJS: Enabling Web Developers to Build the Future of the Web
published: true
description: #30DaysOfCJS Day 25, Enabling Web Developers to Build the Future of the Web
tags: community, web, standard, tc39
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sznz88unujr7md1fnq6s.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 25 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Enabling Web Developers to Build the Future of the Web // Yehuda Katz // CascadiaJS 2018**

If you'd like to watch the talk, here is the Youtube link.
{% youtube 3bStv_QbFlo%}
Callback vs Promises vs Async Await
Tags: callbacks, promises, asyncawait
Published: 2020-09-01 10:53:53

---
title: Callback vs Promises vs Async Await
published: true
date: 2020-08-27 00:00:00 UTC
tags: Callbacks,Promises,AsyncAwait
canonical_url: https://www.loginradius.com/engineering/blog/callback-vs-promises-vs-async-await/
---

Callback vs Promises vs Async Await This blog explains the fundamental concepts that JavaScript relies on to handle asynchronous operations. These concepts include Callback functions, Promises and the use of Async, and Await to handle deferred operations in JavaScript. So before…

   
[Read On](https://www.loginradius.com/engineering/blog/callback-vs-promises-vs-async-await/)