teleren/devto huggingface dataset:
ERC-20 Tokens
Tags: blockchain, beginners, web3, solidity
Published: 2023-01-17 16:13:04

An **ERC-20 token** is a representation of some sort of asset on the Ethereum network. These could be anything:

shares in a company
reward system points
voting rights
cryptocurrency
lottery tickets
on-chain Chuck E Cheese tokens
anything you can think of!
This is what has made Ethereum a popular choice for many different use cases across industries - anyone can tokenize any asset.

Importance of the ERC-20 Token Standard
A key point to understand here is that ERC-20 is a technical standard! 💡

The main use of the ERC-20 standard is to increase compatibility of the ecosystem. Exchanges like Uniswap are then able to build incredibly powerful applications because they create infrastructure that supports the ERC-20 interface; this then triggers developers who use the ERC-20 standard to develop, instant compatibility with Uniswap and many other dApps!

**ERC-20 Token Smart Contract**
At the base level, an ERC-20 token smart contract simply uses a mapping to keep track of fungible tokens: any one token is exactly equal to any other token; no tokens have special rights or behavior associated with them.

**ERC-20 Token Interface**
As we covered above, ERC-20 defines a common interface so that any application can use them in a standard way.

This simplifies and eases developers’ tasks, because they can proceed with their work, knowing that each and every new project won’t need to be redone every time a new token is released, as long as the token follows the rules.

The interface consists of a number of functions that must be present in every implementation of the standard, as well as some optional.

An ERC-20-compliant token contract must provide at least the following:

name, symbol, and decimals are all optional fields
totalSupply defines the current circulating supply of the tokens
balanceOf will return the balance for a particular user
transfer which is the bread and butter, transfer from one account to another
approve, transferFrom and allowance are methods for other contracts moving your funds


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blbfcyjz0w6mvqe84x5t.png)

**ERC-20 Data Structures**
There are two important data structures used by the ERC-20 token standard that we should review:

**balances**: mapping of token balances, by owner. Each transfer is a deduction from one balance and an addition to another balance.
**allowances**: mapping of allowances/delegate spending. This is a nested mapping in which the primary key is the address of the token owner which maps to a spender address and amount delegated to spend.
Diário de bordo #6
Tags: webdev, javascript, beginners, programming
Published: 2023-01-17 15:52:05

## classList 

É uma propriedade do JavaScript que funciona como uma alternativa para acessar a lista de classes CSS de um elemento.

## Sintaxe

```
 const html = document.documentElement

 html.classList.toggle('bg-black')
```

Neste exemplo de sintaxe que estou utilizando funciona da seguinte forma: 

1. A declaração da varíavel HTML recebe o retorno do elemento de um documento
2. Faço a chamada dessa váriavel atribuindo a ela a propriedade classList que irá ser responsável por realizar a leitura da classe CSS `bg-black` e o `toggle` que é usado para alternar entre o estado do nosso elemento HTML, inserindo nossa classe CSS como 
parâmetro e fazendo essa mudança em nosso documento HTML.

Observação: A classList é uma propriedade **read-only**, ou seja, ela apenas faz a leitura das classes CSS. Mas ela tem compatibilidade com os metodos abaixo na qual você consegue adicionar, remover ou alterar essas classes CSS:

```
add();
// Adiciona um ou mais tokens à lista
contains();
// Retorna verdadeiro se a lista contiver uma classe
remove();
// Remove um ou mais tokens da lista
length();
// Retorna o número de tokens na lista
replace();
// Substitui um token na lista
toggle();
// Alterna entre tokens na lista
value;
// Retorna a lista de tokens como uma string
values();
// Retorna um Iterator com os valores da lista
forEach();
// Executa uma função de retorno de chamada para cada token na lista
entries();
// Retorna um Iterator com pares chave/valor da lista
supports();
// Retorna verdadeiro se um token for um dos tokens suportados por um atributo
keys();
// Retorna um Iterator com as chaves da lista
item();
// Retorna o token em um índice especificado
```
A website that shows you whether the investment strategies trending on Reddit actually work.
Tags: showdev, startup
Published: 2023-01-17 15:42:45

I kept seeing interesting trading strategies on Reddit, but after working long hours, I didn't want to spend hours or days testing them. Additionally, those strategies are frequently based on alternative data, which can be costly or almost impossible to find.

I decided to write a short, reusable algorithm to help me with testing strategies. I added an easy-to-use, no-code interface, and since it was quite interesting, I then created a website out of it.

Currently, [the website](https://app.inegy.io/) allows you to test your trading strategies based on Google trends, Wikipedia views, sentiment on social networks (for example, sentiment on Reddit and Twitter), personal stock trading by U.S. Senators and Representatives, insider trading, public sentiment around US equities, and many more.

I add one or two new strategies per week and usually select the ones that are currently trending on Reddit.

Here is some more info on the stack:

**Frontend**

The frontend of the application is written in Next.js.
Stripe is used for payment.
Clerk.dev for user management.
MixPanel and Google Analytics for analytics.
The frontend is deployed to Vercel using an automated pipeline.

**Backend**

The backend is written mostly in express.js.
The data is stored in Postgres.
The backend uses a number of free APIs to access data.
Here are some examples of those APIs: Reddit API, Twitter API, Google Trends API, WIkipedia API.
Screen scraping is also used as a source of some data.
The backend uses a number of reusable functions to process the data, to cut the time needed to add each new strategy.

I would be very thankful for any feedback, feature requests, and for joining my [Reddit community](https://www.reddit.com/r/inegy/).
💡 GetXaaS - SaaS Listing Service
Tags: saas, startup, idea
Published: 2023-01-17 15:39:03

Here's an Startup/SaaS idea to try out:

## 🔍 GetXaaS - SaaS Listing Service

**The world is drowning in SaaS.** Continuous improvement demands continuous payment.

How do enterprise purchasers find the best SaaS companies? How can you find out the real differences between one SaaS product and another in the same niche and possibly which one of your competitors is using what?

**💼 🧠 Build a SaaS listing service that offers concierge research.**

Sure, "alternative to" sites (like [AlternativeTo](https://alternativeto.net)) exist, but they're all well known to be SEO plays and sometimes have useful information but can be spammy.

Then there's [SaaSWorthy](https://saasworthy.com) which is an excellent competitor. In fact, simply cloning the effectiveness of SaaSWorthy (and maybe incorporating their ratings) is a great start, but not where you should end.

Photo by <a href="https://unsplash.com/@guzimak?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Guzel Maksutova</a> on <a href="https://unsplash.com/photos/B30XL_m3fso?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
This was [originally posted @ Unvalidated Ideas (Edition 38)](https://unvalidatedideas.com/editions/38)
The Benefit of the Ternary Operator
Tags: javascript, beginners, webdev, functions
Published: 2023-01-17 15:22:56

First, we must look at what a **ternary** operator is:

> _The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as an alternative to an if...else statement. 
> Source: MDN_

Essentially, it is a way to write an _If/Else_ statement in fewer lines of code. What is the syntax you may be asking yourself. 

```
condition ? ifTrue : thenFalse

```
What does this mean? Simply put you write a condition first. Let's say you want to see if someone is legal drinking age or if they are underage. First you'd establish the person's age then write a **ternary expression** to determine if this person is legal to drink (ifTrue) or underage (thenFalse).

If the statement is true, it will look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vkfpu6bk5uhcp0c9ix8.png)

If it is false, the final result will be this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzcbzpdoes1c66t8tteq.png)
Liskov Substitution principle is EASY
Tags: solidprinciples, oops, liskov, csharp
Published: 2023-01-17 15:16:38

**The Liskov Substitution Principle (LSP)** is a principle in object-oriented programming that states that objects of a superclass should be able to be replaced with objects of a subclass without affecting the correctness of the program. In other words, if a program is using a base class, it should be able to use any of its derived classes without knowing it and still work correctly. This principle is related to the concept of polymorphism and is one of the five principles of SOLID programming.

The LSP is based on the idea that a subclass should be a subtype of its superclass, meaning it should be a valid replacement for an object of the superclass. For this to be true, the subclass must obey the contracts and constraints of the superclass, including its method signatures, preconditions, and postconditions. This means that the methods of the subclass should have the same name, return type, and parameters as the methods of the superclass and should not add any new constraints or require any more information than the superclass methods.

Here is an example of Liskov Substitution Principle:

```c#

class Rectangle
{
    public virtual int Width { get; set; }
    public virtual int Height { get; set; }

    public int Area()
    {
        return Width * Height;
    }
}

class Square : Rectangle
{
    public override int Width
    {
        get { return base.Width; }
        set { base.Width = base.Height = value; }
    }

    public override int Height
    {
        get { return base.Height; }
        set { base.Width = base.Height = value; }
    }
}

```

In this example, Square class is derived from Rectangle class and it is Liskov Substitution Principle compliant, because it is a valid replacement for the objects of the Rectangle class and it does not add any new constraints or require any more information than the methods of Rectangle class.

It helps to follow SOLID principles in the software design, making software more maintainable, extensible and testable.

LSP is actually a subset of polymorphism.
Refer below image for more clarification.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70ewbrnwpt4i4o1h0qz4.png)


If we would have implemented area of Square as Side * Side, I would have given wrong results for calculating rectangle's area. 
In this example, a square us a special type of rectangle having all sides same. So a square **IS-a** rectangle. Hence a square should be **IS-Substitutable** for a rectangle.

So for making child such a that, we will always be able to get the parent in its expected normal form is Liskov substitution.

Seems Simple... Right?
Meme Tuesday
Tags: meme, humour
Published: 2023-01-17 15:15:40

I am pretty late to post on Meme Monday, so why don't create my own Meme Tuesday space?

I am taking the money here, what about you?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkm1qj7sx17kekvkwgar.png)
CSS :before vs ::before & :after vs ::after
Tags: html, webdev, fundamentals, css
Published: 2023-01-17 15:05:00

When reading CSS code, we sometimes see code using `:before` and other times with `::before` (same for `::after`).

Is there a difference between the 2 notations? Is one correct?

## A bit of history

In CSS2, the syntax used at the time was `:before`. This was confusing because CSS also had _selectors_ like `:hover`, but they both had different semantic meanings.

So in [Selectors Level 3](https://drafts.csswg.org/selectors-3/#gen-content), they decided to change the syntax for `:before` to `::before` (and for legacy reasons, we can still use `:before`, but it is now deprecated).
The `:` notation isn’t deprecated as a whole, instead the old syntax was split into two:
-  `:` now represents pseudo-classes (and is still valid for `:hover` for instance),
-  `::` represents pseudo-elements (and should be used for `::before`).

## `:pseudo-class`

Pseudo-classes represent variations of a state of an element.
When the condition is satisfied, the **whole** element is selected.

> A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

![Visual representation of `span::hover`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pbfu10w6omks0zpp7pn.png)

### Example

- `:hover` matches an element on hover
- `:not(p)` matches an element if it's not a `p`
- `:last-of-type` matches an element that is the last of its siblings, and also matches a certain type selector.

See the full list in [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)


## `::pseudo-element`

On the other hand, pseudo-elements are **parts** of the original element. They represent fake HTML nodes within the selected element.

> A CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s).

![Visual representation of `span::first-letter`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msnfwiraud02blaskatr.png)


### Example

- `::before` corresponds to a slot just before this element,
- `::first-line` selects the first line in the current element,
- `::first-letter` retrieves the very first letter of the element.

See the full list in [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
Add Eslint, Prettier, Husky, Lint-staged to Vue Project
Tags: eslint, vue, javascript, husky
Published: 2023-01-17 15:00:39

**1. Install packages**
```
npm install husky lint-staged eslint prettier --save-dev
```

**2. eslint configuration**
```
npm init @eslint/config
```

**3. lint-staged Configuration**
Add this to package.json
```
{
  ...
  "lint-staged": {
    "src/**/*.{js,vue,html,css}": "prettier --write",
    "src/**/*.{js,vue}": "eslint --fix"
  }
}
```

**4. husky configuration**
```
npx husky-init && npm install
```

Update `.husky/pre-commit` file

```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
```
Links úteis para aprender Svelte
Tags: svelte, sveltekit
Published: 2023-01-17 14:52:58


![Svelte logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bojtg9eamnua9zpzhy2w.png)

Meu nome é Achiles Matheus. Desenvolvi nos últimos meses 2 websites para ajudar a comunidade no aprendizado do svelte, uma incrível ferramenta para desenvolvimento de apps web.

Guia svelte — https://guia-svelte.vercel.app/
Exemplos svelte — https://svelte-examples-three.vercel.app/

De acordo com o “The state of js” (https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/), o svelte apresenta as seguintes estatísticas:

## Interesse

![Svelte-interest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w66id90wegvizrnvns1i.png)

## Uso

![Svelte-usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oesz6f0hcr0da5hf86ug.png)

## Consciência

![Svelte-awareness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qq0upcse2undkuc9cqe.png)

Perceba que ele está entre os 4 mais utilizados ao redor do mundo, e o que está com maior nível de interesse. Apesar de não ter vagas da emprego dedicadas ao svelte, vale a pena adicioná-lo à sua listas de próximas tecnologias a serem aprendidas.

E se você é iniciante no javascript, recomendo e muito aprender o svelte após o javascript, pela sua estrutura ser muito próxima à estrutura HTML, o que facilita o aprendizado.

Por hoje é só, bons estudos.
Handfull of commands for more than 80% of command line tasks.
Tags: beginners, programming, cloud, linux
Published: 2023-01-17 14:49:16

Here's a quick cheat sheet of some commonly used bash commands:

1. **Navigating the file system**
    - **`pwd`**: Show the current working directory.
    - **`ls`**: List the files in the current directory.
    - **`cd`**: Change the current working directory.
    - **`mkdir`**: Create a new directory.
    - **`rmdir`**: Remove an empty directory.
    - **`rm`**: Remove a file or directory.
    - **`mv`**: Move or rename a file or directory.
    - **`cp`**: Copy a file or directory.
2. **Manipulating files and directories**
    - **`touch`**: Create a new empty file.
    - **`cat`**: Display the contents of a file.
    - **`head`**: Display the first few lines of a file.
    - **`tail`**: Display the last few lines of a file.
    - **`grep`**: Search for a pattern in a file or a group of files.
    - **`sed`**: Edit files automatically.
    - **`awk`**: Process and analyze text files.
3. **Environment Variables**
    - **`export`**: Set an environment variable.
    - **`printenv`**: Show all environment variables.
    - **`env`**: Show all environment variables.
4. **Working with processes**
    - **`ps`**: Show running processes.
    - **`kill`**: Send a signal to a process to terminate it.
    - **`top`**: Show the processes using the most resources.
    - **`htop`**: Show the processes using the most resources with a interactive interface.
5. **Working with shell**
    - **`echo`**: Output a message or the value of a variable.
    - **`read`**: Read input from the user and store it in a variable.
    - **`if`**: Perform actions based on the success or failure of a command.
    - **`for`**: Perform a set of commands for a list of items.
    - **`while`**: Perform a set of commands until a certain condition is met.
    - **`until`**: Perform a set of commands until a certain condition is met.
6. **Working with Git**
    - **`git init`**: Initialize a git repository in the current directory.
    - **`git status`**: Show the status of the current repository.
    - **`git add`**: Add files to the next commit.
    - **`git commit`**: Create a new commit.
    - **`git log`**: Show the commit history.
    - **`git diff`**: Show the differences between commits.
    - **`git branch`**: List, create, or delete branches.
    - **`git checkout`**: Switch to a different branch or commit.
    - **`git merge`**: Merge one branch into another.
    - **`git pull`**: Fetch changes from a remote repository and merge them.
    - **`git push`**: Send changes to a remote repository.

This is not an exhaustive list and there are many other commands and options available in bash. But the above commands should be sufficient to get you started with basic shell scripting.
Dictionaries in Swift
Published: 2023-01-17 14:45:25

This tutorial assumes that you know the concept of an [Array in Swift](https://www.swiftanytime.com/arrays-in-swift/). Dictionaries are nothing other than the advanced layer of an Array!

If you want to store information about students going to the school like their Name, Surname, ID, Grades, and Address, keeping it as an array is a good idea, but what if some information is missing. For example, a student is not graded yet, and to find out things like that makes it difficult for you to figure out.

```
var student: [Any] = [
	"Jared",
	"Davidson",
	25062022,
	98.4,
	"Yellowknife, Mars"]
```

Not to worry about, as Dictionary solves this issue. Like you have seen different blocks while filling out the registration form or a signup page, each asking for your information and helping to insert a value at a perfect spot, just like that, we are giving a key to our array to catch the info quickly of a student.

For dictionaries, write down the key first, the same as writing a String item, then adding a colon and the value. It's basically has Key : Value pairs where if you need to check any information, such as Name, Address or ID of the student, you simply need to access the key name corresponding to it and dictionary tells you its value.

```
var student = [
	"Name": "Jared", 
	"Surname": "Davidson",
	"ID": "25062022",
	"Grades": "98.4",
	"Address": "Yellowknife, Mars"
	]

print(student["Name"])
print(student["Address"])
print(student["ID"])

// prints
Optional("Jared")
Optional("Yellowknife, Mars")
Optional("25062022")
```

Here in this code snippet, you'll find that each value that you try to access is an optional wrapped value, dictionary has all its key's value optionally wrapped because at runtime there is no guarantee if there is a value for a given key or not.

That's all for the concept of Dictionaries. Congratulations! Keep pushing yourself forward, learning things. We encourage you to learn more related topics next like [How to generate random number in Swift](https://www.swiftanytime.com/generate-random-number-in-swift/), [Functions in Swift](https://www.swiftanytime.com/functions-in-swift/). Till then,

Eat. Sleep. Swift Anytime. Repeat
generate-sitemap 1.9.1 Released
Tags: github, webdev, showdev, python
Published: 2023-01-17 14:44:30

## TL;DR

I just released [generate-sitemap](https://github.com/cicirello/generate-sitemap) 1.9.1, a [GitHub Action for generating XML sitemaps for static websites](https://dev.to/cicirello/generate-an-xml-sitemap-for-a-static-website-in-github-actions-20do). The generate-sitemap GitHub Action is implemented in Python, and generates an XML sitemap by crawling the GitHub repository containing the html of the site, using commit dates to generate `<lastmod>` tags in the sitemap.


## Changelog 1.9.1 - 2023-01-16

### Fixed
* Case-insensitive check for `<meta name="robots" content="noindex">` in head of html files.
* Correct handling of `<meta content="noindex" name="robots">` (i.e., content before name).

### Dependencies
* Bump [cicirello/pyaction](https://github.com/cicirello/pyaction) from 4.12.0 to 4.14.1


## More Information

To learn more, see my earlier post about generate-sitemap here on DEV: 

{% link https://dev.to/cicirello/generate-an-xml-sitemap-for-a-static-website-in-github-actions-20do %}

You can find the source code and documentation for using in a GitHub workflow in the GitHub repository:

{% github cicirello/generate-sitemap %}

For more information on generate-sitemap and other actions, see this website about the GitHub Actions that I maintain:

{% embed https://actions.cicirello.org %}


## Where You Can Find Me

Follow me here on DEV:

{% user cicirello %}

Follow me on GitHub:

{% github cicirello/cicirello %}

Or visit my website:

{% embed https://www.cicirello.org/ %}