Tuesday, 3 October 2017

(WP) Before After: Código PHP + Javascript para mostra antes e depois das fotografias

Precisei criar um código para mostra o antes e depois da foto de um cliente.

Então fiz uma classezinha em PHP pra se usar como shortcode no wordpress.

Coloque essa classe em algum plugin seu, ou na functions.php do seu template.

Dessa forma o wordpress já estará com todos os arquivos necessários (css e js) e também terá criado o shortcode pra você usar onde quiser.

Como usar (shortcode)

[before_after before="http://seusite.com/wp-content/uploads/antes.jpg" after="http://seusite.com/wp-content/uploads/depois.jpg"]

Ajustes

Você pode ajustar o texto “BEFORE” e “AFTER” que aparece na renderização desse plugin e trocar para o português..
Insira o css abaixo no seu site.

twentytwenty-before-label:before{content:"Antes"}.twentytwenty-after-label:before{content:"Depois"}

Saturday, 25 February 2017

Vue-cli: Como criar protótipos rápidos com vuejs

Criar protótipos com vuejs e maneira super rápida é tão fácil… somente 4 comandos no terminal

npm install -g vue-cli

para instalar o vue-cli de maneira global. Se você já fez esse passo uma vez, não precisa mais para os próximos projeto

vue init webpack meuprojeto

para iniciar o projeto

cd meuprojeto && npm install

para ir para o diretório do seu novo projeto instalar as dependências

e por fim

npm run dev

para rodar seu projeto!!

 

Monday, 20 February 2017

Configurar ambiente de projeto com webpack e webpack-dev-server com auto refresh

Vamos configurar um ambiente de projeto, como se fosse ume esqueleto, com webpack e webpack-dev-server com auto refresh para melhor desenvolvimento.

Primeiro vamos ao terminal para instalar o webpack e o webpack-dev-server de maneira global

sudo npm install -g webpack webpack-dev-server

Agora navegamos até a pasta do nosso novo projeto e rodamos o “npm init” para iniciar o projeto e depois, abrimos o arquivo package.json e adicionamos as seguintes dependências

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1"
  },

logo depois de adicionarmos essas dependências (que incluem aí o babel e alguns loaders do webpack) nós rodamos no terminal o npm update para baixar as dependências necessárias.

Nesse passo configuramos o webpack.config.js com o source-map, que irá permitir que possamos debugar nosso projeto, com o plugin de auto refresh, com os loaders de babel, url e file loader, css, style e sass loader, além do devServer, que será o servidor de desenvolvimento que irá nos ajudar com o auto compile a auto refresh 🙂 .. mas de maneira simples, é só copiar esse código abaixo


webpack = require('webpack');

module.exports =  {
	devtool: 'source-map',
	entry: './src/js/main.js',
	output: {
		path: __dirname + '/dist',
		filename: 'app.bundle.js',
		publicPath: '/dist/'
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				loader:'babel-loader',
				query: {
					presets: ['es2015']
				}
			},
			{
				test: /\.(woff|woff2|ttf|svg|eot)$/,
				loader: 'url-loader?limit=100000',
			},
			{
				test: /\.(scss|sass)$/,
				loader: ['style-loader', 'css-loader', 'sass-loader'],
			}
		]
	},
	devServer: {
		// host: '0.0.0.0',
		inline: true,
		watchOptions: {
			poll: true,
			aggregateTimeout: 300
		}
	}
}

prontinho… dessa maneira a gente já tem um pré ambiente de desenvolvimento javascript, com webpack, common.js, debug e auto refresh

Instalando o lite-server e o browser sync e tenha o poder do autorefresh

Como instalar o lite-server e o browser sync para ter o poder do autorefresh e melhor produção dos seus projetos

Não é chato você estar escrevendo seus códigos e toda hora tem que dar reload na página?

Chega disso!

Entre no seu ambiente de produção pelo terminal e rode o seguinte código para instalar o lite-server

sudo npm -g  install lite-server

Dessa forma, ao ir na pasta do seu projeto e rodar o comando lite-server, o servidor já estará disponibilizando um endereço para você acessar o seu projeto.

Agora vamos fazer o refresh automático com o poderoso Browser Sync

Configuraremos um novo arquivo dentro da pasta raiz do projeto.

nano bs-config.json

E coloque o seguinte código no arquivo
{
  "host": "0.0.0.0",
  "watchOptions": {
    "usePolling": true
  }
}

Pronto.. agora rode o lite-server novamente e você estará conectado ao browser sync para seus refreshs automáticos

 

Para mais detalhes e instruções avançadas, vá até o scotch.io nesse artigo aqui

Thursday, 5 June 2014