Comigo:

Mudei de emprego, sai da Internet Brasil onde trabalhava como web design e dei foco ao front-end entrando para GetNinjas. Uma mudança grande no rumo das coisas, no geral está sendo ótimo, ainda tenho muito á dizer sobre trabalhar em startup, mas por enquanto fica por isso.
Comparando o primeiro começo com agora… muita coisa mudou:

Primeiro começo.

Muita coisa mudou

Agora pretendo voltar a fazer posts no blog, só que com mais conteúdo e objetivo. O objetivo é levar conhecimento ao máximo de pessoas e aprender com o retorno disso.

Com a profissão Front-end:

Parece que o javascript está mais pop do que nunca, e os eventos estão dominando tudo. Mais empresas anunciando vagas para front-end (não mais para web design, web master, desenvolvedor web…), a coisa está menos bagunçada.

Veja todos os eventos.

O que eu quero para 2013?

Como todos: sucesso, é claro.

Agora em itens (vou esquecer alguns…):

• Aprender mais rails.
• Aprender mais javascript.
• Publicar meu mobile app.
• Participar de projetos open-source.
• Participar mais de eventos em geral.
• Ler mais livros.

Claro que tem mais coisas, no geral é isso.

A todos meus amigos e pessoas que me apoiam fica aqui o meu MUITÍSSIMO OBRIGADO.

Este projeto tem como idéia criar um padrão organizado e seguro para o desenvolvimento de plugins em jQuery.

O interessante também é que tem um brasileiro no projeto, é o Zeno Rocha que trabalha atualmente no globoesporte.com e está sempre ativo por ai ajudando e compartilhando conhecimento.

Vai servir pra você que está começando e para quem já tem um conhecimento avançado mais ainda!
Só de ler os comentários já se entende e justifica cada linha.

Ta mais que explicado!! E agora em português também!

Abs!

Para quem não sabe, vou começar a realizar posts por lá (também). Comecei falando sobre web responsive e ficou muito interessante, você vai saber exatamente do que se trata e como aplicar em seus projetos!

Acesse o post e deixe seu comentário!

Mais uma vez obrigado!!!

O que é o LESSCSS?

The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js and Rhino.

É mais ou menos assim, ele funciona como um CSS Dinâmico que estende o css adicionado funcionalidades como variáveis e funções tudo de uma maneira muito simples e visualmente fácil de entender. Ah, ele funciona nos dois lados, cliente-side e server-side… Isso vamos deixar para explicar melhor depois.

O que ele faz?

No próprio site do LESS ele da um exemplo muito simples e claro, vamos observar:

Seu código css normalmente é assim:

#header { color: #4D926F; }
h2 { color: #4D926F; }

Observe que a cor ‘#4D926F’ foi repetida, com o LESS ficaria assim:

@color: #4D926F;
#header { color: @color; }
h2 { color: @color; }

Legal né? É possível criar uma variável de cor e chama-la toda vez que for necessária.

Que mais?

Mais tudo isso aqui que tem no site deles. Você pode fazer identação no css, chamar uma classe dentro de outra classe (por exemplo você cria uma classe .borda e chama ela em todas as outras classes que quiser a borda), define variáveis e parâmetros e muito mais!

Como usar?

Existe varias maneiras de começar a usar o LESS em seus projetos, vamos ver algumas e em seguida a solução que encontrei.

1) Include de um arquivo .js que interpreta a extensão .less:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Aqui chamamos o arquivo styles.less e o less.js que faz a leitura, não gosto pois além de não usar a extensão .css, caso o .js dê problema ou não carregue você perde toda a personalização do css.

 2) Server-side

Aconselho seguir no próprio site.

3) Compilador (Forma que eu uso)

Hoje eu uso um compilador que se chama SimpleLESS, para mim foi a melhor maneira de usar o .less e não ter mudanças no meu projeto, eu uso o .less localmente e ele salva já renderizado em um arquivo com o mesmo nome e na mesma pasta mais com a extensão .css e no seu HTML fica igual, chama-se o arquivo .css.

Bom, isso foi um resumo breve do uso do LESS e como ele pode te ajudar!

Foi uma palestra sobre design e percepção, e pra quem perdeu, em seu blog tem tudo sobre o que rolou por lá, vale apena conferir o slides e também o post!

Ele roda no Coda, textarea, Dreamweaver, Notepad++  e muitos outros, você encontra uma lista no site.

Vamos ver como funciona:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Instalando (Notepad++):

Baixe o plugin para Notepad++

E ai fica fácil, é só jogar na pasta Plugins do notepad++ e resetar o programa

Vamos pegar um exemplo de HTML:

</pre>
<ul>
	<li><a></a></li>
	<li><a></a></li>
	<li><a></a></li>
	<li><a></a></li>
	<li><a></a></li>
</ul>
<pre>

Usando o zen coding isso pode ser feito com uma simples linha:

ul>li*5>a

Você pode também fazer a estrutura inicial de um HTML usando apenas:

html:xs

Para saber qual comando faz a “transformação” como no video, você encontra no site ou então no próprio programa que estiver usando.. no caso do Notepad++ é bem fácil:

Ah, outra coisa é a possibilidade de alterar os comandos e edita-los com achar melhor, no meu por exemplo, troquei o comando para ” Ctrl + ‘ ”
Para fazer isso basta localizar o arquivo Zen Coding.js que fica na pasta NppScripting > includes (isso já dentro de Plugins na pasta do notepad++).

Quando for feita alguma alteração no arquivo o Notepad++ precisa ser reiniciado. Faça suas alterações e seja feliz!

Para saber TODOS os comandos que o Zen Coding te possibilita fazer é só acessar o Wiki deles.

É isso, boa sorte!

Helping you build a solid stylesheet foundation based on your markup

É nada mais que ‘ajudar você a construir a estrutura do seu css de acordo com a marcação do seu html‘.

A ideia é você fazer um upload do seu html marcado e em seguida baixar o arquivo css organizado de acordo com sua marcação no html. Ele gera um modelo de CSS que contém todos os elementos HTML, classes e IDs definidos em seu html.

O site informa também que  o projeto foi criado por dois estudantes Kyle Gawley e Jordan Henderson.

Um termo pouco visto, o qual talvez você não saiba o significado, mas que com certeza já visualizou em diversos games. O tal “parallax” é na verdade uma forma de enganar nosso cérebro utilizando objetos de tamanhos diferentes e com velocidades diferentes para criar um aspecto de profundidade.

De: http://www.tecmundo.com.br/1117-o-que-e-parallax-.htm#ixzz1l830K2Ne

Onde que eu entro nisso?

Bom, podemos usar isso em nossos projetos web, fazendo assim alguns “efeitos” que vão dar essa sensação de profundidade para o usuário. Ai entra o jParallax, um javascript que faz isso com tranquilidade.

Vamos entender que o jParallax faz o papel de transformar elementos em absolutos (posição) e com a ajuda do mouse faz a brincadeira com o posicionamento desse elemento com javascript. Claro que tem muito mais opções e até uma explicação mais detalhada do que é a ferramenta no site do plugin, e você pode visualizar exemplos do plugin rodando.

Se você já fez algo com jParallax ou sem ele usou Parallax em algum projeto, comente com o link!

Abs

Fica a dica pra quem quer personalizar avisos com facilidade e também com uma bela estilização que vem por padrão.
Ótimo para usar como padrão em projetos onde a qualquer momento você pode chama-lo e inserir uma informações simples de forma bonita e fácil!

Primeiro uso

Peguei aqui o primeiro exemplo do Simples Modal, no site deles existem outros exemplos e explicações sobre todas as formas que você pode usa-lo.
Você pode usa-lo para mensagens de alerta, janelas com mensagens, confirmações e lightbox.

Exemplo de alertas:

$("Elemento").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Alert button"});
      SM.show({
        "title":"Título",
        "contents":"Sua mensagem..."
      });
});

Ao clicar no “Elemento” definido a função exibe o alerta. “Elemento” pode ser uma ID (#elemento) ou CLASS (.elemento). Para editar o conteúdo do alerta é simples, basta editar a propriedade ‘title’ e ‘contents’.

Fácil não?

Para mais exemplos de uso, acesse a página do plugin.

Acontece que temos varias formas de trabalhar com formulários de maneira que não dê muito trabalho e bem menos problemas.

Apresento aqui uma ferramenta que pode te ajudar com os benditos formulários!
O Ideal Forms, faz a estilização nos inputs, selects, checkbox e radios!

Pelo que vi é muito fácil de personalizar e deixa-lo com o estilo do seu projeto, usando o mesmo código e apenas adaptando como desejar. No site informa que tem suporte a IE7+, ou seja, esqueça IE6 (Já ta na hora).

Vale testar, também vale muito  estudar a forma com que ele trabalha com os formulários.

Abraço!