Latest tips / 16

The DevTools provide a global copy() function. Use that function in the Console tab to copy any content into your clipboard.

// Copy some static text into the clipboard
copy("hello world");

// Copy the page title
copy(document.title);

// Copy some content from localStorage
copy(localStorage.getItem("test"));

Use $$(...) in the Console tab of the DevTools to query elements. It's a quick way for using querySelectorAll.

// Find all "a" elements
$$("a");

// Find all div elements with "container" in the class attribute
$$("div[class*='container']");

When you select an element in the Elements tab of the Browser DevTools you can use $0 in the Console tab to refer to that element.

// Logs the selected element of the Elements tab
$0;

// Access any property or method on that element
$0.href;

In CSS the special variable currentColor gives you access to the current text color of the element. You can use this value in other properties like border-color to automatically adjust the border to match the text color.

.button {
  border: 1px solid currentColor; /* border color is blue */
  color: blue;
}

.button:hover {
  /* border color automatically changes to darkblue */
  color: darkblue;
}

Angular allows you to listen for specific keys of a keyboard event similar to Vue's Key Modifiers. When listing for a keyboard event like keydown or keyup you can add a key or key combination that you want to listen for.

<!-- Listen for all keys -->
<input (keydown)="onKeyDown()" />

<!-- Listen for enter -->
<input (keydown.enter)="onEnter()" />

<!-- Listen for arrow down -->
<input (keydown.arrowdown)="onArrowDown()" />

<!-- Listen for shift + f -->
<input (keydown.shift.f)="onShiftF()" />