DEV Community: Karoline Alencar ✨

[a newbie on its journey to learn about web 3] notes about blockchain

Karoline Alencar ✨ — Sun, 12 Jun 2022 12:06:28 +0000

Blockchain is a technology that stores data in a decentralized way, that is, there is no “central administrator”, as in a traditional database. This means that the data is spread across multiple computers (which are also called nodes) across the network.

The way the blockchain works makes the technology secure: basically, all data is encrypted and for a transaction to be entered into the block, it needs to be verified and validated by most nodes, which makes it difficult to try to manipulate or defraud these transactions. As the flow to validate and enter the data in the block is expensive, the miners (the nodes) are rewarded for participating.

As with all technology, especially so new, there are points that still need to be improved and explored regarding blockchain, such as the high cost of energy, the limit of transactions per second (a difference of 4.6 transactions x 1,700 from Visa), regulation, etc, but, without a doubt, the advantages are also extremely attractive, such as security and the fact that you no longer need intermediaries to make transactions, which makes the whole process more efficient.

The world of blockchain can be very broad, from being used for cryptocurrencies to transferring ownership of assets (NFT or even physical assets such as vehicles, real estate), voting, smart contracts (which are contracts that self-execute when a condition is met) and many other areas, it is a new world that deserves to be explored!

Versão em pt-br

O blockchain é uma tecnologia que armazena dados de uma forma descentralizada, ou seja, não existe um “administrador central”, como em um banco de dados tradicional. Isso quer dizer que os dados estão espalhados em vários computadores (que também são chamados de nós) pela rede.

A forma que o blockchain funciona faz com que a tecnologia seja segura: basicamente, todos os dados são criptografados e para uma transação ser inserida no bloco, ela precisa ser verificada e validada pela maioria dos nós, o que faz ser difícil tentar manipular ou fraudar essas transações. Como o fluxo para validar e inserir os dados no bloco são custosos, os mineradores (os nós) são recompensados por participar.

Como toda tecnologia, especialmente tão novas, existem pontos que ainda precisam ser melhorados e explorados a respeito do blockchain, como o grande custo de energia, o limite de transações por segundo (uma diferença de 4.6 transações x 1,700 da Visa), regulação etc, mas, sem dúvidas, as vantagens são extremamente atraentes também, como por exemplo, a segurança e o fato de não precisar mais de intermediários para fazer transações, o que torna todo o processo mais eficiente.

O mundo do blockchain pode ser bem amplo, desde ser utilizado para criptomoedas até para transferência de propriedade de assets (NFT ou até assets físicos, como veículos, imóveis), votação, smart contracts (que são contratos que se auto executam quando uma condição é atendida) e muitos outras áreas, é um novo mundo que merece ser explorado!

source

[a newbie on its journey to learn about web 3] notes about web 3.0

Karoline Alencar ✨ — Sun, 12 Jun 2022 12:05:30 +0000

Web 3 is an idea, an ideia of a decentralized web, where it’s users are no longer clients - clients of the “big techs” (facebook, google, youtube etc) - but owners of their own data. This goes in the extreme opposite of how we know the web today, a place where we sell our data to gain access to platforms.

The idea of web 3 is to use blockchain - blocks of information encrypted in a chain - to deliver this proposal, where our data is not centralized on a server but is stored on several computers, where no one has access other than the “owner” and whoever it authorizes., making unwanted manipulation of this content impossible. This can be applied in a variety of ways - from blogging platforms to payments.

The way the web would work would be very different from what we have today, a plataform like twitter, for example, could be a DAO (decentralized autonomous organization), where decisions would be made in "community" and by votes and their definitions are guaranteed by what we call smart contracts, which are contracts used to automatically carry out transactions or anything suitable for trading without the need for an intermediary.

Versão em pt-br

A web 3 nada mais é que uma ideia, uma ideia de uma web descentralizada, onde seus usuários não são mais clientes - clientes, no caso, das conhecidas “big techs” - facebook, google, youtube etc - e sim donos do seus dados. Isso vai ao extremo contrário de como conhecemos a web hoje, um lugar que vendemos nossos dados para ter acesso a plataformas.

A ideia da web 3 é utilizar o blockchain - blocos de informação criptografados numa corrente - para entregar essa proposta, onde nossos dados não ficam centralizados em um servidor e sim em vários computadores, onde ninguém tem acesso além do “dono” e quem ele autorizar, tornando impossível a manipulação indesejada desse conteúdo, isso pode ser aplicado de várias formas - desde plataformas de blog até pagamentos.

O modo que a web funcionaria seria muito diferente do que temos hoje, uma plataforma como o twitter, por exemplo, poderia ser umas DAO (organização autônoma descentralizada), onde as decisões seriam feitas em “comunidade” e por votos e suas definições são garantidas pelo que chamamos de smart contracts, que são contratos utilizados para realizar transações automaticamente ou qualquer coisa apropriada para negociação sem a necessidade de um intermediário.

(Parte 1) Padrões JavaScript: Dicas rápidas

Karoline Alencar ✨ — Sun, 12 Jun 2022 12:04:12 +0000

Olá galera! Tudo bem com vocês? Depois de muuito tempo, resolvi voltar a escrever aqui no blog.

Como podem adivinhar pelo título, a ideia dessa série é mostrar alguns padrões/dicas que achei interessante do livro "Padrões JavaScript", do Stoyan Stefanov,
inclusive não poderia indicar mais! Se está procurando entender melhor sobre design patterns, coding patterns & antipatterns, esse livro é perfeito,
estou adorando o conteúdo! Bom, vamos lá! :p

Padrão objeto de configuração

Sabe quando sua função recebe muitos parâmetros e isso acaba dificultando a leitura? Por exemplo:

function registerUser (email, password, name, lastname, birthdate, country, city, subscribeNewsletter) {}

Você pode passar um objeto como parâmetro da função nesses casos, ou passar por exemplo, as informações "obrigatórias" como parâmetro
e passar um "objeto de configuração" com os campos opcionais. Alguns exemplos:

function registerUser (email, password, userConfig) {}
...

const userConfig = { 
   name: "Karoline",
   lastname: "Alencar",
   birthdate: "66/66/6666",
   country: "Brazil",
   city: "São Paulo",
   subscribeNewsletter: false
}
registerUser("email@email.com", "password", userConfig)

function registerUser (userConfig) {}
...

const userConfig = { 
   email: "email@email.com",
   password: "password",
   name: "Karoline",
   lastname: "Alencar",
   birthdate: "66/66/6666",
   country: "Brazil",
   city: "São Paulo",
   subscribeNewsletter: false
}
registerUser(userConfig)

Utilizando funções imediatas em objetos

Imagine que, ao iniciar uma aplicação, você precisa enviar uma mensagem baseado na localização do usuário e isso requer uma série de validações, uma alternativa é criar um objeto que faça a validação imediatamente e retorne a mensagem:

const userLocationMessage = {
 message: (function () {
   ...
   return 'hoi'
 })(),
 getMessage: function () {
    return this.message;
 }
}

// usando
userLocationMessage.getMessage() // "hoi"

Nesse caso, o valor de message é "hoi".

Por hoje é isso! xoxo <3

Tutorial: The Sims 4 Price Scraping with NodeJS, Puppeteer & Nodemailer

Karoline Alencar ✨ — Sat, 23 May 2020 01:56:12 +0000

Hi everyone! :)

In today's post I will teach you guys how to make a The Sims 4 Price Scraping. That means we are going to enter the EA website and extract the prices from their HTML and send to our email a list with the pack title, original, discount and final price.

Scraping is really cool to play with and you can do fun things with that! You can create your own scraping following this post logic.

So let's begin!

Installing NPM packages

We need Puppeteer and Nodemailer in your project, so let's install!

    npm install nodemailer puppeteer

Let's create an index.js file and require puppeteer and nodemailer

const puppeteer = require("puppeteer")
const nodemailer = require("nodemailer")

Let's begin with the fun part!

Create an async function called scrape

const scrape = async () => {}

Tell puppeteer to open EA page

const scrape = async () => {
  const browser = await puppeteer.launch({ headless: false })
  const page = await browser.newPage()
  await page.goto("https://www.ea.com/games/the-sims/the-sims-4/pc/store")
  await page.waitForSelector(".product__group__pack")
}

Here we create an browser instance, open a page and go to EA website. Then we wait for it to open and load.

Extract price and pack title

    const scrape = async () => {
        ...

        const result = await page.evaluate(() => {
            const products = Array.from(document.querySelectorAll('.product__group__pack'));

            const productsInfo = products.map(product => {
                const original = product.querySelector('.pack--hover__price--original');
                const discount = product.querySelector('.pack--hover__price--discount span');
                const final = product.querySelector('.pack--hover__price--final span');

                return {
                    title: product.querySelector('h2').innerText,
                    price: {
                        original: original ? original.innerText : null,
                        discount: discount ? discount.innerText : null,
                        final: final ? final.innerText : null,
                    }
                }
            });

            return productsInfo;
        });

        browser.close();
        return result;
    }

Here we get all packs title, original, discount and final price. Note that we need to look at the HTML structure to see how we can get that specific data. In that case they have a specific class for the pack.

We then return a object with the title and price from each pack. After that we close the browser and return the array.

Now that we have all packs info, let's create our function to send an email!

Create the email send function

const emailSend = async products => {}

This function will receive the product array that we created in the last section.

Add email and password info

const emailSend = async products => {
  const email = "fake@gmail.com"
  const password = "fakepass"
}

Here you can add your email and password. Note that it will only work with gmail and you need to enable 'allow less secure apps' in your config, don't forget to turn it off later.

Create nodemailer transporter

    const emailSend = async products => {
        ...
        const transporter = nodemailer.createTransport({
          service: 'gmail',
          auth: {
              user: email,
              pass: password
          }
      });
    }

Here we create a nodemailer transport with the user and password.

Create email content

    const emailSend = async products => {
        ...
        const mailOptions = {
            from: email,
            to: email,
            subject: 'The Sims 4 Prices',
            html: `
                <h1>The Sims 4 Prices</h1>
                <ul>
                    ${products.map(product =>
                        `<li>
                            <h2>${product.title}</h2>
                            <ul>
                                ${
                                    product.price.original
                                    ?
                                    `<li>
                                        <p>
                                            <b>Original:</b> ${product.price.original}
                                        </p>
                                    </li>`
                                    : ''
                                }
                                ${
                                    product.price.discount
                                    ?
                                    `<li>
                                        <p>
                                            <b>Discount:</b> ${product.price.discount}%
                                        </p>
                                    </li>`
                                    : ''
                                }
                                ${
                                    product.price.final
                                    ?
                                    `<li>
                                        <p>
                                            <b>Final:</b> ${product.price.final}
                                        </p>
                                    </li>`
                                    : ''
                                }
                            </ul>
                        </li>`
                    ).join('')}
                </ul>
            `
        };
    }

Here we create the email HTML. It contains all packs that we got in the scrape function with its title and price info.

Send email

    const emailSend = async products => {
        ...
        await transporter.sendMail(mailOptions, function (error, info) {
            if (error) return console.log(error)
            return console.log(info);
        });
    }

Here we tell nodemailer to send the email.

Now lets execute the code.

Executing scrape and emailSend function

scrape().then(data => emailSend(data))

Here we execute the scrape function and pass its result to emailSend. And that's all! =) Now we need to execute that file in nodejs.

Executing the index.js file in nodejs

Go to the index.js folder and execute that command in the terminal

    node index.js

Now check your email! 😛

Final code

const puppeteer = require("puppeteer")
const nodemailer = require("nodemailer")

const scrape = async () => {
  const browser = await puppeteer.launch({ headless: false })
  const page = await browser.newPage()
  await page.goto("https://www.ea.com/games/the-sims/the-sims-4/pc/store")
  await page.waitForSelector(".product__group__pack")

  const result = await page.evaluate(() => {
    const products = Array.from(
      document.querySelectorAll(".product__group__pack")
    )

    const productsInfo = products.map(product => {
      const original = product.querySelector(".pack--hover__price--original")
      const discount = product.querySelector(
        ".pack--hover__price--discount span"
      )
      const final = product.querySelector(".pack--hover__price--final span")

      return {
        title: product.querySelector("h2").innerText,
        price: {
          original: original ? original.innerText : null,
          discount: discount ? discount.innerText : null,
          final: final ? final.innerText : null,
        },
      }
    })

    return productsInfo
  })

  browser.close()
  return result
}

const emailSend = async products => {
  const email = "fake@gmail.com"
  const password = "fakepass"

  const transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: email,
      pass: password,
    },
  })

  const mailOptions = {
    from: email,
    to: email,
    subject: "The Sims 4 Prices",
    html: `
                <h1>The Sims 4 Prices</h1> 
                <ul>
                    ${products
                    .map(
                      product =>
                        `<li>
                            <h2>${product.title}</h2>
                            <ul>
                                ${
                                product.price.original
                                  ? `<li>
                                        <p>
                                            <b>Original:</b> ${product.price.original}
                                        </p>
                                    </li>`
                                  : ""
                              }           
                                ${
                                product.price.discount
                                  ? `<li>
                                        <p>
                                            <b>Discount:</b> ${product.price.discount}%
                                        </p>
                                    </li>`
                                  : ""
                              } 
                                ${
                                product.price.final
                                  ? `<li>
                                        <p>
                                            <b>Final:</b> ${product.price.final}
                                        </p>
                                    </li>`
                                  : ""
                              } 
                            </ul>
                        </li>`
                    )
                    .join("")}
                </ul>
            `,
  }

  await transporter.sendMail(mailOptions, function(error, info) {
    if (error) return console.log(error)
    return console.log(info)
  })
}

scrape().then(data => emailSend(data))

Updating Background with SpeechRecognition & Custom Properties

Karoline Alencar ✨ — Wed, 19 Sep 2018 15:25:14 +0000

Warning: It only works on Chrome.

After a long time, I decided to write a quick tutorial from my
Updating Background with SpeechRecognition & Custom Properties Pen,
where I use the SpeechRecognition API and CSS Custom Properties to update the background color of the body.
Building this Pen helped me understand more about the SpeechRecognition API and how to update Custom Properties via JavaScript and I hope it helps you too!

Now let's start!

Base HTML

<main class="main">
        <h1 class="title">Speak!</h1>
        <p class="description">You need accept the microphone permission!</p>
        <p class="value">Actual value: <span class="color-value" data-js="varValue">palevioletred</span></p>
        <span class="loader"></span>
</main>

Base CSS

:root {
  --color: palevioletred;
  font-size: 16px;
}

@media (max-width: 500px) {

  :root {
    font-size: 12px;
  }

}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color);
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 .6rem;

  color: #232121;
  text-align: center;
  border: 2px solid #232121;
}

.title {
  margin: 0;
  font-size: 4rem;
}

.description {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 300;
}

.value {
  font-size: 3rem;
  font-weight: 300;
}

.color-value {
  font-weight: bold;
}

.loader {
  font-size: 20px;
  font-style: italic;
}

Note that we are setting the --color variable and using it on the body's background-color. The variable has an initial value, which we set in the HTML too.

That's all we need to start writing our JavaScript. Let's start! :)

Tutorial

Setting the SpeechRecognition Object

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

We are using webkitSpeechRecognition because Chrome supports the API only with prefixed properties.

Defining an instance

const recognition = new SpeechRecognition();

Setting the language

recognition.lang = 'en-US';

Starting the Recognition

recognition.start();

Updating the Loader text

We can also update the loader text when the API begins to listen to the incoming audio, so the user knows that the API has started.

recognition.addEventListener('start', () => loader.textContent = 'Detecting...');

'Restarting' the API

Now we need to listen the end event and 'restart' the API, so the user can update the color again

recognition.addEventListener('end', recognition.start);

Getting the result from the API

First we need to listen the result event

recognition.addEventListener('result', e => {
});

Then get the results from the API

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0].transcript);
});

And that's all, we have the API initialized and we have the results from the speech recognition. Now we need to update the background and update the color value in the HTML.

Updating the variable value

Now that we have the result, we can update the --color variable

recognition.addEventListener('result', e => {
    document.body.style.setProperty('--color', transcript);
});

And then, update the HTML with the current color

Updating the HTML

recognition.addEventListener('result', e => {
    span.textContent = transcript;
});

Removing the loader

We can also 'remove' the loader by updating the value to ''

recognition.addEventListener('result', e => {
    loader.textContent = '';
});

Our Final Javascript:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const span = document.querySelector('[data-js="varValue"]');
const main = document.querySelector('.main');
const loader = document.querySelector('.loader');

const recognition = new SpeechRecognition();
recognition.lang = 'en-US';

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0].transcript)

    document.body.style.setProperty('--color', transcript);
    span.textContent = transcript;
    loader.textContent = '';
});

recognition.addEventListener('start', () => loader.textContent = 'Detecting...');

recognition.addEventListener('end', recognition.start);

recognition.start();

And that's all :)