teleren/devto huggingface dataset:
FAQS when learning React - Beginner!
Tags: react, opensource, beginners, discuss
Published: 2022-03-19 23:38:04

**Question:**
What is React?

**Answer:**

---
**Question:**
Why do I have to learn React?

**Answer:**

---

**Question:**
When creating a new file in React, which is better: **.js** or **.jsx**?

**Answer:**

---

## What were your frequently asked questions as a beginner when learning react?
Buckets públicos para leitura no AWS S3
Tags: beginners, s3, aws, learning
Published: 2022-03-19 23:35:15

Um dos jeitos de resolver o acesso a documentos de buckets no S3 é configurando o ACL, para aceitar ações de em qualquer objeto no bucket, assim evitando erros como esse: 

![AWS Bucket Denied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gokjelj78k8rwianxpv.PNG)

## Solução
Um ponto importante, essa solução cria um ACL que deixa o o bucket inteiro como público, porém podemos configurar com que apenas pasta especifica, ou objetos tenham esse acesso público de leitura

Nas nossas configurações de ACLs colocamos o seguinte JSON
```JSON
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "AllowPublicRead",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::i3s-01/*"
		}
	]
}
```

Com essa configuração estamos dizendo que qualquer tentativa de leitura de arquivos recurso i3s-01/ é pública, um ponto de atenção é que devemos especificar o caminho do bucket sendo `arn:aws:s3:::i3s-01/*`

Para isso também devemos desmarcar os seguintes campos na seção **Bloquear Acesso Público**
![PUBLIC READ BLOCK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t7o8z2o22g11ybpltyw.PNG)

## Resultado

Assim configuramos esse bucket como livre para leitura: 
![S3 FILE READING](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcpookr34gba5fcx6o21.PNG)
Usabilidade
Published: 2022-02-23 22:42:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a844t6e0yrmmiqdpa72.jpg)
USABILIDADE  
. 
•	Contexto cultural exemplo do vaso sanitário no Japão. Vasos completamente diferente do nosso modelo. 
•	Negócio, conhecer a concorrência e o método de marketing, presença digital é muito importante para o sucesso da empresa. 
•	Tecnologia novas tecnologias apresentadas a humanidade como os óculos vr. 
•	Processo 
•	Pesquisa 
•	Conceito 
•	Protótipo 
•	Validação  
•	Desenvolvimento 
•	Mercado  
Heurísticas da usabilidade 
Identificar o problema porem trazer a solução e medir sua eficiência e resultado.  
Jakob Nielsen 1994 
•	Manter informado os usuários de acontecimentos. 
•	Retorno apropriado. 
•	Dentro de um período razoável. 
Correlação com o Mundo real. 
•	Linguagem de usuário: palavras e conceitos familiares. 
•	Convenções do mundo real. 
•	Ordem logística e natural. 
Controle do Usuário e liberdade 
•	“Saída de emergência” 
•	Menor esforço 
•	Suporte “undo” (desfazer) e “redo” (refazer) 
Consistências e Padrões 
•	Termos e ações consistentes. 
•	Convenções da plataforma.
Prevenção ao erro 
•	Eliminar propensão ao erro. 
•	Apresentar confirmação para prevenir erros críticos. 
Reconhecimento ao invés de memória 
•	Ajuda contextual. 
•	Informações para orientar ações. 
•	“Diálogo” com o usuário.  
Flexibilidade e eficiência de uso 
•	Fácil para os leigos not gamer true. 
•	Flexível e ágio para usuários pikas. 
Estética e design minimalista  
•	“Diálogos” relevantes. 
•	Informações excessiva diminui a visibilidade relativa. 
 
FACILITE RECONHECIMENTO, DIAGNOSTICO E RECUPERAÇAO DE ERROS
- Linguagem corrente
- Indicação clara do problema
- Sugestão de solução
AJUDA E DOCUMENTAÇÃO


- Visível
- Facilmente acessada
- Ferramenta de busca


MÉTODOS

•	Inspecionais: análise de um especialista
•	Interpretativos: análise qualitativa de IHC
•	Estatísticos: análise quantitativa de IHC

PARADIGUIMAS DE AVALIAÇÃO

Guerrilha
Teste de usabilidade
Pesquisa de campo
Avaliação  preditiva

PROTÓTIPO EM PAPEL

Baixa fidelidade
Alta fidelidade


PROTOTIPAGEM RAPIDA: SOFTWARE
EX: MARVEL

PROTOTIPAGEM PLATAFORMAS
EX: ADOBE XD

FRAMEWORK DECIDE

•	Determine os objetivos
•	Explore as questões
•	Escolha um método e abordagem de avaliação
•	Identifique questões práticas
•	Decida como lidar com questões éticas/legais
•	Avalie, análise, interprete e apresente os dados
15 Tricks to Master Googling as a Developer
Tags: todayisearched, todayilearned, beginners, codenewbie
Published: 2022-03-19 23:16:48

"Google" is a term we use to describe using Google. That is how integrated this search engine has become in our lives. But do we know how to use it efficiently?

I did not until running into some very informative articles. Though I did briefly know of a few of these techniques, I was never one to remember to use them.

They are as follows:

1. Use google as your calculator

2. Use "site:" to search within a specific website

3. Use "define:" to search definitions

4. Use double quotes (" ") to search for an exact phrase

5. Use "filetype:" to search for results in a particular file type

6. Use AND, OR, NOT (represent by a minus sign)

7. Use "related:" to find similar websites

8. Use the wildcard asterisk *

9. Use "location:" to filter search results according to location

10. Use "before:" and "after:" to search within a date range

11. Use tilde operator to search for similar terms

12. Search using your voice with "Ok Goggle"

13. Use "cache:url" to find the cached version of the website

14. Use "intitle:" to search only in titles

15. Use google advanced search

##### Links
[Search on google like a PRO](https://livecodestream.dev/post/search-on-google-like-a-pro/)
[Google search tips for web developers](https://ivo-culic.medium.com/13-useful-google-search-tips-for-web-developers-bca00ec13f63)
[Master the art of googling as a software developer](https://betterprogramming.pub/11-tricks-to-master-the-art-of-googling-as-a-software-developer-2e00b7568b7d)
[Advanced search tips every programmer should know](https://medium.com/@nitinpatel_20236/advanced-search-tips-every-programmer-should-know-20fa11831836)
[How to search google like a pro](https://www.freecodecamp.org/news/how-to-search-google-like-a-pro/)
Using JSX and SCSS in React
Published: 2022-03-19 23:08:39

I need to create a page using VS Code and I want to know:
1 - How do I start from scratch? What I need to install  (besides VS Code and Nodejs)?
2 - When I run jsx do I need to erase App.js?
3 - When I run scss do I need to erase App.css?
4 -
Day 17/100; 100 Days of Code
Tags: javascript, beginners, codenewbie, devjournal
Published: 2022-03-19 22:52:29

After finishing that intro course, I've felt a little burnt out from courses. Started working on a weather app today. I'm following a tutorial on how to create it.

Using html, CSS, and js.

I'll continue the courses, but it's refreshing to actually build stuff even if its not major. see you next time!
Discord.py | 01
Tags: discord, python, programming, tutorial
Published: 2022-03-19 22:48:19

Simply discord.py is an API wrapper for discord APi written in python, For making discord bots.

Let's start by installing discord.py
`pip install discord.py`

## The code 
We need to import discord.py and define our client(bot):
```python
#importing discord.py.
import discord
from discord.ext import commands
#defining our client(bot) variable and initializing the bot class.
#you can change the name of the variable as you like 
client = commands.Bot(command_prefix="!")
#running our bot.
client.run("Your bot token")
```
You can get your bot token from [here](https://discord.com/developers/applications):

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z03l1qfx99anbzjeurdd.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kejxcww33m5ee1nwmofb.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5rk9gzmpbu33act6u9f.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8jduhlk4o6l5kj90myq.png)
Then we are going to make an event:

```python
#This part is not important, But it is used to verify that the bot had successfully started.
#This simply prints I'm alive when the bot is ready.
@client.event
async def on_ready():
    print("I'm Alive")

```
Defining our first command:

```python
@client.command()
async def hi(ctx):
    await ctx.send("Hello World")
#Simply the name of the function is the name of the command
```

## Generating invite link
Head to your bot application:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghui6j7ff2460vbic91j.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0cmsrgze3diw16vhxx.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gssvs223bchln0r97nh8.png)
![In the permissions section you can choose permissions suitable with your bot, But i prefer using Administrator  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t25isli6tqfiir5emi63.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oa7z5pn9w1gusnfrpwrx.png)
The final code:

```python
import discord
from discord.ext import commands

client = commands.Bot(command_prefix = "!")

@client.event
async def on_ready():
    print("I'm Alive")

@client.command()
async def hi(ctx):
    await ctx.send("Hello World")

client.run("your token")

```
Running the code:`I'm Alive`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzzkhplynjj0ui4teetv.jpg)
It's working.
[The code](https://github.com/Oxygen-Oxide/DEV_bot)
Thanks for reading, see you in the next part.
Day 13 of 100 Days of Code
Tags: javascript, webdev, beginners, programming
Published: 2022-03-19 22:45:27

Today I developed a chrome extension that inputs the URL of a page that could be used to contact the lead(s) in the future. This was a code-along project.
HTML

```
     <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <input type="text" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <ul id="ul-el">
        </ul>
        <script src="index.js"></script>
    </body>
``` 
CSS

```
body {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;
}

input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #5f9341;
    margin-bottom: 4px;
}

button {
    background: #5f9341;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
}

ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

li {
    margin-top: 5px;
}

a {
    color: #5f9341;
}

``` 

The Javascript
```
// chrome://extensions/
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", function() {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    renderLeads()
})

function renderLeads() {
    let listItems = ""
    for (let i = 0; i < myLeads.length; i++) {
        listItems += `
            <li>
                <a target='_blank' href='${myLeads[i]}'>
                    ${myLeads[i]}
                </a>
            </li>
        `
    }
    ulEl.innerHTML = listItems  
}

``` 
The JSON script

```
{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Leads Sales tracker",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    }
}
```
How to make fewer http requests in wordpress
Tags: wordpress, wp, beginners, webdev
Published: 2022-03-19 22:33:51

Some times your website may be slow due to high number of http requests because more http requests increases the server response time or dns lookup time, increases the webpage load time and increases the DOM or webpage size and also uses the user’s more internet data.

So, here below is the steps for how to make fewer http requests in wordpress and also you can reduce your dns lookups:

## Step 1 – Compress, Minify and combine your website resources to make fewer http requests
Compress or Minify your website resources like CSS, Javascript and then combine your minified or compressed files into one or two files. To do this there are number of wordpress plugins like [WP-Optimize – Clean, Compress, Cache](https://wordpress.org/plugins/wp-optimize/), [LiteSpeed Cache](https://wordpress.org/plugins/litespeed-cache/). Through this plugins you can also optimize or speed up your website and images.

## Step 2 – Remove unused website resources
Remove unused resources like css, javascript or images from your website.

To do this you can go to your theme folder located at website_root_path\wp-content\themes\your_theme and open your header.php and footer.php file and remove the css or js files which is not useful.

And also we have created tutorial for [how to remove javascript or scripts in wordpress](https://www.w3courses.org/how-to-remove-javascript-or-scripts-in-wordpress/), [how to remove css or styles in wordpress](https://www.w3courses.org/how-to-remove-css-or-styles-in-wordpress/) you can also use these tutorials.

Also remove unused images from your wordpress posts or pages and to remove unused images from your media you can use [Media Cleaner](https://wordpress.org/plugins/media-cleaner/), [WPS Cleaner](https://wordpress.org/plugins/wps-cleaner/).

## Step 3 – Remove links from sidebar, widgets, header or footer
And you can also remove or disable your wordpress widgets like footer widgets or sidebar widgets, header menu links, header widgets, header links, breadcrumb links, sidebar links.

And to do this by coding you can follow this tutorial [how to optimize wordpress for mobile](https://www.w3courses.org/how-to-optimize-wordpress-for-mobile/) through this tutorial you can disable or remove some modules for desktop or mobile website.

---
Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
Tree Pruning
Published: 2022-03-19 22:24:42

Given a binary tree root, prune the tree so that subtrees containing all 0s are removed.

Constraints: n ≤ 100,000 where n is the number of nodes in root

Example 1
Input

root = [0, [1, null, null], [0, [1, [0, null, null], [0, null, null]], [0, null, null]]]
Output

[0, [1, null, null], [0, [1, null, null], null]]
Explanation
We do not remove the tree at the root or its right child because they still have a 1 as a descendant.

DFS:

1. if current node is NULL, return NULL;
2. if dfs(left) equals NULL, current left = NULL;
3. if dfs(right) equals NULL, current right = NULL;
4. if current node left & right both equal NULL, and current value is also 0, return NULL, else return current node


```c++
/**
 * class Tree {
 *     public:
 *         int val;
 *         Tree *left;
 *         Tree *right;
 * };
 */

Tree* solve(Tree* root) {
    if (root == NULL) {
        return NULL;
    }
    if (solve(root->left) == NULL) {
        root->left = NULL;
    }
    if (solve(root->right) == NULL) {
        root->right = NULL;
    }
    if (root->val == 0 && root->left == NULL && root->right == NULL) {
        return NULL;
    } else {
        return root;
    }
}
```
RESUMO DA USABILIDADE
Published: 2022-02-23 22:41:53



NOME: Matheus Henryck, Erick V. Gusson, Ingrid Rapace Coltri, Geovana J. Santos

Contexto do usuário
 
O modelo mais usável pode mudar no contexto de onde a pessoa veio e como ela cresceu, assim como podemos achar algo estranho deles, eles podem achar estranho o nosso, por mais que o mesmo tenham a mesma função e entreguem o mesmo resultado, porém, o método é diferente e tem ligação com suas cultura.

Processo:

 O processo da criação normalmente segue a ordem de pesquisa, conceito, protótipo, validação, desenvolvimento, mercado e então se repete, mais nem sempre consegue chegar até o mercado, muitas vezes nem sequer da pesquisa.

Heurísticas de Usabilidade

Visibilidade do status do sistema

- Manter o usuário informado sobre o que está acontecendo
- Retorno apropriado
- Dentro de um período razoável

Correlação com o mundo real

- Linguagem do usuário: palavras frases e conceitos familiares
- Convenções do mundo real
- Ordem lógica e natural

Controle do usuário e liberdade

- “Saída de emergência”
- Menor esforço
- Suporte “undo” (desfazer) e “redo” (refazer)

Consistência e padrões

- Termos, situações ou ações consistentes
- Convenções da plataforma

Prevenção ao erro

- Elimine propensão ao erro
- Apresente uma confirmação para prevenir erros críticos

Reconhecimento ao invés da memória

- Ajuda contextual
- Informações para orientar as ações
- “Diálogo com o usuário

Flexibilidade e eficiência de uso

- Fácil para usuários leigos
- Flexível para se tornar ágil para usuários avançados

Estética e design minimalista

- “diálogos” relevantes
- Informação excessiva diminui sua visibilidade relativa	

Facilite reconhecimento, diagnóstico e recuperação de erros

- Linguagem corrente
- Indicação clara do problema
- Sugestão da solução

Ajuda e documentação

- Visível
- Facilmente acessada
- Ferramenta de busca

Avaliação de UX

Métodos

- Inspecionais: análise de um especialista
- Interpretativos: análise qualitativa de IHC
- Estatísticos: análise quantitativa de IHC

Paradigmas de avaliação

- Gerrilha
- Testes de usabilidade
- Pesquisa de campo
- Avaliação preditiva

Framework decide
Determine os objetivos
Explore as questões
Escolha um método e abordagem de avaliação
Identifique questões práticas
Decida como lidar com questões éticas/legais
Avalie, análise, intérprete e apresente dados
Towards Telescope 2.9
Tags: monorepo, telescope
Published: 2022-03-19 21:38:46

By the time we ship the last release this semester ([Telescope 3.0](https://turborepo.org/) on April 21th), I would like to have finished our monorepo tooling setup with [Turborepo](https://turborepo.org/). So far we have made great progress as a group but there are still problems popping up [left and right](https://github.com/Seneca-CDOT/telescope/issues/3153), especially with ESlint.

## Monorepo tooling

As of right now I am not assigned to any of these remaining ESLint bugs but I have been active fixing bugs related to CI, reviewing PRs and offering help to my peers.

We are using Turborepo to manage ESLint in each package but there is more that can be done. We can use Turborepo for our tests as well so I will have an issue posted about it.

## Docker and Nginx

In the meantime, I have been working with Docker and Nginx because I wanted to get out of my comfort zone and learn more about these two very popular tools.

I am very interested in Docker but I have only played with it on my own so far. I have learned the basics after watching all of the [CCP555](https://apps.senecacollege.ca/ssos/findOutline.do?subjectCode=CCP555) lectures related to it.

I picked up an [issue](https://github.com/Seneca-CDOT/telescope/issues/2993) about sharing a single nginx container for all static sites. To do this I had to restructure the project to have both the Telescope app and our new Docusaurus docs to share a single Dockerfile. Inside this new Dockerfile, there will be a single Nginx container to deploy both sites.

I like this change because it will group all of our static sites into `src/web`. The [PR](https://github.com/Seneca-CDOT/telescope/pull/3237) is still a work in progress but I am hoping to have it ready for Telescope 2.9 next week.
Automatically Generate a list of Markown Links in Vim
Tags: vim, webdev
Published: 2022-03-19 21:22:00

---
canonical_url: https://waylonwalker.com/til/vim-markdown-links/
published: true
tags:
- vim
- webdev
- meta
series: til
title: Automatically Generate a list of Markown Links in Vim
---

Let's make a vim command to automatically collect all the links in these posts at the end of each article.  Regex confuses the heck out of me... I don't have my regex liscense, but regex can be so darn powerful especially in an editor.

## Step one

Before you run someone's regex from the internet that you don't fully understand, check your `git status` and make sure you are all clear with git before you wreck something

## Inspiration

Something that I have always appreciated form [Nick Janetakis](https://nickjanetakis.com/) is his links section.  I often try to gather up the links at the end of my posts, but often end up not doing it or forgetting.

## Making a Links section

Searchng through the internet I was able to find an article from Vitaly Parnas called [vim ref links](https://vitalyparnas.com/guides/vim-ref-links/) that did almost exactly what I needed, except it was more complicated and made them into ref liks.

Here is my interpretation of the code I took from Vitaly's post.  It makes a Links section like the one at the bottom of this post.

``` vim
function! MdLinks()
    $norm o## Links
    $norm o
    g/\[[^\]]\+\]([^)]\+)/t$
    silent! '^,$s/\v[^\[]*(\[[^\]]+\])\(([^)]+)\)[^\[]*/* \1(\2)/g
    nohl
endfunction command! MdLinks call MdLinks()
```

So far it is working for me and saving me a few seconds off each post I make.

## Links

* [Nick Janetakis](https://nickjanetakis.com/)
* [vim ref links](https://vitalyparnas.com/guides/vim-ref-links/)
Programming platforms reactions to Russian war against Ukraine
Tags: meta
Published: 2022-03-19 21:19:30

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09b3sgwp7v45syh8cqkc.png)
From the major programming platforms, most of them support victims of Russian war. But all except Slack are slow to raise awareness and to impose consequences.

Editable doc: https://docs.google.com/spreadsheets/d/1oV-RBCzlUpKZL5MEjapGEMLBum6C13ImZc6SPedASV4/edit?usp=drivesdk