DEV Community: Sam

Code Block Click Copy

Sam — Tue, 09 Dec 2025 20:51:41 +0000

I'm a back-end leaning full stack developer, so after a whole day of combing through and fixing someone else's JavaScript code all day at work, there was no better way to blow off some steam while I sat waiting for my kid to finish his Taekwondo lesson than to read through and re-write my latest addition to this site.

Adding copy to clipboard functionality to code blocks

The latest addition I refer to was adding little "copy to clipboard" buttons in the corners of my example code blocks throughout this site. I always find them helpful when they're available on documentation or tutorial sites, so I'd spent a couple of hours last night adding the necessary stylesheets for pretty code blocks and then going through the Hugo forums seeing how others had tackled this. I was grateful to stumble across a discussion in which someone had kindly provided a whole example repo/branch so I pulled it down and cherry-picked the parts that made it all tick, created a package.json file and ran npm ci. Boom! We had a cool little copy icon in the corner of every code block.

Excitedly I pushed all my changes, which triggered the deployment workflows, and a minute later it was live and I was going through all my old articles marvelling at the copy-pasta-ness of it all. But... the pages felt that tiny bit slower to load. They had lost that snap that had been the whole reason I was so enamored with Hugo built static sites in the first place. So before going to bed, I had a closer look at the actual contents of the package.json and was reminded of why the JavaScript ecosystem gets so much stick all the time. No less than four libraries were "required" to render these tiny icons and copy stuff to the user's clipboard. That's bonkers. So I did some [over]due diligence and learned about the Clipboard API which had full support in most browsers since ages ago. Why wasn't I just using that?

Let's just use that!

Using Clipboard.js in a Hugo site

I would certainly not have been able to write this all from scratch, even with a solid understanding of the API, but I didn't have to. I already had what was shown here as a starting point, so it was simple to break down the steps of what needed to be done. We'll break down the function that does the heavy lifting addCopyToClipboardButtons(containerClass, buttonClass = 'copy-button') here:

i. Create and add the button to each of the code block 'containers'

  const containers = document.querySelectorAll(`.${containerClass}`);

  containers.forEach(container => {
    const button = document.createElement('button');
    button.className = buttonClass;
    button.innerHTML = icons.faCopyRegular;
    container.prepend(button);
  });

ii. Create the clipboard object, the most of which is handled by the main dependency

  const clipboard = new ClipboardJS(`.${buttonClass}`, {
    target: function(trigger) {
      return trigger.nextElementSibling;
    }
  });

iii. Handle a successful copy operation

  clipboard.on('success', (e) => {
    if (e.action === 'copy') {
      const originalIcon = e.trigger.innerHTML;
      e.trigger.innerHTML = icons.faCheck;

      setTimeout(() => {
        e.trigger.innerHTML = originalIcon;
        e.clearSelection();
      }, iconChangeTimeout);
    }

  });

iv. Handle an error during a copy operation

  clipboard.on('error', (e) => {
    console.error('ClipboardJS Error:', e.action, e.trigger);

    const originalIcon = e.trigger.innerHTML;
    e.trigger.innerHTML = icons.faBomb; // Assuming you have a cross or 'times' icon

    setTimeout(() => {
      e.trigger.innerHTML = originalIcon;
    }, iconChangeTimeout);
  });

It's actually quite elegant as it is, the only gripe I really had with it is that it requires loading a whole bunch of stuff that likely unused. So based on this, we can quite easily swap out the parts that matter.

Copy to clipboard buttons in Hugo with vanilla JavaScript

Step 1 of the above breakdown is actually perfect as it is. There is nothing other than native JS and we end up with some useful bits we can come back to later.

Step 2 is where we can start to swap out the library for the native API. I had them side by side as I was working out the bugs so we'll give it a "new" name for now

  const newClipboard = window.navigator.clipboard

Next, our main difference between the ClipboardJS implementation and the native API is that the former is very similar to jquery and offers an on() method to deal with either a success or failed operation, while the latter is more aligned with the fetch() API which has then() and catch() methods for dealing with the successfully resolved promise or the failure to do so. This means, that unlike our steps 3 and 4 above being totally separated, we can write a more "try/catch" (hooray for PHP) style chain of instructions.

containers.forEach(container => {
    const button = container.querySelector(`.${buttonClass}`);
    button.addEventListener('click', function () {
      const text = this.nextElementSibling.textContent;
      newClipboard.writeText(text)
        .then(() => {
          const originalIcon = this.innerHTML;
          this.innerHTML = icons.faCheck;

          setTimeout(() => {
            this.innerHTML = originalIcon;
          }, iconChangeTimeout);
        })
        .catch((e) => {
          console.error('Error copying to clipboard:', e.action, e.trigger);

          const originalIcon = this.innerHTML;
          this.innerHTML = icons.faBomb;

          setTimeout(() => {
            this.innerHTML = originalIcon;
          }, iconChangeTimeout);
        });
    });
  });

This actually reads quite nicely already for describing what it is doing:

Grab our containers
For each of them;
1. Find the button
2. Add a click event listener in which we;
  1. Capture the next element sibling's text content (Our demonstration code)
  2. Write that text to the operating system's clipboard
  3. Then do nice things like show the user something has happened by swapping the icon to a check mark
  4. If there was an error, show a bomb icon instead and write the error to the console
  5. After a set amount of time, swap the icon back to the clipboard icon

Now that it's converted, we can see how simple this action really is. That means that there is room for improvement! Did you notice how we've got a couple of places where we're repeating actions or redeclaring the same thing? By moving one of the const declarations up a scope level, it becomes accessible everywhere it is required, and we also seem to be doing two nested forEach loops of the same things. In the end I thought this was a nice enough level of squished to retain it's readability and still work just as we want it to.

import * as icons from './icons.js'

function addCopyToClipboardButtons() {
  const iconChangeTimeout = 1300;
  const containers = document.querySelectorAll('.highlight');

  containers.forEach(container => {
    const button = document.createElement('button');
    button.className = 'copy-button';
    button.innerHTML = icons.faCopyRegular;
    container.prepend(button);

    button.addEventListener('click', function () {
      const originalIcon = this.innerHTML;
      const text = this.nextElementSibling.textContent;
      window.navigator.clipboard.writeText(text)
        .then(() => {
          this.innerHTML = icons.faCheck;

          setTimeout(() => {
            this.innerHTML = originalIcon;
          }, iconChangeTimeout);
        })
        .catch((e) => {
          console.error('Error copying to clipboard:', e.action, e.trigger);

          this.innerHTML = icons.faBomb;

          setTimeout(() => {
            this.innerHTML = originalIcon;
          }, iconChangeTimeout);
        });
    });
  });
}

export { addCopyToClipboardButtons }

It's very likely that there are further optimisations that could be made. The setTimeout()s could probably go on one line, for instance, but as I said, I was waiting for a Taekwondo lesson to finish, and at this point, it did, so that's as far as I went.

Once I got home I went and did my favourite thing to do and went through my files and hit delete on package.json, package-lock.json and all of node_modules and even got to go back into my .github/workflows/*.yaml files and remove the entire JS build step 🎉. And then I took the great feeling that gave me and came straight into a new markdown file and started writing out this here post.

Seeing how simple yet powerful modern JavaScript can be does make me appreciate this strange little language at times. And when it is put together with something as fast and elegant as a nice static website? Forget about it. So Go Hugo some sites and see what else can be wrangled!

Tum | Modo | Postea

Sam — Tue, 09 Dec 2025 20:38:40 +0000

tūm (pronounced /tuːm/) — “then,” “at that moment”; here, a glance back at what once was and the moments that shaped the beginning.

mŏdō (pronounced /ˈmɔ.doː/) — “just now,” “only now”; a grounding in the present, the point of clarity from which everything is assessed.

postĕā (pronounced /ˈpɔs.tɛ.aː/) — “afterward,” “later on”; a forward-looking view toward what may unfold from this moment onward.

Given that I've re-kindled my interest in this little blog of mine, and that it's almost Christmas, it seems a fitting time to get a bit Charles Dickens and have a look at my past, present and future. Part of the reason I have picked this thing back up is that I finally feel settled in the job I've been at for a few years and actually have a bit of time now because I'm not constantly trying to catch up with everyone. Not that having been in a catch up loop was a bad thing, it was nothing short of a huge opportunity to learn a tonne and really add some serious strings to my web developer bow. I think it's going to be a very worthwhile exercise to look back at where I was when I started out, honestly assess where I'm at currently and then see what avenues I think Id like to go down in the not too distant future.

Then

Back in November 2023, I took my first flight back to the UK for work to attend my initial training for a job at Fusions PIM ltd. I had already been working in web development and with Laravel for a couple of years, so wasn't totally green. My CV at the time listed core skills like:

Laravel (2 years experience)
- Built customer requested features into an existing project
- Built a CRM and knowledge base for a subscription based retail company from scratch
Docker
- Comfortable working in development containers
- Hosting dockerised web applications on bare servers
- Using containers to "try out" different elements of tech stacks
Open Source
- Started and managed a small web crawler project aimed at offering beginners an opportunity to try out OSS

In fairness, I'd not made a bad start considering my first experience with any of this world was when I did my first Laracasts tutorial in 2021. But my actual real world experience, and impact on the actual industry would not have even registered as negligible. Looking back I'm a little astonished that this long established company took a punt on me, but I'm very glad they did.

What I lacked in experience I tried my best to make up for with soft skills like clear communication, not being afraid to look a bit daft by asking a silly question and apart from that just trying really hard to up my levels constantly. I'd been lucky before where I had worked in that I had a huge amount of freedom to manage myself and my workload, and that did not change when I arrived here, even though the company technically had to be more "organised" to allow for customer transparency and coordination. So I'd work on what I needed to work on, I could literally ask any one of my new colleagues for advice or help as and when I needed it and I still had time to just read and read and read. The reason this reading experience was so valuable was that the codebase I as now working in had been around since long before I'd learned even a single function of PHP. Some of the classes had syntax from years ago. A true legacy monster. Even though a great deal of it had been already converted into a Laravel app, there were still plenty of old quirks that were too fundamental to the business to risk chopping and changing them, so they were just as they were. It was kind of like being locked in a time-rift, but that had more benefits than I realised at the time.

Some context of the conversion in progress;

The application had already had a very similar structure to that of a Laravel app from the start
Many of the Symfony components that Laravel is built on top of were already being used
The parts that differed most in the application were to do with more old fashioned security concerns

Now

Skip ahead a few years and that same mysterious and enormous PHP application that was half-of-yesteryear has been converted almost 100% to a modern Laravel app, through the efforts of colleagues old and new and of myself. The main takeaway I had from being a part of this conversion was that I had to gain a deeper understanding of the Laravel framework because the parts that were left to convert were the more challenging ones, which makes sense as they'd have been bonkers to have not started the conversion before I got there with anything other than the easier parts. I think the areas I got my teeth into the most were Eloquent and Commands, but I definitely was routing around in almost all areas of the framework codebase.

Eloquent

A lot of the older parts of the codebase I was working on used proper old school PHP syntax of $sql = 'SELECT * FROM `some_table` WHERE `x` = 'y'; so I got lots of practice reading and understanding SQL, the re-writing to get the same results using eloquent queries. Not only that, much of the application was to do with search filtering based on model relationships so I had to make sure I really understood how relations could be properly defined and used for querying. Over the years I was doing this, eloquent methods for querying relationships were improving week on week and I was constantly being presented with ways to improve what we had, both for performance and for developer experience.

The main thing I love about eloquent is how well it reads, especially around relations. A lot of the time there's no need to think too hard about what is happening because the methods, like withWhereHas('relation', fn ($query) => $query->condition()), tell you exactly what the result is going to contain.

Commands

My appreciation for Symfony knows no bounds because I've really been in the trenches of the docs for just the console and it's pretty awesome when you consider how fundamentally simple it's been kept. In my humble opinion, Laravel has obscured some of the simplicity in the parts they've borrowed, for instance when you combine the testing helpers $this->artisan(Command::class)->expectsTable([...]), which makes a huge assumption that you've defined the table styling, with a command output table in which you've not defined the style for you'll be momentarily stumped why your tests are failing before figuring out that the default style for tables in Laravel is not the same as the default style for tables in Symfony 🫤

Apart from the small quirks, the capabilities of commands is fantastic and it even inspired some thoughts in me that lead me into the speculative part of this assessment that will be explored a little later.

Overall

Having spent this time writing code, as well as reading and reviewing a lot of code of high quality, my style and even thought process when solving problems has improved a great deal. I am happy with where I'm at currently, but can certainly see the edges of my own scope for improvement and will continue to chase after it. I've kept up with practicing outside of work with things like CodeWars and tried to maintain my interest in languages outside of my 9 to 5 use of PHP and SQL, mostly bash and Golang but also recently delving into C++. Also, because I've recently reached this comfort level I've picked up this small side project and hope to be able to maintain writing again, as it definitely did contribute to me developing my own understanding back when I started out.

Contributing to open source projects has become a more regular thing recently, which has boosted my confidence somewhat as well as been a great opportunity to see how different, well established projects work and some experiences resulted in positive changes in my day to day work.

Having reached this level has afforded me more time to pursue other old hobbies like reading too, which has been great for me personally and has inspired a new dimension of this very personal website that I'm quite excited to get launched soon (Look out for a tl;dr section up in the navigation!).

After

So seeing as I think that I managed to reach the "next level" that I'd envisaged when starting out at my current position, what comes next?

I have had experience of working under some great development managers, and I think that I should (and will) aim for not their position, but their mentality. I believe the next major improvement that I can make is being able to think X steps ahead and in a big picture sense, regardless of how cliché that sounds. I mean, things become cliché when they're tried and true, no?

What I mean is that I hope to improve my decision making when facing a problem, or writing a feature. I have gained a decent amount of experience and should be able to leverage that into foresight, while still building and reinforcing that experience. I have seen first hand how all decisions (in a architectural sense) are about trade-offs as there's never a truly 100% correct solution, just a best-fit one, or even two. I want to be able to weigh up the pros and cons with confidence and then execute plans based on those decisions. I even have a few examples of this type already in my sights, so I want to be sure that I am pursuing them with a level head and not for the sake of wanting to "establish" myself or anything selfish like that.

Another thing I hope to develop in myself is to keep focused on what matters in a business sense. I've been guilty of spending too much time writing things "the right way" when the actual business value of the thing I'm writing is small. At the end of the day, we build tools to solve business problems. When we solve the problem, we gain value, and making the code clever, or pretty doesn't actually make as huge of a difference as we feel like we're making while doing it. A great video explaining this from 2025 Laracon EU by John Drexler, which my team and I were actually in attendance for, sums it up perfectly and even though my teammates and I constantly refer back to it, I know for a fact that I can still implement the mentality much better than I do now. By doing this more strictly I will greatly improve my value as a developer.

So after that brief look backward, inwards and forwards, I think I am mostly grateful for the opportunities I have been presented and I am actually pleased with what I have managed to achieve with them, which definitely does not align with how I felt back then 😅

I could probably be a little easier on myself, because having struggled with things did not mean I was as dumb as I felt!

I Tried Working at 30,000ft

Sam — Thu, 31 Aug 2023 10:00:00 +0000

How I thought it would go

I had always seen people working on their laptops in airports and on aeroplanes, so it was an easy assumption to make that I too would be able to do so. I have two projects on-going and definite next steps that need to be done for each. Fairly monotonous tasks that I should be comfortable with and can just get on with.

Normally, when working at home I only get about 2.5 hours in the day when I am 100% left alone and can focus fully on a task. This golden hour is great, but I'd love to know how productive I could be given the opportunity of a longer window of focus. Stuck in a seat on a plane, without having to entertain my 6 year old son for at least 3 hours with the potential of an additional hour either end of waiting around. Sounds like a great chance to find out!

I usually work on remote development servers so that was something to consider. There's no WiFi at 30,000ft in economy class. But, as I said, my tasks were not anything new to me, so as long as I had my repository saved locally I should probably be ok. I've written hundreds of tests in the last few months alone, and I need to write some for a fresh project so they'll be super basic. Should be a blast. Alternatively I've got some HTML to steal from a template email and incorporate into some usable components for another project. Low level stuff.

Preparations

So my main concern was that most of my current work is remote, so first thing to do was to git clone everything I intended to work on into a local directory. Simple enough.

The projects are Laravel applications, so I made sure to set up my .env and run composer install && npm install so that all my dependencies were available. Luckily I had an inkling to be extra cautious and tried to run my migrations to make sure the MySQL database was all ok. I say luckily because I didn't actually have MySQL or MariaDB installed!

So I went about installing MariaDB as I had always just used docker for my databases when working locally before moving over to a remote development server. For some reason I have gone off of Docker lately so prefer to just run MariaDB (the OSS and friendly version of MySQL) on my machine. I did write about running databases in Docker before which you can read by clicking here.

I made sure to have my laptop battery, phone battery and headphones battery all fully charged and even made sure to have some good old fashioned mp3s saved on my phone so I could still listen to music without streaming.

For the project that I need to convert some HTML to components, I made sure to save a copy of the HTML from the page where you can preview the email. Even went s far as to check that I could see it all properly when serving just my single stolen page. And it worked just right immediately.

How it really went

Safe to say nothing went like I imagined...

Project #1

This is a work project, fresh Laravel app that I spent the previous few days designing and laying out the models and database structure for. I had to start some basic tests as I'd kept everything fairly loose while figuring out what kind of relationships the models all needed between them. Now that I was more settled, it was time to write the tests to ensure that further changes don't break things.

So I write my first test, easy enough. Goes green after not too many errors. Second test the same. Then I want to refactor early to avoid repeating myself in populating the database with data and an authenticated user. I'd done this before I'm sure, what I believe I need is:

public function __construct(
        public User $user,
        public Client $clients,
) {}

public function setup(): void
{
        $this->user = User::factory()->create();
        $this->clients = Client::factory(50)->create();
}

But it turned out that this isn't what I needed. I am somehow passing a string to the typed variable... as I sit here now, still on the plane I cannot put my finger on how I am doing this wrong, but I know that if I had an internet connection right now all I need to is check a repo I worked on a week or two ago (on the remote server) and I'll see immediately how I wrote the actual needed thing rather than this terrible recollection/representation of it.

I know it's possible to run a setup() method to run what ever seeding you want or create a user that will be reusable between tests. I know because I did it recently. It's very frustrating that I can't recall it right now.

Edit, the following day: I found what my problem was in the docs. I should have used setUp() with an uppercase "U" and also called parent::setUp() within my method. I found it at the bottom of this section about testing. What I actually needed was the following:

    private User $user;
    private Collection $clients;

    public function setUp(): void
    {
        parent::setUp();
        $this->user = User::factory()->create();
        $this->clients = Client::factory(50)->create();
    }

I could just repeat myself for the moment and come back to refactor later having referred to the docs or even my older code. So let me write some tests using the $this->actingAs($user) to make sure I wasn't getting redirected to a login route. Oh, there is no login route. I had only installed Breeze, Laravel's quick and easy solution to out-of-the-box auth, on a branch that got scrapped after a front end re-design. Great... No matter, even though I cannot quickly download and install Breeze again without internet, I can just git cherry-pick the commit from the abandoned branch on which I had previous installed it. As it is mostly new files and my current routes/web.php file is untouched, then the changes brought shouldn't break anything.

I impressed myself that I managed to do this without Googling anything, if I'm honest. It worked. The thing I did not anticipate was all the changes to tailwind that would require another npm install... damn it. My front end was now broken and I could not run npm run dev without it crashing. I had a hacky way of circumventing this that involved commenting out some lines in the postcss.config.js file but it was ugly, and I even tried just abandoning the middleware('auth') on the routes altogether to just write some tests but I was pissing in the wind at this point. Move on Sam.

Never mind, I have a backup for this situation.

Project #2

This is a project I'm working on for a friend that is a partly automated email sending app. I have already written all the guts of it and it sends what we want and collects email addresses etc and that's all great. Now it just needs the front end polish, which I typically hate, but He made a template using MailChimp email builder and all I had to do was sift through it and pick out the various parts and styling that we wanted in our email.

I had glanced at the HTML when I copied it and it looked ok-ish. But on closer inspection it was a straight up mess. Toxic even. Style attributes in almost all HTML tags. The whole thing was one big table with forced layout sizes. Not only that, the entire <body>...</body> was written on a single line and even with my autoformatter, I could not get it into a sensible layout, so picking out bits and editing others was a horrendous amount of side scrolling.

Oh and did I mention that the kid sitting in the seat in front of me was some kind of jack-in-the-box? Every time he jumped, my thumb would accidentally swipe over the tracking pad and loose the place I had just painstakingly scrolled to. I tried working with the laptop on my actual lap, as the name may suggest is easy to do so, but it's a poxy little 14" screen so it was very uncomfortable. Did not help that the style of plane seat arrangement was inline with a tin of sardines. No legroom whatsoever .

Lessons learned

So absolutely nothing that I planned to get done got done. Zero for two. Instead of letting myself get mad about it, I decided to write this so that I could at least gain something from this experience. The main lessons I learned were:

Developing a Laravel 10 application without an internet connection is tough if you've not got all your packages inline beforehand.
Even doing tasks that had been done repeatedly before can sometimes need the littlest bit of help from some reference, be it documentation or an old project.
Before doing things totally offline, doing a dry-run is probably a good idea to catch the trivial hurdles.
HTML generated from "builder" style tools can be clunky and follow anti-patterns.
I am better at git than I used to be. (Maybe because I messed it up so many times!)
Cheap flights do not have a comfortable amount of room to think in.
It's better to write content than code in my case, because I am still too dependent on documentation.

MySQL Database Migration to a Remote Server from a .gz mysqldump file

Sam — Wed, 30 Aug 2023 07:25:00 +0000

Introduction

I had a task a few months back of discovering the cause of a bug in a production environment that just was not presenting itself in development, mostly due to the creators and users of the application having ever so slightly differing ideas about how the app should be used. This meant that in all of our testing while making the application, we never saw the bug that was being reported. The solution for this was to take a copy of the production database and use that in development to try and replicate the reported issue.

The application was a CMS (Content Management System) that had a few extra niceties that introduced a little more complex database structuring, so that could be one reason it was hard for the development team to preempt this problem. All the same, the tech lead went ahead and made a mysqldump file blogs.sql.gz and promptly forwarded it to me to get to work with figuring things out. All our development work is done on a dedicated development remote server, and I had the file on my local machine so I'd need to extract and upload the file to the remote server, which was something I had not previously done.

I will cover the steps I went through in order to discover how exactly how to get the database created and populated with the desired data. It was a journey of discover for me as I was making use of tools that I was familiar with as well as new (to me) tools and therefore had some steps that may not be deemed necessary, but I will include them as they taught me something and my goal is to share those lessons.

I had a few specific problems which I will explain in more detail further down, which caused a few of the extra steps I took so there is more to learn here than just uploading data. As well as just documenting my thought process for my own benefit, I hope to offer some guidance to other junior developers in ways to approach the type of problems that cost us a lot of time when we are starting out.

TL;DR

I went through steps that allowed me to read the dump file, attempted to pipe that to the remote server, read the error messages and made whatever changes I needed and repeated until I had what I needed and eventually uploaded the data so I could have an exact copy of production on my development environment.

Skip down to Final working Command to see the command I ended up with.

Use case

In the case I am presenting here we have;

a zipped mysqldump file (.gz) located in ./Downloads/blogs.sql.gz
the file contains a number of mysqldump: [Warning]/Error... lines (due to being made with/without a password)
a remote server to which we have ssh access, denoted by <user>@<hostname>
mysql installed on said server

Particular problems we face

The first stumbling block was the warnings that do not parse normally when uploading a mysqldump file. Their presence breaks the stream and so nothing after them will be read. I ended up solving this problem in more than one way as you will see by the end. My first "solution" introduced new problems that became apparent later on.

Other uses

There is no reason I see that the working knowledge highlighted in the rest of this article cannot be beneficial to other use cases where, for example, a mysql dump file devoid of any warnings needs to be uploaded. I will break down each part of any commands we examine, so you can decide which you need to apply for your case.

Subjects we will cover

A number of tools will be covered, so I will introduce them briefly here and explain their specific uses and additional flags when appropriate.

Command	Description
gzip	compress or expand files
tail	output the last part of files
head	output the first part of files
ssh	OpenSSH remote login client
mysql	a simple SQL shell that supports interactive use
sed	stream editor for filtering and transforming text
\	(pipe)

Steps

You can see the whole raw interaction I had by clicking here and see the MySQL set up by clicking here.

1. Create the database

The first step is to use ssh to access the development server and be able to make changes using the mysql shell to add a new database that we will populate from the dump file.

sam@Mizouzie:~$ ssh <user>@<hostname> -A

This will get us in.

<user>@<hostname>:$ mysql
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 15401
Server version: 10.6.12-MariaDB-1:10.6.12+maria~deb11 mariadb.org binary distribution

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

Now on the development server, use the mysql command to open the shell client.

MariaDB [(none)]> show databases;
+-----------------------+
| Database              |
+-----------------------+
| information_schema    |
| content_generator     |
| example_laravel       |
| next_con_gen          |
+-----------------------+
4 rows in set (0.001 sec)

MariaDB [(none)]> create database example_laravel_dummy
    -> ;
Query OK, 1 row affected (0.000 sec)

MariaDB [(none)]> show databases;
+--------------------------+
| Database                 |
+--------------------------+
| information_schema       |
| content_generator        |
| example_laravel          |
| example_laravel_dummy    |
| next_con_gen             |
+--------------------------+
5 rows in set (0.001 sec)

Use show databases; to check existing databases In this case our development DB is example_laravel so we will create a dummy version example_laravel_dummy which we'll use later. Use show databases; once more to confirm it was created.

2. Try to import directly

sam@MizouziE:~$ ssh <user>@<hostname> -A "mysql -u sam -p example_laravel_dummy" < ./Downloads/blogs.sql.gz 
Enter password: ERROR 1045 (28000): Access denied for user 'sam'@'localhost' (using password: YES)

Here we are using ssh and feeding a command into it by passing a string between quotation marks. Effectively we are running mysql -u sam -p example_laravel_dummy on the remote server but from our local machine.

I should not have used the -p flag for a password, so let's omit that.

sam@MizouziE:~$ ssh <user>@<hostname> -A "mysql -u sam example_laravel_dummy" < ./Downloads/blogs.sql.gz 
ERROR: ASCII '\0' appeared in the statement, but this is not allowed unless option --binary-mode is enabled and mysql is run in non-interactive mode. Set --binary-mode to 1 if ASCII '\0' is expected. Query: Sd'.

Now the file format is a problem as we have not extracted it.

sam@MizouziE:~$ ssh <user>@<hostname> -A "mysql -u sam example_laravel_dummy" < gzip -dk ./Downloads/blogs.sql.gz 
bash: gzip: No such file or directory

We need to install gzip, so go ahead and do that.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | ssh <user>@<hostname> -A "mysql example_laravel_dummy"
ERROR 1064 (42000) at line 1: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'mysqldump: [Warning] Using a password on the command line interface can be in...' at line 1

The two flags used -c & -d with gzip will write the output on to standard output and decompress which is what allows us the then pipe that output into our following ssh command.

Also note that we have inverted the command to run gzip first so that we pipe the output of that into the ssh command.

Our new error indicates a syntax error in the SQL statement we wish to run via the mysql command. That brings us to the next step.

3. Read the mysqldump file

In order to see why and where we have this issue, we can use the head command to read the first 10 lines of the file after unzipping it.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | head
mysqldump: [Warning] Using a password on the command line interface can be insecure.
-- MySQL dump 10.13  Distrib 8.0.33, for Linux (aarch64)
--
-- Host: localhost    Database: blogs
-- ------------------------------------------------------
-- Server version   8.0.33

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

We can see by this output that the line beginning with mysqldump: [Warning] is problematic and not recognised as proper SQL syntax. Furthermore, the following lines are commented out so they could also be omitted.

4. Skip first 7 lines

So as our first 7 lines contain bad syntax and useless information, let's send the same output but without the first 7 lines. Similar to head, we can use tail to send everything after a specified line number by making use of the -n flag with a positive (+) integer.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | tail -n +7 | ssh <user>@<hostname> -A "mysql example_laravel_dummy"
ERROR 1064 (42000) at line 12: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'mysqldump: Error: 'Access denied; you need (at least one of) the PROCESS priv...' at line 1

New error, but similar to the one we came across before. This means we must delve a little deeper down the file.

5. Read further down the file

We can use a -n flag on head to specify the number of lines shown. Without this flag it defaults to 10, so we will use a higher number to see more than before.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | head -n 25
mysqldump: [Warning] Using a password on the command line interface can be insecure.
-- MySQL dump 10.13  Distrib 8.0.33, for Linux (aarch64)
--
-- Host: localhost    Database: blogs
-- ------------------------------------------------------
-- Server version   8.0.33

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!50503 SET NAMES UTF8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
mysqldump: Error: 'Access denied; you need (at least one of) the PROCESS privilege(s) for this operation' when trying to dump tablespaces

--
-- Table structure for table `activity_log`
--

DROP TABLE IF EXISTS `activity_log`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;

In this output we see that there is another error message that breaks syntax rules. This one follows after a number of settings that may be safe to assume are ok by default, so we will try to use tail like before but from even further down the file.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | tail -n +24 | ssh <user>@<hostname> -A "mysql example_laravel_dummy"
ERROR 1005 (HY000) at line 96: Can't create table `example_laravel_dummy`.`article_background_image` (errno: 150 "Foreign key constraint is incorrectly formed")

Now we see that this will not work because we omitted something important. Namely the line /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;.

6. Set important server variables

We can try to set the missing server variable and keep our current way of feeding the SQL statement by using --init command=[command] after mysql. We will use that to disable the foreign key checks.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | tail -n +24 | ssh <user>@<hostname> -A "mysql --init-command=\"SET SESSION FOREIGN_KEY_CHECKS=0;\" example_laravel_dummy"
ERROR 1231 (42000) at line 2261: Variable 'time_zone' can't be set to the value of 'NULL'

Here we have yet a different error, but it's cause is very similar to the last error we encountered. It is down to omitting those seemingly "safe to omit" server variables from the start of the mysqldump file. We need another approach.

7. That's what she `sed`

sed now makes itself useful to us as we can use it with it's regexp matching ability to remove certain lines from the file stream as they are being streamed. What I mean is, we will just drop out the lines starting with the mysqldump: that are causing us headache.

We achieve this by putting 'mysqldump:' in a regexp that deletes any line starting with it as follows; '/mysqldump:/d'. It's the lowercase 'd' that does the business.

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | sed '/mysqldump:/d' | ssh <user>@<hostname> -A "mysql --init-command=\"SET SESSION FOREIGN_KEY_CHECKS=0;\" example_laravel_dummy"
sam@MizouziE:~$

And look at that, no error! That means it worked.

There is one thing not entirely necessary here, though. If you spot it shoot me a DM on twitter @mizouzie

8. Final check to make sure

Now all that is left to do is check on our mysql instance on the remote server if everything is as we expect.


MariaDB [example_laravel_dummy]> show tables;
+------------------------------------+
| Tables_in_example_laravel_dummy |
+------------------------------------+
| activity_log                       |
| article_article                    |
| article_author                     |
| article_background_image           |
| article_category                   |
| article_revisions                  |
| article_site                       |
| article_slugs                      |
| articles                           |
| author_revisions                   |
| author_slugs                       |
| authors                            |
| background_images                  |
| background_images_revisions        |
| blocks                             |
| categories                         |
| category_revisions                 |
| category_site                      |
| category_slugs                     |
| failed_jobs                        |
| features                           |
| fileables                          |
| files                              |
| imports                            |
| linked_images                      |
| links                              |
| mediables                          |
| medias                             |
| menu_revisions                     |
| menus                              |
| migrations                         |
| password_resets                    |
| provider_revisions                 |
| provider_slugs                     |
| providers                          |
| ratings                            |
| redirects                          |
| related                            |
| setting_translations               |
| settings                           |
| site_revisions                     |
| site_user                          |
| sites                              |
| slider_revisions                   |
| sliders                            |
| string_translation_revisions       |
| string_translations                |
| tagged                             |
| tags                               |
| twill_password_resets              |
| twill_users                        |
| users                              |
+------------------------------------+
52 rows in set (0.001 sec)

MariaDB [example_laravel_dummy]> ^DBye

Nice, we have all our tables and then we exit with Ctrl + D.

Final working command

After all our experimenting we got what we wanted, so our final command to do what we want looks like this:

sam@MizouziE:~$ gzip -cd ./Downloads/blogs.sql.gz | sed '/mysqldump:/d' | ssh <user>@<hostname> -A "mysql example_laravel_dummy"

So for any other use case, or just a a breakdown of each part, we had something like this:

<user>@<localhost>:~$ gzip -cd <location/of/mysqldump.sql.gz> | sed '/<beginning of line to remove>/d' | ssh <user>@<hostname> -A "mysql <name_of_database>"

So the command does this:

Unzip the file
Pipe the stream of the file output through sed
Filter out undesired lines with sed
Pipe the result of that to ssh
With ssh execute the mysql command and feed the piped stream to a named database

This all works because the zipped mysqldump file is essentially one big SQL statement that can recreate all tables and insert all data that was in the database it was taken from. They tend to be quite large files, hence the need to zip them.

Summary

This was a series of steps that ended up giving the desired results. There were probably a number of different ways to arrive at the same conclusion, or even ways to arrive at a different conclusion that gave the same result. That is the cool thing about working in this field, we have a multitude of tools that can do small parts of a solution to a problem. It is up to us to do exercises like this to learn how to combine them into something that gives a result. That is what we software engineers get paid for. Practice problems like this, you'll learn loads!

Send SMTP Mail from Hetzner Server with Firewall

Sam — Mon, 28 Aug 2023 22:56:39 +0000

The Error - stream_socket_client unable to connect (connection timed out)

After building a cool little app using Laravel which makes use of the fantastic (and seemingly dead simple) symfony/mailer and you want to send a simple email via SMTP directly from the app by setting up the necessary .env variables you will undoubtedly test it out on a local/dev environment and will hopefully see that it works very well. Now the fun part of deploying it to a production server using Hetzner's great cloud services. Everything is set; apache/nginx, ssl, workers, the lot and the moment of truth arrives and you go through the actions to trigger an email being sent to your email address of choice.

Click send.

Wait.

Wait some more.

Refresh inbox...

Start to wonder...

Why didn't it send?

After checking you set everything correctly you finally check the logs and see something like the above image. But why?

The Reason

It is a timeout error on a standard PHP function stream_socket_client() which aims to create the secure socket between your application and the mail server so that you may start to send emails via your email server's SMTP connection. It is an unusual error to encounter as it's more common to just work or return a "connection refused" error, but in our case it just times out. There is not a great deal of feedback or evidence to point to why this is happening, but long story short, our request never even makes it out of our server.

Hetzner Firewall

If you are like me, you wanted to save some CPU %s by utilizing the great firewall offered for free as a part of your Hetzner cloud account and have set up the firewall with various rules for incoming traffic and left it blank for outgoing traffic, which, according to the display window means that there are no restrictions whatsoever. In theory, that means that all outbound requests should be 100% unrestricted.

There is something we are not seeing here though.

Hetzner Documentation, or lack thereof

There is apparently no (or very little) mention of the fact that Hetzner automatically block outbound ports 25 & 465. Find more details by clicking here.

TL;DR

Hetzner are savvy to scammers building spam email servers and just making people miserable by assaulting their inboxes until the IP is blocked so they do not allow any outbound traffic on these ports typically used for SMTP mail connections. Smart. But annoying they don't really tell you until you delve into the support section of their site and notice they have a dropdown option for addressing this very specific problem.

The Solution

So once you have found the super specific technical support like the below by clicking on your account icon in the top right and selecting Support from the dropdown menu:

You will then notice that there is a small mention of how you must send a request to have the ports unblocked and that is it. That is the solution. Send them a request via this dialogue box and after a short wait you'll be able to send mail from your Laravel app hosted on a Hetzner server just like how you can in a local environment. Fantastic.

How to test protected functions with PHPUnit in your Laravel app

Sam — Sat, 13 May 2023 21:05:02 +0000

An essential part of developing an app is testing your code. My preferred method of testing my Laravel code is using PHPUnit and this is how I use reflection to test those 'harder to reach' protected and private methods inside classes.

Typical places this arises

Building an application in PHP with Laravel means that we can call on a great number of classes to do various parts of the overall process we wish to achieve. For the purposes of this example (and where I first came across this issue) we will look at writing tests for a Job Class. A job class is one which will be sent some data and then process that data in the background via a worker so that the application is free to continue processing other commands.

A job class will often contain methods and variables that are;

public
private
protected

As you can imagine, public methods are easy enough to test against as they are "exposed" to the outside of the class instance. It gets a little more difficult to gain access to these private and protected methods for testing, as they are intended to be called only by other methods within the class instance. They'll be things like getters and setters so that a handle() function does not get clogged up with logic for retrieving it's necessary data.

When trying to run a test against such a class with private and protected methods, we will run into errors that look like the following two examples.

Error: Call to private Some\ExampleClass::__construct() from scope Tests\Feature\Some\ExampleClassTest

What this error message is telling us is that we are trying to invoke a __construct() method inside the Some\ExampleClass, which is not allowed from the scope of our test that may look something like the following:

namespace Tests\Feature\Some;

class ExampleClassTest extends TestCase
{
    /** @test */
    public function my_job_does_something()
    {
        $job = new \Some\ExampleClass($input);

        // Make some assertions
        ...
    }
}

Just in that single line, we have already encountered the problem. If we look at the example class itself, we'll see what trips us up:

<?php

declare(strict_types=1);

namespace Some;

final class ExampleClass
{
    private function __construct(
        public readonly int $input,
    ) {
    }
    ...
}

Our attention should be drawn to the private function part. That constructor called on initiation CANNOT be called from outside of the namespace Some, we are trying to call it from Tests\Feature\Some\ExampleClassTest.

Error: Call to protected method Some\ExampleClass::exampleMethod() from scope Tests\Feature\Some\ExampleClassTest

This error is very similar to the above, just in this case we may have a public function __construct() so our class may be instantiated from outside, but our helper functions cannot be invoked outside of the handle() method. If we use the same example as above, we can get one step further before hitting a wall:

namespace Tests\Feature\Some;

class ExampleClassTest extends TestCase
{
    /** @test */
    public function my_job_does_something()
    {
        $job = new \Some\ExampleClass($input);

        $result = $job->exampleMethod();

        // Make some assertions like...
        // $result->assertEquals('expected', $result);
        ...
    }
}

So the class is created with no problem, but we want to test methods that are called from within the handle() method so we can be certain that the data being handled is the correct data.

Solution: ReflectionClass

Available in; PHP 5, PHP 7, PHP 8

The Reflection API in PHP is a way to retrieve any and all information from a class during runtime. The way we can use it in this case is to effectively make an instantiated "copy" of the real class we wish to test, "grab" the method we wish to test from the reflection of the class, and then tweak it ever so slightly to make the private function public so that we may use it from outside of the class which in this case, is from out test.

Sounds simple enough...

new ReflectionClass($exampleClass)

This first step is to create the reflection class on which we can make our needed modifications. There is actually a small pre-first step to take and that is to make a new instance of the class we wish to reflect and save it to a variable which we then use in our call to create a new ReflecionClass().


        $exampleClass = new ExampleClass($input);

        $reflection = new ReflectionClass($exampleClass);

Now we have something to work with that is a little more malleable and we can decide next what we want from this reflection. Based on the previous examples of errors, let's look at getting:

the __construct()
or some named method like exampleMethod()

getConstructor()

To get the constructor (public or private) so that we can feed it with whatever values we need to test against, we have this handy function which may be used as such to set the __construct() of the class as a useable variable:


        $exampleClass = new ExampleClass($input);

        $reflection = new ReflectionClass($exampleClass);
        $constructor = $reflection->getConstructor();

getMethod()

To get the protected method that we wish to test against we have this method that can be used in a very similar way to the above:


        $exampleClass = new ExampleClass($input);

        $reflection = new ReflectionClass($exampleClass);
        $method = $reflection->getMethod('exampleMethod');

setAccessible()

With both the the get helpers shown, all we are doing is saving the methods as they are to a variable. They haven't yet been unlocked for us to use as we please, but this is where this method steps in and shows the real benefit of this whole process. As easily as this, we can change the methods accessibility so that future calls to it from our non-matching namespace do not set off any errors.


        $exampleClass = new ExampleClass($input);

        $reflection = new ReflectionClass($exampleClass);
        $method = $reflection->getMethod('exampleMethod');
        $method->setAccessible(true);

invokeArgs()

Now that we have a useable version of the protected/private method we wish to test the output of, we can call upon that method using this function which also feeds the method the needed parameters (arguments). Similarly to the setAccessible() we chain it on and it expects two arguments:

The object to invoke upon. (null can be used here in the case of static methods)
An array of arguments that the method to be invoked expects.


        $exampleClass = new ExampleClass($input);

        $reflection = new ReflectionClass($exampleClass);
        $method = $reflection->getMethod('exampleMethod');
        $method->setAccessible(true);

        $result = $method->invokeArgs($exampleClass, [$arg1, $arg2, ...]);

        // Make assertions against the resulting output like...
        // $this->assertEquals('expected result', $result);

Run your tests

That's it! After just a few extra lines of code, you are now able to make assertions in your PHPUnit test suites against otherwise inaccessible functions and you can sleep a little easier tonight knowing that the deepest trenches of your application are fully covered and there will not be any unwelcome bugs!

... at least not from the parts you wrote proper tests for.

How to fix Undefined type 'Spatie\Permission\Models\' . 'Permission' | 'Role' | 'HasRoles'

Sam — Thu, 13 Apr 2023 21:53:41 +0000

VSCode with intelephense throws a strange and hard to debug error when using the spatie/laravel-permissions package even when you follow the docs to the letter. Here is how to fix it.

I was very frustrated for more than a few minutes with this after installing the great Spatie package for permissions in a project I am working on that requires teams, roles and permissions. Click the link above to check out the documentation and you'll see immediately the appeal it has for any Laravel developer.

Sidenote: These guys really do churn out an ever growing collection of the most helpful packages that will save you hours of thinking and development, so if you don't know about them... get to know!

The Error

The error itself is the VSCode extension Intelephense, that is usually very helpful when writing PHP in VSCode, telling you that there is an error with an Undefined type ... after you have followed the steps outlined here in detail to install the permissions package on your Laravel app.

We have:

Used composer to pull in the package
Manually registered the service provider
Published migration and configuration files
Adjusted to allow for teams
Cleared the configuration cache
Run the migrations
Added the trait to out User model

And BOOM!... error.

I tried composer dump-autoload, ./artisan config:clear (again), ./artisan config:optimize, all to no avail. Double checked I had followed all the steps... I had. So??

The Solution

The short answer is, there is no reason. But here is the solution. Just reload the window.

Ctrl + Shift + P // To open the editor commands

// then type in or scroll down and select...
>Developer:Reload Window

It's a simple as that. How annoying.

Credit

I need to shoutout Akshay K Nair for replying somewhere deep in a github issue and pointing me to this. I just hope that someone else finds this a lot easier than I did!

Space is the Place: Reasons to explore Twitter Spaces

Sam — Tue, 28 Mar 2023 23:00:13 +0000

Space! The Final Frontier... but what if it is the beginning? Twitter spaces are a great way to meet and trade ideas with people from across the globe from the comfort of your sofa!

What are Spaces?

Since the end of 2020, Twitter Spaces have been a feature of the social media platform, and while they've seen great popularity in some cases, some Tweeple may still not be making the most of the multitude of opportunities they can present.

The easiest way to describe them is to liken them to a hybrid of a public speaking forum at an international airport lounge in the guise of a podcast.

How they work

A Space requires only one participant to exist, the Host, but the real magic happens when the host is joined by others in the form of Speakers and Listeners. The Space is given a title by the host that launched it and that will generally give an idea of the type of conversation that will be held between the host and speakers. The title is also what is displayed along with the names of the host and speakers in the Spaces section of Twitter so that potential participants can choose from the list of ongoing and upcoming talks.

Listening

To listen, any user only needs to tap on a Space that tickles their fancy. This will open up a slightly larger tab showing more details of the Space and the current speakers and listener count. There you tap the Start Listening button to enter the Space and start streaming the audio from the room on your device.

A listener is not restricted to zero input either. They have to ability to show animated emojis over their avatar should they wish to react to what they are hearing. It will show up for all users in the space, regardless of position.

Speaking

To speak, a user that is already a participant in the Space can tap on the microphone icon in the bottom left corner to Request to Speak. This will send a notification to the Host/Co-hosts who will then be able to allow or deny your request to "join the stage". Once on stage, the microphone icon becomes the control to toggle your device microphone on and off so that you can actually speak in the Space and be heard by all.

It is a good idea to make use of the raised hand emoji in the reactions panel when you are a speaker and await your turn to speak, normally granted by the host of the Space.

Hosting

To host is to be the user that launched the Space in the first place. As host you pick the title, assign co-host and speaker status and generally oversee proceedings. Different people have different styles, so I would definitely recommend mixing it up a bit in other people's Spaces to get a feel for how to manage a Space well (or not so well).

At the end of the day, you're the boss in your own Space, so do what you see fit to keep the conversation flowing and let the value flow from exchanges between all participants.

Benefits

Humans are social creatures and we thrive from interacting with one another. The benefits of getting involved in conversations with other people are endless, but here I will try to give you the best reasons that I think you should grab the mic soon if you haven't already.

Learning

My number 1 takeaway from the numerous Spaces that I have attended was learning. I learned a lot. I tend to get involved with Tech-Twitter Spaces and I have to say that my software development acumen has improved for it. Sitting back and soaking up knowledge by just eavesdropping on the convo between individuals held in high regard in their field alone has been like attending a mini university, but also getting involved and seizing the opportunity to actually ask those people questions that are relevant to my situation has been of unimaginable value.

Variety of Thought

My personal favourite feeling is when I think I know something, and then someone shows me a new angle on it and I feel like I've had the blinders taken off. Entering Spaces gives you the opportunity to meet people that share some huge similarities to yourself that also come from totally different walks of life. Exposure to new perspectives is what truly drives a deeper understanding, no matter the subject.

Building Ideas

A healthy, back-and-forth style conversation that builds on the similarities and differences of view on a topic can lead to amazing realisations for both those in the conversation and even those just listening. The way conversations can flow from one topic and sub-topic to another leads to connections being made that any one individual might not make by themselves.

I love this because I am the type to obsess over something when I want to learn it and listening to knowledgeable people discuss an idea has often exposed every conceivable corner.

Public Speaking Practice

Many of us wish to advance our career also. That's very normal. A lot of higher stations require some form of team management and that means you need to be proficient in speaking to more than a few people at once.

That is daunting. More so if you have never done it.

Conquering Fears

Spaces more often than not are actually Safe Spaces, run by compassionate people.

Think about it. The people organising and speaking on these are giving up their time to give back to a community in some way. Each of these people have been a beginner at something at some point, they know how it can feel. I have always, always, always only ever seen hosts and co-hosts giving encouragement, time and (not a pun) space for a first time speaker to come onto the stage and address the audience in the room.

Immediate Feedback

If you are lucky enough to join one of the Spaces actually geared toward getting first-timers up to speak and introduce themselves, you may even get some immediate feedback on how you did that you can take away, think about and try to apply the next time you are up. If you are here from Tech-Twitter then you know about taking an iterative approach, and all iterations must start somewhere.

Networking

Spaces are all about people talking to people. They are the definition of networking on a social network. Double network!

Professional

A number of Spaces exist to not only get first-timers to pop their Space-Cherry, but to make themselves known to those that may be looking to connect with other developers. Some Spaces have gained a good reputation for this and getting up and introducing yourself has the potential to be as valuable as getting that golden opportunity of an elevator pitch with the CEO of that company you dream of working at.

Casual

Not all Spaces are mega-super-serious. Some are just for fun or just a little more of a casual style. If you show up consistently because you gel with a particular group that also show up consistently... well, you're very likely to become friends. On a site like Twitter that can only work in your favour, thanks to the algorithm noticing your relationships, you'll all be shown each other's content more often and be very likely to engage making each of you score a little higher on the Twit-o-meter. Fantastic.

Entertainment

Topics covered in spaces range from zero to absolutely everything. All kinds of things are discussed and go on in them and sometimes you'll find them as engrossing as your favourite podcasts. I dare even say you might forget about your podcasts all together in favour of the live-action versions going on every day.

Wrap Up

I have paid attention to spaces for a few months now, and I see so many improvements in my technical understanding with my work and so many improvements with how I use Twitter. I have listened to and even been a part of some amazing discussions and learnt what would have taken me a year of solid reading to learn in a matter of weeks.

I see them as having huge value, especially when you compare joining a Twitter Space to, say, Netflix binging. It's the same vibe if not more fun, but the benefits are tangible.

Who to Watch out for

I have a list of Twitter folks that will always draw me into a Space if I see their name on the roster, and I'd like to share them with you because they're ultimately the reasons for me getting all these good things out of this feature.

@AxelGarciaK and @hiro_codes
- These guys are always involved in great Spaces on topics like Real Programming (languages like C, Rust and Go), AI and making the most out of Twitter. I've gained tonnes of value from them and look forward to learning more from them.
@GrahamTheDev
- This guy defines Dev Rel. Highly experienced, excellent succinct advice. Always around and open to questions.
@ShawnBasquiat
- The host of one of the most valuable regular spaces in Tech-Twitter. Endlessly supportive. If you are gonna start somewhere, Shawn's "THE HUNT" Space is where it should be.

Of course, there are so, so many but I'd squash all the fun of exploration for you if I told you who else I enjoy talking with in these places! Obviously you should follow me too, @mizouzie, and join any Space you see me in and get involved. You will not regret it!

3 things the best senior developers do

Sam — Sat, 25 Mar 2023 00:03:39 +0000

Working under the care of a more experienced developer can make or break a junior developer's career. Here are 3 things the best senior developers do.

Senior Developers

A senior developer has earned that title. They've waged wars and won, faced long days and nights, overcome the most obscure of obstacles. Now, for all their troubles they have to deal with you. Wet behind the ears and a danger if left unmonitored. Hardly seems fair, does it?

This is the curse of such a vast wealth of knowledge. They've built up so much over the years they can't possibly apply it all at the same time. They must delegate to be efficient. How do they choose what to pass down the line and to whom? Well that's all part of their new challenge.

I've had some time now as a junior developer and I have been lucky enough to be under the care of a couple of seniors who have made my experience a very pleasant one, considering the mountain of varying knowledge I have acquired in such a short time. I want to point out the characteristics they display that I admire most and deeply appreciate.

Essential traits

Given that the responsibility of overseeing a project or even multiple projects is a stressful one, it is crazy to think that the senior developers of the tech industry also have to essentially baby-sit at the same time. A lot can go wrong even before they have to throw inexperienced developers into the mix. 3 of the most important traits for a successful senior developer to posses, in my opinion, are;

Attentiveness
Patience
Optimism

Let me explain to you, who like me, is the junior developer in this arrangement.

Attentive

I don't mean they need to be all lovey-dovey and sweep your hair out of you eyes when you talk, I mean they need to pay attention even when it's from afar. They need to have a good gauge of how you are feeling both in regard to your workload and in life in general. Not necessarily all the details of your every move, but are you happy?

The reason for this is that if you're not happy, you won't produce good work which means more work down the line because the code you commit is not good enough or within the deadlines. Simply checking in with you daily is all a good senior will do, but a great senior will take action when needed as they have the experience to be able to do so effectively.

The action does not have to be some grand gesture, sometimes just a few words of guidance or a "don't worry, I still have days like that" go a very long way in helping an overwhelmed junior developer get a handle on things.

Patient

Often the team's senior developer is the one that is really face to face with the deadlines. They see the whole project in the "big picture" sense so will also forsee the knock-on effects of a missed deadline before anyone else. Despite this burden, the best senior developers are able to balance the pressure while displaying great patience with their team, affording them the time needed to discover solutions in their own ways and therefore build themselves into stronger developers in the process. It is an investment that will only pay dividends in the future, but of course, our highly esteemed senior knows that already.

A part of this patience is the ability to block the rage and fury of the dreaded (and often agitated) client. They soak up the barrage of questions like "well, why isn't it done yet?" so that those in their care can keep a clear head and just focus on the task before them. They know that once deployment and delivery is accomplished, all that negative energy will evaporate anyway.

Optimistic

It is important to understand that this does not mean naive optimism. Programming requires an air of pragmatism, and years of thinking like that will lead to a senior developer being so inclined. The optimism I mean is a type of faith. Faith in their juniors to overcome the obstacles they need to, faith that they will ask if they really do get stuck and faith in their own abilities to provide the necessary learning resources and road maps to becoming a capable developer.

It is a type of self control that a father displays when their child first rides a bicycle without stabilizers. As much as they want to step in a protect, they know they must leave the space to fail in order for the kid to grow, to get stronger, better, to develop. They know if they can just hold off, it will pay off.

Some examples

I've had a terrible week this past week after having a project I delivered utterly trashed by the client and had to take it almost right back to the drawing board and implement a bunch of (front end) stuff that I am very unfamiliar and very very uncomfortable with. I wasted an entire week, if not more, trying out various JavaScript libraries to get an input form to perform more tricks than a circus and was seriously losing my mind over it. I couldn't believe it was taking so long and just not progressing as well.

I was angry. At both the situation and myself. My senior dev, however;

never swept in and bossed me around
never complained about the amount of time I wasted
checked in with me regularly
afforded me the time to explore so many options

As if that wasn't enough, after about a week and without me even realising, he threw me a totally different small project that was in PHP which I am far more proficient in. I knocked that out in an afternoon, so he fed me a bonus task of dockerizing the application which I also managed relatively quickly. Two things, that if compared side by side with what I was so stuck on, would probably be considered slightly more advanced. It was definitely a morale boost.

The next day, same project and this time just looking into refactoring some SQL queries (which is a favourite of mine) and that had me feeling like bullets would bounce off me. I went back to the JavaScript that was torturing me, deleted the entire branch I'd spent a week tied up in and banged out a perfectly fine working solution in a couple of hours. Thanks to the previous day's distraction techniques, I didn't get hung up on the wasted time too!

Thanks to my senior's attention, patience and faith in me I managed to eventually overcome something that I clearly wasn't able to do a week ago, plus I have gained the experience that will hopefully help me avoid getting so caught up in a problem in the future.

I'm grateful.

Created Environment

You can see from just that one recent example that you have every right to be jealous of my working environment because my goodness, it is nurturing. Thanks to having this sort of support for the last 2 years, I can confidently say that I am more able as a developer than I should be for the number of years I have had in the industry. I have justifiable confidence because I have worked on real software used by some huge companies because I was not only taught the right stuff but given the opportunity to use that knowledge to build something that is a part of something of real significance.

I look forward to working every day because it is always challenging but never frightening and because I can look back at what I've made and been a part of with pride. It is a great team to be a part of.

Results

I won't repeat that I've gained a huge amount of experience in a short time... but I really have. Not only that, though, I really believe that the future of the group I am a part of will be a great one because the next wave of junior developers after me are in for a solid support system and incredible guidance. This team has already achieved some great feats while getting little old me up to speed, so I can only see exponential success on the horizon.

How to Unlock Formkit Multistep forms on a Laravel Inertia app with Vue 3

Sam — Thu, 09 Mar 2023 23:54:31 +0000

Formkit offers a great Multi-Step tool for building forms in your Vue app, but getting it to work inside a Laravel Inertia app is a little tricky. Here is how to get it running.

Formkit is a supercharger for developing applications on the already turbo platform of Laravel Inertia with Vue 3. It is a library of ready made components for building forms that make it very easy to construct any kind of form for retrieving user input. One of the features of this library that stood out the most for me was the Multi-Step forms.

Multi-Step Forms

So what is a multi-step form?

It is a format that breaks the usual monotony of filling out a form for the user. It splits the form into smaller form-lets that helps to give a much nicer UX because they're not faced with such a huge list of questions all at once. The multi-step form can be split and navigated by tabs or a progress-map that resembles a London Underground map 😍

So as developers, we want to provide this kind of experience for our application users. Formkit is a very well provided for library with extensive documentation for it's implementation into a standard Vue 3 project, but when I tried to put it into a Laravel Inertia app using Vue 3, it needed a little thinking outside of the dox.

Installing Formkit

What do the docs say?

Here you can check the Vue specific docs for the initial Formkit installation. They are nice and straightforward, but following these to the letter does not give us the desired result.

We will install with npm:

npm install @formkit/vue

The slight difference for Inertia

Now to get it working in our case, we need to have our app.js looking like this:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { plugin as formkitPlugin, defaultConfig } from '@formkit/vue';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(formkitPlugin, defaultConfig)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

The slight tweaks are evident on the import and then that same tweak is repeated inside the use() before the app is mounted.

As we need to import "plugin" from formkit and we already have a "plugin" named in our setup() function, it is necessary to give the Formkit imported "plugin" an alias. Then later down the chain of use()'s, we can provide that alias.

Installing Multi-Step addon

What do the docs say?

Here you can check the official docs for installing the Multi-Step addon for Formkit.

TLDR: It suggests the use of a formkit.config.js file, which is fine if you're just using Vue... but we're not!

One other thing to note, is that it's not very obvious that you actually need to install this separately with:

npm i @formkit/addons

The slight difference for Inertia

As you may have noticed, we've seen a part of that before. The importing defaultConfig was in our first setup. We will use that to our advantage and do so inline stuff to get where we want to be.

import './bootstrap';
import '../css/app.css';
import '@formkit/addons/css/multistep';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { plugin as formkitPlugin, defaultConfig } from '@formkit/vue';
import { createMultiStepPlugin } from '@formkit/addons';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(formkitPlugin, defaultConfig({
                plugins: [createMultiStepPlugin()],
            }))
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

As you can see, we've added;

a CSS import
an addon module import
that extra module inside the previously added defaultConfig

Using Formkit

Now that it is setup, we are free to use the super speedy form building tool to it's fullest potential, stacking form sections in beautiful multi-step glory. For example:

<script setup>
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import { FormKit } from '@formkit/vue';

function clearForm() {
    // Your clear form handler
}

function submitForm() {
    // Your submit handler
}
</script>

<template>
    <FormKit type="form" :actions="false">
        <FormKit type="multi-step" tab-style="progress">
            <FormKit type="step" name="csv">
                <FormKit type="file" label="Spreadsheet" accept=".xls,.xlsx,.csv,.txt" validation="required"
                    help="Upload a csv, xls or xlsx file." />
                <div class="my-6">
                    When a csv file is uploaded here, we will read the heading row so that you can choose from the list on
                    the next section of this form which columns contain the variable values.
                </div>

            </FormKit>
            <FormKit type="step" name="columns">
                <FormKit type="text" label="Columns" validation="required" />

            </FormKit>
            <FormKit type="step" name="rows">
                <FormKit type="text" label="Rows" validation="required" />

            </FormKit>
            <FormKit type="step" name="maxLength">
                <FormKit type="number" label="Max Length" :value="500" validation="required" />

            </FormKit>
            <FormKit type="step" name="submit">
                <SecondaryButton :onClick="clearForm">
                    Cancel
                </SecondaryButton>

                <PrimaryButton :onclick="submitForm">
                    Submit
                </PrimaryButton>
            </FormKit>
        </FormKit>
    </FormKit>
</template>

For the full documentation on actually using Formkit (now that it's working 😉) click here

Happy Form-Building!

Common Function Comparisons in PHP

Sam — Tue, 07 Mar 2023 13:00:00 +0000

How do you decide between two functions that, at a glance, seem to do the same thing? Let's pick apart the differences to try and make it easier.

PHP Functions

PHP is an arsenal of tools that can process data in a multitude of ways. This is one of the reasons that it powers ~75% of website server-side code. It is fast, has huge support and scales very well.

If you were to investigate how many core functions PHP has on v8.1.2 you would find:

>>> $funcs = get_defined_functions();
=> [
     "internal" => [
       "zend_version",
       "func_num_args",
       "func_get_arg",
       "func_get_args",
       "strlen",
       "strcmp",
       "strncmp",
       "strcasecmp",
       "strncasecmp",
       "error_reporting",
       "define",
       "defined",
       "get_class",
       "get_called_class",
       "get_parent_class",
       "is_subclass_of",
       "is_a",
       "get_class_vars",
       "get_object_vars",
       "get_mangled_object_vars",
       "get_class_methods",
:

>>> echo count($funcs['internal']);
=> 1735

That is not a small amount by any means, so it is impossible to know them all. Even the most experienced PHP developers will regularly refer to php.net to look up which they can use for what.

With 1735 functions being available, surely some must overlap or be similar. In this discussion we will look at the ones that seem like they could be the same thing and see if we can decide best use cases for each.

Most commonly used

Looking through Exakat's top 100 php functions 2022, we can see a few likely candidates to choose from. Lets take:

^{click on any to see the official definitions}

Compared to their closest cousins

implode() vs join()

Join is actually just an alias, so they're exactly the same. Implode works like running:

function implode(string $separator, array $arr): string
{
    $imploded = '';

    foreach ($arr as $index => $str) {

        switch ($index) {
            case !0:
                $imploded .= $separator;
            default:
                $imploded .= $str;
                break;
        }
    }

    return $imploded;
}

Going through the steps above, it does something along the lines of:

Initiate an empty string variable as $imploded
Loop through the input array
If the element of the array is at index 0, do not concatenate the separator to $imploded
Otherwise concatenate given separator string
Concatenate element to $imploded
Repeat until all elements of array have been cycled
Return fully constructed string $imploded

count() vs if (!count()) {}

This function has such high popularity due to it being used commonly for frontend "decision making". When choosing whether or not to display a particular component depending on there being any instances of something in the backend database, developers will call count() on a parameter passed to the view being displayed. The idea is that if it returns a "truthy" value, as in not 0, then it confirms the existence of at least one instance that parameter in the database.

This can be fine for a single call and if there is not an enormous number of instances of that parameter. Often though, there will be a large number of conditional components which means multiple calls to count() which ends up counting an enormous amount of your database. This is not ideal for UX as it can make the page load excruciatingly slowly. There is a simple optimization demonstrated below:

// Rather than calling count() on everything like so...
<?php if ($param->count()) { ?>
  <div>Show this example HTML component!</div>
<?php } else { ?>
  <div>Show alternate HTML or Nothing 🤷</div>
<?php } ?>

// ...we can check NOT == 0 like this instead
<?php if (!$param->count()) { ?>
  <div>Show alternate HTML or Nothing 🤷</div>
<?php } else { ?>
  <div>Show this example HTML component!</div>
<?php } ?>

The optimized second option flips the original and checks only for a non-falsey value which is satisfied by the very first counter beyond 0. After that first 1 is counted, the rest of the code can move on and display the non-existent case or the existent case accordingly. We are effectively only "counting" a maximum of the number of calls to count as opposed to counting the number of calls to count multiplied by the number of instances of the counted records in the database. That time can add up! Count one or zero and move on.

explode() vs str_split() vs str_tok()

These functions are all about creating an iterable out of a given string, each splitting the string at a chosen point. The way that point is chosen differs depending on which function is called.

explode() searched through the string for a given sub-string and splits around that
str_split() simply counts out the specified number of bytes (i.e. characters in the ASCII set) and divides the string there, then starts counting again from the split to find the next split location.
str_tok() the same as explode() but does not return the whole split up string at once.

The first two will return an array of the "pieces" of strings they have cut. This is handy when you need to derive a string from a url string, for example you can call:

>>> $string = "https://mizouzie.dev/articles/that/help/developers/learn";
=> "https://mizouzie.dev/articles/that/help/developers/learn"

>>> explode('/', $string);
=> [
     "https:",
     "",
     "mizouzie.dev",
     "articles",
     "that",
     "help",
     "developers",
     "learn",
   ]

While with str_split() you will give an integer value (n) and it splits the string after each nth character.

The function str_tok() is the outlier here as it only returns the first section (or token, as the name suggests) on it's first call. The interesting thing is that it will return the next section on the next call, and the next one only on the next call after that and so on until it has none left to return and returns false. This makes it ideal for use within a loop, as the returning of a falsey value will break out of the loop. It just removes the step of creating the iterable array to then do something with it. You can just get right down to business with this one.

trim() vs ltrim() vs rtrim() vs preg_replace()

Trimming strings is a common necessity as many strings have invisible and undesirable baggage in the form of whitespace either lurking before or behind them. A string ending in a new line or carriage return character can wreak havoc on simple processing functions or scripts, so it is always wise to sanitize them with some sort of trim at the very least.

trim() indiscriminately removes whitespace from in front and behind a string
ltrim() & rtirm() remove whitespace from the left and right of a string respectively
preg_replace() requires a little knowhow of the dark-art of regular expressions

Should you be familiar or at least comfortable with regex, you may specify exactly what type of whitespace is removed, where it is removed from or even only remove it given certain conditions. It is like the super-max-pro Premium fully licensed version of the trimming functions before it, as well as much more.

strtr() vs str_replace()

For me, these two do the same thing. Search a string for a given substring, and then return that string with the substring replaced with a given alternative substring. Both accept arguments as strings or arrays, but there is a slight difference in how they accept the arrays.

The arrays passed to str_replace() (notice the plural arrays) will be one array of search values and a second array of the search value's replacements. The search values and replacements will need to match up according to index in order to be executed properly.

The single array passed to strtr() feels like a shortcut as the index is the search value and the value is the replacement. i.e. ['from this' => 'to that'].

The usefulness of this is determined by how you go about construction your arrays to be passed. In many cases it may be easier or faster to construct a single array with string indexes. For me, that option just feels more sensible, less room for error.

Summary

Now that we have looked at some of the most common similarities and differences, I hope you will consider yourself well armed and well informed on the great choice of incredibly powerful weapons at your disposal!

Now go slay some data.

L.I.F.T - the anti-advice that could save you

Sam — Mon, 27 Feb 2023 11:00:00 +0000

It's not bad advice when I say Leave It For Tomorrow!

Seemingly controversial advice to give, but hear me out.

When coding, at least learning to code, you will not only find yourself facing brand new subject matter constantly, but often trying to implement that new thing at the same time. The code you write is always to solve a problem and there are always a multitude of ways to solve it. You'll have to choose which path you take according to other dependencies and the structure you're using. You'll need to think the desired process through and break it down into small enough steps before writing a single line. Sometimes you will require the help of an extra plugin or library and therefore you will need to understand how that works in itself so that you can use it effectively. Already we've faced more decisions than we can shake a stick at and we don't even have anything written to show for it.

So you start to write. Already slightly strained in the mental sense, you hit a snag. The code doesn't seem to work the way you predicted. Frustration sets in a bit faster than usual and you go on a tangent to try and solve this unpredictable obstacle. 15 minutes you didn't have pass and you're back on track. Another snag...

Rinse and repeat.

This is the nature of web development.

Collins dictionary defines development as:

Number 3 is my favourite. Making a basic design gradually better. And it is just that when you're starting out, gradual. This is why I say that it is not actually a bad thing to leave it for tomorrow. The process described above is mentally exhausting. The normal urge is to stick at it until the problem is resolved, but the problem is often rather more difficult to resolve than predicted. Do what you can, do not exhaust yourself, come back to it tomorrow.

There is a strange thing that happens when you exercise this approach. When you look upon the same project that stumped you the day before with fresh eyes, it somehow becomes much more simple and easy to overcome. Your subconscious has worked on it overnight and you are now a much more experience developer because of that and therefore much better equipped to resolve the present issue.

Over time, the necessity to do this will be reduced as you compound your experience but there will be new challenges to face as you expand your abilities and if you managed to get into good working habits and recognise when to say "enough" and take a step back, your personal development will soar.

So as un-philosophical as it may sound and as irresponsible as it may feel, leaving it for tomorrow can actually be the best thing for you. If you haven't already, I suggest you at least give it a try and see for yourself.

DEV Community: Sam

Code Block Click Copy

Adding copy to clipboard functionality to code blocks

Using Clipboard.js in a Hugo site

Copy to clipboard buttons in Hugo with vanilla JavaScript

Tum | Modo | Postea

Then

Now

Eloquent

Commands

Overall

After

I Tried Working at 30,000ft

How I thought it would go

Preparations

How it really went

Project #1

Project #2

Lessons learned

MySQL Database Migration to a Remote Server from a .gz mysqldump file

Introduction

TL;DR

Use case

Particular problems we face

Other uses

Subjects we will cover

Steps

1. Create the database

2. Try to import directly

3. Read the mysqldump file

4. Skip first 7 lines

5. Read further down the file

6. Set important server variables

7. That's what she sed

8. Final check to make sure

Final working command

Summary

Send SMTP Mail from Hetzner Server with Firewall

The Error - stream_socket_client unable to connect (connection timed out)

The Reason

Hetzner Firewall

Hetzner Documentation, or lack thereof

TL;DR

The Solution

How to test protected functions with PHPUnit in your Laravel app

Typical places this arises

Error: Call to private Some\ExampleClass::__construct() from scope Tests\Feature\Some\ExampleClassTest

Error: Call to protected method Some\ExampleClass::exampleMethod() from scope Tests\Feature\Some\ExampleClassTest

Solution: ReflectionClass

new ReflectionClass($exampleClass)

getConstructor()

getMethod()

setAccessible()

invokeArgs()

Run your tests

How to fix Undefined type 'Spatie\Permission\Models\' . 'Permission' | 'Role' | 'HasRoles'

The Error

The Solution

Credit

Space is the Place: Reasons to explore Twitter Spaces

What are Spaces?

How they work

Listening

Speaking

Hosting

Benefits

Learning

Variety of Thought

Building Ideas

Public Speaking Practice

Conquering Fears

Immediate Feedback

Networking

Professional

Casual

Entertainment

Wrap Up

Who to Watch out for

3 things the best senior developers do

Senior Developers

7. That's what she `sed`