teleren/devto huggingface dataset:
Métodos de classe(ou instancia)
Published: 2021-10-26 21:26:32

Pequenas coisas ainda me incomodam na minha jornada de aprendizagem de programação orientada a objeto. 

As vezes são coisas que sempre achamos que sabemos mas quando aplicamos na prática, nossa teoria sempre deixa a desejar. 

Eu costumo fazer colas para poder lembrar com mais facilidade, mas as vezes inclusive essas colas me traem, então eu preciso me expor publicamente no intuito de provar a mim mesmo, e então eu compartilho pequenos aprendizados, claro depois de me certificar que não estou destruindo nenhuma convenção!

O conceito de método de classe e método de instancia são uma das coisas mais comuns para quem já é desenvolvedor, mas experimenta explicar isso para outro iniciante, e veja a quantidade coisas que podemos deixar passar batido, então segue imagem da minha mais nova cola!

O alerta se deu por uma dica de um amigo sobre boas praticas nas descrição dos testes com rspec, então cheguei a conclusão que que era algo importante para se compartilhar.

Digite o código abaixo no seu editor preferido.  

Depois rode para ver o resultado para fixar esse conteúdo.

Faça alguns testes, como chamar um método de instancia sem instanciar o objeto e poste aqui nos comentários o erro!

Ahh..... o titulo no código não precisa copiar tá!?
Advice to frontend developers new to javascript
Tags: javascript, webdev, beginners, productivity
Published: 2021-10-26 21:10:30

As a frontend developer who just started learning JavaScript after completing HTML and CSS, At first JavaScript, may seem boring, sorry not "may", it is boring at first. This article is pointing to those learning JavaScript for the first time(mainly Frontend developers). This is a part of my personal experience too. 

  

Unlike the days of HTML and CSS, JavaScript is a more complex and technical language that requires an unruffled, enthusiastic and fertile mind to be learned.  

  

The reason why JavaScript seem boring is, just as said, unlike the days of learning HTML and CSS, while learning those languages you implement almost every new thing you’ve learned maybe into a project you are working on (it is advisable to be working on a project while learning), this makes it fun and you are ready to learn more. I believe most Frontend dev can relate to this, "I used to have fun implementing any new thing into my project".  

  

The story changes when it comes to the case of the BOSS 'JavaScript', while learning for the first few days or probably weeks, you find yourself not making any meaningful thing of what you’ve learned, talk less of implementing it.  

  

To all those Frontend developers currently in this phase(learning 'JavaScript') all I want to tell you is to just keep learning and occasionally try going through what you’ve learned so as not to forget them when the time to use them comes.  

  

I promise you it would get to a time when the idea of what to do with what you’ve learned would come, and if not try watching tutorials on "making projects with JavaScript". While watching these you would find out that they are making use of what you know already, then maybe try imitating what they’ve done and probably make some changes. from there ideas on what to do would begin to pop up (I believe).  

  

If you are not still satisfied and you think you are not improving I would advise you to visit these websites  

  

Hackerranks https://www.hackerrank.com/dashboard.  

  

Freecodecamp https://www.freecodecamp.org/.  

  

Coursera https://www.coursera.org/specializations/javascript-beginner.  

  

Codecademy https://www.codecademy.com/.  

  

Trust me my fellow JS learners this process would help you improve a great deal.  

Lets meet  

https://www.linkedin.com/in/damilola-bhadmus-351074221/. 

https://web.facebook.com/damilola.bhadmus.94. 

 

  

  

  

DO NOT KEEP THE SPIRIT LOW !!!!
What's the Best 404 Message You've Seen Lately?
Tags: discuss, watercooler, webdev, gamedev
Published: 2021-10-26 20:57:49

I am updating our website and want to change up the 404 message. We are a developer software enterprise solution company.  
Do 404 messages help? Does it matter? 

I love to be entertained and hate when there are 404 errors (who doesn't right?), but I am looking for a clever, simple, modern concept.  What's your most memorable 404 message. I found a few from a HubSpot article.

GitHub![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/072etaba6t92hur2bs5d.jpeg)
BrandCrowd ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2vprmn3f1zlegfprmfx.jpeg)
CSS Tricks !![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyd45eaxvtoqduumvtlp.jpg)
I found a few other content worthy
I would love to hear from you are your favorite 404 messages.  Hit me up!

Thanks for inspiration Rachel Leist @rachelleist
Data Source: https://blog.hubspot.com/blog/tabid/6307/bid/33766/10-clever-website-error-messages-from-creative-companies.aspx
10 keyboard shortcuts..
Published: 2021-10-26 20:29:32

10 Keyboard Shortcuts You Might Not Know!
Loading...
In this post I will talk about the keyboard shortcuts, every coder needs to master!

1. Clipboard History
Without wasting much of time I will start with the first shortcut key which is the clipboard history. You can access your clipboard history by pressing Windows + V key on your keyboard. this opens your clipboard history which can be accessed and navigated using the arrow keys on your keyboard.

2. Windows + arrow keys and dragging a window to right
You can open two windows side by side by selecting a window and dragging it to the extereme right side of you monitor. This will give you an option to open two windows side by side. 
You can also use your Windows + Left, Windows + Up or Windows + Down arrow keys to move this window 

3. Windows + 1, 2, 3, 4
Did you know that you can use Windows + 1, Windows + 2 etc keys to open your first, second and third windows respectively? Well if not, you need to start integrating this shortcut in your workflow.

4. Windows + D to minimize all the opened software 
If you want to minimize all the opened applications in your windows computer, you can do so by pressing windows + D key on your keyboard. A quick one but yet very effective keyboard shortcut you should be using!
 
5. Control + BackSpace and Control + Delete 
If you wish to delete a word towards the left, you can use Control + BackSpace
Similarly, If you wish to delete a word towards the left, you can use Control + Delete key on your keyboard

6. Alt Tab and Windows Tab 
You can use Alt + Tab to navigate through all the opened application on your windows as shown in the animation below:

7. Shift + End and Shift + Home

8. Windows + P 
Windows + P is used to open the projector preferences on your windows. You can control the monitor layout of your pc. You can choose to either turn on one, two or duplicate both of your monitors! 

9. Windows + L 
This is a very handy shortcut used to lock your pc so that noone can access it without your windows pin/password. You should try to make it a habit to lock your windows computer when you are not around!

10. Bonus: Mouse Wheel  
You can use the Mouse Wheel click to close a tab in Google Chrome and Open a link in a new tab. This saves a lot of time if you are hunting a bug and trying to find solution of your problem everywhere on the internet!
macOS: Universally Mute teams mic with keyboard
Tags: productivity, tutorial, microsoft, automation
Published: 2021-10-26 20:19:56

## Issue

A lot of folks are tired of managing microphone mute/unmute when on teams calls. Since you have to go to teams call and than use a keyboard or hit the microphone icon. That a distraction if you are doing multitasking (which almost everyone is doing).

## Solution

Use a universal keyboard shortcut to mute/unmute microphone in teams without going to teams app. Here how we do it:

### Step 1

* Open up `Automator` app on your macOS
  * Keyboard shortcut: `CMD` + `Space` and than search for `Automator`
* Hot `quick action` document
* Hit `Choose`

### Step 2

Let design the automation so that we can run it using a keyboard shortcut.

* Change the `Workflow receive current` option to `no input`
* Leave everything else to its default.
* On the left panel, look for the action `Run Applescript`
  * Double click on it so it moves to the right on your new action panel
* Replace the code in it with the below code

```applescript
on run {input, parameters}
	
	tell application "Microsoft Teams"
		activate
		tell application "System Events"
			keystroke "m" using {shift down, command down}
		end tell
	end tell
	
	return input
end run
```
* Go to file on the top-left menu and hit save.
* Give it some name (example `teams-mute`)

### Step 3

Let's get to the keyboard shortcut

* Go to `System preferences -> keyboard -> shortcuts`
* Click services in the left panel and scroll down to look for your service. It should be under the general section.
* Assign a shortcut to it.
  * I used `F1`

## Troubleshooting

* When you execute the shortcut it might ask you for permission to change the system.
  * Provide that permission in `System preferences -> security and privacy`
  * select `Accessibility` in left panel and make sure `Automator` is present and select in the right right panel.
* If your action is not working than go to `Accessibility` (as mentioned in previous step) section and remove `Automator` and than add it back again using the `+/-` buttons

Hope this helps and share your thoughts.
First Django App For Beginners Part2 (Views & Urls)
Published: 2021-10-26 20:08:47

#Welcome Back to part 2 of this tutorial I hope we all have a great understanding on Django.



######We will continue from where we stopped in the last tutorial if you are just joining please checkout part1 of this tutorial [part1 of this tutorial](https://dev.to/thisisazeez/first-django-app-for-beginners-part1-setup-installation-3981)

######Let's get started!
#What is views in Django?
A view is simple python function that takes a request and return a http response, the response can either be in html, 404, xml, etc.

What is Urls in Django?
A urls is a web address e.g(www.example.com) that uses your view to know what to show the user on a web page


>Note: Before you can start with your views you have to create a urls.py file in your application folder like this below

App Forlder Structure:
```
app/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py
    urls.py
```

>**Writing our first view**
app/views.py
```
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
    return HttpResponse("<h1>A simple views!</h1>")
```

>**Setting up our urls**
first we have to configure our urls.py in our project folder
project/urls.py
```
from django.contrib import admin
from django.urls import path, include # so we can include our app urls


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')), #here

]
```
Then
app/urls.py
```
from django.urls import path
from . import views # importing the view

urlpatterns = [
    path('', views.home, name="home"),
]
```

A simple view and url config

>**We will Look at templates and static directory/files in the next tutorial**
Nano ID for ColdFusion/CFML
Tags: cfml, hacktoberfest
Published: 2021-10-26 20:00:08

I wanted to use unique IDs in a project and the [nanoid](https://github.com/ai/nanoid) library looked interesting.  There was a [Java version](https://github.com/aventrix/jnanoid) available, but nothing available in ColdFusion/CFML. I didn't want to have to manually add a JAR file to my server, so I ported it and added support for:
- multiple dictionaries (numbers, hexadecimalLowercase, hexadecimalUppercase, lowercase, uppercase, alphanumeric, nolookalikes & nolookalikesSafe)
- multiple algorithms (SHA1PRNG, IBMSecureRandom, NativePRNG, NativePRNGBlocking & NativePRNGNonBlocking)

I also created a test script with ms/ns benchmarks and example code so that the results could be reviewed.

This was also my first ever #Hacktoberfest submission.

https://github.com/JamoCA/cfml-nanoid

Enjoy!
Day 41/100 Hidden
Tags: 100daysofcode, 100daychallenge, javascript, challenge
Published: 2021-10-26 19:29:34

As I'm approaching to completing the project, there seems to be an attribute that keeps puzzling me. Though I need to spend time to solve it. I find it amusing why A package needs to be delivered twice in a day?

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

![looged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jsq4ruinces4mj6m66y.png)
fatal: cannot run .husky/pre-commit: No such file or directory
Published: 2021-10-26 19:12:42

### Error:
fatal: cannot run .husky No such file or directory

### Best Solution
- copy the content of the file (pre-commit)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ele94k6o88d5awaj5kw6.png)
- delete the file with error (pre-commit)
- npx husky add ./.husky/pre-commit
- open the file and paste the content
- now will work

### Another solutions

1- rm -rf node_modules && rm -rf yarn.lock && yarn install
2- chmod +x ./.husky/*
3- rm -rf .git/hooks/pre-commit
Blog Post 6: Learning Week of 10/25/2021
Published: 2021-10-26 19:07:44

  Another week of Ruby went better than last week.  This week(October 25-29th) was great, I honestly felt I was finally understanding the jargon as they say. In my lesson of Ruby,   Object Oriented Programming 1 and 2 was great for my understanding.  The syntax below was easy to use.

```Ruby
class ClassName
  def method_name(parameter)
    @class_variable = parameter
  end
end
```

  The reason why I choose this syntax is because I am now confident in how to breakdown what I am looking at...somewhat.
  
  When I look at that syntax above I first noticed that there is a class that we define as ClassName followed by the method that will be defined as method_name, we then need a parameter that will go into the parenthesis.  Once we have our parameter we then can assign it to equal to the variable which is why we see @class_variable = parameter.  

  In the example below dog was used to insert in the ClassName section. We then created a method to initialize within the class of Dog.

  After we use the initialize method, we insert two parameters, name and breed.

  Inside that initialize method we can now assign those two parameters to the variables @name and @breed respectively

```Ruby
class Dog
  def initialize(name, breed)
  @name = name
  @breed = breed
  end
end
```
  Another thing I wanted to add that Gino(Mentor) would ALWAYS remind me is that whenever you have a class, make sure to include end when the code is complete but ALSO when defining a method you have to add end for that as well which is why we see not one but two "end"s on the bottom of this particular code.

  Again, I may have not have the correct jargon or terminology but this is coming from a 42 year old that is in the process of switching careers from Teaching to this.  So far I am enjoying it and learning at my own pace.
terraform apply in Azure DevOps fails with "resource with the ID already exists"
Tags: azure, terraform, azuredevops
Published: 2021-10-26 18:45:57

Recently I was developing a simple Terraform pipeline in Azure DevOps. Everything seemed intuitive and easy - install, init, plan, apply. Clear steps and UI forms for every setting. 
![terraform init settings in the Azure DevOps Pipeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2lm0drttjl00wgr2l9t.png)

Everything was configured properly. Code was working fine from my local machine, but in Azure DevOps, pipeline run successfully only for the first time. Every next attempt resulted in the following error:
`Error: The process 'C:\hostedtoolcache\windows\terraform\1.0.8\x64\terraform.exe' failed with exit code 1`

And details from the log:
`Error: [0m[0m[1mA resource with the ID "/subscriptions/45197771-2d3e-4685-aaef-e96f62dd80b4/resourceGroups/tfexample-sample-rg" already exists - to be managed via Terraform this resource needs to be imported into the State. Please see the resource documentation for "azurerm_resource_group" for more information.[0m`

## The problem was in my code
```
provider "azurerm" {
  subscription_id = "45197771-2d3e-4685-aaef-e96f62dd80b4"
  features {}
}
```
It was missing the `backend` part! Code worked from my local machine, because terraform saved the state in local `terraform.tfstate` file (default terraform behavior), but in Azure DevOps the settings provided in the UI was ignored with no clear error message. `terraform apply` couldn't find the state file, so was creating every resource from scratch each time.

## The solution
I fixed the code by adding empty properties. That was enough to have the pipeline working correctly. Note that no values are required...
```
provider "azurerm" {
  subscription_id = "45197771-2d3e-4685-aaef-e96f62dd80b4"
  features {}
}

terraform {
  backend "azurerm" {
    resource_group_name = ""
    storage_account_name = "" 
    container_name       = "" 
    key                  = ""  
  }
}
```

Please leave some comment if this helped.
GitHub CLI extension to preview README.md
Tags: github, go, cli, markdown
Published: 2021-10-26 18:27:51

Have you ever thought want to preview README.md before push to GitHub? I built the [GitHub CLI](https://cli.github.com) extension to make it come true. It named `gh-markdown-preview`.

<https://github.com/yusukebe/gh-markdown-preview>

## Features

* **NO-dependencies** - You need `gh` command only.
* **Zero-configuration** - You don't have to set the GitHub access token.
* **Looks exactly** the same - You can see same as GitHub.
* **Live reloading** - You don't need reload the browser.

## Requirements

You have to install GitHub CLI before install.

```
$ brew install gh
```

## Installation

```
$ gh extension install yusukebe/gh-markdown-preview
```

## Usage

```
$ gh markdown-preview README.md
```

Or this command will detect README file in the directory automatically.

```
$ gh markdown-preview
```

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83zpvubioa4hee4r2i2f.png)

Then access the local web server such as http://localhost:3333 with Chrome, Firefox, or Safari.

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79jo7cenpt6h481uhdni.png)

Available Options:

```
-p, --port     TCP port number of this server (default: 3333)
-r, --reload   Enable live reloading (default: false)
```

---

`gh markdown-preview` is a GitHub CLI extension to preview your markdown such as README.md. The `gh markdown-preview` commnad start a local web server to serve your markdown document file with a GitHub style.

`gh markdown-preview` command shows the HTML got from GitHub official markdown API with the CSS extracted from GitHub web site. The styles are almost the same!

You can see rendered README before uploading to GitHub!

If you want to have more information, check this repository and give me a star:)

[yusukebe/gh-markdown-preview: GitHub CLI extension to preview README looks the same as GitHub.](https://github.com/yusukebe/gh-markdown-preview)
Wizar devlog 21 - Panning 
 the map
Tags: metaverse, react, gamedev
Published: 2021-10-26 18:27:12

I added recently a new feature to the map: panning. It is an abvious and small step for the player but it was a complete refactor of the threejs map renderer with an endless queue of issues.
Finally I am quite happy with the result !
Press space and move mouse to pan.
Press mouse and drag to draw.
Press mouse + shift and drag to dig.
{% codesandbox dxtdx %}

Next steps are:
- optimize tiles loading to get a smoother map translation
- implement panning on mobile
Estados: useState()
Tags: programming, tutorial, react
Published: 2021-10-26 18:11:23

O useState é um Hook de controle de estado para componentes React, mas o que são hooks? Hooks são funções que permitem a você “ligar-se” aos recursos de state e ciclo de vida do React a partir de componentes funcionais. Hooks não funcionam dentro de classes, eles permitem que você use React sem classes.

Digamos que o useState foi criado para dar vida aos estados de um componente e ele poder ser atualizado dinamicamente na página.

**useState**
Exemplo abaixo:

```
const [count, setCount] = useState(0);
```

O useState funciona como uma desestruturação de Array, onde temos as variáveis count e setCount, a variável count é a variável que guarda o valor original e se o usuário deseja atualizar esse valor, ele vai passar a responsabilidade para a variável setCount, por convenção a variável que atualiza o valor, recebe a palavra 'set' no inicio, por exemplo: setText, setCount, setUser, etc.

Imagem para ilustrar o que foi explicado até aqui:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn160dfm52u7qttra0o2.png)

1. Importamos o Hook useState do React. Ele nos permite manter o state local em um componente de função.
```import React, { useState } from 'react';```

2. Dentro do componente Example, declaramos uma nova variável de state chamando o Hook useState. Ele retorna um par de valores, no qual damos nomes. Estamos chamando nossa variável count porque ela mantém o número de cliques no botão. Inicializamos como zero passando 0 como o único argumento do useState. O segundo item retornado é a própria função. Ela nos permite atualizar o count então nomeamos para setCount.
```const [count, setCount] = useState(0);```

3. Quando o usuário clica, chamamos setCount com um novo valor. O React então vai re-renderizar o componente Example, passando o novo valor de count para ele.
```
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
```

Obrigado por ler o artigo até aqui, algumas informações foram retiradas do site oficial do [React](https://pt-br.reactjs.org/docs/hooks-state.html)

E você, já utiliza o useState nos seus componentes? Até a próxima!