DEV Community: Lucis

Por que usar Deno Fresh como framework web?

Lucis — Mon, 10 Oct 2022 17:55:33 +0000

O Fresh foi lançado oficialmente há pouco tempo e se apresenta como uma excelente alternativa para criação de aplicações web de alta performance, ideal para casos como ecommerce e landing pages. Nesse post pretendo comentar sobre suas características e como ele se posiciona quando comparado a outras tecnologias.

Sendo um framework web completo, o Fresh oferece Server-Side Rendering por padrão na Edge e foca em simplicidade na experiência de desenvolvimento. Similar ao Remix, as APIs da Web são utilizadas sempre que possível (ex: uso de HTML Forms ao invés de <input value={state} onChange={(e) => setState(e.target.value) ) e o roteamento é baseado em arquivos – também similar ao Next.js. É interessante que o Fresh traz de volta um modelo de desenvolvimento comum nos anos 2000 com PHP e Ruby On Rails, agora com a evolução de ter apenas uma linguagem para browser e servidor e também com a facilidade do JSX para a criação de componentes.

🎥 O vídeo a fresh new web framework is out do canal Fireship explica em ~3min alguns detalhes da arquitetura utilizada.

O diferencial do Fresh ocorre pelas tecnologias escolhidas, e entender cada uma delas é importante para concluir como o Fresh se propõe ser o framework da próxima geração! As tecnologias que irei comentar aqui são:

Deno
Preact
Twind
Deno Deploy

Deno

O Deno é um runtime (ambiente de execução) para Typescript e Javascript, similar ao Node.js. Não é coincidência que o Deno tem as mesmas letras de Node: ambos foram criados pela mesma pessoa, Ryan Dahl. Uma das talks mais emblemáticas de Ryan é 10 coisas que eu me arrependo sobre Node.js, onde ele descreve problemas já conhecidos pela comunidade e detalha sua proposta para o Deno.

Os pontos que mais se destacam do Deno são simplicidade e performance, focando em uma experiência de desenvolvimento melhorada em relação ao Node.js. Algumas características do Deno são:

Uso das APIs da Web sempre que possível.
Os imports de bibliotecas são feitos por URL, sem a necessidade de um gerenciador de pacotes como o NPM.
Suporte a Typescript por padrão, sem a necessidade de configuração.
Utiliza Rust, ao invés de C++ do Node, para o código interno do runtime.
Otimizado para performance. O objetivo do Deno é sempre ser o runtime mais rápido para Typescript/Javascript.

Esses pontos fazem com que boa parte dos projetos que usam Deno não precisem de build, o que se torna uma vantagem para o processo de desenvolvimento.

🎥 O vídeo deno in 100 seconds explica bem brevemente o Deno. Ressalto que alguns pontos já foram melhorados, como o suporte a módulos que estão no NPM.

Eu acredito que o Deno possibilita um salto em experiência de desenvolvimento comparado ao Node.js, especialmente quando notamos o tempo que é gasto em problemas de build e em npm install, algo que já é considerado "normal" na vida de um dev.

Preact

A escolha do Preact como biblioteca para UI é fundamental para que o Fresh entregue o salto de performance que propõe, e é importante entender os motivos dessa escolha.

É indiscutível a popularidade do React.js na comunidade e no mercado, e o Preact se destaca por ter as mesmas APIs do React, porém ser muito mais leve e otimizado. Isso foi possível graças a otimizações nos algoritmos internos e também por ter aprendido com as limitações do React ao longo dos anos. O código principal do Preact pesa apenas 3kb, diminuindo o tamanho do bundle de Javascript que uma página precisa pra ser interativa no navegador.

Preact vs React

Sabendo que o Preact traz benefícios claros em relação a performance, fica a pergunta: o que preciso abrir mão em relação ao React para usá-lo? A resposta é: quase nada! 😁

Essa página lista as diferenças entre as duas bibliotecas e, pessoalmente, não senti nenhuma limitação criando meus apps em Preact, onde uso Functional Components e Hooks. As bibliotecas externas que não funcionam automaticamente podem ser habilitadas utilizando o pacote preact/compat.

Recentemente contribui com o projeto Meu Santinho, que usa o Fresh. Você pode verificar nos arquivos de componentes que tudo é familiar para quem já desenvolveu componentes React. Todas as funcionalidades que você já conhece do React funcionam no Preact.

	React	Preact
JSX support	✅	✅
useState/useEffect	✅	✅
Event Listeners	✅	✅
Context API	✅	✅

Para saber mais detalhes das diferenças entre os dois, acesse Differences to React.

Twind

O Twind é a solução padrão para estilização de componentes (CSS) no Fresh. O nome que lembra o TailwindCSS não é coincidência: o Twind é o Tailwind otimizado para performance, especialmente para dispensar a necessidade de build. O Tailwind/Twind são bibliotecas de estilização CSS baseada em tokens de classe (ex: text-center, flex, justify-center...) que facilitam a criação de componentes de UI.

Recentemente, o Fresh anunciou o plugin para Twind que tornou a experiência de desenvolvimento mais simples.

O suporte a outros modelos de estilização como CSS modules é possível, porém não é o foco do projeto no momento. Pessoalmente, o Twind oferece uma ótima experiência para os desenvolvedores, especialmente usando a extensão do Twind para VSCode.

Deno Deploy

A cereja do bolo do Fresh não está nas soluções acima, mas no último passo do processo de desenvolvimento: colocar a aplicação online. O Deno Deploy é, de longe, o que mais me impressionou nessa stack: em 3s, um app Fresh é deployado para 34 regiões ao redor do mundo! Isso possibilita que o código execute perto dos usuários, resultando em uma latência impossível com frameworks tradicionais.

O artigo The Future of the Web is on the Edge explica muito bem as vantagens que mencionei aqui e recomendo a leitura.

A rapidez do deploy ocorre principalmente pela escolha de não existir build, e isso torna a geração de Deploy Previews a partir de commits no Github praticamente instantânea:

Você pode testar o Deno Deploy a partir do seu navegador criando playgrounds.

Comparando com outras soluções

Outros frameworks dividem espaço com o Fresh e também buscam otimizações de performance para aplicações Web, mas a vantagem competitiva ao usar o Deno se torna clara nos benchmarks. Por exemplo, no vídeo Bun vs Node: Round 2 (feat. Astro, Deno, Fresh and more) do canal Jack Herrington é possível verifica a forte diferença nas métricas requisições por segundo e latência ao usar o Fresh.

Vale ressaltar, no tempo que o vídeo foi publicado, o Fresh ainda não tinha sido integrado com o novo servidor HTTP do Deno que traz ainda mais melhorias de performance.

Conclusão

Tendo já estudado e desenvolvido apps com outras soluções, o Fresh me agrada por trazer de volta bons modelos de desenvolvimento, mas utilizando tecnologias modernas e permitindo uso de bibliotecas React. O fluxo de criar aplicações fica mais simples, e sobra mais tempo pra focar no que realmente importa: o produto.

Caso tenha se interessado, recomendo seguir os passos em https://fresh.deno.dev/ e criar um projeto usando o Fresh. Também recomendo verificar o repositório no Github e ingressar na comunidade do Deno no Discord, especialmente no canal #fresh.

Um guia prático para aprender programação do zero

Lucis — Thu, 28 Oct 2021 01:44:06 +0000

Quem é você?

O público-alvo desse artigo é quem tem pouca ou nenhuma experiência com programação mas que deseja aprender a programar no intuito de usar essas habilidades no mercado de trabalho. Portanto, serei pragmático nas escolhas do conteúdo.

O que é isso?

Nesse texto, farei sugestões de tópicos sobre programação capazes de gerar rápidos resultados, garantindo que a sua jornada seja divertida desde o início. Te garanto: é bem mais simples do que parece.

Explicarei alguns conceitos básicos sobre a área e depois comentarei sobre a trilha de aprendizado que escolhi, baseado na minha percepção do mercado enquanto profissional. Fiz uma seleção otimizada dos conteúdos para manter o artigo conciso, garantindo que há o necessário para sólidos primeiros passos.

Por que escrevo?

Eu escrevo este artigo após receber feedbacks positivos ao assessorar alguns colegas que me pediram indicações de estudo sobre como aprender programação do zero.

Outro fator que me motivou foi a inundação de informações que a internet sofreu sobre a área de tecnologia nos últimos anos. Infelizmente, há muitos materiais, cursos e vídeos introdutórios que considero contra-intuitivos, com falsas promessas de salários fartos associados à ilusão de pouco esforço e pouco estudo.

Quem sou eu?

Formado em Ciência da Computação pela Universidade Federal de Campina Grande, atualmente trabalho como Engenheiro de Software desenvolvendo produtos para internet. Quando eu tinha 7 anos, já imaginava construir uma carreira em tecnologia, e vivia deslumbrado com o todo-poderoso Google, descobrindo como tudo o que estava internet havia sido criado.

Ainda criança, ouvi de um colega mais velho que o curso de Ciência da Computação (CC) na Universidade Federal de Campina Grande era um dos melhores do Brasil. Então, quando me perguntavam o que eu queria "ser quando crescer", dizia: Cientista da Computação.

Naquela época, acho que a maioria das pessoas ao ouvir sobre esse curso provavelmente presumia que o foco de estudo seria "como montar um computador" (o que não sei bem até hoje). Era raro alguém saber o que era um software ou quais as competências necessárias para desenvolver um.

Anos depois, quando eu já estava no primeiro semestre na universidade, a situação era outra: a área de TI era bem mais conhecida e vista como promissora. Alguns colegas de ensino médio, que estavam indecisos no que cursar, escolheram CC para "ver no que vai dar". Nos anos seguintes, eu já observava um fenômeno que hoje, em 2021, está no seu ápice: o êxodo de estudantes e profissionais de diversas áreas para a tecnologia.

Ficava cada vez mais evidente que os cursos tradicionais estavam perdendo os seus alunos devido a essa migração de área e, inclusive, muitos estudantes faziam transferência interna na própria Universidade, aproveitando disciplinas equivalentes que já haviam cursado. Ao mesmo tempo, muito se falava sobre a alta demanda de profissionais de TI para construir o tão desenhado futuro digital.

Hoje, esse fenômeno migratório tem bastante força e não é exclusivo dos estudantes, mas também de pessoas já graduadas e profissionais que buscam aprimorar seus currículos. É importante notar que a pandemia do COVID-19 acelerou tudo isso, especialmente em três relevantes aspectos:

Digitalização forçada das áreas tradicionais;
Flexibilização do trabalho;
Estímulo para exportar mão-de-obra qualificada.

Antes, algumas dicas

Tente sempre associar seu aprendizado com algum projeto interessante que você gostaria de fazer. Sua família tem um pequeno negócio que precisa de um site? Tente implementá-lo! Meus melhores momentos de aprendizado foram com projetos de hobby.
Devagar e sempre. Priorize a frequência em seu aprendizado. É melhor várias doses pequenas porém frequentes do que poucas longas e exaustivas.
Treine bastante sua habilidade de pesquisa online. Esse ponto talvez seja uma das dicas mais importantes aqui. Um bom desenvolvedor é aquele que sabe como achar algo que precisa. Exercite suas habilidades de usar o Google ou seu buscador preferido.
Tente encontrar alguma mentoria com quem você possa contar. Há várias pessoas experientes que se voluntariam para ajudar iniciantes, você pode achá-las por portais de mentoria tech na internet.
Que seja divertido! A sua satisfação no decorrer dessas etapas é fundamental para um bom resultado.

Como cheguei nessas recomendações?

Em um curso formal de nível superior, a grade curricular é realizada de forma gradual e incremental, na qual diversas matérias são pré-requisito para outras; ou seja, muito do que você aprende em um semestre é necessário para você aprender no próximo. Uma graduação de bacharel em Ciência da Computação dura em média 4 anos.

Apesar de considerar a graduação importante para a formação profissional e cidadã, tenho forte convicção que ela não é estritamente necessária para formação de bons profissionais. Eu poderia detalhar esse ponto, mas o assunto merece um outro post.

É importante ressaltar que a área de computação/software é imensa e abriga diferentes campos e habilidades. Uma graduação, na maioria dos casos, tenta abordar as áreas com bastante amplitude e pouca profundidade, dando a chance de cada estuante decidir no que vai se especializar. Os conteúdos que vou recomendar aqui serão bem mais sucintos e diretos.

Como falei, há diversas funções que um profissional de tecnologia pode exercer e, até quando analisamos apenas aquelas que requerem programação, também há uma série de ramificações. Alguns principais exemplos são:

Web (assunto que escolhi para esse guia);
Engenharia de Dados;
Inteligência Artificial;
Programação Nativa (apps para iOS, Android, Windows...);
Jogos.

Todas essas áreas são muito promissoras e interessantes, mas a Web se destaca pela sua popularidade. Nela, os softwares produzidos são executados num navegador, tal como o app que você está usando para ler este texto. Embora a Web não seja a melhor plataforma para todos os problemas que existem, ela está se tornando um ecossistema cada vez mais robusto, poderoso e adaptável.

Do que consiste programação web?

A World Wide Web (WWW), que muitos chamam de internet, consiste em um conjunto de tecnologias, protocolos e softwares idealizados entre os anos 80 e 90 pelo britânico Tim Berners-Lee. O principal software da Web é o browser (navegador), que permite aos usuários o acesso a um ecossistema de informações através de uma rede mundial de computadores (a real internet). Alguns exemplos de browser são: Google Chrome, Safari e Firefox.

O browser possui várias responsabilidades para fazer a Web funcionar, e uma delas é "desenhar" as informações dos sites na tela do dispositivo no qual está sendo executado. Esses sites são definidos por documentos que utilizam linguagens de programação ou de declaração. A Web moderna é composta por 3 destas:

HTML: define os elementos visuais e semânticos que um usuário percebe em um site;
CSS: estiliza e customiza os elementos previamente declarados com HTML;
JavaScript (JS): adiciona interatividade entre usuário e aplicação em páginas HTML.

Essas 3 tecnologias são igualmente fundamentais para o funcionamento da Web e na maioria das vezes trabalham em conjunto. Se eu pudesse exemplificar que tipo de informação cada linguagem consegue passar, seria algo assim:

HTML: "Minha página tem um cabeçalho que tem uma imagem e, logo após, um parágrafo de texto"
CSS: "O parágrafo de texto na minha página é vermelho e a imagem do cabeçalho está alinhada à direita"
JavaScript: "Quando o usuário passar mais de 30s na página, eu quero que o texto mude da cor vermelho para azul"

Você deve imaginar que dominar programação Web significa dominar essas 3 linguagens. Por mais que pareça bastante para aprender, te garanto que é possível entender o básico em pouco tempo e fazer coisas bem legais. Todos os sites e aplicações que você usa diariamente são feitos, também, apenas com essas linguagens, e é possível analisar os códigos para estudar ou se inspirar.

Quer ver como funciona? Se você estiver num computador, clique com o botão direito na página e selecione a opção "inspecionar". Será exibido o HTML utilizado para gerar a página e o CSS que foi aplicado para estilizá-la.

Precisa saber inglês e matemática?

Essa é a pergunta que eu mais recebo. Minha resposta: matemática, não; inglês, mais ou menos...

De fato, graduações em Computação são de exatas e possuem verticais de matemática em sua grade curricular, mas isso não significa que você precisa amar ou ser o gênio dos cálculos para ser um bom desenvolvedor Web. Dito isso, é necessário ter uma boa base das operações básicas que são ensinadas no ensino fundamental e médio.

Já sobre o inglês, não é estritamente necessário, porém recomendo que você comece a praticá-lo no dia-a-dia. Inicialmente, pratique a leitura (você pode usar a extensão do Google Translator pra te ajudar). Após isso, tente praticar suas habilidades de escuta e, quando possível, treine a comunicação oral e escrita. Minhas recomendações pessoais são: usar o Duolingo e assistir séries e filmes com legenda em inglês.

Eis os motivos para considerar o inglês importante:

O conhecimento da programação é esparso e nós programadores - tanto os iniciantes como os experientes - consultamos e estudamos códigos e materiais que, na maioria das vezes, estão em fóruns que usam o inglês;
Dominar o idioma é mais do que entender palavras, porque você se expõe à pessoas e culturas diferentes que superam traduções literais. Algo que me encanta em TI é a presença de comunidades fortes, e o inglês aumenta as suas chances de achar uma que você se identifique;
O inglês pode te colocar numa opção privilegiada para conseguir um emprego, já que nos últimos dois anos o número de vagas internacionais remotas aumentou bastante.

Como começar?

A jornada de cada pessoa com tecnologia pode ser muito particular, e é provável que você ainda vá descobrir o que mais te interessa. Isso inclui áreas específicas (será que você vai gostar mais de criar páginas estáticas/landing pages, ou aplicações interativas?) ou também formas de aprender específicas (prefere vídeos ou material escrito?).

Irei sugerir o que têm funcionado para a maioria das pessoas com as quais conversei, mas entenda que você pode não gostar de algo logo de cara, e tá tudo bem (e é sobre isso?).

O primeiro passo é começar a aprender as linguagens que apresentei acima, e minha recomendação é estudá-las na ordem apresentada.

Como plataforma de ensino, recomendo o CodeAcademy, um portal interativo com conteúdos completos e ótimos desafios. Os cursos das 3 linguagens que mencionei (HTML, CSS e JavaScript) são gratuitos e podem ser feitos em português ou inglês. No quesito de aprendizagem introdutória, o CodeAcademy é o mais elogiado por aqueles que o recomendei e, de fato, considero que seja devido a essas características:

Apresentação teórica com exemplos;
Desafios com correção automática;
Revisões com conteúdos incrementais.

Aqui estão os links dos cursos:

Após finalizar esses cursos, você será capaz de criar sites e aplicações para Web! Se quiser publicar algo na internet, recomendo olhar o Code Sandbox junto com a integração ao Netlify. Todos esses serviços são gratuitos.

Alternativas

Deixarei aqui algumas sugestões alternativas para caso você se interesse:

Canal Curso em Vídeo do Gustavo Guanabara: onde há um curso de HTML e CSS e um curso de Javascript. 🇧🇷
Exercism: mantido pela comunidade, esse portal apresenta várias trilhas em diversas linguagens de programação.
Free Code Camp: plataforma de código aberto semelhante ao CodeAcademy, também conta com uma ótima comunidade.

Quais são os próximos passos?

React

Embora HTML, CSS e JS sejam a base da Web, na prática, a comunidade dificilmente trabalha apenas com elas, isso porque há formas melhores de se desenvolver. Esse é o papel das bibliotecas e frameworks: auxiliar desenvolvedores a criarem sites e aplicações de médio e grande porte. Em geral, as próprias vagas de emprego são direcionadas a frameworks específicos. Mas não se preocupe, tudo que você aprendeu até agora continua sendo bem importante.

A tecnologia mais usada nessa categoria é o React, criado pelo Facebook. Ele permite a criação de aplicações web baseadas em componentes, nos quais você faz o desenvolvimento em um só lugar, ao invés de programar HTML, CSS e JS em arquivos diferentes, além de facilitar a programação de interações.

Neste mês, o Facebook lançou uma nova página de documentação para o React com um conteúdo inédito e bem interessante. Você pode acessá-la pelo https://beta.reactjs.org/learn e seguir os passos apresentados. É uma experiência parecida com o CodeAcademy.

Após finalizar os estudos básicos de React, você vai aproveitar uma grande vantagem: acessar milhares de bibliotecas e códigos prontos para uso. Em especial, para criar seus elementos visuais, recomendo checar o ChakraUI ou o Ant Design.

Typescript

TypeScript (TS) é uma linguagem de programação criada pela Microsoft muito similar ao JavaScript (formalmente, dizemos que TS é um superset de JS, ou seja: todo código JavaScript é um código Typescript válido). Por ser uma linguagem fortemente tipada, Typescript torna a experiência de desenvolvimento mais previsível e ajuda a prevenir problemas ("bugs") no código.

Você pode aprender TS através do ótimo portal de documentação da linguagem.

Quando você se sentir pronto para fazer uma aplicação completa, algumas pergunta podem surgir:

Onde guardar os dados online de uma aplicação?
Como implementar um fluxo de login/cadastro?

Bem, para isso, há uma área especial de Web chamada backend, e muito provavelmente você irá encontrar esse termo por aí. Mas, uma boa notícia: você não precisa ter que estudar outro apanhado de coisas para adicionar essas funcionalidades em suas aplicações. Deixarei aqui minha recomendação do Firebase, uma tecnologia da Google que tenta preencher esse espaço, porém usando apenas o TS/JS que você aprendeu.

É só isso?

Infelizmente, não... Há vários outros conteúdos que são importantes e você pode precisar uma hora ou outra, mas não quero deixar o post muito saturado. Não precisa se abduzir: ninguém sabe tudo desde o início! Acredito que o conteúdo que apresentei aqui abrirá sua mente para conseguir aprender melhor e saber galgar os próximos passos.

Alguns desses conteúdos são:

Git e Github, usados para organização dos projetos. Para ver do que se trata, recomendo esse conteúdo do canal da Rafaella Ballerini;
Introdução à computação, onde você pode aprender nos vídeos iniciais do professor Dalton Serey;
Estruturas de dados e algoritmos, onde você pode começar aprendendo por esse site do professor João Arthur Brunet. Outra ótima dica é a plataforma LeetCode.

Confira também essas dicas extras sensacionais:

Developer Roadmap: várias trilhas de conteúdo para desenvolvedores;
Curso aberto de Ciência da Computação: material aberto que cobra os conteúdos de uma graduação em CC.

Espero que tenha gostado. Fique à vontade pra contar a sua história ou fazer alguma sugestão :-)

(Muitíssimo obrigado a Emanuelly Assuéria, Izabella Morais, Matheus Monteiro, Thiago Granja e Viviane Oliveira que me ajudaram com ótimos feedbacks e também a Beatriz Cunha que fez uma belíssima revisão do texto)

Try something new this week

Lucis — Tue, 08 Sep 2020 11:32:47 +0000

Did you ever wonder why there's so much tech for "doing the same thing"?

It's probably not news to any of you, but there's always something new and different coming off in Web Dev. This might generate a haunting feeling that you're outdated, but could it be why you succeed on your next project or job interview?

I won't be long, as this should be a morning text that you finish while drinking a cup of coffee, but let's take a look at the last results of State of JS survey, especially about Javascript flavors. For those who've never heard of it, these are languages that compile to Javascript.

Javascript Flavors

Most of you probably have never written a line of code on Elm or Clojurescript, but should you learn it?

Probably everything that's on this radar, even not being so mainstream, has a Reason to be there. I know for sure that most of these programmers love the language they work on. Another thing is that it pays the bills.

In fact, it's common for big companies to choose one of these languages to hire good developers, as it's unusual for beginners to have experience in them.

Usage by salary range

What I want to do here is to pique your curiosity!

I want to propose the following: take a couple of hours this week and learn at least one of these new languages. You don't need to build a pet project with it, just try them on their Playground to see how it feels. Before doing that, I ask you to watch these presentations about ReasonML, Elm and Clojurescript:

React to the Future - ReasonML
Clojurescript for Skeptics
Why Elm?

Most importantly, try to grasp the design decisions behind them. There's a high chance you'll watch one of these videos and it won't motivate you to switch your language of choice, but it's important that you understand why those things were crafted in the first place.

In the end, the language you use or know won't matter all that much, but the experience you get creating stuff in a different environment is rewarding.

Como criar aplicações da noite pro dia

Lucis — Mon, 24 Aug 2020 00:30:40 +0000

TL;DR

Neste post falo um pouco da minha evolução como desenvolvedor web, especialmente sobre o "primeiro release" (ou MVP) de uma aplicação. Também comento sobre no-code e escalabilidade, explicando algumas decisões que tomei nos meus últimos projetos pessoais.

As tecnologias que recomendarei serão:

Contexto

Um dos maiores prazeres que tenho como programador é implementar soluções para problemas das comunidades que pertenço, e provavelmente você também se identifica com isso. Sabe quando você usa o seu conhecimento técnico para ajudar alguém da família com um problema? Essa sensação é um dos grandes motivadores para mim, sendo, até hoje, responsável por vários ensinamentos.

Quando você é o dono de uma solução, logo começa a entender e sentir os problemas que a literatura de Engenharia de Software tanto pesquisa, e é assim que você, como profissional, realmente amadurece.

Mas hoje eu quero falar sobre uma fase específica de um projeto: o começo.

Um grande pensador, Frank Sherman Land, falava que "O início é o que mais importa" se tratando dos anos de nossa vida. Mas, quando o assunto é software (ou soluções em software), é ainda mais fundamental o que você faz no começo e quão rápido você o faz.

Time to market

Saindo da Engenharia e analisando esta fase no campo de Produto, o "começo" e todas decisões relacionadas são cruciais e determinantes para o futuro de uma ideia. Não pretendo discorrer muito sobre isso (principalmente por desconhecimento), mas, se você está interessado em se aprofundar nessa análise, os livros The Lean Startup e Inspired são boas referências.

Para uma introdução mais branda, você pode ler alguns textos do Marty Cagan que estão no seu site Silicon Valley Product Group, especialmente Product Fail e The Four Big Risks.

O primeiríssimo passo

Vamos lá: você identificou um problema que quer resolver e, no mesmo instante, já visualiza as telas da sua solução. Provavelmente, já começa a rabiscar os fluxos da aplicação. No mesmo momento que você sente aquele boost de motivação, também já começa a modelar arquiteturalmente o seu software. Aqui, é crucial que você não se perca!

Uma coisa que eu sempre senti medo nessa fase inicial foi de errar na mão, querendo fazer tudo da melhor maneira possível: modelando o sistema como se ele já começasse com milhões de usuários; ou então tendo usuários com diversas necessidades.

O conselho é: pense bem qual a funcionalidade-chave da sua solução e foque nela.

Assim, uma dica muito importante é evitar otimizações prematuras. Existem vários problemas que são bons para ter e, na minha opinião, tentar resolver tudo no começo pode potencialmente lhe desmotivar.

Caixa de ferramentas

Ciente sobre o que falei acima (e também acessado os links das entrelinhas), falemos sobre como por as mãos na massa.

Disclaimer: leia toda frase aqui com um "na minha humilde e sincera opinião" logo antes. Caso discorde de alguma coisa, fique a vontade para comentar no post. Estou cada dia errando um pouco mais, e ainda bem :)

CodeSandbox

A palavra-chave para desenvolvimento de soluções "do zero" é iteração. Dificilmente você será capaz de programar 20 minutos sem parar e só depois ver como ficou. Escolher uma ferramenta que lhe ajude nesse processo é essencial.

Ao longo dos anos, já experimentei várias formas diferentes de começar minhas soluções, e hoje não tenho dúvida: o melhor lugar para começar a fazer algo é o CodeSandbox.

Pra quem não conhece, o CodeSandbox é um ambiente de desenvolvimento que roda no navegador e possibilita que você programe sua solução, veja ela rodando lado-a-lado, compartilhe facilmente com outras pessoas e itere muito rápido, ainda mais quando você usa uma tecnologia com hot-reload. Eles suportam a maioria das tecnologias atuais de frontend.

Olha algumas coisas que dá pra fazer no CSB:

Sincronização com o Github (você pode criar novas branchs por lá, e o CSB cria Pull Requests automaticamente).
Usar suas configurações do VSCode (inclusive o VSCodeVim).
Projetos backend (como API's REST ou GraphQL)

Para começar a usar o Codesandbox (com React), basta digitar na sua barra de endereço react.new e é isso!

React.js

É difícil que você não tenha ouvido falar de React, mas vale ressaltar que é uma das tecnologias para construir interfaces web mais usadas e com mais demanda no mercado. React é uma escolha fácil, e ao menos que você queira muito experimentar algo diferente, é o que eu lhe indico.

Mesmo após escolher o React, existem algumas opções sobre como usá-lo, e irei comentar sobre minhas recomendações.

Framework: Gatsby.js

É muito rápido começar um projeto com o Gatsby, e tem sido uma tecnologia muito comentada nos últimos meses. Aqui ele funciona como uma alternativa ao famoso Create React App, e a vantagem que você tem é que, caso parte da sua solução inclua páginas estáticas, o Gatsby consegue ser bem mais rápido (assunto pra outro post).

UI Framework: Material UI

Um UI framework vai ter oferecer um conjunto de componentes customizáveis e acelerar bastante o desenvolvimento do seu produto. Coisas como datepickers, modais e drag-n-drop são fáceis de usar e têm uma UI consistente. O MaterialUI segue os princípios do Material Design da Google, além de permitir várias customizações para deixar sua aplicação com sua cara (o que eu também recomendo).

Linguagem: Typescript

Por mim, não tem discussão: não há muitos motivos para começar um projeto em Javascript puro hoje em dia. Typescript consegue lhe acelerar como desenvolvedor de várias maneiras possíveis, e a maioria das tecnologias que comento aqui funcionam perfeitamente utilizando a versão tipada do Javascript.

Eu já defendi que "Typescript é só pra projetos grandes", depois passei pro time de "comece com Javascript e no futuro migre", e hoje, com a adoção por vários frameworks e ferramentas, não consigo mais usar um dado sem o editor jogar na minha cara o seu tipo.

Tachyons

Já faz muito tempo que eu acompanho o mundo do desenvolvimento Web, e uma das coisas que parece que ninguém achou a resposta certa ainda é: como usar CSS. Já sabemos há anos que é a única forma de estilizar os elementos de uma página na internet, mas volta e meia alguém fala que estamos usando errado até então.

Dentre essas soluções, uma que me conquistou foi o Tachyons, e vou explicar como ele funciona. Basicamente, o Tachyons é um conjunto de definições de classes CSS, porém definições atômicas e baseadas em
Design Tokens. Ao invés de classes como .card ou .box, temos b para { font-weight: bold } ou flex-column para { flex-direction: column }, e fazemos a estilização dos componentes usando várias dessas definições.

Uma das maiores vantagens do Tachyons é que é muito fácil testar as variações direto no navegador, coisa que sou acostumado a fazer. Com o autocomplete de classes CSS do Dev Tools do Chrome, é uma experiência rápida e eficaz de criar seus layouts.

Firebase

De longe, esta é a tecnologia que eu mais sou apaixonado! O Firebase é um serviço serverless da Google para desenvolver aplicações, oferecendo banco de dados, autenticação e muito mais. Além disso, o plano gratuito do Firebase dá acesso a vários recursos, talvez suficientes para uma aplicação "média" por muito tempo. Você pode verificar aqui a política de preço deles e também entender como funciona a cobrança caso os limites básicos sejam ultrapassados.

Os projetos mais legais que já fiz usaram o Firebase, e é impressionante como sempre há algo novo no produto deles. A principal funcionalidade que evidencio aqui é o Firestore, solução de banco de dados NoSQL as a service bastante completa, oferecendo transmissão de dados em tempo real. Além do Firestore, existem vários outros serviços que podem ser muito úteis para MVPs:

Authentication: serviço de autenticação que permite oferecer login por Google, Facebook ou até número de celular na sua aplicação.
Cloud Functions: serviço que roda na infa da Google Cloud e permite que você rode código backend, permitindo reagir a mudanças no banco de dados ou criar uma API.
Messaging: serviço de mensageria com envio ilimitado de notificações para usuários.
Storage: serviço de armazenamento que permite até 5GB de arquivos estáticos no plano gratuito. Ótimo para apps que precisam de upload de imagens.

React JSON Schema Form

Esse ano foi a primeira vez que usei essa solução e, por mais que pareça algo "que não pertence", é uma peça fundamental da minha caixa de ferramentas. O React JSON Schema Form é uma biblioteca capaz de gerar formulários completos a partir de um JSON Schema, que é uma espécie de "linguagem" que te permite definir um modelo de dado.

Todo desenvolvedor sabe como pode ser complicado criar e gerenciar formulários, e essa lib permite que você automatize esse trabalho sem abrir mão do controle. Caso você queira adicionar uma validação específica para um campo, você pode, e esse foi exatamente o que precisei. Na minha opinião, o React JSON Schema Form está na linha tênue entre as tecnologias "no-code", que são rápidas, porém te impedem de tomar o controle quando você precisa de algo específico, e as formas "tradicionais" de criar formulários que requerem conectar vários objetos e gerenciar estado.

Eu escolhi essa biblioteca porque foi a maneira mais rápida de criar um formulário de cadastro com vários campos e validações importantes. Com poucas linhas, consigo um formulário da criação e edição que já me entrega o dado do jeito que eu quero.

Eventualmente, quando a aplicação vai crescendo e preciso melhor a experiência do usuário, vou substituindo os formulários por componentes próprios para cada seção (talvez usando o seu UI Framework).

Você pode verificar o que o RJSF é capaz de fazer no playground da ferramenta, que é bastante divertido! Outra possibilidade que ele oferece é usar o estilo do UI Framework, e também, através do uiSchema, configurar como alguns campos automáticos são renderizados.

Netlify

Agora que você já montou sua aplicação e quer logo compartilhar com as pessoas, é necessário hospedá-la. Todos os serviços que mencionei têm a vantagem de não precisarem de servidor, o que torna o deploy fácil e muito barato; afinal, você só precisa servir arquivos HTML, JS e CSS. É exatamente o Netlify que pode te ajudar com isso, integrando-se com o seu repositório no Github e, automaticamente, colocando sua aplicação online. O serviço configura automaticamente o certificado HTTPS do seu site e também serve os arquivos em uma CDN.

Na página inicial do Netlify é fácil entender como usá-lo, e também pode checar outros serviços oferecidos (como o Netlify Forms para guardar dados de formulário). Caso você queira usar o seu próprio dominio.com.br, também é fácil de configurar!

É isso

E foi mais ou menos com essa stack que fiz em poucas horas a primeira versão do Alt, um dos meus últimos projetos de hobbie. Inicialmente, criei para resolver um problema específico de alguns amigos, mas desde então tenho desenvolvido uma solução completa para ajudar pequenos negócios venderem online. Inclusive, chega lá se quiser contribuir :)

Um outro serviço bem legal que usei no Alt e vale mencionar aqui, foi o Here. Ele é uma solução para desenvolvedores lidarem com mapas e localização, também com um plano gratuito bastante generoso. Caso você queira fazer um novo Uber, o Here é uma ótima opção.

Então é isso, fiquem a vontade para comentar e talvez adicionar aquela ferramenta que você acha que se encaixa aqui!

Como criar um blog com Gatsby.js e Prismic

Lucis — Fri, 17 Jul 2020 02:46:47 +0000

[PT-BR]

Dessa vez não é um post, foi mal para os read > watch, mas se você quiser dar uma olhada no que fiz no vídeo, o repositório tá aqui: https://github.com/lucis/blog-do-lucis

Esse foi o meu primeiro vídeo em um longo tempo, e é sem edição, com bugs ao vivo, e contando um pouco da história do Gatsby.js. Espero que vocês gostem.

Disclaimers

Caso você queira construir um blog com o Prismic, e já tenha entendido como o Gatsby.js funciona, recomendo usar o Gatsby Prismic Starter (https://www.gatsbyjs.org/starters/LekoArts/gatsby-starter-prismic/) que já vai vir com toda estrutura pronta para você.
Há um plugin mais moderno para integrar com o Prismic, o gatsby-source-prismic-graphql (https://github.com/birkir/gatsby-source-prismic-graphql), mas o meu intuito no vídeo foi mais explicar um fluxo básico do Gatsby, e o plugin que usei era o mais simples

Fontes:

https://www.gatsbyjs.org/docs/sourcing-from-prismic/

Tech Writing Cheat Sheet

Lucis — Sun, 21 Jun 2020 17:23:22 +0000

This is a curated list of summaries from Google's Tech Writing courses that I constantly consult when reviewing documents ~~since I sometimes forget things~~.

General/Introduction

Determine your audience and what they will learn.
Fit documentation to your audience.
Introduce a document's scope and any prerequisites.
Outline a document. Alternatively, write free form and then organize.
Make a practice of continuous revision.
Establish your document's key points at the start of the document.
Read documents out loud (to yourself) when reviewing.
Find a good peer editor.
Return to documents well after you've written the draft.
Compare and contrast with something that readers are already familiar with.

Content

Prefer task-based headings.
Use terms consistently.
- If you change the name of a variable midway through a method, your code won’t compile. Similarly, if you rename a term in the middle of a document, your ideas won’t compile (in your users’ heads).
Avoid ambiguous pronouns.
Prefer active voice to passive voice.
- "Python interprets code" instead of "Code is interpreted by Python".
Pick specific verbs over vague ones.
Focus each sentence on a single idea.
Convert some long sentences to lists.
Eliminate unneeded words.
- Like simply or just.
Use a numbered list when ordering is important and a bulleted list when ordering is irrelevant.
Keep list items parallel.
- All items in a parallel list look like they "belong" together.
Start numbered list items with imperative words.
- "Install that".
Introduce lists and tables appropriately.
Create great opening sentences that establish a paragraph's central point.
Focus each paragraph on a single topic.

Code Examples

In tutorials, reinforce concepts with examples.
Create concise sample code that is easy to understand.
Avoid writing comments about obvious code.
Keep code comments short, but prefer clarity over brevity.
Provide not only examples but also anti-examples.
Provide code samples that demonstrate a range of complexity.
- Simple and complex examples.

Drawings

Consider writing the caption before creating the illustration.
Focus the reader's attention on the relevant part of a picture or diagram by describing the takeaway in the caption or by adding a visual cue to the picture.

If you would like to learn more about these points, check out the courses. There are two and they're very good!

It's okay to still write REST APIs

Lucis — Tue, 19 May 2020 00:01:38 +0000

Disclaimer: This is pretty much a message to me.

The forever-changing Web world impacts directly how we build things, usually in a good way. No more advanced Apache setup, or grasping SQL to be able to store data. Today, almost everything is possible with a simple cli init and signing in with a SaaS.

Personally, I love that. I always get excited saying to someone "You can create that with a PWA and Firebase", and, in fact, we can. Trade-offs are easier to decide, and I almost can't believe how much is possible with free tier today...

As nice as all of this sounds, in the past year it has put me in tough spots. It's hard to learn something new when it's so easy/good to do it like everyone is doing. And that's not about comfort, trust me on that! The React + Typescript + Firebase + Node.js + GraphQL combo, for me, has been so great that I always get second thoughts when trying to learn a new technology.

It always goes like this: "I really want to learn this new language. Let's find out how to create a GraphQL service with it". After some googling, I realize that it's hard to accomplish that "simple thing". Sometimes, not even "hard", but way less easy than using Node. Same for frontend: React Hooks, Apollo, and async/await have spoiled me into thinking it's not worth learning something like ReasonML because my Typescript environment is so safe and cool that has features not yet implemented in other languages.

"Why would I still create a REST API?", it's what I ask myself after searching for the standards for a new language, like Clojure or F#, and for a long time, it has stopped me. But really, why? Just because it's not what Facebook is using?

Learning new things will never be easy, not always because of what you don't know, but what you already do.

That pet project you have in mind, create it with a toolset you've only heard of and was interested! The extra lines you may have to write might teach you what the easy way has always hidden.

Displaying current VTEX account and workspace on Mac's Menu Bar with link to Store

Lucis — Sun, 05 Apr 2020 22:17:16 +0000

Audience

Mac users who develop on VTEX IO

Prerequisites

Permission to install programs on your Mac
vtex official CLI installed
Basic command-line knowledge

When developing for VTEX IO, working across different accounts and workspaces can become confusing. Before committing actions like vtex install and vtex link, I'm always interested in checking if I'm logged in the right account and workspace.

If you use ZSH + Powerlevel, I've also created a simple customization to show such info on the shell

To help you (and myself) with that, I'm gonna show how to display that information on Mac's Menu Bar, so it'll be visible for you all the time!

The Menu Bar is the fixed top bar on your computer, which shows icons, menus and other information.

Let's go! For this to work you need to:

Install BitBar.
Select a folder of your preference to be the plugins' folder (you're prompted when installing).
Create the file vtex.10s.sh on the folder you've selected on the last step.
Paste and save the following content to vtex.10s.sh file:
Inside the plugins folder on the terminal, run chmod +x vtex.10s.sh
Click on BitBar menu item on the Top Bar and click "Refresh"

That's it! It should work just fine ✨

If you want to display it colored like I've done, try this instead. I've removed it on the default snippet because some shells don't support it!

Extra: If you click on it, it opens that workspace's store on myvtex.com!

Note that you can do a lot more with BitBar. If you're interested in finding out how to create custom plugins, go to BitBar Github Page. On it's home page, there's already a ton of free plugins!

Some considerations

The script reruns every 10 seconds, so it'll update after vtex switch. If you want to configure this time, click here.
I've edited the Shebang to #!/bin/bash because most people use bash. If you use another shell (like zsh), update it accordingly.
I've added some color using ANSI codes. Click here to see other options.

Do people like Javascript?

Lucis — Thu, 02 Apr 2020 01:37:53 +0000

Do people like Javascript?

TL;DR: I don't know... Some of them.

In some Facebook groups about programming that I'm part of (yeah, I’m still on that), beginners post a lot asking for guidance of where to start or “What’s better, language X or Y?“. After a couple of years of trying to help, I've noticed one thing about others' responses that motivated me to write this: people frequently mock Javascript, saying it's bad.

It’s no secret that Javascript is, in fact, very popular. It’s popular on Github, it’s popular on universities and it’s been a couple of months since I’ve seen a job offer that didn’t require Javascript in some way. So, why all that hate I see?

Screenshot from Wat presentation

Always backed up with some code executions like the ones from Wat, those blame JS for its weak typing. Sometimes also for IEEE754. I assume that this could be challenging for who's starting to learn, but, come on: hardly. Especially on the age of Typescript.

What I see is some experienced but conservative programmers, who might've spent the last 10 years of their lives coding on a platform that doesn't change, and feel like in hell with the crazy forever-changing ecosystem. Some of them are truly bothered by the unstable state of technologies, and some of them are just afraid of being left out of the buzz.

But I like Javascript and its ecosystem I lot. I enjoy seeing different people trying to solve problems in so many different ways that I can't keep up with them... And, lastly, I love how easy it is to create things today. Tools like Firebase, React and Gatsby.js create an amazing empowerment experience for those who aren't software engineers but can create maybe not enterprisey apps but useful apps. Help their communities, their parent's store and so on.

I don't know about you, but, from the products I've developed until now, the ones I'm most proud of are not those with great technical challenges. In fact, it's the CRUD PWA for handling payments on a closed event of a group of mine; the simple report generator used on my dad's shop; a simple browser extensions for my college's system.

The Javascript community has almost every library possible on the world and the Web is each day more integrated with native systems, it's truly amazing what the web can do today!

Amazing design and modern programming languages are great, I know, but, IMO, the majority of people don't care all that much about it. It's only about how fast you can deliver useful things.

Delete all node_modules from your machine and save space

Lucis — Wed, 05 Feb 2020 23:23:36 +0000

Couple of months ago I has having disk space problems on my development machine and started to look for unused folders that were taking some space. Looking for solutions on the internet, I've found that local node_moduless take a lot of space when you have a couple of Javascript projects. Then, I started looking for solutions on how to smartly delete these folders, since I can rebuild them with yarn if I need.

Just FYI, a raw npx create-react-app folder has a 227mb node_modules.

So, let's go to the recipe. I present you two ways of deleting these folders:

npx npkill will spawn an interactive interface for you to select the node_modules you want to delete.
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + will find and delete every node_modules folder under the current directory, so beware where you're running it.

If you want more options, check this SOF question.

How to save disk space when using PM2

Lucis — Wed, 05 Feb 2020 00:37:28 +0000

TL;DR: Run pm2 install pm2-logrotate

PM2 is a process manager for Node.js, usually used in production

Yesterday I've ran into a problem on one of the production machines that I manage. Suddenly, the database stopped working and soon I found out that I was almost out of disk space.

At first sight, I've checked my database records: all ok, as big as I was expecting.

Then, I had to start du -hing my largest directories to check what was taking so much space from my disk. I found the guilty one to be the ~/.pm2/logs folder, and instantly realized that my app's logs where just stacking up there. I solved temporarily with pm2 flush, but had to look for a way for that not to happen again.

And, then, I've found this guy: https://github.com/keymetrics/pm2-logrotate

It's as easy as running pm2 install pm2-logrotate on your machine. Done! PM2 will start to limit its logs size, by default to 10 megabytes, but it's easily configurable with something like pm2 set pm2-logrotate:max_size 1K. You can read more about the option here.

Please don't make a mobile app (unless if you have to)

Lucis — Sun, 02 Feb 2020 04:01:34 +0000

Last december I've started my first "real job" and, apart from the great onboarding experience, I've been having a bit of trouble setting up my benefits plans. Yeah, there are some UI quirks and weird verification challenges but, by far, having to install a bunch of apps on my phones caused most part of this pain.

Some of this apps exists for the sole puporse of consulting information, like the one from the healthcare company. No need for background processing, no notifications, nor some fancy use of the camera, and it still is shipped only as a native mobile app. One funny thing about this app in particular is that it has an "online chat" functionality that, when accessed, guess what: it redirects to a webpage.

I know that mobile apps are still a hit. Companies are proud to say "download our app on Play Store or App Store", and most users get into that as well, but we have to start evangelizing more about web apps. And it's not a hard job, since, after battery draining, the most common complain from my close ones is their cellphones being low on storage, and, for the companies, building a native apps is more time-and-resource consuming compared to web development.

Whenever I see a new startup releasing a mobile app for its shine new CRUD, I feel a bit of the pain of every developer that has been doing an awesome job pushing PWA technologies forward for the last couple of years. And, in fact, being up-to-date with their job is a great way for us to embrace this campaign as developers.

We still have a long way to support every native API on the browser, but we already have a ton of features that makes it possible to implement most of the apps I use everyday. There are also great web apps that are already PWAs (in fact, I use dev.to as an installed PWA on my phone).

An accesible and inclusive WEB is everyone's goal!