DEV Community: Lincoli Xavier

Construindo um SaaS Starter Kit

Lincoli Xavier — Tue, 16 Sep 2025 15:34:49 +0000

Comecei mais uma saga de projeto, dessa vez voltado pra devs.

Pensando no aumento do uso de LLMs na produção de código e soluções, muitos programadores estão tirando ideais do papel, e isso é ótimo.

Mas nem tudo são flores, ainda há um gap de qualidade nos projetos. Falta de infra, arquitetura e sustentabilidade. Além perderem muito tempo em escolher stack, providers, serviços, integrações e muito mais.

Aqui entra o Arki.

Vou trazer tudo isso já pronto com as soluções mais coerentes e validadas pelo mercado prontas pra plugar e acelerar ainda mais o lançamento de produtos.

Linguagem, Banco de dados, Autenticação, Gateways de Pagamento, Emails, Dashboard, Design, Marketing, Controle de Membros… tudo isso já pronto.

Com uma arquitetura fullstack robusta com monorepo, Typescript, Node, Postgres, Drizzle ORM, Zod, TanStack Query, NextJs e muito mais.

Tudo o que é necessário para construir um SaaS moderno.

Inclusive se tiverem sugestões de ferramentas, features interessantes, terei prazer em implementar :)

https://www.usearki.dev/

20 livros pra você adicionar na sua lista de leitura como profissional de Tecnologia

Lincoli Xavier — Fri, 15 Aug 2025 13:32:26 +0000

Algoritmos para viver – Brian Christian & Tom Griffiths
Explora como algoritmos computacionais podem ajudar na tomada de decisões humanas.
Test-Driven Development
Guia prático para escrever testes antes do código, reforçando design limpo.
AI Superpowers – Kai-Fu Lee
Analisa a corrida da IA entre EUA e China e suas implicações geopolíticas.
A Informação – James Gleick
História da informação desde linguagens antigas até a era digital.
Planning Extreme Programming
Como planejar e executar projetos com Extreme Programming.
Entendendo Algoritmos – Aditya Bhargava
Introdução visual e simplificada a algoritmos clássicos.
CSS Secrets – Lea Verou
Soluções criativas para problemas comuns de CSS.
Clean Code – Robert C. Martin
Princípios e práticas para escrever código limpo e manutenível.
Implementando Domain-Driven Design – Vaughn Vernon
Guia detalhado para aplicar DDD em projetos reais.
Monolith to Microservices – Sam Newman
Padrões e estratégias para migrar de monólitos para microsserviços.
Introduction to Graph Theory – Richard J. Trudeau
Introdução acessível à teoria dos grafos.
O livro da matemática – Clifford A. Pickover
História e conceitos matemáticos importantes em formato ilustrado.
Learning Domain-Driven Design – Vlad Khononov
Introdução moderna ao DDD, com foco em alinhamento de negócios.
Algorithmic Thinking – Daniel Zingaro
Ensina resolução de problemas usando algoritmos.
Algorithms – Robert Sedgewick & Kevin Wayne
Guia abrangente de algoritmos clássicos e modernos.
The Design of Web APIs – Arnaud Lauret
Boas práticas para projetar APIs claras e escaláveis.
Database Internals – Alex Petrov
Funcionamento interno de bancos de dados distribuídos.
Designing Data-Intensive Applications – Martin Kleppmann
Guia sobre sistemas escaláveis e tolerantes a falhas.
Coders at Work – Peter Seibel
Entrevistas com programadores renomados sobre suas práticas.
Why Programs Fail – Andreas Zeller
Técnicas de depuração e análise de falhas em software.

Gostou? Se quiser mais livros comenta aqui.

E se quiser ler comigo, vem pro clube do livro dev :)

Checklist Completo para Lançar Seu SaaS do Zero

Lincoli Xavier — Wed, 30 Apr 2025 16:16:06 +0000

✦ Por que seguir esse checklist?

Lançar um SaaS envolve muitos detalhes técnicos e estratégicos. Esse guia foi feito para te ajudar a sair do "modo ideia" e colocar seu produto no ar com o essencial para validar, vender e crescer.

✅ 1. Landing Page com CTA Claro

A landing é sua vitrine. Precisa ser objetiva, responsiva e persuasiva.

Destaque o problema que você resolve.
Mostre o benefício principal em até 5 segundos.
Use um Call to Action direto: “Teste grátis”, “Comece agora”, “Ver preços”.
Ferramentas úteis: Carrd, Framer, Webflow

✅ 2. Dashboard Funcional com a Feature Principal

Seu SaaS não precisa estar completo — mas precisa funcionar minimamente.

A primeira funcionalidade precisa entregar valor real.
Mantenha simples, mas usável.
Evite adicionar 10 recursos antes de validar 1.

✅ 3. Infraestrutura Básica no Ar

Seu app precisa rodar de forma estável.

Use soluções como: Vercel, Netlify, Fly.io ou Railway para backends leves.
Banco de dados: Supabase, PlanetScale, Neon ou SQLite para o início.
Coloque monitoramento (uptime, erros, etc) — comece com o UptimeRobot

✅ 4. Domínio Próprio Comprado

Evite domínios com extensões estranhas. Foque em algo simples e memorável.

Use Namecheap, Google Domains ou Cloudflare.
Dica: .com, .io, .tech ou .dev são boas opções.

✅ 5. Email Corporativo

Passa credibilidade e ajuda na entrega de emails (especialmente para onboarding e suporte).

Zoho Mail é gratuito para 1 conta com domínio próprio.
Também vale usar o Google Workspace depois da validação.

✅ 6. Precificação Definida

Você precisa saber quanto cobrar antes de começar a divulgar.

Escolha entre modelo gratuito, freemium, trial ou pago direto.
Evite “preço sob consulta” no início.
Use plataformas como Stripe, Mercado Pago ou Gumroad para checkout.

✅ 7. Checagem de Concorrentes

Você precisa entender o terreno.

Quais features eles têm?
Qual o preço médio?
Como eles comunicam o valor?

Use isso pra diferenciar seu SaaS, e não só copiar.

✅ 8. Checkout Ativo – Comece com CPF Mesmo

Não espere ter empresa aberta. Plataformas como Mercado Pago permitem receber com CPF.

Configure um checkout simples.
Deixe claro que está no início e em fase de testes.
Capriche na confiança (testemunhos, selos, etc).

✅ 9. Teste de Pagamento Funcionando

Simule uma compra real.

Teste todos os caminhos (sucesso, erro, cancelamento).
Valide se o cliente recebe e-mail de confirmação.
Garanta que você também seja notificado.

✅ 10. Política de Reembolso, Termos e Privacidade

Mesmo sendo MVP, isso passa segurança e evita dor de cabeça.

Gere com ferramentas como Termly, Iubenda ou o Privacidade Digital.
Seja transparente e direto.

✅ 11. Instagram Ativo com Link da Landing

Marketing é obrigatório.

Crie um perfil que pareça profissional.
Poste bastidores, atualizações e conteúdos que ensinem algo.
Adicione link para a landing no perfil.

✅ 12. Analytics Instalado

O que não é medido, não melhora.

Instale Google Analytics, Plausible ou Umami.
Monitore visitas, conversões e comportamento.
Use os dados pra melhorar sua comunicação e produto.

⚡ Conclusão

Com esse checklist, você sai do papel e entra no jogo. Lançar um SaaS não precisa ser complexo, mas precisa ser estratégico.

Comece simples, entregue valor e ouça seus primeiros usuários.

.
.
.
.

✨ Conheça a Comunidade Nomadz ✨
👉🏻 https://www.patreon.com/nomadz/membership

Quer falar comigo? Tô por aqui:
https://instagram.com/lincoli.xavier
https://twitter.com/lincolixavier
https://youtube.com/@lincoli.xavier/
https://www.lincolixavier.com/

Guia completo de UX/UI Design do Zero ao Avançado

Lincoli Xavier — Thu, 10 Apr 2025 01:17:16 +0000

Além de software, trabalho com design desde 2014. Sempre é bom ter um guia de tópicos pra guiar os estudos.

Aqui juntei lições, dicas práticas, referências (livros, vídeos, artigos), e sugestões de exercícios em cada etapa. A ideia é te dar uma jornada sólida, teórica e prática, para se tornar um(a) designer de produtos digitais com domínio em UX e UI.

🧠 Módulo 0 – Introdução ao UX/UI Design

🎯 Objetivos:

Entender o que é UX e UI.
Diferenciar papéis no design digital.
Conhecer a importância do design centrado no usuário.

🧩 Lições:

O que é UX Design?
O que é UI Design?
Design Thinking, Agile e Lean UX
Diferença entre UX Designer, UI Designer, Product Designer e Service Designer
Hard skills e soft skills necessárias

📚 Referências:

📘 The Design of Everyday Things – Don Norman
📺 Nielsen Norman Group – What is UX?
📘 Don't Make Me Think – Steve Krug

🛠️ Exercícios:

Escreva sua definição pessoal de UX e UI.
Liste 5 produtos digitais que você usa e analise a experiência do usuário.

🔬 Módulo 1 – Fundamentos de Psicologia e Design Cognitivo

🎯 Objetivos:

Entender como as pessoas pensam, sentem e se comportam diante de interfaces.
Usar princípios de psicologia para criar experiências melhores.

🧩 Lições:

Gestalt e percepção visual
Memória e carga cognitiva
Mapas mentais e modelos mentais
Fatores humanos e usabilidade

📚 Referências:

📘 100 Things Every Designer Needs to Know About People – Susan Weinschenk
📘 Laws of UX – Jon Yablonski (também em laws-of-ux.com)
📺 Principles of Gestalt Psychology – NNGroup

🛠️ Exercícios:

Recrie a interface de um app usando pelo menos 3 leis de Gestalt.
Crie um mapa mental para um fluxo de compra em um e-commerce.

🧱 Módulo 2 – Pesquisa em UX (UX Research)

🎯 Objetivos:

Aprender a coletar dados reais para informar decisões de design.
Validar ideias com usuários.

🧩 Lições:

Tipos de pesquisa: qualitativa vs quantitativa
Entrevistas com usuários
Personas e proto-personas
Mapas de empatia
Jornadas do usuário (User Journey Maps)
Testes de usabilidade

📚 Referências:

📘 UX Research – Brad Nunnally e David Farkas
📘 Validating Product Ideas – Tomer Sharon
📺 UX Research Methods – NNGroup

🛠️ Exercícios:

Conduza uma entrevista com pelo menos 3 pessoas sobre um produto digital.
Crie uma persona baseada nas entrevistas.

🧭 Módulo 3 – Arquitetura da Informação & UX Writing

🎯 Objetivos:

Organizar informações de forma lógica.
Criar textos que guiam e ajudam o usuário.

🧩 Lições:

Sitemaps e hierarquia de conteúdo
Card sorting
Wireframes e fluxos de navegação
Microcopy, UX writing e conteúdo orientado à ação

📚 Referências:

📘 Information Architecture for the Web and Beyond – Louis Rosenfeld
📘 Strategic Writing for UX – Torrey Podmajersky
📺 UX Writing – UX Collective

🛠️ Exercícios:

Faça um card sorting com amigos usando o método aberto.
Redija os microtextos para uma tela de login e cadastro.

🎨 Módulo 4 – UI Design e Design Visual

🎯 Objetivos:

Aprender os princípios do design visual aplicados à UI.
Criar interfaces esteticamente agradáveis e funcionais.

🧩 Lições:

Princípios de Design Visual: alinhamento, contraste, proximidade, repetição
Teoria das cores e acessibilidade
Tipografia na interface
Design Tokens e Design Systems
Criação de mockups e protótipos com Figma/Sketch

📚 Referências:

📘 Design Systems – Alla Kholmatova
📺 Figma Crash Course – FreeCodeCamp

🛠️ Exercícios:

Recrie a UI de um app famoso no Figma.
Monte um mini design system com cores, botões e tipografia.

🧪 Módulo 5 – Prototipação e Testes de Usabilidade

🎯 Objetivos:

Criar protótipos navegáveis.
Testar hipóteses com usuários reais.

🧩 Lições:

Prototipação: baixa vs alta fidelidade
Ferramentas: Figma, Framer, ProtoPie
Planejamento de testes
Testes moderados e não moderados
Heurísticas de Nielsen

📚 Referências:

📘 Rocket Surgery Made Easy – Steve Krug
📘 Handbook of Usability Testing – Jeffrey Rubin
📺 Heuristic Evaluation – NNGroup

🛠️ Exercícios:

Prototipe um app simples no Figma.
Realize um teste com 2 usuários e anote os problemas.

⚙️ Módulo 6 – Ferramentas e Fluxo de Trabalho Profissional

🎯 Objetivos:

Aprender o fluxo completo de trabalho do designer.
Colaborar com times de produto e desenvolvimento.

🧩 Lições:

DesignOps e handoff para devs
Anotações e documentação
Integração com ferramentas (Zeplin, Storybook, JIRA)
Design versionado: Figma, Git e bibliotecas compartilhadas
Trabalhando em times ágeis (Scrum, Kanban)

📚 Referências:

📘 DesignOps Handbook – InVision
📺 Figma + Dev Handoff

🛠️ Exercícios:

Crie um arquivo Figma com documentação clara para devs.
Simule um ciclo de sprint com user stories e wireframes.

🚀 Módulo 7 – Projeto Final + Portfólio

🎯 Objetivos:

Consolidar todo o aprendizado com um projeto real.
Construir um portfólio matador.

🧩 Lições:

Escolha do problema e validação
Pesquisa, personas e jornadas
Wireframes, UI, protótipos e testes
Apresentação do case
Como montar um bom portfólio de UX/UI

📚 Referências:

📘 Case Study Manual – UX Collective
📺 Como criar um portfólio de UX – Canal UXNOW

🛠️ Exercícios:

Escolha um problema real (ex: app para mães, pet shop, delivery local).
Siga todas as etapas e monte seu primeiro case no Notion, Behance ou site pessoal.

🧭 Dicas Finais para a Jornada

✅ Sempre valide com usuários. A intuição vem depois da experiência.
🧪 Teste o tempo todo. Tudo é hipótese até o usuário interagir.
📚 Leia muito, mas pratique mais ainda.
🎯 Design não é arte: é resolver problemas com empatia e clareza.
🤝 Participe de comunidades (UX Collective, ADPList, Discords de design).
🛠️ Nunca pare de aprender: o mundo do design muda o tempo todo.

Repositório que vou atualizar sempre que possível com novos materiais.

Aproveite e bons estudos.

Checklist de um projeto completo e pronto pra produção em Nuxt

Lincoli Xavier — Tue, 04 Mar 2025 15:38:52 +0000

Um projeto complexo de Nuxt.js precisa de uma estrutura bem organizada, ferramentas adequadas e boas práticas para garantir desempenho, escalabilidade e manutenibilidade.

Os principais pontos que podem ser necessários:

1. Configuração Inicial
TypeScript: Tipagem estática e maior segurança no código.
ESLint e Prettier: Manter padrões do código.
Husky + lint-staged: Rodar verificações de código antes dos commits.
Sass/SCSS/PostCSS: Estilos complexos.

2. Gerenciamento de Estado
Pinia (preferível ao Vuex): Estado global reativo e escalável.
useState do Nuxt: Estado local simples dentro de páginas/composables.

3. Consumo de APIs
TanStackQuery/useFetch/useAsyncData: Buscar dados com suporte a SSR e caching.
Nuxt API Routes: Backends leves dentro do projeto.
Middleware de requisições: Para logs, autenticação e tratamento de erros.

4. Performance e Otimização
Code Splitting e Lazy Loading: Carregar apenas o necessário.
Imagens otimizadas (nuxt/image): Otimizar formatos, tamanhos e carregamento de imagens.
Geração estática (SSG), renderização no servidor (SSR) ou ISG: Escolher conforme o projeto.

5. SEO e Acessibilidade
useHead() ou Nuxt SEO Module: Gerenciar metadados e SEO.
Sitemap e robots.txt: Automação da geração desses arquivos.
Schema.org: Dados estruturados para SEO avançado.

6. Autenticação e Autorização
Nuxt Auth ou OAuth2/JWT: Login seguro.
Middleware de autenticação: Proteger rotas privadas.

7. Componentização e UI
Storybook: Documentar e desenvolver componentes de forma isolada. Escolha usar com sabedoria.
Componentes UI reutilizáveis: Criar uma biblioteca ou usar frameworks como Vuetify, MUI, Naive UI ou Element Plus.
Design Tokens: Centralizar cores, espaçamentos e fontes.

8. Testes
Vitest: Testes unitários.
Vue Testing Library: Testes de componentes.
Cypress ou Playwright com BDD: Testes de ponta a ponta (E2E). ~Eu prefiro Playwright

9. Infraestrutura e Deploy
CI/CD com GitHub Actions ou Vercel/Netlify: Automação de deploys e testes.
Docker: Padronizar o ambiente.
Monitoramento e logs: Ferramentas como Sentry ou LogRocket.

10. Escalabilidade e Organização
Estrutura de pastas bem definida: Exemplo:

├── components/
├── composables/
├── stores/
├── layouts/
├── pages/
├── plugins/
├── middleware/
├── public/
├── assets/
├── utils/

Modularização: Separação de código em composables e stores.
Sempre trabalhar com o conceito de Bounded Contexts do DDD ao usar as pastas e arquivos, mantenha tudo que for do mesmo contexto próximos.

11. Funcionalidades Avançadas
Internacionalização (nuxt/i18n): Suporte a múltiplos idiomas.
WebSockets ou SSE: Comunicação em tempo real.
PWA (@nuxt/pwa): Transformar o app em um Progressive Web App.

12. Analytics e Monitoramento
Google Analytics, Plausible ou Matomo: Rastreamento de comportamento do usuário.
Sentry: Monitoramento de erros.
Hotjar ou FullStory: Mapas de calor.

13. Documentação
README bem escrito no GitHub.
ADRs (Arquivos de Decisão de Arquitetura): Documentar decisões.
Comentários e JSDoc: Para facilitar manutenção.

14. Gerenciamento de Dependências
pnpm, Bun ou Yarn: Escolher um gerenciador rápido.
Renovate ou Dependabot: Para manter pacotes atualizados automaticamente.

15. Segurança
Rate Limiting: Para evitar abuso de APIs.
Sanitização de inputs: Prevenir XSS e injeção de código.

Esse checklist cobre um projeto robusto em Nuxt.js com foco em boas práticas, escalabilidade e performance.

Acho que essa lista cobre quase tudo pra um projeto de ponta de linha hoje em dia! O que faltou? Comenta ai pra gente trocar ideia!

Metas 2025 ✨

Lincoli Xavier — Tue, 07 Jan 2025 09:43:06 +0000

Definir metas de ano novo pra mim não é sobre conquistar tudo, e sim sobre ter um norte pra guiar meu dia-dia das coisas que quero e diminuir as distrações

Essas são as minhas pra esse ano!

🔹 Incrementar o parsing do HTML - Nami
Seguindo ainda o mesmo do ano passado. Estou construindo um navegador do zero em Rust (tentando) e tem sido bem desafiador, esse ano quero continuar o parse do HTML seguindo a spec e melhorar algumas coisinhas

Nami

🔹 3000 minutos de meditação
Em 2024 consegui! Quero manter esse ano. Eu medito desde 2020 usando headspace, quero melhorar ainda mais essa prática esse ano, fazendo mais cursos intensivos e pro que tem no app. Mindfulness é incrível!

🔹 Publicar com frequencia na Nomadz
Meu foco esse ano não será quantidade de assinantes e sim consistência de conteúdo! Em 2023 criei minha comunidade para nômades digitais mochileiros :) entrou bastante no discord de graça, gravei 2 super aulas e postei alguns conteúdo free.

Nomadz

🔹 MVP Librium
Ano passo consegui evoluir alguns scripts dos livros, espero evoluir o suficiente pra lançar o MVP esse ano! Minha rede social de leitura =D

🔹 25 Livros
Consegui ano passado, mas passou raspando, esse ano mantenho a meta!

🔹 Viagem pro Japão
Também consegui evoluir no meu japones ja leio bem Hiragana e agora chegou a hora de praticar na terra do sol nascente! Espero muito por essa viagem!

🔹 Saltar de Helicoptero
Consegui virar Categoria B no paraquedismo em 2024 viajando é bem dificil achar áreas que aceitam iniciantes pra saltar, mas aos poucos completei os 50 saltos e a prova necessária, e agora posso várias coisas tipo saltar de helicoptero e ter uma camera no meu capacete =D

*🔹 Aprender Deslok,Sit Fly e Back Fly *
E claro, quero continuar evoluindo no esporte e voar melhor aprendendo outras técnicas

🔹 Ouro no LoL Secreta
Não custa sonhar mas eu levo esse joguinho bem a sério!

🔹 Tomorrowland 2025
Em 2024 foi um objetivo alcançado, e agora virou tradição, meta ir nesse festival incrível na Bélgica todo ano.

Vamos ver quantas dessas vou conquistar esse ano!

Desejo que você conquiste as suas também

Feliz 2025! o/

.
.
.
.
.

✨ Conheça a Comunidade Nomadz ✨
👉🏻 https://www.patreon.com/nomadz/membership

Quer falar comigo? Tô por aqui:
https://instagram.com/lincoli.xavier
https://www.tiktok.com/@lincoli.xavier
https://twitter.com/lincolixavier
https://youtube.com/@lincoli.xavier/
https://www.lincolixavier.com/

5 lições que aprendi depois de trabalhar remoto por 7 anos

Lincoli Xavier — Thu, 05 Dec 2024 14:08:23 +0000

Desde 2017 tenho trabalho fulltime remotamente em projeto e empresas de quase todos os tamanhos e nichos. A pandemia com certeza acelerou a remotização dos trabalhos especialmente em desenvolvimento de software. E hoje o trabalho remoto não é apenas uma tendência; é uma realidade que transforma a maneira como interagimos com nossas equipes e executamos nossas tarefas. Mas, para que ele funcione bem, é essencial adotar práticas que promovam inclusão, produtividade e bem-estar. Quero compartilhar algumas lições que aprendi desses últimos anos:

1. Se todos estão remotos, todos são parte do time

Trabalhar remotamente significa que todos devem ter as mesmas oportunidades de participação e engajamento, independentemente de onde estejam. Ninguém deve se sentir isolado ou relegado a um papel secundário. Incentive a colaboração ativa em discussões e decisões, garantindo que a flexibilidade do trabalho remoto seja tratada como um padrão, não como um benefício extra.

2. Construa uma base de confiança

A autonomia é essencial no trabalho remoto. Microgestão não é produtiva e pode minar a motivação da equipe. Defina metas claras e objetivos compartilhados, permitindo que cada membro seja responsável por suas contribuições. Isso fortalece o senso de responsabilidade coletiva e a liderança individual.

3. Evite a armadilha do trabalho constante

A flexibilidade é uma vantagem do trabalho remoto, mas é importante não se tornar refém dela. Trabalhar sem limites claros pode comprometer sua energia e foco. Crie uma rotina organizada com metas diárias, semanais e mensais, e imponha limites para garantir que você tenha tempo para descansar e recarregar.

4. O trabalho remoto é colaborativo

Trabalhar remotamente não significa isolamento. A comunicação regular entre os membros do time é fundamental. Pequenos gestos como cumprimentar os colegas no início do dia ou perguntar sobre seus interesses pessoais ajudam a fortalecer os laços e a criar um ambiente de equipe mais próximo.

5. Crie rituais para substituir o ambiente de escritório

Quando não há mais a ida ao escritório para marcar o início do dia, você precisa estabelecer novos hábitos. Desenvolva uma rotina matinal que ajude a "ativar" seu cérebro para o trabalho, seja arrumando seu espaço ou praticando um ritual que funcione para você. Por exemplo pra mim é impossível trabalhar de pijama rs, preciso estar minimamente "arrumado" pra começar o dia.

Bônus: Trabalho remoto não é sinônimo de home office

O trabalho remoto vai além de estar em casa; trata-se de liberdade para trabalhar de qualquer lugar. Ele redefine como as equipes colaboram e se conectam, priorizando autonomia, flexibilidade e resultados. Seja em casa, em um café ou em outro país, o importante é encontrar um ambiente que funcione para você.

Trabalhar remotamente é um processo de aprendizado e adaptação. Com o tempo, você e seu time podem desenvolver práticas mais eficientes e alinhadas às necessidades de todos. E você, já experimentou o trabalho remoto? Compartilhe suas experiências e ideias para continuarmos aprendendo juntos!

Feliz trabalho remoto \o/

.
.
.
.
.

✨ Conheça a Comunidade Nomadz ✨
👉🏻 https://www.patreon.com/nomadz/membership

What happens when you type a URL into the browser

Lincoli Xavier — Mon, 18 Nov 2024 09:00:02 +0000

When you type a URL into your browser and press Enter, a series of steps take place to load the requested web page. Here's a simplified breakdown of the process:

URL Parsing:
- The browser parses the URL to determine the protocol (e.g., HTTP or HTTPS), the domain name, and the path to the resource.
DNS Lookup:
- The browser checks its cache for the IP address of the domain. If it's not found, it queries a DNS (Domain Name System) server to translate the domain name into an IP address.
TCP/IP Connection:
- The browser establishes a TCP (Transmission Control Protocol) connection with the server using the IP address obtained from the DNS lookup. This involves a three-way handshake:
  1. The browser sends a SYN (synchronize) packet to the server.
  2. The server responds with a SYN-ACK (synchronize-acknowledge) packet.
  3. The browser sends an ACK (acknowledge) packet back to the server.
HTTP/HTTPS Request:
- If the URL uses HTTPS, the browser initiates a TLS (Transport Layer Security) handshake to establish a secure connection. This involves certificate verification and encryption key exchange.
- The browser then sends an HTTP or HTTPS request to the server, specifying the desired resource (e.g., a web page or file).
Server Processing:
- The server receives the request, processes it, and locates the requested resource. It may involve fetching data from a database or executing server-side scripts.
HTTP/HTTPS Response:
- The server sends an HTTP or HTTPS response back to the browser. This response includes status codes (e.g., 200 OK, 404 Not Found) and the requested resource (e.g., HTML, CSS, JavaScript, images).
Rendering:
- The browser receives the response and begins rendering the web page. This involves several steps:
  - Parsing the HTML to construct the DOM (Document Object Model) tree.
  - Parsing the CSS to apply styles and construct the CSSOM (CSS Object Model) tree.
  - Parsing and executing JavaScript.
  - Combining the DOM and CSSOM trees to create the render tree.
  - Painting the render tree onto the screen.
Resource Loading:
- As the browser parses the HTML, it may encounter additional resources (e.g., images, stylesheets, scripts) that need to be loaded. It sends additional HTTP/HTTPS requests to fetch these resources and updates the web page as they are received.
Interaction and Updates:
- Once the web page is loaded, the browser continues to handle user interactions (e.g., clicks, form submissions) and updates the page dynamically as needed (e.g., via AJAX requests).

This entire process happens very quickly, typically within a fraction of a second, allowing users to access web pages almost instantaneously.

.
.
.
.
.

✨ My Nomad Community ✨
👉🏻 https://www.patreon.com/nomadz/membership

Reach me out:
https://instagram.com/lincoli.xavier
https://www.tiktok.com/@lincoli.xavier
https://twitter.com/lincolixavier
https://youtube.com/@lincoli.xavier/
https://www.lincolixavier.com/

Vamos falar das sombras na web: Shadow DOM

Lincoli Xavier — Thu, 12 Sep 2024 15:46:32 +0000

Quando pensamos em construir componentes web modernos, o Shadow DOM se destaca como uma das tecnologias mais poderosas e promissoras. Ele permite que desenvolvedores criem componentes com estilos e comportamentos encapsulados, sem interferir nos demais elementos da página. O Shadow DOM não só traz modularidade para o código, como também previne aqueles famigerados conflitos de estilos que surgem quando tudo está no mesmo "balde" do DOM tradicional.

A grande sacada do Shadow DOM é criar um isolamento quase perfeito entre a "shadow tree" e o resto do documento. Ou seja, o que acontece no Shadow DOM, fica no Shadow DOM. Estilos, scripts, tudo fica ali, separado, sem "vazar" para o restante do documento. Na teoria, isso é incrível para modularidade e organização do código. Por outro lado, esse isolamento pode complicar a vida de quem depende de tecnologias assistivas para navegar na web, afetando a acessibilidade =/

Entendendo um pouco melhor alguns conceitos:

DOM: uma estrutura em forma de árvore de nós conectados que representa os diferentes elementos e sequências de texto que aparecem em um documento HTML

O Shadow DOM permite que árvores DOM ocultas sejam anexadas a elementos na árvore DOM regular — essa árvore DOM shadow começa com uma raiz shadow, abaixo da qual você pode anexar qualquer elemento, da mesma forma que o DOM normal.

Shadow host: Um nó padrão do DOM onde o shadow DOM está anexado.
Shadow tree: Um DOM separado dentro do shadow host.
Shadow boundary: Basicamente onde shadow DOM termina e DOM padrão começa.
Shadow root: Raíz do shadow DOM.

Pode parecer um pouco complicado, mas na prática, é uma maneira simples e eficaz de criar componentes com CSS e JavaScript isolados.

O Shadow DOM é amplamente utilizado em interfaces web do dia a dia. Por exemplo, um player de vídeo numa página web usa Shadow DOM para isolar seus controles, como play, pause e o controle de volume. Graças ao padrão Shadow DOM, os estilos e scripts desses controles não interferem no restante da página.

Benefícios de Usar Shadow DOM

Encapsulamento

Quando falamos de encapsulamento no contexto do Shadow DOM, estamos nos referindo ao isolamento de CSS e JavaScript. Isso significa que os estilos e scripts dentro de um Shadow DOM são exclusivos daquele DOM e não interferem com o restante da página.

Esse encapsulamento resolve o problema de vazamento de CSS, onde estilos de uma parte da aplicação acabam afetando outra, causando problemas inesperados de layout. Com o Shadow DOM, você pode estilizar elementos sem se preocupar com conflitos de estilos em outras partes da página.

Independência

Como o Shadow DOM está anexado a um elemento específico, ele forma um ambiente independente. Isso significa que o elemento e seu Shadow DOM podem ser desenvolvidos, testados e implementados separadamente do restante da aplicação.

Essa independência facilita o gerenciamento de grandes aplicações. Os desenvolvedores podem trabalhar em componentes individuais, reduzindo a complexidade e aumentando a manutenibilidade da aplicação. Isso também melhora o desempenho, pois os navegadores podem otimizar o processo de renderização, atualizando apenas os componentes que realmente precisam.

Reutilização

Outro benefício importante que o Shadow DOM traz ao desenvolvimento web é a reutilização. Um componente construído com Shadow DOM encapsula todos os seus estilos e comportamentos necessários, tornando-se uma unidade autônoma. Isso significa que você pode reutilizar esse componente em diferentes partes da sua aplicação, ou até em aplicações diferentes.

Essa capacidade de reutilização economiza tempo de desenvolvimento e garante consistência em toda a aplicação. Ao reutilizar componentes, você garante que cada instância se comporte e tenha a mesma aparência, proporcionando uma experiência de usuário consistente.

Vamos ver um exemplo

Vamos criar uma página que contém dois elementos: uma lista desordenada <ul> com o id "menu" e uma simples <p> com algum texto fora do Shadow DOM:

<div id="menu"></div>
<p>Este parágrafo não está no Shadow DOM</p>

Aqui, vamos usar o elemento com o id "menu" como o shadow host. Vamos chamar attachShadow() no host para criar o Shadow DOM. A seguir, adicionamos nós ao Shadow DOM da mesma forma que faríamos no DOM principal. Neste exemplo, vamos adicionar uma lista <ul> com dois itens <li>:

const menu = document.querySelector("#menu");
const shadow = menu.attachShadow({ mode: "open" });

const ul = document.createElement("ul");
const li1 = document.createElement("li");
li1.textContent = "Item 1";
const li2 = document.createElement("li");
li2.textContent = "Item 2";

ul.appendChild(li1);
ul.appendChild(li2);
shadow.appendChild(ul);

O resultado será uma lista renderizada dentro do Shadow DOM, encapsulada e isolada do restante da página, garantindo que seus estilos e comportamentos não interfiram no documento principal. Enquanto isso, o parágrafo fora do Shadow DOM permanece inalterado.

O que aparece no DOM principal:

<p>Este parágrafo não está no Shadow DOM</p>

Mas dentro do shadow DOM, temos:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Essa abordagem permite que você crie componentes independentes, mantendo a consistência e o encapsulamento de estilos e comportamentos, sem afetar o restante da página.

Tá, mas e no mundo real?

Imagine que você está criando um widget de calendário ou um player de vídeo que será reutilizado em várias partes da sua aplicação. Usar o Shadow DOM garante que os estilos do widget não sejam afetados pelos estilos globais da página e que as modificações feitas por outros desenvolvedores em diferentes seções do projeto não quebrem o funcionamento ou a aparência do componente.
Em uma aplicação SPA (Single Page Application), onde múltiplos componentes estão sendo constantemente atualizados, o uso do Shadow DOM pode ajudar o navegador a focar apenas nos elementos que precisam ser renderizados novamente, evitando atualizações desnecessárias em outros componentes.
Em uma aplicação que lida com informações sensíveis, como formulários de pagamento, o uso do Shadow DOM pode garantir que os elementos internos desses componentes estejam protegidos de manipulações externas maliciosas. Claro que todas as outras medidas de segurança precisam ser tomadas, como sanitizar conteúdo por ex.

Shadow DOM vs Virtual DOM

Muitas vezes, os conceitos de Shadow DOM e Virtual DOM são discutidos juntos, o que leva a uma certa confusão sobre suas diferenças. Embora ambos estejam relacionados ao DOM, eles servem a propósitos diferentes e não são diretamente comparáveis.

O Virtual DOM é um conceito popularizado por bibliotecas como React. Ele é uma cópia leve do DOM real, onde as mudanças são feitas primeiro, antes de serem refletidas no DOM real. Esse processo, chamado de "reconciliação", otimiza o desempenho ao minimizar as manipulações do DOM.

O Shadow DOM, por outro lado, é um padrão web que encapsula estilos e marcação. Ele não está preocupado com otimizações de atualização do DOM, mas sim em isolar componentes para evitar conflitos de estilo e problemas de escopo global.

Em essência, Shadow DOM e Virtual DOM têm propósitos diferentes. O Shadow DOM fornece encapsulamento de estilo e comportamento para componentes reutilizáveis, enquanto o Virtual DOM otimiza a renderização desses componentes, minimizando as atualizações no DOM real.

Já tinha visto esse conceito? O que ficou em dúvida? Vamos discutir nos comentários :)

Ref: Doc MDN

Obrigado por ler até aqui!

.
.
.
.
.

Como conseguir seu primeiro freela

Lincoli Xavier — Fri, 06 Sep 2024 14:55:27 +0000

Conseguir seu primeiro trabalho freelance como desenvolvedor web pode ser difícil, especialmente se você está começando e ainda não tem um portfólio ou grandes contatos na área. No entanto, com a abordagem correta, esforço contínuo e persistência, você pode transformar essas dificuldades em oportunidades.

1. Olhe para os lados: Rede de contatos é fundamental

A primeira dica crucial para quem está começando no mundo do freelancing é utilizar sua rede de contatos. Se você parar para pensar, é bem provável que você conheça alguém que poderia precisar de um site, ou que pelo menos conheça alguém que conheça outra pessoa com essa necessidade.

Como encontrar oportunidades:

Conhece donos de negócios?: Ofereça seus serviços diretamente para eles. Pense em todas as lojas, restaurantes, escritórios e pequenos negócios locais que poderiam se beneficiar de uma presença online profissional.
Peça ajuda aos seus amigos, parentes e colegas: Caso você mesmo não conheça donos de negócios, pergunte aos seus conhecidos. Muitas vezes, eles podem te apresentar a alguém que está precisando exatamente do que você pode oferecer. Explique que você está começando e que seria uma ótima oportunidade para ambos.
Contato direto com empresas locais: Além das conexões pessoais, muitas cidades têm associações comerciais e catálogos de empresas, como o Sindisfac, que podem ser um excelente ponto de partida. Esses catálogos geralmente listam empresas locais que podem precisar de um site ou de uma melhoria em sua presença online.

A importância da persistência:

Se você tentar com cinco ou dez empresas e não conseguir nada, não desanime. Tente com cinquenta, cem! Não é fácil, mas esse esforço vale muito a pena. O segredo do sucesso é a persistência, e, eventualmente, uma porta vai se abrir. Quando isso acontecer, a experiência que você adquirir e a visibilidade que ganhar podem gerar muitas outras oportunidades.

Um exemplo prático:

Imagine que você ofereceu seus serviços para 100 empresas locais e apenas uma delas aceitou. Isso pode parecer desanimador no início, mas ao concluir esse primeiro projeto, você poderá usar seu trabalho como portfólio, compartilhá-lo nas redes sociais e com outros potenciais clientes. O efeito dominó começará aqui.

2. Estruturando sua oferta: Valor percebido

Uma das principais questões que podem surgir ao abordar potenciais clientes é como apresentar sua oferta de forma atrativa. Uma dica importante é focar no valor que você pode entregar e não apenas no custo do serviço.

Foco no valor:

Em vez de apenas mencionar que você pode criar um site, demonstre como isso pode ajudar o cliente a:

Aumentar a visibilidade online: Um site bem feito pode melhorar a presença digital de um negócio, tornando-o mais acessível para potenciais clientes.
Gerar leads: Explique que um site otimizado pode atrair mais clientes e, consequentemente, aumentar as vendas.
Melhorar a reputação: Empresas com sites profissionais transmitem uma imagem mais confiável e séria.

Esses pontos de valor ajudam a convencer o cliente de que o investimento no seu trabalho será recompensado a longo prazo.

Apresentando a proposta:

Seja claro e direto em sua proposta. Mostre que você tem um plano, uma metodologia de trabalho e que se preocupa com as necessidades específicas de cada cliente. Um exemplo de estrutura para sua proposta pode ser:

Introdução: Quem você é e o que você oferece.
Entendimento do problema do cliente: Personalize essa parte para cada cliente. Mostre que você compreende o desafio que ele enfrenta.
Solução: Detalhe como você pretende resolver o problema, especificando as funcionalidades do site e os benefícios que trará.
Preço: Ofereça uma proposta de valor justa, mostrando que o investimento vale a pena.

Essa ferramenta vai te ajudar a construir propostas sensacionais: https://qwilr.com/

3. Começando pequeno: Projetos básicos para portfólio

Se você ainda não tem um portfólio ou experiência anterior para apresentar, pode ser útil começar com projetos mais simples e de menor escala. Muitas vezes, donos de negócios locais precisam de algo básico, como:

Um site institucional para apresentar a empresa.
Um blog para aumentar o alcance da marca.
Uma loja virtual simples.

Ao concluir esses projetos, você terá exemplos concretos para mostrar a outros potenciais clientes, aumentando sua credibilidade no mercado.

O que incluir no portfólio:

Projetos pessoais: Se você ainda não teve nenhum cliente, crie sites fictícios para empresas imaginárias. O importante aqui é mostrar suas habilidades técnicas.
Trabalhos voluntários: Ofereça seus serviços para ONGs, associações de bairro ou pequenos negócios que estão começando.
Aprimore seu próprio site: Tenha um site pessoal bem estruturado, onde você possa exibir seus projetos e compartilhar artigos ou insights sobre tecnologia. Seu próprio site será muitas vezes o primeiro exemplo que potenciais clientes verão do seu trabalho.

4. Construa uma presença online

Além de se conectar com empresas locais e utilizar sua rede de contatos, é fundamental que você invista na construção de uma presença online forte e consistente.

Onde Estar:

LinkedIn: Construa um perfil profissional no LinkedIn, destacando suas habilidades como desenvolvedor web. Participe de grupos de discussões sobre tecnologia e freelancing, e compartilhe seus projetos e insights.
Redes sociais: Utilize o Instagram, Facebook ou até mesmo o TikTok para divulgar seu trabalho. Você pode compartilhar exemplos de sites que criou, dar dicas sobre desenvolvimento web e se conectar com potenciais clientes.
Plataformas de freelancing: Cadastrar-se em plataformas como Upwork, Contra, Crowd, Arc dev, Freelancer ou Fiverr também é uma boa estratégia. Embora a concorrência possa ser alta, você pode começar oferecendo serviços a preços mais acessíveis para ganhar avaliações e construir uma reputação.

SEO Pessoal:

Se você tem um site próprio, é interessante aprender e aplicar boas práticas de SEO (Search Engine Optimization) para aumentar as chances de ser encontrado por clientes quando eles pesquisarem por desenvolvedores web. Você pode criar conteúdos relevantes, como tutoriais e artigos, que posicionarão você como uma autoridade no assunto.

5. Não tenha medo de trabalhar de graça (No início)

Às vezes, trabalhar de graça ou por um preço muito abaixo do mercado no início da sua carreira pode ser uma excelente estratégia para ganhar experiência e construir um portfólio. (Eu fiz isso algumas vezes e não me arrependo) O importante aqui é selecionar bem esses projetos.

Quando é vantajoso trabalhar de graça?

Projetos que agregarão valor ao seu portfólio: Escolha projetos que desafiem você e que possam impressionar futuros clientes.
Parcerias estratégicas: Trabalhar para uma ONG ou uma startup pode render ótimos contatos e oportunidades no futuro.
Trabalhos que ofereçam visibilidade: Se o projeto é para um cliente que tem muita visibilidade em seu nicho, isso pode gerar uma boa divulgação do seu trabalho.

6. A importância da reputação e do networking

No mundo do freelancing, sua reputação é seu maior ativo. Clientes satisfeitos tendem a recomendá-lo para outros. Por isso, além de entregar trabalhos de qualidade, foque em construir relacionamentos sólidos com seus clientes.

Como conquistar recomendação:

Entrega dentro do prazo: Seja pontual e sempre cumpra seus prazos, ou avise com antecedência se houver imprevistos.
Comunicação clara: Mantenha seu cliente informado sobre o andamento do projeto e esteja disponível para responder a dúvidas ou resolver problemas.
Exceda as expectativas: Sempre que possível, ofereça algo extra. Isso pode ser uma funcionalidade adicional, uma sugestão de melhoria ou até mesmo um tutorial para que o cliente consiga gerenciar o site por conta própria.

7. Conclusão

Conseguir seu primeiro freela como desenvolvedor web pode ser um desafio, mas com a estratégia certa, é totalmente possível. A chave está em usar sua rede de contatos, oferecer valor aos clientes e ser persistente. Ao aplicar essas dicas, você estará um passo mais perto de conquistar seu espaço no mercado de freelancing e construir uma carreira de sucesso.

O mais importante é não desistir: lembre-se de que, mesmo que pareça difícil no começo, o esforço valerá a pena quando as primeiras portas se abrirem, e novas oportunidades surgirem!

Obrigado por ler até aqui!

Se quiser trocar ideia, tô por aqui:

Dominando os Utility Types do TypeScript

Lincoli Xavier — Thu, 18 Jul 2024 17:45:23 +0000

Se você está navegando no universo TypeScript e ainda não explorou os poderosos Utility Types, prepare-se para se surpreender! Os Utility Types transformam seu código TypeScript, tornando-o mais limpo, seguro e eficiente. Vamos explorar esses tipos e ver como eles podem facilitar sua vida de desenvolvedor.

O Básico: O que são Utility Types?

Os Utility Types são tipos genéricos fornecidos pelo TypeScript que permitem transformar outros tipos de maneira prática e útil. Eles ajudam a simplificar o código, garantindo que ele seja mais robusto e menos propenso a erros. Vamos mergulhar em alguns dos utility types mais comuns e ver exemplos práticos de como usá-los.

1. Partial 🧩

Imagine que você tem uma interface User e deseja criar uma função que atualize os dados do usuário, mas sem a necessidade de passar todas as propriedades. O Partial é a solução!

interface User {
  id: number;
  name: string;
  age: number;
}

const updateUser = (user: Partial<User>) => {
  console.log(user); // Agora é possível passar apenas algumas propriedades
};

updateUser({ name: "Alice" }); // Válido
updateUser({ age: 30 });       // Válido

2. Required ✔️

Às vezes, você precisa garantir que todas as propriedades de um tipo sejam obrigatórias. É aqui que o Required entra em cena.

interface User {
  id?: number;
  name?: string;
  age?: number;
}

const createUser = (user: Required<User>) => {
  // Agora todas as propriedades de User são obrigatórias
  console.log(user);
};

createUser({ id: 1, name: "Sibelius", age: 29 });

3. Readonly 🔒

Precisa garantir que as propriedades de um objeto não sejam modificadas? Use o Readonly.

interface User {
  id: number;
  name: string;
}

const getUser = (user: Readonly<User>) => {
  console.log(user);
};

const user: Readonly<User> = { id: 1, name: "Yaya" };
user.id = 2; // Erro: Cannot assign to 'id' because it is a read-only property.

4. Pick 🎯

Quer criar um tipo com apenas algumas propriedades de outro tipo? O Pick é perfeito para isso.

interface User {
  id: number;
  name: string;
  age: number;
}

type UserIdAndName = Pick<User, "id" | "name">;

const user: UserIdAndName = { id: 1, name: "Yaya" }; // Válido

5. Omit 🚫

Precisa excluir algumas propriedades de um tipo? O Omit é a ferramenta certa.

interface User {
  id: number;
  name: string;
  age: number;
}

type UserWithoutAge = Omit<User, "age">;

const user: UserWithoutAge = { id: 1, name: "Yaya" }; // Válido

6. Record 📚

Quer criar um objeto onde cada chave tem um tipo específico? Use o Record.

type Role = "admin" | "user" | "guest";

const roles: Record<Role, number> = {
  admin: 1,
  user: 2,
  guest: 3,
};

7. Exclude 🔍

O Exclude é útil quando você precisa criar um tipo excluindo alguns membros de uma união.

type T = "a" | "b" | "c";
type ExcludeB = Exclude<T, "b">; // "a" | "c"

8. Extract 🕵️

O Extract permite criar um tipo extraindo membros de uma união.

type T = "a" | "b" | "c";
type ExtractA = Extract<T, "a" | "b">; // "a" | "b"

9. NonNullable 🚫 null/undefined

Quer remover null e undefined de um tipo? Use o NonNullable.

type T = string | number | null | undefined;
type NonNullableT = NonNullable<T>;

Colocando Tudo em Prática

Vamos ver um exemplo prático que utiliza vários desses utility types para construir uma aplicação robusta e segura.

interface User {
  id: number;
  name: string;
  email?: string;
}

// Atualiza um usuário aceitando apenas algumas propriedades
const updateUser = (user: Partial<User>) => {
  // Código para atualizar o usuário
  console.log("User updated:", user);
};

// Função que cria um usuário garantindo que todas as propriedades estejam presentes
const createUser = (user: Required<User>) => {
  console.log("User created:", user);
};

// Exibe os dados do usuário, sem permitir modificações
const printUser = (user: Readonly<User>) => {
  console.log("User:", user);
  // user.id = 2; // Erro: Cannot assign to 'id' because it is a read-only property.
};

// Atualizando usuário com propriedades parciais
updateUser({ id: 1, email: "lincolixavier@zoho.com" });

// Criando um usuário com todas as propriedades obrigatórias
createUser({ id: 2, name: "Zidane", email: "zidane@zoho.com" });

// Exibindo dados do usuário, sem modificá-los
printUser({ id: 3, name: "Carlos" });

Neste exemplo, utilizamos Partial, Required e Readonly para diferentes funções que manipulam um objeto User. Cada função tem requisitos específicos para o tipo de objeto que aceita, garantindo flexibilidade e segurança.

Dicas Práticas

Combine Utility Types: Não hesite em combinar utility types para criar tipos complexos que atendam às suas necessidades. Por exemplo, você pode combinar Partial com Pick para criar um tipo com propriedades opcionais específicas.
Documente Seu Código: Utility types podem tornar o código mais difícil de entender à primeira vista. Adicione comentários claros para explicar o que cada tipo está fazendo.
Use Utility Types para Refatoração: Ao refatorar seu código, os utility types podem ajudar a garantir que você não quebre nenhuma parte do sistema, especialmente quando você está lidando com objetos grandes e complexos.
Experimente e Teste: Não tenha medo de experimentar diferentes utility types e ver como eles podem simplificar seu código. Use testes para garantir que as transformações de tipos estão funcionando como esperado.

Os Utility Types do TypeScript são ferramentas poderosas que podem transformar a maneira como você escreve e mantém seu código. Ao usá-los de forma inteligente, você pode criar aplicações mais robustas, seguras e fáceis de manter. Então explore, experimente e aproveite a mágica dos Utility Types!

Gostou do artigo? Comente quais utility types você mais usa ou quer começar a usar!

Que a Tipagem Estática esteja com você 💪

Referência: TypeScript Handbook

✨ Conheça a Comunidade Nomadz ✨
👉🏻 Patreon

Quer falar comigo? Tô por aqui:

9 Web API's que fazem mágica ⚡🧙🏻‍♀️🧙🏾‍♂️✨

Lincoli Xavier — Thu, 28 Mar 2024 18:01:42 +0000

Se voltássemos no tempo uns 20 anos, ou até menos, e falássemos para os desenvolvedores web daquela época o que os navegadores conseguem fazer hoje, definitivamente não acreditariam. Olhando em perspectiva o que os browsers fazem hoje com certeza garantiriam a entrada do Chrome, Firefox, Edge e outros em Hogwarts. Sabemos também quem ficaria de fora 👀 (aqueles que não devem ser mencionados IE/Safari)
Vamos dar um panorama de algumas Web Api's que fazem verdadeiras mágicas, especialmente em dispositivos móveis.

1. Ambient Light Events 💡

Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa mudança. Imagine o que dá pra fazer com fotografias, ambientes escuros ou contrastes de acessibilidade Instantâneos!

Exemplo:

 if ('ondevicelight' in window) {
      window.addEventListener('devicelight', function(event) {
        var body = document.querySelector('body');
        if (event.value < 50) {
          body.classList.add('darklight');
          body.classList.remove('brightlight');
        } else {
          body.classList.add('brightlight');
          body.classList.remove('darklight');
        }
      });
    } else {
      console.log('devicelight event not supported');
    }

Compatibilidade - Firefox, Firefox Android

2. Web Bluetooth API 📲

E se eu lhe dissesse que os sites podem se comunicar com dispositivos Bluetooth próximos de maneira segura e preservando a privacidade? Dessa forma, monitores de frequência cardíaca, medidores de glicemia, e muito mais poderiam interagir diretamente com um site.

Até agora, a capacidade de interagir com dispositivos Bluetooth só era possível para aplicativos específicos da plataforma. A API Web Bluetooth pretende mudar isso e trazê-lo também para navegadores da web.

Como recurso de segurança, a descoberta de dispositivos Bluetooth com navigator.bluetooth.requestDevice deve ser acionada por uma ação do usuário, como um toque ou clique do mouse. Estamos falando sobre ouvir eventos pointerup, click e touchend.

Compatibilidade - Chrome, Edge, Opera, Chrome Android, Opera Android, Samsung Internet

button.addEventListener('pointerup', function(event) {
  // Call navigator.bluetooth.requestDevice
});

Assim você consegue acessar as informações de bateria por exemplo:

async function onButtonClick() {
  try {
    log('Requesting Bluetooth Device...');
    const device = await navigator.bluetooth.requestDevice({
        filters: [{services: ['battery_service']}]});

    log('Connecting to GATT Server...');
    const server = await device.gatt.connect();

    log('Getting Battery Service...');
    const service = await server.getPrimaryService('battery_service');

    log('Getting Battery Level Characteristic...');
    const characteristic = await service.getCharacteristic('battery_level');

    log('Reading Battery Level...');
    const value = await characteristic.readValue();

    log('> Battery Level is ' + value.getUint8(0) + '%');
  } catch(error) {
    log('Argh! ' + error);
  }
}

E outras dezenas de opções estão disponíveis!

3. Broadcast Channel API 🛰️

Compartilhando de informações entre janelas, tabs, iframes etc, quem já teve problema em precisar integrar esse tipo de comunicação, essa api é salvação.

Tente fazer login em um de seus sites favoritos. Em seguida, abra o mesmo site em uma guia separada. Normalmente você estará logado em ambas as páginas. Em seguida, saia em uma de suas guias. Na maioria dos sites, parecerá que você está conectado em uma página e desconectado na outra.

Suas janelas estão em estados diferentes: conectado ou desconectado. Isso não é ótimo e se você é um tabber maníaco (como eu), pode causar alguma confusão.

Isso pode até ser um problema de segurança. Imagine que seu usuário está em uma cafeteria usando o painel da empresa. Ele sai para ir ao banheiro e deixa o computador ligado. Se a aplicação fosse aberta em múltiplas abas seria possível acessar os dados disponíveis nas demais abas (na tela ou talvez algum token JWT).

Compatibilidade - Chrome, Edge, Firefox, Opera, WebView Android, Chrome Android, Opera Android, Samsung Internet

4. Contact Picker API 👥👥

Você tem acesso aos contatos do telefone via browser (: Usar informações como nome, email, telefone, endereço e ícone se estiverem disponíveis, a aplicabilidade disso é quase infinita.

Compatibilidade - Opera, WebView Android, Chrome Android, Opera Android, Samsung Internet

5. Web Video Text Tracks Format (WebVTT) 🔠

Outra grande amiga da acessibilidade, quer colocar legenda nos seus vídeos? usando a tag <video> ? É possível customizar via css as legendas também. Vai fundo nessa lindeza =D

Exemplo:track.vtt

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.
  <video controls autoplay src="video.webm">
    <track default src="track.vtt">
  </video>

Compatibilidade - Todos os browsers modernos

6. The WebSocket API 🔁

O protocolo Websocket é uma tecnologia que permite comunicação bidirecional e conexão persistente entre servidores e clientes

Ele oferece uma conexão única e de longa duração que é uma alternativa mais eficiente ao HTTP (apesar que o handshake, pra realizar a conexão em si é http) para aplicativos da web em tempo real.

Essa é uma verdadeira mágica! Com essa API, você pode enviar mensagens a um servidor e receber respostas orientadas a eventos sem precisar consultar o servidor para obter uma resposta. Realtime meus amigos <3

Compatibilidade - Todos os browsers modernos

7. Screen Capture API 🖥️

A mágica do print e da gravação de tela! Com essa API, sites e aplicativos na web podem gravar facilmente uma aba do navegador, uma janela específica ou até mesmo a tela inteira de um usuário. Super simples de usar!

Exemplo:

  async function startCapture(displayMediaOptions) {
    let captureStream = null;

    try {
      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch(err) {
      console.error("Error: " + err);
    }
    return captureStream;
  }

Compatibilidade - Chrome, Edge, Firefox, Opera, Safari

8. Proximity Events 🤳

Essa API define eventos que fornecem informações sobre a distância entre um dispositivo e um objeto, medida por um sensor de proximidade. Inicialmente fazia parte da API Sensor, posteriormente dividida e se tornou uma API independente. As especificações da API Proximity são consideradas estáveis porque atingiu o status de Recomendação Candidata do W3C em 1º de outubro de 2013.

Se você já teve ou usou um smartphone, o que presumo que já tenha, você já viu essa API em ação :)

Quer um exemplo? Pense em sua última ligação e no que você fez. Você desbloqueou seu smartphone, digitou o número para o qual deseja ligar e tocou no botão “Ligar”. Feito isso, você colocou o smartphone próximo ao ouvido e de repente algo mágico aconteceu, a tela desligou.

Bem intuitiva a implementação:

  window.addEventListener('userproximity', function(event) {
    if (event.near) {
      // let's power off the screen
      navigator.mozPower.screenEnabled = false;
    } else {
      // Otherwise, let's power on the screen
      navigator.mozPower.screenEnabled = true;
    }
  });

Compatibilidade - Firefox, Firefox Android

9. Picture-in-Picture API

Comum no whatsapp, facebook, youtube. Essa API permite criar o vídeo flutuante em cima de outras janelas para que os usuários possam continuar a consumir mídia enquanto interagem com outros sites de conteúdo ou aplicativos em seus dispositivos.

Compatibilidade - Chrome, Edge, Opera, Safari, iOS Safari

E tem muito mais! São 77 API's com capacidades incríveis. Cada uma merece um artigo dedicado, vale a pena conferir e brincar com elas.

Gostou? Comenta o que é mais interessante pra ti? Qual API dessas já usou ou quer usar?

Que a Magia esteja com você

Fonte: MDN web docs

.
.
.
.
.

✨ Conheça a Comunidade Nomadz ✨
👉🏻 https://www.patreon.com/nomadz/membership