Você já tentou escrever uma função recursiva em JavaScript e se deparou com o erro:

RangeError: Maximum call stack size exceeded

Isso acontece porque o JavaScript não implementa Tail Call Optimization (TCO) — um recurso previsto na especificação do ECMAScript 2015 (ES6), mas nunca adotado pelos principais motores.

Antes de entender o problema, vamos entender a base.

O que é recursão?

Recursão acontece quando uma função chama a si mesma — direta ou indiretamente. Toda recursão precisa de duas partes:

• Caso base (condição de saída): quando parar de chamar a si mesma;

• Chamada recursiva: onde a função se chama com um argumento diferente, normalmente em direção ao caso base.

Exemplo clássico:

function countDown(n) {
  if (n === 0) return;
  console.log(n);
  countDown(n - 1); // chamada recursiva
}

Sem um caso base (if (n === 0) return), essa função entraria em loop infinito, até estourar a pilha de chamadas.

Tipos comuns de recursão

Além da recursão direta (uma função chama a si mesma), existem:

• Recursão indireta: a função A chama B, que chama A novamente.

function isEven(n) {
  if (n === 0) return true;
  return isOdd(n - 1);
}

function isOdd(n) {
  if (n === 0) return false;
  return isEven(n - 1);
}

• Recursão mútua: dois ou mais métodos se chamam em um ciclo.

function A(n) {
  if (n <= 0) return;
  console.log("A", n);
  B(n - 1);
}

function B(n) {
  if (n <= 0) return;
  console.log("B", n);
  C(n - 1);
}

function C(n) {
  if (n <= 0) return;
  console.log("C", n);
  A(n - 1);
}

• Recursão de cauda (tail recursion): a chamada recursiva é a última instrução da função.

Essa última é a mais importante para performance, pois é onde a Tail Call Optimization pode atuar.

Como funciona a stack no JavaScript?

Quando você chama uma função em JavaScript, o motor de execução cria um stack frame (quadro de pilha) contendo:

• Onde retornar quando a função acabar;

• O escopo local da função;

• Parâmetros e variáveis locais.

Cada chamada recursiva empilha mais um frame. Quando a base do caso recursivo é finalmente atingida, o motor do JS começa a desempilhar tudo. Se houver muitas chamadas antes de atingir esse ponto, a pilha explode.

Se houver chamadas demais antes de chegar no fim, você verá:

RangeError: Maximum call stack size exceeded

O que é Tail Call Optimization?

Tail Call Optimization é uma técnica em que o interpretador ou compilador percebe que a última coisa que uma função precisa fazer antes de retornar é chamar outra função. Em vez de adicionar um novo frame na pilha de chamadas (call stack), ele reutiliza o frame atual.

Exemplo sem TCO (chamada recursiva tradicional)

function factorial(n) {
  if (n < 2) return 1;
  return n * factorial(n - 1); // NÃO é tail call
}

Essa função é recursiva, mas o valor de factorial(n - 1) ainda precisa ser multiplicado por n depois de resolvido. Logo, a chamada não está na posição final da função (tail position), e a stack cresce a cada chamada.

Tail-recursive

Aqui, a última instrução da função fact é a chamada recursiva. Com TCO, seria possível rodar isso de forma tão eficiente quanto um for ou while, porque a pilha não cresceria.

function factorial(n) {
  function fact(n, acc) {
    if (n < 2) return acc;
    return fact(n - 1, n * acc); // <- chamada em posição de cauda
  }
  return fact(n, 1);
}

A promessa do ES6 (e do ES8)

A especificação do ES6 prometia suporte a TCO. E mais: ela exigia que os motores JavaScript fizessem otimização de chamadas em tail position em modo strict ('use strict').

Já o ES8 (2017) trouxe async/await, que ajudou a tratar recursões assíncronas — mas não resolveu o problema da pilha em recursões síncronas.

Exemplo de recursão perigosa:

function pow(base, power) {
  if (power === 0) return 1;
  return pow(base, power - 1) * base;
}
pow(4, 84599); // Em inputs altos ele estoura 💥

Mas… por que JavaScript ignorou a especificação?

Apesar de TCO estar na especificação do ECMAScript 2015 (ES6) — com a exigência de suporte em modo 'use strict' — nenhum dos principais motores de JavaScript modernos implementou.

Teorias e motivos:

1. Compatibilidade com depuradores
   Ferramentas de debug como o Chrome DevTools se baseiam na pilha tradicional. Otimizar frames quebraria o rastreamento entre chamadas.

2. Complexidade de implementação
   Motores como o V8 (Chrome e Node.js) foram otimizados para desempenho em outras áreas. Suportar TCO exigiria reestruturações profundas.

3. Baixo uso prático
   Como loops são mais comuns no ecossistema JavaScript, o esforço para suportar TCO não se justifica.

4. Efeito dominó de compatibilidade
   Se apenas um motor suportar TCO e os outros não, surgem inconsistências. Como nenhum quis ser o primeiro, nenhum implementou.

Atualmente, apenas o Safari (WebKit) chegou a oferecer algum suporte a TCO, mas até isso foi limitado e eventualmente descontinuado.

Em resumo: JavaScript ignorou TCO porque isso traria mais problemas (e custos) do que soluções no ecossistema atual.

Recursão assíncrona com async/await

Recursão assíncrona contorna o problema de stack overflow porque cada chamada aguarda o término da anterior antes de continuar, liberando a stack.

async function processItems(items, index = 0) {
  if (index >= items.length) return;
  await doSomething(items[index]);
  return processItems(items, index + 1);
}

Essa abordagem é segura para longas listas ou processos de IO.

Alternativas práticas

Se você precisa de segurança e performance:

• Use for ou while no lugar de recursão tradicional;

• Se for usar recursão, prefira a forma tail-recursive;

• Use async/await para recursão que lida com IO assíncrono;

• Evite recursões profundas em funções síncronas.

O livro Eloquent JavaScript já alerta:

“Em JavaScript, executar um loop simples é muito mais barato do que chamar uma função múltiplas vezes. A recursão eficiente exige suporte à eliminação de chamadas em cauda.”

Em benchmarks, loops são até 10x mais rápidos do que recursão em JavaScript.

Por que linguagens funcionais usam tanta recursão?

Embora loops (for, while) sejam frequentemente usados no lugar da recursão em linguagens como JavaScript por questões de performance e controle da stack, eles não substituem a recursão conceitualmente — apenas imitam certos comportamentos.

A recursão expressa um paradigma funcional, onde o fluxo do programa é descrito em termos de chamadas de função, e não de iteração explícita. Isso permite representar problemas complexos de forma mais declarativa, como árvores, grafos e algoritmos matemáticos elegantes. Substituir recursão por loops é, na prática, uma mudança de paradigma de programação, que pode reduzir clareza e expressividade dependendo do caso.

Linguagens como Haskell, Elixir ou Scheme evitam loops imperativos. Nelas, recursão é a forma natural de repetição.

E o principal: elas implementam TCO de verdade. Isso significa que chamadas recursivas são otimizadas pelo compilador, sem riscos de stack overflow.

Conclusão

Recursão é poderosa, mas perigosa em JavaScript sem suporte a TCO. Linguagens funcionais mostram o potencial real da recursão com suporte de verdade do compilador. Até lá, o JavaScript exige cuidados extra especialmente se você estiver pensando em escrever sem uma boa razão.

Se precisar da performance e segurança de uma stack estável, prefira for, while ou async/await. E se for usar recursão, prefira sempre que possível a forma tail-recursive — ainda que o motor JS não otimize, seu código será mais claro, testável e portável.

Referências

• Eloquent JavaScript, 3rd Edition

• Tail Call Optimization in ES6 (2ality)

• ES6 Compatibility Table (Kangax)

• Async recursion in JavaScript (Scott Logic)

O README.md já era um arquivo essencial para documentação de projetos, mas agora ele também pode ser utilizado para apresentar quem você é no GitHub. Com a possibilidade de fixá-lo no perfil, podemos ser criativos e transformar esse arquivo em um verdadeiro portfólio interativo.

Neste artigo, vamos explorar algumas ideias e dicas para você criar um README.md pessoal que realmente se destaque!

1. Formatação Básica

O Github na verdade tem um markdown proprio chamado GitHub Flavored Markdown (GFM), que é basicamente um markdown with steroids.

Você pode checar a documentação aqui https://github.github.com/gfm/

Mas além disso, você ainda pode usar HTML dentro do seu markdown, o que possíbilita modificar tamanho de imagem e o alinhamento dos elementos.

MAS ainda assim o markdown é bem sanitizado pelo github o que faz com que boa parte das propriedades e tags não funcionem principalmente a tag style que possibilitaria colocar estilos mais dinamicamente 😢

Algumas tags possíveis são: address, article, aside, base, basefont, blockquote, body, caption, center, col, colgroup, dd, details, dialog, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hr, html, iframe, legend, li, link, main, menu, menuitem, nav, noframes, ol, optgroup, option, p, param, section, source, summary, table, tbody, td, tfoot, th, thead, title, tr, track, ul .

Essa limitação deixa aberto para sermos criativos em que elementos vamos usar!!

Headers

# Sou uma tag `<h1>`
## Sou uma tag `<h2>`
###### Sou uma tag `<h6>`

Destaques de Texto

*Texto em itálico*
**Texto em negrito**
~~Texto riscado~~

Citações

> Isso é uma citação

Divisórias

Listas

Tecnologias que eu mais gosto
  - Python
  - Javascript
    - React

Código

// Bloco de código
```
const name = "Ana Luiza";
```

// ou inline
`const age = 29`

Links e Imagens

[Texto do Link](https://www.exemplo.com)
![Texto Alternativo](https://github.githubassets.com/images/modules/profile/badge--acv-64.png)

Tabelas

Voce pode usar tabelas para descrever também experiencias, ferramentas e skills.

https://github.com/sw9brl em 24/08/2020

Mais sobre formatação: Mastering Markdown

2. O Que Incluir no Seu README?

Sobre Você

• Quem você é? Onde trabalha ou estuda? O que voce se interessa? O que anda estudando? Que tipo de projetos voce costuma colaborar? Qual sua stack? Está procurando por emprego ou freelance? O que anda estudando? Qual seu objetivo?

• FAQ, Curriculo, Experiencias de trabalho, Projetos pessoais, interesses, quais seus valores, tecnologias que voce usa, como voce costuma trabalhar?

Exemplos de Estrutura:

Características Sobre Mim

- 🔭 Trabalhando atualmente em projetos open source
- 🌱 Aprendendo mais sobre DevOps e Cloud
- 💬 Me pergunte sobre React, Golang e banco de dados

Tecnologias Que Eu Mais Gosto

- 🖥️ Backend: Golang, Node.js
- 🎨 Frontend: React, Vue
- 🗄️ Banco de Dados: PostgreSQL, MongoDB

Objetivos 2024

- [x] Contribuir para um projeto open source
- [ ] Criar meu próprio curso online

3. Como Deixar Seu README Mais Interativo

Adicionar Videos

O readme.md não suporta videos, MAS suporta tags a, então podemos linkar o embbeded do video ao video em si.

<a href="http://www.youtube.com/watch?feature=player_embedded&v=ID_DO_VIDEO
" target="_blank"><img src="http://img.youtube.com/vi/ID_DO_VIDEO/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Emojis 😎

Adicione emojis para dar mais personalidade ao seu README! Use :emoji: para inserir emojis.

Aqui tem um cheat sheet com todos os emojis!

emoji-cheat-sheet/README.md at master · ikatyang/emoji-cheat-sheet
A markdown version emoji cheat sheet. Contribute to ikatyang/emoji-cheat-sheet development by creating an account on…github.com

Badges 🏆

Use Shields.io para criar badges personalizados:

![GitHub followers](https://img.shields.io/github/followers/seuusuario?style=social)

O codewars também disponibiliza badges para mostrar sua pontuação na ferramenta.

Se voce costuma colaborar com o open source nada mais justo do que deixar claro como as pessoas podem te ajudar.

Faz sentindo criar links para Donates como paypal, patreon, gratipay etc.

GitHub — Naereen/badges: Markdown code for lots of small badges (shields.io, forthebadge.com etc) …
pencil: Markdown code for lots of small badges :ribbon: :pushpin: (shields.io, forthebadge.com etc) :sunglasses…github.com

Estatísticas 📊

Use GitHub Readme Stats para mostrar suas estatísticas automaticamente:

![Estatísticas do GitHub](https://github-readme-stats.vercel.app/api?username=seuusuario&show_icons=true)

Gifs e Imagens Customizadas 🎨

Crie ilustrações, icones ou gifs personalizados e adicione ao seu README:

Gifs

Algumas dicas:

• Use Recordit para criar gravações de tela do seu desktop e exporte como GIFs.

Gravação da sua tela

• Voce também pode gravar sua sessão no terminal com o ttystudio que também suporta exportar paraGIFs.

Gravação do terminal

• No giphy ao clicar no “ Stickers” você consegue achar gifs com fundo transparente.

Imagens

A maneira mais segura de manter os arquivos é criar uma pasta screenshots, github, assets, resources ou nome que você quiser e deixar os arquivos nela. Se você usar um CDN de imagens ou gif pode funcionar mas corre o risco do quebrar o link algum dia.

Usar a tag img do html possíbilita que possamos dinamizar um pouco mais as imgs.

Supondo que você tenha criado uma pasta assets no seu projeto e tem o arquivo banner.png, é assim que você pode adicionar a imagem:

<h1 align="center">
  <img alt="NextLevelWeek" title="#NextLevelWeek" src="./assets/banner.png" />
</h1>

Com o align center a imagem fica centralizada

Podemos editar o tamanho das imagens também se usarmos a tag

<img align="right" height="200" src="https://github.com/rajput2107/rajput2107/blob/master/Assets/Developer.gif"/>

Alguns exemplos legais são de githubs que criaram ilutrações legais deles mesmos para personalizar o readme.md:

Alguns exemplos legais de ilustrações de si mesmo

Com isso podemos também colocar icones que linkem para nossas redes sociais ou para tecnologias que gostamos

Ou então hospedar os slides em algum lugar e postar apenas a primeira pagina deles.

<img align="right" height="200" src="https://github.com/rajput2107/rajput2107/blob/master/Assets/Developer.gif"/>

Para usar icones ou ilustrações use ferramentas como:

• Flaticon

• Simple Icons

• Canva

Redes Sociais 🌍

[![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=flat-square&logo=linkedin)](https://www.linkedin.com/in/seuusuario)
[![Twitter](https://img.shields.io/badge/Twitter-blue?style=flat-square&logo=twitter)](https://twitter.com/seuusuario)

Tecnologias e Ferramentas 🛠️

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
![Python](https://img.shields.io/badge/Python-3776AB?style=flat-square&logo=python&logoColor=white)
![Java](https://img.shields.io/badge/Java-007396?style=flat-square&logo=java&logoColor=white)
![Golang](https://img.shields.io/badge/Go-00ADD8?style=flat-square&logo=go&logoColor=white)

https://github.com/Sancho41

Projetos em Destaque 🚀

Destaque seus melhores repositórios:

[![Repo](https://github-readme-stats.vercel.app/api/pin/?username=seuusuario&repo=seurepo)](https://github.com/seuusuario/seurepo)

4. Dicas Extras para SEO

• Adicione palavras-chave relacionadas ao seu nicho

• Inclua seu nome completo em texto

• Linke para redes sociais, portfólio e projetos

• Atualize regularmente

Conclusão 🎯

O README.md do seu perfil no GitHub é uma grande oportunidade de destacar suas habilidades, experiências e paixões. Personalize-o, torne-o único e mostre ao mundo o que você sabe fazer!

E aí, pronto para atualizar o seu? 🚀

Se fosse apenas para ler documentação, ninguém precisaria assistir a uma palestra! O objetivo principal de uma apresentação não é fazer com que as pessoas saiam sabendo 100% do conteúdo, até porque ninguém consegue absorver tudo de uma vez. O foco deve ser:

✅ Que as pessoas entendam minimamente sobre o assunto e sua proposta. ✅ Que despertem interesse ou não pelo tema.
✅ Que saibam onde buscar mais informação caso queiram aprofundar.
✅ Que compreendam como o conteúdo pode ser aplicado em seus desafios profissionais.

Conteúdo 📚🎯

A ideia principal é transformar teoria em algo palpável!

Simplesmente repetir documentação só faz sentido se você for explicar de uma forma diferente ou mais acessível. As palestras ajudam a tornar o conteúdo mais tangível, e conectar conceitos teóricos com casos reais sempre funciona melhor. Algumas dicas:

🚀 Tecnologias novas ou de nicho são instigantes e incentivam as pessoas a explorarem mais.

🧐 Mostrar o conteúdo para amigos da área antes da palestra pode ajudar a identificar dúvidas comuns.

🙌 Palestras superficiais também têm valor! Elas dão acessibilidade para quem ainda não conhece o tema.

📝 Tenha certeza de que você realmente domina o assunto e que seu conteúdo é relevante.

🎨 Ferramentas para Criar Apresentações

Uma forma simples e prática de criar apresentações é usando o Google Slides. Ele permite:

✅ Criar e organizar slides rapidamente.
✅ Adicionar notas de apresentação.
✅ Criar animações.
✅ Compartilhar com organizadores e colaboradores para revisão e feedback.

Mas existem outras opções bem interessantes, dependendo do seu estilo:

🚀 Marp — Markdown + slides bonitos com suporte a código.
🌐 Reveal.js — Framework HTML para criar slides interativos com syntax highlighting.
🍏 Deckset (Mac) — Transforma Markdown em apresentações, ótimo para desenvolvedores.
📜 Beamer (LaTeX) — Para apresentações acadêmicas sofisticadas.
🖥️ LibreOffice Impress — Alternativa open-source ao PowerPoint.
📝 Org-mode (Emacs) — Permite criar apresentações diretamente no Emacs, ideal para quem já usa essa ferramenta.

Se você gosta de ferramentas mais dinâmicas, pode explorar:

💡 Pitch — Apresentações colaborativas e modernas.
🎭 Prezi — Apresentações não-lineares e dinâmicas.
⚡ Canva — Opção visualmente rica e fácil de usar.

💬 Textos

Ninguém quer ler um monte de texto durante uma palestra, até porque, se fosse para ler, seria mais fácil pegar um livro! 📖

🔹 É muito difícil engajar pessoas com blocos enormes de texto.
🔹 Use bullet points apenas como guias para destacar os principais tópicos. 🔹 Explique com suas próprias palavras em vez de seguir um script fixo.
🔹 Se você ler um slide palavra por palavra, pode parecer que não domina o assunto.
🔹 O ideal é que os slides complementem a sua fala, não que sejam um teleprompter!

🎨 Abusar de imagens e animações

Referências visuais sempre ajudam a manter o público engajado.

Sempre que possível coloque GIFs ou imagens engraçadas para manipular a reação do público ao conteúdo(mostrar surpresa, ou frustração sobre algum tema)

📝 Trechos de Código

• Devem ser curtos e legíveis.

• Se forem complexos, mostre o passo a passo de modificação.

• Nada de paredes de texto! Isso só afasta a audiência.

Uma ideia é usar o Carbon, que gera imagens estilizadas de código para apresentação.

Limite Sua Apresentação ⏳

Claro que é legal falar um pouco sobre você, sua empresa e seu background. Mas a palestra não deve virar uma propaganda!

🚫 Não transforme o evento em um pitch sobre sua empresa ou sua carreira.
✅ Dê uma passada rápida no início ou final sobre você e pronto.
🎟️ Respeite o tempo do público, que pode ter investido dinheiro e tempo para aprender algo novo.

Live Coding 💻⚡

Live coding é incrível, mas pode ser um grande desafio. Principalmente pois tudo que pode dar errado VAI DAR ERRADO. Algumas dicas:

📌 Sempre deixe uma cola com os trechos do codigo
📌 Funciona sem internet? Funciona se fizer o setup do zero em um computador novo? Esses imprevistos sempre surpreendem!
📌 Não use fontes pequenas! Use uma fonte BEM GRANDE.
📌 Prefira REPLs ou ferramentas interativas a apenas navegar por código estático.

Ferramentas de Apresentação com Suporte a Código

1. CodeTour (VS Code) — Faz guias passo a passo interativos dentro do VS Code.

2. Replit — Permite rodar e demonstrar código diretamente no navegador.

3. Jupyter Notebooks — Perfeito para Python e dados, combina código e explicações no mesmo lugar.

4. asciinema — Grava sessões de terminal e permite reproduzir sem medo de errar.

5. Glow — Exibe Markdown direto no terminal, ótimo para destacar comandos.

Perguntas ❓💡

Perguntas não devem ser um motivo de medo! Algumas dicas para lidar com elas:

🔹 Reflita sobre o público: o que ele pode querer saber? Como pode aplicar esse conhecimento?
🔹 Se você não souber responder, tudo bem! É normal. Seja honesto e indique fontes para pesquisa.
🔹 Nenhuma resposta é “lei”! Sempre deixe claro que pode haver diferentes opiniões ou abordagens.

Conclusão 🎯

Dar palestras é uma ótima forma de compartilhar conhecimento, se conectar com a comunidade e aprender mais. Com um bom planejamento, um formato envolvente e respeito pelo público, você pode transformar qualquer tema técnico em algo realmente impactante! 🚀

Recentemente tiveram atualizações que mudaram completamente a forma como lidamos com notificações no Github. Mas a maioria das pessoas que já estavam por lá antes disso, que já não davam tanta bola para notificações, hoje tem o problema de terem uma quantia desnecessária de ruído .

Trocentas notificações que sequer soubemos da onde vem.

Isso fica pior quando você tem organizações, times, tanto de empresas quanto de projetos pessoais, open source etc que são heavy users. Eu por exemplo estava com o inbox assim:

Então eu perdia o que eu realmente queria saber, como interações importantes do meu time ou PRs de projetos pessoais e via demais sobre o que eu não queria saber, tipo conversas de alguma issue aleatória de algum projeto que eu nem lembrava mais o que era.

O papel aqui é de ser similar a uma Marie Kondo em nossas notificações. Bora lá?

Inscrições

Toda vez que você conversa em alguma issue, pull request ou alguem @menciona o seu username você está participando de uma conversa e portanto fica automaticamente fica inscrito nela como participante. E por default recebemos notificações toda vez que estamos participando de algo.

Então você pode até hoje receber notificações de issues de muito tempo atrás e pra se livrar dela precisa não se esquecer de clicar para dar unsubscribe na issue em si assim que você vê-la.

Mas para ter uma visão geral de tudo que você está inscrito basta entrar no Settings > Subscriptions e selecionar as issues que você quer dar unsubscribe 🔕.

Nessa listagem dá pra filtrar por mais antigos, ou por repositório também.

Pessoalmente essa é a parte mais chata de tudo. Eu por exemplo, deixei acumular muuuita coisa e o "selecionar tudo" pegava apenas 25 das inscrições, então tive que ir de 25 em 25.

Mas posso garantir que ver essa lista limpa valeu a pena pois agora posso organizar o que estou participando de verdade ou não!

Ah! Lembrando que você também recebe notificações de gists caso você seja um autor ou alguém te mencione. Mas claro, você também pode dar subscribe ou unsubscribe no botão bem do todo de qualquer gists.

Assistindo

Bem ao lado existe a pagina de Watching 📺. Esta pagina mostra todos os repositórios do Github que você assiste.

Quando você assiste um repositório tudo que interagirem você vai ser notificado, desde comentários, issues, mudanças de estado de issues, PRs etc e você vai notar que nessa lista deve incluir repositórios que você é dono ou chegou a dar fork.

Então por exemplo, ao mesmo tempo que eu eu assistia repositórios que eu interagi anos atrás , os quais eu sequer me importava ativamente com as atividades atuais e principalmente TODAS as interações que estavam acontecendo nele, eu não assistia repositórios os quais eu era realmente responsável em organizações e que muitas vezes tinham pull requests que eram abandonados 🕸🦇.

No botão de watch podemos escolher entre receber notificações normais de participação(ex: marcações), efetivamente assistir tudo, ignorar completamente, como também pode customizar o que exatamente importa ou não no custom.

Então eu posso selecionar o que exatamente quero ser notificada, isso supre a necessidade de você só quer receber notificações de coisas importantes como PRs e issues.

Então é bom repensar o que importa e o que não importa e que tipo de notificações fazem sentido. Se você passa o olho e ignora talvez você deveria considerar para de assistir. Does this spark joy??✨

Se não, por que você precisaria estar inscrito em conversas especificas desse repositório?

É importante também não se deixar cair pelo FOMO(Fear of missing out), que é a ideia de você ter medo de estar "perdendo alguma coisa" e achar que precisa ter controle sobre tudo! 📵

Algumas perguntas boas são:

• Se você não colabora nesse projeto há anos será que um dia você vai mesmo voltar a ser ativo por lá?
• Será que você pode aceitar que não faz sentido cuidar do seu projeto pessoal antigo?
• Seu projeto incompleto precisa mesmo te assombrar até hoje?

Caso você seja dono de algum projeto open source você também pode empaticamente ver se alguma issue, commit ou pull request é irrelevante e dar "Lock" na conversa. Isso evita futuras notificações não só pra você mas pra todas as pessoas.

Você pode encontrar o cadeadinho no canto inferior direito do que você quer bloquear 🔓.

Times

Outra fonte de notificações desnecessárias são times 👯‍♀️. Caso seu time seja marcado em alguma discussão você recebera notificações para todas as respostas. Além disso sendo code owner de algum projeto ou parte do código você fica como participando de tudo envolvido.

Em alguns casos isso é razoável mas em times grandes ou que tem muitas marcações de reviews, discussões etc vale a pena dar unfollow no time inteiro e manter o watch apenas em repositórios ou conversas que fazem sentido acompanhar.

Para ver os times que você é membro entre na organização do Github que você participa, clique na aba "Teams" dentro dos "Membros" da organização. Seria esse link: https://github.com/orgs/<nome da organizacao>/teams e dentro do time aperte no botão de dar unwatch.

Talvez o seu grupo da faculdade, ou organização de que você não é ativo mais não são relevantes pro desenvolvedor que você é hoje!

Não hesite em agradecer mentalmente pela oportunidade 🙏 e sair dele.

Inbox

Agora que já temos uma ideia sensata de como lidar com suas notificações falta saber lidar com elas.

Essa é a tela de notificações, você pode acessa-la pelo sininho no lado superior direito do seu github. Nela temos um inbox similar a seu email com todas as notificações.

Ainda bem que clicando em selecionar tudo você pode de fato selecionar todas as notificações do inbox.

Doi um pouco o coração mas recomendo simplesmente deletar tudo e aceitar uma nova vida de notificações ao seu Github 🌈 yay.

Triagem e filtros

Ao entrar no inbox não se esqueça de clicar nesse botão

Ele agrupa tudo do inbox por repositórios e isso deixa tudo muito mais claro.

O procedimento de triagem padrão é:

• Você vê a notificação no seu inbox
• Caso você tenha visto você marca como DONE, o que tira ela do inbox.
• Caso você saiba que essa notificação tem alguma relevancia e quer salvar para ver depois existe a ação de SAVE.
• Caso não faça sentido a notificação pra você pode ver A RAZÃO e em seguida dar unsubscribe naquilo que não faz sentido pra você.

Filtrando pela razão você pode facilmente saber sobre o que foi essa notificação, se foi marcação, mudança de status etc. Sabendo a razão para estar recebendo pode ser bom para saber o que vc precisa dar unwatch ou não.

Na pagina de notificações temos alguns filtros automáticos, que são:

• 🎯 Assigned: Notificações de PRs que você fez ou issues que você é responsável.
• 🗣 Participating: Notificações daquilo que você já comentou, foi marcado ou faz parte.
• 🖐 Mentioned: Notificações de pessoas especificamente te marcando.
• 🙌 Team Mentioned: Notificações de pessoas especificamente marcando o time marcando.
• 👀 Review requested: Tudo que precisaria do seu review seja pessoal ou do seu time.

Eu também criei alguns filtros personalizados por exemplo:

Um para minha organização

org: Um para o repositório especifico repo:/ Para menções me um repositório especifico repo:/ reason:mention

Vi que futuramente vai sair o filtro por type e o state Sendo type o tipo como PR ou issue e state se está fechado, mergeado ou aberto.

Então por exemplo, para filtrar todos os PRs abertos de repositórios

type:pr state:open repo:anabastos.

Estou ansiosa para essa feature! 💕

Configuração

Por default, sempre que você tiver acesso a um novo repositório você automaticamente vai assistir esse repositório, e sempre que você entrar em um time novo você vai automaticamente ser inscrito todas as atualizações relativas ao time.

Mas dentro dos seus Settings -> Notifications você tem a opção de desmarcar essa configuração de assistir automaticamente.

Desmarcar essas opções é altamente recomendado porque você passa ter muito mais controle sobre o que quer ver ou não.

Nesta página de configurações você também pode configurar os seus emails, eu no caso não gosto de receber emails com esse tipo de notificação mas vi que existem pessoas que gostam de separar as notificações que recebem no Github e no Email, e na verdade até preferem via email porque ele tem a informação no próprio header, portanto pelo próprio Gmail por exemplo, você pode configurar as filtragens das notificações similar a este Gist que eu achei.

Você pode ver mais sobre isso também na própria documentação do Github.

Espero que tenha sido útil pra você esse post e que ajude na sua produtividade no geral no Github ✨🐙

Olá programadores místicos. Decidi ler o tarot das principais tecnologias mobile espero que vocês gostem.

IOS / Android Nativos

O Mago

Seu robe é branco simboliza a pureza, o nativo, e sua capa é vermelha simbolizada a sabedoria sobre tudo.

Um mão para cima direcionando para o universo, o software, e outra para baixo apontando para o hardware.

Isso nos mostra a conexão entre os dois que nada mais é do que a interface mais direta com o celular e seus recursos. Significando uma conexão mais fácil com cada um dos tipos de smartphones de apple a android. O mago tem controle sobre tudo que está acontecendo e isso em desenvolvimento nativo nos trás controle.

Na mesa do mago vemos RECURSOS. Todo o conhecimento de tecnologia adquirido com o passar dos anos está ao dispor do mago e seus recursos são o suficiente para criar e manifestar aplicações. Basicamente tudo necessário na ponta de seus dedos.

O desenvolvedor nativo não é motivado pelo ego ou pelo hype mas sim com a conexão espiritual entre seu objetivo e suas intenções. Seu comprometimento é essencial e descarta qualquer distração para o que ele quer alcançar.Tenha certeza de se manter nos trilhos e se alinhar com o seu poder maior.

Ionic / Cordova

O louco

Na gravura do louco vemos uma pessoa na beirada da montanha, distraída olhando para o céu está pronta para pular do precipício do desconhecido: As aplicações híbridas.

Em suas costas, uma sacolinha modesta, um pouco conhecimento de JS e DOM aqui e ali. A rosa branca em sua mão esquerda representa sua pureza e inocência de achar que criar uma webview seria uma boa ideia.

Em seu pé, surpreendentemente temos um cachorro leal o protegendo que é a sua comunidade o seguindo sem muita reflexão sobre suas escolhas.

As montanhas atrás do louco simbolizam os desafios, que estão sempre presentes, as quais o Louco não liga. Ele não tem medo ou ansiedade sobre performance ou sobre como as coisas serão padronizadas de celular para celular. Ele fez um curso de Angular na net, o cliente falou “preciso de um app” e ele só encapsulou o que ele sabia e isso foi o suficiente pois ele entregou no prazo.Para o louco a hora é agora.

O louco nos convida a aceitar a vida como ela é. Até spotify e atom são grandes webviews e talvez devemos abraçar mais a produtividade e a liberdade de um cordova.

Flutter

A temperança

Na carta temos um anjo com um pé nas pedras e outro na agua, mostrando a necessidade de estar fluindo ao mesmo tempo de estar sobre bases sólidas. Temperança simboliza um meio de alcançar todas as perspectivas de forma não opinionada ou controversa.

A temperaça não é sobre algo extremamente novo mas sim algo que já temos experiência e estamos familiares. A ideia do Flutter não é algo extremamente revolucionário, mas sim similar com algo que Xamarim por exemplo já fazia. Dart também não é uma linguagem nova, ela é uma filha perdida da Google que já havia sido abandonada antes mas é muito similar ao Javascript, que já conhecemos amplamente, mas com muito mais estabilidade .

O anjo derrama agua entre os copos simbolizando misturas de técnicas e estilos. Essa harmonia de experiências é o crescimento e estabilidade que o Flutter nos trás e mostra que não é sobre correr ou re-inventar a moda mas sim garantir o melhor resultado de acordo com suas experiências.

No fundo da carta temos um caminho para uma montanha com o topo brilhante mostrando que quem o usa está no caminho superior e sendo honesto com sua proposta.

React Native

O carro

O carro mostra um guerreiro dentro de uma carruagem vestindo uma armadura representando o esforço e o refinamento da biblioteca para estar no mercado como umaopção fortissima para o desenvolvimento mobile.

A folha de louro mostra o sinal de vitória, sucesso e evolução espiritual nos mostrando tudo que tivemos de passar para conseguir desenvolver aplicações cross-native em Javascript e impõe responsabilidade e poder mostrando quem está mandando no mercado.

A estrela de seis pontas em cima da carta é a conexão entre dois planos, a comunidade e a ferramenta, por isso a o React sempre lança coisas que a comunidade já precisava e sentia falta.

O carroceiro representa o Facebook que não tem redeas e fica sempre de pé, tomando ações e indo em frente introduzindo novas funcionalidades. É uma carta ativa e rápida, assim como a comunidade Javascript, vai mudar sua abordagem quando necessário e não tem medo de deprecar todas as bibliotecas comuns!

Na frente da carta vemos duas esfinges, temos a as forças opostas: o branco e o preto, o negativo e o positivo, o componente em classe e o componente funcional stateless.*O conflito e a dualidade faz com que a carroça sempre vá pra frente agradando quem for.*

Outras ferramentas podem tentar distrair ou tirar o React Native de foco mas a carroça é um convite para quebrar os limites do Javascript e da Web.React Native vai se manter bem no mercado por um bom tempo.

Se você quer ser ousado, expressar o que você quer sem medo de se prender conte com o React Native pois nada é mais dinâmico e aberto para novos estilos e ferramentas como o ecossistema Javascript.É um caminho sofrido*(uma curva de aprendizagem tortuosa e cheia de erros de terminal misteriosos) porém cheio de gloria(bons salários por falta de profissionais)*

ReasonML?

Tirei essa carta como uma aposta pessoal para um futuro.

Temos um lindo ecossistema similar a Javascript, em que além de contarmos com um sistema de tipos ótimo conseguimos compilar aplicações nativas para qualquer coisa de forma extremamente otimizada. Quais as chances de no futuro termos uma opção popular OCaml like para desenvolvimento mobile?

O Enforcado

O enforcado mostra um homem suspenso em uma cruz de madeira de cabeça pra baixo vendo o mundo de uma perspectiva completamente diferente. Sua expressão facial é tranquila e serena mostrando a falta de preocupação com erros em runtime, a auréola em sua cabeça mostra sua iluminação. E qual a razão de tamanha consciência? um compilador muito bom.

A carta representa o sacrifício e a rendição ao bem maior.Seu pé direito está amarado a origem, o OCaml e a familia ML que nós provê um refinamento de 50 anos, e o seu pé esquerdo solto mostrando sua ligação o Javascript, um interop e uma sintaxe familiar.Sua veste o azul mostra sabedoria, os tipos, e o vermelho de sua calça mostra a paixão, a programação funcional.

O enforcado convida a receber a realidade como ela é mesmo quando ela é completamente diferente do que você esperava. É o universo te convidando para olhar para computação de forma diferente e te preparando para o melhor da vida.

— — — — — — — — — — — — — —

Sim, eu realmente tirei essas cartas.

Essa semana vou tirar sobre Frameworks Javascript. Me aguardem.

Espero que você tenha gostado do artigo 💙💚❤️🧡💛

Quem gostou bate palminha pra que essa mensagem alcance outros amiguinhos.

👏 👏 👏 👏 👏 👏 👏 👏 👏*OBS: As diferenças entre os desenhos e a interpretação são pq as imagens são do tarot de Marselha e o meu é outro.*

A proposta

Foram confirmadas recentemente as novas propostas de funcionalidades que chegaram no estágio 4 do ECMAScript, significando que estarão na proxima especificação oficial e terão sua implementação na linguagem!!

Dentre elas temos dois novos bebês ❤ chamados Array.prototype.flat() e o Array.prototype.flatMap(), baseados na proposta do Michael Ficarra, Brian Terlson, Mathias Bynens. Mas qual a importancia deles e como podemos utiliza-los?

O flatMap*(Muitas vezes chamado de concatMap ou >>= em outras linguagens) é um pattern comum que vem da programação funcional de linguagens como Scala ou Haskell. Esta operação de array* pode nos ajudar solucionar problemas em que temos de iterar por exemplo, arrays com itens complexos. Você pode já ter ouvido falar de implementações similares de Flatmap por exemplo no RxJS para lidar com Observables.

Mas diferente de outras linguagens, que utilizam o flatMap como uma operação para manipular objetos, strings, tendo usos até mesmo como meio de lidar com valores opcionais e monadas. A sua implementação no Javascript se limita a apenas operações de arrays.

Estamos familiares com funções como o ***map***, filter e reduce que são responsáveis por transformar os elementos do arrays em novos valores a partir de uma função.

.map// [2, 3, 4]filter// [1 , 3]reduce// 6

Similarmente, o flatMap recebe uma função como argumento e funde os conceitos de flat com o já conhecido map*.*

Mas o que é o flat?

Array.prototype.flat()

O Array.prototype.flat(), também conhecido como flatten, tem o intuito de deixar nosso array plano recursivamente em uma profundidade especificada como argumento, ou seja, é uma operação que concatena os elementos de um array.

Por padrão a função de flat planifica em um nível(.flat(1)) como no exemplo:

.flat// [ 1, 2, 3, 4].flat// [ 1, 2, 3, 4, [5, 6]]

Passando o número 2 como argumento a função fica plana em 2 níveis.

.flat// [ 1, 2, 3, 4, 5, 6 ]

Alguns usos praticos do Flat

Concatenando arrays

Supondo dois arrays contendo alguns números que devem ser concatenados em apenas um array.

constconst

Uma forma de fazer isso seria mutar algum destes arrays e utilizar a operação push para inserir os valores do outro array dentro do outro.

.push// [1, 2, 3, 4, 5, 6]

Outro método comum caso eu queria criar um novo array seria utilizar o spread dos arrays dentro de um novo array concatenando seus elementos.

const// [1, 2, 3, 4, 5, 6]

A operação de flat nos introduz uma maneira interessante sem a necessidade de spreads para concatenar o elementos deste array.

flat

Condicionalmente inserindo valores em um array.

Supondo que caso uma condição seja verdadeira, devo inserir um valor dentro de um array.

Uma forma mais sucinta seria ao invés de um “if”, considerar essa condicional na propria criação array, colocando um ternário no proprio array. Caso a condição é verdadeira, insere o valor ‘a’, caso contrário insere null.

constconst?:// ['b', null]

Em condições positivas teremos o elemento esperado ‘a’, mas caso contrário teremos um array sujo com valores “null” e para isso seria necessário de alguma forma filtrar esses valores.

filter// ['b']

Com o flat podemos fazer de forma simples a inserção de valores caso a condição é verdadeira com uma condicional (cond **?** ['a'] **:** []). Pois já que o proprio flat concatena arrays, a concatenação de um array vazio caso uma condição falsa não geraria a insersão de valores desnecessários.

constconst?:.flat// ['b']

Criando uma copia de um array

Quando queremos criar uma copia de um arr mudando sua referencia.

constconstflat// [1,2,3,[4]]// [3,2,3,[4]]

Note que isso vai apenas retornar uma “shallow copy”. Ou seja, objetos dentro do array não serão clonados.

Array.prototype.flatMap()

O flatMap é basicamente um map com flat. Como assim?

Com o map, cada elemento do array é iterado e apartir de uma funçãofretorna um novo array com cada um desses valores transformados. A função fque recebe um elemento input e torna um elemento output.

Com o flatMap, cada elemento é iterado e apartir de uma função f retorna um array de valores. A função fque recebe um elemento input e e cada elemento pode ser transformado em nenhum ou mais elementos de output.

Relação entre Map(One to one) e FlatMap(One to many)

Ambos flatMap e map recebem uma função f como argumento que gera um novo array de retorno com base nos items do array de origem.

Sequencialmente o flatMap seria similar a aplicação de uma função dentro de um map seguido de uma operação de flat planificando o Array.

map//[[1, 100], [2, 200], [3, 300]].flat() // [1, 100, 2, 200, 3, 300]flatMap// [1, 100, 2, 200, 3, 300]

Similarmente, usando o flatMap com uma função identidade(x => x), em que inutilizamos o seu map, temos exatamente o que seria apenas um flat.As seguintes operações são equivalentes:

flatMapmapflatflat

Alguns usos praticos do FlatMap

Filtrar e transformar arraysExemplo 1

Podemos utilizar a operação de flapMap() como meio de filtrar elementos em arrays e transforma-los.

Supondo uma array de numeros de 1 a 10.

const

Queremos transformar este array em apenas numeros antecessores de numeros primos. Supondo que eu tenho uma função isPrime que me retorna verdadeiro ou falso caso o numéro é um primo. Podemos primeiramente utilizar a função filter para filtrar os valores em apenas primos*.*

filterisPrime// [2, 3, 5, 7]

Porém para listar os antecessores do array teriamos de novamente iterar pelos itens para retornar um novo array com cada valor subtraido por 1.

filterisPrimemap// [1, 2, 4, 6]

Com o flatMap podemos fazer ambas as operações em apenas uma iteração de array em que com uma operação ternária retornamos ou um array com o valor subtraido por 1 ou uma array vazio.

flatMapisPrime?:// [1, 2, 4, 6]

Sendo assim: é um map, que iteraria os 10 elementos do array e geraria 10 arrays, seguido de um flat planificando em apenas um array:

map// [[],[1],[2],[],[4],[],[6]..]flat// [1, 2, 4, 6]

Exemplo 2

Tenho um array de ids de objetos e uma propriedade booleana indicando se este item deve ou não ser listado, se sim devo dar fetch nesta propriedade.

constidtoListidtoList

Sem o flatMap uma solução viavel seria utilizar o filter para filtrar caso a propriedade toList é verdadeira e em seguida seria necessário utilizar um map para efetivamente dar fetch nesses ids.

filtermap// [Promise]

Com apenas um flatMap podemos resolver este problema criando uma função em que caso o toList é verdadeiro ele retorna um array com o fetch do id, caso contrário retorna um array vazio que será concatenado.

Promise.allflatMap// [...]

Exemplo 3

Podemos usar para extrairmos apenas um tipo de dado de um objeto em tratativas. Por exemplo, em um array de objetos cuja tratativa de erros de um try / catch retorna apenas os valores dos resultados ou apenas os erros.

tryreturncatchreturn

flatMap pode ser nosso aliado para podermos extrair apenas os erros ou apenas os valores especificos destes resultados por meio de uma operação ternária:

constflatMapconstflatMap

Pegando elementos de um array de objetos com arrays aninhados.

Supondo que tenho um array de objetos de cestas de frutas em que dentro do objetos listamos em “itens” as frutas dentro da cesta.

constiditensMaçaBananaiditensBananaAbacaxi

Se quero listar todas as frutas dentro de cestas no map seria necessário iterar pelo array e pegar a propriedade “itens” de cada objeto.

map// [Array(2), Array(2)]

Apenas com o map teriamos arrays de arrays.

flatMap// [“Maça”, “Banana”, “Banana”, “Abacaxi”]

Com o flatMap já temos a concatenação dos elementos do array e conseguimos obter todos os elementos listados dentro de objetos.

Indexando em lista

Supondo uma lista de compras, para listá-las entre vírgulas em um componente “GroceryList” podemos utilizar o flatMap. A função cujo metodo recebe pode ter um segundo argumento com o index do array assim como o map ou filter. Por exemplo:

.map// ['0Foo', '1Bar']

Quando retornamos um array desta função, os seus elementos são concatenados e podemos adicionar elementos condicionais (como por exemplo, a vírgula após o primeiro elemento da lista).

classextendsrenderconstthisreturnflatMapfoodindexindexindexfoodfood

Suporte de Navegadores

O flat e o flatMap já estão com suporte nos principais navegadores(Chrome 69, Firefox 62, Opera 56, Safari 12, Android WebView 69) e na versão 11.0.0 do NodeJs ❤️🧡💛💚💙💜.

É possivel tambem importar proposals pelo Babel 7. Pelo FlatMap já estar em stage 4 é preciso importar especificamente a funcionalidade.

Conclusão

Cada vez mais vemos mudanças para agradar todas as formas / paradigmas do Javascript. Desde 2015 vemos a linguagem suportando outros estilos de orientação a objetos, e agora vemos a adição de elementos comuns de linguagens funcionais como FlatMap e quem sabe futuramente o Pipeline Operator, Pattern Matching e Partial Application 🤞.

Espero que você tenha gostado do artigo ❤

Quem gostou bate palminha pra que o artigo alcançe outros amiguinhos.👏 👏 👏 👏 👏 👏 👏 👏 👏

Todo ano uma nova versão da especificação ECMAScript sai com as propostas de features, para isso o comitê da TC39 faz um exaustivo processorefinando as propostas até serem serem aceitas e passaram para seu estado final,o stage 4, que define o que estará presente no proximo draft.Essas features serão consideradas estáveis assim que dois navegadores as implementarem.

Esse processo garante uma melhora constante no estado da arte do Javascript 👩‍🎨.

Todas as features para a especificação de 2020(ES2020) **estão finalizadas,**significando que estão prontas para serem implementadas em navegadores, engines e ferramentas!

➡️ BigInt➡️ Classes Privadas➡️ Optional Chaining➡️ Nullish coalescing Operator➡️ String.prototype.matchAll➡️ globalThis➡️ for-in mechanics➡️ Promise.allSettled➡️ Dynamic Imports➡️Module Namespace Exports➡️ import.meta

As propostas 🖋

BigInt 🧮

Quem está habituado a usar números em JS já sofreu muito em relação a limitação do seu tipo number, que não passa de um double de 64 bits, tendo assim uma limitação de até um certo número que podemos fazer operações de forma “segura”.

// Número máximo seguro no JS
Number.MAX_SAFE_INTEGER // 9007199254740991

Para isso é comum dependermos de bibliotecas externas para tentar lidar de forma mais segura com valores altos.

BigInt é agora o sétimo tipo primitivo dentro da linguagem, servindo somente pra lidar somente com precisão de inteiros. Pois uma variável deste tipo pode representar 2⁵³ números.

Com a nova especificação podemos indicar o tipo BigInt somente colocando uma letra n no final do número, denotado para a engine Javascript(v8 ou qualquer outra) como o número ser tratado.

const numeroGrande = 100000000000000000000000000000n;
console.log(numeroGrande * 2n); // 200000000000000000000000000000n

Podemos fazer casting para esse novo tipo desta forma.

console.log(BigInt(Number.MAX_SAFE_INTEGER))
// 9007199254740991n

É importante lembrar que essa coersão de Number para BigInt pode causar perda de precisão então o ideal é já definir números como BigIntquando se tem a certeza que eles podem ser grandes.

BigInt já foi implementado nos maiores navegadores como Chrome, Firefox, opera e a versão 10.4 do Node.js e está bem estável ✅

📖Especificação🗼Plugin Babel

Classes Privadas 🔒

JS sempre foi uma linguagem orientada a objetos mas por sua implementação com base em protótipo ao invés de classes, apesar de termos a sintaxe especial de Classdesde de a ES2015, por conflitos de decisões de implementação não tínhamos como fazer métodos ou campos privados nativamente.

Quando usamos classes em Javascript temos como padrão nomear elementos privados com um _na frente como meio de diferenciação.

Com a nova especificação colocar o sinal de #na frente da variável ou função já vai definir que o não se deve ter acesso a ele em outros contextos além da própria classe.

Apesar de parecer contra intuitivo, essa decisão se deve exatamente ao fato de que muitas bibliotecas já aderiram o sublinhado _ como meio de marcar campos privados, sendo um meio de evitar alterações já existentes.

Isso pode causar um estranhamento também pra quem vem do Typescriptcuja sintaxe já amplamente conhecida para definir se algo é privado também é o _ .

Dessa forma podemos escrever classes similares a essa:

class Counter {
  #x = 0;             // Define uma variável privada
  increment() {
    this.#x++;        // Incrementa a variável privada
  }
  decrement() {
    this.#x--;        // Decrementa a variável privada
  }
  getX(){
    return this.#x;
  }
}const c = new Counter();console.log(c.getX()); // 0 -> Valor é exposto pelo metodo getX

Tentar pegar o valor da variável privada diretamente não é viável pois ela não pode ser acessada fora do contexto da classe.

c.#x => 🙅‍♀Uncaught SyntaxError: Private field '#x'

Os métodos modificam o campo x e o resultado final retornado por por getX é o valor -1.

c.increment(); 
c.decrement();
c.decrement();
console.log(c.getX()); // -1 -> Valor é modificado e depois exposto

Supondo que no meu exemplo não quero que o contador chegue em valor abaixo de 0 e quero criar uma função auxiliar privada para fazer essa verificação.

class Counter {
  #x = 0;     
  increment() {
    this.#x++;       
  }
  #isPositive() {
    return this.#x > 0
  }
  decrement() {
    if (this.#isPositive()) this.#x--;  
  // Chama o método privado para verificar se o valor x é positivo
  }
  getX(){
    return this.#x;
  }
}const c = new Counter();

Assim como a propriedade privada, não posso chamar o método novo fora do contexto da classe.

c.#isPositive() => 🙅‍♀Uncaught SyntaxError: Private method '#x'

Desta forma ao chamar a função decrement podemos ter a garantia que nosso valor não será negativo.

c.decrement();
console.log(c.getX()); // 0

Isso é de extrema importante pois até então tínhamos dificuldade de seguir os princípios de SOLID pois não tínhamos como suprir o Open/Closedprinciple.

Essa feature já está na ultima versão do Chrome e do Node v12.

📖Especificação🗼Plugin Babel

Optional Chaining Operator ❓

Quem nunca passou ou ouviu falar do famoso “Cannot read property of undefined”? Javascript pode ser tricky quando estamos lidando com valores nulos ou undefined.

Pelo dinamismo do Javascript precisamos muitas vezes fazer múltiplas verificações para conseguir pegar propriedades de qualquer objetopara tentar evitar receber um erro pois uma delas está nula.

Supondo um objeto com dados de um "usuário" que pode*(ou não)* conter informações do perfil de uma pessoa.

user // undefined
user.profile // Error : Cannot read property of undefined
user.profile.name // Error : Cannot read property of undefined

Quando tentamos pegar a propriedade de um objeto, o código espera que seja um objeto válido, jogando um erro caso o seu valor seja inesperado.

Quando não temos a garantia dos valores e temos de pegar por exemplo, uma propriedade name em segundo nível do objeto teríamos de fazer diversas verificações.

if (user != undefined && user.profile != undefined) {
 user.profile.name 
}

Adicionando o novo operador interrogação antes do ponto nós conseguimos interagir com o caminho opcional. Caso ele exista, temos acesso ao resultado esperado.

const user = {profile: name: "Maria"}
user?.profile?.name // “Maria”

Caso algum valor comparado pelo operador não exista ele retorna apenas um undefined sem mais erros.

const user = {}user?.profile?.name // Undefined

Isso não se limita a objetos ou arrays mas também pode ser usado em funções a serem executadas.

user.profile.checarAlgo?.(...argumentos)

Essa sintaxe também pode ser usada para acesso dinâmico da propriedade

user.profile?.[nomeDaPropriedade]

Isso é especialmente interessante quando queremos um valor dentro de uma estrutura muito grande que precisamos sempre ficar checando se cada parte da estrutura existe ou não.

// Com operador
a?.b[3].c?.(x).d
// Sem operador
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d

O operador de Optional Chaining permite lidar com a talvez existência de valores de forma limpa, consistente e sem que a gente se repita fazendo múltiplas verificações desnecessárias para o mesmo elemento. A sintaxe foi inspirada de linguagens como C# e Swift e também certamente do Typescript, que já tem essa funcionalidade nativa.

A funcionalidade já está implementada nos principais navegadores, engines e ferramentas!

📖Especificação🗼Plugin Babel

Nullish Coalescing Operator ⏸

É bem comum fazermos verificações para checar se um valor especifico é falsey(null, undefined, etc) para tratarmos da forma mais apropriada para não quebrarmos nosso código ou expormos acidentalmente esses valores para o usuário.

Quando queremos acessar propriedades de um objeto que não temos certeza de sua existência é comum usarmos um valor default. Tentamos algo similar a isso:

user.profile.name == undefined ? “Anonymous” : person.profile.name
user.profile.age == undefined ? 0 : person.profile.age

Também podemos tentar expressar a mesma coisa por meio do operador barra-barra ou OR => ||.

false || “Texto teste” // Texto teste
undefined || “Texto teste” // Texto teste
null ||"Texto teste" // Texto teste
NaN || "Texto teste" //Texto teste

Essa solução é realmente ótima quando queremos lidar com qualquer tipo que consideramos "Falsey"

O Nullish Coalescing nos apresenta um operador de duas interrogações (??) que nos trás uma verificação mais type strict permitindo um valor default apenas quando temos um null ou undefined.

false ?? “Texto teste” // false
undefined ?? “Texto teste” // Texto teste
null ?? ”Texto teste” // Texto teste
NaN ?? “Texto teste” // NaN

Podemos simplificar o exemplo anterior desta forma:

user.profile.name == undefined ? “Anonymous” : person.profile.name
user.profile.name ?? “Anonymous”

Supondo que no nosso mesmo objeto user, podemos dentro de profile ter tanto um name quanto um nickname.Se em um campo de nome devo mostrar o name OU onickname OU um valor padrão, nossa solução comum seria algo similar a:

if (person.profile.nickname == undefined) { 
  if(person.profile.name == undefined) {
    “Anonymous”
  } else {
    return person.profile.name
  }
} else {
  return person.profile.nickname
}

Com nosso novo operador se torna apenas:

person.profile.nickname ?? person.profile.name ?? “Anonymous”.

Essa sintaxe já é bem conhecida em outras linguagens como C# e Swift, está presente no PHP desde sua versão 7 e já está começando a ser implementada nos maiores navegadores.

📖Especificação🗼Plugin Babel

String.protype.matchAll 💕

O novo metodomatchAll() está relacionado a expressões regulares.Ele recebe uma expressão como argumento e retorna um iterador com todos os resultados que deram "match" com essa expressão.

Podemos acessar os casos iterando o seu resultado.

const onlyABC = /[a-c]/g
const str = 'abc'
const matches = str.matchAll(onlyABC)for (const match of matches) {
  console.log(match);
}// ["a", index: 0, input: "abc", groups: undefined]
// ["b", index: 0, input: "abc", groups: undefined]
// ["c", index: 0, input: "abc", groups: undefined]

Após a interação pelo for..of nosso iterador fica cansado, então temos de chamar o matchAll() novamente se requeremos os resultados novamente.

const arrMatches = [...str.matchAll(onlyABC)]// [["a", index: 0, input: "abc", groups: undefined],
    ["b", index: 0, input: "abc", groups: undefined],
    ["c", index: 0, input: "abc", groups: undefined]]

Ok, mas qual o beneficio?Agora conseguimos um resultado mais complexo para nossa regex além do match em si, **e isso fica visível em casos mais complexos em temos diversos agrupamentos.

const getTest = /t(e)(st(\d?))/g;
const str = 'test1test2'const arrMatches= [...str.matchAll(getTest)];

array[0];
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
array[1];
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]str.match(getTest); 
// Array ['test1', 'test2']

A escolha de retornar um iterador é por uma mera questão de performance, já que podemos facilmente coletar esses valores por meio do spread operador como no exemplo acima.Essa feature já está também vastamente implementada.

📖Especificação

Standardized globalThis object 🌍

O que para alguns é um monstro para outros pode ser benção, agora temos padronizado o THIS GLOBAL. Ou seja, um contexto da aplicação global independente de runtime.

O globalThis se refere ao objeto global, independente de onde você está executando o código. Sendo assim você pode em produção para um projeto multiplataforma escrever isso:

globalThis.variavelGlobalzassa = "Irraaa 🤠🐎"

Brincadeiras a parte, essa padronização se deve ao fato que por JS ser multiplataforma e portanto, um único código pode rodar no Node, no navegador ou em qualquer outro contexto.Sendo assim, fica difícil ter um objeto global sem uma padronização se isso vai ser em um window (Browser) ouglobal (Node) por exemplo.

📖Especificação

Promise.allSettled 🚦

O metodoPromise.allSettled recebe um array de Promises e só se resolve quando todas as elas estiverem resolvidas, seja como fulfilled ou *rejected,*com o estado de cada uma delas.

Ou seja, com ele podemos criar uma nova Promise que só retorna quando todas as Promises passadas forem concluídas, independente de resultado, sem a necessidade de um encadeamento.

O método retorna um array com o status das Promises com o seu respectivo valor, caso fullfilled, ou a razão da falha, caso rejected.

Nesse exemplo temos colocamos duas promises no Promise.allSettled , uma com resolução e outra com falha, e damos console.log no resultado!

const stuff1 = new Promise((res, rej) => res({x: 10, test: "🤠"}));
const stuff2= new Promise((res, rej) => rej(Error("Deu ruim 😭")));Promise.allSettled([stuff1, stuff2])
  .then(data => console.log(data)); 
// [ 
//   Object { status: "fulfilled", value: {x: 10, test: "🤠"}},
//   Object { status: "rejected", reason: "Deu ruim 😭"} 
// ]

Temos como resultado um array com dois objetos, ambos com o status de resolução da Promise. A que foi resolvida tem uma propriedade value que contêm o conteúdo da Promise e que falhou tem a propriedade **reasonque fala a razão do erro.

Já tentávamos fazer algo similar resolvendo múltiplas promises simultâneas com o Promise.all .

Promise.all([stuff1, stuff2])
  .catch(err => console.log(err));  // Deu ruim 😭

Se colocássemos as duas promises o Promise.all joga pra cima a falha do stuff2para que você trate e ignora completamente as Promises que foram resolvidas. Não tínhamos até então um método que “não ligasse” pros resultados de cada uma das Promises.

A motivação vem da implementação dos 4 combinators de promises, que são os principais casos implementados em bibliotecas ou linguagens para lidar com assincronismo.

Nele temos o Promise.all e oPromise.race que já foram especificados na ES2015, o Promise.allSettled , e um futuro metodo a ser incluído em uma próxima proposta chamado Promise.any .

O Promise.any receberia também uma lista de Promises e retornaria quando qualquer uma fosse resolvida.

📖Especificação

for-in mechanics 🎡

Quem acompanhou as mudanças sabe da existência dessa feature. Aparentemente a especificação da forma como for-in deve ser implementada foi na verdade apenas mais refinada pois a sua ultima versão foi pouco especifica em relação a que ordem o for (x in y)deve rodar levando a engines não entraram em um consenso sobre como implementar.

📖Especificação

Dynamic Import / Import() 🚢

O import dinâmico retorna uma uma promise para o objeto do modulo do namespace que foi requisitado. Sendo assim, agora poderemos colocar um import dentro de uma variável e chamar usando async/await .

Para que isso é importante? Podemos importar nossos arquivos de forma “Lazy” ou seja, apenas executar código dos arquivos conforme queremos.

Isso garante um controle da execução código muito maior em runtimepodendo impactar muito na performance pois executar todos os arquivos que são importados imediatamente pode ser um overhead.

Se por exemplo, estou usando funções de utilidade de outro arquivo ou pacote que são utilizadas apenas algum momento especifico do meu código.Será que faz sentido mais importá-las quando o arquivo foi executado ou quando forem(e se forem) realmente utilizadas?

//utils.js...muitas funções e coisas...const add = (x, y) => x + y;export { add };

Se estou fazendo uso dele em outro arquivo podemos importá-lo apenas antes de usar a função importada em especifico.

const doMathStuff = async (x, y) => {
    const math = await import('./utils.js');
    console.log(math.add(5, 10));
};

Em runtime essa função não vai ser carregada a não ser que chamada, portanto pode até mesmo nunca ser carregada se nunca for usada.

Isso é extremamente crucial por exemplo em front-end em que queremos minimizar o máximo possível o conteúdo sendo executado. Muito código sendo executado inconsequentemente ao abrir um site pode ser bem custoso*(ver “V8 Start-up Performance”).*

Isso é conhecido como code splitting e muito provávelmente seu código já está sendo pelo menos um pouco otimizado pelo próprio babel com webpack, ou qualquer outro module bundle dessa forma.

O webpack por exemplo faz algo chamado "Tree shaking" , em que ele basicamente monta uma arvore de dependências do seu próprio código e otimiza por exemplo, removendo o que não está sendo usado.

Os imports dinâmicos ficam de fora do Tree Shaking do webpack (verDynamic Import and Tree Shaking in JavaScript), então é importante questionar quando vale a pena deixar o controle na nossa mão ou em outras ferramentas.

📖Especificação🗼Plugin babel🌲Otimização JS com tree shaking

Module Namespace Exports 🛄

Nos módulos podemos usar a seguinte sintaxe para importarmos todos os elementos de por exemplo, um arquivo utils:

import * from './utils.js'

Mas não podíamos exportar de forma similar nativamente e tínhamos de exportar o próprio modulo dentro de um objeto.

import default as utils from './utils.js'
export { utils }

Mas agora temos uma sintaxe similar para exportar todo o conteúdo do módulo de forma similar!

export * from './utils.js'

Também podemos renomear o conteúdo exportado como nos exemplos:

export * as utils from './utils.js'
export { add as soma } from  './utils.js'

A ideia é bem simples mas essa simetria deixa mais consistente a forma como lidamos com nossos projetos.

📖Especificação🗼Plugin Babel

— — — — —

"Quero usar essas funcionalidade tipo, AGORA!!"

Basta modificar o seu arquivo.babelrc alguns destes novos plugins

{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-syntax-bigint"
  ]
}

Caso você não tenha nada configurado a forma mais simples seria usando o Parcel bundler no seu projeto instalando-o como dependência

$ yarn add parcel-bundler

E em seguida configurando nos scripts do seu package.json para que ele execute os seu projeto.

// package.json..."scripts": {
  "start": "parcel index.js"
},

Conclusão

Javascript é uma linguagem viva e vemos nos últimos anos uma evolução constante para melhorar o desenvolvimento web e isso certamente é uma tarefa difícil para uma uma comunidade também crescendo e evoluindo muito rápido com a linguagem.

Espero que vocês tenham gostado!! 👏 👏 👏 👏 👏 👏

**Quem gostou bate palminha pra que o artigo alcance outros amiguinhos.**❤️🧡💛💚💙💜.

https://github.com/tc39/proposals/blob/master/finished-proposals.md