teleren/devto huggingface dataset:
Useful Tips for Web Dev - Part1
Tags: javascript, webdev, productivity, tooling
Published: 2022-04-27 16:54:36

A lot of time there are some problems which we face occasionally but the time when that occasion become too often it becomes frustrating to keep searching those occasional problem here and there on stack overflow or documentation of the libraries. So I'm starting this series of Problems and Solutions to have my those problems all curated at one place. Let's see how it goes. Some of these problems took me to get through a lot of stack overflow answers to find the right one. I wish it saves someone's time.

###1. How to change port for NPM start? or Node JS change server port?
```
SET PORT=8080 && npm start //windows
export PORT=4000 && npm start //MAC
```
###2. How to find difference between 2 dates in days?
Let's say we have two dates, your date of birth and today's date and you want to **find the difference** between them in days. It's something I feel someone will someday **definitely need to use**. So [here's](https://dev.to/atulbhattsystem32/find-no-of-days-between-2-dates-using-momentjs-53pc) the way to do it.

###3. Some Quick Generic Web-Developer Friendly Shortcuts
 - **Clear Console logs** - _developer tools (ctrl+l)_
 - **Close Tabs** - _(ctrl+w)_
 - **Duplicate a Tab** - _(ctrl+shift+k)_
 - **Open recently closed tabs** - _(ctrl+shift+t)_
 - **Hard Reload** - _(ctrl+shift+r)_

###4. NVM- Node Version Manager ( Windows)
If you're a JS developer then you have had or will at later point in time face the **need to change the node version** installed in your system because the **project doesn't supports** the latest. Here NVM - Node Version Manager comes to your rescue.
> It allows you to have `multiple Node Versions` installed and toggle between them.
[NVM-windows](https://github.com/coreybutler/nvm-windows)

###5. Copy as CURL
When you're frontend developer you often need to **integrate APIs.** And a lot of time there might be **issues** which you would've have to **communicate** to the **backend developer** who will be needing things like the **payload and header** you sent with the api to** check** you passed everything correctly.
Instead, what you can do is **send the CURL url** to your backend developer which he can import in his **API test tool like POSTMAN** to check it.

_These are few for now and I'll keep coming with more soon. Till then fast solving😁._
Is a $100,000 annual salary for developers living in Brazil possible?
Published: 2022-04-27 16:45:34

The simple answer is: yes and even more than that.

When I asked the question on Twitter, I asked it as follows:

{% twitter 1512776564513116167 %}

One problem is that I used the phrase "third world." I should have used "developing countries."

My inspiration for the question was this tweet that is part of a thread:

{% twitter 1511508335433986050 %} 


In case someone doesn't already know, a first important observation is that people usually talk about annual salary in the USA (and in some European countries). In other words, 100 thousand dollars is equivalent to 8,333.33 dollars per month.

I do not know precisely how it works, but USA vacations are negotiated company by company, and there is no Christmas bonus. Some companies pay for one or more benefits (health plan, stock participation, etc.). I think this is what Tyler Young is talking about when he writes "total compensation." In other words, the person gets, for example, 180,000 in cash and 20,000 in "benefits."

Another observation is that Tyler Young talks about senior developer people working with Elixir. But these salary levels are not exclusive to Elixir. They apply to many (not all) other technologies. In my tweet, I asked the question about Elixir and Erlang because the Elixir-Erlang-BEAM community is where most of my contacts are.

From the answers I got, some of them private, it is possible to earn even more than 100 thousand dollars per year. One person (who is not Brazilian but is from a developing country) said that he receives 165 thousand dollars per year. Some others said they received around 100 thousand dollars.

Can I be sure that what they told me is true? Not. But I trust the people who spoke to me. Considering that Silicon Valley companies can quickly pay up to $350,000 per year, it is not extraordinary to pay $165,000 to an excellent developer working remotely from a developing country.

What about you? What do you think? Is it possible?
Day-75 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-04-27 16:38:04

- Date:27/04/2022
- Day:Wednesday

Today, I started at about 11:00 am as I was in progress to complete the java script course so, today I started with the left over task. as I was started with 12th module firstly I started with math rounding in java script so, Math.round() function returns the value of a number rounded to the nearest integer.If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of positive infinity after this I started with remainder operator The remainder operator % returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.after this I started with numeric separator Numeric separators are a JavaScript feature that allows you to use underscore as a separator in numeric literals, for example, you can write 10000 as 10_000 . The feature works in recent versions of modern browsers as well as Node. after this I get to learn bigitn A BigInt value, also sometimes just called a BigInt, is a bigint primitive, it is  created by appending n to the end of an integer literal, or by calling the BigInt() constructor (but without the new operator) and giving it an integer value or string value.this way my day ended up and I got to learn many new things.
Discuss time | Shop ideas
Tags: javascript, shop, discuss, startup
Published: 2022-04-27 16:16:47

Hello from Poland, since my last post I have learned a few new things to code with, such as TypeScript/NestJs and EcommerceJs. Also now I am studying internet marketing and want to make online shop to combine these skills. 

Have you any ideas which shop will be useful for next months? Share them in comments, I will be glad to discuss your ideas with mine and I think in future, when I chose a shop idea, I will make posts related to this shop's progress. Thanks 😊
stripe out the data and store them in variabels
Published: 2022-04-27 16:13:24


# CHALLENGE
-Strip out the data (element id, name, avatar, 
health and dice score) and store them in variables

-  Write a renderCharacter() function that accepts the 5 new variables as paramaters and renders out a character with this data
-  Call renderCharacter() twice. Once with the hero variables and 
once with the monster variables to that both are rendered

```
const heroElementId = "hero"
const heroName = "Wizard"
const heroAvatar = "images/wizard.png"
const heroHealth = "60"
const heroDiceRoll = 6

const monsterElementId = "monster"
const monsterName = "Orc"
const monsterAvatar = "images/orc.png"
const monsterHealth = "10"
const monsterDiceRoll = 4

function renderCharacter(elementId, name, avatar, health, diceRoll){
  document.getElementById(elementId).innerHTML = 
    `<div class="character-card">
        <h4 class="name"> ${name} </h4>
        <img class="avatar" src="${avatar}"/>
        <p class="health">health: <b> ${health}</b></p>
        <div class="dice-container"><div class="dice"> ${diceRoll} </div></div>
    </div>`;   
}

renderCharacter(heroElementId, heroName, heroAvatar, heroHealth, heroDiceRoll)
renderCharacter(monsterElementId, monsterName, monsterAvatar, monsterHealth, monsterDiceRoll
```
Rendering
Tags: javascript, beginners, webdev
Published: 2022-04-27 16:09:27

# Challenge 


- Take the hard-coded HTML, bring it 
   into index.js and then inject it back into its div with js. 

```
const heroDiv = document.getElementById('hero')

heroDiv.innerHTML = `
    <div class="character-card">
        <h4 class="name"> Wizard </h4>
        <img class="avatar" src="images/wizard.png"/>
        <p class="health">health: <b> 60 </b></p>
        <div class="dice-container"><div class="dice"> 6 </div></div>
    </div>   
`
```

- We can also do it this way :
```
document.getElementById('hero').innerHTML = `
    <div class="character-card">
        <h4 class="name"> Wizard </h4>
        <img class="avatar" src="images/wizard.png"/>
        <p class="health">health: <b> 60 </b></p>
        <div class="dice-container"><div class="dice"> 6 </div></div>
    </div>   
```

`
Writing tests after release is a mistake
Tags: testing
Published: 2022-04-27 16:02:09

Writing tests in 2022 is more common than ever before, but more often than not, I see developers writing tests after the code is released to production. And that’s a big mistake.

## What is wrong with that?

It seems obvious - writing tests takes time, so I will be faster if I don’t spend my time writing them before the code is released, right? Wrong!

Writing code is just one part of producing features, and developers often ignore all the other areas that get affected. You end up with almost all the same problems like not testing at all.

When you write tests after the release, you end up

**Testing your code manually** - You don’t ship untested code, do you? You either write automatic tests, or you test your code manually. Manual testing is the slowest. The bigger the change, the more time you spend on manual testing. It simply does not scale well.

**Producing worse Architecture** - TDD helps you organize your thoughts about the behavior and API design. Bad API accumulates and makes you even slower in the future.

**Producing more bugs** - Manual testing means you test less often. Bad architecture means the code is more complex than it should be. Combine those two, and you end up with more bugs in production code.

**Longer code reviews** - No tests, bad architecture, and more bugs will lead to more and longer discussions about the code itself. Check your Pull Requests for how many comments and changes are usually required before you get approval.

**Producing code that's harder to test** - Code that is not written with testing in mind is always more difficult to test. You will write more brittle tests or have to rewrite your code to make it testable. And that is, again, time-consuming.

**Not testing all the edge cases** - You wrote the code several weeks ago, so it's natural that you forget all the edge cases that should be tested. This will haunt you in the future in the form of bugs.

**(Sometimes) Skipping the tests** - Since the code is in production and is working, your manager wants you to work on the next feature, naturally. And so the tests never get written. Don't blame your manager for that.

All this adds up over time and makes you slower.

## What to do instead?

If you want to write quality software that lasts, there is no way you can avoid writing tests. Writing tests after the release may be better than no tests at all, but it’s not good enough. Unless you write tests first, you will always struggle with quality, design, and delivering on time.

Testing is a skill, and you need to cultivate it. The more you do it, the better you become at it. And as you get better in TDD, you are likely to produce quality faster.

Start with TDD today. You won’t regret it, I promise.
Django reset password and change password
Published: 2022-04-27 15:56:24

urls.py in main project

```python
from django.contrib import admin
from django.urls import path,include
from django.contrib.auth import views as user_views

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

    path('password-change/',user_views.PasswordChangeView.as_view(template_name='users/password_change.html'),name='password-change'),
    path('password-change-done/', user_views.PasswordChangeDoneView.as_view(template_name='users/password_change_done.html'),name='password_change_done'),
    path('password-reset/', user_views.PasswordResetView.as_view(template_name='users/password_reset.html'),name='password_reset'),
    path('password-reset-done/',user_views.PasswordResetDoneView.as_view(template_name='users/password_reset_done.html'),name='password_reset_done'),
    path('password-reset-confirm/<uidb64>/<token>/',user_views.PasswordResetConfirmView.as_view(template_name='users/password_reset_confirm.html'),name='password_reset_confirm'),
    path('password-reset-complete/',user_views.PasswordResetCompleteView.as_view(template_name='users/password_reset_complete.html'),name='password_reset_complete')
]

```
HTML you have to create in templates folder :

password_change.html
password_change_done.html
password_reset.html
password_reset_done.html
password_reset_confirm.html
password_reset_complete.html

settings.py

This setting for sending email to your client reset password

```python
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = 'Email'
EMAIL_HOST_PASSWORD = 'Password'
```
Can coding just be a job or does it have to effect my whole lifestyle?
Tags: anonymous, discuss, beginners, career
Published: 2022-04-27 15:44:37

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***

I'm a new developer and still learning, but I feel a bit overwhelmed by the amount of things to learn and it seems like coding is taking over my brain. While sometimes I enjoy getting sucked into it all, other times I feel like I can't escape it and haven't really figured out how to turn it off.

Meanwhile, when reading posts on communities like this one (DEV) and other developer-focused sites, it feels like everyone is "on" all the time. I imagine developers leaving their day jobs and coming home to write more code or write about coding and, to be honest, it freaks me out. I feel like I'm not doing enough.

If I want to be a developer, must I spend all of my waking hours practicing and thinking about code? Is it okay for software development to just be a job or should it effect my whole lifestyle?
Annoucement: Suggest What You Want!🎉🎉
Published: 2022-04-27 15:37:07

I have been recently doing blogs about different frameworks and tutorials on various things but today I need your help.

**I Need Your Help**
I want you to suggest me a topic (eg-frameworks, tutorials) and I will make a blog on it and also credit you for suggesting the ideas

Feel free to suggest me anything!

P.S - send suggestions in comments!
Basta de usar else innecesarios!
Tags: programming, codequality, spanish
Published: 2022-04-27 15:30:23

Cuantas veces hemos visto código de condicionales del tipo
```python
def myFunction(){
   if (condition1){
     do something ...
   }else{
     do another thing
   }
   return result
```
Si bien, no es algo que este mal, podemos refactorizar nuestro código para que el flujo de la lectura sea mas placentera.

Para poder realizar esto, lo que haremos es tomar lo que esta dentro del else, y ponerlo abajo del if, será ahora una consecuencia de que no se haya cumplido el if, que cambiará solo si la condicion se cumple.

Miremos un ejemplo sencillito

**Usando if/else**

```python
def dividirEnteros(divisor, dividendo){
   if (divisor == 0){
     print("No se puede realizar dicha operacion")
     return -1
   }else{
     resultado = dividendo / divisor
    return resultado   
   }  
```
**Usando solo if**

```python
def dividirEnteros(divisor, dividendo){
   resultado = 0
   if (divisor == 0){
     print("No se puede realizar dicha operacion")
     return -1
   resultado = dividendo / divisor
   
   return resultado
```
Veamos que si lo extendemos a casos mas complejos, su potencial aumenta.
Imaginemos que tenemos que checkear que ciertos datos esten correctos, algo que es muy comun de ver es una cadena de if anidados

```python
def myFunction(){
   if (condition1){
     si condicion1 se cumple, miro la condicion 2
     if (condition2) {
        si la condicion 2 se cumple, miro la 3 y asi hasta n...
        operaciones
     }
     else {
       operar distinto
     }
   }
   }else{
     do another thing
   }
   return result
```
Luego de 2 ifs, la cosa se pone pesada para comprender la función.
La solución a esto, es proponer un sistema de capas de control, cada capa tendrá una condicion que representa un nivel.De esa manera nuestro código queda de la siguiente manera.

```python
def myFunction(){
   inicializacion...
   if (!condition1){
     hacer cosas
   }
   hacer otras cosas
   
   if (!condition2) {
     hacer cosas
   }
   ...
   hacer otras cosas
   return result 
```
How Aku made a $34 Million Dollar Mistake with their Smart Contract
Tags: blockchain, nft, web3
Published: 2022-05-08 15:24:10

---
title: How Aku made a $34 Million Dollar Mistake with their Smart Contract
published: true
date: 2022-04-27 15:26:38 UTC
tags: Blockchain, NFT, web3
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whguc6aemzfaaeu4kebb.png
canonical_url: https://www.jenniferbland.com/how-aku-made-a-34-million-dollar-mistake-with-their-smart-contract/
---

Akutars was a highly anticipated NTF project. The project was developed by AKU Dreams which was created by pro retired baseball player Micah Johnson. 

## The Akutars Project Details

The Akutars project features the character of a young astronaut and contained 15,000 NFTs. The project launched on April 22nd.

The launch was in the form of a Dutch auction. In a Dutch auction the project stipulates the lowest bid would determine the price. The project opened at a price of 3.5 Ethereum (ETH) per NFT and gradually decreasing. Anyone who paid a higher amount would get a refund. If you minted more than one NFT you got a 0.5 ETH discount per NFT.

## Flaws in Smart Contract

We all know that the blockchain is immutable meaning it can't be changed. Smart Contracts take the legalese used in business contracts and converts that into code that is then stored on the blockchain. This makes the Smart Contract immutable too.

The code written by the developers for the Akutars project has several flaws. The first flaw was [pointed out](https://twitter.com/notchefbob/status/1517634348090015744) by a Twitter user named Hasan. The flaw was the refund to anyone who payed a higher price for an NFT created an infinite loop.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651070701436/4Xnpk3-eE.png)

The smart contract handled refunds by looping over everyone in batches. They would process refunds until they have run out of gas to use, then do the next batch. 

The problem was the infinite loop ensures that the refund will always run out of gas and fail.

Hassan expressed his concern with the Smart Contract to the Akutars development team via Twitter. The development assured Hassan there wasn't a problem with the contract.

Shortly after the communication with the Akutars development team, a hacker named USER221 triggered the exploit. This halted withdraws and refunds from the contract. This resulted in 11,539 ETH (around $34 million) being locked in the Akutars contract. Oops!
Replacing <img> with <div> when img.onerror is called
Tags: html, javascript
Published: 2022-04-27 15:11:10

###### (A Japanese translation is available [here](https://qiita.com/TomoyukiAota/items/1c92161439e504ff7177).)

When `img.onerror` is called, there are several options instead of leaving the broken image:

 - Replace `img.src` to set a different image
 - Set `img.style.display = 'none'` to remove the element from DOM

References:

 - [How to replace HTML img broken by missing or erroring image src](https://stackoverflow.com/a/64610546/7947548)
 - [How to hide image broken Icon using only CSS/HTML?](https://stackoverflow.com/a/22051972/7947548)

In my case, I wanted to replace `<img>` with `<div>`. I googled for a while but couldn't find the way. I did some experiments and found that configuring `img.outerHTML` does the trick.

{% codepen https://codepen.io/tomoyukiaota/pen/yLpmaVq default-tab=js,result %}

In the code above, `targetImage.outerHTML = "<div>Invalid Image!</div>";` is set.
Configuring style for the `<div>` will make it prettier.

As an actual example, I'm developing [Photo Data Viewer](https://photo-data-viewer.vercel.app/). This is an app to check Exif data of a photo. When the file other than photos is selected (i.e. files cannot be displayed with `<img>`), it displays "Unsupported File Format" using `<div>` instead of a photo.
The code is [here](https://github.com/TomoyukiAota/photo-data-viewer/blob/07bfc5f09184468fa4368c692a7ad023122880d3/src/components/photo-image/PhotoImage.tsx#L65-L72).
This app uses Next.js, so the code to set `onerror` looks different, but setting `outerHTML` is the same.

I hope it helps!
Coins vs Token: What is the Difference?
Tags: web3, blockchain, crypto, tutorial
Published: 2022-05-08 14:54:01

---
title: Coins vs Token: What is the Difference?
published: true
date: 2022-04-27 15:22:30 UTC
tags: web3, blockchain, crypto, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2npo518e5t92kf12uzlz.png
canonical_url: https://www.jenniferbland.com/coins-vs-token-what-is-the-difference/
---

If you are new to crypto, you may have heard the terms **coins** and **tokens**. You might wonder if they are the same? The simple answer is they are not the same or interchangeable. 

Coins and tokens both represent a store of value. This is similar to fiat currencies like the United States Dollar. Crypto coins are a form of money, while tokens represent something that can be assigned a price.

Technically all coins are considered tokens but not all tokens are considered coins. Confused? Here are the differences:

## Coins
A coin is native to a blockchain. For example, **ETH** is the coin for the Ethereum blockchain. 

A coin acts as money. You use coins to purchase goods and services like you would with traditional fiat currency.

Coins can be **mined**. You can earn more of your existing crypto coins by mining whether through Proof Of Work or Proof of Stake systems.

Any transaction involving coins are handled by the blockchain. Coins do not move around; only account balances change. If you purchase something with ETH coin then the balance in your wallet decreases 

## Tokens
Tokens represent an asset. 

Unlike coins, tokens do not have a blockchain. Instead, they operate on other crypto coins' blockchains. ETH is the coin for the Ethereum blockchain. Token like Tether, BNT and USDC also operate on the Ethereum network.

Any transaction involving tokens rely on smart contracts.

When a token is spent, it physically moves from one place to another