---
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

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