TLDR: Mudou, mas nem de perto o quanto eu acreditava que mudaria.
Faculdade não é algo novo em meus pensamentos. Houve uma época em que eu sonhava fazer faculdade, trabalhar em algo importante que me fizesse feliz e, principalmente, que me desse condições de ajudar minha família e, quem sabe, poder dar uma casa para minha mãe. Sim, eu costumava ser uma pessoa sonhadora, mesmo que a minha origem fizesse de tudo para que eu não sonhasse.
Nascido em uma família pobre na metade dos anos 80, não tenho muitas lembranças de quando era pequeno, mesmo quando olho algumas das poucas fotos da época. Uma das minhas primeiras lembranças de quando era criança, são de por volta de 1993 e 1994. Me lembro de assistir corridas de Fórmula 1 e chorar quando o Senna batia e saía da corrida. Mal sabia eu que naquele 1º de maio de 1994, dia no qual eu estava olhando a corrida, aquela batida do Senna seria a última.
Na época de escola, até o 8º ano, confesso que não me lembro de ter pensado sobre carreira, faculdade ou qualquer coisa do tipo. Lembrando: minha família era bem pobre e, quando se é pobre, fica muito difícil de pensar ou sonhar com qualquer coisa.
No ensino médio, comecei a pensar no que eu faria depois, ou melhor, o que eu tentaria fazer. Ainda no ano de 2001, sequer pensar em fazer uma faculdade era algo fora de alcance. Mesmo assim, comecei a sonhar com isso. Os dois cursos que tinha na cabeça eram Fotografia e Moda. Eu adorava desenhar e desenhava muito bem — ao menos naquela época —, então pensava que seria algo que eu gostaria de seguir. Mas logo a realidade me puxou para o chão, abafando cada vez mais esses “sonhos”, até que eles sumiram.
Em 2008 comecei a trabalhar com tecnologia. Fiz um curso piloto que era uma parceria entre uma escola técnica e algumas empresas, e essa foi a minha porta de entrada para o mundo da tecnologia.
Eu já brincava com algumas coisas em casa, pois no meu primeiro trabalho com carteira assinada, lá em 2006, usei o meu 3º salário para comprar um computador (parcelado em um carnê de loja). Para quem não faz ideia do que estou falando, é como fazer uma compra parcelada no cartão de crédito, porém eles te davam um carnê com diversos boletos e tu pagava eles todos os meses — parece loucura, mas é verdade.
Eu poderia facilmente dizer que a melhor escolha da minha vida foi começar a trabalhar com tecnologia, e provavelmente é verdade, mas creio que só trabalhar com tecnologia não me teria me trazido até onde estou hoje, então segue a ideia.
No final de 2012, fui influenciado pela minha então namorada — agora esposa —, que havia terminado o ensino médio há pouco tempo. Então acabei decidindo embarcar nessa longa viagem, acreditando que isso mudaria a minha vida.
Mas antes de tudo, eu sabia de uma coisa: era IMPOSSÍVEL pagar por uma faculdade, totalmente fora de cogitação. Por isso, decidi me matricular no início de 2013 fazendo apenas uma disciplina — que consumiria 40% do meu salário na época — e depois faria a prova para tentar uma bolsa integral.
Foram dois anos até que, no final de 2014, consegui uma bolsa pelo ProUni, e isso tirou um peso muito grande das minhas costas até na questão financeira, pois já estava quase impossível de bancar. Além disso, podemos dizer que foi no último momento, porque eu já tinha concluído que, se não conseguisse a bolsa, largaria a faculdade no próximo ano. Era um valor muito alto que nunca teria de volta.
Falei sobre o início do curso e a bolsa, mas não falei sobre o que é parte da melhor escolha que já fiz na minha vida.
Escolher o curso foi um pouco difícil no começo, afinal a “melhor escolha” seria um curso de tecnologia — área profissional na qual eu atuava e que eu gosto muito . No entanto, quando comecei a pesquisar sobre os cursos da área e vi as grades curriculares e os conteúdos de cada um deles, o sentimento que melhor descreveria o que senti é frustração.
Cerca de 80% a 90% do currículo de todos os cursos mostrava coisas que eu já sabia ou então tinha estudado por conta própria para melhorar o meu trabalho; e isso certamente me deixaria frustrado e desanimado já nos primeiros semestres.
Portanto, comecei a olhar outras coisas, e podemos dizer que, no fim, a minha escolha acabou sendo um mix da minha área profissional com o que eu sonhava há muitos anos. O curso escolhido foi Design.
Eu trabalhava em desenvolvimento web com foco em front-end, então senti que esse curso poderia agregar bastante no meu dia a dia e em como eu enxergo e faço o meu trabalho. E eu estava certo. Estudar Design mudou completamente a minha visão tanto sobre o mundo quanto sobre o meu trabalho. Me fez entender muito melhor o meu trabalho e também o trabalho das pessoas em outras funções ao meu redor.
A melhor escolha que fiz na minha vida foi, sem sombra de dúvidas, fazer faculdade de Design.
Pode ser estranho o que vou dizer, e será.
Por muito tempo na minha vida, fui uma pessoa que criava expectativas demais sobre as coisas e as pessoas. Nem preciso dizer que isso quase sempre me deixava triste e desanimado.
Geralmente as coisas não ocorrem como a gente imagina, muito pelo contrário. A vida foi me ensinando isso devagar e dolorosamente durante anos, principalmente quando eu era mais novo.
Na época em que comecei a faculdade, eu já era uma pessoa que quase não criava expectativas, afinal, sabia que isso não me faria bem. No entanto, estava empolgado com o curso, com o que aprenderia nele e também sobre o universo que me seria apresentado e tudo o mais. Até pouco mais da metade do curso essa empolgação só crescia — hoje, olhando para trás, vejo que relevei as coisas que não eram nada empolgantes —, mas, aos poucos, essa empolgação passou a diminuir e, com isso, veio a “dor” junto de uma imensa falta de vontade e ânimo em continuar.
Conforme vamos entendendo mais sobre um determinado assunto, é normal que ele deixe de nos empolgar e comece a parecer não tão interessante para nós. Mas isso nem sempre precisa ser verdade.
Os problemas que eu enxergava no curso, na instituição e até em alguns professores já haviam passado a ser algo muito maior do que a empolgação com a área de estudo. O fato de estudar Design muito provavelmente me fez ser mais crítico e analisar melhor tudo isso, além de conseguir notar esses problemas que antes nunca conseguira enxergar.
O currículo do curso, apesar de ser “generalista”, é muito focado em produto — muitas vezes no setor calçadista, que, no passado, era o que movia a cidade em que a universidade está localizada, porém já não é uma força há mais de uma década. A falta de disciplinas focadas no digital — um dos principais geradores de emprego na área, que só cresce a cada ano — é desanimador.
E a lista só aumenta…
Professores ótimos sendo dispensados ou deixados de lado. Pouquíssimas contratações à altura dos profissionais anteriores. Diversas disciplinas sem muito conteúdo relevante ou onde o conteúdo é apenas cases de marca. Falta de coerência em avaliar os trabalhos em diversas disciplinas — e aqui não estou falando de notas, mas sim de analisar um trabalho de design e apontar coisas que não estão boas, além de cobrar justificativas das escolhas para a solução. SNo geral, não havia essas críticas necessárias — salvo alguns professores que faziam isso de forma impecável.
Para o Everton de hoje, fazer faculdade ou até mesmo continuar nela foi a pior escolha da minha vida. É bastante tempo e desgaste demais para um retorno muito pequeno. Infelizmente.
Enfim… Tudo isso me faz chegar a este impasse curioso. Ou melhor, algo que pensei que fosse um impasse por muito tempo, mas, na verdade, não é. Em momentos diferentes, uma mesma coisa pode ser a melhor e também a pior escolha da vida e, ainda assim, uma não anula ou desmerece a outra.
E o que eu quero dizer com tudo isso? Estranhamente, hoje eu não tenho nenhuma vontade de continuar a faculdade, mesmo faltando apenas três disciplinas para finalizar. Apesar disso, escolher fazer Design foi a melhor ou uma das melhores decisões que tomei na minha vida. E sou muito feliz por isso.
Um dos melhores professores que eu tive me ensinou sobre História da Arte da forma mais incrível que eu possa imaginar. Um professor que, às vezes, me fazia sair das aulas com os olhos cheios de lágrimas, e também com uma força e empolgação que só a aula dele me fazia sentir.
Um trecho de algo que ele dizia ainda permeia ios meus pensamentos mesmo depois de vários anos:
Conforme tu for se tornando designer, tu vai ver o mundo de forma diferente. Muitas vezes, isso vai acabar te deixando tão chateado que, em diversos momentos, tu vai pensar “eu queria poder voltar a ser ignorante de conhecimento e não ver as coisas de forma tão clara”. E, nesses momentos, tu deve olhar para o outro lado e pensar, mas agora que eu vejo, eu posso mudar as coisas… eu posso mudar o mundo aos pouquinhos.
Até mais e obrigado pelos peixes.
]]>Vou te contar como é possível, e é mais simples do que parece.
A Network Information API (API de informações da rede) é uma Web Api, que como o nome já diz, nos fornece dados sobre a conexão do usuário, como largura de banda, tipo de conexão, dentre outros.
Ainda é uma API experimental e a especificação está na fase de rascunho, ou seja, nem todos os navegadores tem suporte e sua interface ainda pode mudar conforme a sua especificação evoluir. Mas isso não nos impede de usufruir da Network Information API nos navegadores que já suportam.
Para termos acesso aos dados da conexão do usuário, precisamos acessar os dados no objeto navigator do navegador.
Para usarmos em outros navegadores, podemos usar os alias de cada navegador:
Com esse objeto connection temos acesso as seguintes informações:
Um ótimo exemplo de uso que podemos citar, seria fazer ou não o pré-carregamento de um vídeo com base na conexão do usuário. Então poderíamos implementar algo assim:
No exemplo acima, temos uma variável preloadVideo
que inicia com o valor true
. Após, verificamos a conexão do usuário. Caso o effectiveType
seja diferente de 4g
, mudamos o valor da variável para false
e, consequentemente, não fazemos o pré-carregamento do vídeo.
Podemos ainda adicionar uma escuta de evento para saber quando há uma mudança na conexão do usuário.
Para garantir que nosso código não vai quebrar nossa aplicação, caso o navegador não tenha suporte, podemos facilmente testar se o navegador tem suporte a Network Information API da seguinte forma:
Podemos também adicionar no nosso teste as vendors dos outros navegadores:
Aplicando isso ao nosso exemplo, de fazer o pré-carregamento do vídeo, nosso código ficaria assim:
Simples e direto! Assim garantimos que nosso código continue funcionando mesmo que o navegador não suporte a funcionalidade ou caso a interface mude no futuro.
Apesar da especificação da Network Information API ainda ser um rascunho, ela já está implementada em alguns navegadores e já pode ser usada. Podemos usá-la nos navegadores que a suportam, sem que tenha problemas com os outros navegadores e sem que quebre nossa aplicação, caso a interface dela venha mudar posteriormente.
Mais uma forma de otimizarmos nossas aplicações para o nosso usuário.
Até mais e obrigado pelos peixes.
]]>Performance é importante, performance é funcionalidade.
Hoje vamos falar um pouco sobre performance e sobre uma ferramenta que vai te ajudar a medir a performance das suas aplicações.
A performance sempre foi um ponto importante para as aplicações web. Antigamente existia um impacto na performance em virtude das velocidades de internet lentas, principalmente em países subdesenvolvidos.
Já atualmente, como o mundo é mobile, o número de pessoas como um smartphone nas mãos cresce a cada dia e, com isso, os problemas de performance começam a surgir.
Existem algumas coisas importantes que precisamos nos atentar quando estamos desenvolvendo nossas aplicações. As principais são:
Esses são as perguntas iniciais que precisamos responder, pois elas vão basear o quão importante a funcionalidade performance vai ser na sua lista de prioridades.
Existem diversas formas de medir a performance das nossas aplicações, mas eu gosto de fazer um mistos de algumas sempre que possível.
O Lighthouse é uma ferramenta automatizada de código aberto criada pela Google, para medir a qualidade das páginas da web.
Pode ser executado em qualquer página da web, pública ou exigindo autenticação. O Lighthouse avalia as páginas da sua aplicação levando em consideração diversos quesitos e padrões web consolidados das suas aplicações web.
Esses quesitos são divididos em 5 categorias diferentes:
Este é o principal item que vamos nos atentar aqui. Ele mede o tempo que leva para a “primeira pintura com conteúdo” aparecer na tela, o tempo que leva para que o usuário consiga interagir com sua aplicação, se existem deslocamentos de layout, dentre outros itens.
As verificações de acessibilidade destacam oportunidades para melhorar a acessibilidade de seu aplicativo da web, detectando automaticamente problemas comuns de acessibilidade.
O nome é autoexplicativo. Ele testa diversas melhores práticas consolidadas, como uso de HTTPS, erros de javascript no console, charset, imagens com proporções corretas, dentre muitos outros.
As verificações de SEO (Otimização para mecanismos de busca) garantem que sua página seja otimizada para a classificação dos resultados do mecanismo de pesquisa.
Neste ponto, as verificações são básicas. Para otimizar sua página para os mecanismos de busca, não se baseie só nesse relatório, mas é um bom ponto de partida.
As verificações de PWA (Progressive Web App) validam os aspectos de um Progressive Web App.
Como vimos, ele aborda vários aspectos de uma aplicação. Talvez nem todas façam sentido para seu contexto e tudo bem.
O Lighthouse pode ser utilizado via uma extensão para o Google Chrome do Lighthouse ou via linha de comando. Aqui vamos abordar a opção via extensão.
Você pode acessar a Chrome Web Store e instalar como você instalaria qualquer outra extensão. Após instalada, você pode acessar clicando no ícone do farol, que vai aparecer nas extensões, e depois em “Generate report”.
Ela vai analisar todos os aspectos que comentamos acima e, depois, vai exibir uma pontuação para cada um dos itens que abordamos acima, além do detalhamento de cada um dos itens que foram analisados.
A performance deve ser uma funcionalidade e não um “plus” das suas aplicações. Nós, quanto desenvolvedores, precisamos levar mais a sério e pensar mais em como podemos melhorar a performance das nossas aplicações. Seja não instalando aquela dependência que pesa 500kb para usar uma funcionalidade dela, ou adicionando imagens em 4K sendo que elas são exibidas no tamanho de 1200x800 pixels.
Performance é importante, performance é funcionalidade.
Até logo e obrigado pelos peixes.
]]>Hoje vamos falar sobre Web components e mergulhar mais fundo no que a web tem para nos oferecer.
Web components são três tecnologias separadas que são usadas em conjunto e permitem a criação de elementos customizados reutilizáveis.
As três tecnologias são:
Um dos principais recursos dos Web components é a capacidade de criarmos elementos personalizados onde nossa funcionalidade fica encapsulada.
Como o nome já entrega, custom elements são elementos HTML, como <div>
, <section>
ou <article>
, porém são elementos que podemos nomear e que são definidos por meio de uma API do navegador, ou seja, uma Web API.
Os custom elements contêm suas próprias semânticas, comportamentos e marcações e podem ser compartilhados entre estruturas e navegadores.
No exemplo acima, definimos <meu-componente>
e seu próprio elemento HTML. Não parece muito útil por enquanto, pois é só uma tag que renderiza um texto qualquer, mas vamos evoluir a ideia logo mais. Todos os custom elements devem estender HTMLElement
de alguma maneira para que possam ser registrados no navegador.
Os custom elements existem sem o uso de frameworks, e os navegadores se dedicam a retrocompatibilidade da específicação, o que quase garante que os componentes que foram criados com base na especificação não sofreram de breaking API changes.
Outra coisa bacana é que esses componentes geralmente estão prontos para uso com praticamente todos as libs e frameworks mais populares atualmente, como Angular, React e Vue.
O Shadow DOM é uma versão encapsulada do DOM. Isso permite que fragmentos do DOM sejam isolados uns dos outros, incluindo qualquer coisa que possa ser usada como um seletor CSS. Com o Shadow DOM, você é capaz de isolar o CSS e JavaScript do seu web component.
Geralmente, qualquer conteúdo dentro do document é referenciado como light DOM, e qualquer conteúdo encapsulado é referenciado como shadow DOM.
Normalmente, estamos usando o light DOM e podemos selecionar um elemento simplesmente fazendo document.querySelector('.meu-seletor')
.
Já a shadow DOM funciona semelhante a um iframe
, onde o conteúdo é separado do resto do document. No entanto, quando criamos um shadow DOM, ainda temos controle total sobre esse fragmento da nossa página, mas com escopo específico. Isso é o que chamamos de encapsulamento.
Vamos a um exemplo:
HTML
Javascript
O shadow root pode incluir conteúdo do seu document, usando o elemento <slot>
. Usar um slot removerá o conteúdo do document externo e o colocará em um local determinado pela tag <slot>
dentro do shadow root.
O resultado no navegador seria esse:
São modelos definidos pelo usuário em HTML que não são renderizados até que sejam solicitados.
Quando precisamos reutilizar uma estrutura HTML, faz sentido ter um template para evitarmos de escrever várias vezes o mesmo código. Isso já era possível fazer antes, porém agora com o HTML template, ficou muito mais fácil.
Este elemento e seu conteúdo não são renderizados no DOM, mas ainda podem ser referenciados usando JavaScript.
Exemplo:
O exemplo acima não vai renderizar nenhum conteúdo até que um javascript consuma o modelo, instancie o código e diga ao navegador o que fazer com ele.
Vamos fazer isso agora:
Observe que neste exemplo criamos um modelo <template id = "users-template">
sem qualquer outra tecnologia de Web Components, ilustrando novamente que as três tecnologias podem ser usadas de forma independente ou coletiva.
Os Web Components estão aí para ficar, e se você ainda não conhecia ou não havia testado e brincado com eles, eu sugiro colocar isso na sua lista de tecnologias a testar agora mesmo.
As especificações dos Web Components são um conjunto de APIs de baixo nível que continuarão a crescer e evoluir conforme nossas necessidades como desenvolvedores evoluírem.
Em um post futuro, vamos falar sobre uma ferramenta bem bacana que pode nos ajudar a criar web components reutilizáveis, nossa própria biblioteca de componentes, ou até mesmo um Design System escalável.
Alguns links que vão te ajudar a se aprofundar no assunto:
Até mais e obrigado pelos peixes.
]]>Hoje vamos falar sobre uma funcionalidade bem simples mas que traz nossos web apps para mais próximos dos aplicativos.
Bora?
Os atalhos de aplicativos, ou app shortcuts, são atalhos que ajudam o usuário a fazer ações rápidas.
Nos dispositivos móveis, geralmente eles aparecem quando você pressiona o ícone do aplicativo por mais tempo, o famoso “long press”.
Já no desktop, os atalhos aparecem quando você clica com o botão direito do mouse sobre o link de uma aplicativo na barra de tarefas.
O menu dos atalhos de aplicativos só vão aparecer para Progressive Web Apps que o usuário instalou em seu dispositivo.
Os atalhos representam ações que o usuário possa querer fazer, e estão associadas a uma url na sua aplicação.
Alguns exemplos de atalhos:
Os atalhos de aplcativos são definido no manifest
, que é um arquivo que diz para seu navegador informações sobre a sua Progressive Web Apps e como ela deve se comportar quando for instalada.
Para declarar o nosso atalho, incluímos no nosso manifest
o seguinte código:
name
O label do seu atalho, esse é o texto que vai aparecer para o usuário.
short_name (opcional)
O texto que vai aparecer caso seu name
seja muito extenso. Mesmo sendo uma propriedade opicional, é recomendado que você preencha.
description (opcional)
A descrição de qual o objetivo do seu atalho do aplicativo. Não é usado no momento, mas pode ser exposto a tecnologia de assistência no futuro.
url
A URL que será acionada quando o usuário clicar no atalho do aplicativo.
icons
Uma array com os ícones, incluíndo o src
da imagem e sizes
com o tamanho. No momento SGVs não são suportados, portanto, use ícones em PNG.
Para testar se os atalhos foram configurados corretamente, é só acessar a aba “Aplication” no Chrome Dev Tools, e clicar em Manifest.
O DevTools suporta os atalhos de aplicativos a partir da versão 84 de Google Chorme e 84 do Microsoft Edge.
Os atalhos de aplicativos estão disponíveis para Android, a partir da versão 84 do Google Chrome e para Windows a partir vas versões 85 do Chrome e do Edge.
No Windows você pode testar habilitando a flag:
No Android, aparentemente não está funcionando ainda, mesmo na versão 84 do Chrome, pode ser porque as atualizações do Progressive Web App são limitadas uma vez ao dia. Você pode encontrar mais detalhes neste artigo. Você pode testar no Chrome Dev que funciona normalmente.
Uma funcionalidade simples, porém que nos mostra que as progressive web apps tem evoluído cada vez mais melhorando bastante a usabilidade para nossos usuários.
Algumas indicações de links interessantes de hoje:
Até mais e obrigado pelos peixes.
]]>Caso você não tenha visto o post anterior, Drag and Drop API: Introdução, confira ele antes.
Conferiu? Bora criar algum usando a Drag and Drop API?
Para mostrar na prática algumas das funcionalidades da Drag and Drop API, vamos criar um quadro kanban, bem simples, mas que vai nos permitir explorar os principais eventos desta Web API.
Um Quadro Kanban é uma ferramenta para visualização usada na gestão de projetos. Originalmente construído usando um quadro em branco, ele é dividido em colunas, onde cada coluna representa uma etapa do fluxo de trabalho.
Para iniciar, vamos criar alguns arquivos: index.html
, style.css
e script.js
. O mais importante deles e o que vamos trabalhar é o script.js
, o HTML e o CSS você pode copiar abaixo para facilitar a construção e focarmos no mais importante neste momento.
HTML
Um HTML básico, com uma section e 3 colunas.
CSS
Estilo básico para o quadro kanban. Você pode incrementar como achar melhor. :)
Javascript
No nosso javascript vamos começar apenas selecionando os elementos que nos interessam para adicionarmos os eventos: os cards e as listagens.
Os cards serão os elementos que serão arrastáveis, definimos isso no momento que colocamos o atributo draggable="true"
nestes elementos.
Nos cards, vamos adicionar as escutas dos eventos: dragstart
e dragend
.
Para facilitar a visualização e a legibilidade, vamos criar os métodos com os mesmos nomes de cada um dos eventos.
As listagens, são os elementos onde queremos poder soltar os cards que estamos arrastando. Nestas listagens vamos adicionar as escutas dos eventos: dragover
e dragleave
.
Da mesma maneira que fizemos com os cards, vamos criar os métodos com os mesmos nomes de cada um dos evento.
Agora que temos a base pronta e os métodos que vamos usar já criados, vamos para a implementação.
Dragstart
O primeiro método que vamos implementar será o dragstart
, pois é o evento dragstart
que é disparado quando começamos a arrastar um elemento que é arrastável.
Quando começarmos a arrastar um card, queremos saber 2 coisas:
Para isso, vamos adicionar um classe css nas listagens, que são os locais onde podemos soltar os cards e adicionar uma classe no card que estamos arrastando, para saber qual card estamos arrastando no momento.
Neste caso, como passamos apenas a função como parâmetro no addEventListener
o nosso this
aqui, é o card no qual adicionamos esse evento.
Dragend
O evento dragend
é disparado quando estamos terminando a operação de arrastar – ao soltar o botão do mouse, por exemplo. Neste momento, queremos remover a classe css que adicionamos nas listagens e também no card, pois elas não são mais necessárias.
Assim como no caso anterior, como passamos apenas a função como parâmetro no addEventListener
o nosso this
aqui, é o card no qual adicionamos esse evento.
Dragover
O evento dragover
, é disparado quando o elemento que estamos arrastando está em um local onde ele pode ser solto, implementaremos a funcionalidade de mover o card para esta lista e também colocaremos uma classe css para sinalizar que estamos sobre um local que podemos soltar o card.
Dragleave e Drop
Para completarmos a funcionalidade básica do nosso quadro kanban, no evento dragleave
, que é disparado quando o elemento que estamos arrastando sai de um local onde ele pode ser solto e no evento drop
, vamos apenas remover a classe que colocamos para sinalizar que este local era um local onde o card poderia ser solto.
Pronto, com isso temos o nosso quadro kanban funcionando e aplicamos os principais conhecimentos que vimos da Web API do Drag and Drop.
Você pode conferir o código fonte final no repositório do GitHub e testar o quadro funcionando neste link.
A web tem evoluído muito nos últimos tempos e dado mais poder aos desenvolvedores para construir aplicações cada vez mais poderosas. O que vimos aqui hoje é o básico da Web API do Drag and Drop, mas já conseguimos criar a funcionalidade principal de um quadro kanban.
Você pode usar outras funcionalidades web para evoluir esse quadro e deixá-lo mais poderoso, como por exemplo, transformando ele em um Progressive Web App (PWA), ou implementar para que a usabilidade fique melhor na versão mobile, são muitas possibilidades!
Caso você não tenha visto o post anterior, Drag and Drop API: Introdução, é só acessar o link abaixo.
Até mais e obrigado pelos peixes.
]]>Se você está trabalhando de casa, sim você é privilegiado. Por ter um trabalho e poder fazê-lo sem se colocar em risco nas ruas.
Se hoje você tem um trabalho e está trabalhando de casa, no agora famoso, home office ou trabalho remoto, você é privilegiado. Claro que isso não quer dizer que trabalhar de casa é muito fácil, porque com isso, as barreiras entre momento de trabalho e momento de lazer ficaram mais tênues ainda, ou até mesmo, deixam de existir.
Isto é um problema, pois precisamos dessas barreiras para viver. Hoje vou compartilhar algumas ideias de como criar novamente essas barreiras e melhorar o seu dia-a-dia neste momento de pandemia.
Bora?
Você não é e não deve ser uma pessoa diferente no trabalho. Você precisa ser você mesmo.
Antes de mais nada, precisamos alinhar uma coisa: Você é uma pessoa só, você não é e não deve ser uma pessoa diferente no trabalho. Você precisa ser você mesmo.
Quando trabalhamos no mesmo local que vivemos, precisamos criar uma divisão destes espaços, destes modos da nossa vida.
Eu já trabalhei remoto por bastante tempo, e criar essa divisão entre casa e trabalho me ajudaram bastante a não trabalhar demais nem trabalhar de menos.
Existem duas abordagens que podem nos ajudar bastante a criar essa divisão, são elas:
Esta é provavelmente a mais eficaz para criarmos essa divisão, porém também é uma das mais difíceis de conseguirmos fazer, principalmente pela questão do espaço. O preço das moradias é algo bem caro, logo, muitos não tem como ter/alugar uma casa que tenha um cômodo extra ou até mesmo espaço sobrando.
Mas caso você tenha essa opção, seguem algumas ideias que podem ajudar a criar essa divisão:
Um cômodo da casa que é seu local de trabalho
Pode ser um escritório, ou uma outra peça qualquer, mas que seja usada somente para essa finalidade.
Uma mesa ou escrivaninha específica para o trabalho
Também é importante que ela só seja usada para o trabalho, assim você evita de trabalhar demais e também evita de não trabalhar em horário de trabalho.
Computadores específicos para trabalho e lazer
Está também é uma solução que pode funcionar. Eu não tenho muito espaço em casa, então minha mesa / escrivaninha é usada para trabalho e para minhas coisas pessoais.
Estou trabalhando remoto com o computador da empresa e também tenho o meu notebook pessoal então tenho em minha mesa, um monitor, no qual conecto os computadores. Quando começo o trabalho pela manhã, conecto o computador do trabalho no monitor, e ele vai ficar ali até o final do dia de trabalho.
No fim do dia, desconecto o computador do trabalho e conecto meu computador pessoal no monitor, e tudo que era de trabalho, não está mais acessível facilmente, isso me ajuda bastante a criar essa divisão entre pessoal e profissional.
Ainda mais importante que o espaço para o trabalho, é termos uma rotina de trabalho. Como falamos no início, antes você tinha toda uma rotina de coisas que você fazia até chegar no trabalho e começar a trabalhar, agora como o seu local de trabalho é a sua casa, você não se desloca mais e provavelmente não faz algumas outras rotinas que fazia antes.
O que funcionou para mim, são coisas bem simples que você pode tentar. Tenho uma rotina para inciar o dia de trabalho e outra para finalizar o dia de trabalho.
Iniciando o dia de trabalho
Finalizando o dia de trabalho
Olhando uma primeira vez, parecem vários passos, mas é algo que se tornou uma rotina e acaba sendo natural. Isso me ajuda a entrar no “modo trabalho” e depois conseguir sair dele e relaxar e fazer coisas pessoais e minhas tarefas de casa.
Viver apenas de rotinas não é saudável e pode nos deixar mais tristes e deprimidos, mas não podemos também deixar as rotinas totalmente de lado, pois elas são importantes para criarmos essas separações entre essas sessões da nossa vida.
Algum tempo atrás, minha noiva me mandou um vídeo bem bacana que fala sobre o momento que estamos vivendo e como podemos nos manter saudáveis físico e mentalmente. Isso também serve perfeitamente para outros momentos de nossa vida:
Vocês já trabalharam remoto? Como tem sido para vocês lidar com essa experiência? Compartilha sua experiência com a gente.
Até mais e obrigado pelos peixes.
]]>Sim, estou falando da Web API do Drag and Drop, ou arrastar e soltar.
Bora ver como ela funciona?
A Drag and drop API nos permite implementar a funcionalidade de arrastar e soltar elementos em nossas páginas web, diretamente no nosso navegador, sem necessitar de qualquer biblioteca extra.
Os elementos não são “arrastáveis” por padrão, mas conseguimos customizar os elementos para que se tornem arrastáveis. Vamos ver como funciona?
Para tornarmos um elemento arrastável, só precisamos adicionar o atributo draggable
com o valor true
nele.
Assim, nosso elemento já está pronto para ser arrastado por nossa página.
A drag and drop API tem alguns eventos de drag, esses eventos são acionados conforme fazemos as ações de selecionar e arrastar um elemento que seja arrastável, assim como quando soltamos esse elemento.
Os principais eventos do drag and drop são:
O evento é disparado quando começamos a arrastar um elemento que é arrastável. Neste evento podemos, por exemplo, adicionar uma classe css para mostrar onde este elemento que estamos arrastando pode ser solto. O event dragstart não é acionado quando arrastamos um arquivo do nosso sistema para o navegador.
O evento é disparado quando um elemento está sendo arrastado. Este evento vai ficar sendo disparado por todo o tempo que estivermos movendo, ou “segurando” o elemento.
O evento é disparado quando estamos terminando a operação de arrastar. (ao soltar o botão do mouse, por exemplo). O evento dragend não é acionado quando arrastamos um arquivo do nosso sistema para o navegador.
O evento é disparado quando o elemento que estamos arrastando entra em um local onde ele pode ser solto.
O evento é disparado quando o elemento que estamos arrastando está em um local onde ele pode ser solto. Ele é executado a cada 100 milisegundos.
Tanto o evento dragover
quanto o dragenter
, são usados para indicar locais onde os itens arrastados podem ser soltos. A maioria das áreas de uma página da web ou aplicativo não é um local válido para descartar dados. Portanto, o tratamento padrão desses eventos é não permitir uma queda.
O evento é disparado quando o elemento que estamos arrastando sai de um local onde ele pode ser solto.
O evento é disparado quando soltamos o elemento que estamos arrastando em um local válido.
Os eventos dragstart
, drag
e dragend
, são eventos do elemento que está sendo arrastado.
Os eventos dragenter
, dragover
, dragleave
e drop
, são eventos que você usa para controlar onde você deseja soltar o elemento que você está arrastando:
Essa foi uma pincelada bem rápida sobre a Web API do drag and drop, mas com esses sete eventos que vimos, conseguimos fazer tudo que precisamos. No próximo post vamos fazer algo na prática com a drag and drop API.
Você já conhecia essa web API? Já usou em algum projeto? Conta aqui embaixo sua experiência.
Alguns links de referência e documentação:
Até mais e obrigado pelos peixes.
]]>E se pudéssemos fazer nosso site usar o tema que o usuário selecionou no dispositivo que está usando? É exatamente isso que vamos ver hoje.
Bora entender como fazer isso?
O prefers-color-scheme
é uma CSS media feature, ou seja, são características do user-agent do usuário, no caso, o navegador. Ele tem informações como a orientação, o tamanho do dispositivo — que usamos geralmente na meta viewport no head da nossa página para setarmos o tamanho da viewport — e o que nos interessa aqui, o prefers-color-scheme
, que detecta se o usuário está usando o tema claro ou escuro.
Para detectar o tema do sistema vamos usar o método matchMedia()
, do nosso conhecido objeto window
. passando como parâmetro a media query string que queremos, no nosso caso, vamos usar o prefers-color-scheme
.
A implementação fica assim:
Essa chamada vai nos retornar um objeto do tipo MediaQueryList
com os seguintes atributos:
Para nós, o que importa aqui é o matches, então para sabermos o tema dos sistema que o usuário está usando, é só testarmos essa propriedade:
Bem fácil, não?
Para melhorarmos ainda mais nossa implementação, deixarmos mais robusta e completa, podemos ainda alterar o tema do site conforme o usuário muda o tema no sistema dele.
Assim, toda vez que o tema do sistema for alterado, o tema no nosso site será alterado também, seguindo o estilo de cores que você definir no seu tema.
Se você notar, o código que testa qual é o tema ficou repetido, e geralmente quando temos código repetido, é por que deveríamos isolar o código em um outro método.
Então, vamos criar um método que vai testar o tema e outro que vai aplicá-lo. Nossa implementação final vai ficar assim:
A web é livre e acessível — não tão acessível quando falamos de acesso a internet — mas sim comparada com os aplicativos. Quando implementamos funcionalidades que fazem com que nossos sites sejam mais integrados com os sistemas nos quais eles rodam, estreita mais ainda as linhas entre sites e aplicativos, como já falamos um pouco aqui.
Agora você pode implementar o dark mode e ainda deixar seu site usar o tema que o seu usuário gosta e está acostumado, não é demais?
Aqui alguns links com documentações de algumas coisas que falamos aqui, e o post anterior também:
Até mais e obrigado pelos peixes.
]]>Sendo ou não uma grande feature, vamos entender como implementar facilmente no nosso site hoje mesmo.
Bora?
O “Dark mode”, “Modo escuro” ou “Modo noturno” , é um tema para sites, aplicativos e sistemas que inverte a paleta de cores da tela, deixando o fundo na cor preta/cinza com as letras claras.
Existem vários motivos diferentes para gostar ou não do tema escuro, alguns gostam por que fica mais agradável aos olhos, outros porque simplesmente gostam do estilo.
Também tem o fato de que o dark mode ajuda na economia de bateria, principalmente se sua tela for OLED/AMOLED.
Antes de sairmos implementando, devemos entender que existem várias formas de implementar e a que vou mostrar aqui é apenas uma dessas formas, então vamos lá!
A abordagem mais comum é implementarmos alterando uma classe CSS no body ou html da página, mas essa você encontra fácil “pelas internet”.
Vamos usar uma abordagem menos comum, vamos implementar com javascript usando as variáveis do CSS.
No nosso CSS, vamos definir as variáveis CSS que vamos usar no tema:
para este exemplo, vamos definir apenas uma variável para a cor de fundo –background e outra para a cor do texto –text.
No nosso javascript, vamos definir um objeto com as variáveis dos nossos temas, neste caso teremos apenas dois temas, o tema claro e o tema escuro:
Então implementamos nosso método que vai fazer a alteração entre os temas, ela vai receber uma string com o nome do tema “light” ou “dark” e vai alterar dinamicamente as variáveis que definimos no nosso CSS.
Falta agora, criarmos alguma maneira de habilitarmos e desabilitarmos o dark mode e, para isso, vamos criar um checkbox para facilitar o processo.
Quando ele estiver marcado, :checked, o dark mode está habilitado, e quando ele estiver desmarcado, o light mode está habilitado.
Vamos adicionar um evento para escutar quando ele for marcado, para então chamarmos nosso método setTheme():
E pronto, já temos a nossa troca de temas funcional. Fácil né?
Para incrementar ainda mais nosso projeto, vamos implementar uma forma de guardar o tema escolhido pelo usuário, e deixar ele ativo até que o usuário altere novamente.
Conseguimos fazer isso facilmente com poucas alterações no nosso código. Para isso, vamos alterar nosso método setTheme() para que ele salve o novo tema escolhido no localStorage.
E também, ao carregar a página vamos verificar no localStorage se existe algum tema já salvo, e caso exista, chamamos nosso método setTheme() para alterar o tema:
E com isso temos nosso dark mode funcionando e guardando a preferência do usuário.
Bem legal né?
O dark mode pode ter gerado um buzz desnecessário, mas tudo que pode agregar para o usuário, eu acho válido. Então, dark mode all the things! \o/
Você pode habilitar o dark mode aqui no site! Foi implementado exatamente como descrevi aqui. :)
Algumas referências sobre o impacto na autonomia da bateria:
Até mais e obrigado pelos peixes.
]]>