Fetch, permite fazer request da mesma forma como era feito antigamente com o XMLHttpRequest. Uma das diferenças é que ele utiliza Promisses, o que gera uma API limpa e simples.

Request básico

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! });

Se você usar es6 fica ainda mais bonito:

fetch('/site/url')
  .then(response => console.log(response))
  .catch(err => console.log('Errou!'))

Lidando com JSON

Se você for usar JSON, o parâmetro do 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…

Quando seus usuários precisam fazer upload de alguma coisa no seu sistema, é a ele que você recorre.

O básico

O elemento é bem simples:

<input type="file">

Mas se você quer 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 radio e outros tipos de inputs do HTML, 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…

Depois do surgimento de pré-processadores como SASS e Less ganhamos uma quantidade imensa de coisas para melhorar a forma como escrevemos “CSS”. Mas como aconteceu com o JS depois do surgimento de várias lib e frameworks, temos algumas novidades nativas do CSS e você pode usar isso e mais um infinidade de plugins com PostCSS.

CSS level 4

CSS vem com algumas novidades, ainda está em working draft mas o PostCSS ta ai pra ajudar ❤.

Parent selector
Agora você pode selecionar um elemento pai baseado no seu filho.

$div > .lorem { /* seleciona a div que é pai do .lorem */}

Hyperlinks são um dos elementos mais básicos que existem, se você trabalha com web provavelmente você vê eles todo santo dia. Desde quando foram criados eles tem o mesmo objetivo, ligarem uma página.

Mas uma coisa que talvez você não saiba é que existem diferentes tipos de hyperlinks que podem ser usados para melhorarem a semântica, acessibilidade entre outras coisas na sua página.

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…

element:nth-child(3n+3)

Muita gente, assim como eu, um dia se perguntou — O que é esse “n” ai no meio?

element:nth-child(3n+3)

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)

Mas agora vamos voltar para o exemplo do começo, a expressão 3n+3, que seleciona cada terceiro elemento.

Para entender, basta…

Após uma “pausa” nos códigos passei um tempo estudando sobre design. Separei algumas anotações sobre alguns temas e vou compartilhar com vocês ❤

O básico

ps: Vou usar os termos em inglês.

• O tamanho da letra, também conhecido como `Cap Height`, é o tamanho total das letras capitalizadas.
• O `Ascender` é a “perninha” de cima de algumas letras, como o h, l, t, b, d, e k.
• O `Descender` é a “perninha” de baixo das letras como g, q, e y.
• O `Counter` é o espaço em branco no meio de algumas letras o e p.
• O `X Height`…

The rules to keep your CSS awesome.

Rule #1

Keep stylesheets maintainable

Rule #2

Keep code transparent, sane, and readable;

Rule #3

Keep stylesheets scalable.

Rule #4

Never use id.

Rule #5

Never use @extend.

Rule #6

Keep calm to use nesting selector

Rule #7

Follow some architeture for your code.

Rule #8

Keep your code well commented.

Want to contribute with our club?

Send a PR with new and awesome rules here.

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…