Bloggin’ aint easy

I said this in TIL 1 and I’ve wanted it as a hoodie for a while. Bloggin’ aint easy. Maybe that’s our business model going forward. Quality blogging and quality hoodies. Disruption. Someone tell @PaulG

A while ago I listened to Penn Jillette on Tim Ferriss’ podcast and he claims to have missed less than five days of journaling in 34 years. Likewise many bloggers have ridiculous streaks and machine like output. It’s cool for them but I’m happy with keeping my posts sporadic as long as I feel the overall body of work is good. While the best part of me respects these peoples’ consistency, a small part of me can’t help but yell NERD! You’ll never lock me down baby. I ain’t writing my homework in my diary teech.

I thought I would stop doing TILs because Twitter. Now I’m not so sure. The simplicity of Twitter is great but the one size fits all design is not the best for every type of content. Plus I came back and read the first four TILs and it’s good to have them on duud.com. What if Tik Tok acquires Twitter and integrates it all into the core product? International leaders will govern by interpretive dance and our text content will be lost.

Anyway… The main purpose of this post was to start search optimising for “bloggin’ aint easy” for when the hoodies drop. Even still, writing this nonsense has given me a certain sense of satisfaction so while blogging is indeed not easy, you should try it. And then buy a hoodie.

The right way to disable CSS animations

Sometimes I want a way to disable all CSS animations on a page. This is useful for end-to-end testing, automatic screenshots, or reducing motion sickness risk. This recent CSS Tricks post suggests disabling animations & transitions while resizing, to reduce needless browser work. This is an excellent idea! Here is the usual way of disabling animations:

.resize-animation-stopper * {
  transition: none !important;
  animation: none !important;
}

The problem with setting none is that transitionend and animationend events will no longer be fired. Maybe not a big deal, but it could also prevent stuff from working as you expect.

This contrived example animates the border color on hover, and once that’s finished sets the background color. But when animations are disabled, the background color never gets set!

Andy Bell’s modern CSS reset adds a media query for prefers-reduced-motion to disable animations for people who don’t want them. This originally used the none to disable, but was later changed to instead use a very short duration (setting times lower than 0.01s can cause flickering)

.resize-animation-stopper * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

This means animations will end (almost) instantly, and not repeat. The scroll-behaviour: auto ensures that smooth scrolling is disabled.

Not quite as tidy as just writing none, but guarantees your page works for everyone regardless of motion preferences.

 


Cover photo by Shahzin Shajid on Unsplash

CSS snippet for better mobile screenshots

A useful tip when adding screenshots to posts or talks is to put them “inside” a device. This gives the screenshot some context.

Even though this screenshot already contains Android top & bottom bars, with the added outline it’s immediately obvious it’s from a phone.

The Economist on mobile is mostly sticky bullshit

The Economist on mobile is mostly sticky bullshit

To add the outline to images I use a simple CSS border:

.phone-border {
  border: #111 solid;
  border-radius: 1rem;
  border-width: 2rem 1rem 3rem 1rem;
}

To take this further you can also make them responsive! So we see phone screenshots on phones, and a fake laptop screen outline on big/wide screens. This assumes you are using responsive images so you get desktop aspect ratio on bigger screens.

@media (min-width: 800px and min-aspect-ratio: 16/9) {
  .phone-border {
    border-color: #ccc;
    border-width: 1rem;
  }
}

 

TIL 4

Today I learned that Korea was annexed by the Empire of Japan from 1910 until 1945. It was then occupied by the United States and the Soviet Union following WW2. Dad told me this after having learned it himself minutes before (I’m assuming via Wikipedia).

TIL 3

Today I learned that sporadic posts are easier to achieve than daily posts 😉

Also, in France the government allows just two sale periods a year.

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