Postagens

Jquery - Introdução

Imagem
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 in...

Dicas C# - Usando o LINQ para contar frequências em listas

Imagem
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>...

Dicas C# - Cláusula IN para um querie a partir de uma lista

Imagem
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') ...

Dicas C# (linq) - Extrair lista distinta de lista de objetos complexos

Imagem
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"},...

React Tutorial - Parte 2

Imagem
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...

React Tutorial - Parte 1

Imagem
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 prime...

React - Dimensões de tela

Imagem
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 ....