paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

paulirish

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

Zulko

# Result: http://i.imgur.com/thrh1TU.gif

from moviepy.editor import *

# We start with a looping gif, and we will add some text
clip = VideoFileClip("eugene.gif").speedx(0.7) # slow down a little

txt = (TextClip("Hey", fontsize=78, font='Impact-Normal',
                     color='yellow', stroke_color='black',
                     stroke_width=3, kerning=1.5)

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

monostere0

(function(window){

	var EVENT_EXISTS = 'GlobalEvents: Event already exists.';

	var eventIsRunning, 
		_eventStack,
		_findByName,
		stackEvent,
		removeEvent,
		eventListener,

ebidel

Blink aborts computing styles on descendants of display:none nodes. If the inside of the iframe has , you make remove recalc style, no layout, no painting. still does all that work because it's another document and the display:none effect does not transcend into the other document.

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

ebidel

javascript:(function(){function isUnregisteredCustomElement(el){if(el.constructor==HTMLElement){console.error("Found unregistered custom element:",el);return true;}return false;}function isCustomEl(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}var allCustomElements=document.querySelectorAll('html /deep/ *');allCustomElements=Array.prototype.slice.call(allCustomElements).filter(function(el){return isCustomEl(el);});var foundSome=false;for(var i=0,el;el=allCustomElements[i];++i){if(isUnregisteredCustomElement(el)){foundSome=true;}}if(foundSome){alert('Oops: found one or more unregistered custom elements in use! Check the console.');}else{alert('Good: All custom elements are registered :)');}})();

kangax

<!--
    <component-name>[--modifier-name|__descendent-name]
    
    .component {}
    .component__descendant {}
    .component--modifier {}
-->

<article class="tweet tweet--is-expanded">
  <header class="tweet__header">