Uma das propriedades que descobri recentemente (e não é nova) é a object-fit que especifica como o conteúdo de um determinado elemento se encaixa dentro de seus limites definidos por sua largura e altura.

Os casos que imagino serem os mais comuns seriam o encaixe de uma imagem ou vídeo dentro de um cabeçalho do site, por exemplo:

O problema é que nossos sites devem ser adaptáveis, ou seja, tanto a largura e altura do container muda dependendo do tamanho da tela do dispositivo de acesso, por isso o conteúdo deve se encaixar de forma proporcional, sem perder suas características originais e ficar distorcido.

Como solucionar o problema

Caso você desenvolva um projeto no qual o usuário possa atualizar o conteúdo e a imagem do cabeçalho precise ser alterada, por exemplo, uma saída comum seria utiliza-la como background do elemento com o valor background-size: cover. O problema, além do óbvio uso do estilo inline, é que a imagem em questão não estaria no conteúdo da página e não seria indexada e, caso tal página fosse compartilhada, a imagem não estaria disponível para ser usada na rede social.

Para solucionar este problema de vez, a propriedade object-fit pode ser utilizada, permitindo o uso de uma imagem e definir como o conteúdo deste elemento seja exibido dentro das medidas especificadas por CSS:

Encaixe do conteúdo dentro do espaço definido pelo elemento com object-fit

Sintaxe

A propriedade possui alguns valores, cada um deles com suas respectivas particularidades:

• fill
  O conteúdo fica exatamente com as medidas do elemento, ou seja, se você definir as medidas de 500px x 250px, o conteúdo dela (a imagem em si) ocupará esse espaço todo;
• contain
  O conteúdo respeita as dimensões do elemento, porém mantém suas proporções, algo como um max-width ou max-height aplicados na imagem;
• cover
  O conteúdo preenche todo o espaço, porém de maneira proporcional, sem deixar espaços vazios (como na imagem exemplificada acima). Neste caso é obrigatório que a largura e altura mínima do conteúdo correspondam às medidas definidas;
• none
  O conteúdo não é redimensionado para ser encaixado dentro das medidas definidas no elemento;
• scale-down
  O conteúdo é redimensionado como se none ou contain fossem definidos, quaisquer propriedade resulte em uma dimensão menor.

Exemplos práticos

See the Pen CSS object-fit examples by Coopers Digital Production (@coopersdigitalproduction) on CodePen.

Como está o suporte dos navegadores?

De acordo com o caniuse.com o uso desta propriedade é bem seguro, tendo problemas somente no Internet Explorer e Edge até a versão 15. Para contornar a falta de compatibilidade, testei o object-fit-polyfill, o qual se mostrou a solução mais adequada, já que funciona com img, video, srcset e picture.

Na prática este polyfill redimensiona e reposiciona o elemento de acordo com o valor desejado para o object-fit, sem transformá-lo em um simples background.

Referências

• Maujor
• MDN
• CSS Tricks

The post CSS object-fit: para que serve e como utilizar appeared first on Front-End Development.

Chegamos ao décimo post da nossa série, dessa vez com links bem diversificados tanto para desenvolvimento front-end como design para Web:

1. A re-introduction to JavaScript
   Ótima referência da Mozilla para iniciantes e àqueles que já desenvolvem mas precisam de uma recapitulada nos conceitos do JavaScript. A documentação é bem extensa e passa por diversos conceitos até níveis avançados.
2. BEM 101
   Entenda como funciona a metodologia BEM para nomenclatura de componentes no CSS, facilitando a compreensão e hierarquia das informações em projetos de todos os tamanhos.
3. The 5 Most Popular Frontend Frameworks of 2017 Compared
   Aqui na Coopers utilizamos o Foundation em todos os nossos projetos, devido a metodologia usada para construção e customização de seus componentes. Porém há diversas outras opções, como o próprio Bootstrap, que podem se adequar às necessidades de cada equipe de desenvolvimento. A comparação no artigo é um pouco superficial, mas vale dar uma olhada nas opções mais utilizadas atualmente.
4. Enforcing CSS styntax style
   Estamos habituados a utilizar ferramentas que validam código JavaScript no workflow convencional, porém a metodologia apresentada nesse artigo reforça como é importante validar, também, códigos CSS. Como nós temos uma filosofia muito forte em relação à maneira como devemos organizar nosso código, este tipo de aplicação será muito útil!
5. Some Extremely Handy `:nth-child` Recipes as Sass Mixins
   Artigo com diversos exemplos práticos com aplicações não muito usuais (mas muito úteis!) com o seletor :nth-child.
6. Media Queries Level 5
   Página da W3C com o rascunho (draft) das novas especificações para Media Queries, com detecção de recursos bem interessantes, possibilitando a customização visual do site, por exemplo, se o usuário tiver (ou não) JavaScript habilitado. Além disso, a possibilidade de criar regras para breakpoints (parecido com o que fazemos com SASS atualmente).
7. Responsive Design for Motion
   A nova versão do Webkit suporta um novo recurso para Media Queries, no qual detecta se o usuário habilitou ou não a opção para reduzir as animações em seu dispositivo (por exemplo como acontece no iOS, dando a possibilidade do usuário desabilitar transições e animações do sistema operacional). Desta forma podemos extender isso para nossos sites, customizando certos elementos e animações, via Media Queries.
   O artigo mostra diversos exemplos práticos aplicados no site da Apple e o código-fonte para chegar a este resultado.

The post Links para o front-end developer #10 appeared first on Front-End Development.

Mudamos o nome da nossa série de referências, mas a essência continua a mesma: manter a comunidade atualizada sobre as novidades para os desenvolvedores e quem trabalha com projetos Web em geral.

Então vamos aos links desta edição:

1. ES6 Features
   Apesar de ser um padrão relativamente novo, temos muitas ferramentas usando as novas funcionalidades que o ES6 (ECMAScript 6) nos proporciona. Esta página lista diversos recursos com explicações técnicas e seu resultado.
2. htmlreference.io
   Guia com todos os elementos e atributos do HTML, mostrando se são experimentais, self-closing, inline ou block entre outras características.
3. HTML5 Robot
   Um sistema automatizado que, baseado em respostas ao seu questionário, lhe indica os elementos mais adequados à situação.
4. CSS Triggers
   Referência com propriedades CSS e seu impacto na renderização da página, mostrando a forma pela qual cada engine dos navegadores reage as suas alterações. Interessante para quem enfrenta problemas com performance.
5. HTML5Pattern
   Guia com diversos padrões utilizados frequentemente no preenchimento de formulários (input patterns) em HTML5. Fique atento ao suporte dos navegadores a esse tipo de funcionalidade!
6. What Web Can Do Today
   Saiba quais funcionalidades de dispositivos móveis (e desktops em geral) são possíveis com APIs do HTML5, com código exemplificando na prática.
7. Moving to HTTPS Guide
   Precisa mudar seu site em WordPress para HTTPS? Este guia pode ajuda-lo com um passo-a-passo bem detalhado desde a descrição do que precisa e como configurar o sistema.
8. WAI-ARIA Authoring Practices 1.1
   Guia mantido pela W3C com boas práticas de acessibilidade para diversas aplicações usadas na Web, desde modais até menus e sliders.
9. Flexbox Cheatsheet
   Aprender flexbox e suas aplicações pode ser um tanto quanto confuso de início, por isso esta excelente referência serve como um guia para iniciantes como para aqueles que já tem prática mas tem dificuldades em lembrar certas propriedades e como impactam no layout.
10. CSS Grid Cheat Sheet
    Este guia exemplifica a aplicação de CSS Grid, funcionalidade que também gera um pouco de confusão. Assim como no caso do flexbox, ter referências visuais auxiliam muito na compreensão da aplicação de tais propriedades no layout.

Espero que tenham gostado de nossa seleção para esta lista, caso tenham outras referências é só comentar!

The post Links para o front-end developer #9 appeared first on Front-End Development.

EditorConfig ajuda desenvolvedores a definir e manter consistente estilos de codificação entre diferentes editores e IDEs. O projeto EditorConfig consiste em um arquivo de formato para definir estilo de codificação e também oferece uma coleção de plugins para editores de texto que habilitam os editores a lerem esse arquivo de definições e atribuí-las nas configurações do editor. O arquivo “.editorconfig” é facilmente lido e ele funciona muito bem com controle de versionamento.

• Evita problemas comuns (quebra de linha) em versionamento entre diferentes sistemas operacionais (Windows / Unix);
• Consistente indentação e enconding ao longo do projeto;
• Evita desnecessários espaços em branco.

Como usar EditorConfig

Crie o arquivo “.editorconfig” na raiz do projeto e instale o plugin para o editor de texto.

# http://editorconfig.org/

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

Para mais informações e configurações: EditorConfig

The post EditorConfig appeared first on Front-End Development.

Não é de hoje que a comunidade de desenvolvimento se preocupa em manter um código padronizado e trabalhando sozinho ou em equipe todos buscam isso. Simplesmente para que você ou outros possam dar manutenção ao código.

Nem todos formatam o código devidamente como deveriam, ou nem sempre você lembra de determinada boa prática naquele ambiente que está desenvolvendo. Então em ordem de ter um Helper, avisando sempre que algo não está de acordo em seu código o conceito de Lint se estabeleceu.

É de extrema ajuda, pois previne possíveis bugs e mantém seu código padronizado.

Também é super simples usar.

1 passo, escolha um ambiente de Lint.

Atualmente os mais recomendados por serem mais usados são ESLint e standard JS.

o ESLint é muito usado e você pode configurar exatamente o que deseja que seja avisado com “alerta” ou como “erro”.

o standard JS, não tem opção de configuração e a ideia é junto com o resto do mundo seguir os principais padrões de desenvolvimento.

Ambos são muito bons desde que você use algum, e se você não sente necessidade, faça um teste, instale um plugin para o seu editor e veja como será mais produtivo seu trabalho.

Você pode configurar um automatizador de task (Webpack, Gulp, Grunt) para ficar verificando, mas acho que não seja tão necessário de princípio, apenas uma instalação global (requerido pelos plugins) e o plugin para o editor.

Com o ESLint você pode configurar um arquivo (.eslintrc) e definir seus padrões, esse arquivo deve ser versionado e assim todos que trabalharem em seu projeto automaticamente seguirão seu padrão definido, é claro que se estiver com as configurações do Lint corretas.

Veja a documentação do ESLint e crie o seu .eslintrc, você pode usar também algum ESLint Rule Generator para facilitar, e coloque aonde for necessário em seu projeto (geralmente na raiz).

• ESLint: The pluggable linting utility for JavaScript and JSX
• standard JS: One JavaScript Style Guide to Rule Them All

• ESLint Integrations (Editors Plugins, Build Systems): Editors, Build Systems, Command Line Tools, Source Control, Testing, External ESLint rules and Other Integration Lists.
• Popular Coding Convention on Github: Analyze Github commits to know which convention is popular.
• Airbnb JavaScript Style Guide: A mostly reasonable approach to JavaScript.
• Untangling Spaghetti Code: How to Write Maintainable JavaScript

• VS Code ESLint extension
• TSLint (Typescript)

The post Javascript Lint appeared first on Front-End Development.

Se você, assim como eu, não é nenhum especialista em configuração de servidores não se assuste! Sabemos que uma das formas mais fáceis para criar e administrar domínios virtuais é através do MAMP Pro, porém requer a compra de uma licença.

Supondo que você queira criar virtual hosts em sua máquina para desenvolvimento de projetos diversos, execute os passos a seguir:

Criando virtual hosts pela primeira vez

• Abra o Terminal – já que estamos falando de MAMP, automaticamente nos restringimos ao macOS – e execute o comando abaixo para abrir o arquivo hosts (será solicitada a senha de administrador da máquina para executa-lo):

$ sudo nano /etc/hosts

• Adicionar a seguinte linha no final do documento (trocando projeto.dev para qualquer domínio de sua preferência), redirecionando o virtual host para o IP da sua própria máquina:

127.0.0.1 projeto.dev

• Ao terminar a edição, apertar CTRL+X para fechar o arquivo, confirmar digitando Y e depois ENTER para fechar;
• Agora vamos habilitar a possibilidade de utilizar virtual hosts com o MAMP. Abra o arquivo httpd.conf no caminho Applications/MAMP/conf/apache/httpd.conf e procure pelas linhas abaixo (provavelmente sejam 524 e 525):

# Virtual Hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

• Retire o caractere # do início da segunda linha acima, assim o MAMP executará a configuração para domínios virtuais sempre que iniciar um servidor, ficando assim:

# Virtual Hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

• Ainda no arquivo “httpd.conf”, procure por “AllowOverride None” (aqui no meu arquivo, linha 206) e troque por “AllowOverride All”.

Options Indexes FollowSymLinks
AllowOverride All

• Abra o arquivo listado no caminho anterior, pois nele definiremos os virtual hosts a serem interpretados pelo MAMP. Para isso, abra o caminho Applications/MAMP/conf/apache/extra/httpd-vhosts.conf.
• No final do arquivo haverão dois exemplos de virtual hosts:

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

• Edite os dois exemplos para que fiquem da forma abaixo:

<VirtualHost *:80>
    DocumentRoot /Applications/MAMP/htdocs
    ServerName localhost
</VirtualHost>
           
<VirtualHost *:80>
    DocumentRoot "/Users/username/Sites/projeto"
    ServerName projeto.dev
</VirtualHost>

• Editando desta forma, você define que o domínio virtual projeto.dev direciona para a pasta /Users/username/Sites/projeto. Mude esses parâmetros (DocumentRoot e ServerName) a vontade. Sempre que precisar criar um novo domínio virtual, é só replicar as linhas que começam com <VirtualHost *:80> até </VirtualHost>.
• Depois disso abra o MAMP, entre nas preferências e edite a porta do Apache para 80 conforme print abaixo:

Obs: já vi tutoriais em que este último passo não está listado, mas era o que faltava para funcionar em minha máquina.

Pronto! Seu domínio virtual está criado e sua máquina preparada para reconhece-lo. Importante ressaltar que, a cada edição, deve-se reiniciar o servidor no MAMP para que as alterações tenham efeito.

Caso precise criar novos domínios no futuro

Para adicionar novos domínios virtuais no futuro, certamente você não precisa repetir todos estes passos acima. Veja como fica simples:

• Edite o arquivo /etc/hosts da forma descrita anteriormente;
• Abra o arquivo Applications/MAMP/conf/apache/httpd.conf e adicione um novo bloco para definir o novo domínio ao MAMP.

Com estes passos realizados, é só reiniciar o servidor e tudo funcionará sem problemas!

The post Configurando virtual hosts no MAMP appeared first on Front-End Development.

Nesta semana temos uma gama bem variada de referências, desde campos de formulário em HTML5, metodologias para melhor performance, CSS Feature Queries, bibliotecas de gráficos em SVG entre outros. Vale a pena dar uma olhada:

Front-End

• The State of HTML5 Input Elements: o HTML5 nos permite utilizar diversos tipos de inputs em nossos formulários, porém ainda temos inconsistências nos diferentes navegadores. Este artigo comenta a diferença na forma como os navegadores interpretam a localização do usuário e interferem na exibição das informações (formato de data, métricas, etc.), sem intervenção de JavaScript.
• How to use CSS Feature Queries: há alguns anos temos a opção de customizar nossos sites baseados nas features disponíveis aos usuários, muito graças a biblioteca Modernizr, a qual detecta quais recursos o usuário tem (ou não) em seu navegador, permitindo os desenvolvedores customizar a experiência de acordo com essas possibilidades. O artigo mostra como as CSS Feature Queries podem ajudar na melhor experiência para usuários com navegadores mais antigos ou modernos, sem utilização de polyfills, deixando os sites mais leves.
• Yarn: A new package manager for JavaScript: Facebook lança seu package manager para concorrer diretamente com o npm que, ironicamente, é instalado via npm. A promessa é ter uma melhor performance, funcionar de maneira offline caso o pacote já tenha sido instalado anteriormente, melhor controle de versões entre outros recursos.
• Lazy Loading Images? Dont’ Rely On JavaScript!: este artigo mostra uma técnica muito interessante para implementar lazy loading nas imagens sem prejudicar os usuários que não tenham JS habilitado em seus navegadores.
• Web performance secrets from the BBC: como a BBC melhorou a performance de seus sites? Este artigo mostra algumas dicas e metodologias relativamente simples que incrementaram ainda mais a experiência dos seus usuários.
• AtoZ CSS Screencast: The CSS Value of Auto: já parou para pensar o quão importante é o valor ‘auto’ no CSS? Este artigo/screencast nos mostra como é relevante sabermos como e em quais situações devemos usá-lo.
• SVG Charting Libraries: este artigo faz um apanhado de diversas opções de bibliotecas para gráficos disponíveis, porém com uma exigência: o resultado seja exibido em SVG.

The post Links Semanais #8 appeared first on Front-End Development.

Algumas referências sobre análise de performance na web, novas especificações do HTML5, sistema de grids em flexbox e Responsive Web Design.

Front-End

• Web Performance Checklist: coletânea de informações sobre performance na web nas áreas de processos e workflow, animações e efeitos, fontes, imagens e SVG e performance subjetiva.

• W3C Set to Publish HTML 5.1, Work Already Started on HTML 5.2: artigo que comenta as atualizações na nova especificação do HTML 5.1, incluindo alguns elementos que não podíamos utilizar (ou utilizamos através de polyfills). Juntamente com a publicação do novo padrão, já temos algumas informações sobre o HTML 5.2.

• How loading JavaScript can slow websites down (even if it’s asynchronous): não precisa ser um expert em performance para saber que devemos incluir os scripts no final de nosso documento para não bloquear o carregamento das páginas, bem como usar o carregamento assíncrono, de forma que mais recursos sejam carregados paralelamente. Porém este artigo mostra que mesmo assim podemos ter problemas de performance e o que podemos fazer para diminui-los.
• Fukol: sistema de grids em flexbox extremamente leve (e simples) para auxiliar na montagem de layouts em colunas.
• Responsive Design is Killing Two-Thirds of Your Conversions. Here’s How to Fix It.: artigo com um mote mais comercial, porém comenta alguns problemas importantes que vemos (principalmente em temas prontos) relacionados ao Responsive Web Design. Algumas boas práticas são sempre bem-vindas, principalmente para darmos uma melhor experiência aos usuários e, consequentemente, melhorar a conversão dos nossos serviços.

The post Links Semanais #7 appeared first on Front-End Development.

Muita coisa bacana foi separada para o compilado dessa semana, vamos aos links:

Front-End

• The State Of JavaScript: Front-End Frameworks: Resultado de pesquisa sobre a utilização e percepção sobre os frameworks JavaScript mais utilizados. Retratam tendências da nossa área e dão indicativos de onde vale mais a pena focar seus estudos.
• Frontend Guidelines Questionnaire: Excelente referência de Brad Frost, guiando a padronização e metodologias de trabalho front-end em equipe.
• Using WebP Images: Explanação sobre motivos para utilizarmos o formato WebP de imagens otimizadas para web, suporte a navegadores e formas de implementação.
• React.js Introduction For People Who Know Just Enough jQuery To Get By: Artigo que faz uma introdução ao React.js de forma didática para quem não tem conhecimento tão profundo de JavaScript e programação.
• The Average Web Page (Data from Analyzing 8 Million Websites): Análise contemplando 8 milhões de sites, mostrando as tags mais utilizadas para estruturar as páginas e seu conteúdo.
• Offline Storage for Progressive Web Apps: Devido as diversas condições de conexão disponíveis atualmente (seja móvel ou banda larga), principalmente em questão de estabilidade, as estratégias para acesso a informação com Offline Storage permitem o uso das aplicações na web mesmo sem acesso a internet, evitando frustrações e queda no número de usuários.
• SpeedPerception: Estudo em larga escala que visa medir o impacto da velocidade de carregamento de sites na percepção dos usuários. Com este estudo podemos ter uma forma mais analítica de saber em qual escala a velocidade de carregamento impacta ou não nas visitas e fidelidade ao nosso conteúdo. Você pode ajudar o projeto participando deste desafio.

Interface

• Improve your UX with Google Analytics: O Google Analytics é uma poderosa ferramenta de análise de visitas, além do comportamento dos usuários ao navegador pelos nossos sites. Este artigo comenta como os dados coletados pelo Analytics pode contribuir para a melhoria de nossas Interfaces.

Geral

• From Chrome Apps to the Web: Finalmente o pessoal do Google mudou de idéia e abrirá mão dos Chrome Apps, abrindo espaço para versões Web destas aplicações, algo que a W3C vem pregando desde sempre!

The post Links Semanais #6 appeared first on Front-End Development.

Não temos muitos links nesta semana, mas há bastante informação relevante sobre performance, escalabilidade e geradores estáticos:

Front-End

• Staggering Animations: Interessante artigo que fala sobre performance de animações na Web e as diferentes formas de controlá-las.
• Quick Tip: How to Throttle Scroll Events: Utilizar eventos durante o scroll da página pode prejudicar muito a performance do seu site, por isso este artigo compara duas técnicas e em quais tipos de caso elas podem ser utilizadas, a fim de deixar a experiência do usuário mais agradável.
• lazysizes: Script que tem como intuito otimizar o carregamento do site, carregando imagens, iframes e outros scripts de acordo com níveis de prioridade.
• Scaling CSS Components with BEM, REMs, & EMs: Breve introdução a modularização de código e outras práticas que facilitam a escalabilidade de projetos front-end.
• Using a Static Site Generator at Scale: Lessons Learned: Excelente análise do cenário atual de geradores de sites estáticos, comentando os pontos positivos e diferentes formas de trabalho.
• You can kinda invent your own weird design language with attributes and attribute selectors: Confesso que nunca havia pensado nisso, uma forma meio maluca de desenvolver layouts utilizando atributos e valores totalmente customizados nos elementos HTML, utilizando seletores CSS para estilização.

The post Links Semanais #5 appeared first on Front-End Development.