Jack Harner's Web Dev Blog

Starting A Freelance Developer Bluesky Feed

Wed, 26 Mar 2025 00:00:00 GMT

For my first dip into the AT Protocol, I decided I would try my hand at setting up a Feed. If you're unaware the AT Protocol is a decentralized framework for social media. In short, instead of the Tech Giants up on their flying mansions deciding what your social media feed should be, the ATProto gives that power back to the people.

There are a ton of great feeds popping up, but my goal is to make one specific to Freelance Developers. I've got the feed up and running here if you want to check it out or shoot me a DM on Bluesky (@JackHarner.com) if you want to get added to it!

Let's get into it.

Getting Started

This isn't really a tutorial of how to set up a Bluesky feed (although I might have some stuff for that in the works) but you basically get started with their Feed Generator template. It's a TypeScript based Node/Express application that handles the ingesting of the greater ATProto network (the firehose), storing posts you deem appropriate, and then outputting a "Feed Skeleton" (list of post URIs) that Bluesky (or whatever AppView) then populates with the post data.

Keep in mind, I don't rally know anything about writing algorithms. I know how to build website and program and a ton of other stuff but this is all new to me. If you have suggestions or constructive critisicm, hit me up @JackHarner.com

A lot of the feeds you see popping up are really just keyword scrapers: "If a post has X Y or Z in it, display it". Some even tell you: "Include #StarSky to have your post included". For as specific as a niche as "Freelance Developers" is, a basic keyword filter isn't going to cut it.

I decided to set up a score-based system to try to determine if a post is related to freelance development specifically. Let's walk through the evolution of that score system (it's still a work in progress).

I started with a list of a bunch of freelance related and development related terms.

const terms = [
    'freelance dev',
    'freelance devs',
    'freelance developer',
    'html',
    'js',
    // etc...
]

Then I went through and assigned point values to each term based on how likely I thought a post would make sense to be included in the feed based on having that term in there.

const terms = [
    {term: 'freelance dev', points: 20},
    {term: 'freelance devs', points: 20},
    {term: 'freelance developer', points: 20},
    {term: 'html', points: 5},
    {term: 'js', points: 5},
    // etc...
]

I would then take each post coming down the firehose and score them based on how many terms (and their point values) it could find in the post text. I had a score threshold defined and if the post had a higher score than that, it got stored in the database and output in the feed.

That worked for a little while but I noticed that some spammy type posts I didn't like were ending up in there. I don't know if you caught the bug for this already but if you had a post that said:

"I'm a freelance developer"

It would match for both freelance developer AND freelance dev giving that post a whopping 40 points.

If you posted some spam like:

"Best Freelancers in LA / Best Freelance Writers in OC / Best Freelance Freelancer Editors Freelances Free Devs."

You would get a shit load of points when you shouldn't have.

Refining the Algorithm

In order to find and present the most relevant Freelance Developer content on the network, I had to do better than that.

Negative Points

I included the ability to add negative point terms so I can set "freelance editor" or "freelance writer" to -30 points so it doesn't necesarily get blocked if that term exists, but there needs to be more content about development to make up for the negative score.

No More Stacking Points

I updated the Allow List terms to let the term be defined as an array of similar terms:

const terms = [
    {term: ['freelance dev', 'freelance devs', 'freelance developer'], points: 20},
    {term: 'html', points: 5},
    {term: ['javascript', 'js', 'jsx'] points: 5},
    // etc...
]

This way if it finds both "freelance devs" and "freelance developer" in the same post, it only gets 20 points, regardless of how many times it appears in the post.

I also updated the scoring to look for those terms specifically, either at the start of the text with a space after it, a space on both sides, or at the end of the string. Thanks to ChatGPT for the REGEX because that shit is UGLLYY:

for (const t of termsToCheck) {
    const termRegex = new RegExp(\\b${t.toLowerCase().replace(/[.*+?^${}()|[\\]\\\\]/g, '\\$&')}\\b)
    if (termRegex.test(lowerPost)) {
    found = true
    break
    }
}

This prevents false positives by preventing "dev" from triggering for "devout", for example.

AllowList and BlockList Authors

I also want to be able to display posts from people I know are freelance / indie developers without a post having to explicitly be about freelance development. I created an Allowlist and a Blocklist of author DIDs (Decentralized Identifiers).

If I put a DID in the Allowlist, their post score threshold gets chopped in half. I might even need to lower that because I've added some Devs and haven't really seen any extra posts get added.

There were a couple people who were pretty routinely showing up in the feed during my initial testing even though they weren't talking about freelance development, or they just posted some spammy stuff. Their DID's got added to the Blocklist. If I add a DID to the Blocklist, it just doesn't even try to score their post when one comes out of the firehose.

What's Next?

I'm going to continue to try to refine my point system as well as tracking down other Freelance / Indie Developers to add to the list. If that's you, shoot me a DM on Bluesky and I'll add you!

Give the feed a like, pin, or share if you feel so inclined! Freelance Devs Bluesky Feed

Thanks for reading!

How To Auto-Open Multiple Terminals In A VS Code Workspace

Tue, 18 Jun 2024 00:00:00 GMT

Here's how to get VS Code to automatically open a couple terminals in your different workspace folders when you first open VS Code.

Open your workspace settings with Ctrl + Shift + P and then type Workspace Settings and select Preferences: Open Workspace Settings (JSON)

It should look something like this:


{
	"folders": [
		{
			"path": "folder-1"
		},
		{
			"path": "folder-2"
		}
	],
	"settings": {},
}

Add the following tasks object:


{
	"folders": [
		// ...
	],
	"settings": {},

    // ADD THIS ⬇️⬇️⬇️⬇️
	"tasks": {
		"version": "2.0.0",
		"tasks": [
		  {
			"label": "Frontend", // Change this
			"type": "shell",
			"icon": {"id": "home", "color": "terminal.ansiBlue"},
			"isBackground": true,
			"options": {
			  "cwd": "${workspaceFolder:folder-1}"  // Change just the folder name
			},
			"runOptions": { "runOn": "folderOpen" },
			"command": "/bin/bash", // <-- your shell here
			"presentation": {
			  "echo": false, // silence "Executing task ..."
			  "focus": true,
			  "panel": "dedicated"
			}
		  },
		  {
	
			"label": "Backend",
			"type": "shell",
			"icon": {"id": "flame","color": "terminal.ansiRed"},
			"isBackground": true,
			"options": {
			  "cwd": "${workspaceFolder:folder-2}"
			},
			"runOptions": { "runOn": "folderOpen" },
			"command": "/bin/bash", // <-- your shell here
			"presentation": {
			  "echo": false, // silence "Executing task ..."
			  "focus": true,
			  "panel": "dedicated"
			},        
		  }
		  {
			"label": "Open",
			"dependsOn": ["Frontend", "Backend"], // Make sure these match your above task labels
			"runOptions": { "runOn": "folderOpen" }
		  }
		]
	  }
    // Add This ⬆️⬆️⬆️⬆️⬆️
}

Save the settings, then reload your window with Ctrl + Shift + P, typing reload, and selecting Developer: Reload Window. Your window should re-open along with whatever terminals you outlined above.

Happy Coding!

Photo by Clément Hélardot on Unsplash

Installing Git & Cloning Your First Repo

Fri, 07 Jun 2024 00:00:00 GMT

Getting Started with Git: Installing and Cloning Repositories from GitHub

This guide will help you get Git installed on your computer, clone your first repo from GitHub, and switch branches.

Whether you're brand new to Git or need a quick refresher, this guide will get you up and running in no time. It does assume you have at least some familiarity within a terminal or command-line environment. Linux & Linux-based OSs (Mac) make it easy; You just open up the Terminal app and away you go. With Windows it's slightly more challenging, although I've heard it's improved in recent years (but setting up a terminal environment on Windows is out of scope of this article).

Either way, crack your terminal open and let's get git-ing!

Git Newbie Glossary
Step 1: Installing Git
Step 2: Configuring Git
Step 3: Cloning a Repository
Step 4: Switching Branches

Git Newbie Glossary

Here are a few terms to keep on top of your mind as you read through this.

Term	Definition
Terminal	A command-line interface used to interact with the computer's operating system.
Git	A piece of software used to track changes in source code during development.
GitHub	A web-based platform that hosts Git repositories and provides tools for collaboration.
Repository	A folder of files with some special files to allow Git to track changes inside the folder.
Branch	A parallel version of a repository, allowing for separate development work to be done.
Remote	A version of a repository hosted on a server, used for collaboration.
Clone	A copy of a repository that is downloaded to your local computer from a remote server (mainly GitHub).

Step 1: Installing Git

If you already have Git installed on your computer, go ahead and skip to step 3 for cloning and branch information.

Windows

Download Git:

Go to the Git for Windows download page.
Click the "Download" button.

Install Git:

Run the downloaded .exe file.
Follow the installation wizard. Use the default options unless you have specific requirements.

macOS

Using Homebrew (recommended):

Open the Terminal.
Install Homebrew if you don't have it.
Install Git with Homebrew:
```
brew install git
```

Using the installer:

Go to the Git for macOS download page.
Download and install the latest version.

Linux

Debian/Ubuntu-based distributions:

Open the Terminal.
Update your package list and install Git:
```
sudo apt update
sudo apt install git
```

Fedora-based distributions:

Open the Terminal.
Install Git:
```
sudo dnf install git
```

Step 2: Configuring Git

After installing Git, you'll need to configure your Github username and email. This is necessary for tracking changes and contributions.

Open your Terminal (or Git Bash on Windows).
Add your GitHub account username to your git config:
```
git config --global user.name "username"
```

Add your GitHub account email to your git config:

git config --global user.email "your.email@example.com"

Step 3: Cloning a Repository

To clone a repository, you'll need the repository URL. This can be found on the repository's GitHub page.

Copy the repository URL:
- Navigate to the repository on GitHub.
- Click the "Code" button and copy the URL (use HTTPS for simplicity).
Clone the repository:
- Open your Terminal.
- Navigate to the directory where you want to clone the repository:
```
cd /path/to/your/directory
```
- Clone the repository:
```
git clone https://github.com/username/repository.git
```
- Replace https://github.com/username/repository.git with the actual URL you copied from GitHub.
- git clone creates a new directory, so with our example commands we would end up with /path/to/your/directory/repository/ with all the code inside the repository/ directory.
  - To stay organized, I'd recommend setting up some sort of folder structure like ~/code/<client_name>/<repos>/. So you would cd ~/code/<client_name> and then run git clone <repo_url> to end up with ~/code/<client_name>/<repo_name>.

Step 4: Switching Branches

Once you have cloned the repository, you'll need to know how to switch to different branches.

List available branches:
- Navigate to the cloned repository:
```
cd ~/code/<client_name>/<repo_name>
```
- Fetch everything from the repository on Github:
```
git fetch --all
```
- List all the available branches:
```
git branch -a
```
  - If you're switching to a branch for the first time, it will show up in this list prefaced with something like remotes/origin/. The <branch_name> in the next step is whatever is after the last /. i.e with remotes/origin/branch-xyz your <branch_name> is just branch-xyz
Switch to a branch:
- Use the branch name from the list to switch branches:
```
git switch <branch_name>
```
Pull the latest changes:
- After switching to the desired branch, make sure to pull the latest changes to ensure you have the most up-to-date code:
```
git pull
```
  - While git fetch and git pull seem like similar commands, they are quite different. Think of git fetch as getting the notification that there are changes, and git pull is getting the actual changes and applying them to your local copy of the repo. fetch is getting the email that your package has been delivered, pull is going to the mailbox to actually get the package.

By following these steps, you can switch to any branch and ensure you are always previewing the latest code from that branch.

In Conclusion

And that's it! You now have Git installed, can clone repositories from GitHub, and switch between branches. This will enable you to access and review code locally on your computer.

Happy Git-ing!

Git Commands Cheat Sheet

Task	Command	Description
Clone a repository	`git clone <repository_url>`	Clones the repository from the specified URL (You should only need to do this once per repo)
Fetch Everything	`git fetch --all`	Fetches information about all the branches from the remote repo. Do this every time.
List branches	`git branch -a`	Lists all local and remote branches
Change branch	`git switch <branch_name>`	Switches to the specified branch
Pull latest changes	`git pull`	Fetches and merges the latest changes from the remote branch. Do this every time.

Working On A BigCommerce Custom Checkout Locally

Sun, 21 Jan 2024 00:00:00 GMT

When building or modifying BigCommerce's Open Source checkout-js, the only way the docs claim you can access the locally running version of your custom checkout is by changing the Checkout Script URL setting directly on the site settings. This breaks that store's checkout for anyone except the developer. BigCommerce obviously recommends only working on a custom checkout on a staging store, but that doesn't always work. It's nice to be able to work with live data while testing and developing the checkout locally.

Modifying the Open Source checkout for a BigCommerce store is no simple task (it's a highly sophisticated React application). Doing so for a production site without completely nuking the live site's actual checkout seemed impossible. Thanks to the BigCommerceDevs Slack (see credits section at the end), it turns out it is actually possible!

Let's jump into how:

Stencil-CLI Meets Open Source Checkout
A Few Simple Modifications To The Checkout.html
Now You're Working On The BC Checkout Locally
Credits

Stencil-CLI Meets Open Source Checkout

If you're working with BigCommerce's open source checkout-js (or the checkout-sdk, though the steps may be slightly different, I'm not sure), I probably don't need to tell you this, but to work on your custom checkout locally you need:

A Stencil theme set up to work locally with the stencil-cli
BC's Open Source Checkout forked and cloned locally
stencil start running in the theme's terminal
npm run dev & npm run dev:server running separately in the checkout's terminal

I'm going to assume you're using these tool's default urls/ports (at the time of writing) but if you for some reason are using something else, just make sure to substitute my values with your own.

Theme Running on: http://localhost:3000
Checkout running on: http://127.0.0.1:8080

A Few Simple Modifications To The Checkout.html

Inside your theme's checkout page template, /templates/pages/checkout.html we need to make a few changes: modifying the checkout content based on the environment we're running the theme and adding some configuration settings to the window to overwrite where it looks for checkout scripts.

Find your theme's {{{ checkout.checkout_content }}} and wrap it in an if/else checking the in_production variable. The else gets an empty div with a checkout-app id:

{{#if in_production}}
  {{{ checkout.checkout_content }}}
{{else}}
  <div id="checkout-app"></div>
{{/if}}

Just above the {{{ footer.scripts }}} tag add the following if statement triggering only if you're using the stencil-cli to run the theme (the in_development variable):

{{#if in_development}}
  <script>
    window.checkoutConfig = { 
        containerId: "checkout-app",
        checkoutId: "{{cart_id}}",
        publicPath: "http://127.0.0.1:8080/"
    };
  </script>
  <script src="http://127.0.0.1:8080/auto-loader-dev.js"></script>
{{/if}}

This tells the rest of the checkout to look for and fetch the locally hosted files output through the checkout's npm run dev:server command.

Now You're Working On The BC Checkout Locally

Now, whenever you're running your theme locally through Stencil CLI, your Stencil CLI theme will utilize the locally running version of your checkout as opposed to the live one.

Wrapping everything in the is_development & is_production variables allows for some peace of mind at the fact that you'll never leave the checkout completely dead in the water.

This does mean that anytime you need to test anything in the checkout or order-confirmation locally, you have to have the custom checkout repo cloned locally and running alongside stencil-cli. If you're working on a store that needs a custom checkout you can bundle both packages into the same repo to make that a little easier to manage.

This little hiccup in the development process is vastly outweighed by the benefit of being able to take advantage of the stencil-cli connected to a live production site, working locally, and working on a custom checkout without breaking production.

Credits

Credit for the discovery goes to Andrew A. Barber, the Engineering Manager @ Space 48, whom I met on the BigCommerce Devs Slack group. If you're a BigCommerce Developer, and NOT in that slack group, I highly recommend you join. It's a great place to ask hyper-specific questions and get some answers from the top minds in the space.

Also huge shoutout to my ghost-coding-client-who-shall-not-be-named for trusting me to dig into the BigCommerce Open Source Checkout for the first time and paying me to learn on the clock.

Pausing CSS Animations on Hover

Sat, 20 Jan 2024 00:00:00 GMT

CSS Animations are an easy, lightweight way to add a little motion and excitement to a page. You definitely don't want to overdo it, though. One of the most frustrating things as a user is when you go to click on something, it moves, and you miss.

Today, I'm going to show you how to pause your CSS animations when someone goes to click on them, without JavaScript.

It All Starts With A CSS Animation
Treat Your Users Like Stormtroopers - Avoid Moving Targets
Stop Moving Things That Don't Need To Move

It All Starts With A CSS Animation

We'll start with one of my favorite simple animations, the Pulse. Add the following to your css:

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

and then apply the animation to your element with the animation property:

.box {
  animation: pulse 3s infinite
}

All together that looks like:

I've used that animation many times to emphasize a discount, bring focus to the best deal on a Pricing page, or even just to make a beating heart. As long as your animation is using css and the @keyframe property this method will work.

{{{vert}}}

Treat Your Users Like Stormtroopers - Avoid Moving Targets

If there are clickable things inside the thing you're animating, you don't want your users to have to click on moving targets. It's so frustrating to click and miss, let alone click, miss, and click on something else. Luckily, there's a really simple way to pause CSS Animations in CSS without JavaScript.

The key to it all is the animation-play-state property. Let's see it in (SCSS) action:

.box {
  animation: pulse 3s infinite;

  &:hover {
    animation-play-state: paused;
  }
}

Which looks like:

As you can see, it starts and stops the animation when you hover your mouse in and out of it.

By setting the animation-play-state to paused on hover, the animation will pause, your click targets will stop moving, and your users will be happy. I had experimented with basically removing the animation on hover but that caused lots of jumps and skips. animation-play-state literally just pauses the animation and un-pauses when you stop hovering.

Stop Moving Things That Don't Need To Move

You don't want your users to have to try and click on moving targets. If they miss too many times, they'll get frustrated and no amount of fancy animation will prevent them from leaving for good.

With great animation power, comes great responsibility. Don't animate things users are supposed to click on, but if you have to, stop moving the thing if it looks like the user is about to click on it.

Function get_page_by_title is deprecated since version 6.2.0! Use WP_Query instead.

Sat, 20 Jan 2024 00:00:00 GMT

If you want to retrieve a WordPress page by its title you used to be able to do that with a nifty function called get_page_by_title. Well now WordPress has deprecated that specific function and you'll get a warning in your site's logs if you try to use it. I'm going to show you how.

What happened to get_page_by_title()
How To Get a Page by Title with WP_Query
Let's Go Over The Code
Make Your Own get_page_by_title() function

What happened to get_page_by_title()

The get_page_by_title() function was deprecated when WordPress released version 6.2 back in March 2023. The function was old and apparently caused problems where the function could be run before plugins and things finished initializing. This opened up the possibility that get_page_by_title() would return a page that the current user wasn't actually supposed to have access to.

WP_Query is a much more advanced way of querying the database for post and post data and isn't susceptible to the same bugs.

How To Get a Page by Title with WP_Query

Since you shouldn't use get_page_by_title() anymore, you can do it instead using WP_Query instead.

You can achieve that by setting the post_title parameter within the WP_Query arguments.

Here's an example WordPress Query to get a page by the title:


$args = array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'posts_per_page' => 1,
    'post_title' => 'Your Page Title'
);

$query = new WP_Query($args);

if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // Page found, you can access its properties here
        the_title(); // Example of displaying the page title
    }
} else {
    // Page not found
}

wp_reset_postdata(); // Reset the query

Let's Go Over The Code

In the example above, we're setting the post_type parameter to 'page' to specify that we're querying for pages. You can adjust the post type according to your needs. The post_status parameter is set to 'publish' to retrieve only published pages. You can modify these parameters as required.

The posts_per_page parameter is set to 1 to retrieve only one page matching the title. If you expect multiple pages with the same title, you can increase this value.

Finally, the post_title parameter is set to 'Your Page Title', where you should replace it with the actual title you're searching for.

Within the loop, you can access the properties of the retrieved page using functions like the_title(), the_content(), get_permalink(), etc.

Don't forget to call wp_reset_postdata() after the loop to reset the query and restore the global post data.

Make Your Own get_page_by_title() function

If you've developed a theme or plugin that relied on the get_page_by_title() function that's now deprecated, you can substitute it for your own instead.

Just define the function somewhere near the top of your theme's functions.php.

function jacks_get_page_by_title($title) {
    $args = array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'posts_per_page' => 1,
    'post_title' => $title
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            // Returns the Post Object if one is found
            return get_post(); 
        } else {
            return null;
        }
    }
}

$homePagePost = jacks_get_page_by_title( "Home Page" );

Then you just have to find and replace all of the old deprecated functions for your new shiny ones. Obviously you'll want to test thoroughly because this could potentially cause some bugs and behave slightly differently than the old function.

How to Run GitHub Actions on a Schedule

Fri, 19 Jan 2024 00:00:00 GMT

If you use GitHub actions to build and deploy (CI/CD) a project, you can schedule those actions to automatically run on a specific time interval using cron. This is sweet if you're building a pseudo-static site with data that doesn't change all the time, but does change often enough to want to automate the build process.

I initially implemented cron into my GitHub Actions to build my side project Live Music Forecast every 6 hours, but have also used this to automate all kinds of different GitHub actions.

What is Cron?
Defining the Cron Schedule
Scheduling your GitHub Action
Heads Up, The Timing Isn't Going To Be Exact

What is Cron?

Cron (aka Cron Jobs, Crontab) is a command line utility about as old as linux itself. Cron allows for the automatic running of code, scripts, & commands on a time based interval.

Defining the Cron Schedule

Cron takes in a string to determine which minutes, hours, days, & months to run your script on.

┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of the month (1 - 31)
│ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
│ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
* * * * *

For example, */5 * * * * will run your GitHub Action every 5 minutes of every day. This is most likely over kill and will probably run you into GitHub's Action time limits very quickly. Every 5 minutes is the fastest interval GitHub allows actions to be ran.

Some more example cron schedules:

59 23 * * 6 will run at 11:59 PM on Saturday
0 12 1 * * will run at 12 noon, on the 1st of every month
1 */6 * * * runs at the first minute of every 6th hour. (12:01a, 6:01a, 12:01p, and 6:01p)

I highly recommend using a tool like crontab.guru to make sure your schedule is set up properly. Debugging cron schedules is basically just publishing it and waiting for the scheduled time to come and go, so it can be annoying if you mess it up.

Scheduling your GitHub Action

In your action's configuration file, your schedule is defined as one of the workflow triggers under the on: attribute:

name: GH Actions Cron Schedule
on:
  schedule:
    # * is a special character in YAML so you have to quote this string
    - cron:  '1 */6 * * *'

# rest of your action here...

If you need to, you can configure your action to run on multiple different schedules:

name: GH Actions Multi-Cron
on:
  schedule:
    - cron:  '1 */6 * * 0-4' # Run every 6hrs Sun-Thur
    - cron:  '1 */3 * * 5-6' # Run every 3hrs Fri-Sat

# rest of your action here...

For the full list of things that can trigger your GitHub Workflows, check out the GitHub Docs.

Heads Up, The Timing Isn't Going To Be Exact

GitHub Actions all run in UTC time, so you'll need to adjust your cron schedule based on your timezone if you want it to run at a specific time relative to where you live.

The other thing GitHub calls out is that your cron-schedule'd action time is ONLY when the action will be QUEUED to run. This doesn't mean your action will run at that exact time, depending on server availability. If that slight timing ambiguity is going to cause issues with your workflow, Contact Me for a free consultation call to look at more time-specific alternatives to solve

Banner image by CHUTTERSNAP on Unsplash

What Is Ghost Coding?

Thu, 11 Jan 2024 00:00:00 GMT

What IS Ghost Coding?

Ghost coding, at it's simplest, is when you do programming work for someone else, and they're paying you to get to pass that work off as their own. Similar to "ghost writing", the end customer should never know you've done work for them.

I'm pretty sure I'm the first person to coin the term "Ghost Coding" in relation to white-label work for other agencies (willing to stand corrected on that, but I can't find any evidence otherwise).

In a few more words, Ghost Coding refers to the practice of doing programming / web development work for someone else, and selling them the rights to pass your work off as their own. The term is based off the term "ghostwriter" which is defined as "a person hired to write literary or journalistic works, speeches, or other texts that are putatively credited to another person as the author".

Let's go over some of the Benefits of Ghost Coding as well as some of the downsides, and at the end I'll give you a few tips to help you get started!

If this sounds like something you need for your dev or marketing agency, let's chat!

Benefits of Ghost Coding

No Pesky Sales Process

It's the agency's job to track down and land new clients (and they most likely already have a team dedicated to doing just that). I just end up with a list of tasks that keeps refilling week after week.

I'd much rather have to swoon a couple of clients than have to constantly chase down my next meal. By locking down 2-3 agencies that each have 10-15+ clients at least, and continuing to provide consistent value day in & day out, you'll never run out of work to do.

Stabilize The Workload (+ The Pay)

There's a fairly good chance that your clients won't all have work at the same time (unless it's Oct/Nov and you work in E-commerce 😅). By multiplying your pool of potential work through Ghost Coding, you'll quickly end up with a full queue. If the work is slowing down with one agency, you can most likely reach out to one of the other two, and keep your plate as full as it can be.

Less Paperwork For The Same Amount Of Programming

By funneling a majority of your work through a couple of agencies, you vastly simplify the amount of admin and task management work you have to do.

3 big invoices instead of 30+ small ones? I'll take it.

3 meetings a week instead of 3 tiny free spaces on my calendar? Sign me up.

Downsides to Ghost Coding

The Final Product Ain't Yours

If you look at my portfolio, there's not a whole lot new on there recently, yet lately I've been busier than ever. What gives?

NDAs are what gives, and that's ok.

The agency is giving me money for the privilege to claim my work as their own in the same way that a lot of your favorite Musicians claim other's work as their own.

They're Not Your Clients

I've spent the better part of the last two years doing a ton of different types of work for dozens of small and medium sized e-commerce businesses.

But if something happens and just 1 or 2 key relationships get soured (if any of my agency contacts are reading this, i love you, i'm not going anywhere, please don't fire me) I'd have a whole lot of nothing to show for it.

The ease of finding the work is nice, but make sure you don't have all your eggs in just some other agency's basket.

Juggling More Requires More Concentration

Less Diversification

By primarily relying on 2-3 agencies, you increase the likelihood and size of the emergency if you happen to lose just one of those clients. 2-3 agencies is better than just a single job, but having a couple other clients floating around alongside your Ghost Coding clients is probably a pretty good idea.

How To Get Started Ghost Coding

Ghost coding is a great way to take your freelance programming career to the next level. Here are a couple tips if you want to get started Ghost Coding.

Have A Fleshed Out Portfolio

Agencies are going to want to see that you can handle a variety of different types of work with varying levels of scope. If you can build out a portfolio over the course of a year's worth of part-time freelancing, that will be a huge bonus in your corner.

Never Shut Up About The Fact That You Program For A Living

Just because you can't talk about the specific work you've done or the clients you've worked with, that doesn't mean you can't shout from the roof tops that you do Ghost Coding. Someone in your circle or your circle's circle runs a development agency and has a whole backlog of work (aka 💸💸💸💸) waiting to be knocked out.

Two of my current Ghost Coding clients came from social media, and content I created online. Who knew 💩-posting on BlueSky would actually be part of my job?

Just Ask

Find an agency that specializes in the thing you specialize ( or have a decent enough grasp ) in. Find their main contact email, or their CEO on BlueSky, and Just Ask.

"Hey there! My name is Jack Harner and I'm a freelance Developer. How's your backlog looking? If you need, I'm more than happy to hop in on a part-time contract basis and help clear that out. How's that sound? My portfolio is available @ JackHarner.com. Have a great day!"

Start Ghost Coding Today!

By maintaining a few solid relationships you can multiply your pool of potential work and even bring some stability to the feast-or-famine freelance pay-cycle.

You probably should be a little ways into your freelance career already. The real-life work experience is what agency owners are looking for. That's not to say don't ask if you're just starting out! The worst that's going to happen is they say no. They might just bring you on for a one off project to start, and if it doesn't work out more long term, at least you got a little more real-life work experience to help you land the next gig.

Leave me a comment below or hit me up on BlueSky (@JackHarner) if you have any questions!

P.S. Let's chat if you want to hire me to Ghost Code for your agency

Who Has The Best Transactional Emails Free Tier?

Fri, 07 Jul 2023 00:00:00 GMT

I have a client whose website needs to send a few emails every now and then. I was curious who had the best free tier for sending transactional emails since they most likely shouldn't be breaking any free tier limits.

Here are the results of my research into who has the best free transactional email plan.

First, what are transactional emails?

Transactional emails are the emails you send that typically come from a "noreply@domain.com" email. Think password resets, sign in links, that sort of thing. They're the emails that are generally sent to 1 person at a time, and often triggered by a user action.

Alright, onwards to the different providers:

SendGrid

SendGrid offers a daily email quota of 100. While it doesn't have any significant downsides or standout features, it remains a reliable option for basic email needs.

Check out SendGrid

Brevo

With a daily email quota of 300, Brevo stands out with its robust features. It provides RESTful APIs, SMTP, and webhooks, allowing seamless integration with various applications. Additionally, Brevo offers email tracking and analysis, along with unlimited log retention. The main downside is that it includes a logo in the emails sent.

Check out Brevo

SMTP.com

SMTP.com doesn't offer a free tier, but it serves as a solid option for those who prioritize reliability. Although it lacks any distinctive upsides, its stability and performance make it a reliable choice for businesses.

SMTP.com's Plans

Mailchimp

Known primarily as a popular marketing platform, Mailchimp doesn't offer a free tier for email services. While it may not be the ideal choice for basic email needs, it remains a powerful tool for comprehensive marketing campaigns.

Mailchimp's Transactional Emails

Sendlayer

Sendlayer provides an interesting pricing structure with no free tier. However, it offers 1000 emails from three different domains per month for just $5 per month. This makes it an attractive option for individuals or small businesses with specific domain requirements.

See What Else SendLayer has to offer

Conclusion

Choosing the right email service provider depends on your specific needs and priorities. While SendGrid and SMTP.com offer reliable options, Brevo stands out with its extensive features such as RESTful APIs, SMTP, and webhooks, along with advanced email tracking and analysis capabilities. Mailchimp remains a strong choice for marketers, while Sendlayer offers an affordable solution for those needing multiple domain support.

Before finalizing your decision, consider factors such as your email volume, integration requirements, and budget. By carefully evaluating these email services, you can make an informed choice that best suits your needs.

It's a pain to switch down the line so make sure you spend a good chunk of time researching the different providers. Let me know down in the comments if there's any I missed!

Use It Or Lose It: Gratitude Edition

Thu, 29 Jun 2023 00:00:00 GMT

SmartBlocks in Roam Research

I recently learned about SmartBlocks in Roam Research (my note/to-do tool of choice). SmartBlocks allow you to create dynamic templates and actions. I've only really begun to scratch the surface of what's possible but I'll be sharing my findings here and on my blog.

One of the first things I've been setting up is their daily action. It allows you to automatically insert a specific SmartBlock, first thing every day.

My "Daily Check-In" so far includes the following:

A random block from my "Damn you ARE actually good at what you do" page.

On this page, I include screenshots of compliments and other nice things people have said about me or my work. It's a nice reminder to combat the imposter syndrome.

A Gratitude Check

Today's TODOs

This section pulls anything in the graph that's a TODO with today's date attached to it.

Overdue TODOs

Here it displays any TODOs with a date in the past. Tagging TODOs with a date means it will show up in my daily note every day until it's done.

Some Random Undated TODOs

This one pulls in 6 TODOs from throughout the graph that don't have a date on them. I'm most likely going to get rid of this section because I have a ton of TODOs floating around in my graph that aren't relevant. I don't know. We'll see. 🤷‍♂️

Intentionally Practicing Gratitude

I saw someone else share an example of their Daily SmartBlock and they included a space for a daily gratitude journal entry.

I'm pretty lazy and I wanted to do the same but have some questions as a prompt. SmartBlocks have a function that allows you to pull a random block from a specific page or section.

To save time, I asked ChatGPT to generate a list of gratitude journaling prompts.

It came up with some pretty good ones:

What made you feel excited or enthusiastic today?
What delicious meal or food item are you thankful for?
What recent experience or adventure brought you joy?

Then I just dumped all those into their page in Roam, pointed a couple <%RANDOMBLOCKFROM:xxxx%> at it in my Daily block, and now I get two daily gratitude prompts to remind me of all the things I have to be happy about.

Since the SmartBlock is just referencing the prompt block, when you go back to the page with all of them, you can see all of your responses accumulating over time:

Yet another way to continue to be grateful and reflect on what makes you happy. Gratitude is a muscle and if you don't use it? You'll lose it.

Photo by Esther Jiao on Unsplash

Freelancing & Traveling

Sat, 15 Apr 2023 00:00:00 GMT

I'm currently writing to you from a beautiful AirBnB in Bruges, Belgium, halfway through a birthday trip around Europe with my partner.

Plant Themed AirBnB in Bruges, Belgium

Freelancing never really stops and I know I couldn't afford to take two+ weeks off. Thankfully being a freelance web developer means I can work from anywhere as long as I have my laptop and a WiFi connection.

With that being said, I've already encountered a few things I wish I'd thought about before leaving home that I figured I'd share with you today to add to your pre-travel checklist.

1. Make Sure You Have Access to EVERYTHING

I had previously set up VPN access with one of my clients so I could troubleshoot issues on their local network from anywhere. Once that was set up I saved a copy of the OpenVPN connection to an encrypted flash drive I keep on my keys that goes everywhere with me.

I hadn't paid close enough attention and some of the configuration options had changed since I set it all up and the VPN config I brought with me was no longer correct. Big problem. I was able to get back onto their VPN, but I had to have someone at my client's physical location dig up some info for me from their side. Not ideal, especially if you are trying to keep a low profile about your travels.

Cloudy Morning Eiffel Tower in Paris, France

You definitely want to make sure you'll have access to everything you need and that everything is correct BEFORE you leave. My recommendation here would be to take your laptop to a nearby coffee shop and go through your entire client list, double checking you can get to everything with just your laptop.

As a web developer, for me that involved checking Github access, SSH access, BigCommerce Stencil CLI, Shopify's CLI, and more.

Taking that time to do this ahead of time will save you tons of headache while abroad.

2. Set Up A VPN In Your House

This one really only applies if you have a work computer at home and a laptop you're taking with you. If you solely work from your laptop you shouldn't run into any issues.

Setting up a local VPN in your house would allow you to access everything on your home network from anywhere you have internet access. You don't want to get halfway across the world and find out you don't have a certain file or project that you forgot to move to your laptop. However if you do, and you have your local VPN set up (and your home computer is on) you can access everything you need (doubling down on #1).

When setting up the VPN you want to make sure to do it safely and securely. Opening up a port on your home network to the entire Internet can have some serious security concerns if done willy-nilly (so make sure to do your own research when setting it up). You'll also need to set up some sort of Dynamic DNS since most home internet service providers rotate through IP addresses. Dynamic DNS (DDNS) publishes the current IP address for your home network somewhere which allows you to connect to the right spot even if your network's global IP changes. You then tell your VPN connection to fetch the IP to use from the DDNS service.

3. Prepare Your Clients Way Ahead Of Time

I made the mistake of not telling one of my biggest clients that I was going to be in Europe for 2.5 weeks until about a week before I left. Luckily there weren't any huge projects about to start during that time. However, more of a heads up would've been better for their project management. I spent the whole week before I left cramming a ton of work and shuffling some things around to ensure things were going to run smoothly even with me being about 9 timezones away. Not ideal, but we made it work.

Dutch Pancake I Ate in Amsterdam, Netherlands

4. Anticipate Not Having Good (or Any) WiFi

Multiple times this trip, I went to go do some work, and either just didn't have working WiFi or it was dog slow and unusable. Given that my job is entirely online, that was a problem. My clients were prepared that my work output was going to be down a bit while I was gone, but if that wasn't the case I would have been in even bigger trouble.

One solution would be to get an international phone plan and use your phone as a mobile hotspot. This depends on being in a country with a solid phone network, and wouldn't provide blazing fast speeds, but would be more reliable than trusting your AirBnB or hotel to have consistent WiFi.

An alternative solution would be to get one of those WiFi hotspots (like this GlocalMe Hotspot on Amazon). Obviously a pricey solution, ($120 for the hotspot & $12 - $500 / mo depending on how many gigs you need) but at least it would be a business expense that you can write off.

If running your freelance business depends on you having internet, having a solution (if not more than one) to a spotty WiFi connection is an absolute necessity.

Where To Next?

I don't think I'm quite ready to commit to the whole Digital Nomad lifestyle yet (I missed my cats a little too much), but I definitely want to get out and travel more since I have the location freedom to do so. My partner and I are thinking Costa Rica next. If you have any travel recommendations or other things to consider before my next adventure, let me know down in the comments or hit me up on twitter @JackHarner!

Fetch Customer Group & More in a BigCommerce Widget

Fri, 24 Feb 2023 00:00:00 GMT

Did you know you can fetch Customer data on the frontend in a custom BigCommerce Widget? If you didn't, well it's your lucky day because today I'm going to show you how.

Schema Setup

This tutorial is going to assume you are using Bigcommerce's Widget Builder cli and already have it configured to work with your specific store. (I'll probably write a post about this as well.)

$ widget-builder create customer-widget

That should pop open localhost:8080 and generate the default folder file boilerplate with three files:

customer-widget/
  - config.json
  - schema.json
  - widget.html

In that same folder you're going to need to create a two new files:

customer-widget/
  - config.json
  - schema.json
  - widget.html
+ - query.graphql
+ - queryParamsBuilder.json

All this file does is hold the GraphQl query you want to run when the widget is placed. You can use this to fetch products, or customer data. Pretty much anything you can fetch with the Storefront GraphQL API you can bring in as data for a widget. For now we're just focusing on getting the Customer Group ID witch you can grab with this query:

{
  customer {
    customerGroupId
  }
}

I want to caveat this with the fact that there are many many many dumb things about BigCommerce Widgets ( they are getting better, and the widget-builder tool helps with a some of it ) so just make sure to test everything before comitting to doing something with widgets over baking it custom into the theme. (I've got a post planned for the things you can't do with Widgets, so stay tuned for that)

What's up with the queryParamsBuilder.json file?

When you have more complex GraphQL queries like fetching products you'll probably need to take in a setting value and use it in the query. In the case of fetching the customer group you don't because there is only one customer object available and it's the user viewing the page.

So for the sake of this article, the queryParamsBuilder.json is just an empty object:

{}

For whatever reason the query doesn't run if you don't include the file so you need both, even if you're not using any query params. This might change in the future so it might not be necessary after an update to the widget-builder cli

To get the data you just fetched in the template? The fetched data is added on to the _ object so you can use it in your widget.html file like so:

{{#if _.data.customer.customerGroupId "==" 1}}
  // Do something when the customer is assigned
  // to a customer group with the ID of 1
{{/if}}

Obviously if you have a more complex query the logic will be much more complex. However, if you need to troubleshoot something, you can use the JSON handlebars helper: {{json _.data}} to see everything that's getting returned.

When using the widget-builder CLI and fetching customer data from GraphQL, unfortunately with widget-builder start there (currently) isn't a way to attach a customer to the local version of the widget. Once you get the widget published to the store it will start populating properly, but for now there's no way to spoof a customer locally while building a widget.

Before you go..

If you've made it this far, you're obviously someone who works on the more technical side of BigCommerce development. Given that, I think you might be interested in my post about setting up Continuous Integration / Deployment with GH Actions for BigCommerce Themes. Let me know if you have any questions or if you've found something different tinkering with BigCommerce Widgets.

Setting The Artboard Background Color In Adobe Illustrator CC

Fri, 13 Jan 2023 00:00:00 GMT

Sometimes when you're working with graphic design you end up working on a piece that's meant to be displayed on a non-white background, like a logo or web icon. Unfortunately, there isn't really a way to set the background color of an artboard in Adobe Illustrator, but let's look at a few workarounds that achieve the same effect.

The simplest way

The simplest, but probably not the best way of accomplishing a colored background is to:

Draw out a rectangle the size of your artboard
Send it to the back of the layer Ctrl + Shift + [
Lock it Ctrl + 2

I've run into problems with this method however, where I'll go to export the file as an SVG but forget to delete the background and end up with an extra element in the code or a solid color where you wanted transparency in a PNG.

Useful if you just need to check a quick background color, just don't forget to delete it when you're saving!

{{{vert}}}

The better way

The better, not quite as simple way to get a colored artboard is to take advantage of the Transparency Grid. It's used to show which parts of a project are transparent and how much. To get it setup go to File > Document Setup

Illustrator's Document Setup Menu

Under the Transparency section you need to double click on both of two color squares and set them to whatever color you want your background to be.

Click OK on the Document Settings panel and then go to View > Show Transparency Grid You can also use the keyboard shortcut: Ctrl + Shift + D to toggle the Transparency Grid on and off.

There you have it, folks.

An "Any Color You Can Think Of" background on your artboards in Illustrator without having extra objects cluttering up your files. One thing to keep in mind though, is the document properties are set on a per-project basis, so you'll have to set it every time.

Photo by Christina Rumpf on Unsplash

Anatomy of a WordPress Theme

Fri, 13 Jan 2023 00:00:00 GMT

WordPress Development relies on either Themes or Plugins for WordPress. Today, I'm going to walk you through the base files you need for any WordPress Theme.

A few of these files you absolutely need for WordPress to even consider your collection of files a theme, a handful that you kind of need depending on the site requirements, and a lot that allow you to realize WordPress' true potential.

Absolutely Required

There are only two files that absolutely required for WordPress to even recognize your theme as a theme. index.php and style.css. Let's break down the difference and some necessary parts.

`index.php`

According to the WordPress Template Heirarchy, index.php is the last fallback for every type of page. If it can't match to any other template file, this is the one that gets rendered.

`style.css`

This is the main stylesheet of your theme. It needs to live in the root of your theme's folder. "wp-content/themes/<theme-name/style.css". In order for WordPress to treat your theme right (buy it a nice dinner and some expensive wine), you need to include a comment header at the very top (otherwise it's leftovers and clearance wine). It contains information like the name of your theme, description, links to the developers and support, and more. For example, this is the header from WordPress' default TwentyNinteen Theme:

/*
Theme Name: Twenty Nineteen
Theme URI: https://github.com/WordPress/twentynineteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: WordPress 4.9.6
Version: 1.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

If you use a task runner like Gulp you can set up your SCSS tasks to generate the header for you from your package.json file so you only have to update that information in one spot.

Optional But Useful

`functions.php`

Your theme's Functions file is the file where all the magic that makes WordPress so great happen. It runs when WordPress is initialized and is where you can extend the platform to suit your needs.

BE CAREFUL WHEN MODIFYING THIS FILE!

functions.php runs on both the Admin side and the front-end, so if you leave a typo or something, it will break your whole site. Work on your theme locally and Never update your functions.php in the admin area Theme Editor.

Typically you use the functions.php file to enqueue scripts and stylesheets to get loaded dynamically, define widget areas, modify how WordPress outputs pretty much anything, and a whole lot more.

For Example:

function enqueue_my_scripts(){
        wp_enqueue_script( "theme", get_stylesheet_directory_uri().'/theme.js');
        wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

`header.php`

This template file gets called with get_header(). In here lives everything you want at the beginning of every page. Things like the opening tag, your block, your opening tag and then typically a

block.

Make sure to include at the end of your block or else WordPress doesn't have a place to inject code into the header.

`footer.php`

footer.php, much like header.php, is called with get_footer(). As you could expect, footer.php includes all the things you want at the end of every page: your footer, probably a few widget or menu areas, and then the closing tags:

<?php wp_footer(); ?>
</body>
</html>

wp_footer() is nessecary so that WordPress can add scripts to the end of the document.

`sidebar.php`

The last of the layout templates, sidebar.php get's called with, I'm sure you can guess, get_sidebar(). Depending on the needs of the design, the sidebar can be or display anything.

First things first you need to register your sidebar. Place the following code in your functions.php file:

register_sidebar( array(
    'id'          = 'top-menu',
    'name'        = 'Top Menu',
    'description' = 'This sidebar is located at the top.'
) );

Remember what you set for the id because you need that to get the sidebar content. Add the following code to your sidebar.php file:

<div id="sidebar-top-menu" class="sidebar">
    <?php dynamic_sidebar( 'top-menu' ); ?>
</div>

Your "Top Menu" sidebar should now show up in the Customize Widgets area of the WordPress backend.

`search.php`

The depth and complexity of customizing a search page are out of the scope of this article, but you can do it. Typically this template just needs a loop, fetching posts and outputting as a grid or list. You can also replace this template with an entirely different search tool to handle more advanced searching.

Post Type Templates

`single.php`

The Single template is displayed when a single post is queried. It typically contains the full content of the post, your social share links, and potentially a comments section.

You utilize the loop to get the content for the post:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
    // Do Stuff
    <?php endwhile; ?>
<?php endif; ?>

`comments.php`

The Comments template is called from comments_template() from within single.php.

Inside single.php you would include:

if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;

Which just checks if comments are open for that post, or if there are any comments and if so output the default comments form.

See the codex for more info about WordPress comments.

`page.php`

The Page template is the default template for Pages. The biggest difference between Posts and Pages in WordPress is that pages are for more timeless content. Examples being your site's "About Us" page or the "Contact Us" page. Unlike Posts, Pages cannot be categorized or tagged. They can, however, be arranged hierarchically with each page being able to have many children but only one parent page.

With Pages you can develop custom templates. Either page-{templateName}.php or page-templates/page-{templateName}.php. This specific template will match any pages with the slug {templateName} unless you add the following PHP comment to the beginning of the template:

<?php /* Template Name: Example Template */ ?

This allows WordPress to recognize the template as a custom Page Template and adds a drop down to the Edit Page screen where you can select a specific template for each page.

Examples of different page templates you could create include:

A centered wide template, with one column and a focus on the content.
Different Templates for Right and Left Sidebar Positions
A more complex grid
Unique one-off landing pages

The sky's the limit really. (One of the many beauties of WordPress)

`attachment.php`

The Attachment template file is very similar to single.php except it's for displaying images, videos, files and other things uploaded through the WordPress media upload system.

`image.php`, `jpg.php`, `video.php`

These are all just more specific versions of attachment.php. They allow you to specify custom templates for all images (image.php), only JPG images (jpg.php), and even videos (video.php). These are highly optional, and you should probably be ok with just an attachment.php file, but if your site needs the specificity, by all means, specify away.

Archival Templates

The Archival templates are focused around grouping relevant content together in a useful way. When you run through The Loop on an archive template, it typically returns more than one post so your templates should account for that.

`archive.php`

The default Archive template. Used if none of the other templates are found. Run through The Loop and output posts. If you want to have different looking pages for your Category Archives vs Looking at a specific Date and so on, use the templates below.

`category.php`

The Category Template is the default archive template for viewing posts of the same category. Displays a list of posts from a specific category if there is no category-{categorySlug}.php file for the category with a slug of {categorySlug}.

If category.php doesn't exist, WordPress reverts to archive.php and then index.php

`tag.php`

Exact same thing as category.php but for Tags.

If tag.php doesn't exist, WordPress reverts to archive.php and then index.php

`taxonomy.php`

This is the default Taxonomy Template for Custom Taxonomies. If you don't have taxonomy-{taxonomyName}.php and a Custom Taxonomy page is queried, it defaults back to taxonomy.php.

If taxonomy.php doesn't exist, WordPress reverts to archive.php and then index.php

`author.php`

The Author template is used to display posts by a specific author. In here you can include the author's Biography and social links, etc as well as a list of all the posts that individual has contributed to the site.

`date.php`

The date.php file is pretty similar to the other archival templates, it just allows you to specify a different archive page when looking at a specific date. You could also build a day.php, month.php, or year.php if you needed to be that specific in your date archives.

Other Templates

`front-page.php` & `home.php`

The difference between front-page.php and home.php in WordPress lies in the type of homepage that is displayed on a website.

front-page.php is used when a static page is set as the front page of a website. It serves as the template for the page (overriding page.php) that is set as the front page in the WordPress settings.

home.php, on the other hand, is the template used for the blog posts index page. It is typically the default homepage for a WordPress site if no static page is set as the front page.

`404.php`

This template is called whenever a user ends up on a page that doesn't exist. Use the 404 template to redirect the users back to the right place or present them with a search bar to help them find what they were looking for.

Be creative with it. Landing on a broken page is never fun for your user and there's a very high chance they'll just close the tab instead of actually trying to find what they were looking for.

In Conclusion

You should now have at least a basic understanding of what all the different theme files do and when to use them.

Developing for WordPress is pretty simple once you get the concepts down. It's SO customizable though so you can truly create any kind of web application you want.

Ensure You Get Paid As A Freelancer

Sat, 31 Dec 2022 00:00:00 GMT

One of the toughest parts about being a freelancer is the possibility that you'll have to chase down every single paycheck you ever earn. However, there are some steps you can take ahead of time to prevent you from having to chase too hard.

Keep in mind, I'm a freelance web developer (and not a lawyer) so some of this advice may not apply to other freelance fields. These are all avenues to help you get paid promptly, but you'll need to make some personal tweaks according to your specific situation (and you should consult a lawyer).

ALWAYS. GET. A. CONTRACT.

I repeat:

ALWAYS. GET. A. CONTRACT. PERIOD.

None of this other stuff matters if you don't have a written document signed and dated by both parties, agreeing to any of this. Verbal agreements and a handshake don't mean anything anymore.

Not only does having a contract give you a leg to stand on in court (if you ever have to sue for non-payment), it outlines to your client expectations for BOTH parties. You have to do things a certain way, and your client has to do things in a certain way. Being detailed about the business relationship up front helps prevent issues down the line.

Any time I have to tell a client "Per the contract..." I'm reminded to be grateful for having one in the first place.

Deposit

Getting a non-refundable deposit before you even begin working, ensures you get paid just for blocking out the time. Depending on the size of the project, you can do a different percentage. I usually do 50%. This one's a non-negotiable for me. No Deposit? No Work. (Or I'm just going to charge by the hour and bill you weekly to minimize my risk of getting ghosted)

Now if you get to the end of the project, and they won't pay up for whatever reason, at least you got some cash for your time.

Milestone Payments

If the scope of the project is large, another option is using Milestone Payments. Milestone payments are partial payments of the project total that are paid out throughout the duration of the project. The milestones you choose will depend on the size and type of work you're doing.

For full website builds, I usually do a 3 part payment:

33% Non-Refundable Deposit.
33% Milestone Payment once the site's design is approved.
33% due after the site gets final approval, but before it's deployed live on their servers (I'll go over this in a bit).

If the project is massive, you can break things up even further or adjust the ratios to get a larger deposit up front (50%, 25%, 25%). Quick and easy projects typically get broken up into 50% deposit, 50% at the end.

There are a couple advantages to using milestone payments.

If the client ghosts you halfway through the project, you at least got a chunk of the payment.
Keeps the client engaged throughout the middle of the project with clearly defined phases.
Makes the invoice a little easier to swallow for clients, giving them smaller payments over a period of time instead of one lump sum on either end of the project.

{{{vert}}}

No Final Payment, No Final Work.

You should withhold any final work, until the last invoice is paid in full. Make this part of your contract and spell out the handover process explicitly.

This one definitely depends on what type of freelancer you are. As a freelance web developer, it's fairly simple to withhold the work. For preview during the development phase, I upload the code to my own server (for WordPress builds) or a throw-away development store (for Shopify / BigCommerce projects). The client can access the site to approve the work, but doesn't get access to any of the code until they've finished paying me. After they approve the final project, I send the final invoice. Only once that's paid, then I get things pushed over to their live site, store, or whatever.

If your an artist or a writer of some kind where work samples you send over for review could easily be used without actually paying you, you'll need to adapt this process for yourself.

No Final Payment, No Final Work.

Automate Payment Reminders

I use Bonsai to manage all of my invoicing and time tracking. It makes it insanely easy to charge late fees,send out email reminders. Bonsai helps manage pretty much every step of the freelance process from Proposals to Contracts to Getting Paid. Check 'em out if you need help automating your freelance business.

Use some of these steps, use em all, but if nothing else:

AlWAYS. GET. A. CONTRACT.

No CS Degree

Fri, 16 Dec 2022 00:00:00 GMT

Becoming a Full Time Freelancer without a Computer Science Degree 😉

I was asked to interview on the No CS Degree blog. The blog focuses on people working in tech and web development that never received a computer science degree. It's a testament to all the self / community taught developers out there, as well as the people who transitioned into tech later in their life.

Thanks Pete for inviting me on!

Displaying Content Between Specific Dates On BigCommerce

Tue, 22 Nov 2022 00:00:00 GMT

Have you ever had to stay up till midnight to flip over to a new BigCommerce theme with banners and content for a big sale (Black Friday, for example)? It's super annoying having to time the theme launch and there's no way to really automate that. Thankfully we can take advantage of the Moment.js Handlebars Helper provided by BigCommerce to their Stencil Themes.

{{moment}} Helper and How It Works

The {{moment}} Handlebars Helper provides access to some aspects of the Moment.js library for handling and calculating dates and times.

{{moment "January 1, 2022" "YYYY-MM-DD"}}
\\ outputs 2022-01-01

You can also use it to calculate dates with relative date & time phrases:

{{moment "5 hours ago" "MM/DD/YYYY HH:mm"}}
// outputs the Date and Time from 5 hours in the past.

Although we're going to be taking advantage of the "now" datetime keyword to display banners and other content between specific dates.

Comparing "Now" To A Specific Date

The magic code snippet for this goes like this:

{{#and (if (moment "now" "MM/DD/YYYY") ">=" "11/23/2022") (if (moment "now" "MM/DD/YYYY") "<=" "11/28/2022")}}
   // Content to show during Black Friday Weekend 2022
{{else}}
    // Content to show before and after Black Friday Weekend 2022
{{/and}}

We're using nested Handlebars helpers to compare and see if the current date is after or equal to 11/23/2022 AND if the current date is before or equal to 11/28/2022.

If you're going to use this logic in multiple places across the site, you can set your start and end dates as Theme Settings in the config.json file and then call them like this:

{{#and (if (moment "now" "MM/DD/YYYY") ">=" theme_settings.black_friday_start_date) (if (moment "now" "MM/DD/YYYY") "<=" theme_settings.black_friday_end_date)}}
   // Content to show during Black Friday Weekend 2022
{{else}}
    // Content to show before and after Black Friday Weekend 2022
{{/and}}

Make sure to match the formatting of the date and the moment helper format, (11/01/2022 vs 11/1/2022) or Moment won't be able to compare the dates properly.

Go Forth & Automate!

Now you no longer need to try and publish your BigCommerce Stencil theme right at midnight when you start a sale. You can schedule the banners and sale content early, publish the site, and then the content will only display during your specified dates. Hit me up on BlueSky if you have any questions!

Photo by Lucian Alexe on Unsplash

Changing the WordPress Login Page Logo

Tue, 25 Oct 2022 00:00:00 GMT

The default WordPress Login page is so boring. A simple yet effective change you can do when building a client site on WordPress is update the login page with the company logo and brand colors. It's a nice touch that adds an extra "custom-built" feel to the site that your clients will see every time the access the site.

First Ensure You Have Custom Logo's Enabled In The Theme

Add this to your functions.php file:

add_action('init', 'jh_custom_logo_support', 10);
function jh_custom_logo_support() {
    add_theme_support('custom-logo');
}

Changing The wp-login.php Logo

The next step is to replace the WordPress logo with whatever's set as the Custom Logo in the WordPress settings. Add this to your functions.php file:

<?php
// Changes the /wp-login.php logo to the site's custom logo.
add_action('login_head', 'login_page_custom_logo');

function login_page_custom_logo() {

    $custom_logo_id = get_theme_mod('custom_logo');
    $image = wp_get_attachment_image_src($custom_logo_id, 'full');
    ?>
        <style>
            body.login div#login h1 a {
                background: url("<?=$image[0] ?>") center center / contain no-repeat;
                height: 25vh;
                width: 100%;
            }
        </style>
    <?php
}

Adding the following changes the text that's hidden visually, but readable by screen readers and search engine crawlers. By default, I just set this to the blog's name with the following:

// Changes the SEO Text for the logo:
add_action('login_headertext', function () { return get_bloginfo('name') . " Login"; });

By default, the WordPress logo links to WordPress.org. Thankfully, there's a hook available to easily change the link.

// Changes the Logo Link to the Site's Home URL:
add_action('login_headerurl', function() { return get_home_url(); });

If you also want to include some additional text between the logo and the form, you can do so with the login_message hook.


// Adds an <h1> under the logo:
add_action('login_message', function () { return "<h1>" . get_bloginfo('name') . " Login</h1>"; });

{{{vert}}}

All Together Now

Here's the whole script in one piece if you want to just copy-paste it into your functions.php:

<?php
add_action('init', 'jh_custom_logo_support', 10);
function jh_custom_logo_support() {
    add_theme_support('custom-logo');
}

// Changes the /wp-login.php logo to the site's custom logo.
add_action('login_head', 'login_page_custom_logo');
function login_page_custom_logo() {

    $custom_logo_id = get_theme_mod('custom_logo');
    $image = wp_get_attachment_image_src($custom_logo_id, 'full');

    ?>

    <style>
        body.login div#login h1 a {
            background: url("<?=$image[0] ?>") center center / contain no-repeat;
            height: 25vh;
            width: 100%;
        }
    </style>
    <?php
}

// Changes the SEO Text for the logo:
add_action('login_headertext', function () { return get_bloginfo('name') . " Login"; });

// Changes the Logo Link to the Site's Home URL:
add_action('login_headerurl', function() { return get_home_url(); });

// Adds an <h1> under the logo:
add_action('login_message', function () { return "<h1>" . get_bloginfo('name') . " Login</h1>"; });

Cover Image By Murat Onder

Custom Menu Order in the WordPress Admin

Wed, 20 Jul 2022 00:00:00 GMT

The custom_menu_order hook is a simple hook that just tells WordPress you want to display the Admin menu in a custom order. You filter it with add_filter() and can just use the built-in function __return_true to (you can probably guess) return true to the hook.

Add this to your functions.php file:

 add_filter( 'custom_menu_order', '__return_true' );

Docs

ORDER IN THE... WordPress Admin!

Now that Custom Menu Order is turned on, it's time to actually set the order. This is controlled through the menu_order hook.

add_filter( 'menu_order', '<custom_menu_order_fn_name>', 10, 1 );

The hook sends an array of the current menu item's URLs as the only parameter. Keep in mind it is only the part of the url AFTER /wp-admin/, but including all of the url parameters:

For example the Pages menu links to https://example.wp/wp-admin/edit.php?post_type=page and you just turn it into: edit.php?post_type=page.

You can either add and remove things individually from the Menu, or return a completely new array with only the items you want in the order you want.

Using the PHP function array_search() returns the array index for a specific value. If you wanted to remove a specific menu/submenu completely, you just search for the top level pages URL, and use PHP's unset() to remove the item from the array.

function jh_remove_posts_menu( $menu_ord ) {
    if (($key = array_search('edit.php', $menu_ord)) !== false) {
        unset($menu_ord[$key]);
    }
    return $menu_ord;
}
add_filter( 'menu_order', 'jh_remove_posts_menu', 10, 1 );

Here's an example of throwing out the default menu order and returning an entirely new one.

This is probably the way to go if you're going to be moving or removing more than one item from the menu. It's easier to just set the order explicitly, instead of fighting with the array the hook provides.

function jh_custom_menu_order( $menu_ord ) {
 
    return array(
        'index.php', // Dashboard
        'separtor1', // First separator
        'edit.php', // Posts
        'edit.php?post_type=page', // Pages
        'edit.php?post_type=<custom post type>', // Custom Post Type 
        'separator2', // Second separator
        'upload.php', // Media
        'edit-comments.php', // Comments
        'separator3', // Third separator
        'users.php', // Users
        'themes.php', // Appearance
        'plugins.php', // Plugins
        'tools.php', // Tools
        'options-general.php', // Settings
        'separator-last', // Last separator
    );
 }
 add_filter( 'menu_order', 'jh_custom_menu_order', 10, 1 );

The order of the items in the array determines the order of the menu. You can add and leave out any pages that are accessible from the WordPress Admin.

Don't worry though, the menu still respects User Role Capabilities, so if you add the Settings menu, it still only shows up for the Administrator role.

Order Array of Core WordPress Pages

As of WordPress v6.0.1, this is the default menu order that gets passed to your menu_order filter function:

 [
    'index.php',
    'separator1',
    'edit.php',
    'upload.php',
    'edit.php?post_type=page',
    'edit-comments.php',
    'separator2',
    'themes.php',
    'plugins.php',
    'users.php',
    'tools.php',
    'options-general.php',
    'separator-last',
 ]

How To Tell If A Color Setting Is Set In Shopify Liquid

Tue, 05 Apr 2022 00:00:00 GMT

Shopify sections make it super easy to add customizable settings that your clients can control with a wonderful user-friendly UI.

One of the many settings types available to Shopify Sections is the Color Picker:

One slightly annoying part about the Color Picker is that if you set the field to blank in the customizer:

The specific setting won't actually be null or a falsey value, it returns as rgba(0,0,0,0). Which means:

{% if settings.color %}
    {% comment %} 
        This will always be true. 
    {% endcomment %}
{% else %}
    {% comment %} 
        This will never render. 
    {% endcomment %}
{% endif %}

The Solution

The color picker stores the setting and returns a Shopify Color Object which allows us to check whether or not a color is visible at all.

{% if block.settings.color.alpha > 0 %}
    {% comment %}
        Color Setting is set
    {% endcomment %}
{% else %}
    {% comment %}
        Color Setting is blank / transparent.
    {% endcomment %}
{%endif%}

This treats rgba(255,255,255,0) the same as rgba(0,0,0,0). If a color has a 0% alpha, no matter the Red Green or Blue values, the color won't be visible.

Photo by Steve Johnson on Unsplash

SelectControl Not Saving Attributes

Tue, 15 Mar 2022 00:00:00 GMT

SetAttributes() Doesn't Automatically Convert Types

I was using a SelectControl to set a Category ID for a specific Gutenberg block I was building. Turns out the setAttribute() function doesn't automatically convert types. The SelectControl returns the value as a string, & since the attribute was expecting a Number:

attributes: {
    cat1: {
      type: "number",
      default: 0,
    }
}

The attribute wasn't getting saved as anything.

A Few Solutions

The easiest way to solve this is just convert the String value to a Number with parseInt() when setting the Attribute:

const onChangeCat1 = (value) => {
    setAttributes({ cat1: parseInt(value) });
};

Other than that you can adjust your attribute type to just accept a string, however given that WordPress expects Post IDs to be Numbers this probably isn't the best solution:

attributes: {
    cat1: {
      type: "string",
      default: "0",
    }
}

Conclusion

Make sure you're saving your attributes as the appropriate type, (Number, String, Boolean, etc.) and WordPress Gutenberg should stop giving you issues. Hit me up on BlueSky @JackHarner if you have any other WordPress related questions.

Organize Your Shopify Theme & Section Settings

Sat, 08 Jan 2022 00:00:00 GMT

Shopify is the most customizable e-commerce platform, while still being super user friendly out of the box. Like yes, hypothetically you can build literally anything you wanted if you built it from scratch, but who's got the time for that?! (Let alone maintaining it??) Shopify gets you about as close as you can get to the "build it from scratch" level of flexibility, while still letting you hand the store off to the less technically inclined users that will be running it on the day to day.

The theme editor, & sections (+ specifically the introduction of Sections Everywhere ) really opens the doors for hyper customizable Shopify themes, and dynamic e-commerce experiences across the site.

With Great Customization, Comes Great Responsibility

Just because you can turn everything into a Block, Section, or Theme setting doesn't mean you should.

But if you're going to anyway, you better keep things organized and descriptive. I'm going to show you how to use the header, and paragraph settings, as well as the info setting property to make it perfectly clear what each setting changes.

Section Settings Background

If you're unfamiliar, Shopify Sections are reusable blocks of code that can be modified, updated, & reordered by anybody with access to the Shopify backend.

You define the settings and blocks available to each section with a JSON object inside of the {% schema %} ... {% endschema %} tags.

For example, you'll see something like this at the end of most files in the /sections/ directory:

{% schema %}
{
    "name": "Coolest Section Ever",
    "settings": [ 
        ...
     ],
    "blocks": [ 
        ...
     ],
}
{% endschema %}

The settings inside the settings array are displayed in the order you write them, from top to bottom down the file.

The Header Setting

Use the header setting when you want to group or separate a collection of settings. As is probably obvious based on the name, it creates a Header with the text from the content property and creates a bit of separation between the settings above and below it.

Just add the following block in between the settings you want to add:

{
  "type": "header",
  "content": "Header Text Content"
},

This works inside of Section, Theme & Block settings arrays.

The Paragraph Setting

Use the paragraph setting when you want to add some additional context to a group of settings. (If you're trying to expand on a single specific setting use the Info property below.)

{
  "type": "paragraph",
  "content": "Lorem ipsum dolor sit amet."
},

You can include links in Markdown style if you need to provide additional context and resources:

{
  "type": "paragraph",
  "content": "Lorem ipsum dolor sit amet. [Here's a link](https://jackharner.com)"
},

If you really want extra separation between sets of settings, create a paragraph setting and set the text to either -, =, or my personal favorite: ~.

{
  "type": "paragraph",
  "content": "~~~~~~~~~~~~~~~~~~~~~~~~~~"
},

The Info Property

Another way to provide even more specific clarity is through the info property.

Every Input Setting type, can accept the info property which adds a little bit of text directly under the input.

{
  "type": "checkbox",
  "id": "predictive_search_enabled",
  "label": "Enable product suggestions",
  "info": "This will also affect the search bar on the search results page.",
  "default": true
},

ORGANIZE ORGANIZE ORGANIZE

Putting these three puzzle pieces together will give more context to and help your clients understand the different settings throughout the theme. The more they understand, the less they're going to take up your time with content changing questions.

Stay tuned for more Shopify Tutorials, Tips & Tricks!

How To Get Freelance Clients In 2021

Sun, 12 Dec 2021 00:00:00 GMT

As of writing, I've been freelancing fulltime for just over 200 days now (Woo 🎉) and I wanted to share with y'all what I've been doing to get new clients in 2021 and how I plan to adjust going into 2022.

I'm making no guarantee that these tactics will work for you. I'm just relaying what's worked for me in hopes that you can take something from it, apply it to your own freelance business, and grow as well.

#LearnInPublic

Have a blog.
Write down the things you do.
Get people to read how to do the things you do, but decide to hire you to just do it instead.
...?
Profit

Just had this happen for the first time ever and I was so shocked. A BigCommerce Development agency owner was looking to setup Continuous Integration through GitHub Actions and the Stencil CLI for his agency. He came across my blog post on the topic that I'd written a little over a year ago. From there, he saw I was still freelancing and reached out to see if I'd be interested in doing some BigCommerce work for him. We had a nice long chat about my experience with BigCommerce and other aspects of programming and e-commerce management. He liked the words coming out of my mouth, got a contract signed, and bada-bing bada-boom, I've got another client.

WRITE ABOUT THE TECHNICAL THINGS YOU DO. People might find out about you because they're trying to solve a problem you already solved, find your post about it, and just hire you to do it instead.

I will caveat this technique with the fact that it is not an efficient client gathering method AT ALL. I've been freelancing full time for 6 months now, and blogging for several years at least and this is the first time it's ever happened. There are a ton of reasons to have a blog as a freelancer which I'll go over in a post soon, but the fact that work that I did a year ago (and haven't thought about since then) is bringing me money today? That makes it all worth it.

Tweeting & 💩 Posting

Being active on BlueSky has brought me so many opportunities, and is partially responsible for my ability to do this full time.

I'm constantly searching around for people wishing something existed. I picked up one of my first steady clients by responding to this tweet:

going to develop an online voting tool called “is my rep a dipshit?” to easily identify dipshits and prevent them from accruing political power because this is getting out of hand. anyone interested in helping?
— collin duddy (@LoboExplosivo) October 23, 2019

Collin had an idea, I said "that wouldn't be that hard to actually build", and that's all it took to get me connected with the people over at IDK Inc. From there I've been able to build out my freelance business into what it is today.

Connecting with other web developers and freelancers has also brought in a significant amount of clients. Several times I've had internet friends reach out about work that they got hit up about. They didn't have the availability to take the work on, but I did. They passed the HOT lead on to me, and I got a client out of it.

Networking is KEY. Having that pile of friends that do what you do (or even tangentially do what you do), can payout immensely. Whether it's them bringing you work, or you having someone to pass off (or subcontract) work to, having enough colleagues in your corner means you will never run out of work.

Be THAT Guy At Parties

I'm able to do this full time because I never shut up about the fact that I make websites for a living. 9 out of 10 people usually don't care, but there's always that 1 person that needs a website, knows someone that needs a website, or can connect you to the people at their job that you need to convince to get a new website.

Now I'm not saying kill the vibes by shouting boring technical talk at anybody within listening distance, just find an easy way to work it into the small talk. My goto is to subtly mention the fact that I have clients somehow: "One of my clients recommended this place to me", "I had a fantastic meeting with a new client today", etc. That usually sparks the "What do you do?" question, and then I get to brag about myself for a good five minutes.

The more people that know about what you do as a freelancer, the better the chances are that someone knows someone who needs your work.

How I'm Prepping for 2022

In short? More of everything.

More tweeting. More blog posts. More, more, more.

At this point things are snowballing for me. Clients are coming in on their own. I've done hardly anything that really counts as "client outreach", and yet I'm able to sustain myself off just the freelancing. (HOW COOL IS THAT?!?) My existing clients keep getting happier with my work, and we're already planning out new work for the start of the new year.

A big thing for me, going into 2022, is to grow my BlueSky & Newsletter audiences (follow and subscribe if you're not 🙏🏽). Both platforms have the ability to generate massive amounts of upside, and I need to actively dedicate the time & energy to growing both.

For now, I'm going to keep this freelance thing going as long as I can, keep working for clients, keep getting new ones dropped in my lap, and keep working on my side projects to develop passive income. The ultimate goal is to stop trading time for money. I may be self-employed, but my income is still tied to how long my butt is in my computer chair. I'm trying to get on that "Make Money While You Sleep" level. I know I can, I just need to put in the time upfront.

Reset WordPress File Permissions

Mon, 19 Jul 2021 00:00:00 GMT

Somehow I continuously run into File Permissions Issues while working with WordPress, so this is primarily just a reference for myself. For whatever reason, things can get pretty hectic, and you've probably ran into a similar issue if you've ever seen a "Permission Denied" error, or if WordPress asks you for your FTP Connection Information to update a plugin.

Sometimes it's just best to reset everything back to the way Apache needs it to be to run smoothly: 775 on folders, and 664 on files.

Run the following 3 terminal commands from the root of your WordPress install (the folder containing your wp-config.php file):

chown www-data:www-data -R * # Set Apache's www-data user as the owner
find . -type d -exec chmod 775 {} \;  # Change folder permissions to rwxrwxr-x
find . -type f -exec chmod 664 {} \;  # Change file permissions to rw-rw--r--

I'm sure future me is thanking "now" me for writing this down so I can stop googling it. You're welcome future me!

Focus On What's Paying You

Sat, 03 Jul 2021 00:00:00 GMT

Now that June is in the books and things have pretty much settled, I'm getting into my new routine and I'm LOVING it.

My #Freelance Morning Routine has evolved into:

* Wake Up
* Make Coffee
* Admire my plants for an hour
* Get to work

I love it so much. No more rushing around in the morning before work.
— Jack Harner 🚀 Freelance Web Dev (@JackHarner) June 28, 2021

I basically just wake up whenever, take my time enjoying my coffee, and then settle into work when it feels right. Not having to rush around in the morning has to be my favorite thing about living the Freelance Life so far.

Multiple Part Time Jobs

Now that I'm freelancing full time, instead of living Paycheck to Paycheck, I'm living Invoice to Invoice. It's an interesting difference because instead of 2 "big" paychecks a month, I'm getting a dozen or so small to medium sized payments. Spreading myself out across these multiple part time jobs has allowed me to stay busy even when there's nothing from one job, because there's plenty to do from the rest.

Managing all of that sounds complicated, right? It doesn't have to be. I'm working on writing up an in-depth review of Bonsai, the freelance accounting tool I've been using to manage my time tracking and invoices. It's definitely making payday easier, so stay tuned for that!

Working with multiple clients at once is great because if I'm running into a productivity brick wall on one client, I can get up, take a little walk, and sit down fresh on a different project. Switching it up multiple times a day keeps my mind fresh and it never feels monotonous.

On The Road to Passive Income

Freelancing has provided me with multiple income streams, however they're not passive income by any means. I'm still technically trading my time for money. Now that the side (nights and weekends) work that I was doing, pre-freelance, has become my main work, the side-side-hustles can become the side job. I've made some significant progress on Simple Tweets, and am hammering out the details for a few different e-commerce opportunities.

{{{vert}}}

Started with Electric Eye

I started my first project with a new client, Electric Eye, this month! Electric Eye is this fully remote Ecommerce Agency specializing in building and optimizing DTC Brands with Shopify.

They had me do a (paid) take home test to see if I knew my way around a Shopify theme. I knocked it out in less than the allotted time and they said I did "the best out of any of [their] applicants to date".

I spent a little time getting onboarded with the team and then got tasked my first project. It was just some simple layout changes to the cart for one of their clients, and building out a "Free Shipping Progress" Bar:

I'm super stoked to have the opportunity to work with them and I can't wait to see what else I get to build!

It's Paying The Bills!

2nd month in a row I was able to get everything paid for with just my Freelance income. I have a few months of savings leftover after the move, but luckily I haven't needed it!

Just gotta keep working, keep finding new clients, and spend less than I make. Easy.

Create More. Consume Less.

I spend hours scrolling through BlueSky, how come I struggle writing tweets? It's because I'm consuming more than I create. The only way to get better at anything is to JUST DO IT. I need to blog more, I need to tweet more. The more you create, the more you can share, and the more you feed the algorithm, the more it regurgitates your stuff to other people. Feed the beast, but be the bait, not the meal.

Creation > Consumption.

👋 See you Next Month

But in the meantime, Follow me on BlueSky!

Quitting, Moving, & Getting Bit By A Dog

Thu, 03 Jun 2021 00:00:00 GMT

It Finally Happened:

The End Of An Era

My last official day at my 9-5 was April 30th. After working there for almost 5 years, it was definitely a bittersweet ending.

My bosses had known about my exit for the better part of 6 weeks, and that time FLEW by.

I don't really know why, but telling them was the most nerve wracking thing I feel like I've ever done. Right before telling our GM, I had the closest thing to a panic attack I've ever experienced. I was just standing in our office's kitchen, my heart beating at 150 BPM (Thanks Galaxy Watch for telling me to "Calm Down") and my whole body shaking.

I knew I just had to rip the Band-Aid off. The clock was ticking down and it wasn't going to get easier.

I'm Moving, But...

Obviously, I was way overthinking the whole "telling my boss" situation. Hindsight being what it is, I know I was worked up over how important my work was to that business. There was some significant downsizing at the start of COVID, and a lot of essential day-to-day warehouse tasks fell to me. I was fortunate to still have a job, but boy was it stressful.

The conversation with my boss went better than I could've hoped. I let her know that I was burnt out, both with the job and with New Mexico. I'd been living there for 26-ish years and it was absolutely time for a change. I was ready to dive full time into freelancing and tying that into my move to Denver sounded perfect to me.

I reasoned that a lot of the work they had actually hired me for didn't have to be done in the warehouse. Graphic Design, Web Dev, Software Dev, and Marketing are prime task categories for Remote work. All we had to do was shuffle some of the warehouse tasks to the few people we did bring back, and anything that I couldn't pawn off that I could do remote I would continue to do. Easy.

She was onboard with my plan and even offered to discuss it with the owners for me. A HUGE relief because I probably would've had the same pre-convo panic attack at least once, if not twice more. Overall she was happy for me, and excited for the next chapter in my life.

They agreed to let me switch over to being a contractor, and to continue doing what I could from Denver. That was a huge weight of my shoulders knowing I had yet another client to rely on to get my bills paid.

I spent basically the last month preparing them and the warehouse so that I could update software remotely, debug issues on some of the computers remotely, and making sure I had access to everything I needed from anywhere.

My last day finally rolled around, and with some weird cosmic timing, someone had broken into the warehouse that morning. 2 Guys literally just walked up, kicked our glass front door in, and ran off with only like $100 worth of shoes and some clothes. Spent the first half of my last day scrubbing through our security cameras to see if they caught anything the cops could use.

I was only working a half day since I had plenty of moving stuff to deal with, so my boss brought in lunch for everyone. We ate, had a last "mobile happy hour", I said some tearful goodbyes, and then I left.

Moving To Colorado

If there's one thing I learned about moving from moving to Colorado, it's this:

FIGURE OUT THE NEW HOUSING SITUATION BEFORE YOU TELL YOUR CURRENT PLACE YOU'RE LEAVING

My roommate and I got approved for the apartment 16 hours before I had planned to leave Albuquerque with a truck full of all my stuff. SIXTEEN HOURS!

Let me tell you, that is not the way to go about moving states. Our housing plans changed about 5 times in the last few months we were planning this whole thing. What was initially going to be a 4 Bed, 3+ Bath house with 4 roommates, rapidly became a 2 bed 2.5 bath apartment between me and my best friend Clinton "I'm Not A Chef" Day.

Going from one stressful situation to the next, we got the apartment, had a brief moment of untapped joy, and then the panic that I had too much shit that wasn't all going to fit set in. Apparently, my dad has played nothing but Tetris since he was a kid because he got way more in the truck than I expected. The too small truck ended up being a blessing, though, because it forced me to leave behind some stuff I was having trouble letting go of.

Just a quick 6.5 hour drive later, and we made it to the new place.

DOG BITE

On my 5th full day in Denver, I was bit by a dog and had to get 12 stitches in my nose.

Some "Welcome to Denver", right?

Given what happened, I'm still very fortunate. It was millimeters away from my septum piercing, inches away from my eyes, and could've been a whole lot worse.

It's already healing up really well. I got the stitches out about a week ago, and the scab has totally fallen off. I'm not too worried about the scar. If anything, it's a nice segway into a wild ass story to share at parties.

{{{vert}}}

Fixing Bugs In Production From My Phone At A Brewery

Colorado has an absolutely insane craft beer scene. As an avid consumer of craft beer, any time my roommate suggests a new spot, I'm pretty much always down to go. The spot this time was called Bruz Beers, a traditional Belgian-style specializing brewery in Midtown.

I'm still not exactly sure what happened, but I managed to publish the only just-started update to Bottle Rocket Hot Sauce's site, overwriting V1 on the Live Site.

...

Completely and totally breaking the site.

My dilemma was that I was at least 30 minutes away from my computer, and we were already had plans to go get some delicious pizza.

The Pizza:

Don't ask me what was on it, but it was SO good.

Luckily I had an SSH Client already setup on my phone (Let's see your iPhone do that) so I was able to:

SSH into one of my web servers
Clone the Bottle Rocket theme repo to that server from the main branch
Setup Shopify's ThemeKit
Re-deployed the V1 version of the theme.

All of that on this tiny little terminal on Bruz's patio while the sun set:

So far, that's been the most "freelance" thing I've experienced, and it just shows that I'm prepared to fix anything at any time. Maybe I am cutout for this whole freelance thing after all!

Biggest Challenges So Far

I am my own boss, there's no one telling me what to do!! 😀😀

I am my own boss, there's no one telling me what to do.. 😱😱

This one is both a blessing and a curse. When I first moved up here I made it a big deal to delete all of my alarms.

"I'll wake up when I WANT to wake up" I told anyone who would listen.

I still woke up at 7 the next morning.

After about a month I pretty much get my day started around 8:30. Take my time getting coffee or whatever else for the morning and typically sit down to work around 10. Love that for me.

However...

The only thing forcing my ass into the chair is the dwindling of my bank account and the loom of impending homelessness (or worse, moving back to Albuquerque). Which you'd think would be the best motivator, right?

I'm getting the hang of it, but it's definitely something to get used to.

My Income Is Now Like An Arcade High Score

Since going fulltime freelance I switched my invoicing and time tracking software over to Bonsai. I wanted something that could handle both time tracking as well as invoicing and payments. I'm going to write up a full review here soon, but so far I love it.

One thing it does, is it puts both your unbilled hours and the money expected from those unbilled hours right on the dashboard. I'm working with a couple of clients in a "do work. invoice twice a month" capacity, so I'm directly incentivized to get that unbilled hours number as high as possible.

I can already tell that's going to turn me into a workaholic.

Key Takeaways from Month 1

My nose is not dog proof.
I am the only one in charge of making sure I get my work.
BlueSky continues to be my most profitable network, as far as getting clients.
Prioritize creating content over consuming content.

I might turn this into a monthly series following my Freelance career. Hit me up on BlueSky @JackHarner if you want to see more like this!

Be A T H I C C Developer

Sat, 10 Apr 2021 00:00:00 GMT

Don't be a T-Shaped Developer

Be a T H I C C Developer Instead!

What's A T-Shaped Developer?

The idea of a T-Shaped Dev has been around since the early 2010s, and it evolved from the concept of an I-Shaped Dev. The Letters Jack, WHAT DO THEY MEAN?!

Picture a skill tree where each column is a different specialty in Programming and the rows signify more complex topics the further you go down:

In the early days of the software industry, the preferred type of Dev was the I-Shaped dev, where they have very deep knowledge about a single aspect of software development. Someone who works with Databases and knows everything there is to know about Database Administration, but has never touched a single line of HTML in their life. A "Master of One Trade" type of dev. You had your role and that's all you did.

As the software development landscape evolves, the lines are getting blurred between the specialties. This has led to the natural selection of T-Shaped devs over I-Shaped devs. Someone who has dabbled in a little bit of everything but still has deep knowledge in a particular area. Having a little bit of knowledge across the stack will help you make better decisions in your own lane that, while it might not seem like it, ultimately can effect the whole rest of the team. Often referred to as a "Jack of All Trades, Master of One" type of dev.

{{{vert}}}

What's Different About Being T H I C C?

I propose we take the T-Shaped Dev a step or two further and call it a T H I C C Dev. Take your average T-Shaped dev and get them to deep dive into some other areas as well. The stem of your T might not end up as tall but it will be wide and stable. It takes all the benefits of a T-Shaped Dev vs an I-Shaped Dev to the extreme.

The more you know across the stack puts you in a much better position to be flexible throughout the organization, and from my experience, those types of people are VALUABLE. Be a "Jack of All Trades, Master of Some" type dev. The earliest reference I can find to that phrase comes from one of my favorite designers/entrepreneurs, Tobias van Schneider.

If you're the go-to guy in your company for one thing, that does come with it a certain level of job security, but if you're the go-to guy for three or more things, you're not going to get fired. If they would have to hire more than 1 person to replace you, that gives you a TON of leverage. Nobody's invincible, obviously, but you can get away with a lot more than your average employee. Be Irreplaceable.

But Jack, How Do I Get T H I C C?

The absolute KEY to getting nice and T H I C C as a developer is the ability to absorb information quickly. If you can get to a place where you can take something in once, drop that info into your Mental Rolodex, and flip back to it in a couple weeks when you need it again, you'll be set.

Now, I'm not saying you have to memorize everything you come across. Far from it, actually. All you have to remember is how to find that information again. Maybe that's with a Second Brain tool like Roam Research, or a massive folder of Bookmarks you search through, how you store the data doesn't matter.

Think of your Mental Rolodex like a cookbook. You want to make a cake but you don't remember exactly how. You look through a cookbook, usually alphabetically (or at least with a table of contents), and find the recipe for a cake. You still have to go make the cake, but now you have step by step instructions to get there. Plus, it took you almost no time to find that info because you already knew it was in the cookbook.

If you can find it again quickly, you don't need to remember it. You just need to remember that you can do something, not how to do something. The stuff you use all the time, you won't need to look up as much, and with a system in place to quickly find the rest, you'll go far.

Outside of that all you have to do is:

Find something that piques your curiosity.
Google it.
Retain the relevant info.
Leave a breadcrumb trail to the rest.
Repeat. Forever.

The Moral Of The Story Is:

Never Stop Learning

Destructuring and Nested Destructuring in ES6

Sun, 18 Oct 2020 00:00:00 GMT

Have you ever had a JavaScript object that you needed to extract a bunch of different values out of? Today I'd like to introduce you to your new best friend: ES6 Destructuring.

ES6 brings with it a bunch of nifty new ways to do things with JavaScript. One of the things I use ALL THE TIME is Destructuring. It allows you to pick and choose properties out of an object and automatically assign them to a variable.

Take the following JavaScript Object for example:

let person = {
  name: "Bob",
  age: 26,
  married: false,
}

Previously, if you needed to use and manipulate the different properties of that object you would have to assign each variable manually:

var person = {
  name: "Bob",
  age: 26,
  married: false,
}

var name = person.name,
  age = person.age,
  married = person.married

console.log(married) // false

Now let's do that again with ES6. You'll find it's a whole lot cleaner.

let person = {
  name: "Bob",
  age: 26,
  married: false,
}

const { name, age, married } = person

console.log(age) // 26

Not Just Objects Either!

Destructuring is not just for Objects, you can even use it on an Array!

let people = ["Jon", "Bon", "Jovi"]

const [first, second, third] = people

console.log(second) // "Bon"

It assigns the items in your array, in order, to the corresponding variable in the destructuring array.

If, for whatever reason, you need to skip the first two items in the array you can do so with just a comma:

let people = ["Jon", "Bon", "Jovi"]

const [, , only] = people
console.log(only) // "Jovi"

{{{vert}}}

Nested Destructuring

In the real world, you're probably going to have more complex objects than just that, so let's take a look at a more complex object example.

let person = {
  name: "Robert",
  age: 60,
  married: {
    spouse: {
      name: "Roberta",
      age: 62,
    },
    anniversary: "01-01-1970",
  },
  kids: [],
}

Given this more in depth Object, how would you go about getting just Robert's spouse's name? Any Ideas? With a little magical thing called "Nested Destructuring".

let {
  married: {
    spouse: { name },
  },
} = person

console.log(name) // "Roberta"

With Nested Destructuring, you can cherry pick properties to get from as many levels down in your object as you need. Obviously this can get pretty messy pretty quickly so feel free to destructure more than once if order to keep your code clean.

Keep in mind, when you destructure down into a property, like the example above, it does not set the variable of the property you went down in to. So in this case both spouse and married are undefined.

let {
  married: {
    spouse: { name },  },
} = person

console.log(spouse) // undefined

If you need spouse and name as separate variables you will have to destructure more than once:

let {
  married: { spouse },
} = person
let { name } = spouse

console.log(spouse) // {name: "Roberta", age: 62}
console.log(name) // "Roberta"

What If I Need To Destructure To A Different Variable Name?

Sometimes in the real world, data comes in with weird property names, or you need to extract different nested properties that happen to have the same name. Don't worry though, ES6 has you covered.

Let's keep using our more complex person Object and extract BOTH his and his wife's name at the same time.

let person = {
  name: "Robert",
  age: 60,
  married: {
    spouse: {
      name: "Roberta",
      age: 62,
    },
    anniversary: "01-01-1970",
  },
  kids: [],
}

Based on what we've gone over so far, your first thought might be to do something like this:

const {
  name,
  married: {
    spouse: { name },
  },
} = person

However if you were to try this you'd be met with a nice fat "Duplicate Assignment" error because you're trying to set the name variable twice. Babel or whatever ES6 Compiler you're using won't like that at all, so you need to define custom variable names.

Check it out:

const {
  name: hisName,
  married: {
    spouse: { name: herName },
  },
} = person

console.log(hisName + " Is Married To " + herName) 
// Robert Is Married To Roberta

All you're doing is saying "Take this property and extract as this specific variable". Which when compiled to regular JavaScript for your browser it looks like this:

var hisName = person.name
var herName = person.married.spouse.name

Keep It Clean, and Keep It Simple

Using Destructuring allows you to cleanly and simply extract properties from objects in ES6 JavaScript into variables to be manipulated and modified. Keep It Simple Stupid and hit me up on BlueSky @JackHarner if you learned something!

Featured Image by Ricardo Gomez Angel on Unsplash

Display ConvertKit Subscriber Count On Your Gatsby Site

Sun, 18 Oct 2020 00:00:00 GMT

If that oddly specific scenario applies to you then read on, and I'll show you just how to do it.

If not, consider checking out ConvertKit anyway. They make it super simple to spin up your own Newsletter and start building out a mailing list today!

Displaying your subscriber count will allow you to take advantage of a psychological phenomenon called "Social Proof". Social Proof is the idea that if something is perceived as "popular", then that thing is worth paying attention to or checking out. By letting prospective sign ups know that you've got the attention of a bunch of other people, they're more likely to also sign up.

It's why things like those "John Smith in Bumfuck, Nowhere just Purchased our Product" popups, and "15 Other People are Looking at this item right now" messages are so popular and prevalent among e-commerce stores. They create a sense of urgency and stokes that "I want to be one of the cool kids" feeling we all seem to have.

I'll leave the psychology to the psychologists, let's dive in.

Get API Keys from ConvertKit

The first thing you need to do is get your account's API keys from ConvertKit. They're located under Account Settings > General:

To store your keys securely and away from prying eyes, we're going to take advantage of Environment Variables. If you don't already use them, create a .env file in the root of your Gatsby project, and paste this block of code in there:

CONVERTKIT_KEY=xxxxxxxxxxxxxx
CONVERTKIT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxx

Replace the xxxx's with your corresponding API Key and API Secret.

Security

Make sure to include .env in your .gitignore file so you don't check in your keys to your Git Repo. If someone were to get access to your API keys it would be the same as them having your username and password. They can control any part of your account and send a bunch of spam emails to your list. If you're using some sort of Continuous Deployment (CD) setup, you'll also need to include your Keys as Environment Variables according to your specific CD tool.

{{{vert}}}

Make The Call

In accordance with the bit above about security, we don't want to expose our API Keys to the public. The beauty of Gatsby and other Static Site Generators is that you can do things at build time instead of at run time or "in the browser". This keeps the Keys locked away behind your CD tools "Secrets" and away from the snooping eyes of the public.

For this purpose we're going to take advantage of the gatsby-node.js file in the root of our site. If you are unfamiliar with how Gatsby Builds, a part of the process includes running the gatsby-node.js file once. You can use this to create pages dynamically, add/modify nodes on your GraphQL tree, and more. This is where we're going to hit the ConvertKit API.

First things first, you'll need to install node-fetch:

yarn add node-fetch

Then require it at the top of gatsby-node.js:

const fetch = require("node-fetch")

After everything else in that file (if there is anything) create a new asynchronous function called getSubscriberCount:

async function getSubscriberCount(ck_secret, ck_key) {
    // Where the magic happens...
}

Now This Is Where The Fun Begins

Here's the meat of the getSubscriberCount function. We're using node-fetch to "fetch" the subscriber count from the ConvertKit API. We include the ConvertKit keys as Parameters to the function and then pass them as URL Parameters to the /subscribers endpoint.

async function getSubscriberCount(ck_secret, ck_key) {
  return fetch(
    "https://api.convertkit.com/v3/subscribers?api_key=" +
      ck_key +
      "&api_secret=" +
      ck_secret
  )
    .then(response => response.json())
    .then(data => {
      console.log({ convertkitRes: data })
      return data.total_subscribers
    })
    .catch(err => console.error(err))
}

Once we get a response from ConvertKit, we convert that response to a useable JSON Object, write the value to the Log for debugging purposes and then return the specific data we needed.

Now anytime you call the getSubscriberCount() function it will return your current subscriber count. You can then call this around your gatsby-node.js file as needed.

Pass The Subscriber Count To Your Pages

When you generate pages in gatsby-node.js you're able to pass data down to the page template in the form of Page Context. First we pull in our ConvertKit Keys with dotenv and pass them into our fancy new getSubscriberCount() function.

const { CONVERTKIT_SECRET, CONVERTKIT_KEY } = process.env
const subscriberCount = await getSubscriberCount(
      CONVERTKIT_SECRET,
      CONVERTKIT_KEY
    )

Then, when you call Gatsby's createPage to actually generate your pages you just pass in your subscriber count through the context object:

createPage({
    path: "/newsletter/",
    component: path.resolve(`src/templates/newsletter.js`),
    context: {
        subscriberCount: subscriberCount,    },
})

Using Page Context to Display Your Subscriber Count

Now that our Newsletter page gets generated with access to our Subscriber count let's modify the page template to include it. In my case the template file is src/templates/newsletter.js but pick whichever page your trying to modify.

Page templates in Gatsby are just React Components that receive some data through Props and output JSX to be compiled to HTML at build time.

Check out this example Functional Component:

import React from "react"

const Newsletter = ({ pageContext }) => {
    let { subscriberCount } = pageContext

    console.log(subscriberCount)

}

export default Newsletter

All this is doing is destructuring the pageContext variable out of the Props, and then further destructuring pageContext to get the subscriberCount variable we passed in earlier.

You can further simplify this with a process called nested destructuring:

import React from "react"

const Newsletter = ({ 
    pageContext: { subscriberCount } }) => {

    console.log(subscriberCount)

}

export default Newsletter

In this case the pageContext variable is never assigned since all we need from it is the subscriberCount. Keep in mind that if you use nested destructuring to extract a variable out of an object the original variable is never assigned. If you need more than one thing out of the pageContext variable you need to destructure both variables at the same time:

const Newsletter = ({
  data,
  pageContext: { recentEmails, subscriberCount }}) => {

Show OFF!

Now that we have our subscriberCount assigned to a variable in our page template, all that's left to do is put it somewhere in our JSX. You can either output it directly in the template:

const Newsletter = ({ pageContext }) => {
    let { subscriberCount } = pageContext

    return(
        <h2>Join {subscriberCount} Other Subscribers TODAY!</h2>    )

}

or pass it down as a Prop into a different Component:

const Newsletter = ({ pageContext }) => {
    let { subscriberCount } = pageContext

    return(
        <Counter count={subscriberCount} />    )

}

That's All Folks

Now you're able to access your ConvertKit Subscriber count from anywhere on your Gatsby site, safely and securely!

The one downside to this method is that your published subscriber count will only update when you build the site, but maybe you can use that as motivation to post more content.

Take It Even Further

Some suggestions for taking this tutorial further:

An alternative option to explore if you need that number all over would be adding it as a node on your GraphQL tree instead of using Page Context. Then you could request it in any GraphQl Query you make.
Automate your CI/CD process to either rebuild the site daily or listen for a ConverKit Webhook to rebuild the site on every new subscriber.

Let me know on BlueSky @JackHarner if you have any questions or implemented any part of this yourself! I'd love to see it!

Featured Image by Nick Hillier on Unsplash

Generate Documentation From Markdown AUTOMATICALLY

Sun, 09 Aug 2020 00:00:00 GMT

MkDocs is a "fast, simple and downright gorgeous" static site generator for turning a collection of Markdown files into a documentation site. Today, I'm going to walk you through how to get MkDocs setup (which isn't hard).

What's The Need?

I stumbled across MkDocs because we had some major staffing changes at work, and I wanted a way to keep track of various processes and SOPs for running the day to day. I initially started just with a folder of markdown files on my computer that I would add to as I came across things that needed documenting.

This worked for a little while but then I needed to be able to share things in the docs with other people at work. I didn't want to have to a lot of time building something. I'm pretty sure I just googled "simple Markdown to HTML" and MkDocs was the first thing that popped up. It was everything I wanted: Simple. Clean. Automatic. Input Markdown Directory. Output HTML Directory. Perfect.

Setting It Up.

Enough rambling on the why, let's talk about the how.

Installation is super easy. They have tons of packages in most of the package managers (apt-get, dnf, homebrew, yum, chocolatey). If you don't use one of those package managers the manual install is also pretty easy.

MkDocs is built with Python and it supports Python versions 3.5, 3.6, 3.7, 3.8, and pypy3. So make sure you have one of those versions installed along with the appropriate version of pip (python's package manager), and then run:

pip install mkdocs

Verify it installed correctly with:

mkdocs --version
mkdocs, version 0.15.3

Directory Setup

If you're starting fresh, you can just run:

mkdocs new <procject-name>
cd <project-name>

If you already have a directory of Markdown files you want to use MkDocs on, you have 2 options. You can either:

Run the mkdocs new <project-name> command above and just copy your markdown into the <project-name>/docs folder it created
Create your own docs folder in your existing directory and move everything into it that way. Then at the root of your project folder create a mkdocs.yml file, and configure it yourself.

Fire This Bad Boy Up

MkDocs installs with a dev server you can use while updating everything. Make sure your shell is in the <project-name> folder and run:

mkdocs serve
INFO    -  Building documentation...
INFO    -  Cleaning site directory
[I 160402 15:50:43 server:271] Serving on http://127.0.0.1:8000
[I 160402 15:50:43 handlers:58] Start watching changes
[I 160402 15:50:43 handlers:60] Start detecting changes

MkDocs is now watching your directory for changes and building those changes to http://127.0.0.1:8000. Visit that url in your browser and you're greeted with this:

Configure Your Site

Everything you can configure for your Docs Site goes into the mkdocs.yml file in the root of the project.

There are about a billion different configuration options for MkDocs, so rather than go through them all I'm going to just link you to the docs site for MkDocs (conveniently built with MkDocs).

Fill it

Inside your projects docs folder is where all your Markdown files go. mkdocs new creates an index.md file that's converted into the landing page. Include instructions about the docs site here. Telling users what kind of information they'll find here.

Depending on the complexity of your documentation you can add more Markdown files into the docs folder, or if you need you can create sub-folders, for example docs/test/.

{{{vert}}}

As you flush out your docs folder, you'll notice the navigation bar at the header is automatically generated:

MkDocs automatically turns Folders into dropdowns, and top level files into links. If you want specific selections in your nav you can configure that in your mkdocs.yml file by adding the nav option:

site_name: MkDocs Test Site
nav:
    - Home: '../'
    - 'User Guide': 'user-guide.md'
    - 'Test Folder': '/test/'
    - 'External Link': 'https://jackharner.com'

You can link to specific files, folders, or even external links. However, configuring the nav option will stop MkDocs from automatically generating the nav, so you will have to add any new pages to the menu that you create.

Build It

When you're done updating the content and you're ready to deploy, you just run mkdocs build in the root of your project. Mkdocs generates the files in the <project-name>/site folder. Copy the entire site folder somewhere online and you will have a fully featured docs site up and running! Wasn't that easy?!

Since all it uses is Python, it's probably super simple to combine MkDocs with GitHub Actions & GitHub Pages to automatically publish any new changes to the docs site as they get pushed to the repo. (That's a post for another day.)

Let me know what you think about MkDocs

Send me the Docs sites you setup over on BlueSky: @JackHarner. I'd love to see them!

BigCommerce Stencil CI/CD with GitHub Actions

Sat, 01 Aug 2020 00:00:00 GMT

Post Updated November 21st, 2022 to work with Stencil-CLI >5.x

Back in November 2019, GitHub released GitHub Actions. An "API for cause and effect" they called it.

Basically, GitHub Actions allow you to program things to happen when other things happen to your repo. For example, running tests on Pull Requests as they come in, or updating your GitHub Profile Readme with your latest DEV posts.

Today I'm going to walk you through using GitHub Actions to publish your BigCommerce Stencil Theme automatically.

What is CI/CD?
Bye Bye Bitbucket Pipelines.
Folder Structure
Configuration
That's All Folks
The Full Code
Taking The BigCommerce CI/CD Flow A Step Further

What is CI/CD?

CI/CD stands for Continuous Integration / Continuous Delivery. CI/CD is a coding philosophy that allows teams to publish changes often, without the daunting task of pushing to production manually. Setting up a solid CI/CD Pipeline will save you and your team plenty of hours over the course of the project to make up for the initial time setting it up.

Bye Bye Bitbucket Pipelines.

The first iteration I tried for CI/CD on my Stencil Theme came from this article from BigCommerce. It talks about how to utilize BitBucket Pipelines to Auto-deploy your theme. I was storing our theme on BitBucket anyway because this was before GitHub offered free private repos, so it ended up working perfectly.

Once GitHub allowed Free Private Repos for individuals (and eventually teams), I decided to move all of our repos back. I still wanted the CI/CD benefits of BitBucket Pipelines so I dove into GitHub Actions to see if I could make it work.

Folder Structure

The first thing you need to do to setup GitHub Actions is create a hidden folder called .github (note the period at the beginning) in the root of your theme. Inside that folder create one more folder called workflows. Now create a file in /.github/workflows/ called main.yml.

This YAML (a recursive acronym that stands for YAML Ain't Markup Language) file is what tells GitHub what to do, when to do it, & what to do it with.

{{{vert}}}

Configuration

I've included the full code down below, but I'm going to walk through each piece so you understand what's happening and how to adjust it for your specific use case.

Name It

First things first, we've got to name this bad boi. Start your main.yml file off with the following:

name: Push Stencil Theme To BigCommerce.

This defines the name of the Workflow that you are creating and shows up on GitHub each time the workflow runs.

Main Branch Only

In order to save build minutes, we only want to run the workflow when something is pushed to the main branch. For that, add the following:

on:
  push:
    branches:
      - main

The on option allows you to specify when to run the workflow. There are about 25 different events that you can configure workflows for, check out the full list here.

Get A JOB You BUM!

The next thing we need to do is create the Job. This is where all the magic happens inside the Workflow.

jobs:
  build:
    name: Stencil Push
    runs-on: ubuntu-latest
    steps:

Let's break that block down even further.

jobs: - This line defines an array so you can run multiple different jobs at a time.
build: - This is the ID for the job we are setting up. You can use the ID to reference jobs from other jobs, for example, to check if the first job exited a specific way.
name: Stencil Push - Pretty self-explanatory. Defines the name of the job.
runs-on: ubuntu-latest - This allows you to configure the OS of the computer that will be processing your Job. You can choose between Linux, Windows, And Mac Operating Systems, depending on your needs.
steps: This starts the Steps array where you configure everything that happens inside the job.

STEP It Up

Jobs have multiple steps, just like workflows can have multiple jobs. The big difference is that steps run sequentially, waiting for one to finish before the next step starts.

Check It Out.

First things first we have to checkout the repository. If you're unfamiliar with Docker, basically you're spinning up a new blank virtual machine every time your job runs. In order to manipulate the files you need to get them first. Luckily, GitHub Actions comes with a pre-configured set of tools to do simple things like that:

Start off your steps array with Step 1:

steps:
      - name: Checkout Repository
        uses: actions/checkout@v1

The uses attribute in this step allows you to run other GitHub Actions inside your Action. This allows things to be modular and reusable. Check out GitHub.com/actions for more info.

Node v14 Only

Since BigCommerce Stencil requires Node 14, Step 2 involves installing the specific version of node we need:

steps:
  
  ...

  - name: Set Node version to 14
    uses: actions/setup-node@v1
    with:
      node-version: 14

On this step we now have the with attribute. This allows you to pass configuration options to your "Uses" actions. In this case we define node-version as 14 since that's what we need for the Stencil CLI to work.

Install Dependencies

Step 3 is kind of a 2 for 1 deal. With the run attribute on the step you can run console commands. The pipe | is used to start off a multi line command. Install the Stencil Cli first, and then run whichever package manager you use. In my case it's Yarn.

steps:
  
  ...
  
  - name: Install Dependencies
    run: |
      npm install -g @bigcommerce/stencil-cli
      yarn

{{{vert}}}

Configure Stencil CLI

Update as of 2022: stencil init now has all of the flags available to run through CI. The original setup involved storing the entire contents of the .stencil file as a secret in the repo.

We need to add a couple secrets to the repo to keep our Stencil CLI Access Token secure. Open up your Repo and click Settings > Secrets & Variables > Actions > New Repository Secret. Name the first one STENCIL_STORE_URL and paste in your store's mybigcommerce.com url (i.e. https://store-xxxxxxxxxx.mybigcommerce.com ). Save that secret and add a second one called STENCIL_ACCESS_TOKEN with your Stencil CLI Access Token as the value. GitHub Secrets allow you to use sensitive data in your Actions without exposing it to the world.

Once again we'll use Step Environment Variables to send our secrets to the stencil init command to generate the secrets.stencil.json and config.stencil.json files used connect the CI runner to our specific BigCommerce store:

steps:

  ...
- name: Connect to store
      env:
        URL: ${{ secrets.STENCIL_STORE_URL }}
        TOKEN: ${{ secrets.STENCIL_ACCESS_TOKEN }}
      run: stencil init -u $URL -t $TOKEN -p 3000 -h https://api.bigcommerce.com

Push It Gurl

The last thing to do is push the theme with the Stencil CLI. We use the aforementioned -a & -d flags to Activate a specific variation (in our case the variant called "Light") of the theme and to Delete the oldest unused theme (there is a limit to how many themes you can have uploaded to BigCommerce at one time).

steps:

  ...

  - name: Push Theme
    run: |
      stencil push -a Light -d

That's All Folks

After that all you have to do is commit the workflow file to your repo and push it up to Github. As soon as it's in there, github will take that commit and run your Workflow against it.

Be Careful Though, because at this point anything you push to your main branch will get automatically pushed to your live site. Make sure to follow good Git practices and only commit to the main branch PRODUCTION READY CODE. That is the beauty of using Git in your CI/CD Workflow because if you break something it's super simple to roll back the main branch to the previous commit, make your fixes and try again.

The Full Code

name: Push Stencil Theme To BigCommerce
# This workflow is triggered on pushes to the Main Branch only.
on:
  push:
    branches:
      - main

jobs:
  build:
    name: Stencil Push
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v1

      - name: Set Node version to 14
        uses: actions/setup-node@v1
        with:
          node-version: 14

      - name: Install Dependencies
        run: |
          npm install -g @bigcommerce/stencil-cli
          yarn

      - name: Connect to store
            env:
              URL: ${{ secrets.STENCIL_STORE_URL }}
              TOKEN: ${{ secrets.STENCIL_ACCESS_TOKEN }}
            run: stencil init -u $URL -t $TOKEN -p 3000 -h https://api.bigcommerce.com

      - name: Push Theme
        run: |
          stencil push -a Light -d

Taking The BigCommerce CI/CD Flow A Step Further

Once you get settled into a CI/CD flow that works for you and your clients, here are a handful of ideas to extend it:

Connect the workflow to send work to both a staging and production site.
Setup an NPM / Yarn Cache to save time installing all the different dependencies.
Modify the theme name with things like the date and the Pull Request info to connect the theme names back to the repo.
Create a separate GitHub action that uses CRON to regularly pull in the live theme on the store, capturing any changes your client made directly through the theme editor.

And pretty much anything else you can think of that you can accomplish with GitHub Actions. Automating the deploy process makes it so much easier to focus on fixing bugs and building new features, instead of wasting time manually deploying new changes.

Featured Image by Martin Adams on Unsplash

Let's Make A Newsletter

Sat, 25 Jul 2020 00:00:00 GMT

"Lots of noise, nothing to sell. Not even a mailing list to subscribe."

👇🏽 Great read 👇🏽 https://t.co/61my4iobiy
— Jack Harner 🚀 (@JackHarner) July 21, 2020

I read this great article from @swizec about how he made almost $400k over 5 years on the side through books, courses and other digital media sales. His path to success sparked my curiosity to see if I could do it to. I've got several ideas for digital learning materials to sell because of his article. I'll definitely keep you all updated along the way.

This quote stood out from that article:

That was my biggest mistake back when I first started blogging successfully. Lots of noise, nothing to sell. Not even a mailing list to subscribe.

I don't even have a mailing list either. I decided to fix that & signed up for ConvertKit almost immediately.

Let's talk about why, if you make anything, you should also start a mailing list.

A Passionate Audience Is The Best Investment in 2020.

Look at practically any celebrity these days. They can sell literally ANYTHING and their rabid fan base will eat it up and break the internet. For example, Tesla selling booty shorts; basically any YouTube Star's makeup line; countless books, cereals, beverages, or any kind of endorsement deal.

All of these products launch and sell out instantly not because they're superior products or a better deal, but purely because the customers love whoever is on the packaging.

My goal as a creator is to create a small but passionate audience by supporting and encouraging other creators through their journey as well as teaching others about Web Development, Productivity, Automation & More.

Only True Way To Own Your Customer List

Having tons followers on social media is great and can be a massive driver of success, but what happens when the platform you're popular on just up and dies? (Looking at you VINE). Suddenly those thousands of followers cease to exist. What happens if your account gets deleted? Now you've lost all access to your customers.

< Email List Has Entered The Chat >

Email is not going away any time soon, and unless your target audience is like 12 year olds, they probably check it every day. Getting that kind of access to your customers is priceless.

As long as you back up your list outside of any platform regularly, nobody can block you from sending to it. Social networks come and go, but email is forever.

Learn In Public, Together

I've always been a fan of learning in public, or in other words, sharing the things I learn as I learn them. It helps solidify the knowledge for me, gives me a reference to look back to, and possibly helps other people down the line as they're going through the same thing.

I hope to use this platform to spread my knowledge and use my experience to help other people level up as web developers and creatives.

Thanks for reading!

I really appreciate it.

I plan on re-posting every email I send on JackHarner.com 7 days after it gets sent to the list. Make sure to sign up to get my posts as soon as possible.

If you have any questions feel free to respond to this email or hit me up on BlueSky: @JackHarner. Happy Coding!

Productivity = Automation

Wed, 01 Jul 2020 00:00:00 GMT

Time for #DevDiscuss

Tonight's topic is... Productivity tools 🛠

Let's start with some questions

- What does it mean to be productive?
- How does your view on tools evolve over time?
- Recommend some tools! pic.twitter.com/Wyc84CYx6A
— DEV Community 👩‍💻👨‍💻 (@ThePracticalDev) July 1, 2020

I'm Lazy.

BUT I'm the good kind of lazy that works really hard to do as little actual work as possible. If I have to do anything more than twice, I'm going to think about automating it. From scripts to download & process product photos, to hours-saving spreadsheet combiners, there's not much in my job and life that isn't at least partially fueled by automation.

My Automation Toolkit

Smarter minds than me can probably go into the depths of Pros and Cons between all of these methods, but I'm not going to. This is just a list of some of the things I've used over the years to speed up mundane tasks. Everything here was used to solve a super specific problem, so think about things in your work day that can be sped up with the help of our friendly ~~overlords~~ computers.

If It's Repetitive, You Can Probably Get a Computer to Do It For You.

Python

Python is often reached for when starting to learn programming. It's simple, it's easy to read, and you don't get lost in a sea of brackets and semi-colons. At the same time it's insanely powerful and I'm sure a very large chunk of the online world is run with python.

Need to process or combine large spreadsheets on a recurring basis? Check out Pandas.

Want to automate certain mundane tasks online? Check out Selenium (more on that later 👇).

Want to make Generative Art or play with fractals? Python can do that too.

{{{vert}}}

Selenium

Need to submit the same form on a webpage over and over again? Time to bust out Selenium. Selenium is a tool you can use with Python (or Java) to write code to make a browser do things to itself 😉. Python is super verbose and easy to read so you're just telling the browser:

"Go Here, type XYZ into that Form, click on this checkbox and then click on that submit button"

"Now do it 999 more times"

With Great Scripting Power Comes Great Responsibility. Don't accidentally (or intentionally) DoS anybody by bombarding their site with requests. Build in exits and control the timing of requests. All That Fun Stuff.

PowerShell / Bash Scripts

PowerShell was my first introduction to scripting. I started with simple "move files around" type scripts and built more stuff from there as the need came up. I wrote a PowerShell script that could fetch product images by SKU from specific sources, crop/resize and rename the files, then upload them over FTP to our web server. What used to be a manual hour long process is now 5-10 minutes tops.

Bash Scripts are basically the Linux version of PowerShell (or the other way around, I don't know). Super useful for processing things server side. Mixed with Cron, you can automate reports and file fetching fairly simply, back up and maintain your servers automatically, and more. Definitely spend some time learning Bash scripting if you do anything on Linux Servers.

AutoHotkey

If your on Windows I highly recommend AutoHotkey. It allows you to configure almost anything as a keyboard shortcut.

Some of my most used shortcuts:

]j will output - Jack <mm/dd/yyyy> with the current date.
Ctrl + Pause starts and stops Spotify, while Ctrl + <Scoll Lock / Print> will switch tracks.
Tapping Caps Lock doesn't do anything. Double Tapping Caps Lock toggles Caps Lock. I've wasted way too much time backing up when I accidentally hit it AND eVERYTHING sTARTS tYPING lIKE tHIS.
I use an older mechanical keyboard that doesn't have a Windows key, that I got for $2. I also religiously use Windows Virtual Desktops and the keyboard shortcuts for those are controlled with the Windows Key (Specifically Windows + Tab brings up the overview). Google was my friend and I was able to rebind Caps + Tab to open up the overview, and Caps + <A/S> to switch between desktops.

Keyboard Shortcuts -- Learn 'Em. Love 'em. Live 'em.

On top of everything I've configured for AutoHotkey, I swear by keyboard shortcuts. Why waste time reaching for the mouse and then moving it all the way across the screen to dig through 3 levels of menus to click on something, when you can just memorize the keyboard shortcut and be done with it.

This is doubly true for Photoshop and Illustrator. All of the tools you're using have keyboard shortcuts to flip through them.

You'll save so much time in the long run and you don't have to move your hand back and forth to the mouse as much. It's a win-win.

Go Forth And Automate!

Banner Image by Franck V. on Unsplash

Custom Fields By Name

Tue, 09 Jun 2020 00:00:00 GMT

At Shoolu, we take advantage of Custom Fields on products in BigCommerce all the time. Our inventory software runs some rules against the product data and sets various fields as various values we use to enhance the product pages across the site.

The Problem

When the theme templates are processed, the custom fields are passed to the frontend as an array of objects:

{
    'product': {

        'custom_fields': [
            {'name': 'Property', 'value': 'Property Value'},
            {'name': 'Property2', 'value': 'Property2 Value'},
            
            ]
    }
}

Unfortunately, due to whatever technical limitations or "for security purposes" this doesn't work:

{{#if product.custom_fields.Property2}}

... do something

{{/if}}

Why can't they just build custom_fields as an object with the custom field names as keys? Require the name to be something that works as a JSON key with a max length and build it that way.

{{{vert}}}

The Solution Workaround

There's a Handlebars block tag available called filter which allows you to filter an array of objects down by a specific property of the object.

{{#filter product.custom_fields '<FieldName>' property='name' }}
    {{#if value '==' 'True'}}
        Just Do It.
    {{/if}}
{{/filter}}

Biggest downside is trying to do things around your theme based on that value, you have to wrap your {{#if}} blocks in the {{#filter}} block. It doesn't look very intuitive and feels very hacky, but it works so it's what we get.

If you have a better way of doing this, please please please let me know on BlueSky.

I Just Got A Raspberry Pi

Sat, 30 May 2020 00:00:00 GMT

After wanting one for some time, I finally caved and bought a Raspberry Pi. I got the Pi 4 Model B, the latest and greatest. It boasts the ability to replace your desktop computer, with two micro-HDMI outs as well as on-board wi-fi and 4 USBs. Seeing as a lot of stuff I do needs a lot of processing power, I doubt it will be replacing mine, but I'm excited to see what I can do with it!

PiHole - Block ALL THE ADS.. Sort of..

If you're not familiar, PiHole is a lovely piece of software that can act as a network-wide ad-block for your entire house. Hypothetically super simple to set up: Install Raspberry Pi, Run a Bash Script, Set your router to use your Pi as the DNS server, and you're done.

For me, it turned out not as simple. I use the stock Router/Modem Combo provided to me by Comcast. Turns out, they don't allow you to set custom DNS servers for the network. Great. So now I have to go around and configure each device manually to use the Pi as it's DNS server to get it to work.

{{{vert}}}

It's Always DNS.

I've been meaning to buy my own router/modem for a while now, and this might be what finally pushes me over the edge.

What's Next

I've got a couple different BlueSky bots and such running on different servers that I might try to consolidate to the Pi. I got the 2Gb Memory version so it's not SUPER powerful, but for simple cron tasks and things it could save me some money.
Buy a new Modem/Router combo.
Buy a set of Raspberry Pi Fans to help deal with the heat. It hovers right around 66°C. with just PiHole running, but I'm sure that will jump up once I start using it for other things.
I also had an idea for a lightweight web app that I could host on the Pi and use QR codes to track how often I water my plants. This one's probably way down the line, but could be a cool open source project to work on.

Schedule Tweets Without Thinking About It

Thu, 30 Apr 2020 00:00:00 GMT

Day 331 : Sunday, March 14th 2021

Wow. It's been a while. Just recently got my like 5th wind on this project and got a lot done in the last couple weeks.

Lots has happened.

Actually "Lots has happened" is an understatement.

I fixed whatever login issues I was having back on Day 99 (Don't ask me what I did, I don't remember).
I split the project into two seperate repos, one for the React Client, and the other for the Express Node server.
Got Continuous Integration / Continuous Deployment set up for both halves of the project.
Cleaned up a TON of the CSS to make things look better across devices.
Totally revamped how I was handling "Sending Tweets". Which allowed for:
You can schedule threads!
Started integrating the BlueSky API V2 to take advantage of Conversations.
Laid out the ground work to do a Closed Beta of the project soon.

Scheduling Threads

I'm not entirely sure why, but getting this too work took a whole lot longer then I expected. I had to pretty much completely redo how I was managing the storage and processing of scheduled tweets. Initially I had stored the tweet text as just a string in the database. When it came time for that user to tweet, it would pull up the latest tweet in the queue, and POST the text to BlueSky. Simple. One DB Record per One Tweet.

With threads it's a little different. I wanted Users to be able to schedule threads where the entire thread would go out at once. The solution I ended up going with was storing the whole text thread as an Array instead of a String. Unfortunately, at least that I found, there isn't a "POST THREAD" endpoint in the BlueSky API (I think it's getting easier with V2 which I'm going to dive into later).

That leaves you to run through this loop:

Pull the ParentTweet out of the DB
Loop through the full_text array.
1. Create a new Tweet in the DB
2. Send that Tweet to BlueSky
3. Receive the ID of the Successful Tweet from BlueSky
4. Store all that on the individual Tweet record in the DB
5. Pass that ID to the next item in the array
6. Repeat.
Wait for all that to be done and mark the ParentTweet as either error or tweeted depending on the response.

From my understanding of V2 of the BlueSky API is that instead of passing the Tweeted ID on to the next one in the loop, I would just pass in the Conversation ID from the first Tweet, and any subsequent tweets to that Conversation ID will show up as a thread, at the end of the thread. (I haven't fully dove into it yet so this might be totally wrong).

From Mono-Repo to Multi-Repo

I was having issues getting a Continuous Deployment workflow running for the project. I was using a self hosted version of Jenkins to do some code running stuff till one day I pushed some changes and nothing happened. I logged in to Jenkins and it wasn't even recognizing the Repo existed. Strange.

I fought with it for a while but eventually gave up.

I decided to switch things over to GitHub Actions so I wouldn't have to mess with Jenkins anymore. I started busting out a rather complex workflow to deploy both halves of the App at the same time. I wasn't able to get it to work and I figured now was the time to separate the backend and the frontend into their own repos.

Since a React app has different CI/CD requirements than a Node Express Server, it was something I probably should've just done from the beginning. Hey, at least I learned something.

To split them up I renamed the project folder to simple-tweets- and created a brand new simple-tweets folder. I then created individual api and client folders and moved the files from the original folder to their new home. Connecting each directory to their respective new GitHub repos and sent up the changes.

Biggest Downside I had with this is that I lost the file history from before the move. I'm sure there are ways to manage that migration while maintaining the history but I decided it wasn't worth looking into for me (and also another reason to split them from the beginning).

CI / CD Setup

Express API

For the API it's super simple. On my Ubuntu server I made sure I had git installed and cloned the API Repo using a Deployment Key. Then setup a brand new locked down SSH User that GitHub could use to run commands within specific folders on my server.

Since I haven't setup any sort of testing on the project yet, there's not a whole lot that the GitHub Workflow is actually doing. Runs through a "Testing" step that does nothing, and once that's done SSHs into my server, pulls the latest commit from GitHub and Restarts PM2 ( The Node Process Manager ) which starts the API back up with the latest code.

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: actions/setup-node@v1
        with:
          node-version: 14

  deploy:
    needs: [test]
    runs-on: ubuntu-latest

    steps:
    - name: SSH and deploy node app
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        key: ${{ secrets.SSH_KEY }} 
        port: ${{ secrets.SSH_PORT }}
        script: |
          cd ${{ secrets.API_DIR }}
          git pull origin main
          yarn --production
          pm2 restart server

React App

Since there's actually a Build step when using Create-React-App, the React CI/CD workflow has a few more steps. It's not as complicated, but I was ripping my hair out trying to get it to work.

No matter what, running yarn build locally would work, but just wouldn't complete in the GitHub Action. Well it turns out GitHub Actions (and most CI platforms) sets the CI environment variable to True. This causes the Create React App Build Scripts to treat every warning like an error in the build.

On one hand it makes sense, you shouldn't be pushing projects with ESLint Errors but as a solo dev, I ain't got time for that. The solution I figured out was you have to explicitly set CI=false in your Workflow file when running yarn build:

  steps:
    - # ...
    - name: Install Dependencies
      run: yarn
    - name: Build
      run: CI="false" yarn build

From there the ./build directory contains the static files that get SFTP'd with the same SSH user as the API to the site directory on the server.

Mobile Version CSS Cleanup

I spend a lot of time on my phone and having Simple Tweets work on all devices is absolutely necessary. It wasn't that hard to get things looking fresh and clean on the phones, but it was something I'd been putting off in favor of more fuctionality based fixes.

Now I can use it on the go, and dump some tweets out of my mind, wherever I am!

Closed Beta Coming Soon!

Up until know, someone could've found the url for the beta version, log in with their BlueSky and use the App. I got that locked down so only select accounts can log in to the Beta. I'm going to be reaching out to a handful of BlueSky friends in the coming days to see if they'd be willing to help me test some stuff. Shoot me a DM on BlueSky if you want to help out.

What's Next

The last piece that I need to figure out is how to upload and schedule pictures with tweets. I'm hoping to figure out how to make that work without having to store any user files, since that can get huge. I think I'll be able to just send the file directly from the users browser to BlueSky and then store the Media ID for posting eventually. That really depends on BlueSky's media deletion strategy ( do they delete media that didn't get attached to a tweet within 2 hours? Weeks? never? ) Just more I'll have to research.

{{{vert}}}

Day 99 : Saturday, July 26th 2020

Long Time No Talk.

It's been a while. I've, thankfully, been working the whole time through the pandemic, both on some client work and my 9-5. I opened the project back up because I'm making a point to be more active on BlueSky and that was the whole reason I started building Simple Tweets in the first place.

Boot it up with:

npm run startBoth

which runs both the Frontend React code as well as the backend Node server. Everything loads fine, but I try to sign in with BlueSky and it doesn't work. It just sits spinning on the BlueSky oAuth page, waiting for my server to respond then after a minute, it kicks back an Error 500: Service Unavailable.

I thought maybe it was a lingering Cookie issue, so I cleared all those out, but still no response on the login.

I check the server logs and it comes back with "Login Successful" but never redirects the user to be logged in.

I'm perplexed but tired, it's late so I just shut it down and go to bed. I'll revisit in a few days probably.

{{{vert}}}

Day 12 : Wednesday, April 29th, 2020

Better Late Than Never, Right?

I'm starting this build log off a little bit after I started the project (currently titled Simple Tweets, but probably going to change). I didn't really have the idea to write down the whole process till I was well into an MVP. Either way, better late than never, right? According to GitHub the very first commit was on April 17, 2020, so that makes this Day 12.

My vision for Simple Tweets is a tool you can use to schedule tweets without thinking about it. You decide the max times it will tweet for you per day, whether you want it random or on a schedule, and then scheduling tweets is as simple as typing it out and hitting schedule.

I'm not really sure if this is something BlueSky users really need per se, but it's been a massive learning opportunity for me so far. For now, that's all I really care about.

Design To Prototype

The idea had initially popped into my head a while back (way back in February, now that I looked it up) for a "minimalist tweeter". I wanted something where I could just spam the tweet box without actually spamming BlueSky. I threw together this mockup in Illustrator shortly after having the idea.

Two months go by, and I finally decide to build the thing. I knew I wanted to build the thing with React, and I had dabbled with a project using a MongoDB, Express, React & Node (MERN) stack earlier so that's what I chose for this project.

Time To React

The first thing I threw together was the React frontend. Had a lot of fun just recreating the mockup but with code (honestly my favorite part of any project). I started off with the fixed sidebar, and the tweet box. Used state to set the Tweet character limit, track the tweet as you're typing and validate the current entry.

const validateTweet = (tweet) => {
    let tweetCharCount = tweet.length;
{{{CURRENT IMAGE OF SIMPLE TWEETS}}}
    if (tweetCharCount <= 0) return false;
    if (tweetCharCount > tweetCharLimit) return false;

    return true;
  };

Very simple for now, but essentially checks if the tweet length is greater than 0 and less than 280. After a few days of back and forth, I eventually settled on going with a minimal light theme instead of dark. I'll probably add a toggle for that down the line, but for now I don't really care.

oAuth Is Pretty Cool, Now That I Have A Better Grasp

Since the tool is entirely focused on BlueSky, the only way my users can login is with BlueSky. Makes Sense. That just meant I had to figure out oAuth. It's been a pretty big beast for me that I've yet to attempt to tackle, but now is the time.

The backend is based around Express, and MongoDB. I'm using Passport.js for Authentication and the beautifully put together passport-twitter package to handle the Authentication.

One of the first big roadblocks I ran into was the fact that I had set up a virtual host so that simple-tweets.local would resolve to my localhost:3000, but I was having weird issues with the cookies being set to the wrong domain somewhere in the oAuth loop. Lots of googling and hair ripping later, I reset every path in the project to use http://127.0.0.1 as well as in the BlueSky Developer tools. Once we have it live on a server with a domain pointing to it, we shouldn't have this problem, but now I'll know what to look for.

I'll continue to update this post as the project progresses.

Why I Post On Unsplash

Fri, 14 Feb 2020 00:00:00 GMT

My first Unsplash photo was posted on August 18, 2016. In that time I've accumulated almost 3 Million Views, and over 12,000 downloads across 30+ photos.

This Is Why I Post On Unsplash

For someone with such a small following where most of my interactions across social media are confined to people I know in real life, getting 3 Million Views on anything is AMAZING.

A lot of people complain about Unsplash "ruining the professional photography market", but I say F*ck 'em. If your business is being "ruined" by people offering up photos for free, then you're probably in the wrong line of work.

FREE Does Not Mean BAD

Some of my favorite photos on the internet are freely available on Unsplash. Even NASA is on Unsplash. Hubble Space Telescope photos are freely available for anyone to use for any reason. That is INSANE. Unfortunately they did strip out the EXIF data on the Hubble photos (Camera Type: $4.7 billion Space Telescope, Aperature: f3.4 Meters).

There are some really high quality photos available and the fact that you don't have to pay a dime for them is pretty amazing.

{{{vert}}}

All Ships Rise With The Tide

Unsplash has been doing a lot to push forward the photography industry as a whole. They recently launched Unsplash for Brands which was there way of bringing Branded stock photos to the site. For example, one of the first Brands brought on was Square. The partnership looks like this:

They hire photographers from the Unsplash community to make branded stock photos of their cash register and payment processing products.
These photos then show up on Unsplash for searches like "Cash Register"
Then eventually proliferate out to the greater internet through blog posts and other mediums.
Creating exposure for the brands, revenue for Unsplash, and nice little payday for some Unsplash contributors.

Unsplash gets paid so it can remain free, Brands get their products in front of a massive audience, and they have to hire photographers from the Unsplash community to take the photos. It's a win-win-win for everybody!

Take A Penny, Leave A Penny

I contribute to Unsplash because without it, I wouldn't have been able to use and download 100s of fantastic quality photos for use in both personal and professional projects.

I contribute to Unsplash because without it, there's no way 12,000+ people would have used my photos.

I contribute to Unsplash because without it, my sites and campaigns would be way uglier or I would've spent a fortune on Stock Photos.

I contribute to Unsplash because I use the site almost daily, and it's my way of giving back to the people who gave first.

Check me out on Unsplash, or give me a follow on BlueSky and let me know if you've used on of my photos or hit me with your Unsplash username and I'll give you a follow!

Yarn vs. NPM

Sun, 19 Jan 2020 00:00:00 GMT

NPM (Node Package Manager) and Yarn are both JavaScript based package managers for ease of installing 3rd Party Tools & Libraries into your modern web development workflow. They revolutionized the way people shared code. Instead of having to tediously copy and paste, or even worse, link to a hosted version of the library, now you fetch a library or module and store it locally in your project. Yarn and NPM work fairly similarly, but have a few key differences in how they operate.

Major Differences Between Yarn & NPM

NPM was developed as an open source project in 2009. Yarn was released by Facebook in 2016 as an improvement upon the foundation that NPM laid.
Yarn uses yarn add while NPM uses npm install (Can be confusing when switching between the two.)
Yarn keeps a copy of packages you download stored locally. I'll explain why in a little bit.
Both Yarn and NPM use the package.json file to get the packages to install. However, Yarn uses yarn.lock and NPM uses package-lock.json to more explicitly state which package version to get.

A Breif History of NPM

NPM was originally released back in January 2010 by Isaac Z. Schlueter and took the JavaScript world by storm. It was the inspiration for Yarn, developed by Facebook in 2016, PHP's package manager Composer, and more. Due to the popularity of the project they eventually incorporated as npm, inc in order to manage enterprise level relationships to ensure the success of the project and the JavaScript community as a whole.

Yarn Module Cache

Every time you install a new package with Yarn, it stores a copy of it locally on your computer. This way when multiple projects require the same package, Yarn doesn't have to go download the required package again, it just grabs it off your hard drive and puts it in the project you're installing, saving you time and bandwidth.

Blazing Saddles: Package Manager Boogalo

According to a test done by GitHub user appleboy that you can reproduce yourself, Yarn both with and without it's cache is significantly faster at installing modules, and even installs without internet! (assuming you've cached the package you're installing).

Here are the results of their test comparing NPM to Yarn:

Test	npm install	npm ci	yarn
install without cache (without node_modules)	3m	3m	1m
install with cache (without node_modules)	1m	18s	30s
install with cache (with node_modules)	54s	21s	2s
install without internet (with node_modules)	-	-	2s

Blazing Fast! Even without using a cache, Yarn is 200% faster than NPM.

{{{vert}}}

How To Install Yarn

After doing the research for this post I'm definitely sticking to Yarn for projects moving forward. Here's how you can install Yarn and see for yourself just how fast it is and get started integrating it into your workflow.

Windows

Go to the Yarn Installation Page, make your you have Node.js installed, download the version you want and run the installer. Yarn goes through and installs for you.

macOS

You can install Yarn with HomeBrew:

brew install yarn

Ubuntu / Linux

Go to the Yarn Installation Page and follow the steps. You'll have to add Yarn's repo to APT and then install through there.

NPM - Don't Do This

You can even install Yarn with NPM:

npm install --global yarn

Although, for security reasons that I don't fully understand they recommend NOT installing Yarn through NPM and instead installing Yarn based on your specific operating system (Ubuntu/Debian, Mac, Windows).

Are you going to make the switch?

Let me know on twitter @JackHarner if you do and which package manager you prefer! Thanks for reading!!

Take High-DPI Screenshots In Firefox

Tue, 07 Jan 2020 00:00:00 GMT

There are several ways to take a screenshot in Firefox.

First up you want to Right Click anywhere on the page and select "Take a Screenshot".

This will pop up Firefox's built in screenshot tool. It allows you to select specific elements, just what's visible on the page, or the full page. Highly useful for taking screenshots of specific components or if you just need a quick capture.

Developer Tools

The second way you can take Screenshots in Firefox is through the Developer Tools. The first thing you'll need to do for this one is turn the Screenshot button on in the Settings.

Open the Developer Tools with F12 or Ctrl + Shift + I and click on the three dots in the upper right hand corner.

Once you have the settings open you'll need to enable "Take a screenshot of the entire page" under "Available Toolbox Buttons".

What that does is adds a Camera button to the Developer Tools Toolbox Buttons, next to the settings button you used earlier. Click on it and it will take a Full Page screenshot of whatever page you opened the Developer Tools for. It saves the files in your default Download folder with the current timestamp.

{{{vert}}}

Bust Out The Big Guns

Need to take some massive (>2,000px wide) screenshots?

Well then, It's Console Time!

Hit Ctrl + Shift + K or F12 to open up the Firefox JavaScript Console. Firefox has a decent set of commands that you can run that interact with the Browser itself instead of the webpage. :screenshot is one of them. If you type :screenshot into the console and hit Enter it will take a snapshot of the currently visible viewpoint.

If you want a higher resolution screenshot than your monitor can provide, you need to set the --dpr flag. DPR Stands for Device Pixel Ratio, so setting --dpr 2 tells Firefox to capture the image at 2x the resolution of the viewport (2x your monitor resolution, basically).

:screenshot --dpr 2

Be careful, setting the --dpr flag to anything higher than 3 will generate MASSIVE screenshots and will take a while and a lot of hard drive space.

If you need to screenshot the full page, you just need to add the --fullpage flag.

:screenshot --dpr 2 --fullpage will take a full page screenshot of the current page at 2x the resolution it is displayed at.

Go get them nice & fat portfolio screenshots of your work and send me a link on BlueSky, @JackHarner. I'd love to see what you're working on!

Auto-Generate Content Folders In Gatsby

Sun, 22 Dec 2019 00:00:00 GMT

JackHarner.com is built with Gatsby, a framework based on React that makes blazing fast websites.

I have my Blog and Portfolio content setup as a couple of directories with subdirectories for the individual posts. Like so:

src/
| ...
| content/
  | blog/
    | blog-post/
      | index.md
      | featuredImage.png
      | ...
    | blog-post-2/
      | index.md
      | featuredImage.png
      | ...
    | ...
  | portfolio/
    | ...

Each of the index.md files contains a block of frontmatter dsecribing attributes about the post.

---
date: 2019-12-22T18:23:53.017Z
title: "Auto-Generate Content Folders In Gatsby" 
subtitle: "Preformat Your Frontmatter & More"
featuredImage: "./featuredImage.png"
tags: ['Gatsby', 'Node']
externalLink: ""
published: true
---

All of these folders and files are then parsed at build time to generate the pages and the content throughout the site.

As some of you may know, I'm very lazy, but Lazy in the good way where I don't like doing repetitive tasks more than once or twice. I've automated tons of simple tasks in my day to day at Shoolu. Things like Running Reports, and processing product photos are all now 1-2 click tasks, when they used to take hours out of my day every week.

I wanted starting a new blog post or portfolio piece to be as simple as possible, and with this I've gotten it down to:

npm run newBlog

Let's look at how I did it and how you can speed up a small part of updating your Gatsby site with Node.

Create the Template Directory

Create a new directory in your /src/content/ folder called templates/. Inside your new templates/ directory create a new directory for every post type you want to automate. In my case it will be blog/ and portfolio/.

Now your project should look a little something like this:

src/
| ...
| content/
  | blog/
    | ...
  | portfolio/
    | ...
  | templates/
    | blog/
      | <empty folder>
    | portfolio/
      | <empty folder>

{{{vert}}}

Get Template-ing

This is where you'll need to customize this tutorial to fit with your site and preexisting content. Inside your /src/content/templates/<post-type> directory, create versions of the files you will need every time you create a post. For me, that includes an index.md file with some custom frontmatter, and a featuredImage.png.

Take a look at my templates/blog/index.md:

---
date: $date
title: "$title" 
subtitle: ""
featuredImage: "./featuredImage.png"
tags: ['']
externalLink: ""
published: false
---

Notice the $date and $title variables in the frontmatter. We will be replacing those variables down the line.

My default Featured Image is just a solid pink image to match the branding of the site:

The Featured Image is pretty much always going to be changed down the line. One problem I've run into is that Gatsby, as far as I know, doesn't allow you to set default Frontmatter values. However, having the default allows me to not have to remember "featuredImage.png" when saving the updated image (I can just overwrite the default).

Script All The Things!

Now that we've got our template, we're going to write a Node script that copies the folder and replaces some variables with user input.

We do need a few dependencies so run this command in your projects root folder:

npm i --save-dev readline-sync ncp replace-in-file

readline-sync allows for super simple Node CLI Prompts to take in user input.
ncp is a tool to help Node copy folders recursively.
replace-in-file makes it really easy to substitute values for defined variables in the copied version of the file.

In the root folder for the project, create a new directory called tools/ and in that a new file called newBlog.js

At the top of newBlog.js declare all of the dependencies we'll need:

var readline = require('readline-sync');
var ncp = require('ncp').ncp;
var replace = require('replace-in-file');

Next up is to define some variables we are going to use and take in the User Input for Title & Slug:

var postTitle = readline.question("What is the title? ");
var slug = readline.question("Slug? [Default: '"+ string_to_slug(postTitle) +"'] ", {defaultInput: string_to_slug(postTitle)});
var date = new Date().toISOString();

var sourcePath = "./src/content/templates/blog/";
var destPath = "./src/content/blog/" + slug;

By setting a default value for the Slug allows me to set the slug to something other than the default, if I want to. Otherwise it just sets it to a url-encoded version of the title.

Generating the default slug from the given title is done with the following function:

function string_to_slug(str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();
  
    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
        .replace(/\s+/g, '-') // collapse whitespace and replace by -
        .replace(/-+/g, '-'); // collapse dashes

    return str
}

It takes in a string, removes whitespace, converts non url-encoded characters, and replaces spaces with - dashes. ("What's Up Fool?" -> "whats-up-fool").

Time To Copy

Since everything is set up, it's time to copy the directory. We use ncp which is a Node package to replicate Linux's cp command. It takes in the Source Folder, the Destination Folder, and a Callback as arguments.

ncp(sourcePath, destPath, (err) => {
    if (err) {
      return console.error(err);
    }
    console.log('Done Copying');

    // ... Do Stuff After Copying Is Done
   });

Replace The Template Variables

Remember the $date and $title variables from earlier? Now it's time to swap those out for real values. Using the replace-in-file Node Package makes this super simple.

The replace() function takes in an Options Object and a callback. Here's our Options Object:

var replaceOptions = {
    files:[destPath + "/index.md"],
    from: [/\$title/g, /\$date/g],
    to: [postTitle, date],
}

Define the files to search in, the keys to search for (can be Regex or just a string), & what to replace them with then replace-in-file does all the heavy lifting. If you pass in an array to both from and to it will replace the first key in the from array to the first value in the to array, and so on, allowing you to replace multiple things in one go.

All that's left is to pass in our options and the callback function.

replace(replaceOptions, (error, changedFiles) => {
    if (error) {
      return console.error('Error occurred:', error);
    }
    console.log('Modified files:', changedFiles.join(', '));
  });

Code, Comments, ACTION!

You have two options when it comes to actually running the script.

Just run the script with Node: $ node tools/newBlog.js
Add node tools/newBlog.js to your package.json as a script and run it through NPM (i.e. $ npm run newBlog).

Then enter a title, optionally pick a slug and away we go!

Where To Go From Here?

If you wanted to take this script a few steps further, here are some ideas to get you started.

Duplicate your tools/newBlog.js file for every other post type, modifying as necessary.
Refactor the script to be able to handle any post type you throw at it. readline-sync has a whole lot of options for taking in user input.
Create as much content as possible, and automate as many things as possible.

Hit me up on BlueSky if you implement this script in your Gatsby site! I'd love to hear your suggestions.

If You're Lazy, Here's the full script:

var readline = require('readline-sync');
var ncp = require('ncp').ncp;
var replace = require('replace-in-file');

var postTitle = readline.question("What is the title? ");
var slug = readline.question("Slug? [Default: '"+ string_to_slug(postTitle) +"'] ", {defaultInput: string_to_slug(postTitle)});
var date = new Date().toISOString();

var sourcePath = "./src/content/templates/blog/";
var destPath = "./src/content/blog/" + slug;

var replaceOptions = {
    files:[destPath + "/index.md"],
    from: [/\$title/g, /\$date/g],
    to: [postTitle, date],
} 


ncp(sourcePath, destPath, (err) => {
    if (err) {
      return console.error(err);
    }
    console.log('Done Copying');
    replace(replaceOptions, (error, changedFiles) => {
        if (error) {
          return console.error('Error occurred:', error);
        }
        console.log('Modified files:', changedFiles.join(', '));
      });
   });



function string_to_slug (str) {
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();
  
    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    var to   = "aaaaeeeeiiiioooouuuunc------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
        .replace(/\s+/g, '-') // collapse whitespace and replace by -
        .replace(/-+/g, '-'); // collapse dashes

    return str;
}

BigCommerce Developer Diary

Fri, 22 Nov 2019 00:00:00 GMT

Read My Diary 😉

I was asked to guest post on the BigCommerce Developer blog as part of their Developer Diaries series. The series looks at the general day to day of different people working in the e-commerce/BigCommerce space. I provided a look at my week working at Shoolu and all the various things I do (and all the coffee I drink).

Thanks Karen and Laruen for inviting me on!

Getting Started With DigitalOcean

Wed, 20 Nov 2019 00:00:00 GMT

DigitalOcean is a cloud infrastructure company based in New York City. They have blazing fast data centers all over the world and are my personal favorite hosting provider. I point all of my clients there and anytime I need a server or any kind of hosting, DigitalOcean is where I go. Spin up servers in a couple of clicks and you're on your way!

Today I'm going to go over how to get your DigitalOcean account setup, create a team, and grant me access to get your site setup.

On the off chance that you got here through Google or elsewhere and you're not already a client of mine, please Get In Touch. I will gladly help you get something hosted on DigitalOcean.

Setting Up Your DigitalOcean Account

Click the button above (or Here) to get started signing up for DigitalOcean.

Enter in your name, your email, and choose a strong Password. Then click on "Sign up with email".

Alternatively you can sign up with Google, or use an existing GitHub account.

Verify Your Email

They should send you an email with a link. Open it and click on the link to verify your email.

Add A Payment Method

Next you're presented with the option of adding a Credit/Debit card, or connecting a PayPal account.

Pick Your Poison and follow the prompts to connect your payment method.

After you're done adding a payment method it takes you to a screen to help you get your first thing setup. Ignore this for now, and just click on "Explore Our Control Panel".

{{{vert}}}

Creating A Team

DigitalOcean comes with the ability to create Teams. Teams allow you to share Droplets, Domains, Images, Volumes and pretty much everything else with multiple people, all while keeping the payment info stored securely in the owner's account.

Let's Just Jump Into It.

In the upper right hand corner of the page, click on your little profile picture (or whatever default icon you got).

Click on "Create A Team".

It's All In The Name

Type in your team name and either change or verify the "Team Contact Email". That email is where all the team related billing and alert emails will go.

Selecting "Convert ____ Into A Team" will move over any existing Droplets, or other DigitalOcean products to the new team. If you're starting with a fresh DigitalOcean account, this is fine.

Don't select this if you have existing Droplets you want to keep separate from the new Team.

If you'd like to require all users on the team to use 2FA or some other form of secure login, check the box under "Secure Login". (You have to setup 2FA on your own account before you're allowed to require it for the team).

Click on "Create Team"

Dolla Dolla Bills Y'all

On the next page select (or add) your preferred Payment Method for the Team. This payment method will be used for all charges accrued on the team, but members of the team will NOT have access to your payment info.

Invite Time

The next page is where you can invite everyone you want to give access. Enter in 1 Email per line. Those emails will get an invite to either create a DigitalOcean account, or connect an existing one to the team.

If you were sent this so I can get your hosting account setup for you, please invite hello@jackharner.com as a team member.

REMEMBER - Anybody you invite to your team can spin up and destroy servers or anything in the account. Be careful who you give access.

That's All Folks

Now that you've given me access, just sit back and relax and I'll get the rest of your account setup per our discussions.

If you're not one of my clients and you need help getting something hosted online, Get In Touch and I'll gladly get you setup and hosted with DigitalOcean.

I've Forked The Repo, Now What?

Sat, 02 Nov 2019 00:00:00 GMT

So, you want to make some changes to an Open Source Repo? Good for you. That's the beauty of Open Source, even just fixing typos in the documentation makes a difference. Today I'm going to walk you through keeping your copy of a repo up to date with changes pushed to the original repo.

This tutorial assumes:

You have a basic understanding of git
You have a forked repo
The original repo has changes that you want in your forked repo

Setting Up The Remote

The first thing you want to do is add the Original Repo as a remote of your Forked Repo. From the command line you want to move into your project directory and add the Original Repo's clone URL as the upstream remote.

cd {{project_name}}
git remote add upstream {{original_repo_url}}

The Repo URL can be found on the Repo page on Github. Click on the Clone or download button and make sure it says "Clone with HTTPS" since you don't have write access to the Original Repo.

You can verify your remotes with:

git remote -v

which should output:

origin	git@github.com:{{you}}/{{project_name}}.git (fetch)
origin	git@github.com:{{you}}/{{project_name}}.git (push)
upstream	https://github.com/{{owner}}/{{project_name}}.git (fetch)
upstream	https://github.com/{{owner}}/{{project_name}}.git (push)

{{{vert}}}

Go Get That Code!

Now that we've associated our Original Repo with our local Forked Repo, it's time to go get the new code.

git fetch upstream

Running git fetch gets the changes to the remote repo without changing any of the files in your local version. It essentially lets you see what everyone else has done to the code without making any changes to yours. You should see it pull down a bunch of different branches, tags, and some file changes.

To apply the new changes to your repo make sure you're on the branch you want to pull in (in our case master):

git checkout master

and then pull the matching branch from the upstream remote:

git pull upstream master

It will asks you for a message for the merge commit. You can usually just leave the default and just save with CTRL + X. Git finishes up the merge commit, and your Local Repo is now up to date with the Original.

Seal The Deal

Finish off your changes by pushing them back up to your Forked Repo's origin remote that you have write access to.

git push origin master

Ta da! You just refreshed your forked repo. Make, test, commit and push your changes and you'll be all set to create a pull request back to the Original Repo. You're ready to start changing the world of Open Source Software one pull request at a time!

Sick Console Bro! How To Style Your console.log with CSS

Thu, 13 Jun 2019 00:00:00 GMT

Photo by Glenn Carstens-Peters on Unsplash

In Chrome and Firefox (>31) you can add CSS styles to your console.log() messages. It's fairly simple and straightforward.

All you need to do is include a %c string before your log message and then pass your CSS as a parameter to the console.log( ) function. Like so:

console.log("%c{{Log Message}}", "{{CSS}}");

For example, this code runs on my portfolio:

console.log("%cHarner Designs", "color:#233E82; font-family:'Ubuntu'; display: block;font-weight:bold; font-size:48px; background:#fff;");
    console.log("%cLike to dig into the meaty bits of the website?\nThanks for looking! Hit us up on BlueSky @harnerdesigns!", "color:#222; font-family:'Ubuntu'; font-weight:100; font-size:24px; background:#fff;");
    console.log("%cDid you know you can style your console output?!", "color:#333; font-family:'Ubuntu'; font-weight:100; font-size:18px; background:#fff;");
    console.log("%cCheck our blog to learn how: https://harnerdesigns.com/blog/style-your-console-log-with-css/", "line-height: 3em; padding: 0.5em; text-align: center; border: 1px dotted #aaa; background:#fff; font-size: 14px;");

and outputs like this to the console:

{{{vert}}}

Styling Multiple Strings In One Log

It's also possible to include multiple strings in one command and style them differently. Check it out:

console.log("%cString1" + "%cString2", "{{CSS for String1}}", "{{CSS for String2}}");

Reusing Styles Across Log Messages

You can also store the CSS You want to apply to a variable and then pass that to multiple console.logs:

var consoleStyle = "{{Reusable CSS}}";
console.log("%cString1", consoleStyle);
console.log("%cString2", consoleStyle);

Conclusion

Do you leave any little easter eggs in your console? Could you see a use case for this in your own projects? I'd love to know down in the comments! Show me some examples of cool things you've found in console messages.

Add Logout Link To Account Menu - BigCommerce For WordPress

Thu, 18 Apr 2019 00:00:00 GMT

BigCommerce for WordPress (BC4WP) allows you to combine the power of the BigCommerce back-end with the customization of WordPress on the front-end for a truly unique E-Commerce experience.

One thing that seems missing out of their integration is a logout link on the My Account page:

It seemed like an easy fix and since I've started to dabble in making pull requests to Open Source Software, I decided to take a look. The "SubNav" as they've called it is populated in bigcommerce-for-wordpress/src/BigCommerce/Accounts/Sub_Nav.php. It uses get_option to pull the stored Account, Orders, & Address pages and populates the $links[] array with the associated data.

Easy.

Just append the logout information to the $links[] array with wp_logout_url() and the logout link will appear in the my accounts page.

And thus, my first Pull Request to the BC4WP repo was born.

Shot Down Like A High Schooler Before Prom

My PR was rejected citing that logging out of WordPress was "Out of Scope" of the BigCommerce for WordPress plugin. However, Jonathan of Modern Tribe (the plugin developers) pointed out that there is a filter already applied to the links generated so that Site Admins can add anything they wish to that list of links: bigcommerce/account/subnav/links.

So..? How Do You Do It?

If you're like me and want to add the logout link to the BigCommerce for WordPress Account Page Submenu, just add the following code to your theme's functions.php file:

add_filter('bigcommerce/account/subnav/links', function ($links) {
 $links[] = [
  'url'     =&gt; wp_logout_url(),
  'label'   =&gt; __('Logout', 'bigcommerce'),
  'current' =&gt; false,
 ];
 return $links;
}, 10, 1);

And that's it! Now there will be a convenient to use Logout Link on the "My Account" page with BigCommerce for WordPress.

How To Measure Angles In Illustrator

Fri, 22 Mar 2019 00:00:00 GMT

Sometimes you need to be exact in your designs. I'm definitely a little bit of a perfectionist when it comes to things like that. Maybe you need to align the rotation of something to the edge of another object. You could just eyeball it, but that's hella time consuming and frustrating because you know you're never going to be able to get it just right.

Let the computer do the heavy lifting and let's learn how to measure angles in Illustrator.

Ruler To The Rescue!

First thing you'll need to do is find the Ruler tool. It's located underneath the Eyedropper tool in the left-hand menu. Click and hold the Eyedropper button and then without letting go of your mouse slide over to the Ruler menu item that pops up to select the ruler.

{{{vert}}}

Open The Info Window If It Didn't Pop Up

With the Ruler selected, click anywhere on the artboard and the Info window should pop up. If it doesn't, go to Window > Info or Ctrl + F8 to bring it up.

Now either click on two points, or click and drag a line between two points and the Info box will update with the angle of the segment you just drew, as well as info about Width/Height and the X/Y Positions.

Use Your New Found Knowledge For Good

After pulling the angle from the Info box with the Ruler, we can use our -19.92° angle to rotate our elements so they line up. Save yourself hours of frustration trying to get elements to line up by just measuring.

You know what they say:

Measure Twice. Save yourself hours of frustration trying to get elements to line up by just measuring.

I'm not sure anyone actually says that, but you get my point. Happy Protracting!

WordPress Crop Image Button Grayed Out

Mon, 17 Dec 2018 00:00:00 GMT

You probably found this post because you're trying to crop images in WordPress' Media Library Image Editor. The button's greyed out right from the start. Oh No! How Do I Crop images with WordPress?

It's Real Simple.

You just have to click and drag on the image, the area you want to crop. Once you let go of the mouse the button becomes clickable again. Yay!

After you make your first try at selecting, you can lock the aspect ratio with the fields over to the right hand side. Select the area you want cropped and click the Crop Button (now that you can).

Make sure to hit save and enjoy your newly cropped photos!

Upload SVG Files To WordPress

Wed, 28 Nov 2018 00:00:00 GMT

Allowing SVG Files in WordPress so you can upload them through the Media panel is surprisingly simple. This allows you to harness the power and speed benefits of SVG Files as opposed to Raster Images.

Either add the following snippet to your theme's functions.php file or create a WordPress plugin that executes the following code:

function harnerdesigns_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'harnerdesigns_mime_types');

There are security concerns to allowing SVG files to be uploaded, so make sure that only trusted contributors have access to uploading.

Pushing WordPress Theme Updates With Git

Tue, 11 Sep 2018 00:00:00 GMT

Do you frequently update WordPress themes? It's kind of a pain in the ass, right? Typically has to be done manually through FTP or uploading a new zip through the backend.

Well, today I'm going to show you how to update your site with just:

$ git push live

Sounds to good to be true? It's not. Check it out:

Prerequisites

SSH Access to your web server
Git installed on your local machine and on your web server

This setup works best for one off customs themes (like the one on HarnerDesigns.com) and not for themes produced to be distributed.

Create Your Repo Locally

First things first, create a folder for your project and enter it:

$ mkdir git-test &amp;&amp; cd git-test

then initialize the repo:

$ git init

Alternatively, you can just clone my Blank2 - Blank WordPress Theme repo to get started:

$ git clone https://github.com/harnerdesigns/blank2.git git-test

Create A Bare Repo On The Remote Server

A bare repo is a directory containing the working tree of your git project, just without storing all the files. It's essentially just a directory of all the files noramlly in your .git directory.

SSH into your server:

$ ssh &lt;user&gt;@&lt;server&gt;:&lt;sshPort&gt;

Create a folder for the bare repo and enter it:

&lt;user&gt;@&lt;server&gt; $ mkdir git-test.git &amp;&amp; cd git-test.git

Remember where on the server you created this directory, you'll need that later (Doing it in your home directory works perfectly fine).

Initialize the bare repo:

&lt;user&gt;@&lt;server&gt; $ git init --bare

[ad]

Hook It Up

Your shiny new bare git repo has a directory hooks and in it are a bunch of .sample files. We want to do something after the repo receives new data, so create a new file called post-receive (no extension) and add the following to it:

#!/bin/bash
GIT_WORK_TREE=&lt;pathToWordPressInstall&gt;/wp-content/themes/git-test git checkout -f

What this will do is, any time you push to this git repo, set the working tree for the repo to the theme folder in your WordPress install and then force checkout the files.

Back Down From The "Cloud"

Now logout of your remote server. It's time to add the new repo as a remote for your local one.

Make sure you're in your project's folder:

$ git remote add live ssh://&lt;server&gt;/home/&lt;user&gt;/git-test.git

and that's it! All you need to do to update your live theme now is add some files, commit them like normal and then run:

$ git push live

Being able to Update WordPress sites quickly allows for quicker bug fixes and less time spent wrangling files. Combine this idea with a taskrunner like Gulp and you'll be flying through updates.

Let me know if you use this method or if you have any other ways to manage WordPress Themes!

Pointing A Domain to The Newest File In A Directory

Fri, 17 Aug 2018 00:00:00 GMT

I wrote a python script for Shoolu.com to use the BigCommerce API to pull the latest added products and generate an XML RSS file. BigCommerce did have the functionality to automatically generate these RSS feeds but they have moonlighted support and have removed it for new merchants so it didn't seem like something to rely on.

PYTHON To The Rescue

I found the BigCommerce Python API and used that to fetch all the products with a created date of at most 7 days ago. I then looped through all those products to create the nessecary items in the RSS File.

This worked well and good but I was basically just overwriting the one file and losing any previous weeks worth of New Products. I knew it would be easy enough to just write to a different file with the current date in the file name so it'd be new every time.

Trouble In Paradise

The plan was to use this RSS feed to generate a "What's new at Shoolu" email every week through MailChimp and their ability to work with RSS Feeds. The problem with the current approach of dating the files was that I was pointing Mailchimp at the one direct file so I'd have to update it every week which kind of defeats the purpose of all of this.

{{{vert}}}

An Unexpected Solution

I tried digging around for a way to have a root domain (rss.shoolu.com) point to the latest file in the directory. There were several suggestions including using php to fetch the latest file and redirecting and some other less than elegant solutions.

None of them really tickled me the way a good solution does.

I finally decided to just update the python script to just output index.xml as well as latestProducts-[date].xml. That way index.xml would get overwritten with the currently accurate info and we'd also get the dated backups to log.

Then for simplicities sake I just updated the Apache Virtual Host file for the domain:

<Directory /var/www/rss/public/>
    ...
    DirectoryIndex index.xml
</Directory>

So the root domain would point directly to the file. Might not be the most elegant solution, but it works in this specific case so I'd figured I'd document it.

Custom Post Type Archives Not Showing Up In WordPress Menus

Sat, 28 Apr 2018 00:00:00 GMT

Need to add Custom Post Type Archives to a WordPress menu but they're not showing up? I tore my hair out for a good while before finding the answer. For some reason, most of my custom post types were showing up just fine, but some weren't. The answer is surprisingly simple and shouldn't have taken me as long to figure out as it did.

Make Sure The Archive Is Turned On

You can't add a CPT Archive to a menu if that archive doesn't exist. Make sure in your functions.php file that you include the following code when creating the post type:

register_post_type(
    'example', 
    array('has_archive' =&gt; true, 
        [other args]
    )
);

Check Under The "View All" Tab

Once you made sure that the archive is on, check under the View All tab for the custom post type. It should just be the plural name of your custom post type, but it could be different depending on the settings in your register_post_type() function.

Check The Screen Options

If your custom post type isn't showing up at all on the Menu page, check the Screen Options. For some reason, new CPTs can possibly be unchecked and thus, not show up at all on the Menu page. Make sure everything is checked in the box and you should be all set!

Conclusion. Working Custom Post Type Archives

And That's It! You should be able to add the Custom Post Type Archives to the menus in WordPress now. Let me know in the comments down below if you have any questions! Be sure to check out the rest of our WordPress Tutorials.

Using Flex Box For Responsive Design

Mon, 20 Jun 2016 00:00:00 GMT

Flex Box is Pretty Awesome

Today I’m going to show you how to use Flex Box to create a row of buttons that turns into a responsive list of links with just CSS. This technique can be useful for having multiple large calls to action. Keep reading to learn what’s going on in the code, or just jump to the bottom for the source code, it’s up to you.

Basic HTML

We’ll start off with some initial markup:

<container>
    <div class="button">
        <p>Classes</p>
    </div>
    <div class="button">
        <p>Instructors</p>
    </div>
    <div class="button">
        <p>Sign&nbsp;Up</p>
    </div>
</container>

Desktop CSS

Then we’ll add some CSS to make the Desktop version:

container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%;
    flex-wrap: wrap;
}

.button {
    background: rgba(255, 255, 255, 1);
    width: 15%;
    text-align: center;
    height: auto;
}

What this does is makes the container the Flex Box for all the buttons. We can then use all of the flex box properties to adjust how the buttons display. For more info on flex box and what you can do with it, check out CSS-Trick’s Comprehensive Guide.

Mobile CSS

Now for the magic. By adding the cards and the container to the mobile media query we can then manipulate the flex-direction property. As you can guess, flex direction adjusts which way the items will flow inside the container. By setting the container to flex-direction: column, and the cards to flex-direction:row; we can layout the buttons in a much more mobile friendly way.

@media screen and (max-width: 900px) {
  container {
    flex-direction: column;
  }

  .button {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.5em;
  }
  .button p {
    padding: 0 0.5em;
  }

}

That's it! With a little flex box magic and a single media query you can easily have a row of buttons for your users with more screen real estate, and a column for those on their phones and small tablets.

See the Pen ROW TO COLUMN by Jack Harner (@jackharner) on CodePen.

Coffee Shops Cultivate Creativity

Thu, 27 Aug 2015 00:00:00 GMT

Every day we struggle as creatives to find that spark to ignite the creativity inside.

I'm currently sitting in a Satellite Coffee just north of UNM while I wait for my girlfriend to get out of class and for some reason I feel compelled to write. I've been meaning to start this blog for a while. I'm not entirely sure what it's going to become, but hopefully it'll be something.

While I sit here, sipping on my White Chocolate Mocha, the sounds of long lost friends reuniting dance across my ears. Most of this specific coffee shop's clientele are health care workers, which makes sense seeing as it's right next to the hospital. There's a paramedic, at lest 2 nurses, a doctor who stopped in for a "Greenie Breakfast Panini", and several administration workers.

I'm not sure what it is, but simply being here is boosting my productivity and my creativity. Maybe it's the smell of the coffee, or maybe it's the fact that I'm not home. Either way, I feel like I've been stuck in a bit of a rut lately and spending more time enjoying delicious coffee is the boost I need to get my creative juices flowing.

Jack Harner's Web Dev Blog

Starting A Freelance Developer Bluesky Feed

Getting Started

Determining If A Post is Related to the Feed Topic

Refining the Algorithm

Negative Points

No More Stacking Points

AllowList and BlockList Authors

What's Next?

How To Auto-Open Multiple Terminals In A VS Code Workspace

Installing Git & Cloning Your First Repo

Getting Started with Git: Installing and Cloning Repositories from GitHub

Git Newbie Glossary

Step 1: Installing Git

Windows

Download Git:

Install Git:

macOS

Using Homebrew (recommended):

Using the installer:

Linux

Debian/Ubuntu-based distributions:

Fedora-based distributions:

Step 2: Configuring Git

Step 3: Cloning a Repository

Step 4: Switching Branches

In Conclusion

Git Commands Cheat Sheet

Working On A BigCommerce Custom Checkout Locally

Stencil-CLI Meets Open Source Checkout

A Few Simple Modifications To The Checkout.html

Now You're Working On The BC Checkout Locally

Credits

Pausing CSS Animations on Hover

It All Starts With A CSS Animation

Treat Your Users Like Stormtroopers - Avoid Moving Targets

Stop Moving Things That Don't Need To Move

Function get_page_by_title is deprecated since version 6.2.0! Use WP_Query instead.

What happened to get_page_by_title()

How To Get a Page by Title with WP_Query

Let's Go Over The Code

Make Your Own get_page_by_title() function

How to Run GitHub Actions on a Schedule

What is Cron?

Defining the Cron Schedule

Scheduling your GitHub Action

Heads Up, The Timing Isn't Going To Be Exact

What Is Ghost Coding?

What IS Ghost Coding?

Benefits of Ghost Coding

No Pesky Sales Process

Stabilize The Workload (+ The Pay)

Less Paperwork For The Same Amount Of Programming

Downsides to Ghost Coding

The Final Product Ain't Yours

They're Not Your Clients

Juggling More Requires More Concentration

Less Diversification

How To Get Started Ghost Coding

Have A Fleshed Out Portfolio

Never Shut Up About The Fact That You Program For A Living

Just Ask

Start Ghost Coding Today!

Who Has The Best Transactional Emails Free Tier?

First, what are transactional emails?

SendGrid

Brevo

SMTP.com

Mailchimp

Sendlayer

Conclusion

Use It Or Lose It: Gratitude Edition

SmartBlocks in Roam Research

A random block from my "Damn you ARE actually good at what you do" page.

A Gratitude Check

Today's TODOs

Overdue TODOs

Some Random Undated TODOs

Intentionally Practicing Gratitude

Freelancing & Traveling

`index.php`

`style.css`

`functions.php`

`header.php`

`footer.php`

`sidebar.php`

`search.php`

`single.php`

`comments.php`

`page.php`

`attachment.php`

`image.php`, `jpg.php`, `video.php`

`archive.php`

`category.php`

`tag.php`

`taxonomy.php`

`author.php`

`date.php`

`front-page.php` & `home.php`

`404.php`