Close

19/05/2017

Links para o front-end developer #10

 

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.