
[🇺🇸 Post in English click here](https://dev.to/douglasporto/styling-your-site-with-nextjs-and-mui-creating-a-dynamic-theme-switcher-20c0)

Salve, devs! ✌🏾

Como prometi, estou de volta postando com mais frequência. Hoje, vamos começar uma série sobre como usar o Material-UI com Next.js para criar um switch simples entre temas claros e escuros.

### Iniciando um Projeto com Next.js

Para começar, o processo é bem direto. É só seguir os passos da documentação do Next.js:

`npx create-next-app@latest`

Com o Next.js instalado, vamos limpar o diretório. Remova os arquivos globals.css e page.module.css que não vamos usar.

No seu `page.tsx`, o código deve ficar assim:

```js
export default function Home() {
  return <div>Hello world</div>
}
```

E não se esqueça de remover o `import import "./globals.css"` no arquivo `layout.tsx`.

### Instalando o Material-UI (MUI)

Para começar com o MUI, visite a seção [Getting started](https://mui.com/material-ui/getting-started/) da documentação. Você pode usar npm, yarn ou pnpm para instalação. Aqui, vou usar pnpm:

`pnpm add @mui/material @emotion/react @emotion/styled`

Depois de instalar, vamos testar adicionando um botão à página para verificar se tudo está certo:

```js
import Button from "@mui/material/Button";

export default function Home() {
  return (
    <>
      <div>Hello world</div>
      <br />
      <Button>CLick here</Button>
    </>
  )
}
```

Se tudo estiver correto, você verá o botão no navegador assim:

![Browser](/assets/img/posts/material-theme-1.png)

Lembre-se de iniciar o servidor do [Next](https://nextjs.org/) com `pnpm dev`.


### Criando um tema

Vamos criar um arquivo `theme.ts` em `src/styles` e definir uma função para alternar as cores com base no tema escolhido (claro ou escuro):

```js
import { PaletteMode } from "@mui/material";

const primaryDark = '#6a1b9a';
const primaryLight = '#4a148c';

export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
          primary: {
            main: primaryLight,
          },
        }
      : {
          // palette values for dark mode
          primary: {
            main: primaryDark,
          },
        })
  }
})
```

Por exemplo, se escolher o tema escuro, usaremos o roxo mais claro, pois o fundo já será escuro, e vice-versa.

### Implementando a Troca de Tema

No `layout.tsx`, adicione os seguintes imports:

```js
...
import { PaletteMode } from '@mui/material'
import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '@mui/material/styles'
...
```

Defina um estado para gerenciar o tema e armazene-o usando `useMemo`:


```js
const [mode, setMode] = useState<PaletteMode>('light')
const theme = useMemo(() => {
    return createTheme(getDesignTokens(mode))
}, [mode])
```
Adicione o provider do Material-UI para controlar as mudanças de tema:

```js
...
<html lang="en">
  <body className={inter.className}>
      <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  </body>
</html>
```

Experimente alternar o estado entre claro e escuro:

![Browser](/assets/img/posts/material-theme-2.png)
![Browser](/assets/img/posts/material-theme-3.png)

*Nota: Se estiver usando o Next.js 14, inclua use client no início do arquivo layout.tsx.*

### Trocando de Tema com um Botão

Crie um botão para alternar o tema facilmente:

```js
<Button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
  Toggle mode
</Button>
```

E pronto! Seu site está preparado para alternar entre dois modos.

![Browser](/assets/img/posts/material-theme-4.gif)


### Conclusão

Idealmente, deveríamos encapsular toda a lógica de tema em um provider para manter o layout limpo e organizado. Este é apenas um exemplo simples para começar seu próximo projeto com o Material-UI.

Tem mais dicas? Dúvidas ou quer compartilhar outra abordagem? Comente abaixo!

Obrigado pela atenção e até a próxima!

[REPOSITÓRIO](https://github.com/douglasporto/posts-blog/tree/main/next-mui)


Deixe Seu Site no Estilo com Next.js e MUI: Criando um Switch de Temas Dinâmico

 Explore como implementar um switch de temas dinâmico usando Next.js e Material-UI neste tutorial prático. Aprenda a configurar temas claros e escuros, enriquecendo a interatividade e o design do seu site. Ideal para desenvolvedores que buscam aprimorar a experiência do usuário com funcionalidades modernas.


[🇺🇸 Post in English click here](https://dev.to/douglasporto/material-ui-turning-ideas-into-interfaces-with-style-and-efficiency-ecn)

Salve devs ✌🏾

Inicio esta postagem já pedindo desculpas por tanto tempo sem escrever nada.

Esses últimos meses foram meses de muita intensidade e trabalho.

Creio que agora, dando essa acalmada, vou poder voltar aqui com mais frequências para sempre contribuir um pouco.

Começando nesse artigo os motivos deu gostar tanto do [material-ui](https://mui.com/), mesmo ele não sendo tão falado na comunidade.

Em minha jornada como desenvolvedor full-stack, sempre busquei ferramentas que não apenas otimizassem meu fluxo de trabalho, mas também elevassem a qualidade e a experiência do usuário final. Entre as joias que encontrei, [material-ui](https://mui.com/) se destaca como um tesouro inestimável para qualquer projeto React. Este post é um mergulho profundo nos motivos pelos quais o [material-ui](https://mui.com/) se tornou meu companheiro indispensável no desenvolvimento de interfaces de usuário elegantes e eficientes.

**Por Que Material-UI?**

A primeira vez que me deparei com o [material-ui](https://mui.com/), fui atraído pela promessa de componentes ricos e pré-construídos que seguiam os princípios do Material Design. O que descobri foi muito mais: uma biblioteca robusta que oferece uma solução de ponta a ponta para o design de UI/UX, desde o sistema de grid até os ícones interativos. Cada componente do [material-ui](https://mui.com/) é uma porta para uma interface de usuário intuitiva e acessível, pronta para ser adaptada e integrada em projetos de qualquer escala.

**Componentes que Falam**

Cada botão, menu e caixa de diálogo no [material-ui](https://mui.com/) carrega uma filosofia de design centrada no usuário, garantindo que cada elemento não apenas pareça bom, mas também funcione de maneira intuitiva. Adotar o [material-ui](https://mui.com/) em meus projetos me permitiu concentrar-me na criação de experiências de usuário ricas, sem me perder nos detalhes técnicos da implementação de componentes do zero.

**Personalização sem Complicações**

O verdadeiro poder do Material-UI, no entanto, reside em sua flexibilidade. Com um sistema de temas detalhado e opções de personalização abrangentes, pude dar vida às minhas visões de design, ajustando os componentes para se adequarem perfeitamente à identidade visual única de cada projeto. O [material-ui](https://mui.com/) me equipou com as ferramentas para fazer ajustes finos nos estilos, adaptando-se tanto às necessidades funcionais quanto estéticas.

**Construindo o Futuro**

Além dos componentes e da personalização, o [material-ui](https://mui.com/) representa uma comunidade vibrante de desenvolvedores e designers comprometidos com a evolução do design de interfaces. Integrar o [material-ui](https://mui.com/) em meus projetos não apenas melhorou meu desenvolvimento front-end, mas também me conectou a uma comunidade de inovadores, cada um contribuindo para o futuro do design digital.

**Conclusão: Um Casamento entre Eficiência e Estética**

Adotar o Material-UI foi mais do que uma escolha técnica; foi um compromisso com a eficiência, a estética e a experiência do usuário. Para colegas desenvolvedores procurando elevar seus projetos React, recomendo mergulhar no universo do [material-ui](https://mui.com/). É uma escolha que transformará não apenas suas interfaces, mas também a maneira como você aborda o design e o desenvolvimento de software.

Quero deixar um compromisso com vocês de começar a postar muito conteúdo aqui construindo pequenas coisas com [react](https://react.dev/) e [material-ui](https://mui.com/).


Material-UI: Transformando Ideias em Interfaces com Elegância e Eficiência

# Como criar templates de páginas no Next.js

Salve devs ✌🏾

Como prometido no texto passado, irei falar sobre como criar templates/Layout para suas páginas no [Next.js](https://nextjs.org/).

Em um sistema web é muito comum termos páginas com estruturas diferentes, um exemplo prático são as páginas de um dashboard ou admin e login.

Muito comum uma página de dashboard/admin ter um menu ao lado, um header com informações do usuário logado e N coisas diferentes da página de login, onde é mais comum apenas um formulário centralizado.

O problema é que num essa estrutura de dashboard/admin se repete em várias páginas: página de listas, página de edição do usuário e etc.
Para a estrutura do login a mesma coisa: login, cadastro, esqueci a senha e etc.

### O que fazer então?

Basta você "copiar e colocar" as mesmas coisas (header, menu, footer) em todas as páginas.
Ok, isso funciona. Mas a nossa ideia é termos um código limpo sem repetições. Então não basta apenas fazê-lo funcionar; temos que gerar códigos de fácil compreensão para um próximo dev dar manutenção.

### Como eu faço no React?

No [React.js](https://reactjs.org/) não tinha muito segredo, bastava arrumar isso nos arquivos de rota.

```bash
./index.ts
```
```js
import React from 'react';
import { Switch } from 'react-router-dom';

import DashboardLayout from '../_layout/Dashboard';
import AuthLayout from '../_layout/Auth';
import Dashboard from '../pages/Dashboard';
import SignIn from '../pages/SignIn';
import SignUp from '../pages/SignUp';
import Route from './Route';

const Routes: React.FC = () => (
  <Switch>
    <Route path="/sign-in" component={SignIn} />
    <Route path="/sign-up" component={SignUp} layout={AuthLayout} />
    <Route path="/dashboard" component={Dashboard} layout={DashboardLayout} />
  </Switch>
);

export default Routes;
```

```bash
./Route.ts
```
```js
import React from 'react';
import {
  RouteProps as ReactRouteProps,
  Route as ReactRoute,
} from 'react-router-dom';


interface RouteProps extends ReactRouteProps {
  component: React.ComponentType;
  layout?: React.ComponentType;
}

const Route: React.FC<RouteProps> = ({
  component: Component,
  layout: Layout
}) => {

  return (
    <ReactRoute
      {...rest}
      render={() => (
        <>
          {Layout ? (
            <Layout>
              <Component />
            </Layout>
          ) : (
            <Component />
          )}
        </>
      )}
    />
  );
};

export default Route;
```

Fácil não? Agora se você já trabalhou com o Next, sabe muito bem que no next não temos controle nas rotas. Basta criar um aquivo na pasta `pages` e teremos a rota com o mesmo nome do arquivo.

### Então como fazer no Next.js?

Vou passar aqui o passo a passo de um método que tenho feito. Lembrando que aqui não tem certo nem errado, apenas um modo diferente. Então se você faz de uma outra forma, por favor, nos fale para aprendermos uma nova forma. 😉

Primeira coisa para organizar é criar a pasta `Templates` para deixarmos tudo relacionado a isso nela.
Dentro dela vamos criar 2 templates: Um para auth (sign in, sign up etc) e um para admin (dashboard).
Gosto de criar esses arquivos desta forma `./TemplateAdmin/index.tsx` pois podemos e iremos ter arquivos de styles. Assim fica mais organizado.

` ./TemplateAdmin/index.tsx`

```js
import { ReactNode } from 'react'

type TemplateAdminProps = {
  children: ReactNode
}
export default function TemplateAdmin({ ...props }: TemplateAdminProps) {
  return (
    <>
      <header>Header da admin</header>
      <aside>Menu</aside>
      <main>
        <h1>Template Admin</h1>
        {props.children}
      </main>
      <footer>Footer da admin</footer>
    </>
  )
}
```
` ./TemplateAuth/index.tsx`
```js
import { ReactNode } from 'react'

type TemplateAuthProps = {
  children: ReactNode
}
export default function TemplateAuth({ ...props }: TemplateAuthProps) {
  return (
    <>
      <main>
        <h1>Template Auth</h1>
        {props.children}
      </main>
      <footer>Footer</footer>
    </>
  )
}
```

Agora poderemos criar por exemplo o componente `Header` e apenas importa-lo no template admin. Da mesma forma o `Footer`, `Navbar` e etc.

Ainda dentro da pasta `.Templates` vamos criar o arquivo `TemplateWrapper.tsx` que será nosso aquivo principal.

` ./TemplateWrapper.tsx`
```js
import { AppProps } from 'next/dist/next-server/lib/router/router'
import TemplateAdmin from './TemplateAdmin'
import TemplateAuth from './TemplateAuth'

type TemplateWrapperProps = AppProps & {
  layout?: 'auth' | 'admin'
}

export default function TemplateWrapper({
  layout,
  ...props
}: TemplateWrapperProps) {
  switch (layout) {
    case 'admin':
      return <TemplateAdmin>{props.children}</TemplateAdmin>
      break
    case 'auth':
      return <TemplateAuth>{props.children}</TemplateAuth>
      break
    default:
      return <>{props.children}</>
      break
  }
}
```

Bom, neste arquivo receberemos por `props` qual o template deverá ser renderizado na tela.
Colocando em `switch` pois poderemos ter 2, 3, x templates diferentes.

No nosso arquivo `pages/_app.tsx`, nosso arquivo principal das páginas do next.js, vamos renderizar nosso `TemplateWrapper.tsx`

```js
...
import TemplateWrapper from 'Template/TemplateWrapper'

function App({ Component, pageProps }: AppProps) {
  ...
    <TemplateWrapper {...pageProps}>
      <Component {...pageProps} />
    </TemplateWrapper>
  ...
}

export default App
```

Pronto, nossa lógica de templates esta criada. Basta em nosso arquivo de página, mandarmos nossa `prop layout`

Mas, vou colocar na prática, bora lá!

`pages/sign-in.tsx`

```js
...
export default function SignIn() {
  ...
}

export const getInitialProps = () => {
  return {
    layout: 'auth'
  }
}
```

Agora vamos criar nossa página de dashboard também, porém para mudarmos, ao invés de ser uma página com `getInitialProps`, vamos criar uma com SSR.

`pages/dashboard.tsx`

```js
...
export default function Dashboard() {
  ...
}

export const getServerSideProps = () => {
  return {
    props: {
      layout: 'admin'
    }
  }
}

```

Reparem que no `getServerSideProps` no `return` precisamos colocar nosso prop `layout` dentro do objeto `props`.

É isso galera, basta aplicar nas suas próximas páginas e ser feliz 😁. Caso queira ver, subi este tutorial no meu [GitHub](https://github.com/douglasporto/next-with-template) aproveita e me segue lá 😅.

Você faz de outra forma? Achou algum problema nessa solução? Da aquele help e compartilha conosco. 🤗


Como criar templates de páginas no Next.js

Criando templates para páginas com Next.js

# Design System para React

Salve devs ✌🏾

Toda vez que iremos iniciar um novo projeto, surge as dúvidas referentes a qual pasta deve ficar cada arquivo, principalmente se você é júnior. Por conta disso hoje vou falar sobre Design System.

Já deixo claro aqui que este post não coloca aqui a melhor ou a pior forma de arquitetura de seu projeto. Apenas vou te mostrar a forma que estruturo.

Uma outra observação é que irei usar como exemplo em um projeto com [React.js](https://reactjs.org/), porém os conceitos podem ser utilizado em qualquer outro framework, até mesmo num projeto com Javascript puro (famoso vanilla js).

O design system que mais utilizo e gosto é o Atomic Design, desenvolvido por [Brad Frost](https://bradfrost.com/).

Não vou explicar muito sobre Atomic Design por meu objetivo é mostrar mesmo na prática.

Mas uma breve, muito breve mesmo, informação sobre é que essa arquitetura foi criada observando componentes químicos.

Onde encontramos 5 estágios: átomos, moléculas, organismos, modelos e paginas.

![Atomic Design](/assets/img/posts/atomic-design.png "Atomic Design")

Num exemplo prático, átomos poderia ser um botão. A molécula seria esse botão (átomo) com outro átomo, talvez um icone. E assim por diante até chegarmos na maior composição que é a página.

Caso queira mais detalhes, este artigo é perfeito para você <https://vidadeproduto.com.br/atomic-design/>

### Vamos para prática

Chegou a hora de aplicarmos tudo isso no nosso projeto.

Eu não gosto de usar as nomenclaturas oferecidas pelo atomic. Prefiro usar apenas a ideia de separação de componentes.

Primeira coisa que eu faço é deixar tudo dentro da pasta `src/`

Dentro de dela, as pastas importantes para nosso design system são:

```bash
  src/
    - Page
    - Template
    - DesignSystem
    - Components
```

### Page

Ficará apenas nossas páginas nada de styles ou coisas do tipo

```bash
  Page/
    - Index.tsx
    - About.tsx
    - Contact.tsx
```

### Template

Colocaremos os possíveis templates que teremos.

Como assim?

Num sistema, costumamos ter diferentes formas de apresentar a informação para o cliente. Como por exemplo, a estrutura de paginas do signIn e SignUp são diferentes da estrutura de páginas de uma Dashboard.

É justamente aqui que montaremos essas estruturas onde cada página irá dizer qual estrutura ela deverá ser montada.

Aqui poderemos ter styles, por isso gosto de separar por pastas os templates

```bash
  Template/
    - Auth/
      - Index.tsx
      - styles.scss
    - Dashboard/
      - Index.tsx
      - styles.scss
```

Nos próximos posts, estou querendo trazer de forma prática como fazer isso no [Next.js](https://nextjs.org/). Caso achar interessante, comenta aqui embaixo.

### DesignSystem

É aqui que a brincadeira fica cada vez mais interessante.

Dentro desta página, ficará nossos átomos e Moléculas.

Uma boa dica para ter ideias de como separar é olhar como é feito essa separação em design system como [Material-ui](http://material-ui.com/), [Chakra-ui](https://chakra-ui.com/) e etc.

```bash
  DesignSystem/
    - Form/
      - Button/
        - Index.tsx
        - styles.scss
      - Input/
        - Index.tsx
        - styles.scss
    - System/
      - Card/
        - Index.tsx
        - styles.scss
      - Tabs/
        - Index.tsx
        - styles.scss
```

Uma outra dica, da qual aprendi com a galera do [Quinto Andar](https://www.quintoandar.com.br/) neste [video do YouTube](https://www.youtube.com/watch?v=5fM4XuMxwkA), é que mesmo usando o componentes do material-ui (ou qualquer outro) é sempre implanta-los no seu design system, nunca no projeto direto.

Exemplo:

```js
  import {
    Button as MuiButton,
    ButtonProps as MuiButtonProps
  } from '@material-ui/core'

  import * as S from './styles'

  export type ButtonProps = {
    title: string
    className?: string
  } & Pick<MuiButtonProps, 'variant' | 'color'>

  export default function Button({
    title,
    className,
    variant = 'contained',
    color = 'primary'
  }: ButtonProps) {
    return (
      <S.Wrapper className={className}>
        <MuiButton color={color} variant={variant}>
          {title}
        </MuiButton>
      </S.Wrapper>
    )
  }
```

Caso futuramente o material mude alguma coisa no Button deles, basta você arrumar neste único componente seu, evitando aquela corrida de procurar em todos os lugares que colocou o Button do material-ui.

### Components

Por fim, mas não menos importante, são todos os componentes especifico de sua aplicação.

Digamos que você esta desenvolvendo um blog. Nele terá uma página mostrando os autores dele.

Então nesta página terá uma pasta especifica para os cartão do autor (AuthorCard).

```bash
  Components/
    - AuthorCard/
      - Index.tsx
      - styles.scss
```

Exemplo do nosso componente AuthorCard utilizando suas moléculas.

```js
  import { Card } from 'src/DesignSystem/System/Card'

  import * as S from './styles'

  export type AuthorCardProps = {
    name: string
    description?: string
  }

  export default function AuthorCard({
    title,
    description
    return (
      <Card>
        <S.Title>
          {title}
        </S.Title>
        <S.Description>
          {description}
        </S.Description>
      </Card>
    )
  }
```

Então é isso galera. Isso não é a melhor arquitetura do mundo, mas é a arquitetura que até o momento mais tem me agradado e me feito mais produtivo.



Arquitetura e Design System em React

Arquitetura na prática para aquele seu projeto em react

### No texto anterior…

* Precisei me adaptar a um novo estilo de trabalho. Praticamente começar uma profissão do zero;
* Aprendi que para empreender, não necessariamente precisa sair do seu emprego atual;
* Trabalhe em um lugar que respeite a meritocracia.

Caso queira ver o texto completo [clique aqui](https://douglasporto.com.br/blog/mudan%C3%A7as-empreendedor-interno/)

### Conhecendo mercado financeiro

Se você não veio por alguma rede social minha (procure por DgsApenas em qualquer rede social), provavelmente não sabe da minha paixão pelo mercado financeiro.

Conheci sobre já velho, admito. Foi só após os 26 anos que recomecei a poupar e investir meu dinheiro.

Aprendi muito sobre negócios lendo sobre o assunto. Mercado financeiro e empreendedorismo andam lado a lado. Não foi preciso muito para tomar gosto pelo assunto.

Com isso formamos os 3 pilares que procurava no meio profissional.

* Tecnologia
* Empreendimento
* Investimento

Buscava um local onde não apenas trocasse meu trabalho por um salário. Meu alvo era um local que tivesse evolução em tecnologia, me desse autonomia para empreender internamente e por fim, que não fosse um funcionário para sempre.

### Me tornei um acionista da Fabapp

Não me recordo ao certo a data, mas recebi uma ligação do [Hugo Yang](https://www.linkedin.com/in/hugobyang/), CEO da [Fabapp](http://fabricadeaplicativos.com.br/), no segundo semestre de 2020.

Não foi uma surpresa a ligação, pois o mesmo me liga algumas vezes para tratar de diversos assuntos.

Porém, o assunto da ligação me surpreendeu muito, recebi este convite.

Foram alguns meses de conversa para fechar o acordo e o contrato. Muitas páginas a serem lidas, mudadas, adicionadas e etc.

Enfim, no dia 29 de Março de 2021 foi assinado o contrato e me tornava o mais novo acionista da Fábrica de Aplicativos.

### Conclusão

Não, esse não é o fim da história, é o começo. Um novo desafio me aguarda. Uma nova etapa me aguarda com muitas alegrias e decepções, porém ambos com muito aprendizado.

Agora meu recado é para você que leu esses 3 textos.

Não importa a dificuldade que esteja passando no meio profissional. Você, só você pode sair disso.

Só você poderá decidir acordar mais cedo, ir dormir até tarde, perder o sono, almoçar mal, para conseguir o seu objetivo. Acordar todo dia reclamando do emprego que tem e não fazer nada para mudar, não irá mudar nada.

**(MUDANÇA, se antecipar, MUDA, se esperar, DANÇA)**


Mudanças: virando um acionista

### No texto anterior…

* Depois de longos anos na mesma empresa, me desmotivei por não ver perspectiva de crescimento;
* Estudei por 3 anos seguidos para me atualizar tecnicamente;
* Consegui entrar na Fabapp através da indicação de um amigo.

Caso queira ver o texto completo [clique aqui](https://douglasporto.com.br/blog/mundan%C3%A7as-recoloca%C3%A7%C3%A3o-profissional/)

### Adaptando

Acabo de chegar num local novo, pessoas novas, cultura diferente. Me sinto deslocado, realmente um peixe fora do aquário.

Lembro que no meu primeiro dia já começou muito diferente do que tinha sido durante 10 anos.

Acordei cedo, por volta das 6 ou 7 hrs. Mandei mensagem para meu líder para saber qual horário deveria chegar no local de trabalho.

“Acho que umas 11h já deverá ter alguém lá”. Foi essa resposta que obtive.

Realmente, tudo novo. Atmosfera de startup.

Vi que não era apenas o fator técnico que deveria me atualizar, mas sim em tudo: horários, comportamento e etc.

Acostumado a receber novos funcionários e fazer o “onboarding” desta vez estava do outro lado da mesa.

Precisei de pelo menos 3 meses para me acostumar a essa nova realidade. Realidade que comecei a pensar: isso faz muito sentido, porque outras empresas não fazem o mesmo?

Enfim, quando você precisa se adaptar a coisas novas e essas coisas novas são prazerosas, a adaptação flui.

### Empreendedorismo Interno

Após perder o medo de falar e opinar, comecei a dar meus “pitacos” para coisas diferentes ou novas que poderíamos implantar e sempre fui muito bem ouvido.

Algumas das ideias não foram muito para frente e tudo bem. Outras foram implantadas e tenho orgulho. Mas nenhuma delas me deu mais orgulho e realização quanto essa que irei descrever.

Antes de contar, um breve relato sobre minha paixão pelo empreendedorismo.

Eu já montei uma agência de produtos gráficos, criando cartão de visita, banners, flyers e etc.

Depois fiz do meu quarto um home studio onde gravava e editava o som de alguns amigos.

Dentre todos nenhum me deu mais dinheiro que trabalhos freelas. Surgia a Brain&Mind (hoje pausado).

Comecei pegando sites simples e ganhando confiança. Depois comecei a pegar trabalhos mais robustos. Alguns projetos me possibilitavam contratar outros devs para me ajudar.

Todo trabalho entregue, me sentia mais e mais realizado. Em minhas leituras, entre um livro e outro, sempre encaixava algum sobre empreendedorismo.

Na [Fabapp](https://fabricadeaplicativos.com.br/) eu pude reacender novamente essa minha paixão. Onde eu ia, pensava num produto que poderia encaixar nos nossos produtos.

A cada nova ideia ligava para um dos meus líderes, explicava e passávamos horas conversando e analisando possibilidades. Não importava o dia, sábado, domingo ou feriado, surgia uma ideia, eu ligava.

Até que em uma dessas conversas, surgiu a ideia do [Fabapp delivery](https://fabricadeaplicativos.com.br/). Na época não era esse nome, ok, mas sei que mesmo sem nome o Fabapp Delivery nascera daquela conversa.

### Conclusão

Para encurtar a história, você que veio pelo instagram, ou qualquer outra rede social minha, sabe que gosto de falar sobre empreendedorismo e provavelmente você também goste.

Hoje no nosso case de produtos, temos um para você ter um aplicativo como o Ifood, seu e feito por você.

Um produto que vem ganhando muito espaço, o que me deixa orgulhoso e realizado.

Pude empreender utilizando recursos que antes eu não tinha, dentre eles: infraestrutura, funcionários e money é claro.

Eu pude ser um empreendedor interno.

Dos 3 requisitos para ser realizado profissionalmente, marquei um X no segundo.

\[X] Tecnologia

\[X] Empreendimento

\[ ] …



Você se sente realizado profissionalmente? Já fez uma lista do que te faria ser realizado?

No próximo texto contarei o último check da minha lista, nos vemos semana que vem.


Mudanças: empreendedor interno

Salve galera!

Sejam muito bem-vindos. 🤟

Caso esteja vindo pelo instagram, esse meu site/blog utilizo mais para compartilhar informações técnicas da minha profissão: **desenvolvedor web.** Por esse motivo você deve não ter conhecido este site.

No caso de você já ter conhecido, provavelmente veio porque se interessa por programação. Então neste texto iremos notar que não falaremos de algum conteúdo técnico, mas sim sobre desenvolvimento pessoal.

### Começo de tudo.

Antes de mais nada, devo fazer um breve relato da minha história profissional, pelo menos de uma parte dela.

Iniciei minha carreira nesta área em 2010, onde fui contratado para ser programador trainee.

Na época a única coisa de programação que conhecia era HTML. (pausa para você reclamar sobre HTML não ser linguagem). Lá comecei a aprender PHP. Permaneci nesta mesma empresa de 2010 a 2019, sim foram 9 anos aprendendo e conhecendo amigos que até hoje tenho contato.

### Hora de mudar

Após alguns anos dentro da mesma empresa, me vi desmotivado com constantes mudanças e o pior, estava totalmente desatualizado.

Nosso sistema era basicamente em PHP 5, dando suporte para IE7 que muitas atualizações do ecmascript não poderíamos usar. E pasmem, não tínhamos um sistema de versionamento (GIT). Mesmo hoje, pelo que sei, as novas atualizações do sistema são subidas via FTP.

As constantes mudanças de regras e atitudes da diretoria fez com que muitos saíssem. Porém, no meu caso foi complicado, pois meu salário não era baixo e meio conhecimento, das tecnologias atuais, muito raso.

Chegou a hora de traçar um plano, uma nova meta: chegou a hora de mudar.

Estudei por 3 anos seguidos. Acordando muito cedo. No almoço, gastava no máximo 20 minutos comendo e usava o resto do tempo para estudar. Sem falar dos inúmeros meetups que fui.

Quando me senti preparado, comecei a aceitar freelas e testar de fato todo conhecimento adquirido através de cursos como [Alura](https://www.alura.com.br/), [SchoolOfNet](https://www.schoolofnet.com/), [Rocketseat](https://rocketseat.com.br) e etc, sem falar nos conteúdos riquíssimos de [Fabio Vedovelli](https://twitter.com/vedovelli74), [Willian Justen](https://willianjusten.com.br/) e etc.

Em 2019 fui convidado por um amigo para fazer parte da equipe de programadores da [Fabapp](https://fabricadeaplicativos.com.br). Não pensei 2x, aceitei a oferta e encerrei meu ciclo de 9 anos.

### Reaprendendo

Como havia dito, estava desatualizado tecnicamente, então precisei praticamente reaprender novas tecnologias, novos padrões, novas regras.

Muito antes de virar um programador, já adorava brincar com HTML e descobrir coisas novas. Um dos grandes motivos de seguir nessa área foi justamente o aprendizado constante.

Me reencontrei profissionalmente novamente. Tudo que aprendia de novo, podia colocar em prática na Fabapp. Nunca mais precisei ouvir: isso não funciona no IE7.

### Conclusão da parte 1

Medo todos temos. Já estava casado quando aceitei esse novo desafio. Já tinha compromissos dos quais dependiam muito de mim.

Mas se não confiasse em mim, jamais descobriria o quanto essa área me faz feliz.

Vai por mim, ser feliz e se sentir realizado profissionalmente vale todo sacrifício.

Existem 3 assuntos que mais amo conversar com amigos e que me torna feliz. Nos primeiros meses, a Fabapp já preencheu esse meu check list:

 \[x] Tecnologia

 \[ ] assunto 2

 \[ ] assunto 3

Próximo texto, falaremos do assunto 2... nos vemos daqui uma semana 😉


Mudanças: recolocação profissional


Faaaala devs. Blz?

Faz tempo que não dou uma atenção aqui no blog, mas agora vamos voltar aqui pelo menos a cada 15 dias.

Hoje vou falar sobre automatizar padrões de código e também padronizar commits.

Uma estrutura que costumo fazer em praticamente todos meus projetos javascript.

## Automatizar padrões de código

Para automatizar nossos códigos vamos usar um carinha chamado [Husky](https://github.com/typicode/huskyhttps://github.com/typicode/husky).

Digamos que vamos querer varrer nosso código para ver se não ficou nenhum erro acusado pelo [Eslint](https://eslint.org/) automaticamente. Por isso e outros motivos que utilizamos essa maravilhosa lib.

Dentro do nosso `.git` é possível encontrar hooks, que ao configura-los podemos fazer praticamente tudo que quisermos antes ou depois de qualquer comando [GIT](https://git-scm.com/).

No nosso caso, queremos que toda vez que rodarmos um `git commit` seja verificado se esquecemos algum erro que o `eslint` detectou. Vamos configurar também um outro carinha chamado [lint-stage](https://github.com/okonet/lint-stagedhttps://github.com/okonet/lint-staged), para que seja feita a verificação dos erros apenas nos arquivos que foram alterados. Imagina se tivervos mil arquivos no sistema onde será verificado nos mil arquivos mesmo nós termos alterado apenas um. Não faz sentido né?

**Configuração**

Para instalarmos basta rodar `npm install husky lint-staged --save-dev` no nosso terminal.

Agora em nosso `package.json` configuramos os 2:

```json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.ts": [
    "eslint --fix", "git add"
  ]
},
```

Calma, vou explicar!

Toda vez que rodarmos no terminal `git commit` será ativado o Husky por causa do comando que deixamos no `hooks`, o `pre-commit`, ou seja, antes do commit faça algo. E o que estamos fazendo no `pre-commit`? Estamos chamando nosso ajudante número 2 `lint-staged`.

Deixamos o `lint-staged` configurado para executar em todos (*) arquivos typescript (.ts), mas você pode colocar outras extensões de arquivos (js, jsx, tsx). Colocamos em um array pois será rodado 2 comandos nesses arquivos modificados: `eslint --fix` para corrigir e verificar erros e o `git add` pois o próprio eslint poderá corrigir os erros, então precisaremos novamente o `git add` para adicinar no commit.

![husky-running](/assets/img/posts/captura-de-tela-2020-08-14-às-16.41.17.png "husky-running")

Husky irá começar a rodar e logo após fazer as tarefas mostrará assim:

![husky-done](/assets/img/posts/captura-de-tela-2020-08-14-às-16.41.38.png "husky-done")

Pronto! Próxima configuração.

## Padronizar commits

Quantas vezes tentamos olhar no `git log` o que foi alterado, quando foi, se foi fix, feature nova, enfim, quem nunca se perdeu no meio de tanto `commit` e não tem ideia sobre o que aquele commit de fato referenciava?

Para sanar esse problema vamos padronizar as mensagens dos commits para que todos devs sejam "obrigados" a manter o mesmo padrão.

Estou falando do [Commit lint](https://github.com/conventional-changelog/commitlint), que irá garantir o padrão do nossos commits, e o [Commitizen](https://github.com/commitizen/cz-cli) que fará nossos commits automaticos e de uma forma mais visual.

**Configuração**

Vamos instalar as 2 libs,

```bash
yarn add  @commitlint/config-conventional @commitlint/cli commitizen -D
```

Com as libs instaladas vamos configura-las.

```bash
npm commitizen init cz-conventional-changelog --save-dev --save-exact
```

ou se usa `yarn`

```bash
yarn commitizen init cz-conventional-changelog --yarn --dev --exact
```

Voltamos para o `package.json` lembra do Husky? Vamos ligar essas 2 libs com ele.

Dentro do husky vamos adicionar os comandos:

```json
"prepare-commit-msg":"exec < /dev/tty && git cz --hook || true",
"commit-msg":"commitlint -E HUSKY_GIT_PARAMS"
```

Então no `prepare..` estamos preparando o commit, no `commit-msg` vamos garantir que nosso commit seguirá os padrões do `conventional-changelog`

Recapitulando, nosso `package.json` terá o Husky assim:

```json
"husky":{
  "hooks":{
    "pre-commit":"lint-staged",
    "prepare-commit-msg":"exec < /dev/tty && git cz --hook || true",
    "commit-msg":"commitlint -E HUSKY_GIT_PARAMS"
  }
},
```

Será necessário criar a arquivo `commitlint.config.js` contendo:

```javascript
module.exports={
  extends: ['@commitlint/config-conventional']
}
```



Pronto, chegou a hora do commit. Agora vamos rodar apenas o  `git commit` e teremos este resultado:

![git-commit](/assets/img/posts/captura-de-tela-2020-08-14-às-19.46.19.png "git-commit")

Após verificar os erros de `lint`, o comitizen irá nos direcionar com perguntas para criar nossa mensagem de commit. Basta ir respondendo e dando `ENTER`

![](/assets/img/posts/captura-de-tela-2020-08-14-às-19.49.40.png)

Seus commits ficarão assim:

![](/assets/img/posts/captura-de-tela-2020-08-14-às-19.51.13.png)

No começo não mudará muito, mas depois quando tiver uma lista grande de commits tudo organizado indicando o que cada commit resolveu, irá agradecer demais o commitizen.

## Conclusão

Me diz ai, já conhecia alguma dessas libs? Já sabia que era possível utiliza-las juntas?



Padronizando seus Commits

Neste post ensino a configurar 4 bibliotecas ótimas para padronizar suas mensagens de commits e automatizar o processo de commit para que todos os devs tenham deixado o projeto no padrão.


**Faaaala deeev!!!**

Olha eu voltando aqui depois de tanto tempo.

O último artigo que fiz foi justamente falando se vale ou não comprar o curso da[ Rocketseat](https://rocketseat.com.br/), você pode ver [clicando aqui](https://douglasporto.com.br/blog/bootcamp-rocketseat-vale-a-pena/)

O que eu não imaginava era que a [Rocketseat](https://rocketseat.com.br/) iria mudar tanto e irei falar aqui quais foram as mudanças no curso.

# Typescript.

Sim. Essa para mim foi a grande atualização do curso. Antes as aulas de ***back-end (node), front-end (React) e mobile (React-native)*** eram com javascript puro.

Porém nos últimos anos o ***[typescript](https://www.typescriptlang.org/)*** que era mais engajado pela comunidade do [Angular](https://angular.io/) ganhou muita notoriedade e espaço no 💜  dos devs.

A [Rocketseat](https://rocketseat.com.br/) vendo essa movimentação de todas as comunidade JS, não perdeu tempo e mudou todo seu curso. O que para mim foi um grande acerto!

# Nova comunidade.

Quando escrevi o [artigo sobre a rocketseat](https://douglasporto.com.br/blog/bootcamp-rocketseat-vale-a-pena/) a comunidade era um dos pontos que mais gostei. Era simples se engajar. Você matava suas dúvidas rapidamente.

O único problema era que por ser pelo [Discord](https://discord.com/) as perguntas se perdiam no meio.

Então surgiu a nova comunidade.

Uma feita pela própria [Rocketseat](https://rocketseat.com.br/). Num estilo [Stackoverflow](http://stackoverflow.com/) mas com a cara do nosso foguete favorito 🚀.

![comunidade-rocketseat](/assets/img/posts/captura-de-tela-2020-06-10-às-13.40.31.png "Comunidade Rocketseat")

Agora as perguntas não ficam "perdidas". E provavelmente sua dúvida já tenha sido uma dúvida de outro dev, agilizando ainda mais a resolução do seu problema.

# Método de avaliação.

Sabemos que antes você fazia os desafios e ia subindo para um repositório do [Github](https://github.com/). Após finalizar todos os desafios, você enviava esse repositório para a rocketseat e esperava a avaliação final.

Tudo foi mudado também. Vemos mais uma vez a coragem de mudar algo que estava dando certo e mais uma vez um acerto impressionante.

Agora para cada fase do curso, você terá um desafio, até ai tudo normal, nada mudou. Entretanto, agora você envia o repositório separadamente para cada desafio, diretamente na página do curso.

![avaliacao-rocketseat](/assets/img/posts/captura-de-tela-2020-06-10-às-13.41.39.png "Avaliação Rocketseat")

Se achou isso incrível, calma, o melhor esta por vir.

Foi criado um [Template no Github](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-template-repository) para cada desafio.

O que isso quer dizer?

Você ira clonar esse template e nele irá conter as partes necessárias para cumprir o desafio.

O que mais me impressionou foi que nesse template já uma pasta de testes unitários. Ou seja, você cumpri o desafio e para ter certeza que nada foi esquecido ou esta com erro, você roda o comando `yarn test`e *voilà.*

Incrível não?

# Conclusão.

A [Rocketseat](https://rocketseat.com.br/) hoje é uma das, senão a principal, cursos online por não ter medo de inovar. Mesmo algo que esteja dando certo, ela não para de tentar melhorar. Com ela não tem essa de *"time que esta ganhando não se mexe"*.

Ela inovou e melhorou ainda mais o curso. Deixando mais completo e atual ao mercado.

Deixando o nome Rocketseat realmente como referencia total ao curso. Você embarca num foguete nem o céu é o limite 🚀.


Bootcamp Rocketseat, vale a pena? Part-2

O famoso curso bootcamp da Rocketseat deu uma repaginada e agora realmente vale o valor?


**Faaaala deeev!!!**

Com toda certeza você já deve ter escutado esta introdução em algum video no youtube. Estamos falando de [Diego Fernandes](https://twitter.com/dieegosfhttps://twitter.com/dieegosf) CTO da [Rocketseat](https://rocketseat.com.br/).

Caso você não saiba do que estou falando (acho dificil), deixarei aqui o [Canal do Rocketseat](https://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olghttps://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olg) (confira pois tem muuuuuito conteúdo de graça).

Se você esta lendo este post na semana que ele foi escrito (12 a 19 de janeiro de 2020), esta acontecendo a semana omnistack 10. Todos os dias serão disponibilizados videos com conteúdo sobre fullstack com **JavaScript** totalmente gratuido. Você aprenderá [nodejs](https://nodejs.org/en/https://nodejs.org/en/) \[Backend], [React](https://reactjs.org/https://reactjs.org/) \[Frontend] e [React-native](https://facebook.github.io/react-native/https://facebook.github.io/react-native/) \[Mobile].

Após essa semana será aberto a inscrição para o [Bootcamp](https://rocketseat.com.br/bootcamp).

### Mas fala logo, vale a pena?

Fui e ainda sou (plano vitalício) aluno da turma 7.0 \[Setembro de 2019]. Mas antes de falar se vale a pena, vou contar minhas experiência.

#### Comunidade Discord

Assim que você se inscreve, já pode entrar na comunidade do discord dos alunos. Por incrivel que parece é uma comunidade muito grande e altamente engajada. Sério, precisei colocar no mute pois não consigo acompanhar hehehe.

O melhor desta comunidade é que os canais são muito bem divididos e um ajuda o outro com as dúvidas. Além dos alunos, existem os **Instrutores** (que não são poucos) atentos as dúvidas, atentos mesmo! Por exemplo, um dia coloquei uma dúvida as 4 da manhã, meu objetivo era perguntar naquela hora para obter ajuda no próximo dia. E não é que um dos intrutores me respondeu na mesma hora?

#### Lives

Quase todos os dias são feito lives com diversos temas. Diversos temas mesmo. Mas além dos temas relacionados a programação (javascript e etc), quero enfatizar as lives que não são diretamente sobre programação.

São as lives de Inglês e Mentoria.

* Inglês

As lives de inglês é um bate-papo com uma professora de inglês dando varias dicas para aprimorar o inglês. Como disse, são lives quase todos os dias, então não vou estender sobre as de inglês pois foi uma das lives que deixei bastante de ver hehehe. Mas não por não serem boas, mas por falta de tempo.

* Mentorias

Essas lives, na minha opinião, são as melhores. São mentorias sobre desenvolvimento pessoal. Sim, me ajudou muito em diversas coisas, como por exemplo, arrumar [meu linkedIn](https://www.linkedin.com/in/douglas-porto/) para que seja mais visto. E não é que deu certo?

Recebia no mínimo 2 propostas de emprego por dia!

Hoje tenho postagens de 15k, 10k, 7k de visulizações.

#### Certificado

Diferente dos concorrentes, a [Rocketseat](https://rocketseat.com.br/) não dará o certificado apenas por você dar "play nos videos".

Durante mais ou menos 1 mês é disponibilizados os video das aulas. Junto são enviados alguns `.txt` que são os desafios.  Após esse mês, você receberá a data para a entraga do código.

***OMG!!! Entrega do Código???***

Sim, é isso que diferencia eles dos concorrentes. Você terá um prazo para enviar o código com os desafios.

> Mas como assim desafios, códigos, ainda nao entendi!!??

Calma, vou falar como foi o meu desafio.

Após assistir as aulas recebi o desafio que era desenvolver uma aplicação parecida com o [Meetup](https://www.meetup.com/pt-BR/), então criamos a ***MeetApp*** hehehe.

Neste desafio tinhamos tudo que precisava para desenvolver, as regras de negocios as tecnologias que poderia ser usadas, até mesmo um sketch para criarmos o frontend e mobile conforme desenhado.

Caso queira ver, este é meu projeto final [Github](https://github.com/douglasporto/meetapp-gostack).

![Meetapp](/assets/img/posts/meetapp.png "Meetapp")

Depois de enviar seu código basta aguardar ansiosamente pela nota e feedback.

![Nota Bootcamp](/assets/img/posts/nota-bootcamp.jpeg "Nota Bootcamp")

## Então vale a pena???

Em poucas palavras: depende!

O bootcamp é uma imersão muito forte e requer muita dedicação e tempo. Diversos amigos meus fizeram na mesma turma que eu e nem terminaram de ver as aulas. Por exemplo faltando uma semana para entrega do projeto eu acordava as 4 horas da manhã. E não pensa você que foi um sacrificio, pelo contrário, faria novamente!

Se você se inscrever e quiser ditar o seu ritmo, creio que vai perder o mais legal que é superar os limites em tão pouco tempo. A comunidade se ajudando, empurrando um ao outro. Assim como a tradução de `Rocket Seat` um assento de foguete, onde você deve estar preparado para ir muito longe!

Caso você não estaja com tempo, ou na "vibe" de estudos intensos, aconselho duas outras escolas online de programação.

* [Alura](https://www.alura.com.br/)
* [Schoo of Net](https://www.schoolofnet.com/)

Duas escolas excelentes tambem, porém com propostas um pouco diferente da [Rocketseat](https://rocketseat.com.br/).

Agora se você esta focado e afim de mudar sua vida profissional, vale sim cada centavo!

Mas e ai, você já fez alguma das Semana Omnistack?

Já participou de um [Bootcamp](https://rocketseat.com.br/bootcamp) ??

Pensa em fazer? não? Vamos trocar uma ideia....


Bootcamp Rocketseat, vale a pena?

O famoso curso bootcamp da Rocketseat realmente vale o valor?


Antes de explicar e demonstrar o poderoso automatizador de tarefas, **[Gulp](https://gulpjs.com/)**, preciso explicar o que é um automatizador de tarefas.

### O que é Automatizadores de Tarefas?

Existem alguns processos (tarefas) de desenvolvimento que se torna repetitivo e chato ter que fazer sempre, por exemplo, no [Stylus](http://stylus-lang.com/).
Caso não saiba eu espero você ler este meu artigo [Colocando Stylus no seu site](http://douglasporto.com.br/colocando-stylus-no-seu-site/).

Pronto? Leu? Legal, agora que viu e sabe sobre o [Stylus](http://stylus-lang.com/), imagina ter que rodar isso toda vez. Depois disso você quiser que todo esse **_CSS_** fique minificado.

Caso você tenha 10 tarefas como o pre-processador Stylus, vai ter que rodar 10 comados diferentes em seu terminal?

Se até agora fazia isso, pare agora.

### GULP

Temos diversos outros, como [GRUNT](https://gruntjs.com/), seu principal concorrente. Porém quero apenas falar e demonstrar o **[Gulp](https://gulpjs.com/)**.

> gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something ([Doc Gulp](https://gulpjs.com/)).

#### Instalação

O **[Gulp](https://gulpjs.com/)** roda em **[Nodejs](https://nodejs.org/en/)**, então sim, você terá que ter ele em sua maquina.

Para instalação do Gulp vamos rodar o famoso comando **NPM**

```bash
npm install -g gulp
```

Se já conhece um pouco de **[Nodejs](https://nodejs.org/en/)**, perceberá que o rodamos com o `-g`, ou seja, instalamos o **[Gulp](https://gulpjs.com/)** globalmente.

Rode o comando para ter certeza que o gulp foi instalado

```bash
gulp -v
```

Caso não mostre a versão, significa que não intalou, então tente instalar com `sudo`.

#### Iniciando nosso projeto

```bash
|projeto/
|--src/
|----source.js
|--stylus/
|----main.styl
|--Gulpfile.js
```

**Agora vamos começar.** Rode em seu terminal o comando `npm init`.

Será solicitado algumas informações, você pode inserir como preferir:

```bash
package-name: gulp_learning
version: 1.0.0
description: To learning Gulp
entry point: index.js
test comand: _(enter)_
git repository: _(enter)_
keywords: gulp, es5, es6, stylus
Author: Douglas Porto
license: ISC
```

Agora temos um `package.json` assim:

```javascript
{
  "name": "gulp_learning",
  "version": "1.0.0",
  "description": "To learning Gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "es5",
    "es6",
    "stylus"
  ],
  "author": "Douglas Porto",
  "license": "ISC"
}
```

#### Instalando plugins

Vamos utilizar o **NPM** mais uma vez rodando o comando:

```bash
npm install @babel/core @babel/preset-env gulp-stylus --save-dev
```

Agora inclua o programa `.babelrc` e dentro dele faça:

```js
{
  "presets": ["@babel/preset-env"]
}
```

#### Começando a brincadeira

Agora sim podemos começar a brincar com o **[Gulp](https://gulpjs.com/)**

Antes de tudo no arquivo `gulpfile.js` precisamos incluir o gulp.

```javascript
var gulp = require("gulp")
```

A váriavel `gulp` comtém o objeto com as funções necessárias para podermos confirgurar nossas tarefas _**(task)**_.

Chamaremos então uma função que esta no objeto, chamada **task**.
Está função recebe 2 parametros, 1º o nome da tarefa, o 2º uma função.

```javascript
var gulp = require("gulp")

gulp.task("teste", function() {
  console.log("Gulp Funcionando")
})
```

Rode em seu terminal `gulp teste`.

Você receberá 3 informações:

- [Hora] Starting 'teste' (Informação da hora e nome da task iniciada)
- Gulp Funcionando (console.log da função)
- [Hora] Finished 'teste' (Informação da hora e nome da task finalizada)

#### ES6 para ES5

Importe o **babel** para as configurações do **[Gulp](https://gulpjs.com/)**

```javascript
var babel = require("gulp-babel")
```

Na função do nosso **task** `teste` vamos colocar a seguinte sintexe:

```javascript
gulp.task("teste", function() {
  return gulp
    .src("./src/index.js") // Arquivo(s) que será lido
    .pipe(babel({ presets: ["@babel/preset-env"] })) //Plugin babel para a compilação do ES6
    .pipe(gulp.dest("dist")) // Destino para qual irá o arquivo após compilado
})
```

**Vamos testar se funciona.**

No arquivo `./src/index.js` vamos escrever uma arrow function do _ES6_

```javascript
var a = b => b
```

Rode o `gulp teste` e veja a mágica acontecer rs.

```javascript
var a = function(b) {
  return b
}
```

Agora só para organizarmos melhor nosso projeto, vamos trocar o nome da task `teste` para `es5`

#### Copilando CSS com Stylus

Vamos criar uma nova task com nome de _stylus_.
Assim como na _**task**_ anterior, devemos passar o caminho que deve obeservar, a função que deve executar e por fim o caminho destino.

```javascript
gulp.task("stylus", function() {
  return gulp
    .src("./css/style.styl")
    .pipe(stylus())
    .pipe(gulp.dest("./dist/css/"))
})
```

No nosso `./css/style.styl` vamos deixar desta forma para teste.

```css
.container {
  .row {
    div {
      background: black;
    }
  }
}
```

Agora rodamos o `gulp stylus` e temos:

```css
.container .row div {
  background: #000;
}
```

#### Watch e Default

Imagina que saco ter que digitar no terminal toda vez `gulp es5` depois `gulp stylus`. Que automatizador de tarefas é esse?

Para isso que existe o default, veja:

```javascript
gulp.task("default", ["es5", "stylus"])
```

Rode apenas `gulp` e _voilà_.

Porém, toda alteração que executar no seus códigos terá que rodar `gulp`?

O **watch** fica observando os programas e assim que salva-los, ele executará a tarefa definida, veja:

```javascript
gulp.task("watch", function() {
  gulp.watch("./src/index.js", ["es5"])
  gulp.watch("./css/style.styl", ["stylus"])
})
```

Rode `gulp watch` e teste.

**_Incrível_** não? Agora junte o **Default** com o **Watch** e pronto.

```javascript
gulp.task("default", ["es5", "stylus", "watch"])
```

Agora ao rodar `gulp` ele fará o es5, depois o stylus e começará a observar com o watch.

Bom, é isso ai galera. Este foi um exemplo muito simples de como funciona o **[Gulp](https://gulpjs.com/)**.



Conhecendo Gulp

Conheça o mundo dos automatizador de tarefas Gulp.


# Searching Github Users With AXIOS

﻿In this article, we'll see in practice how to use [AXIOS](https://github.com/axios/axios).
Getting straight to the point, we'll make a page that searches for a [GitHub](https://github.com/) user and shows on-screen its repositories.

Having said that, let's go!

First, you'll create `index.html` and put on [VUE](https://vuejs.org/v2/api/) and [AXIOS](https://github.com/axios/axios) by **CDN**.



```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="shortcut icon" href="assets/img/ico/favicon.ico">
  <title></title>
</head>
<body>
  <div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="config/index.js"></script>
</body>
</html>
```

Then, create a `config/index.js` file to instantiate [VUE](https://vuejs.org/v2/api/).


In this step, we'll use two VUE variables:
- **user**: for input text;
- **gitHub**: for the API's return.


```javascript
var app = new Vue({
  el: '#app',
  data: {
    user: '',
    github: {}
  },
})
```

Use the `index.html` to create the layout of your page. You can use the [Bootstrap](http://getbootstrap.com/)or any other framework if you want to make it more sophisticated. Check out the example:

```html
  <nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
    <a class="navbar-brand" href="#">Vue-js + Axios</a>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-12 jumbotron">
        <form class="form-inline"  v-on:submit.prevent>
        <label class="sr-only" for="userGit">User</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="userGit" v-model='user' placeholder="user">
        </div>
        <button type="submit" class="btn btn-primary mb-2" @click="searchGit" :class="{'disabled':user.trim()==''}">Search</button>
      </form>
    </div>
  </div>
```

Notice that the `<form>` has a `v-on:submit.prevent` just to avoid calling the `submit` function. Also, we use a `@click="searchGit"` tag to call the API information's search and a `v-bind` `class` to disable the `<button>` if the user is empty.

### Axios


Apply [AXIOS](https://github.com/axios/axios) is the easiest part of the example. Let's check it out:

```javascript
methods: {
  searchGit: function () {
    let api = 'https://api.github.com/users/' + this.user;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
    });
  }
}
```


You are now able to search for a user. Check the console to see the result. You'll see everything that the API GitHub provides.

The last step is to display its repositories. You can do it as follows:


```html
<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url">
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li><h1>{ { github.public_repos } }</h1>Public Repos</li>
          <li><h1>{ { github.followers } }</h1>Followers</li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

![Screen Axios+Vue.js](http://douglasporto.com.br/assets/img/posts/screen-axios-vue.png)

That's it!


Read the [GitHub Documentation](https://developer.github.com/v3/) for further information and let the creativity flow!

Did you like this tip? Comment here below and let's talk.


Searching Github Users With AXIOS

Let's learn on the practice how to make a request with AXIOS on GitHub API.


Neste artigo não vou enrolar. Vamos colocar a mão na massa e aprender na prática a utilizar o [AXIOS](https://github.com/axios/axios).

Faremos uma página onde digitaremos um usuário [GitHub](https://github.com/) para buscar os dados na [API do GitHub](https://developer.github.com/v3/) e montaremos em nossa tela todos os repositórios deste usuário.

Vamos lá.

Crie o `index.html` já colocando o **VUE** e **AXIOS** via **CDN** mesmo.

```html
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <link rel="shortcut icon" href="assets/img/ico/favicon.ico" />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="config/index.js"></script>
  </body>
</html>
```

Agora vamos criar o `config/index.js` para instanciar nosso VUE.

Vamos utilizar duas variáveis VUE:

- **usuario** para termos o v-bind do nosso campo texto digitado
- **github** que será nosso objeto retornado da API do GitHub

```javascript
var app = new Vue({
  el: "#app",
  data: {
    usuario: "",
    github: {},
  },
})
```

Voltamos para o `index.html` para escrevermos nosso layout.

Para deixar um pouco mais bonito nosso exemplo, vamos colocar o [Bootstrap](http://getbootstrap.com/).
Em nosso layout teremos uma `<nav>` e logo abaixo nosso `<div class="container">` para colocar o `<button>` e o campo `usuario`.

```html
<nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
  <a class="navbar-brand" href="#">Vue-js + Axio</a>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12 jumbotron">
      <form class="form-inline" v-on:submit.prevent>
        <label class="sr-only" for="userGit">Usuário</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input
            type="text"
            class="form-control"
            id="userGit"
            v-model="usuario"
            placeholder="Usuario"
          />
        </div>
        <button
          type="submit"
          class="btn btn-primary mb-2"
          @click="buscarGit"
          :class="{'disabled':usuario.trim()==''}"
        >
          Buscar
        </button>
      </form>
    </div>
  </div>
</div>
```

Percebem que em nosso `<form>` temos um `v-on:submit.prevent` apenas para não ser chamado a função `submit` do `<form>` e atualizar a página.

Já colocamos também o `@click="buscarGit"` que será nosso método para buscar as informações na API. Usamos também um `v-bind` na nossa `class` para desabilitar o `<button>` caso usuario seja vazio.

### Axios

Nosso **axios** será a parte mais facil deste simples exemplo.

```javascript
methods: {
  buscarGit: function () {
    let api = 'https://api.github.com/users/' + this.usuario;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
    });
  }
}
```

Agora busque um usuário e observe o cosole.

É possível ver tudo o que a API fornece. Agora terminamos nosso código mostrando os repositórios do usuário que buscamos.

```html
<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url" />
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li>
            <h1>{ { github.public_repos } }</h1>
            Public Repos
          </li>
          <li>
            <h1>{ { github.followers } }</h1>
            Followers
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

Agora basta ler a [documentação do GitHub](https://developer.github.com/v3/) e deixar a criatividade fluir.


Buscando Usuário GitHub com AXIOS

Vamos aprender na prática como fazer uma requisição AXIOS na API do GitHub.


Se você trabalha com o Front-End, deve saber o quanto o CSS é essencial.

Por mais que exista frameworks CSS como [Bootstrap](http://getbootstrap.com/), [Materialize](http://materializecss.com/), [Material Design](https://material.io/guidelines/) e etc, sempre tem aquela parte em que o designer precisa de uma alteração, e ter que alterar todo um `.css` apenas por conta de uma cor que não foi autorizada pelo time de designers, as vezes acaba sendo um parto para nós desenvolvedores, não é mesmo?

É por conta disse que surgiu algo chamado **Pré-Processadores CSS**

### O que são Pré-Processadores CSS?

Segundo um artigo do [Diego Eis](https://tableless.com.br/authors/diego-eis/) no [Tablelees](https://tableless.com.br/estruturacao-de-client-side-preprocessadores-framewoks-e-bibliotecas-parte-1/?utm_source=tablelessRelatedLink):

> Pré-Processadores são ferramentas onde você escreve CSS de uma determinada forma, modificando sua sintaxe, fazendo com que na hora de sua utilização o código CSS precise ser préprocessado para que o código escrito seja transformado em código CSS puro e assim então os browsers consigam entender.

E é exatamente isso que vamos aprender utilizando o **[Stylus](http://stylus-lang.com/)**

### Instalação

Não tem choro, para instalar será necessário ter em sua máquina o [Nodejs](https://nodejs.org/en/).

```bash
$ npm install stylus -g
```

### Estrutura

Crie uma pasta com o nome que desejar e dentro dessas pastas crie mais 2: `stylus` e `css`. Depois crie um arquivo `main.styl` e a estrutura ficará assim.

```
.
├── /css
└── /stylus
   └── main.styl
```

### Começa a brincadeira

Diferente de `SASS` ou do `LESS` o **Stylus** te deixa a vontade em relação a sintaxes. Veja que abaixo temos 3 tipos diferentes de sintaxes:

```css
body {
  color: #fff;
}
maincolor#fff
div
  color: #fff;
```

Basta ir em seu terminal e rodar:

```bash
stylus stylus/main.styl --out css/
```

E você verá que na pasta `css` surgiu um arquivo `main.css` assim:

```css
body {
  color: #fff;
}
main {
  color: #fff;
}
div {
  color: #fff;
}
```

Não, não é magia!

Isso é um **Pré-Processador CSS** em ação!

Muito legal, não? Mas, para que serve? Apenas para não precisar escrever `{` ou `:`?

Não pequeno padawan, ele vai muito além disto e vou mostrar algumas funcionalidades.

### Variáveis

Digamos que você criou um site que em várias classes utilizou a cor `#fb8c00`, pois essa é a cor principal.

Depois de um tempo, o designer ou seu cliente viu que seria melhor trocar a cor Laranja (#fb8c00) para azul (#1976d2) como cor principal da página.

**O que fazer?**

Essa é fácil Douglas, o famoso `Ctrl H` (atalho para substituir) em seu Editor, procurar `#fb8c00` e substituir para `#1976d2`.

Mas o site tem dezenas de arquivos em `CSS`, olha o trabalho que terá para verificar e substituir em cada arquivo.

Com um Pré-processador como o Stylus, não será necessário, basta criar uma variável.

```css
mainColor = #1976d2 body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
```

Pronto, agora execute o comando para compilar o Stylus e veja. Todas as classes estão com `color: #1976d2`.

Amanhã se precisar mudar a cor principal do site novamente, só será necessário mudar esta variável.

### Importar

Para deixar nosso site mais organizado, criamos um arquivo CSS para estilizar cada componente, por exemplo, um para o css do cabecalho, um css do corpo, um css do rodapé, entre outros.

Mas nisso teriamos que ficar importando todos `.css` no `<head>` do nosso `index.html`. Horrivel né?

Como faríamos no Stylus?

Simples, vamos criar mais 2 arquivos: `_variables.styl` e `_layout.styl`

- `_variables.styl`

```css
mainColor = #1976d2
```

- `_layout.styl`

```css
body {
  color: mainColor;
}
maincolormainColor
div
  color: mainColor;
```

Agora editamos o arquivo `main.styl` colocando os imports.

```css
@import "_variables" @import "_layout";
```

Pronto, agora para qualquer componente do site, basta colocar o `@import "component"` e já será compilado para nosso `main.css`.

### Parent/Root Reference

Em alguns momentos, precisamos utilizar o famoso modo `cascata` para referenciar o seletor pai.

Por exemplo, temos a classe `.header` terá uma `padding: 40px` e também terá uma classe filha `.title` que terá a cor alterada para nossa cor principal.

Se você entende de CSS, sabe que isso é moleza.

```css
.header {
  padding: 40px;
}

.header .title {
  color: #1976d2;
}
```

Fácil né? Agora imagina ter que mudar o CSS de um `<span>` que está dentro de uma `<li>`, que está dentro de uma `<ul>`, que esta dentro de uma... ahhhh, chega. rsrs.

Aí complica, não é verdade?

Se você gosta de identar seu código, não terá problemas nenhum com isso.

Olha como o exemplo acima ficaria no Stylus:

```css
.headerpadding 40px .title color: mainColor;
```

Basta deixar a classe filha identada como se estivesse dentro da classe pai e compilar com o `stylus stylus/main.styl --out css/` para ver a mágica acontecer.

Por falar em mágica, toda vez que alterar algo vamos ter que rodar o Stylus no terminal?
Claro que não né! Vamos mudar o nosso modo de compilar acrescentando o `--watch` após o `stylus`

```bash
stylus --watch stylus/main.styl --out css/
```

Desta forma, o **Stylus** ficará observando nosso código. Toda vez que mudarmos algo, ele saberá e com isso irá compilar automaticamente.

### Loop

**Loop**? Você disse **Loop**?

Sim, caros amigos, loop.

Digamos que para não ser repetitivo o mesmo layout das páginas, você queira mudar um detalhe com outra cor para cada página.

Nisto entraria o famoso `Ctrl C` `Ctrl V` com alteração apenas nos nomes de classe e nas cores que deseja mudar.

E se você tem 5 páginas? Olha o trabalho que terá. Mas com Stylus, isso não é problema. (Leia como se fosse aqueles comerciais da Polishop rs)

Vamos ao código.

Primeiro criamos como se fosse um objeto em javascript.

```css
themes = {
    page-home: #ffff00,
    page-a: #B31917,
    page-b: #1565c0,
    page-c: #e040fb,
    page-d: #1de9b6
}
```

Depois fazemos o `for`:

```css
for theme, page-color in themes
```

Onde `theme` será nossa chave e `page-color` nossa variavel onde colocamos a cor.

Abaixo do for, criamos nossas classes com o layout das nossas páginas.

Então nosso código inteiro ficaria assim:

```css
themes = {
    page-home: #ffff00,
    page-a: #B31917,
    page-b: #1565c0,
    page-c: #e040fb,
    page-d: #1de9b6
}

for theme, page-color in themes
    .{theme}
        h1,h2,h3,h4, strong
            color page-color
        .post-title, .title-page, .page
            color page-color
        .post-content
            a
                &:hover
                    color page-color
                    border-bottom: 2px dashed page-color
            blockquote
                border-left rem(5px) solid page-color
        .tags a
            color page-color
            border 1px solid page-color
```

Nosso main.css será transformado nisso:

```css
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4,
.page-home strong {
  color: #ff0;
}
.page-home .post-title,
.page-home .title-page,
.page-home .page {
  color: #ff0;
}
.page-home .post-content a:hover {
  color: #ff0;
  border-bottom: 2px dashed #ff0;
}
.page-home .post-content blockquote {
  border-left: rem(5px) solid #ff0;
}
.page-home .tags a {
  color: #ff0;
  border: 1px solid #ff0;
}
.page-a h1,
.page-a h2,
.page-a h3,
.page-a h4,
.page-a strong {
  color: #b31917;
}
.page-a .post-title,
.page-a .title-page,
.page-a .page {
  color: #b31917;
}
.page-a .post-content a:hover {
  color: #b31917;
  border-bottom: 2px dashed #b31917;
}
.page-a .post-content blockquote {
  border-left: rem(5px) solid #b31917;
}
.page-a .tags a {
  color: #b31917;
  border: 1px solid #b31917;
}
.page-b h1,
.page-b h2,
.page-b h3,
.page-b h4,
.page-b strong {
  color: #1565c0;
}
.page-b .post-title,
.page-b .title-page,
.page-b .page {
  color: #1565c0;
}
.page-b .post-content a:hover {
  color: #1565c0;
  border-bottom: 2px dashed #1565c0;
}
.page-b .post-content blockquote {
  border-left: rem(5px) solid #1565c0;
}
.page-b .tags a {
  color: #1565c0;
  border: 1px solid #1565c0;
}
.page-c h1,
.page-c h2,
.page-c h3,
.page-c h4,
.page-c strong {
  color: #e040fb;
}
.page-c .post-title,
.page-c .title-page,
.page-c .page {
  color: #e040fb;
}
.page-c .post-content a:hover {
  color: #e040fb;
  border-bottom: 2px dashed #e040fb;
}
.page-c .post-content blockquote {
  border-left: rem(5px) solid #e040fb;
}
.page-c .tags a {
  color: #e040fb;
  border: 1px solid #e040fb;
}
.page-d h1,
.page-d h2,
.page-d h3,
.page-d h4,
.page-d strong {
  color: #1de9b6;
}
.page-d .post-title,
.page-d .title-page,
.page-d .page {
  color: #1de9b6;
}
.page-d .post-content a:hover {
  color: #1de9b6;
  border-bottom: 2px dashed #1de9b6;
}
.page-d .post-content blockquote {
  border-left: rem(5px) solid #1de9b6;
}
.page-d .tags a {
  color: #1de9b6;
  border: 1px solid #1de9b6;
}
```

Olha só o tanto de código que deixamos de escrever e ganhamos tempo.

O que mais posso dizer? Apenas que o **Stylus** é incrível!

É claro, isso é apenas a ponta do Ice berg. Existem diversas coisas a mais que você pode fazer com ele.

Mas não vai achando que é tudo flores. É necesário saber quando deve usa-lo ou não, pois uma vez usando, seu site vira "refén".

Já conhecia o Stylus ou outro Pré-processador (Sass, Less)?



Colocando Stylus no seu Site

Problemas com plugins do WordPress NUNCA MAIS. Jekyll, o melhor gerador de site estático feito para desenvolvedores.


Confesso que sempre que falavam de Blog, na minha cabeça vinha a imagem do [WordPress](https://br.wordpress.com/). Longe de mim julga-lo, já fiz diversos temas e trabalhos com esse CMS.
Porém, sempre ficava inseguro quanto sua performance por conta de plugins e etc.

Quando comecei a inspecionar alguns blog's de uns desenvolvedores que gosto, tomei um susto. Como um desenvolvedor faz um blog em html?

Comecei a pesquisar, pois não era possível um desenvolvedor fazer o famoso `Ctrl C` `Ctrl V`.

Achei o **[Jekyll](http://jekyllrb.com)** !

### Jekyll

**Jekyll** atualmente é o gerador estático com maior número de stars no gitHub. Caso queira ver a lista [clique aqui](https://www.staticgen.com/).

> Ah, mas se for só para gerar um site estático, eu uso o dreamwaver.

Ótimo, então use o dreamwaver e não me enche. Não vou tentar te convencer. (rsrs)

Brincadeiras a parte, vou deixar aqui um artigo do **Willian Justen** [Por que usar jekyll ?](https://willianjusten.com.br/por-que-usar-jekyll/)

### Instalação

O Jekyll é feito em **Ruby** então você terá que instala-lo antes. Como uso **Linux**, não tive problemas com isso.

Agora, se você usa **Windows**, toma vergonha na cara! (rs). Mas para não dizer que sou mal, leia isso [Jekyll Windows - Juthilo](http://jekyll-windows.juthilo.com/).

Na própria [documentação](https://jekyllrb.com/) mostra o quanto é simples instala-lo.

Em seu terminal, rode:

```bash
gem install jekyll bundler #instala o Jekyll
jekyll new meu-site #Inicia um novo site
cd meu-site
bundle exec jekyll serve #Rodando sua aplicação no ambiente de desenvolvimento
```

### Estrutura de pastas

- **\_includes**: São partes do site que será repetido em todo site. Como por exemplo: **footer**, **navbar**, **header**.
- **\_layouts**: Precisa explicar? Arquivos para estrutura básica do site. Basicamente 3 tipos:
  - **default**: Página inicial ou listagem dos posts.
  - **page**: Páginas do seu site.
  - **post**: Página de posts.
- **\_posts**: Será onde você colocará arquivo contendo seus artigos. O padrão arquivo é MarkDown (`md`). O nome desse arquivo deve ser `YYYY-mm-dd-titulo-do-post.md`
- **\_sass**: Caso use `SASS`, coloque seus arquivos nesta pasta e o próprio **Jekyll** compilará para você.
- **css**: Pasta que irá os arquivos `SASS` após compilar.
- **\_config.yml**: Arquivo de configuração do seu Blog/Site.
- **index.html**: A página inicial do seu blog.
- **about.md**: O Jekyll irá criar uma pagina `about` de acordo com o layout do arquivo `_layouts/page`.
- **feed.xml**: Arquivo para gerar o Feed do seu Blog/site.

### Subindo seu Blog/site

Já aprendemos sobre a estrutura de pastas. Como somos "bons programadores" e muito criativos, criar layouts em **HTML5** e **CSS3** não foi problema.
Chegou a hora de colocarmos em produção.
Existem 2 formas de subirmos. A primeira e mais utilizadas pelos desenvolvedores é utilizando o Github Pages como hospedagem. Basta dar seu `git push` para o git fazer o **deploy**. Não vou explicar sobre o Github Pages, mas para ajudar leia este artigo: [Dominio proprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/)

A segunda forma é dar o comando em seu terminal `bundle exec jekyll build`. Você notará que surgirá uma pasta **\_site**. Basta copiar todos arquivos e subir para seu servidor.

Pronto, seu blog está em produção. Simples assim.



Conhecendo Jekyll


Por mais root que seja, hoje é difícil encontrar um programador que não use um editor mais elegante, não é mesmo?

Bloco de notas, TextPad, entre outros, já ficaram para trás a muuuito tempo.

### Sublime Text

Já tentei usar vários outros editores, [Atom](https://atom.io/), [Eclipse](https://www.eclipse.org/downloads/), [VisualStudio](https://www.visualstudio.com), mas nenhum deles me deixou mais satisfeito que o **[Sublime Text](https://www.sublimetext.com)** que hoje esta na sua **3 versão**.

O que mais me atrai nele é o quanto ele é leve, mesmo intalando plugins para nos ajudar.

Claro, se para você um dos que citei acima é melhor, continue com ele. Afinal, não existe o **Melhor Editor** e sim o melhor editor para **VOCÊ**!

Vamos para de papo furado e vamos falar do plugins que mais uso e gosto do Sublime.

### Material Theme

![Material](https://camo.githubusercontent.com/972bd5d93779fdaf95e02cf0326b429be93adcba/687474703a2f2f692e696d6775722e636f6d2f395079784a4d4e2e676966)

Este plugin é capaz de deixar seu **Sublime** com um visual incrível.

Na [Documentação](https://github.com/equinusocio/material-theme) é possível ver todas as modificações que você poderá ser feita.

Vou deixar aqui o como costumo deixar o meu.

```javascript
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
  "theme": "Material-Theme.sublime-theme",
  "material_theme_accent_blue": true,
  "material_theme_accent_scrollbars": true,
  "material_theme_accent_titlebar": true,
  "material_theme_arrow_folders": false,
  "material_theme_big_fileicons": true,
  "material_theme_bold_tab": true,
  "material_theme_bright_scrollbars": false,
  "material_theme_bullet_tree_indicator": true,
  "material_theme_compact_panel": true,
  "material_theme_compact_sidebar": false,
  "material_theme_contrast_mode": false,
  "material_theme_disable_fileicons": false,
  "material_theme_disable_folder_animation": true,
  "material_theme_disable_tree_indicator": true,
  "material_theme_panel_separator": false,
  "material_theme_small_statusbar": true,
  "material_theme_small_tab": true,
  "material_theme_tabs_autowidth": true,
  "material_theme_tabs_separator": true,
  "material_theme_titlebar": true,
  "material_theme_tree_headings": true,
  "show_full_path": true,
  "translate_tabs_to_spaces": true,
  "always_show_minimap_viewport" : true,
  "bold_folder_labels"           : true,
  "font_options"                 : ["gray_antialias", "subpixel_antialias"], // On retina Mac & Windows
  "indent_guide_options"         : ["draw_normal", "draw_active"], // Highlight active indent
  "line_padding_bottom"          : 3,
  "line_padding_top"             : 3,
  "overlay_scroll_bars"          : "enabled",
```

### Emmet

Se você é um desenvolvedor Web, Este maravilhoso plugin irá diminuir e muito seu tempo. Afinal, quem nunca precisou escrever varias `<div>`, ou numa `<table>`, precisou escrever varias `<tr>` e `<td>`?

Digamos que você precise escrever isso:

```html
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>
```

Com o [Emmet]() basta digitar `div.row>div.col-md-3*4` e depois clicar no `TAB`.

### Alignment

Este plugin é para desenvolvedores que assim como eu, gosta de deixar o código bem alinhado.

Como assim?

Vou dar um exemplo:

```php
  $a = 1;
  $abc = 5;
  $abcd = 3;
  $ab = 8;
```

Com o [Alignment](https://packagecontrol.io/packages/Alignment) basta selecionar todas as linhas e clicar em `Ctrl + Alt + A` e seu código ficará assim:

```php
  $a    = 1;
  $abc  = 5;
  $abcd = 3;
  $ab   = 8;
```

### Wakatime

Este último na verdade não é um Plugin que vai lhe ajudar na hora de programar. o [Wakatime](https://wakatime.com/) é uma ferramenta que metrifica tudo que você faz no seu editor, como projetos que trabalhou, linguagens que usou, horas gastas, etc.

### Outros plugins

Bom, para finalizar, existem diversos plugins com Snippets para facilitar na hora do auto-complete.
Se está escrevendo em PHP, procure "php snippets", se precisa daquela ajuda em com classes do bootstrap, procure 'Bootstrap snippets'.

É isso aí galera! Este são alguns dos Plugins que uso.

E aí, qual você indicaria?



Meus Plugins Sublime

Os plugins que mais gosto do Sublime Text 3.


Agora que conhece um pouco sobre o Vue.js, vou mostrar o quanto é simples começar a utiliza-lo.

Caso não tenha visto meu post Conhecendo Vue.js, [clique aqui](/conhecendo-vuejs/) e depois volte para este post.

Bom, vamos lá.

Na documentação do [Vue.js](https://br.vuejs.org/v2/guide), você pode instalar de duas maneiras:

- NPM
- CDN

Para este exemplo não será necessário a instalação através do NPM.

Vamos criar um index.html, onde no `<head>` adionaremos o link CDN:

- https://unpkg.com/vue@2.5.16/dist/vue.js

No `<body>` colocaremos uma `<div>` com o `id=app`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World - Vue.js 2</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

Antes do fechamento do `<body>` abrimos a tag `<script></script>>` para instanciar.
E quando instaciamos o objeto Vue `new Vue()`, devemos informa-lo através do parametro **el** qual o elemento html será montado nossa aplicação.

Como nosso elemento é identificado através de um id cujo nome é `"app"` colocamos `el: '#app'`.

Lembrando que podemos colocar qualquer nome de **id**.

Então nosso script ficaria assim:

```javascript
new Vue({
  el: "#app",
})
```

**Pronto**, nosso index.html já está pronto para utilizar o Vue.

Para renderizar nossas propriedades em nossa tela, precisamos declara-las através do objeto `data`.

```javascript
    new Vue({
      el: '#app',
      data {
        msg: 'Hello Vue.js'
      }
    });
```

Agora como faço para renderizar essa propriedade `msg`?

Simples, a interpolação do Vue é `{ { } }`, ou seja, basta dentro da nossa `<div id='app'>` colocarmos `{ { msg } }`

e o nosso resultado será o famoso Hello World.

![Way Data-bind](/assets/img/posts/directiva.png)

Simples não?

Só para ter mais um gostinho da praticidades do Vue.js, vou mostrar para você outras coisas que ele é capaz de fazer.

## v-for

O `v-for` é o famoso `for` , onde varre todo um array em javascript.

Já aprendemos como declarar nossas propriedades, então vamos criar um array.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians" },
      { name: "Palmeiras" },
      { name: "São Paulo" },
      { name: "Santos" },
    ],
  },
})
```

Nosso html criamos uma `<ul>` e nela usamos o `v-for`

```html
<div id="app">
  <h3>{ { title } }</h3>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Nosso resultado será:

![v-for](/assets/img/posts/hellovue1.png)

## v-if e two-Way Data-bind

Neste exemplo vou aproveitar e já mostrar essas 2 maravilhas.

Vamos melhorar nosso array times e acrescentar mais uma informação origem no nosso objeto. Agora saberemos se o time é do Brasil ou Internacional.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
  },
})
```

Vamos colocar um `checkbox` para mostrarmos apenas o que queremos ver, Brasil ou Internacional, ou até mesmo ambos.

```html
<div id="app">
  <h3>{ { title } }</h3>
  <input
    type="checkbox"
    id="brasil"
    value="Brasil"
    v-model="checkedOrigem"
  /><label for="brasil">Brasil</label>
  <input
    type="checkbox"
    id="internacional"
    value="Internacional"
    v-model="checkedOrigem"
  /><label for="internacional">Internacional</label>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Repare que no `<input>` colocamos a tag `v-model`, que é o que precisamos para o nosso **Way Data-bind**.
Mas só isso não é suficiente e até mesmo nosso console mostrará um erro javascript. É preciso
declarar a propriedade `checkedOrigem` onde será um array

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
    checkedOrigem: [],
  },
})
```

Se colocarmos `{ { checkedOrigem } }` em nosso HTML aparecerá `[]` em nosso browser. Mas ao clicar em Brasil, ficará `[ "Brasil" ]` e em seguida clicar em Internacional, aparecerá `[ "Brasil","Internacional"]`. E isso é o que chamamos de **way data-bind**. Ao manipularmos nossa propriedade javascript, o Vue se encarrega de alterar os valores printados.

O **V-if** é o famosos `if` de qualquer linguagem, então colocamos o **v-if()** no `<li>`. Nossa condição será um simples `indexOf`.

```html
<li v-if="(!checkedOrigem.indexOf(time.origem))"></li>
```

Logo de cara, você vai ver que a nossa lista sumiu. Mas basta clicar em Brasil ou Internacional para o Vue resolver nosso problema.

![v-for](/assets/img/posts/hellovue2.png)

**Incrível** não?

Enfim, isso é apenas uma parcela do que você pode fazer com este FrameWork.

Por enquanto é isso galera.


Hello World Vue.js


Sabemos que o momento é bom para o JavaScript. Com isso, vemos diversos plugins e frameworks surgindo e ganhando espaço nas comunidades.

E é ótimo para nós desenvolvedores FrontEnd, mas também começa a sugir duvidas.

Qual eu devo usar?

Qual devo aprender?

Os 3 Frameworks mais conhecidos, na data que posto este artigo, são:

- [Angular (Google)](https://angular.io/)
- [React (Facebook)](https://reactjs.org/)
- [Vue.js (Comunidade)](https://vuejs.org/)

**Mas qual devo escolher?**

Não vou me aprofundar em cada um deles, pois o que vi do Angular e React foi bem superficial.

Vou apenas dizer os motivos deu ter escolhido o VueJs.

# Enfim, o que é o VueJs?

O vueJs foi criado em 2014 por [Evan You](https://medium.com/@youyuxi), que na época trabalhava na [Google](https://google.com), com o objetivo de criar uma ferramenta eficaz e curva de aprendizado bem baixa.

Com o crescimento e as cobranças da comunidade Vue, [Evan You](https://medium.com/@youyuxi) passou a trabalhar apenas para o Vue, onde conseguiu através do [Patreon](https://www.patreon.com/evanyou) uma arrecadação de \$12,544.
Assim até eu pediria demissão da Google. rsrs

Segundo seu criador, o Vuejs é um framework progressivo para criação de interfaces interativas na web. Como ele se integra com outras bilbiotecas, fica facil combinar para alimentar aplicações de pagina unica (SPA).

**Por que VueJs?**

O que mais gostei do VueJs foi que a curva de aprendizagem dele.

Basta uma pequena lida na sua documentação e já sabe fazer um "HelloWord" sem dores de cabeça.

Segundo a comunidade Vue, as maiores dúvidas, em seus foruns, são mais relacionadas ao JavaScript que o próprio Vue.

## Diretivas

**Way Data-bind**
O databind permite ligar um elemento do HTML à uma variável do JS. Basta alterar o valor da variavel e o Vue cuidará da atualização no elemento HTML.

```html
<div id="app">
  { { message } }
</div>
```

```javascript
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    <script/>
```

![Way Data-bind](/assets/img/posts/directiva.png)

**Two-way Data-bind**

O termo Two Way significa que uma variável pode estar ligada a um elemento e este elemento pode alterar a variável, como uma via dupla.

```html
<div id="app">
  <p>{ { message } } { { name } }</p>
  <input v-model="name" />
</div>
```

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello ",
    name: "",
  },
})
```

![Two-way Data-bind](/assets/img/posts/directiva2.png)

Além da diretiva **v-model**, temos a **v-for, v-on**…

# Conclusão

Concluindo, procure saber um pouco mais sobre o Vue, pois ele vem ganhando muito espaço no mercado pela praticidade.

Só para você ter um pouco mais de noção do crescimento, deixo alguns dados do ano 2015 e 2016 ([https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3](https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3))

- Aumento de 300% de download no npm
- Aumento de 240% de stars no repositório do github
- Aumento de + 268% de Pull Request mergeados no core do Vue
- 84,098 usuários ativos semanais da Chrome DevTools

Agora é só ler um pouco a documentação e entrar de cabeça!

Dúvidas ou sugestão? [Vamos bater um papo](/contato)

Segue abaixo alguns links que conheço daqui do Brasil.

[Vue Brasil](http://vuejs-brasil.com.br/)

[Slack Vue Brasil](https://vue-brasil.slack.com/)

[Alura Live - Vue.js](https://www.youtube.com/watch?v=ruH6R9Puj6o)


Conhecendo Vue.js

Uma pequena introdução ao Framework em javascript, Vuejs.

---
title: Styling Your Site with Next.js and MUI: Creating a Dynamic Theme Switcher
published: true
description: 
tags: [frontend, developer, next, materialui] 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avnkrqy1o8wu2vll14gj.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-18 21:03 +0000
---

Hello, devs! ✌🏾

As promised, I'm back to posting more frequently. Today, we're kicking off a series on using Material-UI with Next.js to create a simple switch between light and dark themes.

### Starting a Next.js Project

Getting started is straightforward. Just follow the steps in the Next.js documentation:

`npx create-next-app@latest`

Once Next.js is installed, let's clean up the directory. Remove the files `globals.css` and `page.module.css` that we won't use.

In your `page.tsx`, the code should look like this:

```js
export default function Home() {
  return <div>Hello world</div>
}
```

And don't forget to remove the import `import "./globals.css";` in the `layout.tsx` file.



### Installing Material-UI (MUI)

To get started with MUI, visit the [Getting started](https://mui.com/material-ui/getting-started/) section of the documentation. You can use npm, yarn, or pnpm for installation. Here, I'll use pnpm:

`pnpm add @mui/material @emotion/react @emotion/styled`

After installation, let's test by adding a button to the page to see if everything is correct:


```js
import Button from "@mui/material/Button";

export default function Home() {
  return (
    <>
      <div>Hello world</div>
      <br />
      <Button>CLick here</Button>
    </>
  )
}
```

If everything is installed properly, your browser will display it like this:


![browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9hsj48saiglvgedghot.png)

Remember to start the [Next.js](https://nextjs.org/) server with `pnpm dev`.

### Creating a Theme

Let’s create a `theme.ts` file in `src/styles` and set up a function to toggle the colors based on the chosen theme (light or dark):

```js
import { PaletteMode } from "@mui/material";

const primaryDark = '#6a1b9a';
const primaryLight = '#4a148c';

export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
          primary: {
            main: primaryLight,
          },
        }
      : {
          // palette values for dark mode
          primary: {
            main: primaryDark,
          },
        })
  }
})
```

For example, if we opt for the dark theme, we'll use the lighter purple since the background will already be dark, and vice versa.

### Implementing Theme Switch

In `layout.tsx`, add the following imports:

```js
...
import { PaletteMode } from '@mui/material'
import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '@mui/material/styles'
...
```

Set up a state to manage the theme and store it using `useMemo`:


```js
const [mode, setMode] = useState<PaletteMode>('light')
const theme = useMemo(() => {
    return createTheme(getDesignTokens(mode))
}, [mode])
```

Add the Material-UI provider to manage theme changes:


```js
...
<html lang="en">
  <body className={inter.className}>
      <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  </body>
</html>
```

Try toggling the state between light and dark:


![Image browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6gr6wk9y8ll5d2pe6qn.png)
![Image browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u5yzcyda4w1gwy4mj3q.png)

*Note: If you are using `Next.js 14`, include `'use client'` at the beginning of the `layout.tsx` file.*

### Switching Themes with a Button


Create a button to easily switch the theme:


```js
<Button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
  Toggle mode
</Button>
```

And voilà! Your site is now ready to switch between two modes.

![GIF Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9n06n8t8bu0p89nvql8.gif)


### Conclusion

Ideally, we should encapsulate all the theme logic in a provider to keep the layout clean and organized. This is just a simple example to kick-start your next project using Material-UI.

Got more tips? Questions or want to share another approach? Feel free to comment below!

Thanks for your attention, and see you next time!

[GIT REPOSITORY](https://github.com/douglasporto/posts-blog/tree/main/next-mui)


Hello, devs! ✌🏾  As promised, I'm back to posting more frequently. Today, we're kicking off a series...

Styling Your Site with Next.js and MUI: Creating a Dynamic Theme Switcher

Douglas Porto

---
title: Material-UI: Turning Ideas into Interfaces with Style and Efficiency
published: true
description: Material-UI: Turning Ideas into Interfaces with Style and Efficiency
tags: [frontend, developer, next, materialui]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlk5tr8eagzonycrkaqy.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-08 13:50 +0000
---

Hey devs ✌🏾

Kicking off this post with an apology for being MIA for so long.

These past few months have been crazy busy.

Now that things are kinda calming down, I'm looking forward to dropping by more often to share some insights.

So, why am I such a fan of material-ui, even though it doesn't get a ton of buzz in the community?

In my journey as a full-stack developer, I've always been on the lookout for tools that not only streamline my workflow but also boost the end-user's quality and experience. Among the gems I've discovered, material-ui stands out as a priceless treasure for any React project. This post dives deep into why material-ui has become my go-to buddy for crafting sleek and efficient user interfaces.

**Why Material-UI?**

The first time I stumbled upon material-ui, I was drawn in by the promise of rich, pre-built components that follow Material Design principles. What I found was much more: a robust library that serves as a one-stop shop for UI/UX design, from grid systems to interactive icons. Every component in material-ui opens the door to an intuitive and accessible user interface, ready to be customized and integrated into projects of any scale.

**Components that Speak**

Every button, menu, and dialog in material-ui carries a user-centered design philosophy, ensuring that each element not only looks good but also feels intuitive to use. Embracing material-ui in my projects has allowed me to focus on crafting rich user experiences without getting bogged down in the technical details of building components from scratch.

**Hassle-Free Customization**

However, the real strength of Material-UI lies in its flexibility. With a detailed theming system and extensive customization options, I've been able to bring my design visions to life, tweaking components to perfectly fit the unique visual identity of each project. material-ui has equipped me with the tools to fine-tune styles, catering to both functional needs and aesthetic preferences.

**Building the Future**

Beyond the components and customization, material-ui represents a lively community of developers and designers committed to pushing the envelope in interface design. Incorporating material-ui into my projects has not only enhanced my front-end development but also connected me to a community of innovators, each contributing to the future of digital design.

**Conclusion: A Union of Efficiency and Aesthetics**

Adopting Material-UI was more than a technical decision; it was a commitment to efficiency, aesthetics, and user experience. For fellow developers looking to elevate their React projects, diving into the world of material-ui is a move that will transform not just your interfaces, but also how you approach software design and development.

I'm making a promise to you guys to start posting a lot of content here, building cool stuff with react and material-ui.


Material-UI: Turning Ideas into Interfaces with Style and Efficiency

---
title: How to improve your developer skills in 2023
published: true
description: How to improve your developer skills in 2023
tags: [frontend, developer, backend, web]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhbmcethpuatjc4cfrzq.jpg
# Use a ratio of 100:42 for best results.
published_at: allowed
---

Hello again. I have come back to write a new article after a long time.
The year has just begun, and every new year we promise to improve our skills or new developers start their journey.
So I decided to write some tips for you to do that.

### Create your roadmap.
If you search for a development roadmap, you will probably see this.
It will help you to know macro knowledge about front-end and back-end. I would suggest looking for your current position and creating a roadmap. For example, I already know about javascript, CSS, HTML, and React, but I've never studied unit tests.

So I create a list to learn the unity test
- [ ] What is a unity test?
- [ ] Libraries for unity test:
    - [ ] Jest
    - [ ] React Testing Library
    - [ ] Cypress


### Practice
I know studying the core and theories is very important. But practice is also necessary.
After reading articles, documents, and books about the unity test, It's time to get your hands dirty. You can create a new project or you can apply this knowledge to an existing project. If you haven't an idea or an existing project, you can get an idea from this link with many front-end challenges.

### You learn more when you teach.
The time has come to validate the learning. Try to teach someone.

You can create a Youtube Channel or Twitch Live. You can also create articles like me. Another good way to practice would be to give talks and share your learning with friends before speaking at an event.
Or keep it simple, write about your learning on LinkedIn and ask people if they have any questions.

**Just do it.**

I promise you, if you follow these tips, by the end of the year, your knowledge will be improved considerably.
That's all for today. What about you, any advice? Share with us! Suggestions are always welcome.

Bye, see you next time.


How to improve your developer skills in 2023

---
title: Searching Github Users With AXIOS
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tm8iv5zwhmsj9mu4ja76.png
description: Let's learn on the practice how to make a request with AXIOS on GitHub API. 
tags: 
- Vue.js
- Vuejs
- Vue
- API
- RestFul
- GitHub
---


﻿In this article, we'll see in practice how to use [AXIOS](https://github.com/axios/axios).
Getting straight to the point, we'll make a page that searches for a [GitHub](https://github.com/) user and shows on-screen its repositories.

Having said that, let's go!

First, you'll create `index.html` and put on [VUE](https://vuejs.org/v2/api/) and [AXIOS](https://github.com/axios/axios) by **CDN**.



```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="shortcut icon" href="assets/img/ico/favicon.ico">  
  <title></title>
</head>
<body>
  <div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="config/index.js"></script>
</body>
</html>
```

Then, create a `config/index.js` file to instantiate [VUE](https://vuejs.org/v2/api/).


In this step, we'll use two VUE variables:
- **user**: for input text;
- **gitHub**: for the API's return.


```javascript
var app = new Vue({
  el: '#app',
  data: {
    user: '',
    github: {}
  },
})  
```

Use the `index.html` to create the layout of your page. You can use the [Bootstrap](http://getbootstrap.com/)or any other framework if you want to make it more sophisticated. Check out the example:

```html
  <nav class="nav navbar navbar-expand-lg navbar-light bg-light center">
    <a class="navbar-brand" href="#">Vue-js + Axios</a>
  </nav>
  <div class="container">
    <div class="row">      
      <div class="col-md-12 jumbotron">
        <form class="form-inline"  v-on:submit.prevent>
        <label class="sr-only" for="userGit">User</label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="userGit" v-model='user' placeholder="user">
        </div>
        <button type="submit" class="btn btn-primary mb-2" @click="searchGit" :class="{'disabled':user.trim()==''}">Search</button>
      </form>
    </div>
  </div>
```

Notice that the `<form>` has a `v-on:submit.prevent` just to avoid calling the `submit` function. Also, we use a `@click="searchGit"` tag to call the API information's search and a `v-bind` `class` to disable the `<button>` if the user is empty.

### Axios


Apply [AXIOS](https://github.com/axios/axios) is the easiest part of the example. Let's check it out:

```javascript
methods: {
  searchGit: function () {
    let api = 'https://api.github.com/users/' + this.user;
    vm = this;
    axios.get(api).then(function(response) {
      vm.github = response.data;
      console.log(vm.github);
    });
  }
}
```


You are now able to search for a user. Check the console to see the result. You'll see everything that the API GitHub provides.

The last step is to display its repositories. You can do it as follows:


```html
<div v-if="github.name">
  <div class="row jumbotron">
    <div class="col-md-6">
      <div class="avatar">
        <img :src="github.avatar_url">
      </div>
      <div class="nickname">
        <h2>{ { github.name } }</h2>
        <h2 class="login"><small>({ { github.login } })</small></h2>
      </div>
    </div>
    <div class="col-md-6">
      <div class="pull-right well info">
        <ul>
          <li><h1>{ { github.public_repos } }</h1>Public Repos</li>
          <li><h1>{ { github.followers } }</h1>Followers</li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

![Screen Axios+Vue.js](http://douglasporto.com.br/assets/img/posts/screen-axios-vue.png)

That's it!


Read the [GitHub Documentation](https://developer.github.com/v3/) for further information and let the creativity flow!

Did you like this tip? Comment here below and let's talk.


Posts

Styling Your Site with Next.js and MUI: Creating a Dynamic Theme Switcher

Material-UI: Turning Ideas into Interfaces with Style and Efficiency

How to improve your developer skills in 2023

Searching Github Users With AXIOS