Mongo: Importar arquivos

Mongo: Importar arquivos

  25 de junho de 2018    henrique

---

    No mongo temos a opção de importar arquivos para popular um banco de dados, aqui vão dois exemplos, um importando um json e outro um arquivo tipo csv.

mongoimport -c alunos --jsonArray < alunos.json

sendo "-c" alunos a coleção alunos, "--jsonArray" mostrando que é um arquivo contendo array e < alunos.json é o caminho do arquivo

mongoimport -d produtos -c camisetas --type csv --headerline --file camisetas.txt
Os parâmetros “-d” se refere ao banco, o “-c” se refere a collection, “–headerline” se a primeira linha é um cabeçalho, ou seja, os nomes dos campos.

Ler

CSS: Position e Transform

CSS: Position e Transform

  21 de junho de 2018    henrique

---

Position

     Para tirar algum elemento do fluxo da página, utiliza-se o float ou position (absolute ou fixed). O position sempre será relativo à algum outro elemento acima dele que tenha o position configurado, caso nenhum tenha essa configuração será tomada como base a página. Para adicionar um position a um elemento sem alterar a posição, apenas para servir como base a outro é só utilizar a opção relative.

Transform

    O transform serve para alterar formas ou elementos, isso é bastante usado por exemplo para colocar textos flutuantes na página, textos rotacionados, caixas com formas diferenciadas e até objetos 3D.

Algumas opções para se utilizar com transform:

rotate(10deg)                  - serve para rotacionar o elemento.

scale(1.2)                         - serve para redimensionar o elemento 

skew(10deg)                   - serve para entortar (cisalhamento)

translate(10px, 20px)     - serve para alterar a posição

     Podemos utilizar quantas transformações forem necessárias, mas quando fazemos isso temos que prestar atenção na ordem entre elas, pois o navegador as aplica da direita para a esquerda.

transform : translate(10px, 20px) scale(1.2)

Primeiro vai alterar o tamanho e depois transladar a posição.

    Para aplicar transformações em elementos inline (texto por exemplo), devemos transformar eles em blocos, para isso podemos utilizar:

display: inline-block;

    Quando vamos utilizar a transformação de rotação o navegador tem por padrão tomar como base o centro do elemento, mas quando necessário podemos alterar essa definição para isso é só utilizar a opção de alterar a origem da transformação.

transform-origin: 0 0;

Este exemplo altera a base para o canto superior esquerdo.

Ler

CSS: O que são prefixos CSS

CSS: O que são prefixos CSS

  18 de junho de 2018    henrique

---

     O CSS está em constante evolução e novas opções são lançadas sejam novos recursos ou novos valores para comandos já existentes e nem sempre substituir uma propriedade antiga largamente utilizada é uma boa ideia. Por este motivo, quando surge uma nova funcionalidade no CSS os navegadores tem que se atualizar e implementá-la para próximas versões, porém, até que tais recursos estejam totalmente estáveis e prontos para a utilização, são utilizadas propriedades próprias de CSS, e essas propriedades são os prefixos.

    Abaixo segue a lista dos prefixos utilizados pelos browsers mais conhecidos:

-moz-     = Mozilla

-ms-       = Edge

-webkit- = Chrome, Opera, Safari

Um ressalve para o Opera que utilizava o prefixo -o-, mas após um tempo passou a utilizar também o -webkit-, assim como o Chrome e Safari

     O caniuse.com é um catálogo onde mostram as funcionalidades por navegador e versão, bastante interessante para ter certeza que deve ou não usar um prefixo.

     Também existem ferramentas e .js que fazem essas conversões e tratamentos de prefixos para você não precisar ficar colocando-os em todos os elementos CSS e bagunçando (aumentando) o código.

Ler

JavaScript: Eventos

JavaScript: Eventos

  14 de junho de 2018    henrique

---

    Para adicionar um evento a um elemento é só adicionar usando o addEventListener, ele necessita de dois parâmetros, o primeiro é qual evento que será disparado e o segundo a função que será executada.

td.addEventListener("click", mensagemErro);

function mensagemErro(){

    console.log("Mensagem de erro exibida");

}

     Ou podemos passar a function diretamente na adição do evento, sendo uma função anônima.

td.addEventListener("click", function(){

     console.log("Mensagem de erro exibida");

});

    Para não deixar que o browser execute os eventos padrão podemos especificar isso, é só dentro do evento que estamos criando adicionar o comando:

event.preventDefault();

e na function passar o event como parâmetro, assim:

function(event). Isso se faz bastante útil por exemplo quando estamos lidando com eventos de um botão de enviar do form, que por padrão seleciona os dados do form e envia a uma página e recarrega, pode ser que nem sempre queiramos ir à outra página, caso um erro ocorra por exemplo, os dados digitados no form seriam perdidos.

Ler

JavaScript: querySelectorAll e limitar casas decimais

JavaScript: querySelectorAll e limitar casas decimais

  11 de junho de 2018    henrique

---

    Para selecionar todos os valores de um elemento, como por exemplo para selecionar todas as linhas de uma tabela.

    E caso eu queira percorrer todos os elementos poderia utilizar um loop como o for.

var tabelaAlunos = document.querySelectorAll(".alunos");

for (var i = 0; i < tabelaAlunos.length; i++)

{

     var aluno = tabelaAlunos[i];

}

Limitar casas decimais

     Podemos também limitar as casas decimais de um número, para isso temos a opção de utilizar o toFixed. Como segue o exemplo, onde setamos para o número conter 3 casas decimais.

var numero = 10/3;

td.textContent = numero.toFixed(3);

Ler

JavaScript: Alterando estilos CSS

JavaScript: Alterando estilos CSS

  7 de junho de 2018    henrique

---

    Uma boa prática em JS é alterar estilos CSS através do próprio CSS, alterando as classes dos elementos HTML, mesmo sendo possível alterar os estilos dentro do JS. Para alterar as classes podemos utilizar o classList para acessar a lista de classes do elemento e o add para adicionar uma classe, vamos a um exemplo:

Quero alterar uma linha de uma tabela de alunos e quando o aluno estiver abaixo da média de notas seja adicionada a classe CSS aluno-abaixoMedia:

aluno.classList.add("aluno-abaixoMedia");

Essa classe aluno-abaixoMedia pode conter os códigos CSS que eu quiser e repare que o . da classe não é adicionado, apenas o nome.

    Mesmo assim caso você tenha a necessidade de alterar um estilo dentro do JS, você pode utilizar o style como seria seguindo o exemplo anterior, aluno.style.estiloQueEuQuiser. Vale ressaltar que caso a propriedade CSS que estou alterando contenha mais de uma palavra, no CSS é separada por - no JS deve ser escrita junta utilizando camel case, como text-align deve ser textAlign

Ler

Mongo: Atualização (Update)

Mongo: Atualização (Update)

  4 de junho de 2018    henrique

---

     Neste post estarei mostrando alguns comandos para atualização de documentos, o conhecido update do SQL.

     Para atualizar um documento podemos utilizar:

db.funcionarios.update({}, {}) onde o primeiro parâmetro é a condição do que queremos atualizar, seria o where do SQL e o segundo é o valor que será atualizado.

    Mas passando um update desta forma fazemos com que o mongo intenda que estamos atualizando um documento inteiro que é o padrão dele.

     Para atualizar o campo de um documento podemos utilizar:

db.funcionarios.update(

     { "departamento.nome" : "RH"},

     { $set : {"departamento.nome" : "Recursos humanos"}}

)

    Mas como disse anteriormente o padrão do mongo é atualizar um documento, mesmo que estejamos passando o set para atualizar apenas um campo e na condição passamos uma condição onde possam ter vários registros, ele só vai atualizar o primeiro que encontrar.

     Para atualizar todas as linhas encontradas temos que avisar ao mongo que é isso que desejamos, utilizando o multi:

db.funcionarios.update(

     { "departamento.nome" : "RH"},

     { $set : {"departamento.nome" : "Recursos humanos"}},

     { multi : true }

)

     Agora e quando queremos adicionar um valor a um documento? Imagine que estou em um banco de dados de controle de alunos e esses alunos podem ter várias notas, ou seja tenho um db.alunos contendo um .notas.

     Para adicionar um valor a um documento, temos uma opção que é o $push:

db.alunos.update(
    {"_id" : ObjectId("16db0004b8d72ea12f75d3b9")},
    { $push : { notas : 7.0 } }
)

    Certo e caso eu queira adicionar mais de uma nota de uma só vez?

    Para adicionar mais de um valor no push temos que utilizar o comando each

db.alunos.update(
    {"_id" : ObejctId("16db0004b8d72ea12f75d3b9")},
    { $push : { "notas" : {$each : [7.5, 5.0] } }}

)

     Existem muitas outras opções como o $inc que serve para incrementar um valor, como por exemplo foi adicionada a nota de um aluno como 7.5, mas o mesmo teve trabalhos extras que valeram mais um ponto, poderíamos utilizar o inc para adicionar 1 à nota ficando com 8.5.

     Ou o $currentDate que seta a data atual à um campo.

Como sempre faço aqui vai a Documentação MongoDB, pois existem várias outras opções.

Ler