Latest tips / 12

The design mode lets you edit the content of any website directly inline in a WYSIWYG-like fashion. The modifications are locally only but still useful if you want to test something. Keyboard shortcuts like Ctrl+B for bold are supported.

The design mode can be enabled with one line of JavaScript:

// Enable
document.designMode = "on";

// Disable
document.designMode = "off";

// Toggle
document.designMode = document.designMode == "on" ? "off" : "on";

When you add a new git commit in VS Code you can press Arrow Up in the commit message input to get the previous commit message. Press it several times to get older commit messages.

Note: this only works for changes committed with the source control panel in VS Code. It will not show commits from external tools like SourceTree or the terminal.

A rest parameter in a JavaScript function must be the last parameter of the list:

// Does not work
function example(...arg, value) {}

// Works
function example(value, ...args) {}

However, you can use the rest syntax for an array type in TypeScript at any position.

// Expect a list of strings and one number as last parameter
function example(...args: [...string[], number]) {}

// It can also be in the middle of an array
type Example = [boolean, ...string[], number];

You can create an array type with a min length in TypeScript by using the rest syntax.

// Type requires at least one element
type NonEmptyArray<T> = [T, ...T[]];

// Type requires at least three elements
type ThreeOreMoreArray = [T, T, T, ...T[]];

You can now use the type and TypeScript ensures that the array meets the minimum length:

function example(items: NonEmptyArray<string>) {}

// Error: Source has 0 element(s) but target requires 1.
example([]);

// Works
example(["one"]);
example(["one", "two", "three"]);

Console Log statements can be styled with a limited set of CSS features. Insert %c in your log message add an additional parameter with the style.

// Logs "hello world" in red letters
console.log("%chello world", "color:red");

// Use multiple "%c" and multiple style arguments
// Logs "hello world" and "hello" is red
console.log("%chello %cworld", "color:red", "");

// "hello" is italic and "world" has a red border and red text color
console.log(
  "%chello %cworld",
  "font-style:italic" /* styles for "hello" */,
  "border:1px solid red;color:red" /* styles for "world" */
);

Here is how it looks like on your browser console: