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;
}
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.
O que isso quer dizer?
Vejamos esse exemplo do que o Normalize faz para normalizar…
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.
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!'))
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 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.
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 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)
element:nth-child(3n+3)
O que o código acima faz, é selecionar cada terceiro elemento, ou seja, o 3º, 6º, 9º.
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 ❤
ps: Vou usar os termos em inglês.
The rules to keep your CSS awesome.
Keep stylesheets maintainable
Keep code transparent, sane, and readable;
Keep stylesheets scalable.
Keep calm to use nesting selector
Follow some architeture for your code.
Keep your code well commented.
Send a PR with new and awesome rules here.
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 pelo mais básico, assim…
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.
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:
Se você usa o Windows e/ou MAC basta baixar o instalador.
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:
Baixe o “Source Code” na mesma tela de anteriormente. Quanado terminar…
Empathy is important.