Olá Mundo

| #frontend #jekyll #sass #gulp #bower #svg

Introdução

Antes de começar esse primeiro post, deixa eu me apresentar, né?

Meu nome é Mateus de Sousa Medeiros, tenho 15 anos e sou Desenvolvedor Front End. Comecei esse ano à aprender as maravilhas desse mundo do Desenvolvimento Web, especificamente na área de Front End. Sou apaixonado pelo que faço e o que me deixa mais feliz ainda, é a facilidade em aprender cada dia mais.

Criei esse blog, primeiramente para testar o Jekyll e SASS, e segundo para ter um lugar onde posso compartilhar meu conhecimento. Pretendo escrever bastante coisa sobre a área de Desenvolvimento Web, com foco em Front End. Também darei dicas de novas tecnologias que estou utilizando, e técnicas de estudo que estão me auxiliando.

Qualquer dúvida que aparecer, não hesite em me mandar um e-mail ou comentar aqui.

Tecnologias utilizadas no Blog

Jekyll

O Jekyll é um gerador de páginas estáticas, perfeito para criar um blog sem a necessidade de um banco de dados. Escolhi ele por ser de fácil utilização e também pela facilidade de fazer o deploy no GitHub Pages ❤. Outro fator que foi de grande peso para minha escolha foi a sua utilização por grande parte dos Devs que eu sigo, o que facilitou na hora de criar o meu blog.

Se você ficou interessado por essa tecnologia visite o site do Jekyll ou também leia esse post do Willian Justen onde ele ensina algumas coisas sobre o Jekyll. Em breve farei um post explicando como utilizar essa incrível ferramenta. Aguarde!

SASS

Pré-processadores são incríveis ❤. O SASS foi o primeiro pré-processador de que eu ouvi falar, escolhi ele por ser de fácil aprendizado e também pela sua ampla comunidade. Abaixo segue um exemplo de um código escrito em CSS e depois ele escrito em .scss (formato de arquivo do SASS).

.elemento {
  background: #000000;
  color: #ffffff;
}

.elemento-2 {
  background: #000000;
}

Suponha que você queira alterar a cor do background dos dois elementos, você teria que alterar primeiro em .elemento e depois em .elemento-2. É aí que entra o SASS, esse mesmo código pode ser escrito assim em .scss:

$color-1: #000000;

.elemento {
  background: $color-1;
  color: #ffffff;
}

.elemento-2 {
  background: $color-1;
}

Na primeira linha eu criei um variável $color-1 e passei para ela o valor hexadecimal da cor preta: #000000, depois passei essa variável como o valor dos background dos elementos .elemento e .elemento-2. Depois se eu quiser alterar essa cor para azul, basta trocar o valor da variável $color-1, assim:

$color-1: #0015ff;

.elemento {
  background: $color-1;
  color: #ffffff;
}

.elemento-2 {
  background: $color-1;
}

Esse foi um exemplo básico de como pré-processadores agilizam o desenvolvimento, muitas outras coisas podem serem feitas. Se você ficou interessado em aprender sobre esse pré-processador recomendo esses posts no site do Tableless.

SVG

Desde que comecei a aprender Desenvolvimento Web, sempre ouvi falar do SVG, mas nunca parei para pesquisar sobre isso. Eu acompanho blogs de alguns devs, quando estava lendo alguns posts no blog do Willian Justen, achei um sobre SVG e parei para ler. Fiquei encantado com o SVG e resolvi utilizá-lo, os ícones das redes sociais e os botões de compartilhamento desse blog foram feitos em SVG.

Se você quiser aprender mais sobre SVG, recomendo esses tutoriais do Willian Justen.

Bower

Sempre utilizo alguma biblioteca ou um framework nos meus projetos, e atualizá-los na mão é um trabalho cansativo. Eu precisava de alguma ferramenta para automatizar esse processo, foi aí que eu descobri o Bower. O Bower é um gerenciador de dependências front end, ou seja você conseguirá facilmente gerenciar as dependências utilizadas no seu projeto. Isso facilita na hora de atualizar alguma biblioteca ou framework.

Se tiver interesse em aprender mais sobre essa ferramenta, recomendo esse dois posts: Bower na prática e Bower: O guia/tutorial definitivo.

Gulp

O Gulp é meu automatizador de tarefas favoritos, ele é rápido e de fácil aprendizado. Nesse blog, utilizei os seguintes plugins:

E meu arquivo gulpfile.js ficou assim:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var imageop = require('gulp-image-optimization');

// Minificar JS
gulp.task('uglify', function() {
  return gulp.src('assets/js/script.js')
    .pipe(uglify())
    .pipe(rename({
            suffix: '.min'
        }))
    .pipe(gulp.dest('assets/js'));
});

// Compactar Imagens 
gulp.task('images', function(cb) {
    gulp.src(['assets/img/*.png','assets/img/*.jpg','assets/img/*.gif','assets/img/*.jpeg']).pipe(imageop({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })).pipe(gulp.dest('assets/img')).on('end', cb).on('error', cb);
});

Se quiser aprender mais sobre o Gulp, recomendo esse post.

Conclusão

Esse foi um post para apresentar meu blog e explicar sobre as tecnologias que utilizei nele. Essa foi uma escolha pessoal para um projeto específico, não é uma combinação ideal para todos os projetos. Se tiver alguma dúvida ou sugestão, comente aqui ou envie um e-mail para mateus.sousamedeiros@gmail.com. Todo feedback é bem vindo. Assine meu RSS e não perca nenhum post.

Até mais!


Mateus Medeiros - Desenvolvedor Front End

Autor

Mateus Medeiros

Desenvolvedor Front End apaixonado por novas tecnologias.

Comentários