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
| /** | |
| * Typing animation with pure CSS. | |
| * Works best in browsers supporting the ch unit. | |
| */ | |
| @keyframes typing { from { width: 0; } } | |
| @keyframes blink-caret { 50% { border-color: transparent; } } | |
| h1 { | |
| font: bold 200% Consolas, Monaco, monospace; |
| UPDATE personas | |
| SET | |
| updated_at = ( | |
| SELECT personas_23_dic.updated_at | |
| FROM personas_23_dic | |
| WHERE DATE(personas.updated_at) = '2013-12-24' and personas.id = personas_23_dic.id | |
| ) | |
| WHERE EXISTS ( | |
| SELECT * | |
| FROM personas_23_dic.id = personas.id |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()