Posted on

VARIÁVEIS NATIVAS NO CSS: ELAS EXISTEM?

Por PATRÍCIA GOMES DOS SANTOS SILVA

 

Graças a constante evolução do CSS, temos um novo recurso que poucos conhecem, apesar de ser uma questão antiga. As variáveis nativas do CSS, hoje em dia tem um bom suporte dos navegadores modernos. Mas antes de falar das variáveis nativas, é importante lembrar que um dos principais motivos do uso de pré-processadores de CSS é o fato de permitir ao desenvolvedor fazer uso de variáveis no CSS, assim, podemos criar variáveis que nos permitem alterar cor, tamanho de fonte, entre outros.

Tendo criado uma variável, podemos usá-la  em todo o CSS, desta forma, facilitando manutenção, tornando as alterações consistentes, além de ser uma ferramenta poderosa no dia-a-dia do desenvolvimento Front-end.

 

DESENVOLVIMENTO

 

Atualmente temos variáveis no CSS puro, ou seja, de forma nativa, e que estão disponíveis na maioria dos navegadores modernos. Oficialmente essa variáveis são chamadas de CSS custom properties e popularmente são conhecidas como CSS variables (variáveis CSS).

 

Beleza, agora algumas dúvidas que podem surgir na cabeça de muitos:

 

“O que a variável CSS nativa resolve? Quando temos pré-processadores?”

“Porque ainda usar pré-processadores quando agora temos variável CSS nativa?”

 

O ponto aqui, é que existem algumas diferenças fundamentais que devem ser esclarecidas entre usar variáveis de pré-processadores e variáveis nativas.

 

As variáveis de pré-processadores são dinâmicas dentro do pré-processador e seu escopo é léxico, ou seja, depois de compiladas são apenas valores estáticos dentro de um arquivo “.css”, enquanto que as variáveis nativas, são variáveis  dinâmicas dentro do navegador e estão no escopo do DOM.

 

COMO USAR UMA VARIÁVEL CSS NATIVA?

 

Uma custom properties é qualquer coisa que começa com dois hífens “–” e as usamos para declarar uma variável. No exemplo a seguir, foi criada uma classe CSS chamada “header” e foi criado uma variável CSS chamada “–header-color”.

Posted on

Testes em NodeJS

Dentre todas as técnicas que podem usadas para melhorar o código que escrevemos, uma que sempre merece destaque são os testes unitários. Neste artigo iremos tratar, através exemplos, como realizar testes unitários em uma aplicação Node.js. Como pré-requisito, você deve possuir um conhecimento básico em Node.js e alguma familiaridade com ECMAScript 2015 (ES6). Apresentaremos alguns conceitos sobre testes unitários, tais como mocks e asserts.

const rp = require('request-promise');

const API_KEY = 'SPNROBO0';

class BookService {
 static getBookByIsbn(isbn) {
 if (!isbn) {
 throw new Error('ISBN deve ser informado!');
 }

const options = {
 uri: `//isbndb.com/api/v2/json/${API_KEY}/book/${isbn}`,
 json: true,
 };

return rp.get(options).then((response) => {
 if (response.error) {
 return {};
 }

const {
 title, author_data, publisher_name, language,
 } = response.data[0];

return {
 title,
 authors: author_data.map(author => author.name).join(';'),
 publisher: publisher_name,
 language,
 };
 });
 }
 }

module.exports = BookService;