Recursos frescos para web designers e desenvolvedores (junho de 2015)

Você acredita que esta série está funcionando há quase 3 anos? Naquele curto espaço de tempo, apresentamos pelo menos 30 listas dos recursos mais recentes para web designers e desenvolvedores. E vamos continuar com uma nova compilação para junho.

Nesta compilação, veremos algumas bibliotecas JavaScript para exibir controles deslizantes, rolagem mais suave para tabelas de dados, um efeito de elevador legal para um botão de rolagem para cima e mais.

Vamos dar uma olhada.

Estilo Médio Confirme

Medium foi elogiado por seu design; o layout e a interface do usuário parecem ter sido bem pensados. Além disso, também inspira os desenvolvedores da Web a desenvolver bibliotecas JavaScript ou CSS para replicar a interface do usuário. Medium Style Confirm é uma biblioteca JavaScript que se assemelha a pop-up ou caixa de diálogo no Medium.

Pinguim

O Penguin é um novo framework de front-end que você poderia usar como base de seus sites. Com ferramentas como o Grunt e o Sass, você pode facilmente adicionar ou remover bibliotecas ou CSS que você não precisa do framework, tornando-o o mais leve possível. Também é uma boa alternativa para Bootstrap e Foundation.

Elevator.js

Você viu esse botão em um site que permite deslizar até o topo da página? A maioria dos botões leva você ao topo, mas com o Elevator.js, você obtém um efeito de aceleração deslizante semelhante a um elevador, a música ea “Ding!” som uma vez que você chegou ao último andar. Muito bom!

X-Instagram

X-Instagram é um elemento personalizado Polymer que puxa e mostra imagens do Instagram por tag. Este elemento facilita todo o processo. Nós simplesmente adicionamos o elemento exatamente como um elemento HTML regular e especificamos a palavra-chave tag como os atributos do elemento.

E deixe a mágica começar!

CamanJS

CamanJS é uma ótima biblioteca JavaScript para manipulação de imagens. Ele vem com um conjunto de recursos que você normalmente encontraria em um editor de imagens. Você pode transformar o borrão da imagem, preto e branco e até aumentar o contraste.

ClusterizeJS

Clusterize.js é uma biblioteca JavaScript que aumentará o desempenho ao lidar com muitos dados em tabelas. Quando você rola para baixo de uma mesa com, digamos, 5000 na lista, normalmente a experiência fica lenta e irregular. Essas bibliotecas JavaScript abordarão esse problema, tornando a ação de rolagem suave navegando até o fim.

Sente o teste

Sente o teste é uma coleção de perguntas para avaliar suas habilidades e conhecimentos sobre CSS3, HTML5 e JavaScript. Cada teste recebe várias perguntas e tempo limitado para concluir todas essas perguntas. É uma boa fonte para descobrir como somos realmente bons com esses idiomas.

Flechas HTML

Esta é uma coleção de símbolos Unicode nativos especiais que você pode incorporar em HTML e CSS. Esses caracteres incluem setas, moeda e pontuação. Você descobrirá que, às vezes, não precisa de um ícone de fonte para exibir esses caracteres.

Flickity

O Flickity é uma biblioteca JavaScript para exibir carrosséis, galerias ou sliders no seu site. É otimizado para touchscreen; você pode deslizar facilmente os carrosséis com um dedo ou o trackpad se estiver em um laptop. Ele também vem com um monte de opções, permitindo a personalização completa de qualquer maneira que você gosta.

Typeslab

O Typeslab é uma ferramenta útil para criar um pôster do tipo Slab. Basta escrever o conteúdo e escolher a fonte, Typeslab irá gerar o poster instantaneamente. Você pode baixá-lo ou publicá-lo no Imgur.

MatchMedia

Matchmedia é uma biblioteca que replica consultas de mídia CSS. A biblioteca não é tão nova, mas é uma biblioteca realmente útil que decidi colocar na lista. Se você precisar fazer scripts com base no tamanho da viewport do usuário ou no tipo de mídia, essa é a biblioteca que você deseja.

A seguir, um exemplo usado para executar o script em um tamanho de porta de visualização de 320 px e abaixo:

 if (matchMedia ('somente tela e (largura max: 320px)'). correspondências)  

Hambúrguer Sass

Sass Burger vem com um Mixin que permite criar um “Hamburger” ícone e transformá-lo em uma marca de cruz com menos problemas.

Marx

Marx é uma coleção de regras de estilo CSS para tornar os estilos de elementos mais consistentes. É personalizável (com Sass), leve e funciona fora da caixa. Uma boa alternativa para ferramentas de redefinição de CSS já populares, como Normalize.css.

CSS.js

CSS.js é usado para analisar arquivos CSS para declaração de estilo. A biblioteca foi usada inicialmente para a equipe da Jotform para criar uma experiência WYSIWYG para edição de formulários com CSS. Agora eles têm código aberto para todos nós usarmos. Vale a pena salvar, apenas no caso de precisar mais tarde.