Uncategorized

Diferenças “BEM” básicas entre let e var do JavaScript/ ECMA.

Com certeza o último post do ano. Ele serve até mesmo pra mim. Não somente pra reforçar o conhecimento mas pra poder também me ajudar a “fixar uma didática melhor” pra poder explicar a alguém que me pergunte. Os exemplos que vejo por aí nunca acho realmente simples de entender então aqui neste post vou deixar o mais “tosco” possível e também o mais simples possível, por isso o “BEM” no título.

Uma coisa básica antes de dizer a diferença entre let e var é que qualquer variável declarada sem let, var ou até mesmo const vai ter um escopo global. Isso é, vai valer em todo seu script.

Primeiro o VAR

var possui um escopo global por padrão. Visto em todo o Script ou dentro de um bloco de função (ou escopo de função). Isso é. Você pode declarar lá no início do seu bloco de código da página (ou seu construtor, por exemplo).

Quando eu falo de declarar dentro de um bloco de função estou falando que uma função pode conter várias funções dentro dela (escopos de bloco) e neste caso declarando var dentro desta função, todos os escopos de bloco dentro dela também vão enxergar esta var. Repare o exemplo tosco abaixo:

bloco_de_funcao() {
 var qqCoisa = qqCoisa;

escopo_de_bloco1() {
...
//enxerga a var
}

escopo_de_bloco2() {
...
//enxerga a var
}

escopo_de_bloco3() {
...
//enxerga a var
}
...escopo_de_blocoX...//enxerga a var
}

Dentro do escopo o uso de var é muito comum porque ela já é iniciada dentro dele antes das execuções dos escopos de bloco e desta forma não corre o risco de tomar um undefined na lata, como poderia acontecer com let. Veja:

console.log(souUmaVar);
var souUmaVar = 'qqCoisa'; // vai retornar undefined

console.log(souUmLet);
let souUmLet = 'qqCoisa'; // Uncaught ReferenceError: souUmLet is not defined 

Agora vamos falar de Let, esse é um pouco mais explicadinho…

Declarar uma variável let como um var, isso é, como um intuito de “escopo global” não vai dar liga irmão, não funciona.

var Um = 'souVar';
let Dois = 'souLet';

// local
console.log(Um); // souVar
console.log(Dois); // souLet

// Global - vai dar erro
console.log(window.Um); // souVar
console.log(window.Dois); // undefined  - com let vai dar erro!

Dentro do if seus estados (if, for, while, etc) o let possui diferentes perfis em escopos de blocos.

var souUmVar = 'valorVar';
let souUmLet = 'valorLet';

if(condicao qq) {
 var souUmVar = 'outroValorVar';
 let souUmLet = 'outroValorLet';
console.log(souUmVar, souUmLet); // vai retornar outroValorVar, outroValorLet
}
 console.log(souUmVar, souUmLet); // vai retornar outroValorVar, valorLet
// Fora do escopo da funcao o "let" reassume o valor inicial dele.

Seguindo essa linha de pensamento, se você tentar fazer uma nova declaração de let no mesmo escopo de bloco (ou função) vai dar erro.

var souUmVar = 'valorVar';
let souUmLet = 'valorLet';

var souUmVar = 'outroValorVar';
let souUmLet = 'outroValorLet'; // Uncaught SyntaxError: Identifier 'souUmLet' has already been declared

// Ele acusa erro na tentativa de passar novo valor informando que o let já tinha valor declarado anteriormente.

Quando falamos de declaração. O let é menos dinâmico ou melhor, ele é mais específico, isso é, vc precisa saber o que está fazendo com ele. Com var é de boas, declarou var dentro do escopo, ela é iniciada na hora que a execução entra nele, então, mesmo que o código em questão ainda não tenha lido a linha onde o valor de var foi atribuido, muito provavelmente var será lido. Já o let não, ele vai dar erro de falta de definição neste caso porque ele tem de ser “invocado” somente depois da linha onde foi declarado.

console.log(souUmVar); // no máximo vai rolar um "undefined", como neste caso.
var souUmVar = 'valorVar';

console.log(souUmLet); // vai dar um erro do tipo não definido, "souUmLet not defined"
let souUmLet = 'valorLet';

Resumindo então, porque pra um textinho tosco já tá bem grande, podemos resumir que:

O Modificador let faz com que o escopo da variável declarada se limite ao bloco de código ou expressão onde ela foi declarada apenas.

O Modificador var serve para tornar a variável local, acessível apenas ao seu escopo de função. Ou global se declarar ela lá no início do seu código ou no construtor do componente por exemplo (definição tosca, era isso né).

Se você declarar uma variável “solta”, sem nenhum modificador atribuído ela acaba tendo sua abrangência de escopo como uma variável global.

Achei esse modelinho legal em …https://pt.stackoverflow.com/questions/383284/d%C3%BAvidas-sobre-escopo-de-bloco-no-javascript

Não se esqueçam que o que tô colocando aqui é o básico do básico. Existem muitas interpretações e formas de se implementar fazendo desde obras de arte até cacas enormes com JS, então aconselho ir mais à fundo nisso e ver as pequenas diferenças. Se está querendo sacar legal de JS e se aprofundar aconselho a série do Kyle Simpson chamada “You dont know JS”. E para os chorões de plantão tem de graça e traduzido, legalmente e autorizado pelo Autor numa repo do Cezar Augusto do Github…

https://github.com/cezaraugusto/You-Dont-Know-JS

Então agora é só resta desejar um Feliz Ano Novo pra todo mundo que leu o post até o final!

var let = ” ‘s go!”

🙂

Padrão
Uncategorized

O que eu aprendi no ano de 2020 como Dev e Pessoa.

Sim. Não existe uma segunda personalidade em mim que se transforma em um Profissional e quando acaba o trabalho se torna o eu pessoal. Isso é loucura pra mim e se chama “Dupla Personalidade”. Mas vamos lá. Este texto não será um texto técnico como na maior parte das vezes então se está interessado só nisso acho que vai perder o seu tempo. É uma reflexão pessoal (e opinião também).

O que aprendi com o ano de 2020 como Desenvolvedor:

  • Que a demanda alucinada do mercado de TI é uma ilusão (pois os novatos não tem vez).
  • Que só existe Dev nível Sênior pra cima tamanho conhecimento que o mercado exige.
  • Que a Síndrome do Impostor é a melhor amiga e maior inimiga do Dev.
  • Que Flatpaks são muito melhores que Snaps.
  • Que as línguagens e frameworks e suas modinhas prevalecem sobre o valor do produto quando se vê as escolhas feitas analisando um projeto existente.
  • Que cursos gratuitos de Desenvolvimento em sua maioria são uma armadilha pra comprar mais cursos.
  • Que o conceito que era velho é novo e o que é novo será velho.
  • Que trabalhar remoto é muito mais produtivo e que se você não tomar cuidado nunca irá parar de trabalhar.
  • Que os recrutadores do segmento de TI estão atormentados na procura por profissionais e as empresas estão se aproveitando deles. Os profissionais também.
  • Que o “home office” pode ou será muito mais confortável e bem equipado que sua mesa na empresa (mesmo que seja com o tempo).
  • Que ter Cachorros é mais importante pra você do que para o Cachorro.
  • Trabalhar em casa pode fortalecer ainda mais seu casamento.
  • Que não preciso mais de uma IDE parruda, talvez nem mesmo uma IDE para trabalhar.
  • Que a palavra “inovação” e “disruptivo” são uma obsessão do mercado e ambas estão sendo usadas da mesma forma e muito mal usadas assim como a palavra “urgente” e quando tudo é urgente, nada é urgente. Poucas são as pessoas que conhecem bem o valor real destas palavras. Conforme o tempo vai passando as distâncias para se ser “disruptivo” e “inovador” estão ficando cada vez mais curtos entre o que já existe e o que é considerado “inovador”.
  • Tempo é sem dúvida a coisa mais importante do mundo. Agora também é a moeda mais valiosa que existe e isso vai ser cada vez mais importante.
  • Que não existe o segmento de Front-end e Back-end. Só existe Full-stack porque as descrições das vagas agora possuem um item na descrição, o famoso “Diferencial” que você deve entender como “Fundamental” ou “Imprescindível”. E se você é um Front-end tem de saber desenvolver API’s, configurar as aplicações na AWS, manjar de Docker, Heroku, Kubernetes, Testes automatizados, Testes unitários, PostGress, mySQL, PHP, e ter noções de paradigmas de arquitetura e tem de saber deixar uma aplicação rodando no ar em produção depois de configurar o ambiente Dev e homologação fazendo deploy e build com semaphore e Jenkins. Não esqueça também de fazer toda documentação pra compôr aquela “Colcha de retalhos” no final do projeto (Confluence). Tudo dentro da mais impressionante performance declaradas nos Sistemas Ágeis.
  • Se você for Back-end, o seu “Diferencial (ah!)” é saber implementar styled Components, TalwindCSS, Less, Sass, CSS, Bootstrap, fazer protótipos no Figma, Mind-flow no Miro e editar algumas imagens no Photoshop ou no Gimp(porque vc usa linux), também saber todo o restante descrito antes no Front-end e mais um pouco.
  • Que a ausência de especialistas qualificados para a enorme demanda do mercado é que para ser bom em todos os items acima e realmente ser Sênior, demanda tempo. Não existem “Crianças Índigo” o suficiente para lhe entregar todo esse conhecimento em apenas dois anos de profissão, isso é uma minoria privilegiada da novíssima geração que tem o Dom incrível para tecnologia. Mais fácil vai ser o mercado procurar na Inteligência artifical o profissional que tanto desejam.
  • Que não adianta a empresa criar vários mimos, se declarar “disruptiva”, espalhar pufs, salão de jogos e toda essa balela se ela continuar com processos tradicionais, continuar morosa nas mudanças, burocrática nas necessidades. Os profissionais se cansam em vão em bora. Aparências são armadilhas, não sustentam pessoas.
  • Profissionais da nova geração (eu não sei aonde essa geração começa) não vão mais parar de mudar de empresas. Não adianta mais. Eles vão receber ofertas e vão sair. O tempo do profissional nas empresas é cada vez (e será) mais curto. A galera jovem vê empregos como projetos, só mudam. Eles não sabem o que é fazer carreira numa empresa. Esperar pra ganhar um salário maior, ocupar uma posição acima. Eles vão simplesmente buscar a felicidade neste sentido em outro lugar. Salário maior também.

O que acredito para 2021 (…em diante)

  • O modelo Home office será o modelo de TI:

Salvo algumas funções específicas, o modelo de “Home Office” será o modelo padrão. Por mais força que se faça para contrariar a razão, tanto pelas empresas ortodoxas quanto por profissionais que não gostam do modelo de “Home Office”, na minha humilde opinião vai ser o padrão para TI, mais ainda Desenvolvedores.

As empresas que insistirem nisso perderá para outras empresas toda sua força Sênior (salvo os que gostam do modelo tradicional) para outras empresas. Inclusive pagando mais neste processo, porque o fato de trabalhar em casa não justifica pagar menos pelo profissional até memso porque sinceramente hoje, no início do processo ele trabalha mais do que no escritório até esse processo de trabalho em casa se tornar mais maduro, isso ocorre naturalmente só que de forma mais agradável. Mas o modelo de trabalho em casa é melhor em vários sentidos e depois de experimentar coisas melhores, voltar para as piores sem uma necessidade realmente relevante não tem mais como. Não tem como lutar contra fatos.

Não preciso entrar em detalhes porque todos ai já devem saber os benefícios. Mas a maior produtividade é um fato e não adianta colocar a culpa nas crianças, porque se em algum caso elas estão atrapalhando o trabalho é por culpa dos responsáveis que não sabem administrar isso direito (ainda) ou por conta do fato de não estarmos tendo Aulas nas Escolas. Porque, quando os Pais trabalhavam nas empresas, onde as crianças ficavam?

Eu fiz um calculo por baixo este ano e com certeza no modelo Home office meu tempo ganho com produtividade aumentou em 40% fácil. É realmente impressionante como perde-se tempo fazendo coisas banais como ir ao trabalho. E não somente o tempo de ida e volta mas o tempo que você leva para “aquecer” e estar realmente produzindo. Estou falando de chegar no escritório, tomar o cafezinho, conversas preliminares até sentar e estar realmente produzindo. O Rito matinal para produtividade se tornou algo particular e pessoal e isso acelera tudo, o ambiente, os equipamentos que você escolhe pra você e a empresa não tem como fazer isso personalizado e faz toda diferença também. Outra questão é as interrupções que são menos frequêntes e com hora marcada geralmente. São vários fatores mas nem vou entrar em detalhe aqui porque hoje não é mais novidade pra ninguém. Apenas vou dizer que o cuidado com a organização do tempo, estudo e evolução são duplamente necessários, neste ponto é fácil se perder mas o fato de ter de cuidar disso faz com que você se torne um profissional melhor.

Outro fator importante é que remotamente percebi um interesse maior entre os profissionais de desenvolvimento em entender o negócio do projeto onde trabalham e não somente sentar pra codar. Alguns vão argumentar que no ambiente de trabalho as pessoas interagem mais. Eu concordo até certo ponto. Nas empresas onde trabalhei os desenvolvedores ficavam o tempo todo com fones de ouvido, tentando e lutando para se concentrar no que estavam fazendo. A maior parte não gostava de ser interrompido de forma pessoal e a maioria pedia para mesmo estando a 4 metros de distância dele mandasse mensagem pela ferramenta oficial da empresa, como o slack ou whats, etc. Na maior parte das vezes também não respondiam na hora, porque não olhavam nos seus talkers com frequência, sabiam que se fosse urgente, alguém iria lá na sua mesa lhe “incomodar”. Agora, remotamente todos respondem mais rapidamente porque ficam de olho nos talkers e além de justificar esse comportamento, agora é feito com mais eficiência e velocidade.

O fato de estarmos isolados também nos está fazendo ser mais interativos e resilientes, não somente com nosso time mas com outros projetos, as comunidades. O aprendizado também está sendo feito com maior qualidade porque com menos interrupções, mesmo demorando mais por não termos ali pessoas do lado pra perguntar, fazemos isso com mais concentração, com mais cuidado e qualidade e com isso aprendemos de forma mais sólida, errando menos e quando metendo a mão na massa fazendo com mais qualidade nosso trabalho.

Então, você pode não concordar comigo mas aposto minhas fichas nisso. As empresas também ganham em vários fatores. Entregas no prazo, menos custos com mobiliários, economia enorme com água e luz entre vários outros fatores. Com isso temos inclusive uma expansão no conceito de trabalho presencial. O Coworking pode se tornar uma prática muito mais saudável que uma empresa. A empresa pode abrir mão de um ambiente corporativo e contratar mensalmente um espaço no Coworking e com isso não somente disponibilizar um espaço para trabalho presencial para seus times mas também fazer com que seu time conviva com times de outras empresas, expandindo o networking, conectando pessoas e idéias, criando parcerias possíveis entre muitos outros fatores.

O mundo está mudando. De toda tristesa que surgiu com o Corona Vírus, muitas coisas boas virão na minha visão. O Ser-humano tem essa característica, ele evolui muito mais na desgraça que na alegria. Somos seres naturalmente acomodados, atribulações são o que move nossa espécia pro caminho certo ou melhor.

O Mercado de trabalho em tecnologia será Global e será Pessoa Jurídica:

As empresas já começaram aos montes este ano e vão continuar. Contratação de pessoas de todos os lugares do mundo para todos os lugares do mundo. Brasileiros trabalhando para empresas Canadenses, Neo-Zeolandeses, Americanos, etc. O “trabalho remoto” virou realidade e no ano que vem vai dominar o mercado de TI. Principalmente Devs primeiro e o restante vai junto depois. Isso vai obrigar as empesas nacionais a oferecer salários melhores, a segurança no emprego ainda é uma dúvida se vai aumentar ou diminuir na minha mente mas com certeza pra mim é uma realidade cada vez maior e no ano que vem vai cravar no chão da realidade de uma forma cruel pra muita empresa ai que não quer ver a realidade.

  • O dinheiro físico vai começar seu caminho de extinção:

Tirando o processo de injeção de grana na economia usada pelos Bancos Centrais que também faz parte dessa mudança e tem enorme interesse, nosso processo de uso de dinheiro impresso já perdeu o sentido. Apenas nossa resiliência mantém ele funcionando mas ele vai acabar. Não posso afirmar que será em 2021, mas muito provavelmente esse processo vai iniciar com mais força esse ano. Para os Governos o custo é quase zerado com relação a criação de dinheiro, o controle é muito maior. Transações eletrônicas não tem como esconder em 95% dos casos. Portanto o recebimento de tributos é muito mais eficiente, incluindo Imposto de Renda, etc. É um movimento natural que acho que não tem jeito.
Se você acha que eu estou falando besteira basta pesquisar no Youtube rapidamente vai ver milhares de vídeos por ai. Vou até deixar um bem relevante e curto de 2017 do influente José Gomes Ferreira.

  • A profissão de Programador vai acabar então comece a se preparar para isso:

Na minha visão o programador somente existe porque as inteligências artificiais não conseguem trabalhar direito com abstrações. Mas com a evolução cada vez maior das tecnologias em Ciência de Dados e IOT, a convergência entre estes pontos além de ser ascendente vai transformar o programador de hoje em algo obsoleto. Os frameworks vão inflar, as complexidades vão aumentar e as Inteligências artificias e suas tecnologias vão se disseminar no mercado de forma vertiginosa e em breve elas farão os programas, elas irão programar baseadas em parâmetros e também nos cruzamentos de dados chegando as suas próprias conclusões até o ponto que elas por conta própria criaram aplicativos, sistemas porque perceberam antes de nós a necessidade dele. As novas necessidades surgiram e boom, uma solução nova será criada para atender isso. Você vai achar isso normal. Como olhar as horas porque quer saber que horas são.

Como desenvolvedor deve-se começar a investir nesse entendimento agora, para que você possa fazer sua transformação de forma fluida, leve e principalmente, a tempo porque ele agora anda muito mais rápido, não é mais ditado por nós como sociedade e sim pela velocidade da tecnologia e ela é muito mais veloz do que podemos imaginar porque ela duplica sua velocidade conforme vai se evoluindo, então aceita que esta profissão é assim, que a Síndrome do impostor é sua amiga e toca ficha.

A Pandemia talvez nos tenha salvado à longo prazo:

A imprensa em geral fica romantizando as relações humanas e como as pessoas querem voltar a normalidade. Mas o que eu ando vendo não é isso. O que eu ando vendo é um mundo dando uma freiada e as pessoas gostando disso.

Menos de muita coisa ruim da superpopulação e da loucura desenfreada do consumismo. E isso pra mim é um fato. O cosumismo diminuiu. Se tornou mais saudável. Muita coisa ruim aconteceu, com os negócios e com a economia mas a longo prazo, na minha opinião, nosso formato de consumo, não se sustenta. Não passaríamos pelo “grande filtro” do “Paradoxo de Fermi” se continuássemos assim. No cenário onde vamos consumir todos os recursos que existirem no nosso ambiente até que sejamos extintos. O que eu acho é que a Pandemia iniciou o freio desse pensamento nas pessoas, pelo menos em grande parte delas, pararam pra refletir sobre isso em suas vidas e isso vai se refletir no nosso futuro. Isso tudo é uma viagem sem drogas, mas se você deixar de lado e pensar nisso com seriedade alguma parte de você vai concordar com essa possibilidade. Eu acho que 2021 vai ser pra mim, um ano onde muitas dessas reflexões vão começar a fazer parte de nosso comportamento, dos negócios e do consumo como um todo. Eu tenho essa esperança.

Disclaimer:
Não estou aqui escrevendo pra agradar a todos. Essa é uma visão ainda não completamente formulada na minha mente. Tudo é muito dinâmico hoje mas o início desse pensamento veio à minha mente e queria escrever essas reflexões antes de virar o ano né. Não fique bravo comigo se tiver outra opinião, isso realmente é muito chato. Gaste seu tempo refletindo porque você fica zangado com opiniões diferentes da sua se for esse o caso. Vai ganhar muito mais com isso.

Padrão
Uncategorized

POPOS 20.10 – Problemas com as fontes do Google?

Estou passando rapidinho porque depois de tentar fazer um projeto rodar na minha máquina onde estava rodando o Ubuntu 20.04 que uso a vários anos e é, pra mim, o melhor que existe. Tive de formatar minha máquina porque fiz zorra demais no sistema e resolvi usar novamente (porque já usei em máquinas de trabalho algumas vezes) o POPOS 20.10.

A primeira impressão é muito boa. Algumas funcionalidades são muito legais, como um gerenciador de janelas, como na interface I3W você consegue gerenciar janelas quando usa esse modo na sua interface. Basta clicar no ícone na barra superior do sistema.

Clicar na janelinha acima que as bordas estão em vermelho ao lado direito do relógio.

Também existem vários outros detalhes e o mais importante é a estabilidade do Sistema de base alterada do Ubuntu e que tem um excelente gerenciamento de memória, processamento, coolers e outros pontos do sistema. Mas não estou aqui para falar sobre o PopOS 20.10, pra isso o Youtube tá cheio de vídeos pra você conhecer.

Eu vou falar sobre coisas que geralmente você não encontra lá. Primeiro que ele usa o FlatPak ao invés do Snap (que eu realmente não entendo porque insistem nele no Ubuntu), mas também respeita sua escolha com pacotes deb. A central de software dele trabalha muito melhor que no Ubuntu. Rápida, cheia de opções, etc.

Mas a primeira dica é quando for fazer o download. Se você não possui uma placa NVidia na sua máquina não tem porque ficar instalando os drivers dela. Então quando for fazer o download, olhe com cuidado e veja que tem duas versões. Uma dedicada para placas Intel e outra pra Placas NVidia.

Se liga nos dois campos de download. Ele geralmente já detecta e indica.

Problemas com Renderização de fonte no Google Chrome com PopOS.

Agora vem o prato principal. Você, vai reparar como eu quando instalar o Google Chrome que a fonte da maior parte dos Sites que não possui uma fonte definida ou é implementada de forma dinâmica fica estranha. Tipo comprimida (eu acabei não dando print nela pra mostrar errada).

Isso acontece porque o PopOS 20.10 não colocou (ainda) na Distro a fonte “Arial”, usada pelo Navegador para renderizar fontes desconhecidas nas páginas. Então para resolver, você só precisa instalar a fonte “Arial” no seu PopOS.

Pra você não ter o trabalho de ficar procurando ele pra baixar eu vou deixar aqui meu repositório de fontes do meu github. Eu tenho esse repositório com fontes que uso no sistema e também para editores de código e scripts. Enfim. Segue ai e vc pode clonar ou baixar e instalar na sua máquina. As fontes Arial estão lá pra você resolver também seu problema.

https://github.com/thiagolucio/code-editor-fonts

Se vc não sabe como fazer isso, existem duas formas. A primeira é clicando em cima da fonte duas vezes e o gerenciador de fontes abre e vc clica em instalar.

A outra forma é criar uma pasta chamada “fonts”, dentro da pasta “.local/share/” da sua “home” e jogando as fontes lá dentro. Mas para que o sistema possa enxergar as fontes você deverá rodar no terminal o comando abaixo:

sudo fc-cache -f -v

Assim o Sistema vai rodar o recarregamento de leitura das fontes de texto do sistema. Depois disso feche e abra novamente seu Navegador Chrome e “Voilá”. Seu Chrome estará com as fontes bacanas novamente.

PS: No caso deste problema, não vai adiantar personalizar as fontes do chrome em “Aparência” porque neste caso é só para as fontes de texto das janelas e menus. Este é um caso específico e só assim mesmo pra resolver. Porque até mesmo se você editar o arquivo CSS do Chrome na sua pasta home dentro de config, quando ele atualizar vai sobscrever o arquivo. Além do mais várias outras coisas podem usar e aí melhor já ter.

Você também pode esperar que os Desenvolvedores do PopOS arrumem esse problema nas próximas atualizações porque já abri uma Issue para resolver isso com eles.

No mais é isso rapaize…Grande abraço e se não rolar mais um post em breve, Feliz Natal e Ano novo!

Padrão
Inherit and initial
Uncategorized

Você sabe quando usar “initial” e “inherit” no css?

Coisa simples…
Tenho visto alguns códigos CSS aqui, coisa simples nos reviews e muito profisional ainda confunde o “initial” e o “inherit” do CSS.

O “Inherit” checa a existência de propriedades do elemento Pai (mais próximo) que podem afetar à ela antes de atribuír seu valor inicial (:root). Se esse valor pai tiver essa propriedade ele vai aplicar ela a sí mesma.

O “initial” não tem este comportamento. Ele vai lá na raíz (:root)das propriedades do navegador e aplica o valor desta propriedade a sí mesma.

Não caia na armadilha de achar que pode usar o “initial” como uma forma de resetar tal elemento. Ele não serve para isso pois cada navegador possui seu padrão de elementos gerando a possibilidade de um resultado inesperado.

Eu sempre aconselho o uso de resets CSS numa aplicação. Desta forma você solucionaria este problema sabendo extamente como vai usar o “initial” e caso seja necessário durante o processo de desenvolvimento vc vai lá e adiciona tal valor à propriedade. CSS é uma bola de neve nervosa, nunca ignore ele na sua aplicação. 😉

Padrão
Uncategorized

Conheça o Next.js 10

NeXTJS10 Slogan

Depois daquele clássico tempo sem escrever nada, porque profissional de TI de verdade nunca tem tempo porque faz o que gosta então não faz mais nada. Eu resolvi compartilhar com vocês o porque vocês deveriam conhecer o Next.JS 10 e começar a trabalhar com ele.

Eu mesmo não uso tanto o NextJS mas isso vai mudar com certeza à partir de agora. Os caras realmente se superaram e poliram esta ferramenta a um nível muito alto. Tudo muito bem pensado, muito bem planejado.

Pra começar a integração criada pela Vercel do Github com a plataforma deles consegue te entregar uma esteira de desenvolvimento de sistema completa, completa mesmo, Com Deploy em produção, stage e dev, rodando sua aplicação, tudo de graça. Isso mesmo. Os caras te dão um laboratório automatizado de graça pra você testar sua aplicação !

Vou mostrar aqui um exemplo. É coisa simples. Cria lá no seu Github (se você não sabe do que eu estou falando é porque está no Blog errado) então clone ele para sua máquina (se se empolgar depois muda ele o deleta e faz outro). Clonou? Então blz!

Uma vez clonado vamos abrir no seu Editor de Código predileto e vamos criar um projeto nextjs nele. Roda aí…

npx create-next-app
# ou
yarn create next-app

Daí é aquelas perguntas padrão de quando criamos um projeto né. Qual o nome (lembre-se que não pode ser camel case os nomes agora) e ele vai instalar tudo.

Você vai reparar que ele possui o comando “yarn dev” e é ele que vai rodar o projeto no servidor de desenvolvimento dele. Esse atalho, está sendo executado lá o “package.json” dele. e nada mais é que o comando “next dev”.

Agora explicando rapidamente aqui a estrutura dele. O Next.JS salva todas as suas páginas dentro da pasta “pages“. Você sempre deve salvar suas páginas lá dentro e o Next entende que cada uma dessas páginas é uma rota de seu sistema então você não precisa se preocupar com isso.

https://nextjs.org/docs/basic-features/pages

https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs

Sai declarando que a navegação é com ele, muito massa isso né. Mas deve se atentar que isso só ocorrerá automaticamente se for feito na pasta “pages”.

Por exemplo se no seu projeto você criar uma pasta chamada “menu” e dentro dela criar um arquivo chamado “menu.js”. Na sua URL localhost default do projeto esta página vai ficar… http://localhost:3000/menu/menu

O NextJS o navegador não carrega a página inteira e a navegação do lado do cliente funciona em seu estado DOM. Então por exemplo. Se você colocar um fundo amarelo em uma página (componente no caso) no inspetor de elementos do navegador e navegar nela indo para outra página e voltando vai perceber que quando voltar a cor que injetou no inspetor persiste. Mas atenção, é necessário usar os elementos do NextJS. Por exemplo se você usasse a tag “a” ao invés da tag do NextJS para navegar, a “Link” perderia a cor porque ele carregaria a página inteira novamente. Não se esqueça que “a” é um tag do HTML que dispara um comportamento nativo do HTML junto ao browser.

fonte: https://nextjs.org/learn/basics/navigate-between-pages/client-side

Outra coisa muito legal quando se trabalha com NextJS (e cara, o velho modelo estático vai voltar com tudo na minha opinião) é que carregar apenas o código da página solicitada também significa que as páginas ficam isoladas. Se uma determinada página gerar um erro, o restante do aplicativo ainda funcionará.

No caso do "className" do React. Se você adicionar ou quiser ou precisar usar ele precisará fazer isso externamente usando a clássica tag "<a>". Você não deve usar className com o NextJS. 
Exemplo:

import Link from 'next/link' 

export default function LinkClassnameExample() {
  // To add attributes like className, target, rel, etc.
  // add them to the <a> tag, not to the <Link> tag.
  return (
    <Link href="/">
      <a className="foo" target="_blank" rel="noopener noreferrer">
        Hello World
      </a>
    </Link>
  )
}

Além disso, um Sistema rodando em produção com Next.js,
sempre que o componente possuir a tag “Link” carregar no navegador
o Next.js pré-busca automaticamente o código para a página vinculada
por trás dos panos. Quando você clicar no link, o código da página de destino já estará carregado em segundo plano e a transição da página será quase instantânea!

Outra coisa é quanto o arquivo “_app.js”. Nele você deve colocar sua importação de CSS, seja Bootstrap, seja um tema personalizado de alguma library escolhida.

https://nextjs.org/docs/basic-features/built-in-css-support

https://github.com/vercel/next.js/tree/canary/examples/basic-css

Nele também existirá a configuração padrão da Aplicação retornando o componente principal (que pode ser manipulado e personalizado) e as propriedades desta componente que importa todo conteúdo incluído na index ou qualquer outro componente da aplicação. Ele funciona como um componentes de todos os componentes incluídos na pasta “pages”. Isso também é muito bom porque você poderá “esconder” seus componentes encapsulados pelo Javascript.

O Estilo global é importado no _app.js

A pasta “.next”, assim como a pasta “.node_modules” não deve ser enviada para seu repositório e apenas por curiosidade ela possui a pasta de rotas do projeto “cuspida” pelo NextJS na compilação de sua aplicação digamos “dev” dentro do projeto. Em “public” que segue o mesmo conceito do ReactJS possui os ítens como imagens públicas como favicon, e logos.

O resto é como manda a canja de sempre. Pasta Styles, etc.

Você também pode usar o StyledComponents se desejar:
https://github.com/vercel/next.js/tree/canary/examples/with-styled-components

Ou também usar o TailwindCSS:
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

Uma informação importante é que quando você cria CSS modulares você precisa finalizar ele com “.module.css”. Por exemplo: “footer.module.css”

https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

Os Módulos CSS  geram automaticamente nomes de classe exclusivos . Contanto que você use os Módulos CSS, você não precisa se preocupar com conflitos de nomes de classe.

Além disso, o recurso de divisão de código do Next.js também funciona em módulos CSS . Isso garante que a quantidade mínima de CSS seja carregada para cada página. Isso resulta em tamanhos de pacote menores.

Os módulos CSS são extraídos dos pacotes JavaScript no momento da construção e geram .cssarquivos que são carregados automaticamente pelo Next.js.

“_APP.JS”

Uma curiosidade sobre o “_app.js” é que você pode ativar a renderização dinâmica (eliminando a estática) usando o método “getInitialProps”. Então apenas a Otimização estática automática será desativada, porque se você estiver usando “getInitailProp”, significa que a página não é estática (requer dados adicionais do servidor para renderizar), então Next não pode gerar um arquivo html estático para isso. Então cuidado em suas decisões para que você não tenha uma aplicação React dentro do NextJS só ali firulando e perdendo o propósito principal do NextJS que é justamente gerar páginas estáticas no lado cliente, carregando absurdamente mais rápido que aplicações de base dinâmica. Neste caso aconselho usar mesmo um VueJS ou o ReactJS mesmo. Veja o exemplo abaixo, básico de implementação:

  MyApp.getInitialProps = async (appContext) => {
    	calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext);
  
    return { ...appProps }
  }

https://nextjs.org/docs/advanced-features/custom-app

NextJS 10 agora manipula imagens, se aproximando do Gatsby mas na minha opinião está melhor. Você joga uma imagem de alta resolução e principalmente se você estiver usando o ambiente da Vecel com sua aplicação ele trata a imagem deixando ela otimizada para qualquer dispositivo mostrando uma imagem para cada dispositivo reconhecido.

Um exemplo básico de implementação de imagem no NextJS 10 é o abaixo:

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Um exemplo pode ser visto na documentação oficial:

https://nextjs.org/docs/basic-features/image-optimization

Não é meu objetivo aqui ficar explanando muito sobre o NextJS 10 mas mostrar uma implementação básica e colocar em produção real disponível com esteira de produção profissional mas vou deixar uns links mastigados da documentação mostrando várias vantagens e novas implementações do NextJS. Neste link tem tudo que vc precisa pra aprender rapidinho…

https://nextjs.org/docs/getting-started

https://nextjs.org/docs/api-reference/cli

Você também poderá pegar um tutorial oficial pra aprender na prática. Eu mesmo fiz e é top demais.

https://nextjs.org/learn/basics/create-nextjs-app

CONTINUANDO NOSSA IMPLEMENTAÇÃO…

Mas vamos voltar a nossa festa. Pega essa aplicação que criou em NextJS e faz o push (espero que hoje não seja sexta, 18 da tarde…). Não esqueça de dar push no branch principal “main”.

Com esta aplicação criada e push feito, vamos seguir para o próximo passo que é criar uma conta no site da Vercel.

https://vercel.com/signup

Eu aconselho você fazer o login usando sua conta do github porque facilita demais. Não se preocupe que não vai ter de pagar nada que é “Fair Use”.

Depois de se logar ele vai te pedir pra escolher o formato de criação do projeto, escolha o github. O Quadro do lado esquerdo:

No quadro seguinte você deve copiar a URL do seu repositório lá na barra de URL do browser (ou no clone) e colar no campo:

Depois confirma sua conta (pessoal ou outra, dependendo de quantas contas tem) e esta escolha vai se repetir no quadro seguinte, é pessoal então nem vou mostra nada.

No quadro seguinte você deve escolher a permissão e escolher no outro quadro se você vai liberar acesso para todos os repositórios ou só pro desse nosso post. Eu aconselho escolher a segunda opção até mesmo por ser mais seguro. “Only select repositories”. Ali você escolher o repositório que criamos.

Agora é só mandar instalar …Ele vai mostrar o quadro onde ele informará que reconheceu uma aplicação NextJS. Daí manda vê clicando no Deploy.

Agora vem o mais bacana. Não vai zapear agora porque ele vai te mostrar o deploy de sua aplicação no repositório em tempo real. E vai ser muito rápido, isso é, sua aplicação já está fazendo deploy pra produção.

Uma vez finalizada (viu. Nem deu tempo de zapear…). Vc vai receber a página de congratulação que tudo deu certo.

Quando nesta página você vai reparar que ele te mostra dois botões. Um pra visitar a página online (Site mesmo) da sua aplicação disponível e otimizada pra qualquer lugar do mundo e também o Dashboard da sua aplicação. Cara, o que dizer tá tudo pronto!

Uma coisa muito massa é que se vc criar outro branch como por exemplo, branch “dev”. Ele também fará o mesmo processo para ele. Você não passará por problemas de indispobilidade pois se você subir branchs novos ele não vai tirar nada do ar pra subsituir. Só quando terminar a o novo estiver 100% é que ele vai trocar, de forma invisível. Os outros branchs terão outros endereços assim você poderá tratar sua aplicação de forma individualizada por feature.

Você ainda pode pensar que essa solução mesmo sendo de graça não vai te entregar performance mas vai. Eles fizeram testes à rodo na solução deles com milhares de cargas por muito tempo e ele aguentou sem botar a língua pra fora. Pode acreditar que vai ficar top.

Eu vou deixar aqui um vídeo do Youtube do amigo Felipe Deschamps que faz um processo semelhante que também é o mesmo processo da documentação oficial do NextJS. Caso você seja meio preguiçoso de ler mas amigo, deixa essa preguiça de lado e vai lá na documentação oficial. Nada é melhor que a documentação oficial das soluções. Principalmente neste caso que foi feita de um jeito tão divertido pelo time do NextJS.

Boa diversão…Provavelmente Feliz ano Novo porque não vou ter tempo de fazer outro post nesse Ano ainda. Fui!

Padrão
Uncategorized

Map, Filter e Reduce com JavaScript: Explicando de forma Simples.

Eu sempre vejo o pessoal se perguntando quando usar map, reduce ou filter então mesmo tendo muita coisa por aí falando sobre resolví criar este post explicando da forma mais simples possível e quem sabe ajudar você(s) nisso e ainda fixar melhor o conceito.

É importante reforçar que existem:
“Arrays, representados por []”
“Objetos ou listas, representados por {}”

Basicamente…

MAP : Corre/ pega/ mapeia cada um dos elementos do array e te retorna aplicando uma determinada regra um novo Array sempre com o mesmo tamanho.

No exemplo abaixo eu estou pegando cada um dos elementos do Array Inicial e multiplicando cada elemento dele por 2.

Codificando ficaria:

const array = [2,4,5,10,8,1];

function dobro(num) {
    return num * 2
}

const novoArray = array.map(dobro);

console.log(novoArray);

// o retorno deverá ser [ 4, 8, 10, 20, 16, 2 ]

FILTER: Basicamente corre os elementos de um array implementando as regras para lhe gerar outro Array com os resultados desta filtragem. Este array não necessáriamente precisa ser do mesmo tamanho.

No exemplo abaixo o filtro é aplicado em um Array, selecionando aqueles elementos que são maiores ou iguais a 5. Com isso temos os retornos “true” somente para 3 posições do Arrray, a 2, 3 e 4.

Literalmente um filtro.

Codificando, ficaria:

const array = [2,4,5,10,8,1];

function regraDoFiltro(num) {
    return num >= 5
}

const novoArray = array.filter(regraDoFiltro);

console.log(novoArray);

// resultado esperado 5,10,8

REDUCE: Vai correr os elementos de um Array os somando. Para isso ele usa dois parâmetros. Um acumulador e o próximo elemento do Array.

(acumulador, elemento) 

Esse acumulador poderá ser um array ou objeto ou string ou número ou qualquer coisa que você queira colocar pra esse acumulador. O Elemento será cada um dos elementos do Array que está sendo aplicado o reduce.

Se não existir um valor inicial ele utilizará os dois primeiros elementos do Array para inicializar as operações de reduce.

No exemplo abaixo bastante simples, faço um reduce em cima de um Array onde inicializo o valor do acumulador com “0”. Ele vai efetuando a soma de todos os elementos do array junto ao acumulador.

Neste caso acredito que o código puro mesmo deixe mais fácil entender…


const array = [2,4,5,10,8,1];

// a = acumulador e b = elemento
a = 0;

function somar(a,b) {
    return a + b
}

const novoArray = array.reduce(somar)

console.log(novoArray);
// resultado esperado 30

Espero que tenha conseguido deixar esses conceitos mais claros com estes exemplos super simples porque menos é mais 🙂

Boa Quarentena pra todos, fiquem bem!

Padrão
Uncategorized

Desenvolvedor Utopia e o Mercado Insaciável. Assim se cria a Síndrome do Impostor.

Cara. Achei que tinha abandonado esse meu Blog. Um tempão e nada de postar. Vida loka essa nossa de profissional de TI.

Nessa vibe aí resolví voltar a postar escrevendo sobre algo que tenho observado muito e realmente me pergunto porque isso não muda. Eu comecei na minha profissão em meados da década de 90 e pra quem for falar que eu sou vovozão da TI já pode ir se f*%%@$@!

Naquela época o mercado cometeu o erro que paga até hoje de estimular que o profissional que sabia de tudo um pouco era o mais valorizado porque como estávamos no início de tudo o cara teria de fazer tudo. Consertar computadores, passar cabos de rede, montar servidores, controlar a rede de usuários e mais. Isso era valorizado nas empresas e esse cara era o full-stack da época. 

Mas hoje, depois de tantos anos o mercado continua pagando por este comportamento pois fica afirmando que não existe mão de obra qualificada. São milhares de anúncios de vagas. Mas também são milhares de profissionais por ai. Ao meus olhos, toda geração, praticamente 80% dos jovens de hoje que estão na versão Y e Z querem ser Desenvolvedores. Virou moda. É como uma extensão de ser “gamer”. Vc tem de ser gamer e se formar em TI, ser programador, hacker, em suma, um fucker!

Mas será que o mercado sabe o que está fazendo? Na minha opinião com certeza não. Hoje, o profissional quer se especializar (ele já queria isso antes). E o mercado também quer especialistas, em tudo!

São anúncios de vagas para Front-end que querem que você saiba Java, Banco de dados, Python, Laravel. São vagas de Back-end que querem que você saiba React, tenha noções de CSS e que tenha o dom de relações interpessoais, seja carismático e que tenha boa habilidade pra trabalhar em equipe. Cara, na boa. Como um desenvolvedor back-end consegue trabalhar hoje numa empresa (principalmente as moderninhas, aquelas com puf e playstation que ninguém usa) sem se isolar com fone de ouvido pra produzir? O mercado continua a estimular frenéticamente que o profissional de TI, no caso deste post Desenvolvedores saibam tudo. As vagas Full-stack estão cada vez mais em alta. Começaram ali, no cantinho, uma ou outra mas agora elas estão em todas as descrições de vagas mesmo que o título seja outro como Front ou back-end. Se não estiver nas descrições explícitas elas se camuflam na sessão mais abaixo, no final. Os famosos “Diferenciais” ou “Você terá um diferencial se souber…” e vem toda a descrição daquilo que faltava pra te transformar num full-stack. 

É claro que existem as mínimas excessões de anúncios, estou falando da maioria mas a maioria é o estímulo de mercado. E ouzo dizer que estes anúncios, são aqueles que perceberam que o profissional anunciado não existe ou que se exitir( pois tem aquele pessoal do futuro que nasce hoje né, aquele pessoal evoluído, que não aprende, apenas lê e entende tudo e aprende em uma semana aquilo que você demora 1 ano pra aprender ou é super-dotado no bom sentido), vai querer receber 20 mil por mês e muda a descrição da vaga para encontrar algo mais realista para sua necessidade porque o prazo está curto, a contratação tem de ser rápida. 

Eu vejo isso demais hoje em dia. A coisa piorou com a onda de terceirização para contratação destes profissionais pelas empresas. Estou falando dos Head hunters que já é moda lá fora e agora no Brasil está se tornando coisa comum. As empresas contratam uma empresa especializada em contratação e aproveitam que estão pagando e abusam das exigências junto a essas empresas, quanto ao profissional a ser contratado de forma que faz com que essas empresas tenham de se virar nos 30 pra conseguir algum profissional que chegue ao MVP (mínimo produto viável) das exigências que as empresas querem. Uma tremenda sacanagem com empresas especializadas que são muito importantes para o mercado, obrigando a fazerem seu trabalho sob pressão da sobrevivência de um cliente focado no impossível.

Não diferente tem os anúncios disfarçados. São aqueles anúncios cheio de frases que parecem ser criadas por Coachers Quanticos. Falando das maravilhas de uma empresa e uma descrição “geek” da vaga mas quando se vai na entrevista a pessoa que faz contigo chega de “terninho psicológico” te tratando de forma mais tradicional possível com aquelas pergutinhas clássicas e toscas de modelos de entrevista criados por pessoas que não fazem a menor idéia do que é ser um Desenvolvedor. 

Quando se entra nessas empresas se descobre na maior parte das vezes que são uma zona, são “A Terra prometida que nunca chega”. Os processos, os prazos, as estimativas, as Sprints e os Kanbams??? porra meu, monitor tivesse 2 metros de área visual não dava pra ver todos os cards. Papéis mal definidos quando o são, pessoas passando por cima de papel dos outros rompendo limites de todos os lados. É tudo uma grande zona na maior parte das empresas mesmo na realidade e você entra num inferno na maior parte das vezes ganhando pouco, vivendo pouco, o puf vazio, a mesa de sinuca impenando por falta de uso, o Playstation já tá cansado de rodar os mesmos jogos porque no fundo poucos usam. Aquele tobogâ. PQP, joga aquilo fora, só ocupando espaço pra foto de instagram. 

O que eu acho disso tudo é que temos um mercado enorme de profissionais com potencial para serem profissionais de desenvolvimento de qualidade, mas que leva tempo, tempo para absorver conhecimento, tempo para conhecer o negócio, tempo para se tornar produtivo. As empresas precisam deixar de lado esse anseio de conseguir milagres pagando pouco e começar a ir no foco de solução dos problemas, cobrar do governo impostos menores ou recorrer a métodos de contratação onde se pague melhor e se perca menos dinheiro com impostos. Elas tem condição de fazer isso. 

O mercado deve parar de obrigar as pessoas, ou melhor, os profissionais tratados neste post como máquinas de trabalhar, de alta produtividade de “Sonho do Kanbam” e começar a focar suas necessidades reais para seus projetos, saber planejar equipes bem estruturadas e fazer delas produtivas da forma correta. 

É necessário qualificar a mão de obra que já existe no mercado mas saber que isso leva tempo e que tudo que podem fazer é ter paciência para que esse quadro mude porque fantasiar que ele vai mudar via anúncios e “Sonhos de Sol e Sarfi”. É necessário pegar profissionais com menos exigências e pagar salários melhores porque não dá pra se tornar um profissional melhor e estudar e aprender mais e mais tendo de se preocupar se vai conseguir pagar suas contas, se vestir, trocar o equipamento de trabalho para poder estudar, pagar cursos nem que sejam online tipo allura, etc. 

Não é necessário criar este tipo de estimulo para que as pessoas corram atrás de qualificação. A pessoa é programador porque gosta, porque é isso que ela quer. Ela vai atrás de aprender coisas novas por conta própria. Essa é a principal característica dos profissionais dessa área. 

Existe muito profissional com potencial por aí. Contratar e anúnciar vagas só de Sênior, Pleno,  é eliminar uma galera descomunal. 

Eu não sou o dono da verdade e este post não procura ser um post da verdade absoluta ou o post impessoal e perfeitinho, cheio de bons modos para tratar esse assunto. Alguém precisa falar sobre essas coisas analisando de um lado, sem essa frescurada de palavras que o mundo está se tornando para falar as coisas. Isso aqui é muito mais um desabafo do que um post qualificado. Inspirado em um amigo indicado que não foi contratado por pura palhaçada pois sei que o cara é bom. E com certeza fica aí os votos de meter o sarrafo se não concordar. Não ligo pra críticas, muitas me fazem rir e as outras, elas me ajudam a crescer. 

Grande abraço raça! 

Padrão
Uncategorized

Instalando OpenJDK 8 no Ubuntu 19.10 e Superior ( Install OpenJDK 8 on Ubuntu 19.10 )

 

Para você que está com a nova versão do Ubuntu 19.10 e começou a instalar programas e viu que o antigo método de instalação do Java 8 não está funcionando então essa dica aqui é pra você. Agora as coisas são um pouco diferentes e vc terá de instalar o pacote JDK8 de outra forma. Eu não sei você mas a maior partes das aplicações que trabalho dão problemas com qualquer versão do JDK maior que 8. Vamos lá, rapidinho…

sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt-get update
sudo apt-get install openjdk-8-jdk

Pronto. Agora o JDK 8 já está instalado em sua máquina.

Para conferir rode no terminal…

java -version

Deverá retornar …

openjdk version "1.8.0_232-ea"
OpenJDK Runtime Environment (build 1.8.0_232-ea-8u232-b04-0ubuntu6-b04)
OpenJDK 64-Bit Server VM (build 25.232-b04, mixed mode

Espero ter ajudado!

 

 

 

Padrão
Uncategorized

O que é uma função pura?

Uma função pura é aquela que não provoca efeitos colaterais, ou seja, ela não muda qualquer estado na aplicação. Mas não é só isto, ela precisa sempre gerar o mesmo resultado com os mesmos argumentos, ou seja, ela precisa ser completamente determinística.

A filosofia da programação funcional é que estados mutáveis causam problemas. E é verdade, causa mesmo. Claro que ter sempre estados que não mudam geram outros problemas. Note que é virtualmente impossível criar uma aplicação que faça algo útil sem alguma mudança de estado.

Se o resultado de um função é sempre o esperado é mais fácil lidar com aquela função.

Então seu uso tem a ver com facilitar o desenvolvimento, mesmo que isto cause, eventualmente, uma perda de performance. Por isso as linguagens mais pragmáticas só usam imutabilidade quando realmente é útil e não traz outros problemas.

Uma das dificuldades de uma função impura é que ela só pode ser usada em outras funções impuras já que uma impura contamina a pura.

Quando a função só gera um resultado determinístico e não muda estado fica mais entender o seu funcionamento, o fluxo de operações é mais previsível, é mais fácil depurar e testar o código, é preciso depurar menos código já que tende a ter menos erros, é muito mais fácil lidar com concorrência e paralelização, e é mais fácil fazer coisas complexas dada a simplicidade dela, o que inclusive permite otimizações agressivas.

Ao contrário do que muita gente pensa não é o algoritmo que é difícil de lidar é a estrutura de dados. É ela que sempre dá problema. Não é o comportamento e sim o estado. A não ser que o algoritmo seja muito complexo e mal feito.

Por isso muita gente acha que OOP é a oitava maravilha do mundo. Ela tende facilitar a melhor estrutura de dados (ainda que a maioria das pessoas entendem errado e mais dificultam que facilitam, e que não é bem OOP e sim a modularização que faz isto ocorrer), só que OOP ainda prega a mutação de estado, prega que o comportamento altere o estado.

Os funcionalistas consideram OOP uma porcaria porque o estado muda muito. Os pragmáticos sabem quando usar cada coisa. E para isto tem que entender o que está fazendo, o que não é fácil porque não existe receita de bolo e existe muita informação que precisam ser combinadas para tomar a decisão certa.

Então devemos preferir o estado que não muda sempre que isto não cause outros problemas, de performance, por exemplo. Devemos preferir comportamentos que não mudam estado e que não se valem de estados que podem mudar, estes comportamentos são puros.

Uma função que acesse algo externo à aplicação não pode ser pura. Qualquer entrada de dados (ler teclado, acessar armazenamento, receber pacote de rede, acessar outra aplicação, pedir algo para o sistema operacional como o relógio, etc.) ou qualquer cálculo que depende do estado de alguma coisa que a aplicação não controle e não possa garantir que o estado é sempre o mesmo (geração randômica verdadeira é o maior exemplo de algo que deve dar um resultado que depende de um estado não determinístico, tem função randômica que é determinística, embora precisa ser usada de forma específica para ser pura). Para ajudar lidar com isto a linguagens funcionais possuem monads.

Funções matemáticas de forma geral são puras. O que trabalha com tipos por valor passadas por valor costuma ser puro, o que trabalha em algo por referência que seja um objeto imutável costuma ser puro.

Academicamente costuma-se atribuir estas características para uma função pura:

Fontes:

https://pt.stackoverflow.com/questions/255557/o-que-%C3%A9-uma-fun%C3%A7%C3%A3o-pura

Padrão
Uncategorized

Alterando atalhos de teclado do ATOM Editor (pedido por Andreas)

Já tem um bom tempo que publiquei um post sobre o Editor Atom, dicas legais pra quem tá começando (se ainda não viu veja aqui… https://thiagolucioweb.wordpress.com/2015/06/21/dicas-fundamentais-para-atom-editor-snippets-extensoes-temas-personalizacao/).

De lá pra cá o Editor mudou muito, e melhorou muito mesmo. Hoje temos no Atom um Editor (quase IDE) mais robusto, mais rápido e muito mais personalizável. As atualizações são muitos mais constantes que antes com muito mais pessoas na comunidade de contribuição ativas e com isso o ATOM tem ganhado cada vez mais espaço no mercado de Editores de Código. Fico muito feliz como membro ativo do ATOM quando vejo algum amigo da área usando e ele brilhando na tela da máquina de alguém. A concorrência continua acirrada, VSCode, Sublime Text, Brackets mas mesmo assim ainda acho o ATOM um grande Editor, mais livre pra usar e personalizar.  Isso pra mim é fundamental, poder personalizar o máximo possível a ferramenta de trabalho do dia a dia. O pessoal do núcleo de desenvolvimento do ATOM no Github tá realmente de parabéns, fazendo um excelente trabalho.

Bom, mas deixando os elogios de lado. Estou postando hoje um pedido de um leitor, o Andreas que sugeriu postar sobre como mudar as teclas de atalho no Editor. Coisa que segundo ele mesmo falou ser muito fácil no Sublime Text. Mas no ATOM não é diferente, ouso dizer que é ainda mais fácil nele. Mas vamos direto ver como isso pode ser feito.

O ATOM, possui em suas configurações (settings) um arquivo onde mostra todos os atalhos do Editor, não somente os nativos mas também os atalhos referentes aos plugins (packages) que você instalou nele.

Após entrar em “Settings”(menu superior(linux) -> Edit -> Preferences/ (windows) File -> Preferences), escolha a opção “keybindings”, na sidebar esquerda do menu Settings. Veja a imagem abaixo:

keybindings

Nesta “página” existe a lista com todas as teclas de atalho do ATOM para todas as funções, nativas ou plugins dele onde, na primeira coluna você possui o atalho, na segunda coluna você possui o comando  que é executado com esta tecla de atalho. Na terceira coluna você possui a descrição da funcionalidade ou package a que se refere o comando e o atalho. A quarta coluna é referente ao seletor do atalho, é através dele que o comando é acionado e identificado no editor. A lista é grande então pra ajudar existe um campo de pesquisa para facilitar a busca pela ação desejada.

Vou seguir com o processo de mudança, para que possam saber como é o procedimento passo a passo. Vou escolher um package que tenho instalado no ATOM, se chama “open in browser”. Basicamente ele permite que ou clicando com o botão direito do mouse sobre o arquivo desejado ou usando uma tecla de atalho, você abra o arquivo desejado em seu browser default do sistema. No Sublime text por exemplo uso essa mesma ferramenta através da tecla F12. Vou efetuar essa alteração…

No campo de pesquisa digitei o nome… (nem precisou ser completo):

pesq-open-browser

Ele já me retornou a listagem dele. Repare que ele já consta duas ocorrências. Na verdade isso ocorre porque a segunda que é a destacada porque é das duas a que está ativa já consta a alteração que vou mostrar para vocês. Se eu ainda não a tivesse feito, apareceria somente a original que é a da primeira linha.  Após feita as alterações que vou mostrar aqui, esta segunda linha mostrada na imagem acima vai passar a constar também (ou caso prefira outra tecla de atalho vai aparecer ela na primeira coluna).

Se você observar mais detalhadamente a imagem acima vai ver a mensagem logo abaixo do título “Keybindings” a mensagem “Você pode subscrever estas teclas de atalho copiando e colando as mesmas no seu arquivo de mapa de teclado” (só que em inglês). Bastaria clicar no trecho em azul para ser levado para o arquivo onde vamos aplicar as alterações. Mas você pode acessar ele diretamente indo no menu superior:

Windows – > File -> Keymap

Linux -> Edit -> Keymap

MacOS – > (sei não irmão..rsrsrs)

Uma vez o Arquivo aberto, você vai poder ver que já existe um pequeno tutorial mostrando como alterar ou adicionar novas configurações de atalho. Leia com atenção que já dá pra entender facilmente mas … no nosso exemplo, vamos mudar então o “open in browser”

Ao final dos comentários você adiciona a seguinte linha:

'atom-text-editor':
'f12':'open-in-browser:open'

Explicando o comando acima:

'atom-text-editor': //Ele é o seletor onde o atalho deverá ser aplicado ( a quarta coluna, lembra?).
'f12':'open-in-browser:open' //Estamos atribuindo a tecla f12 : ao comando open-in-browser

Salve as alterações e nem precisa reiniciar o editor, já está funcionando as alterações!

Este mesmo procedimento, seguindo estes mesmos passos também serve para outros atalhos, tanto do core do editor quanto de outros plugins que você tenha instalado.

Você pode obter mais informações sobre keymaps nos endereços abaixo, ai pode ir mais à fundo nisso:

https://atom.io/docs/latest/using-atom-basic-customization#customizing-key-bindings
https://atom.io/docs/latest/behind-atom-keymaps-in-depth

É isso ai!  Espero poder ter ajudado neste dúvida, principalmente ao Andreas que tava interessado.

Grande abraço!

Padrão