DEV Community: Aline Bezzoco

Um breve comentário sobre layer() e camadas em cascata

Aline Bezzoco — Wed, 26 Jan 2022 15:19:37 +0000

O C do CSS começando a ter um novo sentido

Desde o ano passado foi comentado sobre a nova propriedade do CSS, o layer() que tem como objetivo de trabalhar melhor a especificidade e a ordem dos seletores e regras nas folhas de estilo. Para quem não sabe o CSS é procedural, ou seja, ele vai executar as coisas exatamente na ordem em que você vai escrever. Mas o layer(), até então, pretende mudar um pouco essa dinâmica.

Mas como?

Com ele podemos controlar melhor as camadas de estilo e a ordem de importância, então sabe aquele !important que você joga como última saída pra sobrepor uma customização que tem um seletor muito mais acima do seu? Um outro exemplo de uso/solução seria para os casos em que usávamos o z-index para reordenar blocos (sobrepor um ao outro). Com o layer() conseguiríamos redefinir melhor quem vai ter alta, média e baixa prioridade. Isso vai ser bom para quando trabalharmos com bibliotecas de terceiros, por exemplo.

A proposta dessa propriedade é interessante e vale ficarmos de olho. No momento só funciona apenas para as versões 99-100 do Chrome e muito em breve no Firefox. De qualquer forma isso vai nos trazer mais facilidade, controle e organização na construção das nossas folhas de estilo.

Vou deixar abaixo uns links bem interessantes e mais completos sobre o assunto (em inglês):

Até a próxima!

Como resolver problemas de versionamento dos pacotes no Lerna

Aline Bezzoco — Thu, 21 Oct 2021 16:23:06 +0000

Um problema que pode se tornar muito comum é conflitos de versionamento do Lerna. Vamos a um exemplo:

Você tem uma lib (biblioteca) onde duas pessoas desenvolvedoras fazem a manutenção do mesmo, porém numa última atualização aconteceu de um dev sem querer rodar o lerna publish direto de uma branch local e não na main (branch principal) como é mais comum. Acontece é que um tempo depois você também precisa atualizar o pacote e quando tenta na branch principal (que seria o correto), dá um erro informando que a versão a ser atualizada é bem diferente da atual. Mas por que isso acontece? Porque a última branch que foi feita a atualização lançou uma versão X enquanto a outra está com uma versão totalmente defasada (quando atualizamos o pacote com o lerna o mesmo atualiza os package.json e o lerna.json. A "solução" seria fazer um novo merge com as infos do pacote atualizadas para a última versão, porém muitas das vezes acontece da branch ser deletada minutos depois que é feito o merge na branch principal (eu particularmente não gosto de fazer dessa forma).

A vantagem é que o Lerna possui uma opção chamada "Custom Version", ou seja, você mesmo pode atribuir a versão que quer para o seu pacote (use com sabedoria). Uma forma mais rápida e segura de resolver os problemas de versionamento que podem ocorrer.

Quando você rodar o lerna publish no terminal irá aparecer essas seguintes opções:

Basta selecionar o "Custom Version" e e aí é só digitar a tag a versão que você quer. Depois disso é seguir o restante do procedimento padrão de publicação de pacotes do Lerna :)

Para finalizar, uma observação: claro que o cenário ideal seria a automação do publish através do CI e afins, mas existe também um outro cenário da atualização dos pacotes de forma manual. Então a solução seria para esses casos, beleza?

Então é isso. Até a próxima!

Drops: Vue 2.x e o Typescript (e como solucionar os erros de retorno)

Aline Bezzoco — Thu, 21 Oct 2021 15:42:27 +0000

Disclaimer: sim, o Vue 3 é uma realidade, mas ainda existem muitos projetos com o Vue 2 e que precisam de manutenção. O artigo é sobre a relação da versão anterior do Vue com o Typescript e como contornar alguns problemas de escopo da melhor forma o possível baseado nas minhas experiências

Acho que alguns de vocês tem reparado em alguns erros de TS que podem vir a acontecer nas versões 2.x no Vue. Mas por que acontece?

O Vue 2.x tem um escopo que dependendo da forma que utilizar o TS dentro do projeto o próprio Typescript (que é um superset de Javascipt) tem dificuldade de interpretar/fazer leitura dessas props dentro das funções. Esse cenário ocorre bastante quando usamos alguma prop como retorno dentro do mounted() ou computed(), por exemplo.
Para solucionar problemas desse tipo temos duas soluções: ou fazer a tipagem desses retornos dentro da função ou declarar a função como uma prop do tipo Function. Não entendeu? Então vamos a um exemplo para facilitar o entendimento.

Suponhamos que você tenha uma função que retorne uma mensagem ou qualquer outra informação após realizar uma ação (inserir um texto dentro campo input, por exemplo). Ao rodar o projeto você receberá um erro no terminal parecido com esse:

Property 'xxxxxxx' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ type: string; xxxxx: string; xxxxx: string; xxxx: string; target: string; xxxx: boolean; xxxx: boolean; }>>'.

Para solucionar esse problema você precisa fazer o que chamamos de anotação de retorno, ou seja, declarar esse tipo na função. Algo mais ou menos assim:

greeting(): string {
  return this.greet() + '!'
}

Mas caso você não queira fazer essa anotação no retorno direto na função você pode fazer dentro da prop mesmo. Assim:

props: { 
  greeting: { 
   type: Function as PropType<() => void>
  } 
}

Lembrando que esses casos costumam acontecer quando fazemos a extensão do nosso componente Vue para Typescript (o famoso Vue.extend()). Uma alternativa mais viável também seria escrevê-lo em Class-Based Component (bem parecido com o do Angular, pra quem tá familiarizado com a sintaxe).

No Vue 3.x esse problema é solucionado porque o framework é escrito em Typescript e acaba tendo ele por "debaixo dos panos", digamos assim rs

Se quiser saber mais sobre o que foi escrito nesse artigo deixo dois links da própria documentação do Vue sobre o assunto:

Até a próxima!

Object-fit: o que é, pra que serve, como usar

Aline Bezzoco — Sat, 02 Jan 2021 18:25:13 +0000

Créditos da imagem de capa: Just about Photography

Você já ouviu falar da propriedade object-fit do CSS3? Se não, vale a pena ler este artigo, pois ela é bem interessante de se conhecer.

O object-fit é uma propriedade que permite que faça ajustes no redimensionamento da imagem dentro de um container, o que significa que você pode escalar imagens, ocupar todo o container e resolver aquele famoso problema daquelas imagens bastante desproporcionais e que você precisa redimensiona-las dentro de um quadrado ou círculo, por exemplo.

Os principais valores dessa propriedade são:

fill
cover
none
scale-down
contain

O fill é o padrão. Ele dimensiona o conteúdo dentro do container ocupando todo o espaço e não necessariamente irá deixar a imagem proporcional. Para isso é necessário utilizar o valor cover (que é o mais utilizado). Ele irá dimensionar o conteúdo proporcionalmente no container, porém o mesmo acaba "cortando" alguns trechos da imagem. Se você quer manter a imagem proporcional, mas dentro do elemento sem mantê-lo esticado ou cortando algum pedaço dela o contain é a melhor solução, mas vale ressaltar que ele não irá ocupar todo o espaço como é o cover. O scale-down é bem parecido com o contain, porém diminui a escala. Por fim temos o none que não redimensiona a imagem.

O exemplo abaixo mostra bem o que foi escrito acima:

Para saber mais (incluindo compatibilidade com os navegadores) vocês podem acessar o Mozilla em português para mais informações.

Até a próxima!

Trabalhando com datas e substituindo o Moment.JS

Aline Bezzoco — Thu, 31 Dec 2020 12:54:24 +0000

Créditos da imagem de capa: Calendly

Para quem não sabe em meados de 2020 as pessoas desenvolvedoras da biblioteca Moment.JS resolveram descontinuar os updates do mesmo devido as constantes mudanças das tecnologias com o passar os anos, especialmente do Javascript pós-ES6. Hoje em dia a linguagem nos permite trabalhar com datas de forma mais completa e não precisando tanto de bibliotecas para solucionar alguns dos problemas que antes era complicado de se resolver ou demandavam maior tempo.

O fato é que o Moment.JS foi muito útil nesses anos todos e nos ajudou a otimizar bastante o nosso tempo de desenvolvimento se tratando em lidar com datas no Javascript. Mas beleza, não vamos ter atualizações dessa lib e com o tempo precisamos atualizar os projetos que utilizam ele. E como substituir então o Moment.JS para o Date(), Intl e outras propriedades de data do Vanilla JS? Logo abaixo cito algumas propriedades da lib e como convertê-las :)

1. subtract()

Com o Moment fazíamos muitas coisas, entre elas o subtract() que é subtrair as datas para tirar a diferença entre elas. Com o JS podemos substituir da seguinte forma:

function subtractDay() { 
 const day = new Date(); 
 day.setDate(day.getDate() - 10); 
 return day; 
}

A função acima permite que a gente subtraia os dias em 10. Então o que ele faz é pegar a data atual, subtrair com o valor indicado e retornar a diferença. Então se hoje é dia 31/12 ele vai pegar e voltar 10 dias o que retornará o dia 21/12.

Dica: Uma boa forma de vê-lo funcionando é copiando e colando esse código no console do seu browser e dar enter para ver o resultado :)

2. fromNow()

Essa propriedade permitia que a gente trabalhe com o tempo relativo (1 dia atrás, 3 meses atrás e por aí vai) e com o JS podemos utilizar o Intl.RelativeTimeFormat(). Assim:

function relativeDay() { 
 const rtf = new Intl.RelativeTimeFormat('br');
 const day = rtf.format(-1, 'day'); 
 return day; 
}

A função acima determina que a const day retorne o resultado "1 dia atrás" (repare na const rtf que adicionei um atributo de tradução "br" (Português Brasil). Caso queira mudar o idioma pasta colocar a sigla desejada :)

3. format()

Aqui você tem várias formas de substituir dependendo da sua necessidade. Usamos o to.. para determinar o tipo de formatação. São elas:

toString retorna Wed Dec 30 2020 23:39:35 GMT-0300 (Horário Padrão de Brasília)
toDateString retorna Wed Dec 30 2020
toLocaleString retorna 30/12/2020 23:39:35
toLocaleDateString retorna 30/12/2020
toGMTString retorna Thu, 31 Dec 2020 02:39:35 GMT
toUTCString retorna Thu, 31 Dec 2020 02:39:35 GMT
toISOString retorna 2020-12-31T02:39:35.351Z

Exemplo de como utilizar uma dessas propriedades (vamos usar o toLocaleString()) :

function formatDate() { 
 const date = new Date(); 
 const formatDate = date.toLocaleString(); 
 return formatDate; 
}

A função acima retorna a data formatada dd/mm/aaaa hh:mm:ss e você pode formatar e customizar de acordo com o timezone ou idioma. Assim:

function formatDate() { 
 const date = new Date(); 
 const formatDate = date.toLocaleString('en', { timeZone: 'UTC' }); 
 return formatDate; 
}

Agora estamos determinando que a nossa função formatDate() retorne uma data formatada em inglês (AM/PM) e em UTC.

Esses foram alguns exemplos de como trabalhar com datas no Javascript para substituir algumas propriedades do Moment.JS. Caso você ainda prefira trabalhar com libs uma outra alternativa seria utilizar o date-fns.

Até a próxima!

Criando um accordion com HTML5 e CSS3

Aline Bezzoco — Thu, 31 Dec 2020 00:35:22 +0000

Créditos da imagem de capa: Colorib

Eu lembro que há um bom tempo atrás quando precisava implementar aquelas páginas de FAQ (perguntas e respostas) sempre tinha que criar um accordion (ou collapsible, o que preferir). E quando eu fazia o código já tinha até o script pronto em jQuery, algo mais ou menos assim:

$('.title').click(function(){
 $(this).parent().find('.description').slideToggle();
});

Com o código acima eu praticamente tinha o funcionamento padrão do meu accordion. A questão é que com o tempo as coisas foram mudando e o jQuery foi entrando em desuso por boa parte das pessoas desenvolvedoras para realizar as coisas tudo de forma mais nativa com o Javascript ou Vanilla JS. Não só isso, mas com a vinda do HTML5 e CSS3 muitos dos widgets que antes fazíamos com JS ou jQuery (quem lembra do jQuery UI?) agora daria para fazer apenas com as duas linguagens acima e um dos que hoje em dia conseguimos fazer sem JS é o nosso accordion. Mas como?

O HTML5 possui duas tags chamadas <details> e summary. O primeiro serve para encapsular o <summary> e também para criarmos o widget. Já o segundo serve para definirmos o título clicável do accordion (que abre e fecha). E como fazemos isso? É o que vou mostrar agora no exemplo abaixo :)

Se você reparar no código acima para cada título/descrição eu adicionei um novo <details> e <summary> para que cada um possa funcionar corretamente. Assim:

<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details> 

<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details>

Por padrão o <summary> exibe um caractere especial diferente do exemplo acima. Para customizar precisei desabilitá-lo utilizando a pseudo-classe ::-webkit-details-marker e adicionando um display: none para que o mesmo desapareça.

E para adicionar um novo caractere especial de +/- quando abre e fecha (respectivamente) utilizei a pseudo-classe :before (porque eu quero que o sinal apareça antes do meu texto) e a variante [open] que é utilizada junto com o details que permite que a gente faça uma customização do accordion quando o mesmo tiver aberto.

Como vocês podem ver com apenas HTML5 e CSS3 conseguimos criar um accordion funcional e com poucas linhas de código.

Por hoje é só, pessoal :) Espero que tenham gostado do artigo. Até a próxima!

Primeira Oficina de Lógica de Programação WoMakersCode no Rio de Janeiro

Aline Bezzoco — Sun, 02 Feb 2020 22:16:34 +0000

Créditos da foto de capa: Érika Alves

No dia 01/02 aconteceu a nossa primeira oficina de lógica de programação da comunidade WoMakersCode RJ. O evento gratuito ocorreu no Sesc Tijuca e contou com o apoio da DigitalOcean e a Alura.

A oficina foi bastante especial para nós. Por conta das vagas limitadas precisávamos selecionar apenas 25 mulheres, mas recebemos no total 156 inscrições o que para nós foi uma grande - e feliz! - supresa. A escolha das participantes não foi fácil, pois a nossa vontade era de escolher todas! Ouvimos histórias incríveis de mulheres de advogadas, arquitetas a jornalistas, vendedoras e estudantes que estavam em busca de um novo aprendizado, mudança de carreira ou simplesmente complementando os seus estudos. Conhecimento nunca é demais!

Muita coisas legais aconteceram durante o dia e tivemos alguns destaques: duas mulheres que vieram de São Paulo para participar do evento - e que no final descobrimos que uma era da Colômbia e outra do Peru! Além disso, tivemos uma participante de 15 anos que nos contou que quer estudar programação e seguir por essa área quando terminar o ensino médio. Sua irmã veio apenas para acompanhar, mas no fim acabou sentando em um dos computadores e participou também. Por fim, uma das mulheres selecionadas veio do Acre, mas por sorte o evento aconteceu bem no período que a mesma estava de férias e simplesmente uniu o útil ao agradável :)

Foto: Amanda Azevedo

O evento começou às 9h30 com a apresentação da nossa voluntária Luanda Pereira sobre a comunidade e realizando uma pequena dinâmica entre as participantes e depois apresentando o time de voluntárias que estariam atuando naquele dia: Gabrielly de Andrade, Daiane Alves, Adrielle Ribeiro, Mariana Coelho, Hillary Sousa e Aline Bezzoco.

Depois da apresentação inicial tivemos um bate-papo com as voluntárias Gabrielly, Adriele e Hillary sobre as diversas vertentes da área de tecnologia. Em seguida, Daiane e Adriele apresentaram sobre o que é lógica de programação, sua importância na área de tecnologia e além de apresentar a pseudo-linguagem a ser utilizada na oficina, o Portugol, utilizando da IDE Portugol Studio.

Nisso, alguns exercícios foram sendo passados e as mentoras foram ajudando as participantes, tirando dúvidas e auxiliando-as em todos os momentos. No Dojo, a nossa voluntária Gabrielly conduziu o desafio com as participantes em desenvolver um programa chamado Megasena.

Vimos as participantes ajudando umas as outras algo que para nós mulheres é gratificante, já que prezamos pela união e protagonismo feminino na área de tecnologia.

Foto: Mariana Coelho

Por fim, tivemos a hora do sorteio! Sorteamos algumas camisetas cedidas pela DigitalOcean, dois cursos da Alura e um ingresso para o PHPWomen.

Agradecemos a todas as voluntárias que se disponibilizaram a organizar mais um evento da comunidade! Desde a parte da organização até conteúdo e mentorias! Vocês foram incríveis!

Por trás de todo código existem pessoas e essas tem suas histórias para contar. Esperamos que a WoMakersCode tenha sido um capítulo feliz na vida delas e as que se apaixonaram e escolheram a programação como forma de aprendizado possa continuar estudando e conseguir trabalhar como uma pessoa desenvolvedora.

Esperamos todas vocês novamente nos nossos próximos eventos!

Para quem não conseguiu participar desta primeira edição: fiquem atentas, pois estamos considerando fazer mais uma edição ainda este ano :) Acompanhe as novidades nas nossas redes sociais para ficar por dentro de tudo o acontece na comunidade!

Sobre a WoMakersCode

A WoMakersCode é uma iniciativa sem fins lucrativos, que busca o protagonismo feminino na tecnologia, através do desenvolvimento profissional e econômico. Acreditamos que empoderar é incentivar a participação, o aprendizado colaborativo e, acima de tudo, dar voz às mulheres.

Oferecemos para a comunidade workshops, eventos e debates com foco no mercado de tecnologia, orientados para capacitação técnica e fortalecimento de habilidades pessoais. Nós trabalhamos para prepará-las e incentivá-las a investir em suas carreiras e em realizar seus sonhos.