TRDL: Não vejo mais sentido em escrever postagens.

2026 tem sido um ano bem diferente dos demais, eu nasci em 1995 e foi incrível ter visto a evolução da tecnologia até aqui, eu consegui ver a internet e os computadores pessoais se popularizando (popularizando de verdade, acesso pra quem era baixa renda), vi os celulares saindo do famoso Nokia da cobrinha (1100), passando pela revolução absurda que foi os jogos em JAVA com a Gameloft lançando coisas que pareciam impossíveis de rodar em um Motorola V3 até as primeiras versões do Android que me deixaram extasiado.

Além de tudo isso, tivemos avanços incríveis; eu me apaixonava cada vez mais por tecnologia e pela inovação que aparecia ano após ano; era como se a cada ano a gente tivesse um mundo novo para desbravar: Mp3, Mp4, smartphones, jogos, redes sociais, softwares incríveis, novas formas de se comunicar, de se expressar, enfim, novas formas de passar pela vida, agora de forma digital.

Mas 2026 tem sido um ano bem diferente dos demais; eu crio conteúdo desde 2012, na realidade, talvez até antes disso, em fóruns que hoje nem existem mais. Sempre gostei de compartilhar conhecimento, de ajudar outras pessoas em dificuldades que eu tive, de tentar encurtar o caminho que, pra mim, foi árduo e desafiador. Isso me fazia bem; eu sentia satisfação em cada letra digitada. Mesmo sem ter grandes números, eu ainda gostava disso.

Em 30 de novembro de 2022, o mundo começou a mudar: o lançamento do polêmico ChatGPT, que, embora não tenha sido a primeira LLM criada ou aberta, foi a que caiu na graça do público. Uma interface amigável, resultados rápidos que surpreendiam na hora, mas também, sendo a maior ironia da tecnologia: o Google inventou o motor (o Transformer), mas a OpenAI foi quem construiu a Ferrari. Sem o paper "Attention Is All You Need" do Google, o 'T' do ChatGPT (que significa Transformer) nem existiria.

Confesso que por um bom tempo eu tentei ignorar, não por questões tão nobres quanto o impacto intelectual, educacional, ambiental e as controvérsias de direitos autorais que esses modelos causam de forma negativa, mas sim por que eu nunca gostei da qualidade do que saía dali, tudo era bem ruim no início e hoje em dia temos modelos melhores, embora parecem ter a qualidade sazonalmente alterada, não me entenda mal, não estou dizendo que são 100% melhores agora, ainda são ruins, meu ponto sempre foi que LLM é uma grande coisa (eu não consegui pensar em um termo) que potencializa suas crenças, principalmente as ruins.

Hoje em dia, LLM faz parte do meu dia a dia. Consumo muito, principalmente para pesquisas; o que antes me gerava horas de busca no Google, em fóruns e na documentação, hoje acaba virando uma mensagem de "busca pra mim tal coisa" e retorna com a fonte". Embora eu ainda acesse conteúdos diretamente, a frequência é baixíssima. Minha quantidade de leitores diminuiu bastante também. Afinal, com vibe coding hoje em dia, é menos provável que alguém leia um post de "Como fazer isso" ou "Melhores práticas pra aquilo". A internet foi inundada de conteúdo gerado por IA também, o LinkedIn virou um grande palco pra isso, aqueles textões de "Não é sobre isso é sobre aquilo" virou até meme. No geral, são conteúdos bem pobres; tenho quase certeza de que quem pediu pra LLM escrever aquilo nem leu nem tentou passar sua personalidade pro texto.

Esse é só um adeus longo, não tenho vontade de voltar a produzir novos textos ou mesmo vídeos, que já não fazia há muito tempo, e não me parece que o público se importa com isso agora, agradeço a quem leu até aqui, agradeço a quem me incentivava a fazer as postagens, agradeço a quem me seguia e lia os conteúdos, espero que todos fiquem bem.

Bônus

Alguns posts que nunca viram a luz do dia porque eu desanimei durante a criação deles:

Today(05/03/2025), ByteDance, the company behind TikTok, has launched Lynx, a new framework that aims to revolutionize mobile app development, positioning itself as an alternative to React Native.

Lynx allows developers to build native interfaces using markup and CSS, making it easier to transition into mobile development without needing to learn new languages or paradigms. Additionally, it emphasizes responsible use of the main thread to ensure improved interactivity and performance in applications.

In this post, we'll explore Lynx by creating a simple login screen and sharing our thoughts on this new tool.

Lynx follows a concept similar to React Native, enabling developers to build native interfaces using a declarative approach. However, its key differentiator is its foundation in Rust, which powers the compilation process and other core functionalities, ensuring better performance and efficiency.

Another major highlight is its multi-platform support from day one. With a single codebase, Lynx promises native deployments for Android, iOS, and Web, providing a powerful solution for developers looking to achieve high performance and scalability across different platforms.

Starting a New Project

Creating a new project feels a bit unusual, but it's not painful. We just need to download the app (APK or IPA) and use it to consume the bundle, similar to Expo Go applications. I believe this is only temporary.

The CLI is very simple; we just answer a few questions and get the project set up.

After following all the steps to create the project (using Bun and Offshore), we got this:

Checking the package.json its is very small:

Now, to run the project is very simple, just run:

bun run dev

Open the Lynx explorer App, copy the terminal bundle URL and past on the app and hit "Go".

The "Hello, World!" page is very simple and quite similar to a React Native app (which is obvious, since React Native also uses React):

import { useCallback, useEffect, useState } from '@lynx-js/react'

import './App.css'
import arrow from './assets/arrow.png'
import lynxLogo from './assets/lynx-logo.png'
import reactLynxLogo from './assets/react-logo.png'

export function App() {
  const [alterLogo, setAlterLogo] = useState(false)

  useEffect(() => {
    console.info('Hello, ReactLynx')
  }, [])

  const onTap = useCallback(() => {
    'background only'
    setAlterLogo(!alterLogo)
  }, [alterLogo])

  return (
    <view>
      <view className='Background' />
      <view className='App'>
        <view className='Banner'>
          <view className='Logo' bindtap={onTap}>
            {alterLogo
              ? <image src={reactLynxLogo} className='Logo--react' />
              : <image src={lynxLogo} className='Logo--lynx' />}
          </view>
          <text className='Title'>React</text>
          <text className='Subtitle'>on Lynx</text>
        </view>
        <view className='Content'>
          <image src={arrow} className='Arrow' />
          <text className='Description'>Tap the logo and have fun!</text>
          <text className='Hint'>
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </view>
  )
}

We can see some differences here. Let's take a look:

CSS Import:

Lynx has excellent CSS support, including gradients, animations, variables, themes, transitions, masking, and much more. It seems they support 100% of the current CSS properties and functionalities.

Hooks from @lynx-js/react:

I don’t have much information about this, but on the Lynx React page, they mention that it’s "the package that provides the ReactLynx framework. ReactLynx not only delivers the ultra-high performance and cross-platform usability of the Lynx engine, but also has compatibility with React 17+ and the vast ecosystem of the React community."
So, I believe it wraps the React library.

The background only directive:

This is pretty cool! Lynx actually has two directives: background and main thread. As the name suggests, background only executes the function in another thread, making it useful for listeners. By using this, we can also reduce the bundle size. Check out the full documentation for a better understanding.

The main thread directive:

This directive is not used on the app page, but I'll talk about it anyway. It forces the code to run on the main thread, as expected, and is very useful for smooth animations and gesture handlers. It is part of the "main thread scripts" which are commonly used for animations and gestures. According to the documentation:
"It is primarily used to address the response delay issue in Lynx's multi-threaded architecture, aiming to achieve a near-native interactive experience."

HTML tags without PascalCase:

Lynx focuses on web technologies with greater fidelity than React Native, and we can see that here. Some core components (view, image, and text) are available by default (check all core components here), and there is no need to import them. Interestingly, they are written in lowercase (flatcase?).

The bindtap prop:

Here we have a slight difference in attribute naming. bindtap works like onPress, a function that returns a touch event.

This was a quick overview of the page. Now, let's take a look at the styles and see how they created the logo animation. (It shakes, and when clicked, it switches to React Native and starts spinning.)

:root {
  background-color: #000;
  --color-text: #fff;
}

.Background {
  position: fixed;
  background: radial-gradient(
    71.43% 62.3% at 46.43% 36.43%,
    rgba(18, 229, 229, 0) 15%,
    rgba(239, 155, 255, 0.3) 56.35%,
    #ff6448 100%
  );
  box-shadow: 0px 12.93px 28.74px 0px #ffd28db2 inset;
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  top: -60vw;
  left: -14.27vw;
  transform: rotate(15.25deg);
}

.App {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

text {
  color: var(--color-text);
}

.Banner {
  flex: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.Logo {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.Logo--react {
  width: 100px;
  height: 100px;
  animation: Logo--spin infinite 20s linear;
}

.Logo--lynx {
  width: 100px;
  height: 100px;
  animation: Logo--shake infinite 0.5s ease;
}

@keyframes Logo--spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes Logo--shake {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Arrow {
  width: 24px;
  height: 24px;
}

.Title {
  font-size: 36px;
  font-weight: 700;
}

.Subtitle {
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.Description {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  margin: 15rpx;
}

.Hint {
  font-size: 12px;
  margin: 5px;
  color: rgba(255, 255, 255, 0.65);
}

It's awesome! We can apply a gradient background directly in CSS, create animations with keyframes (hello to my friend animate.css), and use variables in a native .css file! It's really exciting.

Lets Code

Okay, now I’m going to talk about my experience creating a simple login page with Lynx. I can start by saying: it's very fast and easy to code.

I’ll create a Spotify-like login page. I found this design on Figma and thought it would be a great example to test.

I exported the images and imported into the project folder:

I am created two components only, a Toast (only to show the login success message) and a Button:

import "../App.css";

export function Toast({ text }: { text: string }) {
  return (
    <view className="Toast">
      <text>{text}</text>
    </view>
  );
}

The Toast component is very simple; it's just a view component with text inside. The CSS class .Toast is where the magic happens:

.Toast {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 300px;
  background-color: #4caf50;
  color: white;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.5s ease-out, fadeOut 0.5s ease-in 3s forwards;
  z-index: 1000;
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
}

It's really cool to use CSS to create mobile components—it feels like the PhoneGap/Cordova era.

The Button component has more features, but nothing new compared to React Native, except for the CSS classes:

import "../App.css";

export function Button({
  onTap,
  text,
  image,
  type,
}: {
  onTap: () => void;
  text: string;
  image?: string;
  type?: "primary" | "secondary" | "ghost";
}) {
  return (
    <view className={`Button--container ${type}`} bindtap={onTap}>
      {image && (
        <view class="Button--image-container">
          <image src={image} className="Button--image" />
        </view>
      )}
      <view className="Button--text-container">
        <text className="Button--text">{text}</text>
      </view>
    </view>
  );
}

I created some props (onTap, text, image, and type) to make the component more extensible. The only noteworthy part here is the CSS classes. I used template strings to concatenate Button--container with the type value. It could be improved, but...

On the CSS part:

.Button--container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 20px;
  width: 85vw;
  background-color: var(--button-background);
  height: 50px;
  border-radius: 100px;
  margin: 5px;
  border: var(--button-border-size) solid;
  border-color: var(--button-border);
}

.Button--image-container {
  display: flex;
  justify-content: flex-start;
}

.Button--image {
  width: 30px;
  height: 24px;
}

.Button--text-container {
  display: flex;
  width: 100%;
  justify-content: center;
}

.Button--text {
  font-size: 17px;
  font-weight: 700;
  color: var(--button-text);
}

Nothing new here—I used CSS variables to manage the variants.

So, the final application looks like this:

Dev tool

Lynx has a dev tool similar to React/RN for debugging the application, with some cool additional features.

Unfortunately, I couldn't find the network tab to inspect requests.

My Impressions of Lynx

Lynx is truly amazing! The fact that it supports animations, transitions, gradients, and all the other CSS features that make the web so beautiful and fast — but are not natively supported by React Native — is already a huge advantage!

Additionally, the directives are one of the coolest aspects, something that stands out even more here than in React Native. And, of course, we can’t overlook the power and speed of Rust, which makes hot reload and the build process incredibly efficient.

During these first minutes of development, I only missed two things:

1. Console logs – The logs (console.log) don’t appear in the terminal. I’m not sure if this is an issue with the version I’m using, but I could only see them through the Lynx Dev Tool.
2. Inconsistent Hot Reload – In some cases, especially when editing CSS and commenting out parts of the code to remove properties, the hot reload stopped working. I had to close and reopen the app to fix it.

Another thing that felt a bit odd was the project startup process. Copying a URL and opening it in their app is somewhat unconventional. It’s not a big deal, but it does feel unusual. Also, the app doesn’t save the last bundle’s URL, something Expo Go handles really well. I imagine this will be improved soon.

Overall, I really liked Lynx! The development experience was super smooth, and to be honest, I’d love to test it in a real production app 🤩.

There are still many features I’m excited to explore, especially the native integration and compatibility with other libraries. I’ll keep testing and sharing everything here on the blog! So, subscribe to the newsletter to get updates as soon as I post — no spam, I promise! 🚀

As usual, here’s the repository with the code I wrote for this post:As usual, here’s the repository with the code I wrote for this post:

GitHub - tuliocll/lynx-spotify-login-demo: A Spotify login page clone built with Lynx, exploring CSS support, animations, and performance.

A Spotify login page clone built with Lynx, exploring CSS support, animations, and performance. - tuliocll/lynx-spotify-login-demo

GitHubtuliocll

As a developer, working with APIs can be both empowering and challenging. Whether you're building, testing, or debugging APIs, having the right tools at your disposal can make all the difference. While tools like Postman and Insomnia have become go-to solutions for API testing, there’s a "new" player in town that’s gaining traction for its simplicity and powerful features: httpYac.

In this post, we’ll dive into how httpYac’s extension(VScode) can help you. From sending requests and testing endpoints to versioning your collections for better maintainability, httpYac offers a seamless experience for developers of all levels. Whether you're a seasoned API developer or just getting started, this guide will show you how to leverage httpYac to simplify your API testing process and keep your collections organized and version-controlled.

Ready to explore a fresh alternative to Postman and Insomnia? Let’s get started!

What is httpYac?

httpYac is a lightweight, open-source tool for API testing and development. It combines a user-friendly interface with a powerful CLI, making it easy to send HTTP requests, test endpoints, and manage API collections.

One of the most powerful features of httpYac is its ability to define API requests as code, stored in simple text files. These files, often written in formats like .http or .rest, allow you to describe HTTP requests in a human-readable yet executable way. This approach not only makes it easy to version your API requests alongside your codebase using Git but also ensures that your API tests and documentation evolve with your application. By keeping your requests in sync with your code, you can improve collaboration, maintain consistency across environments, and simplify debugging.

You might be familiar with the Rest Client extension, and yes, httpYac is quite similar in some ways. However, httpYac takes things to the next level with its powerful features. With httpYac, you can define environments, set up global variables, import files, use custom scripts, create tests, and much more. It’s a versatile tool that adapts to your workflow, whether you're testing simple endpoints or managing complex API scenarios. Ready to see it in action? Let’s dive in!

Starting

httpYac offers both a CLI client and a VSCode extension, but for a fully integrated development experience, we’ll focus on the extension. By using the VSCode extension, you can create a seamless, connected workspace directly within your codebase. Getting started is simple: just search for httpYac in the VSCode extensions menu and hit install.

Now we can create a new .http or .rest file and start write our collections, I create a folder structure for hold this:

Now, on the login.http file, lets write the first request, I will use DummyJSON website for this post. The DummyJSON has a test endpoint, so, lets start from there.

So, write this request is very easy, just put the following code:

GET https://dummyjson.com/test

Yes, is just this, but, we can see some new things on the VSCode:

Upside the code, we can see some information's:

• send: Action to run the request
• env: Select the enverimont, we will see this after.
• session: the stored user sessions(we can delete the sessions).

Click in send and we can see the result:

When we send the request, we can see in the right panel the response, and we can see some status information, such as the status code, time (in ms), content-type, and the body.
To check more details, click on the "header" section, and we can see a detailed request log.

I won’t cover the basics here—like HTTP methods or initial setup—because the official documentation is straightforward and quick to read. Instead, let’s skip ahead to the fun part and dive straight into what makes httpYac truly powerful and exciting to use!

Creating the login request

Let’s create the login request using the input, environment variables (envs), and global features to enhance our request. Here is the initial login request:

## Auth Login
# @title login
POST https://dummyjson.com/auth/login
Content-Type: application/json

{
    "username": "emilys",
    "password": "emilyspass"
}

Cool, but we can start using some cool features to boost our requests. First, let's create a .httpyac.json file. This file is one of the files that httpYac uses to get environment values and other configurations. Just create this file in your project root, alongside the package.json.

In this file we can create the environments key and create a key for each ENVthat we have, including a $shared, that will share values between all envs.

{
  "environments": {
    "$shared": {},
    "stage": {
      "host": "https://stage-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "dev": {
      "host": "https://dev-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "prod": {
      "host": "https://dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    }
  }
}

I created two variables:

• host: The base URL for requests. "host" is a reserved variable name. By setting the value here, we don’t need to refer to it explicitly in the code. httpYac will automatically read this value and use it in all requests.
• username: The default user identification.
• password: The default user password.

You may need to restart VSCode for the extension to read the file. I’m not sure if it’s a VSCode bug or an extension issue, but it happens to me sometimes.

Don’t forget to select the right environment in the menu at the top.

I also created the stage, dev, and prod environments. This is a great idea in case you have different values for each environment.

Refactoring the login request, we got:

## Auth Login
# @title login
POST /auth/login
Content-Type: application/json

{
    "username": "{{username}}",
    "password": "{{password}}"
}

But, if we want do ask the password or the username?
Just change the value on .httpyac.json to use a input commando, this will show a input component in VSCode asking to user type something, we can use input, password input or select components. Lets refc and add the input:

But what if we want to ask for the password or the username?
Simply change the value in the .httpyac.json file to use an input command. This will display an input component in VSCode, prompting the user to type something. We can use input, password input, or select components. Let's refactor and add the input:

{
  "environments": {
    "$shared": {},
    "stage": {
      "host": "https://stage-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "dev": {
      "host": "https://dev-dummyjson.com",
      "username": "emilys",
      "password": "emilyspass"
    },
    "prod": {
      "host": "https://dummyjson.com",
      "username": "{{$input Enter username $value: emilys}}",
      "password": "{{$input Enter password $value: emilyspass}}"
    }
  }
}

Very cool, we can create default values with $value prop and create a custom label.

We can use $input-askonce to store the input answer in a session and dont ask every-time we send a request.

And when we send the VSCode ask to type the username and password:

By checking the login response, we can see that it returns an accessToken, which is required to access subsequent endpoints (as expected). We don't want to copy and paste it into every request, so we can use the global object to store the returned token and reuse it in the following requests.

Global variables and storing the response token

Storing a value in the global state is very straightforward. We just need to access the $global object and create a new key with the desired value. Using this value later, after retrieving the response, is just as simple.

One of the most powerful features of httpYac is the ability to use Node.js scripts before or after requests. This allows us to read the response object, extract the token, and store it in the global state effortlessly.

## Auth Login
# @title login
POST /auth/login
Content-Type: application/json

{
    "username": "{{username}}",
    "password": "{{password}}"
}

{{
    $global.accessToken = response.parsedBody.accessToken
}}

Now we got the accessToken stored, lets create the next requests.

Request on authenticated endpoint

Authenticated endpoints can be a significant challenge for API testing and automation, but we have everything we need to overcome this.

Create a new folder and file for the products module:

We already know how to setup our request end point and headers, we just need to create a new field: Authorization and read the value from $global object, and its is so easy:

GET /products
Authorization: Bearer {{$global.accessToken}}

Yeah, its just that, we no need do anything else.

Finishing

httpYac is very simple and powerful, we can create very cool requests collections and keep it in the repository to use the GIT version control and team collaboration.

I created other requests too, you can see this in the demo repository:

GitHub - tuliocll/httpyac-post-demo: This is a demo for the post: Simplify API Testing and Collection Versioning Using httpYac

This is a demo for the post: Simplify API Testing and Collection Versioning Using httpYac - tuliocll/httpyac-post-demo

GitHubtuliocll

We can do a lot with that, I will create a part 2 showing how to integrate this with CI/CD, using the asserts and more. Subscribe to be notified!

Kubernetes is a powerful tool, but navigating its complexities can sometimes feel overwhelming. The good news? A few practical hacks can make a big difference in how you manage and optimize your clusters. Whether it’s seamless updates, efficient debugging, or smarter scaling, these tips are here to simplify your workflow and help you get the most out of Kubernetes. Let’s dive in!

Update ConfigMaps Without Restarting PodsUpdate ConfigMaps Without Restarting Pods

When your application relies on a ConfigMap, restarting Pods for every configuration change can be inefficient. Instead, mount the ConfigMap as a volume in your Pod. Updates to the ConfigMap will automatically reflect in the mounted volume.

volumeMounts:
  - name: config-volume
    mountPath: /etc/config
volumes:
  - name: config-volume
    configMap:
      name: my-config

Combine this approach with readiness probes to ensure the Pod is in a healthy state before serving traffic after updates.

Another work around is adding a hash from the ConfigMap or Secret as an environment variable.

env:
  - name: CONFIG_HASH
    valueFrom:
      configMapKeyRef:
        name: my-config
        key: hash

Inspect Pod Resource Usage with kubectl topInspect Pod Resource Usage with kubectl top

Keep an eye on your cluster’s health by checking CPU and memory usage for Pods and nodes with:Keep an eye on your cluster’s health by checking CPU and memory usage for Pods and nodes with:

kubectl top pod

Enable the Metrics Server for this feature, and use it to detect bottlenecks and optimize resource allocation.

Simplify Your Workflow with kubectl aliasesSimplify Your Workflow with kubectl aliases

Speed up your day-to-day tasks by creating aliases for common kubectl commands. Add these to your shell configuration file (.bashrc or .zshrc):Speed up your day-to-day tasks by creating aliases for common kubectl commands. Add these to your shell configuration file (.bashrc or .zshrc):

alias k="kubectl"
alias kgp="kubectl get pods"
alias kdp="kubectl describe pod"

You can use/check a really good alias list here.

Use Namespaces to Separate EnvironmentsUse Namespaces to Separate Environments

Namespaces allow you to logically separate resources within a cluster. For example, use dev, stage, and prod namespaces to isolate environments.

To list Pods in a specific namespace:Namespaces allow you to logically separate resources within a cluster. For example, use dev, stage, and prod namespaces to isolate environments.To list Pods in a specific namespace:

kubectl get pods -n [namespace]

Combine Namespaces with RBAC to grant fine-grained permissions and enhance security.

Test Locally with Kind (Kubernetes in Docker)Test Locally with Kind (Kubernetes in Docker)

Kind allows you to create Kubernetes clusters locally using Docker containers. It's a fast and lightweight way to test your deployments without requiring a cloud setup. Create a cluster with a simple command:Kind allows you to create Kubernetes clusters locally using Docker containers. It's a fast and lightweight way to test your deployments without requiring a cloud setup. Create a cluster with a simple command:

kind create cluster

Use Kind to simulate multi-node clusters or test specific Kubernetes versions before deploying to production. Perfect for quick experiments and development!

Kubernetes offers endless possibilities to optimize and simplify your workflow, and these tips are just the beginning! Whether you're troubleshooting, scaling, or fine-tuning your cluster, there's always something new to learn. Have a favorite Kubernetes tip or hack that we didn’t mention? Drop it in the comments—we’d love to hear how you’re making the most out of Kubernetes!

JWE (JSON Web Encryption) is a compact, URL-safe means of representing encrypted content using JSON-based data structures. It is a standard for securing data by encrypting it, ensuring that only authorized parties can read the data. JWE is part of the larger suite of JSON Object Signing and Encryption (JOSE) technologies, which also includes JSON Web Signature (JWS) and JSON Web Token (JWT).

We can do a small and fast comparison between JWT (most common option) and JWE:

To start working with JWE in NestJS (or any other Node.JS framework) we can use the node-jose library. It's really simple to use, and this library implements (wherever possible) all algorithms, formats, and options in JWS, JWE and JWT, and uses native cryptographic support.

yarn add node-jose
yarn add @types/node-jose -D

Now we need to create a new service to hold our code:

nest g service Encryption

import { Injectable } from '@nestjs/common';
import { JWE, JWK } from 'node-jose';
import { readFileSync } from 'fs';
import { join } from 'path';

@Injectable()
export class EncryptionService {
  // Create a new keystore, which will hold the symmetric( or asymmetric) key.
  private keystore: JWK.KeyStore;

  constructor() {
    // Initialize the keystore
    this.keystore = JWK.createKeyStore();

    // Load the symmetric key into the keystore
    this.loadKey();
  }

  /**
   * Reads the symmetric key from a file and adds it to the keystore.
   */
  async loadKey() {
    try {
      const key = await this.getSymmetricKey();

      await this.keystore.add(key);
    } catch (e) {
      console.log('Error adding key');
    }
  }

  /**
   * Reads the key from a file and returns it as an object,
   * which can be added to the keystore.
   *
   * @returns symmetric key as an object
   */
  async getSymmetricKey() {
    try {
      const path = join(process.cwd(), 'src/encryption/key.json');

      const key = readFileSync(path, 'utf8');

      return JSON.parse(key);
    } catch (e) {
      console.log('Error reading key file');
    }
  }

  /**
   * Encrypts data using the first key in the keystore,
   * which should be the symmetric key used for encryption,
   * and returns the encrypted data in JWE format.
   *
   * @param payload Data to encrypt
   * @returns encrypted data in JWE format (JSON Web Encryption) as string
   */
  async encrypt(payload: object) {
    // Get the first key in the keystore
    const key = this.keystore.all({ use: 'enc' })[0];

    // Convert the payload to a string
    const input = JSON.stringify(payload);

    // Encrypt the payload using the key
    const encrypted = await JWE.createEncrypt({ format: 'compact' }, key)
      .update(input)
      .final();

    // Return the encrypted data
    return encrypted;
  }

  /**
   * Decrypts the token using the keystore and returns the decrypted payload.
   * @param token Encrypted data in JWE format
   * @returns decrypted payload as an object
   */
  async decrypt(token: string) {
    const decrypted = await JWE.createDecrypt(this.keystore).decrypt(token);
    const payload = JSON.parse(decrypted.payload.toString());
    return payload;
  }
}

With this code we can: read a key in json format (used to encrypt and decrypt the data) encrypt and decrypt the payload.

I put some comments in the code to explain each methods.

My demo key (symmetric key):

{
  "kty": "oct",
  "k": "k1JnWRfC-5zzmL72vXIuBgTLfVROXBakS4OmGcrMCoc",
  "alg": "A256GCM",
  "use": "enc"
}

Now we can create two routes to test the service:

  @Post('encrypt')
  async encrypt(@Body() payload: object) {
    return await this.encryptionService.encrypt(payload);
  }

  @Post('decrypt')
  async decryptData(@Body() payload: any): Promise<object> {
    return this.encryptionService.decrypt(payload.token);
  }

We can test and see the encryption working:

And the decryption:

This is a simple but very useful implementation of JWE on NestJS. Do you have any questions about this or what to say something about this new format of post? Let me know!

This post is part of a serie called "microlearning", check more about what is that here.

In my career, I've had to do various refactors and recreate applications, including Mobile, Frontend, and Backend, and I realized that I've never documented this in a post. Recently, I was part of a project where we needed to migrate two native applications (Android in Kotlin and iOS in Swift) to React Native. In addition to migrating all the current features, the idea was to address all the technical debts from the previous versions (conscious debts that were not prioritized) and add new functionalities with a new interface.

I'll take this opportunity to talk about this process, but as an example, I'll use a very simple app that I developed a long time ago, the app in question is the "Front Flashlight Lite" (yes, a flashlight app).
Google sent several alerts about SDK version updates and other policies, and the application even went offline because the terms of use were no longer online.

Overview

The application operates in an extremely simple manner, we can:

• Turn the device's rear flashlight on and off (if available)
• Turn the device's front flashlight on and off (if available)

However, all this is done using the device's native camera API, which means I will need to create a native module for this in React Native.

The idea is not only to migrate to React Native but also to create a new interface and new icons to make everything more modern and attractive.

For this migration, we will focus only on Android, and in my planning, I will need to structure in React Native:

• React Native CLI to start a new project.
• Configure the Bundle (package name) and use the same Keystore to replace the current app without having to create a new one.
• Navigation with React Navigation.
• Styling with Stylesheet (you don't have to use Styled components for everything)
• React Native Animated (perhaps ReAnimated might deliver better performance)
• Create a native module to access the camera API and turn on the flash.
• Firebase library and Admob for analytics and advertisements

Starting

Let's start with the React Navigation part. Here, there's nothing out of the ordinary; we just need to add the libraries to the project and follow the documentation to ensure everything is correct.

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

After setting up the route (we have just one), we can now create our folder structure and then start on the UI.

After stylizing the home screen, we get this:

Native module

Now we need to write the native code, let's create a bridge between React Native and Android. I am writing about this right now and will post as soon as possible.
So, I created the Module and Package classes to control the camera API:

Register the Package in "MainApplication":

In React Native I created a util to communicate between RN and the Android code:

import { NativeModules } from 'react-native';

export async function turnFlashlight(
  on: boolean,
  camera: 1 | 0,
): Promise<boolean> {
  const { LanternaManager } = NativeModules;

  try {
    return await new Promise((resolve, reject) => {
      LanternaManager.turn(on, camera, (status: boolean) => {
        if (status) {
          resolve(true);
        } else {
          reject(false);
        }
      });
    });
  } catch (e) {
    return false;
  }
}

In the native code, the function has three arguments:

• status: Turn on (true) or turn off(false) the light.
• camera: Which flash will be used; frontal (1) or backside (0).
• callback: Callback to capture the response passed in native code (true or false).

Bundle and sign the application

The most important part of the migration an application is here, all the text above is to illustrate a "real migration case", but when you change your app, because you have to switch the framework, or create a new project from zero and need to replace the old application you need to be careful with two things:

• Application Id (or Bundle Id)
• Keystore

This is how the Play Store knows that this application is the same and not a new one (it's a simplified explanation), so, we create a new application and want to replace the old one, let's set up these two points, starting from the application ID changing.
We don't need to change the package name, we need to change the build.gradle and don't need to refactor all the Android application references, folders, etc. It's very simple.

Application ID

Opening the build.gradle from app folder (android/app/build.gradle) we can look for the defaultConfig section. Here we can see the actual application ID.

You can check the actual application ID in the Play Console (or in the old codebase):

Don't forget to change the version number too, put the current + 1 (or some like that):

KeyStore

Now let's create a new signing config to register or old KeyStore, if you lost this, you can check some solutions to recovery. The React Native documentation covers all these steps very well.
In the same file, scroll to signingConfigs section and create a new entry:

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
}
...

Now in the buildTypes section, look for release and change the signingConfig to signingConfigs.release to use the newly created configs.

Edit the gradle.properties in android folder to add the new variables and change the values. Put the same password and alias from the old app and put the .keystore file inside android/app folder.

If your keystore is in jks format it's not a problem, just put the name with extension in the var.

MYAPP_UPLOAD_STORE_FILE=name-of-key-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

Now build and check:

cd android
./gradlew bundleRelease # Generate .aab

If everything is ok the Google Play Console will accept your new bundle and you are ready to go!

Bonus

Don't forget that if you are writing a new application is a good time to implement things to help you keep the good health of the code. Check these posts to see if this can help you:

React Native UI Kit for 2023

A list of react native ui kit and components libraries to boost your mobile development with beautiful components!

Tulio Calil DevTulio Calil

How to Boost Performance in React Applications

React is a powerful library, but as applications become more complex, their performance can suffer. To optimize React application performance, see here some tips.

Tulio Calil DevTulio Calil

React Native and Maestro - UI Tests easy

Maestro is a mobile UI testing framework, very simple and effective. It’s an alternative to other frameworks like Appium, Espresso, UIAutomator or XCTest and is built on top of the knowledge from its predecessors. Maestro doesn’t depend on any mobile framework, so you can run it in React Native app…

Tulio Calil DevTulio Calil

Optimizing Code Quality in React and React Native with SonarQube Integration

Optimize your React and React Native code quality with SonarQube integration. Explore efficient, scalable, and maintainable coding practices in this insightful guide.

Tulio Calil DevTulio Calil

Aumente as Conversões na Black Friday: Estratégia ASO & Ícone Dinâmico no React Native

Foto de CardMapr.nl na Unsplash Bem-vindo ao mundo da Black Friday, a época do ano em que…

DEV CommunityTulio Calil

Maestro is a mobile UI testing framework, very simple and effective. It's an alternative to other frameworks like Appium, Espresso, UIAutomator or XCTest and is built on top of the knowledge from its predecessors.

Maestro doesn't depend on any mobile framework, so you can run it in React Native apps, Native Android or iOS, Flutter, Ionic, Native Script, etc.
It doesn't need a special app package too; you can use it even in a production/release build.

The best points of Maestro are:

• Simple setup.
• Declarative syntax.
• Fast iteration.
• Built-in tolerance delay and flakiness.

Installing

The Maestro documentation is complete and covers installing steps for the specific OS; Macos, Windows and Linux.

To install the Maestro CLI:

curl -Ls "https://get.maestro.mobile.dev" | bash

Don't forget to add the Maestro to PATH variable.

Now we can check if the Maestro is successfully working:

maestro -v

Creating a sample Flow

Start your Android or iOS emulator/simulator, create a new folder for store our files, and open it in your favorite code editor:

For this sample, let's write a simple flow to open the "Maps" app and search for a city, click to change the view from 2D to 3D, and change the map type to Satellite.

Open the Maps before write/run this test, maybe you will be asked to give some permissions. I don't put this on the flow (but is possible) cause I want a clean example.

In your editor or terminal create a new file maps-flow.yml and let's start to write the instructions.

In the first line, we got:

appId: com.apple.Maps

This appId is for iOS, if you are running android change it to com.google.android.apps.maps

This is the first line for every flow that we write, it tells Maestro what application we want to manipulate.
The first lines in the Maestro flow file are the configuration part, in fact, the configuration part is all the lines above the --- marker(we will use this in the next part).
We can set the configuration in the flow file (like we see right now) or in a root config.yml file in the folder.

On the properties, we can for example run flow before the current in case we need any setup steps or somelike that.
You can check all the properties here.

So using the name and appId properties our config part looks like this:

appId: com.apple.Maps
name: Maps Test
---

Here we use the marker --- to tell the Maestro that above is the config and below is your workflow.

Now let's write the commands flow, before any command in the app we need to open the app, and for that, we use the launchApp command.

Command is the name of actions(the properties in the YML) that we got in Maestro.

appId: com.apple.Maps
name: Maps Test
---
  - launchApp

Note that have a space on the line of the command launchApp, this is how YML files work, we need indent to nesting. If it is not clear, you can read about YML before starts.

The launchApp command accepts other params too, you can launch another app, clear the state, give or not permissions, and more.
All the commands got a really good doc.

Now we can test the flow, in the terminal run:

maestro test maps-flow.yml

Sometimes it takes some time to install the maestro-drive in the device in the first run.

If all is right we will see the following output:

Let's put one more command:

appId: com.apple.Maps
name: Maps Test
---
  - launchApp
  - tapOn: "Search Maps"

🚩 For Android emulator change the tapOn to "Search here".

The tapOn command tells the Maestro to tap/touch/click on a view/component/element that matches with the selector that we pass. By default we can pass a string as an argument, this means that Maestro will look for a view that has this EXACLTY text. It's very useful when you don't know or the application doesn't use things like test-id.
But like always we can pass any other option, in this case, other selectors.

In Maestro we got a lot of selectors, text, id, point (relative position in the screen), and more. All selectors are documented here.
Right now the text selector is the best option for us.

We tap on the search field, and putting some text is the next step, right?

appId: com.apple.Maps
name: Maps Test
---
  - launchApp
  - tapOn: "Search Maps"
  - inputText: "Salvador, Bahia, Brazil"

Now we type some text in the field, the inputText command has some random generators too, you can see it on the docs.
Now that we have typed the text let's confirm the search and seed the result:

appId: com.apple.Maps # android = com.google.android.apps.maps 
name: Maps Test 
---
  - launchApp
  - tapOn: "Search Maps" # android = Search here
  - inputText: "Salvador, Bahia, Brazil"
  - pressKey: Enter

If we want we can swipe the info modal, just add and test:

  - swipe:
      start: 50%, 80%
      end: 50%, 10%

Using parameters

We are changing some values between OS, for iOS we using the appId "com.apple.Maps" and for Android "com.google.android.apps.maps". In this case, we can turn this flow generic for each OS using parameters.

With parameters is possible to change the fixed values in the file for variables that will be read from the CLI arguments or from environment variables. Just a refactor in our file:

appId: ${APP}
name: Maps Test 
---
  - launchApp
  - tapOn: ${FIELD}
  - inputText: "Salvador, Bahia, Brazil"
  - pressKey: Enter
  - swipe:
      start: 50%, 80%
      end: 50%, 10%

Now appId is the value of APP and tapOn is FIELD, to set this value just run the Maestro CLI this way:

For Android test:

maestro test -e APP=com.google.android.apps.maps -e FIELD="Search here"  maps-flow.yaml

For iOS test:

maestro test -e APP=com.apple.Maps -e FIELD="Search Maps"  maps-flow.yaml

We can use parameters for multiple things, if you have a secret (like a password) and don't want to store this in the YML file or if this value is dynamic and you need to get a new one every running for example.

Recording and report

You may need to get some evidence that all tests are passing, maybe a video or a report or both. Maestro has a built-in solution for the two cases.

Recording

Maestro records the mobile screen and creates a virtual window to show the test state and formats it to mp4, actually the rendering is done in the server and when the render is done you get a temporary URL to download the video.

To record the video is ultra simple, just change test to record in the CLI:

maestro record -e APP=com.google.android.apps.maps -e FIELD="Search here"  maps-flow.yaml

The output:

Report

Maestro can generate reports for test suites, in this case, we just got one test but we can generate the report too.
Like the record, the report is very simple too, just add a new argument in the CLI:

 maestro test --format junit -e APP=com.google.android.apps.maps -e FIELD="Search Here"  maps-flow.yaml

The --format junit will generate an xml file in the root with the status of the tests, actually the only supported format is Junit. You can change the output path using the --output argument.

Copy and paste the xml content here

Conclusion

Maestro is an awesome framework and we use it a lot at my current company, GOK.

This is just the first post of a series about Maestro, I will bring real-world examples and advanced concepts in the next posts.

In the dynamic world of software development, ensuring high code quality is crucial, especially for React and React Native frameworks. Code quality pertains to creating efficient, error-free, maintainable, and scalable code. SonarQube, a leading tool for code analysis, plays a pivotal role in achieving this. It automates code reviews, and identifies bugs, vulnerabilities, and code smells, making it an invaluable asset for developers. By integrating SonarQube with React and React Native projects, developers can significantly enhance their code's reliability, adhere to coding standards, and mitigate potential vulnerabilities, thereby maintaining a consistently high standard of code quality throughout the development process.

Updated on October, 2025. Just some fixes on versions.

Requirements

• Docker
• Terminal
• Code Editor

Docker is the easiest and fastest way to run SonarQube in the project so I use it every time I need.

Starting

On your React or React Native project create a docker-compose.yml file and put this:

version: "3.9"

services:
  sonarqube:
    container_name: sonarqube
    image: sonarqube:8.9.10-community
    expose:
      - "9000"
    ports:
      - "9000:9000"

If you are using an arm64 computer(like Macbook M1/M2/M?) change the image to image: mwizner/sonarqube:8.7.1-community.

This will create a Docker container named "sonarqube" and expose the port 9000 to our machine.

In your terminal run:

docker-compose up -d

When it finishes, you can check if the container is running using the following command:

docker ps

Now you can open the localhost on the port 9000.

The default user is admin and password admin. You will be asked to create a new (don't forget the new password). When you finish this page will open:

Click on "Create new project" and choose the "Manually" option, now need to define the project key, it's just the project name (or whatever you want):

The next step is to generate a token, put a name for the token, click on "Generate", copy the generated token:

Now we need to add a new dependency in the application:

yarn add sonarqube-scanner@3^

And create a file called sonarscan.js in the project root with this content:

const scanner = require("sonarqube-scanner");

scanner(
  {
    serverUrl: "http://localhost:9000",
    login: "the generated token",
    options: {
      "sonar.projectName": "project name",
      "sonar.projectKey": "project key",
      "sonar.sources": "src",
      "sonar.ignore":
  "src/**/*.test.js,src/**/*.spec.js,src/**/*.test.jsx,src/**/*.spec.jsx,android/**,ios/**,node_modules/**",
    },
  },
  () => process.exit()
);

Open the package.json and create a new script entry for the Sonar script:

"scripts": {
    ...
    "sonar": "node sonarscan.js"
  },

Run in the terminal the new command:

yarn sonar
#or
npm run sonar

If you see an error message Not authorized. Analyzing this project requires authentication. Go to Sonar dashboard, open the Administration page, Security and disable the Force user authentication option.

Go back to Sonar page and you will see some like this:

Now you can navigate the issues and other insights generated by the Sonar!
Don't forget that you can create custom rules for Sonar.

Any question? Let me know in the comments section!

As a software engineer by profession, my world revolves around coding and creating innovative digital solutions. However, when I'm not immersed in the complexities of software development, I find myself diving into another passion of mine: gaming. My love for video games is not just limited to the latest releases; in fact, I have a profound appreciation for vintage gaming consoles. My collection boasts treasures like the Super Nintendo Entertainment System (SNES), Nintendo 64, Game Boy, and several others. Each console is a gateway to nostalgia and a testament to the evolution of gaming. In this article, I'm excited to share how I blend my technical skills with my gaming hobby, particularly through my recent project involving the PlayStation 2 (PS2) and a Raspberry Pi 4 in the year 2024 to create a Samba server to read the games over the network.

We will need:

• PlayStation 2 with OPL
• Raspberry Pi (I used 4)
• Ethernet cable (don't need to be crossover)
• HDD (optional just to put all the games)

Setup Raspberry Pi 4

First of all, we need to format the SDCARD to use in our Raspberry, I recommend the Pi Imager to create the image. It's straightforward; choose the device, the operating system (I used and recommend the Raspberry Pi OS) and choose the storage (SDCARD).

Now we can put the SDCARD in the Rasp and boot the system, finish all the initial setup.

Samba server

Now we need to create our shared folder to access via OPL. Samba is an open-source software suite that provides seamless file and printer-sharing capabilities between Windows, Linux, and macOS systems within a network. It enables these diverse systems to communicate with each other by implementing the SMB/CIFS protocol.

Let's install the Samba, open the LXTerminal, and type:

sudo apt install samba -y

After finishing, we need to create or mount our shared folder where we will put all the games, we can use a USB device (HDD, pen drive, etc) or just use the SDCARD space. For this example, I will use an HDD with a USB adapter, just plug it and the OS will mount automatically.

Now we need to get the path to the OPL folder in our device, just open the device that you plugged in and copy the path.

If you will not use an external device, just create a folder and put the games ISO in the DVD folder.

Now let's configure the sharing file, you can install a code editor in your OS or just use nano to edit files in the terminal.
We need to open the smb.conf and edit some things, but is easier to create a new one, so let's move the original file and download a new one:

sudo mv /etc/samba/smb.conf /etc/samba/smb.conf-bkp

Now we will download the new file, I hosted in the GitHub gist, it's a modification of an original file with a small modification (ntlm line):

sudo wget https://shorturl.at/dvQST -O /etc/samba/smb.conf

This file has a lot of configs that make the SMB work on PS2,lets edit it:

sudo nano /etc/samba/smb.conf

In the bottom of the file, we got this:

[PS2]
comment = PlayStation 2
path = /media/user/DISK/PS2
browsable = yes
guest ok = yes
public = yes
available = yes
read only = no
veto files = /._*/.apdisk/.AppleDouble/.DS_Store/.TemporaryItems/.Trashes/desktop.ini/ehthumbs.db/Network Trash Folder/Temporary Items/Thumbs.db/
delete veto files = yes

The comment is just a comment (seriously?), it's for the system that shows this info. The path is one of the most important lines here, we need to tell what folder we want to share, just paste the path that we copied before (HDD or the new folder). The other option is just for permissions.
Save the file (CTRL + o) and exit from nano (CTRL + x).

To finish our sharing server, we just need to config the user, we will use the current (logged) user to connect to the SMB, to do that we need "create" the user on the samba:

sudo smbpasswd -a username

Replace "username" to your current user. You will be asked to create a new password; you can create a different password for the sharing (simpler or smaller).
Now restart the services:

sudo service smbd restart
sudo service nmdb restart

Static IP

To connect the PS2 to the Raspberry Pi with the cable we need to set a static IP to the ethernet network on Rasp, it's very easy on Raspberry Pi OS, just click on the WIFI icon > Advanced Options > Edit connections.

On the next screen choose the connection in "Ethernet" section and click on the gear icon:

Now click on IPv4 Tab and configure on this way:

The network mask/subnet mask with "24" corresponds to "255.255.255.0", here is an explanation.
Save the config, connect the cable on PS2 and Raspberry, and let's go to the OPL.

OPL Settings

Turn on your PS2 on OPL and go to Network Settings, put your configs like that:

On -PS2- section is our network config for the PlayStation 2, put the Address type to static and choose a different IP, the other info you will repeat from the Raspberry network configuration.
The - SMB Server - section is the config to connect to the Rasp, put the address type to IP and put the IP that we set previously, the port we don't need to change, the Share options is the name of share that we create on Samba config file (PS2), the user is the user that we use to log in on the Rasp, and the password is the one that we create when adding the user to Samba.

Now click on the "Reconnect" option and check if there's no error message, go back to your games list and check!

Bonus

You can use the OPL PC Tools to download the cover and background for your games and get a beautiful UI on your PS2!

Check it out here.

Any question? comment and let's talk!

As the world of software development continues to evolve at a breakneck pace, so too does the toolkit of a modern developer. As we step into the year 2024, I find myself excited to share with you an overview of my current development environment and the essential tools that have become integral to my daily workflow. In this post, I'll walk you through the technologies, languages, frameworks, and hardware that empower me as a developer in this dynamic era of software engineering.

In a field where change is the only constant, staying up-to-date with the latest trends and tools is not just an option, but a necessity. Join me on this journey as we explore the key components that make up my development setup in 2024, and how they enable me to build, innovate, and thrive in the ever-evolving world of software development.

Code editor/IDE

In the world of software development, two essential tools take center stage: code editors and Integrated Development Environments (IDEs). These are the workspaces where developers bring their ideas to life, write, and refine code. While they share the common goal of facilitating code creation, they each have their own unique role and advantages.

Zed

Write in Rust, Zed is awesome and I fell in love with this editor, it is fast, simple, and has a lot of features. Unfortunately, it has only a Mac version, but you can see the other system version's status here, I miss some features yet, I come from Visual Studio Code and I like things like mini-map, Git integrated client (I use the merge/diff a lot), and the possibility to choose icons library. All these features are listed as "Top issues" in the Zed repository and maybe it's come real in the feature.

Visual Studio Code

VSCode is still the most complete code editor, in my opinion, writing in Electron, this code editor is my secure place to develop. Yes, I use Zed, but when I need things that I don't see there I switch to VSCode again.
Here are my settings and plugins in VSCode:

• Ayu theme
• Cascadia Code font
• Color highlight
• DotENV
• EditorConfig
• Eslint
• File-icons
• Github Copilot
• gitignore
• GitLens
• Handlebars
• HTML Preview
• Live Server
• Live Share
• Path Intellisense
• Prettier
• TODO Tree
• vscode-styled-components
• WakaTime

Terminal

A terminal emulator is a thing that I always try some new and always back to the same: Macos: iTerm2, Linux: Tilix, Windows: Windows terminal.
In this case, I use iTerm2, it's simple and has a lot of features that I like; split panel, tabs, profiles, and themes.

iTerm2

For the theme I choose the Bluloco Dark but you can find more here.

Fish Shell

This is another piece of my environment that I like to try new, for a long time I used ZSH, but a friend showed me fish one day and I decided to try, that was a year ago. Fish has a built-in autocomplete and many other features.

Fish is considered an exotic shell since it does not adhere to POSIX shell standards - Wikipedia

Check this gist to see my alias and configs in fish, my plugins:

Fisher

A plugin manager for Fish.

Peco

Peco is a filtering tool to use with other commands like history, top or many others.

Exa

Exa is an alternative to ls command, it adds icons to the files, change the view of files, you can toggle the list columns, filter, and much more.

Z

Z is a directory jumping, Z tracks the directories you visit. With a combination of frequency and recency, it enables you to jump to the directory in mind.

Starship

Starship is a customizable prompt that can be used in any shell.

Rest/HTTP request client

REST clients are the go-to tools for developers and engineers when it comes to testing, debugging, and consuming RESTful APIs. They provide a user-friendly interface for crafting, sending, and receiving HTTP requests, making the exploration and interaction with web services both efficient and accessible.

HTTPie

HTTPie is a new software in this area but it looks awesome, the UI is very simple and beautiful, and they have clients for all the systems including a CLI and a Web-based client.

Databases

In software development, databases serve as a reliable storage and retrieval system, enabling applications to store user profiles, process transactions, track inventory, and much more. Developers leverage various types of databases, such as relational databases like MySQL and PostgreSQL, NoSQL databases like MongoDB, and in-memory databases like Redis, to address specific project requirements.
I have many tools for each database that I use, so this is the list:

• MongoDB Compass
• Postgress Postbird
• DB Browser for SQLite

Debuggers

Debugging tools are indispensable assets in the world of software development. They are designed to uncover and resolve issues, glitches, and errors within code, ensuring that applications run smoothly and efficiently. Debugging is a critical phase in the development process, allowing developers to identify and fix issues that may disrupt a program's functionality.

Flipper

Flipper is a platform for debugging iOS, Android, and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

React Native Debugger

A great and complete alternative to browser dev tools. You can interact with the components doom, see actions, logs, requests and more.

Reactotron

An inspector for React and React Native, view requests & responses, logs, state, and much more.

Debugtron

An Electron debugger tool to debug production applications.

Others

So, I use many other things like software for notes, to draw diagrams, to free space in the Mac, and more, here is the list that I see right now:

• NPKill
• Clean my mac
• Microsoft TO DO
• Notion
• Draw.io
• Bitwarden

Crafting a powerful development environment for 2024 has been a key focus. The tools and plugins I've highlighted in this post are the bedrock of my productivity and efficiency as a developer. With these resources at my disposal, I'm poised to tackle the challenges and opportunities of the ever-evolving tech landscape.

The Robert C. Martin Clean Code Collection (Collection)

from: $60.00 now: $43.99

SAVE NOW

In the ever-evolving landscape of web development, Node.js and Fastify stand as formidable pillars of efficiency and performance. Node.js, known for its speed and versatility, and Fastify, recognized for its lightning-fast web framework, together form a dynamic duo for building robust REST APIs. But what if we told you that there's a way to take your API to the next level, infusing it with the capabilities of OpenAI's Chat GPT?

In this comprehensive guide, we embark on a journey through the realms of Node.js, Fastify, and OpenAI's Chat GPT, unlocking their full potential to create an API experience like no other.

Node.js: Fueling the Backend Revolution
Node.js has been a game-changer in backend development, enabling developers to use JavaScript on the server-side. Its non-blocking, event-driven architecture makes it a natural choice for building highly scalable applications. We'll dive deep into how Node.js empowers our project with speed, efficiency, and an extensive library ecosystem.

Fastify: The Swift and Secure Web Framework
Fastify, a web framework for Node.js, is designed for blazing-fast performance. It excels in handling high loads while maintaining a minimalistic and developer-friendly API. We'll explore how Fastify's features and plugins streamline the creation of our RESTful API, ensuring it's both performant and secure.

OpenAI Chat GPT: The AI Language Model Revolution
OpenAI's Chat GPT represents a breakthrough in natural language understanding. With its ability to generate human-like text, it opens up exciting possibilities for conversational interfaces and content generation. We'll integrate Chat GPT seamlessly into our API, creating a dynamic and responsive user experience.

Creating the project

To start the project, we need to create a new Node.js project and install Fastify to our project dependencies, create a new folder, and:

npm init -y
#or
yarn init -y

Now install the Fastify dependency:

npm install fastify
#or
yarn add fastify

Add dotenv too:

npm install dotenv
#or
yarn add dotenv

Open the project in your code editor:

It's time to create the folder structure and some files to get our project running, I like this structure:

In your package.json create an entry for "type": "module", this will allow the project to use import/export syntax. In main entry, change to server.js.

Let's create our server module, open app.js and write a code that imports the routes file and setup the Fastify:

import Fastify from 'fastify';
import Routes from './routes.js';

const fastify = Fastify({
  logger: true,
});

Routes({ fastify });

export default fastify;

In the Fastify options we will enable only the logger.

In the routes.js temporarily we can register a new route and redirect to the controller:

import * as GPTController from './controllers/GPTController.js';

const gptRoutes = (fastify, _, done) => {
  fastify.get('/', GPTController.search);
  done();
}

export default async function Routes({ fastify }) {
  fastify.register(gptRoutes, { prefix: 'v1/gpt' });
}

This code imports the GPTController (we will create it) and use the search method on fastify.get, this line means that when the user hits the .../gpt using the GET HTTP verb we will call the search function inside the controller.

We got the Routes function too, this function just registers the routes on Fastify and permits the creation of route prefixes (and other settings), this is very useful for grouping the resources by context or creating versions for each route group.

Open the server.js file and let's see the code:

import 'dotenv/config'
import fastify from './src/app.js';

try {
  const port = parseInt(process.env.PORT, 10) || 7777;
  await fastify.listen({ port });
} catch (err) {
  throw err
}

Here we just import dotenv and execute the config setup, import the app.js file, and start the Fastify server with listen a function passing the port as a parameter. We get the port number from the Env.

Create the controller file inside controllers folder with name GPTController.js and put a small "Hello World":

export const search = (request) => {
  return {message: "Hello World"}
}

Just a small function that returns an object with message key and as a value; "Hello World".
Fastify automatically serializes the return value of the controller to a JSON and we can speed up this process (yes, serializing is slow) using the response key on the schema option for each route, check it here. It is not necessary but is good to know.

Time to run the server and see all the changes that we made:

node server.js

Some logs will be printed on the terminal, this is because we enable the logger, and every request will output some logs too.

Open the server on an HTTP client (I use HTTPie) with the new route and we can see the "Hello World" message:

Okay, the main application is done! Go to check the OpenAI GPT part.

Chat GPT on Node.js

From a technical standpoint, the Chat GPT API offers a seamless integration process, making it accessible and adaptable for a wide range of development projects. Developers can interact with the API via HTTP requests, allowing for straightforward communication with the model. Input is provided as a list of messages, each having a role ('system,' 'user,' or 'assistant') and content. This structure enables the creation of structured and dynamic conversations, with the model able to remember and respond contextually to previous messages. The API supports customization through 'system' level instructions, enabling developers to steer the model's behavior to align with specific use cases. With OpenAI's commitment to continuous improvement, the Chat GPT API promises not only an impressive initial experience but also the potential for further refinement as the model evolves, ensuring that it remains at the forefront of cutting-edge AI technology.

To connect to Node.js applications we can use the openai NPM package, this will give us a shortcut in development and simplify the application.
To start we need first to get an API Key, which you can get on the API key page.

On the project add the new dependence:

npm install openai
#or
yarn add openai

Create a .env file and insert your API key:

OPENAI_API_KEY=sk-123abc

In the services folder create the openAIGPT.js file and put this content:

import OpenAI from 'openai';

export const searchGPT = async (question) => {
  const openai = new OpenAI();

  const chatCompletion = await openai.chat.completions.create({
    messages: [{ role: 'user', content: question }],
    model: 'gpt-3.5-turbo',
  });

  return chatCompletion.choices[0].message.content;
}

Here we create a searchGPT function and inside we start the OpenAI object, we don't need to pass any config for this sample cause the package automatically search for the env variable with OPENAI_API_KEY.

In the next line, we use the chat.completions to start new completions, the Chat Completions API is an interface that allows developers to integrate GPT-3's language generation capabilities into their applications, particularly for generating human-like text in a conversational format.
On create we set the message object (you can pass multiple messages) that comes from the user's request and the role, "rules" refer to specific instructions or guidelines you can provide to the GPT-3 model as part of the API request to control its behavior and output.
Finally, we return the response content.

Go back to the GPTController.js and change to this:

import {searchGPT} from "../services/openAIGPT.js"

export const search = async (request) => {
  const { question } = request.query;

  if(!question){
    return { message: "invalid" }
  }

  const message = await searchGPT(question);
  return { message }
}

We get the question from the request query and check if it exists, if not we return an "invalid" message (I strongly recommend using the Fastify validators). If exists we call the searchGPT service and create the completion.
Running the server and testing again we got:

I put a query question in the URL and got the GPT response in my body.

You can mix this knowledge with other things that we already see here in the blog, for example, we can connect your API to an Electron desktop APP with our SQLite database to generate insights from the data. We can use UI Kits to create beautiful interfaces for this integration too.

In this journey to harness the capabilities of Node.js, Fastify, and OpenAI's Chat GPT, you've unlocked the true potential of modern web development. Your REST API, now infused with the magic of AI-powered conversations, stands as a testament to the endless possibilities at your fingertips. As you venture forward, remember that the collaboration of cutting-edge technologies can redefine user experiences, revolutionize industries, and shape the future. Embrace this fusion of innovation, and continue to create, innovate, and unleash the power of technology to transform the world.

If you're interested in exploring the code behind this project, you can find it on GitHub. Feel free to dive in, learn, and continue to build amazing things with these powerful tools.

tuliocll - Overview

Hi 👋. tuliocll has 69 repositories available. Follow their code on GitHub.

GitHub

In the ever-evolving software development landscape, Electron has emerged as a powerful framework, enabling developers to build cross-platform desktop applications using web technologies. Its flexibility and extensive community support have made it a go-to choice for crafting desktop apps. However, as any developer knows, creating a polished user interface that caters to both aesthetics and accessibility can be a daunting task.

This is where Electron UI Kits will step in as game-changers for developers in 2023. They not only streamline the UI design process but also serve as a crucial tool for ensuring consistency across platforms and improving accessibility for a broader user base.

In this post, we'll delve into the world of Electron UI Kits and explore how they can supercharge your development workflow. We'll discuss what Electron is, why UI kits are indispensable, and how they can help accelerate development, standardize the user interface, and make significant strides in enhancing accessibility.

Join us on this journey as we discover the latest and greatest Electron UI Kits for 2023, equipping you with the tools to craft stunning, accessible, and cohesive desktop applications that leave a lasting impression on your users. Whether you're a seasoned Electron developer or just starting your journey, these UI kits are bound to revolutionize the way you approach desktop application design.

Starting a demo Electron project

To test all these UI kits, I will create a simple (with no UI framework) project to test some components, to do that I will use the Electron-forge project, so in a terminal type:

yarn create electron-app my-new-app --template=vite

Open it in your favorite code editor and delete all content in src/index.css.
Now we can check the UI Kits!

Tailwind

Tailwind CSS is a utility-first CSS framework that provides a set of pre-designed, reusable CSS classes. Rather than writing custom CSS from scratch, developers can compose web interfaces by applying these classes directly to HTML elements. This approach speeds up development and ensures a consistent design language throughout your application.

Langui

Langui is a Tailwind library with free-to-use components tailored for your AI and GPT projects. Focus on building the next best project and let it handle the UI.
With a lot of components based on tailwind, you can create beautiful UIs for your AI products.

Pure CSS

Pure.css is a minimalistic CSS framework developed by Yahoo. Its primary mission is to provide a set of small, responsive, and unobtrusive CSS modules that you can easily drop into your web projects. Unlike some larger CSS frameworks, Pure.css offers only essential styling, giving you the flexibility to customize your designs according to your unique preferences.

UI Kits for React, Vue, Svelte, or Angular

As you can see, we can use almost all UI Kits that we got in the web development in Electron, and this is why Electron is so good.
Of course, we can use UI Kits from frameworks, so I link these guys here, you can check:

Some of them can be used in more than one framework

In an increasingly digital world, the need for secure and robust authentication systems is paramount. Whether you're building a desktop application, a mobile app, or a web platform, the ability to authenticate users reliably and securely is a fundamental requirement. While online authentication methods are well-established and widely adopted, there are situations where offline authentication becomes essential. This is particularly true for desktop applications, where internet connectivity is not always guaranteed.

In this article, we dive into the world of "Offline Authentication" and explore a powerful combination of technologies to achieve this goal: Electron, SQLite, and React. By leveraging the capabilities of Electron, a framework for building cross-platform desktop applications, and harnessing the flexibility of SQLite, a lightweight and embedded database engine, we'll create a robust offline authentication system. To top it off, we'll enhance the user experience by incorporating the user-friendly React library for building the application's front end.

Offline authentication isn't just about enabling access when the internet is down; it's about providing users with a seamless and secure experience, even when disconnected. Whether you're developing a stand-alone desktop application or a part of a broader software ecosystem, the techniques and principles we'll explore here will empower you to create reliable offline authentication solutions that protect user data and ensure a smooth user experience.

Let's embark on this journey to learn how to implement offline authentication with Electron, SQLite, and React, and unlock new possibilities for your desktop applications.

First, we will use the last Electron post to start this new one. You can clone the repository on Github:

GitHub - tuliocll/electron-react-sqlite-todo: A TODO app with Auth built with Electron, ReactJS and SQLite

A TODO app with Auth built with Electron, ReactJS and SQLite - GitHub - tuliocll/electron-react-sqlite-todo: A TODO app with Auth built with Electron, ReactJS and SQLite

tuliocllGitHub

Let's start with our business rules for this new feature. We want to create a register and login pages and check if the user is authenticated before accessing some resources (pages).

We need to create the users table on SQLite database, so open the database on your favorite tool to manage SQLite databases and create the new table:

CREATE TABLE "user" (
	"id"	INTEGER,
	"username"	TEXT,
	"password_hash"	TEXT,
	"status"	INTEGER,
	PRIMARY KEY("id" AUTOINCREMENT)
);

With the new table created it's time to create the Typescript types for this entity. Create a new folder called types in the src/ folder and create a User.d.ts file with this content:

declare type User = {
  id?: number;
  username: string;
  password_hash: Buffer;
  status: number;
};

declare type Auth = {
  username: string;
  password: string;
};

This declaration permits us to use it on both processes, main and render.

To help us with the security, let's use the safeStorage module from electron core. This package lets us encrypt and decrypt data and protects it from being accessed by other applications using the native OS resources (Keychain and password manager for example).

Create a new util inside utils folder on the main process side called encrypt.ts and put this code:

import { safeStorage } from 'electron';

export function hashText(text: string) {
  try {
    if (!safeStorage.isEncryptionAvailable()) {
      return false;
    }

    return safeStorage.encryptString(text);
  } catch (err) {
    return false;
  }
}

export function decriptText(text: Buffer) {
  try {
    if (!safeStorage.isEncryptionAvailable()) {
      return false;
    }

    return safeStorage.decryptString(text);
  } catch (err) {
    return false;
  }
}

This code verifies if the encryption is available and uses it.

This post is an improvement of this post (in Portuguese) and the last part, covers the SQLite integration.
First, let's start from the beginning (again) without wasting any more time.

I made a small update on this post at out 2023 to fixes the build with electron and SQLite, check the discus here.

Project Overview

A TO-DO is an awesome idea for this project, so let's create something like the "Microsoft To-do".

We will use:

• Electron is an open-source project that allows developers to create Desktop apps with Web technologies.
• React, your UI/Components library.
• SQLite, a portable SQL database.

Starting the project

To accelerate your development, let's use a React + Electron boilerplate, this will save a lot of time of setup and organize your base project.

# Clone the boilerplate:
git clone --depth=1 \
  https://github.com/electron-react-boilerplate/electron-react-boilerplate \
  todo-clone

cd todo-clone

# Install dependencies:
npm install

After installation was complete, you can run npm start and see the default boilerplate page:

If we open the project in a code editor, we will see this folder structure:

By default, the boilerplate comes with CSS Modules, React Router Dom, and the testing-library.

Clean Architecture

$17,00

GET OFFER

Starting the UI

Let's start organizing the project to place our files in the right place, first, inside of src/renderer create three folders: components, styles, and views.
Now delete the App.tsx and create the routes.tsx, rename the App.css to App.global.css, and move to the styles folder.
Inside the views folder, create the Home folder and inside it creates index.tsx, and Home.module.css.
Create default.css inside styles/themes folder (create the themes folder too).
Now, let's see the code for each file:

src/renderer/styles/App.global.css:

@import './themes/default.css';

* {
  padding: 0;
  margin: 0;
  font-family: var(--font);
}

.button {
  background-color: var(--primary-color);
  border: none;
  margin: 5px;
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 4px;
  color: var(--text-color);
}

.button:hover {
  opacity: 0.8;
  cursor: pointer;
}

.button + .secondary {
  background-color: var(--text-cancel-color);
}

src/renderer/styles/themes/default.css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

:root {
  --primary-color: #788cde;
  --secondary-color: #323232;
  --background-color: #282828;
  --alternate-background-color: #1e1e1e;

  --text-color: #e1e1e1;
  --text-color-light: #777676bb;
  --font: Roboto;

  --text-cancel-color: #dd2a2c;

  --link-color: #e1e1e1;
  --link-color--hover: #543fd7;
}

src/renderer/index.tsx:

import './styles/App.global.css';
import { createRoot } from 'react-dom/client';
import Routes from './routes';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(<Routes />);

src/renderer/routes.tsx:

import { MemoryRouter, Route, Routes } from 'react-router-dom';

import Home from './views/Home';

export default function appRoutes() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" Component={Home} />
      </Routes>
    </MemoryRouter>
  );
}

Now, let's see the components' part, inside components create these folders; Sidebar, Logo, TaskArea and TaskItem. For each one, create the index.tsx and {ComponenteName}.module.tsx.

src/renderer/components/Sidebar/index.tsx:

import Logo from '../Logo';

import styles from './Sidebar.module.css';

export default function Sidebar() {
  return (
    <div className={styles.sidenav}>
      <Logo />
      <a href="#">Meu dia</a>
      <a href="#">Importante</a>
      <a href="#">Planejado</a>
      <a href="#">Trabalho</a>
    </div>
  );
}

src/renderer/components/Sidebar/Sidebar.module.css:

@import '../../styles/themes/default.css';

.sidenav {
  width: 240px;
  height: 100vh;
  background: var(--background-color);
  overflow-x: hidden;
  padding-left: 10px;
}

.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-family: var(--font);
  font-size: 1.1rem;
  color: var(--link-color);
  display: block;
}

.sidenav a:hover {
  background-color: var(--alternate-background-color);
}

Now is the time to create our Task components, create components/TaskArea and components/TaskItem. Rember to create our default files (index and CSS).

TaskArea/index.tsx:

import TaskItem from '../TaskItem';

import styles from './TaskArea.module.css';

export type TODO = {
  id?: number;
  title: string;
  date: string;
  status: number;
};

export default function TaskArea({
  todos,
  onCheck,
  onDelete,
  onEdit,
}: {
  todos: TODO[];
  onCheck: (id: number) => void;
  onDelete: (id: number) => void;
  onEdit: (id: number) => void;
}) {
  return (
    <div className={styles.container}>
      {todos.map((todo) => (
        <TaskItem
          checked={todo.status === 1 ? true : false}
          date={todo.date}
          label={todo.title}
          key={todo.id}
          id={todo.id}
          onChange={onCheck}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      ))}
    </div>
  );
}

TaskArea/TaskArea.module.css:

@import '../../styles/themes/default.css';

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  background-color: var(--alternate-background-color);
}

TaskItem/index.tsx:

import { format } from 'date-fns';
import styles from './TaskItem.module.css';

export type TaskItem = {
  label: string;
  date: string;
  id: number;
  checked: boolean;
  onChange: (id: number) => void;
  onEdit: (id: number) => void;
  onDelete: (id: number) => void;
};

export default function TaskItem({
  date,
  label,
  id,
  checked,
  onChange,
  onDelete,
  onEdit,
}: TaskItem) {
  function handleCheck() {
    onChange(id);
  }

  function handleEdit() {
    onEdit(id);
  }

  function handleDelete() {
    onDelete(id);
  }

  return (
    <div
      className={`${styles.container} ${checked ? styles['task-finish'] : ''}`}
      id={`${id}`}
    >
      <input
        className={styles.checkbox}
        type="checkbox"
        checked={checked}
        onChange={handleCheck}
      />
      <div className="col">
        <p className={styles['task-label']}>{label}</p>
        <p className={styles['task-date']}>
          {format(new Date(date), "E., dd 'de' MMM")}
        </p>
        <div>
          <button className="button" onClick={handleEdit}>
            Editar
          </button>
          <button className="button secondary" onClick={handleDelete}>
            Deletar
          </button>
        </div>
      </div>
    </div>
  );
}

TaskItem/TaskItem.module.css

@import '../../styles/themes/default.css';

.container {
  display: flex;
  align-items: center;
  background-color: var(--secondary-color);
  padding: 10px 20px;
  margin: 1px 0px;
  color: var(--text-color);
  font-family: var(--font);
  border-radius: 6px;
}

.container > :nth-child(1) {
  margin-right: 15px;
}

.task-label {
  font-size: 0.85rem;
  color: var(--text-color);
}

.task-date {
  font-size: 0.85rem;
  color: var(--text-cancel-color);
  font-weight: bold;
}

.task-finish .task-label {
  text-decoration: line-through;
}

input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--alternate-background-color);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.35em;
  height: 1.35em;
  border: 0.15em solid var(--background-color);
  border-radius: 50px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type='checkbox']::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  border-radius: 50px;
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--background-color);
  background-color: var(--background-color);
}

input[type='checkbox']:checked::before {
  transform: scale(1);
}

input[type='checkbox']:checked {
  background-color: var(--primary-color);
}

input[type='checkbox']:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type='checkbox']:disabled {
  color: var(--primary-color);
  cursor: not-allowed;
}

Create the Logo componente (folder, files etc):

import styles from './Logo.module.css';

export default function Logo() {
  return <h1 className={styles.logo}>TODO Clone</h1>;
}

@import '../../styles/themes/default.css';

.logo {
  color: var(--primary-color);
  margin: 20px 0px;
  font-family: var(--font);
  font-weight: 800;
}

The Modal component:

import { useState } from 'react';
import styles from './Modal.module.css';
import { TODO } from '../TaskArea';
export type Modal = {
  initialData: TODO | undefined;
  onClose: () => void;
  onSave: (item: TODO) => void;
};

export default function Modal({ onClose, initialData, onSave }: Modal) {
  const [title, setTitle] = useState(initialData?.title || '');

  function handleOnSave() {
    if (title === '') {
      alert('Invalid title');
      return;
    }

    onSave({
      title,
      date: initialData?.date || new Date().toLocaleString(),
      status: initialData?.status || 0,
      id: initialData?.id,
    });
  }

  return (
    <div className={styles.modal}>
      <div className={styles.modal_content}>
        <span className={styles.close} onClick={onClose}>
          &times;
        </span>
        <h2>New task</h2>
        <div className={styles.formGroup}>
          <label>Title</label>
          <input value={title} onChange={(el) => setTitle(el.target.value)} />
        </div>
        <button className="button" onClick={handleOnSave}>
          Save
        </button>
        <button className="button secondary" onClick={onClose}>
          Cancel
        </button>
      </div>
    </div>
  );
}

@import '../../styles/themes/default.css';


.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  color: var(--text-color);
}

.modal_content {
  background-color: var(--background-color);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--primary-color);
  width: 50%;
}

/* The Close Button */
.close {
  color: var(--text-cancel-color);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.formGroup {
display:flex;
flex-direction: column;
margin: 10px 0px
}

.formGroup > input {
    font-size: 1rem;
    padding: 5px;
    margin: 5px 0px;
    border: 1px solid;
    border-radius: 4px;
    border-color: var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--text-color);
}

Back to the views folder, let's put the Home code:

import TaskArea, { TODO } from '../../components/TaskArea';
import Sidebar from '../../components/Sidebar';
import FAB from '../../components/FAB';
import Modal from '../../components/Modal';

import styles from './Home.module.css';
import { useState } from 'react';

export default function Home() {
  const [modal, setModal] = useState(false);
  const [todos, setTodos] = useState<TODO[]>([
    {
      id: 1,
      date: new Date().toLocaleString(),
      status: 1,
      title: 'Test',
    },
    {
      id: 2,
      date: new Date().toLocaleString(),
      status: 0,
      title: 'Test 2',
    },
  ]);
  const [edit, setEdit] = useState<TODO>();

  function onSave(todo: TODO) {
    const update = todos.find((el) => el.id === todo.id);
    if (update) {
      const updatedTodos = todos.map((el) => {
        if (el.id === todo.id) {
          return todo;
        }

        return el;
      });
      setTodos(updatedTodos);
    }

    setTodos([...todos, todo]);
    toggleModal();
  }

  const onCheck = (id: number) => {
    const newState = todos.map((todo) => {
      if (todo.id === id) {
        return {
          ...todo,
          status: todo.status === 1 ? 0 : 1,
        };
      }

      return todo;
    });

    setTodos(newState);
  };

  function onDelete(id: number) {
    setTodos(todos.filter((todo) => todo.id !== id));
  }

  function onEdit(id: number) {
    const editTodo = todos.find((todo) => todo.id === id);
    if (editTodo) {
      setEdit(editTodo);
    }

    toggleModal();
  }

  function toggleModal() {
    if (modal) {
      setEdit(undefined);
    }

    setModal(!modal);
  }

  return (
    <div className={styles.container}>
      <Sidebar />
      <FAB onClick={toggleModal} />
      {modal && (
        <Modal onClose={toggleModal} onSave={onSave} initialData={edit} />
      )}
      <TaskArea
        todos={todos}
        onCheck={onCheck}
        onDelete={onDelete}
        onEdit={onEdit}
      />
    </div>
  );
}

.container {
  display: flex;
  flex-direction: row;
}

Go to your terminal and run the start script:

yarn start
#or
npm script

This is what we have from the previous post (with many improvements).

SQLite

It's time to create and connect to an SQLite database and create the CRUD for the TODOs. At this point I need to explain a little bit about Electron process, in Electron we have two kinds of process, the main process and the renderer process.

• Main process: It's the entry point of every Electron application, controlling the life cycle, native elements, spawn new renderer process, and more. We have full Nodejs API. Is like the "backend" part of our project.
• Renderer process: This is the UI part; we can think about it like this is a "frontend" part of your project. We don't have access to full Nodejs APIs, like file systems, DB connections, or something like that.

So, who we can communicate between this process? With IPC! Electron use inter-process communication to send and receive serialized JSON between the main and renderer processes.

In 2021 I posted the "Awesome React Native UI Kits for 2021" and this is one of the most popular posts in this blog until today, and it's time to see what news we have in 2023 for UI in React Native!

RNUI

RNUI is a component library and toolset for React Native, with beautiful components out-of-the-box, accessibility support and much more!

Shoutem UI

Shoutem UI is part of Shoutem, a platform to create, publish and manage React Native apps.
We have a lot of components, theme support, and ready-to-use animations!

Magnus UI

This one is not exactly a UI Kit, but a UI Framework. If you are familiar with frameworks like Tailwind CSS or Bootstrap you will love it!
With atomic design methodology, won icon system, theme support and a lot of components, we can create yourself design system using the Magnus UI!