Skip to content
tinytip

Latest tips / 12

Enable smooth scrolling with scroll-behavior in CSS

July 28, 2021
#css

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;
}

Enable Screencast Mode in VS Code

July 3, 2021
#vscode

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.

Toggle Screencast Mode in VS Code

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

Toggle Screencast Mode in VS Code

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
}

Unsubscribe multiple RxJS subscriptions with Subscription.add()

July 3, 2021
#rxjs

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();

Edit any website in design mode

July 3, 2021
#javascript #html

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";

Reuse the last git commit message in VS Code

June 27, 2021
#vscode

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.

Demo of how to get the previous commit message in VS Code

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.