Category Archives: Technology

Using DevKinsta with Git

Over the years I’ve used a lot of different tools for local development. Like many other developers, I’m often looking for a better option. I finally found that with DevKinsta.

For Laravel development, I mostly use Valet, but for WordPress development I lean towards using more robust tools such as Local. The benefit is they have a lot of built-in tools (e.g. Mailhog and Adminer) and they make it easy to sync the production database and media files to your local machine (side note: syncing production database isn’t a good idea if your database is large or you have sensitive customer data in it).

I used Local for the last couple years. I was happy with it, but my main site is hosted on Kinsta, so I wasn’t able to take full advantage of its features. Fortunately, Kinsta recently released their own local development tool, DevKinsta.

After an initial test run, DevKinsta looked promising, but there was one catch—I needed to make sure I could use version control (Github in my case) with it. DevKinsta allows you to push changes to your Kinsta Staging environment, but there isn’t any sort of built-in way to handle version control.

Below are the steps I took to add git to my DevKinsta setup. These steps assume that you are using a Mac and keep the entire WordPress install under version control.

Install DevKinsta. If it’s not already installed, you’ll also need to install Docker.
If your site is hosted with Kinsta, open DevKinsta and select “Import from Kinsta.” Depending on the size of your database and media library, this process might take a while.
Once the local site is up and running, you can find the site’s WordPress files in: /Users/USERNAME/DevKinsta/public/SITE
The next step is to clone your WordPress repository from GitHub. Select the DevKinsta/public/ folder as the destination. You’ll now have two sites in the public folder.
Within the ../DevKinsta/public folder, rename the original folder to something like SITE-old
Rename the git folder to the original folder’s name: SITE
Copy the wp-config.php file from SITE-old and paste it into SITE
Copy the wp-content/uploads folder from SITE-old and paste it into the property folder in SITE
Since you changed the path of the local git repo, make sure git can locate it (this is easy with Github Desktop)

That’s it! From there you can follow your normal local development and deployment process.

If you only have version control setup for a specific plugin or theme, you can follow the steps above, but instead of renaming the entire site, navigate to ../DevKinsta/public/wp-content/ and delete or rename the specific plugin/theme you’re working on. There’s also the option of symlinking the plugin/theme if you want to store them elsewhere.

Overall, I’m happy with DevKinsta. I usually avoid Docker based solutions, but I’m glad I gave DevKinsta a try.

If you’re interested to learn more about Kinsta, my full review is here.

DevKinsta: Your Local WordPress Development Suite

This post contains affiliate links, but as a regular web developer, it is my honest review of Kinsta and DevKinsta.

Laravel Jetstream: Minimal Teams Dropdown Menu

I’m using Laravel Jetstream for a side project (activetrackers.com) and I wanted to make the teams dropdown menu minimal because I’m not using any of Jetstream’s current team or team switching functionality.

Only team owners need access to the teams menus, so instead of switching teams, I want them to be able to directly access to the settings page of each team.

Editing the Teams section of the navigation-menu-blade.php file, here’s what I came up with:

<!-- Teams Dropdown -->
@if ( count(Auth::user()->ownedTeams) > 0 )
  <div class="ml-3 relative">
    <x-jet-dropdown align="right" width="60">
      <x-slot name="trigger">
        <span class="inline-flex rounded-md">
          <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
            {{ __("Manage Groups") }}
            <svg>...</svg>
          </button>
        </span>
      </x-slot>
      <x-slot name="content">
        <div class="w-48">
          @foreach (Auth::user()->ownedTeams as $team)
            <x-jet-dropdown-link href="/teams/{{ $team->id }}">
              {{ $team->name }}
            </x-jet-dropdown-link>
          @endforeach
        </div>
      </x-slot>
    </x-jet-dropdown>
  </div>
@endif

Here are screenshots of the before and after for a user who owns two teams:

Note: In my app, I updated “Teams” to “Groups” and used @if ( count(Auth::user()->ownedTeams) > 0 ) to only display the teams menu to team owners. I also made changes to the settings/profile dropdown, but that’s a topic for another post.

Launching Active Trackers

I’m excited to announce the release of Active Trackers. Active Trackers is a web app that allows you to track pushups and pullups (more exercises to come). It’s free to use, but for $4.99/year you can create private groups to challenge your friends and family.

I started building Active Trackers in April 2020. The pandemic had just started and I wanted to find a new way to track my fitness progress. I also wanted to create an app to get a chance to really dive deeper into the Laravel PHP framework.

I had a basic MVP done within a couple weeks, but then spent 12 months refining it on an inconsistent basis. For the last two weeks I finally buckled down and refined all of the major pieces enough to launch the app.

I challenged my family to a July pushup challenge and there’s more than ten of us participating in the challenge.

Check it out. If you have any questions or feedback, let me know.

Alternatives to Google Analytics

Over the last few years I’ve been slowing moving away from Google services and products. It was pretty easy to move on from products like Gmail and Chrome, but it’s been tough to get away from Google Analytics.

For a couple months I tried out the self-hosted version of Fathom when it initially launched. It worked, but it was a pain to set up and host. Their new, hosted version looks great, but $14/month is a little steep for someone with a handful of hobby sites.

I just wanted simple, privacy-focused analytics for a reasonable price, but there didn’t seem to be any good options.

A couple months ago, I ran across Plausible in my Twitter feed. I signed up for a free trial and within a couple days I was sold. It was everything I needed. Lightweight and privacy focused analytics for a reasonable price. I purchased the annual plan for $48 and now have it running on three sites.

It’s you’re looking for a Google Analytics alternative, check it out. On the other hand, if you’re still using Google Analytics, you should think about all the free data you’re sending to Google.

Prefilling a Date Input with the Local Date

I’m working on an app that has a date picker and I’d like to prefill it with the current date.

I found Prefilling a Date Input on CSS Tricks, but that code returns a UTC date instead of the local date. After stumbling around for a while, I figured out a solution with JavaScript:

let $localDate = new Date().toLocaleDateString();
$localDate = new Date($localDate);
document.querySelector("#local-date").valueAsDate = $localDate;

toLocaleDateString() converts the date to the local date and then the second line creates a new Date object based on that local date. Without creating the new Date object, I was getting this error:

TypeError: HTMLInputElement.valueAsDate setter: Value being assigned is not an object.

For the record, the date input in my form looks like this:

<input type="date" name="date" id="local-date" required>