| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="manifest" href="https://jsbin-user-assets.s3.amazonaws.com/kinlan/manifest.json"> | |
| <title>iOS Manifest Polyfill</title> | |
| </head> | |
| <body> |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
The final result: require() any module on npm in your browser console with browserify
This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.
Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5
The CSSTidy package for SublimeText 2 works great for toggling between different CSS formats, but none of the default options output CSS consistent with the Drupal CSS coding standards with selectors, braces and properties indented and formatted like so:
selector {
property: value;
}
CSSTidy allows you to add your own templates, but the documentation is sparse, then there's the matter of the Sublime Text 2 integration. If I hadn't been deeply procrastinating, I would not have had th patience to figure it all out. Here's what to do:
Because somehow I always end up trolling the interwebs looking for a reference for these.
| Symbol | Code | Entity Name |
|---|
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
| @media only screen and (-webkit-min-device-pixel-ratio: 1.5), | |
| only screen and (min--moz-device-pixel-ratio: 1.5), | |
| only screen and (-o-device-pixel-ratio: 3/2), | |
| only screen and (min-device-pixel-ratio: 1.5) { | |
| /* High-res version of image assets go here */ | |
| } |
| /* ---------------------------------------------------------- */ | |
| /* */ | |
| /* A media query that captures: */ | |
| /* */ | |
| /* - Retina iOS devices */ | |
| /* - Retina Macs running Safari */ | |
| /* - High DPI Windows PCs running IE 8 and above */ | |
| /* - Low DPI Windows PCs running IE, zoomed in */ | |
| /* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
| /* - Android hdpi devices and above */ |
| var child_process = require('child_process'); | |
| // exec: spawns a shell. | |
| child_process.exec('ls -lah /tmp', function(error, stdout, stderr){ | |
| console.log(stdout); | |
| }); | |
| // execFile: executes a file with the specified arguments | |
| child_process.execFile('ls', ['-lah', '/tmp'], function(error, stdout, stderr){ | |
| console.log(stdout); |