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”.

Find in Similar Files for VSCode

I want a shortcut for VSCode that lets me”Find in files”, but with the filter pre-filled to current file type. So searching from a scss file will default to searching scss files. Same for rb or js files. This might use a different shortcut to the default find in files, or use the same one but configure pre-filled file types.

Not sure how it would handle the case where you’d previously set filename filters – should it clear the filter, or only replace empty filter? Not clearing would match the default behaviour a bit better.

Optionally add multiple file types in some order, and order the results like that. So prefer files that match the current suffix (e.g. _spec.rb), then show similar file types (.rb).

I haven’t yet found an extension that does this. I’m confident it exists, but I cannot think of how to phrase a search query to find it.

In the meantime, some useful shortcuts:

  • Alt + F12 to go to definition
  • Shift + F12 to find usages
  • Alt + Click for multiple cursors (totally unrelated but cool)

Utility CSS Is Not Inline Styles

I love utility CSS. It means I write CSS once, and change it rarely. I can quickly and easily add/change pages, and can often read a chunk of markup and know what something will look like. text-right font-bold is more obvious to me than nav_item--inner.

But a common complaint is “it’s like inline styles”. This seems based purely on appearances, rather than actual function. Looking similar doesn’t mean they are the same.

People rarely ask “why is that bad?”. What is actually wrong with inline styles? Does any of that apply to functional CSS? Let’s find out!

Inline styles don’t allow media queries

This is a huge reason to not use inline styles. And a valid one. It does not apply at all to functional CSS! Utility classes in bootstrap, tailwind, and others have classes with media queries.

You can use .p-md-2 to only add padding on medium-and-larger screens. Or d-sm-noneto hide stuff on small screens.

Inline styles cannot be easily changed

For testing quick changes in devtools, or changing a style project-wide. Inline styles requires a full text find/replace. Using CSS does not. You want to be careful to not end up with .text-red { color: blue }. But this can be avoided by naming things properly in the first place. If you change your primary color, the one-line CSS change for text-primary is easier than replacing every color attribute.

Maintenance is harder

Similar to the previous point; with correct names this shouldn’t affect functional styles. There are cases where you’ll still need a find/replace (i.e. if you decide labels shouldn’t be bold). In this case component styles are simpler, as you just update the label.

Separation of Concerns is another popular-but-misguided argument against util classes. Splitting unrelated components or modules into different files is how you separate concerns. Putting related code far apart because they have different file extensions is not.

Performance blah blah

Please measure before using this as an argument. There may at some point be a performance impact. But this is not your bottleneck yet. If you are serving many MB of HTML without gzip, this may come into play. If you get to that stage you have other problems.

I think a lot of this comes from people opening devtools and seeing so much markup. But browsers don’t really mind this. They are pretty good at parsing HTML. Don’t optimize for devtools users.

Additionally, you can easily strip out unused classes with a tool like purifycss. This leaves you with a pretty minimal set of styles + markup.

References

https://frontstuff.io/in-defense-of-utility-first-css https://adamwathan.me/css-utility-classes-and-separation-of-concerns

Frederick Douglass on Christmas

I think that I originally read this around Christmas 2017. I was especially hedonistic and unhappy at work at the time.

The days between Christmas and New Year’s day are allowed as holidays; and, accordingly, we were not required to perform any labor, more than to feed and take care of the stock. This time we regarded as our own, by the grace of our masters; and we therefore used or abused it nearly as we pleased. Those of us who had families at a distance, were generally allowed to spend the whole six days in their society. This time, however, was spent in various ways. The staid, sober, thinking and industrious ones of our number would employ themselves in making corn-brooms, mats, horse-collars, and baskets; and another class of us would spend the time in hunting opossums, hares, and coons. But by far the larger part engaged in such sports and merriments as playing ball, wrestling, running foot-races, fiddling, dancing, and drinking whisky; and this latter mode of spending the time was by far the most agreeable to the feelings of our masters. A slave who would work during the holidays was considered by our masters as scarcely deserving them. He was regarded as one who rejected the favor of his master. It was deemed a disgrace not to get drunk at Christmas; and he was regarded as lazy indeed, who had not provided himself with the necessary means, during the year, to get whisky enough to last him through Christmas.

From what I know of the effect of these holidays upon the slave, I believe them to be among the most effective means in the hands of the slaveholder in keeping down the spirit of insurrection. Were the slaveholders at once to abandon this practice, I have not the slightest doubt it would lead to an immediate insurrection among the slaves. These holidays serve as conductors, or safety-valves, to carry off the rebellious spirit of enslaved humanity. But for these, the slave would be forced up to the wildest desperation; and woe betide the slaveholder, the day he ventures to remove or hinder the operation of those conductors! I warn him that, in such an event, a spirit will go forth in their midst, more to be dreaded than the most appalling earthquake.

The holidays are part and parcel of the gross fraud, wrong, and inhumanity of slavery. They are professedly a custom established by the benevolence of the slaveholders; but I undertake to say, it is the result of selfishness, and one of the grossest frauds committed upon the down-trodden slave. They do not give the slaves this time because they would not like to have their work during its continuance, but because they know it would be unsafe to deprive them of it. This will be seen by the fact, that the slaveholders like to have their slaves spend those days just in such a manner as to make them as glad of their ending as of their beginning. Their object seems to be, to disgust their slaves with freedom, by plunging them into the lowest depths of dissipation. For instance, the slaveholders not only like to see the slave drink of his own accord, but will adopt various plans to make him drunk. One plan is, to make bets on their slaves, as to who can drink the most whisky without getting drunk; and in this way they succeed in getting whole multitudes to drink to excess. Thus, when the slave asks for virtuous freedom, the cunning slaveholder, knowing his ignorance, cheats him with a dose of vicious dissipation, artfully labelled with the name of liberty. The most of us used to drink it down, and the result was just what might be supposed; many of us were led to think that there was little to choose between liberty and slavery. We felt, and very properly too, that we had almost as well be slaves to man as to rum. So, when the holidays ended, we staggered up from the filth of our wallowing, took a long breath, and marched to the field,—feeling, upon the whole, rather glad to go, from what our master had deceived us into a belief was freedom, back to the arms of slavery.

5 Quotes About Getting Started

“The secret of getting ahead is getting started.”- Mark Twain

“To begin, begin.”- William Wordsworth

“The journey of a thousand miles begins with a single step.”- Lao Tzu

“What is not started today is never finished tomorrow.”- Johann Wolfgang von Goethe

“There are only two mistakes one can make along the road to truth; not going all the way, and not starting.”- Buddha