{"componentChunkName":"component---src-templates-blog-template-tsx","path":"/page/2","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":"ebc8af63-a9d4-5ac5-838b-aca83f18a06a","html":"

\n \n \n \n \n \n \n \n \n
Comando cal
\n

\n

Se você quiser escolher o Mês para ser exibido você precisa passar o múmero do mês (de 1 a 12) e o ano, assim:

\n
$ cal 3 2017
\n

Isso vai imprimir o mês excolhido.

\n

\n \n \n \n \n \n \n \n \n
Comando cal year 2018
\n

\n

That’s it! Aqui está um link para uma simples doc

\n

Espero que use e abuse! 😀

\n

/end

","excerpt":"Você tá focado no código, apenas com algumas ferramentas abertas e não quer procurar o caléndário na listagem de programas instalados no seu…","timeToRead":1,"frontmatter":{"category":["dicas"],"date":"há 10 anos","description":"Essa será uma dica bem curta e rápida, assim como o comando que você vai executar no seu terminal.","path":"/calendario-rapido-direto-no-terminal","tags":["dicas","terminal","bash"],"title":"Como ver o Calendário direto pelo terminal","image":{"publicURL":"/static/cal-command-ca600a5b9aa5147901b0ac48bd02d003.png","name":"cal-command"}},"fields":{"readingTime":{"words":187}}}},{"node":{"id":"d1d1e17c-9bdb-5760-a578-43371f53af5d","html":"

Você já parou pra pensar quantas vezes você reclama por dia, ou quantas vezes você reclamou hoje? Vamos lá, faça um teste! Você vai ficar surpreso em saber que reclamações fazem parte do nosso dia-a-dia e nem percebemos.

\n

E se a gente substituir nossas reclamações diárias por agradecimentos?

\n

\"Gif

\n

E se pararmos de reclamar que está chovendo no horário de ir pro trabalho apenas agradecer por ter um trabalho?

\n

E se ao invés de reclamarmos que acordamos muito cedo todos os dias agradecer por ter onde dormir e por acordar com vida todas as manhãs?

\n

E se apenas agradecermos por ter agasalhos para nos aquecer todos dias ao invés de reclamar que está muito frio?

\n

Parar de reclamar que está muito quente e simplesmente agradecer pela água ou refrigerante (com limão e gelo) que tomamos, apenas porque podemos.

\n

\"Gif

\n

Ao invés de reclamar que as coisas não estão dando certo, porque não agradecer que você quase conseguiu? agradeca que você teve forças e quase chegou perto.

\n

Vamos pegar o exemplo das posições 1º, 2º e 3º lugar nas Olimpíadas Rio 2016, é comprovado que quem chega em 3º lugar está muito mais agradecido e feliz por estar ali do que quem chegou em 2º, quem consegue 3º lugar sempre pensa que não poderia ter conseguido nada e ganhar bronze é melhor que nada, certo?

\n

Porque não agradecer por ter participado de uma olimpíada, poder correr ao lado de grandes atletas ou ganhar o 3º lugar? Pois foi o que aconteceu comigo nos últimos meses.

\n
\n

Pipefy

\n

Semana passada eu perdi meu emprego, um trabalho que eu amava apesar de tudo, uma empresa cool, divertida, com pessoas jovens e motivadas.

\n

Eu poderia tá puto agora, irritado e xingando tudo e todos ao meu redor, mas não estou, muito pelo contrário estou muito feliz! Dai você pensa: \"mas quem diabos fica feliz por perder o emprego?”

\n

\"Gif

\n

Calma jovem.

\n

Eu não estou feliz por perder meu emprego. Estou feliz por ter tido essa grande oportunidade, de poder trabalhar ao lado pessoas inteligentes e excepcionais, ter tido a oportunidade de aprender muitas coisas legais e crescido um pouco cada dia que estava lá.

\n

Eu poderia ficar apenas olhando o lado negativo de se perder um emprego, mas eu passei por muitas coisas boas quando trabalhava lá, pessoas me apoiavam e tinham paciência comigo, e por esse motivo não posso simplesmente esquecer por não poder mais fazer parte de tudo isso.

\n

Eu poderia ficar triste por não contribuir mais com o crescimento do produto, mas o melhor a fazer é olhar para trás e ver o quanto eu contribui, o quanto eu já fiz por ele para ele estar ali, e agradecer por isso.

\n
\n

E se substituirmos nossas reclamações diárias por agradecimentos, vamos fazer um teste?

\n
\n
\n

Conclusão

\n

Sempre que acontece algo ruim no meio do caminho simplesmente não conseguimos enxergar o que aconteceu de bom, não por maldade isso é natural no ser humano.

\n

Por isso eu desafio você a reclamar cada vez menos e agradecer todos os dias por ter mais um dia para viver.

\n

Comece aos poucos, tente fazer isso por um dia, depois dois, depois uma semana, é tudo uma questão de costume.

\n

/end

","excerpt":"Você já parou pra pensar quantas vezes você reclama por dia, ou quantas vezes você reclamou hoje? Vamos lá, faça um teste! Você vai ficar surpreso em…","timeToRead":2,"frontmatter":{"category":["geral"],"date":"há 10 anos","description":"Você já parou pra pensar quantas vezes você reclama por dia, ou quantas vezes você reclamou hoje?","path":"/agradeca-mais-e-reclame-menos","tags":["reflexão"],"title":"Reflexão: agradeça mais e reclame menos","image":{"publicURL":"/static/thanks-1401aa93a3212fd74e609f9864da1d73.gif","name":"thanks"}},"fields":{"readingTime":{"words":540}}}},{"node":{"id":"b344b0b3-3d51-5de8-83e7-0f0a149ed01e","html":"

Iremos usar o comando sass-convert do próprio SASS para realizar a conversão dos arquivos, mas já sabemos que ele converte apenas um único arquivo, então vamos usar o terminal e com um simples loop iremos converter todos os arquivos de um diretório (ou vários diretórios) de uma só vez.

\n

Em sistemas Unix (Mac e Linux)

\n

Abra o terminal e execute o seguinte comando.

\n
for file in path/to/scss/**/*.scss; do sass-convert $file ${file%scss}sass && rm $file; done
\n

No Windows

\n
for /r path\\to\\scss %I in (*) do sass-convert \"%I\" \"%~dpnI.sass\"\ndel /f /s /q path\\to\\scss\\*.scss
\n

Não esqueça de trocar path/to/scss/ para o caminho onde estão os seus arquivos sass.

\n

Eu não testei no Linux nem no Windows então se você executou os comandos e algo não deu certo comenta ai e vamos resolver juntos.

\n
\n

Espero ter ajudado, Abraço!

\n

😎

","excerpt":"Iremos usar o comando do próprio SASS para realizar a conversão dos arquivos, mas já sabemos que ele converte apenas um único arquivo, então vamos…","timeToRead":1,"frontmatter":{"category":["dica"],"date":"há 10 anos","description":"Iremos usar o comando sass-convert do próprio SASS para realizar a conversão dos arquivos, mas já sabemos que ele converte apenas um único arquivo","path":"/como-converter-todos-arquivos-scss-de-um-diretorio-para-extensao-sass","tags":["scss","sass"],"title":"Como converter todos arquivos .scss de um diretório para extensão .sass","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":143}}}},{"node":{"id":"b5b1e615-f8ce-5ff9-81f7-8e3278dc03ab","html":"

\n \n \n \n \n \n \n \n \n
Usando Browsersync em uma aplicação Ruby on Rails
\n

\n

Aplicações Rails são magníficas não é mesmo? Todas aquelas Gems \"mágicas\", que fazem de tudo e um pouco mais, são lindas de se ver.

\n

Mas e se eu quiser algo ainda mais \"supimpa\" pra fazer o meu front-end? E se eu não quiser sair do Rails? Será que existe algo que sincronize todos os navegadores possíveis ou que me de históricos e ferramentas para debug do front-end, será que existe uma Gem assim para Rails?

\n

Eu procurei pelo Google a fora uma Gem que fizesse essa magia toda, mas não encontrei nada tão bom quanto o Browsersync, e se você não conhece o Browsersync recomendo dar uma lida nesse artigo que a Caelum escreveu.

\n
\n

ℹ️ Se você é front-end e não conhece o Browsersync eu recomendo fortemente que leia sobre ele e comece imediatamente a usar, é uma ferramenta indispensável no cinto de utilidades do Batman!

\n
\n

Ruby on Rails

\n

O intuito desse post não é explicar sobre o Rails e suas \"Magic\" Gems, e sim como integrar e usar o Browsersync dentro de uma app Rails.

\n

Primeiro de tudo você precisa de uma aplicação Rails já instalada em sua máquina (a vá! jura? 😱), logo após essa façanha instale o Browsersync global (sim tem que ser global).

\n

Instalando o Browsersync

\n

Para instalar o Browsersync global basta usar o comando abaixo.

\n
$ npm install -g browsersync
\n

Assim que a instalação estiver finalizada execute o seguinte comando para saber se tudo está funcionando.

\n
$ browser-sync --version
\n

O comando acima irá te mostrar qual a versão do Browsersync foi instalada na sua máquina, aqui instalou a versão 2.13.0.

\n

Usando Browsersync dentro do Rails

\n

Se você ainda não sabe o Rails sobe um servidor nativo com o comando rails server ou apenas rails s e usa a porta 3000, então precisaremos do servidor do rails inicializado para rodar o Browsersync.

\n

Após ter inicializado o server do Rails você precisa rodar outro comando no seu terminal (em outra aba ou em outra tela).

\n
$ browser-sync start --proxy localhost:3000 --files \"app/assets/**/* , app/views/**/*.html.*, \\!tmp, \\!log\"
\n

Eu vou explicar um pouco qual é a do comando acima. 😁

\n

Basicamente eu estou inicializado o server do Browsersync, apontando para o proxy do Rails (que já está rodando na porta 3000), passando quais são os arquivos que eu quero que ele assista (no caso apenas os assets e as views do Rails) e por fim estou ignorando os arquivos temporários da aplicação.

\n

Se isso tudo der certo ele vai abrir o navegador automaticamente para você, vai demorar um pouco até que ele sincronize tudo com o Rails, mas depois vai de boas.

\n

Caso você não queira que o navegador abra automaticamente basta colocar --no-open no final do comando e sucesso.

\n

Os comandos do Browsersync são bem fáceis de entender e se você já esta acostumado com outros comandos no terminal será bem tranquilo. Para saber mais leia em browsersync.io/docs/command-line/

\n
\n

Espero ter ajudado, Abraço!

\n

😎

","excerpt":"Aplicações Rails são magníficas não é mesmo? Todas aquelas Gems \"mágicas\", que fazem de tudo e um pouco mais, são lindas de se ver. Mas e se eu quiser…","timeToRead":2,"frontmatter":{"category":["rails"],"date":"há 10 anos","description":"Hoje vou explicar como integrar e usar o Browsersync.io dentro de uma aplicação Ruby on Rails","path":"/usando-browsersync-em-uma-aplicacao-ruby-on-rails","tags":["rails","npm"],"title":"Usando Browsersync em uma aplicação Ruby on Rails","image":{"publicURL":"/static/painel-browsersync-io-a7cb73a8007cc1d7a131ed13680ee44d.png","name":"painel-browsersync-io"}},"fields":{"readingTime":{"words":504}}}},{"node":{"id":"7a6d1291-0c49-5b4a-835b-5eb9ed2f0257","html":"

Olá terráqueo, como vai?

\n

Recentemente eu contribui com um projeto chamado Flags-in-CSS enviando a bandeira do Brasil pra coleção.

\n

Eu vou demonstrar nesse artigo como eu criei ela usando apenas com CSS

\n

O Retângulo verde

\n

Isso é muito simples. Primeiro criei uma div com a classe .brasil-flag, por enquanto vazia.

\n
<div class=\"brasil-flag\">\n  <!-- empty -->\n</div>
\n

E no CSS eu apliquei o seguinte código:

\n
.brasil-flag {\n  position: relative;\n  background-color: #16b83e;\n  width: 250px;\n  height: 150px;\n}
\n

Com isso nós temos o retângulo verde da bandeira.

\n

O Losango amarelo

\n

Logo dentro da div nós criaremos mais uma div com a classe .losangue, mais ou menos assim:

\n
<div class=\"brasil-flag\">\n  <div class=\"losangue\"></div>\n</div>
\n

E no CSS eu apliquei o seguinte código:

\n
.brasil-flag .losangue:before,\n.brasil-flag .losangue:after {\n  position: absolute;\n}\n\n.brasil-flag .losangue {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.brasil-flag .losangue:before,\n.brasil-flag .losangue:after {\n  content: '';\n  width: 0;\n  height: 0;\n  left: 20px;\n  right: 20px;\n}\n\n.brasil-flag .losangue:before {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-bottom: 65px solid #ffe11f;\n  top: 10px;\n}\n\n.brasil-flag .losangue:after {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-top: 65px solid #ffe11f;\n  bottom: 10px;\n}
\n

Já conseguimos ver o losango amarelo da bandeira.

\n

O Círculo azul

\n

Logo após vamos adicionar mais uma div com a classe .circle, mais ou menos assim:

\n
<div class=\"brasil-flag\">\n  <div class=\"losangue\"></div>\n  <div class=\"circle\"></div>\n</div>
\n
.brasil-flag .circle {\n  overflow: hidden;\n  z-index: 2;\n  display: block;\n  background-color: #1651b8;\n  height: 80px;\n  width: 80px;\n  margin-top: -40px;\n  margin-left: -40px;\n\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  border-radius: 50%;\n  -webkit-border-radius: 50%;\n  -moz-border-radius: 50%;\n}
\n

Isso já nos trás o círculo azul da bandeira.

\n

A faixa branca

\n

Ainda utilizando a classe .circle vamos criar a faixa branca da bandeira.

\n
.brasil-flag .circle,\n.brasil-flag .circle:before,\n.brasil-flag .circle:after {\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  border-radius: 50%;\n  -webkit-border-radius: 50%;\n  -moz-border-radius: 50%;\n}\n\n.brasil-flag .circle:before,\n.brasil-flag .circle:after {\n  width: 90px;\n  height: 40px;\n  -ms-transform: rotate(14deg);\n  -webkit-transform: rotate(14deg);\n  transform: rotate(14deg);\n}\n\n.brasil-flag .circle:before {\n  z-index: 3;\n  content: '';\n  margin-top: -20px;\n  margin-left: -45px;\n  background: #fff;\n}\n\n.brasil-flag .circle:after {\n  z-index: 4;\n  content: '';\n  margin-top: -10px;\n  margin-left: -48px;\n  background-color: #1651b8;\n}
\n

O resultado final

\n

\"Bandeira

\n

Ainda falta fazer as estrelas que, ao aceitar o meu pull request, o Christopher Pattle perguntou se não seria legal coloca-las, bem... Eu estou pensando ainda se coloco. :D

\n

/end

","excerpt":"Olá terráqueo, como vai? Recentemente eu contribui com um projeto chamado Flags-in-CSS enviando a bandeira do Brasil pra coleção. Eu vou demonstrar…","timeToRead":2,"frontmatter":{"category":["css"],"date":"há 11 anos","description":"Hoje eu vou demonstrar nesse artigo como eu criei a bandeira do Brasil usando apenas com CSS","path":"/criando-a-bandeira-do-brasil-apenas-com-css","tags":["css","css3","html"],"title":"Criando a bandeira do Brasil 🇧🇷 apenas com CSS","image":{"publicURL":"/static/bandeira-do-brasil-com-css-1145832a30b787961d7ed3a0bbe7c384.png","name":"bandeira-do-brasil-com-css"}},"fields":{"readingTime":{"words":408}}}},{"node":{"id":"1a2a5204-17d1-5083-8015-29bea191730a","html":"

Criar plugins para Jekyll é bem simples e fácil, basta criar seu arquivo .rb dentro do diretório _plugins.

\n

Hoje vamos usar um plugin bem bacana para incluir vídeos do Youtube no seu blog Jekyll sem precisar copiar e colar o iframe do youtube, apenas usando o ID do vídeo.

\n

O arquivo youtube.rb

\n

Crie um arquivo chamado youtube.rb dentro do diretório _plugins e coloque o código abaixo:

\n
class YouTube < Liquid::Tag\n  Syntax = /^\\s*([^\\s]+)(\\s+(\\d+)\\s+(\\d+)\\s*)?/\n\n  def initialize(tagName, markup, tokens)\n    super\n\n    if markup =~ Syntax then\n      @id = $1\n\n      if $2.nil? then\n          @width = 560\n          @height = 420\n      else\n          @width = $2.to_i\n          @height = $3.to_i\n      end\n    else\n      raise \"No YouTube ID provided in the \\\"youtube\\\" tag\"\n    end\n  end\n\n  def render(context)\n    \"<iframe width=\\\"#{@width}\\\" height=\\\"#{@height}\\\" src=\\\"http://www.youtube.com/embed/#{@id}?color=white&theme=light\\\"></iframe>\"\n  end\n\n  Liquid::Template.register_tag \"youtube\", self\nend
\n

Exemplo de uso:

\n

Como eu falei logo acima, é bem simples, apenas com uma linha curta você inclui o iframe do youtube no HTML final do Jekyll.

\n
{% youtube 8SbUC-UaAxE %}
\n

Você também pode especificar uma altura e largura do iframe. Se você não usar o padrão é de 560 x 420.

\n
{% youtube 8SbUC-UaAxE 850 460 %}
\n

Conclusão

\n

Bom, na verdade copiar e colar o iframe do Youtube não é tão difícil assim (HUE), mas eu NÃO gosto muito de misturar HTML com Markdown enquanto estou escrevendo um post, mas em alguns casos é necessário.

\n

\n \n \n \n \n \n \n \n \n
wp-cli help command
\n

\n

Com esses subcomandos você pode ter total controle da sua instalação WP, você pode instalar e remover plugins e temas, gerenciar categorias, taxonomias e termos, gerenciar comentários, usuários, resumindo, tudo que pode ser feito via /wp-admin/ poderá ser feito via WP-CLI.

\n

Por exemplo, instalação de um plugin ficara mais ou menos assim:

\n
wp plugin install hello-dolly
\n

Fácil não?

\n

\n \n \n \n \n \n \n \n \n
find yo WordPress
\n

\n

Clicando no link você será direcionado para o repositório do generator, lá teremos o passo-a-passo de como instalar e usar.

\n

Instalamos o Yeoman e o Generator como instalação de qualquer pacote npm.

\n
sudo npm install -g yo generator-yo-wordpress
\n

Com o comando acima instalamos o Yeoman e o yo-wordpress

\n

\n \n \n \n \n \n \n \n \n
yo wordpress command
\n

\n

Logo em seguida o generator irá pedir que você preencha alguns campos para que sua instalação sai bem. São elas:

\n\n

\n \n \n \n \n \n \n \n \n
Generator files and yopress file
\n

\n

Conclusão

\n

Usando generators você poupa um tempo massa de downloads, configurações, criação de diretórios, entre outros. E ainda se você trabalha criando novos projetos toda a semana com WordPress o ganho é absurdamente grande.

\n

Você já usa o Yeoman no seu dia-a-dia? Você achou interessante essa abordagem? Comenta ai vai.

\n

\\end

","excerpt":"Esse é o meu primeiro artigo do ano de 2016, então eu vou falar sobre Yeoman e o CMS mais usado do mundo, o WordPress. O que é Yeoman? Yeoman helps…","timeToRead":4,"frontmatter":{"category":["yeoman"],"date":"há 11 anos","description":"Sim, existe um Generator para WordPress, o YeoPress faz o download do WP e inicia uma estrutura complata pra você já sair codificando o seu projeto","path":"/yo-wordpress-iniciando-projetos-para-wordpress-em-segundos","tags":["yeoman","generator","npm","wordpress"],"title":"YeoPress, iniciando projetos WordPress em segundos","image":{"publicURL":"/static/yo-wordpress-command-f7f43364e830e3e75b17d9682ad52476.png","name":"yo-wordpress-command"}},"fields":{"readingTime":{"words":694}}}},{"node":{"id":"dad33a45-ebac-5402-948a-a6b4c1a9ae8c","html":"

Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog, mas agora ele foi totalmente feito em angular e ficou uma maravilha.

\n

Hoje vou mostrar aqui como foi eu criei essa façanha, é bem simples e sem segredo nenhum, vem comigo.

\n

Primeiro obstáculo: Liquid x Angular

\n

Você deve ter notado que o Jekyll, assim como o Angular, usa 2 chaves em sua sintaxe, causando assim um conflito na hora de compilar o jekyll.

\n

É bem simples resolver esse pequeno probleminha, o próprio Angular tem a solução, o $interpolateProvider é usado para configurar a interpolação da linguagem.

\n

Com ele vamos setar no config para o angular reconhecer apenas {( var )}, mais ou menos assim:

\n
var app = angular.module('searchApp', [])\napp.config([\n  '$interpolateProvider',\n  function($interpolateProvider) {\n    return $interpolateProvider.startSymbol('{(').endSymbol(')}')\n  },\n])
\n

O arquivo json

\n

Precisamos pegar todos os artigos do blog para alimentar nosso Javascript, criaremos um template para o Jekyll montando um .json.

\n

search.json

\n
---layout: null\n---[\n  {% for post in site.posts %}\n    {\n      \"title\" : \"{{ post.title | escape }}\",\n      \"category\" : \"{{ post.categories | array_to_sentence_string }}\",\n      \"tags\" : \"{{ post.tags | array_to_sentence_string }}\",\n      \"url\" : \"{{ site.baseurl }}{{ post.url }}\",\n      \"date\" : \"{{ post.date | date: \"%-d/%-m/%Y\" }}\"\n    }{% unless forloop.last %},{% endunless %}\n  {% endfor %}\n]
\n

O código acima irá montar uma estrutura mais ou menos assim.

\n
[\n  {\n    \"title\": \"Fazendo um sistema de busca simples no Jekyll usando AngularJS\",\n    \"category\": \"jekyll\",\n    \"tags\": \"jekyll, angular, and angularjs\",\n    \"url\": \"/busca-no-jekyll-com-angularjs\",\n    \"date\": \"27/12/2015\"\n  },\n  {\n    \"title\": \"dotX - mais um tema para Jekyll\",\n    \"category\": \"temas-jekyll\",\n    \"tags\": \"temas, jekyll, and download\",\n    \"url\": \"/dotX-mais-um-tema-para-jekyll\",\n    \"date\": \"21/12/2015\"\n  }\n]
\n

Se você quiser dar uma olhada no arquivo final pode entrar [nesse link aqui]({{ \"/search.json\" | prepend: site.baseurl }}).

\n

searchController

\n

Logo acima, no primeiro código angular, nós iniciamos o módulo searchApp e setamos o config para corrigir a interpolação da linguagem, agora vamos terminar nosso script criando o controller.

\n
// criando o ng-controller=\"searchController\"\napp.controller('searchController', [\n  '$scope',\n  '$http',\n  function($scope, $http) {\n    // criando a funcao \"pesquiser(q)\" que logo será usada em ng-keyup=\"pesquisar(search)\"\n    $scope.pesquisar = function(q) {\n      $scope.posts = []\n      if (q != '' && q != undefined && q.length >= 1) {\n        // no $http.get() que toda a mágica acontece...\n        $http\n          .get('/search.json', { data: q })\n          .success(function(data) {\n            // atribuindo os objetos em uma variável \"posts\"\n            $scope.posts = data\n          })\n          .error(function(data) {\n            console.error('error...')\n          })\n      }\n    }\n  },\n])
\n

O HTML

\n
<div ng-app=\"searchApp\">\n  <div ng-controller=\"searchController\">\n    <input\n      type=\"text\"\n      ng-model=\"search\"\n      ng-keyup=\"pesquisar(search)\"\n      placeholder=\"Digite: sass, javascript, ruby, gulp, php...\"\n      autofocus\n      autocomplete=\"off\"\n    />\n    <hr />\n    <ul ng-show=\"posts.length > 0\">\n      <li ng-repeat=\"post in posts | filter:search\">\n        <a href=\"{( post.url )}\">\n          <span>{( post.title )}</span> <small>{( post.category )}</small>\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>
\n

Bem, esse HTML ai em cima dispeça explicações né, se você sabe pelo menos o básico de AngularJS você já vai \"matar todas as charadas\" dele, mas vou dar uma explicação rápida.

\n\n

O filtro

\n

Você deve ter notado que o nosso searchController e nossa função pesquisar retorna todos os objetos do arquivo search.json por isso passamos um filtro mágico do AngularJS chamado filter: que recebe o model search (que é basicamente as letras digitadas no input).

\n

Demonstração Download

\n

Com isso fechamos nosso sisteminha de busca simples no Jekyll usando AngularJS ;)

\n

Gostou, comenta ai \\o/

\n

\\end

","excerpt":"Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog, mas agora ele foi totalmente feito em angular e ficou uma…","timeToRead":3,"frontmatter":{"category":["jekyll"],"date":"há 11 anos","description":"Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog","path":"/fazendo-sistema-de-busca-no-jekyll-com-angularjs","tags":["jekyll","angular","angularjs"],"title":"Fazendo um sistema de busca simples no Jekyll usando AngularJS","image":{"publicURL":"/static/angularjs-ac143796d23ba9bf2a8fb95d6d3783b5.png","name":"angularjs"}},"fields":{"readingTime":{"words":618}}}},{"node":{"id":"05feff9d-fb91-5fb8-9a42-4b1fa8b92459","html":"

Essa é uma dica rápida para os amantes da web, quem gosta, ama e trabalha com desenvolvimento de interfaces para o usuário.

\n

O que é?

\n

O Panda 4 - News & Inspiration Dashboard é um dashborad (painel) com freeds de websites, one pages, imagens, fotos e projetos inspiradores para quem gosta de apreciar essa arte.

\n

Ele tem a versão web e extensões para Firefox e Google Chrome. Eu uso ele nos dois navegadores (Firefox e Chrome).

\n

\n \n \n \n \n \n \n \n \n
Panda App Chrome extension
\n

\n

Acho incrivel apreciar o trabalho de grandes mentes do mundo web e sempre que preciso buscar uma inspiração pra algo que estou criando é nesses sites que encontro o que preciso.

\n

Isso não é só para designers

\n

Como eu disse nesse artigo aqui, um front-end com um bom lado criativo tem o seu valor e demonstra ser capaz de criar interfaces sem precisar da ajuda de um designer.

\n

Navegue, pesquise, busque coisas novas. E use panda! :D

\n

/end.

","excerpt":"Essa é uma dica rápida para os amantes da web, quem gosta, ama e trabalha com desenvolvimento de interfaces para o usuário. O que é? O Panda 4 - News…","timeToRead":1,"frontmatter":{"category":["dicas"],"date":"há 11 anos","description":"Essa é uma dica rápida para quem ama e trabalha com desenvolvimento de interfaces para o usuário","path":"/ei-front-end-voce-conhece-o-panda","tags":["dicas","extensões"],"title":"Ei front-end! Você conhece o Panda? 🐼","image":{"publicURL":"/static/panda-app-chrome-extension-17e0221d11d9d7b83d4ee663827e1eac.png","name":"panda-app-chrome-extension"}},"fields":{"readingTime":{"words":160}}}},{"node":{"id":"df8485c5-b3f3-505f-a367-6c117e60ba75","html":"
\n

Nota: Eu pensei muito antes de escrever esse artigo, sério! Não sou muito bom em passar sermão ou dicas por textos, mas vamos lá...

\n
\n

Um assunto polêmico

\n

Eu tenho um pouco mais de 6 anos de experiência em desenvolvimento web e posso falar que já vi de tudo um pouco nessa área, e esse artigo vai tratar de um assunto um pouco polêmico (como mamilos): O profissional deve saber de outras áreas que não são relacionadas a área dele?

\n

\n \n \n \n \n \n \n \n \n
Mamilos polêmico
\n

\n
\n

Nota: Porque eu me referi ao profissional e não ao front-end no texto acima? Por que, apesar do texto ser focado no mundo front-end, onde estou mais ligado, ele também vale para designers, programadores, marketeiros, UX e afins.

\n
\n

Durante minha trajetória até aqui eu já trabalhei com alguns programadores e designers que discordariam completamente da minha opinião, que é:

\n

Sim, o profissional que trabalha com web deve saber, ou pelo menos entender das áreas a sua volta. Principamente as áreas nas quais sua equipe trabalha e as equipes que ele tem contato dentro da empresa onde trabalha.

\n

Calma jovem, antes de você vir com pedras nas mãos eu vou começar a defender a minha opinião com os 6 itens logo abaixo.

\n

\n \n