Add GTM to Gatsby using Helmet
One of my devs needed to add Google Tag Manager (GTM) to an older Gatsby project we built and he was running into issues implementing the GTM code provided by Google since the react-google-tag-manager package required a newer version of Gatsby and its dependencies.
The issue turned out to be that the strings needed to be escaped for Helmet/React to process it correctly. If you're using an older version of Gatsby, the snippet below should help you add GTM and call your events as needed. Just add it to your main template file.
How to Setup CI/CD of Jigsaw Site to Digital Ocean Droplet Using Bitbucket Pipelines
I created a new personal resume site and decided I wanted to build a static site since it wouldn't be frequently updated. I evaluated Nuxt, Gatsby, and a few others but settled on Jigsaw, a static site generator based on Laravel. I had never used it before and figured this would be a good learning experience while building something I needed. I was pleasantly surprised by how easy it is to use and setup, so kudos to the Tighten team for putting together such an elegant solution.
I wanted to get a CI/CD pipeline configured to handle the site's deployment but couldn't find any working tutorials, so I'm sharing my solution in case it helps others. I'm using Bitbucket for this since it's a personal private repo, so I'm using Bitbucket Pipelines.
After you enable pipelines for your project, you'll need to configure a Pipelines Repository Variable in your project. Go to the settings tab in your repo, and then select Repository variables:
Add 3 variables:
Generate an SSH key (or use your own) and add it to your server under the SSH Keys tab in Pipelines:
I generated a new key and then added it to ~/.ssh/authorized_keys for the account.
Add this YAML snippet to your bitbucket-pipelines.yml in your root. This will use PHP 7.4, install rsync, node + npm, composer, and build the production version of the site to deploy to the specified folder.
The -aVP switch for rsync is to give me verbose progress feedback so I can see what's happening. If you don't need the detail, switch it to -a.
I received a few errors when rsync ran. In case you run into them as well, here's the list and fixes. The first was:
rsync: failed to set times on "$FOLDER": Operation not permitted (1)
I added --no-t to resolve that and then got a new error:
rsync: failed to set permissions on "$FOLDER": Operation not permitted (1)
which was fixed with adding the switch --no-perms. My final rsync command became:
How to use Backblaze B2 with Laravel
I am working on a Laravel project and decided to use a Backblaze bucket as it's cheaper for storage when compared to AWS S3. I couldn't find a tutorial on how to get it working from scratch and I tested a bunch of Laravel B2 libraries that didn't end up working. The good news is that you don't need a special B2 plugin and instead can use the S3 package recommended by the Laravel docs.
If you haven't added the flysystem-aws-s3 package, add it to your project using composer:
Login to your B2 account and create your bucket with your required settings. Once created, you'll want to create a new application key with the permissions you need for your app. You should get a confirmation once it's generated:
Open your .env file and locate the settings for AWS. You'll need to add one key that's not there by default:
Match the settings in your .env from the application key to the values below.
Now you should be able to call the Laravel storage system like normal:
How to Execute a Stored Procedure in Laravel 5.6
I've been stumped on this and tried everything I can think of but I can't get Laravel to execute a working mysql query to reorder an ordering column when deleting a row.
Here's a sample simplified query, which works directly in mysql:
Laravel code that doesn't update the database but throws no errors:
Other things I've tried which throw errors including saying there's an error in the query:
I've also tried splitting it the statements with no luck:
I tried a few other things which I didn't log in Git but I had no luck getting any of it to work. I asked for help on the forums and people told me to use Laravel's Eloquent model to update rows one by one which is pretty inefficient. You get extra trips over the network (especially important when the code is not on the same server as the database server since you can get dropped calls), extra connections to the server, the extra overhead of processing the query on the server and in the database, etc instead of just having mysql make the update.
The recommended solution may not seem like a big deal but I've run into issues where client connections have been dropped mid-update and left a table partially renumbered.
As a last resort and workaround, I opted to use a stored procedure to accomplish my goal. That presented its own can of worms as searching for examples on how to execute stored procedures in Laravel 5.x was also not easy. There's nothing in the documentation and all the examples I found didn't work.
Here's what worked for me with Laravel 5.6, with mySQL 5.6.38:
Self-signed SSL certificates not working with MAMP and Chrome
I use MAMP Pro for most of my PHP development and Chrome has annoyingly been blocking the self-signed SSL certificates MAMP generates, saying the certificate is not valid and "Your connection is not private":
Thankfully, I found an easy solve to fix this. These steps assume you've created a host in MAMP. You'll need to go to the SSL tab of the host you are trying to fix and
Go back to Chrome, and reload the page and the certificate should work now:
How to Copy and Paste into the Digital Ocean VNC Console
I recently signed up for Digital Ocean to test droplets for my development and linux management testing. I was securing the server and setup fail2ban, disabled the root login, and created a user account but forgot to change the user name from root to the user name I selected in my SSH client profile. I ended up locking myself out of the server and had to resort to logging into the admin panel on Digital Ocean's website and use their browser embedded VNC client to restore my access. I quickly discovered that one of the downsides of using this panel is that you can't copy and paste commands. Luckily there's a workaround and you can use the browser console to do sendkeys through Javascript.
Bring up the console in the browser developer tools. Here's a cheat sheet for keyboard shortcuts:
Ruden and Sebastiaan's pointed out there was a bug in the code above. This updated snippet has support for characters when using shift characters like !@#$%^&*()_+
You'll receive a dialog prompt to enter the copy to paste in. Please note that you need to click on the VNC console and hit enter to execute the command.
If you need to enter more than one command, just hit the up arrow on your keyboard in the console to get the script again for easy reuse.