Rafael Fidelis

I write about programming and random things

Variáveis Com CSS No Webkit

| Comments

Essa novidade não vai parecer tão tentadora para quem já está acostumado a utilizar CSS Preprocessors como o LESS ou SASS entre outros. O Webkit que é uma das mais poderosas e melhores ’layout engines’, e que está presente em vários navegadores em diversos dispostivos , como por exemplo o Chrome e Safari, e nos navegadores do iOS e Android, está implementando suporte nativo para variáveis no CSS, e provavelmente os demais ‘layouts engine’ como o Gecko(Firefox) e Presto(Opera) também deve implementar algo do tipo rapidamente.

Sintaxe

A sintaxe ainda não é tão bonita e prática como a do LESS ou SASS, porém é bem semântica , e mantêm o padrão da sintaxe do CSS. Abaixo um exemplo de declaração de 2 variáveis , color e border-color :

1
2
3
4
5
/* Todas as variáveis definidas em :root são globais */
:root {
  var-color: #333;
  var-border-color: #fafafa;
}

Agora para obter os valor dessas variáveis, utiliza-se o método var() passando o nome da variável, ou então inserindo o prefixo $(cifrão), como se fosse uma chamada a uma variável no PHP ou uma variável global em Ruby, por exemplo:

1
2
3
4
5
.box {
  background-color: whiteSmoke;
  color: var(color);
  border: 1px solid $border-color; 
}

A recomendação da w3c para utilização de variáveis, é inserindo o prefixo $ antes do nome da variável, a notação var(variavel) é recomendada somente para casos em que existem variáveis não definadas , e então possam receber valores padrões, a sintaxe nesse caso seria:

1
2
3
4
.box {
  /* se a variável backColor não tiver sido instanciada, ou for invalida, recebe o valor #ddd */
  background-color: var(backColor, '#ddd');
}

Webkit

O Webkit utiliza um vendor prefix para a declaração e acesso as variáveis, como é demonstrado abaixo:

1
2
3
4
5
6
:root {
  -webkit-var-color: #333;
}
.box {
  color: -webkit-var(color);
}

Apesar do LESS e/ou SASS atenderem a todas(todas!) as minhas necessidades quando o assunto são folhas de estilos, creio que essa nova implementação será muito bem vinda!
Você pode conferir mais exemplos de utilização das CSS Variables no Test Suite do Webkit.
Para mais informações, você também pode visitar a especificação da W3C , nessa página você tem acesso a informação sobre escopo de variaveis, entre outros.

Fontes:
http://www.phpied.com/css-variables/
http://www.red-team-design.com/css-variables

Hospedagem Heroku E GoDaddy

| Comments

Heroku

A Heroku é um cloud que oferece Plataform as a Service(PaaS) para várias linguagens de programação e frameworks, como Ruby(Rack based apps), Python, Node.js. Estou hospedando esse site usando o plano free de hospedagem da Heroku, com o Zeringo DNS como add-on para mapear o dominio.
(OBS: Apesar do Zeringo DNS ser um add-on free, é necessário ter um cartão de credito cadastrado na Heroku para utilizar o serviço)
O processo após registrar seu domínio, que no meu caso foi feito através do GoDaddy e mapea-lo pelo Zeringo DNS é um processo muito simples, o primeiro passo é instalar a gem do Heroku, que oferece um CLI para podermos acessar o serviço diretamente do terminal.

gem install heroku

Após a instalação da gem do Heroku, você deve criar sua app na plataforma da Heroku utilizando o CLI, e depois enviar-la para o servidor da Heroku via um git push. Para mais detalhes sobre processo de criação da app, veja a documentação do site da Heroku. Assumindo que você já tenha feito os passos acima, agora você deve adicionar o add-on e depois adicionar o seu domínio, novamente no terminal , digite :

heroku addons:add zerigo_dns:basic
heroku domains:add www.seudominio.com

Configurando o DNS

Através da interface de gerenciamento do seu domínio no Godaddy.com, procure por ‘DNS Manager’, clique em ‘Launch’ e você será redirecionado para a tela de gerenciamento de domínios.
Nessa página, deixe sua configuração conforme a imagem abaixo :
Heroku GoDaddy domain configuration É importante notar os endereços de IP utilizados, verifique a documentação para ter certeza que os IP’s ainda são os mesmo da data de publicação desse post. Agora é só aguardar algumas horas(algumas vezes menos de 1 hora) e depois visitar o domínio do seu site, que ele deve ser mapeado corretamente para o proxy da heroku, ou você pode usar o terminal para verificar se o ip está funcionando corretamente, utilizando:

host www.seudominio.com

É isso, o processo é bem rapido e também bem simples!

Erro TitaniumStudio - Ubuntu 12.04

| Comments

Titanium Studio on Ubuntu 12.04(Precise Pergolin)

Recentemente, após instalar o Titaniu Studio no Ubuntu 12.04 (Precise Pergolin), ao rodar a IDE(…, também odeio IDE’s) o seguinte erro ocorreu :

Launching 'Aptana Portal' has encountered a problem.

An internal error has ocurred.
Details:
No more handlesNative code library failed to load. (java.lang.UnsatisfiedLinkError: 
/home/fidelis/.apps/titanium/plugins/com.aptana.swt.webkitbrowser.linux.x86_1.0.0.1334860664/os/linux/x86/libcefjni.so: libjpeg.so.62: .... )

A solução para esse problema pode ser encontrada neste comentário .
Para contornar o problema, basta instalar a lib ‘libpjeg62’ da qual o Titanium depende, isso pode ser feito facilmente pelo terminal, usando:

sudo apt-get install libjpeg62

Após a instalação, execute novamente o TitaniumStudio e certifique-se que o erro foi-se!

Hello World!

| Comments

Hello, Everybody!

This is my blog, i’m using Octopress as blog framework!
Here I will post my programming notes :

Hello, World
1
 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33].collect(&:chr).join