Filipe Linhares

Read this first

Elemento input[type=“file”]

Quando o seu usuários precisar fazer upload e alguma coisa no seu sistema, é a ele que você recorre.

 O básico

O elemento é bem simples:

<input type="file">

Mas se você quiser o mínimo de acessibilidade vai precisar adicionar mais um pouco de html:

<form method="post" action="upload.php" formenctype="multipart/form-data">
    <label for="upload">Upload your picture:</label>
    <input type="file" name="upload" id="upload">
</form>

Como o input color e outros tipos de inputs do HTML5, o estilo desse input é definido pelo browser.

 Limitações

Você pode limitar as opções do usuário setando diferentes MIME type no atributo accept, você também pode usar o * para permitir arquivos de um tipo em particular.

<input type="file" accept="image/*" name="upload" id="upload">

IOS suporta o * mas não suporta arquivos específicos como por exemplo image/png.

Tudo que não for um arquivo do

Continue reading →


Começando com o Vim

Porque tu vai usar o Vim cara? 200 comandos pra copiar uma linha!

Ah cara, esse Vim tu tem que saber programar só pra configurar ele!

Vim logo

Comecei a usar o Vim a pouco tempo, antes eu usava o Sublime Text 3 e tentei também usar o Atom, mas depois de um tempo aberto no meu Ubuntu o Atom ficava lento demais.

 Por que mudar?

Isso é algo um pouco pessoal mas eu não gosto de ficar “parado”. O Sublime resolvia meus problemas mas eu sentia que poderia ser melhor. Já tinha dado uma olhada no Vim a algum tempo atrás mas sempre tive um pouco de preguiça para configurar (o que realmente é um pouco complicado).

Um dia cheguei no meu trabalho, olhei para o meu amigo que usa Vim e disse: “Vou começar a usar o Vim agora!”. Depois disso eu procurei no Google por algum .vimrc para front-end, acabei achando um muito bom e comecei a usar.

Naquela noite como eu não tinha muita coisa pra fazer decidi que

Continue reading →


Como funciona o nth-child()

element:nth-child(3n+3) {
  // some style here
}

Muita gente, assim como eu, um dia se perguntou - O que é esse “n” ai no meio? – É isso que eu vou explicar hoje.

O que o código acima faz, é selecionar cada terceiro elemento, ou seja, o 3º, 6º, 9º.

 Mas o que acontece entre os parênteses?

O seletor nth-child() aceita duas palavras-chaves, “odd” (impar) e “even” (par). Como o nome já diz, odd seleciona cada número impar e o even cada número par.

Como visto no primeiro exemplo, nth-child() também aceita expressões. A expressão mais simples que podemos utilizar é utilizar apenas um número, isso ira selecionar apenas o elemento que corresponder aquele número.

element:nth-child(5) {
  // some style here
} 

Mas

Continue reading →


Como utilizar fetch();

Fetch, permite fazer request similiar a forma como era feito antigamente com o XMLHttpRequest. A principal diferença é que o fetch utiliza promisses, o que gera uma API limpa e simples, sem callback hell.

 Request básico

O fetch, recebe dois parâmetros, um sendo a url, e o outro as opções.

fetch('/site/url').then(function(response) {
    // Resposta
}).catch(function(err) {
    // Errou!
});

 Lidando com JSON

Se você for usar JSON, o callback tem um método chamado .json(), que ira transformar sua resposta em um objeto javascript.

fetch('/site/url/json')
.then(function(response) { 
    // Converte para JSON
    return response.json();
}).then(function(js) {
    // Objeto javascript
    console.log(js); 
});

 Text

Se o seu serviço recebe um HTML como resposta, aqui está como você lida com uma resposta em html ou texto.

fetch('/site/url')
.then(function(response) { 
    //

Continue reading →


Tipos de hyperlinks

Um guia dos diferentes tipos de links.

Tipos de links são bons para descrever a relação entre duas ou mais páginas e também podem expressar a razão de porque certos links estão na página.

Definir tipos de links também ajuda no SEO, já que os motores de busca podem usar essa informação para melhor entender o conteúdo do seu site.

Outras ferramentas online como redes sociais ou tradutores aproveitam sempre que você adiciona certos tipos de links.

Use o atributo rel para adicionar tipos de links.

Abaixo um exemplo de como usar o nofollow .

<a rel="nofollow" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>

Você pode usar vários tipos, basta separá-los com espaço.

<a rel="nofollow noreferrer" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>

Nesse post vamos falar apenas dos tipos de hiperlinks.

Continue reading →


Content audity

 O que é content audity?

O content audity é uma técnica que consiste em fazer uma listagem de todo o conteúdo de um site visando identificar sua estrutura organizacional. Todas as páginas do site devem ser visitadas e devesse anotar tudo o que for útil e importante. Dessa forma você vai entender o que há de conteúdo neste site, se está em um local adequado e se está atualizado.

 Para que o content audity é utilizado?

Essa ferramenta vai ser muito útil se por acaso for necessário refazer a arquitetura de informações da interface. Você pode voltar pra essa listagem várias vezes e ver a melhor forma de organizar o conteúdo. Vai ser possível encontrar conteúdo duplicado e também vai poder usá-la para conversar com o criador do conteúdo se alguma coisa precisar ser refeita. Com seu entendimento do conteúdo será muito melhor.

 Como é um content audity?

Normalmente ele é organizado em uma

Continue reading →


Material Design, Part 1 - O começo.

Vou começar uma série de posts sobre Material Design, onde eu pretendo abordar desde a história que motivou a criação, até os detalhes dessa linguagem visual.

Esse primeiro post é uma breve história do que levou a criação do Material, espero que gostem!


 O antigo Google

Quem não usou o antigo Gmail?

Old Gmail

Ou então o Youtube:

Old Youtube


 Um Google mais bonito.

Se você usou o Google antes de 2012 deve ter visto as mesmas telas que eu mostrei no começo, era algo bem rustico para não dizer feio, e sem nenhuma usabilidade, realmente uma aplicação “engineer driven”. Antes de 2012 o Google não tinha nada de design.

Quando Larry Page tomou a presidência em 2011, sua primeira ordem foi, “Deixem o Google bonito”, com um concorrente como a Apple que respira design, se o Google não tomasse alguma providência com certeza iria perder espaço. Como o Google não queria criar uma dependência em Mountain View

Continue reading →


Como organizamos o código front-end na CODELAND

Codeland? A Codeland é uma empresa de desenvolvimento web de Porto Alegre, conta com uma galera muito maneira e cheia de idéias, se um dia tiver de bobeira e quiser trocar uma idéia com a gente, sera muito bem bem vindo :D.

Estou trabalhando na Codeland a quase 5 meses e quando eu cheguei não existia muito bem definido como funcionaria a organização do front. Depois de algumas conversar e analises sobre qual seria a melhor forma de fazer isso chegamos a um set de ferramentas e metódologias que eu irei mostrar pra vocês nesse post.

 Começando

Começando pelo mais básico, assim é a organização nosso código e essas são as melhores práticas utilizadas para manter a consistência.

 “Best Pactrices” SCSS Syntax

  • Atomic Design.
  • BEM para nomenclatura.
  • Somente classes nada de ids.
  • Evitamos usar nesting, e se usar no máximo 3 níveis.
  • Organizamos as propriedades CSS com o CSS Comb.
  • Cores com

Continue reading →