duud

Category: Uncategorized

  • 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:

    (more…)

  • 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 3

    Sporadic posts are easier to achieve than daily posts ????

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

  • TIL 2

    Uncle Tom’s Cabin was written by Harriet Beecher Stowe to influence white Christian women. It helped to advance the abolitionist cause but has also received criticism for perpetuating stereotypes.

  • 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

    Migrating WordPress / WooCommerce 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 have contacted their support teams 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 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.

  • The Myki recharge button should be more clear on Google Pay

    Maybe make it blue or something?

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