While I do enjoy the idea of a decentralized web — I doubt that it will truly be "decentralized" as massive whales, corporations, and governments move in to invest their wealth for a stake in the game and begin lobbying and regulating.

Coinbase and OpenSea are examples where crypto and NFTs are traded in a centralized space which is counter-culture to the whole decentralized movement — right?

We should also recognize that their success comes from a very old business model that works and panders to society.

Convenience.

As long as societies are willing to "pay" for convenience, we will continue to give our data freely to social media platforms, purchase food from a drive-thru, have companies monitoring sound and visuals inside our homes, and allow institutions to do so centralize our wealth.

Web3 wants to change that — but it comes with a price.

Mining crypto is a critical part of the process that requires computers to solve complex problems, which can consume an unbelievable amount of energy when you scale it across the globe to billions of people.

As the value of any crypto rises, more and more people are incentivized to become miners. And because the difficulty of solving each cryptographic problem grows with the network, more and more energy is then used by miners.

Bitcoin's carbon footprint is bigger than that of many countries.

The argument could be made that Bitcoin is our biggest offender and that it's inefficient when it comes to mining— however — a more efficient crypto that consumes less energy can still be harmful — at scale and over time.

Here are a few other examples of how crypto can be bad for our environment.

Currently, a single Ethereum transaction consumes as much electricity as an average U.S. household uses in a workweek — and has a carbon footprint equivalent to 140,893 Visa credit card transactions or 10,595 hours of watching YouTube.

While the above examples focus specifically on Bitcoin and Ethereum — any other crypto at scale is capable of doing better or worse — but they will require mining and energy consumption at the end of the day.

All of that said — Web3 is not bad.

While centralization and energy consumption appear to be unavoidable looming clouds over the Web3 — that's where I see an incredible opportunity for us to solve these problems.

Just remember — it has to be convenient.

So — I've decided to break down each piece of audio gear that I use and its purpose so anyone interested will have a jumping-off point, and it'll save me from having to make this list again.

Gear outline

• Camera - Blackmagic Cinema Camera 6K
• Lens - 24mm T1.5 Rokinon Cinema Lenses
• Lighting - Elgato Key Lights
• Microphone - Shure SM7B
• Audio interface - Focusrite Scarlett 2i2
• Signal booster - Cloudlifter
• Mic stand - Suspension Boom Stand
• Audio cables - LyxPro XLR Microphone Cable (3 feet & 1.5 feet)
• Controller - Stream Deck Mini

Camera - Blackmagic Cinema Camera 6K

This piece of gear may arguably be overkill for Zoom calls and live streaming — but it comes in clutch for recorded content that you plan to publish on YouTube or Vimeo.

It's also one of the things that people comment on the most during a Zoom call, so there's something to be said about the video quality this puts out. If you're balling on a budget, though, there's no shame in spending less and going with another DSLR just as long as it shoots video and is capable of remaining on for long periods.

I'm not going to get all geeked out about this fantastic camera because that can be an article of its own — and you'll find later in this article that your lens and lighting are just as critical as the camera body.

Blackmagic Pocket Cinema Camera 6K

Lens - 24mm T1.5 Rokinon Cinema Lens

One of the most budget-friendly cinema lenses on the market — Rokinon prime lenses produce fantastic images and are capable of letting in tons of light with a t-stop of 1.5.

I love these lenses because they do not have autofocus, so whatever focal length I set, it stays, which is ideal in a controlled setting. You might find this ideal too, so that every time you sit down in front of the computer — you're set and ready to go.

When I purchased these lenses about 8 years ago — the cost was half of what they are today. It comes as no shock that they doubled in price since they are a great piece of gear that lasts a long time.

I'm not recommending that you go and grab these lenses, but I luckily still had mine from my early cinematography days.

If the price is too steep — start with any glass and upgrade later, or if you can find a camera body lens combo, that should do you just fine.

Rokinon Cine DS DS24M-C 24mm T1.5 ED AS IF UMC Full Frame Cine Wide Angle Lens for Canon EF

Video Interface - Cam Link 4k

Piping your video signal into your computer is not as straightforward as you might think. At first, I purchased a cheap HDMI adapter, but sadly, the video signal did not show as an option under the video settings in Zoom, QuickTime, or OBS.

Then I found the Elgato Cam Link, and it was plug-and-play right out of the box.

Lighting - Elgato Key Lights

Ok — so you've got the camera and the lens, and you turn it on, only to find out that the image it produces is too dim, and when you crank up the shutter or ISO on the camera, it becomes too grainy.

That's because you need to light yourself with a proper amount of foreground lighting — and for that, I use the Elgato Key Lights by Corsair.

I like these lights because they come with c-clamps and telescopic poles that allow me to mount them directly to the desk and extend them above my monitor to light the entire scene properly.

You could honestly go gorilla hear and grab two lamps from around the house and place them in front of you, and it'll work — but the light it produces will not only be harsh on your eyes but will also be difficult to distribute the light evenly across the scene.

The Elgato Key Lights come with a diffuser, and when you raise them above your head, they become out of sight and much easier on the eyes.

The only thing I don't like about these lights is how they can sometimes "disappear" since they rely on wireless connectivity to control brightness and color, but with some of their most recent firmware updates — I see less of that happening now.

Elgato Key Light, Professional Studio LED Panel With 2800 Lumens, Color Adjustable, App-Enabled, for Mac/Windows/iPhone/Android, Metal Desk Mount Copy

Microphone - Shure SM7B

Video is important — but I would argue that audio is more important since it's a medium that can be used without video. In my setup, I'm using the Shure SM7B, which, hands down, is a fantastic piece of hardware that'll be around for a very long time.

This is an absolute beast, and it exceeded all of my expectations when I first received it and tested it against some of my other microphones.

You will find that the Shure SM7B is tried and true microphone in every industry, including music, radio, and podcast.

Shure SM7B Dynamic Smooth Vocal Microphone for Radio/TV/Podcast Appllications

Audio interface - Focusrite Scarlett 2i2

There's a ton of audio interfaces to choose from out there, but around the time I settled on the Focusrite Scarlett 2i2, it had the best price point for the features that it offers.

Let's not kid ourselves though, once you plugin this thing in and dial in your settings — it just sits there on your desk and becomes a forgotten piece of equipment, which is fine because it serves its purpose.

That said, this is a required part of the setup because without it, well, you won't be able to pipe audio into your computer.

Focusrite Scarlett 2i2 (3rd Gen) USB Audio Interface with Pro Tools

Signal booster - Cloudlifter

I noticed that the gain had to be cranked to hear anything coming from the Scarlet 2i2.

Even then, it was low.

This is no fault or flaw of the equipment; in fact, it's the Shure SM7B that requires a signal boost before it gets to the Scarlet 2i2. This way, when the Scarlet interface receives the signal, it's closer to a "normal" signal, and you should be able to dial back the gain quite a bit.

Cloud Microphones Cloudlifter CL-1 Mic Activator

Mic stand - Suspension Boom Stand

There are a few different flavors when it comes to mic stands. You could go with a base that sits on your desk, or you could free up space by going with a suspension book stand.

I went with the latter because it allows me to pull it near me when I need it and push it out of the way when I'm done with it — all while keeping the clutter clear and free from the desk.

InnoGear Mic Stand, Heavy Duty Microphone Stand with Microphone Windscreen and Dual Layered Mic Pop Filter Suspension Boom Scissor Arm Stands

Audio cables - LyxPro XLR Microphone Cable (3 feet & 1.5 feet)

XLR cables are a dime a dozen with tons of brands and types. You do not need an expensive or fancy XLR cable, but if you want to add extra flair, LyxPro has cables that come in all sorts of colors.

I went with black, which matches my other equipment and helps keep things hidden at the back of my desk.

The 3-foot cable goes from the mic to the Cloudlifter, while the 1.5-foot cable goes from the Cloudlifter to the Scarlet interface.

LyxPro 3 Feet XLR Microphone Cable Balanced Male to Female 3 Pin Mic Cord for Powered Speakers Audio Interface Professional Pro Audio Performance and Recording Devices - Black

LyxPro 1.5 Feet Right Angle XLR Female to Male 3 Pin Mic Cord for Powered Speakers Audio Interface Professional Pro Audio Performance Camcorders DSLR Video Cameras and Recording Devices - Black

Controller - Stream Deck Mini

The Stream Deck Mini is optional but nice to have. It allows me to toggle both of my lights on and off — and also gives me the option to preset brightness, color temps, and opportunities to create additional "paged" presets that I can cycle through.

Elgato Stream Deck Mini - Compact Live Production Controller with 6 Customizable LCD keys, Trigger Actions in OBS Studio, Streamlabs, Twitch, YouTube and More (10GAI9901), Black, 6 Keys

Wrapping up

So there you have it — this is my professional A/V setup that works for anything from online meetings to podcasts and video recordings.

I found this to be one of the best investments I've ever made.

This article will dive in much deeper and learn how to create a plugin and prepare it to release in the world for production-ready sites.

Fair warning

Unlike some of my other posts, this one will get a bit deeper into the technical weeds by exploring WordPress plugin development writing object-oriented PHP.

The good news is, there's a pretty sweet generator that creates a nice baseline for you. The challenging news is that you need to be familiar with OOP or object-oriented programming to understand what the hell is going on.

It can get a bit overwhelming, but if you stick with it — it'll make sense in the end.

The scope

We're going to keep this scope pretty narrow since there's going to be a lot to cover by creating a plugin that will add a new "Movie" custom post type to the backend of WordPress.

Let's build!

Here's an outline of what we will need to do:

• Generate the plugin boilerplate
• Update the plugin description
• Add our custom post type code
• Register our custom post type using a hook

Generate the plugin boilerplate

There's a nifty and swifty plugin generator called, you guessed it, WordPress plugin boilerplate generator.

Head over to https://wppb.me/ and fill out the following:

• Plugin Name - Movies
• Plugin Slug - movies
• Plugin URL - https://millertchris.com
• Author Name - Chris Miller
• Author Email - @millertchris
• Author URL - https://millertchris.com

It would be ideal if there's a dedicated landing page for the plugin, but I'm using my personal domain as a placeholder in the example above.

Once you have all of that filled out, click "Build Plugin," and it'll download a .zip file with the name of your plugin.

Update the plugin description

Go ahead and unzip the .zip file and open the folder in your preferred code editor.

The first thing we are going to do is open the movies.php file and edit the description to read "Adds a new post type called movies."

When you're done, the top of the file should look something like this.

<?php

/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the plugin
 * admin area. This file also includes all of the dependencies used by the plugin,
 * registers the activation and deactivation functions and defines a function
 * that starts the plugin.
 *
 * @link              http://millertchris.com
 * @since             1.0.0
 * @package           Movies
 *
 * @wordpress-plugin
 * Plugin Name:       Movies
 * Plugin URI:        http://millertchris.com
 * Description:       Adds a new post type called movies.
 * Version:           1.0.0
 * Author:            Chris Miller
 * Author URI:        http://millertchris.com
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       movies
 * Domain Path:       /languages
 */

Once that's done, we should see it reflected in the backend of WordPress when we navigate to the plugins page.

Add our custom post type code

Next, let's navigate the public folder and open the class-movies-public.php file to create our custom post type by repurposing an existing function.

Don't worry; some of these functions are there as placeholders, so it's totally fine that we are refactoring ourselves.

Let's go with the last one called public function enqueue_scripts() on line 85.

Start by deleting lines 87 through 99 and renaming the function to register_movies().

When you're done, it should look something like this:

public function register_movies() {

}

Now we can grab the code from the previous article and paste it into this function.

  $labels = array(
    'name'                  => _x('Movies', 'Post Type General Name', 'text_domain'),
    'singular_name'         => _x('Movie', 'Post Type Singular Name', 'text_domain'),
    'menu_name'             => __('Movies', 'text_domain'),
    'name_admin_bar'        => __('Movie', 'text_domain'),
    'archives'              => __('Item Archives', 'text_domain'),
    'attributes'            => __('Item Attributes', 'text_domain'),
    'parent_item_colon'     => __('Parent Item:', 'text_domain'),
    'all_items'             => __('All Items', 'text_domain'),
    'add_new_item'          => __('Add New Item', 'text_domain'),
    'add_new'               => __('Add New', 'text_domain'),
    'new_item'              => __('New Item', 'text_domain'),
    'edit_item'             => __('Edit Item', 'text_domain'),
    'update_item'           => __('Update Item', 'text_domain'),
    'view_item'             => __('View Item', 'text_domain'),
    'view_items'            => __('View Items', 'text_domain'),
    'search_items'          => __('Search Item', 'text_domain'),
    'not_found'             => __('Not found', 'text_domain'),
    'not_found_in_trash'    => __('Not found in Trash', 'text_domain'),
    'featured_image'        => __('Featured Image', 'text_domain'),
    'set_featured_image'    => __('Set featured image', 'text_domain'),
    'remove_featured_image' => __('Remove featured image', 'text_domain'),
    'use_featured_image'    => __('Use as featured image', 'text_domain'),
    'insert_into_item'      => __('Insert into item', 'text_domain'),
    'uploaded_to_this_item' => __('Uploaded to this item', 'text_domain'),
    'items_list'            => __('Items list', 'text_domain'),
    'items_list_navigation' => __('Items list navigation', 'text_domain'),
    'filter_items_list'     => __('Filter items list', 'text_domain'),
  );
  $args = array(
    'label'                 => __('Movie', 'text_domain'),
    'description'           => __('Movie Description', 'text_domain'),
    'labels'                => $labels,
    'supports'              => false,
    'taxonomies'            => array('category', 'post_tag'),
    'hierarchical'          => false,
    'public'                => true,
    'show_ui'               => true,
    'show_in_menu'          => true,
    'menu_position'         => 5,
    'show_in_admin_bar'     => true,
    'show_in_nav_menus'     => true,
    'can_export'            => true,
    'has_archive'           => true,
    'exclude_from_search'   => false,
    'publicly_queryable'    => true,
    'capability_type'       => 'page',
  );
  register_post_type('movie', $args);

Notice how we left out the add_action hook and the wrapping function from our previous code example in the previous article. That's because the add_action hooks will be used in a separate file, and our wrapping function is not needed since we are placing all of our code into the newly defined function.

Register our custom post type using a hooked

We are almost done — the last thing we need to do is navigate to the includes folder and edit our class-movies.php file.

On line 174, you will notice the following code:

$this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' );

This is referencing the file and the function we were editing, so what we will need to do is update this line to use our function and the proper action hook to the following.

$this->loader->add_action( 'init', $plugin_public, 'register_movies' );

That's it! You can now navigate to the backend of your WordPress site, and as long as your plugin is active — you should see the new "Movies" custom post type.

Wrapping up

So there you have it; in this series, we covered that making a WordPress plugin can be as easy as creating a folder with a file and as complex as using a tried and true boilerplate to build an OOP plugin and ship nice, neat code that's ready for the marketplace.

Now I didn't get into the nitty-gritty about all of the wonderful things this boilerplate does for you — but suffice it to say that if you explore the boilerplate and read their amazing comments, you'll begin to learn and see the value it adds to the developer experience.

We're currently brewing a new Zoom plugin for WordPress that I plan to write about in the near future that will go into greater detail in how to build a real-world plugin.

I want to remind you that a plugin does not need to be complicated, complex, or feature-rich to add value to your client's sites or to any open-source community.

Just remember that the plugin ecosystem helps every one, no matter how big or small your idea might be.

Keep reading

This is a series that will teach you how to build a plugin from scratch.

We will get out hands dirty, and by the end of this series, you should be able to take an idea that you have and turn it into a plugin yourself!

Scroll down to find the other articles in this series.

This article will create functionality for our plugin to help demonstrate how you can build your own WordPress plugin.

If you've been following along — welcome back!

The scope

Let's keep this small and simple in scope by writing some functionality that will display a message at the bottom of the page — appending it to the footer.

Planning the plugin

Understanding that the scope is to display a message at the bottom of the page, we will need to find a WordPress hook that will allow us to do that.

Luckily, WordPress has an action hook for just this called "wp_footer."

If you're not familiar with hooks — they allow you to do things at a particular place and time during the loading sequence of the CMS.

I'll expand on hooks in a future post.

Let's build!

If we take a look at the wp_footer documentation it will tell us how to use this hook along with a few great examples.

First, let's create our function.

<?php

/**
 * Plugin Name: Pulp Fiction Quote
 */

function display_message() {
  echo '<div>What does Marcellus Wallace look like?</div>';
}

Now that we've created our function let's add it to the wp_footer action hook.

<?php

/**
 * Plugin Name: Pulp Fiction Quote
 */

function display_message() {
  echo '<div>What does Marcellus Wallace look like?</div>';
}
add_action('wp_footer', 'display_message');

Boom — that's it! If you activate the plugin and visit any page on the site, you will see our message appear at the bottom.

Creating more functionality

If you're already familiar with building a WordPress theme, then you'll know that the functions.php file is a pretty important file when you need to do things like register custom post types, use hooks, etc.

Guess what? You can paste all of that right into your plugin, and it will work all the same!

You could be sitting on a ton of useful code that you've already written and easily turn it into a plugin — crazy, I know.

Let's try creating a custom post type — which is a fairly common thing to do with any custom WordPress build.

Create a custom post type

Okie dokes — let's start by wiping the slate clean and renaming our plugin to "Movies Post Type".

<?php

/**
 * Plugin Name: Movies Post Type
 */

Let's drop in all of the code we would need to register a custom post type.

Note: If you're not familiar with registering custom post types, I will cover this in a separate article.

/**
 * Plugin Name: Movies Post Type
 */

// Register Custom Post Type
function custom_post_type() {

  $labels = array(
    'name'                  => _x('Movies', 'Post Type General Name', 'text_domain'),
    'singular_name'         => _x('Movie', 'Post Type Singular Name', 'text_domain'),
    'menu_name'             => __('Movies', 'text_domain'),
    'name_admin_bar'        => __('Movie', 'text_domain'),
    'archives'              => __('Item Archives', 'text_domain'),
    'attributes'            => __('Item Attributes', 'text_domain'),
    'parent_item_colon'     => __('Parent Item:', 'text_domain'),
    'all_items'             => __('All Items', 'text_domain'),
    'add_new_item'          => __('Add New Item', 'text_domain'),
    'add_new'               => __('Add New', 'text_domain'),
    'new_item'              => __('New Item', 'text_domain'),
    'edit_item'             => __('Edit Item', 'text_domain'),
    'update_item'           => __('Update Item', 'text_domain'),
    'view_item'             => __('View Item', 'text_domain'),
    'view_items'            => __('View Items', 'text_domain'),
    'search_items'          => __('Search Item', 'text_domain'),
    'not_found'             => __('Not found', 'text_domain'),
    'not_found_in_trash'    => __('Not found in Trash', 'text_domain'),
    'featured_image'        => __('Featured Image', 'text_domain'),
    'set_featured_image'    => __('Set featured image', 'text_domain'),
    'remove_featured_image' => __('Remove featured image', 'text_domain'),
    'use_featured_image'    => __('Use as featured image', 'text_domain'),
    'insert_into_item'      => __('Insert into item', 'text_domain'),
    'uploaded_to_this_item' => __('Uploaded to this item', 'text_domain'),
    'items_list'            => __('Items list', 'text_domain'),
    'items_list_navigation' => __('Items list navigation', 'text_domain'),
    'filter_items_list'     => __('Filter items list', 'text_domain'),
  );
  $args = array(
    'label'                 => __('Movie', 'text_domain'),
    'description'           => __('Movie Description', 'text_domain'),
    'labels'                => $labels,
    'supports'              => false,
    'taxonomies'            => array('category', 'post_tag'),
    'hierarchical'          => false,
    'public'                => true,
    'show_ui'               => true,
    'show_in_menu'          => true,
    'menu_position'         => 5,
    'show_in_admin_bar'     => true,
    'show_in_nav_menus'     => true,
    'can_export'            => true,
    'has_archive'           => true,
    'exclude_from_search'   => false,
    'publicly_queryable'    => true,
    'capability_type'       => 'page',
  );
  register_post_type('movie', $args);
}
add_action('init', 'custom_post_type', 0);

If you go back to your plugins in the backend of WordPress and activate this plugin — you should now see a "Movies" menu appear in the backend of WordPress, similar to "Pages", that will allow you to begin adding movies!

Wrapping up

I hope you take away from this article that creating a WordPress plugin is not a difficult thing to do — once you understand why and how.

Continue to the next article and learn how to use a WordPress plugin boilerplate generator to create a well-structured, object-oriented framework to begin building production-ready plugins.

Keep reading

This is a series that will teach you how to build a plugin from scratch.

We will get out hands dirty, and by the end of this series, you should be able to take an idea that you have and turn it into a plugin yourself!

Scroll down to find the other articles in this series.

In this article — I will walk you through creating a WordPress plugin in a way that I've come to learn, and hopefully, by the end of this article, you, too, will be able to start creating your own WordPress plugins.

Prep work

There's minimum prep work involved in creating a plugin:

• Create a folder
• Create a file (within that folder)
• Add the plugin header

Create a folder

In the plugins directory, create a folder and call it whatever you want to call it. As a best practice, make sure it's lowercase, only letters, and no spaces.

Create a file

Now — create a PHP file and as a best practice, name it the same way you did with the folder.

Add the plugin header

For WordPress to detect your plugin, you must include the plugin header at the top of the file you just created. You can use the example below and replace "YOUR PLUGIN NAME" with anything.

<?php
/**
 * Plugin Name: YOUR PLUGIN NAME
 */

Activate the plugin

Navigate to your plugins menu in the backend of WordPress, and you should see the new plugin appear in the list — go ahead and activate it!

There — that's it, you've created a plugin!

Wrapping up

Although plugins require a lot more than that to be of any use — the point I want to illustrate to you here is that a plugin is no more than a folder that will end up containing one or more PHP files and other dependencies that extend WordPress.

This concept is true in almost any CMS platform and JavaScript frameworks such as React, Vue, Angular, Svelte, etc.

Keep reading

This is a series that will teach you how to build a plugin from scratch.

We will get out hands dirty, and by the end of this series, you should be able to take an idea that you have and turn it into a plugin yourself!

Scroll down to find the other articles in this series.

Look around, and you'll find that nearly all platforms and frameworks have plugins, although some might call them modules, extensions, etc.

In this article — we will explore the basic concepts of plugins and why they exist.

So, what are plugins?

Plugins are wonderful, agnostic, isolated pieces of code that can work independently or harmonize with other plugins. When you add a plugin — it should extend what the platform or framework is capable of doing.

Why create a plugin?

A great use case for creating a plugin is if you've identified a need for the same functionality across any project. You'll usually identify this after you're done with a project, as a retrospect, and find that you've created several useful bits of functionality that could be packaged up into a plugin.

The same reason you would create a CSS class, a function, or even a React component — if you find yourself needing to reuse the same bit of functionality, then chances are you've got a strong case for creating a plugin.

Keep reading

This is a series that will teach you how to build a plugin from scratch.

We will get out hands dirty, and by the end of this series, you should be able to take an idea that you have and turn it into a plugin yourself!

Scroll down to find the other articles in this series.

Reading, tinkering, and 30 hours later — I've got some things figured out, and what I aim to do in this article is share how I understand it all and how you can set up an auto deploy process using a GitHub Action.

Primer

First — I should warn you that setting up a GitHub Action requires more than a few steps. You will need access to your hosting environment and have FTP, SFTP, or SSH access in many cases.

This article will focus strictly on SSH.

SSH Keys

Rather than excite you by diving right into the GitHub Action .yml file, let's get the hard stuff out of the way first and address the SSH Keypair thingy ma-bob.

Using SSH keys is a different way of authenticating into a server. Instead of using a username and password, you will supply a username and an SSH key instead.

SSH keys come in a pair — one is public and the other private.

Depending on what you're configuring, it may require you to provide one or the other — and in our case, to set up this auto deploy process, we will be using the private key.

SSH Key Generator

First — you'll need to log in to your server over SSH.

ssh username@ip-address

Next, enter your password and once you're in, run the following command.

ssh-keygen -m PEM -t rsa -b 4096.

You will then be asked a series of questions; it's ok to smash that enter button several times till the end.

Now, go ahead and add your public key to your "authorized key" on the server. This step is crucial because I spent a ton of time troubleshooting why my auto deploy didn't work, and it's because I missed this step.

cat id_rsa.pub >> ~/.ssh/authorized_keys

Once that's done, run the following command, which will provide you with the secret SSH key. This will be the key we need when setting up the deployment using GitHub Actions.

cat ~/.ssh/id_rsa

If you're interested in learning more about SSH Keys, check out the link below.

https://www.ssh.com/academy/ssh/public-key-authentication

Create Deploy Steps

Now for the fun part — head over to your GitHub repo and click on the "Actions" tab located at the top. This will bring you to a screen with tons of options, but don't fear, find the "Node.js" option and click "Set up this workflow."

That will bring you to a screen with the following code.

# This workflow will do a clean install of node dependencies, build the source code, and run tests across different versions of the node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

This can seem overwhelming at first, but I'll break it down the way I understood it.

First, we need an environment or operating system that will allow us to run all of our fancy build process stuff. So, it needs to install Ubuntu first.

Then, we need Node.js installed to do things like "npm install" or "npm run build," or else it would'nt know what to do. When that is all set up and ready to go, it will install our dependencies and build the files we want to deploy.

Okay — so now our files are built, but we haven't told it where we want them to go.

If we look to our right, we will see a panel with a search bar and a list of options. Search for "ssh deploy," and you should see the option below.

Select "ssh deploy," scroll down, then copy and paste the following code at the bottom of your .yml file.

- name: ssh deploy
   uses: easingthemes/ssh-deploy@v2.2.11
   with:
      SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
      REMOTE_HOST: ${{ secrets.SERVER }}
      REMOTE_USER: ${{ secrets.USERNAME }}
      TARGET: ${{ secrets.PRODUCTION_DIR }}

Secrets

You may have noticed that we added some variables above; those are called "secrets," which we will need to create by visiting the repo settings page within GitHub and selecting "Secrets" at the bottom left of the menu.

Select "New repo secret" and begin creating the variables we set above. As you create your variables, pay close attention to these important things:

• SSH_PRIVATE_KEY: You will need to get your private SSH key by logging into your server through the terminal and running cat ~/.ssh/id_rsa, which will print out your private SSH key on the screen. Copy the entire block including -----BEGIN RSA PRIVATE KEY----- and -----END RSA PRIVATE KEY-----
• REMOTE_HOST: The server IP address
• REMOTE_USER: The same username you use to login through SSH
• TARGET: Target will be the full directory path where you want to deploy your files i.e. /var/www/vhosts//httpdocs/staging/web/app/

Make sure that you create the folder on your server ahead of time, or the deployment process will fail.

Okie dokes! With all of that now out of the way, it's time to start testing!

Testing your auto deploy

To test your auto deploy, commit a change and push it up to your main branch. Visit the actions tab within your repo, and you should see a build in progress. Click on the build process to see it all in action. (no pun intended)

Setting up different branches

There are many different ways to set up and configure how and where your deployments go. In a fully fleshed-out example below, you will see that we deploy to a staging site whenever a push occurs on the staging branch and deploying to the production site whenever a push occurs on the main branch.

# This workflow will do a clean install of node dependencies, build the source code, and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Auto Deploy

on:
  push:
    branches: [main, staging]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies
        run: npm install
      - name: Build files
        run: npm run build --if-present

      - name: Deploy staging
        if: github.ref == 'refs/heads/staging'
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.SERVER }}
          REMOTE_USER: ${{ secrets.USERNAME }}
          TARGET: ${{ secrets.STAGING_DIR }}
          EXCLUDE: ".git*, .github*, node_modules*, src*, webpack.config.js"

      - name: Deploy production
        if: github.ref == 'refs/heads/main'
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.SERVER }}
          REMOTE_USER: ${{ secrets.USERNAME }}
          TARGET: ${{ secrets.PRODUCTION_DIR }}
          EXCLUDE: ".git*, .github*, node_modules*, src*, webpack.config.js"

Wrapping up

If you made it this far in the article, that means you love reading, or it's not working.

If it's the latter — go back and read some of the beginning steps about generating and copying the private key.

Pay close attention to the "authorized keys" part as well — as it turns out — this was the part where I spent a lot of time on and stumbled quite a bit.

Like or comment if you found this helpful, and say hello on Twitter!

This article will walk you through how to do this using an iPhone and a Mac. I'm sure there's a way to achieve this on a PC, but I won't be covering that in this article.

Record Twitter Space as a listener

Here's what you need:

1. iPhone
2. Mac
3. Lightning cable

Here are the steps:

1. Connect your iPhone to the Mac
2. Open up QuickTime player
3. Select "New Audio Recording" from the File menu
4. Select the dropdown arrow to the right of the menu
5. Choose your iPhone
6. Start recording

At this point — you should start to see the audio indicator reacting. Any audio that's playing on your iPhone, including Twitter Space, will be recorded.

Record Twitter Space as a host or speaker

If you plan to host or speak — you'll quickly find out that QuickTime will not detect the audio. I'm not sure what this is, but I assume it has something to do with the audio hardware in active use while you're a speaker.

To get around this — you'll need to use another iPhone or ask a friend to record the Twitter Space for you. In my case — I used my wife's phone to record the Space — while using my phone to be a speaker inside of the Space.

The email template, a 1 column design, used a font not supported by MailChimp. At this current time, MailChimp supports only a handful of base operating system fonts and Google Fonts for excellent reasons.

You can learn more about their reasons here:
Typography | Email Design Reference

Searching high and low, I found an article that demonstrated how a user could use a custom Google Font by using a WYSIWYG block to toggle HTML editing and importing the font that way.

That was helpful — but I felt there had to be a better solution; after all, the user could delete that block or add a new block at the font would be lost.

With this in mind, I explored all of the blocks available to me and noticed that there was an HTML block that allows you to use custom code.

I decided to place the block above the header to be the first block that loads in the email. Within the block, I dropped in Google Font provided @import statement and targeted nearly every element and assigning the font-family with !important to ensure it overrides anything MailChimp might be doing.

It worked!

Here’s the code for your copy and paste convenience.

This solution makes it pretty difficult for a user to delete the block since it’s nearly collapsed on itself and it lives above the header, which helps to ensure it loads early and protects it.

What are your thoughts?

Have you found another approach that works well for your client?

Every language and platform has built-in methods for troubleshooting. For example — Javascript has console.log() for printing things into the console within dev tools so you can tell whether a function or variable is working correctly.

In PHP — you can use things like var_dump() and print_r() to do something similar.

In this article, I will go further with examples of how you can quickly and effectively troubleshoot in any situation you might find yourself in.

Troubleshooting Javascript

Regardless if you're using a JS framework or good 'ole vanilla Javascript — console.log() is hands down your best friend when it comes to figuring out problems.

Are the variable settings? Is it a string or an integer? Is it an object or an array? Is it NULL?

Just console.log() it, and it'll keep you from aimlessly guessing.

If you are using a JS framework like Vue or React — you'll undoubtedly find a ton of value in downloading and installing the following Chrome extensions.

Vue Dev Tools

React Dev Tools

Once installed — you'll need to close and reopen your Chrome dev tools to see the new panel. Within this panel are loads of helpful tools that allow you to see what's happening in your Vue and React app.

Troubleshooting PHP

There are tons of fancy environment setups for getting error logs to print out on the screen. However, two extremely powerful functions allow you to diagnose what might be happening with your code quickly.

The for one is var_dump(), which can be a little misleading because it does more than handle variables. It also handles functions too!

<?php
    $name = 'Duder McDuderson'
    var_dump($name);
?>

Passing a variable function or object in var_dump() — the next time you refresh your webpage — it will display what's happening.

I'll often use it when setting up loops and conditional with something like var_dump('test') to check if the conditional logic works** the way I want it to.

The other function — print_r() — does the same, but in some environments, it will print the data out in a human-readable way which can be extremely beneficial when working with arrays and objects.

Conclusion

When you find yourself scratching your head — do not hesitate to reach for any of these built-in functions. They will help you save loads of time and get you through some frustrating moments as you're out there building out there in the wild.

There were 40 parent pages that each required their own navigation. Under each of the 40 parent pages would be several children pages and probably children of children and so on.

I grappled with the ACF Relationship field first, but it wouldn’t allow me to nest pages natively. There was a thought that “Maybe the user could select the parent pages and the menu will build itself,” but the project requirements dictated otherwise.

Ultimately the user would need to control both nesting and order.

Briefly — I performed research but quickly pivoted to, “Hey, I bet it wouldn’t be too difficult to make my own ACF field.”

Then I found this; ACF | Creating a new field type.

Of course — Elliot Condon and his team would make it dead simple for developers to create their fields; after all, they’ve done such an amazing job doing just that for years now.

I dived right into their boilerplate repo and had to figure out where I would be writing my code.

Here’s what I found.

function render_field( $field ) {

}

Turns out — this is where I needed to write the code. The idea was to expose a new field type where an array of menu ids would power the data.

Here what I did to get the menu ids:

$menus = wp_get_nav_menus();

foreach ($menus as $key => $value) {
    $field['choices'][$value->term_id] = $value->name;
}

That was pretty easy! However — this next part, not so much.

I wanted to use the select2 dropdown field that ACF uses — you know — that slick-looking dropdown with a search field inside it?

The reason was not purely based on bias; remember, there will be 40 pages that need 40 different menus, and that’s a lot to scroll through!

After doing some Google searching, I was able to find this little gem.

$field['type']  = 'select';
$field['ui']    = 1;
$field['label'] = '';

acf_render_field_wrap($field);

Turns out — there are a few things that are required if you want to use the select2 or “fancy select dropdown.”

Setting both the type to “select” and the UI to “1” is required. Then acf_render_field_wrap($field) brings the magic sauce.

Here’s what it all looks like put together.

function render_field( $field ) {
        $field['type']  = 'select';
        $field['ui']    = 1;
        $field['label']    = '';

        $menus = wp_get_nav_menus();

        foreach ($menus as $key => $value) {
            $field['choices'][$value->term_id] = $value->name;
        }

        acf_render_field_wrap($field);
    }

With this in place — we now have the ability to create a new menu field for our pages. When the user makes a selection — the ACF function get_field() will return the menu ID. You can use this ID to display the menu using the WP functionwp_nav_menu().

Here's what it looks like in action.

Pretty sweet — yea? Let's see what it looks like when editing a page.

If you find yourself needing this type of functionality — hopefully, this saves you some time.

You can download the plugin here.

Cheers! 🎉

Now don't get me wrong — I enjoy tinkering and trying new things; it's fun and helps me advance my knowledge around all things web. But if you're trying to build a freelance career or join a large tech company — this may not be the best use of your time.

Why, you might ask?

Let's say that you've settled into a popular CSS framework like Bootstrap or Tailwind and have gotten comfortable cranking out tons of sites using their class-based approach.

Did it help you advance your CSS/SASS skills at all?

If I had to guess — that answer is probably no, and it's due to the abstraction they are putting in front of you. It sort of traps you into their system, and it becomes all that you know.

This can put you at a huge disadvantage when interviewing for jobs or taking on freelance gigs if you do not have strong CSS/SASS knowledge or experience.

Rather than learning a framework — learn the core language instead and graduate up to SASS, giving you access to things like loops and mixins — which are just like functions if you're familiar with that concept.

We've only covered CSS in this article, but the same applies to any language.

Once you've become proficient in the core language — it makes understanding and grasping abstract concepts a whole easier. You will become more flexible, comfortable, and better positioned on whatever the gig requires.

It will also help to make you an all-around better developer.