Glauco Web

Eu olho pra trás e vejo o quanto nós front-end evoluímos tecnicamente e como as empresas conseguiram enxergar o quantos se torna importante todo o processo client-side. É bem bacana vermos todo esse crescimento em nossa área de Dev, a questão é: Qual o cuidado que devemos ter para não nos tornarmos multiuso? 

Certo dia conversando com alguns Devs back-end, eles comentaram que muitos da área deles estão virando Fullstack pelo fato de enxergar um futuro brilhante nessa nova “modalidade” ou “modinha”. O fato é que eu particularmente não consigo enxergar muito bem como um Front-end pode ser ao mesmo tempo Fullstack e ter o controle projeto como um todo. O que eu estou querendo dizer, é que quanto mais tecnologias você souber para dar suporte eu muito difícil de todas elas terem a mesma proporção de conhecimentos específicos.

Lembrando a vocês que eu não sou contra a galera que se declara Fullstack. O que eu acho que está acontecendo é que a tecnologia Front-end cresceu de uma forma absurdamente rápida onde muitos Devs enxergaram um novo nicho de inserir isso nas empresas. Por outro lado muitas empresas estão sendo bem espertinhas e sabendo que o carinha é Fullstack vai querer lucrar de alguma forma.

Se você analisar a imagem acima mostra o quanto de tools e frameworks você precisa ter conhecimento. Bom eu vou listar as tools nas quias eu tenho conhecimento e já utilizei.

SASS / LESS

Bootstrap / Foundation

Responsive

Grunt / Gulp

Bower / Yoeman / Node

Webpack (estudando)

Angular / React (estudando)

Karma

Se você ver a lista que citei acima podemos numerar fácil mais 12 tools nas quais realmente eu já utilizo. Bom galera pra finalizar essa minha pequena analise sobre sobre esse tema, eu vou deixar uma frase que minha esposa sempre fala: 

“Se você não consegue dar bom exemplo dos que são da sua casa, com vai conseguir dar o exemplo fora de casa?”

Veja esse vídeo do canal Learn Code Academy sobre o novo Web Developer.

Chega de desculpas, que tal você documentar, organizar, e gerenciar  os componentes  ou bootstrap do seu projeto ? O Atomic Docs fornece uma interface gráfica para você manipular a criação dos arquivos parciais SCSS / LESS e HTML associados com seus componentes.

Gerenciamento de CSS em grande escala é difícil e muito mais complexo do que deveria ser. ITCSS é uma metodologia simples, eficaz, que ajuda a gerenciar e manter projectos CSS escala de todos os tamanhos. Essa metodologia irá te ajudar a resolver aqueles problemas antigos de hierarquia dentro do seu stylesheet UI à medida que cresce. 

Tês palavras podem definir bem o ITCSS: Herança, Escalável e Organização.

Veja os links abaixo para intender melhor como deixar o seu CSS escalável.

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

O BEM (Block Element Modifier) dar muito mais transparência e clareza em suas marcações. Os desenvolvedores dizem: como as classes se relacionam entre si, o que é particularmente útil entre partes complexas ou profundas do DOM. Por exemplo, se eu fosse pedir pra você apagar todas as classes relacionadas ao usuário no seguinte pedaço de HTML, quais os que você iria apagar?

Utilizando a metodologia BEM, absolutamente todas as classes em um projeto se encaixa em uma dessas categorias, razão pela qual o BEM é tão grande porque é incrivelmente simples e direto.

Segue alguns links:

https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

O número de Web Applications vem crescendo tão rapidamente, que as vezes se torna bem difícil de acompanhar. Espero poder ajudar um pouco a comunidade Web em especial os Front-end Developers, que por sinal os seus desafios vem crescendo a dia que passa. Como escolher o melhor Framework Javascript para o seu projeto? Confira como você pode resolver e enfrentar esses desafios de desenvolvimento.

Coleção de diversos tipos de fonts que podem ajudar em seus projetos e trampos. Via Github por  hraboviyvadim.

Grunt-Browser-Sync é o oficial plugin do BrowserSync para recarregar seu navegador em qualquer alterações de arquivo css. Ele pode criar seu próprio servidor ou ligar para um servidor existente. BrowserSync também recarrega automaticamentetodas as guias que dependem desse arquivo css que lhe permite trabalhar de forma integrada com vários dispositivos. Se você ainda não começou a usar browsersync a sua recomendado que você deve. 

Você edita seu código – CSS, HTML, JS, imagens etc – e o navegador é automaticamente atualizado com o novo código. Sem F5.

Instalação

Primeiro instale o plugin:  $ npm install grunt-browser-sync --save-dev

Para o primeiro exemplo, vamos considerar uma página html muito básico ligado a 2 arquivos CSS. Ao fazer uma mudança dentro do arquivo css, todas as guias com que html arquivo aberto deve atualizar o que nos permite alterar rapidamente as propriedades.

Adicione ao seu Gruntfile,js: 

module.exports = function(grunt) {  require('load-grunt-tasks')(grunt);  grunt.initConfig({    browserSync: {      bsFiles: {        src: 'css/*.css'      },      options: {        server: {          baseDir: './'        }      }    }  });  grunt.registerTask('default', ['browserSync']); };

Rodando o grunt pela linha de comando:

$ grunt Running "browserSync:bsFiles" (browserSync) task [BS] Access URLs: -------------------------------------       Local: http://localhost:3000    External: http://192.168.1.33:3000 -------------------------------------          UI: http://localhost:3001 UI External: http://192.168.1.33:3001 ------------------------------------- [BS] Serving files from: ./ [BS] Watching files...

Agora você pode abrir o mesmo url em vários navegadores, bem como visitar 192.168.1.33:3000 a partir do seu smartphone. Uma vez que você mudar alguma coisa dentro custom.css todas as guias irá recarregar. BrowserSync também tem a capacidade de sincronizar rolar, forma, atualizar as ações e também fornece uma interface de usuário do painel de controle.

Interface BrowserSync

Ver o histórico de URLs e reexecutá-las

Controlar que tipos de ações devem ser sincronizadas (cliques, scroll, formulários)

Debugar remotamente com weinre

Abrir uma nova aba em todos os navegadores

Forçar o reload de todos os navegadores

E outras opções

Links:

BrowserSync

BrowserSync + Grunt.js 

Google não é uma empresa convencional. A sua missão de levar a informação do mundo e torná-la universalmente acessível e útil-continua a evoluir. No ano passado eles começaram o design de materiais para ajudar designers e desenvolvedores abraçar uma expansão multi-dispositivo no mundo e  multi-screen. Com essas considerações em mente, eles estão animados para compartilhar uma nova identidade de marca que visa tornar o Google mais acessível e útil para os usuários, onde quer que possam encontrá-los.

É uma bonita coleção de cores, atualizado diariamente. Eles coletam os melhores esquemas de cores que você pode usar para qualquer coisa. Ao criar composições inteligentes e simples de vários tons, que oferecem belas esquemas de cores que trabalham em conjunto. Criado por: Gal Shir.

No dia 19 de agosto de 2015 foi um dia especial para o Bootstrap. Não foi só pelo seu quarto aniversário, mas depois de um ano de desenvolvimento, finalmente foi lançado a primeira versão alfa do Bootstrap 4.

Bom temos um monte de notícias para compartilhar com você, então vamos pular direto para ela.

O que há de novo?

Automatização de tarefas (Grunt)

Mover de Less para Sass.

Melhorias no sistema de grid (semanticas e mobile).

Opt-in flexbox (O futuro é agora).

Painéis para cartões (novos componentes).

Redefinições de HTML em um novo módulo, Reiniciar.

Novas opções de personalização da marca. ( gradients, transitions, shadows).

Abandonou o suporte IE8 e se mudou para unidades REM e EM.

Reescreveu todos os plugins de JavaScript.

Melhorias no tooltips e popovers.

Melhorias na documentação.

Controles personalizados de formulários, novas classes utilitários, margin e padding classes e muito mais.

A equipe do Bootstrap 4 vai precisar muito de sua ajuda para que o Alfa se torne um framework cada dia mais poderoso. https://github.com/twbs/bootstrap/tree/v4-dev

Veja como funciona a mágica das variáveis do SASS. Aproveite este simples post para saber essa diferença.

A mixin é uma directiva que permite definir várias regras dependendo de vários argumentos. Pense nisso como uma função que iria despejar o conteúdo CSS ao invés de retornar um valor. Você sabe que o código de repetição é ruim e você está familiarizado com o DRY (Do not Repeat Yourself) conceito. Se você não passar um argumento para um @mixin, você pode omitir os parênteses. Na verdade, você pode até mesmo omiti-los na definição @mixin.

Exemplo de mixin:

@mixin center {  display: block;  margin-left: auto;  margin-right: auto;} 

.container {  @include center;} 

.image-cover {  @include center;}

Resultado do CSS compilado:

.container {  display: block;  margin-left: auto;  margin-right: auto;} 

.image-cover {  display: block;  margin-left: auto;  margin-right: auto;}

OBS: Nota-se nesse caso tivemos código duplicado.

Os Placeholders são classes que não estão compilação do seu SCSS. Você pode escrevê-lo exatamente como uma classe, exceto que você prefixo com o símbolo %, em vez de um ponto. Além disso, ele segue as mesmas regras de nomeação que classes.

Exemplo de Placeholders:

%center { display: block;  margin-left: auto;  margin-right: auto;} 

.container { @extend %center;} 

.image-cover { @extend %center;}

Resultado do CSS compilado:

.container, .image-cover {  display: block;  margin-left: auto;  margin-right: auto;}

OBS: Muito melhor! A compilação aproveita selector agrupado sem repetir estilos. Assim sempre que você quiser evitar a escrever as mesmas propriedades mais e mais, sabendo que não vai mudar, é uma boa ideia para estender um placeholder. Isso resultará em uma folha de estilo compiladas muito mais saudável.