Forem: Raziel Rodrigues

June Celebrations - São João from Porto Portugal 🎆

Raziel Rodrigues — Wed, 25 Jun 2025 22:51:30 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

My inspiration for this project was the vibrant and traditional São João festival in Porto, Portugal. I wanted to create a digital experience that captured the essence of this unique celebration, perfectly aligning with the hackathon’s “June Celebrations” theme.

Demo

I developed an interactive website in React.js that simulates the atmosphere of São João do Porto. The website includes:

A fun game of "greeting with leeks".
The possibility of releasing hot air balloons with animations.
Informational modals about the history and traditions of the festival.

Você pode conferir a demo ao vivo aqui: https://june-celebration-challenge.vercel.app

Journey

The project was built using React.js with Vite for fast and efficient development. I opted for a single file structure (App.jsx) to keep things simple and focus on functionality. I learned how to integrate animations with Framer Motion and create an engaging user experience, combining interactivity with educational content. The deployment was configured for Vercel, ensuring easy access and scalability.

Publish to Dev.to Straight from Your Inbox 📖

Raziel Rodrigues — Sun, 08 Jun 2025 22:41:38 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

I created Dev.to Email Publisher, a handy tool that lets developers post articles to the Dev.to platform straight from their email inbox! Powered by Postmark’s inbound email feature and integrated with the Dev.to API, this project showcases a practical way to streamline content creation. It’s a simple yet reusable solution that can be adapted for other platforms or used as-is for Dev.to. My goal was to make publishing as easy as sending an email, saving time for busy developers who want to share their ideas quickly.

Demo

Clone the repostitory: Repostiory
Connect Dev.to: Add your Dev.to API key (found in Dev.to settings under “Extensions”).
Send Test Email: From your inbox, send to your email registered in postmark inbound:
Subject: Post: [Your Article Title]
Subject: Post: [Your Article Title (tags: webdev programming php)]
Body: Markdown content
Check Response: You’ll get a confirmation email from Postmark with an success or error of the publication.

How It Works

Compose Email: Write your article in Markdown format and send it to the app’s designated email address (provided after setup).
Postmark Processing: Postmark’s inbound webhook captures the email and parses its content.
Dev.to Publishing: The app formats the email content and uses the Dev.to API to publish the article.
Email Notification: Receive a confirmation email via Postmark with the publication status or any errors.

Code Repository

Explore the code: github.com/RazielRodrigues/postmark-challenge

Setup Instructions

To run locally, clone the repo and configure the .env file with:

SENDER_EMAIL: An email registered with your domain.
DEV_TO_TOKEN: Your Dev.to API key (get it from Dev.to Settings > Extensions).
POSTMARK_TOKEN: Your Postmark API key (available at Postmark Account > Tokens).

The README includes detailed setup steps.

How I Built It

Development Process

I kicked off by exploring Postmark’s inbound webhook and Dev.to’s API documentation. My approach was straightforward:

API Setup: Generated a Dev.to API key and configured Postmark’s webhook for inbound emails.
Backend: Built a Node.js server to handle email parsing, API requests, and user feedback.
Email Workflow: Parsed incoming emails to extract Markdown content and metadata, then sent them to Dev.to via its API.
Notifications: Used Postmark’s API to send confirmation emails to users.
Deployment: Deployed the app on Vercel for a smooth, scalable demo.

Tech Stack

Backend: Node.js
Deployment: Vercel
APIs: Dev.to API (publishing), Postmark Inbound Webhooks (email processing), Postmark API (notifications)
Email Client: Postmark for sending confirmations

Further improvement

Image Attachments: Add images attachments into the post using email attachments
Edit Tools: Ability to use the other tools for editing posts using the email

Experience

Working with Postmark was nice! Their clear documentation and intuitive setup let me build the core functionality in under two hours. The inbound webhook was easy to configure, and the API for sending emails was reliable. This project convinced me to explore Postmark for future email-driven apps—it’s fast, developer-friendly, and perfect for this kind of innovation.

Thanks for Participating!

This hackathon was a blast, and I’m thrilled to share my project. Thanks to Postmark for the awesome tools and to the Dev.to community for the inspiration!

InstaAnalyzer: An AI Instagram Analyst Powered by PHP, Neuron AI and Bright Data 📸

Raziel Rodrigues — Mon, 19 May 2025 21:32:20 +0000

This is a submission for the Bright Data AI Web Access Hackathon

Before start reading:

Create your account with this link in Bright Data Platform

What I Built
Demo
How I Used Bright Data's Infrastructure
Performance Improvements
Tech Stack
Main Features
Real world problem solves
Bonus: Tutorials
Conclusion
References
Repository

What I Built

Scrape. Analyze. Optimize. Let AI decode Instagram profiles for you.

Everyone wants to know info about Instagram profiles whether it's about yourself or someone else. With InstaAnalyzer you are able to get insights not only from the profile but also from the posts of the profile (posts analyses will work only if the profile is public) plus you can have insights about your profile across the web so we deliver to you research based in the search results from Google, which will help you to see your digital footprint.

It can give you a fast overview from the eye of a specialized AI Agent which was built for it using REAL TIME DATA. This means if the person totally rebuilds the profile you will be able to see it even if the changes were made one minute ago.

Of course you can also use other AIs for this such as ChatGPT or Perplexity, but the problem is that such data are not "well distilled" plus those LLMs do not have full access to data or scrape those data like Bright Data.

I have dedicated a topic in this article showing some Real World Use Cases for this application. You can check it afterwards, but in a nutshell:

This AI tool helps you understand profiles of people you're curious about, even if you're not on their friends list. It brings you insights in an easy and friendly way and sometimes can be just for fun to share with your friends or to use as a tool for your company to understand your customers.

To make this happen, I used some cool technologies, which I'll explain in this article. Most of the tools are free, and Bright Data even gives free credits to every user to test their product. That means you can try the code below on your own machine after signing up.

Demo

You can test this project live! Just type an Instagram username, and you'll get all the info formatted in a nice front-end. Plus, you can share it on your own Instagram like the Spotify Wrapper feature! This would help me grow the project and get more eyes on this article and also show the power of Bright Data Tools. I'd be super thankful!

> InstaAnalyzer Live Demo

Profile example

Posts example

Web example

API Demo

Here you can access the repository of the API from this code

> Repository

Node JS MCP Server

PHP MCP API

How I Used Bright Data's Infrastructure

MCP Servers usage

For this project, I have done a few things:

First I connected to the MCP Server from Bright Data using the Smithery SDK to get REAL TIME DATA from Instagram profiles.

Since some people are posting new things everyday or changing their Instagram, it is important to have new data every time we check the profile, and using Bright Data tools is perfect for that! Then I have used some tools from their MCP Server:

web_data_instagram_profiles (Quickly read structured Instagram profile data)
web_data_instagram_posts (Quickly read structured Instagram post data)
search_engine (Quickly read real time data from search engines)

So after I have sent this data to the LLM model using Neuron AI, a PHP framework to work with AI Agents, when I got all the data from the Instagram I started to process it, doing a deep analysis of the profile and the posts as well.

With that I was able to give information to the user about the profile that they are searching for. You can see more details on how the technical side works by looking at the System Design.

Performance Improvements

Here's what I'd like to do next:

Build a custom scraper with Bright Data for specific Instagram data
Improve the posts analysis since I am just checking the last five ones. Due to profiles which have a lot of posts, it needs a proper backend solution to not crash the LLM analysis
Add RAG search using Bright Data's Instagram dataset
Nowadays the AI response is on average 30s ~ 45s for non-cached responses and 15s ~ 25s for cached responses (when using REST API). This is one of the most critical points I am thinking to improve. Maybe I will add stream support in the future or other approaches like showing data in parts or other kinds of caching approaches, this is probably from the AI side which needs some seconds to give the proper analyze

Tech Stack

Here's what I used to build both projects:

Brightdata MCP Server
PHP and NodeJS for backend
ReactJS for frontend
NeuronAI for AI Agent
Mistral for LLM Model
Vercel for frontend deploy
Render for MCP Server deploy
Hostinger for PHP Server deploy
MySQL for database

Main Features

Profile analyzes and Posts analyzes with AI based in social frameworks and the behavior of the content provided by the instagram profile
Web Search analyzes comparing the results of your profile with other people which has similar username or content
PDF Report with everything so you can share or save the information you got
Individual information export by images which can be easily shared or posted in your social networks

Real world problem solves

Here's what this project can help solve real world problems:

Customer Insights for Businesses:
- Provides companies with detailed analytics about their Instagram customer profiles to inform marketing strategies.
Authentic Connections:
- Facilitates meaningful connections by matching people based on their preferences and interests.
Profile Optimization:
- Offers personalized recommendations to enhance user profiles for increased engagement.
External Perspective:
- Helps users understand how others perceive their Instagram profiles.
Content Alignment:
- Enables users to assess whether their posts align with their intended personal or brand image.
Accessible Insights:
- Delivers valuable profile analytics to all users, even those without an Instagram business account.
Make fun with your friends:
- Sharing your profile description on Instagram or other social media platforms just for fun.

Bonus: Tutorials

I have written two tutorials for you to be able to quickly test Bright Data Services.

Using Bright Data Smithery MCP Server on the website

I will cover in four steps how to test their MCP server on the Smithery platform and you will see how easy it is to work with their MCP Server

1 - Access Bright Data Smithery MCP Server and make your account on Smithery
- https://smithery.ai/server/@luminati-io/brightdata-mcp/api
- Create your user and profile

2 - Grab your token from Bright Data after making your registration
- https://brightdata.com/cp/setting/users
- Create a new user or use your existing one
- Set your API key configuration
- Grab it

3 - Connect to the MCP Server
- Click on tools
- Select one of them
- On the right side put your API Key From Bright Data
- Select your "profile" from Smithery
- Click on connect

4 - Use the MCP Server
- Put the required parameters
- Run the tool
- Get your Results

In those simple four steps you are already testing and using their powerful MCP Server on the Smithery platform. You can see more ways to connect or just access Bright Data Github where you can see a lot of examples on how to use the MCP Server using code.

Using Bright Data Smithery MCP Server SDK

If you want to use the SDK you can try it out in this way, it's straightforward and will work like a charm with node js

1 - run npm install @modelcontextprotocol/sdk @smithery/sdk
2 - Create a file called index.js and paste the code below
3 - then node ./index.js

import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js"
import { createSmitheryUrl } from "@smithery/sdk"

const config = {
    "apiToken": "string", // Mandatory, just use the previous API TOKEN generated for you
    "browserAuth": "string", // Optional
    "webUnlockerZone": "string" // Optional
}
const serverUrl = createSmitheryUrl("https://server.smithery.ai/@luminati-io/brightdata-mcp", { config, apiKey: "your-smithery-api-key"})

const transport = new StreamableHTTPClientTransport(serverUrl)

// Create MCP client
import { Client } from "@modelcontextprotocol/sdk/client/index.js"

const client = new Client({
    name: "Test client",
    version: "1.0.0"
})
await client.connect(transport)

// List available tools
const tools = await client.listTools()
console.log(`Available tools: ${tools.map(t => t.name).join(", ")}`)

// How to use the tool from the SDK
const result = await client.callTool(
{
    name: 'search_engine', arguments: { query: 'Bright Data documentation' , engine: 'google' }
}
)
console.log(result)

With those steps you will be able to access Bright Data MCP Servers and work with them using NodeJS. They also provide one with Python, you can take a look over here

Conclusion

Bright Data is an amazing platform! It lets you use your AI skills to create real-life projects that solve business problems. Their tech infrastructure is awesome, and everything just works.

I loved working with their tools and can't wait to keep using them. Their interface and setup are so easy and straightforward it'll definitely take your project to the next level!

You can use it as REST API or MCP Server. Since MCP server is a new technology, it's very cool seeing new stuff coming up and the power that this gives to us. I hope you enjoyed the article and it can be helpful for you to create your next amazing project using Bright Data.

Please comment below your thoughts about it and what you are thinking to build using all those Technologies :)

References

Repository

Bright Data MCP Server API

A new AI open source framework for PHP!

Raziel Rodrigues — Thu, 15 May 2025 11:21:12 +0000

Raziel Rodrigues

May 13 '25

Neuron AI: O Framework PHP de Inteligência Artificial 🐘

#php #braziliandevs #ai #opensource

Comments

6 min read

Neuron AI: O Framework PHP de Inteligência Artificial 🐘

Raziel Rodrigues — Tue, 13 May 2025 09:14:37 +0000

Neuron AI é um framework para lidar com IA usando PHP puro ou seus diversos frameworks como o Laravel ou Symfony. Neuron AI foi criado por Valerio Barbera https://www.linkedin.com/in/valeriobarbera/ da equipe do software inspector.dev, uma ferramenta de observabilidade PHP. Com este framework é possível trabalhar com AI de uma maneira muito flexível e prática usando PHP. Neste repositório, estou abordando os aspectos mais importantes do framework e do mundo da IA, onde é possível fazer tudo o que fazemos em outras linguagens de programação, como Node, Python ou Go, mas tudo usando o glorioso PHP em sua melhor forma.

Para isso, eu irei usar o PHP puro, pois assim acredito que conseguimos realizar os testes de forma mais simples e sem acoplamento de muitas coisas. Então será necessário que você tenha o PHP rodando na sua versão 8+ e o Composer para assim começarmos a trabalhar com o projeto. Outros requerimentos serão o Ollama para rodarmos o nosso LLM de forma local sem gastar dinheiro com serviços de nuvem (mas isso não te impede de usar uma outra API como o ChatGPT ou Claude).

Introdução

Cara, eu estou realmente muito empolgado escrevendo esse artigo porque eu sei como isso é importante para a comunidade do PHP. Sabendo que agora temos um framework que é tão flexível e desacoplado, eu consigo ver um futuro enorme para a nossa linguagem preferida e a forma como usamos ela para trabalhar com AI. É importante ressaltar que o PHP já possui alguns frameworks para trabalhar com AI como: LLPhant, PHP-ML, TensorFlow PHP e Rubix ML.

Mas eu realmente acho que o Neuron AI, dentro do que eu vi dos outros frameworks, sai na frente em questão de flexibilidade e pouca dependência. Portanto, é um novo projeto open source e eu convido vocês a irem ao GitHub dessa maravilha e já deixar uma estrela ou mesmo ajudar a contribuir. O que mais me faz acreditar nesse projeto é que foi algo criado por pessoas que já têm um histórico sólido e profissional com PHP e na comunidade open source. Segue o link do repositório Neuron AI: https://github.com/inspector-apm/neuron-ai

Então aqui nesse artigo eu vou criar com vocês uma mini aplicação de AI que vai contar piadas e vai retornar também o tipo da piada. Massa demais, né?

Posteriormente, irei escrever mais artigos explicando como funcionam os Agentes MCP, RAG, Vector Store, Chat e muito mais! Será um conteúdo denso, então eu pretendo escrever uma série de artigos sobre o tema.

Sem mais delongas, vamos começar a parte DIVERTIDA!

Sumário

Conceitos chave e instalação dos pacotes
Agentes de AI com PHP
Ferramentas e chamadas de funções
Saída de dados estruturadas

Conceitos chave e instalação

Basicamente, o Neuron AI funciona com Agentes. Essa é uma das classes principais que utilizamos para criar um agente de inteligência artificial. Então, após criar a sua classe e implementar o seu agente, é possível configurar ele e dar a ele uma "personalidade" e "funções", assim como damos um contexto quando criamos uma janela no ChatGPT. Mas, nesse caso, é você que define e deixa isso chumbado no código, abrindo a possibilidade de podermos criar diversos agentes para regras de negócio específicas.

Nesse caso, será necessário ter o Ollama rodando no seu computador. Para isso, eu te convido a ler esse primeiro artigo de minha autoria. Nesse artigo, eu ensino como instalar e usar o Ollama, que é praticamente o mesmo processo para usarmos com o NeuronAI:

Tutorial | Usando Deepseek no Visual Studio Code de graça 💸

https://dev.to/razielrodrigues/usando-deepseek-no-visual-studio-code-de-graca-2764

Após ter o Ollama instalado, será necessário rodar esse comando:

composer require inspector-apm/neuron-ai

Agente de AI

Vamos criar um agente de AI que vai ajudar a gente a fazer umas piadas, sabe? No estilo tiosão de churrasco. Crie agora um arquivo chamado AgenteComediante.php dentro de uma pasta src e copie e cole o seguinte código:

<?php

namespace src;

require_once __DIR__ . '/../vendor/autoload.php';

use NeuronAI\Agent;
use NeuronAI\SystemPrompt;
use NeuronAI\Providers\Ollama\Ollama;
use NeuronAI\Chat\Messages\UserMessage;
use NeuronAI\Providers\AIProviderInterface;

class AgenteComediante extends Agent
{
    public function provider(): AIProviderInterface
    {
        return new Ollama(
            url: 'http://localhost:11434/api/',
            model: 'qwen3:1.7b', # adicione aqui o modelo que baixou
        );
    }

    public function instructions(): string
    {
        return new SystemPrompt(
            background: [
                'Você deve agir como um comediante Brasileiro',
            ],
            steps: [
                'Você usa a linguagem Português Brasileiro',
            ],
            output: [
                'A sua piada tem um texto bem divertido para dar contexto'
            ]
        );
    }
}

$response = AgenteComediante::make()->chat(
    new UserMessage("Olá, me conte uma piada!")
);

var_dump($response->getContent());

Ferramentas ou chamada de funções

Após rodar o código, será possível ver o seu agente de AI agindo como um tiosão e fazendo uma piada que pode ser boa ou ruim hahaha. Isso vai depender de muitas coisas, mas principalmente do tanto de parâmetro que a sua AI tem. Caso ela tenha mais parâmetros, é possível que a piada saia mais engraçada.

Mas para resolver essa limitação, o Neuron Framework conta com uma feature muito boa que são as chamadas "Tools" ou também "Function Call". Isso é basicamente uma forma de pegar dados de outro lugar ou respostas e adicionar à sua AI, dando assim a ela mais "poderes" e possibilitando uma resposta mais inteligente e com um contexto maior. Então vamos adicionar um novo método na nossa classe. Copie e cole essas linhas de código:

protected function tools(): array
{
    return [
        Tool::make(
            'pegar_piadas',
            'Recuperar as piadas',
        )->setCallable(
            new BuscarPiada()
        )
    ];
}

E adicione isso no steps para garantir que vai usar a tool:

steps: [
    'Você usa a ferramenta disponível',
    'Você usa a linguagem Português Brasileiro'
],

Crie um novo arquivo chamado BuscarPiada.php, copie e cole, e não se esqueça de importar a nova classe dentro do agente:

<?php

namespace src;

use GuzzleHttp\Client;

require_once __DIR__ . '/../vendor/autoload.php';

class BuscarPiada
{
    protected Client $client;

    public function __construct()
    {
        $this->client = new Client([
            'base_uri' => 'https://official-joke-api.appspot.com',
            'headers' => [
                'accept' => 'application/json',
            ]
        ]);
    }

    public function __invoke()
    {
        $resposta = $this->client->get('/random_joke');

        if ($resposta->getStatusCode() !== 200) {
            return 'Error :(';
        }

        $resposta = json_decode($resposta->getBody()->getContents(), true);

        $piada = '';
        $piada .= 'tipo: ' . $resposta['type'] . PHP_EOL;
        $piada .= 'setup: ' . $resposta['setup'] . PHP_EOL;
        $piada .= 'punchline:' . $resposta['punchline'] . PHP_EOL;

        return $piada;
    }
}

Respostas estruturadas

Após adicionar as tools, é possível ver que realmente o nosso código já retorna algo bem interessante, pois pega o que vem da API em inglês, traduz para português e depois gera a nossa piada. Mas ainda podemos reparar que as respostas não têm padrão, gerando assim uma string muito confusa e sem sentido. Além disso, a gente ainda fica vendo os pensamentos da AI e isso não é nada user-friendly. Para resolver isso, o Neuron tem um conceito chamado resposta estruturada, que são schemas e são mapeados via classe. Então vamos implementar isso e deixar a resposta formatada e sempre legível.

Crie um arquivo chamado Piada.php e copie e cole. Não se esqueça de importar a classe dentro do agente:

<?php

namespace src;

use NeuronAI\StructuredOutput\SchemaProperty;

require_once __DIR__ . '/../vendor/autoload.php';

class Piada
{
    #[SchemaProperty(description: 'Contexto da piada', required: true)]
    public string $tipo;

    #[SchemaProperty(description: 'Questionamento da piada', required: true)]
    public string $setup;

    #[SchemaProperty(description: 'Porque de ser engraçado', required: true)]
    public string $punchline;
}

Adicione este método dentro do agente:

protected function getOutputClass() : string
{
    return Piada::class;
}

E altere a resposta para:

$piada = AgenteComediante::make()->structured(
    new UserMessage("Olá, me conte uma piada!")
);

echo 'Aqui está a sua Piada :D' . PHP_EOL;
echo 'Tipo: ' . $piada->tipo . PHP_EOL;
echo 'Introdução: ' . $piada->setup . PHP_EOL;
echo 'Punchline: ' . $piada->punchline . PHP_EOL;

Conclusão

Esse é um exemplo do que pode ser feito com a AI. Nos próximos artigos vamos explorar o RAG, MCP Server e, para fechar com chave de ouro, Chat e Embeddings. Com o Neuron AI vai ser possível criarmos aplicações totalmente funcionais com AI, e tudo isso usando PHP, seja com frameworks ou de forma pura. Fique ligado para os próximos artigos onde vamos nos aprofundar mais e mais e vamos criar uma AI cada vez mais funcional e com diversas funcionalidades incríveis.

Aqui está o código do projeto e outros códigos que fiz sobre AI:

https://github.com/RazielRodrigues/ai-projects

Referência

[https://docs.neuron-ai.dev/]

Como Utilizar Handlebars.js para Renderizar Templates Dinâmicos 〰️

Raziel Rodrigues — Thu, 20 Mar 2025 20:12:22 +0000

O handlebars é uma biblioteca Javascript que compila templates HTML,
com base em dados JSON, fazendo então um "espelhamento" dos dados JSON no HTML,
tudo isso com base na chamada das chaves dos dados JSON.

lib: https://handlebarsjs.com/
repo: https://github.com/RazielRodrigues/js-handlebars-learning-path
projeto online: https://razielrodrigues.github.io/js-handlebars-learning-path/

Começando com o Handlebars

Instalar Handlebars
- CDN: https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js

Primeiro devemos definir a tag de template no HTML

essa tag deve ter um type="" diferente como: x-template-handlebars

essa tag tem que ter um ID

<script id="handlebars-template" type="text/x-handlebars-template">
    //Aqui dentro vai o código do template
    {{HelloWorld}}
</script>

Depois devemos definir a tag que ira ser injetado o conteudo
```
    <main id="content-inject"></main>
```

Em seguida, devemos criar a função de renderização do template

    //1. Pegamos o conteúdo do template que se encontra na tag script do handlebars
    const template = document.getElementById('handlebars-template').innerHTML;

    //2. Em seguida, chamamos a função compiladora do HB
    //que vai interpretar as tags que escrevemos como a {{HelloWorld}}
    const compiledTemplate = Handlebars.compile(template);

    //3. Após isso, pegamos a variavel que vamos injetar o template compilado
    const contentInject = document.getElementById('content-inject');

    /*
    4. Por fim, injetamos nela os dados para aparecerem no template
       perceba que chamamos novamente a variavel 'compiledTemplate'
       pois agora ela é a função que contém o conteudo do template
       o que acontece agora é basicamente um espelho dos dados JSON
       ou seja o campo que tiver aqui ou o array que tiver aqui
       vao ser "chamados" dentro do template, e assim irá refletir
       os valores desses campos JSON no nosso HTML.
    */
    contentInject.innerHTML = compiledTemplate({
        HelloWorld: 'Hello World!'
    });

Por fim o nosso HTML ficará algo como:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HANDLEBARS LEARNING PATH</title>
        </head>
        <body>
            <main id="content-inject"></main>



            <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
            <script id="handlebars-template" type="text/x-handlebars-template">
            <h1>{{HelloWorld}}</h1>
            </script>

            <script>
                const template = document.getElementById('handlebars-template').innerHTML;
                const compiledTemplate = Handlebars.compile(template);
                const contentInject = document.getElementById('content-inject');
                contentInject.innerHTML = compiledTemplate({
                    HelloWorld: 'Hello World!'
                });
            </script>
        </body>
        </html>

Criando templates com dados JSON e EACH helper

Dentro da função de compilação passar os dados em JSON que podem ser também a resposta de uma API JSON,
por enquanto vamos ver com os dados de um array:

    contentInject.innerHTML = compiledTemplate({
    Users: [
        {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
            "street": "Kulas Light",
            "suite": "Apt. 556",
            "city": "Gwenborough",
            "zipcode": "92998-3874",
            "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
            }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
            "name": "Romaguera-Crona",
            "catchPhrase": "Multi-layered client-server neural-net",
            "bs": "harness real-time e-markets"
        }
        }
    ]
    });

Dessa forma conseguimos acessar os dados do JSON por níveis, usando o helper {{each NomeObjeto}} {{#each}}

<script id="handlebars-template" type="text/x-handlebars-template">
  <ul>
    {{#each Users}}
      <li>{{id}}</li>
      <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

A tag de template fica dessa forma assim conseguimos acessar o primeiro nivel do array, para acessar outros niveis do array
podemos usar:

    {{#each Users}}
      {{address.street}}
    {{/each}}

    {{#each Users}}
        {{address / street}}
    {{/each}}

    {{#each Users}}
        {{#with address}}
            {{street}}
        {{/with}}
    {{/each}}

para subir um contexto usamos:

    {{#each Users}}

        {{#with company}}

            //pega o nome da companhia

            <li>{{name}}</li>

            //pega o nome do cliente no contexto acima

            <li>{{../name}}</li>

        {{/with}}

    {{/each}}

Operadores lógicos

O if no handlebars verifica se propriedade tem algum valor, se retornar false, não exibe aquilo
podendo ser encadeado com else if e tambem com else, ficando algo como:

        {{#if image}}

            <img src="{{image}}" class="card-img-top" alt="{{name}}" title="{{name}}">

        {{else}}

            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png" class="card-img-top" alt="{{name}}" title="{{name}}">

        {{/if}}

    {{#if email}}
        &lt;p class="card-text"&gt;
        email: {{email}}
        &lt;/p&gt;
    {{else if username}}
        &lt;p class="card-text"&gt;
        username: {{username}}
        &lt;/p&gt;
    {{else}}
        &lt;p class="card-text"&gt;
        No information!
        &lt;/p&gt;
    {{/if}}

Renderizando dados com o JQUERY

    $(document).ready(function() {

        const template = $('#handlebars-template').html();

        const compiledTemplate = Handlebars.compile(template);

        $.ajax("data/profiles.json").done(function(data) {

            $('#content-inject').html(compiledTemplate(data));

        });

    });

Helpers

Com os helpers podemos registrar nossos proprios blocos {{CapitalizarLetra 'parametro'}} que nos ajudam a formatar os textos ou outras coisas.

Para usar um helper primeiro devemos registrar ele:

        //TIPO 1: Esse helper ele pega apenas um dado age como {{#if}}

        Handlebars.registerHelper("makeBold", function(parametro){

            return new Handlebars.SafeString("<strong>"+parametro+"</strong>");

        });

    //NO HTML:
    street: {{makeBold street}}

    //TIPO 2: Esse helper ele age como os bloc {{#each}} {{#with}}
    Handlebars.registerHelper("makeTitle", function(options){
        return new Handlebars.SafeString("&lt;h5&gt;"+options.fn(this)+"&lt;/h5&gt;");
    });

    //NO HTML:
    street: {{makeBold street}}
    {{#makeTitle}}
        zipcode: {{zipcode}}
    {{/makeTitle}}

Eventos

Como o template é renderizado depois da pagina os objetos nao são identificados pelo dom, para isso precisamos
criar uma função que busque pelos elementos HTML pós renderização e assim poder capturar os eventos:

        //IF CLICK IN BUTTON YOU CAN HANDLE THE EVENT.

        $(document).on("click", ".actions", function(e){

            e.preventDefault();

            console.log("click");

        });

Select em dados

Para escolher um dado especidifico na estrutura vamos passar o indice do array clicado via parametro GET
depois vamos procurar na URL o valor do ID que foi enviado e assim renderizar em outra página apenas o dado especifico.

passar dado pelo HTML da pagina INDEX para montar o parametro GET:

//Dessa forma pega o indice do elemento renderizado começando em 0
<a href="details.html?id={{@index}}" class="btn btn-primary">

Varrer URL:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

O HTML da pagina details nao precisa do EACH ja que vamos exibir o individual, como nos queremos apenas um elemento do array
nos tiramos o each assim nos precisamos passar o indice do array que queremos renderizar então para isso vamos fazer uma verificação,
caso seja sem a classe details no body exibe a lista de todos se tiver o details exibe so um, e quando achado essa classe passa o ID
da URL como indice do array assim exibindo apenas um perfil na pagina details.
```
 if ($("body").hasClass("profile-details")) {
   var profileID = getUrlParameter("id");
   $('#content-inject').html(compiledTemplate(data.Users[profileID]));
 }else{
   $('#content-inject').html(compiledTemplate(data));
 }
```

Partials

O partials no handlebars consiste em voce separar pequenas partes do codigo e usar elas
apenas fazendo a referencia de uma tag {{> nomePartials}}

Devemos criar uma nova tag de template o ideal é essa tag de template ficar em um arquivo separado,
pois dai consegue chamar ela mais organizadamente, por exemplo com o PHP se usaria o include com JS vamos fazer
uma chamada AJAX.

Criar a tag:

<script id="details-partial" type="text/x-handlebars-template">
<div class="card-text">
    {{#with address}}
    street: {{makeBold street}}
    <br>
    suite: {{suite}}
    <br>
    city: {{city}}
    <br>
    {{#makeTitle}}
        zipcode: {{zipcode}}
    {{/makeTitle}}
    {{/with}}
</div>
</script>

Registrar o Partial:

Handlebars.registerPartial("AddressPartial", $("#details-partial").html());

Fazer a chamada do arquivo que contem o partial:

/*
    Lembrando que a tag script do partial esta em outro arquivo em outro lugar
    o que vamos fazer é incluir esse arquivo onde queremos usar o Partial,
    após registrar ele no arquivo main.js junto com as outras funções,
    vamos resgatar o arquivo que contém o template partial e embedar ele no body.
    após isso nos fazemos a chamada do partials, onde passamos o nome dele é o nome
    da tag que queremos renderizar (tag do AJAX)
*/
$.ajax("detailpartial.html").done(function(partial) {
    $("body").append(partial);
    Handlebars.registerPartial("AddressPartial", $("#details-partial").html());
});

Após isso basta chamar o partials com uma tag {{> nomePartials}}

    <script id="handlebars-template" type="text/x-handlebars-template">
        {{#each Users}}
        <div class="card text-center m-1 container" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">{{name}}</h5>

                {{#if email}}
                <p class="card-text">
                    email: {{email}}
                </p>
                {{else if username}}
                <p class="card-text">
                    username: {{username}}
                </p>
                {{else}}
                <p class="card-text">
                    No information!
                </p>
                {{/if}}
                //Chamando vai renderizar os dados de endereço
                {{> AddressPartial}}
            </div>
        </div>
        {{/each}}
    </script>

Perceba que chamo o partials dentro de outra tag de template esse [e o intuito, reutilizar de forma que
nao fique muito codigo e tudo bem mais limpos, se tiver um partial em dois lugares, basta editar um arquivo
que ja edita em todos os lugares.

Criei um site que mostra quem eu sou (Literalmente)

Raziel Rodrigues — Wed, 05 Mar 2025 22:09:02 +0000

Gostaria de compartilhar a versão final do meu site pessoal com vocês. Criei este projeto como um desafio pessoal e gostei muito do resultado, coloquei minha identidade neste site, queria criar algo que mostrasse quem eu sou. Por isso usei referências a coisas que gosto, por exemplo animes, videogames e, claro, hashtag#PHP.

Neste projeto, levei minha criatividade a outro nível e enfrentei muitos desafios. Compartilhei com meus amigos e coletei feedback de pessoas ao meu redor. Refinei o site e agora estou feliz com o resultado e animado para compartilhar e ouvir o feedback de vocês.

Usei várias tecnologias para criar este site e aqui vou detalhar para você:

Frontend:

ReactJS
Modelo 3D usando o Avaturn AI para criar um personagem com minhas características
Three JS e React Three Fiber para renderizar a malha e trabalhar com o Canva
Mixamo para adicionar ação ao modelo 3D e React Three Drei para controlar as ações
Particle JS para adicionar fundo interativo
GSAP para adicionar animações suaves aos componentes e transição de página
Tailwind CSS para adicionar estilos com Material Tailwind CSS
React Spoiled para aplicar efeito de sombra às palavras
Rotating Logic para controlar o 3D e vinculá-lo ao estado do React
Animações CSS mostram elementos

Backend:

Vercel para fazer a implantação
EmailJS para enviar e-mails
Integração Firebase para contar visitantes do site
API feita em Go que se conecta com a API dev.to e a API do GitHub para obter os dados para o páginas de projetos e artigos
Web LLM embed (AI Lab está em construção)

Espero que você goste ou talvez lhe dê algumas dicas sobre como codificar seu site pessoal.

https://www.razielrodrigues.dev/

Encryptor | My first open source project 🔐

Raziel Rodrigues — Wed, 26 Feb 2025 17:26:29 +0000

I'm getting into the open-source world and I am excited to share my first project: Encryptor.

I also say more here

https://dev.to/razielrodrigues/how-to-use-asymetric-encryption-with-php-and-openssl-idl

Encryptor is a Web App for assymmetric encryption using OpenSSL (I have plans to expand the supports and maybe create the own algorithm for the project), allowing you to securely encrypt and decrypt strings with ease. The code is written in raw PHP.

🔹 Features:

Assymmetric encryption and decryption
Lightweight and easy to use
Pure PHP implementation with no dependencies

📌 Repository: GitHub - RazielRodrigues/encryptor

📌 Live Preview: Live Preview

I would appreciate that you check it out, contribute, and help me grow this project! Whether it’s feedback, improvements, or new ideas, your contributions are welcome. Let's build something nice together!

PHP Tips | Exploring the Flyweight/Singleton Pattern 🏗️

Raziel Rodrigues — Wed, 26 Feb 2025 06:59:00 +0000

Introduction

Design patterns provide efficient solutions to recurring software development problems. In this article, we'll explore two powerful design patterns Flyweight and Singleton with practical examples from my GitHub repositories.

Flyweight Pattern 🏗️

The Flyweight pattern is a structural design pattern that optimizes memory usage by sharing common data among objects. It divides object states into:

Intrinsic State: Shared among many objects.
Extrinsic State: Unique to each object, provided at runtime.

This pattern is beneficial when handling a large number of similar objects efficiently, reducing memory overhead.

Below is an example from my PHP Design Patterns repository. The Flyweight class encapsulates shared state and accepts unique state.

<?php

namespace Behavorial;

class Flyweight {
    private $sharedState;

    public function __construct($sharedState) {
        $this->sharedState = $sharedState;
    }

    /**
     * Performs an operation using shared (intrinsic) and unique (extrinsic) states.
     *
     * @param mixed $uniqueState The extrinsic state supplied at runtime.
     */
    public function operation($uniqueState) {
        echo "Flyweight: Shared state (" . $this->sharedState . ") " .
             "and unique state (" . $uniqueState . ")<br>";
    }
}

// Example usage:
$flyweight = new Flyweight('Shared Data');
$flyweight->operation('Unique Data');

Benefits of Flyweight

Memory Efficiency: Reduces redundant object storage.
Performance Optimization: Speeds up applications dealing with numerous similar objects.
Scalability: Useful for caching, rendering systems, and object pooling.

Singleton Pattern

The Singleton pattern is a creational design pattern that ensures a class has only one instance, providing global access to it. It is commonly used for logging, configuration management, and shared resource control.

Here’s an example from my Design Patterns repository. This LuzSingleton class manages a light's state:

<?php

class LuzSingleton {
    private static ?LuzSingleton $instance = null;
    private string $lightStatus;

    private function __construct() {
        $this->lightStatus = 'OFF';
    }

    public static function getInstance(): LuzSingleton {
        if (self::$instance === null) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Turns the light ON.
     */
    public function turnOn(): void {
        $this->lightStatus = 'ON';
        echo "Light turned {$this->lightStatus}\n";
    }

    /**
     * Turns the light OFF.
     */
    public function turnOff(): void {
        $this->lightStatus = 'OFF';
        echo "Light turned {$this->lightStatus}\n";
    }

    /**
     * Retrieves the current status of the light.
     *
     * @return string The current light status.
     */
    public function getStatus(): string {
        return $this->lightStatus;
    }
}

// Exemplo de uso
$luz = LuzSingleton::getInstance();
$luz->turnOn();
echo $luz->getStatus(); // ON

Benefits of Singleton

Consistent State: Ensures a single point of truth for shared resources.
Global Access: Prevents redundant object creation.
Better Resource Management: Useful for logging, caching, and configuration settings.

Conclusion

Both Flyweight and Singleton patterns are essential tools in software development. While Flyweight optimizes memory usage by sharing common data, Singleton guarantees a single instance for centralized control.

By integrating these design patterns into your PHP and Node.js applications, you can build more efficient, maintainable, and scalable solutions.

🚀 Explore my GitHub repositories for more examples:

💬 Let’s Discuss!
Do you use these patterns in your projects? Share your thoughts in the comments below!

Automated Tests | How to mock classes with PHPUnit 🔧

Raziel Rodrigues — Tue, 25 Feb 2025 10:20:20 +0000

Introduction

Mocks are basically clones of your classes. They override your class while maintaining the same type and return type as the original class. Ensuring the correct return type during the mock process is essential; otherwise, errors will occur. Let's say we want to mock a class used inside our calculator.

How to Mock in PHPUnit

Following the previous code, add a new class called PrintCalculationService:

<?php

declare(strict_types=1);

namespace App\Service;

class PrintCalculationService
{
    function array(int $result): array
    {
        # a lot of business rules...
        return [
            'result' => $result
        ];
    }

    function print(int $result): string
    {
        # a lot of business rules...
        return 'result: ' . $result;
    }
}

`setUp` and `tearDown`

These functions control the global state and execute before and after each test.

setUp -> Executes actions before each test.
tearDown -> Executes actions after each test.

`createMock` and `createStub`

These functions create a mock of your class. The key difference is that mocks provide more functionality than stubs. In other test frameworks, they have distinct purposes, but in PHPUnit, they are nearly identical.

createStub -> Creates a stub based on the class.
createMock -> Creates a mock based on the class.
->method('print') -> Configures the method to return a specified value for testing purposes.
->willReturn('result: 2') -> Defines the return value to satisfy and pass the test.

There are many other configurations available. You can find more details in the PHPUnit Test Doubles Documentation.

<?php

declare(strict_types=1);

namespace App\Tests\Unit\Service;

use App\Service\CalculatorService;
use App\Service\PrintCalculationService;
use PHPUnit\Framework\Attributes\DataProvider;
use PHPUnit\Framework\Attributes\Test;
use PHPUnit\Framework\MockObject\MockObject;
use PHPUnit\Framework\TestCase;

class CalculatorServiceTest extends TestCase
{
    private MockObject|PrintCalculationService|null $printCalculationService = null;

    protected function setUp(): void
    {
        $this->printCalculationService = $this->createMock(PrintCalculationService::class);
    }

    protected function tearDown(): void
    {
        $this->printCalculationService = null;
    }

    static function sumProvider() {
        yield [10, 10, 20];
        yield [1, 1, 2];
        yield [2, 2, 4];
    }

    #[Test]
    #[DataProvider('sumProvider')]
    function testSum($x, $y, $expected) {
        $service = new CalculatorService($this->printCalculationService);
        $this->assertSame(
            $service->sum($x, $y),
            $expected
        );
    }

    #[Test]
    function testDivision() {
        $service = new CalculatorService($this->printCalculationService);
        $this->assertEquals(
            $service->division(10, 10),
            1
        );
    }

    #[Test]
    function testDivisionException() {
        $this->expectException(\Exception::class);
        $service = new CalculatorService($this->printCalculationService);
        $service->division(0, 10);
    }

    #[Test]
    function testSumPrint() {
        $service = new CalculatorService($this->printCalculationService);
        $result = $service->sum(1, 1);
        $this->assertSame($result, 2);

        $this->printCalculationService->method('array')->willReturn([
            'result mock: 2'
        ]);

        $print = $service->show($result, 'array');
        $this->assertSame($print, ['result mock: 2']);

        $this->printCalculationService->method('print')->willReturn('result mock: 2');

        $print = $service->show($result, 'print');
        $this->assertSame($print, 'result mock: 2');
    }
}

Final Thoughts

This has been an insightful journey! I hope you enjoyed it. I aimed to be as concise and to the point as possible, making it easier to quickly access the information. As I mentioned, writing tests requires a different mindset. We need to think in reverse. Mocks are an excellent way to approach this concept since they allow us to manipulate results and test every possible path in a function.

Now I encourage you to go for more informations and best practives for your tests, this is just a ready to go and then you can already starting getting your code more senior

Additional Topics

Code Coverage
How to configure the PHPUnit XML file

Automated Tests | How to unit tests with PHPUnit 🔧

Raziel Rodrigues — Mon, 24 Feb 2025 17:52:48 +0000

Introduction

Automated Tests are one of the most important parts of software engineering. Every important author of books says it is necessary and shows examples of how to do it properly. For example, when we read Refactoring by Martin Fowler, we have a whole chapter dedicated to this topic, as well as other books like Clean Code by Uncle Bob.

Well, but then you might be thinking to yourself, "My project is legacy, and nobody writes tests." If you have this problem, I have something to say: I had the same issue, and many other developers did too.

However, you should be bold with your team and explain to your tech manager or PO how important it is. Every time a bug happens, remind them how the lack of unit tests is bad. Eventually, they will understand. This is a technique from The Pragmatic Programmer, where the author teaches how to achieve our technical goals.

To make you more enthusiastic about it, I will share graphs from one of my work projects. When I started advocating for unit tests and worked hard for a week, I was able to increase code coverage from 0% to 30%.

Okay, so now, what are automated tests? Let's begin with a concept. A while ago, someone asked me, "What is the automated test pyramid?" At that time, I didn’t know, but now I will share it with you and explain which topic we will focus on.

Basically, writing tests follows a hierarchy of effort. You can research more using an AI engine:

3 - E2E Tests

2 - Integration Tests

1 - Unit Tests <- our focus

PHP Unit

PHPUnit is one of the most famous test frameworks for PHP environments. Inside your PHP environment, run with Composer:

composer require --dev phpunit/phpunit

After that, navigate inside the folder and run:

./vendor/bin/phpunit

You will see the tests running.

Create a class called CalculatorService inside the src folder and another one called CalculatorServiceTest inside the test folder.

<?php

declare(strict_types=1);

namespace App\Service;

class CalculatorService
{

}

<?php

declare(strict_types=1);

namespace App\Tests\Unit\Service;

use PHPUnit\Framework\TestCase;

class CalculatorServiceTest extends TestCase
{

}

Mindset

It took me a while to understand, but unit testing is about reverse engineering. For example, if you are new to the project’s code and need to write tests for a function you don't know, prepare yourself to think in reverse. That’s actually what testing is about. You need to mock methods and other classes that are dependencies of your tests. To do it properly, you need to analyze parameters and return types, and sometimes mock objects inside the function. This is why writing unit tests is hard for classes with many dependencies, complex logic flows, or multiple conditional branches. If you want everything green, you need to use a lot of mocks.

Another mindset is to test both valid and invalid responses while considering all possible edge cases.

Assertions and Types of Assertions

Update your service with the following code:

<?php

declare(strict_types=1);

namespace App\Service;

class CalculatorService
{
    function sum(int $x, int $y): int
    {
        return $x + $y;
    }

    function division(int $x, int $y): int
    {
        if ($x <= 0) {
            throw new \Exception("Error Processing Request", 1);
        }
        return $x / $y;
    }
}

Now let's write a test:

<?php

declare(strict_types=1);

namespace App\Tests\Unit\Service;

use App\Service\CalculatorService;
use AsyncAws\Core\Test\TestCase;
use PHPUnit\Framework\Attributes\Test;

class CalculatorServiceTest extends TestCase
{
    #[Test]
    function testSum() {
        $service = new CalculatorService();
        $this->assertSame(
            $service->sum(10,10),
            20
        );
    }
}

Run the test:

bin/phpunit --filter=testSum

Note: Running with --filter executes only the specified test method. PHPUnit has other flags, which can be found running the command with --help.

You will see:

Assertions and Expecting

Assertions are basically if statements to check if everything is fine. PHPUnit provides different types of assertions, but these are the most important:

assertSame -> strict equality (===)
assertInstanceOf -> validates two objects or interfaces

More details: PHPUnit Assertions Documentation

A common use case is expecting an exception, as shown in the test code:

expectException -> used to test exceptions

Skipping and Data Providers

markTestIncomplete / markTestSkipped -> marks the test as incomplete/skipped so it doesn’t count as failed.
#[DataProvider('sumProvider')] -> Uses the return of a function as test data.

Now, copy and run the updated test file:

<?php

declare(strict_types=1);

namespace App\Tests\Unit\Service;

use App\Service\CalculatorService;
use PHPUnit\Framework\Attributes\DataProvider;
use PHPUnit\Framework\Attributes\Test;
use PHPUnit\Framework\TestCase;

class CalculatorServiceTest extends TestCase
{
    static function sumProvider() {
        yield [10, 10, 20];
        yield [1, 1, 2];
        yield [2, 2, 4];
    }

    #[Test]
    #[DataProvider('sumProvider')]
    function testSum($x, $y, $expected) {
        $service = new CalculatorService();
        $this->assertSame(
            $service->sum($x, $y),
            $expected
        );
    }

    #[Test]
    function testDivision() {
        $service = new CalculatorService();
        $this->assertEquals(
            $service->division(10,10),
            1
        );
    }

    #[Test]
    function testDivisionException() {
        $this->expectException(\Exception::class);
        $service = new CalculatorService();
        $service->division(0,10);
    }
}

Run the tests, and you will get:

Next chapter: Mocks and Stubs with more tips to finish on a high note!

Recommended reading: PHPUnit Attributes Documentation

Github repository: Leave a star!

What do you think was this useful ? Leave a comment!

I know why I love programming again 🗯️

Raziel Rodrigues — Wed, 05 Feb 2025 15:10:39 +0000

What makes you like being a programmer? Have you ever asked yourself that? Well, in my case...

The other day, I was wondering why I wanted to keep going in this profession, after all, I was going through the famous impostor syndrome, which is normal when you're a software developer. With that, I reflected on it myself, and the answer came in a very simple way: while I'm writing code, I FORGET about my personal problems, family issues, and all the other bad things this world has.

Many people get into programming for the money. I did too, and I won't lie about it. However, in my case, I started programming because of video games, I wanted to understand how they work. Because when I play video games, I feel the same effect as when I program: I disconnect from everything. This brought me the reason why I program. It's simple: I enjoy it, I have fun, and I feel that every time I don't finish a piece of code, I'm still stuck on a level in a game, and I need to pass that level to move forward.

You see, no matter how many levels you pass in this game of development, there are always new levels, and these levels are the new technologies, the new trends in the market, and many other variables. But just like in a game, I can't let myself be discouraged I need to take a deep breath and keep moving forward. And if I can't pass a level, I need to improve, level up, and there's absolutely no shame in that.

That's why I keep evolving. I still don't know, I need to defeat more "mobs" to reach my next level in this journey. Remembering that coding is more than just making money it's my hobby and my refuge from this world full of problems brought me immense peace. Now I know what to think about when I start feeling the same way again.

Forem: Raziel Rodrigues

June Celebrations - São João from Porto Portugal 🎆

Inspiration

Demo

Journey

Publish to Dev.to Straight from Your Inbox 📖

What I Built

Demo

How It Works

Code Repository

Setup Instructions

How I Built It

Development Process

Tech Stack

Further improvement

Experience

Thanks for Participating!

InstaAnalyzer: An AI Instagram Analyst Powered by PHP, Neuron AI and Bright Data 📸

Before start reading:

Table of Contents

What I Built

Demo

> InstaAnalyzer Live Demo

Profile example

Posts example

Web example

API Demo

> Repository

Node JS MCP Server

PHP MCP API

How I Used Bright Data's Infrastructure

MCP Servers usage

Performance Improvements

Tech Stack

Main Features

Real world problem solves

Bonus: Tutorials

Using Bright Data Smithery MCP Server on the website

Using Bright Data Smithery MCP Server SDK

Conclusion

References

Repository

A new AI open source framework for PHP!

Neuron AI: O Framework PHP de Inteligência Artificial 🐘

Neuron AI: O Framework PHP de Inteligência Artificial 🐘

Introdução

Sumário

Conceitos chave e instalação

Agente de AI

Ferramentas ou chamada de funções

Respostas estruturadas

Conclusão

Referência

Como Utilizar Handlebars.js para Renderizar Templates Dinâmicos 〰️

Começando com o Handlebars

Criando templates com dados JSON e EACH helper

Operadores lógicos

Renderizando dados com o JQUERY

Helpers

Eventos

Select em dados

Partials

Criei um site que mostra quem eu sou (Literalmente)

Encryptor | My first open source project 🔐

🔹 Features:

PHP Tips | Exploring the Flyweight/Singleton Pattern 🏗️

Introduction

Flyweight Pattern 🏗️

Benefits of Flyweight

Singleton Pattern

Benefits of Singleton

Conclusion

Automated Tests | How to mock classes with PHPUnit 🔧

Introduction

How to Mock in PHPUnit

setUp and tearDown

createMock and createStub

Final Thoughts

Additional Topics

Recommended Reading

`setUp` and `tearDown`

`createMock` and `createStub`