DEV Community: LFXA

Creating a Page Graph with Firebase Studio

LFXA — Sun, 13 Apr 2025 20:48:59 +0000

In my search for productivity tools, I came across the Additor extension a while ago — a handy solution for organizing notes. But what really caught my attention was the page graph visualization (very similar to what Obsidian offers). It wasn’t just nice — it was useful. A dynamic mental map of how content connects.

That idea stuck with me. And one day I thought: why not build my own page graph?

From a Vague Idea to a Real Project

With that idea in mind, I decided to try out Firebase Studio, a tool that integrates AI to support web development. I wasn’t exactly sure how to phrase what I wanted, so I typed something like:

"I’d like to create an interactive page graph, kind of like Obsidian’s."

The AI (in this case, Gemini) replied:

"I can’t create something exactly like Obsidian’s, but I can show you how to build something similar using the vis.js library..."

And that’s when everything started to fall into place.

AI as a Creative Partner

Tools like Firebase Studio (and others like Gemini, Copilot, ChatGPT) have really changed the game. They speed up development, unlock ideas, and show paths we might not have considered on our own. In my case, they introduced me to vis.js, a visualization library that turned out to be the perfect fit for building an interactive page graph inside my Vue app.

But here’s the thing: AI does not replace a developer’s critical thinking.

It can suggest libraries, generate boilerplate code, even spin up a working example. But understanding why a structure makes sense, adapting it to your context, and handling the nuances of your system — that’s still on us. At the end of the day, AI is a great assistant, but you’re still the architect.

How Did It Turn Out?

I used vis.js to create an interactive graph of blog posts, connecting tags and content as nodes and edges in a visual map. The structure starts with a few fixed nodes — like “programming,” “frontend,” “personal” — and the remaining nodes are added dynamically based on the tags in each post.

The result is a visual map of content creation: easy to explore and surprisingly beautiful to look at. I built it with Vue, added light/dark theme support, translations via Vue I18n, and a few reactive config options.

You can check it out here: https://lfxa.vercel.app/en-US/graph

Final Thoughts

This project was the result of curiosity + inspiration + modern tools. It’s proof that, with a little push from AI, you can turn a vague idea into something functional — as long as you’re willing to think, adapt, and build it yourself.

If you’re also into visualizations, productivity, or just looking to bring an idea to life, here’s my advice: start simple, play with AI tools, but never stop thinking like a problem solver.

Because at the end of the day, you’re the one who turns suggestions into solutions.

Trust in the Lord with all your heart and lean not on your own understanding. Proverbs 3:5

Criando um Page Graph com Firebase Studio

LFXA — Sun, 13 Apr 2025 20:29:46 +0000

Na minha busca por ferramentas de produtividade, me deparei há um tempo com a extensão Additor — uma solução para guardar anotações de forma organizada. O que me fisgou de verdade, porém, foi a visualização page graph (muito similar ao Obsidian). Aquilo era mais que bonito: era útil. Um mapa mental dinâmico das conexões entre conteúdos.

Aquilo ficou comigo. E um dia, pensei: por que não criar meu próprio page graph?

De uma ideia vaga para um projeto real

Com a ideia na cabeça, fui experimentar o Firebase Studio, uma ferramenta que integra inteligência artificial para apoiar o desenvolvimento web. Sem saber exatamente o que pedir, escrevi algo como:

"Gostaria de criar um page graph interativo de páginas, tipo o do Obsidian."

A IA (no caso, o Gemini) respondeu:

"Não consigo criar exatamente como o do Obsidian, mas posso te mostrar como fazer algo semelhante usando a biblioteca vis.js..."

E foi aí que as peças começaram a se encaixar.

A IA como parceira de criação

Ferramentas como o Firebase Studio (e outras como Gemini, Copilot, ChatGPT) mudaram bastante o jogo. Elas aceleram o desenvolvimento, desbloqueiam ideias, mostram caminhos que talvez a gente não pensasse na hora. No meu caso, me apresentaram o vis.js, uma biblioteca de visualização que foi a ferramenta perfeita pra montar um page graph interativo dentro da minha aplicação Vue.

Mas é importante dizer: a IA não substitui o pensamento crítico de um desenvolvedor.

Ela pode sugerir bibliotecas, gerar código boilerplate, até montar um exemplo funcional. Mas entender o porquê de uma estrutura, adaptar o código ao seu contexto, lidar com nuances do seu sistema — isso ainda é tarefa nossa. No fim, a IA é uma excelente assistente, mas você continua sendo o arquiteto.

Como ficou a página?

Usei o vis.js para criar uma visualização interativa dos posts do blog, conectando tags e conteúdos como nós e arestas num mapa visual. A estrutura começa com alguns nós fixos — como “programação”, “frontend”, “pessoal” — e os outros nós são inseridos dinamicamente com base nas tags associadas.

O resultado é um mapa visual da produção de conteúdo, fácil de explorar e até bonito de ver. Usei Vue, com suporte a tema escuro/claro, tradução via Vue I18n e algumas configurações reativas.

veja o exemplo aqui: https://lfxa.vercel.app/pt-BR/graph

Conclusão

Esse projeto foi a soma de curiosidade + inspiração + ferramentas modernas. Foi a prova de que, com um empurrão da IA, dá pra transformar ideias vagas em algo funcional — desde que você esteja disposto a pensar, adaptar e construir por conta própria.

Se você também se interessa por visualizações, produtividade ou simplesmente quer tirar uma ideia do papel, recomendo: comece simples, experimente com IA, mas nunca deixe de pensar como um resolvedor de problemas. Porque no fim das contas, você é quem transforma sugestões em soluções.

Confie no Senhor de todo o coração e não se apoie no seu próprio entendimento. Provérbios 3:5

Explorando a API do DEV.to para construir um Blog

LFXA — Tue, 12 Mar 2024 19:16:00 +0000

Olá, pessoal! Hoje vou compartilhar com vocês como montei uma página de blog utilizando a API do Dev.to. Esta é uma ótima forma de expandir o alcance do seu conteúdo. Além disso escrevo o mesmo post tanto em português quanto em inglês para alcançar mais pessoas e com disso existe um desafio de implementar no blog a localização para que o mesmo post funcione tanto em uma lingua quanto em outra.

Antes de falar sobre a utilização da api quero deixar três referências que me ajudaram a montar minha página de blog. Pensando na ideia de que nada se cria, apenas se combina, peguei como inspiração dois temas de blog para o Nuxt 3 e um post sobre como criar skeleton loader com tailwind CSS.

O Alpine tem um visual de posts agradável, destacando sempre o mais recente, enquanto o Nuxt Starter Blog tem uma maneira simples e eficaz de lidar com a paginação de muitos posts.

nuxt-themes / alpine

The minimalist blog theme, powered by Nuxt & Markdown.

Alpine

The minimalist blog theme, powered by Nuxt.

Features

Start from a profile page, scale to a complete blog!
An open source blog theme powered by Nuxt Content, editable from Nuxt Studio.
Write pages in Markdown and Vue components with the MDC syntax.
Use 30+ built-in components in your Markdown pages.

Quick Start

npx nuxi@latest init -t themes/alpine

Contributing 🙏

Clone this repository
Install dependencies using pnpm install
Run pnpm prepare to generate type stubs.
Use pnpm dev to start playground in development mode.

License

MIT

View on GitHub

narasimhajupally / tailwind-nuxtjs-starter-blog

This is a Nuxt.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Tailwind Nextjs Starter Blog (work in progress)

Inspired by tailwind-nextjs-starter-blog

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

View on GitHub

Gostei da ideia de juntar os dois. Assim, pude criar uma experiência única que combina o visual elegante do Alpine com a praticidade de navegação do Nuxt Starter Blog.

Skeleton Loader using Vue & Tailwind

Giannis Koutsaftakis ・ Jan 6 '23

#webdev #vue #ux #javascript

Thanks @kouts

O que você vai precisar:

A API do Dev.to, que facilita a obtenção de posts e tags para o seu blog.
Ferramentas como Nuxt.js e Vue-i18n para lidar com a localização do site e alternar entre os posts em diferentes idiomas.
Conhecimento básico de HTML, CSS e JavaScript para manipular os dados retornados pela API e criar a estrutura da sua página de blog.

Passo a passo:

Obtenha os posts e tags da API do Dev.to:

Utilizei a API para recuperar os posts escritos por você e as tags associadas a cada post. Usei meu nome de usuário como parâmetro de consulta para essa chamada, juntamente com o estado "all", garantindo que a resposta retorne no máximo 1000 posts com as tags associadas, em vez dos 30 padrão. (espero escrever pelo menos 500 posts 😅)

    const { data: posts, pending } = await useFetch(
        "https://dev.to/api/articles?username=lfxa&state=all");

Trabalhe com a localização do site e manipule os dados retornados pela API:

Agora vem a parte interessante: para tornar isso funcional, é necessário ter o post disponível tanto em inglês quanto em português no dev.to. Para determinar se o post está em uma das línguas, utilizo o campo "canonical_url" com a localização na URL (por exemplo: https://lfxa.vercel.app/en-US/blog?to=um-portfolio-de-um-engenheiro-de-software-162o,a-portfolio-of-a-software-engineer-3i47). Este campo indica a URL de onde o post foi originalmente publicado e é redirecionado para o meu site. Aplico um filtro para exibir apenas os posts na localização desejada.

    const route = useRoute();
    const { locale } = useI18n();

    const filteredBlogPosts = computed(() => {
      return props.posts
        ?.filter((post) => {
            // localização na url
          const postLang = post.canonical_url.split("/")[3];      
          const isSameLanguage = postLang === locale.value;

          //filtrar tag e localização
          const hasTagQuery = route.query.tag !== undefined;
          return isSameLanguage &&
               (!hasTagQuery || post.tag_list.includes(route.query.tag));
        })
        // paginação
        .slice(
          props.postPerPage * (currentPage.value - 1),
          currentPage.value * props.postPerPage,
        );
    });

Como o post foi originalmente publicado no dev.to, faço um redirecionamento caso alguém clique no link que leva diretamente ao meu site. (precisa ser melhorado caso adicione mais localizações ao site 😉).

    // redirecionar para o post em determinada localização
    if (route.query.to !== undefined) {
      const toPost = route.query.to.split(",");
      const index = locale.value === "pt-BR" ? 0 : 1;
      await navigateTo(`/blog/${toPost[index]}`);
    }

Filtrei as tags para que apareçam em sua determinada localização:

    const tags = computed(() => {
      const tagCounts = {};
      props.posts?.forEach((post) => {
        const lang = post.canonical_url.split("/")[3];
        post.tag_list.forEach((tag) => {
          const key = tag + ":" + lang;
          if (tagCounts[key]) {
            tagCounts[key]++;
          } else {
            tagCounts[key] = 1;
          }
        });
      });

      const output = [];
      for (const tagLang in tagCounts) {
        const key = tagLang.split(":");
        output.push({ name: key[0], quantity: tagCounts[tagLang], lang: key[1] });
      }
      output.sort((a, b) => a.name.localeCompare(b.name));
      return output;
    });

e adicionei também um filtro para as tags que são selecionadas e se tornam parâmetros de consulta:

    // v-if
    tag.lang === $i18n.locale;

    // nuxtLink to
    route.fullPath.includes(tag.name) ? 'blog' : 'blog?tag=' + tag.name

Crie a estrutura da página de post blog:

Para obter o conteúdo do post, é necessário fazer uma consulta à API específica para aquele determinado post. Utilizei o slug do post juntamente com o meu nome de usuário como parâmetros de consulta na API. O conteúdo do post é fornecido no campo "body_html", mantendo as classes CSS do site do dev.to. Para garantir uma visualização adequada do post, copiei parte do CSS do site que faz sentido. Recomendo evitar o uso da diretiva v-html, pois é sensível a ataques XSS (Cross-Site Scripting). (Espero que o dev.to não transmita scripts maliciosos que possam ser executados nos sites dos usuários).

       const { data: post, pending } = await useFetch(
      "https://dev.to/api/articles/lfxa/" + slug,
    );

Além disso, caso haja uma alteração de idioma na página, faço uma nova chamada para o mesmo post na outra língua:

    onBeforeRouteLeave(async (to, from, next) => {
      if (
        post.value &&
        to.fullPath.split("/").pop() === from.fullPath.split("/").pop()
      ) {
        const last = post.value.canonical_url.split("/").pop();
        const toPost = last.replace("blog?to=", "").split(",");
        const index = locale.value === "pt-BR" ? 0 : 1;
        await next(`/${locale.value}/blog/${toPost[index]}`);
      }
      next();
    });

Caso seja do seu interesse, pode ver o código fonte no github aqui.

Conclusão:

Compartilhar o que sabemos é essencial para tornar o aprendizado mais acessível e promover o crescimento de outros desenvolvedores. Além disso, ao compartilhar conhecimento, fortalecemos nossas próprias habilidades, vemos o que pode ser melhorado e contribuímos para o avanço da comunidade de desenvolvimento de software em geral.

Assim brilhe a luz de vocês diante dos homens, para que vejam as suas boas obras e glorifiquem ao Pai de vocês, que está nos céus. Mateus 5:16

Exploring the DEV.to API to Build a Blog

LFXA — Tue, 12 Mar 2024 19:15:00 +0000

Hello, folks! Today I'm going to share with you how I set up a blog page using the Dev.to API. This is a great way to expand the reach of your content. Additionally, I write the same post in both Portuguese and English to reach more people, and with that, there's a challenge of implementing localization on the blog so that the same post works in both languages.

Before discussing the API usage, I want to mention three references that helped me set up my blog page. Keeping in mind the concept that nothing is created, only combined, I drew inspiration from two blog themes for Nuxt 3 and a post on creating a skeleton loader with Tailwind CSS.

Alpine has a pleasant post layout, always highlighting the most recent one, while Nuxt Starter Blog provides a simple and effective way to handle pagination for numerous posts.

nuxt-themes / alpine

The minimalist blog theme, powered by Nuxt & Markdown.

Alpine

The minimalist blog theme, powered by Nuxt.

Features

Start from a profile page, scale to a complete blog!
An open source blog theme powered by Nuxt Content, editable from Nuxt Studio.
Write pages in Markdown and Vue components with the MDC syntax.
Use 30+ built-in components in your Markdown pages.

Quick Start

npx nuxi@latest init -t themes/alpine

Contributing 🙏

Clone this repository
Install dependencies using pnpm install
Run pnpm prepare to generate type stubs.
Use pnpm dev to start playground in development mode.

License

MIT

View on GitHub

narasimhajupally / tailwind-nuxtjs-starter-blog

This is a Nuxt.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Tailwind Nextjs Starter Blog (work in progress)

Inspired by tailwind-nextjs-starter-blog

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# npm
npm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

View on GitHub

I liked the idea of combining the two. Thus, I could create a unique experience that combines the elegant look of Alpine with the navigational ease of Nuxt Starter Blog.

Skeleton Loader using Vue & Tailwind

Giannis Koutsaftakis ・ Jan 6 '23

#webdev #vue #ux #javascript

Thanks @kouts

What you'll need:

The Dev.to API, which facilitates fetching posts and tags for your blog.
Tools like Nuxt.js and Vue-i18n to handle site localization and switch between posts in different languages.
Basic knowledge of HTML, CSS, and JavaScript to manipulate the data returned by the API and create the structure of your blog page.

Step by step:

Fetch posts and tags from the Dev.to API:

I used the API to retrieve posts written by you and the tags associated with each post. I used my username as a query parameter for this call, along with the state "all", ensuring that the response returns a maximum of 1000 posts with associated tags, instead of the default 30. (I hope to write at least 500 posts 😅)

     const { data: posts, pending } = await useLazyFetch(
        "https://dev.to/api/articles?username=lfxa&state=all");

Work with site localization and manipulate the data returned by the API:

Now comes the interesting part: to make this functional, the post needs to be available in both English and Portuguese on dev.to. To determine if the post is in one of the languages, I use the "canonical_url" field with the location in the URL (e.g., https://lfxa.vercel.app/en-US/blog?to=um-portfolio-de-um-engenheiro-de-software-162o,a-portfolio-of-a-software-engineer-3i47). This field indicates the URL where the post was originally published and is redirected to my site. I apply a filter to display only posts in the desired location.

   const route = useRoute();
    const { locale } = useI18n();

    const filteredBlogPosts = computed(() => {
      return props.posts
        ?.filter((post) => {
            // location in url
          const postLang = post.canonical_url.split("/")[3];      
          const isSameLanguage = postLang === locale.value;

          //filter tag and location
          const hasTagQuery = route.query.tag !== undefined;
          return isSameLanguage &&
               (!hasTagQuery || post.tag_list.includes(route.query.tag));
        })
        // pagination
        .slice(
          props.postPerPage * (currentPage.value - 1),
          currentPage.value * props.postPerPage,
        );
    });

As the post was originally published on dev.to, I redirect if someone clicks the link that leads directly to my site. (needs improvement if more site locations are added 😉).

    // redirect to post in certain location
    if (route.query.to !== undefined) {
      const toPost = route.query.to.split(",");
      const index = locale.value === "pt-BR" ? 0 : 1;
      await navigateTo(`/blog/${toPost[index]}`);
    }

I filtered the tags to show them in their respective location:

    const tags = computed(() => {
      const tagCounts = {};
      props.posts?.forEach((post) => {
        const lang = post.canonical_url.split("/")[3];
        post.tag_list.forEach((tag) => {
          const key = tag + ":" + lang;
          if (tagCounts[key]) {
            tagCounts[key]++;
          } else {
            tagCounts[key] = 1;
          }
        });
      });

      const output = [];
      for (const tagLang in tagCounts) {
        const key = tagLang.split(":");
        output.push({ name: key[0], quantity: tagCounts[tagLang], lang: key[1] });
      }
      output.sort((a, b) => a.name.localeCompare(b.name));
      return output;
    });

and I also added a filter for tags that are selected and become query parameters:

    // v-if
    tag.lang === $i18n.locale;

    // nuxtLink to
    route.fullPath.includes(tag.name) ? 'blog' : 'blog?tag=' + tag.name

Create the structure of the blog post page:

To get the post content, it's necessary to query the API specifically for that particular post. I used the post's slug along with my username as query parameters in the API. The post content is provided in the "body_html" field, maintaining the CSS classes from the dev.to site. To ensure proper post viewing, I copied part of the CSS from the site that makes sense. I recommend avoiding the use of the v-html directive as it is sensitive to XSS attacks (Cross-Site Scripting). (I hope dev.to doesn't transmit malicious scripts that can be executed on users' sites).

       const { data: post, pending } = await useFetch(
      "https://dev.to/api/articles/lfxa/" + slug,
    );

Additionally, if there's a language change on the page, I make a new call for the same post in the other language:

    onBeforeRouteLeave(async (to, from, next) => {
      if (
        post.value &&
        to.fullPath.split("/").pop() === from.fullPath.split("/").pop()
      ) {
        const last = post.value.canonical_url.split("/").pop();
        const toPost = last.replace("blog?to=", "").split(",");
        const index = locale.value === "pt-BR" ? 0 : 1;
        await next(`/${locale.value}/blog/${toPost[index]}`);
      }
      next();
    });

If you're interested, you can see the source code on GitHub here.

Conclusion:

Sharing what we know is essential to make learning more accessible and promote the growth of other developers. Additionally, by sharing knowledge, we strengthen our own skills, see what can be improved, and contribute to the advancement of the software development community as a whole.

In the same way, let your light shine before others, that they may see your good deeds and glorify your Father in heaven. Matthew 5:16

Um portfolio de um engenheiro de software

LFXA — Sun, 10 Mar 2024 17:19:39 +0000

À medida que mergulho na jornada da programação e da engenharia de software, descobri a importância de ter um espaço digital que não apenas apresente meu trabalho, mas também reflita minha criatividade e vontade de fazer. Foi assim que surgiu meu site portfólio.

O Que é Este Site Portfólio?

Meu site portfólio é mais do que uma simples coleção de projetos e habilidades técnicas. É um reflexo do meu compromisso com a qualidade, a inovação e a comunicação através da tecnologia. Utilizando ferramentas como Nuxt, Vue, Vuex e Tailwind.CSS, este site foi criado para ser mais do que apenas um currículo online — é uma expressão criativa.

(Seu portfólio é um dos únicos sites que você construirá que é uma expressão criativa completa de você mesmo, sem restrições) - @aspittel

Como Foi Construído?

Utilizei o framework Nuxt.js, que é construído sobre o Vue.js, para desenvolver o front-end do meu site. O Nuxt.js é uma estrutura Vue.js que simplifica muito o processo de criação de aplicativos Vue universais. Ele fornece recursos como roteamento automático, pré-renderização, geração estática e integração fácil com bibliotecas e plugins. Com o Nuxt.js, pude organizar meu código de maneira modular e eficiente, aproveitando as capacidades do Vue.js para criar componentes reutilizáveis e interativos.

Para estilizar meu site e criar uma interface de usuário visualmente atraente e coesa, adotei o Tailwind CSS. É um framework CSS utilitário que fornece uma abordagem de design baseada em classes, permitindo criar estilos personalizados de forma rápida e eficiente.

Para tornar meu site acessível para um público internacional e oferecer suporte a vários idiomas, integrei o Vue i18n. É uma biblioteca de internacionalização para aplicativos Vue.js, que permite gerenciar facilmente a tradução de textos e mensagens em diferentes idiomas.

Construí meu site com dedicação e paciência. Cada linha de código foi uma oportunidade de aprender e crescer, mesmo nos momentos em que a procrastinação tentava me distrair, Pude colocar em pratica algumas coisa que me inspiraram como o codepen abaixo.

com algumas linhas de css e html:

.expand {
  display: inline-flex;
  overflow: hidden;
  letter-spacing: -3em;
  transition: letter-spacing 1s;
}

.center:hover .expand {
  letter-spacing: 0.2px;
}

.center:hover .l-expand {
  transition-delay: 0s;
}

.center:hover .fx-expand {
  transition-delay: 0.5s;
}

.center:hover .a-expand {
  transition-delay: 1s;
}

L<span class="expand l-expand">ucas</span>
<span> F<span class="expand fx-expand">eli</span>X</span>
<span> A<span class="expand a-expand">quino</span></span>

O resultado foi esse:

Por Que Este Site Portfólio Existe?

Este site portfólio não é apenas uma apresentação pessoal, mas também uma declaração de presença na internet. É uma maneira de deixar uma marca positiva, de compartilhar meu conhecimento e serve tanto para novos desenvolvedores no futuro quanto para mim mesmo, quando olhar para trás e refletir sobre minha jornada de aprendizado. Você pode explorar meu site portfólio em aqui e pode ver o código fonte no github. Esteja à vontade para navegar, interagir e fornecer feedback.

O temor do Senhor é o princípio do conhecimento, mas os tolos desprezam a sabedoria e a disciplina.. Provérbios 1:7

Aprendizado Continuo e Engenharia de software

LFXA — Sun, 03 Mar 2024 15:53:06 +0000

O mundo da tecnologia é vasto e em constante evolução, exigindo dos desenvolvedores uma jornada contínua de aprendizado e adaptação. A busca por se tornar um desenvolvedor completo é uma jornada desafiadora, demandando dedicação e tempo. Em um cenário onde novas tecnologias, linguagens e frameworks surgem constantemente, a pergunta inevitável é: é possível aprender tudo?

A resposta, ao menos na minha perspectiva, é que não podemos abraçar todas as novidades com profundidade igual. No entanto, isso não significa desistir do aprendizado, mas sim adotar uma abordagem mais generalista, mantendo um know-how sólido e focando em se tornar um especialista em áreas específicas.

O Alicerce da Programação

No universo da programação, é fundamental além de dominar os conceitos básicos como if, else, loops e classes, mergulhar em aspectos mais avançados:

Aprenda de Verdade uma Linguagem de Programação: Dominar uma linguagem vai além do básico, é compreender suas nuances e aplicar as melhores práticas. Isso envolve a familiarização com estruturas de dados avançadas, técnicas de otimização de código e compreensão dos design patterns relevantes. Além disso, a prática constante e a participação em projetos reais são essenciais para consolidar o conhecimento e desenvolver habilidades de resolução de problemas. Isso permite que os engenheiros de software desenvolvam soluções eficientes e robustas para os desafios enfrentados no desenvolvimento de software moderno.
Paradigmas de Programação: Explore diferentes abordagens para resolver problemas, entendendo os paradigmas existentes.

3.Design Patterns: Adote padrões de design para criar soluções robustas e escaláveis.

Princípios SOLID: Desenvolva código flexível e de fácil manutenção, aplicando os princípios SOLID.
Testes: Garanta a qualidade do código por meio de testes unitários e integração.

O Mundo do Front-end

No universo front-end, além de entender as tags, cores e frameworks, destaque-se pela experiência do usuário:

HTML + CSS: Fundamentos essenciais para estruturar e estilizar páginas web.
JavaScript: Domine a linguagem para criar interatividade e dinamismo nas aplicações.
Grid CSS: Explore a poderosa ferramenta para layouts responsivos.
Frameworks CSS: Utilize frameworks para agilizar o desenvolvimento e manter a consistência visual.
Frameworks JS: Conheça e aplique frameworks JavaScript para acelerar o desenvolvimento de projetos complexos.

Explorando o Mundo dos Dados

Quando tratamos de bancos de dados, vá além do básico de select, where, update e delete, priorizando a eficiência no acesso aos dados:

Criar, Alterar e Excluir: Domine as operações fundamentais para manipulação de dados.
Administrar Permissões e Manipulação de Dados: Garanta a segurança e integridade dos dados no banco de dados e tenha estratégias de backup e recuperação de dados. Dominar esses aspectos da administração de banco de dados SQL não só protege a confidencialidade e a integridade dos dados, mas também promove a confiança dos usuários e clientes na aplicação.
Funções de Agregação: Explore as funcionalidades para análise e sumarização de dados.
Triggers e Procedure: Automatize tarefas e mantenha a consistência dos dados.
NoSQL: Entenda e aplique bancos de dados NoSQL quando apropriado.
Business Intelligence e Data Science: Enquanto o BI se concentra em analisar dados históricos para auxiliar na tomada de decisões empresariais, a Data Science vai além, utilizando técnicas avançadas de análise e modelagem de dados para prever tendências futuras e identificar padrões ocultos. Ferramentas como Power BI, Tableau e Python são amplamente utilizadas nesse contexto, oferecendo recursos poderosos para visualização de dados, mineração de dados e machine learning. Dominar essas habilidades não só permite às organizações tomar decisões mais informadas e estratégicas, mas também impulsiona a inovação e a competitividade em um mercado cada vez mais orientado por dados.

Diante da vastidão de ferramentas na área da tecnologia, meu objetivo é compartilhar conhecimento em cada uma dessas áreas. Este é um desafio pessoal de crescimento profissional. Admito que em algumas áreas possuo apenas conhecimento básico, enquanto em outras sou mais especializado. A razão para não afirmar que sei tudo é simples: para permanecer em constante aprendizado. Na área da tecnologia, há sempre algo novo a descobrir, mesmo em linguagens consideradas antigas. Esteja sempre aberto ao aprendizado, pois é nesse espírito que o verdadeiro crescimento profissional acontece.

Quem pensa conhecer alguma coisa, ainda não conhece como deveria.
1 Coríntios 8:2

A portfolio of a software engineer

LFXA — Wed, 21 Feb 2024 20:59:15 +0000

As I delve into the journey of programming and software engineering, I have discovered the importance of having a digital space that not only showcases my work but also reflects my creativity and drive to create. That’s how my portfolio website came into existence.

What is This Portfolio Website?

My portfolio website is more than just a simple collection of projects and technical skills. It is a reflection of my commitment to quality, innovation, and communication through technology. Utilizing tools like Nuxt, Vue, Vuex, and Tailwind.CSS, this website was created to be more than just an online resume — it’s a creative expression.

(Your portfolio is one of the only sites you’ll build that’s a complete creative expression of yourself, with no constraints) - @aspittel

How Was It Built?

I used the Nuxt.js framework, built on Vue.js, to develop the front-end of my site. Nuxt.js is a Vue.js framework that greatly simplifies the process of building universal Vue apps. It provides features like automatic routing, pre-rendering, static site generation, and easy integration with libraries and plugins. With Nuxt.js, I could organize my code in a modular and efficient way, leveraging Vue.js capabilities to create reusable and interactive components.

To style my site and create a visually appealing and cohesive user interface, I adopted Tailwind CSS. It’s a utility-first CSS framework that provides a class-based design approach, allowing for quick and efficient custom styling.

To make my site accessible to an international audience and support multiple languages, I integrated Vue i18n. It’s an internationalization library for Vue.js applications, which allows for easy management of text translation and messaging in different languages.

I built my site with dedication and patience. Every line of code was an opportunity to learn and grow, even in moments when procrastination tried to distract me. I was able to put into practice some things that inspired me, like the codepen below.

with just a few lines of CSS and HTML:

.expand {
  display: inline-flex;
  overflow: hidden;
  letter-spacing: -3em;
  transition: letter-spacing 1s;
}

.center:hover .expand {
  letter-spacing: 0.2px;
}

.center:hover .l-expand {
  transition-delay: 0s;
}

.center:hover .fx-expand {
  transition-delay: 0.5s;
}

.center:hover .a-expand {
  transition-delay: 1s;
}

L<span class="expand l-expand">ucas</span>
<span> F<span class="expand fx-expand">eli</span>X</span>
<span> A<span class="expand a-expand">quino</span></span>

The result was this:

Why Does This Portfolio Website Exist?

This portfolio website is not just a personal presentation but also a statement of presence on the internet. It’s a way to leave a positive mark, to share my knowledge, and it serves both for future developers and for myself when I look back and reflect on my learning journey. You can explore my portfolio website here and view the source code on GitHub. Feel free to browse, interact, and provide feedback.

The fear of the LORD is the beginning of knowledge: but fools despise wisdom and instruction. Proverbs 1:7

Continuous Learning and Software Engineering

LFXA — Mon, 19 Feb 2024 10:49:50 +0000

The world of technology is vast and constantly evolving, demanding developers to embark on a continuous journey of learning and adaptation. The quest to become a complete developer is a challenging one, requiring dedication and time. In a scenario where new technologies, languages, and frameworks emerge constantly, the inevitable question arises: is it possible to learn everything?

The answer, at least from my perspective, is that we cannot embrace all the novelties with equal depth. However, this does not mean giving up on learning but rather adopting a more generalist approach, maintaining a solid know-how and focusing on becoming an expert in specific areas.

The Foundation of Programming

In the programming universe, it’s essential not only to master basic concepts like if, else, loops, and classes but also to delve into more advanced aspects:

Truly Learn a Programming Language: Mastering a language goes beyond the basics; it involves understanding its nuances and applying best practices. This includes familiarizing oneself with advanced data structures, code optimization techniques, and understanding relevant design patterns. Moreover, constant practice and participation in real projects are essential to consolidate knowledge and develop problem-solving skills. This enables software engineers to develop efficient and robust solutions for the challenges faced in modern software development.
Programming Paradigms: Explore different approaches to problem-solving by understanding existing paradigms.
Design Patterns: Adopt design patterns to create robust and scalable solutions.
SOLID Principles: Develop flexible and maintainable code by applying SOLID principles.
Testing: Ensure code quality through unit and integration testing.

The Front-end Display

In the front-end universe, besides understanding tags, colors, and frameworks, stand out for user experience:

HTML + CSS: Essential fundamentals for structuring and styling web pages.
JavaScript: Master the language to create interactivity and dynamism in applications.
CSS Grid: Explore the powerful tool for responsive layouts.
CSS Frameworks: Utilize frameworks to expedite development and maintain visual consistency.
JS Frameworks: Familiarize and apply JavaScript frameworks to accelerate complex project development.

Exploring the World of Data

When dealing with databases, go beyond the basics of select, where, update, and delete, prioritizing efficiency in data access:

Create, Alter, and Delete: Master the fundamental operations for data manipulation.
Manage Permissions and Data Manipulation: Ensure data security and integrity in the database and have backup and data recovery strategies. Mastering these aspects of SQL database administration not only protects data confidentiality and integrity but also promotes user and client trust in the application.
Aggregation Functions: Explore functionalities for data analysis and summarization.
Triggers and Procedures: Automate tasks and maintain data consistency.
NoSQL: Understand and apply NoSQL databases when appropriate.
Business Intelligence and Data Science: While BI focuses on analyzing historical data to aid in business decision-making, Data Science goes further, using advanced data analysis and modeling techniques to predict future trends and identify hidden patterns. Tools like Power BI, Tableau, and Python are widely used in this context, offering powerful features for data visualization, data mining, and machine learning. Mastering these skills not only enables organizations to make more informed and strategic decisions but also drives innovation and competitiveness in an increasingly data-driven market.

Given the vast array of tools in the technology field, my goal is to share knowledge in each of these areas. This is a personal challenge for professional growth. I admit that I possess only basic knowledge in some areas, while I have more experience in others. The reason for not claiming to know everything is simple: to remain in constant learning. In the field of technology, there is always something new to discover, even in languages considered old. Always be open to learning, for it is in this spirit that true professional growth occurs.

And if any man think that he knoweth any thing, he knoweth nothing yet as he ought to know.
1 Corinthians 8:2