Rebuilding a WordPress Site in Phases

By Devin

Ever since I started at Universal Yums, I’ve wanted to rebuild the WordPress theme. In its six years of existence style overrides have been layered on top of each other making new development really difficult. JavaScript was mostly in one massive file. The build system was outdated and clunky.

However, rebuilding a site that’s still in active development and has thousands of customers a day is tricky. You either freeze most development on the live site while the developers hide out and build a fresh theme (which wasn’t an option for us and has the risk of introducing too many bugs all at once), or very slowly refactor and rebuild the existing theme over time (which can be really difficult if you want to move to a completely new grid system or rip out Bootstrap v3 for example).

Or, maybe there is a third way?

It feels like a bit of a hack, but it definitely works. We found a method that allowed us to deploy a new theme in phases- one page or set of URLs at a time. This introduces much less risk and allows us to maintain a similar development velocity on the live site. The solution was to load the new theme for specific URLs as we completed development on them.

We’ve been successfully running on production for several weeks now with large amounts of traffic.
Continue reading →

Partial Database Restores From a Backup

By Devin

So maybe you accidentally deleted 600,000 customer records and associated usermeta from a WordPress site. Or maybe I did. Regardless, it’s a problem and they now need to be restored.

Thankfully, there’s a backup (boy howdy, you better hope so). Our site is hosted with WP Engine, so we restored a snapshot from before the accidental deletion to a new environment.

We hadn’t deleted all the user records, just a subset. But the easiest way to restore them from the backup was to export the all the users and usermeta within a specific range- but then only restore the ones that were missing. We did this using WP CLI. Continue reading →

Deleted Laravel Logs Eating Up Disk Space

By Devin

We had an odd situation where disk space was getting swallowed up on a Digital Ocean server running Laravel. The issue started happening after an upgrade from Laravel 7 to Laravel 8 (though it could have been there before unnoticed). The database size had been growing, so my first though was just to resize the droplet. But when an additional 100GB was eaten up over the weekend I realized there must be something else going on.

It turned out we had deleted log files that were still being kept open by a system process, and therefore could not be fully deleted, but were also continuing to grow:

We found these with the command:

lsof +L1

Which showed:

COMMAND  PID  USER   FD   TYPE DEVICE  SIZE/OFF NLINK    NODE NAME
php7.4  1543 forge   15w   REG  252,1 44241528600     0 1809826 /home/forge/data.example.com/storage/logs/laravel.log.1 (deleted)
php7.4  1544 forge   15w   REG  252,1 44242240400     0 1809826 /home/forge/data.example.com/storage/logs/laravel.log.1 (deleted)
php7.4  1545 forge   15w   REG  252,1 44242240400    0 1809826 /home/forge/data.example.com/storage/logs/laravel.log.1 (deleted)

This StackExchange post has a little more information about tracing down the issue, and this one has a more technical explanation for why it happens.

To resolve the issue, we truncated the deleted file using the method described here, which did free up the space:

:>/proc/1543/fd/15

Then we killed all the processes:

forge@data-service:~/data.example.com$ kill -SIGTERM 1543
forge@data-service:~/data.example.com$ kill -SIGTERM 1544
forge@data-service:~/data.example.com$ kill -SIGTERM 1545

This appeared to resolve the issue for us.

TablePlus for SQL Queries in WordPress

By Devin

Having a nice GUI to make direct database queries can be really helpful when working with a complex WordPress site. TablePlus is the best one one I’ve found for the Mac.

Using TablePlus with WP Engine

Connecting to a local database and most remote databases should be pretty straightforward, but there’s a few extra steps if the database is hosted with WP Engine.

WP Engine has remote database access instructions here. Make sure to get your IP address whitelisted, include the cert, and get the ports right. Here’s a screenshot of what the settings should look like.

Continue reading →

GitHub Actions for Laravel Tests

By Devin

I just set up GitHub Actions for running tests with Laravel and was impressed with how simple it was.

This video shows how I got it set up with the Laravel React Bootstrap project.

1. Click “Actions”
2. Select the default Laravel workflow
3. Create a branch or commit the new workflow

If you have any secret keys that are required for the test environment, those can also be injected easily. I show how to do it in the video, but here’s the full GitHub documentation for it.

Material UI and Laravel

By Devin

Material UI is a popular React framework based on Google’s Material Design System. It provides a nice design system and library of prebuilt components that can speed up the process of building web applications. I’ve worked with it on a couple projects, and really enjoy building on top of it.

Because I like having good boilerplates available to start new projects with, I rebuilt my Laravel React Bootstrap To Do App with Material UI. It uses the same REST API for authentication and data storage- but it is a completely headless implementation and could easily be updated to use different APIs.

View the Demo
Source Code on Github

More About the Project

If you’d like to host your own backend, you can also find that source code on Github. In the future, I hope to write a new version of the backend that uses Airlock rather than the tymondesigns/jwt-auth library for auth. If that would be useful to you, leave me a comment.

Building a Mobile App with Flutter and Laravel

By Devin

I’ve been developing a mobile app at work using Flutter the last couple months and absolutely love it. It’s a UI framework developed by Google that compiles down to native code for iOS and Android. It makes developing mobile layouts feel like snapping together legos.

To learn Flutter (which uses the programming language Dart), I built the generic “to do” app, exactly as I had done when learning Laravel and React. The mobile app actually uses the same REST API (hosted at laravelreact.com) as that project, which is a really nice benefit of having a decoupled UI.

Here’s a short overview video showing how it works:

Continue reading →