Saturday, 6 May 2017

Wednesday, 3 May 2017

Parsing (crawling) (scrapping) imagens do post de um arquivo XML exportado do WordPress

by suporte Add Your Comment

Eu estava precisando puxar as imagens de um wordpress que estava num servidor pra outro. Porém eu não tinha acesso ao FTP para migrar as imagens que o cliente anexou ao post.

Com a própria ferramenta de exportação do wordpress eu criei um XML onde viria todo o conteúdo pra mim, mesmo assim, não teve jeito dessa ferramenta de migração/exportação do wordpress me entregar essas imagens, mantendo o endereço do site antigo e as imagens ainda hospedadas lá.

Por isso eu primeiro criei um script para baixar as imagens pro meu servidor


$xml = simplexml_load_file('posts.wordpress.2017-05-03.xml');
$items = $xml->channel->item;

//regex do filter images
$regex = '/src="(.*?)"/';


foreach($items as $item) {
	
	//get encoded from xml exported wordpress file
	$body = (string) $item->children('http://purl.org/rss/1.0/modules/content/')->encoded;
	
	//find images
	preg_match_all($regex, $body, $matches);

	foreach ($matches[1] as $url) {
		// i'll output line by line that url for you
    	// echo $url . "\n";
    	// i'll append this url in a list file
    	file_put_contents('list.txt', $url . "\n", FILE_APPEND | LOCK_EX);
	}
}

// I need wget installed in your terminal
system('wget -x -i list.txt');

rodei esse script acima pelo ssh com o seguinte comando

php download-images-wp.php

onde download-images-wp.php é o nome do arquivo que coloquei o código acima ok?

Depois desse script eu precisei rodar outra rotina no banco de dados pra poder mudar o dominio.

UPDATE wp_posts 
SET post_content = REPLACE (post_content, 'www.dominioantigo.com', 'www.novodominio.com');

pronto.. agora eu baixei todas as imagens que tinha no outro servidor e atualizei o banco para apontar para meu novo dominio.

Saturday, 25 February 2017

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

by suporte Add Your Comment

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

by suporte Add Your Comment

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

Criar gif de um video screencast capturado pelo quicktime

by suporte Add Your Comment

Criei um script para criar meus gifs de videos screencast capturados pelo QuickTime no OSx

Chamei o script de movtogif e coloquei esse código dentro


movtogif(){
ffmpeg -i "$1" -vf scale=800:-1 -r 10 -f image2pipe -vcodec ppm - |\
convert -delay 5 -layers Optimize -loop 0 - "$2"
}
movtogif $1 $1.gif

Como usar?

movtogif input.mov

Dependencias

  • ImageMagick
  • FFMpeg

OSX / Brew

brew install ffmpeg
brew install imagemagick