Forem: Jack Harner 🚀

Starting A Freelance Developer Bluesky Feed

Jack Harner 🚀 — Wed, 26 Mar 2025 00:00:00 +0000

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.

Determining If A Post is Related to the Feed Topic

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!

Custom Menu Order in the WordPress Admin

Jack Harner 🚀 — Wed, 20 Jul 2022 00:00:00 +0000

Turn On The Custom Admin Menu Hook

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.

Removing Posts Menu (All Posts, Add New, etc.) from WP Admin

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

Totally Custom WP Admin Menu Order

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',
 ]

Reset WordPress File Permissions

Jack Harner 🚀 — Mon, 19 Jul 2021 00:00:00 +0000

Originally Posted to JackHarner.com

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!

Best Options For Recurring Developer Income?

Jack Harner 🚀 — Sun, 25 Apr 2021 02:01:18 +0000

As a Freelance developer, what's the best way to get recurring income?

Things like maintenance plans, monthly hosting packages, etc. I'd love to hear what's worked and what didn't for you!

Destructuring and Nested Destructuring in ES6

Jack Harner 🚀 — Sun, 18 Oct 2020 00:00:00 +0000

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"

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 in 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 Twitter @JackHarner if you learned something!

Featured Image by Ricardo Gomez Angel on Unsplash

Productivity = Automation

Jack Harner 🚀 — Wed, 01 Jul 2020 00:00:00 +0000

DEV Community 👩‍💻👨‍💻

@thepracticaldev

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!

01:01 AM - 01 Jul 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.

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!

Pausing CSS Animations on Hover

Jack Harner 🚀 — Sat, 28 Mar 2020 00:00:00 +0000

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.

The Animation

We'll start with one of my favorite simple animations, the Pulse:



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

  50% {
    transform: scale(1.1);
  }

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

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.

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

As you can see (Click Here for a Live Demo), 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.

Super simple way to have more user-friendly animations on your site.

Yarn vs. NPM - Package Manager Throwdown

Jack Harner 🚀 — Sun, 19 Jan 2020 00:00:00 +0000

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.

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

Auto-Generate Content Folders In Gatsby

Jack Harner 🚀 — Sun, 22 Dec 2019 00:00:00 +0000

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

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 Twitter 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;
}

I've Forked The Repo, Now What?

Jack Harner 🚀 — Mon, 04 Nov 2019 20:14:15 +0000

Syncing Your Repo With the Upstream Repo

Originally posted on JackHarner.com

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)

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!

What Else Does This Landing Page Need?

Jack Harner 🚀 — Thu, 11 Jul 2019 21:03:10 +0000

I'm working on the Rewards Program landing page for work, and I'm curious what Dev.to thinks it needs or what could be better, etc.

My Thoughts

Instead of having a "Sign Up" and "Sign In" button that have equal weight, just having a "Sign Up" button with an "Already Have An Account? Sign In" Link under it.
Including a slider of cards that include the things you can earn points for and what you can redeem points for.
FAQ section.

Any other suggestions/comments?

Thank you for your time and feedback.

Sick Console Bro! How To Style Your console.log with CSS

Jack Harner 🚀 — Mon, 17 Jun 2019 19:38:43 +0000

Originally Posted On Harner Designs | 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 Twitter @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:

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.