DEV Community: ju

Datalking #1: So, the machine is learning... How?

ju — Thu, 23 May 2024 01:56:45 +0000

Depois de um longo período sem aparecer por aqui, resolvi voltar a publicar textos sobre os meus estudos. Há alguns meses fiz uma breve transição da área de Front-end para a área de Dados e Machine Learning, e uma boa parte da minha decisão se deve ao fato de que entrei, há algumas semanas, em um grupo de pesquisa da Universidade Federal do Paraná, o CiDAMO, que foca nos estudos das áreas de Aprendizado de Máquina, Otimização e Dados. Desde então, concentro os meus estudos em Machine Learning, e decidi trazê-los para cá, em alguns posts pequenos para me ajudar a fixar o conteúdo e, principalmente, ajudar outros iniciantes que possam aparecer por aqui por acaso. :)

O que pode ser entendido por "Machine Learning"?

De acordo com a IBM, Machine learning é uma área da inteligência artificial (IA) e da ciência da computação que se concentra no uso de dados e algoritmos para imitar a maneira como os humanos aprendem, melhorando gradualmente sua precisão.

Pode parecer uma definição simples, mas não explica muita coisa. O que isso quer dizer?

Imagine que você é um ilustrador digital e utiliza um software de edição de imagens para criar as suas ilustrações. Recentemente, você fez a compra de um pacote de novos pincéis para fazer desenhos em aquarela – algo que nunca tinha feito antes –, mas esqueceu de instalá-los. Logo, sem a instalação dos pincéis, não é possível que você aprenda a aumentar seu conhecimento sobre desenho digital e comece a desenhar no estilo aquarela, certo? Com o aprendizado de máquina é mais ou menos assim!

Em um sistema que utiliza o aprendizado de máquina para reconhecer padrões, são aplicados os training sets para a máquina poder, de fato, aprender. Além disso, esses conjuntos possuem uma instância de treinamento, que pode ser uma observação ou um registro no seu conjunto de dados sobre o qual você deseja fazer uma previsão (sabe quando criamos personagens no Sims e eles te oferecem a possibilidade de escolher a cor do cabelo, corte do cabelo, cor dos olhos, etc? Podemos relacionar essas características às instâncias de treinamento e os seus personagens aos dados de treino!). Independente do algoritmo utilizado, os dados instanciados são extremamente necessários para que o sistema de ML os utilize a partir de conjuntos de treinamento. Caso eles não sejam inseridos nestes conjuntos e, consequentemente, utilizados nos treinamentos do modelo, não é possível aprimorar o seu sistema.

E como esses modelos aprendem?

Há duas maneiras de ensinar o seu modelo de ML, dependendo da sua necessidade e dos seus recursos disponíveis. O aprendizado Batch, mais convencional, nada mais é do que o aprendizado em lote — ou seja, o seu algoritmo é alimentado de uma só vez com um conjunto completo de dados (o lote propriamente dito), e é a partir desse conjunto que o seu algoritmo será treinado. Assim como ele é alimentado de uma só vez, o seu algoritmo também irá processar os conjuntos de treinamento da mesma forma. No que diz respeito às vantagens, isso vai depender dos seus recursos. Se você possui um conjunto de dados bastante estável e bons recursos computacionais, é interessante optar pelo aprendizado Batch. Alguns dos modelos que aprendem por Batch são os de regressão e classificação, por exemplo.

Mas se essa não é a sua realidade, uma boa opção é ensinar o seu algoritmo através do aprendizado Online, que treina o sistema por meio de amostras do conjunto de dados em tempo real, e não em um lote, de uma só vez, como o Batch. É um método interessante, porque permite que o seu sistema possa ser atualizado, de forma contínua, com novas amostras de dados de treinamento. Isso economiza recursos, tempo (pois os conjuntos de treino são processados um de cada vez) e permite que o seu modelo se adapte às mudanças dos dados de maneira contínua. Esse tipo de aprendizado é bastante aplicado em detecção de anomalias e recomendações, ou seja, problemas que requerem que o seu algoritmo se adapte a mudanças constantes nos padrões dos dados.

Concluindo!

Como expliquei no primeiro parágrafo, estou documentando os meus aprendizados como iniciante na área, então essa série de artigos será composta de textos curtos sobre Machine Learning, como se fossem os componentes um roadmap em escrito com pequenas paradas durante a trilha. No próximo post, falarei sobre alguns exemplos de algoritmos de Aprendizagem Supervisionada, que o meu foco de estudo atual. Caso tenha gostado ou queira me enviar sugestões, dúvidas ou críticas, fique à vontade para comentar nesse post ;) Até breve!

Referências

Geron, A. (2019). Hands-on machine learning with Scikit-Learn, Keras and TensorFlow: concepts, tools, and techniques to build intelligent systems (2nd ed.). O’Reilly.
https://guiadehospedagem.com.br/glossario/o-que-e-batch-learning-vs-online-learning/
https://www.deeplearningbook.com.br/machine-learning-guia-definitivo-parte-3/

JavaScripting #1: como utilizar as declarações var, let e const?

ju — Sun, 01 May 2022 21:11:40 +0000

No início dos meus estudos mais aprofundados em JavaScript, na disciplina de Desenvolvimento Web I, discernir entre os tipos de declarações de variáveis era, certamente, uma das minhas maiores dificuldades. Afinal de contas – e era assim mesmo que eu pensava –, não é tudo a mesma coisa?

Adivinha só: não é! E muito disso se baseia nos conceitos de escopo. Se em tempos remotos só tínhamos o var como declaração de variáveis em escopos globais e de função, com a chegada do ECMAScript 6, lá em 2015, tornou-se possível declarar variáveis com let e const e também surgiram os escopos de bloco, funcionalidades que deixaram o JavaScript mais uniforme e (um pouco) menos sujeito a problemas de segurança.

🚨 ...e acho que aqui vale um pequeno adendo sobre o que é um escopo e quais os tipos de escopos que existem:

O escopo global se refere a todo o código – ou seja, se você tiver 20 funções diferentes no seu documento de código e declarar uma variável global, é possível utilizar essa variável nessas 20 funções. Assim:

var hello = "Bem-vindo!";

function visitorOne() {
  alert(hello);
}

function visitorTwo() {
  alert(hello);
}

function visitorThree() {
  alert(hello);
}

alert(hello);

Já o escopo local (ou de função) é todo pedaço de código referente a uma função. Ou seja, uma variável de função é toda variável declarada dentro de uma função e que só pode ser acessada dentro dela. Um exemplo:

function showComments() {
  let comment = "Muito legal!";
  console.log(comment);
  //Ao acessar essa função, o valor da variável "comment" será mostrado em tela.
}

showComments();
//Muito legal!

function showOtherComments() {
  console.log(comment);
  //Aqui o resultado retornado pela função hideComments será um erro dizendo que a variável não foi definida, pois é impossível acessar a variável "comment", já que é uma variável reservada APENAS ao escopo da função showComments(), logo, será interpretada como se fosse uma variável inexistente.
}

showOtherComments();
//ReferenceError: comment is not defined

Por fim, o escopo de bloco é qualquer região do código que utilize os famosos "bigodinhos" (ou melhor, chaves), assim como as funções, porém, a diferença esse tipo de escopo é criado por estruturas de controle, tais como as estruturas condicionais if/else ou switch, de repetição for ou do/while, entre outros. Por ter essa particularidade, as variáveis declaradas em escopo de bloco podem ser acessadas dentro de toda a função, e não apenas na estrutura de controle. Tipo isso aqui:

function commentPost() {
  //Escopo de função
  let blogPost = "finished";

  if (blogPost === "finished") {
    //Escopo de bloco
    var username = "anewrites";
    alert(`Comenta aí, ${username}! :P`);
  } else {
    alert("Continue lendo <3");
  }

  console.log(blogPost); //finished
  console.log(username); //anewrites
}

Agora que já temos uma pequena noção de como cada tipo de escopo funciona, vamos dar uma olhada no que significa cada declaração de variável e como elas podem ser utilizadas dentro de cada tipo de escopo. 👇

O velho conhecido "var"

Como eu comentei ali no comecinho do post, o var era a única declaração de variável global e de escopo de função disponível até a chegada do ES6 – ou seja, o var pode ser declarado globalmente e ser acessado em qualquer região do código, ou ser declarado em escopos de função e acessado apenas nas funções as quais essas variáveis pertencem. Resumidamente, a vantagem de utilizar var, pelo menos até a chegada do ES6, é diferenciar variável local de variável global.

//Sintaxe:
var varname1 = value1;

//Var declarada de forma global

var posts = 2;

function postCounter() {
  console.log(posts);
}

function postCounter2() {
  console.log(posts);
}

function postCounter3() {
  console.log(posts);
}

postCounter(); //2
postCounter(); //2
postCounter(); //2
console.log(posts); //2

//Var declarada em escopo de função

var name = "Ane";

function postCounter() {
  var numberOfPosts = 2;
  console.log(`${name} fez ${numberOfPosts} posts até agora!`);
}
postCounter(); //Ane fez 2 posts até agora!
console.log(numberOfPosts); //ReferenceError: numberOfPosts is not defined (ao tentar acessar essa variável fora da função, obtemos um erro, pois ela só "existe" dentro da função em que foi declarada)

Além dessas duas maneiras de declarar uma var, é possível atribuir outro valor à mesma variável. Desta forma:

var posts = 1;
var posts = 2;
console.log(posts); //2

E o hoisting, hein? 🏗️

Eu até falei que é possível atribuir outro valor a uma variável var, mas tem algo um tanto complicado sobre fazer isso: o hoisting. Derivado do termo hoist em inglês, que significa "levantar" ou "içar" algo, o hoisting faz com que uma var seja posicionada no início do contexto de execução no qual ela foi declarada – ou seja, esse mecanismo faz com que as variáveis var que você declarou "subam" para o início do seu trecho de código antes mesmo que ele seja executado, algo que faz com que a sua variável, que antes tinha um valor, seja interpretada como undefined, mais ou menos assim:

var texto = "dá pra evitar hoisting? D:";
//Variável var global

function writeOnScreen() {
  console.log(texto);
  var texto = "às vezes é inevitável...";
  console.log(texto);
}

writeOnScreen();
//undefined
//às vezes é inevitável...

Mas ué, cadé o primeiro console.log?

Então, esse é o conceito do hoisting. Ao invés de interpretar a variável global e exibi-la em tela, esse mecanismo irá inicializar a variável global lá no início do bloco de função, e só depois é que ela será executada. Pra entender de vez como isso funciona, vamos pensar de acordo com o próprio JavaScript, passo a passo. É assim que esse bloco de função foi executado:

var texto = "dá pra evitar hoisting? D:";
//Variável var global

function writeOnScreen() {
  var texto; //A variável global foi "levantada" durante a execução até o início deste bloco de função
  console.log(texto); //undefined (pois ela só foi declarada aqui dentro, mas não foi definida)
  var texto = "às vezes é inevitável..."; //Valor atribuído pela primeira vez (de acordo com o hoisting) dentro deste bloco de função
  console.log(texto);
}

writeOnScreen();
//undefined
//às vezes é inevitável...

Aqui notamos uma das desvantagens de utilizar declarações var. Caso ela sofra hoisting, será inicializada sempre com um valor undefined. E claro, talvez a maior brecha de segurança da utilização do var seja a facilidade em redefinir valores para uma declaração var, independente do seu escopo de origem, prática que pode vir a causar inúmeros bugs na sua aplicação. Portanto – e essa é uma opinião minha, baseada no que estudei até aqui e ouvi de pessoas desenvolvedoras mais experientes -, com a chegada do ECMAScript 6, é possível evitar a utilização do var, a não ser que a aplicação em questão seja utilizada em navegadores mais antigos, que não possuam suporte a let e const.

A chegada do let

O ECMAScript 6 trouxe diversas novidades, e uma delas foi a chegada da declaração let, uma versão mais consistente de declaração de variáveis e que evita problemas de declaração repetida no mesmo escopo, por exemplo. A seguir, vamos ver algumas das funcionalidades do let e como elas podem ser vantajosas para o nosso código:

O let é declarado apenas em escopos de bloco, ou seja, qualquer pedaço do código delimitado por chaves ({}) e a variável em questão estará disponível apenas neste escopo, dessa forma:

let age = "25";

if (age > 20) {
  let name = "fulano";
  console.log(name); //fulano
}
console.log(name); //name is not defined

O let também não permite uma declaração repetida de uma variável como é visto no var. É possível atribuir outro valor a uma variável let, mas não é permitido declará-la novamente. Por exemplo:

//Atribuição de um novo valor
let bolo = "morango";
bolo = "abacaxi";

console.log(bolo); //abacaxi

//Declaração repetida da variável
let bolo = "morango";
let bolo = "abacaxi"; //Identificador 'bolo' já foi declarado

Porém, isso é uma regra apenas para declarações de variáveis no mesmo escopo. Em escopos diferentes, essa declaração repetida funcionará normalmente, já que o JavaScript interpreta variáveis de escopos diferentes como declarações diferentes.

Acredito que o let seja um tanto mais seguro que o var nesse sentido. Ao declarar duas variáveis com o mesmo nome, mas em escopos diferentes, por exemplo, não temos o risco de estarmos mexendo na mesma variável, como ocorre em variáveis do tipo var.

Por fim, a variável constante!

É assim que eu gosto de chamar a declaração const, pra ser sincera. E, de fato, é mais ou menos isso. O const armazena valores read-only que não podem ser alterados, ou seja, que se mantêm constantes. Algumas características do const:

Variáveis declaradas como const, assim como let, só podem ser acessadas em escopo de bloco;
Meio óbvio, mas é bom reforçar: variáveis const não podem ser redefinidas. Ou seja, você não poderá fazer isso:

const suco = "laranja";
suco = "limão"; //TypeError: Atribuição à variável constante.

//E nem isso:

const torta = "limão";
const torta = "banofee"; //Identificador 'torta' já foi declarado

Justamente por ser uma variável constante ( 🤪 ), o const precisa ser inicializado com um valor atribuído. Caso contrário, o seguinte erro será mostrado:

const fruta;
 //Missing initializer in const declaration

Certo, mas então qual delas eu devo usar?

Isso vai depender muito de qual aplicação você está desenvolvendo, e para qual browser. Se o seu projeto for direcionado a browsers mais antigos, continue utilizando var sem problemas, pois não é garantido que browsers mais antigos forneçam suporte ao ECMAScript 6. Do contrário, se estamos falando de variáveis que vão ser alteradas, acredito no let como a melhor forma de declarar variáveis mutáveis, ou pelo menos a mais segura e descomplicada. Já para variáveis read-only, o const é a declaração que fornece maior segurança. :)

Isso é um pouquinho do que sei sobre declaração de variáveis no JavaScript como iniciante no assunto 😉 Caso tenham gostado ou queiram me enviar sugestões, dúvidas ou críticas, fiquem à vontade para comentar esse post ou me chamar lá no twitter @anestudies ;) Até breve!

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types
https://developer.mozilla.org/pt-BR/docs/Glossary/Scope
https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript
https://walde.co/2016/02/15/javascript-hoisting-o-que-e/

Diferença e organização de Class e ID no CSS: quando e como utilizá-los?

ju — Sat, 23 Apr 2022 20:24:08 +0000

Essa é uma sugestão que recebi no #studytwt, e também era uma dúvida que me incomodava bastante quando iniciei meus estudos em CSS: quando devo utilizar ids de forma semântica? E classes?

Antes de solucionar essa dúvida, é importante entender quais são, de fato, as maneiras de definir estilos em elementos HTML.

Aplicando estilo em HTML: como eu faço isso?

Basicamente, há três maneiras de deixar seus elementos HTML estilizados, e eles são aplicados dessa forma:

A partir do próprio elemento html:

nav {
  max-width: 1100px;
  background-color: #e8c547;
}

Utilizando ids, identificado pelo "#" no início do seletor:

<section id="content"></section>

#content {
  max-width: 720px;
  background-color: #e8c547;
}

Utilizando classes, identificado pelo "." no início do seletor:

<div class="container"></div>

.container {
  width: 380px;
  background-color: #e8c547;
}

Tá, mas o que significa cada um desses seletores?

Começando do começo: os elementos são declarados a partir de tags em uma página HTML. Entre as tags, é possível inserir o elemento que você gostaria de declarar em determinado trecho do HTML. Visualmente (ou codificadamente) falando:

<!--Aqui, o elemento inserido é um article, utilizado para inserir um artigo de jornal, widgets, comentários de usuários ou qualquer outra coisa do tipo. Para inserir o elemento article, utilizamos a tag <article>-->
<article>
  <strong>anestudies</strong> disse às 14:45:<br />
  "você vai aprender webdev sim, fique tranquile :)"
</article>

Já as classes identificam um grupo de elementos HTML. Como a própria definição já diz, é possível reutilizar uma única classe diversas vezes em um documento HTML. É mais ou menos assim:

/* Uma única classe... */
.font {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 18px;
}

<!--...utilizada para identificar diversos elementos-->

<h1 class="font">Bem-vindo!</h1>

<section class="font">Primeiro post do blog :P</section>

<article class="font">
  Esses posts estarão disponíveis semanalmente, todo fim de semana (sábado?
  Domingo? Sexta-feira? Sim, sexta-feira é um 'pré-fim de semana')
</article>

Por fim, os ids, ao contrário das classes, são utilizados para identificar um elemento que não será repetido na sua página HTML. Se formos comparar o id a algo relacionado ao nosso dia a dia, ele seria o nosso RG – ou seja, ele é único. O id é aplicado dessa forma no HTML:

<!--Suponha que, nesta página, teremos apenas UM container.-->
<div id="container"></div>

/*Logo, o mais correto é utilizar um ID, já que esse será um elemento único na página.*/

#container {
  width: 50%;
  height: 400px;
  background-color: #e8c547;
}

Agora, finalmente, como esses seletores devem ser utilizados corretamente?

Depois dessa breve explanação, fica mais fácil entender quando devemos usar uma class ou um id. Entende-se que, para uma melhor utilização de classes ou ids, é recomendável seguir essas práticas:

Se você aplicou um id para um elemento, ele deve ser aplicado apenas àquele elemento em toda a sua página;
Mas caso você tenha utilizado uma classe, você pode utilizá-la em qualquer elemento da sua página, sempre que for necessário;
Lembre-se: um elemento pode aceitar, simultaneamente, uma classe e um id. Porém, tome um pouco de cuidado com essa utilização: caso exista uma declaração "conflitante" de classes e id (exemplo: id e classes com o mesmo nome), por ser mais específico que as classes, o id será priorizado, não importa a ordem em que ele esteja declarado no seu documento CSS. Exemplo:

<!--O id é único desse elemento div, já a classe 'font' pode ter sido/ser utilizada em quaisquer outros elementos da página-->
<div id="link" class="font"></div>

Além disso, você também pode utilizar duas ou mais classes, se quiser:

<!--'font' é uma classe e 'box' é outra. Elas são inseridas juntas, dessa forma:-->
<div class="font box"></div>

Conclusão

Nesse post tivemos uma breve explicação sobre maneiras de aplicar estilo em HTML a partir do CSS, as diferenças entre os seletores class e id e como utilizar cada um desses seletores a fim de evitar conflitos e problemas de semântica.

Esse foi meu primeiro post no blog! Caso tenham gostado ou queiram me enviar sugestões, dúvidas ou críticas, fiquem à vontade para comentar esse post ou me chamar lá no twitter @anestudies ;) Até breve!

Referências:

https://tableless.github.io/iniciantes/manual/html/oquetags.html
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
https://developer.mozilla.org/pt-BR/docs/Learn/CSS/Building_blocks/Selectors