Categorias
HTML5 Tutoriais

Trabalhando com a propriedade CSS currentColor

Nesse post vamos falar sobre a palavra-chave currentColor do CSS ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como.

currentColor

É uma palavra-chave que pode ser adicionada na propriedade CSS color. Basicamente ela irá refletir a cor definida na propriedade “color” no elemento em que ela se encontra:

p { color: peru; padding: 1em; border: 5px solid currentColor; }
Code language: CSS (css)

E o resultado será o seguinte:

Isso mesmo a cor peru é uma cor válida CSS, mas o importante aqui é que não precisamos repetir o valor da nossa cor para a propriedade na borda simplesmente chamamos a palavra-chave e ele passa a útil quando temos elementos que passam por mudança de estado, por exemplo, botões e links:

button { color: salmon; background: white; border: 3px solid currentColor; padding: 1em; transition: 300ms all; } button:hover { color: navy; }
Code language: CSS (css)

No exemplo acima um botão, seguindo as mesmas propriedades do parágrafo anterior, entretanto nesse caso estamos a trabalhar com um botão e quando o nosso botão está no estado hover adicionamos a cor “navy”, assim o resultado será o seguinte:

Botão no estado normal
Botão no estado “hover”

Além disso, podemos resgatar o valor do (color) de uma elemento pai como no exemplo abaixo:

<div class="salmon-box"> <p>Test CSS</p> <p>Test CSS</p> <p>Test CSS</p> </div> <style> .salmon-box { color: salmon; } p { padding: 1em; border: 3px solid currentColor; } </style>
Code language: HTML, XML (xml)

Assim o resultado será o seguinte:

Detalhe para o exemplo anterior o botão não conseguiu resgatar o currentColor somente quando a cor é definida no próprio elemento.

Suporte

currentColor ganhou suporte em 2009 pelo navegador Opera e desde então os navegadores passaram a dar suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.

Para mais tutoriais acesse a página da categoria tutoriais.

Categorias
WordPress

API de Blocos Gutenberg versão 2

Na versão 5.6 do WordPress foi adicionado a nova API de blocos Gutenberg ou Block API 2, ele tem como foco tornar a edição de blocos mais leve, reduzindo a quantidade de elementos na árvore de elementos DOM do editor, a versão 2 também trás melhorias para ajudar na customização de blocos em temas e plugins .

Habilitando a API versão 2

Para fazer o uso da nova API, devemos especificar na criação de nosso bloco que iremos trabalhar com a versão 2 da API passando o atributo “apiVersion” dentro da função registerBlockType, exemplo:

registerBlockType( name, { apiVersion: 2 } );
Code language: CSS (css)

useBlockProps

Recentemente gravando o curso de Gutenberg em meu canal notei quando utilizando o script create-block os blocos vinha uma um novo hook react relacionado o useBlockProps.

Esse novo hook adiciona em nosso bloco todos os atributos relacionados e o eventos necessários para um bloco. Agora qualquer propriedade que você deseja passar para o bloco deve ser gerenciado pelo useBlockProps. Assim utilizamos o useBlockProps da seguinte forma:

import { useBlockProps } from '@wordpress/block-editor'; function Edit( { attributes } ) { const blockProps = useBlockProps( { className: someClassName, style: { color: 'blue' }, } ); return <p { ...blockProps }>{ attributes.content }</p>; }
Code language: JavaScript (javascript)

Comparando o mesmo código com a versão 1:

function Edit( { attributes } ) { return ( <p className={ someClassName } style={ { color: 'blue' } }> { attributes.content } </p> ); }
Code language: JavaScript (javascript)

Caso queira aprender a construir blocos Gutenberg, lá iremos utilizar mais exemplos com a nova API:

Se ainda não segue meu canal assine e acompanhe quando novas aulas forem publicadas.

Categorias
AMP Accelerated mobile pages

Trabalhando com AMP image light-box

No post anterior vimos como implementar um light-box com o componente amp-lightbox e nesse post vamos ver como implementar com AMP image light-box para imagens, assim iremos trabalhar com o componente amp-image-lightbox. Ele possui algumas particularidades comparado ao componente amp-lightbox mas o comportamento será bem parecido.

amp-image-lightbox

O componente amp-image-lightbox habilita um lightbox específico para images, quando acionado a image será exibida em destaque. Para trabalhar como o componente precisamos primeiramente carregar o script:

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Code language: HTML, XML (xml)

Em seguida adicionamos em nossa aplicação seguinte o código:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

O amp-img possui um evento de tap que irá referenciar o light-box que queremos exibir e nesse caso o amp image lightbox (amp-image-lightbox) com id “lightbox-caipirinha” será o nosso alvo, assim como amp-lightbox ele possui o layout “nodisplay” e com o código acima o resultado será o seguinte:

light-box quando acionado

O componente amp-image-lightbox já vem com estilização do background interações, por exemplo, zoom, panorâmica, e ações para fechar o lightbox quando o usuário clicar fora da imagem ou precionar ESC.

Diferente do amp-lightbox o amp-image-light pode ser utilizado por múltiplas images, assim podemos ter duas images fazendo referência ao mesmo light-box. Como no código a seguir:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha1.jpg" width="200" height="100" ></amp-img> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha2.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

Legendas

Um recurso opcional é a inclusão de legendas no light-box, para isso precisamos incluir uma tag “figure” e como filha uma tag “figcaption” ou adicionar uma descrição com aria através da propriedade “aria-describedby” essas serão as duas opções que veremos no código a seguir:

Com tag figure

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <figure> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" layout="responsive" width="300" height="246" ></amp-img> <figcaption>Learn how to prepare the best Caipirinha</figcaption> </figure>
Code language: HTML, XML (xml)
Resultado do light-box com legenda

Com ARIA

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <div> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" aria-describedby="image-description" layout="responsive" width="300" height="246" ></amp-img> <div id="image-description">Caipirinha from Brazil</div> </div>
Code language: HTML, XML (xml)

Em ambas situações o resultado visual será o mesmo, com a legenda no canto inferior.

Atributos

Os atributos no componente amp-image-lightbox é um pouco diferente do amp-lightbox não temos opções de animação mas temos a seguintes propriedades:

  • layout(obrigatório): deve ser nodisplay
  • id (obrigatório): necessário para ser referenciado pelo elemento que ira disparar a ação de exibir
  • data-close-button-aria-label(opcional): Uma legenda usada pelo ARIA que podemos incluir em nosso botão fechar.

Se quiser saber mais sobre am-lightbox eu publiquei um post falando sobre o componente. Para acompanhar o curso de AMP assine meu canal no YouTube. Qualquer dúvida deixe um comentário e até o proximo post.

Categorias
WordPress

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

Categorias
Tutoriais Web

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:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },
  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        defaultValue: this.props.text
      }),
      React.DOM.h3(null, this.props.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

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:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value
    })
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

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