TIL 2

Well daily posting didn’t last long 🤦‍♂️. To be fair I had this draft saved yesterday…

Uncle Tom’s Cabin was written by Harriet Beecher Stowe and was written primarily to influence white Christian women. It is credited as having helped to advance the abolishionist cause but has since received criticism for perpetuating stereotypes.

Per Conversations with Tyler 74 with Hollis Robbins

TIL 1

Bloggin’ ain’t easy so I am going to try to a share something I learn every day. Mostly to get into the habit of blogging consistently but also to encourage myself to learn interesting things and justify the hours I spend learning random shit… So here is TIL 1

Bight is a term used in geography meaning a curve or bend in a coastline, river or other geographic feature.

Migrating WordPress ain’t easy

So I need to migrate a WordPress / WooCommerce and it is not proving easy. I have tried the premium versions of Backup Guard and Duplicator and neither plugin has allowed me to migrate the site successfully. I am talking with their respective support teams now but the fact that neither worked out of the box is annoying. Particularly as Duplicator Pro cost $79. To be fair, the backup file is quite large (860mb) and it’s currently on a Google Compute Engine server running PHP 5 and I’m trying to move to a Digital Ocean droplet running PHP 7 but still.. $79!

Update: I managed to do this with Duplicator Pro’s beta drag and drop/admin panel feature. Good work guys!

A little Awk

Awk is a command for doing things with text files. We give it a text file and it can do an action on each line. So we can print the whole line, or part of the line, or reorder parts.

As a simple example, here’s a CSV of people’s last name, first name, age, and nationality:
Branch, Polly, 28, Romanian
Moore, Luis, 25, Uruguayan
Conley, Julia, 37, Luxembourger

We want to run Awk and have it print their First and Last names, i.e
Polly Branch
Luis Moore
Julia Conley

Let’s do it. Firstly, download humans.csv to your Downloads folder. Then open a terminal and go to Downloads:

cd ~/Downloads
ls humans.csv

This should print ‘humans.csv’ if the file exists.

To use Awk, you type awk, then tell it when you want it to do inside single quotes, then give it a file. The simplest example is telling it to print the whole file, like this:

awk '{print $0}' humans.csv

Your Awk ‘program’ here is the part inside quotes. Awk programs usually start with { and end with }. We need the quotes because command line needs to know to include the spaces. Whatever is inside the curly braces will be run for each line in the file.

So print means ‘print’, and $0 means ‘the entire line’. But we just want to print part of the line. Awk splits the line into pieces, we can access the pieces with $1, $2, etc. So if we just want to print the first word on each line:

awk '{print $1}' humans.csv

This prints:
Branch,
Moore,
Conley,

They have commas after them because by default Awk splits using spaces. We can tell it we’re using commas by passing a -F argument, like this:
awk -F, '{print $1}' humans.csv

And now we just print the last names!

Next we want to print the first name and the last name. If we run this:
awk -F, '{print $2 $1}' humans.csv

then something a bit weird happens.
PollyBranch
LuisMoore
JuliaConley

print ignores the spaces we put between $2 and $1. To make it put a space we can either use a comma, or put a space in quotes.

Using comma:
awk -F, '{print $2,$1}' humans.csv

or putting a space in quotes:
awk -F, '{print $2 " " $1}' humans.csv

This example says to Awk: “print the first name, then a space, then the last name”.

 Polly Branch
Luis Moore
Julia Conley

Done!

…Almost. There is still an extra space at the start of the line. This is because the example CSV had commas and spaces, and we are telling Awk to split on commas. So when it splits a line, it splits it into: “Branch”, ” Polly”, ” 28″, and ” Romanian”.

So for this particular CSV we actually want to split using “comma followed by space”.

We can use -F', ' again:
awk -F', ' '{print $2 " " $1}' humans.csv

Next we’ll look at some more complex actions, and how to match only certain lines.

References

Inspired by https://gregable.com/2010/09/why-you-should-know-just-little-awk.html
GNU Getting Started with Awk

The Best .com Domain Registrars

The Best
DynaDot and NameSilo. Both have free whois privacy, free email forwarding and free DNS management. Plus Afternic and Sedo MLS integration for investors.

The Rest
GoDaddy By far the most the most popular registrar. More expensive than other registrars and a little sleazy with the upsells. Some will appreciate the phone support and localisation.
Epik They have some cool features and good prices. I have one name there and may transfer more there in the future.
Google I haven’t tried them but the interface is nice. Prices are a little higher.
PorkBun An oddly satisfying experience.

Intercept requests with puppeteer

useful to mock backend responses when you don’t want to have to donate RAM to minikube when developing locally

// from https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionvalue

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.setRequestInterception(true);
    page.on('request', (interceptedRequest) => {
      if (interceptedRequest.url().includes('additional_metrics.json') {
        interceptedRequest.respond({
          metrics: {},
        });
      } else {
        interceptedRequest.continue();
      }
    });

    await page.goto('http://localhost:3001/users/sign_in');
    await page.type('input[name="user[login]"]', 'root');
    await page.type('input[name="user[password]"]', '5iveL!fe');
    await page.click('.qa-sign-in-button');

    await page.waitForSelector('.header-user-dropdown-toggle');

    // await browser.close();
  } catch (err) {
    console.error(err);
  })
});

Numeronyms make Awful Names

a16z – Andresson Horowitz. I don’t hear/use this often enough to remember it, so completely forget what it stands for

a11y – Accessibility. I come across this all the time, yet can never remember what word it is short for. Yet I link ‘a11y’ to the concept of accessibility. My issue with this is possibly due to pronunciation. Is it ‘ay-eleven-why’? Is it ‘Alley’? A-1-1-y? All terrible. I suspect this one is common because a11y is easy to type, and accessibility is easy to misspell.

i18n – internationalization. I remember the concept and the acronym. Often forget what it expands to. Doesn’t help that GitLab docs link is /externalization (e13n).

k8s – Kubernetes. Even after months of using this, the acronym always takes me time

Sass Regrex

I was writing some large blocks of repetitive text in SCSS. Had some colors defined, and we wanted to group them in color-ranges, like this.

So we started with with:

$green-50: #f1fdf6;
$green-100: #dcf5e7;
$green-200: #b3e6c8;
$green-300: #75d09b;
$green-400: #37b96d;
$green-500: #1aaa55;
$green-600: #168f48;
$green-700: #12753a;
$green-800: #0e5a2d;
$green-900: #0a4020;
$green-950: #072b15;

We want to remove the values so we just have a list of names

Find:        :.*$
Replace:     ,

Replace everything from the colon to the end of the line with ,

Manually wrap it in parenthesis so it looks kinda like a SASS Map:

$theme-greens: (
  $green-50,
  $green-100,
  $green-200,
  $green-300,
  $green-400,
  $green-500,
  $green-600,
  $green-700,
  $green-800,
  $green-900,
  $green-950
);

Wanted to make it look like this:

$greens: (
  "50": $green-50,
  "100": $green-100,
  "200": $green-200,
  "300": $green-300,
  "400": $green-400,
  "500": $green-500,
  "600": $green-600,
  "700": $green-700,
  "800": $green-800,
  "900": $green-900,
  "950": $green-950
);
Find:      (\$.*-(\d+))(,|$)
Replace:   "$2": $1$3

$1 is the original value (e.g. $green-100)
$2 is the number, which we wrap in quotes
$3 is either comma or end-of-line

Troubles with input type=”number”

Using type="number" on input fields is far less useful than I originally thought. We were previously using it for the form on Framer. Since they are number fields, having the number keyboard pop up on phones is something we wanted. It also prevents people typing in non-numbers, so there’s some free form validation.

Here are some of the issues we had:

  • Scrollwheel/trackpad will cause your number to go up or down without you noticing
  • Default value of the step attribute is not “any”. Decimal numbers will be rounded unless you specify it
  • Things consisting of numbers are not necessarily numbers – you don’t want to accidentally increment your credit card number because of scrolling up a little

Typing numbers is not like using an abacus. People don’t enter numbers by adding one at a time. If they do (i.e. quantity fields), you are better off with explicit Add/Remove buttons, rather than the tiny tiny arrows that browser input fields give you.

There is a great writeup from Filament Group, I wanted to type a number, which runs through these problems and gives a solid solution.

Also see You Probably Don’t Need input type=”number”.