| function walk(node) { | |
| // I stole this function from here: | |
| // http://is.gd/mwZp7E | |
| var child, next; | |
| var tagName = node.tagName ? node.tagName.toLowerCase() : ""; | |
| if (tagName == 'input' || tagName == 'textarea') { | |
| return; | |
| } |
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
| <?php /* | |
| This program is free software: you can redistribute it and/or modify | |
| it under the terms of the GNU General Public License as published by | |
| the Free Software Foundation, either version 3 of the License, or | |
| (at your option) any later version. | |
| This program is distributed in the hope that it will be useful, | |
| but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| GNU General Public License for more details. |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>MemeMaker-Simple</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <style> |
| /** | |
| * Get a random floating point number between `min` and `max`. | |
| * | |
| * @param {number} min - min number | |
| * @param {number} max - max number | |
| * @return {number} a random floating point number | |
| */ | |
| function getRandomFloat(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } |
| /* Sample JavaScript file added with ScriptTag resource. | |
| This sample file is meant to teach best practices. | |
| Your app will load jQuery if it's not defined. | |
| Your app will load jQuery if jQuery is defined but is too old, e.g. < 1.7. | |
| Your app does not change the definition of $ or jQuery outside the app. | |
| Example: if a Shopify theme uses jQuery 1.4.2, both of these statements run in the console will still return '1.4.2' | |
| once the app is installed, even if the app uses jQuery 1.9.1: | |
| jQuery.fn.jquery => "1.4.2" | |
| $.fn.jquery -> "1.4.2" | |
| */ |
⇐ back to the gist-blog at jrw.fi
Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso
