Forem: Hudson Arruda

5 cursos que eu faria se estivesse começando agora no Frontend

Hudson Arruda — Fri, 06 Dec 2024 21:00:00 +0000

Começar sempre é desafiador, especialmente em programação. Tudo é novo, e com tantos vendedores de cursos tentando chamar sua atenção, fica difícil filtrar o que realmente vale a pena. Neste artigo, quero recomendar conteúdos que já usei, confio e acredito que irão ajudar você a dar o próximo passo. E o melhor: todos são gratuitos!

1. HTML e CSS Feliz - Marco Bruno

Marco Bruno já foi professor na Alura, é idealizador da ColabCode, uma comunidade incrível no Discord, e eu costumo recomendar tudo o que ele cria. Mas por que escolher este curso em específico?

O HTML e CSS Feliz tem como diferencial a didática do Marco, que vai além do básico:

Ele ensina a construir uma rotina de desenvolvedor, incluindo commits e refatoração.

Propõe desafios práticos entre as aulas.

Entrega um projeto completo no final do curso que também serve como portfólio.

Por que não começar com esses três benefícios no seu primeiro curso?

Link do curso:
HTML e CSS Feliz - Marco Bruno

2. Curso de Javascript - Guanabara

Gustavo Guanabara é uma referência no ensino de tecnologia. Há mais de 15 anos ele compartilha conteúdos gratuitos no YouTube. Este curso, em parceria com o Google, é um excelente ponto de partida para aprender JavaScript.

Você vai aprender:

As principais funcionalidades do JavaScript.

Manipulação do DOM.

Exercícios práticos explicados de forma simples e objetiva, preparando você para estudar por conta própria.

Link do curso:
Curso de JavaScript - Guanabara

3. Curso Jogo da Memória - JavaScript para React

Mais uma aula do lendário Marco Bruno! Aqui, ele ensina como criar um jogo da memória utilizando a sintaxe JSX e ferramentas como Vite, essenciais para quem deseja se tornar um desenvolvedor frontend.

Por que fazer esse curso?

Ele aprofunda conceitos de JavaScript.

Reduz a complexidade da transição para o React, ideal para quem está começando.

Link do curso:
Curso Jogo da Memória - JavaScript para React

4. Bootcamp Gratuito - Fdaciuk

Fdaciuk é outro grande nome na comunidade da ColabCode, com profundo conhecimento em React. Neste bootcamp gratuito, ele aborda os principais tópicos sobre React, com desafios práticos e uma didática impecável.

O curso é uma excelente oportunidade para quem quer solidificar os fundamentos e avançar na jornada como desenvolvedor.

Link do bootcamp:
Bootcamp Gratuito - Fdaciuk

5. Pokedex - Pasquadev

Este projeto foi o mais desafiador para mim no início, mas me ajudou a compreender e aplicar vários conceitos do React na prática.

Neste curso, Pasquadev ensina como criar uma Pokedex consumindo a API PokeAPI e usando os principais hooks do React:

useEffect

useState

useContext

O tutorial tem 4 horas de duração, é prático e vale cada segundo.

Link do curso:
Pokedex - Pasquadev

Considerações finais

Perseverança é tudo. Você não precisa de muito tempo por dia, mas de constância. Sempre digo: programação é sobre usar o Google e transformar ideias em algoritmos.

Gostou das recomendações? Tem alguma sugestão ou discordância com a sequência apresentada? Deixe seu comentário aqui embaixo!

Certificações do Github, valem a pena ?

Hudson Arruda — Wed, 20 Mar 2024 15:00:00 +0000

O github, maior ferramenta de distribuição de código open-source do mundo, lançou recentemente 5 certificações exclusivas.

Github Fundamentals
Github Actions
Github advanced Security
Github admin
Github Copilot

Todas certificações possuem cursos preparatórios gratuitos no Microsoft learn ( o qual eu anteriormente mencionei pelo golpe do desafio da Azure )

Mas a pergunta é: será que compensa ?

Ao meu ver, qualquer certificação, diploma ou curso sempre tem seu peso, a questão é se o peso dele no seu currículo vai valer seu preço( custo/benefício).Pesquisando, descobri que as certificações estão a partir do valor de 500 dólares (mínimo) e neste quesito eu acho que não compensa.Tanto por se tratar de uma certificação em maioria para desenvolvedores, que são examinados por portfólios e projetos na maioria dos casos, dando pouco destaque para a certificação e pelo valor, que está acima de várias outras que talvez teriam mais impacto.

Mas e você? Concorda comigo? Ou Faria a certificação ?

Como melhorar a legibilidade e a escalabilidade do seu projeto?

Hudson Arruda — Fri, 15 Mar 2024 12:09:49 +0000

Programar envolve diversos fatores, mas é sabido que a prática eleva os padrões, mas como saber o que está bom e o que não está? Onde devo melhorar? O que fazer?.Bem, uma boa resposta seria um guia, sênior ou mentor, mas nem sempre contamos com uma pessoa com disponibilidade para isso, por isso que eu uso estas duas tecnologias gratuitas que me fizeram evoluir de uma maneira bastante rápida. CodeClimate e SonaQube.

Um breve resumo sobre mim.

Meu nome é Hudson, Desenvolvedor Frontend na OPEN Datacenter e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo frontend, desenvolvimento mobile, UX e Linux.

CodeClimate

Não é a primeira vez que falo sobre o code climate, ele utiliza de uma lógica bem simples e olha poucos itens no seu código que fazem toda a diferença: Duplicação, Complexidade, Tamanho de funções e arquivos resumidamente. Apesar de parecer simples à primeira vista e meio irracional à segunda, usar o code climate possibilitou uma velocidade de crescimento incrível no meu projeto.

SonarQube

Eu diria que diferente do CodeClimate que apresenta uma visão crua de qualidade, o SonarQube possui uma análise mais refinada, mostrando importações e funções não utilizadas, dicas de melhorias de performance, problemas de segurança e diversos outros itens que não temos no Codeclimate.

Qual é melhor?

Eu poderia simplesmente falar que o SonarQube é melhor, mas a verdade é que ambos se complementam e usam diferentes formas de analisar seu código de forma que o feedback quase nunca é redundante.

E para ajudar vocês….

Bonûs

Irei disponibilizar dois scripts para rodar o codeclimate e o sonarQube localmente em seu computador, ambos possuem sistemas de CI/CD e planos pagos, mas para rodar em sua máquina é gratuito.

Hudson3384 / sonar-and-codeClimate

Welcome to my Sonar and Codeclimate scripts

Dependencies

sonar-scanner cli
docker
jless [ JSON VIEWER ] - inside of Codeclimate script - you can remove if you want

View on GitHub

Qualquer dúvidas, não existe em criar issues ou comentar que prontamente tentarei te ajudar.

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim:

GitHub
LinkedIn
LeetCode

E o voucher ein, Azure ? Vai ter ou não ?

Hudson Arruda — Tue, 12 Mar 2024 15:00:00 +0000

Fiz o desafio da Microsoft learning que oferecia um voucher e no final não o citavam mais, fui passado para trás ?

Para quem me conhece a mais tempo sabe que eu adoro promoções, se tem algo de graça por tempo limitado, essa coisa acaba de se tornar meu hiperfoco, foi assim que eu tirei a Amazon Practitioner e a OCI Fundamentals.a A mesma coisa foi quando eu recebi um convite para o desafio da Microsoft Learning para o curso Microsoft Azure Fundamental que dizia claramente que ao final você ganhará um voucher.

Entrando em outro dia para dar continuidade, me deparo que a mensagem mudou ( Nesta foto foi quando eu percebi que tinha caroço nesse angu) e que não mais história de voucher, e agora como proceder ? Será que ele ainda vem ou já é comum esse tipo de atidude da Azure?

Se alguém tiver alguma opinião ou ideia, comente aqui embaixo

Migrando do Moment.js para Day.js em Projetos React: Guia completo

Hudson Arruda — Fri, 09 Feb 2024 23:00:00 +0000

Meu nome é Hudson e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo frontend, devops, linux e automatizações.

O React é uma biblioteca popular para construir interfaces de usuário em JavaScript. Ao desenvolver aplicativos React que lidam com datas e horas, muitos desenvolvedores recorrem ao Moment.js devido à sua rica funcionalidade e sintaxe intuitiva. No entanto, com a necessidade crescente de bibliotecas mais leves e modernas, como o Moment.js se tornou um pouco pesado, Day.js surge como uma alternativa atraente. Neste guia, vamos explorar como migrar de Moment.js para Day.js em projetos React, considerando diferentes tipos de migração.

1. Migração Básica: Substituição Direta

Nesta abordagem, você pode fazer uma substituição direta do Moment.js pelo Day.js, mantendo as funcionalidades básicas intactas. Por exemplo:

Moment.js (Formato de Data):

import moment from 'moment';

const formattedDate = moment().format('YYYY-MM-DD');

Day.js (Formato de Data):

import dayjs from 'dayjs';

const formattedDate = dayjs().format('YYYY-MM-DD');

2. Migração de Manipulação de Tempo Relativo

Se o seu aplicativo React faz uso intensivo de funções de tempo relativo do Moment.js, como fromNow(), você pode migrar para as funcionalidades equivalentes do Day.js. Por exemplo:

Moment.js (Tempo Relativo):

import moment from 'moment';

const relativeTime = moment('2023-01-01').fromNow(); // "2 anos atrás"

Day.js (Tempo Relativo):

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const relativeTime = dayjs('2023-01-01').fromNow(); // "2 anos atrás"

3. Migração de Formatação Humanizada

Se você estiver usando a função humanize() do Moment.js para formatar datas de uma forma humanizada, pode migrar para a funcionalidade equivalente do Day.js. Por exemplo:

Moment.js (Formatação Humanizada):

import moment from 'moment';

const humanizedTime = moment.duration(2, 'days').humanize(); // "2 days"

Day.js (Formatação Humanizada):

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';

dayjs.extend(duration);

const humanizedTime = dayjs.duration(2, 'days').humanize(); // "2 days"

4. Migração de Formato Personalizado

Se você estiver usando formatos personalizados complexos no Moment.js, pode migrar para o Day.js e ajustar os formatos conforme necessário. Por exemplo:

Moment.js (Formato Personalizado):

import moment from 'moment';

const customFormat = moment().format('MMMM Do YYYY, h:mm:ss a');

Day.js (Formato Personalizado):

import dayjs from 'dayjs';

const customFormat = dayjs().format('MMMM D YYYY, h:mm:ss a');

Conclusão

Migrar de Moment.js para Day.js em projetos React pode ser feito de várias maneiras, dependendo das funcionalidades específicas que você está usando. Ao considerar diferentes tipos de migração, você pode garantir uma transição suave e eficaz para o Day.js, mantendo a funcionalidade e a sintaxe do seu aplicativo React. Certifique-se de revisar a documentação oficial do Day.js para obter informações detalhadas sobre todas as funcionalidades mencionadas neste guia.

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim:

GitHub
LinkedIn
LeetCode

TODO FRONTEND PRECISA SABER FAZER UM DEPLOY SIMPLES

Hudson Arruda — Wed, 07 Feb 2024 14:22:00 +0000

Ei, frontend. Se alguém te pedir para fazer um site simples com HTML, CSS e JS e para isso te oferecesse uma Instância (VM) e um domínio. Você conseguiria fazer isso?. Ou apenas colocar seu site no ar usando o domínio passado, você acha que isso faz parte da sua competência?

É muito comum ver vagas que pedem Frameworks, conhecimento em metodologias, e provavelmente nesses locais você não irá fazer nada a mais que interfaces gráficas mesmo, pois foi o que você foi contratado a fazer. Mas você não acha que chega o momento de abrir um pouco seus horizontes?

Vamos supor, você sabe das mais atuais tecnologias de front end, como Angular e React, sabe Type Guards e Generic tyṕes do Typescript como ninguém, especializado em SEO, com integração com mil e uma coisas, e chega uma pessoa e te fala:

Gostaria de uma Landing Page e que você comprasse um domínio para mim, e que essa landing page captasse leads para meu RDstation.

Uma landing page simples, com um único botão, o que falta para você conseguir pegar esse bico?

Um backend? Não utilizaremos nenhuma api ou banco aqui
Um devops? Por favor, nem testes vai ter nessa SPA
Um especialista em cloud ? Pulando a cronologia deste artigo, eu já afirmo que um github pages faz 50% do trabalho

VOCÊ, FRONTEND, È CAPAZ DE FAZER ISSO.

Este texto não pretende ser acusatório, e sim gerar uma reflexão sobre as portas que são fechadas por você, frontend, não horizontar seus conhecimento um pouco.

Paulo SIqueira, CEO da ALURA, tem diversos vídeos sobre este conceito, apelidado de Dev em T, que debate o debate interno do Dev de horizontar e verficalizar seu conhecimento, e eu acredito que esse debate constane é sempre necessário

“Não deixe seus conhecimentos limitarem a sua criatividade”

Você concorda com essa frase?

Desbravando o Mundo do Nginx: Criando seu Primeiro Servidor como Frontend

Hudson Arruda — Sat, 03 Feb 2024 03:00:00 +0000

Se você está ansioso para lançar seu primeiro site React para o mundo, esta na hora de você conhecer o Nginx.

Sobre mim

Um breve resumo sobre mim.

Meu nome é Hudson, Desenvolvedor FullStack e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo como backend, devops, linux e automatizações.

O que é o Nginx

Nginx é muito mais do que apenas um servidor web - é uma ferramenta poderosa que pode ser usada para melhorar drasticamente o desempenho e a segurança do seu site. E hoje, vou guiar você através da configuração do seu primeiro servidor Nginx para hospedar seu site React na porta 8000. Não se preocupe se você é novo nisso - vamos abordar cada passo com detalhes claros e concisos.

Não irei adentrar a parte de instalação neste momento,
acredito que já existem vários conteúdos sobre mas pretendo compartilhar o meu próprio

Configurando o Nginx

Primeiro, vamos começar editando o arquivo de configuração do Nginx usando o editor de texto vim. No seu terminal, digite:


sudo vim /etc/nginx/nginx.conf

Dentro do arquivo, você verá algo parecido com isto:

http {
    server {
        listen 80;
        server_name example.com;

        location / {
            root /var/www/html;
            index index.html;
        }
    }
}

Agora, vamos modificar isso para atender às nossas necessidades:


http {
    server {
        listen 8000;
        server_name localhost;

        location / {
            root /caminho/para/sua/pasta/dist;
            index index.html;
        }
    }
}

listen 8000: Define a porta na qual o servidor Nginx irá ouvir. Neste caso, estamos usando a porta 8000.
server_name localhost: Define o nome do servidor. Aqui, estamos usando localhost para fins de teste, mas você pode alterá-lo para o seu nome de domínio real quando estiver pronto para lançar seu site.
location / {...}: Define as configurações para o local solicitado. Aqui, estamos configurando o diretório raiz e o arquivo index a serem usados. Agora, salve e feche o arquivo (no vim, pressione Esc, depois :wq e Enter).

Verificando a Configuração do Nginx

Antes de reiniciar o serviço Nginx, é sempre uma boa ideia verificar se a configuração está correta. Felizmente, o Nginx torna isso fácil com o comando nginx -T. Digite o seguinte no seu terminal:

nginx -T
Isso irá testar sua configuração e fornecer feedback sobre possíveis erros ou problemas. Se tudo estiver bem, você está pronto para reiniciar o serviço Nginx.

Reiniciando o Serviço Nginx

Para aplicar as alterações que fizemos em nossa configuração, precisamos reiniciar o serviço Nginx. No seu terminal, digite:


sudo service nginx restart

E pronto! Seu servidor Nginx está agora configurado para hospedar seu site React na porta 8000. Agora é só abrir seu navegador e acessar http://localhost:8000 para ver seu site em ação.

Lembre-se, este é apenas o começo de sua jornada com o Nginx. À medida que você se aprofunda mais, descobrirá uma infinidade de recursos poderosos que podem levar seu site para o próximo nível. Então, continue explorando e experimentando - o mundo do desenvolvimento web está cheio de possibilidades emocionantes. Boa sorte!

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim:

GitHub
LinkedIn
LeetCode

5 Horizontes que separam os Devs, em qual você está ?

Hudson Arruda — Thu, 01 Feb 2024 18:43:09 +0000

Você já se perguntou em qual categoria de desenvolvedor você se encaixa? Explore os cinco horizontes que separam os devs e descubra em qual deles você está:

Horizonte 1 - O Adepto da Versatilidade:

Este é o território do Vulgo Nutella, onde a maioria dos devs reside. Eles dominam o Javascript para tudo, seja backend, frontend, mobile ou desktop. A versatilidade do JavaScript abre muitas portas, mas a armadilha é ficar preso a uma única tecnologia sem buscar expandir seus horizontes.

Horizonte 2 - O Dev Informado:

Aqui, encontramos aqueles que sobem um degrau acima do Nutella. Eles não se limitam a CRUDs em Node e React; estão sempre se atualizando, seguindo newsletters, lendo artigos no Medium e acompanhando sites como Hacker News. Sua constante busca por conhecimento e novas ideias os destaca na comunidade de desenvolvimento.

Horizonte 3 - O Linux Expert:

Conhecido por sua proficiência em Linux, VIM como IDE e PHP e JQuery para frontend, esse dev é capaz de lidar com qualquer desafio, desde backend até automação e IA. Eles podem não saber tudo, mas sempre encontram uma solução. Ter um desenvolvedor desse tipo por perto é uma vantagem, pois sua habilidade de aprender sobre qualquer assunto é incomparável.

Horizonte 4 - O Especialista em Big Tech:

Especializado em processos seletivos e desafios de código, este dev está totalmente focado em aprimorar seu conhecimento teórico, além de ter habilidades afiadas em algoritmos e inglês. Sua preparação intensa para entrevistas e certificações o destaca em ambientes competitivos.

Horizonte 5 - O Matemático Aplicado:

Este dev aplica habilidades matemáticas avançadas, como cálculo e álgebra, para otimizar seu código. Geralmente, estão envolvidos em áreas como machine learning, onde seu conhecimento profundo em matemática é fundamental.

E você, concorda com essa categorização? Em qual horizonte você se encontra neste momento? Compartilhe nos comentários sua jornada !!!

Desvendando a Certificação Amazon Practitioner 2024: Um Relato e Dicas de Estudo

Hudson Arruda — Fri, 19 Jan 2024 03:41:00 +0000

Um pouco sobre mim:

Meu nome é Hudson, sou desenvolvedor frontend e Mobile na OPEN Datacenter, e busco compartilhar conhecimentos sobre minha área e aquelas em que tenho interesse em atuar. Estudo áreas como backend, DevOps, Linux e automações.

O que é o Amazon Practitioner:

O Amazon Practitioner é uma certificação de entrada que examina seus conhecimentos na nuvem da AWS. Ela foca em conceitos e é recomendada até para pessoas que trabalham com Cloud indiretamente, como marketing, vendedores e outros.

Minha experiência:

A prova foi feita pela plataforma da Pearson Vue. Antes de fazer a prova, você tem acesso a um executável demo que será idêntico ao dia da prova. Esse executável valida softwares em seu computador que podem impedir a conclusão da prova (permitido apenas em Mac ou Windows), além de validar microfone, câmera e autofalante, necessários para iniciar a prova.

Ao chegar o horário da prova, você deve ter baixado o executável enviado posteriormente ao teste e seguir as instruções.

A primeira instrução será enviar uma foto de selfie e do seu documento. Em seguida, uma foto do seu documento (é necessário tê-lo para liberarem a prova). Depois, você deve tirar fotos dos quatro lados da sua mesa de computador. Essas fotos podem ser enviadas pelo computador ou por uma página web acessível via QR code para acesso pelo celular.

Após essa etapa, entra o examinador:

Na hora de marcar a prova, você define o idioma do examinador. Atualmente, estão disponíveis apenas em inglês e espanhol. Com a webcam, ela vai pedir para olhar todas as direções que foram solicitadas no passo anterior e, caso encontre alguma irregularidade, vai pedir para você guardar e mostrar, guardando o item. Neste passo, seu celular já não deve estar visível para o examinador para agilidade do processo.

Finalmente, a prova:

São 65 questões de múltipla escolha em 90 minutos, com múltiplos pesos e grau de complexidade não declarados, focados em quatro domínios.

Meus resultados:

Na PearsonVue, você pode revisar todas as questões ao final da prova. Além disso, ele alerta quais perguntas não foram respondidas e permite que você marque questões para revisar a resposta ao final também.

Finalização:

Após o final da prova, eles realizam 10 perguntas sobre a plataforma e nível de satisfação. Após isso, você já tem o resultado. Após 5 dias, chega um e-mail confirmando o resultado.

Principais conteúdos:

Apesar de eu ter realizado a prova em 2023, estudei com conteúdos de anos anteriores, e realmente não muda muita coisa. Os resultados são esses:

IAM (Identity and Access Management):
- Gestão segura de acessos aos serviços e recursos na AWS.
EC2 (Elastic Compute Cloud):
- Execução de máquinas virtuais escaláveis na nuvem AWS.
S3 (Simple Storage Service):
- Armazenamento e recuperação de dados escaláveis e duráveis.
RDS (Relational Database Service):
- Implantação e gerenciamento de bancos de dados relacionais na AWS.
VPC (Virtual Private Cloud):
- Criação de redes isoladas e personalizadas na nuvem.
Lambda:
- Execução de código sem a necessidade de provisionar ou gerenciar servidores.
Route 53:
- Registro e gerenciamento de nomes de domínio e serviços DNS.
CloudWatch:
- Monitoramento de recursos e aplicativos na AWS.
Elastic Load Balancing:
- Distribuição de tráfego entre instâncias EC2 para garantir a disponibilidade.
DynamoDB:
- Armazenamento de dados NoSQL com desempenho e escalabilidade.
Modelos de Precificação:
- Compreensão dos modelos de precificação e otimização de custos na AWS.
AWS Well-Architected Framework:
- Implementação de arquiteturas seguras, eficientes e de alto desempenho.

Materiais de estudo:

O curso da AWS SkillBuilder - Cloud Foundations foi útil, apesar de ser mais geral.
Link para o curso da SkillBuilder
O curso da Alura abordou assuntos interessantes que complementaram o da SkillBuilder.
Link para o curso da Alura
O curso da AWS Academy apresenta um conteúdo mais denso e foi útil na preparação para a prova.
Link para os cursos da AWS Academy
Utilizei o aplicativo Anki para memorização dos tópicos.

Certificado e Links:

Para mais informações ou dúvidas, estou à disposição nos comentários. Se gostou, por favor, avalie para me motivar a criar mais conteúdos assim.

Redes Sociais:

Github: https://github.com/Hudson3384
Linkedin: https://www.linkedin.com/in/hudson-arruda-ribeiro/
LeetCode: https://leetcode.com/Hudson3384/

Explorando as Possibilidades: Wezterm e o Mágico Efeito Parallax no Seu Terminal Linux

Hudson Arruda — Fri, 12 Jan 2024 03:00:00 +0000

Esta dica destina-se a quem é apaixonado por Linux e gosta de personalizar seu terminal com atalhos e estilos únicos. Neste artigo, falarei sobre o Wezterm, um novo terminal e multiplexador extremamente eficiente e rápido, desenvolvido em Rust. Além disso, vou explicar como configurar um modelo de parallax inspirado no filme "Interestelar". Para os mais apressados, o link para o repositório está disponível ao final do artigo.

Um pouco sobre mim:

Meu nome é Hudson, sou desenvolvedor front-end e mobile na OPEN Data Center. Busco compartilhar conhecimentos na minha área e em outras que tenho interesse, como backend, DevOps, Linux e automações.

O que é o Wezterm:

O Wezterm é uma alternativa a terminais como Xterm, Alacritty, Kitty e Git Bash. Ele oferece diversas funcionalidades integradas, como o imgcat para visualização de imagens, por exemplo:


wezterm imgcat path/to/image

Além disso, possui um sistema completo de multiplexação de telas, semelhante ao Tmux ou Screen. Pessoalmente, não o utilizo, pois já estou acostumado com o Tmux.

O que é o efeito parallax:

O efeito parallax consiste em um conjunto de imagens ou padrões que rotacionam ou se movem em velocidades distintas, criando um efeito tridimensional. Um exemplo pronto pode ser visualizado no próprio site do Wezterm: parallax-example.

Criando o efeito parallax:

Para criar o efeito parallax, é necessário acessar o arquivo .wezterm.lua. Não vou entrar nos detalhes da instalação, mas deixarei o link detalhado da documentação no final do artigo. Se estiver usando Arch Linux, basta executar sudo pacman -S wezterm.

Adicionando uma imagem de fundo:

Existem várias maneiras de criar um efeito parallax. Considerando o modelo que desejo criar e para evitar grandes mudanças, escolhi uma imagem mais escura para o fundo e ajustei o brilho para 0.2.


local wezterm = require 'wezterm'
local dimmer = { brightness = 0.2 }
local config = {}

-- ... (configurações adicionais)

config.background = {
 {
    source = {
      File = './wallpapers/blackhole.png',
    },
    repeat_x = 'Mirror',
    hsb = dimmer,
  },
}
return config

Configurando partículas:

Após vários testes, optei por usar uma imagem de estrelas com resolução suficiente. Inicialmente, copiei o objeto do fundo e mudei o source para as partículas definidas.

O código final ficará próximo disso:

-- ... (código anterior)

config.background = {
 {
    source = {
      File = './wallpapers/blackhole.png',
    },
    repeat_x = 'Mirror',
    hsb = dimmer,
  },
  {
    source = {
      File = './wallpapers/stars2.jpg',
    },
    opacity = 0.3,
    width = '100%',
    repeat_x = 'Mirror',
    repeat_y = 'Repeat',
    hsb = dimmer,
    attachment = { Parallax = 3.0 },
  },
  -- (outros ajustes de partículas)
}
return config

O link para o arquivo completo e as imagens utilizadas estão no meu repositório no GitHub: Repositório.

Se gostou, por favor, avalie para me motivar a criar mais conteúdo:

GitHub: Hudson3384
LinkedIn: Hudson Arruda Ribeiro
LeetCode: Hudson3384

5 Estratégias para Elevar seu Nível no Frontend

Hudson Arruda — Fri, 29 Dec 2023 14:54:00 +0000

Um breve resumo sobre mim.

Meu nome é Hudson, sou desenvolvedor frontend e Mobile na OPEN Datacenter e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo como backend, devops, linux e automatizações.

Teste tudo o que puder

Uma requisição para vagas de desenvolvedores pleno que eu demorei a correr atrás foi a criação de testes e me arrependo muito disso. Criar testes automatizados aumenta totalmente a confiabilidade do seu código, evita erros inesperados, evita refatorações e te faz pensar de uma forma inteligente, pensando em formas de tratar todas as possibilidades de erros e como testá-las. Ferramentas ótimas para isso são o Jest e o Cypress.

Documentação do Cypress: https://docs.cypress.io/
Documentação do Jest: https://jestjs.io/pt-BR/

Usar ferramentas de saúde de código

Evitar duplicações e melhorar a legibilidade é uma responsabilidade de qualquer programador independente da stack, por isso temos diversos métodos como SOLID, clean code e outros. No entanto, é impossível exercer a onisciência do código de forma manual por isso temos ferramentas de saúde de código. Estou familiarizado com duas ferramentas gratuitas, o codeClimate e o Sonar

CodeClimate: https://codeclimate.com/
Sonar: https://www.sonarsource.com/products/sonarqube/

Seja ousado

Apesar deste título genérico, eu acredito que foi o que mais me fez crescer neste ano, para crescermos é necessário entender que esse processo vá ser doloroso às vezes pois precisamos sempre aumentar nossos desafios no limiar dos nossos limites. Costumo dizer que o frontend deve pensar às vezes como se fosse o UX Designer, e depois de anunciar o problema e solução, se virar como frontend para solucionar.

Uma recomendação de combina com o assunto:

VIDEO : A Dor de Aprender | Que Cursos/Livros?

Se mantenha informado e saia da caixinha

Um pensamento que eu possuo desde que eu entrei na área da programação é que não podemos nos prender ao escopo do nosso ambiente, caso você já trabalhe ou estude, vai de maneira indireta aprender mas é necessário entender que há uma limitação de escopo nesta maneira. Por isso, sempre busque formas de saber mais sobre suas tecnologias e demais que estão em alta em newsletters, artigos e mídias sociais.

Em breve irei trazer minhas táticas que uso para me manter atualizado e recomendações de newsletters por aqui.

Estude algorítmos

Esta é uma dica poderosa, ao estudar algoritmos e praticá-lo, você começa a ter uma visão mais ampla sobre performance, reconhecendo falhas na sua aplicação e deixando mais afiado seu senso crítico. Além de ser exigido em testes de código para empresas maiores.

Uma forma efetiva de aprender é praticando, e por isso eu recomendo a Leetcode e esse video do PirateKing explicando como usar a plataforma com maior proveito.

Links:

Video: MY ULTIMATE LEETCODE TRICKS

LEETCODE SITE

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim:

Github: https://github.com/Hudson3384
Linkedin: https://www.linkedin.com/in/hudson-arruda-ribeiro/
LeetCode: https://leetcode.com/Hudson3384/

Como limpar sua mente para programar melhor: Saga GTD Capítulo 1

Hudson Arruda — Tue, 26 Dec 2023 17:24:25 +0000

Um Pouco Sobre Mim

Me chamo Hudson, sou um frontend developer e tenho uma grande curiosidade por soluções Linux e DevOps. Estou aqui para compartilhar uma saga de artigos baseada no livro "A Arte de Fazer Acontecer" de David Allen, onde vou relatar minha jornada ao tentar aplicar os princípios do livro no mundo da programação. Este conteúdo servirá como um aprendizado conjunto. Vamos nessa?

O livro de David Allen começa com uma analogia fascinante inspirada nas artes marciais: "Mente calma como a água". Devemos ser como a água, tranquilos e límpidos, reagindo apenas o necessário às perturbações, sempre em direção à calmaria. Essa analogia aborda a tendência constante que temos de manter pendências em nossas mentes.

De acordo com o livro, estudos comprovam que manter pendências, mesmo que inconscientemente, nos torna menos produtivos, pois consumimos parte dos recursos de nosso cérebro. O autor faz uma interessante comparação com o funcionamento de um computador e a memória RAM, que possui capacidade limitada de armazenamento e é volátil.

Você já se sentiu perdido e fez uma lista para tentar organizar seus pensamentos? Ou elaborou uma lista de compras? É exatamente sobre isso que o autor fala. Para David, não devemos esperar o caos se instaurar para criar uma lista. Todo pensamento solto que dependa de alguma ação deve ser anotado, classificado e armazenado em um local seguro e de fácil visualização.

Mas como fazer isso na prática?

Comece definindo um nome para a atividade, o que a consideraria concluída e os passos necessários para finalizá-la. Caso seja algo dependente de outra pessoa ou tenha uma data específica, defina alarmes que o lembrem da atividade apenas quando for relevante. Neste momento, não é necessário pensar em como executar ou concluir a tarefa; o foco está em capturar os pensamentos soltos em sua mente, deixando-os em um local seguro para liberar sua mente e se concentrar no problema à sua frente.

Estou utilizando um modelo fornecido pelo Trello, que segue uma dinâmica interessante e familiar aos métodos ágeis, caso você já tenha tido contato. Ainda não explorei todas as funcionalidades, mas planejo implementá-las conforme avanço na leitura do livro. Posso garantir que ao utilizar o "inbox", você já deixa sua mente mais clara para um trabalho mais eficiente.

Espero que essa jornada de aprendizado conjunto seja proveitosa para todos nós.

Modelo do Trello
GitHub
LinkedIn
LeetCode