{"componentChunkName":"component---src-templates-blog-template-tsx","path":"/","result":{"data":{"site":{"siteMetadata":{"description":"~apenas mais um programador é um blog de um desenvolvedor front-end, minimalista e especialista em WordPress. | Desenvolvedor Front-end em Curitiba | Desenvolvedor WordPress em Curitiba | Desenvolvedor Web em Curitiba | Programador em Curitiba","siteDesc":"~apenas mais um programador"}},"postsResults":{"edges":[{"node":{"id":"41bc24f9-b43d-599a-afd5-33cde30ede46","html":"

Introdução

\n

O Gatsby é uma ótima ferramenta para desenvolver lindos projetos utilizando React e unindo o recurso de SSR e SPA, sem contar que ele é um gerador de arquivos estáticos, que facilita muito SEO e acessibilidade do seu site.

\n

O Gatsby, assim como é uma boa prática em todos os projetos SPA, usa o recurso da tag <noscript> para exibir uma mensagem para o usuário informando que o site funciona melhor com o JavaScript habilitado no navegador.

\n

E nesse artigo vou explicar commo customizar essa mensagem usando o Customizing html.js recurso do próprio Gatsby para alterar o HTML base da aplicação.

\n

\n \n \nimport PropTypes from 'prop-types'\n\nexport default function HTML(props) {\n return (\n <html {...props.htmlAttributes}>\n <head>\n <meta charSet=\"utf-8\" />\n <meta httpEquiv=\"x-ua-compatible\" content=\"ie=edge\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n />\n {props.headComponents}\n </head>\n <body {...props.bodyAttributes}>\n {props.preBodyComponents}\n <noscript key=\"noscript\" id=\"gatsby-noscript\">\n This app works best with JavaScript enabled.\n </noscript>\n <div\n key={`body`}\n id=\"___gatsby\"\n dangerouslySetInnerHTML={{ __html: props.body }}\n />\n {props.postBodyComponents}\n </body>\n </html>\n )\n}\n\nHTML.propTypes = {\n htmlAttributes: PropTypes.object,\n headComponents: PropTypes.array,\n bodyAttributes: PropTypes.object,\n preBodyComponents: PropTypes.array,\n body: PropTypes.string,\n postBodyComponents: PropTypes.array,\n}\n

Se o seu arquivo está igual a esse código acima então encontre a tag <noscript> e adicione a classe gatsby-noscript, lembrando que é um arquivo JavaScript React, então não é class, mas className.

\n
<noscript key=\"noscript\" id=\"gatsby-noscript\" className=\"gatsby-noscript\">\n  This app works best with JavaScript enabled.\n</noscript>
\n

Adicionando o CSS

\n

Para adicionar o CSS vamos criar uma variável chamada noscriptStyle entre os imports e o início da função, e iremos atribuir a ela nossos estilos.

\n

Seria algo como isso:

\n
const noscriptStyle = `\n  .gatsby-noscript {\n    /* adicionamos os CSS para a mensagem aqui... */\n    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;\n    font-size: 16px;\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    display: block;\n    padding: 15px;\n    background: #f00;\n    color: #fff;\n    z-index: 10000;\n  }\n`
\n

Feito isso vamos inserir essa variável dentro da tag <noscript>, junto com a mensagem.

\n
<noscript key=\"noscript\" id=\"gatsby-noscript\" className=\"gatsby-noscript\">\n  <style>{noscriptStyle}</style>\n  This app works best with JavaScript enabled.\n</noscript>
\n

Demonstração

\n

Para ver como ficou basta desativar o javascript do seu navegador aqui mesmo nessa página que a mensagem vai aparecer.

\n

\n \n \n \n \n \n \n \n \n
Customizando mensagem da tag noscript no Gatsby - Demonstração
\n

\n

Bônus

\n

Você pode editar qualquer coisa nesse template JavaScript, só atenção para as variáveis props htmlAttributes, headComponents, bodyAttributes, preBodyComponents, postBodyComponents e body, essas props fazem o Gatsby funcionar corretamente.

\n

Eu mesmo dei uma modificada para deixar dentro do padrão (eslint) do meu projeto, pode ver o código-fonte do meu html customizado aqui no repositório do meu site.

\n

Quanto ao CSS, use e abuse, você pode mudar bastante coisa no seu site com ele, como eu tenho o header fixo no topo tive que mover ele 55px do topo para posicionar a mensagem.

\n

É isso ai, divirta-se!

\n

{goodbye}

","excerpt":"Introdução O Gatsby é uma ótima ferramenta para desenvolver lindos projetos utilizando React e unindo o recurso de SSR e SPA, sem contar que ele é um…","timeToRead":3,"frontmatter":{"category":["Gatsby"],"date":"há 8 anos","description":"Nesse artigo vou explicar como customizar a mensagem da tag noscript usando o recurso do próprio Gatsby para alterar o HTML base da aplicação.","path":"/customizando-a-mensagem-noscript-no-gatsby","tags":["Dicas","Gatsby","React"],"title":"Customizando mensagem da tag noscript no Gatsby","image":{"publicURL":"/static/customizando-a-mensagem-noscript-no-gatsby-466dc6f262ac64d3289b052750d55f09.png","name":"customizando-a-mensagem-noscript-no-gatsby"}},"fields":{"readingTime":{"words":565}}}},{"node":{"id":"0ee90ce4-479b-591e-babb-dd97aa70b327","html":"

Introdução

\n

Todo mundo já fez essa pergunta para si próprio: “Afinal, quem sou eu?”, se você ainda não fez, vai por mim, um dia você irá parar e refletir sobre sua essência e sua personalidade.

\n

Quem assistiu Dragon Ball Z nos anos 90 lembra da famosa frase de abertura “Oi! Eu sou o Goku!” (sim, ficamos velhos), pois bem... eu sempre gosto de repetir o mantra em minha mente, igual nosso herói de infância, “Eu sou o Fernando!”.

\n

Quem sou (como estou) agora?

\n

Oi! Eu sou o Fernando! Atualmente tenho 29 anos (faltando apenas 23 dias para fazer 30) e eu me peguei refletindo, quem é o Fernando de 29 anos e quem será o Fernando de 30 anos daqui alguns dias?

\n

Em um passado não tão distante eu não ligava muito para quem eu tinha me tornado, não ligava para quantas pessoas eu impactava com minhas ações.

\n

Não entendia na verdade.

\n

No passado eu era uma outra pessoa, e essa afirmação me faz pensar em quem eu sou agora e quem serei no futuro.

\n
\n

PS. Muitas coisas que vou escrever aqui, se o Fernando do passado pudesse ler ele me mataria.

\n
\n

Hoje sou intolerante a lactose, talvez por conta da quantidade de leite e derivados que eu comia no passado.

\n

Eu gosto de café sem açúcar e eu prefiro sentir mais o amargor que o doçe nas comidas.

\n

Eu gosto muito de Rap hoje, mais do que de Rock.

\n

Estou vegetariano, e cara como isso é bom!

\n

Defendo o consumo consciente e penso no futuro do planeta.

\n

Gosto de códigos mais do que de chocolate e de animais mais do que de pessoas.

\n

Sou minimalista (?). Sim, eu sou, e eu não sinto mais vontade de comprar coisas fúteis, o minimalismo tem me ensinado muitas coisas e uma delas é não se apegar a bens materiais, eles acabam, estragam, você perde ou é roubado.

\n
\n

PS. Já fui criticado por ser minimalista e ter Macbook e iPhone, minimalismo é viver com pouco, apenas o necessário, entenda isso e você irá bem. O Fernando do passado me fez comprar um iPhone, o Fernando de agora não teria comprado.

\n
\n

Você não é, você está

\n

Eu gosto muito desse texto do João Cristofolini que ele escreve em administradores.com.br, que diz: “Você não é seu cargo, você está no seu cargo”, é um texto curto mas me fez refletir.

\n
\n

Seu emprego, cargo ou trabalho é apenas um personagem de você atuando nesse mundo transitório. João Cristofolini

\n
\n

Sim, de fato você não é onívoro, carnívoro ou vegetariano, é sempre um estado, uma transição.

\n

Eu me considerava um viciado em carne, eu repetia a frase “bacon é vida!” o tempo todo.

\n

Eu era um “roqueirinho” que vestia preto o tempo todo, agora gosto de músicas em geral e me visto diferente de antes.

\n

Eu estava em um momento diferente, cercado de pessoas diferentes que fizeram eu “ser” uma pessoa diferente.

\n

Como estarei daqui 30 anos?

\n

Daqui uns dias completo 30 (tiozão!) e isso me faz pensar como estarei com 60 anos.

\n

Será que gostarei das mesmas coisas?

\n

Estarei morando na mesma cidade ou no mesmo país?

\n

Gostaria de ser rico (será?).

\n

O fato é, o seu passado me fez ser quem sou agora e estar no momento que estou agora, e são as decisões que tomarei agora que irão traçar o meu destino rumo aos meus 60 anos.

\n

E você, quem é você? Ou melhor em que momento da sua vida você está agora?

\n

A vida passa rápido! Aproveite cada momento presente pois ela é bela, reflita sobre suas ações e sempre evolua!

\n

/the-end

","excerpt":"Introdução Todo mundo já fez essa pergunta para si próprio: “Afinal, quem sou eu?”, se você ainda não fez, vai por mim, um dia você irá parar e…","timeToRead":3,"frontmatter":{"category":["Reflexões"],"date":"há 8 anos","description":"Todo mundo já fez essa pergunta para si próprio: “Afinal, quem sou eu?”, se você ainda não fez, vai por mim, um dia você irá parar e refletir sobre sua essência e sua personalidade.","path":"/como-esta-voce-agora-e-como-estara-daqui-30-anos","tags":["reflexoes","vida"],"title":"Como está você agora e como estará daqui 30 anos?","image":{"publicURL":"/static/hidethepainharold-4a1d1e74ca10e13295dd6e76f4ab8ffc.jpg","name":"hidethepainharold"}},"fields":{"readingTime":{"words":605}}}},{"node":{"id":"8776b2e0-c118-5d56-a075-1cabe82d72f8","html":"

Música

\n

Música para esse artigo é: \"Estou na mão\" de TNT, ouça aqui.

\n

https://open.spotify.com/track/0j2pDZRqF3cW7E5jlP5Yhv?si=YXweBEICQbquROummLyb3A

\n


Trecho:

\n
O tempo já passou pra nós dois\nQuando a lua caiu no telhado\nOutra menina já foi me chamar\nQuando você for falar comigo\n\nEu só quero amar\nEu só quero amar\nEu só quero amar você\nEu tô na mão
\n

Introdução aleatória

\n

Domingo, 14 de outubro de 2018, eu passei por um dos meus melhores finais de semana da minha meia vida, conheci pessoas novas e troquei muitas ideias aleatórias com essas pessoas.

\n

Estou escrevendo esse texto para agradecer por essas pessoas terem aparecido (aleatoriamente) por aqui, sem motivo, sem julgamentos e com a mente aberta.

\n

Pessoas essas que me fizeram entender um pouco mais a minha existência, refletir sobre o sentido (da minha) vida, coisas que só se passavam pela minha cabeça e que eu pude contar para essas pessoas sem julgamento nenhum.

\n

Esse texto é sobre alguns dos pensamentos que coloquei para fora durante esses 3 dias.

\n

Não ligue para o que os outros pensam de você

\n

Uma pessoa maravilhosa me disse na sexta-feira: “As pessoas estão mais preocupadas com elas mesmas”

\n

Eu sempre me preocupei com o que os outros estavam pensando de mim, o que pensavam da minha roupa e da minha aparência.

\n

Após esse comentário, em uma conversa aleatória, eu parei pra pensar que a vida é mais simples que imaginamos, a gente tem essa mania besta de complicar as coisas.

\n

Pensar que os outros estão preocupados com a vidinha imperfeita delas é uma dos melhores pensamentos que terei de hoje em diante.

\n

Não julgue

\n

Fazer julgamentos é uma atitude muito comum entre as pessoas, a gente julga a todo instante.

\n

Você com certeza já julgou hoje.

\n

Julgou a moça do caixa no mercado, quando ela demorou para passar o troco.

\n

Julgou quando uma cara aleatório na rua, te pediu dinheiro na rua pro gole dele;

\n

Você juntou as pessoas a sua volta, tentando adivinhar o pensamento delas, a partir do seu ponto de vista.

\n

Esses são julgamentos comuns entre as pessoas, eu mesmo já tive vários desses durante minha meia vida.

\n

Eu te desafio a fazer um teste, saia um dia na rua sem julgar as pessoas, apenas viva, se entregue, não tente se redimir, se submeter, se desculpar... apenas não julgue.

\n

Aprecie as pequenas belezas da vida

\n

Não ligar para o que os outros pensam de você e não julgar as pessoas a sua volta são os primeiros passos para começar a apreciar as belezas que existem na vida.

\n

Eu comecei a olhar pequenas coisas que estão a minha volta com outros olhos, passei a olhar pequenos detalhes da vida que antes eu não enxergava.

\n
\n

“As pessoas estão mais preocupadas com elas mesmas” Pessoa incrível que apareceu aleatoriamente na minha vida

\n
\n

Eu te proponho um outro desafio: Tente olhar para coisas menores a sua volta.

\n

Você vai descobrir coisas que não via antes e muitas vezes elas nem existiam para você.

\n

Tente não apenas olhar, mas tente apreciar, tente enxergar com outros olhos, veja o quanto essas coisas são belas.

\n

Olhe para essas coisas sem julgamento, e pense: “Nossa como isso é incrível! É lindo, é maravilhoso!”, Você me promete que vai exercitar isso?

\n

Qual o sentido da vida?

\n

Provavelmente você já se fez essa pergunta, e vai por mim, ela não tem uma resposta.

\n

Não se você fizer a pergunta dessa forma.

\n

E se você mudar um pouco ela? Seria uma mudança bem sutil.

\n

Qual o sentido da minha vida?

\n

Essa pergunta aparenta ser mais fácil de responder, não é mesmo?

\n

Pois é, ela é muito mais fácil de responder do que você imagina.

\n

Se você está procurando o sentido da sua vida, eu tenho a fórmula, e essa fórmula é baseada em apenas um único ingrediente.

\n
    \n
  1. Apenas viva.
    2. \n
\n

A vida foi criada por Deus (aquele divino sabe, uns o chamam pai, outros de irmão, outros de energia pura, outros de matéria) para ser vivida, então porque não viver?

\n

Faça o que você gosta, faça as outras pessoas felizes, exercite dar mais amor para as pessoas a sua volta e para o planeta, o qual você está destruindo nesse momento.

\n

Tudo é perecível, tudo acaba, sua vida, a vida de seus amigos, sua família, as plantas, animais e o planeta, todos se vão, voltam para o pó estelar de onde todos vieram.

\n
\n

Viva pois tudo vai se passar e você vai estar aí, marcando, com olhos fechados para sua própria vida.

\n
\n

Apenas Viva!

\n

// Fim.

","excerpt":"Música Música para esse artigo é: \"Estou na mão\" de TNT, ouça aqui. https://open.spotify.com/track/0j2pDZRqF3cW7E5jlP5Yhv?si=YXweBEICQbquROummLyb3A…","timeToRead":4,"frontmatter":{"category":["vida"],"date":"há 8 anos","description":"Domingo, 14 de outubro de 2018, eu passei por um dos meus melhores finais de semana, conheci pessoas novas e troquei muitas ideias aleatórias com essas pessoas.","path":"/role-aleatorio-com-conversas-aleatorias","tags":["pensamentos","aleatorio","geral"],"title":"Role aleatório com conversas aleatórias gerou pensamentos aleatórios","image":{"publicURL":"/static/role-aleatorio-ronaldinho-9249513884264a66181df95288a0066b.jpeg","name":"role-aleatorio-ronaldinho"}},"fields":{"readingTime":{"words":760}}}},{"node":{"id":"66291d1d-f10b-5f11-b316-fddc11a3f53b","html":"

Música para esse artigo é: \"Deriram\" de Natiruts, ouça aqui.\n
Trecho:

\n
Me sinto leve\nA força que me rege é a luz do sol\nOuvindo reggae\nCom o pensamento à frente, o sentimento bom
\n
\n

Reflexões - Think about it.

\n
\n

Você já parou para pensar o quanto você é manipulado pelos outros?

\n
\n
\n

Já parou para pensar em que ponto da sua vida você está nesse momento?

\n
\n
\n

Já pensou em mudar de vida, de atitudes e ser uma pessoa consciente e melhor?

\n
\n
\n

Pensar em avaliar suas atitudes e suas ações, se elas são boas para os outros a sua volta?

\n
\n

Essas são umas das reflexões que ando fazendo nos últimos meses.

\n

Esses questionamentos vêm e vão com o passar dos dias.

\n

Eles sempre voltam quando leio algo que me choca na internet ou quando estou lendo algum livro importante, ou quando tenho uma conversa com alguém que me inspira.

\n

Não seja uma pessoa medíocre

\n

Não ser uma pessoa manipulada pela mídia é algo extremamente difícil, ir com a maioria é bem fácil que você faz no automático.

\n

Todo mundo quer ser FODA, mas poucos agem para alcançar o seu ápice na vida.

\n

Saber que você é manipulado pelos outros a fazer o que querem é o primeiro passo para não ser uma pessoa medíocre. #ficadica

\n

Mudanças

\n

Esse ano está sendo um ano de mudanças na minha vida, mudanças ótimas, difíceis, mas ótimas.

\n

O árduo caminho para o empreendedorismo

\n

Eu nunca pensei que seria um empreendedor, agora lendo sobre isso vejo que todos somos, qual o nosso empreendimento? A vida!.

\n

Mas não é sobre esse empreendimento que vim falar aqui, é sobre a minha entrada na Nossa Causa.

\n

Ainda estou no segundo mês como sócio/parceiro da Nossa Causa e já sinto no total controle da minha vida profissional.

\n

Sua, Minha, Nossa Causa

\n

Com esse novo trabalho eu comecei a fazer esses questionamentos e mais, comecei a questionar:

\n
\n

Será que minhas ações trazem coisas boas ou coisas ruins para o mundo?

\n
\n
\n

Afinal qual é a minha causa? Causa que defenderei até o fim. Seriam os idosos? As mulheres? Pessoal LGBT? Pessoas com deficiência? Os animais? O planeta?

\n
\n

Pense sobre isso e responda a essas perguntas para você mesmo.

\n

Autoconhecimento

\n

Estou em um momento de autoconhecimento, tentando conhecer meus limites, meus anseios, meus desejos e enxergar a minha vida por outro ângulo.

\n

Eu estou tentando tomar minhas próprias decisões (pelo menos acho que estou hehehe).

\n
\n

Você já pensou em desistir do que você faz? Desistir do seus sonhos? Eu já!

\n
\n

Antes de entrar na Nossa Causa, eu estava em um momento de incertezas, muito triste com minha vida, talvez com início de depressão (quem sabe), vivia trancado em casa, enfim, totalmente desgostoso.

\n

Decidi que precisava sair dessa deprê, sair de casa, tomar um sol e conhecer pessoas.

\n

E quase dois meses depois eu pareço outra pessoa, estou inspirado, motivado, conheci pessoas legais na NC, tenho novos desafios e estou bem comigo mesmo.

\n

Colecione momentos, não coisas

\n

#BeMinimalist

\n

Hoje estou me desfazendo de algumas coisas, objetos, roupas e pessoas também.

\n

Se eu não estou usando ou não está me trazendo benefício algum, faço uma doação, me afasto, reciclo ou, em último caso, jogo fora.

\n

Meu objetivo com isso é:

\n
    \n
  1. [ ✔︎ ] Consumir menos, consequentemente economizar $;
    2. \n
  2. [ ✔︎ ] Apreciar mais os momentos da minha pequena vida;
    3. \n
  3. [ ✔︎ ] Focar no que é importante para meu corpo e minha mente;
    4. \n
\n
\n

Concluindo..

\n

No momento meus objetivos são:

\n
    \n
  • Ler mais;
    • \n
  • Comer melhor;
    • \n
  • Estudar mais;
    • \n
  • Ter mais tempo p/ passeios;
    • \n
  • Ser minimalista e reduzir o consumo de coisas;
    • \n
\n

Espero que dure.

\n

// done.

","excerpt":"Música para esse artigo é: \"Deriram\" de Natiruts, ouça aqui.\nTrecho: Reflexões - Think about it. Você já parou para pensar o quanto você é manipulado…","timeToRead":3,"frontmatter":{"category":["vida"],"date":"há 8 anos","description":"Você já parou para pensar o quanto você é manipulado pelos outros? Já parou para pensar em que ponto da sua vida você está nesse momento?","path":"/hoje-o-momento-e-de-ser-e-estar","tags":["vida","minimalismo","bem estar","motivação","reflexões"],"title":"Hoje o momento é de SER e ESTAR e não de TER!","image":{"publicURL":"/static/2018-10-05-hoje-o-momento-e-de-ser-e-estar-ecc9c080fcca9fc5356a3fbbb779ab5f.jpg","name":"2018-10-05-hoje-o-momento-e-de-ser-e-estar"}},"fields":{"readingTime":{"words":623}}}},{"node":{"id":"8215d5ba-46f1-53c4-9b68-784f5c2aab4b","html":"

Navegadores

\n\n

Desenvolvimento

\n
    \n
  • Hyper: Um terminal foda feito com Javascript, HTML e CSS.
    • \n
  • Visual Studio Code: Um editor foda! Ele foi criado pela Microsoft e pasmem, ele é open source 😱
    • \n
  • Sublime Text 3: Sim, ainda uso o Sublime Text, mas não como editor padrão.
    • \n
  • Docker for mac: Que desenvolvedor hoje desenvolve sem docker hein!? #PELAMORDEODIN
    • \n
  • Postman: Um app muito útil para consultas de APIs.
    • \n
\n

Organização, Emails e Tarefas

\n
    \n
  • Spark mail app: Sempre estive em busca de um gerenciador de emails que chutasse bundas, e sim ele é o cara! Eu uso no computador e no Celular.
    • \n
  • iCalendar/Google Calendar: Para todas as minhas me lembrar de tarefas e reuniões no celular e computador.
    • \n
  • Trello: Onde organizo meus projetos, planos e onde coloco muitas ideias malucas que geralmente me esquecerei mais tarde.
    • \n
  • Evernote: Com certeza o melhor app para notas que existe, antes eu usava o Bear mas acabei migrando para o Evernote mesmo.
    • \n
  • Habitica: Onde listo meus hábitos (ruins e bons) e atividades diárias que quero que se tornem hábitos.
    • \n
  • Organizze: Um webapp para cotrole financeiro pessoal.
    • \n
  • Controlle: Um webapp para cotrole financeiro para empresas.
    • \n
\n

Design e UX Design

\n
    \n
  • Sketch: App que uso para criar telinhas legais.
    • \n
  • Adobe Photoshop CC: Eu uso o Photoshop apenas para layouts de clientes, não costumo fazer muita coisa nele.
    • \n
  • Zeplin: Útil para desenvolvimento, após desenhar no Sketch ou no Photoshop eu exporto para o Zeplin antes do desenvolvimento.
    • \n
\n

Comunicação

\n
    \n
  • Slack: MELIOR app para comunicação.
    • \n
  • Skype: Segundo melhor app para comunicação.
    • \n
  • Facebook Messenger: Terceiro melhor app para comunicação.
    • \n
\n

Leitura

\n\n

Música

\n
    \n
  • Spotify: SEMPRE! No computador, celular e PlayStation.
    • \n
\n

Utilitários

\n
    \n
  • Alfred 3: Abrir apps, fazer cálculos básicos, fazer uma busca no Google quando não estou com o navegador aberto.
    • \n
  • 1Password: O App que uso para gerenciar todas as minhas senhas. Uso também a extensão no Chrome para fazer login rápido nas aplicações.
    • \n
  • Caffeine: Esse app serve para não hibernar o mac quando estou assistindo algum video/filme.
    • \n
  • CheatSheet: Um app muito útil para saber os atalhos de teclado de seus apps.
    • \n
  • Memory Clean: Uso esse app para monitorar o consumo de memória do meu Macbook, to usando a versão 1.
    • \n
  • Spectacle: Eu realmente não consigo viver sem esse app, ele é bem útil, com apenas um atalho no teclado ele deixa as janelas fullscreen sem coloca-las em um novo Desktop no MacOS.
    • \n
  • CopyClip: Mostra todo histórico dos textos que copiei para o teclado.
    • \n
  • Battery Monitor: Monitor de bateria, como ele eu monitoro a saúde, os ciclos e a capacidade da bateria.
    • \n
\n
\n

Atalhos mais utilizados

\n
    \n
  • \n

    MacOS

    \n
      \n
    • cmd + space: Abrir Alfred
      • \n
    • cmd + tab: Alternar entre os apps abertos
      • \n
    • cmd + Q: Fechar um aplicativo
      • \n
    • cmd + ,: Configuração do aplicativo
      • \n
    • cmd + alt + D: Exibir/Ocultar o docker
      • \n
    • cmd + control + shift + 4: Corte print screen + copiar para transferência
      • \n
    • cmd + control + shift + 4 + space Print screen da janela + copiar para transferência
      • \n
    \n
    • \n
  • \n

    Spark

    \n
      \n
    • cmd + delete: Apagar email
      • \n
    • cmd + enter: Enviar email
      • \n
    • cmd + R: Responder email
      • \n
    • cmd + ←: Arquivar email
      • \n
    • cmd + →: Marcar como span
      • \n
    • shift + cmd + P: Marcar como importante
      • \n
    \n
    • \n
  • \n

    Visual Studio Code

    \n
      \n
    • cmd + P Navegar e abrir um arquivo
      • \n
    • shift + cmd + P: Exibir todos os comandos
      • \n
    • shift + cmd + F: Busca em todo projeto
      • \n
    • cmd + F: Busca no arquivo
      • \n
    \n
    • \n
  • \n

    Spectacle

    \n
      \n
    • alt + cmd + F: Fullscreen app
      • \n
    • alt + cmd + ←: Metade esquerda da tela
      • \n
    • alt + cmd + →: Metade direita da tela
      • \n
    • shift + control + alt + ←: Reduzir o tamanho da tela
      • \n
    • shift + control + alt + →: Aumentar o tamanho da tela
      • \n
    \n
    • \n
","excerpt":"Navegadores Google Chrome: MELIOR navegador de todos os tempos. Google Chrome Canary: Uso ele pra estar na frente nas atualizações do Chrome :D…","timeToRead":5,"frontmatter":{"category":["dicas"],"date":"há 8 anos","description":"Criei essa lista de apps que uso todos os dias, espero que gostem","path":"/apps-que-uso","tags":["dicas","apps"],"title":"Aplicativos que uso","image":{"publicURL":"/static/apps-que-uso-google-chrome-canary-ec0966bd15ca083cda80264b723b63c8.png","name":"apps-que-uso-google-chrome-canary"}},"fields":{"readingTime":{"words":769}}}},{"node":{"id":"17b6c362-b241-5a34-af08-302da8982e31","html":"

Sabemos que da pra fazer bastante coisa no WordPress usando os famosos hooks e sabemos também que é impossível saber o retorno de um erro ao tentar enviar um email usando a função wp_mail(), pois ela só retorna valores booleanos (true ou false).

\n

Sabendo disso o WordPress já nos deu uma saída dessa cilada bino!

\n

Usando o hook wp_mail_failed podemos criar uma função para captar os erros gerados pela wp_mail().

\n
<?php\nadd_action( 'wp_mail_failed', 'onMailError', 10, 1 );\nfunction onMailError( $wp_error ) {\n    echo '<pre>' . print_r($wp_error , true ) . '</pre>';\n}
\n

E usando o Postman eu simulei uma requisição para minha aplicação e BAZINGA!

\n

\n \n \n \n \n \n \n \n \n
hook wp_mail_failed no postman app
\n

\n

É isso ai pessoal, se curtiu comenta ai.

\n

exit();

","excerpt":"Sabemos que da pra fazer bastante coisa no WordPress usando os famosos hooks e sabemos também que é impossível saber o retorno de um erro ao tentar…","timeToRead":1,"frontmatter":{"category":["wordpress"],"date":"há 9 anos","description":"A dica hoje será bem rápida, iremos testar erros na função wp_mail() no WordPress usando hooks.","path":"/como-testar-erros-na-funcao-wp_mail-no-wordpress-usando-hooks","tags":["wordpress","function","php"],"title":"Como testar erros na função wp_mail() no WordPress usando hooks","image":{"publicURL":"/static/wp_mail_faild-hook-function-b6828e646ba18e981ea7ac7e7f1055f8.png","name":"wp_mail_faild-hook-function"}},"fields":{"readingTime":{"words":121}}}},{"node":{"id":"812fe908-c887-5d5e-a4a1-af4998269ede","html":"

Introdução

\n

Todo mundo (devs) tá acostumado a criar blogs utilizando o Jekyll e hospedá-los no GitHub pages. E se eu disser que existem muitas outras plataformas para criar projetos estáticos?

\n

Não que eu esteja dizendo que o Jekyll é uma ferramenta ruim, muito pelo contrário! O Jeyll abriu minha mente para o mundo dos geradores de sites estáticos.

\n

No site staticgen você encontrará uma série de projetos, aplicações e ferramentas, em várias linguagens diferentes e todas elas tem o mesmo proprósito: Fazer o build de um projeto estático, ou seja gerar HTML, CSS e JS final para o seu projeto.

\n

Nesse artigo nós iremos utilizar a tecnologia Server Side Rendering (SSR) ou Renderização do lado do servidor em pt-BR, e para isso usaremos o Vue.js com o Nuxt.js.

\n

O que é Vue.JS?

\n

O Vue.js é uma biblioteca (lib) javascript para o desenvolvimento de componentes reativos para interfaces web modernas (Reactive Components for Modern Web Interfaces).

\n

O que é o Nuxt.js?

\n

Traduzindo de nuxtjs.org/guide: O Nuxt.js é uma estrutura para a criação de aplicativos do Universal Vue.js.

\n

O que é SSR?

\n

Vue.js é uma lib para construir aplicativos do lado do cliente. Por padrão, os componentes Vue produzem e manipulam DOM no navegador do cliente. No entanto, também é possível renderizar os mesmos componentes HTML direto do servidor e enviá-los para o navegador do cliente e continuar manipulando via javascript (SPA).

\n

Um aplicativo Vue.js criado pelo servidor também pode ser considerado \"isomórfico\" ou \"universal\", no sentido de que a maioria do código do seu aplicativo é executado no servidor e no cliente.

\n

Utilizando SSR podemos manter a acessibilidade padrão do HTML e deixá-lo acessivel por bots como o Google e outros, juntando assim o melhor dos dois mundos, SEO + SPA.

\n
\n

Instalando

\n

Para instalar o Nuxt.js você precisa dos seguintes pré-requisitos:

\n
    \n
  1. Conhecimento em JavaScript
    2. \n
  2. Node v6 ou superior
    3. \n
  3. npm ou yarn
    4. \n
  4. vue-cli global: npm install -g vue-cli
    5. \n
\n
\n

OBS: O vue-cli é uma CLI simples para scaffolding de projetos Vue.js, ele vai fazer algumas perguntas como Nome do projeto, Descrição e Autor.

\n
\n

Vamos seguir a mesma instalação feita no site do Nux.js em nuxtjs.org/guide/installation.

\n
vue init nuxt-community/starter-template blog-with-vuejs\ncd blog-with-vuejs/\nyarn # ou npm install
\n

Os comandos acima foram executados no terminal, você pode executar todos de uma só vez concatenando com && cada um deles.

\n
vue init nuxt-community/starter-template blog-with-vuejs \\\n  && cd blog-with-vuejs/ \\\n  && yarn
\n

O que foi executado

\n
    \n
  1. Iniciamos um projeto chamado blog-with-vuejs;
    2. \n
  2. Entramos dentro do diretório com o comando: cd blog-with-vuejs/;
    3. \n
  3. Instalamos as dependencias do projeto com o comando: yarn (Você também pode executar yarn install ou npm install)
    4. \n
\n
\n

Estrutura de um projeto Nuxt.js

\n

A estrutura padrão de um aplicativo Nuxt.js destina-se a fornecer um ótimo ponto de partida para pequenas e grandes aplicações. Claro, você é livre para organizar seu aplicativo, como quiser.

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Diretório assetsEsse diretório contém seus recursos não compilados, como Less, SASS, Stylus ou JavaScript.
Diretório componentEsse diretório contém seus componentes Vue. O Nuxt.js não carrega automaticamente esses componentes.
Diretório layoutsEsse diretório contém os layouts da sua aplicação.
Este diretório não pode ser renomeado.
Diretório middlewareEsse diretório contém o Middleware de sua aplicação. O Middleware permite que você defina funções personalizadas que podem ser executadas antes de\n renderizar uma página ou um grupo de páginas (layouts).
Diretório pagesEsse diretório contém as views e rotas da sua aplicação. O framework lê todos os arquivos .vue dentro desse\n diretório e cria o router da aplicação.
Este diretório não pode ser renomeado.
Diretório pluginsEsse diretório contém os plugins JavaScript que deseja executar antes de instanciar o aplicativo Vue.js da raiz.
Diretório staticEsse diretório contém seus arquivos estáticos. Cada arquivo dentro deste diretório é mapeado para a raiz do seu site /.\n Exemplo: /static/robots.txt é mapeado como http://seusite.com/robots.txt\n
Este diretório não pode ser renomeado.
Diretório storeEsse diretório contém seus arquivos do Vuex Store. A opção Vuex Store é implementada na estrutura do Nuxt.js. A criação de um\n arquivo index.js neste diretório habilita essa opção automaticamente.
Este diretório não pode ser\n renomeado.
Arquivo nuxt.config.jsEsse arquivo contém a configuração personalizada do Nuxt.js.
Este arquivo não pode ser renomeado.
Arquivo package.jsonEsse arquivo contém suas dependências e scripts da sua aplicação.
Este arquivo não pode ser renomeado.
\n
\n

Veja na documentação do Nuxt.js para saber mais informações sobre esses diretórios e arquivos que eu citei acima.

\n
\n
\n

Executando

\n

Agora vamos rodar o projeto que foi criado pelo Vue-cli em desenvolvimento, para isso basta executar o comando yarn dev ou npm run dev em seu terminal.

\n
$ yarn dev # ou npm run dev
\n

Basta abrir: localhost:3000

\n

\n \n ,\n data: [{}],\n error: null,\n state: {},\n serverRendered: true,\n }\n </script>\n <script src=\"/_nuxt/manifest.6577d27b1c69002c3e9a.js\" defer></script>\n <script src=\"/_nuxt/common.65aa6f5764a5ec5e7c56.js\" defer></script>\n <script src=\"/_nuxt/app.9a3a71120f4feff88235.js\" defer></script>\n</body>\n

Note que dentro da tag <body> não tem apenas o famoso div <div id="app"></div> como estamos acostumados a ver em SPA`s feitas com Vue e esse é o maior ponto positivo de um app que usa SSR.

\n
\n

See you ✌️

\n

/ end

","excerpt":"Introdução Todo mundo (devs) tá acostumado a criar blogs utilizando o Jekyll e hospedá-los no GitHub pages. E se eu disser que existem muitas outras…","timeToRead":6,"frontmatter":{"category":["vue"],"date":"há 9 anos","description":"Essa é a parte 1 de uma série onde iremos usar a tecnologia SSR (Server Side Rendering) para criar um blog e no final hospeda-lo no GitHub pages e no Netlify.","path":"/criando-um-blog-com-vuejs-o-nuxtjs","tags":["vue","javascript"],"title":"Criando um blog com Vue.js e Nuxt.js","image":{"publicURL":"/static/criando-um-blog-com-javascript-vuejs-ebd5c2aa1260dd12581493938d2f9a22.jpg","name":"criando-um-blog-com-javascript-vuejs"}},"fields":{"readingTime":{"words":974}}}},{"node":{"id":"b4b4360f-a313-531a-bc3a-48e972dc7003","html":"

Prólogo

\n

Esse texto é para tentar responder algumas perguntas que me faço todos os dias, perguntas essas que você vai ler no decorrer desse texto.

\n
\n

PS.: Esse texto expressa minha opinião sobre a comunidade em geral e sobre os devs de Curitiba, então se você tenha uma opinião contrária a minha e queira discutir sobre os assuntos comenta logo abaixo ;)

\n
\n

\n \n \n \n \n \n \n \n \n
Programador a comunidade precisa de você!
\n

\n

A procura

\n

Estamos procurando um dev front-end aqui na empresa onde trabalho, decidimos procurar os desenvolvedores que tinham um perfil no GitHub e de alguma forma contribuem com a comunidade. Começamos a divulgar e receber emails.

\n

Nós achávamos que seria rápido (ou até mesmo fácil) encontrar o profissional dessa forma (sabem de nada inocentes).

\n

Começamos a receber algumas respostas. Algumas nos deixaram tristes, recebemos frases e desculpas do tipo:

\n
    \n
  • \"Não tem muita coisa lá, pois não uso muito meu GitHub\"
    • \n
  • \"Meus projetos estão todos privados no Bitbucket\"
    • \n
\n

Ou pior ainda.

\n
    \n
  • \"O que é Github?\"
    • \n
\n
\n

A importância de se ter um GitHub

\n

Pode ser que você não saiba o que é o GitHub, caro desenvolvedor, ou não contribua com a comunidade por falta de tempo, ou não achar necessário, ou porque não quer mesmo no momento, eu entendo.

\n

Seja como for, em cima dessas afirmações eu vou lhe dar um conselho, não de um desenvolvedor ou de alguém interessado em suas contribuições, mas um conselho de amigo, que quer ver você bem sucedido profissionalmente.

\n
\n

Se mostre online, tenha um perfil bom.

\n
\n

Quando eu digo um perfil online, eu também digo portfolio/currículo/GitHub, um perfil na internet que diga quem você é, como desenvolvedor e como profissional.

\n

Ai você me questiona: \"Ué! Mas o Linkedin não serve para isso?\", ou ainda \"Mas eu tenho meu site, onde coloco os projetos que já trabalhei\", sim, ambos servem, mas não são o suficiente, cada um tem o seu público e serve para um propósito.

\n

O que eu imagino como um bom perfil de um desenvolvedor:

\n
    \n
  • Linkedin: com projetos e empresas onde já trabalhou;
    • \n
  • Site e/ou Portfolio: telas e textos detalhados de cada projeto;
    • \n
  • GitHub: com seus códigos, discussões, e PR`s com suas contribuições;
    • \n
  • E um Currículo bem diagramado.
    • \n
\n

Claro que um não elimina o outro, mas ambos se completam e assim, além de ser visto você terá um perfil \"phoda\" online.

\n

Esse meu conselho é para que você um dia entre em empresas como Google, Twitter, Nubank, Spotfy e outras, que buscam desenvolvedores primeiro pelo seu perfil no GitHub e depois em outros canais.

\n

E vai por mim, quanto mais completo for seu perfil mais chances de ser recrutado para uma seleção.

\n

Cadê os front-enders?

\n

Como eu disse, se mostre, tenha um perfil bom, para facilitar a avaliação de empresas e recrutadores técnicos.

\n

Nessa busca árdua por um front-ender para preencher meu lugar, estávamos com muita dificuldade em encontrar profissionais em Curitiba pelo GitHub.

\n

Opções:

\n
    \n
  1. Ou não estávamos procurando direito;
    2. \n
  2. Ou não tem muitos desenvolvedores em Curitiba;
    3. \n
  3. Ou temos muitos devs em Curitiba sim! Mas os que tem não se mostram online, deixam para procurar quando precisam, preenchem o currículo e atualizam o Linkedin quando querem arrumar um emprego.
    4. \n
\n

Eu voto na opção 3.

\n

Nós somos profissionais que estamos conectados, tecnologia corre em nossas veias, fazemos parte de 5% da população com habilidades em computação. Por que não ter um portfolio no GitHub?

\n

Conclusão

\n

Eu sempre me faço essas perguntas, todos os dias, desde do dia que me mudei para Curitiba e comecei a trabalhar com desenvolvimento web.

\n
    \n
  • Onde estão os desenvolvedores de Curitiba?
    • \n
  • Por que não temos comunidades ativas de desenvolvimento?
    • \n
  • Por que não temos meetups, eventos e encontros ativos?
    • \n
  • Será que é tão difícil para um dev Curitibano compartilhar seus conhecimentos?
    • \n
  • Por que não contribuem com a comunidade open-source?
    • \n
  • Por que é tão difícil de encontrar um dev front-end que tenha seu portfólio no GitHub?
    • \n
  • Onde então a grande massa dos desenvolvedores de Curitiba?
    • \n
  • Onde estão aqueles desenvolvedores que usam códigos open-source como Linux, PHP, Node, Ruby, WordPress, e outros?
    • \n
\n

Já que querem ser tão egoístas, por que não contribuem pelo menos com a linguagem ou tecnologia que usam, mesmo que para agradecer por terem criado algo open-source que está ajudando-o a colocar comida na mesa.

\n

Alguém vai dizer: “Ah, mas sempre tem alguém que contribui sim!”, “Você chora de barriga cheia.”, “Está reclamando sem motivo!”, ou coisas do tipo.

\n

Pode ser que sim, pode ser que eu esteja reclamando de barriga cheia e não esteja encontrando esses devs ou pode ser que eu quem esteja escondido pro mundo.

\n

/end

","excerpt":"Prólogo Esse texto é para tentar responder algumas perguntas que me faço todos os dias, perguntas essas que você vai ler no decorrer desse texto. PS…","timeToRead":4,"frontmatter":{"category":["geral"],"date":"há 10 anos","description":"Sobre o porquê de alguns desenvolvedores não contribuem com a comunidade open-source.","path":"/programador-a-comunidade-precisa-de-voce","tags":["geral","comunidade"],"title":"Programador a comunidade precisa de você!","image":{"publicURL":"/static/programador-a-comunidade-precisa-de-voce-0aa9eecde00fd56b67f8806aec1bccac.jpeg","name":"programador-a-comunidade-precisa-de-voce"}},"fields":{"readingTime":{"words":780}}}},{"node":{"id":"248341b6-9bc4-5fab-91f7-e34dda54c290","html":"

Automatizadores de tarefas ou como são conhecidos pelo termo em inglês Task Runners, tem a capacidade de fazer muita coisa, facilitam muito não só no desenvolvimento dos projetos mas também nos builds e deploys, cara é simplesmente lindo.

\n

Já usei o Gruntjs e Rake tasks do Ruby, ambos são muito bons e tem suas finalidades, mas hoje vou falar sobre o magnífico GulpJS.

\n

Poque eu deveria usar um Task Runner?

\n

Usar um automatizador de tarefas te traz muitas vantagens, das quais se você desfrutar nunca mais vai querer começar o desenvolvimento de um novo projeto sem elas.

\n

Abaixo eu vou listar algumas, se não te fizer brilhar os olhos você talvez não precisará de um task runner.

\n

Com apenas um comando você consegue:

\n
    \n
  • Fazer a compressão de centenas de imagens de um projeto antigo (eu precisei fazer isso);
    • \n
  • Deploy para qualquer servidor sftp, ssh ou até mesmo para amazon S3;
    • \n
  • Fazer Watch de pré-processadores e template engines;
    • \n
  • Subir servidores locais de qualquer linguagem;
    • \n
  • Executar os testes do seu projeto;
    • \n
  • Executar tarefas complexas em segundos;
    • \n
  • … e ter mais tempo para tomar um café.
    • \n
\n

E ai gostou? Ainda tem mais vantagens que não foram listadas acima, essas são as que eu mais gosto de citar quando me perguntam quais as vantagens de um Task Runner.

\n

Eu sempre gosto de dizer: “Ele me faz ter mais tempo para o meu café”.

\n

Porque eu deveria usar o GulpJS?

\n

O Gulp te dá todas as vantagens que citei no bloco anterior, além de:

\n
    \n
  • Ser super-rápido. Performance com certeza é uma vantagem grande do Gulpjs;
    • \n
  • Simples e fácil de implementar. Ele é simples e direto, com certeza você vai gostar;
    • \n
  • Quantidade enorme de plugins em seu repositório. O que você imaginar o Gulp tem um componente para isso.
    • \n
  • … e muito mais.
    • \n
\n
\n

“gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.\"

\n
\n

Essa frase acima está na homepage do gulp, ela te dá um breve overview do que você irá encontrar se começar a se aventurar com ele.

\n

Instalação e configuração do Gulp

\n

Vamos criar um projeto simples, apenas para executar algumas tarefas com Gulp, o nome do projeto será Comece com gulp, e claro, ele tá lá no Github.

\n

😎

\n

Instale o Gulp global com o comando: npm install -g gulp-cli.

\n
\n

PS. em alguns sistemas operacionais, se você não estiver usando NVM para gerenciar suas versões do nodejs, você precisará executar o comando com SUDO.

\n
\n

Inicie o projeto npm com o comando: npm init.

\n

\n \n \n \n \n \n \n \n \n
Comece com Gulp - npm init
\n

\n

Esse comando irá criar um arquivo chamado package.json, com ele você gerencia todos os pacotes e dependências do seu projeto.

\n

O meu package.json ficou mais ou menos assim:

\n
{\n  \"name\": \"comece-com-gulp\",\n  \"version\": \"1.0.0\",\n  \"description\": \"> Repositório do artigo: http://nandomoreira.me/comece-com-gulp\",\n  \"main\": \"gulpfile.js\",\n  \"dependencies\": {\n    \"gulp\": \"^3.9.1\"\n  },\n  \"devDependencies\": {},\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/nandomoreirame/comece-com-gulp.git\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/nandomoreirame/comece-com-gulp/issues\"\n  },\n  \"homepage\": \"https://github.com/nandomoreirame/comece-com-gulp#readme\"\n}
\n

Instale o Gulp local com o comando: npm install --save-dev gulp ou yarn add -D gulp

\n

Você vai notar que na linha onde tinha "devDependencies": {}, foi adicionado o gulp.

\n
\"devDependencies\": {\n  \"gulp\": \"^3.9.1\"\n},
\n

O gulp agora faz parte das dependências de dev do seu projeto, assim como os módulos que iremos instalar para ajudar na execução das tarefas.

\n

Hello World com Gulp

\n

Dentro do projeto temos o arquivo package.json e o diretório node_modules onde está instalado o Gulp local.

\n

Vamos criar o arquivo chamado gulpfile.js, que é obrigatório para criarmos as tarefas do Gulp.

\n
$ touch gulpfile.js
\n

Nesse arquivo vamos requerir o Gulp usando CommomJS: require('gulp');.

\n
'use strict'\n\nvar gulp = require('gulp')
\n

Na primeira linha temos o 'use strict';, se você não sabe para que serve o ‘use strict’; eu indico assistir a palestra de Javascript Secrets do Fernando Daciuk, muito legal. Já na segunda linha criamos uma variável chamada gulp, a qual iremos usar muito por todo nosso código.

\n

Vamos ao Hello World.

\n
'use strict'\n\nvar gulp = require('gulp')\n\ngulp.task('hello', function() {\n  console.log('Hello World.')\n})
\n

Basta rodar o comando gulp hello no seu terminal que a mágica vai acontecer.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp hello
\n

\n

Comandos

\n

Você pode obter a lista de comandos do Gulp apenas digitando o commando gulp --help no seu terminal.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp --help
\n

\n

Um comando bem interessante é o que lista todas as tasks do projeto gulp --tasks.

\n

\n \n \n \n \n \n \n \n \n
Imagem com o comando gulp --tasks
\n

\n

Concluindo..

\n

Esse foi apenas o primeiro passo para você começar com Gulpjs, vai por mim, tem muitas coisas legais que da pra fazer com uma task do gulp. Espero que tenha gostado do artigo, é simples mas útil.

\n

Logo mais vou fazer outro artigo um pouco mais avançado para você ir mais além com ele.

\n

Até breve.

\n

/end

","excerpt":"Automatizadores de tarefas ou como são conhecidos pelo termo em inglês Task Runners, tem a capacidade de fazer muita coisa, facilitam muito não só no…","timeToRead":4,"frontmatter":{"category":["gulp"],"date":"há 10 anos","description":"Eu particularmente gosto muito de ganhar tempo com o desenvolvimento dos meus projetos e usar automatizador de tarefas me dá esse poder.","path":"/comece-com-gulp","tags":["gulp","javascript","tasks","taskrunners"],"title":"Comece com Gulp!","image":{"publicURL":"/static/comece-com-gulp-29ad534bcd8c62207f472d6b92fe7f99.png","name":"comece-com-gulp"}},"fields":{"readingTime":{"words":839}}}},{"node":{"id":"cc039104-d278-55be-99bf-6e00f750ce89","html":"

Retrospectiva 2016

\n

2016 não foi um ano ruim, tanto na minha vida profissional quando na minha vida pessoal, confesso que tive alguns obstáculos, mas todos foram ultrapassados com sucesso.

\n

Ele pode ter sido um ano ruim para Brasil e para mundo, grandes desastres, fiasco da política, morte de grandes artistas, mas eu pessoalmente tenho que agradecer muito por minha vida ser maravilhosa como ela é, ter um trabalho que eu gosto muito, uma família maravilhosa, amigos próximos e pessoas próximas que me querem bem.

\n

Aprendizado...

\n
$('2016').remove()
\n

Esse ano foi um ano de aprendizado, tanto para minha vida profissional quanto para vida pessoal.

\n

Aprendi a questionar mais, entender o que as pessoas ao meu redor estão fazendo e o que eu estou fazendo para ajudar essas pessoas.

\n

Aprendi que eu não sei o suficiente e que tenho que aprender muita coisa ainda pela frente, e isso me custou um emprego e um circulo de boas amizades.

\n

Aprendi que amigos verdadeiros são os que estão com você não só nas alegrias, mas nas tristezas e fases ruins da sua vida.

\n

Aprendi a questionar padrões.

\n

Aprendi que oportunidades não vem do nada, você que corre atrás e traz elas para perto de você.

\n

Aprendi que ouvir mais e falar menos não é tão fácil assim.

\n

Aprendi que ser uma pessoa bondosa e empática também não é fácil.

\n

Aprendi a meditar, mesmo com a falta de tempo.

\n

Aprendi a ler (sim, aprendi a ler de verdade), muitos livros técnicos e não técnicos, muitos blogs e artigos, notícias, medium, etc.

\n

Aprendi a olhar a vida de um ponto de vista diferente, em que o foco no estado atual (presente) é mais valioso que o foco no passado e/ou no futuro.

\n

Aprendi que o impossível é apenas uma questão de opinião, você consegue fazer qualquer coisa enquanto respirar.

\n

Trabalho duro...

\n

Ano de 2016 foi um ano de trabalho duro e tenho certeza que 2017 será ainda melhor.

\n

Eu consegui ser notado por algumas empresas legais como a Pipefy, Hero99, EBANX, pagar.me e wipro.com.

\n

Tudo através do que fiz pela comunidade (foi pouco mas fiz), criando temas para Jekyll, ajudando em discussões de front-end, enviando contribuições em alguns repositórios no github e compartilhando meu conhecimento como tutor no Centro de Treinamento e escrevendo nesse pequeno blog.

\n

Eu tive a oportunidade de trabalhar em uma startup chamada Pipefy, onde trabalhei com grandes mentes que me ensinaram grandes coisas, infelizmente não durou o tempo que eu gostaria, mas valeu a pena cada dia de trabalho.

\n

Em 2016 eu comecei a trabalhar na LojasKD, onde tenho o prazer de trabalhar com pessoas incríveis, estou muito feliz em poder ajudar a melhorar e construir um projeto que vende algumas dezenas de milhares por dia.

\n
\n

Planing 2017

\n

Quero fazer em 2017 o dobro das coisas que fiz em 2016.

\n

Ajudar o máximo de pessoas a encontrarem o seu caminho no mundo do desenvolvimento.

\n

Escrever mais no meu blog.

\n

Fazer mais projetos pequenos e grandes.

\n

Aprender mais sobre acessibilidade, UX e SEO.

\n

Aprender sobre testes em JavaScript e aprender mais sobre es6/es7.

\n

Quero poder palestrar e participar mais de eventos de tecnologia.

\n

Ler mais livros, não lembro quantos eu li em 2016 mas quero dobrar ou triplicar a quantidade em 2017.

\n

Quero mudar o mundo a minha volta, mudar pensamentos, mudar atitudes.

\n

Quero fazer a diferença.

\n

Seja muito bem vindo 2017.

\n
\n

Conclusão

\n

Eita esse 2016 hein...

\n

Foi um ano de contribuições, ensino, aprendizado e trabalho duro, espero que esse legado continue em 2017 e em dobro.

\n

E o seu 2016 como foi?

\n

O que você espera fazer no seu ano novo?

\n

Comenta aí!

\n

Forte abraço!

\n

/end

","excerpt":"Retrospectiva 2016 2016 não foi um ano ruim, tanto na minha vida profissional quando na minha vida pessoal, confesso que tive alguns obstáculos, mas…","timeToRead":3,"frontmatter":{"category":["geral"],"date":"há 10 anos","description":"2016 não foi um ano ruim, tanto na minha vida profissional quando na minha vida pessoal, confesso que tive alguns obstáculos, mas todos foram ultrapassados com sucesso.","path":"/retro-2016-planing-2017","tags":["refrexão"],"title":"Retro 2016 Planing 2017","image":{"publicURL":"/static/retro-2016-planing-2017-d0c00c01693f39174e3998313336ed72.jpg","name":"retro-2016-planing-2017"}},"fields":{"readingTime":{"words":612}}}},{"node":{"id":"175b5993-dbf6-5b7d-8585-d20c2273761e","html":"

TRABALHAR COMO UM TIME...

\n

... não é fazer reuniões rápidas pelas manhãs pra não ultrapassar o tempo estimado pelo \"desenvolvimento ágil\"...

\n

... é saber ouvir cada membro da equipe o que houve de errado no dia anterior e perguntar se ele precisa de ajuda para resolver hoje.

\n

Não é ficar horas e horas tentando resolver um problema sozinho...

\n

... é consultar o colega do lado e perguntar se ele pode te ajudar a resolve o problema junto com você.

\n

Não é resolver as suas tarefas rápido e ir tomar aquele café demorado...

\n

... é levantar da sua cadeira e ir ver se seus colegas precisam de alguma ajuda com alguma tarefa complexa.

\n

Não é definir sozinho o padrão do projeto que você começou sozinho...

\n

... é saber definir o padrão da equipe e certificar de que todos estão de acordo com o padrão definido.

\n

Não é ler um artigo ou uma notícia bacana e guardar apenas para você...

\n

... é compartilhar aquele artigo que você leu e sabe que pode servir para toda equipe.

\n

TRABALHAR COMO UM TIME é ter motivação intrínseca, que te faz sair da cama em dias ruins pra encontrar a equipe e fazer um bom trabalho...

\n

... é saber compartilhar o seu conhecimento nas standups, talks e conversas de corredor...

\n

... é saber ouvir e dizer não quando necessário...

\n

... é saber qual o nível de cada membro da equipe e como você pode ajuda-los a alcançar seus objetivos no time...

\n

... é rir de coisas engraçadas e entrar em conflitos quando necessário...

\n

... é acreditar e confiar no membro da equipe e saber que ele não vai decepcionar o time...

\n

... é elevar o projeto a um nível superior, que nem mesmo você nem seus superiores imaginariam chegar, mas só conseguiram chegar lá porque viram a necessidade de trabalhar em equipe, ...

\n

... como um time.

\n
\n

Esses são meus sinceros agradecimentos a todos as pessoas que já trabalhei e que me ensinaram o verdadeiro valor do trabalho em equipe.

\n

Em especial ao time de TI da LojasKD por me acolherem como parte da equipe mesmo antes de entrar pro time, e que mesmo não curtindo as minhas piadas rirem do mesmo jeito.

\n
\n

😎

\n

E como Bônus, para você refletir um pouco mais sobre o trabalho em equipe, vou deixar esse video do Bernard De Luna sobre Perseverança e time.

\n

https://www.youtube.com/watch?v=EJzhit_HAIA

\n

UM FELIZ 2017 TIME!

","excerpt":"TRABALHAR COMO UM TIME... ... não é fazer reuniões rápidas pelas manhãs pra não ultrapassar o tempo estimado pelo \"desenvolvimento ágil\"... ... é…","timeToRead":2,"frontmatter":{"category":["geral"],"date":"há 10 anos","description":"Trabalhar como um time é elevar o projeto a um nível superior, que nem mesmo você nem seus superiores imaginariam chegar, mas só conseguiram chegar lá porque viram a necessidade de trabalhar em equipe.","path":"/como-um-time","tags":["reflexão"],"title":"Como um time","image":{"publicURL":"/static/lojaskd-team-it-4724cb3fc37e434cb15810c2447840e6.jpeg","name":"lojaskd-team-it"}},"fields":{"readingTime":{"words":401}}}},{"node":{"id":"b86a1b05-4793-5845-9790-274eb878da18","html":"

O Google Chrome em uma de suas atualizações implementou o tema \"Dark\" para o Chrome DevTools. Isso já faz uns 7 a 8 meses mais ou menos (eu acho), mas estou escrevendo esse pequeno artigo pra avisar os que ainda estão desavisados.

\n

A surpresa de alguns

\n

Estávamos no Meetup de Front-end aqui em Curitiba, onde palestrei sobre Jekyll, e em um determinado momento precisei abri o navegador e inspecionar alguns elementos no Google Chrome, o tema \"default\" do DevTools não ficou muito bem aos olhos de quem estava vendo de longe, então eu abri o Settings e troquei de \"default\" para \"dark\" e tudo ficou perfeito.

\n

Confesso que fiquei um pouco #HashTagXatiado com a surpresa de alguns na sala, realmente eles desconheciam tal funcionalidade.

\n

Como proceder

\n

A parada é tão simples que nem sei se devo explicar ilustrando com imagens, mas vou mesmo assim. hehehee

\n
\n

1. Abra o Settings (F1) do seu DevTools

\n

\n \n \n \n \n \n \n \n \n
Chrome DevTools settings select
\n

\n
\n

Ele vai dar um refresh (acho que reiniciando) e BAZINGA! o seu DevTools está todo Black Metal!! 🤘

\n

\n \n \n \n \n \n \n \n \n
Chrome DevTools dark
\n

\n

Dica simples e útil (ou não).

\n

Obrigado, de nada.

\n

Valeu, falou.

\n

{{end}}

","excerpt":"O Google Chrome em uma de suas atualizações implementou o tema \"Dark\" para o Chrome DevTools. Isso já faz uns 7 a 8 meses mais ou menos (eu acho), mas…","timeToRead":1,"frontmatter":{"category":["dicas"],"date":"há 10 anos","description":"O Google Chrome em uma de suas atualizações implementou o tema “Dark” para o Chrome DevTools.","path":"/ativando-o-tema-dark-nativo-do-chrome-dev-tools","tags":["dicas","google","chrome","devtools"],"title":"Ativando o tema Dark nativo do Chrome DevTools e indo para o lado negro da força","image":{"publicURL":"/static/chrome-devtools-dark-456a5277bdd83f958a9efe0db13c24c1.png","name":"chrome-devtools-dark"}},"fields":{"readingTime":{"words":220}}}}]}},"pageContext":{"limit":12,"skip":0,"numPages":4,"currentPage":1}}}