Glauco Web

Fullstack ou Front-end Developer

Thu, 14 Jul 2016 19:05:58 -0400

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.

Atomic Docs

Fri, 24 Jun 2016 18:07:31 -0400

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.

Confira o case do Atomic: http://www.nickberens.me/atomic-docs/atomic-core/atoms.php

CSS escalável com ITCSS

Tue, 14 Jun 2016 09:44:11 -0400

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

https://willianjusten.com.br/organizando-seu-css-com-itcss/

Metodologia BEM - Como evitar problemas

Tue, 07 Jun 2016 10:32:09 -0400

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/

https://en.bem.info/

20 Framework de Javascript

Fri, 27 May 2016 13:56:47 -0400

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.

Link: http://code.tutsplus.com/articles/20-javascript-frameworks-worth-checking-out–net-22020

#frontend #dev #performance #optimization

Tue, 24 May 2016 15:56:14 -0400

#frontend #dev #performance #optimization

#frontend #dev #performance

Tue, 24 May 2016 13:13:47 -0400

#frontend #dev #performance

Como centralizar em CSS

Mon, 23 May 2016 18:29:29 -0400

http://howtocenterincss.com/?utm_source=html5weekly&utm_medium=email

Photo

Tue, 24 Nov 2015 15:25:18 -0500

Fonts - Download grátis

Thu, 24 Sep 2015 13:51:09 -0400

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

Link: https://github.com/coderiver/fonts

Pesquisa de ferramentas Front-End 2015

Fri, 11 Sep 2015 20:48:38 -0400

Uma pesquisa feita por 1044 desenvolvedores Front-End de todas as comunidades, mostrou um pequeno resultado de front-end que trabalham na indústria - portanto, não deve ser tomado como um evangelho, simplesmente como apontando para uma tendência.

BrowserSync - Ganhe tempo

Tue, 08 Sep 2015 23:01:48 -0400

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

Grunt-browser-sync

A evolução do Google

Tue, 01 Sep 2015 17:22:47 -0400

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.

Link: https://design.google.com/articles/evolving-the-google-identity/

Color Hunt

Tue, 01 Sep 2015 10:16:08 -0400

É 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.

Link: http://colorhunt.co/

Bootstrap 4 alpha

Tue, 25 Aug 2015 22:26:57 -0400

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

Link: Bootstrap 4 Alfa

Segredos do CSS. 10 coisas que você não conhece sobre o CSS.

Sat, 04 Jul 2015 13:30:12 -0400

Segredos do CSS. 10 coisas que você não conhece sobre o CSS.

SASS: Mixins ou Placeholder

Tue, 28 Apr 2015 18:07:08 -0400

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.

Bom, é sempre melhor pensar de forma positiva e evitar problemas futuros escrevendo um CSS de forma mais saudável.

Lorem Pixel

Mon, 27 Apr 2015 16:55:29 -0400

Lorem Pixum é agora Lorem Pixel.

É simples e absolutamente livre! Basta colocar o URL personalizado em seu código como este: <img src=“http://lorempixel.com/400/200” /> para o seu Placeholder de imagens funcionar. Essa dica vai especialmente para quem trabalha com design de web e vez ou outra precisa de alguma imagem de marcação.

http://lorempixel.com/

Porque usar LazyLoad?

Fri, 24 Apr 2015 16:43:08 -0400

Confesso que eu ficava meio preocupado de utilizar recursos de performance que dependia de Java Script, porém esse meu mito caiu e dei com a cara no chão. Recentemente pude ver o grande poder de performance que o LazyLoad trouxe para o meu projeto.

LazyLoad: Imagens compõem mais de 60% do tamanho de uma página de média, de acordo com Archive HTTP. Imagens em uma página web se tornaria uma vez que eles estão disponíveis. Sem carregamento lento, isso poderia levar a uma grande quantidade de tráfego de dados que não é imediatamente necessário (como imagens fora da janela de exibição) e tempos de espera mais longos. O problema? Os visitantes não são pacientes em tudo. Por carregamento lento, imagens fora da janela de exibição são carregadas somente quando eles seriam visíveis para o usuário, poupando assim tempo e dados valiosos. Como sempre esse é mais uma biblioteca open source fazer a comunidade web cada vez mais bonita.

http://ressio.github.io/lazy-load-xt/

Semantic UI

Wed, 22 Apr 2015 10:29:29 -0400

É um framework para criação de bons layouts responsive com um HTML super amigável. É uma ferramenta open source que conta com a ajuda da comunidade web.

“Desenvolva Lindas Páginas Web mais Rápido”

Semantic vem equipado com um intuitivo sistema de herança e um alto nível de variáveis de temas que o permitem completa liberdade de design.

Semantic possui integração com Angular, Meteor, Ember e muitos outros frameworks que ajudam organizar sua camada UI por toda a lógica de sua aplicação.

http://semantic-ui.com/