brian-mcallister-lab49

You could create your own quick action in Automator with Applescript, which is certainly fun. Here's a great guide for doing that: https://medium.com/macoclock/how-in-the-bleep-do-i-mute-my-mic-anywhere-on-macos-d2fa1185b13 (and a preview of the Applescript below).

However, there is a big limitation in that you don't get any visual feedback if your input channel is muted. Instead, you could just install Mutify, which gives you a global hotkey and a taskbar icon.

brian-mcallister-lab49

There's more options than just --strict, you can control it in a more fine grained way. This could be useful if you have a project that started without strict mode, but you want to turn it on. Here's the available options from the documentation:

Option	Type and Default	Description
--strict	boolean false	Enable all strict type checking options. Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
--strictBindCallApply	boolean false	Enable stricter checking of the bind, call, and apply methods on functions.
--strictFunctionTypes	boolean false	Disable bivariant parameter checking for function types.
--strictPropertyInitialization	boolean false	Ensure non-undefined class properties are initialized in the constructor. This option requires --strictN

brian-mcallister-lab49

Turns out, the order of files in multi file Gists is based on the filename. So, if you want your files to be in a certain order, just name them in alphabetical order. Or, you can prefix your file names with numbers!

One!

brian-mcallister-lab49

npm will set all kinds of useful environment variables for you. To see what gets set, add the following to your package.json:

{
  "scripts": {
    "check-env": "node -e 'console.log(process.env)' | grep npm"
  }
}

brian-mcallister-lab49

There are lots of code snippets on the internet for creating unique lists of things. Most work great, and this technique is very common and easy to understand:

const list = ['a', 'a', 'a', 'b', 'b', 'c', 'c'];
const unique = [...new Set(list)];
// #=> ['a', 'b', 'c'];

But what if you have a list of complex objects? It's not entirely uncommon in real applications to have multiple lists of objects where those objects aren't shared references. If you want to combine those lists to get a unique list of objects, it's going to take a little more work.

brian-mcallister-lab49

express exports Request and Response types for your request and response objects when handling express requests. It's done this for a while, but I recently learned that these types accept generics, which allow you get more specific about what you're accepting and responding with.

As the most simple possible example, let's imagine a RESTful API that responds with JSON:

router.get('/users', async (req, res, next) => {
  try {
    const users = await Users.getAll();
  
 res.status(200).json(users);

brian-mcallister-lab49

It's not uncommon to have a React component that takes props where some of those props are mutually exclusive. Let's imagine a case where we have a Button component. We want our button to allow for the following possibilities:

1. The button has text.
2. The button has text and an icon.
3. The button has an icon, but no text.

An initial implementation might look like:

const Button = ({ text, icon }: { text?: string; icon?: string }) => {

brian-mcallister-lab49

Using a very simple technique using syntax that is already familiar to most JavaScript/TypeScript engineers, you can quickly define multiple variables by combining destructuring and ternary statements.

const { success, result } = isSuccessCondition
  ? { success: true, result: 'success!' }
  : { success: false, result: 'you did something silly!' };

brian-mcallister-lab49

If you're using Testing Library, you're certainly using the *ByRole functions to query for elements rendered by your test.

However, it's not always obvious what arguments to use when using the *ByRole functions. Luckily, there is a feature in the Chrome DevTools that will show you the role and accessable name of a selected element in the elements panel.

There's an example image in the gist box below.

Now you can see exactly what to query by. In this particular example, it might look something like this:

expect(screen.getByRole('combobox', { name: /search/i })).toBeInTheDocument();

brian-mcallister-lab49

There's a few tricks that you can use to control scope when nesting Sass selectors. The best use case I've been able to find is when you're writing selectors with BEM.

.block {
  $this: &; // <-- Here's the trick.
  
  &--modified {
    #{$this}__nested-block {
      some: style;
 }