DEV Community: Cesar Bhering

Guia para certificação Vue Mid-Level

Cesar Bhering — Fri, 03 Jan 2025 18:23:43 +0000

Inspirado neste post, resolvi também escrever um texto do caminho que fiz para conseguir a certificação em Vue.

Trabalho com Vue há 3 anos, e no momento estamos fazendo a transição da aplicação de Vue2 para Vue3, então estudar para a certificação me pareceu um bom caminho para atualizar os conhecimentos no framework.

Se você está começando no mundo do desenvolvimento web, não recomendo que faça a certificação, pois a mesma está custando atualmente quase R$600,00 e e acredito que você consegue extrair mais valor fazendo cursos e outras atividades com este dinheiro. Mas se você já é um profissional experiente e quer colocar seus conhecimentos a prova, exibir o badge de dev Vue e ajudar o desenvolvimento do framework (parte do dinheiro vai para a equipe do Vue), recomendo que o faça.

Estrutura da prova

A prova tem duração máxima de 135 minutos, sendo 30 questões fechadas e 2 desafios de código.

Questões fechadas

Você deve acertar 25 questões fechadas (algo em torno de 85% de acerto), cada questão tem 4 opções de resposta e sempre apenas uma opção é verdadeira. São questões relativamente fáceis, em sua maioria perguntando o que um bloco de código irá fazer e sobre momentos em que hooks (lifecycles e watchers) são disparados. Todas as questões levam em consideração a Composition API. O tempo é mais do que suficiente para responder e revisar todas as questões.

Questões abertas

Após a parte de questões fechadas, se inicia a parte dos desafios de código. São dois desafios, um você deve terminar um código com as instruções que são fornecidas e outro é uma correção de bug. Ambos os desafios são realizados na plataforma da Stackblitz, então é recomendável você fazer alguns códigos lá para se acostumar com a ferramenta, mas ela se parece muito com o vscode, então você não deverá ter problemas.

Nos boilerplates dos desafios é usado JS e Composition API, mas você pode usar TS e Options API caso queira. Também nesta parte você tem acesso a uma documentação resumida do Vue através de um modal, a navegação é um pouco ruim, mas ajuda bastante em momentos de dúvida e você pode abrir o devtools do navegador. Recomendo já deixar o devtools configurado para abrir como um frame no navegador e não como nova janela, para evitar algum problema com o software de monitoramento.

No meu caso o desafio de código foi completar uma tela de login, colocando comunicação entre os componentes (emtis, props, template syntax, event handling, form input bindings) e também fazer a estilização dos mesmos. Neste desafio não é necessário o uso de Transitions, mas já vi na internet que outros desafios utilizam bastante, então é bom estudar.

O desafio de resolver um bug foi bastante simples, bastou alterar uma referência de reactive() para ref().

Você não tem acesso se as suas alterações nos códigos estão aprovadas pelos testes automatizados, então você deve submeter a sua solução confiando que o que você está vendo na tela (você tem acesso a aplicação rodando, nao apenas ao código).

O que estudar e onde estudar

1 - Ao comprar a prova você tem acesso a uma lista de links para a documentação, que são os tópicos que serão cobrados na prova, conforme imagem abaixo. Assim você economiza de ler tópicos que não serão levados em consideração.

2 - Ver a seguinte playlist no Yout Tube - VueJS Developer Certification - e acompanhar os códigos que o apresentador faz, de preferência refazendo em sua máquina. Ele basicamente passa pelos tópicos citados no guia da certificação e vai desenvolvendo pequenos snippets que ajudam a fixar o conteúdo.

3 - Faça você mesmo os seus snippets, para fixar os conceitos. Aqui disponilizo um repositório que demonstra como fui acompanhando os estudos e fazendo experimentos para fixar o conteúdo. Mas recomendo você começar o seu do absoluto zero.

Considerações finais

Você pode comprar o curso oficial para a certificação, mas pelo preço e dificuldade da prova, entendo ser desperdício, os materiais citados aqui são mais que suficientes.
Para quem já fez provas de certificação, o processo de tirar foto do documento e mostrar a sala que está sendo feita a prova é bem facilitado, muito mais simples que da AWS e da LPI por exemplo. Caso você nunca tenha feito uma prova de certificação antes, procure vídeos na internet (ou converse com um amigo) que comentam sobre como ambiente (tanto virtual quanto real) deve estar preparado para que a prova possa ser realizada e não cause sua desclassificação.
Recomendo fazer a prova e um computador com no mínimo 16GB de RAM e um bom processador. Caso você tenha, assim como eu, problemas técnicos ao realizar a prova, tem um botão na página para sinalizar o problema, você deve sinalizar o problema e sair da prova, após isto mandar um e-mail para que lhe seja garantido um novo voucher. No meu caso foram solicitos e dispibilizaram um novo voucher com menos de uma semana.

How to make a Squarespace domain work with Netlify

Cesar Bhering — Sat, 24 Feb 2024 20:51:30 +0000

If you're getting the error below when trying to Set up Netlify DNS for your Squarespace domain, read this post.

A DNS zone for this domain already exists on NS1, the DNS provider backing Netlify DNS

Go to your Squarespace account and click in the domain you want to configure.

1 - Advanced Settings > Nameservers Settings

2 - Make sure you have "Use custom nameservers" selected. And declare only the nameservers of Squarespace (This is needed to SSL certificate to work)

3 - Now go to "Edit DNS".

4 - Add the following two records. Make sure to declare the correct url of Netlify app. (In the first line, the IP 75.2.60.5 is the same for all).

Now you can go back to your Netlify account, and click at the "Domain management" tab, and see that your domain is working as expected.

Before:

After:

The information above can be seen in the Netlify Forums/Tutorials, but not this straight forward. Thats why i decided to make this post.

Usando o shepherdjs para fazer tours em uma aplicação nuxt (vue.js) (Parte 2)

Cesar Bhering — Sun, 07 Aug 2022 22:38:00 +0000

Dando continuidade ao tutorial, aqui você encontra a primeira parte, vamos alterar mais alguns comportamentos do nosso projeto e aqui você encontra o repositório.

Para diminuir a largura do elemento do shepherd, iremos adicionar a classe width-limit, conforme código abaixo. Você pode declarar uma série de classes para que sejam aplicadas no elemento do shepherd. Por hora iremos aplicar apenas uma classe. É necessário retirar o scoped da declaração de style, então tenha muito cuidado.

Também vamos alterar a opção on dentro de attachTo, que escolhe o posicionamento da flecha/elemento shepherd, vamos trocar de 'top' para 'right-end'.

mounted() {
    this.$nextTick(() => {
      const tour = this.$shepherd({
        useModalOverlay: true,
        defaultStepOptions: {
          popperOptions: {
            modifiers: [{ name: 'offset', options: { offset: [0,50] } }]
          }
        }
      });

      tour.addStep({
        classes: 'width-limit',
        attachTo: { element: '#shepherd-teste', on: 'right-end' },
        text: 'Test'
      });

      tour.start();
      });
    }

E a declaração em style

.width-limit {
  max-width: 200px;
}

E assim ficou o nosso elemento, menor e renderizado a direita.

Você deve ter notado que com a mudança de lugar, a seta que aponta para o elemento a ser destacado ficou "fora do esquadro" e isso incomoda um pouco. Para corrigir este tipo de situação usamos o modificador do popper chamado 'arrow', assim a opção popperOptions fica da seguinte forma:

popperOptions: {
  modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
}

E o elemento fica desta forma (bem mais apresentável), com a seta deslocada mais ao centro e o elemento no mesmo lugar. Usei o valor 20 pois é o que faz sentido para o exemplo, mas você pode testar com valores positivos e negativos.

Para deixar o elemento mais completo, podemos adicionar um título, e adicionar um botão de cancelamento do tutorial. As opções utilizadas serão cancelIcon e title. Importante notar que a opção cancelIcon se trata de um objeto com a propriedade enabled que é um valor booleano.

O visual e o código ficam da seguinte maneira:

this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            cancelIcon: {enabled: true},
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
            }
         }
});

tour.addStep({
  classes: 'width-limit',
  attachTo: { element: '#shepherd-teste', on: 'right-end' },
  title: 'Test Title',
  text: 'Test'
});

Continua em breve...

Usando o shepherdjs para fazer tours em uma aplicação nuxt (vue.js) (Parte 1)

Cesar Bhering — Thu, 21 Jul 2022 02:19:00 +0000

Como não vi nenhum conteúdo em pt-BR ensinando o básico de shepherdjs, decidi fazer este pequeno tutorial. Neste exemplo irei fazer referência em como usar o shepherdjs junto ao vue.js com nuxt.

Aqui você encontra o repositório do projeto.

Primeiro e antes de mais nada vamos baixar a biblioteca destinada ao vue:
npm install vue-shepherd --save

Você pode usar várias abordagens, aqui irei mostrar como usar o shepherdjs como plugin:

Crie um arquivo chamado shepherd.js na pasta plugins com o seguinte conteúdo:

import Vue from 'vue';
import VueShepherd from 'vue-shepherd';
import 'shepherd.js/dist/css/shepherd.css';
Vue.use(VueShepherd);

E no arquivo nuxt.config.js você deve declarar o plugin da seguinte forma:

  plugins: [
    '@/plugins/shepherd'
  ],

Dentro do componente desejado você pode inicializar um tour e adicionar steps utilizando o ciclo de vida mounted(conforme exemplo que existe no github oficial):

mounted() {
      this.$nextTick(() => {
        const tour = this.$shepherd({
          useModalOverlay: true
        });

        tour.addStep({
          attachTo: { element: this.$el, on: 'top' },
          text: 'Test'
        });

        tour.start();
      });
    }

OK, até aqui tudo certo, tudo legal. Mas caso você esteja tentando usar o shepherdjs, já percebeu que a documentação oficial é bem genérica em relação a customização do comportamento. Então vamos abordar algumas questões chave.

Para fins didáticos, criei um componente simples com um id chamado shepherd-teste, e iremos usar o mesmo para os exemplos abaixo.

O primeiro ponto a ser abordado é o defaultStepOptions, pois nele conseguimos colocar customizações em todos os steps do tour.

Dentro do defaultStepOptionspodemos colocar a opção popperOptions(sim, o shepherdjs usa o popper por debaixo dos panos), que nos permite usar opções do popper. Sendo assim podemos utilizar a opção offsetpara controlar o quanto a seta/arrow fica dentro ou distante do elemento a ser referenciado.

O nosso tour começa a tomar a seguinte cara:

mounted() {
      this.$nextTick(() => {
        const tour = this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }]
            }
          }
        });

        tour.addStep({
          attachTo: { element: '#shepherd-teste', on: 'top' },
          text: 'Test'
        });

        tour.start();
      });
    }

Onde [0, 50], escolhe se a nossa seta (e consequentemente o elemento criado pelo shepherd) estará mais longe ou mais perto do elemento em destaque (referenciado no attachTo). Quanto maior o segundo número, mais distante a seta/elemento estará.

Exemplo com [0, 50]:

Exemplo com [0,0]:

Ir para a parte 2.