DEV Community: Tone Gabes

Phosphor Icons for Filament 4

Tone Gabes — Sat, 23 Aug 2025 22:20:25 +0000

A Phosphor icon set ready to be used as Enums in a Filament 4 application.

tonegabes / filament-phosphor-icons

Phosphor Icons ready to be used in Filament 4

Filament Phosphor Icons

A Phosphor icon set ready to be used as Enums in a Filament 5 application.

Installation

You can install the package via composer:

composer require tonegabes/filament-phosphor-icons

Usage

All icons are available through an enum providing convenient usage throughout your Filament app. For more information, check the Filament docs.

For all available icons check the Phosphor Icons.

use Filament\Actions\Action;
use Filament\Forms\Components\Toggle;
use ToneGabes\Filament\Icons\Enums\Phosphor;

Action::make('star')
  ->icon(Phosphor::StarBold);

Toggle::make('is_starred')
  ->onIcon(Phosphor::Star)

Weights

This package includes a enum with weights you can use:

enum Weight: string
{
    case Thin = 'thin'
    case Light = 'light';
    case Fill = 'fill';
    case Duotone = 'duotone'

…

View on GitHub

Why Does AI Write Better React Than Laravel? Understanding Bias in Code Generation

Tone Gabes — Wed, 09 Jul 2025 14:13:03 +0000

You ask an AI to generate a CRUD using Laravel with Livewire.

What you get? Weird syntax, broken wire:model, violated conventions.

Now you try the same thing... but with React and Next.js.

Boom: clean code, solid JSX, working auth flow.

It's not just coincidence.

There’s bias in the data that trains these AIs, and it shapes more than just syntax.

AI Isn’t Neutral, It Just Repeats What It Saw

AI promises productivity, impartiality, intelligence.

But what it generates is based on what it consumed.

And what dominates the training data?

Public GitHub repos (mostly JavaScript-heavy)
Stack Overflow threads packed with React
Mass tutorials and boilerplate templates
Popular documentation and frameworks

It doesn't create, it recombines.

And it’s better at recombining what it saw the most.

React & Next.js: Fluent in the AI’s Native Language

Stacks like React and Next.js are basically first-class citizens in AI models.

Not because they’re better, but because they’re everywhere.

Why is React favored?

Massive GitHub repos
Huge, loud global community
Predictable functional patterns
Endless repetition across tutorials

AI knows useState, useEffect, AuthProvider, getServerSideProps like the back of its digital hand.

Laravel + Livewire: Where AI Starts to Fumble

Now compare that to Laravel + Livewire + Filament.

AI often:

Breaks wire:model or misuses bindings
Ignores Livewire lifecycle methods
Mixes up reactivity with Alpine.js
Writes generic solutions that break the opinionated flow of the framework

Why?

Fewer public examples in English
Laravel has regional popularity (strong in Brazil, weak globally)
Livewire has “magic” abstractions that confuse generative models
Less noise in forums, fewer mentions in tutorials

Bias Is Structural

AI doesn’t prefer React because it’s “better.”

It just knows React better, because it had more of it in training.

And that creates systemic effects:

Popular stacks become even more dominant
Alternative stacks are treated like fringe cases
Junior devs assume React is the "correct" or only modern choice

It's the algorithm reinforcing the mainstream, and quietly shaping the tech landscape.

How to Break the Cycle

AI isn't the enemy. But it demands mindful use.

Here’s how you can stay in control:

🧠 Practical Tips:

Master your stack. Know when the AI is wrong.
Add context to your prompts. Tell it you’re using Livewire or Filament.
Correct its mistakes. Every fix helps both you and the AI learn.
Use custom GPTs. Fine-tune with your own standards and stack.
Treat AI as a partner, not a prophet.

Final Thoughts

AI doesn’t know which stack is “better.”

It just knows which one got the most GitHub stars in 2022.

If you’re not paying attention, you’ll end up coding like the algorithm wants —

not like your project actually needs.

What About You?

Ever caught your AI suggesting React when you asked for Vue?

Or generating Laravel code that breaks its own conventions?

Let’s talk about it, drop your experience below 👇

Are We Programming Machines... or Programming Ourselves?

Tone Gabes — Wed, 02 Jul 2025 03:05:45 +0000

AI watches us, learns from us, suggests—and we follow.

So… are we still the authors of our own digital behavior?

The Invisible Feedback Loop

Here’s how it works:

You use AI.
It learns your habits and data.
It starts predicting what you’ll do next.
You follow its suggestions because they’re “smart”.
You repeat the pattern.
It learns again—and tightens the loop.

And just like that, your behavior becomes training data for your own automation.

When the Tool Becomes the Master

Let’s get practical:

Spotify recommends more of what you already liked. You stop exploring.
TikTok optimizes your feed so well, it rewires your attention span.
Copilot/ChatGPT complete your code or thoughts—faster, but maybe not you.

At some point, you're not just using tools.

You're adopting the mindset they were trained to reinforce.

The Illusion of Choice

When everything is optimized, is your decision still yours?

AI is great at pattern recognition. But it’s also great at making you predictable.

When suggestions become default, how much space is left for friction? Or randomness? Or you?

Predictability Becomes the Default

AI doesn't like ambiguity.

It works with patterns, stats, probabilities.

So the more predictable you are,

The easier it is to model you.

That’s why—consciously or not—

We start behaving how AI expects us to:

We write like a prompt.
We reply like we’re being graded by an algorithm.
We create content chasing reach, not truth.

We’re programming ourselves to be machine-readable.

So... Who’s Training Who?

AI is supposed to learn from us.

But now we’re adjusting ourselves to work better with AI.

It’s not just about ethics, privacy, or job disruption.

It’s about creative agency.

Are we still creators?

Or just high-functioning prompters?

So... Now What?

No, I’m not saying stop using AI.

(Heck, this very article had its grammar and typos cleaned up by one.)

The idea is: don’t let it think for you.

Let’s reflect:

How many of your decisions are actually yours?
How much of your thinking has been quietly automated?
And what if we’re becoming too legible—too optimized—for our own good?

A Final Thought

We worry about AI taking control.

But what if we’re just giving it away?

Maybe AI won’t need to dominate us.

Maybe we’ll just reshape ourselves so much that we become the algorithm.

What do you think?

Have you ever caught yourself thinking, writing or coding in a way just to “please the machine”?

Drop your thoughts below 👇

Let's talk about it like humans.

How Filament Saved (or Complicated) My Admin Panel: An Honest Review

Tone Gabes — Fri, 27 Jun 2025 02:31:04 +0000

I recently had to build an internal admin panel for a client. Nothing too fancy: manage users, roles, logs, settings, and a couple of modules with lots of relationships. You know the drill.

The stack was Laravel 12, and I didn’t want to go full SPA or spend time wrangling Vue or React just to make forms look half-decent. I wanted something quick, modern, maintainable, and preferably PHP-based.

Enter Filament — a Laravel admin panel that promises beauty, speed, and developer happiness.

And yeah… it mostly delivered. But also bit me a few times.

Here’s my honest, no-BS review of Filament, after using it for real.

🚀 Why I Chose Filament

I’d already worked with Livewire.
Bootstrap-based admin panels feel like stepping into 2014.
I didn’t want to reinvent CRUDs for the 100th time.
Filament looked polished, Laravel-native, and productive.

Honestly, I saw their landing page and thought: “If this thing works half as good as it looks, I’m in.”

Spoiler: it does. Mostly.

✅ What Filament Gets Really Right

1. Blazingly Fast CRUDs

Creating a full resource (index, create, edit, delete, with filters and relations) takes minutes. You define a model and a resource class, and boom — a usable UI is born.

// Just register this
UserResource::make()
// And you get full CRUD with filters, actions, and forms

2. Gorgeous Out-of-the-Box UI

Filament uses Tailwind and has a clean, modern design. It feels like working in an app that was actually designed in the last 5 years.

3. Smart Abstractions

The structure — Resources, Pages, Widgets, Actions — keeps things modular and clean. Want a dashboard with charts? A custom page? Easy.

4. Relationship Handling is 🔥

HasMany, BelongsTo, Morphs... Filament handles it all smoothly. You can edit nested relations inline with just a few lines.

5. Plugin Ecosystem

There’s already a healthy ecosystem of plugins and community packages (Spatie roles integration, log viewers, translations, etc.). It’s growing fast and actually maintained.

🤕 But Here's Where It Gets Messy

Look, Filament isn’t perfect. And when things break, they break in non-obvious ways.

1. Livewire Quirks

Since it’s all built on Livewire, you inherit all its headaches: wire:model desyncs, debounce glitches, JS interop oddities. If you try to add Alpine/JS yourself, expect a few fights.

2. Customization Gets Painful Fast

The default UI is beautiful — but very opinionated. Going beyond the standard layout, or implementing custom layouts per user role? Yeah… that rabbit hole gets deep.

3. Conditional Logic Can Get Messy

Form fields that appear/disappear based on other fields? Possible, but not always intuitive — especially with Livewire reactivity in the mix.

4. Policy and Authorization Headaches

Filament has its own way of handling permissions, but if you have complex access control logic or need dynamic policies, prepare for some extra legwork.

5. Magic Comes With Trade-Offs

You’re effectively working inside a framework within a framework (Laravel → Livewire → Filament). That’s powerful, but it also means more layers to debug.

🎯 When to Use (and Not Use) Filament

💚 Use Filament If:

You need an internal admin panel, fast
You’re solo or in a small team
You already use Livewire or want to avoid frontend-heavy stacks
You prefer PHP over full-stack JS solutions
You’re building tools, not end-user UIs

❌ Avoid It If:

You need pixel-perfect UI or heavy interactivity
Your app needs a full SPA experience
You have complex dynamic forms or custom JS logic
You hate black-box abstractions or hidden magic

💡 Lessons Learned

Filament is perfect for MVPs, internal tools, backoffice UIs, and admin dashboards.
But if your app is long-lived or has complex logic, you’ll eventually need to break out of the magic box — and that’s where it can get frustrating.
Still, the amount of work it saves early on is ridiculous.

🧾 Final Verdict

Filament is a fantastic tool — if you understand what it’s for.

It gave me an admin panel in hours, not days. It looks good, works well, and made me fall in love with Laravel again.

But like all abstractions, it has sharp edges once you push past the “happy path.”

If you go in with your eyes open, Filament will save your ass. If you expect it to be a no-brainer for all use cases… you’ll eventually hit a wall.

💬 What About You?

Have you used Filament in a real-world project?
Did it blow your mind or drive you nuts?
Let me know in the comments — I want to hear your take.

7 Laravel 12 Methods You Won’t Find Easily in the Docs

Tone Gabes — Mon, 16 Jun 2025 00:14:58 +0000

Laravel 12 came with a lot of great features, but some of the best additions don’t show up in the documentation.

These “hidden” methods can make your code cleaner, faster, and more readable — if you know where to look.

Here are 7 lesser-known Laravel 12 helpers that deserve a place in your toolbox.👇

1. Collection::range(start, end, step)

Finally, you can generate ranges with a step:

collect()->range(1, 10, 2);
// [1, 3, 5, 7, 9]

No more filter() gymnastics after a range(). This improves both clarity and performance when generating sequences.

2. Arr::partition()

Split an array into two groups based on a condition:

[$evens, $odds] = Arr::partition(
    [1, 2, 3, 4, 5],
    fn ($n) => $n % 2 === 0
);

You get two clean arrays in one go. No need to convert to a collection just to split things.

3. TestResponse::ddJson() & ddBody()

Debugging test responses just got easier:

$this->get('/api/test')->ddJson('data');

No more digging through getContent() and decoding JSON manually. These new methods let you inspect responses directly in your test flow.

4. Model::except([...])

Want to remove some fields from a model (like sensitive ones)?

return $user->except(['password']);

Much cleaner than calling makeHidden() — especially in API responses where you only want to exclude a couple fields.

5. Model::fillAndInsert([...])

Need to bulk-insert records with model casts, timestamps, or UUIDs?

User::fillAndInsert([
    ['name' => 'Alice'],
    ['name' => 'Bob'],
]);

It's insert() with all the benefits of model behavior. No hacks, just Eloquent.

6. Uri::of(...)->pathSegments()

Parse a URL and get its path segments cleanly:

Uri::of('https://site.com/2025/06')->pathSegments();
// ['2025', '06']

No more explode() or string slicing. Just semantic URL handling.

7. Str::encrypt() & decrypt()

Want to encrypt a value in a fluent way?

str('secret')->encrypt()->prepend('x_');

And then:

str($token)->after('x_')->decrypt();

Simple, elegant encryption for small secrets or tokens — perfect for short-lived data.

Final Thoughts
Laravel 12 is full of gems — not just the ones in the docs.

By using these lesser-known helpers, you can:

✅ Write less boilerplate
✅ Reduce bugs
✅ Improve performance and readability

If you found this helpful, consider sharing it with your team or saving it for later.

Happy coding! 🚀

Prompt for Comprehensive Codebase Exploration and Documentation from Multi-Perspective Analysis

Tone Gabes — Thu, 05 Jun 2025 19:49:36 +0000

Sharing here a prompt that has helped me a lot to understand projects in which I am inserted, or that I use to make material ready for new developers to enter the project.

In a few seconds you have a comprehensive view of code that can save too much alignments and unnecessary questions, leaving more time for you to focus on what you really want to work with.

Explore the entire code repository thoroughly. Analyze and understand the codebase from three key perspectives:

- Software Architect – Focus on system design, architecture patterns, and scalability.

- Software Developer – Examine code structure, implementation details, and maintainability.

- Product Manager – Evaluate features, usability, user flows, and alignment with business goals. 

After your analysis, compile all findings into a comprehensive README.md or OVERVIEW.md file placed at the root of the repository. This document must:

- Be written in Markdown.
- Include Mermaid diagrams to explain system architecture, workflows, or processes.
- Be clearly structured and easy to navigate.
- Provide actionable insights or questions that could guide further development or refinement.

What Don’t Make Me Think Taught Me About Intuitive Design

Tone Gabes — Fri, 30 May 2025 13:40:39 +0000

If you work with design, development, or digital products, you need to read Don't Make Me Think by Steve Krug. Even though it was first published in the early 2000s, its lessons are more relevant than ever.

Good interfaces don’t make us think.

Below, I share the key takeaways from the book — simple, practical principles that can radically improve your users' experience.

1. Don’t make me think

When users open a site or app, they want to act fast. If the interface requires mental effort just to understand how to use it, something’s wrong.

Great interfaces are invisible — they guide users without them even noticing.

2. Nobody reads. Everyone scans.

Let’s face it: users don’t read. They scan, looking for visual cues — keywords, buttons, icons.

So:

Use clear headings;
Highlight what matters;
Avoid big blocks of text.

3. People go with “good enough”

Users don’t analyze every option. They pick the first thing that looks like it’ll work — a behavior known as satisficing.

Don't expect your users to be detectives. Make the right option obvious and easy to find.

4. Conventions are your friends

It’s not the time to reinvent the wheel. Design conventions exist because they work.
Blue links, trash bin icons, search magnifying glasses — they already have meaning.

Using familiar elements reduces friction and builds trust.

5. Clicks aren’t the problem. Effort is.

Don't stress over the number of clicks — stress over how hard each click is.

A few easy, clear steps are better than one confusing shortcut.

6. Navigation should be obvious

Users should always know:

Where they are;
What they can do;
How to go back.

Good navigation is like a reliable map — it keeps users oriented and confident.

7. Test early and often

Krug makes it clear: you don’t need a fancy lab to do usability testing.
With just 3 to 5 users, you’ll uncover most of the major issues.

Test early, test small, fix fast.

8. Cut the clutter

Every unnecessary word or element is one more thing that gets in the user’s way.

Eliminate:

Generic promo language;
Words that don’t help users act;
Redundant explanations.

Other valuable lessons

Your homepage should immediately explain what your site does;

Avoid fluff and filler language;

Accessibility matters — make your design usable for everyone, including people with disabilities.

Conclusion: usability is empathy

The most powerful lesson in Don't Make Me Think is this: Usability is about respect — for the user’s time, attention, and mental energy.

The best design disappears. It just works.