Today I Learned (2020)

December 14

TIL how to get a reference to a DOM element or React component

If you select a DOM element while in the Elements panel of Chrome DevTools and then type $0 in the Console drawer, you’ll get a reference to the selected element.

For React, you can do the same with $r, which will give you a reference to the component you selected.


April 8

TIL how to expand/collapse a DOM node and all of its children in Chrome DevTools

In the Elements panel, hold the Option key (on a Mac), and then click the arrow next to the element you wish to expand.

More: Chrome DevTools Keyboard Shortcuts

Source: FrontendMasters Course: Mastering Chrome Developer Tools v2


March 23

TIL how to disable hover states on elements for touch screens

The problem: “If you tap on something that has a :hover state but you don’t leave the page then, on a mobile device, there is a chance that :hover state “sticks.”

You can solve this by using the CSS4 media query @media (hover: hover)

In my case, the complete code looks like this:

@media (hover: hover) and (pointer: fine) {
  &:hover .filters__label-checkbox:after {
    border-color: $brand-primary;
  }
}

This allows me to have a red border on :hover (on custom checkboxes) for desktop but removes it for touch screens.

Source: Solving Sticky Hover States with @media (hover: hover)


February 26

TIL to remind myself of something greater than my petty bugs when stuck

This image has an empty alt attribute; its file name is infinity.png

Source: The Rails 5 Way by Obie Fernandez


February 25

TIL the Emmet shortcut to wrap code with an element

  1. Select the code you wish to wrap in an element
  2. Hit CMD + SHIFT + P
  3. Start typing Emmet Wrap with Abbreviation + hit ENTER
  4. Type the element you need, for example, div. You can use Emmet here too, div.yourclass