Instalando o Bittorrent Sync no Ubuntu Server

Instalar o Bittorrent Sync no Ubuntu é bem simples.

O bom do Sync é poder manter os projetos sempre sincronizados entre os membros da equipe, principalmente quando algum deles não tem acesso à rede local do servidor, como um home office por exemplo ou em uma empresa que tem duas sedes, como a que trabalho.

Sem mais delongas…

Adicionando o repositório.

sudo add-apt-repository -y ppa:tuxpoldo/btsync

Instalando o Bittorrent Sync

sudo apt-get update; sudo apt-get -y install btsync

Após a instalação aparecerá uma tela de configuração.

Recomendo fortemente que você faça isso nesse momento ou terá que fazer de forma muito complicada depois de forma manual.

A tela será mais ou menos como essa:

configuração-do-sync-no-ubuntu-server

 

Após isso siga o “wizard” e complete a instalação com as configurações de sua preferência.

Se por acaso você cometer algum erro, a dica que dou é desinstalar e instalar novamente, já que ainda não começou a utilizar.

Depois disso acesse o endereço do servidor dele e comece a compartilhar:

http://127.0.0.1:8888/

Se estiver em outra maquina na mesma rede é só ajustar o IP de acorco com o necessário.

É isso.

Boa sorte!

Localizar e substituir em grandes arquivos com sed

Hoje precisei localizar e substituir todas as ocorrencias de uma string dentro de um arquivo muito grande de um dump de um banco de dados MySQL de uma loja magento que mudou de domínio. Normalmente eu fazia isso com o Notepad++ que tem o melhor desempenho nessa tarefa em comparação com outros editores como Sublime Text, Dreamweaver, Bloco de Notas, etc. Porém alguma coisa estava saindo errado no processo e eu não estava conseguindo importar o banco. E como o arquivo era muito pesado não tinha possibilidade de eu encontrar a linha com erro e corrigir.

Então encontrei um comando que substitui lá no linux, chamado sed. Isso salvou minha vida e do cliente que estava atendendo.

O comando é bem simples, no meu caso, como queria mudar um domínio por outro, o comando que executei foi:

$ sed -i 's/dominioantigo.com/novodominio.com/g' database.sql

Como é uma expressão regular, recomendo escapar todos os símbolos presentes na string. No meu caso como o único símbolo era um ponto, e mesmo ele sendo um coringa nas expressões regulares, não achei que poderia prejudicar e no fim deu tudo certo, mas o correto seria eu ter executado este comando:

$ sed -i 's/dominioantigo\.com/novodominio\.com/g' database.sql

É uma solução prática para muitas tarefas, mas acho que o que mais acontece por aí que exige essa tarefa é mudança de domínio.

Instalando e ativando a extensão PHP mCrypt no Ubuntu

Alguns frameworks como o Magento precisam dessa extensão.

Mãos à obra!

Obter permissões de root

sudo su

Instalando as bibliotecas necessárias

apt-get install php5-mcrypt

Ativando a extensão

php5enmod mcrypt

Reiniciando o apache

service apache2 restart

Feito!

Configurando IP estático no Ubuntu Server

Para configurar um endereço estático no servidor seguiremos os passos:

Obter privilégios de root:

sudo su

Abrir o arquivo interfaces com um editor:

vim /etc/network/interfaces

Troque o texto abaixo:

auto eth0
iface eth0 inet dhcp

Por:

auto eth0
iface eth0 inet static
dns-nameservers 8.8.8.8 8.8.4.4
address 192.168.25.50
netmask 255.255.255.0
network 192.168.25.0
broadcast 192.168.25.255
gateway 192.168.25.1

Os endereços acima são baseados na minha rede, que é 192.168.25.xxx.

Você deve fazer de acordo com a sua.

Reinicie a interface de rede:

/etc/init.d/networking restart

Testando:

ping www.google.com

É isso.

Boa sorte!

Instalando a biblioteca cURL do PHP no Ubuntu

Alguns frameworks como a API do Facebook, sistemas como o Magento e vários outros precisam de algumas bibliotecas.

Passos para instalação:

1 – Obter permissões de root

sudo su

2 – Instalando as bibliotecas necessárias

apt-get install curl libcurl3 libcurl3-dev php5-curl

3 – Reiniciando o apache

service apache2 restart

Gerador de CSS em Cascata

Antes de falar do gerador, vou falar um pouco da construção do CSS de forma organizada e sugestiva.

 

  • Introdução

Cada programador tem sua forma de organizar seu código e seus troques adquiridos com a experiência.

Com o CSS temos que tomar alguns cuidados para que um estilo não conflite onde não deve.

Veja o código abaixo:



<body>

	<div id="topo">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
	
	<div id="conteudo">
	
		<div class="coluna-esquerda">
			<ul class="categorias">
				<li><a href="#">Categoria 1</a></li>
				<li><a href="#">Categoria 2</a></li>
				<li><a href="#">Categoria 3</a></li>
				<li><a href="#">Categoria 4</a></li>
			</ul>
		</div>
		
		<div class="coluna-direita">
			...
		</div>
	
	</div>
	
	<div id="rodape">
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
		<div class="direitos">Todos os direitos reservados</div>
	</div>

</body>


Note que temos dois menus no site, um no topo e outro no rodapé.

Podemos criar um estilo genérico com o nome .menu{} que afetará os dois e podemos criar estilos específicos como #topo .menu{} e #rodape .menu{}

A vantagem de nunca utilizar estilos genéricos para itens visuais é que uma hora podemos utilizar aquela classe em outra página e termos uma surpresa.

Então para evitarmos ficar criando .menu2{}, .menu3{}, .menu4{} é que utilizamos a técnica de cascata.

Eu aconselho utilizar estilos genéricos apenas para itens importantes, que podem se repetir em vários lugares e que não são vistos pelo usuário.

Como por exemplo:



* { margin: 0; padding: 0; }

.clear { clear: both; } /* escapa os floats */

.center { width: 990px; margin: 0 auto; } /* centraliza o conteúdo */

body { font-family : Arial; font-size: 12px; }

img { border: 0; } /* remove as bordas das imagens no IE */

a { text-decoration: none; } /* remove o underline */

li { ... } /* remove o estilo de lista */

input { ... }

textarea { ... }

select { ... }

button { ... }


Esses são os estilos padrões que eu coloco sempre que inicio um site.

Agora vamos aos estilos específicos para cada parte do site.

Vamos fazer a folha de estilos do HTML apresentado lá em cima.



#topo {}

#topo .menu {}

#topo .menu li {}

#topo .menu li a {}

#conteudo {}

#conteudo .coluna-esquerda {}

#conteudo .coluna-esquerda .categorias {}

#conteudo .coluna-esquerda .categorias li {}

#conteudo .coluna-esquerda .categorias li a {}

/* e etc... */


Nos estilos acima, os que são do menu do topo não afetarão o menu do footer.

 

  • Mas por que utilizar o CSS em cascata?

Eu não quero ensinar como construir um CSS, mas sim como fazer um de forma organizada.

Um mal costume de alguns programadores é fazer o código de maneira nada sugestiva como usar .m{} ao invés de .menu{}

Ou então .esq{} ou invés de .coluna-esquerda{}

Sei que é chato digitar o código inteiro e que como sou eu que estou fazendo o site vou saber o que aquele .m{} representa.

Mas será que daqui a 1 ano vou lembrar? E se outra pessoa tiver que dar manutenção no meu código?

Por isso que criar um código organizado e sugestivo é sempre aconselhável.

E para que não hajam desculpas de preguiça (como um dia eu tive),.

Eu vos apresento o meu gerador de folha de estilo em cascata.

Lembra aquele código HTML ali em cima?

Olha o CSS completo dele:



html body {}

html body div#topo {}

html body div#topo ul.menu {}

html body div#topo ul.menu li {}

html body div#topo ul.menu li a {}

html body div#conteudo {}

html body div#conteudo div.coluna-esquerda {}

html body div#conteudo div.coluna-esquerda ul.categorias {}

html body div#conteudo div.coluna-esquerda ul.categorias li {}

html body div#conteudo div.coluna-esquerda ul.categorias li a {}

html body div#conteudo div.coluna-direita {}

html body div#rodape {}

html body div#rodape ul.menu {}

html body div#rodape ul.menu li {}

html body div#rodape ul.menu li a {}

html body div#rodape div.direitos {}


Eu não precisei digitar uma única letra desse CSS.

 

  • Como utilizar o gerador?

É simples: Basta executar esse código no console do seu Firebug. (Sim, Firebug. Você vai entender o porque quando tentar no Chrome).

Obs.: Você precisa ter o jQuery funcionando na página.

function copiarCSS(){var aa=prompt('A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header');if($(aa).size()==0){if(confirm('Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?')){copiarCSS();} return;} var ba="";function entrar(aa){aa=$(aa)[0];var ca="";var da=$(aa).parents();for(i=da.size()-1;i>=0;i--){ca+=da[i].tagName.toLowerCase()+(da[i].id?'#'+da[i].id:'')+(da[i].classList.length>0?"."+da[i].classList[0]:'')+" ";}if(aa.tagName=='SCRIPT'||aa.tagName=='STYLE'||aa.tagName=='HEAD'||aa.tagName=='META'||aa.tagName=='LINK'||aa.tagName=='TITLE')return;ca+=aa.tagName.toLowerCase()+(aa.id?"#"+aa.id:"")+(aa.classList.length>0?"."+aa.classList[0]:"")+" {}";if(ba.indexOf(ca)==-1)ba+=ca+";";if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(';');saida="";for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');}console.log(saida);alert(saida);}copiarCSS();

Caso goste do meu código e adote ele, você pode criar um favorito no seu firefox com esse código.

É só adicionar javascript: no início do código.

Ficaria assim:

 

  • Google Code do projeto

Link: http://code.google.com/p/jquery-fred-css-cascading-creator/source/browse/#svn%2Ftrunk

 
Espero ter contribuído um pouco com a internet.