Today I Learned

2020

April, 8

.. 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.

Via: FrontendMasters Course “Mastering Chrome Developer Tools v2” by Jon Kuperman

More: Chrome DevTools Keyboard shortcuts

March, 23

.. 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

.. how to remind myself of something greater than my petty bugs when stuck 🐛. From The Rails 5 Way by Obie Fernandez

February, 25

.. 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