Forem: Marlon Frade

Como utilizar ferramentas de automação de mídias sociais para melhorar sua presença online e aumentar o alcance do seu blog

Marlon Frade — Tue, 13 Jun 2023 11:14:02 +0000

Se você é um blogueiro ou dono de uma empresa, é fundamental ter uma presença online forte e ativa nas mídias sociais. No entanto, manter todas as suas contas de mídia social atualizadas pode ser uma tarefa árdua e consumir muito tempo. É aí que entram as ferramentas de automação de mídias sociais.

Essas ferramentas permitem que você agende suas postagens com antecedência, analise o desempenho de suas contas, monitore as menções de sua marca e muito mais. Isso pode economizar uma quantidade significativa de tempo e esforço, permitindo que você se concentre em outras áreas importantes do seu blog ou empresa.

Neste artigo, vamos dar uma olhada em algumas das melhores ferramentas de automação de mídias sociais disponíveis e como você pode usá-las para melhorar sua presença online.

1. Hootsuite

Hootsuite é uma das ferramentas de automação de mídias sociais mais populares e conhecidas. Com o Hootsuite, você pode gerenciar várias contas de mídia social em uma única plataforma. Ele permite que você agende postagens, monitore menções, acompanhe a análise de suas contas e muito mais. Além disso, ele oferece uma ampla gama de integrações com outras ferramentas de marketing.

2. Buffer

O Buffer é outra ferramenta popular de gerenciamento de mídia social. Ele permite que você agende postagens para várias contas de mídia social, além de oferecer análises detalhadas sobre o desempenho de suas contas. O Buffer também tem integrações com outras ferramentas de marketing, como o Google Analytics.

3. Sprout Social

O Sprout Social é uma ferramenta de gerenciamento de mídia social mais avançada, com recursos de monitoramento e análise aprimorados. Ele permite que você agende postagens, monitore menções, acompanhe as análises de suas contas e muito mais. Além disso, ele oferece uma gama de recursos avançados, como relatórios personalizados, análises de concorrentes e gerenciamento de equipe.

4. CoSchedule

O CoSchedule é uma ferramenta de gerenciamento de marketing all-in-one que inclui recursos de gerenciamento de mídia social. Ele permite que você agende postagens, crie um calendário de conteúdo, analise o desempenho de suas contas e muito mais. O CoSchedule também tem integrações com outras ferramentas de marketing, como o WordPress e o Google Analytics.

5. MeetEdgar

MeetEdgar é uma ferramenta de automação de mídias sociais que se concentra na reutilização de conteúdo. Ele permite que você organize seu conteúdo em categorias e, em seguida, agende as postagens para que o conteúdo seja compartilhado regularmente. Isso é particularmente útil se você tiver um blog com um grande volume de conteúdo já publicado.

Conclusão:

As ferramentas de automação de mídias sociais podem economizar muito tempo e esforço, permitindo que você se concentre em outras áreas importantes do seu

Como utilizar o Obsidian para melhorar sua produtividade na criação e organização de conteúdo para seu blog

Marlon Frade — Tue, 13 Jun 2023 11:13:23 +0000

Se você é um criador de conteúdo, sabe o quanto é importante ter um sistema eficiente para gerenciar suas ideias, notas e rascunhos. O Obsidian é uma ferramenta poderosa que pode ajudá-lo a aumentar sua produtividade na criação e organização de conteúdo para seu blog.

O que é Obsidian?

Obsidian é um aplicativo de anotações que utiliza o formato Markdown e oferece recursos avançados de organização e pesquisa. Com ele, você pode criar um banco de dados interconectado de notas que pode ajudá-lo a organizar suas ideias, rascunhos e referências em um único lugar.

Como o Obsidian pode ajudar na criação de conteúdo para o seu blog?

Com o Obsidian, você pode facilmente criar e organizar notas relacionadas a seus projetos de conteúdo. Isso inclui ideias para posts, esboços de artigos, listas de tópicos e muito mais. Você pode facilmente criar links entre as notas para criar uma rede interconectada de informações relacionadas.

Além disso, o Obsidian oferece recursos avançados de pesquisa que permitem encontrar rapidamente informações relevantes. Por exemplo, você pode pesquisar por palavras-chave em todas as suas notas para encontrar informações relacionadas a um determinado tópico.

Como começar a usar o Obsidian para melhorar sua produtividade na criação de conteúdo para o seu blog?

Para começar a utilizar o Obsidian, basta baixar o aplicativo e criar uma conta. Em seguida, você pode começar a criar suas notas e organizar suas informações. É recomendável que você aprenda o básico do formato Markdown para tirar o máximo proveito da ferramenta.

O Obsidian oferece uma grande variedade de recursos e plugins para personalizar a experiência de usuário. Você pode começar com as funcionalidades básicas e, em seguida, ir adicionando mais recursos à medida que se torna mais confortável com a ferramenta.

Atalhos de Teclado para o Obsidian

Atalhos Básicos

Shortcut Key	Functions
Ctrl + S	Editor: Saves the file
Ctrl + N	Creates a new note
Ctrl + P	Open command pallete
Ctrl + O	Opens Quick Switcher
Ctrl + Shift + F	Search in all files
Ctrl + G	Opens graph view
Ctrl + Alt + ←	Navigate Back
Ctrl + Alt + →	Navigate forth
Ctrl + F	Searches current file
Ctrl + E	Toggle edit/preview modes
Ctrl + ,	Open Settings
Ctrl + Tab	Next tab
Ctrl + Shift + Tab	Previous tab
Alt + Tab	Next App
Alt + Shift + Tab	Previous App
Win + Tab	Task View
Win + Shift + Tab	Next Window

Atalhos de edição 🕹️

Shortcut Key	Functions
Ctrl + B	Bold Selected Text
Ctrl + I	Italicize Selected Text
Ctrl + K	Insert External Link to Selected Text
Ctrl + ]	Indent
Ctrl + `[`	Unindent
Ctrl + D	Delete current line
Ctrl + V	Duplicate current line
Ctrl + Click	Open Note in Current Panel via Link
Ctrl + Shift + Click	Open Note in New Panel via Link

Conclusão

O Obsidian pode ser uma ferramenta poderosa para ajudá-lo a melhorar sua produtividade na criação e organização de conteúdo para seu blog. Com seus recursos avançados de organização e pesquisa, você pode facilmente criar uma rede interconectada de informações relacionadas e encontrar rapidamente informações relevantes. Experimente o Obsidian e veja como ele pode ajudá-lo a ser mais produtivo!

Como criar um site progressivo com o uso de PWA (Progressive Web Apps)

Marlon Frade — Tue, 13 Jun 2023 11:12:59 +0000

As Progressive Web Apps (PWAs) são um conjunto de técnicas para criar sites que se comportam como aplicativos nativos, oferecendo uma experiência de usuário imersiva, responsiva e com alta performance. Neste artigo, vamos discutir como criar um site progressivo com o uso de PWA.

O que é uma PWA?

Uma Progressive Web App é um site que usa tecnologias modernas para oferecer uma experiência de usuário semelhante a um aplicativo nativo. As PWAs são construídas com base em três pilares principais: segurança, desempenho e acessibilidade. Além disso, as PWAs também oferecem recursos avançados, como notificações push, armazenamento offline e integração com o sistema operacional.

Como criar uma PWA?

Para criar uma PWA, você precisa seguir alguns passos:

Passo 1: Tornar o site responsivo

Para que o site seja responsivo e funcione em diferentes dispositivos, é importante usar técnicas de design responsivo, como usar media queries e layouts flexíveis.

Passo 2: Tornar o site seguro

Para tornar o site seguro, é necessário usar HTTPS para proteger a comunicação entre o servidor e o cliente. Isso ajuda a evitar ataques de hackers e protege a privacidade do usuário.

Passo 3: Adicionar um manifesto

O manifesto da PWA é um arquivo JSON que define as configurações da PWA, como o nome, ícone, cor de fundo, tela inicial e outros recursos. O manifesto deve ser adicionado ao cabeçalho do site.

Passo 4: Adicionar um Service Worker

O Service Worker é um script JavaScript que roda em segundo plano e gerencia o cache do site. Ele permite que o site funcione offline e oferece um desempenho melhorado, armazenando os recursos em cache.

Passo 5: Adicionar recursos avançados

Além dos recursos básicos, as PWAs também oferecem recursos avançados, como notificações push, armazenamento offline e integração com o sistema operacional. Esses recursos podem ser adicionados usando APIs da Web modernas.

Conclusão

As Progressive Web Apps são uma ótima maneira de oferecer uma experiência de usuário imersiva, responsiva e com alta performance. Para criar uma PWA, é necessário tornar o site responsivo, seguro e adicionar um manifesto e um Service Worker. Além disso, você também pode adicionar recursos avançados, como notificações push, armazenamento offline e integração com o sistema operacional. Ao seguir essas etapas, você pode criar um site progressivo e oferecer uma experiência de usuário de alta qualidade para seus usuários.

As melhores práticas para desenvolver interfaces acessíveis

Marlon Frade — Tue, 13 Jun 2023 11:12:35 +0000

A acessibilidade é um aspecto fundamental do design de interfaces, mas muitas vezes é negligenciada. Interfaces acessíveis não são apenas importantes para pessoas com deficiência, mas também para melhorar a experiência do usuário em geral. Neste artigo, vamos discutir algumas das melhores práticas para desenvolver interfaces acessíveis.

Use tags apropriadas

As tags apropriadas ajudam os usuários a entender o conteúdo e a navegar em sua interface. Ao desenvolver sua interface, certifique-se de usar tags apropriadas, como <h1>, <h2>, <p>, etc. Isso ajudará os usuários a entender a estrutura da página e a encontrar o conteúdo relevante com mais facilidade.

Adicione descrições alternativas a imagens

Para usuários que utilizam leitores de tela, é importante adicionar descrições alternativas a imagens. Essas descrições explicam o conteúdo da imagem e ajudam a fornecer uma experiência mais completa para o usuário. Certifique-se de usar descrições claras e concisas, que descrevam o conteúdo da imagem de forma adequada.

Use cores com contraste suficiente

Para usuários com deficiência visual, é importante usar cores com contraste suficiente. Certifique-se de que o texto e os elementos da interface possuam contraste suficiente para serem facilmente legíveis. Existem várias ferramentas disponíveis para testar o contraste de cores em sua interface, como o Contrast Checker do WebAIM.

Use teclado para navegação

Para usuários que não conseguem usar o mouse, é importante usar o teclado para navegação. Certifique-se de que todos os elementos da interface possuam foco de teclado e possam ser navegados com as teclas TAB e SHIFT+TAB. Além disso, certifique-se de que todas as interações possam ser realizadas usando apenas o teclado.

Verifique a ordem de leitura

Para usuários que utilizam leitores de tela, é importante verificar a ordem de leitura da página. Certifique-se de que a ordem de leitura esteja correta, seguindo a ordem visual da página. Isso ajudará os usuários a entenderem melhor o conteúdo da página e a navegar com mais facilidade.

Conclusão

Desenvolver interfaces acessíveis é importante para fornecer uma experiência positiva para todos os usuários. Usar tags apropriadas, adicionar descrições alternativas a imagens, usar cores com contraste suficiente, usar o teclado para navegação e verificar a ordem de leitura são algumas das melhores práticas para desenvolver interfaces acessíveis. Ao seguir essas práticas, você pode criar interfaces mais inclusivas e acessíveis para todos os usuários.

Tudo o que você precisa saber sobre Flexbox e Grid Layout

Marlon Frade — Tue, 13 Jun 2023 11:12:17 +0000

Se você é um desenvolvedor front-end, provavelmente já ouviu falar de Flexbox e Grid Layout. Ambas são técnicas de layout CSS poderosas que podem ajudá-lo a criar layouts flexíveis e responsivos em seus projetos. Neste artigo, vamos discutir tudo o que você precisa saber sobre Flexbox e Grid Layout.

O que é Flexbox?

Flexbox é uma técnica de layout CSS que permite criar layouts flexíveis e responsivos. Com Flexbox, você pode criar layouts baseados em um sistema de caixas flexíveis que podem ser facilmente organizadas em uma única linha ou coluna, ou em várias linhas e colunas. Flexbox é especialmente útil para criar layouts para dispositivos móveis e telas pequenas.

O que é Grid Layout?

Grid Layout é outra técnica de layout CSS que permite criar layouts flexíveis e responsivos. Com Grid Layout, você pode criar layouts baseados em uma grade de linhas e colunas. Isso permite que você organize facilmente o conteúdo em um layout complexo, com controle preciso sobre a posição e o tamanho dos elementos.

Flexbox vs Grid Layout

Flexbox e Grid Layout têm algumas diferenças importantes. Flexbox é mais adequado para layouts baseados em uma única linha ou coluna, enquanto Grid Layout é mais adequado para layouts baseados em uma grade de linhas e colunas. Além disso, Flexbox é mais adequado para layouts simples, enquanto Grid Layout é mais adequado para layouts complexos.

Como Usar Flexbox e Grid Layout

Para usar Flexbox e Grid Layout em seus projetos, você precisa entender as propriedades CSS que controlam essas técnicas. Algumas das propriedades mais importantes incluem:

Propriedades do Flexbox

display: flex: define o elemento como um contêiner flexível.
flex-direction: define a direção principal dos itens flexíveis.
justify-content: define a posição dos itens flexíveis ao longo do eixo principal.
align-items: define a posição dos itens flexíveis ao longo do eixo secundário.

Propriedades do Grid Layout

display: grid: define o elemento como um contêiner de grade.
grid-template-rows e grid-template-columns: definem o número e o tamanho das linhas e colunas da grade.
grid-row-start e grid-row-end, grid-column-start e grid-column-end: definem a posição e o tamanho dos elementos na grade.

Conclusão

Flexbox e Grid Layout são técnicas poderosas de layout CSS que podem ajudá-lo a criar layouts flexíveis e responsivos em seus projetos. Ao entender as diferenças entre essas duas técnicas e as propriedades CSS associadas a cada uma delas, você pode criar facilmente layouts complexos e responsivos para seus projetos front-end.

10 Dicas para Melhorar a Performance do seu Site

Marlon Frade — Mon, 29 May 2023 20:59:53 +0000

Melhorar a performance do seu site pode ser uma tarefa desafiadora, mas é fundamental para oferecer uma experiência de usuário satisfatória e garantir um bom posicionamento nos resultados de busca do Google. Neste artigo, apresentaremos 10 dicas práticas para melhorar a performance do seu site.

1. Otimize suas imagens

Imagens pesadas podem afetar significativamente a performance do seu site. Certifique-se de otimizar suas imagens para a web, escolhendo um formato adequado e comprimindo-as adequadamente.

2. Use uma CDN

Uma CDN (Content Delivery Network) pode ajudar a melhorar a velocidade de carregamento do seu site, distribuindo o conteúdo para servidores localizados em diferentes partes do mundo.

3. Minimize o uso de plugins e scripts

Plugins e scripts podem adicionar funcionalidades interessantes ao seu site, mas também podem afetar negativamente a performance. Evite usar plugins e scripts desnecessários e mantenha apenas aqueles que são realmente importantes.

4. Use um sistema de cache

Usar um sistema de cache pode ajudar a reduzir o tempo de carregamento do seu site, armazenando temporariamente o conteúdo para que ele possa ser rapidamente acessado pelos usuários.

5. Priorize o conteúdo acima da aparência

A aparência do seu site é importante, mas é ainda mais importante garantir que o conteúdo seja carregado rapidamente. Priorize o conteúdo acima da aparência e evite adicionar elementos desnecessários que possam afetar a performance.

6. Comprima seus arquivos

Comprimir seus arquivos pode ajudar a reduzir o tamanho das páginas e, consequentemente, melhorar a performance do seu site. Use ferramentas como Gzip ou Brotli para comprimir seus arquivos.

7. Reduza o número de redirecionamentos

Redirecionamentos desnecessários podem afetar negativamente a performance do seu site. Reduza o número de redirecionamentos sempre que possível e certifique-se de que os redirecionamentos existentes estejam funcionando corretamente.

8. Use fontes da web

Usar fontes da web pode ajudar a melhorar a aparência do seu site, mas é importante escolher fontes que sejam otimizadas para a web e que não afetem negativamente a performance.

9. Minimize o uso de animações e efeitos

Animações e efeitos podem adicionar interatividade ao seu site, mas também podem afetar a performance. Use animações e efeitos com moderação e certifique-se de que eles sejam otimizados para a web.

10. Teste a performance regularmente

Testar a performance do seu site regularmente pode ajudar a identificar problemas e oportunidades de melhoria. Use ferramentas como o Google PageSpeed Insights ou o WebPageTest para testar a performance do seu site e identificar áreas que precisam ser melhoradas.

Espero que essas dicas ajudem a melhorar a performance do seu site!

Typescript - Alguns conceitos básicos

Marlon Frade — Mon, 29 May 2023 19:55:46 +0000

👋 Fala Dev,

A seguir teremos anotações sobre typescript, o curso irá abordar os principais conceitos e projetos na prática.

O que é o Typescript?

Typescript é um superset para a linguagem JavaScript
Ou seja, adiciona funções ao JavaScript, como a declaração de tipos de variável.
Pode ser utilizado no desenvolvimento de projetos com NodeJS e express para criação de APIS, e bibliotecas como React.
Precisa ser compilado pra JavaScript, pois não executamos TS;
Desenvolvido e mantido pela Microsoft

Exemplo

let x: number = 10;
console.log("antes", x);

x = 16;
console.log("depois", x);

Inferencia X Annotation

Ao trabalhar com projetos em typescript, será necessário estar familiarizado com qual caminho de tipagem seu código irá seguir.

//Inferencia X Annotation

let z = 16; 
// z="teste" -- erro

let y: number = 16;

Ou seja, podemos perceber que na inferência o Typescript entende a qual tipo a variável está sendo atribuída.

Porém cabe ressaltar que nem sempre a inferência vai funcionar, dado os contextos de cada situação, sendo necessário a recorrência da tipagem conforme segundo exemplo.

Analisando Tipagem Básica

let firstName: string = "Marlon";

let age: number = 25;

const isAdmin: boolean = true;

console.log(typeof firstName);

age = 26;

console.log(age);

String !== string - Em javascript nós temos os objetos que são em letra maiúscula, e as variáveis em letras minúsculas, porém em Typescript sempre iremos trabalhar com as letras minúsculas

Lembrando que o console do teu tipo deve ser o tipo que será utilizado para declarar o tipo da variável.

Analisando a Tipagem de Objetos

Array

Para trabalhar com listas e arrays, devemos utilizar a seguinte sintaxe:

const myNumbers: number[] = [1, 2, 3];

//declaramos o array como sendo um array de numbers
//sendo assim já podemos utilizar as propriedades do array como:

console.log(myNumbers);

console.log(typeof myNumbers);

console.log(myNumbers.length);

myNumbers.push(4);

console.log(myNumbers);

Tuple

No python, as tuplas são arrays cujos valores inseridos não podem ser modficados, no typescript, as tuplas terão suas tipagens declaradas dentro do array, como no exemplo abaixo:

let myTuple: [number, string, string[]];

myTuple = [5, "teste", ["a", "b"]];
// myTuple = [true, false, true] -- erro

Object Literals

Ao declarar objetos, uma chaves irá receber a tipagem dos dados, enquanto que a segunda chaves irá receber os dados de informação, por exemplo:

//object literals -> {prop: value}

const user: {
    name: string;
    age: number;
} = {
    name: "Marlon",
    age: 25,
};

console.log(user);

console.log(user.name);

// user.job = "programador" -- erro

Analisando Tipagem Múltipla

Any

O any foi feito pra aceitar qualquer tipo, indo contra a "filosofia" do typescript, mas também para definirmos uma variável que pode receber qualquer tipo de valor.

let a: any = 0;

a = "teste";
a = true;
a = [];

Lembrando que o any não deve ser utilizado em qualquer circunstância, mas sim dentro de um contexto específico onde não se pode prever o tipo do valor retornado ou declarado. Utilizá-lo fora desse contexto pode ser considerado uma má prática.

Union Type

Uma das formas de se unir tipos para criar um outro tipo mais complexo, pode ser chamado de union type. Essa seria uma maneira mais ==typescript== de se resolver os problemas de utilização de any fora de contexto, ou seja, não sabemos se os dados serão retornados em string ou number, aí ao invés de se utilizar o any podemos aderir ao union type, como no caso do id que dependendo do formato do projeto pode ser retornado como string
ou number.

let id: string | number = "1";

id = 200;
// id = true -- erro

Type Alias

Uma maneira eficiente de se criar código limpo e reutilizável é usando o type alias, como uma solução para o caso de decidir adicionar mais um tipo a variável ID do exemplo anterior, não sendo necessário deixar o código extenso, podemos adicionar um alias e reduzir a tipagem:

type myIdType = number | string;

const userId: myIdType = "1";
const productId: myIdType = 200;
const shirId: myIdType = 123;
// id = true -- erro

Enum

Um tipo de dado que enumera uma coleção para trabalharmos dados mais complexos de uma maneira mais simples, por exemplo:

// exemplo: tamanho de roupas (size: Médio, size: Pequeno)

enum Size {
    P = "pequeno",
    M = "Médio",
    G = "Grande",
}

const camisa = {
    name: "Camisa Gola V",
    size: Size.P,
};

console.log(camisa);

Analisando Tipagem Literal

Podemos aplicar valores literais para um tipo, sendo assim impossível que esse valor seja alterado posteriormente.

let teste: "algumvalor";
// teste = "outrovalor" -- erro

teste = "algumvalor";

Geralmente para poder resetar o valor aplicado a sua variável devemos usar o union type para declarar que a variável pode ser null, por exemplo

let teste2: "algumvalor" | null;

teste2 = "algumvalor";
teste2 = null;

Analisando Funções

Função Básica

Para se criar uma função no typescript, devemos usar a mesma semântica do javascript, porém todos os argumentos passados para a função devem ser tipados:

function sum(a: number, b: number) {
    return a + b;
}

console.log(sum(12, 13));
// console.log(sum("12", true)); -- erro

Tipagem do Retorno

Além de informar o tipo do parâmetro que estamos declarando, caso uma função tenha retorno, podemos declarar como no primeiro exemplo, e quando a função não possui retorno utilizamos a declaração do void para fazer a tipagem do retorno da função.

// Estamos informando que o retorno da função 
// deve ser uma string
function sayHelloTo(name: string): string {
    return `Hello ${name}`;
}

console.log(sayHelloTo("Marlon"));

// Quando a função não retornar nada como no 
// exemplo abaixo podemos usar o void
function logger(msg: string): void {
    console.log(msg);
}

logger("Hello World");

Parâmetros opcionais

Caso algum dos parâmetros da função sejam opcionais como no exemplo abaixo, podemos utilizar o ==?== e fazer as devidas tratativas de condicionais.

function greeting(name: string, greet?: string): void {
    console.log(`Olá, ${greet} ${name}`);
    if (greet) {
        console.log(`Olá, ${greet} ${name}`);
    } else {
        console.log(`Olá, ${name}`);
    }
}

greeting("Marlon");
greeting("Marlon", "Sir");

Ao usar o "?", colocamos o greet como opcional, não sendo obrigatório o parâmetro. Porém perceba que há um erro de lógica acima, onde o log do greet virá como undefined, o typescript não aponta esse erro pois colocamos o parâmetro como opcional, sendo responsabilidade do desenvolvedor tratar essa obrigatoriedade, como no exemplo acima.

Interfaces

As interfaces são um recurso do typescript que veio para o javascript, que padronizam algo para que possamos reutilizar como um tipo.

interface MathFunctionsParams {
    n1: number;
    n2: number;
}

// perceba que são dois parâmetros para uma função matemática, porém usando interface(objeto) e enum

function sumNumbers(nums: MathFunctionsParams) {
    return nums.n1 + nums.n2;
}

const result: number = sumNumbers({ n1: 1, n2: 2 });
console.log(result);

// utilizando de outras formas

const someNumbers: MathFunctionsParams = {
    n1: 5,
    n2: 10,
};

function multiplyNumbers(nums: MathFunctionsParams) {
    return nums.n1 * nums.n2;
}

const result2: number = multiplyNumbers(someNumbers);
console.log(result2);

Narrowing

Quando não sabemos qual tipo exato será o parâmetro de uma função, mas precisamos fazer uma tratativa com esses resultados, podemos usar o narrowing do typeof para tratar as condicionais:

function doSomething(info: number | boolean) {
    if (typeof info === "number") {
        console.log(`O número é ${info}`);
        return;
    }
    console.log(`Não foi passado nenhum número`);
}

doSomething(5)
doSomething(true)

Ao verificar o typeof de um parâmetro, estamos usando um narrowing de typeof para garantir que o retorno será de acordo com o parâmetro passado.

Generics

Um outro recurso do typescript é o generics, que para se evitar um any, pode ser aplicado em diferentes situações que possuem a necessidade de se declarar um tipo genérico, que pode receber mais de um tipo de valor não esperado, como uma função que mostra os itens de um array, porém não sabemos se os itens virão como number, string, ao invés do any podemos utilizar o generics para declarar um tipo genérico seguindo a seguinte linha de desenvolvimento

function showArrayItems<T>(arr: T[]) {
    arr.forEach((item) => {
        console.log(item);
    });
}

const a1 = [1, 2, 3];
const a2 = ["1", "2", "3"];

showArrayItems(a1);
showArrayItems(a2);

Usamos a tag <> após o nome da função para remeter a algo genérico, como por exemplo T e U (que são mais utilizados no typescript). No caso acima utilizamos a tag T referenciando dentro do parâmetro para exemplificar que esperamos receber qualquer tipo de dado nesse array, porém sendo mais especificado que um simples any.

Classes

Class é um método de orientação a objeto utilizado para definir novas classes como no exemplo abaixo:

class User {
    name;
    role;
    isApproved;
    constructor(name: string, role: string, isApproved: boolean) {
        this.name = name;
        this.role = role;
        this.isApproved = isApproved;
    }
}

const marlon = new User("Marlon", "admin", true);
console.log(marlon);

Na utilização de classes, precisamos usar um constructor pois o typescript solicita numa class a tipagem dos dados e um inicializador, portanto sendo mais sucinto declarar os tipos num constructor e utilizar a tipagem por inferência, ou seja, declarar no constructor os tipos e atribuir aos valores do objeto.

Podemos também utilizar os constructor para criar métodos, como por exemplo:

class User {
    name;
    role;
    isApproved;
    constructor(name: string, role: string, isApproved: boolean) {
        this.name = name;
        this.role = role;
        this.isApproved = isApproved;
    }
    showUserName() {
        console.log(`O nome do usuário é ${this.name}`);
    }
}

const marlon = new User("Marlon", "admin", true);
marlon.showUserName();

Um outro exemplo utilizando parâmetros:

class User {
    name;
    role;
    isApproved;
    constructor(name: string, role: string, isApproved: boolean) {
        this.name = name;
        this.role = role;
        this.isApproved = isApproved;
    }
    showUserRole(canShow: boolean) {
        if (canShow) {
            console.log(`O role do usuário é ${this.role}`);
            return;
        }
        console.log(`informação restrita!`);
    }
}

const marlon = new User("Marlon", "admin", true);
console.log(marlon);

marlon.showUserRole(true);
marlon.showUserRole(false);

Interfaces em classes

Interfaces é o core da orientação a objetos, geralmente sendo utilizada para ditar como uma classe irá se comportar. Sendo muito útil em projetos onde há classes que são muito parecidas, ou seja, tendo um padrão entre elas. Um exemplo de uma interface de veículos:

interface IVehicle {
    brand: string;
    showBrand(): void;
}

class Car implements IVehicle {
    brand;
    wheels;
    constructor(brand: string, wheels: number) {
        this.brand = brand;
        this.wheels = wheels;
    }
    showBrand(): void {
        console.log(`A marca do carro é ${this.brand}`);
    }
}

const mustang = new Car("Ford", 4);
mustang.showBrand();

Para criar interfaces, utiliza-se a letra "I" no início do nome para especificar que será uma interface. No exemplo acima, a interface "IVehicle" é utilizada na class "Car" através do comando "implements".

Herança

Uma class também pode herdar outra class, como por exemplo, criando uma nova class Super Car que herda os tipos da class no exemplo anterior Car:

class SuperCar extends Car {
    engine;
    constructor(brand: string, wheels: number, engine: number) {
        super(brand, wheels);
        this.engine = engine;
    }
}

// criando uma nova class supercar com herança

const a4 = new SuperCar("Audi", 4, 2.0);

console.log(a4);
a4.showBrand();

No exemplo acima utilizamos uma nova class que possui sua herança da class Car, porém nessa nova class adicionamos a nova chave "engine". Para se utilizar o constructor dentro da class herdada, devemos passar os tipos que declaramos no constructor "pai" e o novo declarado no constructor filho, e para atribuir os valores, utilizamos o "super" para extrair esses valores da class "pai".

Decorators

Os decorators são um recurso do typescript muito utilizados para validação de dados, para construir um evento observável em alguma class ou função. Um recurso complexo para quem é iniciante no typescript. Porém caso deseje utilizar, lembre-se de habilitar o mesmo dentro do seu arquivo de configuração, através da chave experimentalDecorators.

class Person {
    name;
    constructor(name: string) {
        this.name = name;
    }
}

Temos a class Person que recebe a variável name quando o usuário é criado, porém se quiser adicionar um id e uma data de criação para esse usuário, podemos utilizar um constructor, uma vez que não é o usuário que preenche essas informações, ambas devem ser geradas pelo sistema.

Constructor são funções que retornam outras funções que contenham as informações que queremos alterar na class base.

function BaseParams() {
return function <T extends { new (...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
    id = Math.random();
    createdAt = new Date();
    };
};

}

//Chamando o constructor
@BaseParams()

class Person {
    name;
    constructor(name: string) {
    this.name = name;
    }
}

const newUserMarlon = new Person("Marlon");
console.log(newUserMarlon);

A função baseParams basicamente cria os parâmetros base para a criação de qualquer outra class, nesse caso contendo um id e uma data de criação.

Para trabalhar com construtores, devemos esperar qualquer tipo de argumento, pois como serão parâmetros base para as classes, teremos provavelmente classes diferentes umas das outras, portanto adotar uma abordagem mais genérica, tentando sempre evitar o any. Para isso utilizaremos a tag genérica.

Para utilizar um constructor devemos usar o "@" para exemplificar que estamos utilizando um constructor dentro do código.

Configurando o Projeto

Verificar se o typescript está instalado na máquina:

npx tsc -v

Ou usando yarn:

yarn tsc -v

Caso não tenha o typescript instalado na sua máquina, verifique a documentação para poder instalar de acordo com seu gerenciador de pacotes preferido.

Assim que tiver o arquivo instalado na máquina, pode prosseguir com o seguinte comando para iniciar um arquivo de configuração:

Certifique-se de já estar dentro do seu diretório

npx tsc --init

Arquivo de configuração criado, pode-se alterar esse arquivo tsconfig.json da seguinte maneira:

rootDir - Diretório root, deve ser alterado para onde ficará armazenado o index.ts da sua aplicação (No caso do projeto a pasta src);

outDir - Diretório de saída, deve ser apontado o diretório que será compilado o arquivo javascript, nesse caso dentro da pasta dist na pasta js

Para validar, crie seu "Hello World" no arquivo index.ts e para compilar rode no seu terminal o comando npx tsc, e certifique-se se a leitura do arquivo de entrada e saída estão de acordo.

target - O target define a linguagem javascript que será compilada, portanto certifique-se de utilizar a versão que mais se adapta ao seu projeto.

Ao final, sua estrutura deve ficar parecido com algo tipo isso:

├── dist (or build)
│   ├── js
│   │   ├── index.js
│   ├── index.html
├── src
│   ├── index.ts
└── tsconfig.json

Compilando o Projeto

Para que o arquivo index.js seja observado pelo typescript para que qualquer alteração seja alterado novamente, podemos usar o comando:

npx tsc -w

Se você utiliza o VScode como IDE, pode-se usar a extensão live-server para abrir um servidor para servir sua aplicação estática, e tendo acesso ao console poderá ver o javascript que está sendo gerado pelo typescript.

Como utilizar o Raycast para automatizar tarefas repetitivas e aumentar sua produtividade

Marlon Frade — Wed, 24 May 2023 01:02:11 +0000

Você já perdeu tempo navegando em vários aplicativos para realizar uma única tarefa? Já pensou em como seria incrível se pudesse automatizar suas tarefas diárias e economizar tempo? Se você respondeu sim a essas perguntas, então o Raycast pode ser a solução para você.

O Raycast é uma ferramenta de produtividade que permite automatizar tarefas repetitivas e acessar rapidamente seus aplicativos favoritos por meio de atalhos de teclado. Com o Raycast, você pode realizar tarefas como enviar e-mails, criar lembretes, iniciar chamadas de vídeo e muito mais sem sair da tela do seu computador.

Por que usar o Raycast?

O Raycast é uma ferramenta útil para qualquer pessoa que deseja economizar tempo e aumentar sua produtividade. Com o Raycast, você pode:

Acessar rapidamente seus aplicativos favoritos usando atalhos de teclado.
Automatizar tarefas repetitivas para economizar tempo.
Enviar mensagens e-mails, criar lembretes, iniciar chamadas de vídeo e muito mais sem sair da tela do seu computador.
Pesquisar rapidamente arquivos, pastas e até mesmo sites usando atalhos de teclado.
Personalizar sua experiência com plug-ins que atendam às suas necessidades específicas.

Como começar a usar o Raycast?

Para começar a usar o Raycast, você precisa primeiro baixar o aplicativo em seu site oficial. O Raycast é compatível com Mac e requer macOS 10.14 ou superior.

Depois de baixar e instalar o aplicativo, você pode começar a personalizar suas configurações e atalhos de teclado. O Raycast oferece várias opções de personalização, incluindo:

Adicionando atalhos de teclado para seus aplicativos favoritos.
Adicionando plug-ins que correspondam às suas necessidades específicas.
Personalizando a aparência do aplicativo.

Depois de personalizar suas configurações, você pode começar a usar o Raycast para automatizar suas tarefas diárias e acessar rapidamente seus aplicativos favoritos.

Conclusão

O Raycast é uma ferramenta útil para qualquer pessoa que deseja economizar tempo e aumentar sua produtividade. Com o Raycast, você pode automatizar tarefas repetitivas e acessar rapidamente seus aplicativos favoritos usando atalhos de teclado. Além disso, o Raycast oferece várias opções de personalização para atender às suas necessidades específicas. Experimente o Raycast hoje e comece a economizar tempo em suas tarefas diárias.

Raindrop - como organizar suas referências e bookmarks de forma eficiente para melhorar seu fluxo de trabalho

Marlon Frade — Wed, 24 May 2023 00:59:10 +0000

Se você é uma pessoa que utiliza muito a internet para trabalho ou estudo, provavelmente se depara com uma grande quantidade de informações e referências diariamente. Para organizar todas essas informações, uma solução muito útil é o Raindrop.

O Raindrop é uma ferramenta de bookmarking que permite salvar links, imagens e vídeos de forma organizada em uma única plataforma. Com ele, é possível categorizar as referências por assunto, tags ou pastas, o que ajuda na busca e no acesso rápido às informações salvas.

Como usar o Raindrop

Para começar a usar o Raindrop, é necessário criar uma conta no site oficial. Depois de criar a conta, você pode instalar a extensão do Raindrop para o seu navegador de preferência.

Com a extensão instalada, sempre que encontrar uma página, imagem ou vídeo que queira salvar, basta clicar no ícone do Raindrop que estará no canto superior direito da tela. Ao clicar no ícone, uma janela será aberta para que você possa escolher a pasta, tag ou categoria em que deseja salvar a referência.

Além disso, o Raindrop também permite importar bookmarks de outros serviços de bookmarking, como o Pocket e o Delicious, o que é muito útil para quem já tem uma grande quantidade de referências salvas em outros serviços.

Como o Raindrop pode melhorar seu fluxo de trabalho

Com o Raindrop, é possível organizar todas as suas referências e bookmarks em um único lugar, o que facilita muito a busca e o acesso rápido às informações salvas. Além disso, a ferramenta também permite compartilhar as referências salvas com outras pessoas, o que é útil para quem trabalha em equipe ou precisa compartilhar referências com outras pessoas.

Outra funcionalidade interessante do Raindrop é a possibilidade de salvar referências com tags, o que permite categorizar as referências de acordo com assunto, tema ou qualquer outra categoria que você queira. Com isso, é possível realizar buscas específicas por tags e encontrar rapidamente as referências relacionadas.

Conclusão

O Raindrop é uma ferramenta muito útil para quem trabalha com muitas referências e precisa organizar tudo de forma eficiente. Com ele, é possível salvar links, imagens e vídeos de forma organizada em uma única plataforma, categorizar as referências por assunto, tags ou pastas, importar bookmarks de outros serviços de bookmarking e compartilhar referências com outras pessoas. Tudo isso ajuda a melhorar o fluxo de trabalho e aumentar a produtividade. Experimente o Raindrop e veja como ele pode facilitar o seu dia a dia!

SaaS - Entenda o significado do termo e sua importância para o mundo do software

Marlon Frade — Wed, 24 May 2023 00:53:12 +0000

Nos últimos anos, o termo SaaS tem se tornado cada vez mais comum no mundo da programação. Mas você sabe o que é SaaS e qual a sua importância?

SaaS é a sigla para Software as a Service, ou Software como Serviço em português. Esse modelo de computação em nuvem permite que um software seja oferecido como serviço para os usuários finais. Em vez de comprar uma licença de uso, o usuário paga por um acesso ao serviço, que pode ser utilizado por meio de uma conexão com a internet.

Antes do surgimento do SaaS, era comum comprar softwares em caixas e instalá-los em servidores próprios, o que gerava custos significativos para as empresas e limitava a utilização do software. Com o SaaS, a infraestrutura necessária para rodar o software fica a cargo do provedor do serviço, o que reduz significativamente os custos para o usuário final.

Além disso, o uso do SaaS permite que o usuário tenha acesso a atualizações e novas funcionalidades do software de forma mais rápida e eficiente. Como o provedor do serviço é responsável pela infraestrutura, ele pode facilmente implementar novas funcionalidades e atualizações, sem que o usuário precise se preocupar em atualizar seus servidores e sistemas.

Outra grande vantagem do SaaS é a possibilidade de acessar o software de qualquer lugar e dispositivo, desde que se tenha uma conexão com a internet. Isso traz uma maior mobilidade e flexibilidade para os usuários, que podem trabalhar de qualquer lugar e não ficam limitados a um único dispositivo.

O SaaS é uma das modalidades de computação em nuvem mais utilizadas pelos usuários finais e pode ser encontrado em serviços como e-mail, armazenamento de arquivos e softwares de produtividade, como o Office 365. O modelo SaaS também mudou o mercado de vendas de software, com empresas como a SAP e a Microsoft adotando cada vez mais esse modelo de comercialização.

Para os desenvolvedores, o surgimento do SaaS trouxe novos desafios, já que agora é necessário pensar na infraestrutura necessária para rodar o software e em como oferecer o serviço de forma eficiente e escalável. No entanto, o modelo SaaS também oferece novas oportunidades, como a possibilidade de desenvolver softwares para serem utilizados como serviço, o que pode gerar uma nova fonte de receita para as empresas de software.

Em resumo, o SaaS é uma modalidade de computação em nuvem que permite que um software seja oferecido como serviço para os usuários finais. Ele traz uma série de vantagens, como a redução de custos, a facilidade de acesso e a possibilidade de atualizações e novas funcionalidades. Para os desenvolvedores, o SaaS representa novos desafios e oportunidades, e é uma tendência cada vez mais forte no mundo do software.

Guia para usar o Terminal como uma IDE com Neovim e AstroNvim

Marlon Frade — Thu, 04 May 2023 11:42:19 +0000

Você já se perguntou se poderia usar o terminal como uma IDE? Isso pode parecer estranho para alguns, mas é totalmente possível com o uso do Neovim e do AstroNvim. Este guia vai te ajudar a transformar o seu terminal em uma ferramenta de desenvolvimento poderosa.

O que é Neovim e AstroNvim?

Neovim é um fork do Vim que foi desenvolvido para melhorar a performance, estabilidade e extensibilidade do editor de texto. Ele é compatível com a maioria dos plugins do Vim e oferece suporte a várias linguagens de programação.

AstroNvim é uma pré-configuração para o Neovim que inclui uma série de recursos essenciais para desenvolvedores, como destaque de sintaxe, diagnósticos de linguagem, formatação, linting, integração com o Git e um explorador de arquivos. Além disso, é altamente personalizável, permitindo que você configure o editor da maneira que mais lhe convier.

Configuração

Antes de começar a usar o Neovim e o AstroNvim, você precisa instalá-los. Para isso, é necessário ter o pacote neovim instalado em seu sistema operacional. Em seguida, você pode instalar o AstroNvim.

AstroNvim é uma configuração que adiciona recursos essenciais ao Neovim, permitindo que você use o Terminal como uma IDE. Ele inclui destaque de sintaxe, diagnósticos de idioma, formatação, linting, integração Git e um explorador de arquivos, tornando-o uma opção moderna e altamente personalizável para a edição de código.

Instalação e Configuração

Instalação

Para começar, você precisará ter o Neovim instalado no seu sistema. Depois de instalá-lo, você pode clonar o repositório AstroNvim do GitHub com o seguinte comando:

git clone https://github.com/LunarVim/LunarVim.git ~/.config/nvim

Isso criará uma pasta chamada nvim em seu diretório de configuração e configurará o Neovim para usar o AstroNvim.

Configuração

Primeiro, inicie o seu neovim com o comando nvim e deixe que o Lazy faça o download de todas as dependências do Astro. Assim que finalizado, você pode sair usando o tecla q .

Para configurar seu vim, utilize o repositório user_example como template para criar seu repositório de configuração.

Após criar o seu repositório, clone ele para suas configurações utilizando o comando como no exemplo abaixo:

Lembre-se de substituir o User e username pelo seu repositório específico.

git clone git@github.com:User/username_config.git ~/.config/nvim/lua/user

Agora navegue até o diretório clonado para iniciarmos as configurações e primeiras navegações do seu AstroNvim.

cd ~/.config/nvim/lua/user
nvim

O lazy irá carregar novamente, aguarde finalizar e feche com a tecla q por enquanto.

Uso do AstroNvim

O AstroNvim vem com uma série de plugins pré-instalados que adicionam recursos adicionais ao Neovim. Alguns dos plugins incluídos são:

nvim-lspconfig
nvim-treesitter

Alguns recursos úteis incluem:

:LspInstall: instala servidores de linguagem para oferecer recursos mais avançados, como auto-completar, refatoração e documentação.
:LspInfo: mostra informações sobre o servidor de linguagem atual.
:Git: abre a interface do Git para realizar ações como adicionar, commitar e pushar alterações.

Astro segue uma convenção de tecla de atalho, em que a maioria das ações são acionadas pressionando a tecla espaço, seguida de outra tecla. Por exemplo, é possível pressionar espaço seguido de e para abrir o explorador de arquivos. Dentro do neo-tree, é possível navegar usando as teclas hjkl. Para abrir diretórios, é possível usar a tecla l, e para fechá-los, a tecla h.

Para maiores configurações, você pode acessar a documentação LSP Contendo um tutorial mais completo a respeito do astroNvim e das configurações acessando cada arquivo. Além da documentação Debugger. Por hora, iremos configurar apenas o padrão.

Comandos Para o AstroNvim

Comando simples

Comando	Descrição
`Space`	Esta é a tecla líder no AstroVim. É usada para acionar a maioria das ações no AstroVim.
`Space + e`	Isto abre o explorador de arquivos no AstroVim.
`hjkl`	Estas teclas são usadas para navegar dentro do explorador de arquivos NeoTree.
`l`	Esta tecla é usada para abrir um diretório no NeoTree.
`h`	Esta tecla é usada para fechar um diretório no NeoTree.
`Space + o`	Isto retorna o foco para o NeoTree.
`Ctrl + s`	Isto é usado para salvar as alterações em um arquivo.
`Ctrl + q`	Isto é usado para sair do AstroVim.
`Space + n`	Cria um novo arquivo
`Space + h`	Abre a tela inicial do AstroNvim

Estrutura de Arquivos de Configuração

├── highlights
│   ├── duskfox.lua
│   └── init.lua
├── init.lua
├── mappings.lua
├── options.lua
└── plugins
    ├── community.lua
    ├── core.lua
    ├── mason.lua
    ├── null-ls.lua
    ├── treesitter.lua
    └── user.lua

Init.lua

O Astro utiliza a linguagem Lua, uma linguagem simples de script para configuração. O seu arquivo init.lua contém algumas configurações importantes como updater , colorscheme , formatting dentro da configuração LSP , e uma função polish que pode rodar qualquer código no final da inicialização.

Mappings.lua

Dentro do arquivo mappings.lua podemos mapear nossas teclas, usando configurações separadas por modo. No arquivo mappings.lua, temos a letra "N" como "Normal Mode", "T" para terminal, "I" para o "Insert Mode" e "V" para o "Visual Mode". Caso queira criar algum atalho utilizando a Tecla Espaço, você poderia adicionar um novo comando dentro do modo "N" como no exemplo abaixo:

O comando é um exemplo de como printar "Hello World" usando apenas os atalhos Espaço + Tecla a .

Para executar um comando, lembre-se de finalizar utilizando o comando cr que funciona como "Carriage Return" para a tecla Enter.

Pasta Plugins

Para configurar plugins no AstroNvim, você pode editar os arquivos dentro da pasta plugins. Para melhor compreensão segue as especificações de alguns arquivos importantes e suas respectivas configurações.

Treesitter.lua

Um arquivo que retorna uma configuração para o treesitter, que é um "Code Highlighter" que auxilia na visualização do código. Para utilizá-lo, você precisa adicionar os Languages Parsers, ou dentro da chave "OPTS" (utilizando o ensure_installed) ou utilizando o comando :TSInstall

Mason.lua

Um arquivo que contém configurações sobre múltiplos plugins que podem ser baixados e configurados para utilizar, como Language Servers, Linters, Formatters e Debuggers. Por hora, mantenha o arquivo na seguinte configuração:

Você pode encontrar um Package List do Mason nesse link.

User.lua

Neste arquivos adicionaremos configurações de plugins que adicionamos fora do AstroNvim. Para isso utilizaremos um exemplo do repositório TODO comments , certifique de possuir todos os requerimentos para instalação do pacote, como uma patched font e o ripgrep por exemplo. Utilizando a configuração padrão de acordo com o repositório temos o arquivo da seguinte maneira:

Para configurar mais a fundo nossos plugins instalados, precisamos entender melhor como funciona o gerenciador LAZY.

Lazy Events

O gerenciador de plugins Lazy do AstroVim é configurado para carregar plugins de forma preguiçosa (lazy) por padrão, com o objetivo de melhorar a performance. O termo "Lazy" faz referência à preguiça em carregar todos os plugins de uma vez só. É possível especificar eventos, comandos ou atalhos que carregam o plugin. Caso deseje desativar o carregamento preguiçoso, basta definir a chave "lazy" como false. Neste caso, para carregar o plugin quando um arquivo é aberto, utilize o evento "User AstroFile". Existem outros eventos comuns que podem ser utilizados para carregar plugins, sendo o evento "VeryLazy" útil para carregar plugins na inicialização. Depois de reiniciar, é possível observar o Lazy instalando o novo plugin.

Evento	Quando é acionado
User AstroFile	Acionado quando um arquivo é aberto
VeryLazy	Acionado assim que o Neovim é iniciado
BufEnter * .lua	Acionado ao abrir um arquivo Lua
InsertEnter	Acionado ao iniciar o Insert Mode
LspAttach	Acionado depois de iniciar os LSPs

Sendo que os eventos podem ser um ou mútiplos:

event = "User AstroFile"
ou
event = {"InsertEnter", "User AstroFile"}

Agora que já entendemos como funciona o gerenciador Lazy, podemos continuar configurando nosso plugin TODO. Para isso, temos o arquivo user.lua editado.

A chave event está relacionado ao formato de carregamento do Lazy. Como definimos para o evento somente carregar o Plugin quando o arquivo estiver aberto, podemos usar a chave cmd, para configurar algum comando que desejamos realizar fora do AstroNvim. As keys funcionam da mesma maneira que no arquivo mappings.lua, podendo ser adaptadas para um atalho novo, como no exemplo que usei as teclas Espaço + T (maiúsculo) para que funcione como o comando que abre o Telescope para visualizar meus TODOs.

AstroNvim Community

Uma das features que o AstroNvim entrega é a sua comunidade de plugins, contendo configurações simplificadas para instalar plugins dentro do AstroNvim.

Caso você deseje dar uma olhada nos plugins criados ou feitos pela comunidade. Você pode acessar o repositório da comunidade AstroNvim. A comunidade facilita a instalação dos plugins, permitindo ao usuário que adicione plugins para gestão de projetos, colorscheme para personalização da IDE, e languages packs com apenas uma linha de comando, como no exemplo.

Features do AstroNvim

Which-Key

Ao pressionar uma tecla de comando como o espaço, um popup de opções irá aparecer no painel da IDE para autocompletar o seu comando, ou seja, o AstroNvim sempre lhe dará sugestões de comando ao pressionar uma tecla gatilho. Os sub-menus com mais opções estará destacado de azul

Telescope

Para abrir o telescope, temos com o exemplo o comando space + ff e o space+fo, ao entrar em algum desses modos, por padrão você estará no modo de Inserção. para buscar, comece a digitar, e use os atalhos ctrl+j e ctrl+k para navegar nos arquivos. Do lado direito, onde aprece uma pré do arquivo, você pode utilizar os comandos ctrl+d e ctrl+u para navegar para cima e para baixo nos arquivos visualizados. Ao clicar em esc você sai do modo de Inserção e volta ao modo normal, permitindo que navegue no campo de busca utilizando os comandos hl para navegar na caixa de pesquisa e os comando jk para navegar nos arquivos buscados. Use o comando ? para abrir um popup de opções de comandos. Use os comandos ctrl+p e ctrl+n para retornar e avançar nas últimas buscas feitas. use os comandos espaço+fw e espaço+fc, para procurar palavras específicas e para procurar por palavras semelhantes a que está no seu cursor.

Um outro atalho importante não mencionado aqui, é o space+/ que comenta as linhas selecionadas ou a linha atual que está digitando.

Buffers

Para criar um novo buffer, utilize o space+n e para fechar, utilize o space+c, para navegar entre as abas, utilize o comando [+b e ]+b

NeoTree

Para abrir o gerenciador de arquivos, utilize o comando space+e e para visualizar os demais comandos, utilize o ?. Alguns comandos úteis incluem o space+H para mostrar e esconder arquivos escondidos como .git por exemplo. A tecla a permite que você crie arquivos ou diretórios, enquanto que as teclas r e d permitem que você delete os arquivos.

Splits

O comando space+o muda o foco entre o neotree e os buffers, utilize o comandos ctrl+l e ctrl+h para navegar entre buffer e neotree também. Utilize o comando space+\ para dividir o buffer horizontalmente. Utilize o comando ctrl+| para dividir verticalmente, e o ctrl seguido das teclas de navegação hjkl permitem que você navegue entre as "split buffers". Para redimensionar utilize o ctrl seguido da teclas com seta de navegação (Arrow Keys) e para fechar use o comando ctrl+q, utilizando as teclas < ou > seguido da tecla b você move o seu buffer para esquerda ou direita, respectivamente.

Git Integration

Utilize o comando espaço + g para ver as opções possíveis de integração entre o AstroNvim e o Git.

Language Support

O AstroNvim pode auxiliar no suporte a linguagem, alguns dos atalhos mais úteis estão nessa tabela de exemplo:

Key	Descrição
Ctrl+espaço	Completar código automaticamente durante a digitação
Ctrl+e	Fechar a janela de completar código
K	Mostrar uma prévia do tipo do símbolo sob o cursor
gT	Ir para a definição de tipo de um símbolo
Ctrl+o	Voltar da definição de tipo de um símbolo
gI	Ir para a implementação de um símbolo
gd	Ir para a definição de um símbolo
gr	Mostrar referências de um símbolo em todo o projeto
gl	Ver a mensagem completa de erro
gl(gl novamente)	Ir para dentro da janela pop-up da mensagem de erro
q	Fechar a janela pop-up da mensagem de erro
`[`	Ir para o erro anterior
]	Ir para o próximo erro
leader l D	Ver todas as mensagens de diagnóstico no buffer
leader l r	Renomear símbolos
leader l f	Formatar o buffer
leader l a	Exibir ações de código e aplicá-las
Enter	Aplicar ação de código selecionada
F7	Alternar terminal flutuante
jj or jk	Substituir o pressionamento da tecla Esc na inserção de texto
Ctrl+clique em um símbolo	Ir para a definição de um símbolo
Clicar nas migalhas	Ir para uma parte específica do código
Mouse	Usar o mouse para selecionar, focar, mudar e fechar buffers, abrir arquivos, selecionar guias, mudar branches git e ver informações detalhadas de LSP
Alt	Selecionar um bloco de texto
leader Shift+s, s	Salvar sessão
leader Shift+s, .	Carregar sessão

Conclusão

O AstroNvim é uma ótima opção para quem deseja usar o Terminal como uma IDE. Com suas configurações pré-configuradas e plugins, você pode melhorar significativamente sua eficiência e produtividade na edição de código. Com o suporte a servidores de idiomas e o gerenciador de plugins Lazy, você pode personalizar sua experiência de edição de acordo com suas necessidades específicas. Espero que este guia o ajude a começar a usar o AstroNvim em seu projeto! Usando o AstroNvim, podemos transformar nosso terminal em uma poderosa IDE para programação. Com recursos avançados de edição de texto, integração com Git e servidores de linguagem, o AstroNvim pode ajudar a melhorar a eficiência e produtividade do nosso fluxo de desenvolvimento. Ao seguir as etapas descritas neste guia, podemos instalar e configurar facilmente o AstroNvim em nosso terminal e começar a escrever código com mais facilidade.

Forem: Marlon Frade

Como utilizar ferramentas de automação de mídias sociais para melhorar sua presença online e aumentar o alcance do seu blog

1. Hootsuite

2. Buffer

3. Sprout Social

4. CoSchedule

5. MeetEdgar

Como utilizar o Obsidian para melhorar sua produtividade na criação e organização de conteúdo para seu blog

O que é Obsidian?

Como o Obsidian pode ajudar na criação de conteúdo para o seu blog?

Como começar a usar o Obsidian para melhorar sua produtividade na criação de conteúdo para o seu blog?

Atalhos de Teclado para o Obsidian

Atalhos Básicos

Atalhos de edição 🕹️

Conclusão

Como criar um site progressivo com o uso de PWA (Progressive Web Apps)

O que é uma PWA?

Como criar uma PWA?

Passo 1: Tornar o site responsivo

Passo 2: Tornar o site seguro

Passo 3: Adicionar um manifesto

Passo 4: Adicionar um Service Worker

Passo 5: Adicionar recursos avançados

Conclusão

As melhores práticas para desenvolver interfaces acessíveis

Use tags apropriadas

Adicione descrições alternativas a imagens

Use cores com contraste suficiente

Use teclado para navegação

Verifique a ordem de leitura

Conclusão

Tudo o que você precisa saber sobre Flexbox e Grid Layout

O que é Flexbox?

O que é Grid Layout?

Flexbox vs Grid Layout

Como Usar Flexbox e Grid Layout

Propriedades do Flexbox

Propriedades do Grid Layout

Conclusão

10 Dicas para Melhorar a Performance do seu Site

1. Otimize suas imagens

2. Use uma CDN

3. Minimize o uso de plugins e scripts

4. Use um sistema de cache

5. Priorize o conteúdo acima da aparência

6. Comprima seus arquivos

7. Reduza o número de redirecionamentos

8. Use fontes da web

9. Minimize o uso de animações e efeitos

10. Teste a performance regularmente

Typescript - Alguns conceitos básicos

👋 Fala Dev,

Table of Contents

O que é o Typescript?

Exemplo

Inferencia X Annotation

Analisando Tipagem Básica

Analisando a Tipagem de Objetos

Array

Tuple

Object Literals

Analisando Tipagem Múltipla

Any

Union Type

Type Alias

Enum

Analisando Tipagem Literal

Analisando Funções

Função Básica

Tipagem do Retorno

Parâmetros opcionais

Interfaces

Narrowing

Generics

Classes

Interfaces em classes

Herança

Decorators

Configurando o Projeto

Compilando o Projeto