DEV Community: Yuri Sampaio

How much I learn about typescript in 2 weeks

Yuri Sampaio — Sat, 14 Oct 2023 21:31:23 +0000

Two weeks ago I landed my first job, a front-end role, and I was surprised by how much typescript was used in their products, my first thought was that I needed to improve my typescript skills, and in the past two weeks, I've been grinding typescript all day to feel confident about my skills.

Where did I Start and my first steps

So, I already knew about the basics of typescript, how a type and interface works, primitive types, type a react component, and a little bit about Utility types, but I wasn't satisfied, and I felt like I needed to know more things to get the job done in a property way, so how do I start?

My first step was revisiting all the free workshops that Matt Pocock provides on his website and see if I let something slide out of my eyes, in this process I learned how to property type a Reducer because was the most complex hook I faced in react and the first time a saw his webpage the react with typescript course was not available, here some code snippets of what I did to improve my knowledge with reducer.

type ReducerState = {
  age: number;
  name: string;
};

type ReducerAction =
  | {
      type: 'updateName';
      newName: string;
    }
  | {
      type: 'updateAge';
      newAge: number;
    };

const initialState = {
  age: 42,
  name: 'Joao',
};

const reducer = (state: ReducerState, actions: ReducerAction) => {
  switch (actions.type) {
    case 'updateName':
      return {
        name: actions.newName,
        age: state.age,
      };
    case 'updateAge':
      return {
        age: actions.newAge,
        name: state.name,
      };
    default:
      throw new Error();
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const updateAge = () => {
    dispatch({ type: 'updateAge', newAge: 20 });
  };

  const updateName = () => {
    dispatch({ type: 'updateName', newName: 'George' });
  };
};

If you are already familiar with typescript you noticed that I use Discriminated Unions to type a reducer action but if you aren't, let me show how it works.

type Props =
  | {
    type: 'Title';
    title: string;
  }
  | {
    type: 'No-Title';
  };

const CustomComponent = (props: Props) => {
  if ((props.type === 'Title')) {
    return <div>{props.title}</div>;
  }
};

const App = () => {
  //This gives us an error because 'No-title' doesn't have a title property called title
  return <CustomComponent type='No-Title' title='aaa' />
}

We use Discriminated Unions when we want different properties based on a property (here we call type 'Title' or 'No-Title') this gives the power to typescript infer a more accurate type for my dispatch based on the action I choose in the last example. So this guided me to think can I build a full generic component that makes sense? This was the door opener for the hard drugs!

Generics

So it's time to start learning the most terrifying feature of typescript, Generics. I didn't have too much experience with generics until now, and my first step was revisiting my first custom hook using generics, let me show you.

export function useRequest<T>(endpoint: string) {
  //... a lot of logic stuff
  const response = await axios.get<T>(endpoint);
  //... a lot of logic stuff
}

It was a simple and naive implementation of generics and I feel like at this moment of my career I can do more complex stuff than that. With this in mind, I wrote a simple List component that uses generics to render an unknown list.

interface Props<T> {
  renderItem: (item: T) => React.ReactNode
  keyExtractor: (item: T) => string
  data: T[]
}

export const GenericList = <T extends unknown>({ data, renderItem, keyExtractor }: Props<T>) => {
    return (
      <ol>
        {data.map(item => (
          <li key={keyExtractor(item)}>{renderItem(item)}</li>
        ))}
      </ol>
    )
  }

Cool stuff using generics

Utility Types is a cool thing to use in your project to handle your types, but you know what is cooler than that? Build your Custom Types.

But first, we need to be humble, how do we know if we are capable of building some utility types for our codebase? before building custom stuff I took a step back and tried to rebuild all the utility types built-in in typescript and let me share what I learned in the process.

//This is how Exclude works in typescript
type MyExclude<T, K> = T extends K ? never : T;

In the code snippet above I use Conditional Types and two Generics to make a logic with types and create a new type from that, if the right generic of extends - in this case a Letter K -, is a subtype of the left side - the letter T -, we exclude all properties of letter K in the type T, if not, we just return properties of T.

With just this level of knowledge of typescript we can build many many things but let me share one more thing that I learned that opened up a lot of possibilities, Mapped Types.

//This is called Mapped Types, we can map over all properties in a type, and create another one

type MappedType<T> = {
  readonly [P in keyof T]: T[P];
};

In the code snippet above we re-create the Readonly utility type, isn't fancy stuff in reality is much simpler than I thought initially, so why not push my limit? I don't have money right now to buy all of the typescript wizard curses but to my luck, the community created an open source repo called typescript challenges, with many challenges to sharpen your skills in typescript

https://github.com/type-challenges/type-challenges

This was the last step I took in my journey, I spent 2 days taking some challenges to see what I really knew, what I did not have any clue how to solve and so on, my objective in these 2 weeks was to improve my typescript skills in a front-end role and I think I did a good job, I know that when we created a lib we use a lot of complex types, but I will not create a lib or something in the next months, so I'm glad about my typescript skills right now.

Conclusion

I'm astonished by how much I can learn in only 2 weeks and I will repeat this same process to other topics to be a better swe, if you read this far, thanks for your time, have a good day, and good luck with your Types :)

Melhores projetos open-source para aprender next

Yuri Sampaio — Sat, 10 Jun 2023 22:51:19 +0000

Provavelmente se você está no mundo do front-end, tem ou teve algum contato com o ecossistema do react e com o seu queridinho framework next js, caso queira melhorar ainda mais suas habilidades da uma olhada nesses repositórios open source de produtos que recebem milhares de usuários mensalmente.

roomGPT

Um dos projetos que surfou na onda das inteligências artificiais para curar a dores de seus usuários e conseguiu executar sua ideia perfeitamente, lhe apresento o roomGPT, se trata de um projeto onde você pode tirar uma foto de um cômodo da sua casa, fazer o upload da imagem no app, escolher um design de interior que queira se basear e receber uma foto do seu ambiente totalmente reimaginado.

Repositório : https://github.com/Nutlope/roomGPT

taxonomy

Um dos projetos open-source em next com mais estrelas do Github, esse projeto é um repositório de exemplo usando diversas tecnologias queridas como zod, planetScale, typescript, tailwind stripe e outras. Fazendo deste repositório, uma das melhores fontes para criar o seu próximo projeto em next, é valido pontuar a incrível atenção aos detalhes que o shadcn - Criador do projeto - teve ao comentar todas as coisas complexas no código dele para que qualquer novato consiga entender e aprender enquanto observa a code base

Repositório : https://github.com/shadcn/taxonomy

calcom

Agora vamos aumentar um pouco mais o nível, esse projeto aqui é de uma startup feito em next totalmente open-source com o intuito de prover uma infraestrutura de reuniões para pessoas até empresas com milhares de funcionários, se trata de um grande monorepo com muito conteúdo e tecnologias diversas, para você dar uma olhada em como funciona uma aplicação em grande escala

Repositório : https://github.com/calcom

dub

Um mega projeto a partir de uma simples ideia de um encurtador de url, sua execução foi tão cuidadosa que traz uma experiencia incrível pro usuário, resultado disso é milhares de pessoas e algumas empresas gigantes usando esse web app no seu dia a dia para encurtar as urls que forem necessárias

Repositório : https://github.com/steven-tey/dub

Conclusão

Com tanto projeto open-source magnífico disponível no Github, o acesso a informação para entender como utilizar as features do next para criar o próximo unicórnio que vale 1 bilhão de dólares é uma realidade ( talvez não a parte do bilhão)

De qualquer forma, se você leu até aqui muitíssimo obrigado pela sua atenção e espero que tenha gostado, a gente se vê no próximo artigo :)

O Melhor gerenciador de pacotes da atualidade

Yuri Sampaio — Thu, 25 May 2023 16:50:32 +0000

Caso você já está confortável com o básico de javascript provavelmente conhece o que é um gerenciador de pacotes, mas caso não saiba trata-se de um executável que instala, atualiza ou deleta pacotes de software na nossa aplicação. O mais famoso dentre eles é o tão famigerado npm, mas esse gerenciador de pacotes não é o única maneira da gente instalar nossos pacotes favoritos e o intuito desse artigo é falar um pouco sobre um dos seus grandes rivais, o pnpm.

Para sermos justos com essa comparação, permita-me lhe apresentar um pequeno resumo da evolução do npm primeiro e como evoluímos até chegar no pnpm, para então comparar eles.

npm (Não existe acrônimo pra npm)

O primeiro gerenciador de pacotes foi o npm, sendo lançado em janeiro de 2010, antes disso os programadores precisam lidar com as dependências manualmente ( você já se imaginou fazendo isso?). Com a chegada do npm, conceitos como package.json e node_modules para manter o controle das dependências do projeto e armazenar todas elas em um arquivo no seu projeto, tornaram-se o padrão da indústria.

yarn (Yet Another Resource Negotiator)

Em 2016 o Facebook junto ao Google e colaboradores menores juntaram suas forças para fazer um package manager que concertasse algum dos erros críticos que o npm tinha com segurança e performance, assim nasceu o yarn.

O yarn então trouxe diversas inovações como :

Operações paralelas para otimizar o tempo de download dos pacotes
Uma melhoria considerável em segurança
Suporte a monorepo
Lockfiles

pnpm (Performant npm)

Por mais que o yarn tenha vindo com melhorias significativas em relação ao npm, ambos ainda compartilhavam o mesmo problema, criar a pasta node_modules em cada projeto, ocupando desnecessariamente espaço no seu computador com os mesmos arquivos.

Então em 2017 foi lançada a versão nº1 do pnpm que já veio pronto para substituir o npm, para solucionar o problema das node_modules o pnpm adotou uma abordagem diferente dos seus concorrentes, ele cria uma node_modules raiz no seu computador que armazena todos os pacotes que você instala, e sempre que você instalar o mesmo pacote uma segunda vez, a node_modules do projeto que o usuário esteja trabalhando somente terá um link simbólico para a raiz, de forma à evitar que o programador ocupe espaço desnecessário em disco em sua máquina.

Tendo feito esse pequeno resumo dos 3 e os motivos por trás da criação de cada, vamos para algumas comparações!!

Performance

Essa é uma das áreas que podemos observar uma diferença expressiva do pnpm, pois ele usa um sistema que executa de forma paralela todas as etapas do processo de instalação para cada dependência do seu projeto.

Dessa forma ele consegue alcançar números incríveis em alguns casos de benchmark

Este por exemplo é o benchmark oficial no dia de hoje (25/05/2023) para o pnpm usando esse package.json

Obs: como o benchmark é realizado sobre um caso bem específico, recomendo olhar também o benchmark realizado pelo yarn

Espaço em disco

O pnpm por padrão usa um layout de node_modules que cria uma estrutura aninhada de dependências, de forma que todo arquivo dentro de cada pasta da node_modules é um link simbólico para a node_modules raiz do seu computador

Dessa forma o pnpm apenas usa o caminho do disco até a sua node_modules global para encontrar onde aquela dependência está salva, sempre mantendo somente uma cópia para cada pacote que você baixar

pacotes com versões diferentes

Digamos que você era muito fã do next na versão 12.1.0 e acabou criando vários projetos com eles, por isso você já tem todas as dependências dele na sua node_modules raiz.

Mas agora lançou o next na versão 13.5.0, e você não vai precisar baixar ele por completo, o pnpm é inteligente o suficiente pra identificar somente quais dependências e arquivos novos estão presente nessa versão, para exemplificar com números de forma arbitraria, se o next 12 tinha 500 pacotes e o 13.5.0 tem 650, você só vai fazer o download dos 150 pacotes novos que foram adicionados

Instalação

Para instalar o pnpm na sua maquina é bem simples, basta rodar esse comando caso tenha o node instalado.

npm install -g pnpm

Para outros jeitos de instalar: https://pnpm.io/installation

Comandos

pnpm install -> Instala as dependências do package.json

pnpm add -> Adiciona a dependência informada

pnpm update -> Atualiza todas as dependências

pnpm remove -> Remove o pacote informado da aplicação

pnpm run -> Roda o script informado do package.json

pnpm exec -> Executa um comando no escopo do projeto

pnpm licenses -> Mostra todas as licenças das dependências

pnpm init -> Cria um arquivo package.json

pnpm publish -> Publica um pacote npm

Conclusão

Por mais que todos os argumentos apresentados nesse artigo reforcem a minha opinião de que o pnpm é o melhor gerenciador de pacotes disponível atualmente seja em performance ou espaço em disco, eu encorajo a qualquer um que estiver lendo testar e estudar todos possíveis e tirar suas próprias conclusões porque cada empresa e projeto utiliza um diferente.

Obrigado por ter lido, boa sorte e bom código pra ti :)

Referencias

Artigo do próprio criador do pnpm:
https://medium.com/pnpm/why-should-we-use-pnpm-75ca4bfe7d93

Um artigo extenso comparando os 3:
https://blog.logrocket.com/javascript-package-managers-compared/

Os melhores custom hooks do react

Yuri Sampaio — Tue, 16 May 2023 15:42:06 +0000

Quando pensamos em React a primeira coisa que vem em mente é hooks, o quanto eles podem nos ajudar a implementar features e resolver problemas todo mundo já sabe, portanto o intuito do artigo é compartilhar alguns custom hooks que foram úteis no desenvolvimento das minhas aplicações e podem te ajudar a resolver alguns problemas pontuais, evitando a criação de complexidade desnecessária.

Mas antes de irmos para os custom hooks em si, caso não esteja totalmente confortável com os hooks do react ainda sugiro esse video para relembrar rapidamente o funcionamento de cada

Sem mais delongas, vamos para o que interessa!!

Custom Hooks

1 useMediaQuery

Provavelmente você já se deparou com uma situação onde era necessário que comportamentos diferentes existissem dependendo do tamanho de tela, por exemplo uma navbar acima de 768px e abaixo desse breakpoint um botão para renderizar uma sidebar colapsável, vamos aos detalhes no hook

import { useEffect, useState } from 'react'

function useMediaQuery(query: string): boolean {
  const getMatches = (query: string): boolean => {
    // Previne problemas com SSR
    if (typeof window !== 'undefined') {
      return window.matchMedia(query).matches
    }
    return false
  }

   //State para verificar se passou ou não do breakpoint
  const [matches, setMatches] = useState<boolean>(getMatches(query))

  function handleChange() {
    setMatches(getMatches(query))
  }

  useEffect(() => {
    const matchMedia = window.matchMedia(query)

    handleChange()

    if (matchMedia.addListener) {
      matchMedia.addListener(handleChange)
    } else {
      matchMedia.addEventListener('change', handleChange)
    }

    return () => {
      if (matchMedia.removeListener) {
        matchMedia.removeListener(handleChange)
      } else {
        matchMedia.removeEventListener('change', handleChange)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query])

  return matches
}

export default useMediaQuery

Como usar

import { useMediaQuery } from 'usehooks-ts'

export default function Component() {
  const matches = useMediaQuery('(min-width: 768px)')

  return (
    <div>
      {`A viewport é ${matches ? 'no mínimo' : 'menor que'} 768 pixels wide`}
    </div>
  )
}

2 useDebounce

Para os que ainda não estão familiarizados com o pattern Debounce, consiste em uma estratégia para diminuir as requisições feitas a partir de um input, sendo amplamente utilizados em um campo de busca por exemplo, evitando que a gente sobrecarregue o nosso back-end ou em caso de api publica que exceda a quantidade de chamadas por dia, vamos aos detalhes no hook

import { useEffect, useState } from 'react'

//O value é valor que está mudando e chamando a api
function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    // Esse delay é o delay entre as chamadas para a api
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

export default useDebounce

Esse Custom hook é o meu favorito pela simplicidade de implementar um pattern e seus benefícios em uma aplicação.

Como usar

import { ChangeEvent, useEffect, useState } from 'react'

import { useDebounce } from 'usehooks-ts'

export default function Component() {
  const [value, setValue] = useState<string>('')
  const debouncedValue = useDebounce<string>(value, 500)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value)
  }

  useEffect(() => {
    // Faz o seu fetch ou a logica aqui
    // Ativa quando o "debouncedValue" mudar
  }, [debouncedValue])

  return (
    <div>
      <p>Valor em tempo real: {value}</p>
      <p>Valor do debounce: {debouncedValue}</p>

      <input type="text" value={value} onChange={handleChange} />
    </div>
  )
}

3 useClickOutside

A chance de você fazer um modal ao lidar com uma aplicação front-end é muito grande, algumas aplicações tem vários modais diferentes, e em todos eles a gente gasta um tempo considerável para deixar o mais detalhado, acessível e performático possível.

Com esse hook conseguimos implementar a feature de fechar o modal ao clicar fora dele de forma simples e rápida, vamos a implementação dele

import { useEffect, useRef } from 'react';

export const useClickOutside = (SetStateHandler: () => void) => {
  const domNode = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let handler = (event: MouseEvent) => {
      if (!domNode.current?.contains(event.target as Node)) {
        SetStateHandler();
      }
    };
    document.addEventListener('mousedown', handler);

    return () => {
      document.removeEventListener('mousedown', handler);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return domNode;
};

Como usar

import { useRef } from 'react'

import { useOnClickOutside } from 'usehooks-ts'

export default function Component() {
  const ref = useRef(null)

  const handleClickOutside = () => {
    // Sua logica customizada aqui
    console.log('clicked outside')
  }

  const handleClickInside = () => {
    // Sua logica customizada aqui
    console.log('clicked inside')
  }

  useOnClickOutside(ref, handleClickOutside)

  return (
    <button
      ref={ref}
      onClick={handleClickInside}
      style={{ width: 200, height: 200, background: 'cyan' }}
    />
  )
}

4 useLocalStorage

Em muitas aplicações você precisa guardar informações como tema, idioma e outras preferencias do usuário no localStorage, para isso você acaba criando uma lógica complicada para verificar se o elemento existe ou não no localStorage, portanto esse hook foi desenvolvido com o intuito de simplificar a integração com essa api do browser

Um projeto famoso que usa esse hook para lidar com informação do usuário é o Phived Phived

import { useState } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    if (typeof window === 'undefined') {
      return initialValue;
    }
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      if (typeof window !== 'undefined') {
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      }
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue] as const;
}

Como usar

import { useLocalStorage } from 'usehooks-ts'

export default function Component() {
  const [isDarkTheme, setDarkTheme] = useLocalStorage('darkTheme', true)

  const toggleTheme = () => {
    setDarkTheme((prevValue: boolean) => !prevValue)
  }

  return (
    <button onClick={toggleTheme}>
      {`The current theme is ${isDarkTheme ? `dark` : `light`}`}
    </button>
  )
}

5 useHover

Já tentou fazer animações legais com hover? fazer alguma logica acontecer sempre que tiver com o mouse sobre um objeto? Para simplificar a implementação de coisas assim que esse hook existe

function useHover() {
  const [value, setValue] = useState(false);
  const ref = useRef(null);
  const handleMouseOver = () => setValue(true);
  const handleMouseOut = () => setValue(false);
  useEffect(
    () => {
      const node = ref.current;
      if (node) {
        node.addEventListener("mouseover", handleMouseOver);
        node.addEventListener("mouseout", handleMouseOut);
        return () => {
          node.removeEventListener("mouseover", handleMouseOver);
          node.removeEventListener("mouseout", handleMouseOut);
        };
      }
    },
    [ref.current] // Chama de novo se o ref mudar
  );
  return [ref, value];
}

Como usar

import { useRef } from 'react'

import { useHover } from 'usehooks-ts'

export default function Component() {
  const hoverRef = useRef(null)
  const isHover = useHover(hoverRef)

  return (
    <div ref={hoverRef}>
      {`The current div is ${isHover ? `hovered` : `unhovered`}`}
    </div>
  )
}

Conclusão

Existem uma infinidade de custom hooks no react resolvendo diversos problemas diferentes, entretanto, mais importante que conhecer muito deles é saber o momento certo de acoplar mais código ao seu projeto, tenha certeza da necessidade de usar alguma feature antes de usar um custom hook e use com moderação.

Obrigado por ler até aqui, espero que eu tenha lhe ajudado de alguma forma, se gostar deixa um like!

Referencias

https://usehooks-ts.com

Primeiros passos com astro

Yuri Sampaio — Fri, 05 May 2023 02:14:20 +0000

Astro é uma ferramenta pra criar sites dinâmicos onde podemos usar um ou mais frameworks enviando zero javascript pro lado do client, ou mesmo usar somente a tríade Html, css e javascript caso você desenvolvedor, não esteja familiarizado com um framework ainda.

Mas se o javascript é compilado no lado do servidor, como fazemos o site ficar interativo?

Bom pra isso o Astro conta com um padrão de arquitetura web chamado ilhas de componente, onde múltiplas ilhas podem existir em uma página, onde cada ilha é renderizada de forma isolada.

Nesse exemplo, nosso header, sidebar e o carrossel possuem interação e o javascript é hidratado no lado do client , mas todo o resto seria renderizado no lado do servidor.

Como começar com o framework

Antes de eu começar a descrever o framework em si e seu funcionamento, aqui vai o que você precisa saber pra conseguir entender essa parte com facilidade:

Entendimento de html e javascript;
Saber como usar node / npm;
Um browser pra testar o framework;

Bom agora que você está por dentro do mínimo necessário pra entender o Astro vamos pra parte legal , pra começar a usar o astro é super simples, você só precisa rodar esse comando no terminal :

 npm create astro@latest

Em seguida ele pede pra você escolher um diretório e se você deseja um boilerplate pra te guiar nos primeiros passos, eu altamente recomendo o uso do boilerplate porque tudo fica muito mais fácil de entender

Isso vai gerar um boilerplate bem parecido com o que encontramos em outros frameworks, com a estrutura de pastas como “src/” pra abrigar todo código do projeto, “public/” pro nossos assets locais, e um diretório “pages/” pra abrigar todas as paginas do nosso projeto e por ai vai..

O que salta os olhos ao ver esse diretório é a extensão .astro que os arquivos recebem, mas o que é isso? Pensando em ser o mais simples possível, essa sintaxe de componente nada mais é do que um superset do html puro que já conhecemos.

Ele é composto por 3 partes, sendo essa a primeira cercada por três tracinhos, onde a gente lida com todo o javascript que queremos incluir na página pelo lado do servidor, criando arrays, fazendo request pra apis, ou usando um arquivo markdown local; o html que queremos escrever nesse componente e por fim uma tag style para escrever o nosso css, um exemplo pequeno usando todos os 3 campos seria algo assim.

A única coisa que ainda é estranha para um html e css puro é essa tag Layout que fica em volta do nosso código e o title que a gente passa pra ela, mas é muito mais simples do que parece, pensando na melhor experiência durante o desenvolvimento, essa tag é um componente que abrange tudo aquilo que vai ser reutilizado em todas as páginas. Digamos que a gente tenha uma navbar, footer e uma tag head que todas as páginas compartilham, nosso layout ficaria assim:

Lembra que passamos o titulo da nossa pagina html na tag layout? aqui criamos a variável para ser recebida como props (bem parecido com react) e usamos a variável na tag Title pra dar um titulo a nossa página, e a tag slot cuida do nosso html que é filho da tag layout.

Entretanto a tag layout não precisa ter uma tag head, body, css ou javascript, ela é apenas um componente reutilizável que o framework usa por padrão pra definir a estrutura das páginas html, sinta-se livre pra usar como quiser.

Como usar outros frameworks dentro do astro?

Se o Astro já é um framework, porque eu adicionaria um framework em cima dele? Bom, como a premissa dele é ser server-side-rendering e hidratar o javaScript necessário de forma parcial, você é livre pra escrever seus componentes de UI em qualquer framework que preferir e hidrata-lo quando necessário, dessa forma todo conhecimento de front-end é reutilizado quando estamos escrevendo um webapp com o astro.

Agora que você já sabe como o astro organiza as coisas deve estar se perguntando como adicionar o seu framework favorito nele, como todo o resto é extremamente simples, basta rodar esse comando no terminal:

npx astro add react

Sinta-se livre pra substituir o react por qualquer outro framework que queira adicionar no seu projeto, como o svelte, solid, preact, vue …

Após o passo a passo da instalação do framework, basta você criar um componente com a respectiva extensão e importar em um pagina

Ressaltando que podemos ter um componente de cada framework em um arquivo astro, então caso queira aprender um novo framework eu acho uma maneira legal pra testar suas ideias. Por fim, para utilizar javascript do lado do client, precisamos escolher uma das 3 formas de renderização hibrida do astro.

<!-- Dessa forma o javascript vai ser carregado junto da pagina -->
  <MeuComponenteReact client:load />

<!-- Dessa forma ele renderiza somente depois do html ser renderizado -->
  <MeuComponenteReact client:idle />

<!-- Só renderiza o javascript caso o componente esteja visivel na tela -->
  <MeuComponenteReact client:visible/>

Como eu conheci o framework

Recentemente eu tive a ideia de dar uma repaginada no meu portfólio, eu queria algo meio minimalista mas estava afim de procurar mais inspirações, nisso eu acabei descobrindo um estilo de design chamado neo-brutalismo e eu comecei a desenhar ele no figma pra ver o que saia da minha mente…

Nesse busca de inspirações pro meu portfolio fiquei me perguntando: vou usar o framework next pra fazer ele? Vou usar animações ou não? Preciso de coisas complexas na pagina? eu acabei respondendo não pra todas essas respostas e acabei ficando meio órfão, pois não queria escrever ele em html e css puro, queria uma experiencia de desenvolvimento um pouquinho melhor, pensando nisso eu fui caçar o que eu podia aprender pra construir meu portfolio, e dessa forma eu acabei conhecendo o Astro.

Espero que tenham gostado e entendido um pouco sobre o funcionamento do Astro e seus benefícios, uma grande referencia pra mim foi o vídeo de um canal chamado Fireship que explica da forma mais simples possível o qual vou deixar linkado logo abaixo, meus agradecimentos também ao @felipperegazio por me ajudar revisando esse artigo, até a próxima.

Referências:

https://docs.astro.build/en/getting-started/
https://www.youtube.com/watch?v=dsTXcSeAZq8
https://www.patterns.dev/posts/islands-architecture

Porque licenciar seu software?

Yuri Sampaio — Thu, 04 May 2023 21:43:42 +0000

Quando um trabalho criativo é desenvolvido (isso inclui código) o autor por padrão possui todos os direitos autorais sobre a obra, isso significa que ninguém pode distribuir, alterar ou sequer copiar o seu trabalho sem autorização prévia, o problema começa quando o trabalho criativo possui mais de 1 pessoa, e esse ‘ninguém’ inclui todos os participantes. Logo, ninguém pode continuar contribuindo sem uma declaração por escrito garantindo todos os direitos para esses contribuidores, o que é totalmente anti — produtivo em um cenário Open Source.

Um repositório público não garante esses direitos

Se você está utilizando o Github para criar seus projetos ou copiar projetos de terceiros isso significa que você aceitou os termos de serviço, entretanto eles só te respalda a ponto de você visualizar projetos de terceiros ou copiar e ter localmente na sua máquina, a partir do ponto que realiza um commit com material de terceiros em um repositório seu, na ausência de uma licença que lhe garanta a possibilidade de alterar o código, você está ferindo direitos autorais.

Projetos não licenciados

A falta de uma licença num projeto que está em repositório público geralmente é por um equívoco do criador, portanto nesse caso o mais recomendado é você abrir uma issue no projeto pedindo para que seja incluída uma licença e descreva os motivos para usar uma, porque talvez o criador não tenha o conhecimento sobre a necessidade de licenças. Outra maneira de pedir permissão é encontrando um meio de falar diretamente com o criador e garantir uma permissão por escrito para o uso do software em questão, caso não consiga fazer alguma das opções acima, não utilize de forma alguma esse software pois o criador estará em todo direito de tirar a sua cópia do ar e até mesmo processar você.

Copyright x Copyleft

Antes de entrarmos na licença em si, um tópico bem importante quando estamos falando sobre licenciar um software é a diferença entre Copyright e Copyleft.

Copyright garante que o uso, distribuição ou cópia do objeto licenciado é totalmente exclusivo do criador do objeto, vamos exemplificar para ficar mais fácil. Digamos que você queria muito jogar um jogo que seja lançamento, então você vai lá na sua steam ou outro marketplace qualquer, compra o jogo e garante uma cópia do jogo podendo baixar o executável para jogar na sua máquina. Até aí tudo ocorre totalmente dentro da lei de Copyright, mas caso queira criar um mod e compartilhar (em alguns casos as empresas permitem) , revender os arquivos do jogos ou mesmo dar uma cópia dos arquivos do jogo para um amigo você está infringindo a lei.

Mas não é isso que o criador deseja pro software open source, para isso ele disponibiliza uma licença que garanta o Copyleft, um texto que garante a liberdade de executar o programa como queira, estudar como o programa funciona e adaptar para as suas necessidades , distribuir a cópia original do software ou distribuir uma cópia modifica e acesso ao código fonte. Para isso o usuário só precisa garantir que esteja cumprindo todas as cláusulas da licença disponibilizada.

Quais as opções de licenças mais comuns ?

The Unlicense

A licença mais permissiva de todas, serve como um domínio público onde todos podem copiar, usar com intuito comercial, distribuir ou modificar o código fonte sem precisar cumprir cláusula alguma.

ver na integra: https://choosealicense.com/licenses/unlicense/

MIT

Essa licença é curta e simples, por isso é a mais recomendada pra se usar em projetos open source (amplamente utilizada em projetos no node package manager) ela só exige que o usuário que pretende alterar o projeto de alguma forma tenha a licença original em seu projeto e cite o autor, ademais garante tudo que a licença anterior garante.

ver na integra : https://choosealicense.com/licenses/mit/

Apache License 2.0

Ao contrário da anterior, a Apache é um pouco mais restritiva, usando ela terceiros necessitam explicitar toda alteração feita no código fonte e apresentar a licença original em seu projeto. Além disso, projetos podem utilizar este código em projetos patenteados.

ver na integra : https://choosealicense.com/licenses/apache-2.0/

Mozilla Public License 2.0

Nesse ponto as coisas mudam um pouco, apesar de possuir os mesmos requisitos do anterior e a possibilidade de uso em projetos patenteados, aqui o código fonte original deve permanecer sobre a licença Mozilla o que significa que sempre deve ser público, entretanto é permitido combinar esse código com outros que possuam licenças diferentes.

ver na integra : https://choosealicense.com/licenses/mpl-2.0/

GNU General Public License v3.0

Bem parecida com a licença da Mozilla, a GNU exige que o código por completo esteja sobe esta licença, existindo variações como a GNU AGPLv3, GNU GPLv3 e a GNU LGPLv3, das quais não entrarei muito em detalhes pois é um pouco complicado resumir em um artigo.

Como usar uma licença no seu projeto

Para usar uma das licenças citadas a cima, ou outra que você deseja utilizar basta criar um arquivo chamado LICENSE no seu projeto e colar a licença desejada lá, algumas você tem que alterar alguns trechos colocando o nome dos autores mais o ano do qual o software está sendo criado, no site de cada licença você irá achar essas singularidades com mais detalhes.

Mas caso você não queira ter o trabalho de ir no site da licença e copiar, eu encontrei uma extensão do Visual Studio Code, bem legal que facilita o seu trabalho

com ela basta a gente pressionar as teclas (Ctrl+Shift+P no Windows/Linux ou⌘⇧P no mac) e escrever Create LICENSE file que ele vai criar todo o boilerplate da licença junto do arquivo, com uns adendos sobre onde alterar os dados. Caso deseje licenças diferentes ( vem com a Apache License 2.0 por padrão) basta ir em configurações e escolher a licença que deseja

Observações

1º Existe uma infinidade de licenças diferentes, cobrir todas elas em um artigo conciso seria impossível, entretanto quando você conhece um pouco de algumas licenças as outras ficam bem mais fáceis de entender, uma que eu recomendo a leitura sobre é a BSD license que possui 3 cláusulas diferentes.

2º Meu conhecimento na área de direito é bem pequeno, portanto isso não é um guia de qual licença é a melhor em cada caso, esse artigo somente tem o intuito de informar sobre as licenças mais populares no mundo Open Source e algumas de suas peculiaridades, na dúvida procure um advogado.

Agradecimentos

Espero que esse artigo tenha sido útil para entender o básico sobre as licenças mais utilizadas, a ideia desse artigo surgiu pois eu precisava utilizar uma ideia de um projeto gringo em um projeto meu, ademais eu agradeço ao @brunocroh e ao @carlosramos por me ajudarem a revisar esse artigo, até a próxima.

Referências

https://choosealicense.com

https://www.gnu.org/philosophy/philosophy.html