DEV Community: Julia Maschion

Desempenho no React: Passagem por valor e referência e o poder do useMemo

Julia Maschion — Fri, 08 Mar 2024 01:32:33 +0000

As pessoas usam useMemo no React por alguns motivos específicos relacionados à otimização de desempenho e à gestão eficiente de recursos:

Otimização de Cálculos Intensivos:

Quando um componente realiza cálculos computacionais ou operações intensivas, usar useMemo pode ajudar a evitar a recálculo desnecessário.
Memoizando o resultado, o React reutiliza a computação anterior, economizando tempo e recursos durante as renderizações subsequentes.
Isso é particularmente útil em situações onde os cálculos são custosos e não precisam ser refeitos a cada renderização.

Evitar Renderizações Desnecessárias:

O useMemo é eficaz para evitar a renderização desnecessária de componentes filhos. Se o resultado do useMemo não mudar entre as renderizações, o componente associado não será re-renderizado.

Isso é valioso em casos onde a renderização não é requerida, economizando tempo e melhorando o desempenho geral da aplicação.

Em componentes que re-renderizam frequentemente, o uso criterioso do useMemo pode contribuir para melhorias perceptíveis de desempenho, reduzindo a carga computacional associada a cálculos repetitivos.

Preservação de Referências:

Em situações em que é importante preservar referências específicas na memória, como em temas dinâmicos ou em manipulação direta de objetos complexos, o useMemo é útil.
Ao memoizar objetos, arrays ou funções, você evita a recriação dessas estruturas em cada renderização, garantindo consistência nas referências, o que pode ser crucial em certos contextos.

Redução do Consumo de Recursos:

Memoizando valores que não mudam frequentemente, você evita alocações desnecessárias de recursos, como memória, contribuindo para um uso mais eficiente dos recursos disponíveis na aplicação.

Mas é importante exercer cuidado ao usar useMemo, pois seu uso indiscriminado pode levar a uma complexidade desnecessária no código e, em alguns casos, até mesmo impactar negativamente o desempenho, especialmente se não houver um ganho real na economia de cálculos. Deve-se sempre considerar a relação custo-benefício ao decidir onde aplicar o useMemo em um componente React.

E por que ele causaria isso ? Daí entra em outro ponto importante:

Passagem por Valor:

Na passagem por valor, uma cópia do valor da variável é passada para a função ou componente. As alterações feitas dentro da função ou componente não afetam diretamente o valor original.
Tipos primitivos, como números, strings e booleanos, são geralmente passados por valor.

// Exemplo de passagem por valor
function dobrarNumero(numero) {
  numero = numero * 2;
  console.log("Dentro da função:", numero);
}

let meuNumero = 5;
dobrarNumero(meuNumero);

console.log("Fora da função:", meuNumero);
// Saída: Dentro da função: 10
//        Fora da função: 5

Passagem por Referência:

Na passagem por referência, o endereço de memória da variável é passado para a função ou componente. Isso significa que qualquer modificação feita dentro da função ou componente afeta diretamente o valor original.
Objetos e arrays em muitas linguagens de programação, incluindo JavaScript, são passados por referência.

// Exemplo de passagem por referência
function adicionarElemento(array, elemento) {
  array.push(elemento);
  console.log("Dentro da função:", array);
}

let minhaLista = [1, 2, 3];
adicionarElemento(minhaLista, 4);

console.log("Fora da função:", minhaLista);
// Saída: Dentro da função: [1, 2, 3, 4]
//        Fora da função: [1, 2, 3, 4]

A relação com useMemo no React está relacionada ao conceito de "referential equality" (igualdade referencial). Quando o React decide se deve re-renderizar um componente, ele compara as referências dos objetos, não os valores internos. Se as referências forem diferentes, o React assume que algo mudou e desencadeia uma re-renderização.

Ao memoizar um valor com useMemo, você está efetivamente memorizando a referência desse valor. Isso é útil para evitar re-renderizações desnecessárias, pois o React pode verificar se a referência permanece inalterada entre as renderizações. Se a referência permanecer a mesma, o React assume que o valor interno não mudou e evita re-renderizações.

import React, { useMemo } from 'react';

const MeuComponente = ({ dados }) => {
  const resultadoCalculado = useMemo(() => {
    // Algum cálculo baseado nos dados
    return dados.reduce((acc, val) => acc + val, 0);
  }, [dados]); // Memoiza com base nas referências dos dados

  return <div>{resultadoCalculado}</div>;
};

Neste exemplo, useMemo é usado para memoizar o resultado do cálculo com base na referência do array dados. Se dados não mudar entre as renderizações, o React evita re-executar o cálculo e re-renderizar o componente, proporcionando uma otimização de desempenho.

Esse foi o resumo de hoje e espero ter ajudado alguém <3

Referência: https://www.youtube.com/watch?v=-hBJz2PPIVE

Cache, Session Storage, Local Storage e Cookies

Julia Maschion — Thu, 07 Mar 2024 00:43:37 +0000

Vamos explorar brevemente os conceitos de local storage, cookie, cache e session storage, destacando as diferenças entre eles em termos de segurança.

Local Storage:
- Armazena dados no navegador do usuário de forma persistente.
- Os dados permanecem mesmo após fechar e reabrir o navegador.
- Pode ser acessado por scripts em páginas diferentes do mesmo domínio.
- Geralmente mais vulnerável a ataques devido à persistência dos dados.
Cookies:
- Armazena pequenas quantidades de dados no navegador.
- Possui um tempo de expiração e pode ser persistente ou de sessão.
- Limitado a cerca de 4 KB de dados.
- Pode ser acessado por scripts e é enviado para o servidor em cada requisição.
- Pode ser vulnerável a ataques devido à transmissão frequente dos dados entre cliente e servidor.
Cache:
- Armazena temporariamente recursos, como imagens e scripts, para acelerar o carregamento de páginas.
- Pode ser controlado pelo servidor (cache HTTP) ou pelo navegador.
- Geralmente seguro, pois não armazena dados sensíveis, mas pode ser explorado para ataques como cache poisoning.
Session Storage:
- Similar ao local storage, mas os dados são temporários e são destruídos quando a sessão do navegador é encerrada.
- Apenas acessível na mesma janela ou guia do navegador que o originou.
- Menos vulnerável a ataques, pois os dados são efêmeros e não persistem além da sessão.

Segurança:

Mais seguro: Session storage é geralmente considerado mais seguro para armazenamento temporário de dados, pois os dados são específicos da sessão e são descartados quando a sessão é encerrada.
Menos seguro: Local storage e cookies persistentes são mais suscetíveis a ataques, especialmente se utilizados para armazenar informações sensíveis, devido à persistência dos dados.

Por quê:

Local storage e cookies persistentes podem ser explorados por invasores se não forem gerenciados corretamente, resultando em roubo de informações.
Session storage é mais seguro porque os dados são destruídos automaticamente quando a sessão do navegador é encerrada, reduzindo a janela de oportunidade para possíveis ataques.
O cache é geralmente seguro, mas cache poisoning é uma preocupação se não for configurado adequadamente.

A escolha entre eles depende dos requisitos específicos do aplicativo e das preocupações de segurança associadas a cada método

O que é cache poisoning?

Cache poisoning refere-se a uma técnica maliciosa na qual um atacante manipula o conteúdo armazenado em um cache para induzir o servidor ou o cliente a usar informações falsas ou comprometidas. Essa técnica pode ter consequências sérias, como a disseminação de dados incorretos, ataques de injeção de código e até mesmo a execução de ataques de phishing.

Existem várias formas de cache poisoning, mas um cenário comum envolve a manipulação do cache de um servidor proxy, intermediário ou do próprio navegador do cliente. Aqui estão alguns métodos comuns:

Injeção de Conteúdo Malicioso:
- Um atacante insere conteúdo malicioso no cache, aproveitando-se de falhas nas políticas de validação ou manipulação do cache. Isso pode levar a usuários finais recebendo versões adulteradas de páginas web, scripts ou outros recursos.
Manipulação de Cabeçalhos HTTP:
- O atacante pode enviar solicitações manipuladas com cabeçalhos HTTP maliciosos para forçar o cache a armazenar informações incorretas. Isso pode ser especialmente problemático em caches compartilhados por vários usuários ou sistemas.
Cache Poisoning de DNS:
- Em ataques mais avançados, os atacantes podem explorar vulnerabilidades no sistema de DNS para redirecionar as solicitações de um domínio legítimo para um servidor malicioso. Isso pode resultar na armazenagem de informações falsas no cache.

Os efeitos do cache poisoning podem variar, mas geralmente incluem a propagação de conteúdo falso, a execução de código malicioso e o comprometimento da integridade dos dados. As organizações e os desenvolvedores precisam implementar práticas sólidas de segurança, como validação rigorosa de entrada, atualização regular de sistemas e monitoramento constante do tráfego para mitigar os riscos associados ao cache poisoning.

O que armazenar no Session Storage?

Dados de Sessão:
- Informações temporárias específicas da sessão do usuário, como identificadores de sessão, preferências temporárias e configurações de interface.
Dados de Navegação:
- Informações sobre o estado da navegação, como histórico de navegação temporário, para aprimorar a experiência do usuário.
Tokens de Autenticação Temporários:
- Se necessário, você pode armazenar temporariamente tokens de autenticação no Session Storage para facilitar a navegação dentro do site durante a sessão do usuário.
Dados de Formulário Temporários:
- Informações inseridas pelo usuário em formulários que precisam ser mantidas temporariamente para fornecer uma experiência de usuário mais suave.
Preferências Temporárias do Usuário:
- Configurações temporárias ou preferências que o usuário escolheu durante a sessão e que não precisam ser persistidas.

Ataques que o Session Storage pode sofrer:

Injeção de Scripts (XSS):
- Se um atacante conseguir injetar scripts maliciosos em sua aplicação, ele pode acessar e manipular os dados armazenados no Session Storage.
Roubo de Sessão (Session Hijacking):
- Caso um atacante consiga obter acesso aos dados de sessão armazenados no Session Storage, ele pode tentar assumir a sessão do usuário.
Ataques de CSRF (Cross-Site Request Forgery):
- Se não forem tomadas medidas adequadas, um atacante pode explorar a vulnerabilidade CSRF para forçar um usuário autenticado a realizar ações indesejadas em sua aplicação.
Ataques de Manipulação de Dados:
- Um atacante pode tentar manipular os dados armazenados no Session Storage para alterar o comportamento da aplicação ou obter informações indevidas.

Dicas para Mitigação:

Validação de Entrada e Saída:
- Valide e sanitize dados antes de armazená-los ou exibi-los no Session Storage para prevenir ataques de injeção.
Uso de HTTPS:
- Utilize uma conexão segura (HTTPS) para proteger a transmissão de dados entre o cliente e o servidor.
Controle de Acesso:
- Implemente medidas de controle de acesso adequadas para garantir que apenas scripts autorizados tenham acesso ao Session Storage.
Tokens de Segurança:
- Utilize tokens de segurança e evite armazenar informações sensíveis no Session Storage sempre que possível.

Ao seguir boas práticas de segurança e ser consciente sobre o tipo de dados que são armazenados no Session Storage, é possível reduzir significativamente os riscos associados a possíveis ataques.

"Faça acontecer". O livro que mudou minha visão sobre carreira.

Julia Maschion — Fri, 14 Apr 2023 22:52:06 +0000

Ano novo fresquinho vem com aquela lista de promessas e na minha lista em especial, a leitura está como uma das metas. Comecei com um livro bem interessante para mim que já mudou minha visão de algumas coisas, reforçou outras e me deu coragem para mais outras: "Faça Acontecer".

Um livro sobre trabalho, mulheres e a vontade de liderar. Sheryl Sandberg, diretora de operações do Facebook, conta suas experiências, visões e aprendizados ao longo dos anos de carreira, entre Google e Facebook.

Fui marcando o que me interessou em cada capítulo, então esse resumo é uma visão pessoal sobre a leitura. Se outra pessoa fizer o resumo do mesmo livro, talvez seria totalmente diferente do que eu achei legal e importante para mim.

"A ambição profissional é algo esperado para os homens, mas opcional — ou, pior, às vezes até algo negativo — para as mulheres. "Ela é muito ambiciosa" não é um elogio em nossa cultura"

O que você faria se não tivesse medo ?
O livro mostra diversos exemplos e vivências de como somos minadas pelo nosso medo e querer ser uma mulher ambiciosa nem sempre é trazido como algo bom.

Nós somos alertadas o tempo todo do quanto é difícil lidar com carreira + família, isso também nos da medo de aceitar responsabilidades maiores na empresa. E principalmente em ambientes predominantemente masculinos ficamos mais recuadas e não deixamos transparecer nosso lado forte.

Um lugar à mesa.
Sheryl comenta para "sentarmos à mesa", ou seja, não podemos nos recuar, precisamos participar e ganhar essa batalha interna desse desconforto. Com certeza você já teve momentos em que confiava mais em si mesmo e as coisas saiam totalmente diferentes, inclusive, a visão ou sensação das pessoas sobre você. Opine e se imponha.

Sucesso e simpatia.
Mulheres em cargos altos não são muito estimadas e podem ser vistas como agressivas demais, muito políticas ou que não dá para confiar. Mas não devemos sacrificar nossa carreira para que gostem da gente. Devemos seguir em frente apesar das críticas. Todos vão sofrer com críticas. É aquela história, que quando nós ficamos nervosas somos hitéricas e loucas, já para os homens é outra coisa.

"É fácil não gostar de mulheres em cargos altos porque são pouquíssimas. Se as mulheres ocupassem 50% dos cargos mais altos, simplesmente seria impossível desgostar de tanta gente"

É um trepa-trepa, não uma escada.
Um dos meus capítulos favoritos. Para ser curta e objetiva, a carreira não é uma escada e sim um trepa-trepa. Escada limita e trepa-trepa é mais criativo, com diveresas maneiras de chegarmos ao topo. Aqui também é comentado para darmos prioridade ao potencial de crescimento rápido e missão da empresa e não ao título do cargo. Mas precisamos ser mais abertas ao risco em nossas carreiras.

O custo da estabilidade muitas vezes consiste em menores oportunidades de crescimento…Às vezes, continuar na mesma área e na mesma empresa cria inércia e reduz boa preparação para a liderença.

Outro ponto que me chamou MUITA atenção.

As mulheres tendem a se adaptar à carreira do companheiro do que o inverso. Se a mudança de emprego inclui a mudança para outra cidade, pode ser um impedimento para uma mulher que esteja num relacionamento.

E mais dicas preciosas nesse capítulo maravilhoso.

As mulheres precisam parar de pensar "Não estou preparada para fazer isso" e passar a pensar "quero fazer isso — e vou aprender fazendo"…Aceitar riscos, optar pelo crescimento, desafiar a nós mesmas e pedir promoção (com um sorriso no rosto, claro) são elementos importantes para gerir nossa carreira. Uma de minhas citações favoritas é da escritora Alice Walker, que observou: "A maneira mais habitual de renunciar ao poder é pensar que não se tem nenhum poder". Não espere que lhe ofereçam poder. Como aquela coroa, talvez nunca se materialize. De qualquer fomra, quem usa coroa num trepa-trepa?

Busque e diga a verdade como você a vê
Outro capítulo que gostei bastante! Sempre sermos transparentes e diretos principalmente na gestão. Também saiba escutar bem e entender os pontos de vista.

Comunicação eficiente começa pelo entendimento de que existe meu ponto de vista (minha verdade) e o ponto de vista do outro (a verdade dele). Raramente existe uma verdade absoluta, de modo que as pessoas acham que dizem a verdade impõe muito silêncio às outras.

Sempre ser claro, por mais que não seja muito confortável. Sabemos que dar ou levar um feedback mais duro não é agradável, por que é um retorno da visão que causamos nos outros. Mesmo com pessoas mais difíceis de lidar, temos que adquirir um jogo de cintura para dar feedback. É por isso que todos nós preferímos dar feedback para alguém que aceita numa boa.

Sempre questionarmos o que podemos melhorar e saber que a verdade dói, mas Sheryl comenta que: "o lado positivo da verdade é bem maior do que o lado feliz da ignorância".

Outro ponto que vejo acontecer bastante é que as pessoas evitam misturar vida profissional e pessoal. Mas a verdade é que ambas andam muito juntas.

Tomar decisões por exemplo, muitas delas são colocadas em uma balança entre a vida pessoal e profissional e isso não é tratado com normalidade, mas deveria. É óbvio que a vida pessoal afeta a profissional.

Talvez um dia não se considere mais chorar no trabalho um sinal de fraqueza ou uma situação constrangedora…E talvez a compaixão e a sensibilidade que têm historicamente refreado algumas mulheres venham a torná-las líderes mais naturais no futuro. Enquanto isso, todos podemos acelerar essa mudança empenhando-nos em procurar-e falar- a verdade, tal como nos parece.

Não saia antes de sair
Acho que amei muitos capítulos, por que esse também está como um dos meus favoritos. Me marcou muito por ser uma situação comum em que mulheres evitam cargos altos, desafios maiores, por receio sobre cuidar da casa e da família. Sempre vem aquela voz na cabeça "será que vou dar conta?".

Mas o que vemos ao longo do capítulo é que devemos aceitar o desafio, por que podemos dar conta sim. E se não aceitarmos, podemos nos arrepender depois. Então não devemos sair antes de sair.

Deveria ser mais comum o apoio entre homens e mulheres e não ser um tabu ou um problema a questão da preocupação com a casa, família e filhos principalmente.

Esse assunto se encaixa bastante no assunto do próximo capítulo que também gostei bastante (sem novidades).

Peggy Orenstein, autora de Cindera comeu minha filha, conta a história de uma menina de cinco anos de idade, que chegou meio aflita em casa depois de uma atividade extrtacurricular e disse à mãe que ela e o menino de quem gostava queriam ser astronautas. Quando a mãe perguntou qual era o problema, a menina respondeu: "Quando formos juntos para o espaço, quem vai cuidar dos nosso filhos?". Aos cincos anos, ela pensava que o aspecto mais complicado numa viagem especial era ter alguém de confiança para cuidar dos filhos.

Faça de seu companheiro um companheiro de verdade
Hoje o assunto está bem mais comum do que antigamente. Mas a verdade nua e crua é que se o parceiro faz as coisas de casa também, o peso e a carga mental para as mulheres diminui MUITO e a consequência disso é uma melhora na parte profissional.

Não é legal ficar como gestora do lar, designando tarefa para que o parceiro faça as coisas. Cada um precisa se encarregar das aitvidades, se não, acaba achando que está fazendo um favor e não sua parte que deve se feita.

Sheyrl comenta:

Não conheço nenhuma mulher em posição de liderança cujo companheiro não dê apoio total — e digo total mesmo- à sua carreira. Nenhuma. E, ao contrário da ideia difundida de que apenas mulheres solteiras conseguem chegar ao topo, as líderes empresarias mais bem-sucedidas, em dua maioria têm um companheiro.
…Muitas dessas altas executivas disseram que não teriam sucesso que tiveram sem o apoio dos maridos, ajudando com os filhos e as tarefas domésticas e aceitando tranferências com boa vontade…
…Não admira que quando lhe perguntaram numa conferência o que os homens poderiam fazer para ajudar a promover o avanço das mulheres, a professora Rosabeth moss Kanter, da Escola de Administração de Harvard, tenha respondido: "Lavar a roupa". Tarefas como lavar a roupa, comprar comida, cuidar da limpeza e cozinhar são triviais e obrigatórias. É típico que recaiam sobre as mulheres.

O mito de fazer tudo
Ningúem da conta de tudo, mas sempre vão mandar você fazer tudo. Se você não colocar um limite, continuarão pedindo. Saiba estabelecer os seus.

Estou pagando pela qualidade do trabalho, não pelas horas que cumprem. Esse tipo de ambiente sempre me rendeu os melhores resultados.

Sigo aprendendo bastante sobre liderança, mulheres na liderança e trabalho. Quero que as pessoas sempre se apoiem e sejam transparentes. E que como diz também no livro, não tenha mais isso de "líder mulher" e "líder homem" e sim apenas "líder". Quando deixarmos de ser raridade em cargos de liderança.

Por último mais um recado muito bom do livro.

Todos queremos a mesma coisa: nos sentir bem com nossas escolhas, nos sentir legitimados pelos que nos cercam. Então vamos começar nos legitimando mutuamente. As mães que trabalham fora devem considerar as mães que trabalham em casa trabalhadoras de verdade. E as mães que trabalham em casa devem ter o mesmo respeito pelas que escolheram outra opção.

Liderança para mim é isso e muito mais. E para chegar lá é preciso encarar situações (evitar medos), ter confiança (sentar-se à mesa), ter simpatia transparência, equílibrio, apoio (do parceiro ou parceira), é saber que a vida pessoal afeta sim, é saber mentorar também e também ter humildade pra ser mentorada(o) quando precisa.

Espero que tenhamos em mente que não precisamos ser heróis ou heróinas e abraçar tudo, espero que a gente se conheça o suficiente pra estabelecer limites também e que a gente não saia antes de sair.

Sheryl também espera:

Espero que ambos cheguem exatamente aonde querem chegar. E quando descobrirem onde residem suas verdadeiras paixões, espero que ambos façam acontecer-sempre.

Lições valiosas: aprendizados no meio do caminho

Julia Maschion — Fri, 14 Apr 2023 22:37:04 +0000

Durante algumas entrevistas de emprego, decidi fazer anotações das perguntas que me foram feitas para resumir meu conhecimento e identificar minhas lacunas de conhecimento, a fim de revisá-las posteriormente.

Com isso em mente, surgiu a ideia de compartilhar essas perguntas em um artigo para ajudar outras pessoas que estejam se preparando para entrevistas de emprego.

Embora eu não tenha sido capaz de explicar algumas das perguntas detalhadamente na hora, revisei o conteúdo posteriormente para fortalecer minha compreensão.

Portanto, neste artigo, compartilharei algumas dessas perguntas e respostas, com o objetivo de ajudar outras pessoas a se prepararem melhor para entrevistas de emprego.

O que é CORS?
O CORS, ou Cross-Origin Resource Sharing, é uma política de segurança que impede que scripts em uma página da web acessem recursos em outra origem sem permissão explícita. Quando digitamos um site, uma série de processos acontecem nos bastidores, incluindo a resolução do nome de domínio, a solicitação e o recebimento de recursos do servidor e a renderização da página.

O que é POST, GET, PUT e PATCH?

O POST e o GET são métodos HTTP usados para enviar e receber dados de um servidor, enquanto o PUT é usado para atualizar recursos existentes.

O método PATCH é um método usado para atualizar parcialmente um recurso em um servidor. É semelhante ao método PUT, que é usado para atualizar um recurso completo, mas, em vez disso, o método PATCH é usado quando apenas uma parte do recurso precisa ser atualizada.

Ao contrário do método PUT, que envia todo o recurso atualizado para o servidor, o método PATCH envia apenas as alterações necessárias no formato de um objeto JSON. O servidor, em seguida, aplica essas alterações ao recurso existente, mantendo o restante do recurso intacto.

O método PATCH é usado em situações em que a atualização completa do recurso não é necessária ou em que é importante minimizar a quantidade de dados enviados pela rede. Por exemplo, pode ser usado para atualizar apenas uma propriedade de um usuário em um banco de dados, como seu nome ou endereço de e-mail, sem precisar enviar novamente todo o objeto do usuário.

Qual a diferença de LocalStorage, SessionStorage e Cookies?

O localStorage, sessionStorage e cookies são recursos usados para armazenar dados no navegador, mas cada um tem diferenças importantes em relação ao escopo, tempo de vida e segurança.

O localStorage e o sessionStorage são objetos que permitem armazenar dados no navegador. O localStorage armazena os dados permanentemente, mesmo após o navegador ser fechado, enquanto o sessionStorage armazena os dados apenas durante a sessão atual do navegador. Ambos são armazenados localmente no navegador e têm um limite de cerca de 5-10 MB de armazenamento. Esses dados são acessíveis apenas para a mesma origem que os criou e podem ser acessados via JavaScript.

Já os cookies são pequenos arquivos de texto que são armazenados no navegador e contêm informações, como preferências de usuário e informações de login. Os cookies têm um tempo de vida determinado, definido pelo desenvolvedor, e podem ser acessados pelo servidor e pelo navegador do usuário. Os cookies podem ser usados para fins de rastreamento e publicidade, mas também podem ser usados para salvar informações importantes para o usuário, como informações de login e preferências de idioma.

Em resumo, a principal diferença entre o localStorage e o sessionStorage é o tempo de vida dos dados armazenados, enquanto os cookies são mais versáteis e podem ser usados para armazenar informações no lado do servidor e do cliente. É importante lembrar que os dados armazenados nesses recursos podem ser acessíveis por meio de scripts maliciosos e devem ser usados com cuidado para proteger a privacidade e a segurança do usuário.

O que é um SPA?

SPA (Single Page Application) é um tipo de aplicação web que funciona em uma única página, em que todo o conteúdo é carregado dinamicamente sem a necessidade de recarregar a página. Em uma SPA, a navegação entre as diferentes seções do site é realizada por meio de chamadas AJAX (Asynchronous JavaScript and XML), que atualizam apenas as partes necessárias da página, sem recarregar a página inteira.

Quais as formas de iterar um array? E objetos?

Para iterar um array, existem várias formas, incluindo o uso de loops for e for...of e os métodos forEach, map e filter. Para iterar objetos, a função Object.keys pode ser usada para obter as chaves do objeto.

O que é programação funcional?

A programação funcional é um paradigma de programação que enfatiza o uso de funções puras, que não têm efeitos colaterais, para criar programas mais claros e fáceis de entender. Funções puras são aquelas que não alteram nenhum estado externo e produzem resultados exclusivamente com base em seus argumentos, enquanto funções impuras podem ter efeitos colaterais e/ou dependem de estados externos para produzir seus resultados.

Função pura:

function soma(a, b) { return a + b; }

Função impura:

let contador = 0; function incrementa() { contador++; console.log(contador); }

Esta é uma função impura porque ela tem um efeito colateral: ela altera a variável contador a cada vez que é chamada. Além disso, ela depende da variável contador para produzir o resultado. Ou seja, o resultado depende do estado da variável contador no momento em que a função é chamada e, portanto, pode ser diferente a cada vez que a função é chamada.

Diferença dos operadores == e === ?

O operador "==" compara valores, enquanto o operador "===" compara valores e tipos de dados.

Quais são true e quais são false?

const a = 3 const b = new Number(3) const c = 3

Das constantes dadas, "a" e "c" são iguais a 3 e, portanto, verdadeiros, enquanto "b" é um objeto Number e, portanto, falso.

O que é Promise?

As Promises são usadas para lidar com operações assíncronas em JavaScript, enquanto o async/await é uma maneira mais fácil de lidar com as Promises. O try/catch é usado para manipular erros em um bloco de código.

Quais métodos de debugar uma aplicação?

Os modos de debugar uma aplicação incluem o uso de ferramentas do navegador, como o console e o debugger, bem como o uso de ferramentas de desenvolvimento externas.

O que é High Order Function? Dê um exemplo.
Uma High Order Function é uma função que recebe outra função como argumento ou retorna uma função.

Como o método filter em JavaScript, pois recebe uma função como argumento. Essa função é usada para definir um critério de filtragem para os elementos de um array.

`const numeros = [1, 2, 3, 4, 5];

const numerosPares = numeros.filter(function(numero) {
return numero % 2 === 0;
});

console.log(numerosPares); // [2, 4]`

O que são pseudo-classes e pseudo-elementos?

As pseudo-classes e pseudo-elementos em CSS são seletores especiais usados para estilizar elementos em diferentes estados e contextos.

Uma pseudo-classe é um seletor CSS que seleciona elementos com base em um estado ou condição especial, em vez de apenas em seu nome ou atributos.

Um pseudo-elemento é um seletor CSS que permite estilizar partes específicas de um elemento, em vez do elemento inteiro.

Pseudo-classe

a:hover { color: red; }

Pseudo-elemento

p::first-letter { font-size: 2em; font-weight: bold; }

Espero ter conseguido ajudar a fortalecer o conhecimento de vocês também! Caso tenham ficado com alguma dúvida ou queiram aprofundar ainda mais nesses conceitos, não hesitem em buscar mais informações e praticar. Agradeço por lerem este artigo e até a próxima!

Trabalhando com JsPdf com React

Julia Maschion — Sun, 10 Apr 2022 23:05:02 +0000

Neste domingo tive uma experiência que causou uma dor de cabeça bem grande em relação ao JsPdf. Para quem não conhece, é uma biblioteca que gera em PDF's. Alguns problemas que tive: imagem jpeg não funciona, textos estavam sendo quebrados pela metade e não adicionava um outra página automaticamente quando acaba o A4.

Infelizmente o problema da imagem ainda não descobri como resolver e se você souber fico feliz que comente neste post para ajudar mais pessoas da comunidade. Mas, o problema do texto + adicionar outra página automaticamente, após MUITA pesquisa, consegui uma solução.

import { jsPDF as JsPDF } from 'jspdf';
import html2canvas from 'html2canvas';


const generatePdf = (): any => {
const htmlSource = document.getElementById('profile');
const filename = `Currículo ${fields.name}`;

if (!htmlSource) {
  return;
}

html2canvas(htmlSource).then(function (canvas) {
  const imgData = canvas.toDataURL('image/png');
  const imgWidth = 180;
  const pageHeight = 297;

  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 5;
  const pdf = new JsPDF('p', 'mm');

  pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }
  pdf.save(filename);
});};

Use onClick={() => generatePdf()} no componente que deseja baixar o PDF.

Se no seu caso continuar cortando o texto em algum local que não está bom, modifique o const pageHeight = 297;, para o meu caso 297 ficou bom.

Documentação: http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

Espero ter ajudado!

12 Extensões para o Visual Studio Code que você precisa conhecer

Julia Maschion — Wed, 10 Mar 2021 01:35:04 +0000

Olá, textinho bem direto ao ponto para ajudar vocês com mais configurações no VS Code :)

Extensão que deixa os brackets do código coloridos, assim a gente não fica tão perdido(a) quando o código é grande e está faltando fechar alguns parênteses.

Essa extensão cria um servidor online para que você não precise ficar salvando o arquivo e atualizando a página do projeto toda hora. É usada mais pra projetos simples. Clique com o botão direito no arquivo html e coloque para abrir com Live Server.

Essa daqui você consegue codar junto com alguém, ambos mexendo no mesmo projeto. Como se tivesse dividindo tela e a pessoa acessando seu computador.

Dá uma prévia de como está seu arquivo markdown. Muito útil para fazer aquele READ.ME bacana! Clica com o botão direito em cima do arquivo markdown e seleciona para ver prévia.

Essa deixa ícones do lado dos arquivos bem bonitinhos com os símbolos de cada um. Tem ícone de html, css, js e vários outros!

Adoro essa! Ajuda demais a dar o caminho das pedras, digo, caminhos das pastas! Muitas vezes meu intellisense não funcionava para achar o caminho e resolvi o problema baixando essa extensão.

Essa é sensacional para quem trabalha com muitos projetos. Ela deixa o VS Code da cor que você quiser, cada repositório com a cor que você definir. Nesse caso eu coloquei roxo, por exemplo!

Destaca as cores no arquivo de estilos para facilitar a visualização de que cor você está usando em x local.

Essa facilita a renomear as tags!

Essa você clica na classe css que está no html e te leva direto pro local onde ela está no arquivo de estilos.

Muuuito utilizada, ajuda a formatar o código e possui várias regras que você pode configurar para deixar o código mais organizado.

E por último essa que eu amo de paixão! Também para quem trabalha com muitos projetos e tem um trabalho enorme de ficar abrindo eles toda hora. Ela favorita vários projetos que você quer dentro do próprio VS Code. Isso facilita abrir e fechar os projetos.

Espero que tenha ajudado e se você conhece mais extensões úteis, comenta aqui pra gente!

Programar é muito fácil

Julia Maschion — Tue, 09 Mar 2021 00:27:03 +0000

Eu duvido que você nunca ouviu alguém falando as seguintes frases: "ah, mas isso é simples", "mas programar é fácil" , "mas isso é um cafezinho", "isso daí é rapidinho, só por ali e não sei o que aqui e pronto", "essa task é 1 pontinho" quando na verdade não é…

Isso começou a me incomodar demais, por que essas frases entram na nossa cabeça de um jeito que impregna e os neurônios começam a se conectar e levar para o "departamento" da síndrome do impostor. Logo você estará pensando: "poxa, mas isso é fácil, como não sei fazer isso? Já deveria estar sabendo, como sou burra(o), não sirvo pra isso".

Programação NÃO é fácil. Repita comigo "programar NÃO é fácil". Por mais que algumas coisas estejam mais mastigadas conforme o tempo, NÃO É FÁCIL. Quando você estava na escola e precisava estudar pra uma prova de qualquer matéria que seja, é por que não era simples ir lá e tirar um 7 ou um 10, não é? Você tinha que aprender balanceamento em química, genética em biologia, geometria, rochas, guerras, economia e um compilado de matérias, assuntos e informações… Então por que um assunto totalmente diferente de tudo isso, com MUITA informação nova e complexa seria fácil?

Hoje tem além de diversas linguagens do mundo frontend, backend e fullstack, tem para aprender também: arquiteturas, patterns, bibliotecas, frameworks, semântica pra aprender, regras, lógica, acessibilidade, estrutura de dados, segurança…

Então por que as pessoas ficam rotulando essas coisas de fáceis sem saber o repertório do outro?

Ficar classificando algumas coisas de fáceis é simples para algumas pessoas que já tem um entendimento das coisas ou que simplesmente quer julgar.

Essa ansiedade, essa mania de achar que nunca está bom, que não consegue, que não entende, que outras pessoas tem facilidade e você não, isso tudo vem dessas frases terríveis que ouvimos por aí também e que nosso cérebro resolve guardar lá no fundinho, disfarçado, pronto para atacar quando precisar e de forma discreta e indireta. Entenda que ninguém nasceu sabendo as coisas.

Nós temos a mania de olhar as pessoas como estão hoje mas nunca vemos tudo que elas passaram. E desse jeito, às vezes automaticamente soltam que algo é fácil, mas ninguém conta que já fez o "fácil" trezentas vezes. ;)

Minha irritação com esse tipo de frase ou comportamento, não é a toa.

Valorize cada passo, cada evolução que você der na vida ela sendo pequena, média ou grande. Não se compare jamais. E fique tranquila(o), tudo no seu tempo.

Outra coisa: dificilmente alguém se abre sobre este tema, então não se sinta sozinha(o). Se você acha algo fácil, legal, você chegou lá! Mas tente levar isso para a pessoa que não sabe, de uma forma menos presunçosa, que tal? Tenha paciência com a(o) coleguinha que sabe menos.

Mas olha só como é fácil!

https://roadmap.sh/frontend

Como me tornei desenvolvedora Front End

Julia Maschion — Mon, 01 Mar 2021 13:42:13 +0000

Senta que lá vem história… Nesse texto contarei muitas coisinhas da minha trajetória profissional que não é tão longa assim, da minha vida pessoal e de todo o meu passado em relação ao que eu queria ser.

Durante bons anos da minha vida, em 2007 acredito, eu queria cursar Letras. Meu sonho era ser tradutora naquelas reuniões importantes da ONU, algo assim. Mas não de inglês, nem espanhol, eu queria ser tradutora de japonês. Desde criança eu me identificava muito com a cultura japonesa e com uns 12 anos entrei em uma escola de bairro, bem tradicional e estudei japonês por uns 3 a 4 anos.

Depois em 2011, entrei no ensino técnico de Vestuário no SENAI e eu não tinha mais tempo pro japonês, comecei a fazer aos sábados, mas já não conseguia ir e acabei saindo pra focar no técnico + colégio.
Nisso eu cogitei trabalhar como modelista, mas a ideia não durou muito e fiz 1 ano e 6 meses do curso. Faltando 6 meses pra me formar eu desisti. Aprendi a costurar, fazer moldes, desenhar roupas, gestão de pessoas, moulage e foi bem legal a experiência.

Em 2013 entrei no cursinho e estava na cabeça que queria Letras na USP. Você pode pensar "nossa ela entrou no cursinho pra prestar Letras?", pois é, você não imagina a dificuldade que eu tinha com matemática, eu não passaria nem em Letras, mesmo sendo um curso com poucos inscritos. Porém, teve um dia no cursinho que fiquei para estudar e eu estava numa sala e do meu lado tinha algumas revistas "Guia do Estudante". Peguei uma revista e fiquei vendo sobre várias profissões. Você deve estar pensando que foi aí que eu vi sobre Tecnologia. Mas não.

Quando eu bati o olho em "Relações Públicas" e li que lidava com idiomas, eventos (poderia mexer com fotografia também ❤) e comunicação, foi amor a primeira vista! Eu amava tudo isso que a profissão pedia e eu enfiei na cabeça que eu queria Relações Públicas.
Mas a vida não é justa, não é mesmo? Eu me importava em ter uma faculdade de nome e queria a Cásper Libero, que era só R$1500 no mês. Mas eu não tinha passado em uma faculdade pública e não tinha grana.

2013 foi um ano tão horrível para mim, que mal lembro das coisas que aconteceram nesse ano, e olha que minha memória é muito boa. Mas é como se tivesse uma nuvem em cima e eu não enxergasse nada. Não lembro quase nada da época do cursinho, foi terrível.
Em 2014 eu comecei a trabalhar na lavanderia da mãe de uma amiga. Eu ficava na recepção e foi meu primeiro emprego na vida. Foi lá que eu vi a inscrição pro vestibular da FATEC em Gestão Empresarial. E como era um curso amplo e uma faculdade com nome, eu me inscrevi. Minha ideia era começar a trabalhar com a faculdade de Gestão Empresarial e tentar ir pra área que eu queria, pagando pós algo assim. Esse era meu pensamento na época. Em Março de 2015 comecei e trabalhar no administrativo do restaurante de um amigo.

E foi em Agosto de 2015 que recebi uma proposta de estágio em um multinacional muito boa. Aquilo me deixou muito feliz!
Durante o estágio eu sempre comentava que queria ir pra área de comunicação, ainda queria Relações Públicas, mas também me brilhava os olhos Marketing Digital. Eu estava na área de TI, mais especificamente com projetos de TI, mas trabalhava com SAP e foi um trabalho bem operacional.

Nessa época eu tentei ir para marketing digital, mas o gerente da área não aceitou, por que eu só tomei coragem pra falar que queria mudar de área quando eu já tinha 1 ano de estágio. E ele queria alguém que ficasse 2 anos… Eu gostava muito de lá, mas na real eu estava acomodada por que a empresa era boa, mas não tinha nada a ver comigo e eu nem gostava do que eu fazia lá. Na minha entrevista já tinham avisado que efetivação era bem raro. Dito e feito, acabou em Agosto 2017 o estágio, pé na bunda, tchau e bença.
Foi aí que começou o sofrimento, que para mim foi um divisor de águas.

Já tinha passado 1 mês e nada de emprego, 2 meses e nada, 3 meses e nada, 4 meses e nada, 5 meses e nada, 6, 7, 8…Começava a me questionar, poxa tenho inglês, faculdade boa, estágio em empresa boa…O que falta? Comecei a procurar vagas em Marketing Digital e via que pedia SEO, HTML, CSS… Que diabos era isso? Conversei com um amigo que trabalhava na área, tirei um certificado de Google Adwords, estudava sobre Analytics e fui atrás de uma bolsa no curso do SENAC de HTML, CSS e Javascript, que eu nem sabia o que era.

O curso ia começar no final de Março de 2018, era aos sábados e ia até o final de Maio. E em Março de 2018 arrumei um emprego. Mas o emprego era tão terrível que assinei a proposta sentindo que estava assinando minha morte. Mas eu queria trabalhar! E trabalhei. Durante 1 mês fazendo CTRL + C e CTRL + V o dia inteiro. Aproveitava pra ouvir podcasts sobre tecnologia. O curso já tinha começado e eu estava curtindo demais! Foi nesse curso que comecei a ver o mundo front-end, mas nem sabia ainda desse nome: "Front-end".

Bom, no dia 22 de abril de 2018, eu tive um acidente e quebrei a clavícula. Tive que me afastar do trabalho e faltar muito no curso. :(
Mas foi graças a esse acidente que eu pensei mais na vida e na época eu soube da inscrição do bootcamp Reprograma pelo meu namorado, que já tinha me mostrado antes até, mas ainda não estava com inscrições abertas.
A Reprograma é um curso intensivo para mulheres que queriam entrar na área de tecnologia para virarem desenvolvedoras Front-End. A inscrição era dia 27 de junho, se não me engano. Esperei ansiosamente.
Voltei para o trabalho no dia 23 de Junho e pedi demissão no dia que abriu a inscrição para a Reprograma, dia 27. ❤
Eu saí daquele lugar tão aliviada, tão feliz, batia o vento no meu cabelo eu estava como num filme. Só faltava tocar a música Journey — Don’t Stop Believin’ kkkkkk…

Bom, enviei um vídeo, fiz uma entrevista e uma provinha e fui uma das 30 selecionadas de 300 mulheres que se inscreveram. Foi um puta de um privilégio participar disso e mudou muito a minha vida!
Image for post
Pois é, e foi assim que me tornei desenvolvedora. E foram os incríveis 5 meses da minha vida estudando conteúdos para entrar na área. E em Fevereiro de 2019, comecei a jornada oficialmente!!! ❤ ❤

Tudo que aconteceu na minha vida foi se encaixando para chegar aqui, por mais que eu tenha passado por momentos que foram tristes para mim, eu sei que cada acontecimento estava sendo construído para hoje. Podia ter sido antes? Podia ter sido mais rápido? Talvez, mas tudo tem um motivo e acredito fortemente nisso.

Eu era "de humanas", distraída, com dificuldade em exatas, e é super possível com amor e dedicação aprender coisas diferentes e que sejam desafiadoras.

Então se você está lendo esse texto e acha que não serve pra área por que "é de humanas", rótulo idiota que criaram, não desanime, por que eu sou de "humanas", sou de "exatas", sou de "artes" e principalmente sou de "brisas", por que eu "briso" bastante e falo várias merdas! hahahahah…. Viva a espontaneidade!! Seja quem você quiser, sem medo de rótulos ;)

Como entrar para a área de desenvolvimento Front-End

Julia Maschion — Mon, 01 Mar 2021 12:59:38 +0000

#beginners

Se você já sabe a diferença entre Frontend, Backend e Full-stack, se apaixonou por uma dessas frentes e quer saber como entrar realmente na área, não deixe de ler esse texto!

Quando eu descobri a área de Front, a primeira coisa que fiz foi pesquisar qual faculdade eu precisava fazer. Eu achava que existia uma formação específica pra isso, o que descobri que não era verdade.

Muitas pessoas que entram na área de programação fizeram faculdades de TI , Análise e desenvolvimento de sistemas, Ciência da computação ou Engenharias (não restrita a computação). O legal desses cursos é que eles dão uma base teórica de cálculo e de linguagens de programação de baixo nível ( C♯, VB.NET, Java, Objective-C, PHP, etc…), e é a partir dessas matérias que as pessoas começam a se interessar pela programação e decidem ser programadores focando em Front, Back ou Full-Stack, etc.

Resolvi escrever esse texto por que muitas pessoas me perguntam como cheguei até aqui, ainda mais sendo uma mulher que não veio da área de TI (o que gera uma curiosidade maior). No meu caso, descobri a programação porque queria trabalha com Marketing Digital, mas essa história contarei em outro momento.

Vou falar aqui de algumas maneiras de entrar na área de programação frontend para além de fazer uma faculdade. Em qualquer graduação ou tecnólogo, raramente veremos uma matéria focada nas linguagens frontend e por isso as pessoas acabam aprendendo sozinhas, em suas experiências profissionais ou cursos dos mais diversos.

Um detalhe importante é que você pode ser formado em outra área que não seja de tecnologia, e por isso esses cursos criam oportunidades para as pessoas entrarem nessa área. As habilidades técnicas são mais valorizadas do que sua formação (ou a inexistência dela).

Você está pronta(o)? Algumas maneiras de começar são:

1. Cursos Online

Recomendo procurar por cursos em plataformas como Udemy, Coursera, Rocketseat, Alura e até alguns canais no Youtube com aulas gratuitas.

Na Udemy, onde os cursos tem preços mais acessíveis, gosto muito dos cursos do Fernando Daciuk.

queroser.ninja - Promoções

Fique ligado nessa página para aproveitar as promoções dos cursos Ninja!

No youtube, muitos programadores já viram e aprenderam com os vídeos do Professor Guanabara do Curso em Vídeo.

Tanto em português quanto em inglês, há muitos canais e vídeos bons para você entender melhor alguns conceitos, seguir tutoriais ou aprender alguma linguagem nova.
É o jeito mais acessível para você começar a aprender uma linguagem ou até mesmo a programar suas primeiras páginas online.

2. Especializações

Existe também a possibilidade de você cair de cabeça na área e procurar cursos presenciais, pagos e imersivos para sair com uma certificação de pessoa programadora frontend, como por exemplo:

Digital House

Mastertech
Na Mastertech você pode aprender habilidades como tecnologia, design, marketing digital e negócios.

{Especial Mulheres}

3. Bootcamps

Bootcamps são cursos intensivos que podem ter uma duração mais longa de meio período ou mais curta em período integral, dependendo da instituição.

Aqui falarei dos bootcamps exclusivos para pessoas que se identificam como mulheres, porque a gente merece um ambiente inclusivo e seguro para aprender a programar! ❤

{Reprograma}
Sou filha da {reprograma} e super indico para todas as mulheres que tiverem a oportunidade de participar dessa iniciativa. Prego a palavra dela pois foi o que mudou minha vida.
É gratuito❤

Laboratória
Laboratoria - Bootcamp intensivo só para mulheres e você sai de lá empregada e depois paga uma % para eles só quando tiver empregada.

Progra{m}aria
São cursos pagos porém super acessíveis as mulheres que desejam começar a programar.

[Des]programe, MinasProgramam e diversas outras iniciativas que você pode encontrar na sua região através de meetups e eventos voltados para mulheres na tecnologia❤

É sempre bom dizer que nem todas as iniciativas são gratuitas e a maioria está presente na cidade de São Paulo, e por isso recomendo consultar as informações nos sites sobre pagamentos, pré-requisitos, como participar, etc.
Há muitas maneiras de entrar para a área de desenvolvimento frontend. Claro que você pode sentir que é mais fácil fazer uma faculdade ou um bootcamp que te direciona, te dá mais apoio, estabelece uma rotina, etc, mas essas não são as únicas formas de chegar lá.

Se você quiser ou puder estudar apenas com os cursos online ou de algumas plataformas gratuitas não tem problema! Esse será um caminho um pouco mais difícil no sentido de montar sua própria rotina de estudos, mas não é impossível!

A maioria das empresas mandam testes para você fazer, testando seus conhecimentos de código. Se você estiver focado nos estudos, aprendendo legal e de forma constante, é bem provável que consiga uma oportunidade e depois ir crescendo na área dentro da empresa.

Aliás, nessa área é preciso estudar sempre e se atualizar sempre. A tecnologia muda rápido e para não ficar para trás, precisamos acompanhar as tendências. É uma área de muito esforço e aprendizado contínuo, e por isso mesmo quem já está na área está sempre estudando.
Espero ter dado uma luz para quem quer mudar de carreira! Fico a disposição para dúvidas ou comentários

Até a próxima! ❤

Programando com Ramda JS

Julia Maschion — Mon, 01 Mar 2021 12:46:01 +0000

Algumas coisas que aprendi depois de conhecer o Ramda, uma excelente biblioteca de programação funcional.

O Ramda facilita diversos métodos que a gente utiliza no dia a dia, além de melhorar performance e evitar erros. A dificuldade de achar conteúdos em português sobre o Ramda fez com que eu tivesse a ideia para este texto.
Mesmo lendo a documentação, confesso que ainda tem coisas que me deixam boiando. Não sou uma especialista, mas quero compartilhar e comentar alguns métodos bem bacanas que ele permite usar!

Programação Funcional

Antes de focarmos no Ramda, vale uma breve explicação sobre programação funcional, que tem tudo a ver com ele. O que é? Onde vive? O que come?

Ela é baseada na aplicação de funções matemáticas e utiliza o conceito de imutabilidade. Nela, o código tem funções/passos para chegar à resolução de um problema.

"Já existem várias bibliotecas excelentes com um sabor funcional. Normalmente, elas devem ser kits de ferramentas de uso geral, adequadas para trabalhar em vários paradigmas. Ramda tem um objetivo mais focado. Queríamos uma biblioteca projetada especificamente para um estilo de programação funcional, que facilite a criação de pipelines funcionais, que nunca modifique os dados do usuário"

O Ramda é justamente uma ótima biblioteca de programação funcional.

Alguns recursos do Ramda

Abaixo veremos alguns métodos do Ramda. Você também pode verificá-los na documentação

ANY, EQUALS, VALUES

Com esse recurso, podemos procurar um valor específico dentro de um array ou objeto.

import {any, equals, values} from 'ramda'
const array = [1,2,3,6,7,8,0]
any(equals(0))(values(array))
//true

Assim, se algum (any) valor do array (values) for igual (equal) a zero, ele retornará true. :D

PATH, PIPE, MAP

Agora vamos supor que você tem um objeto e gostaria de pegar os nomes de autores de livros.

let library= {
     “books”: {
      “authors”: [
       {“authorName”:”Kyle Simpson”,”book”:”you don’t know JS”}, 
      {“authorName”:”David Flanagan”,”book”:”O guia definitivo JS”}
    ]
  }
}

Com o Ramda, podemos fazer:

//react component
import {path, pipe, map} from 'ramda'
const getAuthors = pipe(
  path(["book" , "authors"] ),
  map(item => item.authorName)
 );
getAuthors(library);
//["Kyle Simpson", "David Flanagan"]

Confesso que, usando o pipe no dia a dia, às vezes é mais chatinho de entender. Ele cria a sequência de funções que você quiser, então entender a construção que cada dev faz pode ser complicado.
Um outro detalhe muito importante, o PIPE executa a composição da esquerda pra direita e o COMPOSE executa da direita pra esquerda. O COMPOSE é a mesma coisa do PIPE, porém em outro sentido de execução da composição.
Esses métodos são bem importantes, pois facilitam quando precisamos usar vários outros métodos ao mesmo tempo, compondo o que precisamos :D

MergeDeepRight

Como uma boa taurina que adora comer, sempre gosto de acrescentar mais uma coisinha no meu sanduíche.

//react component
import {mergeDeepRight} from 'ramda'
const sandwich = {
 bread: “normal”,
 cheese: “blue cheese”,
 meat: “knuckle”
}
const withSalad = mergeDeepRight(sandwich, {
 salad: ‘pickle’,
 });
mergeDeepRight(withSalada, sandwich)
//{"meat": "knuckle", "bread": "normal", "cheese": "blue cheese", "salad": "pickle"}

Em resumo, o Ramda é uma ferramenta muito legal, focada em obter desempenho.

Com ele, as implementações ficam mais simples e rápidas que com os métodos nativos. Além disso, ele trabalha o mantra DRY (don't repeat yourself).

No geral, use-o para facilitar sua vida e trazer performance. ;)
Alguns links legais que achei pesquisando (infelizmente a maior parte está em inglês):

Tutoriais legais no YouTube
Why I Fell in Love With Ramda
Why Ramda?
A beginners guide to Ramda (Part 1)
A beginners guide to Ramda (Part 2)
Functional Programming in JS with Ramda

Espero que tenham gostado!

Primeiros passos com Git e Github

Julia Maschion — Mon, 01 Mar 2021 03:23:37 +0000

Fundado em 2008, o Github (recentemente adquirido por $7.5 bilhões pela Microsoft.) é como se fosse uma rede social utilizada principalmente por desenvolvedores.

Nele você consegue colocar seus projetos pessoais e compartilhar com as pessoas. O famoso open source, que são códigos abertos, também rola bastante por lá e isso possibilita que você possa contribuir com os projetos que possuem código aberto.

Você pode salvar tudo em forma pública no seu perfil (qualquer pessoa, mesmo sem ter uma conta pode ver e baixar tudo o que você publicar), e de forma privada (somente membros com permissão de acesso podem visualizar ou baixar seu projeto). As vantagens de utilizar essa plataforma são:

Organização dos seus projetos;
Compartilhamento dos seus projetos;
Servirá de portfólio para você;
Guardar outros arquivos não somente de código;
Versatilidade: Você pode guardar qualquer tipo de arquivo no git/Github, não necessariamente código. O Github utiliza uma linguagem chamada Markdown, que permite criar listas, links, ancôras, adicionar imagens, vídeos, gifs.

Como criar uma conta?

Clique em "Sign Up" e crie sua conta:

Agora, o que é o Git?

Git é um sistema de controle de versão desenvolvido por Linus Torvalds (o criador do Linux).
Com o git conseguimos gerar versões do nosso código, igual aquele trabalho de escola "versão1", "versão2", "versãoAgoraVai" etc…Por isso ele é conhecido como um sistema de VERSIONAMENTO DE CÓDIGO.
Com ele outras pessoas podem trabalhar simultaneamente no mesmo código sem riscos de perdermos nada do nosso trabalho. Temos todo o histórico do que foi modificado e a pessoa que modificou. Fofoqueiro ele, né?

Por que o Git é importante?

Organização: O Git cria uma timeline com tudo que aconteceu desde o início do projeto. Tudo que foi adicionado, removido, e quem foi o autor.
Projetos com várias pessoas: Evita o “final_valendo_valendo2_oficial”. Também facilita o trabalho em equipe (entender o que foi feito, onde parou, quem fez o que).
Segurança: Se algo der errado, você pode resgatar uma versão anterior, além de ter o seu projeto salvo em um lugar seguro.

O que é a linha de comando/terminal?

A linha de comando é o terminal, onde o GIT é usado. Ela ajuda a manipular arquivos no computador, mas sem a interface gráfica.
Também tem outros nomes como: cmd, CLI, prompt, console ou terminal. Imagem representando a linha de comando:

Comandos básicos do terminal

Esses comandos servem para para listar arquivos e navegar entre pastas dentro do computador:

ls - LISTAR (ele traz uma lista de tudo o que está naquela pasta - documentos, outras pastas, etc);
pwd - Present working directory (onde estou?) Ele traz todo o caminho onde você está (em que pasta e onde essa pasta fica);
cd - change directory (use para se locomover entre as pastas);
cd ~ - volta para a raiz;
cd . - volta uma pasta acima;
cd nome-da-pasta - para entrar em uma pasta (você precisa conseguir enxergar ela quando listar os arquivos) whoami - "quem sou eu?" identifica o usuário que está mexendo no sistema.

Instalando/verificando se o Git está conectado ao seu usuário

Nesse link ele mostra como instalar pra cada sistema operacional: Mac, Windows, Linux etc.
https://git-scm.com/book/pt-br/v1/Primeiros-passos-Instalando-Git
Configurando e removendo usuário:

git config --global user.name “Fulana Ciclana"  git config --global user.email “fulana.ciclana@gmail.com”

Para remover o usuário

git config --global --unset-all user.name "Fulana Ciclana" git config --global --unset-all user.email “fulana.ciclana@gmail.com”

Formas de trabalhar com o Git/GitHub

Iniciar um projeto novo na sua máquina e subir para o GitHub
Baixar um projeto que está hospedado no GitHub e trazer para a nossa máquina

Iniciar um projeto na sua máquina e subir pro GitHub

cd - Vai pra um diretório;
git init - Para o git começar a observar as modificações no repositório;
git status - Verificar o que foi modificado;
git add . (vai adicionar TODAS as alterações), caso queira apenas alguns arquivos, deve ser git add e pode ser mais de um nome de arquivo;
git commit -m "" mensagem que enviaremos de modificações, remoções, adições etc;
git remote add origin "", endereço para onde vai a atualização lá para o Github;
git remote -v, verificar se a url está correta;
git push origin master, enviar;

Baixar um projeto que está hospedado no GitHub para a nossa máquina

Copiar a URL do repositório criado no Github;
git clone, para clonar no local que você desejar. No exemplo coloquei no Desktop com cd Desktop.

Não esqueça de direcionar onde você quer clonar com o "cd" para não clonar em local errado e perder onde está o arquivo.

Após esses passos é só repetir os passos que já comentei quando queremos iniciar um projeto na máquina e subir pro GitHub (git status, git add, commit, push etc...)

Importante: Fazer um pull sempre antes do push para evitar conflitos e evitar apagar alguma informação remota.

Bom pessoal, eu sei que o texto é grande e tem muitas informações. Por isso, farei outros textos de github pages e branch separadamente.

Peguei referências desse repositório que me ajudou muito quando eu estava aprendendo : Reprograma Github

Também indico o curso: curso Git e Github

Pratique bastante, esse é o segredo!

Configurando ambiente de desenvolvimento no Windows

Julia Maschion — Fri, 26 Feb 2021 22:55:47 +0000

Olá, hoje vou passar aqui umas dicas de como instalar algumas ferramentas no Windows para configurar nosso ambiente de desenvolvimento. Vamos lá:

Instalando o Chocolatey

A primeira coisa a instalar vai ser o Chocolatey. Ele é um gerenciador de pacotes para o Windows que ajuda a instalar, atualizar e remover outras ferramentas de desenvolvimento.

Tem duas formas, ou pelo cmd do Windows ou pelo PowerShell.

Instalando com cmd.exe

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Instalando com PowerShell.exe

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Instalando o Node

Dependemos do Node no terminal para executar algumas coisas e o NPM para gerenciar as atualizações, pacotes etc.

Após a instalação do Chocolatey, precisamos instalar o Node para Windows, assim conseguiremos lidar com o npm (gerenciador de pacotinhos do node :) ).

Instalando o node usando o Chocolatey:

cinst nodejs # ou cinst nodejs.install

===========================================

Configurando seu terminal:

Agora chegamos na parte divertida de colorir um pouco as coisas. Abaixo teremos o site do Dracula Theme, onde tem o tema mais usado para vários tipos de lugares! Iupi! :D

BÔNUS

No meu caso eu tive que configurar tudo e mais um pouco. O usuário do computador era outra pessoa e eu tive que modificar o nome do usuário no disco local C:\Users. Para isso o que eu fiz:

IMPORTANTE:

Antes de fazer o passo a passo certifique-se de que você já se colocou como Administrador do computador, caso não, digite no pesquisar do Windows "netplwiz" > propriedades > associação de grupo > Administrador.

1) Fui na barra de pesquisar do Windows e digitei "regedit";
2) Abrindo o registro do Windows eu fechei as pastinhas que estavam abertas pra ir em HKEY_LOCAL_MACHINE;
3) Depois em software > Microsoft > Windows NT > Current Version > Profile List;
4) Dentro de Profile List procure o nome de usuário que está atualmente. Provável que estará algo assim:

5) Botão direito no ProfileImage > Modificar. Coloque o nome que você quer na pasta;
6) Reinicie o Windows, quando entrar na área de trabalho (tomei um susto nessa parte pois tinha sumido tudo do computador, pois estava em um usuário temporário, mas por que precisava fazer outro passo que falo no passo 7);
7)Vá na pasta dentro do computador mesmo C:\Users<usuáriox> e já estará disponível para renomear o nome do antigo usuário "". Renomeie para o nome que você colocou no "regedit".
7) Reinicie novamente o computador e agora já deve estar com seu usuário correto.

É isso pessoal, espero que tenha ajudado bastante vocês! Podem me dar feedback ou se quiser algum tema aqui para eu escrever pode falar também. Se eu souber ajudar, ajudarei! :)

Vídeo que me ajudou com o caso de usuário https://www.youtube.com/watch?v=H5NcfzmtTJY&feature=emb_title

Redes sociais:
https://twitter.com/xjulices
https://github.com/jumaschion