Forem: Felipe Genuino

Internacionalizando aplicações Reacjs usando i18n

Felipe Genuino — Sun, 15 Oct 2023 01:03:30 +0000

Internacionalizando Reactjs com i18n

Install pacotes react-i18next i18next

npm install react-i18next i18next

Criar pasta e arquivos relacionados

Criar pasta i18n e arquivos pt.json e en.json

Estrutura

├── node_modules/
├── public/
└── src
    └── i18n
        ├── i18n.jsx
        ├── pt.json
        ├── en.json
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
├── .gitignore
├── package.json
├── package-lock.json
├── README.md

// src/i18n/i18next.jsx

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import en from './en.json'
import pt from './pt.json'

i18next
    .use(initReactI18next)
    .init({
        compatibilityJSON: "v4",
        lng: 'en', // if you're using a language detector, do not define the lang option
        fallbackLng: 'en',
        resources: {
            en,
            pt
        },
        react: {
            useSuspense: false
        },
        interpolation: {
            escapeValue: false
        }
    })
export default i18next

// src/i18n/pt.json

{
    "translation": {
        "language":"Português selecionado",
        "task_create_one": "Tarefa criada",
        "task_create_other": "{{count}} tarefas criadas",
        "post_title": "Os Princípios Fundamentais do Design: Um Guia Abrangente",
        "post_description": "O design é uma combinação perfeita de criatividade e estratégia. É a arte de comunicar uma mensagem, contar uma história e criar uma experiência memorável. Por trás de cada design impactante, existem princípios fundamentais que servem como alicerces para o sucesso. Neste guia abrangente, exploraremos esses elementos e princípios básicos do design que todo designer deve dominar para criar projetos verdadeiramente impactantes.",
        "keys_title": "Elementos-Chave do Design",
        "keys_names": "1. Cores: A Paleta de Emoções, 2. Tipografia: A Arte das Palavras, 3. Layout: A Organização Visual, 4. Formas e Espaço: A Geometria do Design"
     }
}

// src/i18n/en.json

{
    "translation": {
        "language":"English selected",
        "task_create_one": "Task created",
        "task_create_other": "{{count}} tasks created",
        "post_title": "The Fundamental Principles of Design: A Comprehensive Guide",
        "post_description": "Design is a perfect blend of creativity and strategy. It is the art of communicating a message, telling a story, and creating a memorable experience. Behind every impactful design, there are fundamental principles that serve as foundations for success. In this comprehensive guide, we will explore these basic elements and principles of design that every designer must master to create truly impactful projects. ",
        "keys_title": "Key Design Elements",
        "keys_names": "1. Color: The Palette of Emotions, 2. Typography: The Art of Words, 3. Layout: Visual Organization, 4. Shapes and Space: The Geometry of Design"
    }
}

Implementando na aplicação

Importar arquivo i18n.jsx en.json e pt.json
Importar e chamar hook useTranslation
Implementar usando {t('YOUR_TRANSLATION_STRING')}

// App.jsx

import './i18n/i18n.jsx'
import { useTranslation } from 'react-i18next';
import './App.css';

function App() {
  const { t, i18n } = useTranslation()
  return (
    <div>
      <h1>{t('language')}</h1>
    </div>
  );
}

export default App;

Melhoria no estilo

/* App.css */

:root {
  --background: #16161a;
  --button: #7f5af0;
  --headline: #fffffe;
  --button-text: #fffffe;
  --paragraph: #94a1b2;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:400');

html {
  font-size: 100%;
} 

body {
  background-color: var(--background);
  box-sizing: border-box;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  line-height: 1.75;
}

article {
  width: 36rem;
  max-width: 80%;
  padding: 2rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: start;

}

header strong {
  font-size: 1rem;
  margin-left: 1rem;
  color: var(--button-text);
}

nav button {
  background-color: transparent;
  font-size: 1.6rem;
  opacity: 0.3;
  transition: all 0.2s linear;
}

nav button.button-active {
  opacity: 1;
  font-size: 2.2rem;
}

button {
  background-color: var(--button);
  color: var(--button-text);
  border: transparent;
}

h1 {
  color: var(--headline);
  font-size: 3.052rem;
  line-height: 1;
}

h2 {
  color: var(--headline);
  font-size: 2.441rem;
}

h3 {
  color: var(--headline);
  font-size: 1.953rem;
}

p {
  color: var(--paragraph);
  font-size: 1rem;
  margin-bottom: 1rem;
}

Melhoria

import './i18n/i18n.jsx'
import { useTranslation } from 'react-i18next';
import './App.css';
import { useState } from 'react';

function App() {
  const { t, i18n } = useTranslation()
  const [currentLang, setCurrentLang] = useState('pt')

  const changeLang = (value) => {
    i18n
      .changeLanguage(value)
      .then(() => {
        setCurrentLang(value)
      })
      .catch((err) => {
        console.log(err)
      })

  }
  return (
    <article>
      <header>
        <nav>
          <button className={currentLang === 'pt' ? 'button-active' : 'button'} onClick={() => changeLang('pt')}>🇧🇷 </button>
          <button className={currentLang === 'en' ? 'button-active' : 'button'} onClick={() => changeLang('en')}>🇬🇧</button>
        </nav>
        <strong>{t('language')}</strong>
      </header>

      <main>
        <section>
          <h1>{t('post_title')}</h1>
          <p>{t('post_description')}</p>
          <h2>{t('keys_title')}</h2>
          <p>{t('keys_names')}</p>
        </section>
      </main>
    </article >
  );
}

export default App;

Repository and Demo

Demo: https://i18n-internationalization-of-applications-wheat.vercel.app/

Git repository: https://github.com/LearnWithFelipe/i18n-internationalization-of-applications

CodeSandbox: https://codesandbox.io/s/i18n-internationalization-of-applications-txfxh6

Respecting User Preferences with Media Queries

Felipe Genuino — Sat, 07 Oct 2023 14:05:21 +0000

Media Queries are an essential part of responsive web development, allowing developers to adapt a web page's layout and style based on device characteristics and user preferences. It's crucial to ensure an optimized user experience, considering factors like screen size, orientation, preferred theme, and even data savings. In this context, let's explore how to use Media Queries to respect user preferences.

Preferred Theme (Light/Dark Mode)

User preference for a light or dark theme can be respected through Media Queries. With increased awareness of the importance of reducing eye strain, it's vital to offer a theme option that suits the user's preference. Media Queries enable detecting the color scheme preference (prefers-color-scheme) and adjusting the page's style accordingly.

/* Style for light theme */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Style for dark theme */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

Adapting to Screen Size

Another way to respect user preferences is to ensure that the page layout adapts according to the device's screen size. This can be achieved using Media Queries to define specific style rules for different screen sizes.

/* Style for small screens (mobile) */
@media (max-width: 767px) {
    /* Specific style for small screens */
}

/* Style for medium screens (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Specific style for tablets */
}

/* Style for large screens (desktop) */
@media (min-width: 1024px) {
    /* Specific style for desktop */
}

Considering Device Orientation

The device's orientation (portrait or landscape) can be an important preference for many users. Use Media Queries to ensure your layout is suitable for both orientations.

/* Style for portrait orientation */
@media (orientation: portrait) {
    /* Specific style for portrait orientation */
}

/* Style for landscape orientation */
@media (orientation: landscape) {
    /* Specific style for landscape orientation */
}

Considering Reducing Animations

prefers-reduced-motion: reduce is a valuable option to ensure a more user-friendly experience for those who prefer or need less movement in web interfaces. By using this media query, developers can dynamically modify the behavior of animations and transitions, reducing them or even removing them completely.

This contributes to making the digital environment more accessible and comfortable for people who may be sensitive to intense motions or who seek a quieter experience while browsing the web.

The example illustrates how to adjust transitions and even hide animated elements in compliance with this preference, demonstrating a commitment to accessibility and inclusion in design.

 :root{
        --transitionTime: 0.2s;
    }
    @media (prefers-reduced-motion: reduce) {
        #tsparticles { display:none; }
        :root{
            --transitionTime: 0s;
        }
    }

Conclusion

Respecting user preferences is a crucial aspect of modern web development. Media Queries are a powerful tool to achieve this goal, allowing for the adaptation of layout and style according to user needs and choices.

By integrating Media Queries effectively, we can create a more personalized and enjoyable user experience, considering factors such as preferred theme, screen size, and device orientation.

Remember, the key is to offer flexibility and options to the user, ensuring that your web application is truly inclusive and adapts to diverse user preferences and contexts. 🌟

Respeitando as Preferências do Usuário com Media Queries

Felipe Genuino — Sat, 07 Oct 2023 13:55:50 +0000

As Media Queries são uma parte essencial do desenvolvimento web responsivo, permitindo que os desenvolvedores adaptem o layout e o estilo de uma página da web de acordo com as características do dispositivo e as preferências do usuário. É fundamental garantir uma experiência de usuário otimizada, considerando fatores como tamanho da tela, orientação, tema preferido e até mesmo a economia de dados. Neste contexto, vamos explorar como utilizar Media Queries para respeitar as preferências do usuário

1. Tema Preferido (Light/Dark Mode)

A preferência do usuário por um tema claro ou escuro pode ser respeitada através de Media Queries. Com o aumento da conscientização sobre a importância da redução da fadiga ocular, é vital oferecer uma opção de tema que se adapte às preferências do usuário. As Media Queries permitem detectar a preferência de esquema de cores (prefers-color-scheme) e ajustar o estilo da página de acordo.

/* Estilo para tema claro */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Estilo para tema escuro */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

2. Adaptando-se ao Tamanho da Tela

Outra maneira de respeitar as preferências do usuário é garantir que o layout da página seja adaptado de acordo com o tamanho da tela do dispositivo. Isso pode ser alcançado usando Media Queries para definir regras de estilo específicas para diferentes tamanhos de tela.

/* Estilo para telas pequenas (mobile) */
@media (max-width: 767px) {
    /* Estilo específico para telas pequenas */
}

/* Estilo para telas médias (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Estilo específico para tablets */
}

/* Estilo para telas grandes (desktop) */
@media (min-width: 1024px) {
    /* Estilo específico para desktop */
}

3. Considerando a Orientação do Dispositivo

A orientação do dispositivo (retrato ou paisagem) pode ser uma preferência importante para muitos usuários. Utilize Media Queries para garantir que seu layout seja adequado para ambas as orientações.

/* Estilo para orientação retrato */
@media (orientation: portrait) {
    /* Estilo específico para orientação retrato */
}

/* Estilo para orientação paisagem */
@media (orientation: landscape) {
    /* Estilo específico para orientação paisagem */
}

4. Considerando reduzir as animações

O prefers-reduced-motion: reduce é uma opção valiosa para garantir uma experiência de usuário mais amigável para aqueles que preferem ou necessitam de menos movimento em interfaces web. Ao utilizar essa media query, os desenvolvedores podem modificar dinamicamente o comportamento de animações e transições, reduzindo-as ou até mesmo removendo-as completamente.

Isso contribui para tornar o ambiente digital mais acessível e confortável para pessoas que podem ser sensíveis a movimentos intensos ou que buscam uma experiência mais tranquila durante a navegação na web.

O exemplo ilustra como ajustar as transições e até ocultar elementos animados em conformidade com essa preferência, demonstrando um compromisso com a acessibilidade e a inclusão na concepção do design.

 :root{
        --transitionTime: 0.2s;
    }
    @media (prefers-reduced-motion: reduce) {
        #tsparticles { display:none; }
        :root{
            --transitionTime: 0s;
        }
    }

Conclusão

Respeitar as preferências do usuário é um aspecto crucial do desenvolvimento web moderno. As Media Queries são uma ferramenta poderosa para alcançar essa meta, permitindo a adaptação do layout e estilo de acordo com as necessidades e escolhas do usuário. Ao integrar Media Queries de forma eficaz, podemos criar uma experiência de usuário mais personalizada e agradável, levando em consideração fatores como tema preferido, tamanho da tela e orientação do dispositivo.

Lembre-se, a chave está em oferecer flexibilidade e opções para o usuário, garantindo que sua aplicação web seja verdadeiramente inclusiva e se adapte às diversas preferências e contextos dos usuários. 🌟

Em termos práticos há diferênça entre usar o Scanner e o JOptionPane no java para receber dados do usuário?

Felipe Genuino — Fri, 06 Oct 2023 00:01:13 +0000

Sim, há diferenças práticas entre usar o Scanner e o JOptionPane para receber dados do usuário em Java.

Interface de Usuário:

O Scanner é usado para receber dados do usuário a partir da linha de comando, ou seja, ele lê da entrada padrão (geralmente o teclado).
O JOptionPane é uma caixa de diálogo que aparece na interface gráfica, permitindo uma interação mais visual com o usuário.

Utilização:

O Scanner é tipicamente usado em aplicativos de linha de comando ou console.
O JOptionPane é usado em aplicações gráficas (Swing, JavaFX, etc.) para interação com o usuário em janelas pop-up.

Tipo de Dados:

O Scanner retorna os dados lidos no formato de tipos primitivos (int, double, etc.) ou Strings.
O JOptionPane geralmente retorna dados como Strings e, em seguida, você precisa converter para o tipo desejado.

Controle de Fluxo:

Com o Scanner, você pode incorporar o controle de fluxo diretamente em seu código, usando loops e estruturas condicionais para garantir que o usuário forneça dados válidos.
Com o JOptionPane, você precisa lidar com validações separadamente após receber a entrada do usuário.

Aparência e Interatividade:

O JOptionPane oferece uma interface gráfica mais amigável, permitindo uma melhor apresentação de mensagens, opções e botões para o usuário.

Em resumo, se você está criando uma aplicação de linha de comando, o Scanner é mais apropriado. Para interfaces gráficas, especialmente quando você deseja uma interação mais amigável e visual, o JOptionPane é mais adequado. A escolha depende do contexto e da natureza da aplicação que você está desenvolvendo.