An update after I posted the “Laravel Excel: How to append rows to an existing Excel file“ a while back. This post will give you another solution and probably a better way to export that fits every case.

Problems

Previously, when trying to export more than 30k records, the overall process was getting slow.

A diagram to show the previous implementation.

The bottleneck was between the “Write to Excel”. Where we have to:

• Download the Excel file from S3

• Write (append)

• Upload to S3 again

After 30k records, the file was huge (IIRC, 100~150MB). Each iteration took a lot of time and surpassed $timeout = 600 lol.

Well, at least we spotted the bottleneck; let’s enhance it.

Solutions

Every exporter out there, we always do:

• Fetch data

• Compute data (transform into readable or accountable data)

• Write

Let’s add some love for fetch & compute.

Fetch & Compute

Fetch & compute are the most important tasks. We should handle it with care, indeed. So I created a new table:

• export_rows

  • id

  • export_id

  • data (json column)

After fetching & computing each record, we’ll write into the export_rows table. The data column will store an array of values, e.g. ['Seth', 'Vietnam', 'github.com/sethsandaru']

To ensure fetch runs fast, I believe you already know how to optimize your query and add enough indexes.

Write

Once we insert all the export_rows. It’s time to write. We create a new Excel/CSV file and simply:

• Pull data by chunk

  • Approx pulling 1k records would take around ~150ms (even faster with nowadays CPU)

• Write it into the file

  • Approx appending 1k records would take ~200ms (even faster with nowadays CPU, too)

• Upload to S3

This will take faster since it’s purely reading simple things from the DB, no hard pressure. Then write & upload.

Using AWS Lambda, average processing time takes around ~20s for writing & uploading 100k records, it’s pretty fast, I’d say.

Note: after uploading the exported file to S3, we should delete all of export_rows to save space.

Result

From exporting in hours for thousands of records, it is now minutes. And of course, once it’s done, users will get notified via email.

Thanks for reading, and I hope it helps to improve your exporters!

Probably a chapter 2 of this https://sethphat.dev/why-is-wordpress-still-an-awesome-cms blog post, haha.

Here was the story: I’ve been spending like 2 days figuring out which CMS I want to use for my new blog (for my new hobby lol)

Let’s see, I’ve considered these options, and why I don’t want to use them:

• October CMS: no built-in blogging system, we have to install a blog plugin, and the main editor is a markdown editor (man, it’s almost 2026, I don’t want to write raw markdown lol).

• Filament: same as October CMS, we have to build or install a plugin for blogging. Their Rich Editor looks ok, though.

• Strapi: looks incredible, but I have to run a NodeJS app, which means another thing to observe/take care of, ok, not so cool.

• Custom build: I’ve been doing that for the last two sites, and it’s not cool, haha.

  • I mean, if we want to learn how to build a CMS site, go for it.

  • But if we want peace and want to deploy and use, then don’t do it. Honestly, it looks overkill and a waste of huge time (and come up with something not so perfect to use, while others already did that for us based on their years of experience)

Why WordPress?

First, as a person who has been working with PHP for 9 years, I feel comfortable using WordPress. It leads to:

• I can confidently build a theme

• I can confidently build a plugin (if I want to)

Second, with the LLMs (I’ve only been using GPT & Copilot), it helps me build and learn things around WordPress super fast.

• I believe when you’re at the Senior level, you know exactly what you want. You can let the LLMs generate code, then we review/adjust, and we have what we want.

• And of course, learning, too!

Third, deploying PHP apps is super simple (I mean, LAMP stack is still a thing, and probably strong forever, haha). So here are the options:

• Laravel Forge (why not lol)

• Bref to deploy on AWS Lambda

• $5 VPS at Vultr, I can either run WordPress in:

  • LAMP mode

  • High perf mode by utilizing RoadRunner/FrankenPHP

Fourth, WordPress makes SEO easier. Additionally, we can also install a free plugin for extra SEO stuff (sitemap, meta, social media, etc)

Last, WordPress is FREE and open source, has a large community, receives frequent updates, and is well-documented.

Will I use WordPress as an Admin Panel?

Probably not, lol!

For business apps, I’d go with Filament, which makes more sense (also easier)

Bonus

I’ve found this gem _tw (https://underscoretw.com/), which helps us to build a WordPress theme using Tailwind v4, super cool!

Thank you!

Alright, thanks for reading. It has been so long since my last post, haha! Will try to write more.

Well damn, it has been a while since my last post lol, lazy & busy. But here I am, back to write useful tips for y’all 🥹

Let us do some exporting tasks for today, using Laravel Excel to export XLSX (yeah CSV is so 2010 lol). But, append more rows to an existing file.

The approach

From your export class (e.g.: UserExport), implements the WithEvents

Once you added the registerEvents method, add this

    public function registerEvents(): array
    {
        return [
            BeforeWriting::class => function (BeforeWriting $event) {
                if (!Storage::exists($this->filePath)) {
                    return;
                }

                file_put_contents(
                    $tempFile = tempnam('/tmp', 'export') . '.xlsx',
                    Storage::get($this->filePath)
                );

                $templateFile = new LocalTemporaryFile($tempFile);

                $event->writer->reopen($templateFile, Excel::XLSX);
                $event->writer->getSheetByIndex(0)
                    ->export($event->getConcernable());

                return $event->writer->getSheetByIndex(0);
            },
        ];
    }

It will retrieve the file from your desired storage (local, public, s3, etc), store to tmp folder (which is available for both server & serverless environment), and tell Laravel Excel to use that file to write more rows.

Simple right?

And yeah, I know, it’s a shame that reading an existing file is not available in the package.

After this, what do we get?

Daisy-chaining jobs to export tons of rows

Yep, each job can write around 500 ~ 1000 rows, then store the file, and dispatch another job to continue until it writes all rows.

Reduce memory-leak or timeout issues, since jobs only handle a small amount of data.

Interact with S3 with ease

Thanks to Storage from Laravel, this can be done super easy.

With the code above, I’ve read the file, and to write, simply:

Excel::store(
    new UserExport(collect($users), $this->filePath),
    $this->filePath
);

Works for both Server & Serverless

Yep, tested on both server & serverless (Lambda), lovely!

Finally

Thanks for reading and have fun!

Recently, I just bought Herd PRO (a yearly subscription). I’ve been using the basic Herd since the first release.

So, my latest work required interaction with S3 storage, there are several ways to achieve that in the local env:

• Use Cloud (S3-compatible e.g. DigitalOcean, Vultr or use AWS’s S3 directly)

• MinIO: S3-compatible storage, offer a self-hosted version

  • I pick this

MinIO can be downloaded & run in several ways: Docker, Brew, etc.

I found out that Herd is supporting MinIO out-of-the-box (for the PRO version), that was the time I made the purchase decision).

So let’s check it out, to see the PRO features of Herd PRO.

Herd PRO features

Services

I love this, helps us to create and manage a lot of services/dependencies:

• Database: MySQL, PgSQL, MongoDB

• Cache: Redis

• Queue: Redis

• Broadcasting: Reverb

• Search: MeiliSearch, Typesense

• Storage: MinIO

For instance, I created a MinIO instance, Herd gave me the instructions & ENVs (all I needed to do was copy & paste)

Mail

There are plenty of ways to test email locally, but now it’s getting way easier with Herd.

Typically, I’d use Mailtrap, but now, I’ll stick with Herd’s Mail.

Dumps

Dumps is amazing, unlike ray , it requires us to install a dependency (or dev-dependency), dumps doesn’t require additional dependencies.

We can use either dump or dd function to write the logs. It also writes the DB queries & Application Logs (logger).

Debugger

If you like to debug using breakpoint, Herd PRO provides an easy integration, glued between PHPStorm and XDebug.

Honestly, I’m not a fan of this so I won’t give you guys any reviews here.

Overall Reviews

I really like Herd PRO, my overall local development has been optimized a bit:

• PHP (versions, update, etc) => Herd PRO

• Database => Herd PRO (goodbye DBNgin 🥲)

  • Optimized part here

• Cache => Herd PRO

• External services: Herd PRO

My overall source: 4.5/5.

To get 5/5, Herd PRO should be able to provide us these:

• Ability to install extra PHP extensions. At the moment, installing a specific extension is not so cool, way too much hassle.

  • If somehow brew bumps the extension’s version, we have to update the php.ini again, I don’t like this.

• Ability to run Laravel Queue Worker

• Ability to set up Sites with custom domains or ports.

Conclusion

Well, as a person who loves to keep my local environment as minimal as possible, I do really love Laravel Herd. I can set up everything under the same Herd application.

If your applications are going to use more than a normal database, I’d recommend using Herd PRO. If not, let’s just stick with Herd Basic & DBNgin (Free).

Thanks for reading!

From LaraconUS 2024, Taylor shared with us a lot of cool stuff. From the code, and the framework to the infrastructure. PHP and Laravel are getting hot more than ever 🔥

A new Facade has been shared & released in the latest version: the Concurrency

Let’s check it out and I’ll share my early review on that.

The Concurrency Facade

Introduction

The Concurrency facade helps us to run tasks concurrently.

• Before, tasks need to be run synchronously.

• After laravel/framework v11.23.2, with Concurrency, we can run the tasks asynchronously*

  • learn more about the * in the Digging Deeper section below.

With that, we can dispatch and run our tasks (instead of one by one) and we can have

Usage

// $res is a Collection<Result>
$res = Concurrency::run([
    fn () => MyTask::run(),
    fn () => MyOtherTask::run(), 
]);

$res[0] // access the result

Digging deeper into the Concurrency Facade

Let’s check out the implementation.

At first glance, there are 2 drivers that we can use:

• ProcessDriver

• ForkDriver (uses spatie/fork)

Since I always have a thing for the in-house stuff, I’ll only review ProcessDriver for this blog posting.

How does the ProcessDriver work?

Looking at the run driver, it will serialize our closure and send it to a new Console command that Laravel introduced.

That command will invoke the closure and return the result.

So we can see, 1 concurrent task = 1 console command process.

Considerations / Problems / Flaws

• Each task process will bootstrap a whole application again.

  • This could increase the number of DB connections.

• Having many processes would decrease the overall server's performance.

  • Probably worse in the serverless environment (AWS Lambda)

• It might have some out-of-context issues if the concurrent task has dependencies (e.g.: using $this->something reference)

• It uses the Promise.all approach instead of the Promise.allSettled.

  • So if there is an error, we won't get all the successful results (get an Exception instead)

Reviews

Small tasks

It’s not probably a good idea to use Concurrency for many small tasks, reasons:

• It has to bootstrap the whole application for each task, the overall bootstrap can take from 10~70ms depending on the server’s gig & codebase’s size.

• Many processes will slow down the overall server’s performance.

• There is no way to get successful results if there is an error in the middle. Perhaps this is something Laravel will need to improve soon.

I was thinking of doing something like:

Concurrency::run(
    $users->map(
        fn (User $user) => fn () => SendWelcomeEmailJob::dispatch($user)
    )
);

But after digging a bit, I’m still sticking with the normal foreach and dispatch 🥹 It’s way more optimal for the time being.

Large Tasks

If we can manage how many tasks we’re going to dispatch. Perhaps we can use Concurrency for large tasks (e.g.: concurrent 3rd party API calls).

Conclusion

Well, guys, I’m still sticking with normal Laravel stuff and Queue Jobs at the time being hehe. Things are too early for the very best, let’s wait for a while for the improvements from Laravel’s Core Team and the lovely huge Laravel Community.

Currently, PHP is not a language designed to run things concurrently in a process. Most of the things are workaround solutions.

• The same goes for fork from Spatie, creating processes to run tasks.

If you are using Octane x Swoole, then you can use the concurrency from Swoole which utilizes the Event Loop (the brain of JS), totally better.

Thanks for reading!

Non-tech talk today hehe.

Generative AI has been trending for more than a year now. GPT-3 started the trend, and after that, there are many players joined the game.

I did use some generated AI content back in the day when HashNode injected Claude (IIRC) into the platform.

At first, everything looks quite cool & quick. However, after several articles, I stopped using AI, and I'll share my thoughts here 😉

The Thoughts

Bad Content

As a reader, you'd expect to read an article that gives you all the good details from personal real-life experience, hands-on practice, etc. Generative AI will always give you vague content.

Don't be so lazy. If you don't write, don't do it. If you write, do it properly, with heart.

Once people like your content, they will follow your blog (absolutely).

Using too much academic vocabulary

English isn't my first language, so, I don't want to create an article that separates the readers.

I want everyone (even somebody who just knows basic English) to understand what I shared in my articles.

Too much academic stuff will make my articles unreachable.

Bad For SEO

Google already warns us about this. And I agree with Google, why do I have to read a generated article when I can do a simple chat with GPT?

Ugly Feature Image

Honestly, I haven't used any picture generator, especially for my blog.

A blog where people design their own Feature Images (even if it's just a simple text and a simple background) is 100% worth more than a generated AI image.

People think that generated AI will replace designers, won't be anytime soon (at least in the next 5~8 years). Human-to-human communication is already hard enough to conclude a good design, how come AI can understand us quicker & better?

When do I use AI?

• To check the grammar (yeah English isn't my first language)

• To search for something quickly

Conclusion

Don't abuse AI, let's make blogging enjoyable.

Thanks for reading!

Let's do some hands-on practice today. Gonna show you how to create a fancy input for your command.

Life is too short to do boring things, isn't it? Hehe.

The Fancy and the normal Inputs

When using $this->ask('Give me your freaking input'), it will show up an input like this:

That's a normal one, Laravel doesn't document the way to create a fancy input, like when we run the make:model without any arguments:

(sorry, can't take a picture via ray.so, copy things there and it's break haha)

As we can see, the fancy input has a proper border (which is nice), a placeholder text for examples.

On the other hand, if we press the cancel command (Mac: Command + C | Linux: Control + C), we'll see this message:

And the normal ask:

It's definitely way better than the normal one, right?

How do you implement the Fancy Inputs for Laravel Command?

There are some adjustments we need to make. Let's roll.

Implements PromptsForMissingInput

So that Laravel can smell the missing required arguments thus showing up the inputs for us 😉

Use $name, not $signature

Instead of using $signature, we'll need to use $name (pure form without any options or arguments defined)

class MyFancyCommand extends Command implements PromptsForMissingInput
{
    protected $name = 'app:handle-my-fancy-command';
}

Define Inputs

We'll need to override the getArguments and the promptForMissingArgumentsUsing methods:

// define argument(s) of your command
protected function getArguments(): array
{
    return [
        ['name', InputArgument::REQUIRED, 'Full Name'],
    ];
}

// define the input's label & placeholder text
protected function promptForMissingArgumentsUsing(): array
{
    return [
        'name' => [
            'Can you plz give me your full name?',
            'E.g.: Seth Chen',
        ],
    ];
}

(Optional) Define your Optional parameter(s)

Simply override the getOptions method:

protected function getOptions()
{
    return [
        [
            'admin', // full-form: --admin
            'a',  // short-form: -a
            InputOption::VALUE_NONE, // boolean, no input
            'Make this user as an Administrator', // description
        ],
    ];
}

For InputOption, take the reference here:

(yes I love light mode 😈)

Testing

Now, let's hit the app:handle-my-fancy-command and try it out:

Really awesome, isn't it?

What if my terminal can't show up inputs?

This is a fair question, we can't expect all machines (especially servers) to show up fancy things.

Simply use normal arguments or optional parameters without any issue 😎.

Final Words

From the way we define the arguments & optional parameters, I feel like this is a better way for Laravel commands.

Putting too much text inside the $signature aren't so cool.

Enjoy and happy weekend! 😎

I want to talk about WordPress (WP) for today. It is one of the famous CMS platforms that has been around for decades.

Nowadays, people still consider WP as their go-to CMS for their websites, blogs, showcases, etc.

Let's check out why WP is so cool and awesome.

First, the Inspiration

The inspiration for this post is based on the newsletter from Nevo David 😆

And recently, I've been deployed 2 new sites using WP (after 6 years). A lot of things have changed (in a good way).

Why WordPress?

Top-notch CMS with decades of experience

You know what they said: the older, the wiser.

The same goes for WP, with years of experience, WP is still going strong & better every day.

Easy installation with not-so-many dependencies

That's right, WordPress installation has been super straightforward since then.

There are only a few steps:

• Download the source code, unzip it

• Setup PHP, MySQL & Apache/Nginx

• Change the DB config in wp-config.php

Then we can visit our website and finish the installation.

Well, if you compare WP with other CMS platforms, the installation isn't that simple.

State-of-the-art Editor: Gutenberg

In order to write a good post, a good editor is required. In the past, the previous editor of WP was amazing.

But then they released Gutenberg in Dec 2018, which is more powerful. The customization, the looks, the integration, etc. Everything works so well.

Search Engine Optimized (SEO)

Simply install Yoast SEO plugin, the FREE version has everything that we need (of course if you're a hardcore SEO engineer, go for the PRO version)

Yoast will give us a lot of helpful SEO recommendations, keyword tracking, etc.

Flexibility

WP isn't just built to be a simple blog. It can be your landing pages, home websites, e-commerce, resumé, etc.

You can check out a lot of awesome plugins and make your life easier.

Nowadays, people really care about performance (otherwise PageSpeed would bite us), so most plugins are well-optimized.

A lovely Media Manager

This is also a must-have for those who need to insert & manage many media files (images, videos).

API-ready / Headless CMS opportunities

WP exposes APIs for you so that you can use WP as a headless CMS and build your own front-end website.

Pretty handy for those who don't want to do frontend stuff in PHP (and JS) together.

(Optional) Monetization-opportunities

How?

• Sell your themes

• Sell your plugins (one-off or subscription)

Conclusion

Honestly, everything has pros and cons, that's the nature of software engineering. But I do see more PROs from WP: easy setup, big community, SEO optimization, and a great editor.

Price: Cheap

We can run WordPress on cheap shared hosting, or if you don't like shared hosting, buy a VPS from any service. The starting price would be around 3 USD/month.

My recommendation: use Vultr. It's cheap, reliable, and simple to set up everything.

I'm using 10+ Linux VPS on Vultr and totally love it.

Performance: Fast+

PHP (8.3+) is blazing fast nowadays, thus boosting WordPress up to a brand new level.

Want a higher next level? Check these out:

• FrankenWP

• WordPress x Swoole

They will run WP in a long-running process (same as Node.JS or Go), which reduces the bootstrap time & database connection => ridiculously faster.

Why not use WordPress for this blog?

You might ask why I'm using HashNode. Fair enough, these are the reasons behind:

• I was too lazy 🥲 to:

  • Find or make a theme

  • Deploy a new site

• I wanted to create a simple blog (as simple as possible) just to write notes, and share knowledge.

  • Lazy to follow best SEO practices too 😆.

Will I ever migrate to WP?

Never say never, right? 😉

Final

Thanks for reading 😉. See you in the next article.

We all know that Cache facade plays a good role across the Laravel application lifecycle, isn't it?

Cache simply boosts up the requests by retaining the computed data from file storage or memory (aka RAM) depending on our configuration.

Today I'm gonna show you an awesome way to maintain your cache flow.

The Problems

Not only for other facades but also Cache provide us with a really simple way to use things (the beauty of Laravel - simple yet elegant)

However, it's a double-edged sword. We code things and we see it's simple, no biggie.

But by the nature of software development, from time to time, the codebase increases, and maintaining becomes harder.

Then people start to blame Laravel. It's not Laravel's fault, right? Laravel doesn't do anything, Laravel allows us to use any design patterns, and any approaches out there.

So let's get back to the main topic. We usually use cache like this:

// for example, Country is an entity that we don't change much
// CountryController.php
public function index(): JsonResponse
{
    $countries = Cache::rememberForever(
        'countries-list',
        fn () => Country::query()->pluck('name', 'code'),
    );

    return new JsonResponse(compact('countries'));
}

public function store(CountryStoreRequest $request): JsonResponse
{
    $country = Country::create($request->validated());

    Cache::forget('countries-list');

    return new JsonResponse();
}

public function update(CountryUpdateRequest $request, Country $country): JsonResponse
{
    $country->update($request->validated());

    Cache::forget('countries-list');

    return new JsonResponse();
}

public function destroy(CountryDestroyRequest $request, Country $country)): JsonResponse
{
    $country->delete();

    Cache::forget('countries-list');

    return new JsonResponse();
}

The problems:

• Hardcoded cache key across the codebase, which can easily leak to human error when developing features.

• The literal 'countries-list' could be anything in the codebase, imagine a big codebase and you want to search for the cache stuff only, it's a nightmare.

And that's just for a fixed cache key, imagine you want to cache for specific users, or businesses, etc. The complex just becomes bigger.

The solution

From the statement above:

Laravel allows us to use any design patterns, and any approaches out there.

Yes, don't limit our implementation, let's add more spicy stuff into the codebase. Let's go above and beyond ✈️

I'll create an AbstractDataCache with some simple implementations:

<?php

namespace App\DataCache;

use Carbon\CarbonImmutable;
use Illuminate\Support\Facades\Cache;

abstract class AbstractDataCache
{
    /**
     * Concrete class must implement and return the cache key
     */
    abstract public function getCacheKey(): string;

    /**
     * Concrete class must know how to compute and return the data that need to be cached
     */
    abstract public function computeCache(): mixed;

    /**
     * By default, data will be cached for an hour
     *
     * @return CarbonImmutable
     */
    public function getCacheExpiration(): CarbonImmutable
    {
        return CarbonImmutable::now()->addHour();
    }

    public function get(): mixed
    {
        return Cache::remember(
            $this->getCacheKey(),
            $this->getCacheExpiration(),
            fn () => $this->computeCache()
        );
    }

    /**
     * Clear the cache data
     */
    public function clear(): void
    {
        Cache::forget($this->getCacheKey());
    }

    /**
     * Clear and re-cache the data
     */
    public function rebuild(): void
    {
        $this->clear();
        $this->get();
    }
}

Then I'll create CountriesListDataCache and extends and implements the required methods:

class CountriesListDataCache extends AbstractDataCache
{
    protected function getCacheKey(): string
    {
        return 'countries-list';
    }

    protected function computeCache(): array
    {
        return Country::query()->pluck('name', 'id');
    }

    protected function getCacheExpiration(): CarbonImmutable
    {
        return CarbonImmutable::now()->addYear();
    }
}

Taking into action:

public function index(CountriesListDataCache $dataCache): JsonResponse
{
    $countries = $dataCache->get();

    return new JsonResponse(compact('countries'));
}

public function store(
    CountryStoreRequest $request,
    CountriesListDataCache $dataCache
): JsonResponse {
    $country = Country::create($request->validated());

    $dataCache->rebuild(); // or clear

    return new JsonResponse();
}

Achievements

So with that, what do we achieve?

• A new layer to manage the caches (key, time, values)

  • No more hardcoded string or string concat/manipulation

  • No more duct tape caching stuff

• Maintaining the cache across the app is way better.

  • We also have a dedicated folder for cache stuff.

• Can use the dependency injection just fine.

• Testable and super easy-to-write test cases.

Q/A

• Q: What if I need some additional entities to compute the cache data?

  • A: pass them to the constructor and then you can use them normally fine (same approaches as Queue)

• Q: How to use dependency injection?

  • A: use the helper app function to get your desired instance for your computation.

    • Additionally, I'd love to make the computeCache as same as the handle of Queue class, will do soon

Conclusion

Well, that's that for the DataCache topic. I hope you guys enjoy it. I have been using that approach for some of my projects, so far so good.

If you have any other ideas or questions, comment below!

Cheers, and see you next time!

This command has been presented there for a while but I want to share it again 🥹

Before I usually do:

• php artisan make:migration CreateAbcTables

• php artisan make:model Abc

• php artisan make:factory Abc

• ...

It's quite a hassle, isn't it? But actually, there is a way to do it in 1 go 😎

The combination

php artisan make:model Article --migration --factory

Once hitting this one, it will create for us:

• Article model

• Migration (with Schema::create('articles', ...)), automatically do the "pluralize".

• Article Factory (optional - if you want to write tests)

Additional params

• --controller

• --resource

• --policy

• --seed

• --all: this will create everything 😆

IMO, I do think that model, migration & factory are good enough for the first go. We can create a controller or policy or else in later 🤗.

Additional tips

When creating a migration to change the schema of an existing table, try put the name like this:

• AddUserIdColumnToUsersTable

• ChangeAmountTypeInTransactionsTable

• DeleteUserIdFromEventsTable

Laravel will extract the middle part, transform the table into the snack_case, and prepare the base code for us

Schema::table('{your_table}', ...);

Save a bit of your time, eh? 🥹

Ending words

Thank you for reading this, I believe many of us already know & aware of these options. Save time and jump into productivity quicker.

Laravel is so beautiful 😍

Sometimes, somewhere, suddenly some ideas will arrive in our heads out of nowhere ⭐️. It is truly a bliss.

Don't waste those ideas and try to note or draft them ASAP. Later, we can review them deeply once again (in our free time) to see if it's viable & worth investing 😉.

Today I'll share with you guys the tools that I always use to draft my ideas. The factors that I choose for a great tool are:

• Easy to use

• Simple design

• Get started quickly

Note & Planning: Notion

Notion is awesome. Organizations around the world are using Notion every day.

Notion is really simple to use, we can create a quick page and note things as quickly as we can (on mobile). Once we get into our laptop/PC, we'll make the note become project info, planning, etc.

Worth mentioning: Notion is free (10 users) 🚀.

My usual template for a page:

# (Idea name)

## Information

Add the info and what it does

## Monetization

How to monetize the project?

## Competitors

Add the competitors (if any)

Diagram: Excalidraw

Excalidraw is a free diagram maker in the "hand-drawn" style. It makes the diagram feel like we drew it using the pencil 🥹.

I've been using Excalidraw and using their paid plan (organize & save the diagram on cloud, etc). It's really cool to add a bookmark "Draw diagram" and then draw things immediately 🤗.

Design ideas

Well, this one is tough lol. However, we can take reference from the competitors, premium designs, etc.

Then we can draw a simple site using either: Excalidraw or Figma.

Additionally, you can take the reference from TailwindUI or Flowbite (yeah I'm a fan of TailwindCSS, it's awesome).

Just make sure that your product will have a unique & awesome look 😎.

Conclusion

Well, that's all guys.

There is one suggestion left: before going to the planning & implementation, make sure to research the competitors (pricing, features, customers, etc). That's quite important to ensure that you don't waste your time or energy (or if you want to do it for learning, or coding purposes, well feel free to do so 🥰).

Thank you for reading and see you in the next post soon!

Today I'll share with you how to set up Gmail as the Email Client for your domain, and of course, it is totally FREE 😎.

We all know that when releasing a new product, especially if you're on the "solo" path, minimal cost would definitely help us do things in the long run 👀.

Email is one of the important things that we need to take care of. That's where customers will reach out to us, where we reply to them, and so on.

Email hosting costs around $1~$5 (e.g.: Google would cost $3.6 per month for the first year, and $7.2 for upcoming years).

Gmail is simply beautiful and has great UI/UX, mobile app, etc.

Introduce to ImprovMX

Home page: https://improvmx.com/

ImprovMX is a service that will forward emails to a configured email account. Basically, this is how it works:

Emails => ImprovMX => send to your Gmail account.

ImprovMV does offer a FREE version with fair usage. Even though your emails will be sent in the lower priority you don't have to worry, the delay would be around seconds.

Once you added your domain there, you can set rules like this:

• support@your-domain.com => your-gmail@gmail.com

• business@your-domain.com => your-other-gmail@gmail.com

• *@your-domain.com => your-fallback-gmail@gmail.com

Isn't it cool? 😎

How to send email using Gmail Client then?

Yup, here is the original guide from ImprovMX https://improvmx.com/guides/send-emails-using-gmail/

Basically, add a new sender email, do some verifications and you're all set 🚀.

PROs, CONs, and considerations

PROs

• FREE

• Easy setup

• Suitable for starter products and small teams (~10 people)

CONs

• You can't change the profile image of the sender's email.

Considerations

• Remember to add SPF, DKIM, and DMARC for better email deliverance (avoid "Spam")

• When your product is growing so well, consider switching to Google Worksuite. Imagine headcounts increase, you will have a big pain managing emails 🥹

Conclusion

Well that's it guys, that's a trick to help you guys in your early-stage solo products.

Happy friyay and thanks for reading!

Wanna share with you all a simple Vue composable function that lies in every Vue project of mine 😎.

Please meet the useLoading 🚀 A simple reusable composable that handles loading state flawlessly for you ❤️.

Before "useLoading", before composable

I (and most of us) have been using this kind of approach before composable 🤣

const isLoading = ref(false);

const loadUsers = async () => {
    isLoading.value = true;

    const res = await getUsers().catch(() => undefined)); // catch to avoid throw

    isLoading.value = false;

    users.value = res?.users ?? [];
};

onMounted(loadUsers);

So before when composable wasn't a thing, we likely had to copy/paste to every component that needed the isLoading indicator.

Vue's useLoading composable

With the composable introduced in Vue 3. It allows us to create multiple reusable pieces.

So I created this for my projects this bad boy. useLoading composable is a global one and can be reused everywhere.

// src/composables/useLoading.ts

import { ref } from 'vue';

export const useLoading = (initializedState = false) => {
  const isLoading = ref(initializedState);

  const startLoading = () => {
    isLoading.value = true;
  };

  const stopLoading = () => {
    isLoading.value = false;
  };

  const withLoading = (handler: () => Promise<void>) => async () => {
    if (isLoading.value) {
      return;
    }

    startLoading();

    await handler().catch((err) => console.error(err));

    stopLoading();
  };

  return {
    isLoading,
    startLoading,
    stopLoading,
    withLoading,
  };
};

Default usage

By default, you can manually trigger startLoading and stopLoading, then use isLoading to check the state.

const { isLoading, startLoading, stopLoading } = useLoading();

startLoading();
// do something so long here
stopLoading();

HoF: withLoading

The awesomeness comes from this bad boy 😎. Having a high-order function to wrap our logic/handlers there and it's automatically triggered startLoading on start and stopLoading on finished.

const { isLoading, withLoading } = useLoading();

const loadUsers = withLoading(async () => {
    const res = await getUsers().catch(() => undefined));
    users.value = res.users ?? [];
});

onMounted(loadUsers);

Not to mention, the withLoading will not trigger another call if isLoading === true , thus ensuring we don't dispatch a lot of API calls/handlers/etc by mistake 🛡️.

Moving forward

Not only useLoading, but also there are several cases which you could create as a composable and reuse:

• useError (error from API, error from FE, etc)

• useValidation (simple frontend validation)

• useRouteParams (return the Vue's router params in strict types)

• useRouteSearchParams (same as above but for URL Search Params aka GET params)

• and many more...

Closing topic

And that's that, I hope you will like the useLoading composable. I really like the HoF withLoading above.

Thanks for reading!

Authentication topic today 😎

We all know that Laravel ships the default Email & Password authentication for us. The good'ol traditional way.

However, it's 2024 now. By registering using Email & Password, then users have to verify their emails. It's way bad UX and reduces your sign-up rates.

The passwordless is here to save the day 😎

The PROs of using Passwordless Authentication

• Sign-up user flow will be really fast, with fewer inputs (or even 0 inputs) 😎

• The pain of remembering passwords is gone 🥰

• Save storage cuz we don't really store users' passwords (encrypted obviously) in our DB 🥹

• Verify the user's email in 1 go, 2 birds with 1 stone.

Laravel Passwordless Authentication - The Approaches

Social Auth

By utilizing Laravel Socialite, we can provide a quick sign-up/sign-in flow using:

• Google

• GitHub

• (or any awesome platform out there)

After users sign in, Laravel Socialite will give you some basic details: open id, full name, email, and profile picture.

Then simply do an upsert operation and Auth::login($user) to sign your user in 😎

Magic Link via Email

For this, we only need users to input their email and their names, and then we are all good 🌹

For this, you might need to implement your own generated_magic_links table, e.g:

• id

• user_id

• hash

You can create a temporary user with email_verified_at = NULL . Then send out the email using Laravel Mail feature.

On the user's first visit, you touch the email_verified_at , then log them in 🔥

Easy right?

Other ways

• Send SMS (cost more lol)

• Use TOTP (time-based one-time password as temporary password)

Considerations

• To increase the security, we can apply the two-factor authentication method after logging in.

Conclusions

My applications use Passwordless authentication, check out RenderPDF.io as an example 😎.

Using passwordless is really cool and hassle-free. Fewer inputs, a happier life.

Happy coding guys!

Today I'll share with you a tip that will skyrocket your production debugging workflow 😎

We're going to generate a unique ID for each request, which we can use the request ID to search for every related log of the given request ID.

Thus, if any issue happens, we can try to find the request ID (or customers give us), and then jump immediately to the logs and do the surgery 👀.

Pretty handy, isn't it? 💪

Let's jump to the topic & the implementation.

Requirement

You'll need Laravel 11 because we are going to use the Context feature.

If you haven't learned about Context, visit this page of mine:

• Laravel Context & how to use it in a maintainable way

Why Context?

Laravel's "context" capabilities enable you to capture, retrieve, and share information throughout requests, jobs, and commands executing within your application. This captured information is also included in logs written by your application, giving you deeper insight into the surrounding code execution history that occurred before a log entry was written and allowing you to trace execution flows throughout a distributed system.

Read more at: Laravel Context

In short terms:

• So if a context presents in the request's lifecycle, Laravel will automatically log it every time we write a log using Log facade

• Context is only available for each request, and queue job (Octane is covered too). There won't be any conflict or race condition.

Context::add('hello', 'world');
Log::info('Hello'); // you will see the [datetime] Hello { "contexts": { "hello": "world" } } in the log record

Implementation

Create a middleware to generate/accept ID

We'll have 2 scenarios:

• If there is a X-REQUEST-ID header with a valid ID, we'll continue to use that ID

  • This will help trace ALL REQUESTS of a particular user's lifecycle.

  • I'll use X-REQUEST-ID, you can use any key that you like 🥹.

• If not, we'll generate a new unique ID

Let's hit the command to create a new middleware:

php artisan make:middleware UseRequestId

And the implementation:

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Str;

class UseRequestId
{
    public function handle(Request $request, Closure $next): Response
    {
        // get existing id or generate new one
        $requestId = $request->header('X-REQUEST-ID')
            ?? (string) Str::ulid();

        // add to context
        Context::add('requestId', $requestId);

        return $next($request);
    }
}

Register the middleware

Since my application is an API service, I'll apply the middleware to the api group.

Open bootstrap/app.php and register it:

use App\Http\Middleware\UseRequestId;


->withMiddleware(function (Middleware $middleware) {
    $middleware->prependToGroup(UseRequestId::class);
})

Using prependToGroup to ensure this middleware will be resolved at the top (global => this middleware => other middleware of api group)

Add a route and try it out 🥰

Add a sample API

// api.php

Route::get('/ping', function () {
    Log::info('pong');

    return response()->json([]);
});

Open the log file to check (laravel.log for the basic driver or laravel-{date}.log for daily driver).

We should see something like:

[2024-04-28 13:22:59] local.INFO: Pong  {"requestId":"01HWJDZ12P3CE4JDY3912YSDEA"}

To ensure it will print the same request ID, you can try to log multiple times/multiple files in the same lifecycle. For example:

Log::info('ping');
// do something
Log::info('pong');
// do something more
Log::info('end');

Result:

[2024-04-28 13:26:35] local.INFO: ping  {"requestId":"01HWJE5MD8DQ24DBDN5R8TXK7K"}
[2024-04-28 13:26:35] local.INFO: pong  {"requestId":"01HWJE5MD8DQ24DBDN5R8TXK7K"}
[2024-04-28 13:26:35] local.INFO: end  {"requestId":"01HWJE5MD8DQ24DBDN5R8TXK7K"}

Context already covered & battle-tested from Laravel too 👀

Add the ID to the response

Last part, we need to send the ID to the API consumers, so they can send the same ID or for error reporting purposes.

We'll transform a bit of the middleware handle method:

/** @var \Illuminate\Http\Response $response */
$response = $next($request);

return $response->header('X-REQUEST-ID', $requestId);

When hitting the $next, Laravel will process everything and give us the FINAL RESPONSE (after Error/Exception too).

So we can add the ID into the header (or body if you want) 😉

Result

Now our requests are bound with request IDs. With means:

• Easier for us to search for logs of a given ID 😎 Debugging is much faster & better now.

  • If you use any logging platform, surely it can search wayyy faster than normal text search ❤️.

• Customers/API consumers can know their "request ID", if it has any issue, they can extract the request ID and report the problem to us 👀

• Additionally, you can record more data in the Context, e.g.:

  • Logged In User ID

  • URL

  • Timezone

  • etc

Conclusion

Well, happy coding & happy debugging guys.

Until the next blog post 😎. Thanks for reading!

I'm super excited to share with you all about my latest work - RenderPDF.io 😎

We all know that rendering HTML to PDF is not so fun and game.

You have to research a bunch of things, then try out a lot of CSS styling, and even have to install more libraries or deploy new stuff and manage them.

It's definitely time-consuming & hard to maintain, isn't it? But not anymore 🥰.

What is RenderPDF.io?

RenderPDF.io provides developer-friendly APIs to help people render their PDFs in seconds 🚀.

Just send us the HTML content and we'll respond with the rendered PDF file 🚀. Get rid of the hard & tedious work and focus on your features/delivery ⭐️.

You can find us at:

• Home page: https://renderpdf.io/

• Documentation: https://docs.renderpdf.io/

• Get FREE API Key: https://renderpdf.io/login (within a few clicks, I promised 😎)

Powered by the Chromium engine, enabling us to use any latest CSS styling and give you modern PDF files 🚀.

We have some examples on the home page, check them out 🔥.

Free Usage

Yes, Free users get 500 PDFs per month - the highest free usage compared to others out there 😎.

Examples

Integrate with RenderPDF.io using TypeScript

import axios from 'axios';

const httpClient = axios.create({
  baseUrl: 'https://renderpdf.io/api'
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
  },
});

export function renderPdf(htmlContent: string): Promise<string> {
  return httpClient.post('/pdfs/render-sync', {
    htmlContent,
    // add more options here if you need
  }).then((res) => res.data.fileUrl));
}

// a "Hello World" PDF ❤️
const pdfUrl = await renderPdf('Hello World');

Integrate with RenderPDF.io using PHP & Laravel, using HTTP Client Facade

use Illuminate\Support\Facades\Http;

$response = Http::withToken('YOUR_API_TOKEN')
    ->asJson()
    ->post('https://renderpdf.io/api/pdfs/render-sync', [
        'htmlContent' => 'Render me a PDF now!!!',
        // add more options here if you need
    ]);

// Your PDF is ready sir :muscle:
$fileUrl = $response->json('fileUrl');

Upcoming Features of RenderPDF.io

Indeed, it is still under elevating process and there will be more and more features upcoming soon to make your life easier 🥰:

• Free PDF templates 👀

• Document Template management 😎

• Template Editor 🔥

• and still thinking more hehe

Stays tuned.

Conclusion

Well, that's it. I hope you will like RenderPDF.io and give it a try, it is totally worth the try ❤️.

Happy weekend and see you all on the next tech talk 😉!

For everybody that has been upgraded to Laravel 11, cheers (me too). Laravel 11 has shipped a lot of bug fixes, improvements, and some new awesome features.

Today we'll talk about the Context - one of the new features of Laravel 11.

Laravel Context

Laravel Context is the easiest way to manage & share data in a request (or jobs, commands).

It's a layer to handle the shortage cache of your request.

Using PHP-FPM, we all know that every request is independent, thus allowing us to create static properties to store in-memory data and after the request ends, data will be flushed.

However, commands & jobs are different. They are long-lived processes, the data won't be flushed until the process ends. This makes thing harder to manage and share data.

• Same for Laravel Octane, our applications will be run in a long-lived process.

Won't be the case anymore, Laravel Context has our backs now 😎. It will ensure Context is only available during a request lifecycle (HTTP, Job, Command, and Octane's request).

Using Context

As same as how you using Cache facade:

Context::set('seth', $seth);
Context::get('seth');
Context::forget('seth');
// and so many others

Unlike Cache, you can store anything in-memory: string, int, Eloquent Model, Objects, etc which is really cool 😎.

All of them will be cleaned after the request ends.

Use Context in a lovely way

As we can see, whenever we need to use Context, we have to specify the $key

If we use hardcoded string, later it will become a big mess, and hard to track usage.

Let's create a simple class to access your context.

For example, I'll have this

namespace App\Contexts; // app/Contexts folder

use App\Models\ApiKey;
use Illuminate\Support\Facades\Context;

class CurrentApiKeyContext
{
    protected static string $key = 'currentApiKey';

    public static function set(ApiKey $apiKey): void
    {
        Context::add(static::$key, $apiKey);
    }

    public static function get(): ApiKey
    {
        return Context::get(static::$key);
    }
}

And when the authentication happens, I'd do:

namespace App\Http\Middleware;

use App\Contexts\CurrentApiKeyContext;

class AuthenticateApiKey
{
    public function handle(Request $request, Closure $next): Response
    {
        $apiKey = ApiKey::findByKey($request->bearerToken());
        if (!$apiKey) {
            return response()->json([], 401);
        }

        // set key
        CurrentApiKeyContext::set($apiKey);

        return $next($apiKey);
    }
}

After that, whenever I need to access the currentApiKey, I'd do:

use App\Contexts\CurrentApiKeyContext;

CurrentApiKeyContext::get(); // ApiKey instance

The PROs

• Your $key will be defined once and maintained inside a class

• Your data will be strictly-typed & IDE-friendly

  • No more /** @var ... */ pain, I feel that

• Easy to write unit test cases

The CONs

• You have a new layer to manage

Conclusion

Everything is a trade-off in tech, and since the PROs are better, why don't we go that? 😎

Let's just not make it work, let's make it better & easier to manage in a later stage ❤️.

Cheers, and happy Friday!

Weekend post again hehe 😎. I'd like to share my latest approach and I actually find it really cool 🥹.

I've been using PHP Enums not only for options, types, etc but also for Result responses now ⭐️

Lemme show you how it works and how awesome is that 🚀.

Results over Exceptions

This is one of the practices I've been using and I love it, I also have a post for that: No throws and happier life

TL;DR:

• Throw is slow

• Untyped

  • E.g. if your function throws 4 exceptions => 4 untyped paths.

• Increase production errors

  • Callers won't usually wrap the try/catch

• It reduces the reusable purpose of your function

I really like how this package neverthrow add their reasons as well:

Throwing and catching is very similar to using goto statements - in other words; it makes reasoning about your programs harder. Secondly, by using throw you make the assumption that the caller of your function is implementing catch. This is a known source of errors. Example: One dev throws and another dev uses the function without prior knowledge that the function will throw. Thus, and edge case has been left unhandled and now you have unhappy users, bosses, cats, etc.

With all that said, there are definitely good use cases for throwing in your program. But much less than you might think.

Use PHP Enum as the Result

Yeah, here come the main dishes 😎

Everything looks easier with a real-life example, so let's create a Result class for creating a Vacation Leave Request.

The Result class

I will create a CreateLeaveRequestResult

enum CreateLeaveRequestResult
{
    /**
     * When the creating leave request is overlap with 
     * another leave requests
     */
    case HAS_CONFLICTED_DATES;

    /**
     * When the user doesn't have enough leave balance
     */
    case INSUFFICIENT_BALANCE;

    /**
     * All good and can create a new leave request
     */
    case SUCCESS;
}

As we can see, with some simple notes & cases, we all know the outcome of the function that we are going to trigger. It makes our life easier ✅.

Handle logic and return the Result

I have a LeaveRequestService@create method like this:

class LeaveRequestService
{
    public function create(LeaveRequestData $leave): CreateLeaveRequestResult
    {
        if ($this->hasConflictedDates($leave)) {
            return CreateLeaveRequestResult::HAS_CONFLICTED_DATES;
        }

        if (!$this->hasEnoughBalance($leave)) {
            return CreateLeaveRequestResult::INSUFFICIENT_BALANCE;
        }

        // all good
        $leaveRequest = $this->createNewLeaveRequest($leave);

        // send notifcations or do anything
        // ...

        return CreateLeaveRequestResult::SUCCESS;
    }
}

Response in Controller

public function create(
    LeaveRequestService $service
    SubmitLeaveRequestRequest $request
): JsonResponse {
    $leave = $request->getLeaveRequestData();

    $result = $service->create($leave);
    if ($result !== CreateLeaveRequestResult::SUCCESS) {
        return new JsonResponse([
            'outcome' => $result->name,
        ], 400);
    }

    return new JsonResponse([
        'outcome' => 'SUCCESS',
    ]);
}

Awesome right? 😎

PROs

• Fully typed in your functions.

• Better than string/boolean response, especially for complex business logic/flows.

• Happier callers, we always know what we'll receive after triggering the functions.

Considerations

Include additional data when returning the result

Yes, we can, can do either:

• Create a new class which have the Enum result & your additional data

• Use my never-throw package (written in PHP)

  • Really want to make it as much as same as the TS's neverthrow but still haven't gotten there 🥹.

A bit of marketing

As you see in the above example. It relates to the PTO (personal time off) & Vacation tracker.

If your teams want a simple & awesome solution for that, try out Flamingo App 🦩.

It's lovely, gorgeous, super easy to use, and has an awesome notification system that ensures everybody is in the loop 📣.

Conclusions

Well, that's it guys. I really like this way - making my functions/methods become fully typed.

Happy weekend!

I've been working on a Laravel project (personal) for fun, focusing on the latest cool stuff: Laravel 11 & Reverb (from Broadcasting) ⭐️.

Using Laravel Broadcasting means you should use the client library provided by Laravel - Laravel Echo, to save a lot of your time setting up stuff 😎.

Even though Laravel Echo has been written in TypeScript, however, it doesn't give us any opportunity or battery to "type" our events 💣.

So that's why we have this topic and I'll show you how to define the types for your events 😉.

Before going deeper

I suppose you already have some knowledge about:

• TypeScript

• Websocket & how it works

• Laravel Broadcasting

🥹🥹🥹

The Define Types for Laravel Echo

Note: I'm demonstrating on the PresenceChannel (private channel with auth & more features).

Extending the "PresenceChannel"

I'll create a file called echo.ts and extend the PresenceChannel interface

type BaseEvent = {
  type: string;
  payload: unknown;
};

export interface StrictPresenceChannel<Event extends BaseEvent>
  extends PresenceChannel {
  listen<EventType extends Event['type']>(
    event: EventType,
    callback: (data: Extract<Event, { type: EventType }>['payload']) => void
  ): this;
}

This would be our base interface wrapper for the PresenceChannel.

In the real-life app, we would have multiple channels for communicating between client & server.

Each channel should extend the base interface and have its own Events declaration.

Defining Events

Following the BaseEvent structure, we need to define all of the Events that would be sent to the client.

For a sample chat app, I've added these events:

type ChatMessageAddedEvent = {
    type: 'ChatMessageAdded';
    payload: {
        fromUser: {
            id: string; // ULID
        },
        chat: {
            id: string;
            message: string;
        }
    }
}

type ChatImageAddedEvent = {
    type: 'ChatImageAdded';
    payload: {
        fromUser: {
            id: string; // ULID
        },
        chat: {
            id: string;
            imageUrl: string;
        }
    }
}

type ChatEvent = ChatMessageAddedEvent | ChatImageAddedEvent;

Don't forget to add a final type - a union of all events 😉, we'll use it in the part below.

Create a Channel and Extend the StrictPresenceChannel

I created a ChatChannel interface and added the ChatEvent union type.

export interface ChatChannel extends StrictPresenceChannel<ChatEvent> {}

A function to join the Typed-Channel

// getEchoInstance() is simply returning the new Echo({...})

export const getChatChannel = (channelId: string):  => {
  return getEchoInstance().join(channelId) as ChatChannel;
};

Here we have to hack a bit - using as to force the type.

This is the shortcut for a quick win & hassle-free while it won't result in any error or failure.

Use the Typed-Channel instance 😎

const channel = getRoomChannel(myChatChannel.id);

channel.listen('ChatMessageAdded', (data) => {
    // access data. & IDE will suggest the fields for you 
}).listen('ChatImageAdded', (data) => {
    // access data. & IDE will suggest the fields for you 
});

Then you're all set 😎 IDEs now will handle auto-suggestion, eslint/tsc can do the type check stuff in build time 💪

An example from my project:

Notes

Note: this is purely defining types, it won't guarantee that your data is 100% valid and it could go wrong from the end user 🙀.

I'll make another topic for schemas definition & data validation for Laravel Echo soon, ensuring the data is legit to use ⭐️.

Stay tuned 🚀

Conclusion

Well, that's basically it for defining types for your Broadcast Events 😎.

Have fun guys!