TIL by Masood

If you want to create a subtype of a union type, but want intellisense and type checking to work both while creating the type and while using it, you'll need to create a type function:

type Extends<T, U extends T> = U

Object keys are a union type. You might want to create a subtype for a specific, partial list of keys from the object, which you want to treat differently. Below you see an example where this Extends type function is used to make sure that you can only create the subtype with types from the union.

type Extends<T, U extends T> = U;

type Special = string
type DataTransferObject = {
  normalKey1: string;
  normalKey2: number;
  specialKey1: Special;
  specialKey2: Special;
};
type ValidSubtype = Extends<
  keyof DataTransferObject,
  "specialKey1" | "specialKey2"
>;

// Error
type InvalidSubtype = Extends<
  keyof DataTransferObject,
  "specialKey1" | "specialKey2" | "zcvz"
>;

const validUsage: Set<ValidSubtype> = new Set(["specialKey1", "specialKey2"]);

// Error
const invalidUsage: Set<ValidSubtype> = new Set(["specialKey1", "asdasd"]);

Play with this example on the typescript playground

Source: Stack overflow

DEBUG_PRINT_LIMIT is an environment variable used by testing-library to limit the maximum length of DOM content that's printed to the terminal when a test fails (It's not used by jest, it's just testing-library). This is useful because the DOM can be pretty large, and you don't always want to see the entire DOM. But, if you find that you do need to see more of the DOM, you can increase the DEBUG_PRINT_LIMIT from the default of 7000.

DEBUG_PRINT_LIMIT=10000 npm test

You can specify the particular test file you want to run with a pattern, like jest Layout, which will run only tests whose file paths contain "Layout". But if you want a general command that will always run just the tests for files you've changed since your last commit, use jest --onlyChanged, or jest -o for short. Combined with watch, you can use this single command for all your regular development.

jest -o --watch

If you want to run tests for all files changed since a certain commit or branch (e.g. if you're working on a feature branch and want to test all the changed files in that branch), then use jest --changedSince master, where master is that branch you branched off from.

While the point of software engineering itself is pretty much entirely scalable problem solving, there are times when you have a problem that you just can't figure out where to even begin. This is where using a tool or a model to help guide you through a process of understanding the problem is useful.

An issue tree is just one such tool, but it's especially useful against large or complex problems, since it is a technique to break down and structure problems. This means you can divide and conquer the problem, and there's one special characteristic of the issue tree that makes this possible.

So how does it work? When you're breaking down a problem, the question you ask is "Why?", to break down a problem into its subcategories. You have to make sure that the subcategories are mutually exclusive, collectively exhaustive (MECE). So there should be no overlap between the subcategories, and together, they should completely cover the problem. Repeat this question for each subcategory, until you can't answer the "Why?" any more.

This MECE property of issue trees is the characteristic that makes the concept useful, since it means that solving the sub-problems would completely solve the original problem as well. They also create an overview of the problem in a more granular level, which allows you to prioritise the sub-problems.

Once you have your problem tree, you can construct a solution tree by focusing on one problem, and asking the question "How?" instead to create subcategories of solutions, and then coming up with ideas to solve those sub-solutions.

The idea behind all of this is to give yourself some structure and constraints to help increase your creativity when generating reasons for a problem and its solutions. And this technique can be applied to any problem at all, not just work related ones. You want to save up for a vacation, you want to get better at playing the piano, you want to spend less time on social media, any problem where you're not sure of the immediate next step, you can use an issue tree to break down and think about in a much more specific, directed way.

// TODO add an image example

Source: https://untools.co/issue-trees

A lot of us have learned by now the ⌘+⇧+R or Ctrl+Shift+R shortcut to hard reload the page, so that assets cached by the browser are fetched from the internet again. But what if your cache is being particularly stubborn, for example a local DNS cache is still serving an old redirect, and you just want to check if the new site works, without clearing all the caches in your system and network?

That's where the "Empty Cache and Hard Reload" in Chrome comes in, so you can clear the cache just for your current URL. You can access the option in three easy steps:

1. Open the chrome developer tools

   (⌥+⇧+I or View → Developer → Developer Tools or Right click → Inspect)

2. Right click the refresh icon

3. Click "Empty Cache and Hard Reload" in the menu that appears

That's it! This (usually) clears all caches, so both theassets cache and the local DNS cache would be emptied, and you don't have to wait for any TTLs to expire!

Use the backdrop-filter property to create blurred backgrounds.

backdrop-filter: saturate(180%) blur(5px);

If you want to run a command on all the files in a folder, use this command:

for f in * ; do echo "$f" ; done

(Replace echo "$f" with whatever command you want to run)

Don't use xargs, since its input format is not support by most common tools, and it doesn't support filenames with whitespaces or special characters

When running a Dockerfile, docker uses a cached step if all the COPY'd files have the same checksums, otherwise the cache is busted. CMD and RUN steps always use the cached version, unless any previous step busted the cache.