Postagens

Usando o gulp para fazer o deploy da sua aplicação

Fala pessoal, desculpa por ficar tanto tempo sem fazer uma postagem mas é porque estou com muitos projetos em andamento. Mas vamos a dica de hoje, depois de usar o Gulp no desenvolvimento, podemos também fazer uma task de deploy, utilizando a junção do gulp-util e gulp-shell, vamos ao exemplo para elucidar. gulp deploy --mensagem "Mensagem do commit no git" É o comando que iremos utilizar para fazer o deploy e adicionamos a seguinte task no gulpfile.js: /*Carregamento das váriavies*/ var gulp = require('gulp'); var shell = require('gulp-shell'); //Pacote utilizado para executar comando shell na task var util = require('gulp-util'); //Pacote utilizado para pegar a variável "message" passada como parâmetro gulp.task('deploy', function (){ var variavel = 'mensagem'; /**Verifica se a variável foi passada como parametro*/ if(util.env[variavel] === undefined){ util.log(util.colors.red('Não foi…

Utilizando o Gulp para facilitar seu desenvolvimento front-end

Olá!

No último artigo eu falei sobre o live-reload, que ficava "escultando" uma pasta e atualizava o seu navegador padrão quando salvasse algo na pasta que ele tiver rodando, com isso comecei a utilizar SASS através do SCSS, pois é com o CSS normal, depois precisei automatizar essa tarefa de compilação do SCSS para CSS e achei o GRUNT e o GULP, eles são task runners, ou seja, eles executam uma ou várias ações para ti, chamadas de "Task" de forma automatizada através de um comando seu.

Depois te tudo isso escolhi o Gulp e ele pede um arquivo de configuração chamado de gulpfile.js, o que estou usando atualmente é esse:

/*Carregamento das váriavies*/ var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var mocha = require('gulp-mocha'); var sass = require('gulp-sass'); var gutil = require('gulp-util'); /** Task para dar reload no browser*/ gulp.task('browser-sync'…

Atualizando o navegador assim que salva arquivos css, js e html (live-server)

Fala galera! desculpa ai ficar tanto tempo sem postar nada, estava muito aprendendo alguns conceitos novos e pretendo logo fazer alguns artigos sobre eles.

Pesquisando sobre es6-module achei uma ferramenta chamada live-server, que ela fica "escultando" as alterações de arquivos com extensões js, css e html e atualiza o seu navegador padrão assim que identifica a alteração. É necessário ter o NPM instalado, para fazer a instalação deste modulo.

Então instala ele de forma global com o seguinte comando:

npm install -g live-server
Depois só executar o comando live-server  dentro da pasta que está desenvolvendo que ele fará as alteações no navegador.


É isso ai galera, espero ter ajudado vocês, qualquer dúvida é só comentar!

Lazy load no Angular using Jquery

Fala galera, estou fazendo uma nova versão do portal da empresa usando angularjs e estava com bastante dificuldade de utilizar o padrão Lazy load no angular, identifiquei diversas soluções utilizando RequireJS e ocLazyLoad, mas achei muito código e complicado a forma de fazer então depois de ler a documentação do $routeProvider identifiquei que tinha a opção 'resolve', que executa um objeto que tem uma função antes da renderização da route, com isso pode utilizar a função do jquery, para dar um load no  controller antes da renderização da tela utilizando o comando '$.getScript()'.

Vamos ao exemplo para melhor entendimento.

app.js
/*Criação do Módulo*/ angular.module('app', ['ngRoute']); app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider){ /*Criação de uma forma mais sintetizada do service do $controllerProvider.register*/ app.registerCtrl = $controllerProvider.register; …

Efeito natalino de flocos de neve com canvas

Hou hou hou galera, natal está logo ai, e queria desejar tudo de bom para todos e desejar um 2015 melhor que 2014.

Estava precisando fazer alguma coisa no portal da empresa e achei esse efeito bem legal


Basta somente adicionar o canvas depois do body

<canvas id="snowball"></canvas>
O criar no onload da pagina a seguinte chamada

window.onload = function(){ //canvas init var canvas = document.getElementById("snowball"); var ctx = canvas.getContext("2d"); //canvas dimensions var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; //snowflake particles var mp = 25; //max particles var particles = []; for(var i = 0; i < mp; i++){ particles.push({ x: Math.random()*W, //x-coordinate y: Math.random()*H, //y-coordinate r: Math.random()*4+1, //radius …

Controlando as pageviews do Google Analytics com Angularjs

Eae pessoal, estava com problema que não conseguia mais controlar as pageviews do meu novo site com o uso do angular, já que ele não redireciona quando alteramos uma rota, simplesmente ele altera todo o conteúdo de um determinado contêiner, deste modo esta procurando como fazer isso, e na verdade a solução é bem fácil.

$scope.$on('$routeChangeSuccess', function(next, current){ ga('send', 'pageview', {page: $location.path()}); });
Só de olhar já dar de ter uma noção, mas vamos explicar né? Criamos primeiro um listener com o $scope.on no evento $routeChangeSuccess, que é o evento quando é terminado a alteração da route e neste evento chamamos um método da api do Analytics, que manda o dado da pageview com a url atual, que é o que o $location.path() faz.

É isso ai galera, cometem compartilhem, qualquer dica ou sugestão de alguma coisa que gostariam de saber é só deixar ai nos comentários ;)

Fonte: https://blog.nraboy.com/2014/11/tracki…

Menu off-screen somento com CSS

Fala galera, estava qui vendo desenvolvendo um menu off-screen somente com o CSS e descobri 2 artigos bem legais para compartilhar, o primeiro que me demonstrou a ideia foi o do Austin Wulf.


Que de forma bem simples podemos fazer um menu bem legal e o melhor de tudo, sem usar o javascript.

A grade sacada no menu é a utilização de um input checkbox com a propriedade "checked", e a utilização de uma label com o atributo 'for', basicamente a label com o atributo "for" quando clicada ela altera o checkbox para "checked" e com isso ele faz a transição do elemento que ele quiser que estiver posterior a um checkbox  "checked" utilizando o selector "~" ou "+" do CSS, bem simples não?

Tem também outro artigo da ZURB University, que demonstra vários outros tipos.

Por hoje é só pessoal!