---
title: 'Headless WordPress & Next.js on Kubernetes: Page Revalidation and CDN Invalidation'
date: '2023-03-26'
tags: ['next.js', 'wordpress', 'kubernetes']
draft: false
featuredImage: blog/robot-person-at-a-desk-weird.jpeg
summary: >
  If you're looking to revalidate a Next.js page automatically after a WordPress post update, read
  on! The technique can be applied to any back-end using Next.js for the front-end, hosted in a
  Kubernetes cluster.
---

<Aside>
  Update 2023/04/12: This article in its current state only addresses 75% of the problem. An update
  is forthcoming to include the process to clear the CDN of the relevant NextJS .json data files.
</Aside>

## The Problem

The problem faced is not unique: following a post update on back-end, we want to have the front-end
automatically _revalidate the page_ in order to cache the latest content in the Next.js page cache.
Then, if we're using a CDN on top of that, we want to automatically purge that same path in the CDN
as well.

## The Solution

This solution is based on the premise that the front-end _and_ back-end are both hosted in the same
Kubernetes cluster. With this setup, the front-end and back-end pods can communicate directly
without needing to leave their local network.

If your setup does not have the front-end and back-end pods sharing the same cluster, there _is_ a
workaround, although it's not quite as efficient.

In a nutshell, here's how we can handle this issue if both front-end and back-end are in the same
cluster:

**When a post is updated in the back-end, we need to trigger the following:**

1. Make a request to Kubernetes to get a list of all front-end pod IP addresses.
2. Send simultaneous async Next.js API requests to _each_ front-end pod to
   [revalidate a path.](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation)
3. If all requests return successfully, send one final request to the CDN to clear the path from CDN
   cache.

If the front-end and back-end are _not_ in the same cluster, here are similar steps which can
accomplish the same:

**When post is updated in back-end, we'd need to:**

1. Make a _single_ Next.js API request to the front-end to revalidate a path.
2. The receiving Next.js pod requests a list of its neighboring front-end pod IPs from Kubernetes.
3. The Next.js pod sends simultaneous async requests to all neighboring front-end pods to revalidate
   the same path(s).
4. If all requests return successfully, the pod sends one final request to the CDN to clear the path
   from CDN cache.

As you can see, they're similar approaches, but the 2nd version requires an additional network
request, which can cause the entire process to take _slightly_ longer.

For this article, we'll focus on the **first** approach.

**Here we go!**

## Step 1: Set up a `kubectl` "Sidecar" for Kubernetes

First, set up a
["sidecar"](https://kubernetes.io/docs/tasks/run-application/access-api-from-pod/#using-kubectl-proxy)
pod whose sole responsibility is to run
[kubectl proxy](https://kubernetes.io/docs/tasks/extend-kubernetes/http-proxy-access-api/#using-kubectl-to-start-a-proxy-server).

I set up `kubectl proxy` to run on port **8001**, which is closed to the rest of the internet from
Kubernetes. This port would _only_ be used by local neighboring pods to make Kubernetes API
requests.

This sidecar pod doesn't need many resources; it can be set quite low. Perhaps 0.5 vCPU and 0.5GB
memory.. experiment and find what works best for your system.

<Aside>

### But why can't I use a PHP package to get the Kubernetes pod list?

When I was first exploring this problem, I attempted to use the
[AWS PHP SDK](https://docs.aws.amazon.com/aws-sdk-php/v3/api/class-Aws.EKS.EKSClient.html). The SDK
does have functions to describe clusters and node groups, but it couldn't _list **pods** and their
associated details_. This was a problem, and I needed to come up with an alternate solution.

> Note: If you do find a PHP package that's well-supported and can list Kubernetes pods within AWS,
> please share! If something like this is available, then the "sidecar" is not required.

</Aside>

### The "Sidecar" Code

The `kubectl proxy` "sidecar" pod is based on a Docker image. Here's a simplified, generic version
of what I used:

<CodeHeader>kubectl.dockerfile</CodeHeader>

```bash
# Using AWS CLI as base image because as part of the build process,
# we need to use AWS credentials to gain access and set the default
# kubectl cluster.
FROM amazon/aws-cli:latest

# Replace with your specific info:
ARG AWS_ARN=arn:aws:eks:us-east-1:1234567890:cluster
ARG CLUSTER_NAME=the-cluster-name
ARG AWS_REGION=us-east-1
ARG ARCH=arm64

# 1.24.x was throwing an error during build. Using 1.23.6 for now.
ARG KUBECTL_VERSION=1.23.6

# Provide these args securely during the build command via --build-arg
ARG AWS_ACCESS_KEY_ID
ARG AWS_SECRET_ACCESS_KEY
ENV AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID}
ENV AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY}

# Install kubectl dependency. There is code in the back-end which needs to list and ping
# specific running pods. In order to do this, we need to use the kubectl API. The reason for this,
# is that the latest PHP SDK for AWS does not appear to be able to list pods itself.
RUN curl -LO "https://dl.k8s.io/release/v${KUBECTL_VERSION}/bin/linux/${ARCH}/kubectl"
RUN install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl

# Configure AWS EKS and kubectl for the specific cluster.
RUN aws eks --region ${AWS_REGION} update-kubeconfig --name ${CLUSTER_NAME}
RUN kubectl config use-context ${AWS_ARN}/${CLUSTER_NAME}

# Copy kubectl proxy startup script so it can be used in container.
COPY kubectl.sh /usr/src/
RUN chmod +x /usr/src/kubectl.sh

ENTRYPOINT [ "sh", "/usr/src/kubectl.sh" ]
```

The contents of `kubectl.sh` startup script is as follows:

<CodeHeader>kubectl.sh</CodeHeader>

```bash
#!/bin/bash

# This opens up kubectl access via API endpoint for the kubectl pod.
# Attempted access to port 8001 (where kubectl proxy serves from) will be
# allowed from any local host with access to port 8001 in the cluster.
# Specific paths can be allowed, and accepted hosts can be further restricted.
kubectl proxy --address 0.0.0.0 \
    --accept-hosts '.*' \
    --accept-paths '^/api/v1/namespaces/default/pods*'
```

When this `kubectl` (name can vary or be customized, of course) pod gets built and deployed to the
Kubernetes cluster, we should have a `kubectl` pod available locally which can be accessed via HTTP.
For example, to get our list of pods within the cluster, we could make a `GET` request to:
`http://kubectl:8001/api/v1/namespaces/default/pods`

## Back-end (WordPress)

With the sidecar now set up, we can prepare the back-end code for WordPress in PHP. For brevity, I'm
going to skip all the fundamental error handling and scaffolding required to write some proper
classes and tests to support this. Let's skip straight to the main points.

Here's a helper function that we'll use to fetch a list of local pod IP addresses:

```php
function get_front_end_pod_ip_addresses() {
  // Don't forget to check for errors, handle exceptions and validate data!
  $front_end_service_name = "your-front-end-service-name";

  // Fetch a list of pods from the kubectl sidecar container.
  $kubectl_api_result      = wp_remote_get( "http://kubectl:8001/api/v1/namespaces/default/pods" );
  $kubectl_api_result_body = wp_remote_retrieve_body( $kubectl_api_result );
  $pods_list = json_decode( $kubectl_api_result_body );

  // Prepare a list of Kubernetes Pod IP addresses.
  $pod_ip_addresses = array();

  // Overrides the pod IP for local development purposes.
  // Value can be something like: host.docker.internal:3000
  // We can use this value to make an actual call to the front-end
  // Next.js development environment, for example.
  $pod_ip_address_override = getenv( 'POD_IP_ADDRESS_OVERRIDE' );

  foreach ( $pods_list->items as $pod ) {
    if ( str_contains( $pod->metadata->name, $front_end_service_name ) ) {
      // If $pod_ip_address_override is populated, we'll use that specific IP for each entry.
      // We allow the function to process this far rather than returning these values early,
      // so that we can be sure that the whole process works as intended.
      $pod_ip_addresses[] = $pod_ip_address_override ? $pod_ip_address_override : $pod->status->podIP . ':3000';
    }
  }

  return $pod_ip_addresses;
}
```

This helper function is used to retrieve our list of local Kubernetes front-end pod IP addresses, to
which we'll _then_ send
[Next.js on-demand revalidation requests.](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation)

Since this on-demand revalidation process is well-documented in the previous link, I will not go
into details on setting that up here.

See below for a function to leverage the front-end pods' on-demand ISR revalidation API:

```php
function revalidate_nextjs_cache( $relative_url = '' ) {
  // Don't forget to check for errors, handle exceptions and validate data!

  // Here's our helper in play:
  $pod_ip_addresses = get_front_end_pod_ip_addresses();

  $next_api_token = getenv( 'NEXT_API_TOKEN' );

  // Prepare an array of POST requests to send asynchronously.
  $requests = array();
  foreach ( $pod_ip_addresses as $pod_ip_address ) {
    $requests[] = array(
      'url'  => "http://$pod_ip_address/api/revalidate?" . http_build_query(
        array(
          "secret" => $next_api_token,
          "path"   => $relative_url,
        )
      ),
      'type' => 'POST',
    );
  }

  // https://developer.wordpress.org/reference/classes/requests/request_multiple/
  // Note: it seems this Requests class is deprecated. Should be updated to use
  // the new version...
  $responses     = \Requests::request_multiple( $requests );
  $response_data = array();

  // Loop through each response and ensure all of them can be properly decoded.
  /** @var Requests_Response|Requests_Exception_Transport_cURL $response */
  foreach ( $responses as $response ) {
    if ( is_a( $response, 'Requests_Exception_Transport_cURL' ) ) {
      // Handle your exceptions...
      return new \WP_Error( 'exception', __( $error_message, 'your-text-domain' ) );
    }

    if ( is_a( $response, 'Requests_Response' ) ) {
      $response_data[] = json_decode( $response->body );
    }
  }

  // Loop through each decoded response to ensure they've all succeeded to revalidate.
  foreach ( $response_data as $data ) {
    // If at least one of the revalidation attempts fails, the entire process fails.
    if ( ! isset( $data->revalidated ) || true !== $data->revalidated ) {
      $error_message = 'Unable to revalidate URL. Response: ' . wp_json_encode( $data ) . ' - URL: ' . $relative_url;
      return new \WP_Error( 'failed-to-revalidate', __( $error_message, 'your-text-domain' ) );
    }
  }

  // Success!
  return true;
}
```

**Note:** It should be fairly easy to modify this code to support an array of paths instead of a
single path! This could be helpful to revalidate pages in bulk, say during a bulk post update.

Finally, let's stitch these together to call this when a post is updated:

```php
function post_updated_handler( $post_id, $post_after, $post_before ) {
  // Don't forget to check for errors, handle exceptions and validate data!

  if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
    // We only want to revalidate the cache on the final save action, so skip this one.
    return;
  }

  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    // There is no need to revalidate the cache for an autosave, either. Skip it.
    return;
  }

  if ( 'publish' !== $post_after->post_status ) {
    // Do not clear caches for drafts, private, future, etc.
    // If we want to clear caches when a post is moved from one state to another, we'll
    // need to leverage the transition_post_status action:
    // https://developer.wordpress.org/reference/hooks/transition_post_status/
    return;
  }

  // Retrive only the /relative/url/to/page/ (strip the domain).
  $relative_url = str_replace( 'https://yourdomain.com/', '', get_the_permalink( $post_id ) );

  // Let's revalidate this relative URL in front-end:
  $next_result = revalidate_nextjs_cache( $relative_url );

  // If the NextJS revalidation attempt fails, there's no need to attempt
  // to invalidate the CDN. Exit early.
  if ( is_wp_error( $next_result ) ) {
    return $next_result;
  }

  $invalidation_id = invalidate_url_in_cdn( $relative_url );

  // We could use this ID to link directly to the invalidation in AWS.
  return $invalidation_id;
}

add_filter( 'post_updated', array( $this, 'post_updated_handler' ), 10, 3 );
```

**But wait! What is this `invalidate_url_in_cdn()` function??**

See below. This one is based on AWS CloudFront, but you can modify the function to invalidate any
CDN with API access.

```php
// https://docs.aws.amazon.com/sdk-for-php/v3/developer-guide/getting-started_installation.html
use Aws\CloudFront\CloudFrontClient;
use Aws\Exception\AwsException;

function invalidate_url_in_cdn( $relative_url = '' ) {
  // Don't forget to check for errors, handle exceptions and validate data!

  // Set this any way you'd like. This is just an example.
  $distribution_id = getenv( 'CLOUDFRONT_DISTRIBUTION_ID' );

  // Set up the CloudFront client via AWS PHP SDK.
  $cloudfront_client = new CloudFrontClient( array(
    'version' => 'latest',
    'region'  => 'us-east-1',
  ) );

  try {
    // Generate a unique md5 string. Or set whatever you would like.
    $caller_reference = md5( time() );

    $result = $cloudfront_client->createInvalidation(
      array(
        'DistributionId'    => $distribution_id,
        'InvalidationBatch' => array(

          'CallerReference' => $caller_reference,
          'Paths'           => array(
            'Items'    => array( $relative_url ),
            // Can be modified to use count( $urls ) if this function accepts an array of URLs.
            'Quantity' => 1,
          ),
        ),
      )
    );

    if ( isset( $result['Invalidation'] ) && isset( $result['Invalidation']['Id'] ) ) {
      // Success! Return the ID string.
      return $result['Invalidation']['Id'];
    }

    // Uh oh, couldn't find the invalidation ID...
    $error_message = 'CloudFront Invalidation ID not found for attempted invalidation of ' . $relative_url;
    return new \WP_Error( 'failed-to-invalidate-cdn', __( $error_message, 'your-text-domain' ) );

  } catch ( AwsException $exception ) {
    // Welp, we failed.
    return new \WP_Error( 'aws-exception', __( $exception->getMessage(), 'your-text-domain' ) );
  }
}
```

## Conclusion

That's the gist of it! Now when you update a post, page, etc. in WordPress, the front-end pods
should revalidate the page, followed by a CDN cache clear on successful revalidation.

If you have any questions, or run into any issues, please feel free to ping me on Twitter:
[@missionmikedev](https://twitter.com/missionmikedev) or find me on
[LinkedIn.](https://www.linkedin.com/in/michaeldinerstein/) I can't promise an answer, but I can
promise a response :)


If you're looking to revalidate a Next.js page automatically after a WordPress post update, read on! The technique can be applied to any back-end using Next.js for the front-end, hosted in a Kubernetes cluster.


Headless WordPress & Next.js on Kubernetes: Page Revalidation and CDN Invalidation

---
title: 'Software Development and AI: A Musing'
date: '2023-03-15'
tags: ['musings']
draft: false
featuredImage: blog/person-programming-outside.png
summary: >
  There's a murmuring of AI "taking jobs" from software developers, graphic designers, musicians,
  and  the like. Whether it's GPT-3, GPT-4, or the next iteration of machine learning, one thing is
  true: it's evolving.
---

## Fear of Software Evolution

There's a murmuring of AI "taking jobs" from software developers, graphic designers, musicians, and
the like. Whether it's GPT-3, GPT-4, or the next iteration of machine learning, one thing is true:
it's evolving.

This is not bad news. There's much fear associated with these breakthroughts; fear from developers
and designers of all levels. Many are worried that the new technology will replace them or make
their creative problem-solving skills obsolete. New developers may be concerned that their chances
of breaking into tech are shrinking slimmer by the day.

I hope this musing helps allay these concerns.

## Embracing Change

Things are changing. Fast. Within the last decade, artificial intelligence (AI) and machine learning
(ML) have taken tech by storm. It started small and relatively unpromising. However thanks to
relentless human creativity and drive, it grows exponentially more sophisticated and reliable.

This should be no surprise! People have created incredibly complex and sophisticated technical
advancements for centuries. This is not the first technical revolution, and we can learn from the
past.

<Aside>

### Consider: Algorithms

Consider the state of the current technical interview process. It's not uncommon to have a developer
jump through hoops programming algorithms, demonstrating their in-depth understanding of data
structures, or narrating their live coding solutions to some arbitrary logic problem... all to gain
the trust and acceptance of their interviewers. Why? Most algorithms have been solved; their speed
and efficiency is understood. Why do we constantly need to rewrite them or reiterate our
understanding of them?

So, what if AI coding could handle all the algorithmic solutions? What if it could provide the
correct data structure for the problem at hand? This would mean that software developers would no
longer need to spend hours working on such things. Instead, human developers could spend their time
piecing together the manufactured parts of a larger application, fine-tuning performance, user
experience and developer experience.

Rather than spending hours finding the most performance algorithm to sort a set of data, we could
prompt AI: "write a function to sort a data set where items are provided in this structure:
[structure]. The sorting function should be as fast as possible." ...then we can shift gears to work
on the more complex parts of a project &mdash; the parts that require human intelligence.

</Aside>


There's a murmuring of AI "taking jobs" from software developers, graphic designers, musicians, and  the like. Whether it's GPT-3, GPT-4, or the next iteration of machine learning, one thing is true: it's evolving.


Software Development and AI: A Musing

---
title: 'Building A Software Development Career: My Story (Part 2)'
date: '2023-01-18'
tags: ['career']
draft: false
featuredImage: blog/direction-inverted.jpg
summary: >
  Growing a career as a software developer is a challenging and rewarding effort. Here's some steps
  I took to help take my career to the next level. Perhaps they'll help you also.
---

## Part II: Preparing to Jump

After several years within the same company, I realized I hit a ceiling for growth. There was
nowhere to grow internally, and my compensation was not going to improve.

At this point, I realized I needed to make a jump. But how? I developed software alone. How could I
level up my skills?

Read on about some steps I took to help grow my skills and make myself more marketable.

## 1. Testing Code

I would see lots of posts on LinkedIn and Twitter about TDD (Test-Driven Development). I'd ask
myself questions like "Do I have time to write this extra code? Do I have to ask permission from
upper management to allocate some of my time to do this?"

As I learned more about it, I decided not to ask permission, but rather to take the risk of having
to ask for forgiveness.

<Aside>

### Personal Case Study: The Payment Portal

I inherited an undocumented project that was critical to the company: a credit card processing
payment portal. The majority of company's sales deals were processed through this portal, but the
code was messy, logic was unclear, and _nothing_ was documented.

For a while after the previous Senior Developer left, I just prayed this payment portal service
would continue functioning as expected.

Then I was tasked with making a minor update to it, and I _knew_ it was time to tidy up.

Long story short: I rewrote the codebase, and wrote an accompanying automated test suite with
[Cypress](https://github.com/cypress-io/cypress) to fully test all expected functionality. The
process took me about a week longer than it would have taken without writing the tests - however, I
was able to demonstrate the tests to upper management when it was completed, and I'm happy to report
that I did **not** need to ask forgiveness; it was deemed time well spent. Furthermore, I was able
to demonstrate how these tests helped save us from issues in the future by catching errors.

</Aside>

## 2. Act as If

Using version control software is a non-negotiable requirement in modern software development.
Learning to leverage git was a critical stepping stone for growth.

`git` software is typically leveraged by teams to allow developers to work on the same codebase
simultaneously without much friction.

Within the context of the company I worked for, `git`'s primary purpose was to track the commit
history to verify which work was done; to save a historical record of progress.

I read up a bit on team development, and learned more about branching, releasing, and what the
pull-request (PR) process should look like. I learned about continuous integration (CI) and
continuous deployment (CD). I realized that these were practices that I could learn and practice _on
my own_ &mdash; even without a team!

<Aside>

### Personal Case Study: Continuous Integration (CI) and Pull Requests (PRs)

Earlier in my career, a typical deployment process involved SFTP,
[rsync](https://linux.die.net/man/1/rsync), WordPress
[Duplicator](https://wordpress.org/plugins/duplicator/), or similar. While studying continuous
integration, I learned that the deployment process could be automated via GitHub Actions.

When I first set up CI, I used `rsync` under the hood &mdash; however it was used in the context of
a [GitHub Actions workflow.](https://gist.github.com/missionmike/a21d92370e92dd129fb2be8bd4ab3015)

I set this up to reduce the amount of time and manual work that a deployment would require. But
still... something was missing.

### Pull Requests

The GitHub Actions workflow was set up, but how would I use it effectively?

At first, I triggered it manually. _Then_ I learned about how to leverage automation within a PR
process. Once I figured out how to do this, I'd have this deployment workflow run whenever code was
merged successfully into `main`, and it passed linting and tests.

By **"Act as If,"** I'm referring to acting as if I was working with a team. I would open a PR for
code that I wrote, write a relevant description and list notable changes, and include notes on how
to test it. I knew these descriptive PRs would not only help my future self, but they could
potentially help whoever was going to take over my role in the future.

So, I acted as if I was in a collaborative environment by tracking my steps, automating my
deployments, and logging enough information to help the next person.

</Aside>

## Conclusion

I hope these tips are helpful. I'll revisit this article and update with more in the future. Happy
(clean) coding!


Growing a career as a software developer is a challenging and rewarding effort. Here's some steps I took to help take my career to the next level. Perhaps they'll help you also.


Building A Software Development Career: My Story (Part 2)

---
title: 'Building A Software Development Career: My Story (Part I)'
date: '2022-12-21'
tags: ['career']
featuredImage: blog/direction.jpg
summary: >
  Growing a career as a software developer is a challenging and rewarding effort. Here's some things
  that have proven to help me along my own journey. Perhaps they'll help you also.
---

## Part I: Internal Growth

My first role in tech was **not** as a software developer. My first title was "Junior Graphic
Designer" in a small company of about 40 people.

Within 6 years my role grew to "Lead Developer / Designer" and I eventually left the company after 8
years for a fullstack developer role elsewhere.

In order to grow internally at the _first_ company and prepare to make an eventual jump for a more
fulfilling role, I had to first learn a few new things to increase my value.

Below are some key values and specific decisions which led to steady _internal growth_ in my first
position. These are steps which took me outside of my comfort zone and pushed my limits; I believe
these steps are universal in nature and can be applied to many careers, but are especially relevant
to software development and engineering.

## 1. Don't Settle: Push Boundaries

All websites and applications, no matter how impressive, have something in common: _people built
them._ People no different from you or me. People who worked hard, tried new things, and _maybe_ got
a little lucky along the way.

### Everything can be created.

_"I can't build that"_ is not a valid excuse working in the modern web. There's an incredible amount
of open source projects, tutorials, and blog posts, etc. at our disposal to learn from. Nothing is
impossible to create, and breakthroughs happen every day. With time and dedication to learning, much
can be accomplished.

If I limited myself to what I already knew, or what I'd already tried and had success with, I would
not have grown at all.

<Aside>

### Personal Case Study: Pushing Boundaries

Early in my tenure with <a href="https://www.rrfedu.com/" target="_blank" rel="noopener">RRFC</a>, I
noticed an internal software development need. The company was relying on a 3rd-party start-up
vendor for their learning management software to teach students online and in hybrid learning
scenarios.

This software was a no-code solution. It ran smoothly, but having little control of it made me
uncomfortable. I felt that the company and offerings to students could grow if we had the freedom
and ability to expand our own platform, crafting it to fit our specific needs.

Some questions that ran through my mind as I realized this need:

- What if the 3rd-party company went under? How would we quickly recover?
- What if they suddenly became very popular and raised their prices?
- What did they offer which we couldn't replicate in-house?
- How can we add our own features needed to improve student experience and meet strict state
  licensing requirements?

#### The Action

I drafted up an email pitch to upper management. I clearly outlined the opportunity I saw to expand
the company's digital footprint and improve their offerings using a _new software which could be
developed in-house._ Something that they could **own**.

**The email was well-received,** and I was given the priviledge to spearhead this project! The work
ended up spanning two years, and I was the sole developer and designer for the majority of the work.

This was an opportunity to grow my development skills while providing new value. **Important note: I
did not know how I was going to build this!** I only knew that it _could be done._

This faith in myself and understanding that all technical things are possible with time and learning
was the launchpad for the next phase of my career. This work became a milestone on my resume, but it
took a lot of dedication.

</Aside>

## 2. Stay Informed & Network

This may go without saying for many people, but it's still important enough to reiterate here. For
my first few years as a developer (this might sound silly), I did not know there was an actual
_developer community_ out there!

I went to community college and made a few acquaintances, but most of us in class were flying solo.
There were no real collaborative team dev projects, like you would find in the real world. This
experience was not an accurate reflection of real software development, where team integration is a
critical skill.

### I stumbled on the developer community by accident.

There are a myriad of podcasts and highly-visible software developers out there; find your preferred
technology and then search for relevant podcasts. There's a fit for everyone!

Twitter and LinkedIn can be an exceptional place to connect and interact with other professional
developers - many of whom have worked on or created the very libraries and packages you use every
day. Following people who have made significant contributions to technology is rewarding and very
accessible.

<Aside>

### Personal Case Study: Staying Informed

I stumbled across the [syntax.fm](https://syntax.fm/) Podcast and my life as a developer was
changed. Listening to [Wes Bos](https://wesbos.com/) and [Scott Tolinski](https://levelup.video/)
discuss web development trends and technology really struck a chord with me &mdash; and it provided
a productive way to pass time during a commute!

At this point in my career I was working mostly remote, however I had to commute to the city once a
week to meet with the execs in the office. It was typically a 1 to 2-hour drive each way, and
listening to the Syntax podcast during the drive not only made it bearable &mdash; it made it _fun_.

I'd listen to their interviews and guests, and noted names and different new technologies that I
wanted to test out. I would start Googling and researching them as soon as I could open up my laptop
at the office.

**What made this podcast really cool?** The hosts, although quite popular and deep in the trenches
of cutting-edge web development, _are really open with their social media presence!_ They're down to
earth, easy to find online, and you can follow them on Twitter. This was like a peek into how
top-tier software developers interact online.

#### Additional Suggestion: Listen to AudioBooks

I also capitalized on the commute time by listening to various audio books, some of which include:

- [How to Win Friends &amp; Influence People](https://www.amazon.com/dp/B0006IU7JK/ref=kinw_myk_ro_title_ab_amzn)
- [Critical Business Skills for Success](https://www.amazon.com/dp/B00VSWXFB0/ref=kinw_myk_ro_title_ab_amzn)
- [Never Split the Difference: Negotiating as if Your Life Depended On It](https://www.amazon.com/dp/B01COR1GM2/ref=kinw_myk_ro_title_ab_amzn)
- [Algorithms to Live By: The Computer Science of Human Decisions](https://www.amazon.com/dp/B01D24NAL6/ref=kinw_myk_ro_title_ab_amzn)
- [48 Laws of Power](https://www.amazon.com/dp/B00X0TKUS0/ref=kinw_myk_ro_title_ab_amzn)
- [Public Speaking for Success](https://www.amazon.com/dp/B01EGOQHBQ/ref=kinw_myk_ro_title_ab_amzn)
- [The Influential Mind: What the Brain Reveals About Our Power to Change Others](https://www.amazon.com/dp/B0752VTD6T/ref=kinw_myk_ro_title_ab_amzn)

These topics helped prepare me to advance within the company, and to navigate some challenging
negotiations and meetings.

</Aside>

## 3. Automate Yourself: Work Different

I've come across the notion that some developers feel the need to keep themselves employed by
overcomplicating their work. The thought is that if they make their work so overly complex, nobody
else can take it over and their tenure with the company is guaranteed.

The truth is, that there are countless developers out there who not only _can_ take it over, but
they _will gladly_ do so. Over-complicating your work for job security only makes their onboarding a
bit more challenging.

I've found the opposite effort to be true: **automate yourself.**

If you find opportunity to automate yourself out of a task, do it. Don't hang on to doing something
just because it keeps you busy or it keeps the company dependent on you. There's more exciting work
around the corner to focus on.

<Aside>

### Personal Case Study: Self-Automation

At RRFC, there was a regular need to update a particular set of webpages for state compliance, or to
update forms to track various promotions or lead-gen efforts.

These updates would span across several WordPress websites, and were a repetitive &mdash; but
essential &mdash; task.

After performing a styling and content update task for the dozenth time, I realized there _must_ be
a better way to manage these updates.

#### The Solution: A Custom Plugin &amp; API

I wrote a custom self-hosted WordPress plugin which could be activated within each site. This plugin
would parse [WordPress Shortcodes](https://codex.wordpress.org/Shortcode_API) representing various
data or components. This data or component would be served from a custom API endpoint &mdash; this
allowed me to write code and content once, from one location, and share it across multiple websites.

The plugin was housed in a GitHub repository, and WordPress websites would fetch the plugin updates
directly from GitHub &mdash; so updating the plugin was a breeze.

Each website would serve content served by a separate WordPress API in the style and functionality
of the particular destination website, however the core data and content would be fetched from one
universal location. Write once, share everywhere.

The initial setup for this process took a little bit of extra time to get off the ground, but once
it was up and running it greatly freed up my time to allow me to focus on higher priority &mdash;
and more fun &mdash; tasks.

</Aside>

## In Closing

At the end of the day, it's all about self-improvement and progression. When I found myself working
repetitively, or stagnant, I became restless. The solution was typically to get outside my comfort
zone, try new things, and learn.

The beauty of a software development career is that it's never stale. New technology and techniques
are available nearly every day. There is no shortage of innovation and ideas.

The best software engineers continue to learn and grow, remain humble, and never settle for the
routine for too long.

Enjoy the journey!


Growing a career as a software developer is a challenging and rewarding effort. Here's some things that have proven to help me along my own journey. Perhaps they'll help you also.


Building A Software Development Career: My Story (Part I)

---
title:
  'Setting up WordPress Coding Standards (WPCS) with PHP_CodeSniffer (PHPCS) and PHP Formatting in
  VS Code with Remote-SSH'
date: '2021-11-24'
tags: ['wordpress']
draft: false
featuredImage: blog/wordpress-phpcs-wp.webp
---

## The Scenario:

- You’re working in VS Code.
- You’re working on a WordPress project on a remote *staging server (*hopefully you’re not doing
  this on production 😅)
- You’d like to use [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) to lint your
  PHP.
- You’d like to leverage
  [WordPress Coding Standards (WPCS)](https://github.com/WordPress/WordPress-Coding-Standards) as
  your PHP standard.
- You’d like to auto-format PHP to help adhere to these standards.

### 1. Remote-SSH Setup

The [Remote-SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)
extension for VS Code allows you to SSH into a host and edit code remotely as if you were working
locally. You get to see remote file and folder structure, as well as install VS Code extensions to
work with your remote project.

Follow the Installation and Getting Started steps in the link above to install and activate the
Remote-SSH extension in VS Code. Then connect to your remote host and change to your working
directory. If you don’t already have it, install [Composer](https://getcomposer.org/download/)
before the next step.

### 2. Add PHP_CodeSniffer Standards Composer Installer Plugin

Open the terminal in VS Code and run
`composer require --dev dealerdirect/phpcodesniffer-composer-installer` in your project’s root
directory to install the
[PHP_CodeSniffer Standards Composer Installer Plugin](https://github.com/Dealerdirect/phpcodesniffer-composer-installer).

### 3. Add WordPress Coding Standards via Composer

Next, run `composer require --dev wp-coding-standards/wpcs` to install the
[WordPress Coding Standards (WPCS)](https://github.com/WordPress/WordPress-Coding-Standards)
definitions and make them available in your project.

From here, you can run a command to see which coding standards are available to your local project.
Example:

<CodeHeader>Terminal</CodeHeader>

```bash
$ ./vendor/bin/phpcs -i The installed coding standards are MySource, PEAR, PSR1, PSR2, Squiz, Zend,
PHPCompatibility, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP
```

### 4. VS Code Extensions

Now we’ll install two extensions in VS Code:

**phpcs** – The
[phpcs](https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs#review-details) extension
by Ioannis Kappas will enable VS Code to lint our PHP in real-time while we’re working in our code.
Install and activate this extension in the Remote-SSH environment.

**phpcbf** – The
[phpcbf](https://marketplace.visualstudio.com/items?itemName=persoderlind.vscode-phpcbf) extension
by Per Soderlind will enable VS Code to attempt to format our code according to the standard of
choice. Install and activate this extension in the Remote-SSH environment as well.

Once installed, open your command palette (Ctrl/Cmd + Shift + P) and find _“Preferences: Open Remote
Settings (JSON) (SSH: [yourhost])”_

Within `settings.json`, add the following settings (replace /home/path/to/project/ with your own
path):

```json
{
  "phpcs.enable": true,
  "phpcs.executablePath": "/home/path/to/project/vendor/bin/phpcs",
  "phpcs.standard": "WordPress",
  "phpcbf.enable": true,
  "phpcbf.documentFormattingProvider": true,
  "phpcbf.onsave": true,
  "phpcbf.executablePath": "/home/path/to/project/vendor/bin/phpcbf",
  "phpcbf.standard": "WordPress",
  "editor.formatOnSave": true
}
```

**Note:** if you’re working on multiple WordPress projects within the same remote host, you may want
to rerun steps 2 and 3 to install those dependencies in your user account, and update the
`phpcs.executablePath` and `phpcbf.executablePath` values to point that shared location instead.

Let’s Test it Out! Let’s see if it works! From the VS Code terminal in your Remote-SSH environment,
at the root of your project enter `./vendor/bin/phpcs --report=source ./`

If you have no errors or warnings, that’s great! But if you’re like me, you’ve got some issues to
fix and a bunch of new work to do.

PHPCS Sniff Output Lots of whiffs to fix! You can try manually adding a syntax error and re-running
the test to see if it catches it. Also attempt to format your PHP to auto-fix some errors. PHPCBF
does a great job at fixing many things automatically.

### 5. PHPCS Overrides

Depending on the project, you may not want PHPCS to complain about certain errors. There are options
to include
[code comments to ignore specific sniffs or parts of a file](https://github.com/squizlabs/PHP_CodeSniffer/wiki/Advanced-Usage#ignoring-parts-of-a-file),
but sometimes we’d prefer to have some checks skipped globally.

To accomplish this, create a `phpcs.xml` file in the root of your project. See below for a sample
file with exclusions applied via `<exclude />` tags.

```xml
<?xml version="1.0"?>
<ruleset name="My Project Rules">
    <config name="minimum_supported_wp_version" value="4.4.0" />

    <rule ref="WordPress-Core">
        
        <exclude name="WordPress.WP.AlternativeFunctions" />
        <exclude name="WordPress.WP.GlobalVariablesOverride" />
        <exclude name="WordPress.DB.RestrictedClasses" />
    </rule>
    <rule ref="WordPress-Docs" />
    <rule ref="WordPress-Extra" />

    
    <arg name="extensions" value="php" />
    <file>.</file>

    
    <exclude-pattern>/tests/*</exclude-pattern>
    <exclude-pattern>/vendor/*</exclude-pattern>
</ruleset>
```

## Bonus: Using PHPCS in CI/CD

Now that you have the PHPCS dev dependencies saved in `composer.json` as part of your project, you
can leverage PHPCS within your CI/CD workflows to run PHP_CodeSniffer with WordPress Coding
Standards and your own custom `phpcs.xml` overrides within your CI/CD pipeline.

There are a couple of ways to do this:

#1. Incorporate a `./vendor/bin/phpcs --report=summary .` (or variation) command within the pipeline
after `composer install`

#2. Add said command above as an npm script within `package.json`, then run that script during the
pipeline (also after composer install.

I prefer #2 because it allows me to define the specific PHPCS linting script in one location, and
then call it from wherever needed: either locally, or within the pipeline. If I have this script,
for example:

```json
...
"scripts": {
  "phpcs": "./vendor/bin/phpcs --report=summary ."
},
...
```

I can then use `npm run phpcs` locally whenever I feel like manually running phpcs, or I can include
npm run phpcs at some point during my pipeline.

**Until next time! Happy (clean) coding.**

Setting up WordPress Coding Standards (WPCS) with PHP_CodeSniffer (PHPCS) and PHP Formatting in VS Code with Remote-SSH

---
title: 'Detect an Internet Explorer Visitor in GatsbyJS'
date: '2021-07-21'
tags: ['javascript', 'gatsbyjs']
draft: false
featuredImage: blog/gatsby-browser-ie.webp
---

Internet Explorer, amirite? While building a medium-traffic
[WordPress + Gatsby](https://www.gatsbyjs.com/guides/wordpress/) site, I reviewed analytics to see
how much Internet Explorer support I needed to provide. We had about 0.02% of visitors using IE in
the past year, so a very small drop in the bucket.

However, visitors are visitors, and I wanted to be sure they received a decent experience\*, even if
they’re using an indecent browser\*\*. Who knows, perhaps they’re visiting from Windows Vista on
Grandma’s computer, or from an outdated public library computer network.

I didn’t want to layer up IE conditionals in the `<head>`, and I didn’t want to have an obtuse
amount of JS in the bundle, just to detect IE.

After some digging, I discovered that `document.documentMode` is an
[IE-only property](https://www.w3schools.com/jsref/prop_doc_documentmode.asp)! Thank heavens! This
meant I could add a quick snippet to gatsby-browser.js, and call it a day.

Here’s the snip:

<CodeHeader>gatsby-browser.js</CodeHeader>

```javascript
export const onClientEntry = () => {
  /**
   * Detect IE visitor
   * @link https://www.w3schools.com/jsref/prop_doc_documentmode.asp
   */
  if (window && window.document && window.document.documentMode) {
    /**
     * Redirect IE visitor or show popup, etc.
     */
    window.location.href = '/unsupported/';
  }
};
```

Happy coding!

\*By “decent experience” here, I mean… redirect them to a page asking the visitor to upgrade their
browser. Not bending over backwards to polyfill everything for IE for 0.02%.

\*\*By “indecent browser”… sorry not sorry. It’s always been a headache to build websites to support
IE. Besides, it’s slated for retirement on June 15, 2022.


Detect an Internet Explorer Visitor in GatsbyJS

---
title: 'Getting Google My Business CID Codes, Quickly.'
date: '2021-03-06'
tags: ['seo']
draft: false
featuredImage: blog/seo-google-cid-script-executed.webp
summary:
  If you’ve worked with the Google My Business admin interface, you know that tracking down specific
  details (especially when working with hundreds of listings) can be a daunting task.
---

If you’ve worked with the Google My Business admin interface, you know that tracking down specific
details (especially when working with hundreds of listings) can be a daunting task. This often
requires digging into individual listings to pull various insights and data.

![Screenshot of Google My Business admin console.](/static/images/blog/seo-google-cid-gmb-admin.webp)

Combing through all these listings and copy/pasting pertinent info into a spreadsheet is cumbersome
at best. True, you can export most of the data, but as of the time of this writing, this data does
not include the CID!

This week, a member of the SEO team and I were working on updating the
[schema.org markup](https://schema.org/LocalBusiness) and
[JSON-LD](https://developers.google.com/search/docs/data-types/local-business) data for many unique
location webpages. One item in particular that required attention is the
[hasMap property.](https://authoritynw.com/blog/adding-schema-markup-to-maps-urls/) I was advised
that this property is best used in tandem with a Google Maps URL in the format of
`https://maps.google.com/maps?cid=YOURCIDNUMBER`

The challenge we were faced with, was tracking down this CID number within Google My Business (GMB).
After finding it, I had to plug it into a custom field used to populate the schema markup within our
WordPress website. Sure, I could click into each GMB location, and find a link to the Maps listing,
then parse the CID from the URL manually – but I didn’t want to lose an entire day on this mundane
clicking + copy/paste.

## The Solution: Executing JavaScript in the Console.

![Screenshot of JavaScript code executed in the console to copy Google CIDs.](/static/images/blog/seo-google-cid-script-executed.webp)

I wrote a quick
[snippet of JavaScript](https://gist.github.com/missionmike/667bf157d7a0c11a17f097383a21b535) which,
when pasted in the console, iterates through each row in the main GMB list of locations, and
converts the data to tab-delimited TSV (Tab-Separated Values) format. It then copies this data to
the clipboard (including a new column for the CID code, as well as a well-formatted Maps URL). The
CID is parsed from the “See your profile” button.

## Executing the Script in Console

After running the script, the TSV data can be pasted directly to Excel or Google Sheets, etc.

![Pasted TSV data into Google Sheets.](/static/images/blog/seo-google-cid-pasted-data.webp)

Copying 200+ rows of GMB data straight from the admin interface table into a spreadsheet took a
matter of seconds! And furthermore, the CID was present and readily available for use in our
application!

I hope this helps somebody out there, who may be faced with the same quest of “how can I quickly get
all my Google My Business map CIDs from one place?”

You can find the
[code snippet here.](https://gist.github.com/missionmike/667bf157d7a0c11a17f097383a21b535) All that
needs to be done, is copy/paste it in full into the console while viewing the Google My Business
admin interface.


If you’ve worked with the Google My Business admin interface, you know that tracking down specific details (especially when working with hundreds of listings) can be a daunting task.

Getting Google My Business CID Codes, Quickly.

---
title: 'Video Thumbnail Generator: Create Email-friendly Thumbnail Images'
date: '2020-10-31'
tags: ['php']
draft: false
featuredImage: blog/php-video-placeholder-generator.webp
summary:
  Check out the Video Placeholder Generator. This is a frontend utility that can help you quickly
  generate a URL to fetch a video thumbnail.
---

Video is arguably the most powerful and influential medium available. As global internet access,
smartphone availability and wireless coverage continues to grow, the ability to reach people across
the globe with compelling video does the same.

Oftentimes you’ll want to include a video within email – which, of course, is not technically
possible… iframe embeds aren’t email-friendly. However, you can include a video thumbnail graphic
which can entice a click to open the video in YouTube, Vimeo, or browser (etc).

If you only need to do this occasionally, it’s not too much trouble to manually create a thumbnail
graphic, and upload it to your email editor (or, if you’re somewhat of a technical masochist like
myself, save it to a cloud server and embed a link in a hard-coded HTML email).

However, what if you need to do this ten times? Twenty times? 100+? The repetition adds up.

Good news. There’s an easier way!\* (After some setup) Check out the
[Video Placeholder Generator](https://www.missionmike.dev/video-placeholder-generator/). This is a
frontend utility that can help you quickly generate a URL to fetch a video thumbnail. It is
recommended to install your own
[Video Placeholder Generator Server](https://github.com/MissionMike/video-placeholder-generator-server)
because any image generated by the demo server is not guaranteed to stick around forever! However,
if you don’t mind the risk, you’re free to use it for production purposes. Read more about the
server-side
[processing here](https://www.missionmike.dev/php/video-thumbnail-generator-create-email-friendly-thumbnails-on-the-fly/#server-side).

The idea of the thumbnail generator is: play with the settings to generate a thumbnail image size
that you like (you can even add a custom play button!), and include the URL to it in your email
template, like so:

```html
<a href="https://www.youtube.com/watch?v=H79gstz4qZI">
  <img
    src="https://tools.missionmike.dev/video-placeholder-generator/thumbnails/H79gstz4qZI.jpg?w=1024&pbw=80&pbo=80"
    alt="Click to watch this video."
    title="Click to watch this video."
  />
</a>
```

Take note of the video ID in the youtube.com URL as well as the image source filename – the video ID
becomes the image filename. This would embed something like this into your email (Hi! That’s me and
my wife cheesin’):

<div className="text-center">
  <a
    href="https://www.youtube.com/watch?v=H79gstz4qZI"
    className="inline-block"
    target="_blank"
    rel="noopener noreferrer"
  >
    <img
      src="https://tools.missionmike.dev/video-placeholder-generator/thumbnails/H79gstz4qZI.jpg?w=1024&pbw=80&pbo=80"
      alt="Click to watch this video."
      title="Click to watch this video."
    />
  </a>
</div>

Now, when you want to clone your email template to create a new version later featuring a new video,
all you need to do is update the video ID in the image filename!

Assuming you’re hosting your own
[Video Placeholder Generator Server](https://github.com/missionmike/video-placeholder-generator-server),
the video thumbnail image that you generate will be saved indefinitely.

If you put your Video Placeholder Generator Server behind [Cloudflare](https://cloudflare.com/),
then you get the added bonus of having the image cached in their CDN, which can handle your email
getting opened and serving that image to many, many recipients simultaneously.

Please check out the [frontend utility](/video-placeholder-generator/), and feel free to browse the
[GitHub repo here](https://github.com/missionmike/video-placeholder-generator-client). Some
additional features are planned, such as:

Custom title text overlays Custom title text fonts, colors, size/alignment Play button options via
library And whatever else you’d like to contribute! PRs welcome. If you run into any issues, please
@ me on [Twitter](https://twitter.com/missionmikedev)!

## How does this work server-side?

You might be wondering how attempting to fetch a non-existent `[videoID].jpg` file on the server
ends up returning a valid image.

In short: when the URL is fetched the first time, the image does not exist. An .htaccess or
nginx.conf rule routes the 404 error through a PHP script which then fetches the thumbnail from
YouTube or Vimeo’s CDN, and processes it according to the GET parameters set in the URL (if no GET
params are set, it uses default dimensions, play button image, etc).

Example from .htaccess:

<CodeHeader>.htaccess</CodeHeader>
<CodeBlock>ErrorDocument 404 /video-placeholder-generator/generator.php</CodeBlock>

Example from nginx.conf:

<CodeHeader>nginx.conf</CodeHeader>
<CodeBlock>error_page 404 = /video-placeholder-generator/generator</CodeBlock>

Finally, the `generator.php` script does two things:

Returns a .jpg format blob to the end-user.

If the `“save=false”` parameter is absent, the image is saved as a .jpg where it was attempted to be
fetched from. This means any subsequent calls to the image URL will not incur any PHP overhead —
rather, the web server simply returns the image file. Under the hood, the server-side component uses
PHP’s ImageMagick to create the final image.


Check out the Video Placeholder Generator. This is a frontend utility that can help you quickly generate a URL to fetch a video thumbnail.

Video Thumbnail Generator: Create Email-friendly Thumbnail Images

---
title: 'Extraneous CSS Cleanup'
date: '2020-08-14'
tags: ['css']
draft: false
featuredImage: blog/css-statue.webp
summary: >
  Occasionally I need to spend time investigating an installation to determine: What code is still
  needed?” Sometimes I’m working with a lean code base that powers a small 5-page installation.
  Those projects are easy because spending a few seconds manually checking the resulting website is
  enough to conclude whether some CSS definitions can be safely
---

Occasionally I need to spend time investigating an installation to determine: “What code is still
needed?”

Sometimes I’m working with a lean code base that powers a small 5-page installation. Those projects
are easy because spending a few seconds manually checking the resulting website is enough to
conclude whether some CSS definitions can be safely discarded after removing them.

Other times I’m pouring over a behemoth website wielding 4500+ pages – any of which could be using
some of the CSS definitions I’m hoping to prune.

Today, we’ll talk about the other times.

**The Goal:** Remove Unused Code

## The Backstory

This WordPress theme had 200+ PHP files, there was one massive CSS file weighing in at over 600KB
(yikes!), and 30 JavaScript files. Even though the WordPress database housed thousands of posts
across a dozen post types, I suspected much of this was code bloat.

Note: I upgraded this WordPress installation for a more robust dev experience. The improved
installation leans on Webpack. But that’s another post for another day.

The Specs Every project is different, but for this particular undertaking I was working with:

WordPress Custom theme (not a child theme) git version control Linux production + staging servers
(CentOS) Windows local machine BlackWidow Shareware website scanner (wget is a viable Linux
alternative) Step 1: Clone Production to Staging For the first step, I cloned the production website
to staging (database and files). This ensured I was referencing the latest content and settings. I
have a handy pull script that I use for such tasks.

Step 2: Download Staging After production was pulled/synced to staging, I ran the BlackWidow website
scanner to scrape and follow internal staging links.

The purpose of this is to pull as much of the site’s resulting HTML as possible to a local folder.
Then its text can be scanned using grep (Linux or Mac) or Select-String (Windows Powershell). For
this project, I used Select-String on a Windows machine.

Important: If you’re scraping a large site, do not scrape production directly! If the site is behind
Cloudflare or other security firewall, you may trigger DDoS protection if you don’t throttle your
scraping utility.

Step 3: Get to the Git Repo Next, I SSH’d into staging and navigated to the custom theme folder.
This folder is a git repo, so I had the benefit of being able to use git grep to search strings
within the repo.

Step 4: De-clutter! It’s time to get into it! For the bulk of this project, I combed through the CSS
files to remove as many unused CSS rules as possible.

I’d start by targeting groups of entries. We’ll use this one for example:

```css
div.info-box {
  padding: 0 32px 22px 32px;
  margin: 48px 0;
  position: relative;
  display: table;
}

div.info-box.left {
  border-left: 4px solid #ff2900;
  border-bottom: 4px solid #ff2900;
}

div.info-box .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ff2900;
  position: absolute;
}
```

If class .info-box is not used in any HTML output, then it’s safe to say that .info-box .dot and
.info-box.left etc. could also be purged from our CSS. Because, if there is no .info-box class in
any HTML content, the cascading selectors downstream would never be referenced.

I ran git grep on the repo to see if the string info-box appears anywhere in the entire site:

```bash
$ git grep -ln 'info-box'
assets/public/css/main.min.css
assets/public/css/main.min.css.map
assets/src/scss/\_deprecated.scss
```

It only seems to appear in my stylesheets! This is good news. If it appeared in PHP template files
or JavaScript, I’d have a bit more sleuthing to do to determine if those class rules were needed.
But for simplicity’s sake, we won’t go down that rabbit hole now.

Next, in order to be more certain that this CSS class doesn’t appear within the website, I ran a
Select-String on the downloaded HTML (6600+ files!) to see if info-box appears anywhere:

```shell
> Select-String ./\*.html -Pattern 'info-box'
>
```

Nope! All clear! If the string did appear somewhere in the HTML output, I’d have visibility into
where. See here for example, using a different string “vertical”:

```shell
> Select-String ./\*.html -Pattern 'vertical'
.1E592CD9.html:731:					<div class="connector vertical"><span class="end fancy"></span></div>
.1E592CD9.html:753:					<div class="connector vertical"><span class="end fancy"></span></div>
.1E592CD9.html:775:					<div class="connector vertical"><span class="end fancy"></span></div>
.33A3095E.html:942:					<div class="connector vertical"><span class="end fancy"></span></div>
```

Important Note: CSS IDs or class selectors may not always appear in the scraped HTML output because
those attributes can be added after page load by JavaScript. However, since I had previously ran a
git grep on the repo (which contains all the theme’s JavaScript), I was more certain that none of my
JavaScript was adding an “info-box” class dynamically. There are edge cases, of course, where
perhaps the CSS was targeting a class that was added via plugin or other 3rd party script that isn’t
included in the repo.

Step 5: Rinse & Repeat Is this daunting? Yes. But, when the website is large, and the company’s
business largely depends on stellar SEO and a well-working website, I’m happy to take the bit of
extra time necessary to ensure that I’m not removing some important CSS.


Occasionally I need to spend time investigating an installation to determine: What code is still needed?” Sometimes I’m working with a lean code base that powers a small 5-page installation. Those projects are easy because spending a few seconds manually checking the resulting website is enough to conclude whether some CSS definitions can be safely


Extraneous CSS Cleanup

---
title: 'Scrape & Debug: A WordPress Plugin'
date: '2020-08-02'
tags: ['wordpress']
draft: false
featuredImage: blog/wordpress-scrape-and-debug.webp
summary:
  Preview your posts and pages on social media. Validate your pages’ HTML with W3C’s Validator, or
  check PageSpeed with Google’s PageSpeed Insights. Access these tools quickly from within wp-admin,
  without needing to copy/paste multiple URLs each time to see your results.
---

Have you ever found yourself making minor edits to a featured image, or description blurb, and then
re-running the URL through Facebook’s Share Debugger, or the Google Rich Results Test?

I have. It got tiring. All that copy/pasting of URLs, tab switching, refreshing. So I created a
plugin that made it easier – after installation and choosing which post types you want to be able to
check with it, you can click which service you want to run your post/page through, and it opens it
up in a new tab and scrapes it. Check out this video to see how it works:

<div className="w-full relative">
  <iframe
    width="1776"
    height="730"
    src="https://www.youtube.com/embed/fe1gcKVcX6o"
    title="Scrape and Debug WordPress Plugin Overview"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="w-full relative responsive"
  ></iframe>
</div>

If you try this plugin, please reach out and let me know your thoughts! I’d love to know if it’s
helped anyone else. Of course, let me know if you run into issues with it, or open a support ticket
on wordpress.org and I’ll get it fixed up ASAP.


Preview your posts and pages on social media. Validate your pages’ HTML with W3C’s Validator, or check PageSpeed with Google’s PageSpeed Insights. Access these tools quickly from within wp-admin, without needing to copy/paste multiple URLs each time to see your results.

Blog

Headless WordPress & Next.js on Kubernetes: Page R...

Software Development and AI: A Musing

Building A Software Development Career: My Story (...

Building A Software Development Career: My Story (...

Setting up WordPress Coding Standards (WPCS) with ...

Detect an Internet Explorer Visitor in GatsbyJS

Getting Google My Business CID Codes, Quickly.

Video Thumbnail Generator: Create Email-friendly T...

Extraneous CSS Cleanup

Scrape & Debug: A WordPress Plugin