teleren/devto huggingface dataset:
💄 Adding Google Fonts to your NuxtJS site
Tags: nuxt, googlefonts, javascript, frontend
Published: 2021-05-07 16:36:10

---
title: 💄 Adding Google Fonts to your NuxtJS site
published: true
date: 07/05/2021
tags: Nuxt,GoogleFonts,JavaScript,Frontend
canonical_url: https://www.elian.codes/blog/adding-google-fonts-to-your-nuxtjs-site/
---

# Adding Google Fonts to your NuxtJS site

Some time ago I found out that some of my fonts weren't loading in some browsers. I was using Google Fonts imported in my stylesheet using `@import`. I couldn't immediately pinpoint the issue, so I searched for an alternative way to add the fonts I needed to my Nuxt site.

## @nuxtjs/google-fonts

In my search on Google Fonts in Nuxt, I almost immediatly found out about the Nuxt module called [@nuxtjs/google-fonts](https://www.npmjs.com/package/@nuxtjs/google-fonts). It works like a charm and is very versatile. Here's a little guide on how you can use it.

## Installing the module

Installing a module in [Nuxt](https://nuxtjs.org) is the easiest thing you'll come across. It's nothing more than a simple NPM package install. Here's how you can install the google-fonts module:

```
yarn add -D @nuxtjs/google-fonts

```

After the install, we'll add the module to our `nuxt.config.js` file:

```
// nuxt.config.js

{
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
}

```

That should work!

## Adding fonts

Adding fonts to your NuxtJS configuration is very easy. You just have to add them in the `nuxt.config.js` file. There's a lot of configurable parts included with the module, but to keep things easy, I'll only go into the basics here.

Every option or font is added via the `googleFonts` property in `nuxt.config.js`

To add a font to your config. Just add the name to the module in `nuxt.config.js`:

```
// nuxt.config.js

googleFonts: {
  families: {
    // a simple name
    Roboto: true,

    // a name with spaces
    'Josefin+Sans': true,

    // specific font weights
    Lato: [100, 300],
  }
}

```

If you need a little more advanced fonts, like italic or bold, there's a specific property:

```
// nuxt.config.js

googleFonts: {
  families: {
    // basic
    Lato: [100, 300],

    // advanced
    Raleway: {
      // weights
      wght: [100, 400],
      // italic
      ital: [100]
    },
  }
}

```

## Using fonts in CSS

After installing and configuring the module and adding the fonts. The fonts are just usable in your CSS.

Keep in mind that the font you specify in the CSS-file should ofcourse be installed first via the `nuxt.config.js` file.

```
p {
  font-family: Rubik, sans-serif;
  font-weight: 400;
}

```

### Using with TailwindCSS

Since I'm using TailwindCSS on [my website](https://www.elian.codes), I also had to find out how to use the fonts in my custom Tailwind configuration. Turns out I just had to add it by using simple old skool CSS, since there's no way (yet) to add it in an `@apply` rule.

```
p.title {
    font-family: Rubik, sans-serif;
    @apply text-lg text-center text-black font-semibold;
}

```

More info is available on the [Official Documentation of the module](https://google-fonts.nuxtjs.org/).
Work from a café
Tags: productivity, remotework, practices
Published: 2021-05-08 16:19:43

---
title: Work from a café
published: true
date: 2021-05-07 00:00:00 UTC
tags: productivity,remotework,practices
canonical_url: https://jhall.io/archive/2021/05/07/work-from-a-caf%C3%A9/
---

Many of us are working from home these days. Some (like me) have prefered this mode for years. Others can’t wait to get back to the office. In either case, cabin fever can be a serious problem.

And now the world is starting to open up again. Here in the Netherlands where I live, outdoor dining is once again an option, after all but take-away and delivery service was forbidden for several months.

This means I’ll soon be doing one of my favorite things, when working from “home”:

I’ll take my laptop to a local café, sit down, and work a full 8 hours in someone else’s (public) dining room.

I never have any sort of lengthy conversation at these places. But I do tend to get to know the wait staff and owners, if I find a place I frequent enough. And even this level of human interaction is enough to break the monotony of staring at my own bedroom wall.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to check if a string is a valid email address in JavaScript?
Tags: javascript
Published: 2021-05-07 00:00:00

---
  title: How to check if a string is a valid email address in JavaScript?
  published: true
  tags: JavaScript
  date: Fri May 07 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-string-is-valid-email-address-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-a9a27358e4afcb73b993746e19765fb7.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-string-is-valid-email-address-javascript)
  
To check if a string is a valid email address in JavaScript, we can use a regex expression to match the symbols like `@`, `.` and the strings in between them.

### TL;DR

```js
// Regular expression to check if string is email
const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;

// String with email address
const str = "johndoe@example.com";

regexExp.test(str); // true
```

This is the regex expression for matching almost all the test cases for a valid email address in JavaScript.

```js
// Regular expression to check if string is email
const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;
```

Now let's write a string with email address like this,

```js
// Regular expression to check if string is email
const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;

// String with email address
const str = "johndoe@example.com";
```

Now to test the string, we can use the `test()` method available in the regular expression we defined. It can be done like this,

```js
// Regular expression to check if string is email
const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;

// String with email address
const str = "johndoe@example.com";

regexExp.test(str); // true
```

- The `test()` method will accept a `string` type as an argument to test for a match.
- The method will return boolean `true` if there is a match using the regular expression and `false` if not.

See the above example live in [JSBin](https://jsbin.com/jewigequqe/2/edit?js,console).

If you want this as a utility function which you can reuse, here it is,

```js
/* Check if string is email */
function checkIfEmail(str) {
  // Regular expression to check if string is email
  const regexExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gi;

  return regexExp.test(str);
}

// Use the function
checkIfEmail("johndoe@example.com"); // true
checkIfEmail("johndoe@example."); // false
```

That's all! 😃

### Feel free to share if you found this useful 😃.

---
IAC & DevX Updates; updating contribution guidelines
Tags: team, status, puppetlabsiis, devrel
Published: 2021-05-12 20:24:54

---
title: IAC & DevX Updates; updating contribution guidelines
published: true
date: 2021-05-07 00:00:00 UTC
tags: team,status,puppetlabsiis,devx
canonical_url: https://puppetlabs.github.io/iac/team/status/2021/05/07/status-update.html
---

## Community Day

This week it was a bank holiday in EMEA, therefore community day has been rescheduled for next Monday.

## Content Support team

As already mentioned this week, it was been pretty quiet with most of us on holidays. However we did manage to get a [customer issue on our puppetlabs-iis module](https://github.com/puppetlabs/puppetlabs-iis/pull/321) addressed. The team was made aware of this on Tuesday, it was picked up and triaged on Wednesday, reviewed and merged on Thursday and we aim for release on Monday during our team triage day.

We’re currently overhauling our Contribution Guidelines to reflect the new processes we introduced in the last year in [this PR](https://github.com/puppetlabs/iac/pull/242). Have a look and tell us what you think!

## Developer Experience

Work continues on reducing package size and improving templates. We presented some early concepts to a few customers in a TAB session to gain feedback on our direction and implementation. We received some great feedback from this session that will help us get the tooling available sooner for more feedback from a wider audience.

## Cloud CI

This week we have put together the multi-node walkthrough blog post available [here](https://github.com/puppetlabs/iac/pull/237/files) and finished the demo for porting modules to Cloud CI. This work will be very useful in the near future as other teams are starting to look into the possibilities offered by the Cloud CI.

We have also started work on the investigations needed to support the possibility of provisioning developer environments.
KISS - Keep It Simple, Stupid
Tags: programming, systems, study
Published: 2021-05-06 23:34:15

# What is KISS?
KISS(Keep It Simple, Stupid) is an important software development principle that say about not create something complicated when you can make this simple and this resolve a lot of problems in software development in different layers of this process like UX, system design and others.
 
# What I earn with this?
 Ok, for this I'll explain that when you create something simple you create this faster than complicated, when you need to resolve a simple problem you resolve this faster than a complicated problem, when you need that someone learn about your system, if your system is simple it will be easier to be understood than a complicated and engineered system and for consequence it'll be easier to maintain and something is simple it'll be like you think that need be.

# What's my experience with this?
 Nowadays, I use KISS every time that I think to create something with complicated ways and making something that I don't need to make when I not see a real gain with this or resolving a real problem(this is a mind about YAGNI too, but I'll talk about this other time) and this principle make me more humble because every time when someone says for me "this code is simple to understand" I feel me pride about this system.

# Conclusion
 That's another article for Pair time group and I choose this principle to say about baby steps and the power of simplicity, so that's a good way to think because every time you inject unnecessary complexity in a project you'll be turning this more difficult to maintain, and it'll reflect in agility of your delivery. 
 For today's it! thank you if you read this far and see others articles here in the future i'll share all Pair time group articles and you will see our ideas and discussions :3


![Alt](https://res.cloudinary.com/practicaldev/image/fetch/s--uLCaazgs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5991methcmv4ojwolws2.gif)

# References 

* [What does KISS stand for?](https://people.apache.org/~fhanik/kiss.html)
* [Qual a origem do “Keep It Simple, Stupid” (Kiss)?](https://uxdesign.blog.br/a-origem-do-keep-it-simple-stupid-kiss-b24085dc1327)
* [KISS principle applied to programming language design?](https://softwareengineering.stackexchange.com/questions/178294/kiss-principle-applied-to-programming-language-design)
Testes de regressão visual com Cypress + Percy: Analisando os diffs
Tags: tutorial, cypress, testing, automation
Published: 2021-05-06 23:22:45

# Execução com diffs

Até o momento já  conseguimos executar o teste, enviar o snapshot para a plataforma Percy e realizar o auto-approve. Com isso, já temos nossa baseline.

> Baseline serão seus snapshots válidos, ou seja, aqueles que devem ser considerados como certo. Serão com base neles que toda execução nova será comparada. 

Agora iremos alterar algo na aplicação e rodar os testes novamente para que o Percy identifique as inconsistências. 

1. Vamos remover  a frase *Treinando testes de regressão visual com Percy* da nossa aplicação e rodar o teste novamente. 

2. Como já temos uma imagem aprovada como baseline, tudo que precisamos fazer nesse momento é executar o teste novamente, já com a nossa aplicação sem a frase.
	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fqc4bigi92gw1tjgng0.png)
	
Acessar o link da build gerada no final da execução: https://percy.io/4c61c7c3/tutorial/builds/10231561
	
E olha só, já podemos ver que o Percy identificou inconsistências na nova imagem com base na imagem que temos salva. 
	
* Versão Desktop
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc4xyb78cwrarswqr5cl.png)
	
* Versão mobile
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxgsgpj4o0hbh8eceqat.png)
	
A partir daí exitem algumas ações a serem tomadas, como:

* Solicitar alterações do produto,impedindo que o teste seja salvo como "correto" até que a correção seja realizada. Para isso basta clicar no ponto de exclamação e colocar um comentário (não é obrigatório colocar) do porque está solicitando a request.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ccnyos6i3hfi28jwqi6.png)
	  
* Você também pode simplesmente aprovar essa imagem como a nova baseline, considerando que a frase deve ser removida de fato. Para isso, basta clicar no sinal de ok.
	 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gds3zp1nchhxxg2ku93.png)
		
No caso acima, fizemos apenas para uma imagem, pois temos apenas um testes. Claramente em seu projeto, haverá mais testes e consequentemente mais snapshot para validar. Caso queira aprovar todos os snapshots como corretos, basta clicar no botão *Approve Build* que toda sua build será aprovada. 
		
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp68mon5hncqrdg5eaft.png)
		
No próximo capítulo iremos ver integração contínua com Github Actions.
How to prepare for VMware Spring Professional Certification in 2021.
Tags: vmware, spring, professional, certification
Published: 2021-05-06 23:11:04

I have always said that passing an IT certification requires three things, a good course, a good book, and a nice practice test, and Spring certification (EDU-1202) is no different. If you want to pass this in-demand and prestigious Spring professional certification on the first attempt, here are my recommended books, courses, and practice test.

1. #[Spring Professional Certification Exam Tutorial - Module 01, Module2, ...](https://www.udemy.com/course/spring-certified-tutorial/)
This is an excellent preparatory course for Spring programmers aiming for Spring professional certification on Udemy.

The course is divided into many modules and it is very well structured and covers all exam topics in good detail.

If you are preparing for the EDU-1202 exam and need a complete course then I highly recommend this one, especially if you have worked in Spring before and know Spring basics. You can also buy this course for $10 or slightly more in Udemy sales which happen every now and then.

2. #[Spring in Action, Fifth Edition](https://www.manning.com/books/spring-in-action-fifth-edition)
I didn't find any Spring certification book which is especially covering Spring Professional certification with code EDU-1202 but this book is the closest I got.

This book is still very good and covers most of the exam topics and if you go through the book you will be in good shape for this exam.

![Book cover](https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSSyLAXLlX69aAkOLyv5D2bokRBetxzDlqY6DtJnNYgznkEcoHw)

3. #Spring Professional Practice Test
You can combine both this book and course with [Spring Professional Certification Exam - Practice Tests 2021](https://www.udemy.com/course/spring-professional-certification-exam-practice-tests-2021-p/?referralCode=0375996C269E4D753B9E) udemy course to build the speed and accuracy required to pass the exam on the first attempt. Here is what you will get in this course

- 360+ Unique Questions for practice
- 6 Full-length practice tests
- Answers and Explanation of each question
![course cover](https://img-a.udemycdn.com/course/240x135/3917112_1a98_9.jpg?zyR1NNlfFZRn6rsSj_Ek0WkIsSNyHKpM3glFxJ2SrhwOT1HV5bjFlRDuHaqeSjydh7mEalTHhFrazfX4W1xZu-SJv8H4qwKGu6uaszwLSJVig87GxcfVrj762MiUZ5cD)

There's also this course [Spring Professional Certification Exam Topic-based Test 2021](https://www.udemy.com/course/spring-professional-certification-exam-topic-based-test-2021/?referralCode=4B205C00E1C6EE5F7A58) which is based on the exam topics and it's very useful to identify weak areas up front and then develop a solid studying strategy using each of the robust testing features
![image couver](https://img-a.udemycdn.com/course/240x135/3955784_6443_4.jpg?gz2n47nA_LlsZ8vmFNXKvfoOVVd3mATT9RIb9web_9vr8Fb6Pa7zbYEmfc08HHRxt2b1jS9D4UxOMHTfIsuqN5tXL7dKwpyEjUa3eEEEMppnLW_KXO-UPLZyQ7pfjdWq)

Good Luck!
Testes de regressão visual com Cypress + Percy: Criando seu primeiro teste
Published: 2021-05-06 23:09:46

# Criando seu primeiro teste

Bom, dado que já temos o percy instalado em nosso projeto, faremos a criação do nosso primeiro teste de regressão visual. 

Dentro do diretório *cypress/integration* crie um arquivo chamado **visual.spec.js**. Abra o seu teste e coloque o conteúdo abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klkocrm9pi23i15q9hgu.png)

Entendendo o que fizemos no teste: 

```
cy.visit('https://ronunes-proffyaglz.netlify.app/');
```
- Visitamos a página inicial da nossa aplicação;

```
cy.get('.hero-image').should('be.visible');
```
- Verificamos se a imagem referente ao class (.hero-image) está visível. 

```
cy.percySnapshot();
```

- Por fim, realizamos a chamada do Percy para executar o snapshot. Lembrando que a execução é realizada em toda a área da página que você estiver, que no nosso caso é a home. 

Exececute seu teste e você deverá ter o mesmo resultado abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdolaa2ykguxcpjbyy1z.png)

Mas pandinha 🐼, cadê os snapshots? Calma lá jovens! 

A forma que fizemos acima permite executar os seus testes sem ter que realizar integração com a plataforma do Percy, o que ao contrário, faria com que cada teste seu que viesse a falhar, seria descontado do número de execuções que você tem no plano free. 

Não queremos perder essas execuções free que temos por bobeira né? 

No próximo tópico iremos ver como executar os testes integrando na plataforma do Percy.
How to connect second monitor to MacBook M1 🖥
Published: 2021-05-06 23:06:56

### Download and install the drivers
https://www.synaptics.com/products/displaylink-graphics/downloads/macos

(https://www.displaylink.com/downloads/macos - I had problems using this URL)

### Buy a DisplayLink adapter or docking station
I've bought a cheap, old, second hand Targus docking station that supports the DisplayLink drivers.

### Disadvantages
- colors are a bit different on the monitor connected via DisplayLink compared with the first monitor connected natively via an ordinary cable. I compensated the difference to some extent by tweaking the hardware settings in the monitor.
- the Night Shift mode, reducing blue light, is not supported via DisplayLink (nor 3rd party tools like f.lux)
Testes de regressão visual com Cypress + Percy: Configuração 
Tags: tutorial, testing, cypress, automation
Published: 2021-05-06 23:04:29

Já ouviu falar sobre testes de regressão visual? Não? 

Testes de regressão visual são basicamente testes de alto nível que conseguem identificar qualquer alteração visual de um sistema. Para que isso ocorra, o teste realiza um *snapshot* da página em questão, e realiza uma comparação 
com uma versão estável, conhecida como *baseline*. 

O que vamos ver nessa série de artigos é como fazer testes de regressão visual utilizando os frameworks Cypress e Percy.


## Pré-requisitos
- Ter o cypress instalado e configurado em sua máquina. No nosso caso, usaremos a versão mais recente (7.x), mas funcionará nas versões anteriores também.
- Ter um cadastro no https://percy.io (Não se assuste quando for direcionado para o *browserstack*. Você terá que fazer o login por lá mesmo).
- Ter o PERCY\_TOKEN como variável de ambiente. (Caso não tenha, basta acessar o portal do percy.io e criar um novo projeto que você verá o token). Se você já tiver o projeto e não sabe seu token, acesse seu projeto do percy, vá na opção *Project Settings*. Lá você achará seu token.

## Configuração

1) Adicione seu PERCY_TOKEN nas variáveis de ambiente. 

**Unix**

```
export PERCY_TOKEN="<your token here>"
```

**Windows**

```
set PERCY_TOKEN="<your token here>"
```

2) Acesse o repositório do seu projeto Cypress através do terminal (Windows/Unix) e instale a dependência do Percy:

``` 
npm install --save-dev @percy/cli @percy/cypress
```
> **Obs:** Lembre-se que a versão do Node deve ser no mínimo a 12.0.x. Caso contrário, ocorrá erro no seu console na hora de instalar as dependências acima. 

3) Agora precisamos importar o package do Percy no projeto. Para isso, adicione a linha abaixo no seu arquivo *Cypress/Support/index.js*. 

> import '@percy/cypress';
Setup a docker registry on Synology
Tags: docker, synology, deployment, devops
Published: 2021-05-06 22:57:56

On many occasions I found myself in the situation where I had to deploy quickly a web application and demo it a customer or product owner. Deployment these days with cloud services such as Microsoft Azure is really easy but still requires a little bit of time for initial setup (web app and database).

I figure that deploying it to docker container hosted on my office network is much faster solution. 

Here is how it's done:

As a reference I'm using my company's domain isready.io - replace it with your own.

## 1. Setup docker registry container on your Synology
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4a2qbd0nkc13fj7vo9c.png)



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swds65nha723m2gn640g.png)



## 2. Setup SSL Certificate from Let's Encrypt
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ica4e9zoen2l4s67ips8.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojar8h6yqsd6ci0sctfv.png)



## 3. Setup Reverse Proxy
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx0r80x8vj1mtz7jmelm.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icpdt9xacfyf2ki724a9.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnuqvdadxmdm2ew8wbwu.png)



## 4. Test docker registry endpoint
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrt36tzw135xf5w5qcos.png)



## 5. Build docker image and push to the registry
---

In this example I'm building Blazor Web Assembly App on Windows 10 It might be obvious but make sure Docker Desktop is installed and running.


Build docker image:

`docker build -t gp-web -f Dockerfile .`

Tag it

`docker tag gp-web:latest dockerhub.isready.io/gp-web`

Push to docker registry

`docker push dockerhub.isready.io/gp-web:latest`

Your image should be visible here 

`https://dockerhub.isready.io/v2/_catalog`



## 6. Configure your private registry in Synology Docker
---


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdy6vs8gksuiavirtz8v.png)


You should see your image and be able to install it.