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:

Before

After

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>

Zeit PHP

I have a small PHP project deployed on Zeit that gave me a 502 error after I recently updated it:

502: BAD_GATEWAY 
Code: NO_STATUS_CODE_FROM_FUNCTION

In the logs, I found this error:

./php-fpm: error while loading shared libraries: libcrypt.so.1: cannot open shared object file: No such file or directory

After searching searching the internet for more than a few minutes, I discovered that Zeit changed their PHP builder. In order for older PHP applications to work, the now.json file needs to be updated to use now-php instead of @now/php

As an example, here’s what my now.json looks like now:

{
  "version": 2,
  "alias": "DOMAIN.com",
  "builds": [
    {
      "src": "*.php",
      "use": "now-php"
    }
  ]
}

I discovered the issue on this Github comment:

https://github.com/zeit/now-builders/issues/743#issuecomment-517848979