Latest tips / 12

You can change the scroll behavior of your page (or an element) with the scroll-behavior property. Using smooth will enable animated scrolling when the user clicks on an anchor link on your page. Normal scrolling by the user is not affected by this property.

html {
  scroll-behavior: smooth;
}

Visual Studio Code has an integrated Screencast Mode. This can be useful when sharing your screen or making videos. Press Ctrl+Shift+P (or Cmd+ShiftP on macOS) to open the command palette, search for "Screencast" and select the Developer: Toggle Screencast Mode command.

Screencast Mode shows whenever you click with the mouse (a red circle appears) or press a key.

The appearance of these elements can be customized in the settings. If you want to show only keyboard shortcuts and not all keys, you can configure the following property:

{
  "screencastMode.onlyKeyboardShortcuts": true
}

The Subscription class in RxJS has an add() method that let's you add subscriptions. All added subscriptions will be unsubscribed when you call unsubscribe() on the root subscription.

This lets you clean up multiple subscriptions with one command.

// Create a new subscription
const subscription = new Subscription();

// Subscribe to some observables
// and add them to the subscription
subscription.add(one$.subscribe({ /* ... */ }));
subscription.add(two$.subscribe({ /* ... */ }));
subscription.add(three$.subscribe({ /* ... */ }));

// During clean up
// This unsubscribes the subscription of one$, two$ and three$
subscription.unsubscribe();

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.