DEV Community

How to properly internationalize a Vue application using i18next

Adriano Raiano — Mon, 16 May 2022 05:06:25 +0000

Since Vue.js is an approachable, performant and versatile framework for building web user interfaces, it also needs a best-in-class internationalization solution.
You may know vue-i18n, but for those already knowing i18next a Vue.js adapted version of i18next would be more appropriate.

In this tutorial we'll make use of the i18next-vue module.

So first of all: "Why i18next?"
Let's get into it...
- Prerequisites
- Getting started
- Language Switcher
  - How to get the current language?
- Interpolation and Pluralization
- Formatting
- Context
- Separate translations from code
- Better translation management
  - For sure!
  - How does this look like?
  - save missing translations
  - 👀 but there's more...
  - 📦 Let's prepare for production 🚀
  - 🎉🥳 Congratulations 🎊🎁

So first of all: "Why i18next?"

When it comes to React localization. One of the most popular is i18next with it's Vue extension i18next-vue, and for good reasons:

i18next was created in late 2011. It's older than most of the libraries you will use nowadays, including your main frontend technology (React, Angular, Vue, ...).

➡️ sustainable

Based on how long i18next already is available open source, there is no real i18n case that could not be solved with i18next.

➡️ mature

i18next can be used in any javascript (and a few non-javascript - .net, elm, iOS, android, ruby, ...) environment, with any UI framework, with any i18n format, ... the possibilities are endless.

➡️ extensible

There is a plenty of features and possibilities you'll get with i18next compared to other regular 18n frameworks.

➡️ rich

Here you can find more information about why i18next is special and how it works.

Let's get into it...

Prerequisites

Make sure you have Node.js and npm installed. It's best, if you have some experience with simple HTML, JavaScript and basic Vue.js, before jumping to i18next-vue.

Getting started

Take your own Vue project or create a new one, new one, i.e. with the vue create cli command.

npx @vue/cli create vue-starter-project

We are going to adapt the app to detect the language according to the user’s preference.
And we will create a language switcher to make the content change between different languages.

Let's install some i18next dependencies:

npm install i18next i18next-vue i18next-browser-languagedetector

Let's prepare an i18n.js file:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'

i18next
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        translation: {
          // here we will place our translations...
        }
      }
    }
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Let's import that file in our main.js file:

import { createApp } from 'vue'
import i18n from './i18n'
import App from './App.vue'

i18n(createApp(App)).mount('#app')

Now let's try to move some hard coded text out to the translations.

For the first text we just use a simple welcome key to directly invoke the $t function. The $t is more or less the same as i18next.t.

For the second text we will use the v-html directive to directly output real HTML.

Security Warning
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.

<template>
  <div class="hello">
    <h1>{{ $t('welcome') }}</h1>
    <p v-html="$t('descr')"></p>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase'
}
</script>

The texts are now part of the translation resources:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'

i18next
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        translation: {
          welcome: 'Welcome to Your Vue.js App',
          descr: 'For a guide and recipes on how to configure / customize '
            + 'this project,<br>check out the '
            + '<a href="https://cli.vuejs.org" target="_blank" '
            + 'rel="noopener">vue-cli documentation</a>.'
        }
      }
    }
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Language Switcher

Now let's define a language switcher:

<template>
  <div class="hello">
    <h1>{{ $t('welcome') }}</h1>
    <p v-html="$t('descr')"></p>
    <hr />
    <div>
      <div v-if="languages">
        <span v-for="(lng, index) in Object.keys(languages)" :key="lng">
          <a v-if="$i18next.resolvedLanguage !== lng" v-on:click="$i18next.changeLanguage(lng)">
            {{ languages[lng].nativeName }}
          </a>
          <strong v-if="$i18next.resolvedLanguage === lng">
            {{ languages[lng].nativeName }}
          </strong>
          <span v-if="index < (Object.keys(languages).length - 1)">&nbsp;|&nbsp;</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TranslationShowCase',
  data () {
    return {
      languages: {
        en: { nativeName: 'English' },
        de: { nativeName: 'Deutsch' }
      }
    }
  }
}
</script>

And also add some translations for the new language:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'

i18next
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        translation: {
          welcome: 'Welcome to Your Vue.js App',
          descr: 'For a guide and recipes on how to configure / customize '
            + 'this project,<br>check out the '
            + '<a href="https://cli.vuejs.org" target="_blank" '
            + 'rel="noopener">vue-cli documentation</a>.'
        }
      },
      de: {
        translation: {
          welcome: 'Willkommen zu Deiner Vue.js App',
          descr: 'Eine Anleitung und Rezepte zum Konfigurieren/Anpassen '
            + 'dieses Projekts findest du<br>in der '
            + '<a href="https://cli.vuejs.org" target="_blank" '
            + 'rel="noopener">vue-cli-Dokumentation</a>.'
        }
      }
    }
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

🥳 Awesome, you've just created your first language switcher!

Thanks to i18next-browser-languagedetector now it tries to detect the browser language and automatically use that language if you've provided the translations for it. The manually selected language in the language switcher is persisted in the localStorage, next time you visit the page, that language is used as preferred language.

How to get the current language?

Since i18next v21 there is i18next.resolvedLanguage.
It is set to the current resolved language and it can be used as primary used language, for example in a language switcher.

If your detected language for example is en-US and you provided translations only for en (fallbackLng) instead i18next.resolvedLanguage will return en.

i18next.language vs. i18next.languages vs. i18next.resolvedLanguage

/* language */
i18next.language;
// Is set to the current detected or set language.

/* language */
i18next.languages;
// Is set to an array of language codes that will be used to look up the translation value.
// When the language is set, this array is populated with the new language codes.
// Unless overridden, this array is populated with less-specific versions of that code for fallback purposes, followed by the list of fallback languages

// initialize with fallback languages
i18next.init({
  fallbackLng: ["es", "fr", "en-US", "dev"]
});
// change the language
i18next.changeLanguage("en-US-xx");
// new language and its more generic forms, followed by fallbacks
i18next.languages; // ["en-US-xx", "en-US", "en", "es", "fr", "dev"]
// change the language again
i18next.changeLanguage("de-DE");
// previous language is not retained
i18next.languages; // ["de-DE", "de", "es", "fr", "en-US", "dev"]

/* resolvedLanguage */
i18next.resolvedLanguage;
// Is set to the current resolved language.
// It can be used as primary used language,
// for example in a language switcher.

Interpolation and Pluralization

i18next goes beyond just providing the standard i18n features.
But for sure it's able to handle plurals and interpolation.

If you like to see how this works, have a look at this section in that other blog post.

Formatting

Also formatting can be done.

If you like to see how this works, have a look at this section in that other blog post.

Context

What about a specific greeting message based on the current day time? i.e. morning, evening, etc.
This is possible thanks to the context feature of i18next.

If you like to see how this works, have a look at this section in that other blog post.

Separate translations from code

Having the translations in our i18n.js file works, but is not that suitable to work with, for translators.
Let's separate the translations from the code and pleace them in dedicated json files.

Because this is a web application, i18next-http-backend will help us to do so.

npm install i18next-http-backend

Move the translations to the public folder:

Adapt the i18n.js file to use the i18next-http-backend:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'

i18next
  // i18next-http-backend
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en'
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Now the translations are loaded asynchronously.
If you have a slow network connectivity, you may notice until the translations are loaded only the i18n keys are shown.

To prevent this, we make use of the new Suspense functionality of Vue.js.

First let's adapt the i18n.js file, by exporting the i18next init promise:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'

export const
  i18nextPromise = i18next
  // i18next-http-backend
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    debug: true,
    fallbackLng: 'en'
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

...and use that promise in the App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TranslationShowCase />
</template>

<script>
import TranslationShowCase from './components/TranslationShowCase.vue'
import { i18nextPromise } from './i18n.js'

export default {
  name: 'App',
  components: {
    TranslationShowCase
  },
  // used in combination with Suspense.
  // useful when translations are not in-memory...
  async setup() {
    await i18nextPromise
    return {}
  }
}
</script>

Let's create a new file: i.e. Suspenser.vue:

<template>
  <Suspense>
    <template #default>
      <App />
    </template>
    <template #fallback>
      <div>
        <img alt="Vue logo" src="./assets/logo.png">
        <h1>Loading...</h1>
      </div>
    </template>
  </Suspense>
</template>

<script>
import App from './App.vue'

export default {
  name: 'Suspenser',
  components: {
    App
  }
}
</script>

And use that in your main.js file:

import { createApp } from 'vue'
import i18n from './i18n'
import App from './Suspenser.vue'

i18n(createApp(App)).mount('#app')

Now, as long your translations gets loaded you'll see the fallback template:

Now your app looks still the same, but your translations are separated.
If you want to support a new language, you just create a new folder and a new translation json file.
This gives you the possibility to send the translations to some translators.
Or if you're working with a translation management system you can just synchronize the files with a cli.

Better translation management

By sending the translations to some translators or translator agency you have more control and a direct contact with them. But this also means more work for you.
This is a traditional way. But be aware sending files around creates always an overhead.

Does a better option exist?

For sure!

i18next helps to get the application translated, and this is great - but there is more to it.

How do you integrate any translation services / agency?
How do you keep track of new or removed content?
How you handle proper versioning?
How you deploy translation changes without deploying your complete application?
and a lot more...

Looking for something like this❓

Easy to integrate
Continuous deployment? Continuous localization!
Manage the translation files with ease
Order professional translations
Analytics & Statistics
Profit from our content delivery network (CDN)
Versioning of your translations
Automatic and On-Demand Machine Translation
Riskfree: Take your data with you
Transparent and fair pricing
and a lot more...

How does this look like?

First you need to signup at locize and login.
Then create a new project in locize and add your translations. You can add your translations either by using the cli or by importing the individual json files or via API.

Done so, we're going to replace i18next-http-backend with i18next-locize-backend.

npm install i18next-locize-backend

After having imported the translations to locize, delete the locales folder.

Adapt the i18n.js file to use the i18next-locize-backend and make sure you copy the project-id and api-key from within your locize project:

import I18NextVue from 'i18next-vue'
import i18next from 'i18next'
import Backend from 'i18next-locize-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

const locizeOptions = {
  projectId: '94c21299-0cf5-4ad3-92eb-91f36fc3f20f',
  apiKey: 'bc8586d9-fceb-489c-86ac-2985393ed955', // YOU should not expose your apps API key to production!!!
  version: 'latest'
}

export const
  i18nextPromise = i18next
                    // i18next-locize-backend
                    // loads translations from your project, saves new keys to it (saveMissing: true)
                    // https://github.com/locize/i18next-locize-backend
                    .use(Backend)
                    // detect user language
                    // learn more: https://github.com/i18next/i18next-browser-languageDetector
                    .use(LanguageDetector)
                    // init i18next
                    // for all options read: https://www.i18next.com/overview/configuration-options
                    .init({
                      debug: true,
                      fallbackLng: 'en',
                      backend: locizeOptions
                    })

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

i18next-locize-backend offers a functionality to retrieve the available languages directly from locize, let's use it:

<template>
  <div class="hello">
    <h1>{{ $t('welcome') }}</h1>
    <p v-html="$t('descr')"></p>
    <i>{{ $t('new.key', 'this will be added automatically') }}</i>
    <hr />
    <div>
      <div v-if="languages">
        <span v-for="(lng, index) in Object.keys(languages)" :key="lng">
          <a v-if="$i18next.resolvedLanguage !== lng" v-on:click="$i18next.changeLanguage(lng)">
            {{ languages[lng].nativeName }}
          </a>
          <strong v-if="$i18next.resolvedLanguage === lng">
            {{ languages[lng].nativeName }}
          </strong>
          <span v-if="index < (Object.keys(languages).length - 1)">&nbsp;|&nbsp;</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import i18next from 'i18next'

export default {
  name: 'TranslationShowCase',
  data () {
    return {
      languages: []
    }
  },
  async mounted () {
    this.languages = await i18next.services.backendConnector.backend.getLanguages()
  }
}
</script>

save missing translations

Thanks to the use of the saveMissing functionality, new keys gets added to locize automatically, while developing the app.

Just pass saveMissing: true in the i18next options:

import I18NextVue from 'i18next-vue'
import i18next from 'i18next'
import Backend from 'i18next-locize-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

const locizeOptions = {
  projectId: '94c21299-0cf5-4ad3-92eb-91f36fc3f20f',
  apiKey: 'bc8586d9-fceb-489c-86ac-2985393ed955', // YOU should not expose your apps API key to production!!!
  version: 'latest'
}

export const
  i18nextPromise = i18next
                    // i18next-locize-backend
                    // loads translations from your project, saves new keys to it (saveMissing: true)
                    // https://github.com/locize/i18next-locize-backend
                    .use(Backend)
                    // detect user language
                    // learn more: https://github.com/i18next/i18next-browser-languageDetector
                    .use(LanguageDetector)
                    // init i18next
                    // for all options read: https://www.i18next.com/overview/configuration-options
                    .init({
                      debug: true,
                      fallbackLng: 'en',
                      backend: locizeOptions,
                      saveMissing: true
                    })

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Each time you'll use a new key, it will be sent to locize, i.e.:

<i>{{ $t('new.key', 'this will be added automatically') }}</i>

will result in locize like this:

👀 but there's more...

Thanks to the locize-lastused plugin, you'll be able to find and filter in locize which keys are used or not used anymore.

With the help of the locize plugin, you'll be able to use your app within the locize InContext Editor.

Lastly, with the help of the auto-machinetranslation workflow and the use of the saveMissing functionality, new keys not only gets added to locize automatically, while developing the app, but are also automatically translated into the target languages using machine translation.

Check out this video to see how the automatic machine translation workflow looks like!

npm install locize-lastused locize

use them in i18n.js:

import I18NextVue from 'i18next-vue'
import i18next from 'i18next'
import Backend from 'i18next-locize-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import LastUsed from 'locize-lastused'
import { locizePlugin } from 'locize'

const locizeOptions = {
  projectId: '94c21299-0cf5-4ad3-92eb-91f36fc3f20f',
  apiKey: 'bc8586d9-fceb-489c-86ac-2985393ed955', // YOU should not expose your apps API key to production!!!
  version: 'latest'
}

export const
  i18nextPromise = i18next
                    // locize-lastused
                    // sets a timestamp of last access on every translation segment on locize
                    // -> safely remove the ones not being touched for weeks/months
                    // https://github.com/locize/locize-lastused
                    .use(LastUsed)
                    // locize-editor
                    // InContext Editor of locize
                    .use(locizePlugin)
                    // i18next-locize-backend
                    // loads translations from your project, saves new keys to it (saveMissing: true)
                    // https://github.com/locize/i18next-locize-backend
                    .use(Backend)
                    // detect user language
                    // learn more: https://github.com/i18next/i18next-browser-languageDetector
                    .use(LanguageDetector)
                    // init i18next
                    // for all options read: https://www.i18next.com/overview/configuration-options
                    .init({
                      debug: true,
                      fallbackLng: 'en',
                      saveMissing: true,
                      backend: locizeOptions,
                      locizeLastUsed: locizeOptions
                    })

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Automatic machine translation:

Last used translations filter:

InContext Editor:

📦 Let's prepare for production 🚀

Now, we prepare the app for going to production.

First in locize, create a dedicated version for production. Do not enable auto publish for that version but publish manually or via API or via CLI.
Lastly, enable Cache-Control max-age for that production version.

Let's making use of the environment feature of react-scripts.

Lets' create a default environment file and one for development and one for production:

.env:

VUE_APP_LOCIZE_PROJECTID=94c21299-0cf5-4ad3-92eb-91f36fc3f20f

.env.development:

VUE_APP_LOCIZE_VERSION=latest
VUE_APP_LOCIZE_APIKEY=bc8586d9-fceb-489c-86ac-2985393ed955

.env.production:

VUE_APP_LOCIZE_VERSION=production

Now let's adapt the i18n.js file:

import I18NextVue from 'i18next-vue'
import i18next from 'i18next'
import Backend from 'i18next-locize-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import LastUsed from 'locize-lastused'
import { locizePlugin } from 'locize'

const isProduction = process.env.NODE_ENV === 'production'

const locizeOptions = {
  projectId: process.env.VUE_APP_LOCIZE_PROJECTID,
  apiKey: process.env.VUE_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!!
  version: process.env.VUE_APP_LOCIZE_VERSION
}

if (!isProduction) {
  // locize-lastused
  // sets a timestamp of last access on every translation segment on locize
  // -> safely remove the ones not being touched for weeks/months
  // https://github.com/locize/locize-lastused
  i18next.use(LastUsed);
}

export const
  i18nextPromise = i18next
                    // locize-editor
                    // InContext Editor of locize
                    .use(locizePlugin)
                    // i18next-locize-backend
                    // loads translations from your project, saves new keys to it (saveMissing: true)
                    // https://github.com/locize/i18next-locize-backend
                    .use(Backend)
                    // detect user language
                    // learn more: https://github.com/i18next/i18next-browser-languageDetector
                    .use(LanguageDetector)
                    // init i18next
                    // for all options read: https://www.i18next.com/overview/configuration-options
                    .init({
                      debug: !isProduction,
                      fallbackLng: 'en',
                      saveMissing: !isProduction,
                      backend: locizeOptions,
                      locizeLastUsed: locizeOptions
                    })

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Now, during development, you'll continue to save missing keys and to make use of lastused feature. => npm run serve

And in production environment, saveMissing and lastused are disabled, and also the api-key is not exposed. => npm run build

Caching:

Merging versions:

🧑‍💻 The complete code can be found here.

Check also the code integration part in this YouTube video.

🎉🥳 Congratulations 🎊🎁

I hope you’ve learned a few new things about i18next, Vue.js localization and modern localization workflows.

So if you want to take your i18n topic to the next level, it's worth to try the localization management platform - locize.

The founders of locize are also the creators of i18next. So with using locize you directly support the future of i18next.

👍

I created gui scraper

sripadhs — Mon, 16 May 2022 03:28:33 +0000

Hello i created rattle_gui_scraper you can easily scrap websites using our website.It is an amazing feature for you .try it now through our website for free

Here is the website:-https://rattleofficial.github.io/web-scraper

How to add Dark mode in Next.js Application using Tailwind CSS.

Rashid Ali — Mon, 16 May 2022 02:34:43 +0000

Hey there, In today's article I am going to show you how to add Dark mode to your Next.js application using Tailwind CSS.

What is Next.js?

Next.js is a React based open-source frontend framework, with features like SSR (Server Side Rendering) and SSG (Static Site Generation). Next.js also comes SEO optimized right out the box so you don't have to do it yourself from the scratch.

What is Tailwind CSS?

Tailwind CSS is utility-first CSS framework for quickly building highly customizable User Interfaces with low level CSS, This is great because it provides you an easy way to implement your web design and it only ships the CSS that is being used on the webpage which makes the whole app more light and efficient.

Here is how you can add Dark mode to your Next.js application using Tailwind CSS.

Prerequisites:

Make sure you have Nodejs installed on your local machine.

1. Setting up a new Next.js project

You can skip this step if you already have one.
Run npx create-next-app nextjs-tailwind in your terminal that should give you a new Next.js project with following files, You can use what ever name you prefer instead of nextjs-tailwind.

Run cd nextjs-tailwind to change directory and run npm run dev or yarn dev if you are using yarn to start your local developement server.

Go to http://localhost:3000, There you will be able to see the following default Next.js homepage.

2. Adding Tailwind CSS

Run npm install -D tailwindcss postcss autoprefixer, It will install Tailwind CSS and all the necessary dependencies.
Then run npx tailwindcss init -p, It will create tailwind.config.js and postcss.config.js files.

Open tailwind.config.js and do the following code changes.

module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

It will let Tailwind CSS know that on which files or folders it should be applied.

Now open styles/globals.css and add the following tailwind directives.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Spin up you development server by running npm run dev.

Make following changes into your pages/index.js to see if Tailwind CSS is working.

export default function Home() {
return (
<div className="pt-6 mt-28">
  <div className="flex justify-center items-center flex-col ">
    <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md mt-10">
      <a href="#">
        <img
          className="rounded-t-lg "
          src="https://source.unsplash.com/random/1920x1080/?laptop"
          alt=""
        />
      </a>
      <div className="p-5">
        <a href="#">
          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900">
            Laptops that you can't afford even in 2022.
          </h5>
        </a>
        <p className="mb-3 font-normal text-gray-700">
          Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
          facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
          voluptas galisum aut iure repellendus.
        </p>
        <a
          href="#"
          className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
        >
          Read more
          <svg
            className="ml-2 -mr-1 w-4 h-4"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
              clipRule="evenodd"
            ></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
);
}

After this you should be able see a card with a image and some text.

If you are using VS CODE you can use Tailwind CSS IntelliSense for better development experience.

3. Adding Dark mode

To add dark mode we need to install few things.

next-themes, This package provides an easy to implement themes in Next.js, You can check more on that here.
This package is optional you can use text or SVGs directly if you want but I will install @heroicons/react, It is an icon library which I will be using to make a theme toggle button.

Run the following command to install above packages.

npm install @heroicons/react next-themes

Edit `_app.js`

Wrap the whole app with the ThemeProvider to use next-themes.

import '../styles/globals.css';
import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Then go to tailwind.config.js and add darkMode: 'class' after content array.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
};

Note:

Technically you can hard code darkMode in tailwind.config.js and in the attribute of the ThemeProvider but since we want it to have state so I am using class. It will update HTML head and tailwind with the current theme using the ThemeProvider's context.

4. Creating the theme toggle component.

Create a src folder in root directory of the project and inside that create a file with name ThemeToggler.js, Add following code.

import { useTheme } from 'next-themes';
import { useState, useEffect } from 'react';
import { MoonIcon, SunIcon } from '@heroicons/react/outline';

const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <button
      className="w-8 h-8 bg-blue-100 rounded-lg dark:bg-slate-800 flex items-center justify-center hover:ring-2 ring-blue-400 transition-all duration-300 focus:outline-none"
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      aria-label="Toggle Dark Mode"
    >
      {theme === 'light' ? (
        <MoonIcon className="text-blue-500 w-5 h-5" />
      ) : (
        <SunIcon className="text-blue-400 w-5 h-5" />
      )}
    </button>
  );
};

export default ThemeToggler;

Let me break it down for you

I am using useTheme hook from next-themes that provides two things, one is theme which is just a string representing current theme and setTheme which is a method to change the current theme. It is similar to useState hook.
Since our component gets rendered on server first so we have some hydration mismatch problem, so in order to solve that I am checking if the component is mounted on the client side using React's useEffect hook.
In last I am using sun and moon icon to indicate actions with a simple JSX ternary operator.

How to add tailwind utility classes for dark mode.

So the way tailwind CSS dark mode works is similar to hover feature, once you have decided how you want the element to look in dark mode you can just add dark: in front of any utility classes that you wish to be activated in dark mode only.

Example:

<p className="text-slate-800 dark:text-slate-300"
>
This is some text.
</p>

so text color will be slate-800 if in light mode and slate-300 if it is in dark mode.

Final steps

Now lets add ThemeToggler and some classes for dark mode in our homepage, Open pages/index.js and add following code.

import ThemeToggler from '../src/ThemeToggler';

export default function Home() {
  return (
    <div className="pt-6 mt-28">
      <div className="flex justify-center items-center flex-col ">
        <ThemeToggler />
        <div className="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 mt-10 transition duration-300">
          <a href="#">
            <img
              className="rounded-t-lg "
              src="https://source.unsplash.com/random/1920x1080/?laptop"
              alt=""
            />
          </a>
          <div className="p-5">
            <a href="#">
              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                Laptops that you can't afford even in 2022.
              </h5>
            </a>
            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
              Lorem ipsum dolor sit amet. Cum laudantium laborum ut saepe
              facilis aut rerum corporis qui debitis voluptas. Rerum dolores aut
              voluptas galisum aut iure repellendus.
            </p>
            <a
              href="#"
              className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              Read more
              <svg
                className="ml-2 -mr-1 w-4 h-4"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

If you have done every thing as mentioned you should be able to see something like below on the homepage.

The image can be random because I am using Unsplash API.
Also if you open browser's dev tools, You will be able to see the current state of theme on your local storage.

Thanks for reading, I hope you got something out of it, if you have any questions or suggestions, please feel free to comment below also don't forget to follow me on twitter.

Building a simple invoice generator with Node Js

Njiva Olaf { dev-it-out } — Mon, 16 May 2022 01:05:51 +0000

Why ❓🤔

After each online coaching sessions, at the beginning, that was a pain to find a good invoice generator platform as I was not yet ready for a 20€ monthly subscription just for handling the invoice part.

None was enough flexible for my own use 🙄 so.. I decided to build my own mini-invoice generator with Node Js ✅ ( that took approx 1h max ⌛️ )

No more talk..Straight to the point 💪🏼

The main parts ⚙️:

1. Storing clients in Json :

Yep that one is simple..for now x)

(Note: these are fictional characters of course 😝 )

2. Creating the route:
Using express router, just create a POST /invoice route.
const router = express.Router(); router.post('/', handleCreateInvoice);

Then add the Joi Schema. Why ? It allows to define schema and validate the schema before calling the controller/handler of invoice creation.

Source: https://joi.dev/

3. Handling the invoice creation:

I used the module pdf-kit to generate the pdf to be sent to the client.

pdf-kit

4. Email sending:
A small function using gmail-send npm module which accepts html as an input

Yep..so what about the result ?

A snapshot of my first trials ^^ ( yep that email should be more personnalized and better structure 😊 )

Insomnia POST Call

Final result 😁

Next steps:

Front-end ( React 🤔 )
Database 💿
make it online x)
Iterate 👀

And you 💪🏼?

Tell us in the comments which mini-project you built 👀😊

Wanna support me ?

I am blogging during my free time ^^ like most people on this platform 😊 however I'm not against a small coffee if you want to support me 💪🏼 Link below:

https://ko-fi.com/dev_it_out

9 Best AWS Tutorials For Beginners in 2022

Yash Tiwari — Mon, 16 May 2022 00:52:17 +0000

What is AWS?

Amazon Web Services (AWS) is the oldest and most popular public cloud provider. It has the largest selection of services on the marketplace, allowing individuals and organizations to deploy or migrate their entire infrastructure to the AWS platform.

Why should you learn AWS?

As migration to the cloud becomes a key priority for many organizations, the demand for AWS Certified Professionals will only grow. Cloud Computing skills are becoming mandatory soon, and if you don't know Cloud Computing or have no experience with the big three clouds like AWS, GCP, and Azure, you will be left behind.

Best Online AWS Courses List

Ultimate AWS Certified Cloud Practitioner
AWS Cloud Practitioner Essentials - (Free)
Cloud Computing With Amazon Web Services - (Free)
Getting Started with Data Analytics on AWS
Building Modern Python Applications on AWS - (Free)
Learning AWS Single Sign On
Introduction to AWS Cloud Security
AWS Cloud Technical Essentials
AWS Developer: Deployment and Security

Disclosure: This post includes affiliate links; our team may receive compensation if you purchase products or services from the different links provided in this article.

Best AWS Online Courses Certifications List

1. Ultimate AWS Certified Cloud Practitioner

Learn Cloud Computing and Pass the AWS Cloud Practitioner CLF-C01 exam.

As an entry-level certification for AWS, the AWS Certified Cloud Practitioner is a great option. It is an excellent tool for measuring your understanding of AWS, its services, and its ecosystem.

In this AWS course, you will:

Pass the AWS Certified Cloud Practitioner Certification.
Learn the AWS Fundamentals (EC2, ELB, ASG, RDS, ElastiCache, S3).

This AWS course will cover all the new topics on the AWS Certified Cloud Practitioner CLF-C01 exam in depth. It's packed with practical knowledge on how to use AWS inside and out. Additionally, you will learn about preparing for the AWS exam.

Course rating: 4.7 out of 5.0 (90,171 Ratings total)
Duration: 14 Hours 21 Minutes
Certificate: Certificate on completion

2. AWS Cloud Practitioner Essentials - (Free)

If you're new to the cloud, whether you work in finance, legal, sales, or marketing, this course will provide you with an understanding of fundamental AWS Cloud concepts to help you gain confidence in contributing to your organization's cloud initiatives. This course is also a good place to start if you want to get your AWS Certified Cloud Practitioner certification whenever it's convenient for you.

In this AWS course, you will:

Understand the working definition of the AWS Cloud.
Differentiate between on-premises, hybrid-cloud, and all-in cloud.
Describe the basic global infrastructure of the AWS Cloud.
Explain the benefits of the AWS Cloud.

After completing the course, you will understand the benefits of the AWS Cloud as well as the fundamentals of its global infrastructure. You will be able to describe and demonstrate the core AWS services, such as compute, network, databases, and storage.

For those interested in finance, you'll be able to articulate the financial benefits of the AWS Cloud, define core billing and pricing models, and learn how to use pricing tools to make cost-effective AWS service choices.

Course rating: 4.8 out of 5.0 (736 Ratings total)
Duration: 20 Hours
Certificate: Certificate on completion

3. Cloud Computing With Amazon Web Services - (Free)

A beginner's guide to learn Cloud Computing with AWS.

This course is a beginner's guide to AWS Cloud Computing. In this course, you will learn about the majority of the services required to build your cloud infrastructure. This course is entirely practical in nature and focuses on how to configure AWS services in real time.

In this AWS course, you will learn:

How to create virtual servers in cloud.
How to configure monitoring services.
How to configure storage services in cloud.
How to setup load balancer and auto scaling of existing infrastructure.
How to setup your own infrastructure.

Additionally, you will learn how to configure virtual servers using Amazon EC2, set up storage using S3 and EBS, configure monitoring system using Amazon CloudWatch, bulk email solution using Amazon SES, etc.

Course rating: 4.2 out of 5.0 (5,921 Ratings total)
Duration: 2 Hours 40 Minutes
Certificate: Certificate on purchase

4. Getting Started with Data Analytics on AWS

Learn how to go from raw data to meaningful insights using AWS.

This one-week course will teach you how to use AWS to transform raw data into actionable insights. AWS professionals will teach you the principles of data analytics throughout the course.

In this AWS course, you will:

Explain different types of data analyses – descriptive, diagnostic, predictive, prescriptive.
Understand how to perform descriptive data analytics in the cloud with typical data sets.
How to build simple visualizations in AWS QuickSight to do descriptive analytics (using S3, Cloudtrail, Athena).

Before delving deeper into descriptive data analytics, you will be given an overview of various types of data analytics techniques, such as descriptive, diagnostic, predictive, and prescriptive. Then, put your knowledge to use with a guided project that use a simple but powerful dataset that is available by default in every AWS account: AWS CloudTrail logs.

Additionally, you will learn about Amazon Athena and Amazon QuickSight as part of the course. You'll also learn how to create a basic security dashboard as a simple but practical way to put your newfound data analytics knowledge to use.

Course rating: 4.6 out of 5.0 (476 Ratings total)
Duration: 4 Hours
Certificate: Certificate on completion

5. Building Modern Python Applications on AWS - (Free)

Learn how to build a modern, greenfield server less backend on AWS.

This course will teach you how to develop an API-driven application using Amazon API Gateway for serverless API hosting, AWS Lambda for serverless compute, and Amazon Cognito for serverless authentication.

In this AWS course, you will:

Define the cloud and how it works.
Differentiate between cloud computing and deployment models.
Explain the benefits of the AWS Cloud.
Describe the basic global infrastructure of the cloud.
Compare the different methods of interacting with AWS.
Describe and differentiate between AWS service domains.
Identify an appropriate solution using AWS Cloud services with various use cases.
Describe the Well-Architected Framework.
Explain the Shared Responsibility model.
Describe security services with the AWS Cloud.
Understand how an AWS Cloud migration strategy can help you meet your business objectives.
Articulate the financial benefits of the AWS Cloud for an organization’s cost management.
Define the billing, account management, and pricing models.
Understand how to use pricing tools to make cost-effective choices for AWS services.
Understand how to prepare for the AWS Certified Cloud Practitioner exam.

First, we will mock up how the API will look using an API-driven development process. After that, we will go over all the ins and outs of Amazon API Gateway, and we'll see that it does much more than just host an API.

Then, we will create an authentication method using Amazon Cognito. Learn how the authorization flow with Cognito works and how to integrate it into your APIs.

After that, we will add a Lambda backend that will be triggered by API Gateway. As part of the Lambda functions, AWS SDKs will be used to process data. Finally, we will talk about how to optimize your APIs at every layer using AWS features.

Course rating: 8,606 Total Enrollments
Duration: 18 Hours
Certificate: Certificate on completion

6. Learning AWS Single Sign-On

Discover the power of implementing AWS Single Sign-On to integrate a centralized Active Directory with a secure network identity management service.

In this course, you will learn how to get the most out of centralized user management with AWS Single Sign-On. With a hands-on demonstration of using a centralized Active Directory to manage multiple identities and control access in AWS, you will learn about the concepts, workflows, and benefits of Single Sign-On implementation.

Topics in this AWS course include:

Designing Your SSO Solution
AWS SSO Configuration
Assigning Permissions and Apps to Your SSO Deployment
Connecting Your Identity Sources

Additionally, you will learn how to set up Active Directory and integrate it with Single Sign-On, as well as how to install custom and third-party apps to fully utilize the service's capabilities.

Course rating: 4.1 out of 5.0
Duration: 44 Minutes
Certificate: Certificate on completion

7. Introduction to AWS Cloud Security

As more applications migrate to the AWS cloud, the demand for cloud security to protect and scale enterprises grows at an exponential rate. This course will teach you how to set up a secure cloud environment on AWS.

Topics in this AWS course include:

New Module
Identifying AWS Services for Security and When to Use Them
Define the Shared Responsibility Model

First, you'll get an overview of the fundamental AWS service offerings and how they relate to infrastructure security. After that, you'll discover how to secure your cloud data and enable secure communication between cloud services.

Finally, you will learn how to use cutting-edge logging and monitoring solutions to maintain a secure enterprise cloud environment. After completing this course, you will have the AWS skills and knowledge required to create a secure cloud environment.

Course rating: 4.4 out of 5.0
Duration: 1 Hour
Certificate: Certificate on completion

8. AWS Cloud Technical Essentials - (Free)

This course will introduce you to the most important AWS products, services, and solutions. It will teach learners and professionals the fundamental concepts of compute, database, storage, networking, monitoring, and security that they will need to know when working with AWS.

In this AWS course, you will learn:

Terminology and concepts related to the AWS platform.
How to navigate the AWS Management Console.
Key concepts of AWS security measures and AWS Identity and Access Management (IAM).
Several AWS compute services including Amazon EC2, Amazon Lambda, Amazon ECS and Amazon EKS.
AWS storage and database offerings such as Amazon RDS, Amazon Dynamo DB and Amazon S3.
Further insights into AWS' networking capabilities.
The monitoirng capabilities of Amazon CloudWatch.

Learn how to get started working on AWS with a highly engaging and hands-on course that covers the principles needed to become more adept in identifying AWS services so you can make informed IT decisions based on your business needs.

Additionally, this course will teach you how to create, compare, and implement highly available, fault-tolerant, scalable, and cost-effective cloud systems.

Course rating: 6,588 Total Enrollments
Duration: 8 Hours
Certificate: Certificate on completion

9. AWS Developer: Deployment and Security

Learn the best methods of deployment and how to use AWS security services to protect your account.

AWS gives developers a lot of options, but figuring out the best strategy to deploy apps or secure your resources can be difficult. In this course, you will learn how to effectively deploy applications to AWS and safeguard your AWS infrastructure.

Topics in this AWS course include:

Deploying and Security on AWS.
Deploying Applications to AWS.
Coordinating Services in AWS.
Securing Infrastructure in AWS.
Managing Access to AWS.

First, you'll learn how to deploy resources and applications efficiently. Following that, you'll learn how to secure your resources in a VPC. Finally, you'll learn how to manage your resources using Users, Groups, and Roles.

When you finish this course, you'll have the skills and understanding of AWS deployment and security that you'll need to keep your AWS resources safe and secure.

Course rating: 4.3 out of 5.0
Duration: 3 Hours 11 Minutes
Certificate: Certificate on completion

Hey! We hope you have found these Online AWS Courses & Certifications list helpful and intriguing. Since you've made it this far then certainly you are willing to learn more and here at Coursesity, it is our duty to enlighten people with knowledge on topics they are willing to learn.

Elixir: Consumindo dados de uma API externa

Maiqui Tomé 🇧🇷 — Mon, 16 May 2022 00:21:39 +0000

Neste post vamos aprender a consumir dados de uma API externa. No momento da criação do usuário, vamos realizar uma chamada na API do ViaCep para validar o CEP dele, buscando e gravando as informações de cidade e UF desse usuário. Vamos aprender também como evitar fazer chamadas desnecessárias.

Criando o projeto
- Tabela users
- Função para criar um usuário
Consumindo dados de uma API externa
- Instalando o Tesla
- Instalando o HTTPoison
- Behaviour para a função get_cep_info()
- HTTP Client com Tesla
- HTTP Client com HTTPoison
- Validando o CEP na criação do usuário
- Evitando chamadas desnecessarias para API Externa (apply_action)
- User-Agent header
Conclusão

Criando o projeto

$ mix phx.new learning_external_api --app my_app

Link do projeto pronto: https://github.com/maiquitome/learning_external_api

Tabela users

Criando a migration e o schema:

$ mix phx.gen.schema User users first_name last_name email cep city uf

Alterando o schema do user:

Remova city e uf apenas do validate_required.

Criando o banco de dados e rodando as migrations:

$ mix ecto.setup

Função para criar um usuário

Precisaremos de uma função para criar um usuário, pois vamos usar a API do ViaCEP para validar o CEP dele. Vamos adicionar essa validação posteriormente.

Em lib/my_app/users/create.ex:

defmodule MyApp.Users.Create do
  alias MyApp.{Repo, User}

  @type user_params :: %{
          first_name: String.t(),
          last_name: integer,
          cep: String.t(),
          email: String.t()
        }

  @doc """
  Inserts a user into the database.

  ## Examples

      iex> alias MyApp.{User, Users}
      ...>
      ...> user_params = %{
      ...>  first_name: "Mike",
      ...>  last_name: "Wazowski",
      ...>  cep: "95270000",
      ...>  email: "mike_wazowski@monstros_sa.com"
      ...> }
      ...>
      ...> {:ok, %User{}} = Users.Create.call user_params
      ...>
      iex> {:error, %Ecto.Changeset{}} = Users.Create.call %{}
  """
  @spec call(user_params()) :: {:error, Ecto.Changeset.t()} | {:ok, Ecto.Schema.t()}
  def call(params) do
    %User{}
    |> User.changeset(params)
    |> Repo.insert()
  end
end

Consumindo dados de uma API externa

Para conseguir consumir dados de uma API externa precisamos de um HTTP client. Podemos usar o Tesla ou o HTTPoison. A vantagem do Tesla é que ele possui middlewares prontos para usarmos. Neste post vamos usar os dois clients para compará-los.

Instalando o Tesla

Para instalar o Tesla, adicione ao mix.exs:

defp deps do
  [
    {:tesla, "~> 1.4"},

    # opcional, mas recomendado
    {:hackney, "~> 1.17"}

    # esse não precisa pois já vem com o phoenix
    {:jason, ">= 1.0.0"}
  ]
end

Você pode encontrar a versão mais recente do Tesla em: https://hex.pm/packages/tesla

Instalando as dependências:

$ mix deps.get

Testando o Tesla:

$ iex -S mix

iex> Tesla.get "https://viacep.com.br/ws/01001000/json/"
{:ok, %Tesla.Env{}}

iex> Tesla.get ""                                       
{:error, {:no_scheme}}

iex> Tesla.get "https://exemplo.com"                     
{:error, :econnrefused}

Instalando o HTTPoison

Para instalar o HTTPoison, adicione ao mix.exs:

defp deps do
  [
    {:httpoison, "~> 1.8"}
  ]
end

Você pode encontrar a versão mais recente do HTTPoison em: https://hex.pm/packages/httpoison

Instalando as dependências:

$ mix deps.get

Testando o HTTPoison:

$ iex -S mix

iex> HTTPoison.get "https://viacep.com.br/ws/01001000/json/"
{:ok, %HTTPoison.Response{}}

iex> HTTPoison.get ""                                   
** (CaseClauseError) no case clause matching: []

iex> HTTPoison.get "https://exemplo.com" 
{:error, %HTTPoison.Error{id: nil, reason: :closed}}

Behaviour para a função get_cep_info()

Vamos definir um contrato para a função get_cep_info(). Quando essa função for implementada ela obrigatoriamente deve receber uma String como parâmetro e retornar sempre uma tupla de {:ok, map()} ou {:error, map()}.

Em lib/my_app/via_cep/behaviour.ex:

defmodule MyApp.ViaCep.Behaviour do
  @callback get_cep_info(String.t()) :: {:ok, map()} | {:error, map()}
end

Se tentarmos retornar algo diferente para esta função, receberemos um aviso:

HTTP Client com Tesla

Vamos colocar o nome do arquivo de tesla_client.ex, pois faremos outro chamado httpoison_client.ex e, desta forma, conseguiremos comparar os HTTP clients de um jeito melhor.

Em lib/my_app/via_cep/tesla_client.ex:

defmodule MyApp.ViaCep.TeslaClient do
  # Ao invés de Tesla.get(), vc vai usar apenas get()
  use Tesla

  alias Tesla.Env

  @behaviour MyApp.ViaCep.Behaviour

  @base_url "https://viacep.com.br/ws/"

  # codifica (encode) os parametros para json
  # e descodifica (decode) a resposta para json automaticamente.
  plug Tesla.Middleware.JSON

  def get_cep_info(url \\ @base_url, cep) do
    "#{url}#{cep}/json/"
    |> get()
    |> handle_get()
  end

  # casos abaixo de sucesso e erro
  defp handle_get({:ok, %Env{status: 200, body: %{"erro" => "true"}}}) do
    {:error, %{status: :not_found, result: "CEP not found!"}}
  end

  defp handle_get({:ok, %Env{status: 200, body: body}}) do
    {:ok, body}
  end

  defp handle_get({:ok, %Env{status: 400, body: _body}}) do
    {:error, %{status: :bad_request, result: "Invalid CEP!"}}
  end

  defp handle_get({:error, reason}) do
    {:error, %{status: :bad_request, result: reason}}
  end
end

Vamos fazer o teste:

iex(1)> MyApp.ViaCep.TeslaClient.get_cep_info "95270000"
{:ok,
 %{
   "bairro" => "",
   "cep" => "95270-000",
   "complemento" => "",
   "ddd" => "54",
   "gia" => "",
   "ibge" => "4308201",
   "localidade" => "Flores da Cunha",
   "logradouro" => "",
   "siafi" => "8661",
   "uf" => "RS"
 }}

iex(2)> MyApp.ViaCep.TeslaClient.get_cep_info "95270001"
{:error, %{result: "CEP not found!", status: :not_found}}

iex(3)> MyApp.ViaCep.TeslaClient.get_cep_info ""        
{:error, %{result: "Invalid CEP!", status: :bad_request}}

HTTP Client com HTTPoison

No HTTPoison não temos um middleware pronto para transformar o json em map, então vamos precisar usar o Jason.decode() que já vem instalado no Phoenix.

Em lib/my_app/via_cep/httpoison_client.ex:

defmodule MyApp.ViaCep.HttpoisonClient do
  alias HTTPoison.{Error, Response}

  @behaviour MyApp.ViaCep.Behaviour

  @base_url "https://viacep.com.br/ws/"

  def get_cep_info(url \\ @base_url, cep) do
    "#{url}#{cep}/json/"
    |> HTTPoison.get()
    |> json_to_map()
    |> handle_get()
  end

  defp json_to_map({:ok, %Response{body: body} = response}) do
    {_ok_or_error, body} = Jason.decode(body)

    {:ok, Map.put(response, :body, body)}
  end

  defp json_to_map({:error, %Error{}} = error), do: error

  defp handle_get({:ok, %Response{status_code: 200, body: %{"erro" => "true"}}}) do
    {:error, %{status: :not_found, result: "CEP not found!"}}
  end

  defp handle_get({:ok, %Response{status_code: 200, body: body}}) do
    {:ok, body}
  end

  defp handle_get({:ok, %Response{status_code: 400, body: _body}}) do
    {:error, %{status: :bad_request, result: "Invalid CEP!"}}
  end

  defp handle_get({:error, reason}) do
    {:error, %{status: :bad_request, result: reason}}
  end
end

Vamos fazer o teste:

iex(1)> MyApp.ViaCep.HttpoisonClient.get_cep_info "95270000"
{:ok,
 %{
   "bairro" => "",
   "cep" => "95270-000",
   "complemento" => "",
   "ddd" => "54",
   "gia" => "",
   "ibge" => "4308201",
   "localidade" => "Flores da Cunha",
   "logradouro" => "",
   "siafi" => "8661",
   "uf" => "RS"
 }}

iex(2)> MyApp.ViaCep.HttpoisonClient.get_cep_info "95270001"
{:error, %{result: "CEP not found!", status: :not_found}}

iex(3)> MyApp.ViaCep.HttpoisonClient.get_cep_info ""        
{:error, %{result: "Invalid CEP!", status: :bad_request}}

Validando o CEP na criação do usuário

Em lib/my_app/users/create.ex, vamos alterar a função para passar a validar o CEP do usuário e, também, vamos pegar as informações da cidade e UF. Esta função apresenta um problema mas, vamos melhorar ela depois.

alias MyApp.ViaCep.HttpoisonClient, as: Client
...

@spec call(user_params()) :: {:error, Ecto.Changeset.t() | map()} | {:ok, Ecto.Schema.t()}
  def call(params) do
    cep = Map.get(params, :cep)

    with {:ok, %{"localidade" => city, "uf" => uf}} <- Client.get_cep_info(cep),
         params <- Map.merge(params, %{city: city, uf: uf}),
         changeset <- User.changeset(%User{}, params),
         {:ok, %User{}} = user <- Repo.insert(changeset) do
      user
    end
  end

Criando um usuário:

iex(1)> user_params = %{                   
...(1)>     first_name: "Mike",
...(1)>     last_name: "Wazowski",
...(1)>     cep: "95270000",
...(1)>     email: "mike_wazowski@monstros_sa.com"
...(1)>    }
%{
  cep: "95270000",
  email: "mike_wazowski@monstros_sa.com",
  first_name: "Mike",
  last_name: "Wazowski"
}

iex(2)> MyApp.Users.Create.call user_params       
CEP: "95270000"
{:ok,
 %MyApp.User{
   __meta__: #Ecto.Schema.Metadata<:loaded, "users">,
   cep: "95270000",
   city: "Flores da Cunha",
   email: "mike_wazowski@monstros_sa.com",
   first_name: "Mike",
   id: 1,
   inserted_at: ~N[2022-05-15 21:38:14],
   last_name: "Wazowski",
   uf: "RS",
   updated_at: ~N[2022-05-15 21:38:14]
 }}

CEP Inválido

iex(1)> user_params = %{                   
...(1)>     first_name: "Mike",
...(1)>     last_name: "Wazowski",
...(1)>     cep: "123",
...(1)>     email: "mike_wazowski@monstros_sa.com"
...(1)>    }
%{
  cep: "123",
  email: "mike_wazowski@monstros_sa.com",
  first_name: "Mike",
  last_name: "Wazowski"
}
iex(2)> MyApp.Users.Create.call user_params       
CEP: "123"
{:error, %{result: "Invalid CEP!", status: :bad_request}}

Perceba que foi mostrada a mensagem Invalid CEP! ao invés de mostrar a validação do changeset, alertando que o CEP devia possuir 8 caracteres, desta forma, teriamos a validação sem precisar fazer uma chamada desnecessária para a API externa.

Evitando chamadas desnecessarias para API Externa (apply_action)

Vamos agora validar todos os dados do changeset antes de fazer a chamada para a API do ViaCep.

Testando a validação do changeset sem usar o Repo.insert():

iex(1)> import Ecto.Changeset

iex(2)> user_params = %{
...(2)>     first_name: "Mike",
...(2)>     last_name: "Wazowski",
...(2)>     cep: "123",
...(2)>     email: "mike_wazowski@monstros_sa.com"
...(2)>    }
%{
  cep: "123",
  email: "mike_wazowski@monstros_sa.com",
  first_name: "Mike",
  last_name: "Wazowski"
}

iex(3)> MyApp.User.changeset(%MyApp.User{}, user_params) |> apply_action(:create)
{:error,
 #Ecto.Changeset<
   action: :create,
   changes: %{
     cep: "123",
     email: "mike_wazowski@monstros_sa.com",
     first_name: "Mike",
     last_name: "Wazowski"
   },
   errors: [
     cep: {"should be %{count} character(s)",
      [count: 8, validation: :length, kind: :is, type: :string]}
   ],
   data: #MyApp.User<>,
   valid?: false
 >}

Vamos alterar o arquivo lib/my_app/user.ex, adicionando a função validate_before_insert:

def validate_before_insert(changeset), do: apply_action(changeset, :insert)

Vamos agora alterar o arquivo lib/my_app/users/create.ex:

@spec call(user_params()) :: {:error, Ecto.Changeset.t() | map()} | {:ok, Ecto.Schema.t()}
  def call(params) do
    cep = Map.get(params, :cep)

    changeset = User.changeset(%User{}, params)

    with {:ok, %User{}} <- User.validate_before_insert(changeset),
         {:ok, %{"localidade" => city, "uf" => uf}} <- Client.get_cep_info(cep),
         params <- Map.merge(params, %{city: city, uf: uf}),
         changeset <- User.changeset(%User{}, params),
         {:ok, %User{}} = user <- Repo.insert(changeset) do
      user
    end
  end

Agora antes de fazer a chamada para o ViaCep estamos checando todas as validações do do changeset antes:

User-Agent header

Algumas API's externas podem solicitar algo a mais para realizar as chamadas, muitas podem pedir um token, no qual você consegue na documentação, ou no caso da API do github, um User-Agent header:

Com o Tesla facilmente você pode usar o plug Tesla.Middleware.Headers:

No Httpoison:

iex> HTTPoison.get "https://api.github.com/users/maiquitome/repos", [{"User-Agent", "foobar"}]

Leia na documentação do HTTPoison a parte de options.

Então, fique atento a documentação da API na qual você está realizando a chamada.

Conclusão

Em algum momento você vai precisar consumir dados de uma API externa; o que nos dias de hoje é bem normal. Ler a documentação da API externa é o primeiro passo para o sucesso. Em Elixir temos ótimas ferramentas de HTTP Client, a documentação dessas ferramentas também merece ser lida. Precisamos cuidar para não fazer chamadas desnecessárias em API's externas para não comprometer a performance da nossa aplicação. O próximo passo agora é saber como realizar testes automatizados nessas chamadas externas; assunto para um próximo post.

How to Drive Free Traffic to your Website

Jessica-Agorye — Sun, 15 May 2022 23:57:21 +0000

One big challenge that people who own a website face is driving traffic to their websites. The number of visitors you have on your website translates differently depending on the aim of the website, it could be that the goal of the website is to increase sales, generate quality leads, create opportunities, promote brand awareness, generate more revenue, or reach like-minded people and build a community, the reasons are limitless.

Therefore it is vital to drive traffic to your website, you can have the most attractive website, however, if you don't have website traffic, it's just an empty shell and defeats the purpose for creating it in the first place. There are several ways to drive traffic to your website, and they include; using social media, referral sites, paid search, organic search, email newsletters, direct traffic, and others.

Traffic to any website improves visibility and engagement, and the goal is to drive quality visitors to your site that are likely going to convert into customers. In this article, we’ll focus on different effective ways to drive traffic to your website for free. Let's look at how you can get discovered by utilizing free channels:

Search Engine Optimization
Search engines like Google, Yahoo, and MSN are used to gain website traffic. These search engines are designed to collect information based on search queries submitted by internet users. The results presented are called SERPs (search engine results pages).

On the search engine, queries are in a line of results, usually according to ranking. While the search engine’s algorithm is unique and uses varying and complex algorithms to generate search results, a common theme of these algorithms is that they take key elements of a web page like the page title, description tag, the URL, content, and keyword density of a webpage and thus put that page where it ranks on SERPs. With hundreds of websites and new web pages being created daily, among the top two ways to drive traffic to your site is through Search Engine Optimization [SEO].

SEO is one of the prime ways to increase website traffic for free. Here are three ways you can improve your SEO ranking on any of the search engines:

(1) Keywords: The key to on-page SEO is Keyword Strategy. A keyword is a word that carries great significance. For example, if your website is about healthy living, words like fitness, wholesomeness, and regimen are keywords that should appear strategically across your website. These are placements made across the pages on your website. When there's a query, the search engine interacts with the contents on your website, and they appear as SERPs. This is why content creation is our next point.

(2) SEO Content: SEO and Content Creation go hand in hand. SEO cannot work without content, and vice versa. For example, Google's search engine algorithm has been known to focus a lot on new content, and this is why it's necessary to be consistent with the content on your websites. Here's a list of content creation methods you can use that would help you with your SEO.

SEO Landing pages are great for several reasons. A typical landing page is a standalone webpage created for a specific reason. For example, a salesperson with a special offer promo can create a landing page to promote the offer. However, optimized SEO landing pages are for the search engine. This means that some features on the landing page appeal to search engine algorithms, which decide the value to searchers.
Dedicated Blog: Another way to constantly create content is by maintaining a Blog. Whatever your website is about, many owners have found that having a blog feature where you regularly post relevant and new content that features keywords is one of the best ways to rank on search engines. The more content and keywords you create, the more you begin to rank on the search engines and capture visitors to your website. By sharing regular content, you can capture traffic and grow by over 100% within your first three months of creating content consistently.
Reviews & Testimonials are another way to attract traffic to your website. They are content provided by users of your website. Gathering testimonials and reviews are a form of capturing keywords on your website and attracting new visitors. For example, "This is the top lifestyle blog, and I am glad I found it..." A review like this captures two high-ranking keywords in this market; Top lifestyle blog and Lifestyle. The algorithm also loves reviews and testimonials; therefore, the more you can gather reviews from your visitors or customers, the better.
Site Optimization: When building a website, you should optimize the site for search engines. Using the Google search engine as an example, their algorithm priority is to show results that match or most closely match the search query. This is why there are certain critical areas you must optimize on your website and they include:

(a) Title Tags appear as a clickable headline for the
search result when displayed as a search snippet on a
search engine results page (SERP). The significance
is why it should have a focus keyword.
Here’s a look at TechCabal's title tag - “Leading
Africa’s tech conversation”

(b) Header Tags or heading tags differentiate the headings
and the subheadings on a webpage from the rest of the
page's content. They are also HTML tags that -
represent introductory content and how it should be
displayed. A header tag is crucial for navigation and
readability and is used to improve the SEO of a
webpage. They rank in order of importance, from H1 to
H6 text formatting, where H1 and H2 are the most
essential for search engines algorithm. Tech Cabals H1
also includes the keyword “Leading Africa’s tech
conversation” featured in their title tag.

(c) Page Copy is the same as a website copy on your
website's top-level pages like the home page and about
us page. When creating content across these pages,
ensure to use your keywords moderately. Your copy
should be attractive and should be able to keep the
user hooked to the page.

(d) URL structurecontains a domain name, protocol, and
path.
It is an address on the internet and should be as simple as
possible. Your URL also serves as an opportunity to
highlight keywords and should be written in lower case with
defined keywords separated by hyphens.

Here's a sample of a page from the tech cabal website:

(e) Images also count when you think of improving your SEO.
It is important to use an alternative text(Alt text) on
every picture you upload to your site. This is what
appears when an image does not load, letting the user know
what the image is. These tags help to give context when
you use the image search on Google.

Also, on search engines, you can search using images and videos. This is another reason to always label them correctly.

(f) Meta Description provides a summary of a webpage. This
HTML element is displayed as a part of the search engine
results page (SERP) snippet and is used to give a user
some context as to how the page relates to their query.
Meta descriptions are the two lines of text that appear
below a clickable link. Look at tech cabals, Meta
description:

SEO always seems like work at first. However, with little time and effort, your website traffic would leap once you optimize your website for SEO, use keywords and create regular content. To track progress, you can benchmark organic traffic and keywords on your website before implementing these SEO strategies. You can check back between 2-4 months of traffic growth from your SEO efforts.

Google My Business
This product from Google is a free business listing that allows you to provide your business details. It is free to create your business profile on this service, as this web tool's goal is to help local businesses attain higher visibility on the google search engine.

Apart from listing your business on the Google my business tool, you can easily connect with your target audience, not just on search but through Google Maps. This way, when people search for terms related to the product or service you offer, your details show up on the right side of Google’s search engine. But what about your website? And how does this tool help drive traffic?

The listing shows visitors how to visit your website with a link to your website included.
It improves your website search and also improves your local SEO.
Listing for a local business is more likely to appear when people search for a nearby business using Google Maps; this is beneficial if you run a small business.

An optimized Google My Business website will help your business. However, the key to getting good results is to complete your profile and make sure it is fully optimized.

Email Marketing
Email marketing is a type of direct marketing that involves sending out specific messages to a list of already existing subscribers or potential clients. It uses personalized mass emails to promote special offers, share new product releases, or build relationships with subscribers to create interest. The potential of email marketing is limitless, and driving traffic to your website is also a part of it. If you have been collecting email addresses through contact forms, pop-up forms, sign-up forms, or any other medium, sending out newsletters is a great place to start.

You can also share other events or news about your product or service. You should always make sure that the call to action remains “visit our website.” Also, remember that email marketing should be moderate because people can easily unsubscribe from your emails.

Email marketing is still one of the best ways to reach clients and potential clients. Some examples of email marketing companies that run a free package are Mailchimp, Hubspot, and Omnisend.

Guest Posting
Among the best Search Engine Optimization practices is Guest Posting also referred to as guest blogging. Blog posts live perpetually on the web and remain relevant as long as the content is still relevant and searchable, especially the evergreen content.

Guest posting is contributing a post to another personal blog or website to build backlinks, exposure, and authority. Backlinks are significant as pages with several backlinks tend to have a higher organic search. For context, backlinks are links from one website to another website and have proven to be a surefire way to improve your search ranking and boost conversations about your website.

When guest posting, you should pay attention to articles that allow you to target the keywords your users are searching for, which drives more traffic to your website.

Mobile Optimization
A 2021 statistic stated that mobile devices generated 54.8% of global website traffic. The process of visitors accessing your website from mobile devices to have an engaging experience is known as Mobile Search Engine Optimization [Mobile SEO].

Mobile optimization is a process that involves redesigning a website to improve responsiveness. Most website visitors use their mobile phones to access the web and this is why mobile optimization has become an integral part of driving traffic to any website. The key features of an optimized site include; compressed images for faster load times, no pop-ups or at least easy to close pop-ups, simple, uncluttered, and responsive design.

Mobile SEO always considers the user’s experience of navigating the website. Google search engine takes mobile optimization seriously and may not rank you on the first page of the search results if your website is not mobile optimized.

Conclusion
The ways outlined above are different strategies you can apply to websites today to help you increase traffic at no additional cost. If you are currently in the middle of building a website or already have one but struggle to get traffic to your website, following these recommended steps will considerably help you drive traffic to your website.

Understanding Data Transfer Objects (DTO) and Data Validation in TypeScript (NestJS)

davidekete — Sun, 15 May 2022 23:38:02 +0000

Data Transfer Objects (DTOs) are the basis of data validation in NestJS applications. DTOs enable various layers of flexible data validation in NestJS.

In this publication, you will take a deep dive into data transfer objects, discussing validation mechanisms, authentication models, and everything else you need to know about data transfer objects.

Prerequisites

This tutorial is not beginner-themed. If you’re just getting started with NestJS, read this article.

You’ll need to meet these requirements to fully understand this article.

Prior experience creating NestJS apps with MongoDB.
Competence with PostMan (recommended) or any other API testing tool.
Basic knowledge of bcrypt or the NodeJS crypto module.

Once you meet these requirements, we can get started.

What is a Data Transfer Object?

A data transfer object, commonly called a DTO, is an object used to validate data and define data structure sent into your Nest applications. DTOs are similar to interfaces, but differ from interfaces in the following ways:

Interfaces are used for type-checking and structure definition.
A DTO is used for type-checking, structure definition, and data validation.
Interfaces disappear during compilation, as it’s native to TypeScript and doesn't exist in JavaScript.
DTOs are defined using classes that are supported in native JavaScript. Hence, it remains after compilation.

DTOs alone can only do type-checking and structure definition. To run data validations using DTOs, you’ll need to use the NestJS ValidationPipe.

Validation Mechanisms

Pipes are used to validate data in NestJS. Data passing through a pipe is evaluated, if it passes the validation test, it is returned unmodified; otherwise, an error is thrown.

NestJS has 8 inbuilt pipes, but you’ll be focusing on the ValidationPipe which makes use of the class-validator package, because it abstracts a lot of verbose code and makes it easy to validate data using decorators.

DTOs in a Simple User Authentication Model

A user authentication model is a perfect example to demystify DTOs. This is because it requires multiple levels of data validation. Let’s make one and explore DTOs and the ValidationPipe to validate all forms of data coming into our application.

Setting up Development Environment

To set up your development environment:

Generate a new project using the Nest CLI,
Generate your Module, Service, and Controller using the CLI,
Install Mongoose and connect your application to the database,
Create your schema folder and define the Schema.

A typical user-auth schema should look like:

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document } from 'mongoose';

export type UserDocument = User & Document;

@Schema()
export class User {
  @Prop({ required: true })
  fullName: string;

  @Prop({ required: true })
  email: string;

  @Prop({ required: true })
  password: string;
}
export const UserSchema = SchemaFactory.createForClass(User);

Having the fullName, email, and password as required properties.

Create a folder inside your module and call it dto. This is where your dto classes will be stored and exported.
Create a file inside your dto folder and name it user.dto.ts.

Structure of a DTO

A DTO is a class, so it follows the same syntax a class does.

export class newUserDto {
  fullName: string;
  email: string;
  password: string;
}

Above is the structure of a basic DTO.

This structure is only useful for type-checking, it has no data validation properties.

Implementing Data Validation

To add validation functions; follow the steps below;

Inside your main.ts,
Import {ValidationPipe} from '@nestjs/common',
Inside the bootstrap function and directly below the app constant, call the useGlobalPipes method on app and pass in new ValidationPipe() as an argument.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';
import * as dotenv from 'dotenv';
dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(process.env.PORT);
}
bootstrap();

This will enable auto-validation and ensure that all endpoints are protected from receiving incorrect data. The Validation pipe takes in an options object as an argument, you can find out more about it in the official documentation.

Install the class-validator and the class-transformer package by running:

npm i --save class-validator class-transformer

The class-transformer converts JSON objects into an instance of your DTO class and vice-versa.

The class-validator package has a lot of validation queries, which you can find in their documentation, but you’ll be focusing on a few of them related to user data validation. In your user.dto.ts file, import the following queries from class-validator:

IsNotEmpty: This validator checks if a given value is empty. It takes in an object of options as an argument.
IsString: This validator checks if a given value is a real string. It takes in an object of options as an argument.
IsEmail: This validator checks if a given value is of type email. It takes in an object of options as an argument.
Length: This Validator takes in 3 arguments. The first is the minLength, then the maxLength, and finally an object of options.

The above will be used as decorators to validate their respective fields. Implement this in your DTO,

import { IsNotEmpty, IsEmail, Length, IsString } from 'class-validator';

export class newUserDto {
  @IsNotEmpty({ message: 'Please Enter Full Name' })
  @IsString({ message: 'Please Enter Valid Name' })
  fullName: string;

  @IsEmail({ message: 'Please Enter a Valid Email' })
  email: string;

  @Length(6, 50, {
    message: 'Password length Must be between 6 and 50 charcters',
  })
  password: string;
}

The password field has only a Length validation but in production, you might need to add a few more fields to ensure the password is more secure.

These new validation fields might include checking if the password contains uppercase, lowercase, and numbers.

This can be done in several ways, including:

Padding with more validation decorators, like you did in the fullName field.
Using the @Matches validator and passing a regular expression that checks for your requirements as an argument.

But the cleanest way to do this would be by creating a custom validator to suit your specifications. You can learn more about custom decorators here.

Post & Put Requests

Test the data validation by making a few POST and PUT requests to your application. But before that, it’s bad practice to store your passwords in plain text. So hash them first before storing them in the database;

Hashing Passwords

You can hash the passwords using a package called bcrypt or the NodeJS crypto module. This publication covers bcrypt. To install bcrypt run

npm i bcrypt
npm i -D @types/bcrypt

Create a utils folder to store files that contain utility functions, like the function you’ll use to hash the passwords.

To ensure that user passwords are protected, you’ll need to hash them before they are stored in the database. Let’s implement this

Create a file in your utils folder, this will contain your utility functions.
Import * as bcrypt from 'bcrypt'
Create a function that takes in the raw password and hashes it using bcrypt then returns the hashed password. Export the function.

import * as bcrypt from 'bcrypt';

export async function hashPassword(textPassword: string) {
  const salt = await bcrypt.genSalt();
  const hash = await bcrypt.hash(textPassword, salt);
  return hash;
}

There are different ways to use the bcrypt package, which you can find here.

Now that you have a function to hash our passwords, Implement your first POST request.

Creating a New User

To create a new user with valid credentials, you’ll need to import the DTO you created earlier into your service.

Service Logic

Create an async function newUser that takes in a parameter user which should be the data of the new user. Set its type to the DTO created earlier.
Import the hashPassword function.
Inside the async function, create a constant password, and assign the return value of awaiting the hashPassword function with user.password as an argument.
Return a new instance of your own version of my userModel as an argument pass in an object containing a destructured user and the password, and call the save() method on it.

import { Injectable } from '@nestjs/common';
import { Model } from 'mongoose';
import { InjectModel } from '@nestjs/mongoose';
import { User, UserDocument } from './schemas/user.schema';
import { newUserDto } from './dto/user.dto';
import { hashPassword } from './utilis/bcrypt.utils';

@Injectable()
export class AuthService {
  constructor(
    @InjectModel(User.name)
    private userModel: Model<UserDocument>,
  ) {}

  async newUser(user: newUserDto): Promise<User> {
    const password = await hashPassword(user.password);
    return await new this.userModel({ ...user, password }).save();
  }
}

The DTO and the validators we set up earlier will continuously check if the data is valid before storing the user data in the database.

Implement the controller logic so that you can test the DTO with some dummy data.

Controller Logic

import {
  Controller,
  Body,
  Post, 
} from '@nestjs/common';
import { AuthService } from './auth.service';
import { newUserDto } from './dto/user.dto';

@Controller('users')
export class AuthController {
  constructor(private readonly service: AuthService) {}

  @Post('signup')
  async createUser(
    @Body()
    user: newUserDto,
  ): Promise<newUserDto> {
    return await this.service.newUser(user);
  }

As you can see in the code block above, the user parameter has a type of newUserDto. This ensures that all data coming into the application matches the DTO, else it throws an error.

Testing Endpoints

Test the validation with some dummy data by making requests to http://localhost:3000/users/signup using PostMan or your preferred testing tool.

{
    "fullName":"Jon Snow",
    "email":"snow@housestark.com",
    "password":"password"
}

The JSON data above checks all validation boxes. Hence, you’ll get a 201 response with data, with an _id property and a hashed password. Copy the _id property, you’ll need it when testing data validation in PUT requests.

{
    "fullName":"Arya Stark",
    "email":"aryathefaceless@housestark",
    "password":"password"
}

The JSON data above has an invalid email property. Hence, you’ll get a 400 response with a message that describes the error. Save it to the database by updating the email property to aryathefaceless@housestark.com.

{
    "fullName":"Tyrion Lannister",
    "email":"tyrion@houselannister.com",
    "password":"pass",
     "house":"Lannister"
}

The JSON data above has 2 problems, the password is too short (less than 6 characters) and there is an extra field house.

Increase the length of the password and send the request again. You’ll get a 200 request with the processed data, but the house field isn’t stored in the database because it was filtered when it was passed through the validation pipe.

Updating a User

Implement a PUT route to update user data when required.

Service Logic

async updateUser(id: string, userData: newUserDto): Promise<User> {
    return await this.userModel.findByIdAndUpdate(id, userData);
  }

Controller Logic

@Put(':id')
  async updateuser(
    @Param('id')
    id: string,
    @Body()
    user: newUserDto,
  ): Promise<newUserDto> {
    return this.service.updateUser(id, user);
  }

Similar to the POST request, the user is given a type of newUserDto. Hence, all data is checked thoroughly before it is saved in the database.

Test this endpoint by updating one of the users stored in your database. Recall that you copied the _id belonging to Jon Snow.

So make a PUT request to http://localhost:3000/id with the following data;

{
    "fullName":"Jon Snow",
    "email":"snow@housetargaryen.com",
    "password":"password"
}

The data above checks all validation boxes, so it would return a 200 response. If any of the data fields contain invalid data, it would return a 400 response and the PUT request would fail.

Logging Users in

A user-authentication model wouldn't be complete if you couldn't log users in. To implement the logic for that;

Firstly, you’ll need a bcrypt utility function that will compare the hashed and plain text passwords. Like so,

export async function validatePassword(textPassword: string, hash: string) {
  const validUser = await bcrypt.compare(textPassword, hash);
  return validUser;
}

Then, you’ll have to create a new DTO for the login data. The DTO is similar to the newUserDto but without the fullName property.

import { IsEmail } from 'class-validator';

export class loginUserDto {
  @IsEmail({ message: 'Please Enter a Valid Email' })
  email: string;

  password: string;
}

Notice that no validator was added to the password property. This is because it could pose a security threat in the future, as it exposes the password length range to malicious users.

Service Logic

async loginUser(loginData: loginUserDto) {
    const email = loginData.email;
    const user = await this.userModel.findOne({ email });
    if (user) {
      const valid = await validatePassword(loginData.password, user.password);
      if (valid) {
        return user;
      }
    }
    return new UnauthorizedException('Invalid Credentials');
  }

Your service logic should be able to,

Check if the user exists;

If the user exists, validate the passwords
If the user doesn't exist, throw an exception

Validate Passwords;

If the passwords match, return the user
If the passwords don’t match, throw an exception

Controller Logic

@Post('login')
  async loginUser(
    @Body()
    loginData: loginUserDto,
  ) {
    return await this.service.loginUser(loginData);
  }

Your controller should make the POST request to http://localhost:3000/users/login.

Conclusion

You’re finally at the end of this article. Here’s a recap what you’ve covered.

What a DTO is,
Differences between a DTO and an interface,
Structure of a DTO,
NestJS validation mechanism,
Making a simple user-authentication model with bcrypt.

That’s quite a lot, congratulations on making it this far.

You can find the code on Github.

Happy Coding!

Tailwind CSS Customization Summary

nrikiji — Sun, 15 May 2022 23:24:39 +0000

Worked with tailwindcss 3.0.23

Add color theme

In tailwind, you can use bg-white for white background color, text-white for white text, etc., but you can use your own color in the white part.

tailwind.config.js

module.exports = {
  ・・・
  theme: {
    extend: {
      colors: {
        "foo": "#f97316",
        "bar": {
      "buz": "#65C18C",
      ・・・
        },
      },
    },
  },
  ・・・
}

Allows specifying background color foo and text color bar-buz.

<div class="bg-foo text-bar-buz">　・・・</div>

Use custom fonts

Read font file

html

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet" />

or loaded with css

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

Specify font name and font family

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        fancy: ["Dancing Script"],
      },
    },
  },
}

font-fancy can be used.

html

<span class="font-fancy">・・・</span>

Instructions for adding google fonts can be found in this article

Putting the class together

Can create a class that summarizes tailwind classes with @apply.

css

.custom-btn {
  @apply w-20 h-20 m-5 p5 text-center;
}

html

<button class="custom-btn">Button</button>

The @layer determines the priority of the added style. In this case base < components < utilities.

@layer base {
  h1 { @apply text-2xl; }
}

@layer components {
  h1 { @apply text-4xl; }
}

@layer utilities {
  h1 { @apply text-5xl; }
}

These uses are quoted from document translated by

base

The base layer is for things like reset rules or default styles applied to plain HTML elements.

components

The components layer is for class-based styles that you want to be able to override with utilities.

utilities

The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.

Toggle light/dark mode

dark: specifies class for dark mode

<div class="bg-white dark:bg-black">
  ・・・
</div>

How to determine if it is in dark mode

tailwind.config.js

module.exports = {
  // elements with dark class and below act as dark mode
  darkMode: "class",

  // dark mode is determined by os setting (default)
  // darkMode: "media",
  }
}

In this case, it operates as a dark mode

<html class="dark">
  ・・・
  <div class="bg-white dark:bg-black">
    ・・・
  </div>
</html>

Dynamically add and remove dark classes to switch between dark and light modes

Switch themes

Create the colors primary and primary-text in this example

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
     　　  "primary": "var(--color-primary)",
     　　  "primary-text": "var(--color-primary-text)",
      }
    },
  },
}

Set color with css

/* default theme */
:root {
  --color-primary: #ffffff;
  --color-primary-text: #000000;
}

/* alternate-theme */
.custom-theme {
  --color-primary: #000000;
  --color-primary-text: #ffffff;
}

Apply by specifying the class name of the theme

<div class="custom-theme">
  <button class="bg-primary text-primary-text">Button</button>
</div>

If you make the class name of the theme dynamic, you can switch the theme of the application for each user, for example.

Items that can be specified in tailwind.config.js and their default values

You can check it here.
https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

Create a restaurant barcode menu in Next.js.

Emmanuel Ugwu — Sun, 15 May 2022 23:20:56 +0000

Barcodes have a proven to increase the speed to product utilization thereby improving the efficiency of enterprises worldwide. Barcodes are utilized in commerce, technology, and industrial sectors for almost 50 years.

Barcode consists of bars representing the binary digits 0 and 1. The binary numbers can represent values ranging from 0 to 9 and are processed by a digital computer.

This article briefly discusses the application of barcode technology in building a restaurant barcode menu.

Codesandbox and Github

The completed project is on CodeSandbox. Fork it to get started quickly.

<Codesandbox id="friendly-kepler-tb8pcj" 
title="Create a restaurant barcode menu in Next.js" 
/>

The source code is on Github.

Prerequisite

Adequate knowledge of JavaScript and React.js is required for this article. The knowledge of Next.js is preferred but not required.

Getting Started with Next.js

Next.js is a React-based framework with functionalities like pre-rendering, automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.

Created by Vercel, Next.js is open source and based on Node.js and Babel — and also integrates with React to create single-page apps.

Project setup and installation

To create a new project, we’ll run the following command in our terminal:

npx create-next-app <project-name>

Next, we’ll navigate into the project directory and install the react-barcode package with the command below:

cd <project-name> && npm install react-barcode

Running npm run dev will start the development server by default at http://localhost:3000 in our browser.

What is react-barcode?

react-barcode is a lightweight, high-performance component for React applications that display standard 1D and 2D barcodes. It is seamless to use and does not require fonts. The barcodes generated are optimized for printing and on-screen scanning.

react-barcode is easily customizable, as it provides options to customize its color, height, width, and more. It can display different barcodes forms such as svgs, canvas, images, etc. It uses a set of default option values to display a barcode.

Building the barcode component

With our project fully set up and configured, we can start building the barcode menu.

First, we’ll create an input element and a state variable called barcode in ./pages/index.js. The input is to accept the restaurant’s URL, which will be transformed into a barcode and then stored in the barcode state variable. The input will trigger an event to update the barcode value as the input value changes.

We’ll also import the barcode component from react-barcode to create a barcode from our input value.

import React, { useState } from "react";
import Barcode from "react-barcode";

export default function Home() {
const [barcode, setBarcode] = useState("CODE128");
const handleChange = (event) => {
  setBarcode(event.target.value ? event.target.value : "");
};
return (
<div className="App">
  <h1 className="title">
   Restaurant Barcode Menu
  </h1>
  <input type="text" 
   placeholder="type here" 
   onChange={handleChange} 
  />
 </div>
      );
    }

Next, we’ll add the barcode component, which utilizes some options on how to display the barcode.

<Barcode value={barcode} format={"auto"} 
height={90} width={1.5} fontOptions="600" 
textMargin={4} margin={0} ref={barcodeRef} 
/>

The options in the code snippet above do the following:

value - This holds the input value converted to a barcode.
format - Select which barcode type to use. For example, CODE128, CODE39, EAN13, etc.
height - This is the height of the barcode.
width - This is the width of a single bar.
fontOptions - This adds a bold or italic text to the barcode.
textMargin - This sets the space between the barcode and the text.
margin - Sets the space margin around the barcode. All sides will inherit the margins property if nothing else is set but can be replaced if we set them separably.
ref: To access the Barcode element after it has been mounted to the DOM.

Our barcode menu should look like this in our browser:

Testing the barcode menu

We’ll transform a random restaurant’s URL into a barcode to ensure the barcode menu is fully functional.

Then, we’ll have to scan the barcode with the help of any barcode scanner application on our computer system or phone. The barcode scanner will show the same URL as the one in the barcode menu above to show our application is fully functional.

Conclusion

This article discussed how to transform URLs into barcodes and, more importantly, integrate barcodes into web applications.

Resources

What is `this`? Technical debt!

Luke Shiru — Sun, 15 May 2022 23:17:33 +0000

There are a plethora of articles not only here in DEV, but all over the web, about what is this in JavaScript. That's because this is one of the most confusing topics about JavaScript for juniors, even if they are experienced in other programming languages.

There are lots of answers to the question "What is this?", but from my point of view the answer is just one: "Technical debt", and that's because, for me, anything written using this, can and should be written without it.

In this article, we will go over some of the reasons you might want to avoid this as well.

Implicit isn't good

this is an implicit value, which means that you're not defining it as an argument of your functions, as a variable, or anything like that. It's already defined for you. You might think for a second "that's great", but you have to consider that depending on where you are in your code, this changes, so you can't be 100% certain about what's its current value.

console.log(this); // Will log `globalThis`.

const object = {
    shouldLogObject() {
        console.log(this);
    },
};

object.shouldLogObject(); // Will log `object`

[1, 2, 3].map(object.shouldLogObject); // Will log `globalThis` 3 times (???)

const aFunction = function () {
    console.log(this);
};

aFunction(); // Will log `globalThis`

const arrowFunction = () => console.log(this); // Will log `globalThis`

aFunction.call("foo"); // Will log `"foo"`

Now, let's see how this looks like if we don't use this:

console.log("hello"); // Will log `"hello"`.

const object = {
    shouldLogArgument(argument) {
        console.log(argument);
    },
};

object.shouldLogArgument("foo"); // Will log `"foo"`

[1, 2, 3].map(object.shouldLogArgument); // Will log `1`, `2` and `3`

const aFunction = function (argument) {
    console.log(argument);
};

aFunction("foo"); // Will log `"foo"`

// Will log the value of `argument`:
const arrowFunction = argument => console.log(argument);

aFunction("foo"); // Will log `"foo"`

Is almost the same amount of code, but now is pretty clear what everything does because we are being explicit about it.

The "solutions" are even worst

Some posts out there tell you that is "easy" to solve this kind of issue, by using some methods that come with a function: bind, call and apply. To me, that's like putting patches over patches instead of fixing the root issue. Let's say that we have a function that takes a callback called onEvent:

// with plain functions:
onEvent(doSomething); // readable, no issues here

// but with class methods:
onEvent(instance.doSomething); // will break if it uses `this`

// to "solve" that:
onEvent(event => instance.doSomething(event)); // verbose

// or
onEvent(instance.doSomething.bind(instance)); // wth?!

// or when you write the class itself:
class Example {
    constructor() {
        this.doSomething = this.doSomething.bind(this); // 🤮
    }
}

If you don't use classes...

I already have a post here on DEV about why you don't need classes in order to code, and this post is kinda related, mainly because this is extremely common when working with class. You might say that if you work with static methods and stuff like that, then you don't use this, but then my answer to that is: Why are you even using class then? You could just have those static methods be functions in a module and use them directly.

So is it useless to learn what `this` is?

No, you definitely need to know how this works, not to mention that there are lots of native APIs in the browser and the server that uses classes, and knowing how to deal with this is useful when working with them. My point is that you should avoid code that uses this to make your life and the lives of other devs better.

Closing thoughts

I wrote this article mainly because some folks that explain what this is, also try to "sell it" like something good, when it actually sucks, so go and learn how to deal with it if you encounter one this in the wild, but avoid it as much as possible in the code you author.

That's it. That's the post.

If you agree I would love to read scenarios where this messed with you, and if you disagree please comment on the reasons you believe is a good idea to rely on an implicit value like this.

Thanks for taking the time of reading!

Cheers!

NPM Library to get a list of WordPress posts' character counts using the WP REST API

Yuki Shindo — Sun, 15 May 2022 22:40:46 +0000

NPM Library to get a list of WordPress posts' character counts

I have created an npm library to retrieve the character count of all articles published on WordPress using the REST API provided by WordPress.
The name is wp-rest-api-posts-wordcount.

Check the GitHub repository for details.
https://github.com/shinshin86/wp-rest-api-posts-wordcount

Installation and code examples are as follows.

Install:

npm install wp-rest-api-posts-wordcount
# or
yarn add wp-rest-api-posts-wordcount

Example:

const getWordcountList = require('wp-rest-api-posts-wordcount');

(async () => {
  try {
    const response = await getWordcountList('your wordpress url');
    console.log(response);
  } catch (e) {
    console.error(e);
  }
})();

What is WP REST API?

To briefly explain the WP REST API used in this library, WordPress provides the following endpoints for REST APIs.

https://developer.wordpress.org/rest-api/

This can be disabled on the WordPress side, but is probably currently enabled by default if you have not made any changes to your settings.

This REST API can be used to retrieve information about published articles.

For example, you can check the value x-wp-total in the response header to get the number of target WordPress pages, etc.
You can use it in various ways, so it would be interesting to read this document once.
(I actually use x-wp-total in my npm library)

Code sample using WP REST API

Here is where the WP REST API is actually used in wp-rest-api-posts-wordcount.

This shows that it is very easy to use the WP REST API.

const targetUrl = `${url}/wp-json/wp/v2/posts`;
const response = await fetch(targetUrl);
const wpTotalPageCount: number = response.headers.get('x-wp-total');

It is possible to retrieve information about public posts by sending a request to the endpoint your_wordpress_url/wp-json/wp/v2/posts like this.

response.headers.get('x-wp-total') to get the number of pages in WordPress.

From this sample, you can see that this API is easy to use.

Various information can be found by checking the official documentation.

Let's build all sorts of useful tools using the WP REST API!

DEV Community

How to properly internationalize a Vue application using i18next

TOC

So first of all: "Why i18next?"

Let's get into it...

Prerequisites

Getting started

Language Switcher

How to get the current language?

i18next.language vs. i18next.languages vs. i18next.resolvedLanguage

Interpolation and Pluralization

Formatting

Context

Separate translations from code

Better translation management

For sure!

How does this look like?

save missing translations

👀 but there's more...

📦 Let's prepare for production 🚀

🎉🥳 Congratulations 🎊🎁

👍

I created gui scraper

How to add Dark mode in Next.js Application using Tailwind CSS.

What is Next.js?

What is Tailwind CSS?

Here is how you can add Dark mode to your Next.js application using Tailwind CSS.

Prerequisites:

1. Setting up a new Next.js project

2. Adding Tailwind CSS

3. Adding Dark mode

Edit _app.js

Note:

4. Creating the theme toggle component.

Let me break it down for you

How to add tailwind utility classes for dark mode.

Example:

Final steps

Building a simple invoice generator with Node Js

Why ❓🤔

The main parts ⚙️:

Yep..so what about the result ?

Next steps:

And you 💪🏼?

Wanna support me ?

9 Best AWS Tutorials For Beginners in 2022

What is AWS?

Why should you learn AWS?

Best Online AWS Courses List

Best AWS Online Courses Certifications List

1. Ultimate AWS Certified Cloud Practitioner

2. AWS Cloud Practitioner Essentials - (Free)

3. Cloud Computing With Amazon Web Services - (Free)

4. Getting Started with Data Analytics on AWS

5. Building Modern Python Applications on AWS - (Free)

6. Learning AWS Single Sign-On

7. Introduction to AWS Cloud Security

8. AWS Cloud Technical Essentials - (Free)

9. AWS Developer: Deployment and Security

Elixir: Consumindo dados de uma API externa

Criando o projeto

Tabela users

Função para criar um usuário

Consumindo dados de uma API externa

Instalando o Tesla

Instalando o HTTPoison

Behaviour para a função get_cep_info()

HTTP Client com Tesla

HTTP Client com HTTPoison

Validando o CEP na criação do usuário

CEP Inválido

Evitando chamadas desnecessarias para API Externa (apply_action)

User-Agent header

Conclusão

How to Drive Free Traffic to your Website

Understanding Data Transfer Objects (DTO) and Data Validation in TypeScript (NestJS)

Prerequisites

What is a Data Transfer Object?

Validation Mechanisms

DTOs in a Simple User Authentication Model

Edit `_app.js`

So is it useless to learn what `this` is?