Vulnerabilidade na versão 4.7 do WordPress

Uma das grandes features do WordPress lançada na versão 4.7, a API de REST possui uma vulnerabilidade. Se você utiliza esta versão corra já e atualize seu WordPress, nas versões 4.7 e 4.7.1 é possível injetar conteúdo em qualquer post, mesmo não estando logado. Alguns sites falam em 1.5 milhão de sites infectados.

A vulnerabilidade

Este bug foi corrigido na versão 4.7.2. A vulnerabilidade pode trazer um problema bem chato qualquer pessoa pode injetar conteúdo em seus posts através da WordPress REST API, um dos endpoints da API permite que os visitantes deslogados consigam editar, excluir e adicionar qualquer post do seu site ou blog.

Solução

Então fique de olho sempre deixe seu blog ou site atualizado e com backups em dia. Desde a versão 3.7 o WordPress possui updates do core automático, mas com um intervalo maior para realizar a atualizar nesse caso o melhor é antecipar a atualização para evitar dor de cabeça. Mais uma dica de segurança é seguir o WordPress security checklist, uma série de passos para evitar problemas com o seu site:

http://wpsecuritychecklist.org/br/items/

 

Foto: Tim Lee

Stateless vs Stateful

Continuando a série sobre ReactJS. Vamos falar sobre um dos princípios básicos sobre estado(state). Os dois últimos posts, por exemplos, criamos componentes estáticos(ou stateless), mas atualmente boa parte das aplicações precisam ter algum tipo de interação com o usuário.

As informações precisam ser alteradas em tempo real. Uma das base do React é um conceito de estado, cada componente utilizado tem uma estado próprio quando estado muda o React reconstrói a UI sem o dev fazer nenhuma requisição para alterar o DOM.

Tudo que precisamos fazer é especificar onde os dados terão o estado “alterável”. Para isso utilizamos uma função this.setState() para manter os dados atualizados. Quando ele é chamando, Qualquer informação alterada no componente ele chama o método render() para atualizar a tela.

Criando o primeiro componente Stateful

Até o momento temos apenas um component Stateless, precisamos transforma-lo em um elemento Stateful. Vamos dar uma olhada neste exemplo:

No exemplo acima, nosso componente possuí uma textarea e um título que mostra o tamanho do nosso texto e ele ainda está stateless. Ele precisa do método ReactDOM.render, para atualizar as informações quando o usuário edita o valor da caixa de texto. Para isso precisamos manter os dados(estado) e saber quando eles serão alterados, vamos ver o exemplo atualizado:

Primeiro passo é chamar o método getInitialState() ele é responsável por salvar o estado inicial do elemento, após adicionarmos o método getInitialState precisamos definir as ações que iremos tomar quando nosso componente sofre alguma alteração no seu estado, nesse caso adicionamos uma função “_textChange” ela simplesmente atualizar o estado do elemento com setState, quando ele for alterado.

No último bloco do nosso componente dois pontos importantes, agora no value do nosso textarea e do nosso h3 não acessamos os props do nosso componente e sim o estado “React.DOM.textarea({ value: this.state.text, …” e “React.DOM.h3(null, this.state.text.length)” outro ponto importante adicionamos um evento onChange para disparar a método _textChange.

Agora quando alteramos nosso componente ele atualiza os dados. Então o objetivo é fazer posts curtos com mais frequência, todos os tutoriais de react estão no meu git: https://github.com/fellyph/react-tutorial

WordCamp Europa

No final de junho entre os dias 24 e 26 acontece o WordCamp Europa o principal WordCamp na região com mais de 2 mil participantes esse ano o evento acontece em Viena capital da Áustria. Esse será o meu segundo WordCamp na europa já que meu primeiro foi em Londres logo nos primeiros meses que cheguei aqui.

Foi legal ver outras comunidades e notar que a comunidade brasileira é bem forte e com um alto nível técnico comparada as palestras que eu vi. A única diferença que eu ví no WordCamp Londres é o números de empresas que investem no evento. Isso deixa mais fácil você montar uma super estrutura com: legendas em tempo real, quatro auditórios, buffet ultra organizado com opções vegana, happy hour. Mas esse detalhe me da mais orgulho porque conseguimos fazer WordCamps de qualidade em diferentes estados.

Mas vamos falar o que interessa, logo quando cheguei fiquei de olho nos WordCamps selecionei alguns que poderia participar, fiz um levantamento sobre custo, grade e país que queria muito visitar. Não sei se todo mundo sabe mas estou passando por uma fase de estudante/mochileiro então meus recursos são limitados. Não posso sair viajando toda a europa então a escolha tem que ser feita a dedo.

É claro que o principal evento não poderia ficar de fora dessa lista. Primeira barreira foi a inscrição, estamos falando do principal evento  da Europa, ou seja, as inscrições acabaram em segundos. Entrei em contato com a organização, contei toda a história que sempre participo e palestro em WordCamps, ajudei na organização do WordCamp São Paulo por 3 anos e gostaria muito participar. A resposta foi melhor que esperava fui convidado para participar como voluntário.

Agora é só aguardar e fazer as malas, já foram passadas as primeiras instruções precisamos chegar um dias antes para alinhar as informações nada diferente que fazemos no Brasil, a única diferença é a quantidade de participantes de diferentes países.

O WordCamp Europa serão 3 dias de muito conhecimento com palestras divididas nos seguintes temas comunidade, desenvolvimento, negócios, design e conteúdo. Nos dias 24 e 25 serão o dia dedicado a palestras no dia 26 é o contributor Day, um dia reservado para contribuição com a plataforma.

palestrantens-wordcamp-europa

Agenda Completa aqui: https://2016.europe.wordcamp.org/schedule/

Quer acompanhar o evento? Ainda restam vagas para assistir o LiveStreaming:https://2016.europe.wordcamp.org/tickets/

Vou postar coisas no meu twitter(@fellyph) e snapchat(fellyphc) no dia do evento só acompanhar lá.

Padrões de código JavaScript no WordPress

Em busca da produtividade e legibilidade do código presente nos temas a equipe do Core do WordPress escreveu uma seção para falar sobre padrões de codificação para plataforma. Esse é o segundo post da sobre o assunto no post anterior falei sobre padronização de código CSS, Nesse post vamos abordar padrões de escrita para JavaScript.

JavaScript tornou-se uma das principais linguagens da atualidade e é um item chave no desenvolvimento de temas e plugins no WordPress. Claro que padronizar seu código JavaScript é essencial para manter consistência no projeto. Todo código base deve parecer escrito por uma única pessoa.

O “WordPress JavaScript Coding Standards” foi uma adaptação do “jQuery JavaScript Style Guide”, o padrão do WordPress difere do jQuery nos seguintes pontos:

  • WordPress usa aspa simples para declaração de string.
  • Instruções de Case são indentadas para indicar as mudanças de blocos.
  • Conteúdo de funções são constantemente indentadas, incluindo os empacotadores de fechamento de todo o arquivo.
  • Algumas regras para espaço em branco são diferentes, para manter consistência com o “WordPress PHP coding standards”.
  • 100 caracteres são o limite para uma linha de código jQuery, mas no WordPress não são rigorosamente aplicadas.

Espaçamento

Uso de espaços livremente em todo seu código. “Em caso de dúvida, tire o espaço.”

Estas regras incentivam o uso de espaço para melhorar a legibilidade do código. O processo de minificação cria arquivos otimizados para os browsers lerem e processarem os arquivos, mas não para os programadores. O ideal é utilizar uma versão minificada para produção e uma versão sem minificação para desenvolvimento.

Além deste quesito temos as seguintes recomendações para espaçamento:

  • Crie indentação com tab.
  • Retire os espaços em branco no final da linha e em linhas em branco.
  • As linhas não devem ser longas, não exceder o limite já especificado de 100 caracteres(contando tabs e espaço). Esta é uma regra “soft”, mas linhas longas geralmente apontam código desorganizado.
  •  if / else / for while / try, os blocos devem sempre utilizar chaves e quebras de linhas, evite utilizar condicionais em uma única linha com chaves.
  • Os operadores de “unários”, exemplo, ++ ou — não devem ter espaço entre seu operando, exemplo “contador++”.
  • Qualquer “,” ou “;” não deve preceder de espaço
  • Qualquer “;” utilizado como sinalizador de um final de uma operação deve estar sempre  ao final da linha, ou seja evite “contador++; a = contador;” na mesma linha.
  • Qualquer “:” depois de um nome de uma propriedade em uma definição de um objeto, não deve ser precedido de espaço, exemplo “valor: 9”.
  • A “?” e “:” de uma condicional ternária deve ter espaço em ambos os lados
  • Não utilize espaço em declarações de tipos vazios, exemplo, {} [] ou fn().
  • Toda “!” utilizada como operador de negação deve conter um espaço em seguida.*
  • Indente todo conteúdo de uma função, mesmo que todo o arquivo esteja contido dentro da função.*
  • Espaços podem podem alinhar comentários ou espaços dentro de uma linha de código, mas somente o TAB pode alinhar o início de uma linha de código.*

Os itens marcados com um “*” ao final da linha fazem parte do WordPress JavaScript standards, sendo um complemento ao padrão do jQuery. Essas aplicações são recomendadas para manter coerência com os padrões de escrita do PHP.

Os espaços em branco são facilmente acumulados no final de cada linha, evite isso utilizando JSHint,  Outra maneira de evitar esses espaços é definindo cores para os espaços no estilo do seu editor.

Objetos

Declarações de objetos podem ser feitas em uma única linha, mas isso não é aconselhável lembrem das recomendações do tamanho da linha. O recomendado é deixar uma propriedade por linha. Nome de propriedades precisam somente de aspas quando possuem uma palavra reservada ou caracteres especiais:

Arrays e Chamadas de Funções

Sempre adicione espaços extras em torno dos elementos e argumentos:

Exceções

Para manter a consistência com o padrão PHP, não inclua um espaço em torno strings ou inteiros usados como keys de uma array:

Função com callback, objetos ou array como um argumento único, sem espaço em ambos os lados do argumento:

Função com callback, objeto ou array no primeiro argumento passamos sem espaço o segundo argumento seguimos o padrão:

Essa regra se aplica caso a função/array/objeto for o último argumento, ela segue sem espaços e os primeiros itens seguem o padrão.

Um bom exemplo de uso de espaçamento:

Indentação e quebra de linhas

Indentação e quebra de linhas adicionam legibilidade para declarações complexas. Tabs devem ser usados sempre para indentação do conteúdo que estiver dentro das chaves, também usamos um tab para sinalizar o nível do conteúdo.

Blocos

IF, ELSE, FOR, WHILE e TRY devem sempre utilizar chaves e estar organizado em multi-lines. A abertura da chave deve estar na mesma linha da definição da função/condicional/loop. A chave de fechamento deve estar na linha seguinte da última declaração do bloco.

Exemplo:

Operações Multi-line

Quando uma operação é muito longa para uma única linha, utilizamos uma quebra de linha e tal deve ocorrer após um operador.

Métodos encadeados

Quando é utilizado um método encadeado ele pode criar uma linha muito longa, o remendado é ter uma chamada por linha, se o método muda o contexto ele deve ser aplicado um nível extra de indentação.

Atribuições e variáveis Globais

Declarando variáveis com var

Cada variável deve começar com a declaração “var” e as variáveis separadas por virgula. Na quebra de linha utilize indentação como no exemplo a seguir:

Variáveis Globais

No passado do WordPress o seu core fazia uso pesado de variáveis globais. Algumas variáveis globais ficam disponíveis por necessidade de integração com os plugins e não devem ser removidas. Outra recomendação é que todas as variáveis globais devem ser documentadas.

Bibliotecas Comuns

Backbone, jQuery, Underscore, e o “wp global” são todos registrados como itens “globais permitidos” no root do arquivo .jshintrc.

Backbone e Underscore podem ser acessados diretamente a qualquer hora. jQuery deve ser acessado $ passando por jQuery como um objeto de uma função anônima:

Isso irá evitar a chamada do “.noConflict()”, ou definir que o $ seja usado com outra variável. Os arquivos que adicionam ou modificam, o “wp object” acessa com mais segurança os itens globais isso evita a substituição previa do set de propriedades:

Convenções de nomenclaturas

  • Variáveis e nomes de funções devem ser palavras completas, utilizando camel case com a primeira palavra em caixa baixa. Esta é uma área que difere dos padrões do PHP para WordPress.
  • Construtores que utilizam “new” devem ter a primeira letra maiúscula.
  • Os nomes das variáveis e construtores devem ser descritivos, mas não excessivamente.
  • Exceções são permitidas para “interators”, tais como o uso de “i” para indicar o indice de um loop.

Comentários

Comentários vem antes do código a qual se refere e deve sempre ser precedido de uma linha em branco. A primeira letra do comentário deve ser maiúscula e inclua frases completas que descrevam a operação, não tenha preguiça de incluir comentários, eles são importantes para manter a fluidez do desenvolvimento. Após “//” inclua um espaço.

Igualdade

As verificações de igualdades estritas(===) deve ser utilizada no lugar da verificação de igualdade abstrata(==). Use somente (==) quando realmente deseja saber se o valor é null ou undefined.

Checando tipos

Para checagem de tipos utilize esse padrão:

  • String: typeof object === ‘string’
  • Number: typeof object === ‘number’
  • Boolean: typeof object === ‘boolean’
  • Object: typeof object === ‘object’ or _.isObject( object )
  • Plain Object: jQuery.isPlainObject( object )
  • Funções: _.isFunction( object) or jQuery.isFunction( object )
  • Array: _.isArray( object ) or jQuery.isArray( object )
  • Element: object.nodeType or _.isElement( object )
  • null: object === null
  • null or undefined: object == null
  • undefined:
    • Variáveis globais: typeof variable === ‘undefined’
    • Variáveis locais: variable === undefined
    • Propriedades: object.prop === undefined
    • Qualquer um dos anteriores: _.isUndefined( object )

Strings

Use aspas simples para string literais:

Switch

O uso de switch é geralmente desencorajado, mas pode ser útil para comparação de um grande números de casos, especialmente quando realizamos uma série de tratamentos e queremos incluir um tratamento para exceções com “default”.

Como usar o switch:

  • Use um “break” para cada “case” com exceção do “default”.
  • Indente o conteúdo dentro do case com um tab

Não é recomendado utilizar o return dentro do case, defina os valores de saída e utilize o return após o switch, podemos ver uma aplicação no código abaixo:

Boas Práticas

Arrays

Crie arrays com [] no lugar de new Array().

Objetos

Existem várias formas para criar um objeto com JavaScript. Notação do objeto literal, “{}”, é considerado o mais performático e de fácil leitura.

A notação literal de um objeto deve ser usado a menos que o objeto trabalhe com prototype, neste caso utilizamos o “new”

As propriedades do objeto devem ser acessados via “.” a menos que a chave da propriedade use o nome de uma palavra reservada, uma string não válida ou venha através de uma variável.

Condicionais “Yoda”

Para manter consistência com os padrões de código do PHP sempre compare com a variável no lado direito e a constante no lado esquerdo, essa regra vale para strings, booleanos, inteiros…

Interações

Quando queremos varrer uma coleção utilizamos o “for”, é recomendado armazenar o valor máximo em uma variável em vez de recalcular o valor máximo em casa interação.

Na documentação temos duas recomendações para underscore, jQuery e uma recomendação para o uso de JSHint. Esse itens eu prefiro tratá-los e um post separado a tradução desse artigo me ajudou bastante muitas recomendações desconhecia. Algumas recomendações tratam da parte visual do seu código um código organizado para mim é igual a uma boa caligrafia. Isso ajuda na legibilidade e claro uma padronização deixa o time bem entrosado.

O artigo original você confere aqui:

http://make.wordpress.org/core/handbook/coding-standards/javascript/

Os Padrões JavaScript coding do WordPress são baseados nos padrões do jQuery você pode conferir aqui:

http://contribute.jquery.org/style-guide/js/

Talks 2013

2013 começou com tudo, em fevereiro rolou Wordtalks 3 na DRC treinamentos e o meeting do BlackBerry Dev Group na sede da BlackBerry aqui em São Paulo. Wordtalks é um formato de evento que já comentei aqui no blog, são um ciclo de palestras com parceria com alguns alunos.

O meeting da BlackBerry é um encontro realizado pelo developer group São Paulo, o evento contou com 3 palestras uma minha, outra com Demian Borba e Rodrigo Peixoto. Foi apresentada a plataforma BlackBerry.

1819_609386292409024_1733567219_n

No evento foram distribuidos para os participantes aparelhos Dev Alpha, tendo a possibilidade de participar do Trade Up, programa que permite para trocar o Dev Alpha por uma edição especial para desenvolvedores. Alguns dos participantes do já começaram a receber os devices:

z10-limited-edition

A foto acima é do membro do BlackBerry Developer Group São Paulo Renato Nitta.

No começo de março a convite de Davidson Fellipe tive a oportunidade de palestrar no Rio.js, foi uma oportunidade incrível ir em evento com tantos nomes Fod… (desculpem a palavra). No Rio.js falei um pouco sobre carreira evento também que já comentei no blog. No final do mês de março semana pré feriadão fui palestrar na IFSP Guarulhos sobre a plataforma BlackBerry, graças ao Alexander Stafusa que organizou o encontro. Fiz um post no site da comunidade de desenvolvedores da BlackBerry: http://blackberrydeveloper.com.br/eventos/palestra-na-ifsp-guarulhos/

522052_632594263421560_1537717662_n

No último final de semana no dia 13 de abril, estive em Novo Hamburgo na semana Acadêmica da FEEVALE, lá também falei sobre mercado mobile e desenvolvimento para BlackBerry, com a palestra: Desenvolvendo apps mobile sem sofrimento: Conheça a nova platarforma BlackBerry 10.

O evento ocorreu de 13 a 18 de abril, no mesmo dia da minha apresentação, também esteve presente o Davidson Fellipe que apresentou a palestra: Os segredos dos Front end Engineers.

E para os próximos dias minha agenda está da seguinte forma, neste final semana dia 20 de abril estarei em Caruaru Realizando o Workshop sobre WordPress. Dia 15 de maio estarei no Tableless Conf e no dia 24 de maio estarei no Adobe Camp 2013.

Essa rodada de palestras está sendo uma fase muito boa, estou tendo oportunidade de conhecer novos profissionais e conhecer outras regiões do Brasil e o que está acontecendo no cenário local de cada uma delas. Quem estiver organizando evento sobre desenvolvimento web ou mobile, pode entrar em contato comigo ou na caixa de comentários ou em minha fan page : https://www.facebook.com/FellyphBlog

Preparando a palestra da drc e testando a App para iOS

Hoje preparando a palestra de wordpress da drc decidi testar a App para iOS do WordPress, com um layout bem clean como todas AppStore para iOS, realmente surpreendeu.

Já tinha testado a App no Nokia n8 mas nunca pegou, por uma questão simples de suporte. Estou escrevendo do celular só para teste no próximo post complemento com informações úteis, onde baixar e como configurar.

Flash Camp São Paulo 2011

Como todos(devs paulistas) pediam a bastante tempo, finalmente vamos ter um Flash Camp em São Paulo no dia 19 de novembro. Os melhores nomes no desenvolvimento de Jogos, RIA, design e interatividade, desembarcam em São Paulo. O Camp acontece em conjunto com o Latin Flash Tour, como aconteceu no ano passado no Rio de Janeiro. Este ano o Flash Camp contará com  nomes como, Lee Brimelow, Paul Trani, Claus Wahlers e Arthur Debert.

Uma boa oportunidade de ver essa galera de perto e trocar uma idéia com eles. Além das palestras o evento vai contar com workshops que serão realizados em paralelo em duas salas, abordando os seguintes assuntos : Air Mobile, HTML5, Canvas/JS e FDT5.

No ano passado o Camp Rio foi organizado pelo ASDEVS liderados por Filipe Cunha e Jay Moretti. Foi um dos melhores eventos de dev do ano passado, com palestras de alto nível  e uma ótima estrutura da ESPM no rio. O evento teve um clima diferente participantes e palestrantes se misturavam durante e após o evento, parecendo uma verdadeira confraternização. O melhor de tudo isso que a galera teve a oportunidade de aprender com grandes nomes do mercado. E esse clima é aguardado no Flash Camp São Paulo (eu já fiz minha inscrição). O Camp esse ano está custando R$ 80,00 pelo o nível das palestras e assuntos abordados está muito barato.

O Flash Camp São Paulo acontece no dia 19 de novembro de 2011, na faculdade impacta.

Mais infos em : http://asdevs.com.br/flashcampsp/