Image for post
Image for post

Para o estilo padrão dos nossos elementos HTML, ter que lidar com a diferente implementação de cada navegador é algo bem complicado.

Ao longo do tempo lidamos com isso de diferentes formas:

A forma mais básica é remover margin e padding:

* {
margin: 0;
padding: 0;
}

Uma solução moderna

Hoje em dia, temos algumas soluções que ficaram mais populares. Existe o Normalize.css, o qual não é considerado um reset, pois o que ele faz é:

Garantir que o estilo aplicado pelos diferentes navegadores seja o mesmo.

Vejamos esse exemplo do que o Normalize faz para normalizar…


Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

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 */}


Image for post
Image for post

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.

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 ❤

Image for post
Image for post
Minha mesmo :D

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`…


Image for post
Image for post

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.


Image for post
Image for post

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…


Um post simples para quem quer começar com Node.js (simples mesmo).

Introdução

Esse é um artigo bem voltado pra utilização inicial, instalação, se você quiser saber sobre V8, event loop, etc recomendo os artigos do Caio Ribeiro.

Começando

Antes da brincadeira começar, é preciso instalar o Node.js na sua máquina. Vai lá no site do nodejs.org, clica em download que você vai ver as seguintes opções:

Image for post
Image for post

Windows e MAC-OS

Se você usa o Windows e/ou MAC basta baixar o instalador.

Linux

No Linux eu já utilizei duas formas de instalar e funcionaram perfeitamente, vou mostrar as duas e fica a seu critério qual a melhor maneira:

Source Code

Baixe o “Source Code” na mesma tela de anteriormente. Quanado terminar…

● filipe

Empathy is important.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store