Latest tips / 8

Most CSS properties require a unit, for example padding: 10px. If you use 0 you can omit the unit, like padding: 0.

An exception is the calc() function, which always requires a unit, even for 0.

.example-class {
  padding: 0; /* works */

  height: calc(100vh - 0); /* does NOT work */
  height: calc(100vh - 0px); /* works */
}

That is mainly important if you use CSS custom properties (aka variables) with a default value of 0 inside calc():

.example-class {
  height: calc(100vh - var(--header-height, 0)); /* does NOT work */
  height: calc(100vh - var(--header-height, 0px)); /* works */
}

The Exclude type in TypeScript is a way to exclude certain types from a union.

Let's say you use a third-party package that exports a function with an optional parameter. The parameter uses an inline type which is not exported:

export function fetch(sortBy?: "name" | "date" | "rating") {}

You now want to extract the type of sortBy but exclude undefined from the union (undefined is allowed because the param is optional).

You can use Parameters<T> to get the parameters of the function and Exclude<T> to exclude undefined:

type SortBy = Exclude<Parameters<typeof fetch>[0], undefined>;
// Results in: type SortBy = "name" | "date" | "rating"

Data Binding in Angular Templates binds to properties not attributes. As aria-* attributes are not properties, they cannot be bound to. If you want to bind to aria attributes, you need to use the [attr.aria-*] syntax.

<!-- Does NOT work -->
<div [aria-hidden]="isHidden">
  <!-- ... -->
</div>

<!-- Works -->
<div [attr.aria-hidden]="isHidden">
  <!-- ... -->
</div>

The split() function in JavaScript splits a string into an array by a separator and removes the separator:

// Split by "-"
"hello-from-javascript".split("-");
// Result: ["hello", "from", "javascript"]

// Split by "-" or "_"
"hello-from_javascript".split(/-|_/g);
// Result: ["hello", "from", "javascript"]

Use a RegEx group (...) if you want to keep the separator in the array:

// Split by "-" or "_"
"hello-from_javascript".split(/(-|_)/g);
// Result: ["hello", "-", "from", "_", "javascript"]

The infer keyword in Typescript makes it possible to extract types. This can be used to extract function parameters, generics and more.

// Given the following types ...
export interface Stream<T> { next: (value: T) => void }
export type SpecificStream = Stream<string[]>;

// ... you can extract T into a type
export type ValueOfStream<S> = S extends Stream<infer T> ? T : never;

// ... and use like this
function emitValue(
  stream: SpecificStream,
  value: ValueOfStream<SpecificStream> // Extract T from Stream
) {}

TypeScript provides some built-in types like Parameters and ReturnType.

// Given this type ...
export type SomeFn = (first: string, second: boolean) => string[];

// ... you can extract parameters
export type SecondParam = Parameters<SomeFn>[1];

// ... and the return type
export type ReturnTypeOfSomeFn = ReturnType<SomeFn>;