Randal Maia

Blog de desenvolvimento front-end. Mercado, tendências, novas tecnologias e o que estiver acontecendo de legal na cena HTML5, CSS3 e Javascript

[randalmaia]

Resumo BrazilJS 2013 - Segundo Dia

Para conferir o primeiro dia, de uma olhada no resumo da BrazilJS 2013 - Primeiro Dia

Performance === UX

Redefiniu performance, deu dicas de performance para mobile. Não achei sua definição de performance muito diferente da definição do Marcel Duran no dia anterior, por caminhos diferentes, os dois são focados no usuário final.

Fiquei impressionado com o reposicionamento do Blackberry 10 no mercado, talvez tarde demais, mas achei bem interessante, ainda não conhecia. Sorteou uma Z10 pra galera :D. Demian falou para não pensarmos que ele estava ali, somente porque a Blackberry tinha comprado, mas os primeiros 5 slides, antes mesmo de falar dele, eram sobre a empresa e seus produtos.

Slides de Demian Borba no BrazilJS 2013

IE 11, quebrando barreiras

Muito simpático,Josh Holmes, veio até o BrazilJS nos apresentar o IE11 e seu 'Developer Tools'. Deu uma palestra bem técnica sobre performance, explicou como o browser realmente interpreta.

Slides em Breve

API Sex, onde vivem, como se reproduzem

Foi bem conceitual a palestra do alganet nesse BrazilJS, falou sobre o 'merge' das APIs dentro dos sistemas. Adaptação de funcionalidades dentro do ecossistema(software), fez uma relação aos animais que foram se adaptando ao longo do tempo.

Slides em Breve

O fantástico mundo do Javascript

Apresentado como prato da casa sim prato, o JC Emermesmo pode descrever sua palestra.

Slides do Jean Carlo Emer no BrazilJS 2013

Workers of the web e o melhor palestrante do evento

Thibault Imbert, foi carisma em pessoa, comunicador nato. Chamou @leobetosouza no palco, fez e aconteceu, aposto que ninguém dormiu na palestra desse cara.

Falou sobre Workers, o multi-thread do javascript, é uma funcionalidade bem legal, Thibault explicou as melhores práticas para se usar workers. O que eu mais gostei foi a explanação sobre o 'budget' do browser para animações, não conhecia.

Slides do Thibault no BrazilJS 2013

NodeJS, the good, the bad and the ugly

Outro mito, Caridy 'Patinho' do Yahoo fala bem português, curti o Brasil. Falou sobre NodeJS, curti a visão dele sobre a plataforma.

Slides em breve.

Stoyan reactive Javascript

Os organizadores deixaram só as lendas para o final, Stoyan ensinou javascript pra muita gente com seus livros, é o Maujor gringo. Chegou mostrando seu limitado e engraçado vocábulario em português. "Quero cerveja gelada", "Mais cerveja", "Eu bebo muito", assim quebrou o gelo e apresentou o React do Facebook.

Particularmente não gostei do 'html' dentro do código, ele falou que sentiríamos isso, mas nao convenceu. No final perguntaram pra ele o que ele achava de AngularJS e ele não conhecia. Ficou no ar.

Slides em breve.

Programming Style and Your Brain

Gênial e polêmico. A palestra não é nova, mas ao vivo é diferente.

Slides do Douglas Crockford no BrazilJS 2013

Até 2014...

[randalmaia]

Resumo BrazilJS 2013 - Primeiro Dia

Nos últimos dias, aconteceu a BrazilJS 2013 e o lema do evento foi "Afude", mas qualquer outro elogio extremamente positvo cairia bem.

Organização impecável, check-in rápido, segurança, tradução simultânea, brindes, patrocinadores de altíssimo nível e os nomes que fazem o Front End brasileiro com você, sentados ao seu lado assistindo o que cada palestrante tinha para falar.

Builds divertidos

Com um pouquinho de atraso, Maurício Wolf, abriu o evento. Mostrou como eles resolveram a automação de build com NodeJS lá no Dell.com. A forma como eles resolveram o problema, não ficou tão semanticamente perfeita. Ele explicou que por algumas incompatibilidades com o IE e pela dificuldade de se inserir uma nova cultura em uma empresa já consolidada, foi aquela a melhor forma que eles conseguiram atingir. Maurício estava bem preparado para palestrar, foi bem.

Slides da palestra do Maurício Wolff no BrazilJS 2013

Hora do Cofee Break

Learning to Fly

Hora do mito, Angus (Twitter) não é um comunicador nato, mas tecnicamente foi uma das melhores palestras do evento. Explicou como resolveram a questão de reuso no Twitter, herança no Javascript. Mixins são como extensões de objetos. É assunto para um dia inteiro, vale muito a pena.

Slides da palestra do Angus Croll no BrazilJS 2013

Perfomance

Hora da performance. Mas por que performance é importante ? É Dinheiro.

Marcel contou um pouco da sua história com performance, desde o Yahoo e como entrou no projeto do Yslow. Após isso entramos no case de Performance do Twitter. Ele mostrou o que acontece quando perdemos features do sistema, sim o usuário fica puto. Nos mostrou como medir performance dentro do Continuos Integration, montar gráficos e métricas de performance, módulo do Yslow para NodeJS e teste de perfomance no PhantomJS. Foi bem completo, material pra passar meses estudando.

Slides da palestra do Marcel Duran no BrazilJS 2013

Modern front-end workflow

O GoogleMan que controlou as luzes do palco no ano passado, esse ano veio nos mostrar que o Booostrap 3 saiu como funciona o Workflow com Yeoman(Eu tenho um post ensinando a instalar o Yeoman aqui no blog).

Agora junto com Grunt e Bower, você consegue controlar dependências tanto no front end como no Backend. Outro fato interessante, foi que ele usou um Chrome OS versão DEV para fazer a apresentação.

Finalizou a manhã com um release novo do Yeoman, fez um hangout com o Addy Osmani e liberaram o release ao vivo, aparentemente não deu tudo certo mas a ideia foi muito boa, levou a galera ao delírio.

Slides em breve.

Build Pack Adventure Time

Esse @zeke. parece legal, me lembrou o @fat.

Zeke veio nos apresentar a Heroku e o que são buildpacks. O mais importante da palestra dele foi que deixou claro que o NodeJS é prioridade para a Heroku, muito bom.

Slides da palestra do Zeke no BrazilJS 2013

Addy Osmani Tupiniquim e WebComponents

Zeno Boy veio com o futuro. WebComponents é uma especificação com cheirinho de nova. Na minha opinião tem um potencial incrível, tanto positivamente com negativamente, vamos ser positivos.

Foi bem ao especificar Shadow DOM, templates, Import, Decorators e Custom Elements. E no final deixou a plateia motivadíssima, como sempre.

Slides da palestra do Zeno Rocha no BrazilJS 2013

The Web is your realm. Mozzila Evangelist

Robert Nyman falou bastante sobre Open Web e como isso interage dentro do Firefox OS, foi bom conhecer mais sobre os ideais desse novo sistema operacional. Apresentou as APIs do sistema e a manipulação da segurança dentro disso.

Slides da palestra de Robert Nyman no BrazilJS 2013

Web Developer == Firefox OS Developer

Angelina veio fechar o dia mostrando como é fácil desenvolver um aplicativo para Firefox OS, desenvolveu ali no palco, uma aplicativo que buscava todos os tweets com a tag #brasiljs , levou a galera do twitter para o telão. Foi divertido.

Código desenvolvido pela Angelina ao vivo

E assim foi o primeiro dia.

Depois todos partiram pra churrascaria, cerca 150 participantes lotaram o estabelecimento, networking e carne de primeira.

Esteve lá ? Perdeu? Curtiu mais que palestra ? Comentem

[randalmaia]

Link do Dia - Ícones animados com Livicons

Uma coletânea de font-icons animados. Ícones com feitos com fontes, tem o poder de escalar e serem vistos em vários devices. Bom proveito.

http://livicons.com/

[randalmaia]

Link do dia - Redesign do Squared por JackMorgan

Squared é um plataforma de cursos de marketing digital, Jack resolveu fazer em seu tempo livre um redesign de toda a marca do Squared.

Pra quem gosta de saber os porquês do design, entender o que infleunciou cada decisão em todo o processo de design, é um belo post.

Leia e comente: Redesign do Squared

[randalmaia]

O que um dev pode aprender em um evento de gestão?

Semana passada rolou a ExpoGestão 2013 aqui na cidade, consegui uns convites com o pessoal do trabalho e resolvi ir. Surpreendeu-me a qualidade das startups aqui da região, rolaram pitches empolgantes. Clima de Silicon Valley. Mas o que um dev podia aprender lá no meio de empreendedores e gestores ?

Networking vale muito.

Conheça quem desenvolve na sua região, não somente desenvolvimento de software mas de produtos em geral. Eventos deste tipo lhe ajudam a entender melhor as necessidades do mercado próximo a você. Ao invés de resolver o problema do mundo, que tal resolver o problema da sua região ? Leve isso como uma opção.

Conhecer as pessoas certas, estar no lugar certo, pode lhe proporcionar oportunidades únicas. Um novo emprego, novas amizades, um sócio em uma nova empreitada. Essas pessoas não vão lhe visitar em casa e oferecer as oportunidades.

Olhe mundo ao seu redor, nem tudo é código.

Muitos devs tem dificuldade para gerir seu tempo, administradores fazem isso bem. Otimizar, resolver 80% do problema com 20% da energia. Coisas desse tipo, não se aprendem em eventos de programação. Principalmente se você for freelancer, descobrir como as outras pessoas resolvem os problemas do seu dia a dia, como fazer um planejamento orçamentário, manter seu fluxo de caixa e noções básicas de gestão financeira. Você é um empresa de um homem só.

Foi uma experiência legal, pela primeira vez conversei com gestores de empresas gigantes. É um modo diferente de se olhar o desenvolvimento de negócios. Espero ter mais oportunidades.

Comentem.

[randalmaia]

Yeoman - Iniciando com Sr. Bigodes, introdução ao Yeoman

Este post trata da introdução ao Yeoman. O Yeoman é um projeto open-source, que tem como objetivo melhorar o fluxo de trabalho em aplicações webs robustas. Na sua recente versão 1.0, juntou-se ao Bower(Gerenciador de dependências) e ao Grunt(Javascript Task Runner). Aumentando seu poder.

Em alguns comandos, você já tem uma estrutura do projeto pronta. Hoje o Yeoman disponibiliza scaffolding para webapp, chrome apps, angular, ember e alguns outros. Você pode também criar os seus geradores.

Instalando Yeoman

A instalação do Yeoman, requer que você tenha instalado pelo menos o NodeJS e o Git em seu pc. Compass e Ruby são opcionais.

Sua instalação é com o npm(Node Packaged Modules), em um simples comando:

npm install -g yo

Este comando automaticamente instalará o Bower e o Grunt para você.

A estrutura básica que já vem com o Yeoman é de webApp que você pode conferir com o comando abaixo dentro da pasta para o seu projeto.

yo webapp

webAPP é uma estrutura básica com HTML5 Boilerplate, Jquery e Twitter Bootstrap.

Caso você queria saber quais as estruturas já disponiveis para o Yeoman, você pode executar:

npm search yeoman-generator

e para instalar o 'generator'(estrutura) que você deseja

npm install generator-backbone yo backbone

Assim você tem um projeto backbone pronto para começar a desenvolver.

Simples e poderoso, algumas estruturas já geram views, controllers e etc. Com o Bower você pode instalar outros plugins. Executando o Grunt, você faz o deploy da sua aplicação.

Referências

Yeoman

Grunt JS

Bower JS

Dá para brincar bastante com o Yeoman. O que acha ? Comente.

[randalmaia]

Jquery - Não use bind(), live() ou delegate(), use on()

Assim que saiu o log de mudanças de novo Jquery 1.9, notei que tinha retirado o método live(), que estava depreciado a algum tempo. Em um projeto em que trabalhei utilizamos bastante o método live e queriamos atualizar a versão do Jquery. Entao a começamos procurar a melhor solução.

Nas minhas pesquisas, descobri que o live(), simplesmente era uma chamada para o método on(), assim como os metodos delegate() e bind()

live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this;

Ok, mas como utilizar o on() ?

$("#elemento").on("click", function(event){ alert('Usei o on()'); // Quando o #elemento for clicado, executa o alert() });

Mas porque utilizar o on() se posso usar o click() ?

Normalmente utilizo o on() para adicionar o evento click em elementos novos no DOM, ou seja que são adicionados ao DOM após o carregamento da página.

Para utilizar o on() nesses casos, é preciso criar um contexto que já estivesse na página durante o seu carregamento.

$("#contexto").on("click", ".elemento", function(event){ alert('Usei o on() com contexto'); }); $(document).on("click", ".elemento", function(event){ alert('Usei o on() com documento, quando não houver um elemento de contexto'); });

Montando custom type events com o método on()

Custom type events, são eventos personalizados que você consegue criar com o Jquery, pode-se criar um evento 'colorirDivs' por exemplo

$( document ).on( 'colorirDivs', function ( e, cor){ $('div').css('background-color',cor) }); $("#elemento").click(function() { $(this).trigger( 'colorirDivs', '#CCCCCC'); });

Referências

On() Jquery API 

Tópico Não use live(), use on()

Conheça os métodos on() e off()

Event.type Jquery

[randalmaia]

Podcasts para desenvolvedores

Esse post vai tratar de podcasts para desenvolvedores front-end e outros que se interessarem pela área. Um pouco também das minhas preferencias e o que eu gosto de ouvir quando estou codando.

ZOFE - Zone of Front Enders Esse é 100% da área, com Zeno Rocha e Daniel Filho em um clima descontraído tratam sobre carreira, mercado, comunidade e entrevistam o pessoal que faz o front end brasileiro acontecer.

Biz and Code Pessoal aqui da região, ainda tem somente um episódio, mas a proposta de unir código e business eu achei fantástica. Tenho grande expectativa em torno dos próximos.

Brainscast Um pouco mais focado em publicidade, trata de assuntos como portfólio  carreira, sociedade e o que repercute no mundo das agencias. O clima é descontraído e eles trazem sempre bastante informação relevante.

PLN - Pauta Livre News Esse é para rir, histórias engraçadas da vida dos integrantes, muito bom para ouvir quando quer se distrair.

Na minha PodRoll ali do lado (->) tem mais alguns, são os que eu ouço diariamente, podcast é uma mídia relativamente nova mas que vem conseguindo grandes níveis de audiência e superando os antigos players 

[randalmaia]

Cheguei !

Olá, criei este blog porque sempre tive vontade de escrever algumas experiências que tenho no trabalho, com front-end e outras coisas. O que eu achar interessante, vou trazer aqui para compartilhar.

Por enquanto é isso.