There are cases when you need to select DOM elements without jQuery, such as:

• when jQuery is not available
• when your code is is extremely performance-sensitive
• when you want to operate on an entire HTML document (which is hard to represent ...

tl;dr

In Chrome DevTools in the Sources tab you can activate Event Listener Breakpoints for debugging events.

Example

The Event Listener Breakpoints in the Chrome DevTools can be quiet useful for debugging why and ...

tl;dr

The Chrome DevTools are a neat collection of tools for the daily work as a web developer. If you're lucky, you'll maybe find some handy stuff in here.

Analysing

• [Frontend Performance Issues](https://makandracards.com/maka...

Browsers come with a set of built-in elements like <p> or <input>. When we need a new component not covered by that, we often build it from <div> and <span> tags. An alternative is to introduce a new element, like <my-element>.

When a b...

• Mobile browser's ignore the autoplay attribute on <audio> and <video> elements. Stupid reasons include saving mobile bandwidth on behalf of the user and/or securing app store sales.
• Audio and video elements will only play as the result o...

In Chrome DevTools you can use getEventListeners(object) to get a list of registered event listeners on the specified object.

You can also do this without the console, by selecting an element in the DOM inspector. In the element details, select...

Google Chrome has a subtle rendering bug that hits me once in a while. It usually occurs in sliders with HTML content.

The issue

When a slider contains a composited[1] element, the element will overlap any other element when sliding, being r...

Imagine you have a list you want to render inline on large screens, but stacked on small screens.

<ul>
  <li>high</li>
  <li>medium</li>
  <li>low</li>
</ul>

ul { white-space: nowrap } /* optional: keep items in one line no matter th...