DEV Community: Dmitry Semenov

Device limit reached for this Apple ID - Solution

Dmitry Semenov — Wed, 05 Jun 2024 14:46:28 +0000

During the new device onboarding process, if you have been using the Apple ecosystem for a while and have changed multiple devices over time, you may encounter the Device Limit issue that Apple displays when you try to use your device with Apple Music (and likely other media apps as well) but you have a number of devices already associated with your Apple ID.

Apple's instructions for addressing this issue are outdated. They refer to buttons that no longer exist, likely due to previous operating system versions. Additionally, a solution to this problem does not appear to have been posted online prior to my comment on Reddit. It received significant attention, so I decided to cross-post the solution here to help more people find it.

MacOS solution

Follow these steps to access the interface that allows you to remove old devices from your media limit count.

System settings
Apple ID
Media & Purchases
Account - Manage
Hidden Items section - Manage Devices
Click "Remove" on each device you no longer use, allowing you to access Apple Music on your new device.
Enjoy!

Remote power monitoring

Dmitry Semenov — Wed, 05 Jun 2024 14:44:11 +0000

The power delivery in Ukraine currently faces challenges due to a power deficit caused by Russian terrorist attacks on the Ukrainian infrastructure. As the balance between consumption and generation fluctuates, periodic shutdowns occur in different districts based on a semi-accurate schedule.

My apartment is on a high floor, higher than most people are willing to climb by stairs. Typically, during a power outage, you would prefer to spend more time outside. Thus, my family and I need to know when the electricity is on or off, no matter where we are.

Project Goals

Receive notifications when power goes online and offline.
Gain insight into power outage patterns and durations to improve home routines and travel planning.

Potential Solutions

Rely on one of the smart devices that already sends notifications when it goes offline.
Leverage the full capabilities of homelab infrastructure.

I don’t think I need to explain why the latter option is the best one, right?

Requirements

One power independent server
One indicator of the electricity presence

As a power-independent server, I’ll use my existing AWS Lightsail instance, which I maintain for my pet projects. It will handle all management tasks, including checking the home power status, keeping a history, and sending notifications. To check if my home has electricity, I’ll use a network device with a persistent IP address that is always connected to the network. There are countless ways to check if the home is offline, but the method I chose fits well with my secondary goal of trying out the Tailscale subnet router feature.

Tailscale

Tailscale is an app that creates a flexible and easy-to-use software-defined network on top of the fast and secure WireGuard protocol. I have my own network that I can access from anywhere in the world. This network allows me to connect to any device I’ve joined, with a granular access control list (ACL) that lets me decide which devices can see and access specific resources.

In this project, an additional server acts as a Tailnet subnet router. It connects the device used to detect electricity status to the Tailnet since direct installation on the device is impossible. Although I could use this server instead of the AWS one, I prefer the Lightsail instance due to the Uptime Kuma app already installed there.

Uptime Kuma

The core of my monitoring system is Uptime Kuma, a self-hosted monitoring tool that supports various monitoring methods such as HTTP(S) requests, ping, gRPC, DNS, and others. To check device connectivity, I’ll use a simple ping through Tailnet. As long as the ping is successful, it indicates the device is connected to the network and powered on. After configuring the ping monitor, I immediately started collecting outage events, addressing one of my initial goals.

Notifications

To inform my family about the power status, relying solely on the status page is insufficient. Uptime Kuma offers a variety of notification options out of the box. I tested two: webhooks and Telegram. Using webhooks with n8n allowed me to customize texts or payloads sent to users, including AI-powered jokes. However, after trying both, I opted for native Telegram notifications for their reliability, avoiding unnecessary complications. While this means fewer fun messages, it reduces dependencies.

Future Enhancements

Initially, I considered using the EcoFlow API, which not only indicates power status but also provides data on current backup battery charge. However, they require a business week to review API access requests, which delayed this integration. Once approved, this can be a great addition to the intranet monitoring system in the future.

Use Slugs instead of IDs

Dmitry Semenov — Sun, 20 Feb 2022 00:38:46 +0000

While articles with the entire feature development process can be attractive to a couple of visitors, it appears that How-To's for a specific topic is way easier to find in the search engines. I'll keep posting project-related articles to share some product/discovery cases and focus more on guides for tech topics.

This time let's talk about slugs in the Phoenix framework. Slug is the part of the URL that uses human-readable keywords to identify a page. Slug is the first thing you want to support for blog post URLs, public profiles, FAQ articles, etc.
Generators of the Phoenix framework use IDs by default, and you have to let the framework know about your intention to use slugs instead.
So let's see the steps required to use slugs instead of IDs in your URL.

Basic slug support

First, define a method the app will use to search your objects using the slug, name, title, or any other field of your choice.
You can put this near get_organization! method that the CRUD generator created for you.

  def get_by_slug!(slug), do: Repo.get_by!(Organization, slug: slug)

Now replace get_organization! calls in all live/organizations methods that you'll find (show, edit, delete actions should use this to find an organization by id) with brand new get_by_slug! call.
It won't work yet since we need to tell Phoenix that we changed a key parameter from id to slug. Add this at the top of your organizations schema to achieve this.

  @derive {Phoenix.Param, key: :slug}

Read more about Phoenix.Param protocol here.

We have covered the happy path scenario, where users click URLs generated by the framework, but we should also consider users who can type URLs in their browser window.

Handle MixedCase uniqueness

My organization slug is Fluxdash. I still want to enter fluxdash and get the same results. We also wish to treat slugs' uniqueness despite CaseSelection.
To get this done, we need to create a new unique index that will apply the lower() function to the passed slug. Let's generate new migration for this.

  mix ecto.gen.migration add_organization_slug_unique_lower_index
  ...
  create index(:organizations, ["lower(slug)"], unique: true)

If you're here from the first post where we created the organization's table, you should also drop the unique index that we added at the beginning.

  drop_if_exists index("organizations", [:slug], slug: :organizations_slug_index)

Now, as we also got a new index slug, we must reflect that in our constraint validation in the changeset; let's put the new index slug here.

  ...
  |> unique_constraint(:slug, slug: :organizations_lower_slug_index)

And now we should update our get_by_slug! function to use the index, and downcase input string to perform case agnostic searches.

  def get_by_slug!(slug), do: Repo.one!(from o in Organization, where: fragment("lower(?)", o.slug) == ^String.downcase(slug))

Now we can use show/edit/delete with organization slugs instead of IDs.

If you need to generate slugs for more complex scenarios, such as blog titles without strict format requirements, take a look at the https://github.com/sobolevn/ecto_autoslug_field library, which can generate slugs based on the existing field.

Update routes to use `slug` param name

If you have both types of routes, with ids and slugs, it makes sense to adjust router with expected attribute name to avoid confusions.

  # lib/fluxdash_web/live/organization_live/show.ex
  def handle_params(%{"slug" => slug}, _, socket) do
  ...
  end

  # routes.ex
  live "/organizations/:slug", OrganizationLive.Show, :show

PS. Originally posted as part of Fluxdash Organizations series.

Phoenix LiveView Tailwind CSS Modal

Dmitry Semenov — Tue, 04 Jan 2022 20:59:45 +0000

It took me a while to figure out how to style a modal window with Tailwind CSS (had to Google how to center a div), so want to share what I've got for anyone who will be searching for LiveView Tailwind CSS Modal styles.



def modal(assigns) do
    assigns = assign_new(assigns, :return_to, fn -> nil end)

    ~H"""
    <div id="modal" class="overflow-y-auto fixed inset-0 z-10 pt-6 phx-modal" phx-remove={hide_modal()}>
      <div class="flex justify-center items-end px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
          <div class="absolute inset-0 bg-gray-200 opacity-75"></div>
        </div>

        <div id="modal-content" class="inline-block overflow-hidden px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform phx-modal-content sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline"
            phx-click-away={JS.dispatch("click", to: "#modal-close")}
            phx-window-keydown={JS.dispatch("click", to: "#modal-close")}
            phx-key="escape">
          <div class="relative">
            <%= if @return_to do %>
              <%= live_patch "✖",
                id: "modal-close",
                to: @return_to,
                phx_click: hide_modal(),
                class: "inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none"
                %>
            <% else %>
             <a id="close" href="#" class="inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none" phx-click={hide_modal()}>✖</a>
            <% end %>
          </div>
          <%= render_slot(@inner_block) %>
        </div>
      </div>
    </div>
    """
  end

And this is how it looks now.

Tested with: phoenix_live_view: 0.17.5, tailwindcss: 3.0.2.