Forem: David Carr

15 years of blogging 500 posts later

David Carr — Thu, 02 May 2024 11:37:01 +0000

I started blogging in 2009 mainly documenting my learning while at University. Most of my early posts were very basic but proved useful to look back on when I had forgotten how to do something.

My classmates also found it useful to follow along on simple things like how to connect a PHP script to a MySQL database for example. Over the years my tutorials got more involved as I learned more.

I've managed to keep writing for the last 15 years, which is a massive achievement. I've seen many dev blogs come and go over the years. Writing regularly can be challenging, but I've found the best way to handle this is not to put myself under pressure and write only when I have something in mind, rather than forcing posts out.

Most of my posts document problem-solving.

Increase Knowledge

Writing blog posts significantly contributes to increasing knowledge. As you delve into various topics and subjects to write about, you inevitably learn more about them. This process involves researching, understanding, and translating complex information into a more digestible format. It's like teaching you learn more when you teach because you need to understand the subject matter deeply enough to explain it to others.

Moreover, blogging prompts you to stay updated with the latest trends and developments in your field. To produce relevant and timely content, you need to be aware of what's happening in your industry. This constant learning and staying abreast of new information expands your knowledge base.

Helping People

I enjoy helping others, and it's gratifying that over the years, my blog has assisted numerous developers worldwide. It has enabled me to connect with others and learn from them.

Many of my early posts were a direct result of participating in Facebook groups and answering PHP questions.

Helping to secure jobs

Having an active blog and engaging in open-source work has aided me in my job search. Interviewers have directly mentioned my packages and writing, stating that they already know me and have been following my work. Putting yourself out there can be intimidating, but it's well worth it.

In conclusion, blogging over the last 15 years has been a rewarding journey. It has not only helped to increase my knowledge base, but it has also provided a platform to assist others. The process of writing and sharing my experiences and learnings has been instrumental in connecting with others and staying updated with industry trends. Moreover, maintaining an active blog and participating in open-source work has significantly contributed to my professional growth. Despite the challenges, the benefits of blogging are well worth the effort. I look forward to continuing this journey, learning more, and sharing more in the years to come.

Customize Your Hashnode Blog Frontend with Headless Frontend and Laravel

David Carr — Fri, 12 Apr 2024 11:26:00 +0000

I've built a new site called headlessfrontend.dev

The first focus is using Hashnode's API to pull in your posts and pages into a Laravel application when using headless within your blog advanced settings page.

I'm using Headless mode with Hashnode on this blog, I'm a huge fan of this approach.

This allows me to still be part of the Hahsnode community and have my posts shared into the Hashnode feeds whilst being in full control over my frontend.

I really love Hashnode's editor and AI integration so this allows me to have the best of both worlds.

I can now have my blog as part of my site and not restricted to choose between a sub domain or a main domain with just hashnode content. I can mix and match. For instance my Packages, Books and Contact pages are all custom Laravel pages.

With headlessfrontend.dev pick a theme from the Hashnode category then pull in your blog posts by adding your hashnode URL into the .env file

HASHNODE_HOST=dcblog.dev

The laravel applications use Hashnode's GraphQL API to pull in:

Posts
Series
Pages
Followers
Nav Menu including their items for posts, series and pages
RSS feed
Favicon
Social icons (GitHub, Twitter, Facebook etc)
SEO meta tags
Team Logo (for teams) or Author Logo (for single publications)
About text
Newsletter integration
Search posts integration

This gives you full control over the design and layout.

Checkout headlessfrontend.dev for all available templates.

GitHub patch release previous version

David Carr — Wed, 07 Feb 2024 15:37:00 +0000

On Github you way from time to time need to patch release the previous version of a published release.

This took me longer than I care to admit to understand the steps involved. Hence I'm documenting them in this post.

Step 1: Check out the branch corresponding to the previous version of your code.

git checkout 7.3.0

Step 2: Fix the bug in the code.

Let's say it's a breaking change that's been fixed in the code.

Step 3: Commit the changes with a version number that indicates the patch release.

Commit the fix

git commit -m "Fix bug in 7.3.0"

Next, create a new tag

git tag 7.4.0

Step 4: Push the changes to the remote repository.

git push origin 7.4.0

Step 5: Create a new release for the patch version on GitHub.

Navigate to the main page of the repository on GitHub.com, click on the Releases tab, and then click on the "Draft a new release" button.

Step 6: Fill in the details for the release in the form, select the tag created from Step 3, and fill in the release notes.

Once you have filled in the details, click on the "Publish release" button to publish the release.

How to disable Laravel console commands

David Carr — Tue, 06 Feb 2024 11:37:46 +0000

Suppose you find yourself in a situation where you need to disable or intercept a console command in Laravel. This tutorial will primarily focus on how to intercept the php artisan migrate command. We'll delve into the command method app/Console/Kernel.php and explore how to prevent the migrate command from executing any actions.

Inside the command method of app/Console/Kernel.php

In Laravel 11 use routes/console.php

Intercept command

You can intercept php artisan migrate and, instead, catch it and use a closure.

Artisan::command('migrate', function () { //});

This would essentially stop the migrate command from doing anything.

You could then print a message out:

Artisan::command('migrate', function () { $this->info('Command NOT AVAILABLE. Use this: php artisan app:migrate');});

Running an alternative command:

To run a different command:

Artisan::command('migrate', function () { $this->call('app:migrate');});

In this case, a new command called app:migrate would be executed.

Run command with a --path option:

Artisan::command('migrate', function () { $this->call('app:migrate', ['--path' => 'database/migrations']);});

Now when running php artisan migrate you will get an error:

The "--path" option does not exist.

The reason for this is the custom command does not have a path option. Lets create the command and add the option.

Create a command:

php artisan make:command AppMigrate

This creates a class called AppMigrate.php inside app/Console/Commands

Change the signature to be app:migrate

<?phpnamespace App\Console\Commands;use Illuminate\Console\Command;class AppMigrate extends Command{ / *** The name and signature of the console command. * * @var string */ protected $signature = 'app:migrate'; /** * The console command description. * * @var string */ protected $description = 'Command description'; /** * Execute the console command. */ public function handle() { // }}

Now for this command to accept a path change the signature to accept a path.

protected $signature = 'app:migrate {--path= : The path to the migrations}';

Then inside the handle method collect the path.

public function handle(){ $path = $this->option('path') ?? 'database/other-path/migrations'; //rest of the logic ...}

The podcasts I listen to as a PHP developer

David Carr — Fri, 19 Jan 2024 15:32:24 +0000

The following are the podcasts I listen to. In no particular order. (That have episodes recently)

Listen to a podcast not listed? Please do comment and let me know.

APIs You Won't Hate (The Podcast)

"APIs You Won't Hate founders Phil Sturgeon and Mike Bifulco chat with devs and product builders from the API Developer Tools industry. Learn about news with API Tools, SDK Code generation, OpenAPI, API Documentation, Swagger, GraphQL, REST APIs, and gRPC."

https://apisyouwonthate.com/tag/podcast

Build your SAAS

"Interested in building your own SaaS company? Follow the journey of Transistor.fm as they bootstrap a podcast hosting startup."

https://saas.transistor.fm

Call it a Day

"The episodes will be about my coding and business life. This could be about PHP, Laravel, business decisions, speaking at conferences, my products and more."

https://callitaday.transistor.fm

Framework Friends

"Aaron Francis and Andrew Culver compare notes on their experiences as developers in the Laravel and Ruby on Rails ecosystems."

https://www.frameworkfriends.com

Frontmatter

"In Leanpub's Frontmatter podcast, we interview authors and special guests about their lives & careers, their areas of expertise and the issues of the moment, and their experiences as writers. Every episode is deeply researched and covers areas that are equally of human interest, general interest, and professional interest."

https://leanpub.com/podcasts/frontmatter

Grumpy Old Geeks

"Hosts Jason DeFillippo & Brian Schulmeister have over 40 years of professional website building experience between them. Every week they discuss what went wrong on the Internet and who's to blame."

https://www.gog.show

How to Code Well

"Web development discussions and interviews from Peter Fisher. Covering JavaScript, Linux, Docker, PHP, Python, MYSQL, HTML and more"

https://open.spotify.com/show/6zapPUKAuSjEZxrKR5fUxW

Laravel News Podcast

"The Laravel News podcast, with hosts Jacob Bennett and Michael Dyrynda , covers all the latest Laravel news, Packages, Events, and everything else new in the community. "

https://podcast.laravel-news.com/

Make Lemonade

"The show features various entrepreneurs, creators, business executives, and more all sharing their successes, failures, and everything else in between."

https://www.lemonsqueezy.com/blog/make-lemonade-podcast.

Mostly Technical

"Hosted by Ian Landsman and Aaron Francis, Mostly Technical is a lively discussion on Laravel, business, and an eclectic mix of related topics."

https://mostlytechnical.com

North meets South

"Jacob Bennett and Michael Dyrynda conquer a 14.5-hour time difference to talk about life as web developers"

https://www.northmeetssouth.audio

Over Engineered

"A podcast where we explore unimportant programming questions (mostly PHP/Laravel/JavaScript) in extreme detail."

https://overengineered.fm

Software Unscripted

"Software Unscripted, A weekly podcast of casual conversations about code hosted by Richard Feldman & sponsored by NoRedInk."

https://feeds.resonaterecordings.com/software-unscripted

Syntax

"A Tasty Treats Podcast for Web Developers"

https://syntax.fm

The Changelog

"Software's best weekly news brief, deep technical interviews & talk show"

https://changelog.com/podcast

The Laracasts Snippet

"The Laracasts snippet, each episode, offers a single thought on some aspect of web development."

https://laracasts.com/podcast

Laravel Podcast

"The Laravel Podcast brings you Laravel and PHP development news and discussion."

https://laravelpodcast.com/

Listen to a podcast not listed? Please do comment and let me know.

Creating Flexible Layouts in Laravel with Yields, Includes, and Slots

David Carr — Thu, 18 Jan 2024 09:29:46 +0000

Yields

In Laravel, the @yield directive is used in blade templates to define a section that can have code injected or "yielded" by child views.

Here's a basic explanation of how @yield works:

Defining a section with @yield('name')

In a blade file typically used for layouts (can be any *.blade.php file), you can use the @yield directive to define a section where content can be injected. For example:

layouts/app.blade.php

<html>
<head>
    <title>@yield('title') - {{ conifig('app.name') }}</title>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

In this example, there are two @yield directives: one for the 'title' section and another for the 'content' section.

In a child view that extends the parent view, you can use the @section directive to fill the sections defined in the parent view.

For example:

@extends('layouts.app')

@section('title', 'Page Title')

@section('content')
    <p>This is the content of the page.</p>
@endsection

In this example, the view extends from layouts/app.blade.php the blade.php is left off the path as Laravel will know the file by its name only.

Then fill the 'title' and 'content' sections using a @section directive. This directive can self-close like in the title example or enclose multiple lines like in the ‘content’ example.

When you render the child view, Laravel will combine the content of the child view with the layout defined in the parent view. The @yield directives in the parent view will be replaced with the content provided in the child view. php  The resulting HTML will be:

<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <div class="container">
        <p>This is the content of the page.</p>
    </div>
</body>
</html>

Includes

For more flexibility, you can break your views into smaller chunks using multiple views, for example:

@include('layouts.partials.header')

<div class="wrapper">
@yield('content')
</div>

@include('layouts.partials.footer')

This layout view uses both @include and @yield directives. An include is used to bring in other files into the current file where the @include is placed.

@include takes 2 arguments. A file path and optionally an array. By default, anything defined in the parent page is available to the included file but it’s better to be explicit by passing in an array.

For example:

@include('pages', ['items' => $arrayOfItems])

The above example would include a pages.blade.php file and pass in an array called items. Inside the view $pages could then be used.

@include('layouts.partials.header') would include a file called header.blade.php located in layouts/partials

Typically I define multiple yields in a header like this:

<html>
<head>
    @yield('meta')
    <title>@yield('title') - {{ config('app.name') }}</title>
    @yield('css')
</head>
<body>

</body>
@yield('js')
</html>

This allows me to inject code into various parts of my layout.

For example in a blog I want to use meta tags for that post only and no other pages. This means I cannot hardcode the meta tags and the contents should change from post to post.

Typically I would inject meta tags in a post view like this:

@section('meta')
<meta itemprop="name" content="{{ $post->title }}">
<meta itemprop="description" content="{!! strip_tags(Str::limit($post->description, 100)) !!}">
@if (!empty($post->image))
<meta itemprop="image" content="{{ url($post->image) }}">
@endif
<meta name='description' content='{!! strip_tags(Str::limit($post->description, 100)) !!}'>
<meta property="article:published_time" content="{{ $post->created_at }}" />
<meta property="article:modified_time" content="{{ $post->updated_at }}" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ url($post->slug) }}">
<meta property="og:title" content="{{ $post->title }}">
<meta property="og:description" content="{!! strip_tags(Str::limit($post->description, 100)) !!}">
@if (!empty($post->image))
    <meta property="og:image" content="{{ url(trim($post->image)) }}">
@endif

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@dcblogdev">
<meta name="twitter:creator" content="@dcblogdev">
<meta property="twitter:url" content="{{ url($post->slug) }}">
<meta property="twitter:title" content="{{ $post->title }}">
<meta property="twitter:description" content="{!! strip_tags(Str::limit($post->description, 100)) !!}">
@if (!empty($post->image))
    <meta property="twitter:image" content="{{ url(trim($post->image)) }}">
@endif
<link rel="canonical" href='{{ url($post->slug) }}'>
<link rel="webmention" href='https://webmention.io/dcblog.dev/webmention'>
<link rel="pingback" href="https://webmention.io/dcblog.dev/xmlrpc" />
<link rel="pingback" href="https://webmention.io/webmention?forward={{ url($post->slug) }}" />
@endSection

I may also inject CSS or Javascript from a single view, this is done in the same way:

@section('js')
<script>
    ...
</script>
@endSection

Slots

When working with components or Livewire you will come across the concept of slots.

What is a slot?

A $slot variable is a special variable used to reference the content that is passed into a component. Components are a way to create reusable and encapsulated pieces of view logic.

Here's a brief explanation of how $slot works within Laravel components:

Components

When you create a Blade component, you can define a slot within it using the {{ $slot }} syntax.

For example:

<!-- resources/views/components/alert.blade.php -->
<div class="alert">
    {{ $slot }}
</div>

In this example, the alert component has a slot where content can be injected.

When you use the component in another view, you can pass content into the slot using the component tag.

For example:

<!-- resources/views/welcome.blade.php -->
<x-alert>
    This is the content for the alert.
</x-alert>

In this example, the content "This is the content for the alert." is passed into the $slot of the alert component.

When the Blade view is rendered, Laravel will replace the {{ $slot }} in the component with the content provided when using the component. The resulting HTML will look like this:

<div class="alert">
    This is the content for the alert.
</div>

The $slot variable essentially acts as a placeholder for the content passed to the component.

Using $slot allows you to create flexible and reusable components that can accept different content each time they are used. It provides a convenient way to structure and organize your Blade templates while maintaining the reusability of components.

Using Component Layouts

Components can also be layout files, for example making a new component called AppLayout using Artisan:

php artisan make:component AppLayout

Will create 2 files:

app/View/Components/AppLayout.php
resources/views/components/app-layout.blade.php

Replace the contents of AppLayout.php with:

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class AppLayout extends Component
{
    /**
     * Get the view / contents that represents the component.
     */
    public function render(): View
    {
        return view('layouts.app');
    }
}

This will load a layouts/app.blade.php when rendered.

To have a view use this layout inside a view use the <x- directive followed by the component name in the kebab case. So AppLayout becomes app-layout

<x-app-layout>
    The content goes here.
</x-app-layout>

Now inside app.blade.php since this used the AppLayout component we don’t use @yield to have placeholders instead, we use {{ $slot }} or named slots

For example:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <title>{{ $title ?? null }} - {{ config('app.name', 'Laravel') }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

What are named slots?

In components, named slots provide a way to define and pass content into specific sections of a component. Unlike the default slot, which is referenced using, named slots allow you to define multiple distinct sections for injecting content. This can be particularly useful when you need to organize and structure different parts of your component.

Here's a basic explanation of how named slots work.

When creating a blade component, you can define named slots using the @slot directive. For example:

<!-- resources/views/components/alert.blade.php -->
<div class="alert">
    <div class="header">
        @slot('header')
            {{ $header ?? '' }}
        @endslot
    </div>

    <div class="content">
        {{ $slot }}
    </div>

    <div class="footer">
        @slot('footer')
            {{ $footer ?? '' }}
        @endslot
    </div>
</div>

In this example, the alert component has three named slots: 'header', 'footer', and the default slot, which is simply referred to as $slot.

When using the component in another blade view, you can pass content into the named slots using the component tag. For example:

<!-- resources/views/welcome.blade.php -->
<x-alert>
    <x-slot name="header">Alert Header</x-slot>
    This is the content for the alert.
    <x-slot name="footer">Alert Footer</x-slot>
</x-alert>

Here, content is provided for the 'header' and 'footer' named slots, in addition to the default slot.

When the blade view is rendered, Laravel will replace the content of the named slots in the component with the content provided when using the component. The resulting HTML will look like this:

<div class="alert">
    <div class="header">Alert Header</div>
    <div class="content">This is the content for the alert.</div>
    <div class="footer">Alert Footer</div>
</div>

Named slots provide a way to structure and organize the content of your components more explicitly. They make it easier to manage complex components with multiple distinct sections by giving each section a meaningful name.

Enhancing Laravel Applications with Traits: A Step-by-Step Guide

David Carr — Wed, 17 Jan 2024 08:17:33 +0000

What are traits?

Traits are a mechanism for code reuse. Traits allow you to create methods that can be used in multiple classes to avoid code duplication. They are intended to enhance traditional inheritance, enabling you to reuse sets of methods freely in several independent classes living in different class hierarchies.

Creating a Trait

Traits are classes nothing more, typically you would create them in a traits folder or concerns which has become quite popular in Laravel. I use a traits folder.

When the traits for written to be used in models I place the traits folder inside a app/Models folder.

The skeleton for a trait is as follows:

<?php

namespace App\Models\Traits;

trait HasUuid
{
    public static function booted()
    {
        ...
    }

}

Like any other class, a trait needs a namespace so it can be loaded.

Next name the trait in this example the trait is called HasUuid.

Inside the traits are either public methods that can be called or like in this case a named function that would be loaded automatically by Laravel using a special booted name.

Usage

To use the above trait in a model. The trait will be imported by calling its namespace use App\Models\Traits\HasUuid;

Then inside the class use followed by the trait name.

<?php

namespace App\Models;

use App\Models\Traits\HasUuid;

class Setting extends Model
{
    use HasUuid;

    ...
}

A complete UUID trait

In the above examples I’ve mentioned using a trait called HasUuid

The complete class:

<?php

namespace App\Models\Traits;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;

trait HasUuid
{
    public function getIncrementing(): bool
    {
        return false;
    }

    public function getKeyType(): string
    {
        return 'string';
    }

    public static function booted()
    {
        static::creating(function (Model $model) {
            // Set attribute for new model's primary key (ID) to an uuid.
            $model->setAttribute($model->getKeyName(), Str::uuid()->toString());
        });
    }
}

This trait contains 3 methods. In this case, they are all used internally by Laravel.

getIncrementing is used to turn off auto-incrementing ids in a database for a primary column.

getKeyType is used to override the getKeyType method, which is defined in the parent classes/interfaces. In Laravel, the getKeyType method is used to specify the data type of the primary key in the model associated with the trait.

In this specific example, the getKeyType method is hard coded to always return the string 'string'. This means that any model using this trait will have its primary key treated as a string type. For instance, if you have a model that uses this trait, and you retrieve its primary key type using $model->getKeyType(). it will always return string regardless of the actual data type of the primary key column in the database.

booted will be called automatically by Laravel, since the method will be called statically it must be defined as a static method.

Creating a custom trait.

In Laravel you can’t boot multiple traits so instead it's better to name a trait boot method in the format of bootHasName so a trait called HasRoles would be called bootHasRoles

This allows booting multiple traits and will still be called automatically when they are used inside other classes.

A common use case is building a multi-tenancy system. Where when a user is logged in then grab a column from the table such as tenant_id and then populate any model with the value of the current tenant.

This avoids having to define a tenend_id any time a model has a create event, this trait will automatically see the create, create, and populate a field called tenant_id and then apply a global function so only records matching this tenant will be used.

<?php

namespace App\Models\Traits;

use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model;

trait HasTenant
{
    public static function bootHasTenant(): void
    {
        if (auth()->check()) {
            $tenantId = auth()->user()->tenant_id;

            static::creating(function (Model $model) use ($tenantId) {
                $model->tenant_id = $tenantId;
            });

            static::addGlobalScope('tenant', function (Builder $builder) use ($tenantId) {
                $builder->where('tenant_id', $tenantId);
            });
        }
    }
}

To use both these examples in a single model:

<?php

namespace App\Models;

use App\Models\Traits\HasTenant;
use App\Models\Traits\HasUuid;
use Illuminate\Database\Eloquent\Model;

class Setting extends Model
{
    use HasTenant;
    use HasUuid;

    //rest of the model code
}

Conclusion

Traits in Laravel offer a powerful way to reuse code across different classes, thereby reducing code duplication. By utilizing concepts such as the HasUuid and HasRoles traits, Laravel applications can be made more efficient and maintainable.

Furthermore, Laravel's unique booting mechanism allows for the automatic execution of trait methods, simplifying the implementation of complex functionalities like multi-tenancy. Therefore, understanding and effectively using traits is an essential skill for any Laravel developer.

Laravel ApiResouce name nested route placeholder

David Carr — Thu, 11 Jan 2024 00:26:22 +0000

When using an ApiResource that has more than one placeholder it may seem tricky to figure out how to name the placeholder used.

For example, take this route:

Route::apiResource('users.tenant', UsersController::class);

This produces these routes

Now let's say we wanted to use {team} instead of {tenant}

How would you do it?

You may be tempted to drop ApiResource routes and manually create the routes so it's easy to name the placeholders such as:

Route::get('users/{user}/tenant', [UsersController::class, 'index'])->name('users.tenant.index'); Route::post('users/{user}/tenant', [UsersController::class, 'store'])->name('users.tenant.store');Route::get('users/{user}/tenant/{team}', [UsersController::class, 'show'])->name('users.tenant.show');Route::match(['put', 'patch'], 'users/{user}/tenant/{team}', [UsersController::class, 'update'])->name('users.tenant.update'); Route::delete('users/{user}/tenant/{team}', [UsersController::class, 'destroy'])->name('users.tenant.destroy');

While this will work, it would be better if an ApiResouce can still be used.

It can, instead of manually creating the routes we can rename the placeholders in two ways.

Route Parameter methods

1) Using parameter()

Route::apiResource('users.tenant', Users::class) ->parameter('tenant', 'team');

By setting parameter we can set the name of the existing placeholder and give it a new name.

2) use parameters()

Route::apiResource('users.tenant', Users::class)->parameters(['users' => 'author', 'tenant' => 'team']);

When you want to name more than one placeholder use parameters and pass in an array.

In this case, I've renamed users to author and tenant to team

Remember when setting the first placeholder, it has to match the route name. In this case users. If user was set the {user} placeholder would not be changed.

With either option, you can rename the placeholders whilst still using ApiResource This helps keep your routes file clean.

My process for writing Laravel packages

David Carr — Fri, 10 Nov 2023 20:51:07 +0000

Introduction

I was asked recently how I started when writing new Laravel packages.

In this post I'm going to build a new package called Laravel Tags it will take a string and replace placeholder tags kinda of like shortcodes.

For example, have a blog post that contains tags [year] or [appName] and have them replaced in the content.

So [year] would be replaced with the actual year. [appName] would be replaced with the Laravel application name.

Its usage will be:

$content = "This post was made in [year] on the application [appName]";
$content Tags::get($content);
//$content would now contain This post was made in 2023 on the application Laravel

How I organise my packages

On my machine, I have a package folder. From here I make a folder for each package.

I then load these into my projects using composer.json

In the require section load the package by its vendor name followed by the package name using @dev to load the main version.

"dcblogdev/laravel-tags": "@dev"

Next in order to load this, I tell composer where to find the files locally using a repository path:

"repositories": [
    {
        "type": "path",
        "url": "../../packages/laravel-tags"
    }
]

In this case, I need composer to look two folders above the current Laravel project.

Now run composer update to install the package into your Laravel project.

Whats good about this approach is you can do this with third-party packages. This is useful as you can run tests and add features that you plan to raise pull requests for.

Build package structure

You can use package starter kits such as https://github.com/spatie/package-skeleton-laravel

I tend to build packages from scratch or copy one of my existing packages and remove what I dont need.

In this post, I'm imagining building a package called laravel-tags

The folder structure will be:

https://github.com/dcblogdev/laravel-tags

license.md

For the license, I use The MIT license which allows users to freely use, copy, modify, merge, publish, distribute, sublicense, and sell the software and its associated documentation.

this file contains:

# The license

The MIT License (MIT)

Copyright (c) 2023 dcblogdev

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

composer.json

I'll start by adding a composer.json file that contains:

{
  "name": "dcblogdev/laravel-tags",
  "description": "A Laravel package for adding tags to your content",
  "license": "MIT",
  "authors": [
    {
      "name": "David Carr",
      "email": "dave@dcblog.dev",
      "homepage": "https://dcblog.dev"
    }
  ],
  "homepage": "https://github.com/dcblogdev/laravel-tags",
  "keywords": [
    "Laravel",
    "Tags"
  ],
  "require": {
    "php": "^8.1"
  },
  "require-dev": {
    "orchestra/testbench": "^8.0",
    "pestphp/pest": "^v2.24.2",
    "pestphp/pest-plugin-type-coverage": "^2.4",
    "laravel/pint": "^1.13",
    "mockery/mockery": "^1.6"
  },
  "autoload": {
    "psr-4": {
      "Dcblogdev\\Tags\\": "src/",
      "Dcblogdev\\Tags\\Tests\\": "tests"
    }
  },
  "autoload-dev": {
    "classmap": [
      "tests/TestCase.php"
    ]
  },
  "extra": {
    "laravel": {
      "providers": [
        "Dcblogdev\\Tags\\TagsServiceProvider"
      ],
      "aliases": {
        "Tags": "Dcblogdev\\Tags\\Facades\\Tags"
      }
    }
  },
  "config": {
    "allow-plugins": {
      "pestphp/pest-plugin": true
    }
  },
  "scripts": {
    "pest": "vendor/bin/pest --parallel",
    "pest-coverage": "vendor/bin/pest --coverage",
    "pest-type": "vendor/bin/pest --type-coverage",
    "pint": "vendor/bin/pint"
  }
}

Breaking this down, first, the package needs a name in the convention of vendor name and package name dcblogdev/laravel-tags in my case the vendor name is dcblogdev and the package name is laravel-tags

In a require-dev section, I import these third-party packages for development only.

testbench package allows you to use Laravel conventions for testing.
pest is my testing framework of choice
pint to apply styling conventions to my codebase.

"orchestra/testbench": "^8.0",
"pestphp/pest": "^v2.24.2",
"pestphp/pest-plugin-type-coverage": "^2.4",
"laravel/pint": "^1.13",
"mockery/mockery": "^1.6"

Inside autoload to any folders that you want composer to autoload. I have a folder called src which will contain the classes and tests for all the tests

One important aspect of this package name I'll often give the package a nickname to use so instead of using laravel-tags I'll use tags

I'll do this by using Tags in any class namespaces and creating an alias:

"extra": {
  "laravel": {
    "providers": [
      "Dcblogdev\\Tags\\TagsServiceProvider"
    ],
    "aliases": {
      "Tags": "Dcblogdev\\Tags\\Facades\\Tags"
    }
  }
}

Tests

Now I will create 2 folders:

src
tests

Inside tests I'll create these files:

TestCase.php

<?php

namespace Dcblogdev\Tags\Tests;

use Dcblogdev\Tags\TagsServiceProvider;
use Orchestra\Testbench\TestCase as Orchestra;

class TestCase extends Orchestra
{
    protected function getPackageProviders($app)
    {
        return [
            TagsServiceProvider::class,
        ];
    }

    protected function getEnvironmentSetUp($app)
    {
        $app['config']->set('database.default', 'mysql');
        $app['config']->set('database.connections.mysql', [
            'driver' => 'sqlite',
            'host' => '127.0.0.1',
            'database' => ':memory:',
            'prefix' => '',
        ]);
    }

    protected function defineDatabaseMigrations()
    {
        $this->loadLaravelMigrations();

        $this->loadMigrationsFrom(dirname( __DIR__ ).'/src/database/migrations');
    }
}

The methods getEnviromentSetup and defineDatabaseMigrations are not needed by default. They are only required if you need to use a database and load migrations.

Inside getPackageProviders the main package service provider is loaded.

Now create a file called Pest.php

<?php

use Dcblogdev\Tags\Tests\TestCase;

uses(TestCase::class)->in( __DIR__ );

This file calls a uses() function to load the testcase::class I'll use __DIR__ inside the in() method to make Pest use the TestCase class in the root of this directory.

Inside the package root create a phpunit.xml file containing:

<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
  <source>
    <include>
      <directory suffix=".php">src/</directory>
    </include>
  </source>
  <testsuites>
    <testsuite name="Test">
      <directory suffix="Test.php">./tests</directory>
    </testsuite>
  </testsuites>
  <php>
    <env name="APP_KEY" value="base64:2fl+Ktv64dkfl+Fuz4Qp/A75G2RTiWVA/ZoKZvp6fiiM10="/>
  </php>
</phpunit>

This sets the location for tests to read from, it's rare this file will need to be changed from this default.

I set an APP_KEY standard for running tests, its value is not important.

Pint

To set up find create a folder in the package root called pint.json I use the Laravel preset:

{ 
    "preset": "laravel" 
}

ReadMe

inside the project root create a file called readme.md to document the project, I typically use this format:

# Laravel Tags

Explain what the package does.

# Documentation and install instructions 
[https://docs.dcblog.dev/docs/laravel-tags](https://docs.dcblog.dev/docs/laravel-tags)

## Change log

Please see the [changelog][3] for more information on what has changed recently.

## Contributing

Contributions are welcome and will be fully credited.

Contributions are accepted via Pull Requests on [Github][4].

## Pull Requests

- **Document any change in behaviour** - Make sure the `readme.md` and any other relevant documentation are kept up-to-date.

- **Consider our release cycle** - We try to follow [SemVer v2.0.0][5]. Randomly breaking public APIs is not an option.

- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.

## Security

If you discover any security related issues, please email dave@dcblog.dev email instead of using the issue tracker.

## License

license. Please see the [license file][6] for more information.

ServiceProvider

Inside src create the service provider in my case TagsServiceProvider.php

<?php

namespace Dcblogdev\Tags;

use Illuminate\Support\ServiceProvider;

class TagsServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        $this->configurePublishing();
    }

    public function configurePublishing(): void
    {
        if (! $this->app->runningInConsole()) {
            return;
        }

        $this->publishes([
            __DIR__.'/../config/tags.php' => config_path('tags.php'),
        ], 'config');
    }

    public function register(): void
    {
        $this->mergeConfigFrom( __DIR__.'/../config/tags.php', 'tags');

        // Register the service the package provides.
        $this->app->singleton('tags', function () {
            return new Tags;
        });
    }

    public function provides(): array
    {
        return ['tags'];
    }
}

Inside the boot method list the methods, to begin with I only have one called configurePublishing This will publish any files defined in this page and will only run when the class is ran from a CLI

The register method allows a published config file to be merged in with a local ./config/tags.php config file

And set up the main class to be instantiated.

Facades

If you want to make use of facade ie have static called to a class that would normally be instantiated.

Inside src create a folder called facades and your class such as Tags.php

<?php

namespace Dcblogdev\Tags\Facades;

use Illuminate\Support\Facades\Facade;

class Tags extends Facade
{
    protected static function getFacadeAccessor(): string
    {
        return 'tags';
    }
}

This allows for calling the package's class and method in one show:

Tags::get();

Notice I did not have to instantiate a class in order to call its methods.

Building the Tags package

Now I have the basic structure in place I can concentrate on building the package functionality.

I will now create a Tags class this is the main class that will provide the modify any content I provide to it.

Inside src create a new class call it Tags.php

Set the namespace and class definition.

Next, I'll create a method called get that will accept a string of content.

<?php

namespace Dcblogdev\Tags;

class Tags
{
    public function get(string $content): string
    {
        //Current year
        $content = str_replace('[year]', date('Y'), $content);

        //Name of website
        $content = str_replace('[appName]', config('app.name'), $content);

        return $content;
    }
}

Inside get I use str_replace to replace tags with a value and finally return the modified content string.

This is very simple on purpose, lets add another tag [youtube url-here]

This youtube tag expects a URL of a video to be passed, and also a width and height can be passed.

This will return the embed code needed to play a youtube video.

//youtube embeds
$content = preg_replace_callback("(\[youtube (.*?)])is", function ($matches) {
    $params = $this->clean($matches);

    //if key exits use it
    $video = $params['//www.youtube.com/watch?v'];
    $width = ($params['width'] ?? '560');
    $height = ($params['height'] ?? '360');

    return "<iframe width='$width' height='$height' src='//www.youtube.com/embed/$video' frameborder='0' allowfullscreen></iframe>";
}, $content);

Now this is getting a little more interesting let's add our tests.

Create a file called TagsTest.php inside the tests folder.

Here's 2 simple tests that confirm [year] and [appName] get replaced as expected.

use Dcblogdev\Tags\Facades\Tags;

test('[year] sets the year', function () {
    $year = date('Y');
    $response = Tags::get('[year]');

    expect($response)->toBe($year);
});

test('[appName] sets the name of the app', function () {
    $response = Tags::get('[appName]');

    expect($response)->toBe('Laravel');
});

Next here is a test to confirm a YouTube video can be embedded:

test('can embed youtube videos', function () {
    $response = Tags::get('[youtube https://www.youtube.com/watch?v=cAzwfFPmghY]');

    expect($response)
        ->toBe("<iframe width='560' height='360' src='//www.youtube.com/embed/cAzwfFPmghY' frameborder='0' allowfullscreen></iframe>");
});

This requires more than a simple find and replace based on a tag now. The tag now has a wildcard so [youtube https://www.youtube.com/watch?v=ehLx-jO1LF0]

needs to be extract the id of the video from the url, also needs to handle other parms being passed.

Looking over the snippet for YouTube

//youtube embeds
$content = preg_replace_callback("(\[youtube (.*?)])is", function ($matches) {
    $params = $this->clean($matches);

    //if key exits use it
    $video = $params['//www.youtube.com/watch?v'];
    $width = ($params['width'] ?? '560');
    $height = ($params['height'] ?? '360');

    return "<iframe width='$width' height='$height' src='//www.youtube.com/embed/$video' frameborder='0' allowfullscreen></iframe>";
}, $content);

Notice this is calling a method called clean and passing in an array of $matches

Open The Tags.php class

Let's add 2 private methods clean and removeCharsFromString

private function clean(array|string $data): array
{
    // Check if $data is an array and extract the string to be processed.
    $stringToProcess = is_array($data) && isset($data[1]) ? $data[1] : $data;

    // Ensure that the stringToProcess is actually a string.
    if (!is_string($stringToProcess)) {
        // Handle error or return an empty array
        return [];
    }

    $parts = explode(' ', $stringToProcess);
    $params = [];

    foreach ($parts as $part) {
        if (!empty($part)) {
            if (str_contains($part, '=')) {
                [$name, $value] = explode('=', $part, 2);
                $value = $this->removeCharsFromString($value);
                $name = $this->removeCharsFromString($name);
                $params[$name] = $value;
            } else {
                $params[] = $this->removeCharsFromString($part);
            }
        }
    }

    return $params;
}

private function removeCharsFromString(string $value): string
{
    $search = ['http:', 'https:', '&quot;', '&rdquo;', '&rsquo;', ' '];
    return str_replace($search, '', $value);
}

the clean method takes an array or string and will removes anything inside removeCharsFromString and will separate something=value into ['something' = 'value']

Adding a few more tests:

test('can embed youtube videos', function () {
    $response = Tags::get('[youtube https://www.youtube.com/watch?v=cAzwfFPmghY]');

    expect($response)
        ->toBe("<iframe width='560' height='360' src='//www.youtube.com/embed/cAzwfFPmghY' frameborder='0' allowfullscreen></iframe>");
});

test('can embed youtube videos with width and height', function () {
    $response = Tags::get('[youtube https://www.youtube.com/watch?v=cAzwfFPmghY width=100 height=100]');

    expect($response)
        ->toBe("<iframe width='100' height='100' src='//www.youtube.com/embed/cAzwfFPmghY' frameborder='0' allowfullscreen></iframe>");
});

test('can embed youtube videos with height', function () {
    $response = Tags::get('[youtube https://www.youtube.com/watch?v=cAzwfFPmghY height=100]');

    expect($response)
        ->toBe("<iframe width='560' height='100' src='//www.youtube.com/embed/cAzwfFPmghY' frameborder='0' allowfullscreen></iframe>");
});

These will confirm all tags work as expected.

Publish to GitHub

Create a new repo on Github https://github.com/new

Enter a repository name in my case laravel-tags

I don't change any other settings and click Create Repository

I don't want anything committed to the repo, I want it empty so I can upload it from my machine.

Git setup

Now go back to your codebase and initialse git in the terminal at the project root type:

git init

This will initalise GIT,

Next, add and commit your files

git add .
git commit -m 'first commit

Can link your local GIT repo to the GitHub repo replace dcblogdev with your GitHub username and laravel-tags with the name of your package.

git remote add origin git@github.com:dcblogdev/laravel-tags.git

Push up your code using:

git push -u origin main

From now on you can push up using just git push

Create a release on GitHub

Once you're happy with the package and ready to publish a release follow these steps:

To to the releases page of your project on GitHub and click create release or use the following URL (replace dcblogdev/laravel-tags with your version)

https://github.com/dcblogdev/laravel-tags/releases/new

Enter a tag I prefer to start my packages with v1.0.0 then enter your release notes and click attach binaries to upload a zip of your package and finally press Publish release This will publish a new release.

Using GitHub CLI

This is a long process, I prefer to create a release from the terminal using GitHub's CLI read more about it at https://cli.github.com/

Once this is installed I create a release with this command:

gh release create v1.0.0

Press enter and a prompt will ask you the following questions.

Go through and then select Publish release press enter.

Now a release has been created on GitHub

Publish package

In order to be able to install the package on your applications and not have to tell composer where to find the package from a local folder the package can be set-up on a website called Packagist https://packagist.org/packages/submit

Enter the URL to your package on GitHub and press Check. If there are other packages with the same name Packagist will show them, if you're sure you want to publish your version press submit to continue.

Once completed the page will show your package:

In order for the package to be installable ensure you've issued a release on GitHub otherwise you may get this error:

Could not find a version of package dcblogdev/laravel-tags matching your minimum-stability (stable). Require it with

an explicit version constraint allowing its desired stability.

Resources

For more details on Laravel Package development read https://www.laravelpackage.com

Running HTTP requests in PhpStorm

David Carr — Tue, 10 Oct 2023 19:48:38 +0000

Running API tests you may be tempted to open PostMan or another API client, did you know, you can run HTTP requests from inside PhpStorm directly?

When developing a new API, you will want to run the API endpoints. Being able to run them without leaving PhpStorm speeds up your workflow.

To start a request file, you can either select a HTTP Request file when using the new file or create a new scratch file.

For a scratch file select the HTTP Request type.

In either case a file ending in .http for example scratch.http You can name the file anything you like and have multiple files.

The difference between having .http files in your projects and a scratch file is a scratch file is only stored in your .idea folder and not inside your project files, (outside of version control.

Demo API

Throughout this post, I will be using a sample public API https://reqres.in/

Request Format

To create a request enter the type of request (GET, POST, PUT, PATCH, DELETE) followed by the URL to fetch.

You can also set headers by typing them in the format of key:value

If you need to pass through a body then type that out with a line break in a json format.

Use ### to separate each request.

Method Request-URI HTTP-Version
Header-field: Header-value

Request-Body
###

Get Request

To create a GET request type GET followed by the URL to fetch.

You can also set headers by typing them in the format of key:value

GET https://reqres.in/api/users

Press the play button to the left of the request to run. This executes the request and shows the API response.

POST Request

In this example, I will create a new user by sending a POST request to the URL with a payload containing a name and job.

POST https://reqres.in/api/users

{
    "name": "morpheus",
    "job": "leader"
}

PATCH/PUT Request

In this example, I will update a user by sending a PATCH request to the URL with a payload containing a name and job.

PUT can also be used

PATCH https://reqres.in/api/users/2

{
    "name": "joe"
}

Delete Request

In this example, I will delete a user by sending a DELETE request to the URL.

DELETE https://reqres.in/api/users/2

Authorization header

If you need to authenticate with an API say in the format of a bearer token this is done by passing in an authorization header:


GET http://domain.com/v1.0/contacts
Accept: application/json
Content-Type: application/json
Authorization: Bearer 45|vAc8...

For more details read the official docs

Extracting a time into select menus with PHP

David Carr — Thu, 05 Oct 2023 23:00:00 +0000

When storing time in a database, often I'll store this in a time format such as 14:25:00 When populating this in a form I'll either use a time picker or use a plain select menu a separate menu for each element.

That begs the question how do you separate the time into seperate elements?

Making use of explode can work. Exploding where there a : so:

$parts = explode(':', '14:25:00');

This would result in an array:

[
    "14",
    "25",
    "00",
]

To use an element you can refer to its index for example $parts[0] would contain 14

Using them by their index is fine to do but kinda messy.

I prefer to give each element a name using the list function

list($hours, $minutes, $seconds) = explode(':', '14:25:00');

When using list() passing an array to it will allow you to name each index of the array in the order listed.

Putting this into practice I like to define the null versions before using list to ensure the variables will exist.

$estimatedTime = 14:25:00;

$estimatedHour = null;
$estimatedMinute = null;
$estimatedSeconds = null;

list($estimatedHour, $estimatedMinute, $estimatedSeconds) = explode(':', $estimatedTime);

Now we have the variables that can be used in select menus:

note I'm using Blade syntax here for readability.

<select name="estimatedTime_hour">
    <option value="0">Hours</option>
    @foreach(range(0,23) as $hour)
        <option value="{{ $hour }}" {{ old('estimatedTime_hour', $estimatedHour) == $hour ? 'selected=selected' : '' }}>{{ $hour }}</option>
    @endforeach
</select>

<select name="estimatedTime_minute">
    <option value="0">Minutes</option>
    @foreach(range(0,59) as $minute)
        <option value="{{ $minute }}" {{ old('estimatedTime_minute', $estimatedMinute) == $hour ? 'selected=selected' : '' }}>{{ $minute }}</option>
    @endforeach
</select>

<select name="estimatedTime_second">
    <option value="0">Seconds</option>
    @foreach(range(0,59) as $second)
        <option value="{{ $second }}" {{ old('estimatedTime_second', $estimatedSeconds) == $hour ? 'selected=selected' : '' }}>{{ $second }}</option>
    @endforeach
</select>

For each time segment I have a separate select menu. Each selection uses a range function to generate an array of items. For example, range(0,23) will return an array containing all numbers between 0 and 23.

To ensure the time segment selects the correct array index inside the loop compare the the row against the time segment:

$estimatedSeconds == $hour

When they match then print selected=selected to ensure the menu selects that time segment.

This is a simple but powerful pattern.

Vue show and hide form elements

David Carr — Wed, 04 Oct 2023 07:07:20 +0000

Introduction

When working with forms, it is common to display or conceal various fields based on the options selected.

I'll use Vue to conditionally show or hide form elements.

In this example, I'm going to use an SFC (Single File Component) for ease of us. You'll see this in full in the putting it all together section below.

For this to work it does not need to use a SFC, the HTML and JS will work when used in traditional setups i.e. having JS in javascript blocks and the HTML in a page's body.

Creating the form elements

Here I have 2 select elements, imagine the insurance type should only be displayed if the answer to Do you want insurance? was Yes

<div>
  <label for="insurance">Do you want insurance?</label>
  <select id="insurance">
    <option value="">Select</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

Binding Form Elements

First, we need to create variables to bind the elements. Inside a script tag define a const for each element.

<script setup>
import {ref} from "vue";

const insurance = ref();
const insuranceType = ref();
</script>

Notice that ref is imported from Vue, as by default, no directives are available for variables.

ref() allows the variable to be reactive, meaning that Vue will monitor it and re-render the action whenever its state changes.

To bind the elements with the variables use v-model this creates a 2-way binding.

<div>
  <label for="insurance">Do you want insurance?</label>
  <select id="insurance" v-model="insurance">
    <option value="">Select</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType" v-model="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

Show / Hide elements select

Now to only show the insurance type when the question Do you want insurance? is set to Yes

This can be accomplished by wrapping the second select in a div and using a v-show directive.

<div v-show="insurance === 'Yes'">

v-show takes a condition that has a truthy value, this must equate to true or false. When true the body of the div will be displayed, otherwise its not rendered to the page.

<div>
<label for="insurance">Do you want insurance?</label>
<select id="insurance" v-model="insurance">
  <option value="">Select</option>
  <option>Yes</option>
  <option>No</option>
</select>
</div>

<div v-show="insurance === 'Yes'">

  <div>
    <label for="insuranceType">Insurance Type</label>
    <select id="insuranceType" v-model="insuranceType">
      <option value="">Select</option>
      <option>Home</option>
      <option>Travel</option>
    </select>
  </div>

</div>

Taking this a step further have additional select elements that only appear when an insurance type is selected.

I have 2 divs that will only render when the insuranceType value matches either Home or Travel which matches the option selected from the Insurance Type select menu.

<div>
  <label for="insuranceType">Insurance Type</label>
  <select id="insuranceType" v-model="insuranceType">
    <option value="">Select</option>
    <option>Home</option>
    <option>Travel</option>
  </select>
</div>

<div v-show="insuranceType === 'Home'">
  <p>Home Details</p>
</div>

<div v-show="insuranceType === 'Travel'">
  <p>Travel Details</p>
</div>

Show or hide checkbox

What about when you have a checkbox that should render markup but only when it's checked, how may that work?

Let's create a input element with a type of checkbox, we'll v-model bind a variable called addAComment:

<div>
  <label for="addAComment">Add a comment?</label>
  <input id="addAComment" type="checkbox" v-model="addAComment">
</div>

Update the Javascript:

const addAComment = ref();

Now add a v-model to the checkbox

Next, create a div with a v-show this time it only needs the variable, when the checkbox is set it will have a value otherwise it will not. This is enough to activate v-show

<div>
  <label for="addAComment">Add a comment?</label>
  <input id="addAComment" type="checkbox" v-model="addAComment">
</div>

<div v-show="addAComment">

  <div>
    <label for="comment">Comment</label><br>
    <textarea id="comment" v-model="comment"></textarea><br>
    {{ comment }}
  </div>

</div>

Putting it all together

<script setup>
import {ref} from "vue";

const insurance = ref();
const insuranceType = ref();
const addAComment = ref();
const comment = ref();
</script>

<template>

  <div>
    <label for="insurance">Do you want insurance?</label>
    <select id="insurance" v-model="insurance">
      <option value="">Select</option>
      <option>Yes</option>
      <option>No</option>
    </select>
  </div>

  <div v-show="insurance === 'Yes'">

    <div>
      <label for="insuranceType">Insurance Type</label>
      <select id="insuranceType" v-model="insuranceType">
        <option value="">Select</option>
        <option>Home</option>
        <option>Travel</option>
      </select>
    </div>

    <div v-show="insuranceType === 'Home'">
      <p>Home Details</p>
    </div>

    <div v-show="insuranceType === 'Travel'">
      <p>Travel Details</p>
    </div>

  </div>

  <div>
    <label for="addAComment">Add a comment?</label>
    <input id="addAComment" type="checkbox" v-model="addAComment">
  </div>

  <div v-show="addAComment">

    <div>
      <label for="comment">Comment</label><br>
      <textarea id="comment" v-model="comment"></textarea><br>
      {{ comment }}
    </div>

  </div>

</template>

<style>
label {
  padding-right: 5px;
}
</style>

How v-show differs from v-if

It's important to note that v-show and v-if serve similar purposes in controlling element visibility, but they have some key differences:

v-show: The element is always rendered in the DOM, but its CSS display property is toggled between none and the original value (e.g., block, inline, etc.) to show or hide it. This makes it more efficient for elements that frequently toggle between visible and hidden states.

v-if: The element is conditionally created or destroyed in the DOM. When the condition is false, the element is completely removed from the DOM. This can be more efficient when you have elements that are rarely used or have complex rendering logic, as they are not in the DOM until needed.