Forem: Kelven Rubalaine

Como rodar um servidor NodeJS em um smartphone Android

Kelven Rubalaine — Fri, 10 May 2024 20:40:35 +0000

Rodar um servidor Node.js em um celular Android pode parecer uma tarefa incomum, mas é surpreendentemente simples, graças ao Termux, um emulador open-source de terminal para Android. Com o Termux, você pode instalar e executar o Node.js, bem como outros pacotes e bibliotecas, permitindo que você desenvolva e teste aplicativos directamente no seu dispositivo móvel.

Pré-requisitos:

Um celular Android (No meu caso um Samsung Galaxy S21+)
O aplicativo Termux instalado (Download a partir do FDroid) Para instalar o termux é necessário permitir a instalação de aplicações de fora da Play Store no seu dispositivo

Passo 1: Instalar o Node.js

Abra o Termux e actualize os pacotes:

pkg update && pkg upgrade

Instale o Node.js:

pkg install nodejs

Verifique a versão do Node.js para confirmar a instalação:

node -v

Passo 2: Criar um Servidor Simples

Crie um directório para o seu projecto:

mkdir node-server
cd node-server

Crie um arquivo JavaScript chamado server.js e adicione o seguinte código:

const http = require('http');

const hostname = 'localhost';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello from Node.js on Android!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
});

Execute o servidor:

node server.js

Passo 3: Acessar o Servidor

Abra um navegador no seu dispositivo Android, acesse o seguinte URL: http://localhost:3000

Voila! Você deve ver a mensagem "Hello from Node.js on Android!" na tela.

Considerações finais

Ao usar o Termux nos smartphones Android tu desbloqueias imensas possibilidades que normalmente iriam requerer muitos recursos ou esforço, como, por exemplo, usando o termux-api, tens o acesso aos recursos do smartphone (Câmara, SMS, Interface de redes, etc.) o que pode te permitir desenvolver projectos que usam desses recursos a custo baixo e com facilidade no desenvolvimento.

Como implementar page loader no angular 13

Kelven Rubalaine — Sun, 08 May 2022 10:35:15 +0000

Esses dias tentei implementar uma forma de mostrar aos usuários a transição das páginas na aplicação, para isso fui procurar no google e por incrível que pareça conseguia encontrar uma solução em angular. Mas após uma pesquisa extensiva consegui criar a melhor solução pra este desafio.

Então respondendo a pergunta titulo do artigo, a resposta para a criação do page loader é o Router events, sempre que ocorre uma mudança como navegar para outra página, passar parâmetros a URL e outras relacionadas a rota, um evento é disparado, então para implementar a solução cabe a nós olhar para os eventos certos.

Para resolver o desafio separei a explicação em quatro pontos principais, a aplicação, a lógica das rotas e o loader.

1. Aplicação

Nesse ponto criaremos a aplicação que usaremos para implementar o loader, e para isso usaremos o angular CLI.

ng new page-loader --routing

O comando acima inicia um novo projeto de angular com o nome page-loader com as configurações iniciais de rotas.

Continuando criaremos três rotas novas para a aplicação, a page-one, page-two e page-three sendo elas lazy loaded. Vale notar que as rotas a serem criadas devem ser lazy loaded, tanto por questões de performance, como para que o exemplo funcione como esperado. Para isso criaremos as novas rotas com os comandos abaixo:

ng generate module page-one --route page-one --module app.module

ng generate module page-two --route page-two --module app.module

ng generate module page-three --route page-three --module app.module

Tendo todos esses comandos executados com sucesso a estrutura da sua aplicação deve estar parecida com essa:

E assim fica o app-routing.module.ts:

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  {path: '', component: HomeComponent},
  { 
    path: 'second-page', 
    loadChildren: () => import('./second-page/second-page.module').then(m => m.SecondPageModule) 
  },
  { 
    path: 'third-page', 
    loadChildren: () => import('./third-page/third-page.module').then(m => m.ThirdPageModule) 
  },
  { 
    path: 'first-page', 
    loadChildren: () => import('./first-page/first-page.module').then(m => m.FirstPageModule) 
  },
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


;

Tendo a aplicação já organizada, já podes adicionar alguns textos e alguns estilos para as paginas para ter um ar mais agradável, ou podes também pegar os códigos que eu usei para esse projeto direto do meu github.

2. Lógica

Com a aplicação já criada, focaremos agora na mágica da coisa, para isso escutaremos aos eventos das rotas do angular no elemento mais acima da aplicação, o app.component.ts. O angular router dispõe de eventos do seu ciclo de vida, desde o inicio de uma navegação até o seu termino, como podes ver através do link, mas para o nosso caso, nós apenas olharemos para três desses eventos:

NavigationStart: Ocorre quando é iniciado uma nova navegação;
NavegationEnd: Ocorre quando uma navegação é concluída com sucesso;
NavigationError: Ocorre quando há um erro durante a navegação.

A resposta para o page loader está nos eventos acima, ao escutá-los podemos mudar o estado da nossa aplicação de forma dinâmica, ou seja quando estiver a iniciar uma navegação, mostraremos o loader e o mesmo pode ser removido após o termino ou erro durante a navegação. Tendo isso em conta o assim fica o nosso app.component.ts:

import { Component } from '@angular/core'
import { Event, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  loading = false;
  constructor(private router: Router){
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        this.loading = true;
      }
      if (event instanceof NavigationEnd || event instanceof NavigationError) {
        this.loading = false;
      }
    })
  }
}


;

3. Loader

Como havia mencionado, o loader estará no componente mais acima da aplicação, assim o mesmo não será removido do dom durante a navegação, e sim será controlado pelo componente mais acima, o app.component.ts. Então colocaremos o nosso loader diretamente no app.component.html.

<!-- div para mostrar a animação de loading --
<div *ngIf="loading" class="page-loading"></div>

<app-navbar></app-navbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

A variável loading foi criada no app component, e é alterada de acordo com estado da rota, então, enquanto estivermos a navegar o page loader será mostrado e após terminar a navegação o mesmo será ágora já temos tudo quase pronto para o nosso page loader, só falta a animação e para isso eu criei uma animação do tipo progress loader inspirado no youtube. Mas podes usar qualquer uma a sua escolha para mostrar na tela enquanto a sua pagina é carregada.

.page-loading
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 10px;
    z-index: 1234;
    background-color: transparent;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        background-color: #77befc;
        width: 100%;
        height: 100%;
        animation: load 3s;
    }
}
@keyframes load {
    0% {width: 0;}
    10% {width: 20%;}
    25% {width: 40%;}
    50% {width: 60%;}
    75% {width: 75%;} 
    100% {width: 100%;}
}

Resultado final

Considerações finais

Pelo facto da aplicação do exemplo ser simples demais, pode ser difícil de ver o loader em ação, mas se a sua aplicação for mais grande e complexa, está solução te ajudará a dar uma melhor experiencia aos seus utilizadores, já que os mesmos agora terão um feedback agradável quando estiverem a navegar pelas paginas da sua aplicação.

Chegando até aqui, espero que este resultado tenha te ajudado assim como me ajudou.

Dê uma olhada no meu portfólio kelven.dev tem muita coisa interessante por lá.

Dark/Light theme switcher with HTML, CSS & Javascript Only

Kelven Rubalaine — Sun, 29 Aug 2021 09:52:46 +0000

There are different ways to implement dark mode on websites, from the simplest to the most complex, and the approach I show in this short tutorial I consider as the simplest and painless possible, for this we will implement using only HTML, CSS and Javascript.

Two key concepts will be used for implementing dark mode, CSS Variables for colors, and localStorage to store the user's current theme.

CSS Variables

CSS variables work like variables from any other language, where we assign values to it and we can modify it later, for implementation of dark mode we will assign the values of our colors to CSS variables, with that we can modify them later depending on the context.

/*creating a css variable */
--bg-grey-light: #f5f5f5;

/*using the css variable */
background-color: var(--bg-grey-light);

A special feature of CSS variables that makes it a good alternative to implementing dark mode is that all elements that are declared inside the parent element will
inherits them, so we'll define our variables directly in the body so that all elements within it can inherit them.

localStorage API

For a better user experience, we will use localStorage which will store the user's current theme, that way when the user comes back to the website, their favorite theme will be applied automatically.

// storing the theme on the user's machine
localStorage.setItem('theme', 'dark');

//accessed the user's machine theme
localStorage.getItem('theme');
// dark

Document Structure

Being a very small project, our document will consist of two buttons and two blocks of text, the buttons will have the function of changing the theme and updating the page.

index.html

  <body>
     <div class="container">
       <h1 class="heading">
         How to make dark mode with HTML, CSS and Javascript only
       </h1>
       <div class="buttons">
         //button to switch dark/light states
         <button id="toggle" class="button">toggle</button>
         //button to refresh the page
         <button id="refresh" class="button">refresh</button>
       </div>
       <div class="text-wrapper">
         <p class="paragraph">
           The United States shall be President of the....
         </p>
       </div>
       <div class="text-wrapper">
         <p class="paragraph">
           Why, there's hardly enough of me left...
         </p>
       </div>
     </div>
     <script src="script.js"></script>
   </body>

Defining the colors

Since we are dealing with two different contexts, for each color in the light theme there must be a variant for the dark theme, and the colors have to be defined according to your responsibilities, thus having colors for text, background colors…

Definition of variables

/* Definition of colors */
body {
   /* text colors */
   --text-white: #ffffff;
   --text-dark: #142136;

   /* background colors */
   --bg-grey-light: #f5f5f5;
   --bg-white: #ffffff;
   --bg-blue-dark: #142136;
   --bg-indigo: #6366f1;

   /*
...
*/
}

After defining the variables, we will create a class named .dark, which will contain the definition of the same variables, but with the value of the colors changed to the dark theme, so when we want to change the context to the dark theme, we just add the .dark class to the body via javascript so the variables previously defined will be overwritten by the ones defined in the .dark class.

Variables for the dark theme

.dark {
   --text-white: #e6e6e6;
   --text-dark: #ffffff;

   --bg-grey-light: #142136;
   --bg-white: #22395d;
   --bg-blue-dark: #142136;
   --bg-indigo: #7577e1;
}
}

note that the --text-dark variable which had its value: #142136, was changed to #ffffff in the context of the dark theme, keeping that in mind, you just need to repeat the same process for all other colors of your code.

How did the final .css file look like:

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Definition of colors */
body {
  /* text colors */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* background colors */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  font-family: "Inter", sans-serif;
  line-height: 1.7;
  background-color: var(--bg-grey-light);
}
.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;
  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  display: flex;
  padding: 20px;
  flex-direction: column;
}
.text-wrapper {
  width: 100%;
  padding: 20px;
  background-color: var(--bg-white);
  margin-bottom: 40px;
  border-radius: 10px;
}
.paragraph {
  font-size: 16px;
  color: var(--text-dark);
}
.heading {
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 40px;
  color: var(--text-dark);
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.button {
  width: 200px;
  padding: 5px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  background-color: var(--bg-indigo);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

As you can see in the code, no color was used directly, instead we used the previously defined variables.

Changing Theme

To switch the theme, we will use javascript, and the script will first check in localStorage if the previously stored theme is dark and apply it to body as soon as it loads.
We add an eventListener to the toggle button so when it is clicked it will remove or add the .dark class and also change the theme stored in localstorage depending on context.

script.js

const toggle = document.getElementById("toggle");
const refresh = document.getElementById("refresh");
const theme = window.localStorage.getItem("theme");

/* checks if the theme stored in localStorage is dark
if yes apply the dark theme to the body */
if (theme === "dark") document.body.classList.add("dark");

// event listener stops when the change theme button is clicked
toggle.addEventListener("click", () => {
   document.body.classList.toggle("dark");
   if (theme === "dark") {
     window.localStorage.setItem("theme", "light");
   } else window.localStorage.setItem("theme", "dark");
});

refresh.addEventListener("click", () => {
   window.location.reload();
});

Demo: dark-mode.kelven.dev
Source code: Github Repo

Thank you so much for reading this far, I hope my text somehow helped you.
This is my second article/blog post, so feel free to give your opinion about it, which helps me improve.
Take a look at my Portfolio I have some interesting projects there.

Dark mode apenas com HTML, CSS e Javascript

Kelven Rubalaine — Sat, 28 Aug 2021 18:08:07 +0000

Ao implementar o modo escuro no nosso website melhoramos a experiência do usuário, já que o mesmo ganha a possibilidade de escolher qual é o melhor tema para ele.
Existem diferentes maneiras para implementar o modo escuro em websites, das mais simples as mais complexas, e a abordagem que mostro nesse pequeno tutorial, eu considero como a mais simples e menos trabalhosa possível, onde mostro a implementação usando apenas HTML, CSS e Javascript.

Dois conceitos (chaves) serão usados para implementação do modo escuro, as Variáveis de CSS para as cores, e o localStorage para guardar o tema atual do usuário.

Variáveis de CSS

As variáveis de CSS funcionam como as variáveis de qualquer outra linguagem, onde atribuímos valores a mesma e podemos modificar posteriormente, para implementação do modo escuro, atribuiremos os valores das nossas cores a variáveis de CSS, com isso podemos modifica-las dependendo do contexto.

/*criando uma variável de css */
--bg-grey-light: #f5f5f5;

/*usando a variavel de css */
background-color: var(--bg-grey-light);

Uma particularidade das variáveis de CSS que a torna uma boa alternativa para implementar o modo escuro é que todos os elementos que forem declarados dentro do elemento pai irão

herda-las, sendo assim nos iremos definir as nossas variáveis diretamente no body para que todos os elementos dentro do mesmo possam herda-las.

localStorage API

Para uma melhor experiência de usuário, iremos usar o localStorage para armazenar o estado atual do usuário, dessa forma quando o usuário voltar a acessar o website, o seu tema preferido será aplicado automaticamente.

//armazenando na máquina do usuario o tema
localStorage.setItem('theme', 'dark'); 

//acessado o tema da maquina do usuário
localStorage.getItem('theme'); 
// dark

Estrutura do documento

Sendo um projeto muito pequeno, o nosso documento será constituído por dois botões e dois blocos de texto, os botões terão a função de mudar o tema e atualizar a pagina.

index.html

 <body>
    <div class="container">
      <h1 class="heading">
        Como fazer o dark mode com HTLM, CSS e Javascript apenas
      </h1>
      <div class="buttons">
        //botão para fazer a troca de estados dark/light
        <button id="toggle" class="button">toggle</button>
        //botão para atualizar a página
        <button id="refresh" class="button">refresh</button>
      </div>
      <div class="text-wrapper">
        <p class="paragraph">
          The United States shall be President of the....
        </p>
      </div>
      <div class="text-wrapper">
        <p class="paragraph">
          Why, there's hardly enough of me left...
        </p>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

Definindo as cores

Ao definir as cores, já que estamos a lidar com dois contextos diferentes, para cada cor no tema claro deve existir uma variante para o tema escuro, e as cores têm de ser definidas de acordo com as suas responsabilidades, tendo assim cores para texto, cores de fundo…

Definição das variáveis

/* Definição das cores */
body {
  /* cores de texto */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* cores de fundo */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  /*
...
*/
}

Após definição das variáveis, iremos criar a classe .dark, que conterá a definição das mesmas variáveis, só que com o valor das cores alteradas para o tema escuro, assim, no momento em que pretendermos mudar o contexto para o tema escuro, apenas adicionamos a classe .dark ao body através do javascript dessa forma as variáveis previamente definidas serão sobrepostas pelas que foram definidas na classe .dark.

Definição das variáveis para o tema escuro

.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;

  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
}

É importante notar que a variável --text-dark que tinha o seu valor: #142136, o mesmo foi alterado para #ffffff no contexto do tema escuro, tendo isso em mente, é só repetir o mesmo processo para todas as outras cores do seu código.

Como ficou o arquivo .css final:

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Definição das cores */
body {
  /* cores de texto */
  --text-white: #ffffff;
  --text-dark: #142136;

  /* cores de fundo */
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;

  font-family: "Inter", sans-serif;
  line-height: 1.7;
  background-color: var(--bg-grey-light);
}
.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;
  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  display: flex;
  padding: 20px;
  flex-direction: column;
}
.text-wrapper {
  width: 100%;
  padding: 20px;
  background-color: var(--bg-white);
  margin-bottom: 40px;
  border-radius: 10px;
}
.paragraph {
  font-size: 16px;
  color: var(--text-dark);
}
.heading {
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 40px;
  color: var(--text-dark);
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.button {
  width: 200px;
  padding: 5px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  background-color: var(--bg-indigo);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

Como pode se ver no código, não foi usada nenhuma cor directamente, mas sim as variáveis previamente definidas.

Alterando o tema

Para o processo de alteração do tema, usaremos o javascript, e o script primeiro verificará no localStorage se o tema previamente armazenado é escuro e o aplicará ao body assim que o mesmo for carregado.
Para o botão de alterar tema, criamos um eventListener para quando o mesmo for clicado, remover ou adicionar a classe .dark e também alterar o tema armazenado no localstorage dependendo do contexto.

script.js

const toggle = document.getElementById("toggle");
const refresh = document.getElementById("refresh");
const theme = window.localStorage.getItem("theme");

/* verifica se o tema armazenado no localStorage é escuro
se sim aplica o tema escuro ao body */
if (theme === "dark") document.body.classList.add("dark");

// event listener para quando o botão de alterar o tema for clicado
toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  if (theme === "dark") {
    window.localStorage.setItem("theme", "light");
  } else window.localStorage.setItem("theme", "dark");
});

refresh.addEventListener("click", () => {
  window.location.reload();
});

Demo: dark-mode.kelven.dev
Código fonte: Repósitorio do Github

Muito Obrigado por ler até aqui, espero que o meu texto de alguma forma tenha te ajudado.
Esse é o segundo artigo/blog post que eu escrevo, sinta-se livre pra dar a sua opinião sobre o mesmo, que assim me ajuda a melhorar.
Dê uma olhada no meu Portfólio tenho alguns projectos interessantes por lá.

VSCODE: Extensões para desenvolvedores Front-End

Kelven Rubalaine — Fri, 27 Aug 2021 20:57:30 +0000

Conteúdos

Introdução
CSS Peek
Image Preview
Color Highlight
Bracket Pair Colorizer
ES7 React/Redux/GraphQL/React-Native snippets
vscode-styled-components
Live Server
Prettier - Code formatter

Introdução

O Visual Studio Code é um dos editores de texto mais populares para o do desenvolvimento de software por ser gratuito e altamente customizável. Hoje trago uma lista das extensões que todo desenvolvedor frontend devia ter ou devia conhecer.

CSS Peek

CSS Peek é uma extensão que suporta arquivos .html e .js. Sugere nomes de classes e id's com base em ficheiros CSS dentro do seu projecto.

Image preview

Image preview mostra uma pré-visualização de imagens de url's assim como imagens importadas da máquina do usuário, dessa forma nos ajuda a evitar links quebrados ou importar imagens que não existem.

Color Highlight

Essa extensão irá estilizar todas a cores Hex, HSL, RGB... Que estiverem presentes no seu código fonte, assim facilitando a visualização das mesmas e melhorando a experiencia de desenvolvedor.

Bracket Pair Colorizer

Bracket pair colorizer nos ajuda a identificar de uma forma melhor o escopo de uma função, declaração, classe, etc. Dando uma cor especifica para colchetes ou parentes, assim mesmo tendo varias declarações dentro de uma função, fica mais fácil identificar o inicio e fim de cada uma.

ES7 React/Redux/GraphQL/React-Native snippets

Extensão contem snipets de es7 para Javascript Vanilla, React Js e React native, são snipets para rotinas mais comuns do mundo de js como por exemplo sti para setInterval(() => { }, intervalTime).

vscode-styled-components

vscode-styled-components voltada para desenvolvedores React, auxilia no intelisense, syntax highlight e reporte de erro de sintaxe das suas declarações de styled components, já que o VsCode por padrão trata as declarações de styled component como qualquer outra string.

Live Server

Para quem está a desenvolver um website simples com HTML, CSS e Javascript, o live server cria um servidor de desenvolvimento para ti, assim dando uma funcionalidade de live reload para o seu projecto a cada modificação feita no mesmo, assim eliminando o trabalho repetitivo de sempre fazer refresh a cada nova actualização.

Prettier - Code formatter

Prettier formata o seu código, dando um estilo consistente, e melhorando a visibilidade do mesmo, o prettier funciona com Javascript, Typescript, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown e YAML

Obrigado por ler o meu primeiro artigo, se tiver alguma sugestão ou opinião é só colocar nos comentários.
Avalia meu portfólio? kelven.dev