FrotaAdriano TI-Life and Protifolio

Olá caros leitores, O que veremos neste post:  Duas novas features da versão 2019 do Javascript (ECMAScript 2019):           String.trimStart() e              String.trimEnd()    String.trimStart() : Remove espaços à esquerda da string:           let  myName = 'Adriano';            let  myStringWithLetfSpaces = '     I have some spaces in my left?!';                      console.log( myName  + ',' +  myStringWithLetfSpaces.String.trimStart() ; Obs: trimLeft() é uma álias para este método! String.trimEnd() : Remove espaços à esquerda da string:           let  myName = 'Adriano';             let  myStringWithRighSpaces = 'I have some spaces in my left,          ';                      console.log( myStringWithRighSpaces . trimEnd()  +  myName ); Obs: trimRight() é uma álias para este método! Performar, poupar tempo e otimizar seu código são algumas das vantagens de conhecer as features e métodos que o Javas

Olá caros leitores, O que veremos neste post:  Nova feature da versão 2019 do Javascript: Object.fromEntries() Object.fromEntries() : Cria um novo objeto a partir de lista de arrays de chave-valor, ou seja, imagine que você tenha:           ['First Position', 'Xpto'],           ['Points', 42] Posso transformá-lo em um objeto:                   { First Position: "Xpto", Point: 42 } É uma situação em que temos à disposição um método pronto do JavaScript e conhecer esta e outras novidades nos dá a base na linguagem para poupar tempo e performar sem ter que "reinventar a roda" e ficar criando lógicas para o que já existe em situações específicas. Sintaze: const entries = new Map([ array 1, array n ]); const obj = Object.fromEntries(entries); Bem simples não é? Segue abaixo e implementação!  Resultados: Mais detalhes sobre a função aqui!    

Olá caros leitores, O que veremos neste post:  Exemplo completo no final do post!  ASP.NET Azure Queue Storage em poucos minutos. Como desenvolver filas no Azure em minutos. Aprenda em poucos passos mais sobre uma das funcionalidades mais difundidas do Azure  Mesmo que você tenha pouca ou nenhuma experiência com Azure mais saiba um pouco de .NET te garanto que com esse tutorial você já dará passos importantes e aprenderá a manipular filas hospedadas na nuvem. Premissa: Você precisa ter uma conta no Azure ( a versão free atende tranquilamente ) Crie um storage no azure e use o nome no config no lugar de  account-name Veja sua fila dentro do storage criado. 1. Criar novo projeto  Console App (.NET Framework) 2. Instalar os pacotes Install-Package Microsoft.Azure.ConfigurationManager Install-Package Microsoft.Azure.Storage.Common Install-Package Microsoft.Azure.Storage.Queue 3. Configurar os dados de conexão Crie e chave abaixo em seu arquivo d

Olá caros leitores, Exemplo completo no final do post!  O que veremos neste post:  Nova feature da versão 2019 do Javascript: Javascript ECMAScript 2019 - Array.flatMap() Cenario: Qualquer desenvolvedor front-end que trabalhe com js, Angular, React, Vue, etc PRECISA acompanhar a evolução da linguagem e as novas features que vem para facilitar nossa vida. Os ganhos em desempenho, produtividade e código mais limpo são alguns dos benefícios. As novas features no javascript ajudam e muito à fazer um código mais legível e otimizado e estas novas linguagens utilizam muito destes recursos: Array.flatMap() Cria um novo array concatenando os subArrays assim como como o Array.Flat que citei neste artigo aqui e executa o .map do javascript. Sintaze: var new_array = arr .flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array } [, thisArg ]) Nos exemplos abaixo fica mais claro como usá-lo de forma fácil: Result

Olá caros leitores, Exemplo completo no final do post!  O que veremos neste post:  Nova feature da versão 2019 do Javascript:  Javascript ECMAScript 2019 - Array.flat() Cenario: Qualquer desenvolvedor front-end que trabalhe com js, Angular, React, Vue, etc PRECISA acompanhar a evolução da linguagem e as novas features que vem para facilitar nossa vida. Os ganhos em desempenho, produtividade e código mais limpo são alguns dos benefícios. As novas features no javascript ajudam e muito à fazer um código mais legível e otimizado e estas novas linguagens utilizam muito destes recursos: Array.flat() Cria um novo array concatenando os subArrays no nível de profundidade desejado. Sintaze: var meuNovoArray = arrayOriginal .flat( [depth] ); Exemplos:

Olá caros leitores, blz? Este artigo é uma introdução básica para aqueles que desejam aprender, utilizar e/ou estudar os conceitos e práticas mais comuns do Jquery. Você pode estar aprendendo agora ou estudando para uma certificação, então este artigo é para você. Apesar de, no mundo front-end as "novidades" e tendências serem outras libs como react, ou frameworks como Angular 8 o Jquery ainda está em milhões de site por este mundo afora. Obs: Parto do pressuposto que vc tenha alguma ideia muito básica do que é o Javascript, caso não o tenha estarei fazendo um breve tutorial aqui em breve ;-)   Segundo o site  https://trends.builtwith.com/javascript/jQuery  , está em pouco mais de 66 milhões!! Vamos ao básico: Jquery é uma biblioteca Javascript que otimiza tarefas e proporciona um alto nível de implementação de rotinas em Javascript de forma muito mais enxuta e otimizada. O cara mais importante é o seletor ( $ ), este é a ferramenta inicial par

Olá caros leitores, Exemplo completo no final do post!  O que veremos neste post:  Extrair no C# de forma ágil e elegante a frequência de itens em uma lista de objeto complexo. Para tal, utilizaremos o Linq. Cenario: Em uma situação que se tem uma lista de objetos complexos ( Boletos, Usuários, Livros etc ) e deseja-se obter a quantidade de ocorrências de uma determinada propriedade da lista. Com isto podemos fazer todo tipo de agrupamento e extração de dados de ocorrências de forma simples. Imagine o objeto que traz as notas dos alunos em disciplinas e queremos saber a ocorrência e as notas somente em matemática. 1. Contrução do Objeto: AlunoDisciplinaNota         public class AlunoDisciplinaNota{ public int Id {get;set;} public int Nota {get;set;} public string Disciplina {get;set;} } 2. Agora vamos criar uma lista com tipos complexos: List<AlunoDisciplinaNota> alunos = new List<AlunoDisciplinaNota>()        { new AlunoDiscip

Olá caros leitores, Exemplo completo no final do post!  O que veremos neste post:  Extrair no C# de forma ágil e elegante uma cláusula IN para um querie a partir de uma lista do objetos de tipos primitivos e complexos. Já vi muitos códigos que a pessoa faz um Foreach e tira a ultima vírgula do final mas utilizar um método pronto no C# é muito mais elegante e clean. Utilizaremos o Join (String.Join) Cenario: Imagine a Classe:  public class ObjComplexo{ public int campo1 {get; set; } public int cmapo2 {get; set; } } Agora vamos criar uma lista com tipos primitivos : //========= Tipos Primitivos =========// var lista = new List<int>(); lista.Add(1); lista.Add(2); lista.Add(3); lista.Add(4); lista.Add(5); Retorno esperado:  ===== Tipos Primitivos ===== Tipos Primitivos clausula IN de inteiros: (1, 2, 3, 4, 5) Tipos Primitivos clausula IN de strings: ('1', '2', '3', '4', '5')

Olá caros leitores, Exemplo completo no final do post! Link : https://dotnetfiddle.net/gh6IRc O que veremos neste post: Falaremos neste post sobre como obter, a partir de uma List de objetos completos com valores repetidos, uma nova lista distinta. Cenário: Imagine a Classe Tool : public class Tool     {         public int Id { get; set; }         public int Number { get; set; }         public string Source { get; set; }     } Agora vamos criar uma lista com valores repetidos:       var tools = new List<Tool>()             {                 new Tool {Id=1, Price=100, Source="source1"},                 new Tool {Id=2, Price=200, Source="source2"},                 new Tool {Id=3, Price=300, Source="source3"},                 new Tool {Id=1, Price=100, Source="source1"},                 new Tool {Id=2, Price=200, Source="source2"}             }; Nosso objetivo aqui é obter uma nova lista retiran

Olá caros leitores, Link do gitHub do projeto aqui! Estamos na parte 2 e caso queira consultar o que foi visto na Parte 1 clique aqui . Utilizaremos o mesmo projeto da parte 1 que está versionado no Github. O que veremos neste post:  Falaremos neste post sobre Rotas    De posse de um projeto rodando o básico siga os passos abaixo e em poucos minutos ja teremos condições de usar as premissas básicas sobre rotas em nossos projetos. 1. Crie 3 componentes : home outraPagina.jsx     sobre.jsx 2. Faça o import do React-Router-Dom: npm install react-router-dom O comando acima instala o React Router 3. Em nosso App.js adicione o seguinte codigo: Os imports import { BrowserRouter as Router, Route, Link } from "react-router-dom" ; import Sobre from './Pages/Sobre' ; import OutraPagina from './Pages/OutraPagina' ; import Home from './Pages/Home' ; A tag RETURN agora será a que abr

Olá caros leitores, Link do gitHub do projeto aqui! Afim de aprimorar os estudos e praticar um pouco de tudo que venho aprendendo sobre React resolvi iniciar uma série de postagens em português e ir evoluindo uma aplicação do zero, implementando desde o básico até features mais avançadas sobre React. Esta parte 1 ainda terá um pouco de conceitos mas a ideia é que seja prático e um guia para você que tem interesse em aprender esta linguagem. O que veremos neste post:  Requisitos básicos para criar um projeto Criação de projeto básico. Entendimento da estrutura do projeto  Entendimento da estrutura de projeto atomico Instalação de framework - React Bootstrap Instalação de framework - PrimeReact (Primefaces) 1. Requisitos básicos para criar um projeto NodeJS: https://nodejs.org/en/ Visual Code ( ou outro editor de sua preferência ) 2. Criação de projeto básico Vamos criar um projeto segundo o basico do site oficial (sempre olho primeiro nos sites oficiais)

Este é meu primeiro post sobre React e trarei uma série de dicas e truques que facilitam o dia a dia. Este exemplo mostra como obter as dimensões da janela dinâmicas ouvindo o redimensionamento do navegador para manter o valor no estado do componente.  Nível: Básico Dificuldade: Baixa Farei o exemplo dentro da Classe APP para facilitar mas você pode colocar em qualquer componente. Passos:  1. Crie os states:  windowHeight e  windowWidth  this . state = { windowHeight : 0 , windowWidth : 0 }; 2. Crie o método  updateWindowDimensions updateWindowDimensions() { this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight }); } 3. Faça o bind deste método criado no contrutor: constructor () { super (); this . state = { windowHeight : 0 , windowWidth : 0 }; this . updateWindowDimensions = this . updateWindowDimensions . bin